From 23ea410a90853dc7736ee19712fb84a703b2cebe Mon Sep 17 00:00:00 2001
From: xing <fthvgb1@163.com>
Date: Sun, 28 Jun 2020 18:14:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=82=E6=95=B0tag=E5=88=A0=E9=99=A4=20?=
 =?UTF-8?q?=E7=94=A8=E5=88=B0=E5=8A=A8=E6=80=81=E6=B7=BB=E5=8A=A0tag(?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E6=8C=89=E9=92=AE=E5=8F=98=E6=88=90=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5=E6=A1=86)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/goods/params.vue | 64 +++++++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)

diff --git a/src/components/goods/params.vue b/src/components/goods/params.vue
index b0fd90b..fe0702b 100644
--- a/src/components/goods/params.vue
+++ b/src/components/goods/params.vue
@@ -40,6 +40,22 @@
             <el-table-column
               type="expand"
             >
+              <template slot-scope="scope">
+                <span v-if="scope.row.attr_vals" >
+                  <el-tag  closable :key="i" v-for="(tag,i) in scope.row.attr_vals.split(' ')" @close="delTag(tag,scope.row)">{{tag}}</el-tag>
+                </span>
+                <el-input
+                  class="input-new-tag"
+                  v-if="scope.row.inputVisible"
+                  v-model="scope.row.inputValue"
+                  ref="saveTagInput"
+                  size="small"
+                  @keyup.enter.native="handleInputConfirm(scope.row)"
+                  @blur="handleInputConfirm(scope.row)"
+                >
+                </el-input>
+                <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
+              </template>
             </el-table-column>
             <el-table-column
               label="#"
@@ -69,6 +85,11 @@
             <el-table-column
               type="expand"
             >
+              <template slot-scope="scope">
+                <div v-if="scope.row.attr_vals" >
+                  <el-tag  closable :key="i" v-for="(tag,i) in scope.row.attr_vals.split(' ')">{{tag}}</el-tag>
+                </div>
+              </template>
             </el-table-column>
             <el-table-column
               label="#"
@@ -142,6 +163,42 @@ export default {
     }
   },
   methods: {
+
+    delTag (tag, row) {
+      const tmp = row.attr_vals.split(' ')
+      tmp.splice(tmp.indexOf(tag), 1)
+      row.attr_vals = tmp.join(' ')
+      this.save(row)
+    },
+    showInput (row) {
+      row.inputVisible = true
+      // 当页面被重新渲染之后执行的回调函数
+      this.$nextTick(_ => {
+        this.$refs.saveTagInput.$refs.input.focus()
+      })
+    },
+
+    async save (row) {
+      const { data: res } = await this.$http.put(`categories/${this.cateId}/attributes/${row.attr_id}`, {
+        attr_name: row.attr_name,
+        attr_sel: row.attr_sel,
+        attr_vals: row.attr_vals
+      })
+      if (res.meta.status !== 200) {
+        return this.$message.error(res.meta.msg)
+      }
+      this.$message.success(res.meta.msg)
+    },
+
+    async handleInputConfirm (row) {
+      const inputValue = row.inputValue.trim()
+      if (inputValue.length > 0) {
+        row.attr_vals += (row.attr_vals.length > 0 ? ' ' : '') + inputValue
+        await this.save(row)
+      }
+      row.inputVisible = false
+      row.inputValue = ''
+    },
     sub () {
       this.$refs.form.validate(valid => {
         if (valid) {
@@ -197,6 +254,10 @@ export default {
         if (res.meta.status !== 200) {
           return this.$message.error(res.meta.msg)
         }
+        res.data.forEach((item, i) => {
+          res.data[i].inputVisible = false
+          res.data[i].inputValue = ''
+        })
         this[this.tab] = res.data
       }
     },
@@ -232,4 +293,7 @@ export default {
 .el-alert{
   margin-bottom: 15px;
 }
+  .el-tag {
+    margin-right: 10px;
+  }
 </style>