368 lines
10 KiB
TypeScript
368 lines
10 KiB
TypeScript
import {
|
|
Button,
|
|
Drawer,
|
|
Form,
|
|
Input,
|
|
message,
|
|
Popconfirm,
|
|
Select,
|
|
Space,
|
|
Table,
|
|
Tag,
|
|
Typography,
|
|
Card,
|
|
Switch,
|
|
Tooltip,
|
|
Row,
|
|
Col
|
|
} from "antd";
|
|
import { useEffect, useState, useCallback } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import {
|
|
pageParams,
|
|
createParam,
|
|
updateParam,
|
|
deleteParam
|
|
} from "../api";
|
|
import { usePermission } from "../hooks/usePermission";
|
|
import { useDict } from "../hooks/useDict";
|
|
import {
|
|
PlusOutlined,
|
|
EditOutlined,
|
|
DeleteOutlined,
|
|
SearchOutlined,
|
|
ReloadOutlined,
|
|
SettingOutlined,
|
|
InfoCircleOutlined
|
|
} from "@ant-design/icons";
|
|
import type { SysParamVO, SysParamQuery } from "../types";
|
|
import PageHeader from "../components/shared/PageHeader";
|
|
import "./SysParams.css";
|
|
|
|
const { Title, Text } = Typography;
|
|
|
|
export default function SysParams() {
|
|
const { t } = useTranslation();
|
|
const { can } = usePermission();
|
|
|
|
// Dictionaries
|
|
const { items: statusDict } = useDict("sys_common_status");
|
|
const { items: paramTypeDict } = useDict("sys_param_type");
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
const [saving, setSaving] = useState(false);
|
|
const [data, setData] = useState<SysParamVO[]>([]);
|
|
const [total, setTotal] = useState(0);
|
|
|
|
const [queryParams, setQueryParams] = useState<SysParamQuery>({
|
|
pageNum: 1,
|
|
pageSize: 10
|
|
});
|
|
|
|
// Drawer state
|
|
const [drawerOpen, setDrawerOpen] = useState(false);
|
|
const [editing, setEditing] = useState<SysParamVO | null>(null);
|
|
const [form] = Form.useForm();
|
|
|
|
const loadData = useCallback(async (query = queryParams) => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await pageParams(query);
|
|
setData(res.records || []);
|
|
setTotal(res.total || 0);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [queryParams]);
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
}, [loadData]);
|
|
|
|
const handleSearch = (values: any) => {
|
|
const newQuery = { ...queryParams, ...values, pageNum: 1 };
|
|
setQueryParams(newQuery);
|
|
};
|
|
|
|
const handleReset = () => {
|
|
form.resetFields();
|
|
const newQuery = { pageNum: 1, pageSize: 10 };
|
|
setQueryParams(newQuery);
|
|
};
|
|
|
|
const handlePageChange = (page: number, pageSize: number) => {
|
|
setQueryParams(prev => ({ ...prev, pageNum: page, pageSize }));
|
|
};
|
|
|
|
const openCreate = () => {
|
|
setEditing(null);
|
|
form.resetFields();
|
|
form.setFieldsValue({ isSystem: false, status: 1 });
|
|
setDrawerOpen(true);
|
|
};
|
|
|
|
const openEdit = (record: SysParamVO) => {
|
|
setEditing(record);
|
|
form.setFieldsValue(record);
|
|
setDrawerOpen(true);
|
|
};
|
|
|
|
const handleDelete = async (id: number) => {
|
|
try {
|
|
await deleteParam(id);
|
|
message.success(t('common.success'));
|
|
loadData();
|
|
} catch (e) {
|
|
// Handled by global interceptor
|
|
}
|
|
};
|
|
|
|
const submit = async () => {
|
|
try {
|
|
const values = await form.validateFields();
|
|
setSaving(true);
|
|
|
|
if (editing) {
|
|
await updateParam(editing.paramId, values);
|
|
} else {
|
|
await createParam(values);
|
|
}
|
|
|
|
message.success(t('common.success'));
|
|
setDrawerOpen(false);
|
|
loadData();
|
|
} catch (e) {
|
|
// Form validation errors or API errors
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const columns = [
|
|
{
|
|
title: t('sysParams.paramKey'),
|
|
dataIndex: "paramKey",
|
|
key: "paramKey",
|
|
render: (text: string, record: SysParamVO) => (
|
|
<Space direction="vertical" size={0}>
|
|
<Text className="param-key-text">{text}</Text>
|
|
{record.isSystem === 1 && (
|
|
<Tag color="orange" size={0} style={{ fontSize: 10, marginTop: 2, padding: '0 4px' }}>
|
|
{t('sysParams.isSystem')}
|
|
</Tag>
|
|
)}
|
|
</Space>
|
|
),
|
|
},
|
|
{
|
|
title: t('sysParams.paramValue'),
|
|
dataIndex: "paramValue",
|
|
key: "paramValue",
|
|
ellipsis: true,
|
|
render: (text: string) => (
|
|
<Tooltip title={text}>
|
|
<Text code>{text}</Text>
|
|
</Tooltip>
|
|
),
|
|
},
|
|
{
|
|
title: t('sysParams.paramType'),
|
|
dataIndex: "paramType",
|
|
key: "paramType",
|
|
width: 120,
|
|
render: (type: string) => <Tag className="param-type-tag">{type || 'DEFAULT'}</Tag>
|
|
},
|
|
{
|
|
title: t('sysParams.description'),
|
|
dataIndex: "description",
|
|
key: "description",
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: t('common.status'),
|
|
dataIndex: "status",
|
|
width: 80,
|
|
render: (status: number) => {
|
|
const item = statusDict.find(i => i.itemValue === String(status));
|
|
return (
|
|
<Tag color={status === 1 ? "green" : "red"}>
|
|
{item ? item.itemLabel : (status === 1 ? "正常" : "禁用")}
|
|
</Tag>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: t('common.action'),
|
|
key: "action",
|
|
width: 110,
|
|
fixed: "right" as const,
|
|
render: (_: any, record: SysParamVO) => (
|
|
<Space>
|
|
{can("sys_param:update") && (
|
|
<Button
|
|
type="text"
|
|
icon={<EditOutlined />}
|
|
onClick={() => openEdit(record)}
|
|
/>
|
|
)}
|
|
{can("sys_param:delete") && record.isSystem !== 1 && (
|
|
<Popconfirm title="确定删除该参数吗？" onConfirm={() => handleDelete(record.paramId)}>
|
|
<Button type="text" danger icon={<DeleteOutlined />} />
|
|
</Popconfirm>
|
|
)}
|
|
</Space>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="sys-params-page p-6">
|
|
<PageHeader
|
|
title={t('sysParams.title')}
|
|
subtitle={t('sysParams.subtitle')}
|
|
extra={can("sys_param:create") && (
|
|
<Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
|
|
{t('common.create')}
|
|
</Button>
|
|
)}
|
|
/>
|
|
|
|
<Card className="sys-params-table-card shadow-sm mb-4">
|
|
<Form
|
|
layout="inline"
|
|
onFinish={handleSearch}
|
|
className="mb-4"
|
|
>
|
|
<Form.Item name="paramKey">
|
|
<Input
|
|
placeholder={t('sysParams.paramKey')}
|
|
prefix={<SearchOutlined />}
|
|
allowClear
|
|
style={{ width: 200 }}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item name="paramType">
|
|
<Select
|
|
placeholder={t('sysParams.paramType')}
|
|
allowClear
|
|
style={{ width: 150 }}
|
|
options={paramTypeDict.map(i => ({ label: i.itemLabel, value: i.itemValue }))}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item>
|
|
<Space>
|
|
<Button type="primary" htmlType="submit">
|
|
{t('common.search')}
|
|
</Button>
|
|
<Button onClick={handleReset}>
|
|
{t('common.reset')}
|
|
</Button>
|
|
</Space>
|
|
</Form.Item>
|
|
</Form>
|
|
|
|
<Table
|
|
rowKey="paramId"
|
|
columns={columns}
|
|
dataSource={data}
|
|
loading={loading}
|
|
size="middle"
|
|
pagination={{
|
|
current: queryParams.pageNum,
|
|
pageSize: queryParams.pageSize,
|
|
total: total,
|
|
showTotal: (tTotal) => t('common.total', { total: tTotal }),
|
|
onChange: handlePageChange,
|
|
showSizeChanger: true,
|
|
}}
|
|
/>
|
|
</Card>
|
|
|
|
<Drawer
|
|
title={
|
|
<span>
|
|
<SettingOutlined className="mr-2" />
|
|
{editing ? t('sysParams.drawerTitleEdit') : t('sysParams.drawerTitleCreate')}
|
|
</span>
|
|
}
|
|
open={drawerOpen}
|
|
onClose={() => setDrawerOpen(false)}
|
|
width={500}
|
|
destroyOnClose
|
|
footer={
|
|
<div className="flex justify-end gap-2 p-2">
|
|
<Button onClick={() => setDrawerOpen(false)}>{t('common.cancel')}</Button>
|
|
<Button type="primary" loading={saving} onClick={submit}>
|
|
{t('common.save')}
|
|
</Button>
|
|
</div>
|
|
}
|
|
>
|
|
<Form form={form} layout="vertical">
|
|
<Form.Item
|
|
label={t('sysParams.paramKey')}
|
|
name="paramKey"
|
|
rules={[{ required: true, message: t('sysParams.paramKey') }]}
|
|
>
|
|
<Input placeholder="sys.config.example" disabled={!!editing} />
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
label={t('sysParams.paramValue')}
|
|
name="paramValue"
|
|
rules={[{ required: true, message: t('sysParams.paramValue') }]}
|
|
>
|
|
<Input.TextArea rows={4} placeholder="Enter parameter value" />
|
|
</Form.Item>
|
|
|
|
<Row gutter={16}>
|
|
<Col span={12}>
|
|
<Form.Item
|
|
label={t('sysParams.paramType')}
|
|
name="paramType"
|
|
rules={[{ required: true, message: t('sysParams.paramType') }]}
|
|
>
|
|
<Select
|
|
options={paramTypeDict.map(i => ({ label: i.itemLabel, value: i.itemValue }))}
|
|
/>
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Form.Item
|
|
label={t('common.status')}
|
|
name="status"
|
|
initialValue={1}
|
|
>
|
|
<Select
|
|
options={statusDict.map(i => ({ label: i.itemLabel, value: Number(i.itemValue) }))}
|
|
/>
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
|
|
<Form.Item
|
|
label={
|
|
<Space>
|
|
{t('sysParams.isSystem')}
|
|
<Tooltip title="系统参数通常禁止删除，由开发者在代码中使用">
|
|
<InfoCircleOutlined style={{ color: '#8c8c8c' }} />
|
|
</Tooltip>
|
|
</Space>
|
|
}
|
|
name="isSystem"
|
|
valuePropName="checked"
|
|
getValueProps={(value) => ({ checked: value === 1 })}
|
|
getValueFromEvent={(checked) => (checked ? 1 : 0)}
|
|
>
|
|
<Switch />
|
|
</Form.Item>
|
|
|
|
<Form.Item label={t('sysParams.description')} name="description">
|
|
<Input.TextArea rows={3} placeholder="Describe the purpose of this parameter" />
|
|
</Form.Item>
|
|
</Form>
|
|
</Drawer>
|
|
</div>
|
|
);
|
|
}
|