eta_front/src/views/predictEdb_manage/mixins/mixin.js

// 左侧树形分类
import * as preDictEdbInterface from '@/api/modules/predictEdbApi.js';

export default {
  data() {
    return {};
  },
  directives: {
    drag(el, bindings) {
        el.onmousedown = function (e) {
            var init = e.clientX;
            var box = $("#box")[0]
            let total_wid = box.offsetWidth
            var left = $("#left")[0];
            var right = $("#right")[0];
            var initWidth = left.offsetWidth;
            document.onmousemove = function (e) {
                var end = e.clientX;
                if (end > 310) {
                    var newWidth = end - init + initWidth;
                    // right.style.width = total_wid-end+80 +'px'
                    right.style.width = total_wid - newWidth + 'px'
                    left.style.width = newWidth + "px";
                } else {
                    end = 350;
                    // 最小宽度300
                    left.style.width = 300 + "px";
                    // right.style.width = total_wid-300-20 +'px'
                }
            };
            document.onmouseup = function () {
                document.onmousemove = document.onmouseup = null;
                e.releaseCapture && e.releaseCapture();
            };
            e.setCapture && e.setCapture();
            return false;
        };
    }
  },

  methods: {
    /* 根据unicode展开树结构并选中当前图表 重置图表配置 日期区间 */
    selectCurrentNode({ code, id, classifyId }) {
      console.log('params',code,id,classifyId)
      this.select_node = code;
      this.select_id = id;
      
      // 查找图表的分类父级id
      
    },

    // 查找树节点所有父节点
    findParentNodeHandle(arr, id,paramName='UniqueCode') {
      // 遍历取父级code push数组
      for (let i of arr) {
        if (i.ClassifyId === id) {
          return [i[paramName]];
        }
        if (i.Children) {
          let node = this.findParentNodeHandle(i.Children, id,paramName);
          if (node) {
            return node.concat(i[paramName]);
          }
        }
      }
    },

    /* 拖动时node宽度跟随变化 */
    resetNodeStyle: _.debounce(function(node) {
			const tree = $('.target_tree')[0];
			let width = tree.offsetWidth;
			// let label_wid = width > 500 ? 'auto' : (width <= 300 && width < 360) ?  100 : 0.7*width;
			let label_wid =
				width > 500
					? 'auto'
					: width <= 260
					? 80
					: 0.35 * width;
			this.$set(node, 'Nodewidth', label_wid + 'px');
		},200),

    	/* 双击label出现input修改框 */
		editNodeLabel(data) {

      //目录名称可以双击修改
      if(data.EdbInfoId || this.role !== 'admin' ) return
      this.$set(data,'isEdit',true)
      this.new_label = this.currentLang==='en'?data.ClassifyNameEn:data.ClassifyName;
      this.$nextTick(() => {
        this.$refs.editVal.focus();
      });
		},

		/* input失去焦点恢复node 修改最新的值*/
		changeValue(data) {
        if(!this.new_label) return this.$message.warning('名称不能为空');
        this.$set(data,'isEdit',false)
  
        preDictEdbInterface.classifyEdit({
          ClassifyId: data.ClassifyId,
          ClassifyName: this.new_label
        }).then(res => {
          if(res.Ret !== 200) return
  
          this.getTreeData();
        }) 
		},

    /* 拖拽完成 */
    dropOverHandle(b, a, i, e) {
      console.log(b,a,i);
      // 被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置
      const isEDB=b.data.EdbCode?true:false
			let list=a.parent.childNodes;
			let targetIndex=0,PrevClassifyId=0,NextClassifyId=0,ParentClassifyId=0;
			let ClassifyId=0,EdbInfoId=0,PrevEdbInfoId=0,NextEdbInfoId=0;

			ClassifyId=isEDB?0:b.data.ClassifyId
			EdbInfoId=isEDB?b.data.EdbInfoId:0

			if(i!=='inner'){
        ParentClassifyId=a.parent.data.ClassifyId||0
				list.forEach((item,index)=>{
					if(isEDB){
						if(item.data.EdbInfoId===b.data.EdbInfoId){
							targetIndex=index
						}
					}else{
						if(item.data.ClassifyId===b.data.ClassifyId){
							targetIndex=index
						}
					}
					
				})

				console.log(targetIndex);
				
				
				if(targetIndex===0){
					const data=list[targetIndex+1].data
					NextClassifyId=data.EdbCode?0:data.ClassifyId
					NextEdbInfoId=data.EdbCode?data.EdbInfoId:0
				}else if(targetIndex===list.length-1){
					const data=list[targetIndex-1].data
					PrevClassifyId=data.EdbCode?0:data.ClassifyId
					PrevEdbInfoId=data.EdbCode?data.EdbInfoId:0
				}else{
					const pData=list[targetIndex-1].data
					PrevClassifyId=pData.EdbCode?0:pData.ClassifyId

					PrevEdbInfoId=pData.EdbCode?pData.EdbInfoId:0

					const nData=list[targetIndex+1].data
					NextClassifyId=nData.EdbCode?0:nData.ClassifyId
					NextEdbInfoId=nData.EdbCode?nData.EdbInfoId:0
				}
			}else{
        ParentClassifyId=a.data.ClassifyId||0
      }

			const params={
				ClassifyId,
				ParentClassifyId,
				EdbInfoId,
				PrevClassifyId,
				NextClassifyId,
				PrevEdbInfoId,
				NextEdbInfoId
			}
			console.log(params);
			preDictEdbInterface.classifyMoveSort(params).then(res=>{
				if(res.Ret===200){
					this.$message.success(this.$t('MsgPrompt.move_success_msg'))
				}
				this.getTreeData()
        if(this.select_id&&!this.showAssociateChart&&!this.showAssociateComputeData){
          this.$refs.detailComponentRef.getDetail()
        }
			})
    },

    /* 拖拽覆盖添加背景色 */
    dropMouseOver(node1, node2, e) {
      // 被拖拽节点对应的 Node、所进入节点对应的 Node、event
			if(!node2.data.EdbInfoId&&(node1.level>node2.level||(node1.data.EdbInfoId>0&&!node2.data.EdbInfoId)) && (e.target.childNodes[0].className.includes('el-tree-node__content') 
			|| e.target.className.includes('el-tree-node__content'))) {
				// console.log(e.target.childNodes[0])
				e.target.childNodes[0].className.includes('el-tree-node__content') 
				? e.target.childNodes[0].style.backgroundColor = '#409eff' 
				: e.target.style.backgroundColor = '#409eff';
			}
    },

    /* 拖拽离开/拖拽完成重置背景色 */
    dropMouseLeave(node1, node2, e) {
      let arrs = $(".el-tree-node__content");
      for (let a of arrs) {
        a.style.backgroundColor = "transparent";
      }
    },

    // 树节点展开
    handleNodeExpand(data) {
      // 保存当前展开的节点
      let flag = this.defaultShowNodes.some((item) => item === data.UniqueCode);

      if (!flag) {
        // 不存在则存到数组里
        this.defaultShowNodes.push(data.UniqueCode);
      }
    },

    // 树节点关闭
    handleNodeCollapse(data) {
      this.defaultShowNodes.some((item, index) => {
        if (item === data.UniqueCode) {
          // 删除关闭节点
          this.defaultShowNodes.length = index;
        }
      });
    },

    /* 判断节点是否能被拖拽 */
    canDragHandle(node) {
      let canMove = true;
      return canMove;
    },

    /* 判断节点是否能被拖入 */
    canDropHandle(draggingNode, dropNode, type) {
      let canDrop = false;
      // 如果拖动的是指标
			if(draggingNode.data.EdbCode){
				if(!(dropNode.level===1&&type!=='inner')){
					canDrop=true
				}
			}else{//拖动的是目录
				// console.log(dropNode.level,draggingNode.level);
				//目录层级不能改变
				if((dropNode.level+1==draggingNode.level&&type==='inner'&&!dropNode.data.EdbCode)||(dropNode.level===draggingNode.level&&type!=='inner')){
					canDrop=true
				}
			}

      return canDrop;
    },
  },
};