|
@@ -1,431 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="main-left left" id="left">
|
|
|
- <div class="tree-cont">
|
|
|
- <el-tree
|
|
|
- ref="menuTree"
|
|
|
- class="target_tree"
|
|
|
- :data="treeData"
|
|
|
- node-key="UniqueCode"
|
|
|
- :props="defaultProp"
|
|
|
- :allow-drag="canDragHandle"
|
|
|
- :allow-drop="canDropHandle"
|
|
|
- :current-node-key="select_node"
|
|
|
- :default-expanded-keys="defaultShowNodes"
|
|
|
- draggable
|
|
|
- :expand-on-click-node="false"
|
|
|
- check-strictly
|
|
|
- empty-text="暂无目录"
|
|
|
- lazy
|
|
|
- :load="getLazyTreeData"
|
|
|
- @node-expand="handleNodeExpand"
|
|
|
- @node-collapse="handleNodeCollapse"
|
|
|
- @current-change="nodeChange"
|
|
|
- @node-drop="dropOverHandle"
|
|
|
- @node-drag-end="dropMouseLeave"
|
|
|
- @node-drag-leave="dropMouseLeave"
|
|
|
- @node-drag-enter="dropMouseOver"
|
|
|
- >
|
|
|
- <span class="custom-tree-node" slot-scope="{ node, data }">
|
|
|
- <el-input
|
|
|
- ref="editVal"
|
|
|
- style="width: 90px"
|
|
|
- placeholder="请输入值"
|
|
|
- class="label-input"
|
|
|
- v-model="new_label"
|
|
|
- v-if="data.isEdit && isEdbBtnShow('editCatalog')"
|
|
|
- @blur="changeValue(node, data)"
|
|
|
- />
|
|
|
- <span
|
|
|
- @dblclick.stop="editNodeLabel(node, data)"
|
|
|
- v-else
|
|
|
- class="text_oneLine node_label"
|
|
|
- :style="`width:${(select_node === data.UniqueCode && node.Nodewidth) || ''}`"
|
|
|
- :id="`node${data.UniqueCode}`"
|
|
|
- >
|
|
|
- <span>{{ currentLang === "en" ? data.ClassifyNameEn || data.ClassifyName : data.ClassifyName }}</span>
|
|
|
- </span>
|
|
|
- <span style="display: flex; align-items: center" v-if="select_node === data.UniqueCode">
|
|
|
- <img src="~@/assets/img/data_m/move_ico.png" alt="" style="width: 14px; height: 14px; margin-right: 8px" v-if="data.Button.MoveButton" />
|
|
|
- <!-- 添加子项 -->
|
|
|
- <img
|
|
|
- src="~@/assets/img/set_m/add.png"
|
|
|
- alt=""
|
|
|
- style="width: 14px; height: 14px; margin-right: 8px"
|
|
|
- @click.stop="addNode(node, data)"
|
|
|
- v-if="data.Button.AddButton && isEdbBtnShow('editCatalog')"
|
|
|
- />
|
|
|
- <!--编辑节点 如果是分类,判断data.Button.OpButton不变;如果是指标,不显示(ETA1.0.3)-->
|
|
|
- <img
|
|
|
- src="~@/assets/img/set_m/edit.png"
|
|
|
- alt=""
|
|
|
- style="width: 15px; height: 14px; margin-right: 8px"
|
|
|
- @click.stop="editNode(node, data)"
|
|
|
- v-if="!data.EdbCode && data.Button.OpButton && isEdbBtnShow('editCatalog')"
|
|
|
- />
|
|
|
- <!-- 删除节点 如果是分类,判断data.Button.DeleteButton不变;如果是指标,不显示(ETA1.0.3)-->
|
|
|
- <img
|
|
|
- slot="reference"
|
|
|
- src="~@/assets/img/set_m/del.png"
|
|
|
- alt=""
|
|
|
- style="width: 14px; height: 14px"
|
|
|
- @click.stop="removeNode(node, data)"
|
|
|
- v-if="!data.EdbCode && data.Button.DeleteButton && isEdbBtnShow('deleteCatalog')"
|
|
|
- />
|
|
|
- <!-- 查看计算指标 -->
|
|
|
- <i class="el-icon-view" v-if="data.EdbType === 2 && ![58, 59, 67, 68].includes(data.Source) && isEdbBtnShow('checkCalcChart')" @click.stop="viewNode(node, data)"></i>
|
|
|
- <!-- 查看关联图表 -->
|
|
|
- <img
|
|
|
- v-if="data.Button.ShowChartRelation && isEdbBtnShow('checkRelatedChart')"
|
|
|
- @click.stop="(showAssociateChart = true), (showAssociateComputeData = false)"
|
|
|
- src="~@/assets/img/icons/associate_chart.png"
|
|
|
- style="width: 14px; height: 14px; margin-left: 8px"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <!-- 查看关联指标 -->
|
|
|
- <img
|
|
|
- v-if="data.Button.ShowEdbRelation && isEdbBtnShow('checkRelatedEdb')"
|
|
|
- @click.stop="(showAssociateComputeData = true), (showAssociateChart = false)"
|
|
|
- src="~@/assets/img/icons/associate_data.png"
|
|
|
- style="width: 14px; height: 14px; margin-left: 8px"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </span>
|
|
|
- </span>
|
|
|
- </el-tree>
|
|
|
- <div class="noDepart" @click="addLevelOneHandle" v-if="CanOpClassify && isEdbBtnShow('editCatalog')">
|
|
|
- <img src="~@/assets/img/set_m/add_ico.png" alt="" style="width: 16px; height: 16px; margin-right: 10px" />
|
|
|
- <span>添加一级目录</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <span class="move-btn resize" v-drag id="resize" @mousemove="dynamicNode && resetNodeStyle(dynamicNode)"> </span>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { dataBaseInterface } from "@/api/api.js";
|
|
|
-export default {
|
|
|
- name: "targetTree",
|
|
|
- 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;
|
|
|
- // console.log(total_wid,initWidth,end);
|
|
|
- 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;
|
|
|
- };
|
|
|
- },
|
|
|
- },
|
|
|
- props: {},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- treeData: [], //树形数据
|
|
|
- defaultShowNodes: [], //默认展开的节点
|
|
|
- defaultProp: {
|
|
|
- label: "ClassifyName",
|
|
|
- children: "Children",
|
|
|
- isLeaf: "isLeaf",
|
|
|
- }, //树结构配置项
|
|
|
- select_node: "", //当前选中的节点
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- /* 判断节点是否能被拖拽 */
|
|
|
- canDragHandle({ data }) {
|
|
|
- return data.Button.MoveButton;
|
|
|
- },
|
|
|
- /* 判断节点是否能被拖入 */
|
|
|
- canDropHandle(draggingNode, dropNode, type) {
|
|
|
- //draggingNode 拖动的节点 dropNode放置的节点
|
|
|
-
|
|
|
- //拖动的使目录则 只能放置同级下 如拖动2级目录那就只能放在一级目录下或者在2级目录里面排序
|
|
|
- //拖动的是指标 那只能放在除一级目录下的任意目录下
|
|
|
- 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;
|
|
|
- }
|
|
|
- }
|
|
|
- //四级指标
|
|
|
- if (draggingNode.level === 4) {
|
|
|
- if ((dropNode.level === 3 && type === "inner") || (dropNode.level === 4 && type !== "inner")) {
|
|
|
- canDrop = true;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- return canDrop;
|
|
|
- },
|
|
|
- // 树节点展开
|
|
|
- handleNodeExpand(data) {
|
|
|
- // 保存当前展开的节点
|
|
|
- let flag = false;
|
|
|
- this.defaultShowNodes.some((item) => {
|
|
|
- if (item === data.UniqueCode) {
|
|
|
- // 判断当前节点是否存在, 存在不做处理
|
|
|
- flag = true;
|
|
|
- return true;
|
|
|
- }
|
|
|
- });
|
|
|
- if (!flag) {
|
|
|
- // 不存在则存到数组里
|
|
|
- this.defaultShowNodes.push(data.UniqueCode);
|
|
|
- }
|
|
|
- },
|
|
|
- // 树节点关闭
|
|
|
- handleNodeCollapse(data) {
|
|
|
- this.defaultShowNodes.some((item, index) => {
|
|
|
- if (item === data.UniqueCode) {
|
|
|
- // 删除关闭节点
|
|
|
- this.defaultShowNodes.length = index;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- /* 节点变化时 */
|
|
|
- nodeChange(data, node) {
|
|
|
- this.search_txt = "";
|
|
|
- this.select_classifyId = !data.EdbInfoId ? data.ClassifyId : 0;
|
|
|
- this.select_node = data.UniqueCode;
|
|
|
- this.selected_edbid = data.EdbInfoId;
|
|
|
- this.resetNodeStyle(node);
|
|
|
- this.dynamicNode = node;
|
|
|
- this.showAssociateChart = false;
|
|
|
- this.showAssociateComputeData = false;
|
|
|
- },
|
|
|
- /* 拖拽完成 */
|
|
|
- dropOverHandle(b, a, i, e) {
|
|
|
- // b被拖拽节点对应的节点、a结束拖拽时最后进入的节点、i被拖拽节点的放置位置
|
|
|
- if (b.level === 1 || b.level === 2 || b.level === 3) {
|
|
|
- this.handleMoveCatalogue(b, a, i, e);
|
|
|
- }
|
|
|
-
|
|
|
- // 指标层
|
|
|
- if (b.level === 4) {
|
|
|
- this.handleMoveEdb(b, a, i, e);
|
|
|
- }
|
|
|
- },
|
|
|
- /* 拖拽离开/拖拽完成重置背景色 */
|
|
|
- dropMouseLeave(node1, node2, e) {
|
|
|
- let arrs = $(".el-tree-node__content");
|
|
|
- for (let a of arrs) {
|
|
|
- a.style.backgroundColor = "transparent";
|
|
|
- }
|
|
|
- },
|
|
|
- /* 拖拽覆盖添加背景色 */
|
|
|
- dropMouseOver(node1, node2, e) {
|
|
|
- // 被拖拽节点对应的 Node、所进入节点对应的 Node、event
|
|
|
- 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"))
|
|
|
- ) {
|
|
|
- // 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");
|
|
|
- }
|
|
|
- },
|
|
|
- // 移动的目录
|
|
|
- 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.ClassifyId === b.data.ClassifyId) {
|
|
|
- targetIndex = index;
|
|
|
- return;
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- if (targetIndex === 0) {
|
|
|
- PrevClassifyId = 0;
|
|
|
- NextClassifyId = list[targetIndex + 1].data.ClassifyId;
|
|
|
- } else if (targetIndex === list.length - 1) {
|
|
|
- PrevClassifyId = list[targetIndex - 1].data.ClassifyId;
|
|
|
- NextClassifyId = 0;
|
|
|
- } else {
|
|
|
- PrevClassifyId = list[targetIndex - 1].data.ClassifyId;
|
|
|
- NextClassifyId = list[targetIndex + 1].data.ClassifyId;
|
|
|
- }
|
|
|
-
|
|
|
- if (b.level === 2) {
|
|
|
- if (i === "inner") {
|
|
|
- ParentClassifyId = a.data.ClassifyId;
|
|
|
- PrevClassifyId = 0;
|
|
|
- NextClassifyId = a.data.Children.length > 1 ? a.data.Children[1].ClassifyId : 0;
|
|
|
- } else {
|
|
|
- ParentClassifyId = a.data.ParentId;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- if (b.level === 3) {
|
|
|
- if (i === "inner") {
|
|
|
- ParentClassifyId = a.data.ClassifyId;
|
|
|
- PrevClassifyId = 0;
|
|
|
- NextClassifyId = a.data.Children.length > 1 ? a.data.Children[1].ClassifyId : 0;
|
|
|
- } else {
|
|
|
- ParentClassifyId = a.data.ParentId;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- dataBaseInterface
|
|
|
- .classifyMove({
|
|
|
- ClassifyId: b.data.ClassifyId,
|
|
|
- ParentClassifyId: ParentClassifyId,
|
|
|
- PrevClassifyId: PrevClassifyId,
|
|
|
- NextClassifyId: NextClassifyId,
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- if (res.Ret === 200) {
|
|
|
- this.$message.success("移动成功!");
|
|
|
- }
|
|
|
- // this.getTreeData();
|
|
|
- });
|
|
|
- },
|
|
|
- // 移动的为指标
|
|
|
- handleMoveEdb(b, a, i, e) {
|
|
|
- let PrevEdbInfoId = 0,
|
|
|
- NextEdbInfoId = 0,
|
|
|
- targetIndex = 0,
|
|
|
- list = a.parent.childNodes.map((_) => _.data);
|
|
|
- if (i === "inner") {
|
|
|
- PrevEdbInfoId = 0;
|
|
|
- NextEdbInfoId = a.data.Children.length > 1 ? a.data.Children[1].EdbInfoId : 0;
|
|
|
- } else {
|
|
|
- list.forEach((item, index) => {
|
|
|
- if (item.EdbInfoId === b.data.EdbInfoId) {
|
|
|
- targetIndex = index;
|
|
|
- return;
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- if (targetIndex === 0) {
|
|
|
- PrevEdbInfoId = 0;
|
|
|
- NextEdbInfoId = list[targetIndex + 1].EdbInfoId;
|
|
|
- } else if (targetIndex === list.length - 1) {
|
|
|
- PrevEdbInfoId = list[targetIndex - 1].EdbInfoId;
|
|
|
- NextEdbInfoId = 0;
|
|
|
- } else {
|
|
|
- PrevEdbInfoId = list[targetIndex - 1].EdbInfoId;
|
|
|
- NextEdbInfoId = list[targetIndex + 1].EdbInfoId;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- dataBaseInterface
|
|
|
- .targetMove({
|
|
|
- ClassifyId: a.data.ClassifyId,
|
|
|
- EdbInfoId: b.data.EdbInfoId,
|
|
|
- PrevEdbInfoId: PrevEdbInfoId,
|
|
|
- NextEdbInfoId: NextEdbInfoId,
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- if (res.Ret === 200) {
|
|
|
- this.$message.success("移动成功!");
|
|
|
- }
|
|
|
- // this.getTreeData();
|
|
|
- });
|
|
|
- },
|
|
|
- // 懒加载目录数据
|
|
|
- getLazyTreeData(node, resolve) {
|
|
|
- // console.log(node);
|
|
|
- if (node.level === 0) {
|
|
|
- resolve(this.treeData);
|
|
|
- }else{
|
|
|
- //获取数据,如果是指标的话设置isLeaf:true
|
|
|
- let arr=[]
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- resolve(arr)
|
|
|
- }
|
|
|
- },
|
|
|
- // 获取一级目录
|
|
|
- getTreeData(params) {
|
|
|
- dataBaseInterface.targetCatalog({ParentId:0}).then((res) => {
|
|
|
- if (res.Ret === 200) {
|
|
|
- const arr = res.Data.AllNodes || [];
|
|
|
- this.treeData = arr.map((item) => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- // isLeaf: item.Children.length ? false : true,
|
|
|
- };
|
|
|
- });
|
|
|
- // this.CanOpClassify = res.Data.CanOpClassify;
|
|
|
- // this.currentLang = res.Data.Language === 'EN' ? 'en' : 'ch';
|
|
|
- // this.setLangIntoStore()
|
|
|
- // this.showData = true;
|
|
|
- // /* 处理树展开和选中图表 */
|
|
|
- // params && this.selectCurrentNode(params);
|
|
|
- // !params && this.select_node && this.$refs.menuTree.setCurrentKey(this.select_node);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- //控制页面按钮权限
|
|
|
- isEdbBtnShow(type) {
|
|
|
- const { edbDataPermission, checkPermissionBtn } = this.permissionBtn;
|
|
|
- const BtnMap = {
|
|
|
- update: edbDataPermission.edbData_update, //指标更新
|
|
|
- edit: edbDataPermission.edbData_edit, //指标编辑
|
|
|
- /* 'toImg':edbDataPermission.edbData_toImgs, */
|
|
|
- copyData: edbDataPermission.edbData_copyData, //复制数据
|
|
|
- toSource: edbDataPermission.edbData_edbSource, //指标溯源
|
|
|
- setEn: edbDataPermission.edbData_enNameSetting, //设置英文名称
|
|
|
- newValue: edbDataPermission.edbData_newestValue, //添加/编辑最新值
|
|
|
- refreshAll: edbDataPermission.edbData_refreshAll, //全部刷新
|
|
|
- saveEdb: edbDataPermission.edbData_saveEdb, //保存指标
|
|
|
- deleteEdb: edbDataPermission.edbData_deleteEdb, //删除指标
|
|
|
- showChartBasis: edbDataPermission.edbData_showChartBasis, //展示/隐藏同比图
|
|
|
- switchSeason: edbDataPermission.edbData_switchSeason, //切换季节性图
|
|
|
- editLimit: edbDataPermission.edbData_editLimit, //编辑上下限
|
|
|
- calculateAgain: edbDataPermission.edbData_calculateAgain, //重新计算
|
|
|
-
|
|
|
- editCatalog: edbDataPermission.edbData_classifyOpt_add, //添加编辑目录
|
|
|
- deleteCatalog: edbDataPermission.edbData_classifyOpt_delete, //删除目录
|
|
|
- checkRelatedChart: edbDataPermission.edbData_checkRelatedChart, //查看关联图表
|
|
|
- checkRelatedEdb: edbDataPermission.edbData_checkRelatedEdb, //查看关联指标
|
|
|
- checkCalcChart: edbDataPermission.edbData_checkCalcChart, //查看计算指标
|
|
|
- };
|
|
|
- return checkPermissionBtn(BtnMap[type]);
|
|
|
- },
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.$route.query.code ? this.getTreeData({ code: this.$route.query.code, id: this.$route.query.id, classifyId: this.$route.query.classifyId }) : this.getTreeData();
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|