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

src/typings/components.d.ts

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

src/views/department/index.vue

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