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