feat: 优化组织架构树加载并添加加载状态
- 在用户管理页面添加组织架构树的加载状态显示 - 移除不必要的树操作按钮并调整样式 - 添加从API获取组织架构树数据的逻辑 - 修复风险管控卡配置页面的注释错误 - 在签署人管理页面添加表格加载状态 - 清理单位档案API文件的格式问题
This commit is contained in:
parent
4b8021094b
commit
231e2d2539
|
|
@ -50,3 +50,12 @@ export function delDept(deptId) {
|
||||||
method: 'delete'
|
method: 'delete'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 查询待审核部门列表
|
||||||
|
export function listAuditDept(query) {
|
||||||
|
return request({
|
||||||
|
url: '/system/dept/audit/list',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -3,57 +3,56 @@
|
||||||
* @Date: 2026-01-13 19:12:20
|
* @Date: 2026-01-13 19:12:20
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
import request from '@/utils/request'
|
import request from "@/utils/request";
|
||||||
|
|
||||||
// 查询单位档案列表
|
// 查询单位档案列表
|
||||||
export function listUnitArchive(query) {
|
export function listUnitArchive(query) {
|
||||||
return request({
|
return request({
|
||||||
url: '/manage/unit/archive/list',
|
url: "/manage/unit/archive/list",
|
||||||
method: 'get',
|
method: "get",
|
||||||
params: query
|
params: query,
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 新增单位档案
|
// 新增单位档案
|
||||||
export function addUnitArchive(data) {
|
export function addUnitArchive(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/manage/unit/archive',
|
url: "/manage/unit/archive",
|
||||||
method: 'post',
|
method: "post",
|
||||||
data: data
|
data: data,
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取单位档案详情
|
// 获取单位档案详情
|
||||||
export function getUnitArchive(unitId) {
|
export function getUnitArchive(unitId) {
|
||||||
return request({
|
return request({
|
||||||
url: '/manage/unit/archive/' + unitId,
|
url: "/manage/unit/archive/" + unitId,
|
||||||
method: 'get'
|
method: "get",
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 修改单位档案
|
// 修改单位档案
|
||||||
export function updateUnitArchive(data) {
|
export function updateUnitArchive(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/manage/unit/archive',
|
url: "/manage/unit/archive",
|
||||||
method: 'put',
|
method: "put",
|
||||||
data: data
|
data: data,
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 删除单位档案
|
// 删除单位档案
|
||||||
export function delUnitArchive(unitIds) {
|
export function delUnitArchive(unitIds) {
|
||||||
return request({
|
return request({
|
||||||
url: '/manage/unit/archive/' + unitIds,
|
url: "/manage/unit/archive/" + unitIds,
|
||||||
method: 'delete'
|
method: "delete",
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 修改单位档案状态
|
// 修改单位档案状态
|
||||||
export function changeUnitArchiveStatus(data) {
|
export function changeUnitArchiveStatus(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/manage/unit/archive/changeStatus',
|
url: "/manage/unit/archive/changeStatus",
|
||||||
method: 'put',
|
method: "put",
|
||||||
data: data
|
data: data,
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -104,9 +104,6 @@ const queryForm = ref({
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 节点类型列表
|
// 节点类型列表
|
||||||
const nodeTypeList = ref([
|
const nodeTypeList = ref([
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<!-- 后勤模块 - 建档审核中心 - 单位建档 -->
|
<!-- 后勤模块 - 风险管控卡配置 -->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="MainBox">
|
<div class="MainBox">
|
||||||
|
|
|
||||||
|
|
@ -9,13 +9,9 @@
|
||||||
<div class="LeftTitle">组织架构树</div>
|
<div class="LeftTitle">组织架构树</div>
|
||||||
<div class="TreeBox">
|
<div class="TreeBox">
|
||||||
<el-tree :data="treeData" :props="treeProps" show-line default-expand-all highlight-current
|
<el-tree :data="treeData" :props="treeProps" show-line default-expand-all highlight-current
|
||||||
@current-change="handleTreeChange" />
|
@current-change="handleTreeChange" v-loading="loading" />
|
||||||
</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>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -84,7 +80,8 @@
|
||||||
<el-card class="account-card" shadow="hover" style="margin-top: 20px;">
|
<el-card class="account-card" shadow="hover" style="margin-top: 20px;">
|
||||||
<template #header>
|
<template #header>
|
||||||
<span>账户列表</span>
|
<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>
|
</template>
|
||||||
<el-table :data="accountList" border height="300px">
|
<el-table :data="accountList" border height="300px">
|
||||||
<el-table-column prop="accountName" label="账户名" />
|
<el-table-column prop="accountName" label="账户名" />
|
||||||
|
|
@ -115,13 +112,17 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { ref, onMounted, getCurrentInstance, reactive, toRefs, nextTick } from 'vue'
|
||||||
|
import { listDept } from '@/api/treeRatingManagement'
|
||||||
import UserDialog from "./UserDialog.vue";
|
import UserDialog from "./UserDialog.vue";
|
||||||
import { ref } from 'vue'
|
const { proxy } = getCurrentInstance()
|
||||||
|
|
||||||
const dialogShow = ref(false); // 新增账户弹窗显示状态
|
const dialogShow = ref(false); // 新增账户弹窗显示状态
|
||||||
|
|
||||||
// 树形结构数据
|
// 加载状态
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
// 树形结构数据
|
||||||
const treeData = ref([
|
const treeData = ref([
|
||||||
{
|
{
|
||||||
label: '江苏省电力公司',
|
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) => {
|
const handleTreeChange = (data) => {
|
||||||
console.log('Current tree node:', data)
|
console.log('Current tree node:', data)
|
||||||
|
|
@ -241,16 +304,14 @@ const handleCancel = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.TreeBox {
|
.TreeBox {
|
||||||
|
height: calc(100% - 100px);
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
border: 1px solid #E4E7ED;
|
border: 1px solid #E4E7ED;
|
||||||
|
overflow: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tree-actions {
|
|
||||||
margin-top: 20px;
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-card {
|
.detail-card {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
|
|
||||||
|
|
@ -39,7 +39,7 @@
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
<div class="card-box">
|
<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="userName" label="姓名"></el-table-column>
|
||||||
<el-table-column prop="departmentName" label="所属部门"></el-table-column>
|
<el-table-column prop="departmentName" label="所属部门"></el-table-column>
|
||||||
<el-table-column prop="roleName" label="角色"></el-table-column>
|
<el-table-column prop="roleName" label="角色"></el-table-column>
|
||||||
|
|
@ -79,6 +79,8 @@
|
||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
import DialogBox from "./DialogBox.vue";
|
import DialogBox from "./DialogBox.vue";
|
||||||
|
|
||||||
|
// 加载状态
|
||||||
|
const loading = ref(false);
|
||||||
|
|
||||||
// 查询表单数据
|
// 查询表单数据
|
||||||
const queryForm = ref({
|
const queryForm = ref({
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue