import { useCallback, useEffect, useMemo, useState } from 'react';
|
import {
|
App as AntdApp,
|
Button,
|
Drawer,
|
Form,
|
Input,
|
InputNumber,
|
Select,
|
Space,
|
TreeSelect,
|
} from 'antd';
|
import { createOrg, updateOrg } from '../server';
|
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[];
|
/** 负责人员工下拉选项。 */
|
leaderOptions: { label: string; value: number }[];
|
onClose: () => void;
|
onSuccess: () => void;
|
}
|
|
const DepartmentFormDrawer = ({
|
open,
|
mode,
|
record,
|
parentId,
|
orgTree,
|
leaderOptions,
|
onClose,
|
onSuccess,
|
}: DepartmentFormDrawerProps) => {
|
const [form] = Form.useForm<DepartmentFormValues>();
|
const [submitting, setSubmitting] = useState(false);
|
const { message } = AntdApp.useApp();
|
const isEdit = mode === 'edit';
|
|
const parentOptions = useMemo(
|
() => toOrgTreeSelectData(orgTree, isEdit ? record?.id : undefined),
|
[isEdit, orgTree, 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 ? '编辑部门' : parentId ? '新增子部门' : '新增部门';
|
|
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>
|
<Form.Item name="parentId" label="上级组织">
|
<TreeSelect
|
treeData={parentOptions}
|
treeDefaultExpandAll
|
allowClear
|
showSearch
|
treeNodeFilterProp="title"
|
placeholder="不选则作为根组织"
|
style={{ width: '100%' }}
|
/>
|
</Form.Item>
|
<Form.Item name="leaderId" label="负责人">
|
<Select
|
options={leaderOptions}
|
showSearch
|
optionFilterProp="label"
|
allowClear
|
placeholder="请选择负责人"
|
/>
|
</Form.Item>
|
<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;
|
