|
|
@@ -0,0 +1,291 @@
|
|
|
+// 左侧树形分类
|
|
|
+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);
|
|
|
+ }, 400);
|
|
|
+ })
|
|
|
+
|
|
|
+ // // 重置筛选状态
|
|
|
+ this.edb_id = id;
|
|
|
+ this.getFrequency && 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) {
|
|
|
+ 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.$t('MsgPrompt.move_success_msg'));
|
|
|
+ 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.$t('MsgPrompt.move_success_msg'));
|
|
|
+ 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]||''
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
chenlei