From 06394ebc797078d6d2cd09ce681875724f40bd12 Mon Sep 17 00:00:00 2001
From: liangbin <15536829364@163.com>
Date: Tue, 27 Jan 2026 11:27:41 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86):?=
=?UTF-8?q?=20=E9=87=8D=E6=9E=84=E7=BB=84=E7=BB=87=E6=9E=B6=E6=9E=84?=
=?UTF-8?q?=E6=A0=91=E6=95=B0=E6=8D=AE=E7=BB=91=E5=AE=9A=E4=B8=8E=E8=A1=A8?=
=?UTF-8?q?=E5=8D=95=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 移除硬编码的树形数据，改为从接口获取并动态转换
- 重命名表单数据变量为更具语义化的JDformData
- 优化树节点点击事件处理，自动填充节点详情表单
- 添加parentName处理逻辑，确保上级节点名称正确显示
- 为树组件添加expand-on-click-node属性防止误操作
---
src/views/Logistics/UserManagement/index.vue | 83 ++++++++++----------
1 file changed, 41 insertions(+), 42 deletions(-)
diff --git a/src/views/Logistics/UserManagement/index.vue b/src/views/Logistics/UserManagement/index.vue
index dc2d5ed..f3c604f 100644
--- a/src/views/Logistics/UserManagement/index.vue
+++ b/src/views/Logistics/UserManagement/index.vue
@@ -9,12 +9,9 @@
组织架构树
+ @current-change="handleTreeChange" v-loading="loading" :expand-on-click-node="false" />
-
-
-
@@ -23,28 +20,28 @@
节点详情
-
+
-
+
-
+
-
+
-
+
@@ -123,31 +120,7 @@ const dialogShow = ref(false); // 新增账户弹窗显示状态
const loading = ref(false)
// 树形结构数据
-const treeData = ref([
- {
- label: '江苏省电力公司',
- children: [
- {
- label: '南京市供电公司',
- children: [
- {
- label: '城东片区',
- children: [
- { label: 'A办公楼' },
- { label: 'B办公楼' }
- ]
- },
- {
- label: '城西片区',
- children: [
- { label: 'C办公楼' }
- ]
- }
- ]
- }
- ]
- }
-])
+const treeData = ref([])
// 树形结构配置
const treeProps = {
@@ -155,11 +128,12 @@ const treeProps = {
label: 'label'
}
-// 表单数据
-const formData = ref({
- nodeName: '江苏省电力公司',
- nodeCode: 'JS001',
- parentNode: '-',
+// 节点表单数据
+const JDformData = ref({
+ deptName: '江苏省电力公司',
+ deptId: 'JS001',
+ 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)
}
// 获取状态标签类型