宗地表单和权利性质表单验证

杨威
Showing 2 changed files with 227 additions and 53 deletions
src/components/formMenu/qlxz.vue
src/views/zd/zddcb/index.vue
--- a/src/components/formMenu/qlxz.vue
View file @84cf821
+++ b/src/components/formMenu/qlxz.vue
View file @84cf821
@@ -105,9 +105,11 @@
 								:disabled="formData.qszt!='0'"
 								v-model="childItem.tdsyqssj"
 								type="date"
+								ref="tdsyqssj"
 								:picker-options="childItem.pickerStart"
 								value-format="yyyy-MM-dd"
 								placeholder="选择日期"
+								@blur="inputBlur($event,true)"
 								@input="startTime(index,childIndex)"
 							>
 							</el-date-picker>
@@ -151,7 +153,11 @@
 						<li>
 							<input
 								type="text"
+								ref="syqx"
+								@blur="inputBlur($event,false)"
+								maxlength="3"
+								onkeyup="value=value.replace(/[^\d]/g,'')" 
+								@input="sumTime(index,childIndex,childItem.syqx,childItem.syqx)"
 								:disabled="formData.qszt!='0'"
 								v-model="childItem.syqx"
 								class="formInput"
@@ -212,8 +218,10 @@
 								:disabled="formData.qszt!='0'"
 								v-model="childItem.tdsyjssj"
 								type="date"
+								ref="tdsyjssj"
+								@blur="inputBlur($event,true)"
 								:picker-options="childItem.pickerEnd"
-								@input="endTime(index,childIndex)"
+								@input="endTime(index,childIndex,$event)"
 								value-format="yyyy-MM-dd"
 								placeholder="选择日期"
 							>
@@ -234,6 +242,7 @@
 					:props="treeProps"
 					:check-strictly="checkStrictly"
 					:clearable="clearable"
+					ref="qlxzdm"
 					v-model="items.qlxzdm"
 				></el-select-tree>
 			</div>
@@ -301,6 +310,7 @@ export default {
 				},
 			],
 			outNum: 0,
+			rulesResult:true,//权利性质表单校验结果
 		};
 	},
 	created() {},
@@ -323,10 +333,22 @@ export default {
            if (Object.keys(startTime).length > 0 && Object.keys(endTime).length > 0) {
               let startYear= new Date(startTime).getFullYear();
 			   let endYear=new Date(endTime).getFullYear();
-               this.countList[index].list[childIndex].syqx=endYear-startYear;
+			   //年限暂时不算
+               // this.countList[index].list[childIndex].syqx=endYear-startYear;
            }
 		},
-        endTime(index,childIndex){
+		sumTime(index,childIndex,syqx,e){
+			console.log(e,'eeee');
+			this.$refs.syqx.forEach((item,index)=>{
+				if(item.value == syqx){
+					this.$refs.tdsyjssj[index].$el.style.border=""
+				}
+			})
+			let startTime =  this.countList[index].list[childIndex].tdsyqssj;
+			this.countList[index].list[childIndex].tdsyjssj = Number(startTime.substring(0,4))+Number(syqx)+startTime.slice(4,10);
+		},
+        endTime(index,childIndex,e){
+			console.log(e,'eeeeee');
            let startTime = this.countList[index].list[childIndex].tdsyqssj;
            let endTime =  this.countList[index].list[childIndex].tdsyjssj;
            this.countList[index].list[childIndex].pickerStart={
@@ -341,7 +363,7 @@ export default {
            if (Object.keys(startTime).length > 0 && Object.keys(endTime).length > 0) {
                let startYear= new Date(startTime).getFullYear();
                let endYear=new Date(endTime).getFullYear();
-                this.countList[index].list[childIndex].syqx=endYear-startYear;
+                // this.countList[index].list[childIndex].syqx=endYear-startYear;
            }
 		},
 		//外层操作
@@ -432,8 +454,94 @@ export default {
 			});
 		},
 		getQlxzDataList() {
+			console.log(this.countList,'this.countList');
 			return this.countList;
 		},
+		getRules(){
+			let rules = [];
+			console.log(this.$refs.tdsyqssj,'this.$refs.qlxzdm');
+			console.log(this.countList,'this.countList');
+			let temp = 0;
+			this.countList.forEach((item,index)=>{
+				rules.push({
+					data:this.countList[index].qlxzdm,
+					name:'权利性质',
+					dom:this.$refs.qlxzdm[index],
+					rule: /^\s*$/g, //非空
+				})
+				item.list.forEach((j,ind)=>{
+					rules.push(
+						{
+							data:item.list[ind].tdsyqssj,
+							name:'土地使用起始时间',
+							dom:this.$refs.tdsyqssj[temp+ind],
+							// val:this.$refs.tdsyqssj[temp+ind].value,
+							rule: /^\s*$/g, //非空
+						},
+						{
+							data:item.list[ind].syqx,
+							name:'使用期限',
+							dom:this.$refs.syqx[temp+ind],
+							// val:this.$refs.syqx[temp+ind].value,
+							rule: /^\s*$/g, //非空
+						},
+						{
+							data:item.list[ind].tdsyjssj,
+							name:'土地使用结束时间',
+							dom:this.$refs.tdsyjssj[temp+ind],
+							// val:this.$refs.tdsyjssj[temp+ind].value,
+							rule: /^\s*$/g, //非空
+						},
+					)
+					if (ind == item.list.length-1) {
+						temp += item.list.length;
+					}
+				})
+			})
+			this.rulesResult = true;
+			rules.forEach(item=>{
+				if(item.rule.test(item.data) || item.data == null){
+					if(item.dom.$el){
+						item.dom.$el.style.border = '1px solid red';
+					}else{
+						item.dom.style.border = '1px solid red';
+					}
+					// this.$message({
+					// 	// message: item.name+'不能为空',
+					// 	message: '不能为空',
+					// 	type: "warning",
+					// });
+					this.rulesResult = false;
+					return false
+				}
+			})
+			// console.log(rules,'rules');
+		},
+		getRulesResult(){
+			return this.rulesResult
+		},
+		inputBlur(e,flag){
+			if (flag) {
+				if(e.value!=''){
+					e.$el.style.border=""
+				}else{
+					e.$el.style.border="1px solid red"
+				}
+			}else{
+				if(e.target.value!=''){
+					e.target.style.border=""
+				}else{
+					e.target.style.border="1px solid red"
+				}
+			}
+		},
+		//后续考虑在点击加减号时操作校验规则
+		// addRules(){
+		// 	this.tempQssj.push()
+		// },
+		// minusRules(){
+		// },
 	},
 };
 </script>
--- a/src/views/zd/zddcb/index.vue
View file @84cf821
+++ b/src/views/zd/zddcb/index.vue
View file @84cf821
@@ -81,7 +81,7 @@
 					</td>
 					<td colspan="2">宗地特征码<i class="requisite">*</i></td>
 					<td colspan="4">
-						<el-select class="formSelect" :disabled="formData.qszt!='0'" v-model="formData.zdtzmbsm">
+						<el-select class="formSelect" ref="zdtzm" :disabled="formData.qszt!='0'" v-model="formData.zdtzmbsm">
 							<el-option
 								v-for="item in $store.state.zdtzmList"
 								:key="item.bsm"
@@ -107,7 +107,7 @@
 					</td>
 					<td colspan="2">宗地代码<i class="requisite">*</i></td>
 					<td colspan="4" class="psr">
-						<input :disabled="formData.qszt!='0'" maxlength="19"
+						<input :disabled="formData.qszt!='0'" @blur="inputBlur($event)" ref="zddm" on maxlength="19"
 							type="text"
 							class="formInput percent80"
 							v-model="formData.zddm"
@@ -126,8 +126,8 @@
 					<td colspan="2">不动产单元号<i class="requisite">*</i></td>
 					<td colspan="4" class="psr">
 						<input
-							type="text" :disabled="formData.qszt!='0'" maxlength="28"
+							type="text" :disabled="formData.qszt!='0'" @blur="inputBlur($event)" ref="bdcdyh" maxlength="28"
-							class="formInput percent80"
+							class="formInput"
 							v-model="formData.bdcdyh"
 						/>
 						<!-- <el-button type="warning"  :disabled="formData.qszt!='0'" class="createBtn">生成</el-button> -->
@@ -136,7 +136,7 @@
 				<tr>
 					<td colspan="2">坐落<i class="requisite">*</i></td>
 					<td colspan="4">
-						<input type="text" :disabled="formData.qszt!='0'"  class="formInput" v-model="formData.zl" />
+						<input type="text" :disabled="formData.qszt!='0'" @blur="inputBlur($event)" ref="zl"  class="formInput" v-model="formData.zl" />
 					</td>
 					<td colspan="2">项目名称</td>
 					<td colspan="4" class="psr">
@@ -278,25 +278,25 @@
 					<td colspan="2" rowspan="4">宗地四至</td>
 					<td colspan="2">北至<i class="requisite">*</i></td>
 					<td colspan="8" class="psr">
-						<input type="text"  :disabled="formData.qszt!='0'" class="formInput" v-model="formData.zdszb" />
+						<input type="text" @blur="inputBlur($event)" ref="zdszb"  :disabled="formData.qszt!='0'" class="formInput" v-model="formData.zdszb" />
 					</td>
 				</tr>
 				<tr>
 					<td colspan="2">东至<i class="requisite">*</i></td>
 					<td colspan="8" class="psr">
-						<input type="text"  :disabled="formData.qszt!='0'" class="formInput" v-model="formData.zdszd" />
+						<input type="text" @blur="inputBlur($event)" ref="zdszd"  :disabled="formData.qszt!='0'" class="formInput" v-model="formData.zdszd" />
 					</td>
 				</tr>
 				<tr>
 					<td colspan="2">南至<i class="requisite">*</i></td>
 					<td colspan="8" class="psr">
-						<input type="text"  :disabled="formData.qszt!='0'" class="formInput" v-model="formData.zdszn" />
+						<input type="text" @blur="inputBlur($event)" ref="zdszn"  :disabled="formData.qszt!='0'" class="formInput" v-model="formData.zdszn" />
 					</td>
 				</tr>
 				<tr>
 					<td colspan="2">西至<i class="requisite">*</i></td>
 					<td colspan="8" class="psr">
-						<input type="text"  :disabled="formData.qszt!='0'" class="formInput" v-model="formData.zdszx" />
+						<input type="text" @blur="inputBlur($event)" ref="zdszx"  :disabled="formData.qszt!='0'" class="formInput" v-model="formData.zdszx" />
 					</td>
 				</tr>
 				<tr>
@@ -307,21 +307,21 @@
 				<tr>
 					<td colspan="2" rowspan="2">批准面积(㎡)</td>
 					<td colspan="2" rowspan="2">
-						<input type="text"  :disabled="formData.qszt!='0'" class="formInput" v-model="formData.pzmj" />
+						<input type="text"  :disabled="formData.qszt!='0'" onkeyup="value=value.replace(/[^\d\.]/g,'')"  class="formInput" v-model="formData.pzmj" />
 					</td>
-					<td colspan="2" rowspan="2">宗地面积(㎡)</td>
+					<td colspan="2" rowspan="2">宗地面积(㎡)<i class="requisite">*</i></td>
 					<td colspan="2" rowspan="2">
-						<input type="text"  :disabled="formData.qszt!='0'" class="formInput" v-model="formData.zdmj" />
+						<input type="text"  :disabled="formData.qszt!='0'" @blur="inputBlur($event)" ref="zdmj" onkeyup="value=value.replace(/[^\d\.]/g,'')" class="formInput" v-model="formData.zdmj" />
 					</td>
 					<td colspan="2">建筑占地总面积</td>
 					<td colspan="2">
-						<input type="text"  :disabled="formData.qszt!='0'" class="formInput" v-model="formData.jzzdzmj" />
+						<input type="text"  :disabled="formData.qszt!='0'" onkeyup="value=value.replace(/[^\d\.]/g,'')"  class="formInput" v-model="formData.jzzdzmj" />
 					</td>
 				</tr>
 				<tr>
 					<td colspan="2">建筑面积(㎡)</td>
 					<td colspan="2">
-						<input type="text"  :disabled="formData.qszt!='0'" class="formInput" v-model="formData.jzzmj" />
+						<input type="text"  :disabled="formData.qszt!='0'" onkeyup="value=value.replace(/[^\d\.]/g,'')"  class="formInput" v-model="formData.jzzmj" />
 					</td>
 				</tr>
 				<tr>
@@ -384,30 +384,7 @@ export default {
 	props: {},
 	data() {
 		return {
-            // rules: {
+            rules: [],
-            //     hdmc: [
-            //         { required: true, message: '请输入活动名称', trigger: 'blur' },
-            //         { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
-            //     ],
-            //     xzq: [
-            //         { required: true, message: '请选择活行政区', trigger: 'change' }
-            //     ],
-            //     date1: [
-            //         { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
-            //     ],
-            //     date2: [
-            //         { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
-            //     ],
-            //     type: [
-            //         { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
-            //     ],
-            //     resource: [
-            //         { required: true, message: '请选择活动资源', trigger: 'change' }
-            //     ],
-            //     desc: [
-            //         { required: true, message: '请填写活动形式', trigger: 'blur' }
-            //     ]
-            // },
 			rjl:'',
 			jzmd:'',
 			jzxg:'',
@@ -501,6 +478,10 @@ export default {
 						this.formData = res.result;
 						console.log(res.result,'res.result');
 						this.getXzqData(res.result.xzqbsm,res.result.djqbsm);
+						//如果没有宗地代码，自动生成
+						if(res.result.zddm == null){
+							this.generatorCode()
+						}
 						//判断容密高是否为区间值，如果是区间值，则将校验值置为'-'并给rjl，jzmd，jzxg赋值
 						this.rjl = this.isInterval(this.formData.jyrjl) ? this.formData.jyrjl : '';
 						this.formData.jyrjl = this.isInterval(this.formData.jyrjl) ? '-' : this.formData.jyrjl;
@@ -646,10 +627,68 @@ export default {
 		updateZDxx(formData) {
 			//获取权利性质数据
 			this.formData.list = this.$refs.qlxzModule.getQlxzDataList();
+			this.$refs.qlxzModule.getRules();
+			console.log(this.$refs.qlxzModule.getRulesResult(),'this.$refs.qlxzModule.getRules()');
 			//判断容密高是否为区间值，如果是区间值，则将输入框的值赋予
 			this.formData.jyrjl = this.isInterval(this.formData.jyrjl) ? this.rjl : this.formData.jyrjl;
 			this.formData.jyjzmd = this.isInterval(this.formData.jyjzmd) ? this.jzmd : this.formData.jyjzmd;
 			this.formData.jyjzxg = this.isInterval(this.formData.jyjzxg) ? this.jzxg : this.formData.jyjzxg;
+			this.rules= [
+				{
+					data:this.formData.zdtzmbsm,
+					name:'宗地特征码',
+					dom:this.$refs.zdtzm,
+					rule: /^\s*$/g, //非空
+				},
+				{
+					data:this.formData.zddm,
+					name:'宗地代码',
+					dom:this.$refs.zddm,
+					rule: /^\s*$/g, //非空
+				},
+				{
+					data:this.formData.bdcdyh,
+					name:'不动产单元号',
+					dom:this.$refs.bdcdyh,
+					rule: /^\s*$/g, //非空
+				},
+				{
+					data:this.formData.zl,
+					name:'坐落',
+					dom:this.$refs.zl,
+					rule: /^\s*$/g, //非空
+				},
+				{
+					data:this.formData.zdszd,
+					name:'宗地东至',
+					dom:this.$refs.zdszd,
+					rule: /^\s*$/g, //非空
+				},
+				{
+					data:this.formData.zdszb,
+					name:'宗地北至',
+					dom:this.$refs.zdszb,
+					rule: /^\s*$/g, //非空
+				},
+				{
+					data:this.formData.zdszx,
+					name:'宗地西至',
+					dom:this.$refs.zdszx,
+					rule: /^\s*$/g, //非空
+				},
+				{
+					data:this.formData.zdszn,
+					name:'宗地南至',
+					dom:this.$refs.zdszn,
+					rule: /^\s*$/g, //非空
+				},
+				{
+					data:this.formData.zdmj,
+					name:'宗地面积',
+					dom:this.$refs.zdmj,
+					rule: /^\s*$/g, //非空
+				},
+			]
 			//判断宗地代码和不动产单元号是否手动修改过（宗地代码和不动产单元号的前14位是否和底盘代码一致）
 			if(this.formData.zddm.substring(0,14) != this.dpdm || this.formData.bdcdyh.substring(0,14) != this.dpdm){
 				this.$message({
@@ -657,17 +696,28 @@ export default {
 					type: "warning",
 				});
 			}else{
-				// FIXME:表单验证错误
+				// console.log(this.rules,'rules');
-				/*  this.$refs['ruleForm'].validate((valid) => {
+				let flag = true;
-					debugger
+				this.rules.forEach(item=>{
-					if (valid) {
+					if(item.rule.test(item.data) || item.data == null){
-						alert('submit!');
+						if(item.dom.$el){
+							item.dom.$el.style.border = '1px solid red';
-					} else {
+						}else{
-						alert("error submit")
+							item.dom.style.border = '1px solid red';
-						return false;
+						}
+						// this.$message({
+						// 	// message: item.name+'不能为空',
+						// 	message: '不能为空',
+						// 	type: "warning",
+						// });
+						flag = false;
+						return false
 					}
-				});*/
+				})
+				this.$nextTick(()=>{
+					if(flag){
+						//宗地面积处理
+						this.formData.zdmj = this.formData.zdmj.replace(/[^\d\.]/g,'')
 						updateQjZdjbxx(this.formData)
 							.then((res) => {
 								if (res.code == 200) {
@@ -705,12 +755,28 @@ export default {
 						self.updAttributes(this.$store.state.zdbsm,'zd',this.geoAttributes,function (res) {
 							console.log("属性保存完成!!");
 						});
+					}else{
+						this.$message({
+							// message: item.name+'不能为空',
+							message: '请完善表单后再继续操作',
+							type: "warning",
+						});
+					}
+				})
 			}
 		},
+		inputBlur(e){
+			if(e.target.value!=''){
+				e.target.style.border=""
+			}else{
+				e.target.style.border="1px solid red"
+			}
+		},
 		//提交宗地基本信息
 		submitZDxx(){
 			let data={