修复已知bug

src/views/label/tag/detail.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form label-width="100px">
+    <el-form label-width="auto">
       <!-- 一级标签 -->
       <el-form-item label="一级标签：" style="width: 500px">
         <el-input v-model="form.firstName" placeholder="请输入一级标签" />
@@ -9,67 +9,59 @@
       <!-- 二级标签 -->
       <el-form-item label="二级标签：" size="mini">
         <el-tag v-for="(item, index) in form.secondTags" :key="item.secondId" closable
-          @close="getClose(index, 'second')">
+          @close="getClose(index, '二级标签')" style="margin: 0 10px 10px 0">
           {{ item.secondName }}
         </el-tag>
-        <el-input class="tagInput" v-model="name" v-if="inputVisible_2" ref="tagInput" @blur="getBlur" />
-        <el-button v-else icon="el-icon-plus" @click="showSecondInput">添加</el-button>
+        <el-input v-if="inputVisible" v-model="secondTags" ref="input" @blur="getBlur" style="width: 90px" />
+        <el-button v-else icon="el-icon-plus" @click="showInput">添加</el-button>
       </el-form-item>
 
-      <!-- 有二级标签的三级标签 -->
-      <el-form-item v-if="inside" label="三级标签：">
-        <div v-for="(item, index) in form.secondTags" :key="item.secondId">
-          <span style="margin-right: 10px">{{ item.secondName }}</span>
-          <el-tag v-for="(i, ind) in item.threeTag" :key="i.propertyId" closable
-            @close="getClose(index, 'insideThree', ind)">
-            {{ i.threeName }} {{ propertyFormatter(i.propertyId) }}
-          </el-tag>
-          <span v-if="tagActive === index">
-            <el-input v-model="name" class="tagInput" size="mini" placeholder="请输入标签" />
-            <el-select v-model="propertyId" class="tagSelect" size="mini" placeholder="请选择标签属性">
-              <el-option v-for="item in dict.type.audio_type" :key="item.value" :label="item.label"
-                :value="item.value" />
-            </el-select>
-            <el-button type="primary" size="mini" @click="handleInput(index)">添加</el-button>
-            <el-button size="mini" @click="close(index)">取消</el-button>
-          </span>
-          <el-button v-else size="mini" icon="el-icon-plus" @click="showInput(index)">添加</el-button>
-        </div>
-      </el-form-item>
-
-      <!-- 没有二级标签的三级标签 -->
-      <el-form-item v-if="outside" label="三级标签：">
-        <el-tag v-for="(item, index) in form.threeTag" :key="item.propertyId" closable
-          @close="getClose(index, 'outsideThree')">
-          {{ item.threeName }} {{ propertyFormatter(item.propertyId) }}
-        </el-tag>
-        <div v-if="inputVisible_3">
-          <el-input v-model="name" class="tagInput" size="mini" placeholder="请输入标签" ref="tagInput" />
-          <el-select v-model="propertyId" class="tagSelect" size="mini" placeholder="请选择标签属性">
+      <!-- 三级标签 -->
+      <el-form-item label="三级标签：" size="mini" style="margin: 0">
+        <div style="display:flex; width: 500px">
+          <el-select v-if="form.secondTags.length > 0" v-model="type" placeholder="请选择二级标签"
+            style="margin-right: 10px;">
+            <el-option v-for="(item, index) in form.secondTags" :key="index" :label="item.secondName"
+              :value="index" />
+          </el-select>
+          <el-input v-model="threeTag.threeName" placeholder="请输入三级标签" style="margin-right: 10px;" />
+          <el-select v-model="threeTag.propertyId" placeholder="请选择标签属性" style="margin-right: 10px;">
             <el-option v-for="item in dict.type.audio_type" :key="item.value" :label="item.label"
               :value="item.value" />
           </el-select>
-          <el-button type="primary" size="mini" @click="handleInput">添加</el-button>
-          <el-button size="mini" @click="close">取消</el-button>
+          <el-button type="primary" icon="el-icon-plus" @click="getInput">添加</el-button>
+        </div>
+        <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">
+              {{ 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">
+            {{ item.threeName }} {{ propertyFormatter(item.propertyId )}}
+          </el-tag>
         </div>
-        <el-button v-else size="mini" icon="el-icon-plus" @click="showThreeInput">添加</el-button>
       </el-form-item>
       <el-form-item size="mini">
         <el-button @click="cancel">取消</el-button>
         <el-button type="primary" @click="getSubmit">提交</el-button>
       </el-form-item>
-      <el-form-item label="频道内容：">
-        <el-select v-model="tagId" placeholder="先提交新添加的三级标签" style="width: 200px; margin-right: 10px">
-          <el-option v-for="item in typeOptions" :key="item.threeId" :label="item.threeName"
+      <!-- 列表 -->
+      <el-form-item label="频道内容">
+        <el-select v-model="tagId" placeholder="请选择已添加的三级标签" style="width: 200px;">
+          <el-option v-for="item in threeTagOptions" :key="item.threeId" :label="item.threeName"
             :value="item.threeId" />
         </el-select>
-        <el-select v-model="dialogForm.type" disabled style="width: 200px; margin-right: 10px">
-          <el-option v-for="item in dict.type.audio_type" :key="item.propertyId" :label="item.label"
+        <el-select v-model="dialogForm.type" disabled style="width: 200px; margin: 0 10px">
+          <el-option v-for="item in dict.type.audio_type" :key="item.value" :label="item.label"
             :value="item.value" />
         </el-select>
-        <el-button type="primary" icon="el-icon-plus" @click="getDialog">
-          新增内容
-        </el-button>
+        <el-button type="primary" icon="el-icon-plus" @click="getDialog">新增内容</el-button>
         <el-table :data="tableData" height="489" lazy>
           <el-table-column label="内容ID" prop="audioId" align="center" />
           <el-table-column label="内容名称" prop="audioName" align="center" />
@@ -132,64 +124,43 @@ export default {
     return {
       // 遮罩层
       loading: false,
-      // 新增时不显示三级标签
-      inside: false,
-      outside: false,
-      // 显示标签输入框
-      inputVisible_2: false,
-      inputVisible_3: false,
-      tagActive: -1,
-      // 标签
-      tags: [{
-        value: 1,
-        label: '标签一'
-      }, {
-        value: 2,
-        label: '标签二'
-      }],
       // 弹窗
       dialogVisible: false,
-      title: '',
       // 表单
       form: {
         secondTags: []
       },
-      // 标签名
-      name: '',
-      // 标签属性
-      propertyId: '',
-      // 三级标签筛选
-      typeOptions: [],
-
-      // 弹窗
-      dialogForm: {
-        pageNum: 1,
-        pageSize: 10
-      },
-      total: 0,
       // 列表
       tableData: [],
       // 弹窗列表
       dialogData: [],
+      // 添加内容id数组
+      ids: [],
+      // 二级标签
+      secondTags: '',
+      // 控制输入框显示
+      inputVisible: false,
+      // 三级标签
+      type: null,
+      threeTag: {
+        threeName: '',
+        propertyId: ''
+      },
       // 选择三级标签
       tagId: '',
-      // 添加内容id数组
-      ids: []
+      threeTagOptions: [],
+      // 弹窗
+      dialogForm: {
+        type: '',
+        pageNum: 1,
+        pageSize: 10,
+      },
+      total: 0,
     }
   },
   watch: {
-    'form.secondTags'(val) {
-      if (val.length > 0) {
-        this.inside = true
-        this.outside = false
-        this.form.threeTag = []
-      } else {
-        this.inside = false
-        this.outside = true
-      }
-    },
     tagId(val) {
-      this.dialogForm.type = this.typeOptions.find(i => i.threeId === val).propertyId
+      this.dialogForm.type = this.threeTagOptions.find(i => i.threeId === val).propertyId
       if (val) {
         this.getList()
       }
@@ -207,18 +178,17 @@ export default {
       detail(this.form.firstId).then(res => {
         if (res.code === 0) {
           this.form = res.data
-          if (res.data.threeTag.length > 0) {
-            this.outside = true
+          if (res.data.secondTags.length === 0 && res.data.threeTag === null) {
             this.form.threeTag = []
-            this.typeOptions = res.data.threeTag
-          } else {
-            this.typeOptions = []
-            this.inside = true
+          }
+          if (res.data.secondTags.length > 0) {
             res.data.secondTags.map(i => {
               i.threeTag.map(j => {
-                this.typeOptions.push(j)
+                this.threeTagOptions.push(j)
               })
             })
+          } else {
+            this.threeTagOptions = res.data.threeTag
           }
         }
       })
@@ -236,88 +206,67 @@ export default {
       })
     },
 
-    // 显示二级标签输入框
-    showSecondInput() {
-      this.name = ''
-      this.inputVisible_2 = true
+    // 显示输入框
+    showInput() {
+      this.inputVisible = true
       this.$nextTick(() => {
-        this.$refs.tagInput.focus()
+        this.$refs.input.focus()
       })
     },
 
-    // 二级标签确认
+    // 失去焦点保存
     getBlur() {
-      this.inputVisible_2 = false
-      if (this.name !== '') {
-        this.form.secondTags.push({
-          secondName: this.name
-        })
-      }
-    },
-
-    // 显示有二级标签的三级标签
-    showInput(index) {
-      this.name = ''
-      this.propertyId = ''
-      this.tagActive = index
-      if (this.form.secondTags[index].threeTag === undefined) {
-        this.form.secondTags[index].threeTag = []
+      if (this.secondTags) {
+        if (this.form.secondTags.indexOf(this.secondTags) == -1) {
+          this.form.secondTags.push({
+            secondName: this.secondTags,
+            threeTag: []
+          })
+        } else {
+          this.$message.error('请勿新增相同的标签！')
+        }
       }
+      this.inputVisible = false
+      this.secondTags = ''
     },
 
-    // 显示三级标签输入框
-    showThreeInput() {
-      this.name = ''
-      this.propertyId = ''
-      this.inputVisible_3 = true
-      this.$nextTick(() => {
-        this.$refs.tagInput.focus()
-      })
-    },
-
-    // 关闭三级标签输入框
-    close(index) {
-      if (index >= 0) {
-        this.tagActive = -1
+    // 删除标签
+    getClose(index, key, item) {
+      if (key === '二级标签') {
+        this.form.secondTags.splice(index, 1)
       } else {
-        this.inputVisible_3 = false
-      }
-    },
-
-    // 三级标签添加
-    handleInput(index) {
-      if (this.form.secondTags.length > 0) {
-        if (this.name !== '' && this.propertyId !== '') {
-          this.form.secondTags[index].threeTag.push({
-            propertyId: this.propertyId,
-            threeName: this.name
-          })
-          this.tagActive = -1
-          this.$message.success('成功！')
-          return
-        }
-      } else {
-        if (this.name !== '') {
-          this.form.threeTag.push({
-            propertyId: this.propertyId,
-            threeName: this.name
-          })
-          this.inputVisible_3 = false
-          this.$message.success('成功！')
-          return
+        if (this.form.secondTags.length > 0) {
+          item.threeTag.splice(index, 1)
+        } else {
+          this.form.threeTag.splice(index, 1)
         }
       }
-      this.$message.error('不能为空！')
     },
 
-    // 删除标签
-    getClose(index, key, ind) {
-      if (key === 'second') {
-        this.form.secondTags.splice(index, 1)
-      } else if (key === 'insideThree') {
-        this.form.secondTags[index].threeTag.splice(ind, 1)
+    // 添加三级标签
+    getInput() {
+      if (this.form.secondTags.length > 0 && this.type == null) {
+        this.$message.error('请选择二级标签！')
+      } else if (!this.threeTag.threeName) {
+        this.$message.error('请输入三级标签！')
+      } else if (!this.threeTag.propertyId) {
+        this.$message.error('请选择标签属性！')
       } else {
-        this.form.threeTag.splice(index, 1)
+        if (this.form.secondTags.length > 0) {
+          if (this.form.secondTags[this.type].threeTag.findIndex(i => i.threeName === this.threeTag.threeName && i.propertyId === this.threeTag.propertyId) == -1) {
+            this.form.secondTags[this.type].threeTag.push(this.threeTag)
+            this.threeTag = {}
+          } else {
+            this.$message.error('该三级标签已存在！')
+          }
+        } else {
+          if (this.form.threeTag.findIndex(i => i.threeName === this.threeTag.threeName && i.propertyId === this.threeTag.propertyId) == -1) {
+            this.form.threeTag.push(this.threeTag)
+            this.threeTag = {}
+          } else {
+            this.$message.error('该三级标签已存在！')
+          }
+        }
       }
     },
 
@@ -327,7 +276,7 @@ export default {
         this.dialogVisible = true
         this.getPage()
       } else {
-        this.$message.error('请选择三级标签在新增内容！')
+        this.$message.error('请选择三级标签再新增内容！')
       }
     },
 
@@ -356,21 +305,12 @@ export default {
 
     // 提交
     getSubmit() {
-      if (this.$route.query.id !== undefined) {
-        edit(this.form).then(res => {
-          if (res.code === 0) {
-            this.$message.success('修改成功！')
-            this.getDetail()
-          }
-        })
-      } else {
-        create(this.form).then(res => {
-          if (res.code === 0) {
-            this.$message.success('新增成功！')
-            this.cancel()
-          }
-        })
-      }
+      edit(this.form).then(res => {
+        if (res.code === 0) {
+          this.$message.success('修改成功！')
+          this.getDetail()
+        }
+      })
     },
 
     // 搜索

src/views/label/tag/index.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="app-container">
     <!-- 新增 -->
-    <el-button type="primary" icon="el-icon-plus" size="mini" @click="getDetail">新增标签</el-button>
+    <el-button type="primary" icon="el-icon-plus" size="mini" @click="dialogVisible = true">新增标签</el-button>
     <!-- 列表 -->
-    <el-table :data="tableData">
+    <el-table :data="tableData" height="614">
       <el-table-column label="排序" type="index" align="center" />
       <el-table-column label="一级标签" prop="name" align="center" />
-      <el-table-column label="二级标签" align="center">
+      <el-table-column label="二级标签" align="center" show-overflow-tooltip>
         <template slot-scope="scope">
           <span v-for="(item, index) in scope.row.secondTagNames" :key="index">
             {{ index === scope.row.secondTagNames.length - 1 && item || ( item + ',') }}
           </span>
         </template>
       </el-table-column>
-      <el-table-column label="三级标签" align="center">
+      <el-table-column label="三级标签" align="center" show-overflow-tooltip>
         <template slot-scope="scope">
           <span v-for="(item, index) in scope.row.threeTagNames" :key="index">
             {{ index === scope.row.threeTagNames.length - 1 && item || ( item + ',') }}
@@ -26,11 +26,32 @@
         </template>
       </el-table-column>
     </el-table>
+    <!-- 弹窗 -->
+    <el-dialog :visible.sync="dialogVisible" title="新增标签" width="500px" :before-close="cancel">
+      <el-form label-width="auto">
+        <el-form-item label="一级标签：">
+          <el-input v-model="dialogForm.firstName" placeholder="请输入一级标签" />
+        </el-form-item>
+        <el-form-item label="二级标签：" size="mini">
+          <el-tag v-for="item in dialogForm.secondTags" :key="item.secondName" closable
+            @close="getClose(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" />
+          <el-button v-else icon="el-icon-plus" @click="showInput">添加</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="cancel">取消</el-button>
+          <el-button type="primary" @click="getSubmit">提交</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { list } from '@/api/label/tag'
+import { list, create } from '@/api/label/tag'
 export default {
   data() {
     return {
@@ -40,7 +61,15 @@ export default {
         pageSize: 10
       },
       // 列表
-      tableData: []
+      tableData: [],
+      // 弹窗
+      dialogVisible: false,
+      dialogForm: {
+        secondTags: []
+      },
+      secondTags: '',
+      // 控制标签输入框显示
+      inputVisible: false
     }
   },
   mounted() {
@@ -50,13 +79,13 @@ export default {
     // 列表
     getList() {
       list().then(res => {
-        console.log(res);
         if (res.code === 0) {
           this.tableData = res.data
         }
       })
     },
 
+    // 编辑
     getDetail(row) {
       this.$router.push({
         path: '/label/tag/detail',
@@ -64,6 +93,52 @@ export default {
           id: row.id
         }
       })
+    },
+
+    // 显示输入框
+    showInput() {
+      this.inputVisible = true
+      this.$nextTick(() => {
+        this.$refs.input.focus()
+      })
+    },
+
+    // 失去焦点保存
+    getBlur() {
+      if (this.secondTags) {
+        if (this.dialogForm.secondTags.indexOf(this.secondTags) == -1) {
+          this.dialogForm.secondTags.push({
+            secondName: this.secondTags
+          })
+        } else {
+          this.$message.error('请勿新增相同的标签！')
+        }
+      }
+      this.inputVisible = false
+      this.secondTags = ''
+    },
+
+    // 删除标签
+    getClose(item) {
+      this.dialogForm.secondTags.splice(this.dialogForm.secondTags.findIndex(i => i.secondName === item), 1)
+    },
+
+    // 取消
+    cancel() {
+      this.dialogVisible = false,
+        this.dialogForm = {
+          secondTags: []
+        }
+    },
+
+    // 确认
+    getSubmit() {
+      create(this.dialogForm).then(res => {
+        if (res.code === 0) {
+          this.$message.success('新增成功！')
+          this.getList()
+        }
+      })
     }
   }
 }