feat:http数据集参数添加校验

data-room-ui/packages/DataSetManagement/src/HttpParamsSettingDialog.vue

@@ -8,11 +8,16 @@
       :close-on-click-modal="false"
       :before-close="handleClose"
       class="bs-dialog-wrap bs-el-dialog"
+    >
+      <el-form
+        ref="form"
+        :model="form"
+        :rules="formRules"
       >
         <div class="bs-table-box">
           <el-table
             ref="singleTable"
-          :data="params"
+            :data="form.params"
             :border="true"
             align="center"
             class="bs-el-table"
@@ -34,29 +39,6 @@
                 />
               </template>
             </el-table-column>
-          <!-- <el-table-column
-            prop="type"
-            label="参数类型"
-            align="center"
-            width="200"
-            filterable
-          >
-            <template slot-scope="scope">
-              <el-select
-                v-model="scope.row.type"
-                popper-class="bs-el-select"
-                class="bs-el-select"
-                placeholder="请选择"
-              >
-                <el-option
-                  v-for="item in typeOptions"
-                  :key="item.value"
-                  :label="item.value"
-                  :value="item.value"
-                />
-              </el-select>
-            </template>
-          </el-table-column> -->
             <el-table-column
               prop="require"
               label="是否必填"
@@ -91,13 +73,18 @@
                   value-format="yyyy-MM-dd HH:mm:ss"
                   placeholder="选择日期时间"
                 />
-              <el-input
+                <el-form-item
                   v-else
+                  :prop="'params.' + scope.$index + '.value'"
+                  :rules="scope.row.require ?formRules.value:null"
+                >
+                  <el-input
                     v-model="scope.row.value"
                     class="bs-el-input"
                     clearable
                     placeholder="请输入值"
                   />
+                </el-form-item>
               </template>
             </el-table-column>
             <el-table-column
@@ -117,34 +104,9 @@
                 />
               </template>
             </el-table-column>
-          <!--          <el-table-column-->
-          <!--            label="操作"-->
-          <!--            width="105"-->
-          <!--            align="center"-->
-          <!--          >-->
-          <!--            <template slot="header">-->
-          <!--              <el-button-->
-          <!--                icon="el-icon-plus"-->
-          <!--                type="text"-->
-          <!--                class="no-border"-->
-          <!--                @click="addParam"-->
-          <!--              >-->
-          <!--                添加-->
-          <!--              </el-button>-->
-          <!--            </template>-->
-          <!--            <template slot-scope="scope">-->
-          <!--              <el-button-->
-          <!--                type="text"-->
-          <!--                style="color: #e47470;"-->
-          <!--                class="no-border"-->
-          <!--                @click="delRow(scope.$index)"-->
-          <!--              >-->
-          <!--                删除-->
-          <!--              </el-button>-->
-          <!--            </template>-->
-          <!--          </el-table-column>-->
           </el-table>
         </div>
+      </el-form>
       <span
         slot="footer"
         class="dialog-footer"
@@ -182,18 +144,23 @@ export default {
   },
   data () {
     return {
-      params: [],
       isUpdate: false,
-      dialogVisible: false
+      dialogVisible: false,
+      form: {
+        params: []
+      },
+      formRules: {
+        value: [{ required: true, message: '参数值不能为空', trigger: 'blur' }]
+      }
     }
   },
   methods: {
     open (isUpdate = false) {
       this.$emit('getPramsList')
       if (isUpdate) {
-        this.params = this.newParamsList
+        this.form.params = this.newParamsList
       } else {
-        this.params = cloneDeep(this.paramsList)
+        this.form.params = cloneDeep(this.paramsList)
       }
       this.isUpdate = isUpdate
       this.dialogVisible = true
@@ -205,7 +172,7 @@ export default {
       this.dialogVisible = false
     },
     checkParamsName (value) {
-      const checkList = this.params.filter(item => item.fieldName === value.name)
+      const checkList = this.form.params.filter(item => item.fieldName === value.name)
       if (checkList.length) {
         this.$message.warning('参数名称不可以与字段名相同！')
         value.name = ''
@@ -215,15 +182,19 @@ export default {
       this.dialogVisible = false
     },
     confirm () {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
           if (!this.isUpdate) {
-        this.$emit('saveParams', cloneDeep(this.params))
+            this.$emit('saveParams', cloneDeep(this.form.params))
           } else {
-        console.log(this.params)
+            console.log(this.form.params)
-        this.$emit('saveNewParams', cloneDeep(this.params))
+            this.$emit('saveNewParams', cloneDeep(this.form.params))
           }
           this.$emit('getData')
           this.dialogVisible = false
         }
+      })
+    }
   }
 }
 </script>