高级搜索-表单校验

src/views/advancedQuery/views/advancedNew.vue

@@ -114,7 +114,10 @@
                 :align="col.align || 'center'"
               >
                 <template slot-scope="scope">
-                  <el-form-item :prop="'params.' + scope.$index + '.' + col.prop">
+                  <el-form-item
+                    :prop="'params.' + scope.$index + '.' + col.prop"
+                    :rules="paramsForm.validateRules[col.prop]"
+                  >
                     <template v-if="col.prop === 'comparisonOperator' || col.inputType[scope.$index] === 'select'">
                       <el-select
                         v-model="scope.row[col.prop]"
@@ -298,7 +301,10 @@ export default {
             connector: 'and'
           }
         ],
-        validateRules: {},
+        validateRules: {
+          paramKey: [{ required: true, message: '请选择项', trigger: ['change', ['change', 'blur']] }],
+          paramValue: [{ required: true, message: '请选择或输入值', trigger: ['change', 'blur'] }]
+        },
         disabled: []
       },
       checkValue: '',
@@ -563,8 +569,15 @@ export default {
       }
     },
     advancedQueryHandler(singleJump) {
-      let bracketsDifference = 0
       try {
+        if (this.dialogFlag) {
+          this.$refs['paramsForm'].validate(valid => {
+            if (!valid) {
+              throw new Error()
+            }
+          })
+        }
+        let bracketsDifference = 0
         const paramsRowNum = this.paramsForm.params.length
         const queryString = this.paramsForm.params.reduce(
           (preString, { leftBrackets, paramKey, comparisonOperator, paramValue, rightBrackets, connector }, index) => {
@@ -595,7 +608,7 @@ export default {
         this.queryTableData(singleJump)
         this.dialogHide()
       } catch (error) {
-        this.$message.error(error.message)
+        error.message && this.$message.error(error.message)
       }
     },
     deleteParam(index) {
@@ -1007,15 +1020,24 @@ export default {
               .el-form-item {
                 margin: 0;
                 height: 40px;
+                .el-form-item__error {
+                  top: 60%;
+                  left: 14px;
+                }
                 .el-input__inner {
                   background: transparent;
-                  border: none;
                   color: #101116;
                   font-family: Helvetica, 'Microsoft YaHei';
                   &:hover {
                     background-color: #ffffff;
                   }
                 }
+                &.is-error .el-input__inner::-webkit-input-placeholder {
+                  visibility: hidden;
+                }
+                &:not(.is-error) .el-input__inner {
+                  border: none;
+                }
                 .el-select {
                   .el-icon-arrow-up::before {
                     content: '\e78f';

src/views/systemSettings/views/queryTemplate/queryTemplatePreview.vue

@@ -76,7 +76,10 @@
                 :align="col.align || 'center'"
               >
                 <template slot-scope="scope">
-                  <el-form-item :prop="'params.' + scope.$index + '.' + col.prop">
+                  <el-form-item
+                    :prop="'params.' + scope.$index + '.' + col.prop"
+                    :rules="paramsForm.validateRules[col.prop]"
+                  >
                     <template v-if="col.prop === 'comparisonOperator' || col.inputType[scope.$index] === 'select'">
                       <el-select
                         v-model="scope.row[col.prop]"
@@ -243,7 +246,10 @@ export default {
             connector: 'and'
           }
         ],
-        validateRules: {},
+        validateRules: {
+          paramKey: [{ required: true, message: '请选择项', trigger: ['change', ['change', 'blur']] }],
+          paramValue: [{ required: true, message: '请选择或输入值', trigger: ['change', 'blur'] }]
+        },
         disabled: []
       },
       checkValue: '',
@@ -417,8 +423,15 @@ export default {
       }
     },
     advancedQueryHandler() {
-      let bracketsDifference = 0
       try {
+        if (this.dialogFlag) {
+          this.$refs['paramsForm'].validate(valid => {
+            if (!valid) {
+              throw new Error()
+            }
+          })
+        }
+        let bracketsDifference = 0
         const paramsRowNum = this.paramsForm.params.length
         const queryString = this.paramsForm.params.reduce(
           (preString, { leftBrackets, paramKey, comparisonOperator, paramValue, rightBrackets, connector }, index) => {
@@ -448,7 +461,7 @@ export default {
         this.queryString = queryString
         this.dialogHide()
       } catch (error) {
-        this.$message.error(error.message)
+        error.message && this.$message.error(error.message)
       }
     },
     deleteParam(index) {
@@ -602,15 +615,24 @@ export default {
               .el-form-item {
                 margin: 0;
                 height: 40px;
+                .el-form-item__error {
+                  top: 60%;
+                  left: 14px;
+                }
                 .el-input__inner {
                   background: transparent;
-                  border: none;
                   color: #101116;
                   font-family: Helvetica, 'Microsoft YaHei';
                   &:hover {
                     background-color: #ffffff;
                   }
                 }
+                &.is-error .el-input__inner::-webkit-input-placeholder {
+                  visibility: hidden;
+                }
+                &:not(.is-error) .el-input__inner {
+                  border: none;
+                }
                 .el-select {
                   .el-icon-arrow-up::before {
                     content: '\e78f';