ux: 部门字段统一改为下拉选择(组织架构部门树)

将以下页面的部门输入框从 Input 改为 Select 下拉选择,
数据源为组织架构部门树(带层级缩进):

1. roster/modals.tsx - RehireModal 重新入职弹窗
2. roster/modals.tsx - AddEmployeeModal 添加员工弹窗
3. roster/BasicInfo.tsx - 编辑员工基本信息
4. Contracts.tsx - 合同管理新增员工弹窗

下拉选项从 /departments 接口获取,按树形结构展示,
提交时传部门名称字符串(保持后端兼容)。

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
selfrelease
2026-08-16 09:23:24 +08:00
parent 9a826c16b0
commit dd0e84a219
3 changed files with 73 additions and 4 deletions
+17 -1
View File
@@ -5,6 +5,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
import { attachmentApi, employeeApi, socialInsuranceApi } from '../../lib/api-services'
import { useConfirm } from '../../hooks/useConfirm'
import { copyToClipboard } from '../../lib/clipboard'
import api from '../../lib/api'
import Card from "../../components/ui/Card"
import Button from "../../components/ui/Button"
import { Input, Label, Select } from "../../components/ui/Input"
@@ -58,6 +59,21 @@ export default function BasicInfo({ profile, employeeId, attachments }: { profil
return `${(bytes / 1024 / 1024).toFixed(1)}MB`
}
// 拉取组织架构部门列表,用于部门下拉选择
const { data: departments = [] } = useQuery({
queryKey: ['departments'],
queryFn: () => api.get('/departments').then(r => r.data),
})
// 构建部门树形下拉选项(带层级缩进)
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)
})
}
buildDeptOptions(departments, null, 0)
const [form, setForm] = useState({
department: profile.department || '',
position: profile.position || '',
@@ -346,7 +362,7 @@ export default function BasicInfo({ profile, employeeId, attachments }: { profil
<div className="grid md:grid-cols-2 gap-3">
<div><Label></Label><Input value={profile.name} disabled /></div>
<div><Label></Label><Input value={profile.idCardNumber || ''} disabled /></div>
<div><Label></Label><Input value={form.department} onChange={(e) => setForm({ ...form, department: e.target.value })} /></div>
<div><Label></Label><Select value={form.department} onChange={(e) => setForm({ ...form, department: e.target.value })}><option value=""></option>{deptOptions.map(d => <option key={d.id} value={d.label}>{' '.repeat(d.level)}{d.label}</option>)}</Select></div>
<div><Label></Label><Select value={form.gender} onChange={(e) => setForm({ ...form, gender: e.target.value as '男' | '女' })}><option value="男"></option><option value="女"></option></Select></div>
{form.gender === '女' && (
<div><Label></Label><Select value={form.femaleWorkerType} onChange={(e) => setForm({ ...form, femaleWorkerType: e.target.value as '' | 'CADRE' | 'WORKER' })}><option value=""></option><option value="CADRE">/</option><option value="WORKER">/</option></Select></div>