1. 新增多个标签

src/views/tourism/commodityManagement/commodityList.vue

@@ -100,7 +100,7 @@
                   type="text"
                   icon="el-icon-edit"
                   @click="handleDetails(scope.row)"
-                  v-hasPermi="configPermi.editBase"
+                  v-hasPermi="configPermi.details"
                 >详情</el-button>
                 <el-button
                   size="mini"

src/views/tourism/commodityManagement/detailsBox/commodityListDetails.vue

@@ -39,12 +39,18 @@
           </div>
           <div style="display: flex;">
             <el-form-item label="商品标签：">
-              <span style="width: 250px;">{{ form.labelName }}</span>
-            </el-form-item>
-            <el-form-item label="商品上架：">
-              <span style="width: 250px;">{{ form.status == 1 ? '已下架':'已上架' }}</span>
+              <el-tag
+                    v-for="(tag,index) in form.labelName"
+                    :key="index"
+                    style="margin-right: 5px;">
+                    {{tag}}
+                  </el-tag>
             </el-form-item>
+            
           </div>
+          <el-form-item label="商品上架：">
+            <span style="width: 250px;">{{ form.status == 1 ? '已下架':'已上架' }}</span>
+          </el-form-item>
           <el-form-item label="景点图片">
             <div style="display: flex;">
               <div 
@@ -118,7 +124,8 @@ export default {
       },
       form: {
         id: undefined,
-        goodsImage: []
+        goodsImage: [],
+        labelName: []
       },
       rules: {
         goodsName: [{ required: true, message: "请输入商品名称", trigger: ["change","blur"] }],
@@ -160,6 +167,7 @@ export default {
           ...row,
           goodsImage: [],
           status: 1,
+          labelName: []
         })
         this.formStatus = 1
       }else if(model=='EDIT') { // 新增
@@ -167,6 +175,7 @@ export default {
           ...row,
           goodsImage: [],
           status: 1,
+          labelName: []
         }
         this.$set(this,'form',obj)
         this.formStatus = 1
@@ -188,7 +197,8 @@ export default {
         let res = await getTableDeatilsByIdApi(this.configUrl.details,{goodsId: row.goodsId})
         if(res.code == 200) {
           let obj = {
-            ...res.data
+            ...res.data,
+            labelName: res.data.labelName ? res.data.labelName.split(',') : []
           }
           if(obj.goodsImage) {
             obj.goodsImage = obj.goodsImage.split(',')

src/views/tourism/commodityManagement/formBox/commodityListForm.vue

@@ -42,17 +42,50 @@
               </el-input-number>
             </el-form-item>
             <el-form-item label="规格：" prop="specName">
-              <el-input style="width: 250px;" v-model="form.specName" placeholder="请输入规格" maxlength="10" show-word-limit />
+              <el-input style="width: 250px;" v-model="form.specName" placeholder="请输入规格" />
             </el-form-item>
             <el-form-item label="单位：" prop="unitName">
-              <el-input style="width: 250px;" v-model="form.unitName" placeholder="请输入单位" maxlength="10" show-word-limit />
+              <el-input style="width: 250px;" v-model="form.unitName" placeholder="请输入单位" />
             </el-form-item>
           </div>
           <div style="display: flex;">
             <el-form-item label="商品标签：" prop="labelName">
-              <el-input style="width: 250px;" v-model="form.labelName" placeholder="请输入商品标签" maxlength="10" show-word-limit />
+              <div>
+                <div>
+                  <el-input style="width: 250px;" v-model="labelName" placeholder="请输入商品标签" maxlength="6" show-word-limit />
+                  <el-button
+                    type="primary"
+                    v-if="form.labelName.length<5"
+                    @click="addLabelName"
+                    style="margin-left: 10px;"
+                  > 
+                    添加标签
+                  </el-button>
+                  <el-button
+                    type="danger"
+                    @click="clearAllLabelName"
+                    style="margin-left: 10px;"
+                  > 
+                    全部清除
+                  </el-button>
+                  <span style="font-size: 12px;color: #ccc;margin-left: 15px;">(最多可添加5个标签)</span>
+                </div>
+                <div>
+                  <el-tag
+                    v-for="(tag,index) in form.labelName"
+                    :key="index"
+                    @close="clearLabelName(tag,index)"
+                    style="margin-right: 5px;"
+                    closable>
+                    {{tag}}
+                  </el-tag>
+                </div>
+              </div>
+              
             </el-form-item>
-            <el-form-item label="商品上架：" prop="status">
+            
+          </div>
+          <el-form-item label="商品上架：" prop="status">
               <div style="width: 350px;">
                 <el-switch
                   v-model="form.status"
@@ -61,10 +94,8 @@
                   :active-value="0"
                   :inactive-value="1">
                 </el-switch>
-              </div>
-                 
-            </el-form-item>
-          </div>
+              </div>  
+          </el-form-item>
           <el-form-item label="商品图片" prop="goodsImage">
             <div style="display: flex;">
               <div 
@@ -210,7 +241,8 @@ export default {
       },
       form: {
         id: undefined,
-        goodsImage: []
+        goodsImage: [],
+        labelName: []
       },
       rules: {
         goodsName: [{ required: true, message: "请输入商品名称", trigger: ["change","blur"] }],
@@ -236,6 +268,7 @@ export default {
       //  上传文件
       actionUrl: process.env.VUE_APP_BASE_API + process.env.VUE_APP_UPLOAD_IMAGE,
       actionUrlLoading: false,
+      labelName: ''
     };
   },
   methods: {
@@ -247,20 +280,23 @@ export default {
       this.actionUrlLoading = false
       this.model = model
       this.formStatus = 0
+      this.labelName = ''
       if(model=='ADD') { // 新增
         this.$set(this,'form',{
           ...row,
           goodsImage: [],
           daySaleRadio: '-1',
           backStatus: 0,
-          status: 1
+          status: 1,
+          labelName: []
         })
         this.formStatus = 1
       }else if(model=='EDIT') { // 新增
         let obj = {
           ...row,
           goodsImage: [],
-          status: 1
+          status: 1,
+          labelName: []
         }
         this.$set(this,'form',obj)
         this.formStatus = 1
@@ -283,7 +319,8 @@ export default {
         let res = await getTableDeatilsByIdApi(this.configUrl.details,{goodsId: row.goodsId})
         if(res.code == 200) {
           let obj = {
-            ...res.data
+            ...res.data,
+            labelName: res.data.labelName ? res.data.labelName.split(',') : []
           }
           if(obj.goodsImage) {
             obj.goodsImage = obj.goodsImage.split(',')
@@ -340,6 +377,7 @@ export default {
             params['daySale'] =  -1
             params['buyAstrict'] = params.buyAstrict
           }
+          params.labelName = params.labelName.join(',')
           params.goodsImage = params.goodsImage.join(',')
           params.classifyName = this.valueChange(this.listTreeCopy,this.form.classifyId)
           delete params.daySaleRadio
@@ -457,7 +495,21 @@ export default {
       }
       treeForEach(list,value)
       return str
-    }
+    },
+    clearAllLabelName() {
+      this.form.labelName = []
+    },
+    clearLabelName(tag,index) {
+      this.form.labelName.splice(index,1)
+    },
+    addLabelName() {
+      if(this.labelName) {
+        this.form.labelName.push(this.labelName)
+        this.labelName = ''
+      }else {
+        this.$message.error('请填写内容!!!');
+      }
+    },
   },
   watch: {
     'form.goodsSnapshot'() {