运营管理 标签分类 重构

src/views/operation/tag/detail.vue

@@ -1,165 +1,110 @@
 <template>
   <div class="app-container">
-    <el-form label-width="auto">
-      <!-- 一级标签 -->
-      <el-form-item label="一级标签：" style="width: 500px">
-        <el-input v-model="form.firstName" placeholder="请输入一级标签" />
+    <el-form :model="form" :rules="rules" ref="form" label-width="100px" :disabled="disabled">
+      <el-form-item label="标签名称：" prop="name">
+        <el-input v-model="form.name" placeholder="请输入标签名称" maxlength="100" show-word-limit />
       </el-form-item>
-
-      <!-- 二级标签 -->
-      <el-form-item label="二级标签：" size="mini">
-        <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" />
-        <el-button v-else icon="el-icon-plus" @click="showInput">添加</el-button>
+      <el-form-item label="标签排序：" prop="sort">
+        <el-input-number v-model="form.sort" :min="1" label="描述文字" />
       </el-form-item>
-
-      <!-- 三级标签 -->
-      <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 lableTypeOptions" :key="item.value" :label="item.label"
-              :value="item.value" />
-          </el-select>
-          <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 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 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>
+      <el-form-item label="频道属性：" prop="channelType">
+        <el-select v-model="form.channelType" placeholder="请选择频道属性" @change="handleChange">
+          <el-option v-for="item in typeOptions" :key="item.value" :value="item.value" :label="item.label" />
+        </el-select>
       </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 label="频道名称：" prop="channelName">
+        <el-input v-model="form.channelName" placeholder="请输入频道名称" maxlength="100" show-word-limit />
       </el-form-item>
-      <!-- 列表 -->
-      <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: 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-table :data="tableData" 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">
+      <el-form-item label="频道介绍：" prop="channelDescribe">
+        <el-input v-model="form.channelDescribe" type="textarea" placeholder="请输入频道简介"
+          :autosize="{ minRows: 5, maxRows: 10}" maxlength="300" show-word-limit />
+      </el-form-item>
+      <el-form-item label="频道封面：" prop="channelCover">
+        <Upload listType="picture-card" :url="form.channelCover" @upload="upload" :disabled="disabled" />
+      </el-form-item>
+      <el-form-item label="频道内容：">
+        <el-button type="primary" @click="getDialog" :disabled="!form.channelType">关联内容</el-button>
+      </el-form-item>
+      <el-form-item style="width: 1000px">
+        <el-table :data="form.listagCategoryAudio">
+          <el-table-column label="音频ID" prop="audioId" align="center" show-overflow-tooltip />
+          <el-table-column label="音频名称" prop="audioName" align="center" show-overflow-tooltip />
+          <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="音频类型" prop="audioType" align="center" :formatter="typeFormatter" />
+          <el-table-column label="当前状态" prop="status" align="center" :formatter="statusFormatter" />
           <el-table-column label="操作" align="center">
             <template slot-scope="scope">
-              <el-button type="delete" @click="getDelete(scope.row.id)">删除</el-button>
+              <el-button type="delete" @click="getDelete(scope.row.audioId)">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
       </el-form-item>
     </el-form>
+    <div class="form-btn">
+      <el-button @click="cancel">取消</el-button>
+      <el-button v-if="!disabled" type="primary" @click="getSubmit">确定</el-button>
+    </div>
 
     <!-- 弹窗 -->
-    <el-dialog :visible.sync="dialogVisible" title="新增频道内容">
-      <el-form inline size="mini" @submit.native.prevent>
-        <el-form-item label="内容名称：">
-          <el-input v-model="dialogForm.name" placeholder="请输入内容名称" clearable />
+    <el-dialog :visible.sync="dialogVisible" title="关联内容" width="1000px">
+      <el-form inline size="mini" style="width:100%">
+        <el-form-item label="资源平台：">
+          <el-select v-model="dialogForm.platformId" placeholder="请选择资源平台">
+            <el-option v-for="item in platformOptions" :key="item.value" :value="item.value"
+              :label="item.label" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="音频名称：">
+          <el-input v-model="dialogForm.name" placeholder="请输入音频名称" />
         </el-form-item>
         <el-form-item>
-          <el-button icon="el-icon-search" type="primary" @click="getSearch">搜索</el-button>
+          <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
           <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
         </el-form-item>
       </el-form>
-      <!-- 列表 -->
-      <el-table :row-key="getRowKey" :data="dialogData" height="476" ref="table"
-        @selection-change="getChange">
+      <el-table :data="dialogTableData" ref="dialogTableData" :row-key="getRowKey" @selection-change="getChange"
+        v-loading="loading">
         <el-table-column type="selection" align="center" :reserve-selection="true" />
-        <el-table-column label="内容ID" prop="id" align="center" />
-        <el-table-column label="音频名称" prop="audioName" align="center" />
-        <el-table-column label="音频封面" align="center" width="100">
+        <el-table-column label="音频ID" prop="audioId" align="center" show-overflow-tooltip />
+        <el-table-column label="音频名称" prop="audioName" align="center" show-overflow-tooltip />
+        <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="音频类型" 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 type="primary" @click="getAdd">确定</el-button>
-      </div>
+        :limit.sync="dialogForm.pageSize" @pagination="getList" />
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { contentList, findList, detail, edit, createTag, remove, removeChildren } from '@/api/operation/tag'
-import { isFreeMixin } from '@/mixin/index'
+import Upload from '@/components/Upload/index.vue'
+import { contentList, submitThree, detail } from '@/api/operation/tag'
+import { platformMixin, isFreeMixin, onOrOffMixin } from '@/mixin/index'
 export default {
-  dicts: ['audio_type'],
-  mixins: [isFreeMixin],
+  components: {
+    Upload
+  },
+  mixins: [platformMixin, isFreeMixin, onOrOffMixin],
   data() {
     return {
       // 遮罩层
       loading: false,
-      // 弹窗
-      dialogVisible: false,
       // 表单
       form: {
-        secondTags: []
-      },
-      // 列表
-      tableData: [],
-      // 添加内容id数组
-      ids: [],
-      // 二级标签
-      secondTags: '',
-      // 控制输入框显示
-      inputVisible: false,
-      // 三级标签
-      type: null,
-      threeTag: {
-        threeName: '',
-        propertyId: ''
-      },
-      // 选择三级标签
-      tagId: '',
-      threeTagOptions: [],
-      // 弹窗
-      dialogForm: {
-        type: '',
-        pageNum: 1,
-        pageSize: 10,
+        listagCategoryAudio: []
       },
-      total: 0,
-      // 弹窗列表
-      dialogData: [],
-
-      // 标签属性
-      lableTypeOptions: [{
+      // 频道属性
+      typeOptions: [{
         value: 2,
         label: '广播'
       }, {
@@ -168,166 +113,107 @@ export default {
       }, {
         value: 8,
         label: '专辑'
-      }]
+      }],
+      // 弹窗
+      dialogVisible: false,
+      // 弹窗表单
+      dialogForm: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      // 总数
+      total: 0,
+      // 弹窗列表
+      dialogTableData: [],
+      // 校验
+      rules: {
+        name: [{
+          required: true, message: '请输入标签名称', trigger: 'blur'
+        }],
+        sort: [{
+          required: true, message: '请选择标签排序', trigger: 'change'
+        }],
+        channelType: [{
+          required: true, message: '请选择频道类型', trigger: 'change'
+        }],
+        channelName: [{
+          required: true, message: '请输入频道名称', trigger: 'blur'
+        }],
+        channelDescribe: [{
+          required: true, message: '请输入频道简介', trigger: 'blur'
+        }],
+        channelCover: [{
+          required: true, message: '请上传频道封面', trigger: 'change'
+        }]
+      },
+      // 只读
+      disabled: false
     }
   },
   watch: {
-    tagId(val) {
-      this.dialogForm.type = this.threeTagOptions.find(i => i.threeId === val).propertyId
+    'form.channelType'(val) {
       if (val) {
-        this.getList()
+        this.dialogForm.type = val
+        this.getPlatform({
+          audioType: val
+        })
       }
     }
   },
   mounted() {
     if (this.$route.query.id) {
-      this.form.firstId = this.$route.query.id
+      this.form.id = this.$route.query.id
+      this.disabled = Boolean(this.$route.query.disabled)
       this.getDetail()
     }
+    if (this.$route.query.pid) {
+      this.form.pid = this.$route.query.pid
+    }
   },
   methods: {
     // 详情
     getDetail() {
-      detail(this.form.firstId).then(res => {
+      detail(this.form.id).then(res => {
         if (res.code === 0) {
           this.form = res.data
-          if (res.data.secondTags.length === 0 && res.data.threeTag === null) {
-            this.form.threeTag = []
-          }
-          if (res.data.secondTags.length > 0) {
-            this.threeTagOptions = []
-            res.data.secondTags.map(i => {
-              i.threeTag.map(j => {
-                this.threeTagOptions.push(j)
-              })
-            })
-          } else {
-            this.threeTagOptions = res.data.threeTag
-          }
         }
       })
     },
 
-    // 已选中的频道内容
-    getList() {
-      findList({
-        tagId: this.tagId,
-        type: this.dialogForm.type
-      }).then(res => {
-        if (res.code === 0) {
-          this.tableData = res.data
-        }
-      })
-    },
-
-    // 显示输入框
-    showInput() {
-      this.inputVisible = true
-      this.$nextTick(() => {
-        this.$refs.input.focus()
-      })
-    },
-
-    // 失去焦点保存
-    getBlur() {
-      if (this.secondTags) {
-        if (this.form.secondTags.indexOf(this.secondTags) == -1) {
-          this.form.secondTags.push({
-            secondName: this.secondTags,
-            threeTag: []
-          })
-          this.form.threeTag = []
-        } else {
-          this.$message.error('请勿新增相同的标签！')
-        }
-      }
-      this.inputVisible = false
-      this.secondTags = ''
-    },
-
-    // 删除标签
-    getClose(id, name) {
-      this.$confirm(`是否删除 ${name} 标签?`, '提示', {
-        type: 'warning'
-      }).then(() => {
-        removeChildren(id).then(res => {
-          if (res.code === 0) {
-            this.$message.success('删除成功！')
-            this.getDetail()
-          }
-        })
-      })
+    // 上传
+    upload(e) {
+      this.form.channelCover = e.file
     },
 
-    // 添加三级标签
-    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 {
-        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('该三级标签已存在！')
-          }
-        }
-      }
+    // 修改频道属性清空关联内容
+    handleChange() {
+      this.form.ids = this.form.listagCategoryAudio = []
     },
 
     // 弹窗
     getDialog() {
-      if (this.dialogForm.type) {
-        this.dialogVisible = true
-        this.ids = []
-        this.getPage()
-      } else {
-        this.$message.error('请选择三级标签再新增内容！')
-      }
+      this.dialogVisible = true
+      this.getList()
     },
 
-    // 全部内容列表
-    getPage() {
+    // 列表
+    getList() {
       this.loading = true
       contentList(this.dialogForm).then(res => {
         if (res.code === 0) {
-          this.dialogData = res.data.records
+          this.dialogTableData = res.data.records
           this.total = res.data.total
-          this.$nextTick(() => {
-            this.tableData.map(i => {
-              let row = this.dialogData.find(j => j.id == i.audioId)
+          this.loading = false
+          if (this.form.listagCategoryAudio.length > 0) {
+            this.form.listagCategoryAudio.map(i => {
+              let row = this.dialogTableData.find(j => j.audioId === i.audioId)
               if (row) {
-                this.$refs.table.toggleRowSelection(row, true)
+                this.$refs.dialogTableData.toggleRowSelection(row, true)
               }
             })
-          })
-          this.loading = false
-        }
-      })
-    },
-
-    // 取消
-    cancel() {
-      this.$tab.closeOpenPage("/operation/tag");
-    },
-
-    // 提交
-    getSubmit() {
-      edit(this.form).then(res => {
-        if (res.code === 0) {
-          this.$message.success('修改成功！')
-          this.getDetail()
+          }else{
+            this.$refs.dialogTableData.clearSelection()
+          }
         }
       })
     },
@@ -335,89 +221,84 @@ export default {
     // 搜索
     getSearch() {
       this.dialogForm.pageNum = 1
-      this.getPage()
+      this.getList()
     },
 
     // 重置
     getRefresh() {
-      this.dialogForm.name = ''
       this.dialogForm.pageNum = 1
       this.dialogForm.pageSize = 10
-      this.getPage()
+      this.dialogForm.platformId = this.dialogForm.name = ''
+      this.getList()
     },
 
     getRowKey(row) {
-      return row.id
+      return row.audioId
     },
 
-    // 表格多选
+    // 选择
     getChange(row) {
-      this.ids = []
+      this.form.ids = []
       if (row.length > 0) {
         row.map(i => {
-          if (this.ids.findIndex(j => j === i.id) === -1) {
-            this.ids.push(i.id)
+          if (this.form.listagCategoryAudio.findIndex(j => j.audioId === i.audioId) === -1) {
+            this.form.listagCategoryAudio.push(i)
           }
         })
       }
     },
 
-    // 添加频道内容
-    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) {
+      this.form.listagCategoryAudio = this.form.listagCategoryAudio.filter(i => i.audioId !== id)
     },
 
-    // 删除某个频道内容
-    getDelete(id) {
-      remove(id).then(res => {
-        if (res.code === 0) {
-          this.$confirm('是否删除?', '警告', {
-            type: 'warning'
-          }).then(() => {
-            this.$message.success('删除成功！')
-            this.getList()
+    // 取消
+    cancel() {
+      this.$tab.closeOpenPage("/operation/tag");
+    },
+
+    // 确定
+    getSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          let title = this.form.id ? '编辑' : '新增'
+          this.form.ids = []
+          this.form.listagCategoryAudio.map(i => {
+            this.form.ids.push(i.audioId)
           })
+          submitThree(this.form).then(res => {
+            if (res.code === 0) {
+              this.$message.success(`${title}成功！`)
+              if (title === '新增') {
+                this.cancel
+              } else {
+                this.getDetail()
+              }
+            }
+          })
+        } else {
+          return false
         }
       })
     },
 
-
     // 字典翻译
-    propertyFormatter(row) {
-      return this.selectDictLabel(this.lableTypeOptions, row)
+    freeFormatter(row) {
+      return this.selectDictLabel(this.freeOptions, row.isFree)
     },
     typeFormatter(row) {
-      return this.selectDictLabel(this.lableTypeOptions, row.audioType)
+      return this.selectDictLabel(this.typeOptions, row.audioType)
     },
-    freeFormatter(row) {
-      return this.selectDictLabel(this.freeOptions, row.isFree)
+    statusFormatter(row) {
+      return this.selectDictLabel(this.onOrOffOptions, row.status)
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.el-tag,
-.tagInput,
-.tagSelect {
-  margin-right: 10px;
-}
-
-.tagInput {
-  width: 100px;
-}
-
-.tagSelect {
-  width: 150px;
+.el-form {
+  width: 500px;
 }
 </style>

src/views/operation/tag/index.vue

@@ -1,82 +1,101 @@
 <template>
   <div class="app-container">
-    <!-- 新增 -->
-    <el-button type="primary" icon="el-icon-plus" size="mini" @click="dialogVisible = true"
-      v-hasPermi="['operation:tag:add']">新增标签</el-button>
+    <!-- 搜索 -->
+    <el-form inline size="mini">
+      <el-form-item label="标签名称：">
+        <el-input v-model="form.name" placeholder="请输入标签名称" clearable />
+      </el-form-item>
+      <el-form-item label="当前状态：">
+        <el-select v-model="form.status" placeholder="请选择当前状态" clearable>
+          <el-option v-for="item in disabledOptions" :key="item.value" :value="item.value"
+            :label="item.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
+        <el-button type="primary" plain icon="el-icon-plus" @click="getDialog('新增')">新增</el-button>
+      </el-form-item>
+    </el-form>
     <!-- 列表 -->
-    <el-table :data="tableData" height="614">
-      <el-table-column label="排序" type="index" align="center" />
-      <el-table-column label="一级标签" prop="name" align="center" show-overflow-tooltip />
-      <el-table-column label="二级标签" align="center" show-overflow-tooltip>
+    <el-table :data="tableData" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+      v-loading="loading">
+      <el-table-column label="标签名称" prop="label" show-overflow-tooltip />
+      <el-table-column label="标签排序" prop="sort" align="center" />
+      <el-table-column label="当前状态" prop="status" align="center">
         <template slot-scope="scope">
-          <span v-for="(item, index) in scope.row.secondTagNames" :key="index">
-            {{ index === scope.row.secondTagNames.length - 1 && item || ( item + ',') }}
-          </span>
+          <el-tag :type="scope.row.status === 1 ? 'danger' : ''">
+            {{ selectDictLabel(disabledOptions, scope.row.status) }}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="三级标签" align="center" show-overflow-tooltip>
+      <el-table-column label="菜单路径" align="center">
+        <template slot-scope="scope">{{ scope.row.meanWay ? scope.row.meanWay : '-' }}</template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center">
         <template slot-scope="scope">
-          <span v-for="(item, index) in scope.row.threeTagNames" :key="index">
-            {{ index === scope.row.threeTagNames.length - 1 && item || ( item + ',') }}
-          </span>
+          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button type="text" @click="getDetail(scope.row)" v-hasPermi="['operation:tag:edit']">编辑</el-button>
-          <el-button type="delete" @click="getDelete(scope.row.id)" v-hasPermi="['operation:tag:delete']">
-            删除
-          </el-button>
+          <el-button type="text" @click="getDialog('查看', scope.row, true)">查看</el-button>
+          <el-button type="text" v-if="scope.row.status === 0" @click="getChange(scope.row, 1)">禁用</el-button>
+          <span v-else>
+            <el-button type="text" @click="getDialog('编辑', scope.row)" style="margin-left: 10px">
+              编辑
+            </el-button>
+            <el-button v-if="scope.row.level !== 3" type="text" @click="getDialog('新增', scope.row)">
+              新增
+            </el-button>
+            <el-button type="text" @click="getChange(scope.row, 0)">启用</el-button>
+            <el-button type="delete" @click="getDelete(scope.row)">删除</el-button>
+          </span>
         </template>
       </el-table-column>
     </el-table>
     <!-- 弹窗 -->
-    <el-dialog :visible.sync="dialogVisible" title="新增标签" width="500px" :before-close="cancel">
-      <el-form :model="form" label-width="auto" ref="form" :rules="rules">
-        <el-form-item label="一级标签：" prop="firstName">
-          <el-input v-model="form.firstName" placeholder="请输入一级标签" />
+    <el-dialog :visible.sync="dialogVisible" :title="title" width="500px" :before-close="cancel">
+      <el-form :model="dialogForm" ref="dialogForm" label-width="auto"
+        :disabled="title === '查看' ? true : false">
+        <el-form-item label="标签名称：" prop="name">
+          <el-input v-model="dialogForm.name" placeholder="请输入标签名称" maxlength="100" show-word-limit />
         </el-form-item>
-        <el-form-item label="二级标签：">
-          <el-input v-model="inputTags" placeholder="请输入二级标签">
-            <el-button slot="append" @click="getInput">添加</el-button>
-          </el-input>
-          <el-tag v-for="item in form.secondTags" :key="item.secondName" effect="dark" closable
-            @close="getClose(item.secondName)" style="margin: 0 10px 0 0">
-            {{ item.secondName }}
-          </el-tag>
+        <el-form-item label="标签状态：" prop="isEmpty" v-if="createLevelTwo() || editLevelTwo()">
+          <el-checkbox v-model="dialogForm.isEmpty" :true-label="0" :false-label="1">允许为空</el-checkbox>
         </el-form-item>
-        <el-form-item>
-          <el-button @click="cancel">取消</el-button>
-          <el-button type="primary" @click="getSubmit">提交</el-button>
+        <el-form-item label="标签排序：" prop="sort">
+          <el-input-number v-model="dialogForm.sort" :min="1" :step="1" step-strictly />
         </el-form-item>
       </el-form>
+      <div slot="footer" v-if="title !== '查看'">
+        <el-button @click="cancel">取消</el-button>
+        <el-button type="primary" @click="getSubmit">确定</el-button>
+      </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { list, create, getRemove } from '@/api/operation/tag'
+import { list, submitFirst, submitSecond, detail, change, remove } from '@/api/operation/tag'
+import { disabledMixin } from '@/mixin/index'
 export default {
-  name: 'Tag',
+  mixins: [disabledMixin],
   data() {
     return {
+      // 遮罩层
+      loading: false,
       // 表单
-      form: {
-        firstName: '',
-        secondTags: []
-      },
-      // 校验
-      rules: {
-        firstName: [{
-          required: true, message: '请输入一级标签', trigger: 'blur'
-        }]
-      },
-      // 二级标签中间参数
-      inputTags: '',
+      form: {},
       // 列表
       tableData: [],
       // 弹窗
       dialogVisible: false,
+      // 弹窗标题
+      title: '新增',
+      // 当前层级
+      level: 0,
+      // 弹窗表单
+      dialogForm: {}
     }
   },
   mounted() {
@@ -85,79 +104,163 @@ export default {
   methods: {
     // 列表
     getList() {
-      list().then(res => {
+      this.loading = true
+      list(this.form).then(res => {
         if (res.code === 0) {
           this.tableData = res.data
+          this.loading = false
         }
       })
     },
 
-    // 编辑
-    getDetail(row) {
-      this.$router.push({
-        path: '/operation/tag/detail',
-        query: {
-          id: row.id
+    // 重置
+    getRefresh() {
+      this.form = {}
+      this.getList()
+    },
+
+    // 弹窗
+    getDialog(title, row, boolean) {
+      this.title = title
+      this.level = row ? row.level : 0
+      if (this.detailLevelThree() || this.createLevelThree() || this.editLevelThree()) {
+        this.$router.push({
+          path: '/operation/tag/detail',
+          query: this.createLevelThree() ? {
+            pid: row.id
+          } : {
+            id: row.id,
+            disabled: boolean
+          }
+        })
+      } else {
+        this.dialogVisible = true
+      }
+
+      // 查看 / 编辑获取详情
+      if (this.detailLevelOne() || this.detailLeveLTwo() || this.editLevelOne() || this.editLevelTwo()) {
+        detail(row.id).then(res => {
+          if (res.code === 0) {
+            this.dialogForm = res.data
+          }
+        })
+      }
+
+      // 新增二级标签需传一级标签Id
+      if (this.createLevelTwo()) {
+        this.dialogForm.pid = row.id
+      }
+    },
+
+    // 新增 / 编辑
+    getSubmit() {
+      this.$refs.dialogForm.validate((valid) => {
+        if (valid) {
+          if (this.createLevelOne() || this.editLevelOne()) {
+            submitFirst(this.dialogForm).then(res => {
+              if (res.code === 0) {
+                this.$message.success(`${this.title}成功！`)
+                this.dialogVisible = false
+                this.getList()
+              }
+            })
+          } else if (this.createLevelTwo() || this.editLevelTwo()) {
+            submitSecond(this.dialogForm).then(res => {
+              if (res.code === 0) {
+                this.$message.success(`${this.title}成功！`)
+                this.dialogVisible = false
+                this.getList()
+              }
+            })
+          }
+        } else {
+          return false
         }
       })
     },
 
+    // 上下架
+    getChange(row, status) {
+      let title = status === 0 ? '启用' : '禁用'
+      this.$confirm(`是否${title}${row.label}?`, '提示', {
+        type: 'warning'
+      }).then(() => {
+        change(row.id, status).then(res => {
+          if (res.code === 0) {
+            this.$message.success(`${title}成功！`)
+            this.getList()
+          }
+        })
+      }).catch(() => { })
+    },
+
     // 删除
-    getDelete(id) {
-      this.$confirm('是否删除当前标签', '提示', {
+    getDelete(row) {
+      this.$confirm(`是否删除${row.label}?`, '提示', {
         type: 'warning'
       }).then(() => {
-        getRemove(id).then(res => {
+        remove(row.id).then(res => {
           if (res.code === 0) {
             this.$message.success('删除成功！')
             this.getList()
           }
         })
-      })
+      }).catch(() => { })
     },
 
-    // 添加二级标签
-    getInput() {
-      if (this.inputTags) {
-        if (this.form.secondTags.findIndex(i => i.secondName === this.inputTags) === -1) {
-          this.form.secondTags.push({
-            secondName: this.inputTags
-          })
-        } else {
-          this.$message.error('请勿新增相同的标签！')
-        }
-        this.inputTags = ''
-      }
+    // 取消
+    cancel() {
+      this.dialogVisible = false
+      this.$refs.dialogForm.resetFields()
     },
 
-    // 删除标签
-    getClose(item) {
-      this.form.secondTags.splice(this.form.secondTags.findIndex(i => i.secondName === item), 1)
+    // 新增一级标签
+    createLevelOne() {
+      return this.title === '新增' && this.level === 0 ? true : false
     },
 
-    // 取消
-    cancel() {
-      this.dialogVisible = false
-      this.$refs.form.resetFields()
-      this.inputTags = ''
-      this.form.secondTags = []
+    // 编辑一级标签
+    editLevelOne() {
+      return this.title === '编辑' && this.level === 1 ? true : false
     },
 
-    // 确认
-    getSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          create(this.form).then(res => {
-            if (res.code === 0) {
-              this.$message.success('新增成功！')
-              this.getList()
-            }
-          })
-        } else {
-          return false
-        }
-      })
+    // 查看一级标签
+    detailLevelOne() {
+      return this.title === '查看' && this.level === 1 ? true : false
+    },
+
+    // 新增二级标签
+    createLevelTwo() {
+      return this.title === '新增' && this.level === 1 ? true : false
+    },
+
+    // 编辑二级标签
+    editLevelTwo() {
+      return this.title === '编辑' && this.level === 2 ? true : false
+    },
+
+    // 查看二级标签
+    detailLeveLTwo() {
+      return this.title === '查看' && this.level === 2 ? true : false
+    },
+
+    // 新增三级标签
+    createLevelThree() {
+      return this.title === '新增' && this.level === 2 ? true : false
+    },
+
+    // 编辑三级标签
+    editLevelThree() {
+      return this.title === '编辑' && this.level === 3 ? true : false
+    },
+
+    // 查看三级标签
+    detailLevelThree() {
+      return this.title === '查看' && this.level === 3 ? true : false
     }
   }
 }
-</script>
+</script>
+
+<style lang="scss" scoped>
+</style>