hl-web-admin/src/views/article/category.vue

<template>
      <el-card class="categoryContainer">
        <el-form :inline="true">
          <el-form-item label="分类名称">
            <el-input
              v-model="queryParams.title"
              placeholder="请输入分类名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
            >新增</el-button>
          </el-form-item>
        </el-form>

        <el-table
          v-loading="loading"
          :data="categoryList"
          border
          row-key="id"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column prop="category_id" label="ID" width="120px" />
          <el-table-column prop="category_name" label="分类名称" :show-overflow-tooltip="true" />
          <el-table-column label="标签详情">
            <template slot-scope="{row}">
              <span>{{ row.label_name | getTagDetail }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
              >修改</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-plus"
                @click="handleAdd(scope.row)"
              >新增</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 添加或修改分类对话框 -->
        <el-drawer
          ref="drawer"
          :title="title"
          :before-close="cancel"
          :visible.sync="open"
          direction="rtl"
          custom-class="demo-drawer"
          size="830px"
        >
          <div class="demo-drawer__content">
            <el-form ref="form" :model="form" :rules="rules" label-position="top" label-width="106px">
              <el-row>
                <el-col :span="13">
                  <el-form-item prop="fid">
                    <span slot="label">
                      上级分类
                      <el-tooltip content="指当前分类停靠的分类归属" placement="top">
                        <i class="el-icon-question" />
                      </el-tooltip>
                    </span>
                    <treeselect
                      v-model="form.fid"
                      :options="categoryOptions"
                      :normalizer="normalizer"
                      :show-count="true"
                      placeholder="选择上级分类"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="13">
                  <el-form-item prop="category_name">
                    <span slot="label">
                      分类名称
                      <el-tooltip content="分类位置显示的说明信息" placement="top">
                        <i class="el-icon-question" />
                      </el-tooltip>
                    </span>
                    <el-input v-model="form.category_name" placeholder="请输入分类标题" />
                  </el-form-item>
                </el-col>
                <template v-for="(item,index) in tagData">
                  <el-col :span="13" :key="index">
                    <el-form-item>
                      <span slot="label">
                        标签组名称{{index+1}}
                        <el-tooltip content="标签组名称" placement="top">
                          <i class="el-icon-question" />
                        </el-tooltip>
                        <el-button v-if="index+1 < tagData.length" class="button-new-tag" size="small" type="warning" @click="removeTag(index)">删除</el-button>
                        <el-button v-else class="button-new-tag" size="small" @click="addTag">添加</el-button>
                      </span>
                      <el-input v-model="item.label" placeholder="请输入标签名称" />
                    </el-form-item>
                    <el-form-item style="margin-left:20px">
                      <span slot="label">
                        标签项
                        <el-tooltip content="标签项名称" placement="top">
                          <i class="el-icon-question" />
                        </el-tooltip>
                      </span>
                      <el-tag
                        v-for="(sItem,sIndex) in item.value"
                        :key="sIndex"
                        closable
                        :disable-transitions="false"
                        @close="handleDelTagItem(sItem,item.value)">
                        {{sItem}}
                      </el-tag>
                      <el-button class="button-new-tag" size="small" @click="openTagDialog(index)">添加标签项</el-button>
                    </el-form-item>
                  </el-col>
                </template>
              </el-row>
            </el-form>
            <div class="demo-drawer__footer">
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
          </div>
        </el-drawer>
        <!-- 标签弹框 -->
        <el-dialog class="tagContainer" title="标签名称" :visible.sync="dialogFormVisible">
          <el-form>
            <el-form-item label="标签名称" :label-width="formLabelWidth">
              <el-input v-model="tagName" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="makeSureAddTag">确 定</el-button>
          </div>
        </el-dialog>
      </el-card>
</template>

<script>
import { listCategory, getCategory, delCategory, addCategory, updateCategory } from '@/api/category'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import IconSelect from '@/components/IconSelect'

export default {
  name: 'CategoryManage',
  components: { Treeselect, IconSelect },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 分类表格树数据
      categoryList: [],
      // 分类树选项
      categoryOptions: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 分类状态数据字典
      visibleOptions: [],
      // 查询参数
      queryParams: {
        category_name: undefined,
      },
      // 表单参数
      form: {
        category_id: undefined,
        fid: 0,
        category_name: undefined,
      },
      // 表单校验
      rules: {
        category_name: [{ required: true, message: '分类标题不能为空', trigger: 'blur' }],
        // fid: [{ required: true, message: '请选择父级分类', trigger: 'blur' }]
      },
      tagData:[],
      dialogFormVisible: false,
      tagName:'',
      handleIndex: null,
      formLabelWidth: '120px'
    }
  },
  filters: {
    getTagDetail(data) {
      if (!data) {
        return
      }
      let str=''
      data = JSON.parse(data);
      data.forEach(item=>{
        if (item.value.length) {
          str += `${item.label}：${item.value.join("、")}；`
        }
      })
      return str
    },
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询分类列表 */
    getList() {
      this.loading = true
      listCategory(this.queryParams).then(response => {
        this.categoryList = response.data
        this.loading = false
      })
    },
    /** 转换分类数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.category_id,
        label: node.category_name,
        children: node.children
      }
    },
    /** 查询分类下拉树结构 */
    getTreeselect() {
      listCategory().then(response => {
        this.categoryOptions = []
        const category = { category_id: 0, category_name: '主类目', children: [] }
        category.children = response.data
        this.categoryOptions.push(category)
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        category_id: undefined,
        fid: 0,
        category_name: undefined,
      }
      this.tagData = [
        {
          label:'',
          value:[]
        }
      ]
      // this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.reset()
      this.getTreeselect()
      if (row != null) {
        this.form.fid = row.category_id
      }
      console.log(this.form)
      this.open = true
      this.title = '添加分类'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      this.getTreeselect()
      this.form = {...row}
      this.tagData = this.form.label_name ? JSON.parse(this.form.label_name) : [{label:'',value:[]}];
      this.open = true
      this.title = '修改分类'
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if( this.tagData.length==1 ){
            if (this.validTagData(false)) {
              this.form.label_name = JSON.stringify(this.tagData)
            } else {
              this.form.label_name = null
            }
          } else {
            if (!this.validTagData()) {
              return
            }
            this.form.label_name = JSON.stringify(this.tagData)
          }
          if (this.form.category_id !== undefined) {
            updateCategory(this.form, this.form.category_id).then(response => {
              if (response.code === 200) {
                 this.$message({
                  message: response.msg,
                  type: "success",
                  duration: 2 * 1000,
                });
                this.open = false
                this.getList()
              } else {
                 this.$message({
                  message: response.msg,
                  type: "error",
                  duration: 2 * 1000,
                });
              }
            })
          } else {
            addCategory(this.form).then(response => {
              if (response.code === 200) {
                 this.$message({
                  message: response.msg,
                  type: "success",
                  duration: 2 * 1000,
                });
                this.open = false
                this.getList()
              } else {
                 this.$message({
                  message: response.msg,
                  type: "error",
                  duration: 2 * 1000,
                });
              }
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      console.log(row)
      this.$confirm('是否确认删除名称为"' + row.category_name + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return delCategory({ 'category_id': row.category_id })
      }).then((response) => {
        if (response.code === 200) {
          this.$message({
            message: "删除分类成功",
            type: "success",
            duration: 2 * 1000,
          });
          this.open = false
          this.getList()
        } else {
          this.$message({
            message: "删除分类失败",
            type: "error",
            duration: 2 * 1000,
          });
        }
      }).catch(function() {})
    },
    // 删除标签
    handleDelTagItem(tag,data) {
      data.splice(data.indexOf(tag), 1);
      console.log(this.tagData);
    },
    // 打开标签弹框
    openTagDialog(idx) {
      this.tagName = ''
      this.handleIndex = idx
      this.dialogFormVisible = true
    },
    // 打开标签弹框
    makeSureAddTag(){
      if (!this.tagName) {
        this.$message.warning('请输入标签名称');
        return;
      }
      this.tagData[this.handleIndex]['value'].push(this.tagName)
      this.dialogFormVisible = false
    },
    //添加标签组
    addTag(){
      if(!this.validTagData()){
        return
      }
      let obj={
        label:'',
        value:[]
      }
      this.tagData.push(obj);
    },
    //移除标签组
    removeTag(idx){
      this.$confirm('是否确认删除该标签组', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        this.tagData.splice(idx, 1);
      })
      .catch(action => {});
    },
    // 校验标签数据
    validTagData(flag=true){
      return this.tagData.every(item=>{
        if(!item.label){
          flag && this.$message.warning('标签组名称不能为空')
          return false
        }
        if (!item.value.length) {
          flag && this.$message.warning('标签项不能为空')
          return false
        }
        return true
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.categoryContainer{
  ::v-deep {
    .el-col {
    padding: 0 5px;
    }
    .el-drawer__header{
    margin-bottom: 0;
    }
    .el-drawer__body{
      padding: 20px;
    }
    .el-tag + .el-tag {
      margin-left: 10px;
    }
    .button-new-tag {
      margin-left: 10px;
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
    }
    .input-new-tag {
      width: 90px;
      margin-left: 10px;
      vertical-align: bottom;
    }
  }
  .tagContainer{
    ::v-deep .el-input{
      width:300px
    }
  }
}
</style>