eta_front/src/views/datasheet_manage/mixins/classifyMixin.js

// 左侧树形分类
import * as sheetInterface from '@/api/modules/sheetApi.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, type }) {
      let deep_arr = _.cloneDeep(this.treeData);
      // 查找图表的分类父级id
      let arr = this.findParentNodeHandle(deep_arr, code).slice(1).reverse(); // 父的父的父-父的父-父
      this.defaultShowNodes = arr;
      this.select_node = code;
      this.$refs.treeRef.setCurrentKey(this.select_node);
      // // 重置筛选状态
      this.select_id = id;
    },

    // 查找树节点所有父节点
    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) {
			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
					? 90
					: 0.6 * width;
			this.$set(node, 'Nodewidth', label_wid + 'px');
		},200),

    	/* 双击label出现input修改框 */
		editNodeLabel(data,type='') {
      if(type === 'edit-tit') {
        if([2,3].includes(this.sheetDetailInfo.Source)) return
        // if(!this.permissionBtn.isShowBtn('etaTablePermission','etaTable_classifyOpt_edit')) return

        if(!this.isSheetBtnShow('classifyOpt_edit')) return
        this.$set(data,'isEditTit',true)
        this.sheet_title = data.ExcelName;
        this.$nextTick(() => {
          this.$refs.sheetEditTitRef.focus();
        });
      } else {
        //目录名称可以双击修改
        if(data.ExcelInfoId) return
        this.$set(data,'isEdit',true)
        this.new_label = data.ExcelClassifyName;
        this.$nextTick(() => {
          this.$refs.editVal.focus();
        });
      }
		},

		/* input失去焦点恢复node 修改最新的值*/
		changeValue(data,type='') {
      if(type === 'edit-tit') {
        if(!this.sheet_title) return this.$message.warning(this.$t('OnlineExcelPage.table_name_empty_msg') );
        data.isEditTit = false;
        data.ExcelName = this.sheet_title;
        console.log(data,'data');
      }else {
        if(!this.new_label) return this.$message.warning(this.$t('OnlineExcelPage.name_empty_msg') );
        this.$set(data,'isEdit',false)
  
        this.new_label !== data.ClassifyName && sheetInterface.classifyEdit({
          ExcelClassifyId: data.ExcelClassifyId,
          ExcelClassifyName: this.new_label,
          ParentId: data.ParentId,
          Source: this.sourceMap[this.$route.path]
        }).then(res => {
          if(res.Ret !== 200) return
  
          this.getTreeData();
        }) 
      }
		},

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


      if(i!=='inner'){
				ParentClassifyId=a.parent.data.ExcelClassifyId||0
				list.forEach((item,index)=>{
					if(isSheet){
						if(item.data.ExcelInfoId===b.data.ExcelInfoId){
							targetIndex=index
						}
					}else{
						if(item.data.ExcelClassifyId===b.data.ExcelClassifyId){
							targetIndex=index
						}
					}
					
				})
				
				
				if(targetIndex===0){
					const data=list[targetIndex+1].data
					NextClassifyId=data.ExcelInfoId?0:data.ExcelClassifyId
					NextExcelInfoId=data.ExcelInfoId?data.ExcelInfoId:0
				}else if(targetIndex===list.length-1){
					const data=list[targetIndex-1].data
					PrevClassifyId=data.ExcelInfoId?0:data.ExcelClassifyId
					PrevExcelInfoId=data.ExcelInfoId?data.ExcelInfoId:0
				}else{
					const pData=list[targetIndex-1].data
					PrevClassifyId=pData.ExcelInfoId?0:pData.ExcelClassifyId

					PrevExcelInfoId=pData.ExcelInfoId?pData.ExcelInfoId:0

					const nData=list[targetIndex+1].data
					NextClassifyId=nData.ExcelInfoId?0:nData.ExcelClassifyId
					NextExcelInfoId=nData.ExcelInfoId?nData.ExcelInfoId:0
				}
			}else{
				ParentClassifyId=a.data.ExcelClassifyId||0
			}
      
      let params = {
        ClassifyId,
        ParentClassifyId,
        NextClassifyId,
        PrevClassifyId,
        ExcelInfoId,
        NextExcelInfoId,
        PrevExcelInfoId,
        Source: this.sourceMap[this.$route.path]
      }
      sheetInterface.classifyMove(params)
        .then((res) => {
          if (res.Ret !== 200) return;
          this.$message.success(this.$t('ETable.Msg.move_success_msg'));
          this.getTreeData();
        });
    },

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

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

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

      sheetInterface
        .classifyMove({
          ClassifyId: b.data.ExcelClassifyId,
          PrevClassifyId: PrevClassifyId,
          NextClassifyId: NextClassifyId,
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          this.$message.success(this.$t('ETable.Msg.move_success_msg'));
          this.getTreeData();
        });
    },

    // 移动的为表格
    handleMoveSheet(b, a, i, e) {
      let PrevSheetId = 0,
        NextSheetId = 0,
        targetIndex = 0,
        list = a.parent.data.Children;
      if (i === "inner") {
        PrevSheetId = 0;
        NextSheetId =
          a.data.Children.length > 1 ? a.data.Children[1].ExcelInfoId : 0;
      } else {
        list.forEach((item, index) => {
          if (item.ExcelInfoId === b.data.ExcelInfoId) {
            targetIndex = index;
            return;
          }
        });

        if (targetIndex === 0) {
          PrevSheetId = 0;
          NextSheetId = list[targetIndex + 1].ExcelInfoId;
        } else if (targetIndex === list.length - 1) {
          PrevSheetId = list[targetIndex - 1].ExcelInfoId;
          NextSheetId = 0;
        } else {
          PrevSheetId = list[targetIndex - 1].ExcelInfoId;
          NextSheetId = list[targetIndex + 1].ExcelInfoId;
        }
      }

      sheetInterface
        .sheetMove({
          ExcelClassifyId: a.data.ExcelClassifyId,
          ExcelInfoId: b.data.ExcelInfoId,
          ClassifyId: b.data.ExcelClassifyId,
          PrevExcelInfoId: PrevSheetId,
          NextExcelInfoId: NextSheetId,
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          this.$message.success(this.$t('ETable.Msg.move_success_msg'));
          this.getTreeData();
        });

    },

    /* 拖拽覆盖添加背景色 */
    dropMouseOver(node1, node2, e) {
      if (
        (node1.level === 2 && node2.level === 1) &&
        (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(node) {
      if(!node.data.HaveOperaAuth) return

      let canMove = true;
      return canMove;
    },

    /* 判断节点是否能被拖入 */
    canDropHandle(draggingNode, dropNode, type) {
      let canDrop = false;

      // 指标
			if(draggingNode.data.ExcelInfoId){
				if(!(dropNode.level===1&&type!=='inner')){
					canDrop=true
				}
			}else{//目录
				if((dropNode.level+1==draggingNode.level&&type==='inner')||(dropNode.level===draggingNode.level&&type!=='inner')){
					canDrop=true
				}
			}

      return canDrop;
    },
    
    //判断自定义表格-编辑,另存为,刷新按钮是否显示
    isSheetBtnShow(type){
      const sheetType = {
        '/sheetList': 'etaTable_excel',
        '/sheetTimeList': 'etaTable_customize_data',
        '/sheetMixedList': 'etaTable_customize_mix',
        '/sheetAnalysisList': 'etaTable_analysis',
        '/sheetBalanceList':'etaTable_customize_balance'
      }
      return this.permissionBtn.isShowBtn('etaTablePermission',`${sheetType[this.$route.path]}_${type}`)
    }
  },
};