import { useCallback, useEffect, useMemo, useState } from 'react';
|
import { ProFormSelect, ProFormTreeSelect } from '@ant-design/pro-components';
|
import {
|
App as AntdApp,
|
Button,
|
Drawer,
|
Form,
|
Input,
|
InputNumber,
|
Select,
|
Space,
|
} from 'antd';
|
import { createOrg, getLeaderDetail, getLeaderOptions, updateOrg } from '../service';
|
import type { DepartmentFormValues, OrgVO } from '../types';
|
import { toOrgTreeSelectData } from '../utils';
|
|
interface DepartmentFormDrawerProps {
|
open: boolean;
|
mode: 'create' | 'edit';
|
/** 编辑对象；新增时为空。 */
|
record: OrgVO | null;
|
/** 新增子部门时的上级组织 ID。 */
|
parentId?: number;
|
/** 组织树，用于上级组织选择。 */
|
orgTree: OrgVO[];
|
onClose: () => void;
|
onSuccess: () => void;
|
}
|
|
const DepartmentFormDrawer = ({
|
open,
|
mode,
|
record,
|
parentId,
|
orgTree,
|
onClose,
|
onSuccess,
|
}: DepartmentFormDrawerProps) => {
|
const [form] = Form.useForm<DepartmentFormValues>();
|
const [submitting, setSubmitting] = useState(false);
|
const { message } = AntdApp.useApp();
|
const isEdit = mode === 'edit';
|
/** 新增入口只有「新增子部门」，上级组织已确定，不允许再选择。 */
|
const parentDisabled = !isEdit;
|
|
const parentOptions = useMemo(
|
() => toOrgTreeSelectData(orgTree, isEdit ? record?.id : undefined),
|
[isEdit, orgTree, record],
|
);
|
|
/** 负责人远程搜索：按姓名 / 手机号模糊查询员工。 */
|
const requestLeaderOptions = useCallback(
|
async ({ keyWords }: { keyWords?: string }) => {
|
const keyword = keyWords?.trim();
|
const result = await getLeaderOptions({
|
page: 1,
|
size: 50,
|
keyword: keyword || undefined,
|
});
|
const options = (result.records ?? []).map((employee) => ({
|
label: employee.name,
|
value: employee.id,
|
}));
|
|
// 编辑时把当前负责人补进首屏选项，避免回填后显示为员工 ID。
|
const currentLeaderId = isEdit ? record?.leaderId : undefined;
|
if (
|
!keyword &&
|
currentLeaderId &&
|
!options.some((option) => option.value === currentLeaderId)
|
) {
|
try {
|
const leader = await getLeaderDetail({ id: currentLeaderId });
|
options.unshift({ label: leader.name, value: leader.id });
|
} catch {
|
// 错误已由 request 统一提示
|
}
|
}
|
|
return options;
|
},
|
[isEdit, record],
|
);
|
|
useEffect(() => {
|
if (!open) return;
|
|
form.resetFields();
|
form.setFieldsValue(
|
isEdit && record
|
? {
|
orgName: record.orgName,
|
orgType: record.orgType ?? 'DEPT',
|
parentId: record.parentId ?? undefined,
|
leaderId: record.leaderId ?? undefined,
|
region: record.region,
|
sortOrder: record.sortOrder,
|
}
|
: {
|
orgType: 'DEPT',
|
parentId,
|
},
|
);
|
}, [form, isEdit, open, parentId, record]);
|
|
const handleSubmit = useCallback(async () => {
|
let values: DepartmentFormValues;
|
try {
|
values = await form.validateFields();
|
} catch {
|
return;
|
}
|
|
setSubmitting(true);
|
|
try {
|
if (isEdit && record) {
|
await updateOrg({ id: record.id, ...values });
|
message.success('部门已更新');
|
} else {
|
await createOrg(values);
|
message.success('部门创建成功');
|
}
|
|
onSuccess();
|
} catch {
|
// 错误已由 request 统一提示
|
} finally {
|
setSubmitting(false);
|
}
|
}, [form, isEdit, message, onSuccess, record]);
|
|
const title = isEdit ? '编辑部门' : '新增子部门';
|
|
return (
|
<Drawer
|
title={title}
|
width={420}
|
open={open}
|
forceRender
|
onClose={onClose}
|
footer={
|
<Space style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
<Button onClick={onClose}>取消</Button>
|
<Button type="primary" loading={submitting} onClick={handleSubmit}>
|
{isEdit ? '保存' : '创建'}
|
</Button>
|
</Space>
|
}
|
>
|
<Form form={form} layout="vertical" preserve={false}>
|
<Form.Item
|
name="orgName"
|
label="部门名称"
|
rules={[{ required: true, whitespace: true, message: '请输入部门名称' }]}
|
>
|
<Input placeholder="请输入部门名称" maxLength={50} />
|
</Form.Item>
|
<Form.Item
|
name="orgType"
|
label="组织类型"
|
rules={[{ required: true, message: '请选择组织类型' }]}
|
>
|
<Select
|
placeholder="请选择组织类型"
|
options={[
|
{ label: '总部', value: 'HQ' },
|
{ label: '分公司', value: 'BRANCH' },
|
{ label: '经销商', value: 'DEALER' },
|
{ label: '代理商', value: 'AGENT' },
|
{ label: '部门', value: 'DEPT' },
|
{ label: '团队', value: 'TEAM' },
|
]}
|
/>
|
</Form.Item>
|
<ProFormTreeSelect
|
name="parentId"
|
label="上级组织"
|
placeholder="不选则作为根组织"
|
disabled={parentDisabled}
|
fieldProps={{
|
treeData: parentOptions,
|
treeDefaultExpandAll: true,
|
allowClear: true,
|
showSearch: true,
|
treeNodeFilterProp: 'title',
|
style: { width: '100%' },
|
}}
|
/>
|
<ProFormSelect
|
name="leaderId"
|
label="负责人"
|
rules={isEdit ? undefined : [{ required: true, message: '请选择负责人' }]}
|
placeholder="请输入姓名搜索负责人"
|
showSearch
|
allowClear
|
debounceTime={300}
|
request={requestLeaderOptions}
|
fieldProps={{ filterOption: false, style: { width: '100%' } }}
|
/>
|
<Form.Item name="region" label="所在地区">
|
<Input placeholder="请输入所在地区" maxLength={50} />
|
</Form.Item>
|
<Form.Item name="sortOrder" label="同级排序">
|
<InputNumber
|
min={0}
|
precision={0}
|
placeholder="数字越小越靠前"
|
style={{ width: '100%' }}
|
/>
|
</Form.Item>
|
</Form>
|
</Drawer>
|
);
|
};
|
|
export default DepartmentFormDrawer;
|
