refactor(用户管理): 重构组织架构树数据绑定与表单处理

- 移除硬编码的树形数据，改为从接口获取并动态转换
- 重命名表单数据变量为更具语义化的JDformData
- 优化树节点点击事件处理，自动填充节点详情表单
- 添加parentName处理逻辑，确保上级节点名称正确显示
- 为树组件添加expand-on-click-node属性防止误操作

src/views/Logistics/UserManagement/index.vue

@@ -9,12 +9,9 @@
                     <div class="LeftTitle">组织架构树</div>
                     <div class="TreeBox">
                         <el-tree :data="treeData" :props="treeProps" show-line default-expand-all highlight-current
-                            @current-change="handleTreeChange" v-loading="loading" />
+                            @current-change="handleTreeChange" v-loading="loading" :expand-on-click-node="false" />
                     </div>
-
                 </div>
-
-
             </el-col>
 
             <!-- 右侧节点详情 -->
@@ -23,28 +20,28 @@
                     <template #header>
                         <span>节点详情</span>
                     </template>
-                    <el-form :model="formData" label-width="120px" label-position="top">
+                    <el-form :model="JDformData" label-width="120px" label-position="top">
                         <el-row :gutter="20">
                             <el-col :span="12">
                                 <el-form-item label="节点名称">
-                                    <el-input v-model="formData.nodeName" disabled />
+                                    <el-input v-model="JDformData.deptName" disabled />
                                 </el-form-item>
                             </el-col>
                             <el-col :span="12">
                                 <el-form-item label="节点编码">
-                                    <el-input v-model="formData.nodeCode" disabled />
+                                    <el-input v-model="JDformData.deptId" disabled />
                                 </el-form-item>
                             </el-col>
                         </el-row>
                         <el-row :gutter="20">
                             <el-col :span="12">
                                 <el-form-item label="上级节点">
-                                    <el-input v-model="formData.parentNode" disabled />
+                                    <el-input v-model="JDformData.parentName" disabled />
                                 </el-form-item>
                             </el-col>
                             <el-col :span="12">
                                 <el-form-item label="创建时间">
-                                    <el-input v-model="formData.createTime" disabled />
+                                    <el-input v-model="JDformData.createTime" disabled />
                                 </el-form-item>
                             </el-col>
                         </el-row>
@@ -123,31 +120,7 @@ const dialogShow = ref(false); // 新增账户弹窗显示状态
 const loading = ref(false)
 
 // 树形结构数据
-const treeData = ref([
+const treeData = ref([])
-    {
-        label: '江苏省电力公司',
-        children: [
-            {
-                label: '南京市供电公司',
-                children: [
-                    {
-                        label: '城东片区',
-                        children: [
-                            { label: 'A办公楼' },
-                            { label: 'B办公楼' }
-                        ]
-                    },
-                    {
-                        label: '城西片区',
-                        children: [
-                            { label: 'C办公楼' }
-                        ]
-                    }
-                ]
-            }
-        ]
-    }
-])
 
 // 树形结构配置
 const treeProps = {
@@ -155,11 +128,12 @@ const treeProps = {
     label: 'label'
 }
 
-// 表单数据
+// 节点表单数据
-const formData = ref({
+const JDformData = ref({
-    nodeName: '江苏省电力公司',
+    deptName: '江苏省电力公司',
-    nodeCode: 'JS001',
+    deptId: 'JS001',
-    parentNode: '-',
+    parentName: '-',
+    parentId: '-',
     createTime: '2023-05-15'
 })
 
@@ -201,7 +175,10 @@ function convertToTreeData(data) {
         type: item.type || '单位',
         status: item.status === '0' ? '已生效' : item.status === '1' ? '已禁用' : (item.status || '已生效'),
         projects: item.projects || 0,
-        originalData: item, // 保留原始数据，用于编辑和删除操作
+        originalData: {
+            ...item,
+            parentName: item.parentName || '',
+        }, // 保留原始数据，用于编辑和删除操作
         children: item.children && item.children.length > 0 ? convertToTreeData(item.children) : undefined
     }))
 }
@@ -233,7 +210,21 @@ const getDeptTree = async () => {
             // 如果数据已经是树形结构（有 children），直接使用
             let treeStructure = []
             if (rawData.length > 0 && rawData[0].parentId !== undefined) {
-                // 扁平结构，需要转换
+                // 扁平结构，需要先处理 parentName
+                rawData = rawData.map(item => {
+                    let parentName = ''
+                    if (item.parentId && item.parentId !== 0) {
+                        const parent = rawData.find(p => p.deptId === item.parentId)
+                        if (parent) {
+                            parentName = parent.deptName
+                        }
+                    }
+                    return {
+                        ...item,
+                        parentName,
+                    }
+                })
+                // 转换为树形结构
                 treeStructure = proxy.handleTree(rawData, "deptId", "parentId", "children")
             } else {
                 // 已经是树形结构
@@ -256,7 +247,15 @@ const getDeptTree = async () => {
 
 // 树形结构点击事件
 const handleTreeChange = (data) => {
-    console.log('Current tree node:', data)
+    // 赋值节点表单数据
+    JDformData.value = {
+        deptName: data.label,
+        deptId: data.originalData.deptId,
+        parentName: data.originalData.parentName || '-',
+        parentId: data.originalData.parentId || '-',
+        createTime: data.originalData.createTime || '-'
+    }
+    console.log(data,'获取当前节点', JDformData.value)
 }
 
 // 获取状态标签类型