修改商品标签

src/views/goods/goods/components/Form.vue

@@ -78,19 +78,36 @@
           </el-col>
         </el-row>
         <el-row :gutter="10">
-          <el-col :span="12">
-            <el-form-item label="标签" prop="label">
-              <el-input v-model="form.label" placeholder="请输入标签" />
-            </el-form-item>
-          </el-col>
+          <el-form-item label="标签" >
+            <div style="border: 1px solid #ccc;height: 70px">
+              <el-tag
+              :key="tag"
+              v-for="tag in goodsTagList"
+              closable
+              :disable-transitions="false"
+              @close="handleClose(tag)">
+              {{tag}}
+              </el-tag>
+              <el-input
+                class="input-new-tag"
+                v-if="inputVisible"
+                v-model="inputValue"
+                ref="saveTagInput"
+                size="small"
+                @keyup.enter.native="handleInputConfirm"
+                @blur="handleInputConfirm"
+              />              
+              <el-button v-else class="button-new-tag" size="small" @click="showInput">+添加标签</el-button>
+            </div>              
+          </el-form-item>      
+        </el-row>
+        <el-row :gutter="10">    
           <el-col :span="12">
             <el-form-item label="描述" prop="desc">
               <el-input v-model="form.desc" type="textarea" placeholder="请输入内容" />
             </el-form-item>
           </el-col>
-        </el-row>
-        <el-row :gutter="10">
-          <el-col :span="12">
+                <el-col :span="12">
             <el-form-item label="备注" prop="remarks">
               <el-input v-model="form.remarks" type="textarea" placeholder="请输入内容" />
             </el-form-item>
@@ -139,9 +156,34 @@ export default {
           },
         ],
       },
+      goodsTagList: [],
+        inputVisible: false,
+        inputValue: ''
     };
   },
   methods: {
+    handleClose(tag) {
+        this.goodsTagList.splice(this.goodsTagList.indexOf(tag), 1);
+      },
+      showInput() {
+        this.inputVisible = true;
+        this.$nextTick(_ => {
+          this.$refs.saveTagInput.$refs.input.focus();
+        });
+      },
+      handleInputConfirm() {
+        let inputValue = this.inputValue;
+        if (inputValue) {
+          if(this.goodsTagList.indexOf(inputValue)==-1){
+            this.goodsTagList.push(inputValue);
+          }else{
+            this.$message('请重新添加标签，该标签已存在!');
+          }          
+        }
+        this.inputVisible = false;
+        this.inputValue = '';
+      },
+
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
@@ -162,6 +204,7 @@ export default {
     },
     // 表单重置
     reset() {
+      this.goodsTagList=[];
       this.form = {
         pics: {},
         id: null,
@@ -188,8 +231,7 @@ export default {
           const sendForm = JSON.parse(JSON.stringify(this.form));
           sendForm.spec = JSON.stringify(setSpec(sendForm.spec));
           sendForm.pics = JSON.stringify(sendForm.pics);
-          sendForm.goodsTagList = [{ tag: "1", state: 1 }];
-
+          sendForm.goodsTagList = this.goodsTagList;
           if (sendForm.id != null) {
             updateSpu(sendForm).then((response) => {
               this.$modal.msgSuccess("修改成功");
@@ -215,5 +257,20 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
+  .el-tag + .el-tag {
+    margin-left: 10px;
+  }
+  .button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
 </style>

src/views/shop/shop/index.vue

@@ -43,15 +43,12 @@
       </el-table-column>
       <el-table-column label="默认店铺" align="center" prop="isDefault" />
       <el-table-column label="城市" align="center" prop="code" />
-      <el-table-column label="设备数量" align="center" prop="lng" />
-      <el-table-column label="地址" align="center" prop="lat" />
-      <el-table-column label="总销售金额" align="center" prop="remarks" />
-      <el-table-column label="总销量" align="center" prop="startTime" />
+      <el-table-column label="设备数量" align="center" prop="machineCount" />
+      <el-table-column label="地址" align="center" prop="address" />
+      <el-table-column label="总销售金额" align="center" prop="salesAmount" />
+      <el-table-column label="总销量" align="center" prop="salesVolume" />
       <el-table-column label="创建时间" align="center" prop="endTime" />
       <el-table-column label="营业时间" align="center" prop="address" />
-      <el-table-column label=" 设备数量" align="center" prop="machineCount" />
-      <el-table-column label=" 销售金额" align="center" prop="salesAmount" />
-      <el-table-column label=" 销量" align="center" prop="salesVolume" />
       <el-table-column label="状态" align="center" prop="state">
         <template slot-scope="scope">
           <span v-if="scope.row.state == 1">正常营业</span>