eta_front/src/views/knowledge_manage/components/classifyDia.vue

<template>
<div>
    <el-dialog
      :visible.sync="show"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="cancelHandle"
      custom-class="knowledge-classify"
      top="10vh"
      v-dialogDrag
      title="分类设置"
      width="650px"
    >
      <div class="main">
        <el-tree
          ref="treeRef"
          class="classify-tree"
          :data="classifyOptions"
          node-key="ClassifyId"
          :props="{
            value: 'ClassifyId',
            label: 'ClassifyName',
            children: 'Child',
          }"
          :expand-on-click-node="false"
          check-strictly
          empty-text="暂无分类"
          draggable
          :allow-drop="canDropHandle"
          @node-drop="dropOverHandle"
          @current-change="handleNodeChange"
        >
          <div class="custom-tree-node" slot-scope="{ node, data }">
            <span
              class="text_oneLine node_label"
            >
              {{ data.ClassifyName  }}
            </span>

            <div v-if="selectItem.ClassifyId===data.ClassifyId">
                <img
									src="~@/assets/img/data_m/move_ico.png"
									class="handle-icon"
								/>
								<!-- 添加子项 -->
								<img
									src="~@/assets/img/set_m/add.png"
									class="handle-icon"
									@click.stop="handleAddNode(data,node)"
									v-if="node.level<3"
								/>
								<!-- 编辑目录 -->
								<img
									src="~@/assets/img/set_m/edit.png"
                  class="handle-icon"
									@click.stop="handleEditNode(data,node)"
								/>
                
								<!-- 删除目录 -->
                <el-popconfirm
                  title="确认删除该分类吗？"
                  @onConfirm="handleRemoveNode(data)"
                >
                  <img
                    slot="reference"
                    src="~@/assets/img/set_m/del_icon.png"
                    class="handle-icon"
                  />
                </el-popconfirm>

            </div>
          </div>
        </el-tree>


        <div class="clasify-add-cont" @click="handleAddNode(null)">
          <img
            src="~@/assets/img/set_m/add_ico.png"
            alt=""
          />
          <span>添加一级目录</span>
        </div>
      </div>

    </el-dialog>
    
    <!-- 分类编辑弹窗 -->
    <el-dialog
      :visible.sync="isClassifyEditDia"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="isClassifyEditDia=false"
      top="10vh"
      v-dialogDrag
      title="分类编辑"
      width="650px"
    >
      <el-form
          ref="classifyFormRef"
          label-position="right"
          label-width="120px"
          hide-required-asterisk
          :model="classifyForm"
          :rules="formRules"
      >
          <el-form-item label="上级分类" prop="parentClassifyId" v-if="classifyForm.parentClassifyId">
              <span>{{classifyForm.parentName}}</span>
          </el-form-item>
          
          <el-form-item label="分类名称" prop="classifyName">
              <el-input
                v-model="classifyForm.classifyName"
                style="width: 80%"
                placeholder="请输入指标名称"
              />
          </el-form-item>
         
      </el-form>

      <div class="btn-bottom">
				<el-button type="primary" plain @click="isClassifyEditDia=false">取消</el-button>
        <el-button type="primary" @click="handleSaveClassify">确定</el-button>
      </div>
      
    </el-dialog>
</div>

</template>
<script>
import { eventInterface } from '@/api/modules/knowledge';
export default {
  props: {
    show: {
      type: Boolean
    },
    ResourceType: {
      type: Number
    }
  },
  watch: {
    show(nval) {
      nval && this.getClassify()
    }
  },
  data() {
    return {
      classifyOptions: [],
      selectItem:{},

      //编辑分类弹窗
      isClassifyEditDia:false,
      classifyForm: {
        classifyName: '',
        classifyId: 0,
        parentClassifyId: 0,
      }
    }
  },
  mounted(){

  },
  methods:{
    async getClassify() {
      const res = await eventInterface.getClassify({
        ResourceType: this.ResourceType
      })
      if(res.Ret !== 200) return

      this.classifyOptions = res.Data.List
    },

    //添加
    handleAddNode(data,node) {
      console.log(data,node)
      this.classifyForm = {
        classifyName: '',
        classifyId: 0,
        parentClassifyId: data?data.ClassifyId:0,
        parentName: data?data.ClassifyName:''
      }
      this.isClassifyEditDia = true
    },

    //编辑
    handleEditNode(data,node) {
      this.classifyForm = {
        classifyName: data.ClassifyName,
        classifyId: data.ClassifyId,
        parentClassifyId: data.ParentId,
        parentName: node.parent.data.ClassifyName
      }
      this.isClassifyEditDia = true
    },

    //删除
    async handleRemoveNode({ClassifyId}) {
      const res = await eventInterface.delClassifyCheck({ClassifyId, ResourceType: this.ResourceType})

      if(res.Ret !== 200) return
      if(res.Data.Code!==0) return this.$message.warning(res.Data.Msg)

      const delRes = await eventInterface.delClassify({ClassifyId, ResourceType: this.ResourceType})

      if(delRes.Ret !== 200) return 
      
      this.$message.success('删除成功')
      this.getClassify()
    },

    handleNodeChange(data) {
      this.selectItem = data;
    },  

    //保存分类信息
    async handleSaveClassify() {
      const { classifyName,parentClassifyId,classifyId } = this.classifyForm
      let params = {
        ResourceType: this.ResourceType,
        ClassifyName: classifyName,
        ParentId: parentClassifyId
      }
      const res = classifyId 
        ? await eventInterface.editClassify({ ClassifyId: classifyId,...params })
        : await eventInterface.addClassify(params)

      if(res.Ret !==200) return 

      this.$message.success(classifyId?'编辑成功':'新增成功')
      this.getClassify()
      this.isClassifyEditDia = false
    },

    cancelHandle() {
      this.$emit('update:show',false)
    },

    //拖动结束
    async dropOverHandle(b,a,i,e) {
        // 被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置
        const classifyId=b.data.ClassifyId
        let list=a.parent.childNodes;
        let PrevClassifyId=0,NextClassifyId=0,targetIndex=0;
        list.forEach((item,index) => {
            if(item.data.ClassifyId===classifyId){
                targetIndex=index
            }
        });
        if(targetIndex===0){
            NextClassifyId=list[1].data.ClassifyId
        }else if(targetIndex===list.length-1){
            PrevClassifyId=list[list.length-1].data.ClassifyId
        }else{
            PrevClassifyId=list[targetIndex-1].data.ClassifyId
            NextClassifyId=list[targetIndex+1].data.ClassifyId
        }

        const params={
            ClassifyId:classifyId,
            PrevClassifyId,
            NextClassifyId,
            ResourceType: this.ResourceType
        }
        console.log(params);
        const res = await eventInterface.moveClassify(params)

        if(res.Ret!==200) return

        this.$message.success('移动成功')
        this.getClassify()
    },

    //控制同级拖动
    canDropHandle(draggingNode, dropNode, type){
      console.log(draggingNode, dropNode, type)
        if(type==='inner') return false
        if(draggingNode.level!==dropNode.level) return false
        if(draggingNode.data.ParentId!=dropNode.data.ParentId) return false

        return true
    },
  },
}
</script>
<style scoped lang='scss'>
  .main {
    padding: 0 30px;
    .classify-tree {
      height: 50vh;
      min-height: 300px;
      overflow-y: auto;
      .custom-tree-node {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .handle-icon {
        width: 16px;
        height: 16px;
        margin: 0 4px;
      }
    }
    .clasify-add-cont {
      margin: 30px 0;
      display: flex;
      justify-content: center;
      color: #409eff;
      cursor: pointer;
      >img {
        width: 16px;
        height: 16px;
        margin-right: 10px;
      }
    }

  }
  .btn-bottom {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 40px 0;
    >.el-button {
      width: 120px;
    }
  }
</style>
<style lang="scss">
.knowledge-classify{
  .classify-tree {
    .el-tree__drop-indicator {
      height: 3px;
      background-color: #409eff;
    }

    .el-tree-node__content {
      margin-bottom: 14px !important;
    }

    .el-tree-node__children {
      .el-tree-node {
        margin-bottom: 0px !important;
        padding-left: 18px;
      }

      .el-tree-node__content {
        margin-bottom: 5px !important;
        padding-left: 0 !important;
      }
    }

    .expanded.el-icon-caret-right:before {
      content: url('~@/assets/img/set_m/down.png') !important;
    }

    .el-icon-caret-right:before {
      content: url('~@/assets/img/set_m/slide.png') !important;
    }
    .el-tree-node__expand-icon{
      padding-top: 10px;
    }

    .el-tree-node__expand-icon.is-leaf.el-icon-caret-right:before {
      content: '' !important;
    }

    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    .el-tree-node.is-current>.el-tree-node__content {
      background-color: #f0f4ff !important;
    }

    .el-tree-node__content {
      padding-right: 10px !important;
    }
  }
}  
</style>