eta_front/src/views/dataEntry_manage/thirdBase/mixins/leftMixin.js

// 左侧树形分类
import { steelInterface } from "@/api/modules/thirdBaseApi";

export default {
  data() {
    return {
      select_node:null,//树形结构选中的节点id
      dynamicNode:null,//树形结构选中的节点
      defaultShowNodes: [], //展开的节点
    };
  },
  directives: {
    drag(el, bindings) {
      el.onmousedown = function (e) {
        var init = e.clientX;
        // console.log(init);
        var box = $('#box')[0];
        // console.log(box.clientWidth)
        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;
          var newWidth = end - init + initWidth;
          left.style.width = newWidth + 'px';
          right.style.width = newWidth > 320 ? total_wid - newWidth + 'px' : total_wid - 320 + 'px';
        };
        document.onmouseup = function () {
          document.onmousemove = document.onmouseup = null;
          e.releaseCapture && e.releaseCapture();
        };
        e.setCapture && e.setCapture();
        return false;
      };
    }
  }, 

  methods: {
    /* 根据unicode展开树结构并选中 */
    selectCurrentNode({ code, id, type ,selectClassifyNodes}) {
      let deep_arr = _.cloneDeep(this.classifyList);
      // 查找图表的分类父级id
      if(selectClassifyNodes && selectClassifyNodes.length>0){
        this.defaultShowNodes = selectClassifyNodes.map(_e=>`${_e}`);
      }else{
        let arr = this.findParentNodeHandle(deep_arr, code).slice(1).reverse(); // 父的父的父-父的父-父
        this.defaultShowNodes = arr;
      }
      this.select_node = code;
      this.$nextTick(()=>{
        setTimeout(() => {
          this.$refs.treeRef.setCurrentKey(this.select_node);
        }, 300);
      })
      
      // // 重置筛选状态
      this.edb_id = id;
      this.getFrequency();
    },

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

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

    /* 拖拽完成 */
    dropOverHandle(b, a, i, e) {
      // console.log(i, a);
      // 被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置
      // 一/二级目录
      if ([1,2].includes(b.level)) this.handleMoveCatalogue(b, a, i, e);

      // 指标层
      if (b.level === 3) this.handleMoveEdb(b, a, i, e);
    },

    // 移动的为一二级目录
    handleMoveCatalogue(b, a, i, e) {
      let list = a.parent.childNodes,
        targetIndex = 0,
        PrevClassifyId = 0,
        NextClassifyId = 0,
        ParentClassifyId=0;

      list.forEach((item, index) => {
        if (item.data.BaseFromMysteelChemicalClassifyId === b.data.BaseFromMysteelChemicalClassifyId) {
          targetIndex = index;
          return;
        }
      });

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

			if(b.level===2){
				if(i==='inner'){
					ParentClassifyId=a.data.BaseFromMysteelChemicalClassifyId
					PrevClassifyId=0
					NextClassifyId=a.data.Children.length>1?a.data.Children[1].BaseFromMysteelChemicalClassifyId:0
				}else{
					ParentClassifyId=a.data.ParentId
				}
			}

			steelInterface
        .classifyMove({
          BaseFromMysteelChemicalClassifyId: b.data.BaseFromMysteelChemicalClassifyId,
          PrevBaseFromMysteelChemicalClassifyId: PrevClassifyId,
          NextBaseFromMysteelChemicalClassifyId: NextClassifyId,
          ParentBaseFromMysteelChemicalClassifyId: ParentClassifyId
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          this.$message.success("移动成功!");
          this.getClassify();
        });

    },

    // 移动指标
    handleMoveEdb(b, a, i, e) {
      let PrevEdbId = 0,
        NextEdbId = 0,
        targetIndex = 0,
        list = a.parent.data.Children;
      if (i === "inner") {
        PrevEdbId = 0;
        NextEdbId =
          a.data.Children.length > 1 ? a.data.Children[1].BaseFromMysteelChemicalIndexId : 0;
      } else {
        list.forEach((item, index) => {
          if (item.BaseFromMysteelChemicalIndexId === b.data.BaseFromMysteelChemicalIndexId) {
            targetIndex = index;
            return;
          }
        });

        if (targetIndex === 0) {
          PrevEdbId = 0;
          NextEdbId = list[targetIndex + 1].BaseFromMysteelChemicalIndexId;
        } else if (targetIndex === list.length - 1) {
          PrevEdbId = list[targetIndex - 1].BaseFromMysteelChemicalIndexId;
          NextEdbId = 0;
        } else {
          PrevEdbId = list[targetIndex - 1].BaseFromMysteelChemicalIndexId;
          NextEdbId = list[targetIndex + 1].BaseFromMysteelChemicalIndexId;
        }
      }

      steelInterface
        .edbMove({
          BaseFromMysteelChemicalClassifyId: a.data.BaseFromMysteelChemicalClassifyId,
          BaseFromMysteelChemicalIndexId: b.data.BaseFromMysteelChemicalIndexId,
          PrevBaseFromMysteelChemicalIndexId: PrevEdbId,
          NextBaseFromMysteelChemicalIndexId: NextEdbId,
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          this.$message.success("移动成功!");
          this.getClassify();
        });

    },

    /* 拖拽覆盖添加背景色 */
    dropMouseOver(node1, node2, e) {
      if (
        ((node1.level === 2 && node2.level === 1)||(node1.level===3&&node2.level === 2)) &&
        (e.target.childNodes[0].className.includes("el-tree-node__content") ||
          e.target.className.includes("el-tree-node__content"))
      ) {
        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({data}) {
      return data.Button.MoveButton;
    },

    /* 判断节点是否能被拖入 */
    canDropHandle(draggingNode, dropNode, type) {
      let canDrop = false;
      // 移动的是一级目录
      if (draggingNode.level === 1 && dropNode.level === 1 &&type!=='inner') {
        canDrop = true;
      }

      // 二级
      if (draggingNode.level === 2) {
        if (
          (dropNode.level === 1 && type === "inner") ||
          (dropNode.level === 2 && type !== "inner")
        ) {
          canDrop = true;
        }
      }

      //三级指标层
			if(draggingNode.level===3){
				if(
          (dropNode.level===2&&type==='inner')||
          (dropNode.level===3&&type!=='inner')
        ) {
					canDrop=true
				}
			}

      return canDrop;
    },

    // 频度翻译
    getFrequencyTrans(frequency){
        const map = {
            '':this.$t('Edb.FreAll.total'),//全部
            '日度':this.$t('Edb.FreAll.day'),
            '周度':this.$t('Edb.FreAll.week'),
            '旬度':this.$t('Edb.FreAll.dekad'),
            '月度':this.$t('Edb.FreAll.month'),
            '季度':this.$t('Edb.FreAll.quarter'),
            '半年度':this.$t('Edb.FreAll.half_year'),
            '年度':this.$t('Edb.FreAll.year'),
        }
        return map[frequency]||''
    },
  },
};