导图结构报错修改

src/views/data-fill/components/nodeTree/index.vue

@@ -1,29 +1,37 @@
 <template>
     <div v-loading="treeNodeLoading" class="cu-tree-node-container" @mousewheel.prevent="treeNodeMousewheel">
-        <div v-if="!!nodes.label" :id="'tree-node-' + uuid" :style="{zoom: zoomRef + '%'}"
-             class="cu-tree-node-box horizontal collapsable" @mousedown="treeNodeMouseDown">
+        <div
+            v-if="!!nodes.label" :id="`tree-node-${uuid}`" :style="{ zoom: `${zoomRef}%` }"
+            class="cu-tree-node-box horizontal collapsable" @mousedown="treeNodeMouseDown"
+        >
             <div class="cu-tree-node-view">
                 <div class="cu-tree-node-label">
                     <div class="cu-tree-node-label-text">
                         <div :id="`node-tree-${nodes.key}`" class="cu-tree-node-label-name">
-                            <el-button :loading="nodes.loading" hc-btn type="primary">{{ nodes.label }}</el-button>
+                            <el-button :loading="nodes.loading" hc-btn type="primary">
+                                {{ nodes.label }}
+                            </el-button>
                         </div>
                     </div>
                 </div>
-                <TreeNodeChildren :data="nodes.childNodes" :parentNodes="nodes" @expandClick="expandClick"
-                                  @menuClick="poverMenuClick" @nodeClick="nodeLabelClick"
-                                  @nodeDblClick="nodeLabelDblClick"/>
+                <TreeNodeChildren
+                    :data="nodes.childNodes" :parent-nodes="nodes" @expandClick="expandClick"
+                    @menuClick="poverMenuClick" @nodeClick="nodeLabelClick"
+                    @nodeDblClick="nodeLabelDblClick"
+                />
             </div>
         </div>
-        <!--右键菜单-->
-        <HcContextMenu v-if="menusData.length > 0" ref="contextMenuRef" :datas="menusData"
-                       @item-click="handleMenuSelect">
-            <template #mark="{item}">
-                <HcIcon :fill="treeRefData?.isFirst" :name="item.icon" class="menu-item-icon"/>
+        <!-- 右键菜单 -->
+        <HcContextMenu
+            v-if="menusData.length > 0" ref="contextMenuRef" :datas="menusData"
+            @item-click="handleMenuSelect"
+        >
+            <template #mark="{ item }">
+                <HcIcon :fill="treeRefData?.isFirst" :name="item.icon" class="menu-item-icon" />
                 <span class="menu-item-name">{{ treeRefData?.isFirst ? '取消标记为首件' : '标记为首件' }}</span>
             </template>
-            <template #sort="{item}">
-                <HcIcon :line="false" :name="item.icon" class="menu-item-icon"/>
+            <template #sort="{ item }">
+                <HcIcon :line="false" :name="item.icon" class="menu-item-icon" />
                 <span class="menu-item-name">{{ item.label }}</span>
             </template>
         </HcContextMenu>
@@ -31,47 +39,48 @@
 </template>
 
 <script setup>
-import {watch, ref, onMounted, nextTick} from "vue";
-import TreeNodeChildren from "./children.vue";
-import wbsApi from "~api/data-fill/wbs"
-import {getObjValue, getArrValue, getRandom, isArrItem} from "js-fast-way"
+import { nextTick, onMounted, ref, watch } from 'vue'
+import TreeNodeChildren from './children.vue'
+import wbsApi from '~api/data-fill/wbs'
+import { getArrValue, getObjValue, getRandom, isArrItem } from 'js-fast-way'
 
 //参数
 const props = defineProps({
     autoExpandKeys: {
         type: Array,
-        default: () => ([])
+        default: () => ([]),
     },
     menus: {
         type: Array,
-        default: () => ([])
+        default: () => ([]),
     },
     isMark: {
         type: Boolean,
-        default: false
+        default: false,
     },
     accordion: {
         type: Boolean,
-        default: false
+        default: false,
     },
     projectId: {
         type: [String, Number],
-        default: ''
+        default: '',
     },
     contractId: {
         type: [String, Number],
-        default: ''
+        default: '',
     },
 })
 
+const emit = defineEmits(['expand', 'nodeClick', 'nodeDblClick', 'menuClick'])
 //初始数据
 const uuid = getRandom()
 const datas = ref({})
 const nodes = ref({})
 const menusData = ref(props.menus)
 const menuMark = ref(props.isMark)
-const projectId = ref(props.projectId);
-const contractId = ref(props.contractId);
+const projectId = ref(props.projectId)
+const contractId = ref(props.contractId)
 const TreeExpandKey = ref(props.autoExpandKeys)
 const treeRefNode = ref(null)
 const treeRefData = ref(null)
@@ -113,7 +122,7 @@ const getTreeOneLevel = async () => {
     if (keys.length > 0 && res?.id) {
         const children = await queryMappingStructureTree({
             contractId: contractId.value,
-            contractIdRelation: res?.contractIdRelation,
+            contractIdRelation: res?.contractIdRelation || '',
             primaryKeyId: res?.primaryKeyId,
             parentId: res?.id,
         })
@@ -134,7 +143,7 @@ const setTreeExpandKey = async (arr, res) => {
         if (isArrItem(keys, item?.primaryKeyId)) {
             const children = await queryMappingStructureTree({
                 contractId: contractId.value,
-                contractIdRelation: item?.contractIdRelation,
+                contractIdRelation: item?.contractIdRelation || '',
                 primaryKeyId: item?.primaryKeyId,
                 parentId: item?.id,
             })
@@ -148,9 +157,9 @@ const setTreeExpandKey = async (arr, res) => {
 
 //获取数据
 const queryMappingStructureTree = async (form) => {
-    const {error, code, data} = await wbsApi.queryMappingStructureTree({
+    const { error, code, data } = await wbsApi.queryMappingStructureTree({
         ...form,
-        wbsType: 1
+        wbsType: 1,
     })
     //处理数据
     if (!error && code === 200) {
@@ -174,7 +183,7 @@ const setDatasToNodes = () => {
         isLeaf: deepData['isLeaf'] || false,
         loading: deepData['loading'] || false,
         key: deepData['primaryKeyId'] || '',
-        label: deepData['title'] || ''
+        label: deepData['title'] || '',
     }
 }
 
@@ -200,36 +209,36 @@ const treeNodeMouseDown = (event) => {
     //获取相关dom元素
     let dom = document.getElementById('tree-node-' + uuid)
     //获取x坐标和y坐标
-    let clientX = event.clientX, clientY = event.clientY;
+    let clientX = event.clientX, clientY = event.clientY
 
     //获取左部和顶部的偏移量
-    let offsetLeft = dom.offsetLeft, offsetTop = dom.offsetTop;
+    let offsetLeft = dom.offsetLeft, offsetTop = dom.offsetTop
     //开关打开
-    isDown.value = true;
+    isDown.value = true
 
     //设置样式
-    dom.style.cursor = 'move';
+    dom.style.cursor = 'move'
 
     document.onmousemove = (e) => {
         if (isDown.value === false) {
-            return;
+            return
         }
         //获取x和y
-        let nx = e.clientX;
-        let ny = e.clientY;
+        let nx = e.clientX
+        let ny = e.clientY
         //计算移动后的左偏移量和顶部的偏移量
-        let nl = nx - (clientX - offsetLeft);
-        let nt = ny - (clientY - offsetTop);
+        let nl = nx - (clientX - offsetLeft)
+        let nt = ny - (clientY - offsetTop)
 
-        dom.style.left = nl + 'px';
-        dom.style.top = nt + 'px';
+        dom.style.left = nl + 'px'
+        dom.style.top = nt + 'px'
     }
     document.onmouseup = () => {
         //开关关闭
-        isDown.value = false;
-        dom.style.cursor = 'default';
-        document.onmousemove = null;
-        document.onmouseup = null;
+        isDown.value = false
+        dom.style.cursor = 'default'
+        document.onmousemove = null
+        document.onmouseup = null
     }
 }
 
@@ -243,44 +252,42 @@ const getNodeExpandKeys = async (node, newKeys) => {
     }
 }
 
-const emit = defineEmits(['expand', 'nodeClick', 'nodeDblClick', 'menuClick']);
-
 //导图结构展开和收缩被点击
-const expandClick = ({node, data}) => {
+const expandClick = ({ node, data }) => {
     if (!node.children) {
-        node.expanded = false;
+        node.expanded = false
     }
-    node.isExpand = !node.isExpand;
-    emit('expand', {node, data})
+    node.isExpand = !node.isExpand
+    emit('expand', { node, data })
 }
 
 //鼠标左键单击事件
-const nodeLabelClick = async ({node, data}) => {
+const nodeLabelClick = async ({ node, data }) => {
     if (data?.notExsitChild) {
         await awaitNodeClick(node, data)
     } else {
-        let ifChildren = !!(node.childNodes && node.childNodes.length > 0);
+        let ifChildren = !!(node.childNodes && node.childNodes.length > 0)
         if (ifChildren) {
-            node.expanded = true;
-            node.isExpand = true;
+            node.expanded = true
+            node.isExpand = true
             node.loading = false
             await awaitNodeClick(node, data)
         } else {
             node.loading = true
             const children = await queryMappingStructureTree({
                 contractId: contractId.value,
-                contractIdRelation: data?.contractIdRelation,
+                contractIdRelation: data?.contractIdRelation || '',
                 primaryKeyId: data?.primaryKeyId,
                 parentId: data?.id,
             })
             node.childNodes = children
             await nextTick(async () => {
                 if (children.length > 0) {
-                    node.expanded = true;
-                    node.isExpand = true;
+                    node.expanded = true
+                    node.isExpand = true
                 } else {
-                    node.expanded = false;
-                    node.expanded = false;
+                    node.expanded = false
+                    node.expanded = false
                 }
                 node.loading = false
                 await awaitNodeClick(node, data)
@@ -294,7 +301,7 @@ const awaitNodeClick = async (node, data) => {
     let autoKeysArr = []
     await getNodeExpandKeys(node, autoKeysArr)
     const autoKeys = autoKeysArr.reverse()
-    emit('nodeClick', {node, data, keys: autoKeys})
+    emit('nodeClick', { node, data, keys: autoKeys })
 }
 
 //双击事件
@@ -305,28 +312,28 @@ const nodeLabelDblClick = (item) => {
 //菜单被点击
 const contextMenuRef = ref(null)
 const poverMenuClick = (event, node, data) => {
-    const rows = menusData.value || [];
+    const rows = menusData.value || []
     if (rows.length > 0) {
-        event.preventDefault();
-        treeRefNode.value = node;
-        treeRefData.value = data;
+        event.preventDefault()
+        treeRefNode.value = node
+        treeRefData.value = data
         contextMenuRef.value?.showMenu(event)
     }
 }
 
 //鼠标右键菜单被点击
-const handleMenuSelect = ({key}) => {
-    const node = treeRefNode.value;
-    const data = treeRefData.value;
+const handleMenuSelect = ({ key }) => {
+    const node = treeRefNode.value
+    const data = treeRefData.value
     //如果为标记菜单
     if (key === 'mark' && menuMark.value) {
         if (data.isFirst === true) {
-            emit('menuClick', {key: 'cancel_mark', node, data})
+            emit('menuClick', { key: 'cancel_mark', node, data })
         } else {
-            emit('menuClick', {key: 'mark', node, data})
+            emit('menuClick', { key: 'mark', node, data })
         }
     } else {
-        emit('menuClick', {key, node, data})
+        emit('menuClick', { key, node, data })
     }
 }
 </script>