标签管理 标签分类 接口联调

src/views/label/tag/detail.vue

@@ -1,50 +1,84 @@
 <template>
   <div class="app-container">
     <el-form label-width="100px">
+      <!-- 一级标签 -->
       <el-form-item label="一级标签：" style="width: 500px">
-        <el-input v-model="form.firstTagName" placeholder="请输入一级标签" />
+        <el-input v-model="form.firstName" placeholder="请输入一级标签" />
       </el-form-item>
 
+      <!-- 二级标签 -->
       <el-form-item label="二级标签：" size="mini">
-        <el-tag v-for="(item, index) in form.secondTagNames" :key="index" closable @close="getClose(index)">
-          {{ item }}</el-tag>
-        <el-input class="tagInput" v-model="secondTagName" v-if="inputVisible_2" ref="tagInput"
-          @blur="getBlur" />
-        <el-button v-else @click="showInput" icon="el-icon-plus">添加</el-button>
+        <el-tag v-for="(item, index) in form.secondTags" :key="item.secondId" closable
+          @close="getClose(index, 'second')">
+          {{ 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-form-item>
 
-      <el-form-item v-if="isShow" label="三级标签：">
-        <div v-for="(item, index) in tags" :key="item.value">
-          <span style="margin-right: 10px">{{ item.label }}</span>
-          <el-tag closable>
-            爵士 专辑
+      <!-- 有二级标签的三级标签 -->
+      <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>
-          <div v-if="tagActive === index">
-            <el-input class="tagInput" size="mini" placeholder="请输入标签" />
-            <el-select class="tagSelect" size="mini" placeholder="请选择标签属性">
-              <el-option />
+          <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.label_type" :key="item.value" :label="item.label"
+                :value="item.value" />
             </el-select>
-            <el-button type="primary" size="mini" @click="handleInput">添加</el-button>
-          </div>
+            <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="isShow" label="频道内容：">
-        <el-select placeholder="请选择三级标签再新增" style="width: 200px; margin-right: 10px">
-          <el-option />
+      <!-- 没有二级标签的三级标签 -->
+      <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-option v-for="item in dict.type.label_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>
+        </div>
+        <el-button v-else size="mini" icon="el-icon-plus" @click="showThreeInput">添加</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"
+            :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.label_type" :key="item.propertyId" :label="item.label"
+            :value="item.value" />
         </el-select>
         <el-button type="primary" icon="el-icon-plus" @click="getDialog">
           新增内容
         </el-button>
-        <el-table>
-          <el-table-column label="内容ID" align="center" />
-          <el-table-column label="内容名称" align="center" />
-          <el-table-column label="内容封面" align="center" />
-          <el-table-column label="内容属性" align="center" />
+        <el-table :data="tableData" height="489" lazy>
+          <el-table-column label="内容ID" prop="audioId" align="center" />
+          <el-table-column label="内容名称" prop="audioName" align="center" />
+          <el-table-column label="内容封面" align="center" width="100px">
+            <template slot-scope="scope">
+              <el-image :src="scope.row.audioPic" />
+            </template>
+          </el-table-column>
+          <el-table-column label="内容属性" prop="audioType" align="center" :formatter="typeFormatter" />
           <el-table-column label="操作" align="center">
-            <template>
-              <el-button type="delete">删除</el-button>
+            <template slot-scope="scope">
+              <el-button type="delete" @click="getDelete(scope.row.id)">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -56,47 +90,56 @@
     </div>
 
     <!-- 弹窗 -->
-    <el-dialog :visible.sync="dialogVisible" :title="title">
+    <el-dialog :visible.sync="dialogVisible" title="新增频道内容">
       <el-form inline size="mini">
         <el-form-item label="内容名称：">
-          <el-input placeholder="请输入内容名称" />
-        </el-form-item>
-        <el-form-item label="分类：">
-          <el-select placeholder="请选择分类">
-            <el-option />
-          </el-select>
+          <el-input v-model="dialogForm.name" placeholder="请输入内容名称" clearable />
         </el-form-item>
         <el-form-item>
-          <el-button icon="el-icon-search" type="primary">搜索</el-button>
-          <el-button icon="el-icon-refresh">重置</el-button>
+          <el-button icon="el-icon-search" type="primary" @click="getSearch">搜索</el-button>
+          <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
         </el-form-item>
       </el-form>
       <!-- 列表 -->
-      <el-table>
+      <el-table :data="dialogData" height="584" v-loading="loading" ref="table" :row-key="getRowKey"
+        @selection-change="getChange" lazy>
         <el-table-column type="selection" align="center" />
-        <el-table-column label="内容ID" align="center" />
-        <el-table-column label="音频名称" align="center" />
-        <el-table-column label="音频封面" align="center">
-
+        <el-table-column label="内容ID" prop="id" align="center" />
+        <el-table-column label="音频名称" prop="audioName" align="center" />
+        <el-table-column label="音频封面" align="center" width="100px">
+          <template slot-scope="scope">
+            <el-image :src="scope.row.audioPic" />
+          </template>
         </el-table-column>
-        <el-table-column label="分类" prop="audioTypeText" align="center" />
-        <el-table-column label="节目数量" prop="audioOrder" align="center" />
-        <el-table-column label="付费类型" align="center" />
+        <el-table-column label="分类" prop="audioType" align="center" :formatter="typeFormatter" />
+        <el-table-column label="节目数量" prop="programCount" align="center" />
+        <el-table-column label="付费类型" prop="isFree" align="center" :formatter="freeFormatter" />
       </el-table>
+      <pagination v-show="total>0" :total="total" :page.sync="dialogForm.pageNum"
+        :limit.sync="dialogForm.pageSize" @pagination="getPage" />
+      <div slot="footer">
+        <el-button @click="this.dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="getAdd">确定</el-button>
+      </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { create, contentList, contentAllList } from '@/api/label/tag'
+import { create, contentList, findList, detail, edit, createTag, remove } from '@/api/label/tag'
 export default {
+  dicts: ['label_type', 'free_yes_no'],
   data() {
     return {
-      // 显示三级标签
-      isShow: false,
+      // 遮罩层
+      loading: false,
+      // 新增时不显示三级标签
+      inside: false,
+      outside: false,
       // 显示标签输入框
       inputVisible_2: false,
-      tagActive: '',
+      inputVisible_3: false,
+      tagActive: -1,
       // 标签
       tags: [{
         value: 1,
@@ -110,87 +153,189 @@ export default {
       title: '',
       // 表单
       form: {
-        secondTagNames: []
+        secondTags: []
       },
-      // 二级标签
-      secondTagName: '',
+      // 标签名
+      name: '',
+      // 标签属性
+      propertyId: '',
+      // 三级标签筛选
+      typeOptions: [],
 
       // 弹窗
       dialogForm: {
         pageNum: 1,
         pageSize: 10
+      },
+      total: 0,
+      // 列表
+      tableData: [],
+      // 弹窗列表
+      dialogData: [],
+      // 选择三级标签
+      tagId: '',
+      // 添加内容id数组
+      ids: []
+    }
+  },
+  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
+      if (val) {
+        this.getList()
       }
     }
   },
   mounted() {
     if (this.$route.query.id) {
       this.form.id = this.$route.query.id
-      this.isShow = true
-      this.getList()
+      this.getDetail()
     }
   },
   methods: {
     // 详情
     getDetail() {
-
+      detail(this.form.id).then(res => {
+        if (res.code === 0) {
+          this.form = res.data
+          res.data.secondTags.length > 0 ? this.inside = true : this.outside = true
+          res.data.threeTag ? '' : this.form.threeTag = []
+          this.typeOptions = res.data.threeTag.length > 0 ? res.data.threeTag : ''
+        }
+      })
     },
 
-    // 已选中标签内容
-    getList(){
-      contentList({
-        pageNum: 1,
-        pageSize: 10
+    // 已选中的频道内容
+    getList() {
+      findList({
+        tagId: this.tagId,
+        type: this.dialogForm.type
       }).then(res => {
-        console.log(res);
+        if (res.code === 0) {
+          this.tableData = res.data
+        }
       })
     },
 
-    // 显示标签输入框
-    showInput(index) {
-      if (index >= 0) {
-        this.tagActive = index
-      } else {
-        this.secondTagName = ''
-        this.inputVisible_2 = true
-        this.$nextTick(() => {
-          this.$refs.tagInput.focus()
-        })
-      }
+    // 显示二级标签输入框
+    showSecondInput() {
+      this.name = ''
+      this.inputVisible_2 = true
+      this.$nextTick(() => {
+        this.$refs.tagInput.focus()
+      })
     },
 
     // 二级标签确认
     getBlur() {
       this.inputVisible_2 = false
-      if (this.secondTagName) {
-        this.form.secondTagNames.push(this.secondTagName)
+      if (this.name !== '') {
+        this.form.secondTags.push({
+          secondName: this.name
+        })
       }
     },
 
-    // 删除二级标签
-    getClose(index) {
-      this.form.secondTagNames.splice(index, 1)
+    // 显示有二级标签的三级标签
+    showInput(index) {
+      this.name = ''
+      this.propertyId = ''
+      this.tagActive = index
+      if (this.form.secondTags[index].threeTag === undefined) {
+        this.form.secondTags[index].threeTag = []
+      }
+    },
+
+    // 显示三级标签输入框
+    showThreeInput() {
+      this.name = ''
+      this.propertyId = ''
+      this.inputVisible_3 = true
+      this.$nextTick(() => {
+        this.$refs.tagInput.focus()
+      })
+    },
+
+    // 关闭三级标签输入框
+    close(index) {
+      if (index >= 0) {
+        this.tagActive = -1
+      } else {
+        this.inputVisible_3 = false
+      }
     },
 
     // 三级标签添加
-    handleInput() {
-      this.$message.success('成功！')
-      this.tagActive = ''
+    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
+        }
+      }
+      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)
+      } else {
+        this.form.threeTag.splice(index, 1)
+      }
     },
 
     // 弹窗
     getDialog() {
-      this.dialogVisible = true
-      contentAllList(this.dialogForm).then(res => {
-        console.log(res);
-      })
+      if (this.dialogForm.type) {
+        this.dialogVisible = true
+        this.getPage()
+      } else {
+        this.$message.error('请选择三级标签在新增内容！')
+      }
     },
 
-    // 提交
-    getSubmit() {
-      create(this.form).then(res => {
+    // 全部内容列表
+    getPage() {
+      this.loading = true
+      contentList(this.dialogForm).then(res => {
         if (res.code === 0) {
-          this.$message.success('新增成功！')
-          this.cancel()
+          this.dialogData = res.data.records
+          this.total = res.data.total
+          this.$nextTick(() => {
+            this.tableData.map(i => {
+              let row = res.data.records.find(j => j.id === i.audioId)
+              this.$refs.table.toggleRowSelection(row)
+            })
+          })
+          this.loading = false
         }
       })
     },
@@ -198,6 +343,89 @@ export default {
     // 取消
     cancel() {
       this.$tab.closeOpenPage("/label/tag");
+    },
+
+    // 提交
+    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()
+          }
+        })
+      }
+    },
+
+    // 搜索
+    getSearch() {
+      this.dialogForm.pageNum = 1
+      this.getPage()
+    },
+
+    // 重置
+    getRefresh() {
+      this.dialogForm.pageSize = 10
+      this.getSearch()
+    },
+
+    getRowKey(row) {
+      return row.id
+    },
+    // 表格多选
+    getChange(row) {
+      this.ids = []
+      row.map(i => this.ids.push(i.id))
+    },
+
+    // 添加频道内容
+    getAdd() {
+      createTag({
+        tagId: this.tagId,
+        type: this.dialogForm.type,
+        ids: this.ids
+      }).then(res => {
+        if (res.code === 0) {
+          this.$message.success('添加成功！')
+          this.dialogVisible = false
+          this.getList()
+        }
+      })
+    },
+
+    // 删除某个频道内容
+    getDelete(id) {
+      remove(id).then(res => {
+        if (res.code === 0) {
+          this.$confirm('是否删除?', '警告', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            this.$message.success('删除成功！')
+            this.getList()
+          })
+        }
+      })
+    },
+
+
+    // 字典翻译
+    propertyFormatter(row) {
+      return this.selectDictLabel(this.dict.type.label_type, row)
+    },
+    typeFormatter(row) {
+      return this.selectDictLabel(this.dict.type.label_type, row.audioType)
+    },
+    freeFormatter(row) {
+      return this.selectDictLabel(this.dict.type.free_yes_no, row.isFree)
     }
   }
 }