eta1.1.0

src/views/dataEntry_manage/components/targetTree.vue

@@ -0,0 +1,431 @@
+<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.menuListV3().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>

src/views/dataEntry_manage/databaseList.vue

@@ -54,7 +54,8 @@
 				/>
 		</div>
 		<div class="database_main box" id="box" v-if="showData">
-			<div class="main-left left" id="left">
+			<target-tree />
+			<!-- <div class="main-left left" id="left">
 				<div class="tree-cont">
 					<el-tree
 						ref="menuTree"
@@ -112,7 +113,7 @@
 									style="width: 14px; height: 14px; margin-right: 8px"
 									v-if="data.Button.MoveButton"
 								/>
-								<!-- 添加子项 -->
+								添加子项
 								<img
 									src="~@/assets/img/set_m/add.png"
 									alt=""
@@ -120,7 +121,7 @@
 									@click.stop="addNode(node,data)"
 									v-if="data.Button.AddButton&&isEdbBtnShow('editCatalog')"
 								/>
-								<!--编辑节点 如果是分类，判断data.Button.OpButton不变；如果是指标，不显示(ETA1.0.3)-->
+								编辑节点 如果是分类，判断data.Button.OpButton不变；如果是指标，不显示(ETA1.0.3)
 								<img
 									src="~@/assets/img/set_m/edit.png"
 									alt=""
@@ -128,7 +129,7 @@
 									@click.stop="editNode(node,data)"
 									v-if="!data.EdbCode&&(data.Button.OpButton)&&isEdbBtnShow('editCatalog')"
 								/>
-								<!-- 删除节点 如果是分类，判断data.Button.DeleteButton不变；如果是指标，不显示(ETA1.0.3)-->
+								删除节点 如果是分类，判断data.Button.DeleteButton不变；如果是指标，不显示(ETA1.0.3)
 								<img
 									slot="reference"
 									src="~@/assets/img/set_m/del.png"
@@ -137,11 +138,11 @@
 									@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"
@@ -149,7 +150,7 @@
 									style="width: 14px; height: 14px;margin-left: 8px"
 									alt=""
 								/>
-								<!-- 查看关联指标 -->
+								查看关联指标
 								<img 
 									v-if="data.Button.ShowEdbRelation&&isEdbBtnShow('checkRelatedEdb')" 
 									@click.stop="showAssociateComputeData=true,showAssociateChart=false"
@@ -171,7 +172,7 @@
 				</div>
 				<span class="move-btn resize" v-drag id="resize" @mousemove="dynamicNode&&resetNodeStyle(dynamicNode)">
 				</span>
-			</div>
+			</div> -->
 			<!-- 指标关联图模块 -->
 			<div class="main-right right" id="right" style="background:transparent;border:none;box-shadow:none" v-if="showAssociateChart">
 				<dataAssociateChart :edbInfoId="selected_edbid"></dataAssociateChart>
@@ -495,6 +496,7 @@ import EdbLabelList from '@/components/edbLabelList.vue';
 import chartTrendRender from './databaseComponents/chartTrendRender.vue';
 import edbDetailData from './databaseComponents/edbDetailData.vue';
 import SmoothEdbDialog from './databaseComponents/smoothEdbDialog.vue';
+import targetTree from './components/targetTree.vue';
 export default {
 	name: '',
 	components: {
@@ -518,7 +520,8 @@ export default {
 		EdbLabelList,
 		chartTrendRender,
 		edbDetailData,
-		SmoothEdbDialog
+		SmoothEdbDialog,
+		targetTree
 	},
 	directives: {
     drag(el, bindings) {