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

杨威
Showing 2 changed files with 114 additions and 6 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() {},
@@ -322,11 +332,23 @@ 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();
+			   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