From 99b611e7e8ed8df2f4f812ac8374f0fddbcf0425 Mon Sep 17 00:00:00 2001
From: "liu.shiyi" <liu.shiyi@ustcinfo.com>
Date: Wed, 2 Aug 2023 11:21:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:http=E6=95=B0=E6=8D=AE=E9=9B=86=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=E6=B7=BB=E5=8A=A0=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/HttpParamsSettingDialog.vue           | 263 ++++++++----------
 1 file changed, 117 insertions(+), 146 deletions(-)

diff --git a/data-room-ui/packages/DataSetManagement/src/HttpParamsSettingDialog.vue b/data-room-ui/packages/DataSetManagement/src/HttpParamsSettingDialog.vue
index dbdf2693..feb09e0f 100644
--- a/data-room-ui/packages/DataSetManagement/src/HttpParamsSettingDialog.vue
+++ b/data-room-ui/packages/DataSetManagement/src/HttpParamsSettingDialog.vue
@@ -9,142 +9,104 @@
       :before-close="handleClose"
       class="bs-dialog-wrap bs-el-dialog"
     >
-      <div class="bs-table-box">
-        <el-table
-          ref="singleTable"
-          :data="params"
-          :border="true"
-          align="center"
-          class="bs-el-table"
-        >
-          <el-empty slot="empty" />
-          <el-table-column
-            prop="name"
-            label="参数名称"
-            align="center"
-          >
-            <template slot-scope="scope">
-              <el-input
-                v-model="scope.row.name"
-                class="bs-el-input"
-                placeholder="请输入名称"
-                clearable
-                readonly
-                @change="checkParamsName(scope.row)"
-              />
-            </template>
-          </el-table-column>
-          <!-- <el-table-column
-            prop="type"
-            label="参数类型"
+      <el-form
+        ref="form"
+        :model="form"
+        :rules="formRules"
+      >
+        <div class="bs-table-box">
+          <el-table
+            ref="singleTable"
+            :data="form.params"
+            :border="true"
             align="center"
-            width="200"
-            filterable
+            class="bs-el-table"
           >
-            <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-empty slot="empty" />
+            <el-table-column
+              prop="name"
+              label="参数名称"
+              align="center"
+            >
+              <template slot-scope="scope">
+                <el-input
+                  v-model="scope.row.name"
+                  class="bs-el-input"
+                  placeholder="请输入名称"
+                  clearable
+                  readonly
+                  @change="checkParamsName(scope.row)"
                 />
-              </el-select>
-            </template>
-          </el-table-column> -->
-          <el-table-column
-            prop="require"
-            label="是否必填"
-            align="center"
-            width="200"
-            filterable
-          >
-            <template slot-scope="scope">
-              <el-radio-group
-                v-model="scope.row.require"
-                :disabled="isUpdate"
-              >
-                <el-radio :label="1">
-                  是
-                </el-radio>
-                <el-radio :label="0">
-                  否
-                </el-radio>
-              </el-radio-group>
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="value"
-            label="参数值"
-            align="center"
-          >
-            <template slot-scope="scope">
-              <el-date-picker
-                v-if="scope.row.type === 'Date'"
-                v-model="scope.row.value"
-                type="datetime"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                placeholder="选择日期时间"
-              />
-              <el-input
-                v-else
-                v-model="scope.row.value"
-                class="bs-el-input"
-                clearable
-                placeholder="请输入值"
-              />
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="remark"
-            label="备注"
-            align="center"
-          >
-            <template slot-scope="scope">
-              <el-input
-                v-model="scope.row.remark"
-                clearable
-                class="bs-el-input"
-                placeholder="请输入备注"
-                rows="2"
-                :readonly="isUpdate"
-                maxlength="200"
-              />
-            </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>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="require"
+              label="是否必填"
+              align="center"
+              width="200"
+              filterable
+            >
+              <template slot-scope="scope">
+                <el-radio-group
+                  v-model="scope.row.require"
+                  :disabled="isUpdate"
+                >
+                  <el-radio :label="1">
+                    是
+                  </el-radio>
+                  <el-radio :label="0">
+                    否
+                  </el-radio>
+                </el-radio-group>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="value"
+              label="参数值"
+              align="center"
+            >
+              <template slot-scope="scope">
+                <el-date-picker
+                  v-if="scope.row.type === 'Date'"
+                  v-model="scope.row.value"
+                  type="datetime"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  placeholder="选择日期时间"
+                />
+                <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
+              prop="remark"
+              label="备注"
+              align="center"
+            >
+              <template slot-scope="scope">
+                <el-input
+                  v-model="scope.row.remark"
+                  clearable
+                  class="bs-el-input"
+                  placeholder="请输入备注"
+                  rows="2"
+                  :readonly="isUpdate"
+                  maxlength="200"
+                />
+              </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,14 +182,18 @@ export default {
       this.dialogVisible = false
     },
     confirm () {
-      if (!this.isUpdate) {
-        this.$emit('saveParams', cloneDeep(this.params))
-      } else {
-        console.log(this.params)
-        this.$emit('saveNewParams', cloneDeep(this.params))
-      }
-      this.$emit('getData')
-      this.dialogVisible = false
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          if (!this.isUpdate) {
+            this.$emit('saveParams', cloneDeep(this.form.params))
+          } else {
+            console.log(this.form.params)
+            this.$emit('saveNewParams', cloneDeep(this.form.params))
+          }
+          this.$emit('getData')
+          this.dialogVisible = false
+        }
+      })
     }
   }
 }