标签管理新增

src/views/template/incomeWmsBox.vue

@@ -31,36 +31,6 @@
           style="width: 150px"
         />
       </el-form-item>
-      <el-form-item label="code" prop="orderCode">
-        <el-input
-          v-model="queryParams.orderCode"
-          placeholder="请输入code"
-          clearable
-          :maxlength="100"
-          size="small"
-          style="width: 150px"
-        />
-      </el-form-item>
-      <el-form-item label="label_id" prop="labelId">
-        <el-input
-          v-model="queryParams.labelId"
-          placeholder="请输入label_id"
-          clearable
-          :maxlength="50"
-          size="small"
-          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"
@@ -126,17 +96,6 @@
             {{ scope.row.labelId || '-' }}
           </template>
         </el-table-column>
-        <el-table-column width="120" label="状态" prop="flag">
-          <template slot-scope="scope">
-            <el-switch
-              v-model="scope.row.flag"
-              class="switchDisabledStyle"
-              inactive-value="0"
-              active-value="1"
-              @click.native="handleStatusChange(scope.row)"
-            />
-          </template>
-        </el-table-column>
         <el-table-column label="备注" prop="remarks" :show-overflow-tooltip="true">
           <template slot-scope="scope">
             {{ scope.row.remarks || '-' }}
@@ -155,12 +114,6 @@
               :size="commonField.size"
               @click="handleUpdate(scope.row)"
             >修改</el-button>
-            <el-button
-              :class="commonField.delClass"
-              :type="commonField.typeParent"
-              :size="commonField.size"
-              @click="handleDelete(scope.row)"
-            >删除</el-button>
           </template>
         </el-table-column>
       </el-table>

src/views/template/incomeWmsLabel.vue

 <template>
   <div class="app-container">
     <el-form ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :inline="true">
-            <el-form-item label="mac" prop="mac">
+      <el-form-item label="mac: " prop="mac">
         <el-input
           v-model="queryParams.mac"
           placeholder="请输入mac"
@@ -11,7 +11,7 @@
           style="width: 150px"
         />
       </el-form-item>
-      <el-form-item label="pn" prop="pn">
+      <el-form-item label="pn: " prop="pn">
         <el-input
           v-model="queryParams.pn"
           placeholder="请输入pn"
@@ -21,7 +21,7 @@
           style="width: 150px"
         />
       </el-form-item>
-      <el-form-item label="location" prop="location">
+      <el-form-item label="location: " prop="location">
         <el-input
           v-model="queryParams.location"
           placeholder="请输入location"
@@ -31,27 +31,7 @@
           style="width: 150px"
         />
       </el-form-item>
-      <el-form-item label="barcode" prop="barcode">
-        <el-input
-          v-model="queryParams.barcode"
-          placeholder="请输入barcode"
-          clearable
-          :maxlength="100"
-          size="small"
-          style="width: 150px"
-        />
-      </el-form-item>
-      <el-form-item label="params" prop="params">
-        <el-input
-          v-model="queryParams.params"
-          placeholder="请输入params"
-          clearable
-          :maxlength="2000"
-          size="small"
-          style="width: 150px"
-        />
-      </el-form-item>
-      <el-form-item label="状态" prop="flag">
+      <el-form-item label="状态: " prop="flag">
         <el-select v-model="queryParams.flag" placeholder="请选择状态" clearable size="small">
           <el-option
             v-for="dict in statusOptions"
@@ -67,12 +47,14 @@
           :type="commonField.typePrimary"
           :icon="commonField.queryIcon"
           :size="commonField.smallSize"
-          @click="handleQuery">查询</el-button>
+          @click="handleQuery"
+        >查询</el-button>
         <el-button
           :class="commonField.resetClass"
           :icon="commonField.resetIcon"
           :size="commonField.smallSize"
-          @click="resetQuery">重置</el-button>
+          @click="resetQuery"
+        >重置</el-button>
       </el-form-item>
       <div style="float: right">
         <el-form-item>
@@ -81,20 +63,22 @@
             :type="commonField.typePrimary"
             :icon="commonField.addIcon"
             :size="commonField.smallSize"
-            @click="handleAdd">新增</el-button>
+            @click="handleAdd"
+          >新增</el-button>
           <el-button
             :class="commonField.exportClass"
             :type="commonField.typeSuccess"
             :icon="commonField.exportIcon"
             :size="commonField.smallSize"
-            @click="handleExport">导出</el-button>
+            @click="handleExport"
+          >导出</el-button>
         </el-form-item>
       </div>
     </el-form>
     <div class="placeholder" />
     <div style="padding:5px 10px">
       <div class="mb12 font-small-bold">标签管理列表</div>
-      <el-table v-loading="loading" border :data="incomeWmsLabelList" >
+      <el-table v-loading="loading" border :data="incomeWmsLabelList">
         <el-table-column type="index" label="序号" width="55" align="center" />
         <el-table-column label="mac" prop="mac" :show-overflow-tooltip="true">
           <template slot-scope="scope">
@@ -116,11 +100,6 @@
             {{ scope.row.barcode || '-' }}
           </template>
         </el-table-column>
-        <el-table-column label="params" prop="params" :show-overflow-tooltip="true">
-          <template slot-scope="scope">
-            {{ scope.row.params || '-' }}
-          </template>
-        </el-table-column>
         <el-table-column width="120" label="状态" prop="flag">
           <template slot-scope="scope">
             <el-switch
@@ -168,30 +147,45 @@
       @pagination="getList"
     />
     <!-- 添加或修改标签管理配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="550px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" size="small" label-width="90px">
-        <el-form-item label="mac" prop="mac">
+        <el-form-item label="mac: " prop="mac">
           <el-input v-model.trim="form.mac" show-word-limit :maxlength="100" placeholder="请输入mac" />
         </el-form-item>
-        <el-form-item label="pn" prop="pn">
-          <el-input v-model.trim="form.pn" show-word-limit :maxlength="100" placeholder="请输入pn" />
+        <el-form-item label="pn: " prop="pn">
+          <span>{{ form.pn }}</span>
+        </el-form-item>
+        <el-form-item label="location: " prop="location">
+          <el-input v-model.trim="form.location" show-word-limit :maxlength="100" placeholder="请输入location" @input="handleBarcode" />
+        </el-form-item>
+        <el-form-item label="barcode: " prop="barcode">
+          <span>{{ form.barcode }}</span>
         </el-form-item>
-        <el-form-item label="location" prop="location">
-          <el-input v-model.trim="form.location" show-word-limit :maxlength="100" placeholder="请输入location" />
+        <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-input v-model="item.key" />
               </el-form-item>
-        <el-form-item label="barcode" prop="barcode">
-          <el-input v-model.trim="form.barcode" show-word-limit :maxlength="100" placeholder="请输入barcode" />
+            </el-col>
+            <el-col :span="9">
+              <el-form-item label="value: " label-width="40"  prop="value" :rules="getValueRules(item)">
+                <el-input v-model="item.value" />
               </el-form-item>
-        <el-form-item label="params" prop="params">
-          <el-input v-model.trim="form.params" show-word-limit :maxlength="2000" placeholder="请输入params" />
+            </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 type="primary" class="el-icon-minus" @click="removeFormItem(index)" circle></el-button>
+            </el-col>
+          </el-row>
         </el-form-item>
-          <el-form-item label="状态">
+        <el-form-item label="状态: ">
           <el-radio-group v-model="form.flag">
             <el-radio label="1">启用</el-radio>
             <el-radio label="0">停用</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="备注" prop="remarks">
+        <el-form-item label="备注: " prop="remarks">
           <el-input v-model.trim="form.remarks" maxlength="200" show-word-limit type="textarea" placeholder="请输入内容" />
         </el-form-item>
       </el-form>
@@ -250,8 +244,18 @@ export default {
       },
       // 表单参数
       form: {},
+      // params
+      paramsItems: [
+        {
+          key: '',
+          value: ''
+        }
+      ],
       // 表单校验
       rules: {
+        mac: [
+          { required: true, message: '请输入mac', trigger: 'blur' }
+        ]
       }
     }
   },
@@ -264,6 +268,30 @@ export default {
     this.getList() // 列表查询
   },
   methods: {
+    getKeyRules(item) {
+      console.log(item)
+      return [
+        { required: !!item.value && !item.key, message: '请输入key的值', trigger: 'blur' }
+      ]
+    },
+    getValueRules(item) {
+      return [
+        { required: !!item.key && !item.value, message: '请输入value的值', trigger: 'blur' }
+      ]
+    },
+    addFormItem(index) {
+      this.paramsItems.splice(index + 1, 0, { key: '', value: '' })
+    },
+    removeFormItem(index) {
+      this.paramsItems.splice(index, 1)
+    },
+    handleBarcode() {
+      if (this.form.pn !== undefined && this.form.pn !== null && this.form.pn !== '') {
+        this.form.barcode = this.form.location + ',' + this.form.pn
+      } else {
+        this.form.barcode = this.form.location
+      }
+    },
     /** 查询标签管理列表 */
     getList() {
       this.loading = true
@@ -292,6 +320,12 @@ export default {
         params: undefined,
         flag: '1'
       }
+      this.paramsItems = [
+        {
+          key: '',
+          value: ''
+        }
+      ]
       this.resetForm('form')
     },
     /** 查询按钮操作 */
@@ -325,6 +359,14 @@ export default {
       const id = row.businessId
       getIncomeWmsLabel(id).then(response => {
         this.form = response.data
+        const obj = JSON.parse(this.form.params)
+        this.paramsItems = []
+        for (const key in obj) {
+          if (Object.hasOwnProperty.call(obj, key)) {
+            const value = obj[key]
+            this.paramsItems.push({ key: key, value: value })
+          }
+        }
         this.open = true
         this.title = '修改标签管理'
       })
@@ -351,6 +393,10 @@ export default {
     submitForm: function() {
       this.$refs['form'].validate(valid => {
         if (valid) {
+          this.form.params = JSON.stringify(this.paramsItems.reduce((obj, item) => {
+            obj[item.key] = item.value
+            return obj
+          }, {}))
           if (this.form.businessId !== undefined) {
             updateIncomeWmsLabel(this.form).then(response => {
               this.msgSuccess('修改成功')
@@ -420,4 +466,22 @@ export default {
     margin-bottom: 10px
   }
   }
+  .params{
+    ::v-deep .el-form-item{
+      padding: 0;
+      .el-form-item__content{
+        width: 115%;
+        .el-input{
+          width: 60%;
+        }
+    }
+    }
+    .btn-container{
+      .el-button{
+        margin-left: 6%;
+        margin-top: 15%;
+        width: 35%;
+      }
+    }
+  }
 </style>