cx-wed/src/components/subject/projectplan/CollectiveLandAcquisition/Scommit.vue

<template>
	<div class="SignAcontract">
		<div class="SignAcontract-content">
			<div class="SignAcontract-content-right">
				<div class="button-background" @click="control(0)"><el-button :disabled='PlacementMode==1'>上一步</el-button></div>
				<el-steps :active="index" align-center style="width: calc(100% - 212px);">
				  <el-step title="打印付款单" ></el-step>
				  <el-step title="上传付款单" ></el-step>
				  <el-step title="完成" ></el-step>
				</el-steps>
				<div class="button-background" @click="control(1)"><el-button>下一步</el-button></div>
			</div>
			<div class="SignAcontract-content-lent">
				<div class="SignAcontract-content-lent-data" v-if="index==1">
					<div class="button-background">
						<el-button @click="RoomC()">打印</el-button>
					</div>
					<div class="contractA" id="RoomC">
						<div class="contractA-title" style="color: #000;">
						房屋征收补偿款领款单
						</div>
						<div class="contractA-name">
							<div>
								兹有<span>{{strpdetails.bussiness.projectName}}</span>被征收人<span>{{datahousehold.householderName}}</span>，按<span>{{datahousehold.moveBackCode}}住宅产权调换协议</span>（协议编号：<span>{{datahousehold.moveBackCode}}</span>）领取房屋征收补偿资金
								
								<span style="color: red;border-bottom: 1px solid red;"
								 contenteditable v-html="datahousehold.thisPayAmount" @blur="changesont($event.target.innerText);$event.target.innerText=datahousehold.thisPayAmount"></span>
								
								元，大写 <span>{{transformation(datahousehold.thisPayAmount)}}</span>
							</div>
							<div>
								领款人承诺:今后如其他当事人持异议时由本人负责。
							</div>
							<div>
								领款人(签字):
							</div>
							<div>
								领款人身份证号:
							</div>
							<div>
								备注：<span></span>
							</div>
						</div>
						<div class="contractA-bottom" style="margin: 4rem 0;">
							<div style="text-indent: 2em;">
								征收实施单位（盖章）：<span>慈溪市房屋征收所</span>
							</div>
							<div style="display: flex;justify-content: space-around;margin-bottom: 3rem;line-height: 2em;">
								<div>经办人：<span>{{username}}</span></div>
								<div style="display: flex;">日期<p style="letter-spacing: 2rem;margin: 0;">：年月日</p></div>
							</div>
							<div class="contractA-bottom-b" style="text-align: inherit;text-indent: 2em;">
								注：领款人领款时应随带补偿协议、身份证。
							</div>
						</div>
					</div>
				</div>
				<div class="Upload" v-if="index==2">
					<div class="Upload-butom">
						
						<div class="Upload-butom-tow">
								<h3>补偿款领款日期：</h3>
								<el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" 
								v-model="payDate" style="width: 250px;"></el-date-picker>
						</div>
						<div class="Upload-butom-ont" v-for="(item,index) in fileListindex" :key="index">
							<div class="tc-middle-add">
								<h3>打款凭证：</h3>
							</div>
							<div class="tc-middle-name">
								<ul>
									<li v-for="itemid in item.tree" @click="nodeClic(itemid)">
										<i class="el-icon-error" @click.stop="deleteFile(itemid)"></i>
										<img v-if="itemid.name.split('.').pop().toLowerCase()=='pdf'" src="../../../../assets/file-pdf.png" alt="">
										<img v-else-if="itemid.name.split('.').pop().toLowerCase()=='png'||itemid.name.split('.').pop().toLowerCase()=='jpg'"
										  src="../../../../assets/file-img.png" alt="">
										<img v-else-if="itemid.name.split('.').pop().toLowerCase()=='text'" src="../../../../assets/file-excel.png" alt="">
										<img v-else src="../../../../assets/file-other.png">
										<div><Tooltip :text="itemid.name"></Tooltip></div>
									</li>
									<el-upload action='' :auto-upload="false" :headers="tokenData" :on-change="handleChang" :show-file-list="false">
									  <li @click="selectFile()">
									  	<div class="add">
									  		<div class="add-top">
									  			<span class="el-icon-plus"></span>
									  		</div>
									  		<div class="add-buttom">
									  			添加文件
									  		</div>
									  	</div>
									  </li>
									</el-upload>
								</ul>
							</div>
						</div>
						<div class="Upload-butom-ont">
							<div class="tc-middle-add">
								<h4>情况说明：</h4>
							</div>
							<div class="tc-middle-name">
								<div class="form" style="padding: 0;">
									<el-form>
										<el-form-item label="情况说明" label-width="130px" style="width: 100%;">
											<el-input v-model='Reremar' type="textarea" :rows="4" placeholder="请输入情况说明"
												style="width: 100%;"></el-input>
										</el-form-item>
									</el-form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	import Tooltip from '../../../assembly/tooltip.vue'
	export default {
		name: "survey",
		props: ['strpdetails','datahouseholdmax'],
		components:{
			Tooltip
		},
		data() {
			return {
				index:1,
				PlacementMode:0,
				username:'',
				
				uuid:'',
				payDate:'',
				fileListindex:[],
				defaultOpen: require("../../../../assets/file-plus.png"),
				defaultClose: require("../../../../assets/file-reduce.png"),
				Reremar:'',
				tokenData: {
					token: window.sessionStorage.getItem('token')
				},
				datahousehold:{}
			}
		},
		computed: {},
		mounted() {
			console.log(this.datahouseholdmax.accountsPayable)
			
			this.datahousehold=this.datahouseholdmax
			this.getName()
			if(!this.datahousehold.thisPayAmount){
				this.index=1
			}else{
				this.index=2
				this.getUid()
				this.getgetexaminefile()
			}
		},
		methods: {
			// 货币安置和房票安置部分
			changesont(value){
				if(Number(value) >this.datahouseholdmax.accountsPayable) {
					this.datahousehold.thisPayAmount = this.datahouseholdmax.accountsPayable;
				}else{
					this.datahousehold.thisPayAmount=Number(value)
				}
			},
			control(row){
					var Positive =0
					if(row){
						this.index++
						Positive =0
					}else{
						this.index--
						Positive =1
					}
					if(this.index<=1){
						this.index=1
						
					}else if(this.index==2){
						this.addagreement(0)
						this.getUid()
						this.getgetexaminefile()
					}else if(this.index>=3){
						this.payrecord()
						this.index=2
					}
			},
			payrecord(){
				var data={
					id:this.uuid,
					householdId:this.datahousehold.id,
					payDate:this.payDate,
					payAmount:this.datahousehold.thisPayAmount,
					remarks:this.Reremar
				}
				this.$http.post('api/auth/payrecord/pay', data).then((res) => {
					if (res.status == 200 && res.data.code == 0) {
						// this.username = res.data.user.name
						this.$message.success('付款成功!');
						this.datahousehold.thisPayAmount=''
						this.$emit('getlist',3)
						// this.addagreement(1)
					} else {
						this.$message.error('失败!');
					}
				})
			},
			// 获取姓名
			getName() {
				this.$http.get('api/v1/pri/userInfo', null).then((res) => {
					if (res.status == 200 && res.data.code == 0) {
						this.username = res.data.user.name
					} else {
						this.$message.error('失败!');
					}
				})
			},
			addagreement(row){
					this.$http.post('api/auth/householdcx/update',this.datahousehold).then((res) => {
						if (res.status == 200 && res.data.code == 0) {
							// this.agreementControl = false
							this.datahousehold=res.data.data
						} else {
							this.$message.error("失败!");
						}
					})
			},
			// 数字转大写（不带单位）
			  transformation(n){
			    if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n)){
			        return "";  //判断数据是否大于0
			    }
			    var unit = "千百拾亿千百拾万千百拾元角分", str = "";
			    n += "00";  
			    var indexpoint = n.indexOf('.');  // 如果是小数，截取小数点前面的位数
			    if (indexpoint >= 0){
			        n = n.substring(0, indexpoint) + n.substr(indexpoint+1, 2);   // 若为小数，截取需要使用的unit单位
			    }
			    unit = unit.substr(unit.length - n.length);  // 若为整数，截取需要使用的unit单位
			    for (var i=0; i < n.length; i++){
			        str += "零壹贰叁肆伍陆柒捌玖".charAt(n.charAt(i)) + unit.charAt(i);  //遍历转化为大写的数字
			    }
			    return str.replace(/零(千|百|拾|角)/g, "零").replace(/(零)+/g, "零").replace(/零(万|亿|元)/g, "$1").replace(/(亿)万|壹(拾)/g, "$1$2").replace(/^元零?|零分/g, "").replace(/元$/g, "元整"); // 替换掉数字里面的零字符，得到结果
			  },
			  // 获取uuid
			  getUid(){
			      var s = [];
			      var hexDigits = "0123456789abcdef";
			      for (var i = 0; i < 30; i++) {
			      s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
			      }
			      s[14] = "4";
			      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
			      var uuid = s.join("");
			      this.uuid = uuid;
			      return uuid;
			  },
			  // 上传文件按钮
			  selectFile() {
			    this.selectFileName = '3、审批后资料/5、打款凭证'+'/'+this.uuid;
			  },
			  // 上传文件
			  handleChang(file) {
			    let that = this;
			    let formData = new FormData();
			    formData.append('file', file.raw);
			    formData.append('type', 2);
			    formData.append('id', this.datahousehold.id);
			    formData.append('destfolder', this.selectFileName);
			    that.$http.post('api/auth/file/upload', formData).then((res) => {
			      if (res.status == 200 && res.data.code == 0) {
			        that.$message.success("上传文件成功!");
			        this.getgetexaminefile();
			      } else {
			        that.$message.error("上传文件失败!");
			      }
			    });
			  },
			  //获取文件
			  getgetexaminefile(){
			  	  this.$http.get('api/auth/file/fileList?type=' + 2 + '&id=' + this.datahousehold.id, null).then((res) => {
			  	    if (res.status == 200 && res.data.code == 0) {
			  			this.fileListindex = res.data.list
			  			var data=[
			  				{name:'5、打款凭证',empty:false,type: "folder",url:'5、打款凭证',tree:[]},
			  			]
			  			if(this.fileListindex){
			  				this.fileListindex.forEach((item,index)=>{
			  					if(item.empty==false){
									if(item.name=='3、审批后资料'){
										item.tree.forEach((nale,ixde)=>{
											if(nale.name=='5、打款凭证'){
												if(nale.tree!=null&&nale.tree.length!=0){
													nale.tree.forEach((nana,ixde)=>{
														if(nana.name==this.uuid){
															data[0]=nana
														}
													})
												}
											}
										})
									}
			  					}
			  				})
			  			}
			  			this.fileListindex=data
			  		} else {
			  	      this.$message.error("查找文件列表失败!");
			  	    }
			  	});
			  },
			  //删除文件
			  deleteFile(item) {
			  	var data = new FormData;
			  	data.append("delFileUri", item.url);
			  	data.append("id", this.datahousehold.id);
			  	data.append("type", 2);
			  	this.$confirm('确定要删除该文件吗？').then(_ => {
			  		this.$http.post('api/auth/file/removeFile', data).then((res) => {
			  			if (res.status == 200 && res.data.code == 0) {
			  				this.$message.success('删除该文件成功!');
			  				this.getgetexaminefile();
			  			} else {
			  				this.$message.error('删除该文件失败!');
			  			}
			  		})
			  	})
			  },
			  nodeClic(val) {
			    this.dataurl=''
			    var data = new FormData;
			    data.append("downloadFileUri", val.url);
			    data.append("id",this.datahousehold.id);
			    data.append("type",2);
			    this.$http.post('api/auth/file/download', data, {responseType: 'blob'}).then((res) => {
			      if (res.headers['content-type'] == "application/octet-stream;charset=utf-8"||res.headers['content-type'] == "application/octet-stream;charset=UTF-8") {
			        //此处有个坑。这里用content保存文件流，最初是content=res，
			        //检查了下才发现，后端对文件流做了一层封装，所以将content指向res.data即可
			        //另外，流的转储属于浅拷贝，所以此处的content转储仅仅是便于理解，并没有实际作用=_=
			        const content = res.data
			        const type = {
			          xml: 'text/xml',
			          zip: 'application/zip',
			          doc: 'application/msword',
			          bin: 'application/octet-stream',
			          exe: 'application/octet-stream',
			          so: 'application/octet-stream',
			          dll: 'application/octet-stream',
			          pdf: 'application/pdf',
			          ai: 'application/postscript',
			          xls: 'application/vnd.ms-excel',
			          ppt: 'application/vnd.ms-powerpoint',
			          dir: 'application/x-director',
			          js: 'application/x-javascript',
			          swf: 'application/x-shockwave-flash',
			          xhtml: 'application/xhtml+xml',
			          xht: 'application/xhtml+xml',
			          mid: 'audio/midi',
			          midi: 'audio/midi',
			          mp3: 'audio/mpeg',
			          rm: 'audio/x-pn-realaudio',
			          rpm: 'audio/x-pn-realaudio-plugin',
			          wav: 'audio/x-wav',
			          bmp: 'image/bmp',
			          gif: 'image/gif',
			          jpeg: 'image/jpeg',
			          jpg: 'image/jpeg',
			          png: 'image/png',
			          css: 'text/css',
			          html: 'text/html',
			          htm: 'text/html',
			          txt: 'text/plain',
			          xsl: 'text/xml',
			          mpeg: 'video/mpeg',
			          mpg: 'video/mpeg',
			          avi: 'video/x-msvideo',
			          movie: 'video/x-sgi-movie',
			          xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
			        }
			        const blob = new Blob([content], { // 关键代码
			          type: type[val.url.split('.').pop().toLowerCase()]
			        }) //构造一个blob对象来处理数据
			        this.dataurl = window.URL.createObjectURL(blob)
			  	  this.Examine=true
			      }
			    });
			  },
			RoomC(){
					this.$nextTick(function() {
						//判断iframe是否存在，不存在则创建iframe
						var iframe = document.getElementById("print-iframe");
						var el = document.getElementById("RoomC");
						iframe = document.createElement('IFRAME');
						var doc = null;
						iframe.setAttribute("id", "print-iframe");
						iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
						document.body.appendChild(iframe);
						doc = iframe.contentWindow.document;
						//这里可以自定义样式
						doc.write(
							'<style media="print">@page {size: auto;margin: 30mm;}.contractA{width: 100%;height: 100%;color: #000000;}span {word-break: break-all;border-bottom: 1px solid #000;min-width: 50px;display: inline-block;line-height: 3rem;text-align: center;text-indent: 0em;margin:0;line-height: 1.5rem}.contractA-title{width: 100%;text-align: center;font-size: 20px;font-weight: bolder;margin-bottom: 5mm;}.contractA-name{text-indent: 2em;line-height: 2rem;font-size: 18px;}.contractA-bottom{font-size: 18px;margin-top: 7mm;}.contractA-bottom-a{display: flex;}.contractA-bottom-a div{width: 50%;text-align: center;}.contractA-bottom-b{text-align: center;margin-bottom: 7mm;}.contractA-bottom-c{text-align: right;letter-spacing: 3rem;}</style>'
						); //解决出现页眉页脚和路径的问题
						doc.write('<div>' + el.innerHTML + '</div>');
						doc.close();
						iframe.contentWindow.focus();
						setTimeout(function() {
							iframe.contentWindow.print();
						}, 50) //解决第一次样式不生效的问题
						if (navigator.userAgent.indexOf("MSIE") > 0) {
							document.body.removeChild(iframe);
						}
					})
			},
		}
	}
</script>

<style scoped lang="less">
	.button-background .el-button{
		border-radius: 5px;
	}
	.SignAcontract{
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		.indexbutton{
			position: absolute;
			top: 0;
			right: 0;
			width: 100%;
			height: 100%;
			background-color: #00000050;
			ul{
				position: fixed;
				z-index: 11;
				top: 40%;
				left: 25%;
				width: 50%;
				display: flex;
				justify-content: space-evenly;
				li{
					width: 100px;
					height: 150px;
					// background-image: linear-gradient(-225deg, #7DE2FC 0%, #B9B6E5 100%);
					background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
					border-radius: 20px;
					line-height: 150px;
					color: #fff;
					font-size: 18px;
					text-align: center;
					cursor: pointer;
					&:nth-child(2){
						// background-image: linear-gradient(-225deg, #CBBACC 0%, #2580B3 100%);
						background-image: linear-gradient(to left, #BDBBBE 0%, #9D9EA3 100%), radial-gradient(88% 271%, rgba(255, 255, 255, 0.25) 0%, rgba(254, 254, 254, 0.25) 1%, rgba(0, 0, 0, 0.25) 100%), radial-gradient(50% 100%, rgba(255, 255, 255, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%); background-blend-mode: normal, lighten, soft-light;
					}
					&:nth-child(3){
						// background-image: linear-gradient(-225deg, #B7F8DB 0%, #50A7C2 100%);
						background-image: linear-gradient(to top, #505285 0%, #585e92 12%, #65689f 25%, #7474b0 37%, #7e7ebb 50%, #8389c7 62%, #9795d4 75%, #a2a1dc 87%, #b5aee4 100%);
					}
				}
			}
		}
		.SignAcontract-content{
			position: fixed;
			top: 20%;
			right: 25%;
			z-index: 11;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			width: 50%;
			height: 60%;
			.SignAcontract-content-right{
				border-radius: 5px;
				width: 100%;
				height: 100px;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				padding: 20px;
				box-sizing: border-box;
				/deep/.is-finish{
					color: #439dc1;
					border-color: #439dc1;
				}
				/deep/.is-process{
					color: #c0c4cc;
					border-color: #c0c4cc;
				}
				/deep/.el-step{
					// &:nth-child(1){
					// 	flex-basis: 25% !important;
					// 	.el-step__line{
					// 		right: -100%;
					// 	}
					// }
					// &:nth-child(2){
					// 	flex-basis: 50% !important;
					// 	.el-step__line{
					// 		right: -25%;
					// 	}
					// }
					// &:nth-child(3){
					// 	flex-basis: 25% !important;
					// }
				}
			}
			.SignAcontract-content-lent{
				width: 100%;
				height: calc(100% - 125px);
				background-color: #fff;
				border-radius: 5px;
				padding: 20px;
				box-sizing: border-box;
				overflow: auto;
				& {
					scrollbar-width: thin;
					scrollbar-color: #c1c1c1 #eee;
				}
				&::-webkit-scrollbar {
					width: 6px;
					background-color: #eee;
				}
				&::-webkit-scrollbar-thumb {
					background-color: #c1c1c1;
					&:hover {
						background-color: #a8a8a8;
					}
					&:active {
						background-color: #787878;
					}
				}
				.Upload{
					width: 100%;
					height: 100%;
					.Upload-top{
						height: 38px;
						display: flex;
						justify-content: space-between;
						.button-background {
								margin-right: 10px;
							}
					}
					.Upload-butom{
						width: 100%;
						height: 100%;
						// height: calc(100% - 38px);
						.Upload-butom-tow{
							width: 100%;
							height: 40px;
							display: flex;
							h3{
								font-size: 18px;
								color: #439dc1;
								line-height: 40px;
								&::before{
									content: "*";
									color: #f56c6c;
									margin-right: 5px;
								}
							}
						}
						.Upload-butom-ont{
							width: 100%;
							height: calc(50% -20px);
							.tc-middle-add {
								display: flex;
								h3{
									font-size: 18px;
									color: #439dc1;
									margin: 15px 0;
									&::before{
										content: "*";
										color: #f56c6c;
										margin-right: 5px;
									}
								}
								h4{
									font-size: 18px;
									color: #439dc1;
									margin: 15px 0;
								}
							}
							.tc-middle-empty{
								width: 100%;
								img{
									margin: 0 auto;
									display: block;
								}
							}
							.tc-middle-name{
								width: 100%;
								ul{
									width: 100%;
									display: flex;
									li{
										width: 100px;
										height: 110px;
										cursor: pointer;
										margin: 0 10px;
										position: relative;
										border: 1px solid #dedede;
										border-radius: 10px;
										padding: 10px;
										box-sizing: border-box;
										&:hover{
											i{
												display: block;
											}
										}
										i{
											position: absolute;
											top: -9px;
											right: -9px;
											color: #FF4500;
											font-size: 25px;
											display: none;
										}
										img{
											width: 55px;
											margin: 0 auto;
											display: block;
										}
										div{
											width: 100%;
											display: block;
											text-align: center;
											color: #5e5e5e;
											margin: 2px;
											margin-top: 8px;
											overflow: hidden;
											text-overflow: ellipsis;
											word-break: break-all;
											font-size: 14px;
											display: inline-block;
											display: -webkit-box !important;
											-webkit-line-clamp: 1;
											-webkit-box-orient: vertical;
											span {
											  display: initial;
											  white-space: break-spaces;
											}
										}
										.add{
											width: 100%;
											height: 100%;
											.add-top{
												margin: 0 auto;
												width: 80%;
												height: 60%;
												border: 2px dotted #c6c6c6;
												border-radius: 5px;
												position: relative;
												span{
													display: inline;
													position: absolute;
													top: calc(50% - 15px);
													left:  calc(50% - 15px);
													font-size: 30px;
													color: #bbb;
												}
											}
											.add-buttom{
												color: #5e5e5e;
											}
										}
									}
								}
							}
						}
					}
				}
				.SignAcontract-content-lent-data{
					width: 100%;
					height: 1000px;
					span {
						word-break: break-all;
						border-bottom: 1px solid #000;
						min-width: 50px;
						display: inline-block;
						line-height: 18px;
						text-align: center;
						text-indent: 0em;
					}
					td{
						border-bottom: 1px solid #000;
						border-right: 1px solid #000;
					}
					.contractA {
						width: 100%;
						height: calc(100% - 40px);
						padding: 3%;
						font-size: 15px;
						box-sizing: border-box;
						.contractA-title {
							width: 100%;
							text-align: center;
							font-size: 20px;
							font-weight: bolder;
							margin-bottom: 1%;
						}
					
						.contractA-name {
							text-indent: 2em;
							line-height: 2em;
							font-size: 18px;
						}
					
						.contractA-bottom {
							margin-top: 2rem;
							font-size: 18px;
							.contractA-bottom-a {
								display: flex;
								line-height: 2rem;
								div {
									width: 50%;
									text-align: center;
								}
							}
					
							.contractA-bottom-b {
								text-align: center;
								line-height: 2rem;
								margin-bottom: 2rem;
							}
					
							.contractA-bottom-c {
								text-align: right;
								letter-spacing: 2rem;
							}
						}
					}
				}
				.toexamine{
					height: 500px;
				}
			}
		}
	}
	.FarmerPreferenceCss{
		width: 100%;
		p{
			font-size: 16px;
			color: #439dc1;
		}
		.FarmerPreferenceCss-top{
			width: 100%;
			
		}
		.FarmerPreferenceCss-buttom{
			ul{
				li{
					display: flex;
					margin: 5px 0;
					span{
						padding: 5px;
					}
					.name{
						padding: 5px;
						border-radius: 5px;
						background-color: #e6a23c;
						color: #fff;
					}
					.ont{
						color: #f56c6c;
					}
					.tow{
						color: #78c951;
					}
				}
			}
		}
	}
</style>