标签管理 标签分类

src/views/label/tag/detail.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="app-container">
+    <el-form label-width="100px">
+      <el-form-item label="一级标签：" style="width: 500px">
+        <el-input placeholder="请输入一级标签" />
+      </el-form-item>
+      <el-form-item label="二级标签：">
+        <el-tag v-for="item in tags" :key="item.value" closable>{{ item.label }}</el-tag>
+        <el-input class="tagInput" v-if="inputVisible_2" ref="tagInput" size="mini"
+          @blur="inputVisible_2 = false" />
+        <el-button v-else @click="showInput" icon="el-icon-plus" size="mini">添加</el-button>
+      </el-form-item>
+      <el-form-item v-if="this.form.id" label="三级标签：">
+        <div v-for="(item, index) in tags" :key="item.value">
+          <span style="margin-right: 10px">{{ item.label }}</span>
+          <el-tag closable>默认</el-tag>
+          <div v-if="tagActive === index">
+            <el-input class="tagInput" size="mini" placeholder="请输入标签" />
+            <el-select class="tagSelect" size="mini" placeholder="请选择标签属性">
+              <el-option />
+            </el-select>
+            <el-button type="primary" size="mini" @click="handleInput">添加</el-button>
+          </div>
+          <el-button v-else size="mini" icon="el-icon-plus" @click="showInput(index)">添加</el-button>
+        </div>
+      </el-form-item>
+      <el-form-item v-if="this.form.id" label="频道内容：">
+        <el-select placeholder="请选择三级标签再新增" style="width: 200px; margin-right: 10px">
+          <el-option />
+        </el-select>
+        <el-button type="primary" icon="el-icon-plus" @click="dialogVisible = true">
+          新增内容
+        </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-column label="操作" align="center">
+            <template>
+              <el-button type="delete">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+    </el-form>
+    <div class="form-btn">
+      <el-button>取消</el-button>
+      <el-button type="primary">提交</el-button>
+    </div>
+
+    <!-- 弹窗 -->
+    <el-dialog :visible.sync="dialogVisible" :title="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-form-item>
+        <el-form-item>
+          <el-button icon="el-icon-search" type="primary">搜索</el-button>
+          <el-button icon="el-icon-refresh">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <!-- 列表 -->
+      <el-table>
+        <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>
+        <el-table-column label="分类" prop="audioTypeText" align="center" />
+        <el-table-column label="节目数量" prop="audioOrder" align="center" />
+        <el-table-column label="付费类型" align="center" />
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      // 显示标签输入框
+      inputVisible_2: false,
+      tagActive: '',
+      // 标签
+      tags: [{
+        value: 1,
+        label: '标签一'
+      }, {
+        value: 2,
+        label: '标签二'
+      }],
+      // 弹窗
+      dialogVisible: false,
+      title: '',
+      // 表单
+      form: {}
+    }
+  },
+  created(){
+    this.form.id = this.$route.query.id
+  },
+  methods: {
+    // 显示标签输入框
+    showInput(index) {
+      if (index >= 0) {
+        this.tagActive = index
+      } else {
+        this.inputVisible_2 = true
+        this.$nextTick(() => {
+          this.$refs.tagInput.focus()
+        })
+      }
+    },
+    // 三级标签添加
+    handleInput() {
+      this.$message.success('成功！')
+      this.tagActive = ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scope>
+.el-tag,
+.tagInput,
+.tagSelect {
+  margin-right: 10px;
+}
+
+.tagInput {
+  width: 100px;
+}
+
+.tagSelect {
+  width: 150px;
+}
+</style>

src/views/label/tag/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="app-container">
+    <!-- 新增 -->
+    <el-button type="primary" icon="el-icon-plus" size="mini" @click="getDetail">新增标签</el-button>
+    <!-- 列表 -->
+    <el-table :data="tableData">
+      <el-table-column label="排序" type="index" align="center" />
+      <el-table-column label="一级标签" align="center" />
+      <el-table-column label="二级标签" align="center" />
+      <el-table-column label="三级标签" align="center" />
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" @click="getDetail(scope.row)">编辑</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [{
+        value: 1
+      }]
+    }
+  },
+  methods:{
+    getDetail(row){
+      this.$router.push({
+        path: '/label/tag/detail',
+        query: {
+          id: row.value
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scope>
+
+</style>