From 1c5fde0b036c154d2257738125119ff2403ff01c Mon Sep 17 00:00:00 2001
From: freedakgmail <freedak.gemini@gmail.com>
Date: Tue, 18 Aug 2026 22:14:17 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=BB=84=E7=BB=87=E6=9E=B6=E6=9E=84?=
 =?UTF-8?q?=E9=83=A8=E9=97=A8=E4=B8=8B=E6=8B=89=E6=94=B9=E4=B8=BA=E8=8A=B1?=
 =?UTF-8?q?=E5=90=8D=E5=86=8C=E7=9B=B8=E5=90=8C=E7=9A=84=E6=A0=91=E5=BD=A2?=
 =?UTF-8?q?=E7=BC=A9=E8=BF=9B=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用 buildDeptOptions 递归构建树形选项
- 用全角空格 '　'.repeat(level) 实现层级缩进
- 与花名册员工详情编辑的部门下拉保持一致
---
 frontend/src/pages/OrgChart.tsx | 62 ++++++++++-----------------------
 1 file changed, 19 insertions(+), 43 deletions(-)

diff --git a/frontend/src/pages/OrgChart.tsx b/frontend/src/pages/OrgChart.tsx
index d432f83..2a4e094 100644
--- a/frontend/src/pages/OrgChart.tsx
+++ b/frontend/src/pages/OrgChart.tsx
@@ -51,27 +51,15 @@ export default function OrgChart() {
     onError: (err: any) => toast.error(err?.response?.data?.error?.message || '删除失败'),
   })
 
-  // 构建部门层级路径映射，如 "总公司 / 技术部 / 前端组"
-  const buildDeptPath = (departments: any[]): Record<string, string> => {
-    const map: Record<string, string> = {}
-    const byId: Record<string, any> = {}
-    departments.forEach(d => { byId[d.id] = d })
-    const getPath = (d: any): string => {
-      if (map[d.id]) return map[d.id]
-      const parts: string[] = [d.name]
-      let cur = d
-      while (cur.parentId && byId[cur.parentId]) {
-        cur = byId[cur.parentId]
-        parts.unshift(cur.name)
-      }
-      const path = parts.join(' / ')
-      map[d.id] = path
-      return path
-    }
-    departments.forEach(d => getPath(d))
-    return map
+  // 构建部门树形下拉选项（带层级缩进）
+  const deptOptions: { id: string; label: string; level: number }[] = []
+  const buildDeptOptions = (items: any[], parentId: string | null, level: number) => {
+    items.filter(d => d.parentId === parentId).sort((a, b) => a.sortOrder - b.sortOrder).forEach(d => {
+      deptOptions.push({ id: d.id, label: d.name, level })
+      buildDeptOptions(items, d.id, level + 1)
+    })
   }
-  const deptPathMap = buildDeptPath(departments)
+  buildDeptOptions(departments, null, 0)
 
   const toggleExpand = (id: string) => {
     setExpanded(prev => {
@@ -202,9 +190,9 @@ export default function OrgChart() {
             <div>
               <Label>上级部门</Label>
               <Select value={form.parentId} onChange={(e) => setForm({ ...form, parentId: e.target.value })}>
-                {departments.filter((d: any) => d.id !== editing?.id).sort((a: any, b: any) => (deptPathMap[a.id] || a.name).localeCompare(deptPathMap[b.id] || b.name)).map((d: any) => (
+                {deptOptions.filter(d => d.id !== editing?.id).map(d => (
                   <option key={d.id} value={d.id}>
-                    {d.level === 0 && !d.parentId ? `${d.name}（公司）` : deptPathMap[d.id] || d.name}
+                    {'　'.repeat(d.level)}{d.label}
                   </option>
                 ))}
               </Select>
@@ -237,27 +225,15 @@ function PositionTab({ positions, departments }: { positions: any[]; departments
   const [editing, setEditing] = useState<any>(null)
   const [form, setForm] = useState<any>({ name: '', departmentId: '', headcount: 0, level: '', description: '' })
 
-  // 构建部门层级路径
-  const buildDeptPath = (depts: any[]): Record<string, string> => {
-    const map: Record<string, string> = {}
-    const byId: Record<string, any> = {}
-    depts.forEach(d => { byId[d.id] = d })
-    const getPath = (d: any): string => {
-      if (map[d.id]) return map[d.id]
-      const parts: string[] = [d.name]
-      let cur = d
-      while (cur.parentId && byId[cur.parentId]) {
-        cur = byId[cur.parentId]
-        parts.unshift(cur.name)
-      }
-      const path = parts.join(' / ')
-      map[d.id] = path
-      return path
-    }
-    depts.forEach(d => getPath(d))
-    return map
+  // 构建部门树形下拉选项（带层级缩进）
+  const deptOptions: { id: string; label: string; level: number }[] = []
+  const buildDeptOptions = (items: any[], parentId: string | null, level: number) => {
+    items.filter(d => d.parentId === parentId).sort((a, b) => a.sortOrder - b.sortOrder).forEach(d => {
+      deptOptions.push({ id: d.id, label: d.name, level })
+      buildDeptOptions(items, d.id, level + 1)
+    })
   }
-  const deptPathMap = buildDeptPath(departments)
+  buildDeptOptions(departments, null, 0)
 
   const createMutation = useMutation({
     mutationFn: (data: any) => editing ? api.put(`/positions/${editing.id}`, data) : api.post('/positions', data),
@@ -332,7 +308,7 @@ function PositionTab({ positions, departments }: { positions: any[]; departments
               <Label>所属部门</Label>
               <Select value={form.departmentId} onChange={(e) => setForm({ ...form, departmentId: e.target.value })}>
                 <option value="">无</option>
-                {departments.sort((a: any, b: any) => (deptPathMap[a.id] || a.name).localeCompare(deptPathMap[b.id] || b.name)).map(d => <option key={d.id} value={d.id}>{deptPathMap[d.id] || d.name}</option>)}
+                {deptOptions.map(d => <option key={d.id} value={d.id}>{'　'.repeat(d.level)}{d.label}</option>)}
               </Select>
             </div>
             <div className="grid grid-cols-2 gap-3">