Merge branch 'ch/need_pool382' of eta_gn_front/eta_front into master

src/views/system_manage/departManage.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="depart_container">
-		<div class="left_cont">
+	<div class="depart_container" id="box">
+		<div class="left_cont" id="left">
 			<div class="company_top" @click="initDepart">
 				<img src="~@/assets/img/set_m/home_ico.png" alt="" style="width:30px;height:30px;">
 				<span :class="!defaultGroup&&!defaultDepart?'act':''">{{$t('SystemManage.DepartManage.depart_info_title')}}</span>
@@ -19,7 +19,7 @@
 				empty-text="暂无部门"
 				@node-drop="handleDropOver">
 				<span class="custom-tree-node"  slot-scope="{node,data}" @click="clickNode(node,data)">
-					<span>{{ node.label }}</span>
+					<span class="label">{{ node.label }}</span>
 					<span style="display:flex;alignItems:center;" v-show="act_node===data.unicodeKey">
                         <img src="~@/assets/img/data_m/move_ico.png" alt="" style="width:12px;height:12px;marginRight:10px;" @click.stop>
 						<img src="~@/assets/img/set_m/add.png" alt="" style="width:12px;height:12px;marginRight:10px;" @click.stop="addNode(data)" 
@@ -48,8 +48,15 @@
 				<img src="~@/assets/img/set_m/add_ico.png" alt="" style="width:16px;height:16px;marginRight:10px;">
 				<span>{{$t('SystemManage.DepartManage.depart_create')}}</span>
 			</div>
+			<span
+				class="move-btn resize"
+				v-drag
+				id="resize"
+				@mousemove="dynamicNode && resetNodeStyle(dynamicNode)"
+			>
+			</span>
 		</div>
-		<div class="right_cont">
+		<div class="right_cont" id="right">
 			<div class="right_cont_top">
 				<div>
 					<el-button v-permission="permissionBtn.sysDepartPermission.sysDepart_saveUser"
@@ -383,11 +390,12 @@ import { departInterence } from '@/api/api.js';
 import http from '@/api/http.js'
 import md5 from '@/utils/md5.js';
 import mixin from './mixin/departManageMixin.js';
+import leftMixin from "./mixin/leftMixin.js";
 //自定义省市数据
 import{province_sorce,city_sorce} from '@/utils/distpicker'; 
 export default {
 	name:'',
-	mixins:[mixin],
+	mixins:[mixin, leftMixin],
 	props:{'':{},'':{}},
 	components: {},
 	data () {
@@ -432,9 +440,9 @@ export default {
 				depart_id:'',
 			},//分组表单
 			groupRule:{
-				group:[
-					{ required: true, message: '请添加分组', trigger: 'blur' },
-				]
+				// group:[
+				// 	{ required: true, message: '请添加分组', trigger: 'blur' },
+				// ]
 			},//分组校验
 			isEditGroup:false,//编辑分组
 			editGroupForm:{
@@ -873,7 +881,7 @@ export default {
 						GroupName:groupArr.join(',')
 					})
 						if(res.Ret === 200) {
-							this.$message.success(this.$t('MsgPrompt.add_msg'))
+							this.$message.success('保存成功')
 							this.isAddGroup = false;
 							this.groupForm = {
 								title:this.$t('SystemManage.DepartManage.group_add'),
@@ -1260,11 +1268,9 @@ export default {
 		width:100%;
 	}
 	.left_cont {
-		width: 16%;
-		min-width: 200px;
+		position: relative;
+		min-width: 18%;
 		margin-right: 20px;
-		height: calc(100vh - 120px);
-		overflow-y: auto;
 		border-radius: 4px;
 		background: #fff;
 		padding: 20px;
@@ -1287,14 +1293,23 @@ export default {
 			}
 		}
 		.depart_tree {
+			padding: 0 10px 0 0;
+			height: calc(100vh - 252px);
+			overflow-y: auto;
 			font-size: 15px;
 			color: #333;
 			.custom-tree-node {
+				width: calc(100% - 36px)!important;
 				display: flex !important;
 				justify-content: space-between;
 				align-items: center;
 				display: block;
 				flex: 1;
+				.label {
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
 			}
 			.el-tree-node__content {
 				margin-bottom: 15px !important;
@@ -1317,7 +1332,7 @@ export default {
 			.el-tree-node__content{padding-right:10px !important;}
 		}
 		.noDepart {
-			margin-top: 50px;
+			// margin-top: 50px;
 			display: flex;
 			align-items: center;
 			justify-content: center;
@@ -1325,6 +1340,16 @@ export default {
 			font-size: 16px;
 			cursor: pointer;
 		}
+		.move-btn {
+			height: 100%;
+			width: 4px;
+			position: absolute;
+			right: 0px;
+			top: 0;
+			&:hover {
+				cursor: col-resize;
+			}
+		}
 	}
 	.right_cont {
 		width: 82%;

src/views/system_manage/mixin/leftMixin.js

@@ -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]||''
+    },
+  },
+};