标签管理 标签分类 删除标签改为调用接口

src/views/label/tag/detail.vue

@@ -8,8 +8,8 @@
 
       <!-- 二级标签 -->
       <el-form-item label="二级标签：" size="mini">
-        <el-tag v-for="(item, index) in form.secondTags" :key="item.secondId" closable
-          @close="getClose(index, '二级标签')" style="margin: 0 10px 10px 0">
+        <el-tag v-for="item in form.secondTags" :key="item.secondId" closable
+          @close="getClose(item.secondId, item.secondName)" style="margin: 0 10px 10px 0">
           {{ item.secondName }}
         </el-tag>
         <el-input v-if="inputVisible" v-model="secondTags" ref="input" @blur="getBlur" style="width: 90px" />
@@ -34,15 +34,15 @@
         <div v-if="form.secondTags.length > 0">
           <div v-for="item in form.secondTags" :key="item.secondId">
             <span style="margin: 0 10px 10px 0">{{ item.secondName }}</span>
-            <el-tag v-for="(i, index) in item.threeTag" :key="i.threeId" closable
-              @close="getClose(index, '三级标签', item)" style="margin: 0 10px 10px 0">
+            <el-tag v-for="i in item.threeTag" :key="i.threeId" closable
+              @close="getClose(i.threeId, i.threeName)" style="margin: 0 10px 10px 0">
               {{ i.threeName }} {{ propertyFormatter(i.propertyId )}}
             </el-tag>
           </div>
         </div>
         <div v-else>
-          <el-tag v-for="(item, index) in form.threeTag" :key="index" closable
-            @close="getClose(index, '三级标签')" style="margin: 0 10px 10px 0">
+          <el-tag v-for="item in form.threeTag" :key="item.threeId" closable
+            @close="getClose(item.threeId, item.threeName)" style="margin: 0 10px 10px 0">
             {{ item.threeName }} {{ propertyFormatter(item.propertyId )}}
           </el-tag>
         </div>
@@ -117,7 +117,7 @@
 </template>
 
 <script>
-import { contentList, findList, detail, edit, createTag, remove } from '@/api/label/tag'
+import { contentList, findList, detail, edit, createTag, remove, removeChildren } from '@/api/label/tag'
 export default {
   dicts: ['audio_type', 'free_yes_no'],
   data() {
@@ -233,16 +233,19 @@ export default {
     },
 
     // 删除标签
-    getClose(index, key, item) {
-      if (key === '二级标签') {
-        this.form.secondTags.splice(index, 1)
-      } else {
-        if (this.form.secondTags.length > 0) {
-          item.threeTag.splice(index, 1)
-        } else {
-          this.form.threeTag.splice(index, 1)
-        }
-      }
+    getClose(id, name) {
+      this.$confirm(`是否删除 ${name} 标签?`, '提示', {
+        'cancelButtonText': '取消',
+        'confirmButtonText': '确定',
+        type: 'warning'
+      }).then(() => {
+        removeChildren(id).then(res => {
+          if (res.code === 0) {
+            this.$message.success('删除成功！')
+            this.getDetail()
+          }
+        })
+      })
     },
 
     // 添加三级标签