LiuYuanchi
/
project-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[add] 添加了部门管理的加载动画

This commit is contained in:
LiuYuanchi 2025-04-27 12:33:59 +08:00
parent 9840e6d823
commit 7ad6f1f093
2 changed files with 50 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/typings/components.d.ts vendored
View File

@ -40,6 +40,7 @@ declare module 'vue' {
ASelect: typeof import('ant-design-vue/es')['Select'] ASelect: typeof import('ant-design-vue/es')['Select']
ASelectOption: typeof import('ant-design-vue/es')['SelectOption'] ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
ASpace: typeof import('ant-design-vue/es')['Space'] ASpace: typeof import('ant-design-vue/es')['Space']
ASpin: typeof import('ant-design-vue/es')['Spin']
AStatistic: typeof import('ant-design-vue/es')['Statistic'] AStatistic: typeof import('ant-design-vue/es')['Statistic']
ASwitch: typeof import('ant-design-vue/es')['Switch'] ASwitch: typeof import('ant-design-vue/es')['Switch']
ATable: typeof import('ant-design-vue/es')['Table'] ATable: typeof import('ant-design-vue/es')['Table']

87
src/views/department/index.vue
View File

@ -6,44 +6,46 @@
<div class="toolbar"> <div class="toolbar">
<a-button type="primary" @click="showAddModal(null)">添加部门</a-button> <a-button type="primary" @click="showAddModal(null)">添加部门</a-button>
</div> </div>
<a-tree <a-spin :spinning="loading">
v-if="treeData.length > 0" <a-tree
:tree-data="treeData" v-if="treeData.length > 0"
show-line :tree-data="treeData"
:default-expand-all="true" show-line
:selected-keys.sync="selectedKeys" :default-expand-all="true"
> :selected-keys.sync="selectedKeys"
<template #title="{ dataRef }"> >
<div class="tree-node"> <template #title="{ dataRef }">
<span>{{ dataRef.departmentName }}</span> <div class="tree-node">
<div class="node-actions"> <span>{{ dataRef.departmentName }}</span>
<a-button <div class="node-actions">
size="small" <a-button
type="link" size="small"
@click="showAddModal(dataRef)" type="link"
> @click="showAddModal(dataRef)"
添加子部门 >
</a-button> 添加子部门
<a-button </a-button>
size="small" <a-button
type="link" size="small"
@click="showEditModal(dataRef)" type="link"
> @click="showEditModal(dataRef)"
编辑 >
</a-button> 编辑
<a-button </a-button>
size="small" <a-button
type="link" size="small"
danger type="link"
@click="confirmDelete(dataRef)" danger
> @click="confirmDelete(dataRef)"
删除 >
</a-button> 删除
</a-button>
</div>
</div> </div>
</div> </template>
</template> </a-tree>
</a-tree> <a-empty v-else description="暂无数据" />
<a-empty v-else description="暂无数据" /> </a-spin>
</a-card> </a-card>
</a-col> </a-col>
</a-row> </a-row>
@ -74,10 +76,13 @@
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import { message, Modal } from 'ant-design-vue'; import { message, Modal } from 'ant-design-vue';
import axios from 'axios'; import axios from 'axios';
import { apiRequestGet } from '@/utils/api' import { apiRequestGet } from '@/utils/api';
import { localStg } from '@/utils/storage'; import { localStg } from '@/utils/storage';
// 部门树数据 // 部门树数据
const treeData = ref([]); const treeData = ref([]);
// 加载状态
const loading = ref(false);
// 弹窗相关 // 弹窗相关
const modalVisible = ref(false); const modalVisible = ref(false);
const modalTitle = ref('添加部门'); const modalTitle = ref('添加部门');
@ -97,6 +102,7 @@ const selectedKeys = ref([]);
// 获取部门数据 // 获取部门数据
const fetchDepartments = async () => { const fetchDepartments = async () => {
try { try {
loading.value = true; // 开始加载
const response = await apiRequestGet('/department/allDepartment'); const response = await apiRequestGet('/department/allDepartment');
if (response.data.success) { if (response.data.success) {
@ -125,6 +131,8 @@ const fetchDepartments = async () => {
} }
} catch (error) { } catch (error) {
message.error('请求失败: ' + error.message); message.error('请求失败: ' + error.message);
} finally {
loading.value = false; // 结束加载
} }
}; };
@ -195,11 +203,14 @@ const confirmDelete = (dept) => {
content: `确定要删除部门 ${dept.departmentName} 吗？`, content: `确定要删除部门 ${dept.departmentName} 吗？`,
async onOk() { async onOk() {
try { try {
loading.value = true; // 开始加载
await axios.delete(`http://localhost:8080/api/departments/${dept.key}`); await axios.delete(`http://localhost:8080/api/departments/${dept.key}`);
message.success('删除成功'); message.success('删除成功');
fetchDepartments(); // 刷新数据 fetchDepartments(); // 刷新数据
} catch (error) { } catch (error) {
message.error('删除失败: ' + error.message); message.error('删除失败: ' + error.message);
} finally {
loading.value = false; // 结束加载
} }
}, },
}); });