1.弹框标题去掉管理两个字

2.提交时校验paramsItem的值
3.修改params 添加和删除的样式

src/views/template/incomeWmsLabel.vue

@@ -31,16 +31,6 @@
           style="width: 150px"
         />
       </el-form-item>
-      <el-form-item label="状态: " prop="flag">
-        <el-select v-model="queryParams.flag" placeholder="请选择状态" clearable size="small">
-          <el-option
-            v-for="dict in statusOptions"
-            :key="dict.dictValue"
-            :label="dict.dictLabel"
-            :value="dict.dictValue"
-          />
-        </el-select>
-      </el-form-item>
       <el-form-item>
         <el-button
           :class="commonField.queryClass"
@@ -121,7 +111,7 @@
             <span>{{ scope.row.createDate | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" class-name="small-padding fixed-width" width="200px">
+        <el-table-column label="操作" class-name="small-padding fixed-width" width="100px">
           <template slot-scope="scope">
             <el-button
               :class="commonField.updateClass"
@@ -163,19 +153,19 @@
         </el-form-item>
         <el-form-item label="params: " prop="params">
           <el-row v-for="(item, index) in paramsItems" :key="index" class="params">
-            <el-col :span="9">
-              <el-form-item label="key: " label-width="40" prop="key" :rules="getKeyRules(item)">
+            <el-col :span="10">
+              <el-form-item label="key: " label-width="40">
                 <el-input v-model="item.key" />
               </el-form-item>
             </el-col>
-            <el-col :span="9">
-              <el-form-item label="value: " label-width="40"  prop="value" :rules="getValueRules(item)">
+            <el-col :span="10">
+              <el-form-item label="value: " label-width="40">
                 <el-input v-model="item.value" />
               </el-form-item>
             </el-col>
-            <el-col :span="5" class="btn-container">
-              <el-button type="primary" class="el-icon-plus" @click="addFormItem(index)" circle></el-button>
-              <el-button  v-if="paramsItems.length > 1" type="primary" class="el-icon-minus" @click="removeFormItem(index)" circle></el-button>
+            <el-col :span="4" class="btn-container">
+              <i class="el-icon-plus" style="cursor: pointer;font-size: 16px;color: #25C7E3FF" @click="addFormItem(index)"></i>
+              <i v-if="index > 0" style="cursor: pointer;font-size: 16px;margin-left: 6px;color: red;" class="el-icon-minus" @click="removeFormItem(index)"></i>
             </el-col>
           </el-row>
         </el-form-item>
@@ -191,7 +181,7 @@
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button class="cancelBtn" @click="cancel">取 消</el-button>
-        <el-button class="submitBtn" type="primary" @click="submitForm">确 定</el-button>
+        <el-button :loading="addLoading" class="submitBtn" type="primary" @click="submitForm">确 定</el-button>
       </div>
     </el-dialog>
   </div>
@@ -210,6 +200,8 @@ export default {
   name: 'IncomeWmsLabel',
   data() {
     return {
+      // 新增确认按钮loading
+      addLoading: false,
       // 遮罩层
       loading: true,
       // 总条数
@@ -268,15 +260,26 @@ export default {
     this.getList() // 列表查询
   },
   methods: {
-    getKeyRules(item) {
-      return [
-        { required: !!item.value && !item.key, message: '请输入key的值', trigger: 'blur' }
-      ]
-    },
-    getValueRules(item) {
-      return [
-        { required: !!item.key && !item.value, message: '请输入value的值', trigger: 'blur' }
-      ]
+    /**
+     * @description: 提交时校验parms中的数据
+     * @author: gaoyu
+     * @param: list
+     * @return: filteredArray
+     **/
+    filterArray(list) {
+      /**
+       * 1.将数组转换为map
+       * 2.将map转换为数组
+       * **/
+        // 校验并处理数组
+      let resultMap = new Map();
+      for (let obj of list) {
+        if (obj.key !== '') {
+          resultMap.set(obj.key, obj);
+        }
+      }
+      let filteredArray = Array.from(resultMap.values());
+      return filteredArray
     },
     addFormItem(index) {
       this.paramsItems.splice(index + 1, 0, { key: '', value: '' })
@@ -350,7 +353,8 @@ export default {
     handleAdd() {
       this.reset()
       this.open = true
-      this.title = '添加标签管理'
+      // 1.弹框标题去掉管理两个字
+      this.title = '添加标签'
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
@@ -370,7 +374,8 @@ export default {
           }
         }
         this.open = true
-        this.title = '修改标签管理'
+        // 1.弹框标题去掉管理两个字
+        this.title = '修改标签'
       })
     },
     // 改变状态
@@ -395,25 +400,38 @@ export default {
     submitForm: function() {
       this.$refs['form'].validate(valid => {
         if (valid) {
+          if (this.paramsItems.length > 0) {
             if (this.paramsItems.length === 1 && this.paramsItems[0].key === '') {
               this.form.params = undefined
             } else {
-            this.form.params = JSON.stringify(this.paramsItems.reduce((obj, item) => {
+              // 4.校验paramsItems的值
+              let list = this.filterArray(this.paramsItems)
+              this.form.params = JSON.stringify(list.reduce((obj, item) => {
                 obj[item.key] = item.value
                 return obj
               }, {}))
             }
+          }
+
           if (this.form.businessId !== undefined) {
+            this.addLoading = true
             updateIncomeWmsLabel(this.form).then(response => {
               this.msgSuccess('修改成功')
               this.open = false
               this.getList()
+              this.addLoading = false
+            }).catch(() => {
+              this.addLoading = false
             })
           } else {
+            this.addLoading = true
             addIncomeWmsLabel(this.form).then(response => {
               this.msgSuccess('新增成功')
               this.open = false
               this.getList()
+              this.addLoading = false
+            }).catch(() => {
+              this.addLoading = false
             })
           }
         }
@@ -486,9 +504,12 @@ export default {
     }
     }
     .btn-container{
+      display: flex;
+      height: 60px;
+      align-items: center;
       .el-button{
         margin-left: 6%;
-        margin-top: 15%;
+        //margin-top: 15%;
         width: 35%;
       }
     }