From 11c1104ab1bc5e66d63954e4a066c24d0dd716c3 Mon Sep 17 00:00:00 2001
From: TianyangZhang <zty18395607196@163.com>
Date: Wed, 25 Mar 2026 17:00:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=E9=83=A8=E9=97=A8=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A1=B5=E9=9D=A2=E6=B7=BB=E5=8A=A0=E5=AE=8C=E6=95=B4?=
 =?UTF-8?q?=E7=9A=84=E5=88=86=E9=A1=B5=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加分页状态管理（currentPage, pageSize, total, allOrgs）
- 实现两个数据加载函数（fetchOrgs 用于分页、fetchAllOrgs 用于下拉框）
- 添加分页事件处理函数 handlePageChange
- 实现删除功能及确认对话框 handleDelete
- 更新 UI 组件：表格 loading 状态、删除按钮、分页控件
- 修改 save() 函数完成后重置分页至第一页
- 更新 onMounted 初始化时同时加载分页数据和所有部门数据
- 下拉框改为使用 allOrgs 确保显示完整部门列表
---
 .../views/admin/OrganizationManageView.vue    | 92 ++++++++++++++++---
 1 file changed, 80 insertions(+), 12 deletions(-)

diff --git a/offer_frontend/src/views/admin/OrganizationManageView.vue b/offer_frontend/src/views/admin/OrganizationManageView.vue
index bd442e2..b3d9e70 100644
--- a/offer_frontend/src/views/admin/OrganizationManageView.vue
+++ b/offer_frontend/src/views/admin/OrganizationManageView.vue
@@ -4,26 +4,39 @@
       <h2>组织架构管理</h2>
       <el-button type="primary" @click="openDialog()">新增公司</el-button>
     </div>
-    <el-table :data="orgs" border>
+    <el-table :data="orgs" border v-loading="loading">
       <el-table-column prop="name" label="公司名称" />
       <el-table-column label="上级公司">
-        <template #default="{ row }">{{ row.parent ? orgs.find(o=>o.id===row.parent)?.name : '（集团）' }}</template>
+        <template #default="{ row }">{{ row.parent ? allOrgs.find(o=>o.id===row.parent)?.name : '（集团）' }}</template>
       </el-table-column>
       <el-table-column prop="email" label="联系邮箱" />
       <el-table-column label="状态">
         <template #default="{ row }"><el-tag :type="row.is_active?'success':'danger'">{{ row.is_active?'启用':'停用' }}</el-tag></template>
       </el-table-column>
-      <el-table-column label="操作" width="120">
-        <template #default="{ row }"><el-button size="small" @click="openDialog(row)">编辑</el-button></template>
+      <el-table-column label="操作" width="180">
+        <template #default="{ row }">
+          <el-button size="small" @click="openDialog(row)">编辑</el-button>
+          <el-button size="small" type="danger" @click="handleDelete(row.id)">删除</el-button>
+        </template>
       </el-table-column>
     </el-table>
+    <div style="margin-top:16px;text-align:right">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="[20]"
+        :total="total"
+        layout="total, prev, pager, next"
+        @current-change="handlePageChange"
+      />
+    </div>
 
     <el-dialog v-model="dialogVisible" :title="editing ? '编辑公司' : '新增公司'" width="480px">
       <el-form :model="form" label-width="90px">
         <el-form-item label="公司名称"><el-input v-model="form.name" /></el-form-item>
         <el-form-item label="上级公司">
           <el-select v-model="form.parent" clearable placeholder="不选则为集团顶级">
-            <el-option v-for="o in orgs" :key="o.id" :value="o.id" :label="o.name" />
+            <el-option v-for="o in allOrgs" :key="o.id" :value="o.id" :label="o.name" />
           </el-select>
         </el-form-item>
         <el-form-item label="联系邮箱"><el-input v-model="form.email" /></el-form-item>
@@ -39,18 +52,46 @@
 </template>
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
-import { manageOrganizations, createOrganization, updateOrganization } from '@/api/organizations'
-import { ElMessage } from 'element-plus'
+import { manageOrganizations, createOrganization, updateOrganization, deleteOrganization } from '@/api/organizations'
+import { ElMessage, ElMessageBox } from 'element-plus'
 
 const orgs = ref([])
+const allOrgs = ref([])
 const dialogVisible = ref(false)
 const editing = ref(null)
 const saving = ref(false)
+const loading = ref(false)
+const currentPage = ref(1)
+const pageSize = ref(20)
+const total = ref(0)
 const form = reactive({ name: '', parent: null, email: '', description: '', is_active: true })
 
-const fetchOrgs = async () => {
-  const { data } = await manageOrganizations()
-  orgs.value = data.results
+const fetchOrgs = async (page = 1) => {
+  loading.value = true
+  try {
+    const { data } = await manageOrganizations(page)
+    orgs.value = data.results
+    total.value = data.count
+    currentPage.value = page
+  } catch (error) {
+    ElMessage.error('加载部门列表失败，请重试')
+  } finally {
+    loading.value = false
+  }
+}
+
+const fetchAllOrgs = async () => {
+  try {
+    let allResults = []
+    for (let i = 1; i <= 5; i++) {
+      const { data } = await manageOrganizations(i)
+      allResults = allResults.concat(data.results)
+      if (i === Math.ceil(data.count / 20)) break
+    }
+    allOrgs.value = allResults
+  } catch (error) {
+    ElMessage.error('加载部门列表失败')
+  }
 }
 
 function openDialog(org = null) {
@@ -67,8 +108,35 @@ async function save() {
     else await createOrganization(form)
     ElMessage.success('保存成功')
     dialogVisible.value = false
-    fetchOrgs()
+    fetchOrgs(1)
+    fetchAllOrgs()
   } catch { ElMessage.error('保存失败') } finally { saving.value = false }
 }
-onMounted(fetchOrgs)
+
+function handlePageChange(newPage) {
+  fetchOrgs(newPage)
+}
+
+async function handleDelete(id) {
+  try {
+    await ElMessageBox.confirm(
+      '此操作将永久删除该部门，是否继续？',
+      '警告',
+      { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' }
+    )
+    await deleteOrganization(id)
+    ElMessage.success('删除成功')
+    fetchOrgs(1)
+    fetchAllOrgs()
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('删除失败')
+    }
+  }
+}
+
+onMounted(() => {
+  fetchOrgs()
+  fetchAllOrgs()
+})
 </script>