eta_front/src/views/dataEntry_manage/databaseComponents/collectEdbMenu.vue

<template>
    <el-tree
        ref="catalogTree "
        :class="['catalog-tree',{'target_tree': source==='chart'}]"
        empty-text="暂无收藏"
        :data="data"
        :allow-drop="canDropHandle"
        draggable
        node-key="ClassifyId"
        :props="{
          children:'Children'
        }"
        :expand-on-click-node="false"
        @current-change="(data,node)=>{$parent.nodeChange({data,node,treeName:'collect'})}"
        @node-drop="handleDropClassify"
        >
        <div class="custom-tree-node" slot-scope="{ data }">
            <span class="tree-label">{{ data.ClassifyName }}</span>
            <div class="right-item right-item-box" >
                <img
                  src="~@/assets/img/set_m/edit.png"
                  alt=""
                  style="width: 15px; height: 14px; margin-right: 8px"
                  @click.stop="$parent.handleOpenCollectClassify(data)"
                  v-if="!data.EdbCode"
                />

                <img
                  src="~@/assets/img/set_m/del_icon.png"
                  alt=""
                  style="width: 14px; height: 14px;"
                  @click.stop="removeCollectNode(data)"
                  v-if="!data.EdbCode"
                />
            </div>
        </div>
    </el-tree>
</template>

<script>
import { edbCollectInterface,chartBaseV2Interface } from '@/api/modules/chartApi'
export default {
  props: {
    data: {
      type: Object
    },
    source: { //指标或图库 edb chart
      type: String,
      default: 'edb'
    },
  },
  data() {
    return {
    }
  },
  methods: {
    removeCollectNode({ClassifyId}) {
      this.$confirm('若删除该目录，则目录下收藏的所有指标将被清除, 是否继续?',
          '提示',
          { type: 'warning' }
      ).then(async () => {
        const res = this.source === 'edb'
          ? await edbCollectInterface.delCollectClassify({
              ClassifyId
            })
          : await chartBaseV2Interface.delCollectClassify({
            ClassifyId
          })

        if(res.Ret !== 200) return
        this.$message.success('删除成功')

        this.$emit('change')
      })
      
    },

    async handleDropClassify(dragNode,dropNode,type) {
      console.log(dragNode,dropNode,type)
      let PrevClassifyId,NextClassifyId;

      let list = dropNode.parent.childNodes;
      let targetIndex = list.findIndex(_ => _.data.ClassifyId===dragNode.data.ClassifyId)

      if(targetIndex===0){
        const data=list[targetIndex+1].data
        NextClassifyId = data.ClassifyId
        PrevClassifyId = 0
      }else if(targetIndex===list.length-1){
        const data=list[targetIndex-1].data
        PrevClassifyId = data.ClassifyId
        NextClassifyId = 0
      }else{
        PrevClassifyId=list[targetIndex-1].data.ClassifyId
        NextClassifyId=list[targetIndex+1].data.ClassifyId
      }

      let params = {
        ClassifyId: dragNode.data.ClassifyId,
        PrevClassifyId,
        NextClassifyId
      }

      const res = this.source === 'edb'
        ? await edbCollectInterface.moveCollectClassify(params)
        : await chartBaseV2Interface.moveCollectClassify(params)
      if(res.Ret !== 200) return 
      this.$message.success('移动成功')
    },

    canDropHandle(draggingNode, dropNode, type) {
      return dropNode.level===draggingNode.level&&type!=='inner'
    },

    // checkAuth(key) {
    //   const {edbDataPermission,checkPermissionBtn}=this.permissionBtn
    //   const checkAuthMap = {
    //     'remove': edbDataPermission.edbData_edbCollectClassify_remove,
    //     'save': edbDataPermission.edbData_edbCollectClassify_save
    //   }

    //   return checkPermissionBtn(checkAuthMap[key])
    // },
  }
}
</script>

<style lang="scss" scoped>
.custom-tree-node {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  display: block;
  flex: 1;
  max-width: 92%;
  .node_label {
    margin-right: 2px;
  }
}
</style>