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

<template>
    <el-tree
        ref="catalogTree"
        class="catalog-tree other-tree"
        empty-text="暂无图库"
        :data="data"
        :allow-drop="canDropHandle"
        draggable
        node-key="ClassifyId"
        :expand-on-click-node="false"
        @current-change="(data,node)=>{$parent.nodeChange(data,node)}"
        @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&&$parent.isEdbBtnShow('edbData_edbCollectClassify_save')"
                />

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

<script>
import { edbCollectInterface } from '@/api/modules/chartApi'
export default {
  props: {
    data: {
      type: Object
    }
  },
  data() {
    return {
    }
  },
  methods: {
    removeCollectNode({ClassifyId}) {
      this.$confirm('若删除该目录，则目录下收藏的所有指标将被清除, 是否继续?',
          '提示',
          { type: 'warning' }
      ).then(async () => {
        const res = await edbCollectInterface.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 = await edbCollectInterface.moveCollectClassify(params)
      if(res.Ret !== 200) return 
      this.$message.success('移动成功')
    },

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

    initSelect(id) {
      console.log(id)
      this.$nextTick(() => {
        this.$refs.catalogTree.setCurrentKey(id);
      })
    }
  }
}
</script>

<style>

</style>