feat: 优化组织架构树加载并添加加载状态

- 在用户管理页面添加组织架构树的加载状态显示 - 移除不必要的树操作按钮并调整样式 - 添加从API获取组织架构树数据的逻辑 - 修复风险管控卡配置页面的注释错误 - 在签署人管理页面添加表格加载状态 - 清理单位档案API文件的格式问题
2026-01-27 11:06:15 +08:00 · 2026-01-27 11:06:15 +08:00 · 231e2d2539
parent 4b8021094b
commit 231e2d2539
6 changed files with 116 additions and 48 deletions
--- a/src/api/treeRatingManagement.js
+++ b/src/api/treeRatingManagement.js
@ -50,3 +50,12 @@ export function delDept(deptId) {
    method: 'delete'
  })
 }
+
+// 查询待审核部门列表
+export function listAuditDept(query) {
+  return request({
+    url: '/system/dept/audit/list',
+    method: 'get',
+    params: query
+  })
+}
--- a/src/api/unit.js
+++ b/src/api/unit.js
@ -3,57 +3,56 @@
 * @Date: 2026-01-13 19:12:20
 * @Description:
 */
-import request from '@/utils/request'
+import request from "@/utils/request";

 // 查询单位档案列表
 export function listUnitArchive(query) {
  return request({
-    url: '/manage/unit/archive/list',
-    method: 'get',
-    params: query
-  })
+    url: "/manage/unit/archive/list",
+    method: "get",
+    params: query,
+  });
 }

 // 新增单位档案
 export function addUnitArchive(data) {
  return request({
-    url: '/manage/unit/archive',
-    method: 'post',
-    data: data
-  })
+    url: "/manage/unit/archive",
+    method: "post",
+    data: data,
+  });
 }

 // 获取单位档案详情
 export function getUnitArchive(unitId) {
  return request({
-    url: '/manage/unit/archive/' + unitId,
-    method: 'get'
-  })
+    url: "/manage/unit/archive/" + unitId,
+    method: "get",
+  });
 }

 // 修改单位档案
 export function updateUnitArchive(data) {
  return request({
-    url: '/manage/unit/archive',
-    method: 'put',
-    data: data
-  })
+    url: "/manage/unit/archive",
+    method: "put",
+    data: data,
+  });
 }

 // 删除单位档案
 export function delUnitArchive(unitIds) {
  return request({
-    url: '/manage/unit/archive/' + unitIds,
-    method: 'delete'
-  })
+    url: "/manage/unit/archive/" + unitIds,
+    method: "delete",
+  });
 }

 // 修改单位档案状态
 export function changeUnitArchiveStatus(data) {
  return request({
-    url: '/manage/unit/archive/changeStatus',
-    method: 'put',
-    data: data
-  })
+    url: "/manage/unit/archive/changeStatus",
+    method: "put",
+    data: data,
+  });
 }
-
--- a/src/views/Logistics/FilingReview/index.vue
+++ b/src/views/Logistics/FilingReview/index.vue
@ -104,9 +104,6 @@ const queryForm = ref({



-
-
-
 // 节点类型列表
 const nodeTypeList = ref([

--- a/src/views/Logistics/RiskManagement/index.vue
+++ b/src/views/Logistics/RiskManagement/index.vue
@ -1,4 +1,4 @@
-<!-- 后勤模块 - 建档审核中心 - 单位建档 -->
+<!-- 后勤模块 - 风险管控卡配置  -->

 <template>
    <div class="MainBox">
--- a/src/views/Logistics/UserManagement/index.vue
+++ b/src/views/Logistics/UserManagement/index.vue
@ -9,13 +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" />
-                    </div>
-                    <div class="tree-actions">
-                        <el-button type="primary" icon="Plus">新增节点</el-button>
-                        <el-button icon="Edit">编辑节点</el-button>
-                        <el-button icon="Delete">删除节点</el-button>
+                            @current-change="handleTreeChange" v-loading="loading" />
                    </div>
+
                </div>


@ -60,7 +56,7 @@
                    <template #header>
                        <span>关联账户</span>
                    </template>
-                    <el-table :data="accountList"  height="230px">
+                    <el-table :data="accountList" height="230px">
                        <el-table-column prop="accountName" label="账户名" />
                        <el-table-column prop="realName" label="姓名" />
                        <el-table-column prop="unit" label="所属单位" />
@ -84,7 +80,8 @@
                <el-card class="account-card" shadow="hover" style="margin-top: 20px;">
                    <template #header>
                        <span>账户列表</span>
-                        <el-button type="primary" icon="Plus" class="float-right" size="small" @click="handleAddUserClick">新建账户</el-button>
+                        <el-button type="primary" icon="Plus" class="float-right" size="small"
+                            @click="handleAddUserClick">新建账户</el-button>
                    </template>
                    <el-table :data="accountList" border height="300px">
                        <el-table-column prop="accountName" label="账户名" />
@ -111,17 +108,21 @@
        </el-row>

        <!-- 账户【新增/编辑/查看】弹窗 -->
-        <UserDialog v-if="dialogShow" :show="dialogShow" :CloseDialog="handleCancel"/>
+        <UserDialog v-if="dialogShow" :show="dialogShow" :CloseDialog="handleCancel" />
    </div>
 </template>
 <script setup>
-    import UserDialog from "./UserDialog.vue";
-import { ref } from 'vue'
+import { ref, onMounted, getCurrentInstance, reactive, toRefs, nextTick } from 'vue'
+import { listDept } from '@/api/treeRatingManagement'
+import UserDialog from "./UserDialog.vue";
+const { proxy } = getCurrentInstance()

 const dialogShow = ref(false); // 新增账户弹窗显示状态

-// 树形结构数据
+// 加载状态
+const loading = ref(false)

+// 树形结构数据
 const treeData = ref([
    {
        label: '江苏省电力公司',
@ -191,6 +192,68 @@ const accountList = ref([
    }
 ])

+/** 将接口数据转换为树形结构格式 */
+function convertToTreeData(data) {
+    if (!Array.isArray(data)) return []
+
+    return data.map(item => ({
+        label: item.deptName || item.name || item.label,
+        type: item.type || '单位',
+        status: item.status === '0' ? '已生效' : item.status === '1' ? '已禁用' : (item.status || '已生效'),
+        projects: item.projects || 0,
+        originalData: item, // 保留原始数据，用于编辑和删除操作
+        children: item.children && item.children.length > 0 ? convertToTreeData(item.children) : undefined
+    }))
+}
+
+onMounted(() => {
+    getDeptTree()
+})
+
+// 获取组织架构树
+const getDeptTree = async () => {
+    loading.value = true;
+    try {
+        const response = await listDept({
+            pageNum: '1',
+            pageSize: '1000',
+        })
+        if (response.code === 200) {
+            // 获取原始数据
+            let rawData = []
+            if (response.data && response.data.rows && Array.isArray(response.data.rows)) {
+                rawData = response.data.rows
+            } else if (response.rows && Array.isArray(response.rows)) {
+                rawData = response.rows
+            } else if (Array.isArray(response.data)) {
+                rawData = response.data
+            }
+
+            // 如果数据是扁平结构（有 parentId），使用 handleTree 转换为树形结构
+            // 如果数据已经是树形结构（有 children），直接使用
+            let treeStructure = []
+            if (rawData.length > 0 && rawData[0].parentId !== undefined) {
+                // 扁平结构，需要转换
+                treeStructure = proxy.handleTree(rawData, "deptId", "parentId", "children")
+            } else {
+                // 已经是树形结构
+                treeStructure = rawData
+            }
+
+            // 转换为组件需要的格式
+            let newData = convertToTreeData(treeStructure)
+            console.log('获取组织架构树成功:', newData)
+            treeData.value = newData
+        }
+    } catch (error) {
+        console.error('获取组织架构树失败:', error)
+    } finally {
+        loading.value = false;
+    }
+}
+
+
+
 // 树形结构点击事件
 const handleTreeChange = (data) => {
    console.log('Current tree node:', data)
@ -241,16 +304,14 @@ const handleCancel = () => {
    }

    .TreeBox {
+        height: calc(100% - 100px);
        margin-top: 20px;
        border: 1px solid #E4E7ED;
+        overflow: auto;
    }
 }

-.tree-actions {
-    margin-top: 20px;
-    display: flex;
-    gap: 10px;
-}
+

 .detail-card {
    margin-bottom: 20px;
--- a/src/views/Proprietor/SignerManagement/index.vue
+++ b/src/views/Proprietor/SignerManagement/index.vue
@ -39,7 +39,7 @@
        </el-form>

        <div class="card-box">
-            <el-table :data="tableData" class="mt-2">
+            <el-table :data="tableData" class="mt-2" :loading="loading">
                <el-table-column prop="userName" label="姓名"></el-table-column>
                <el-table-column prop="departmentName" label="所属部门"></el-table-column>
                <el-table-column prop="roleName" label="角色"></el-table-column>
@ -79,6 +79,8 @@
 import { ref } from "vue";
 import DialogBox from "./DialogBox.vue";

+// 加载状态
+const loading = ref(false);

 // 查询表单数据
 const queryForm = ref({