refactor: 优化字典和系统参数页面的表单处理和抽屉关闭逻辑

- 在 `dictionaries/index.tsx` 中添加 `closeTypeDrawer` 和 `closeItemDrawer` 函数,统一处理抽屉关闭和表单重置
- 在 `sys-params/index.tsx` 中添加 `closeDrawer` 函数,统一处理抽屉关闭和表单重置
- 更新 `dictionaries/index.tsx` 和 `sys-params/index.tsx` 中的相关方法,使用新的关闭函数
- 移除 `PageContainer` 组件,改用 `div` 和 `PageHeader` 组件进行页面布局
dev_na
chenhao 2026-06-22 09:41:03 +08:00
parent 194a05cbe0
commit bdc91f4f8b
2 changed files with 68 additions and 24 deletions

View File

@ -6,7 +6,6 @@ import { createDictItem, createDictType, deleteDictItem, deleteDictType, fetchDi
import { useDict } from "@/hooks/useDict"; import { useDict } from "@/hooks/useDict";
import { usePermission } from "@/hooks/usePermission"; import { usePermission } from "@/hooks/usePermission";
import PageHeader from "@/components/shared/PageHeader"; import PageHeader from "@/components/shared/PageHeader";
import PageContainer from "@/components/shared/PageContainer";
import { getStandardPagination } from "@/utils/pagination"; import { getStandardPagination } from "@/utils/pagination";
import type { SysDictItem, SysDictType } from "@/types"; import type { SysDictItem, SysDictType } from "@/types";
import "./index.less"; import "./index.less";
@ -79,10 +78,17 @@ export default function Dictionaries() {
const handleEditType = (record: SysDictType) => { const handleEditType = (record: SysDictType) => {
setEditingType(record); setEditingType(record);
typeForm.resetFields();
typeForm.setFieldsValue(record); typeForm.setFieldsValue(record);
setTypeDrawerVisible(true); setTypeDrawerVisible(true);
}; };
const closeTypeDrawer = () => {
setTypeDrawerVisible(false);
setEditingType(null);
typeForm.resetFields();
};
const handleDeleteType = async (id: number) => { const handleDeleteType = async (id: number) => {
await deleteDictType(id); await deleteDictType(id);
message.success(t("common.success")); message.success(t("common.success"));
@ -97,7 +103,7 @@ export default function Dictionaries() {
await createDictType(values); await createDictType(values);
} }
message.success(t("common.success")); message.success(t("common.success"));
setTypeDrawerVisible(false); closeTypeDrawer();
loadTypes(); loadTypes();
}; };
@ -127,10 +133,17 @@ export default function Dictionaries() {
const handleEditItem = (record: SysDictItem) => { const handleEditItem = (record: SysDictItem) => {
setEditingItem(record); setEditingItem(record);
itemForm.resetFields();
itemForm.setFieldsValue(record); itemForm.setFieldsValue(record);
setItemDrawerVisible(true); setItemDrawerVisible(true);
}; };
const closeItemDrawer = () => {
setItemDrawerVisible(false);
setEditingItem(null);
itemForm.resetFields();
};
const handleDeleteItem = async (id: number) => { const handleDeleteItem = async (id: number) => {
await deleteDictItem(id); await deleteDictItem(id);
message.success(t("common.success")); message.success(t("common.success"));
@ -145,18 +158,28 @@ export default function Dictionaries() {
await createDictItem(values); await createDictItem(values);
} }
message.success(t("common.success")); message.success(t("common.success"));
setItemDrawerVisible(false); closeItemDrawer();
if (selectedType) loadItems(selectedType.typeCode); if (selectedType) loadItems(selectedType.typeCode);
}; };
return ( return (
<PageContainer <div className="app-page dictionaries-page">
title={t("dicts.title")} <PageHeader title={t("dicts.title")} subtitle={t("dicts.subtitle")}/>
subtitle={t("dicts.subtitle")}
> <Row gutter={24} className="flex-1 min-h-0 overflow-hidden">
<Row gutter={24} style={{ flex: 1, minHeight: 0, overflow: "hidden" }}>
<Col span={8} className="h-full flex flex-col overflow-hidden"> <Col span={8} className="h-full flex flex-col overflow-hidden">
<Card title={<Space><BookOutlined aria-hidden="true" /><span>{t("dicts.dictType")}</span></Space>} className="app-page__panel-card flex-1 flex flex-col overflow-hidden" styles={{ body: { padding: "12px", flex: 1, display: "flex", flexDirection: "column", overflow: "hidden",maxHeight:"calc(100vh - 360px)" } }} extra={can("sys_dict:type:create") && <Button type="primary" size="small" icon={<PlusOutlined aria-hidden="true" />} onClick={handleAddType}>{t("common.create")}</Button>}> <Card title={<Space><BookOutlined aria-hidden="true"/><span>{t("dicts.dictType")}</span></Space>}
className="app-page__panel-card flex-1 flex flex-col overflow-hidden" styles={{
body: {
padding: "12px",
flex: 1,
display: "flex",
flexDirection: "column",
overflow: "hidden"
}
}} extra={can("sys_dict:type:create") &&
<Button type="primary" size="small" icon={<PlusOutlined aria-hidden="true"/>}
onClick={handleAddType}>{t("common.create")}</Button>}>
<div style={{ marginBottom: 12 }} className="flex-shrink-0"> <div style={{ marginBottom: 12 }} className="flex-shrink-0">
<Space.Compact style={{ width: "100%" }}> <Space.Compact style={{ width: "100%" }}>
<Input <Input
@ -251,7 +274,13 @@ export default function Dictionaries() {
</Col> </Col>
</Row> </Row>
<Drawer title={<Space><BookOutlined aria-hidden="true" /><span>{editingType ? t("dicts.drawerTitleTypeEdit") : t("dicts.drawerTitleTypeCreate")}</span></Space>} open={typeDrawerVisible} onClose={() => setTypeDrawerVisible(false)} width={400} destroyOnClose footer={<div className="app-page__drawer-footer"><Button onClick={() => setTypeDrawerVisible(false)}>{t("common.cancel")}</Button><Button type="primary" onClick={handleTypeSubmit}>{t("common.save")}</Button></div>}> <Drawer title={<Space><BookOutlined
aria-hidden="true"/><span>{editingType ? t("dicts.drawerTitleTypeEdit") : t("dicts.drawerTitleTypeCreate")}</span></Space>}
open={typeDrawerVisible} onClose={closeTypeDrawer} width={400} destroyOnClose
footer={<div className="app-page__drawer-footer"><Button
onClick={closeTypeDrawer}>{t("common.cancel")}</Button><Button type="primary"
onClick={handleTypeSubmit}>{t("common.save")}</Button>
</div>}>
<Form form={typeForm} layout="vertical"> <Form form={typeForm} layout="vertical">
<Form.Item label={t("dicts.typeCode")} name="typeCode" rules={[{ required: true, message: t("dicts.typeCode") }]}> <Form.Item label={t("dicts.typeCode")} name="typeCode" rules={[{ required: true, message: t("dicts.typeCode") }]}>
<Input disabled={!!editingType} placeholder={t("dictsExt.typeCodePlaceholder")} /> <Input disabled={!!editingType} placeholder={t("dictsExt.typeCodePlaceholder")} />
@ -265,7 +294,13 @@ export default function Dictionaries() {
</Form> </Form>
</Drawer> </Drawer>
<Drawer title={<Space><ProfileOutlined aria-hidden="true" /><span>{editingItem ? t("dicts.drawerTitleItemEdit") : t("dicts.drawerTitleItemCreate")}</span></Space>} open={itemDrawerVisible} onClose={() => setItemDrawerVisible(false)} width={400} destroyOnClose footer={<div className="app-page__drawer-footer"><Button onClick={() => setItemDrawerVisible(false)}>{t("common.cancel")}</Button><Button type="primary" onClick={handleItemSubmit}>{t("common.save")}</Button></div>}> <Drawer title={<Space><ProfileOutlined
aria-hidden="true"/><span>{editingItem ? t("dicts.drawerTitleItemEdit") : t("dicts.drawerTitleItemCreate")}</span></Space>}
open={itemDrawerVisible} onClose={closeItemDrawer} width={400} destroyOnClose
footer={<div className="app-page__drawer-footer"><Button
onClick={closeItemDrawer}>{t("common.cancel")}</Button><Button type="primary"
onClick={handleItemSubmit}>{t("common.save")}</Button>
</div>}>
<Form form={itemForm} layout="vertical"> <Form form={itemForm} layout="vertical">
<Form.Item label={t("dicts.typeCode")} name="typeCode"><Input disabled className="tabular-nums" /></Form.Item> <Form.Item label={t("dicts.typeCode")} name="typeCode"><Input disabled className="tabular-nums" /></Form.Item>
<Form.Item label={t("dicts.itemLabel")} name="itemLabel" rules={[{ required: true, message: t("dicts.itemLabel") }]}><Input placeholder={t("dictsExt.itemLabelPlaceholder")} /></Form.Item> <Form.Item label={t("dicts.itemLabel")} name="itemLabel" rules={[{ required: true, message: t("dicts.itemLabel") }]}><Input placeholder={t("dictsExt.itemLabelPlaceholder")} /></Form.Item>
@ -275,6 +310,6 @@ export default function Dictionaries() {
<Form.Item label={t("common.remark")} name="remark"><Input.TextArea placeholder={t("dictsExt.itemRemarkPlaceholder")} rows={3} /></Form.Item> <Form.Item label={t("common.remark")} name="remark"><Input.TextArea placeholder={t("dictsExt.itemRemarkPlaceholder")} rows={3} /></Form.Item>
</Form> </Form>
</Drawer> </Drawer>
</PageContainer> </div>
); );
} }

View File

@ -26,7 +26,8 @@ export default function SysParams() {
const [queryParams, setQueryParams] = useState<SysParamQuery>({ pageNum: 1, pageSize: 10 }); const [queryParams, setQueryParams] = useState<SysParamQuery>({ pageNum: 1, pageSize: 10 });
const [drawerOpen, setDrawerOpen] = useState(false); const [drawerOpen, setDrawerOpen] = useState(false);
const [editing, setEditing] = useState<SysParamVO | null>(null); const [editing, setEditing] = useState<SysParamVO | null>(null);
const [form] = Form.useForm(); const [searchForm] = Form.useForm<SysParamQuery>();
const [drawerForm] = Form.useForm<SysParamVO>();
const loadData = useCallback(async (query = queryParams) => { const loadData = useCallback(async (query = queryParams) => {
setLoading(true); setLoading(true);
@ -44,11 +45,12 @@ export default function SysParams() {
}, [loadData]); }, [loadData]);
const handleSearch = (values: any) => { const handleSearch = (values: any) => {
setQueryParams({ ...queryParams, ...values, pageNum: 1 }); setQueryParams({ ...queryParams, ...values, pageNum: 1 });
}; };
const handleReset = () => { const handleReset = () => {
form.resetFields(); searchForm.resetFields();
setQueryParams({ pageNum: 1, pageSize: 10 }); setQueryParams({ pageNum: 1, pageSize: 10 });
}; };
@ -58,17 +60,22 @@ export default function SysParams() {
const openCreate = () => { const openCreate = () => {
setEditing(null); setEditing(null);
form.resetFields(); drawerForm.resetFields();
form.setFieldsValue({ isSystem: 0, status: 1 }); drawerForm.setFieldsValue({isSystem: 0, status: 1});
setDrawerOpen(true); setDrawerOpen(true);
}; };
const openEdit = (record: SysParamVO) => { const openEdit = (record: SysParamVO) => {
setEditing(record); setEditing(record);
form.setFieldsValue(record); drawerForm.resetFields();
drawerForm.setFieldsValue(record);
setDrawerOpen(true); setDrawerOpen(true);
}; };
const closeDrawer = () => {
setDrawerOpen(false);
setEditing(null);
drawerForm.resetFields();
};
const handleDelete = async (id: number) => { const handleDelete = async (id: number) => {
try { try {
await deleteParam(id); await deleteParam(id);
@ -80,7 +87,7 @@ export default function SysParams() {
const submit = async () => { const submit = async () => {
try { try {
const values = await form.validateFields(); const values = await drawerForm.validateFields();
setSaving(true); setSaving(true);
if (editing) { if (editing) {
await updateParam(editing.paramId, values); await updateParam(editing.paramId, values);
@ -88,7 +95,7 @@ export default function SysParams() {
await createParam(values); await createParam(values);
} }
message.success(t("common.success")); message.success(t("common.success"));
setDrawerOpen(false); closeDrawer();
loadData(); loadData();
} finally { } finally {
setSaving(false); setSaving(false);
@ -175,7 +182,7 @@ export default function SysParams() {
</Button> </Button>
} }
toolbar={ toolbar={
<Form layout="inline" onFinish={handleSearch}> <Form form={searchForm} layout="inline" onFinish={handleSearch}>
<Form.Item name="paramKey"> <Form.Item name="paramKey">
<Input placeholder={t("sysParams.paramKey")} prefix={<SearchOutlined />} allowClear style={{ width: 200 }} /> <Input placeholder={t("sysParams.paramKey")} prefix={<SearchOutlined />} allowClear style={{ width: 200 }} />
</Form.Item> </Form.Item>
@ -216,12 +223,14 @@ export default function SysParams() {
<Drawer <Drawer
title={<span><SettingOutlined className="mr-2" />{editing ? t("sysParams.drawerTitleEdit") : t("sysParams.drawerTitleCreate")}</span>} title={<span><SettingOutlined className="mr-2" />{editing ? t("sysParams.drawerTitleEdit") : t("sysParams.drawerTitleCreate")}</span>}
open={drawerOpen} open={drawerOpen}
onClose={() => setDrawerOpen(false)} onClose={closeDrawer}
width={500} width={500}
destroyOnClose destroyOnClose
footer={<div className="app-page__drawer-footer"><Button onClick={() => setDrawerOpen(false)}>{t("common.cancel")}</Button><Button type="primary" loading={saving} onClick={submit}>{t("common.save")}</Button></div>} footer={<div className="app-page__drawer-footer"><Button
onClick={closeDrawer}>{t("common.cancel")}</Button><Button type="primary" loading={saving}
onClick={submit}>{t("common.save")}</Button></div>}
> >
<Form form={form} layout="vertical"> <Form form={drawerForm} layout="vertical">
<Form.Item label={t("sysParams.paramKey")} name="paramKey" rules={[{ required: true, message: t("sysParams.paramKey") }]}> <Form.Item label={t("sysParams.paramKey")} name="paramKey" rules={[{ required: true, message: t("sysParams.paramKey") }]}>
<Input placeholder={t("sysParamsExt.paramKeyPlaceholder")} disabled={!!editing} /> <Input placeholder={t("sysParamsExt.paramKeyPlaceholder")} disabled={!!editing} />
</Form.Item> </Form.Item>