// 左侧树形分类 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}`) } }, };