230 lines
9.2 KiB
TypeScript
230 lines
9.2 KiB
TypeScript
import { Button, Card, Col, Drawer, Form, Input, Popconfirm, Row, Select, Space, Switch, Table, Tag, Tooltip, Typography, App } from 'antd';
|
|
import { useCallback, useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { DeleteOutlined, EditOutlined, InfoCircleOutlined, PlusOutlined, SearchOutlined, SettingOutlined } from "@ant-design/icons";
|
|
import { createParam, deleteParam, pageParams, updateParam } from "@/api";
|
|
import { useDict } from "@/hooks/useDict";
|
|
import { usePermission } from "@/hooks/usePermission";
|
|
import PageHeader from "@/components/shared/PageHeader";
|
|
import { getStandardPagination } from "@/utils/pagination";
|
|
import type { SysParamQuery, SysParamVO } from "@/types";
|
|
import "./index.less";
|
|
|
|
const { Text } = Typography;
|
|
|
|
export default function SysParams() {
|
|
const { message } = App.useApp();
|
|
const { t } = useTranslation();
|
|
const { can } = usePermission();
|
|
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 });
|
|
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 response = await pageParams(query);
|
|
setData(response.records || []);
|
|
setTotal(response.total || 0);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [queryParams]);
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
}, [loadData]);
|
|
|
|
const handleSearch = (values: any) => {
|
|
setQueryParams({ ...queryParams, ...values, pageNum: 1 });
|
|
};
|
|
|
|
const handleReset = () => {
|
|
form.resetFields();
|
|
setQueryParams({ pageNum: 1, pageSize: 10 });
|
|
};
|
|
|
|
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 {
|
|
}
|
|
};
|
|
|
|
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();
|
|
} 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" 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 || t("sysParamsExt.defaultType")}</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((dictItem) => dictItem.itemValue === String(status));
|
|
return <Tag color={status === 1 ? "green" : "red"}>{item ? item.itemLabel : status === 1 ? t("sysParamsExt.enabled") : t("sysParamsExt.disabled")}</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={t("sysParamsExt.deleteConfirm")} okText={t("common.confirm")} cancelText={t("common.cancel")} onConfirm={() => handleDelete(record.paramId)}>
|
|
<Button type="text" danger icon={<DeleteOutlined />} />
|
|
</Popconfirm>
|
|
)}
|
|
</Space>
|
|
)
|
|
}
|
|
];
|
|
|
|
return (
|
|
<div className="app-page sys-params-page">
|
|
<PageHeader title={t("sysParams.title")} subtitle={t("sysParams.subtitle")} />
|
|
|
|
<Card className="sys-params-table-card app-page__filter-card" styles={{ body: { padding: "16px" } }}>
|
|
<div className="app-page__toolbar" style={{ justifyContent: "space-between", width: "100%" }}>
|
|
<Form layout="inline" onFinish={handleSearch} className="app-page__toolbar">
|
|
<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((item) => ({ label: item.itemLabel, value: item.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>
|
|
{can("sys_param:create") && <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>{t("common.create")}</Button>}
|
|
</div>
|
|
</Card>
|
|
|
|
<Card className="app-page__content-card flex-1 flex flex-col overflow-hidden" styles={{ body: { padding: 0, flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" } }}>
|
|
<Table
|
|
rowKey="paramId"
|
|
columns={columns}
|
|
dataSource={data}
|
|
loading={loading}
|
|
size="middle"
|
|
scroll={{ y: "calc(100vh - 350px)" }}
|
|
pagination={getStandardPagination(total, queryParams.pageNum || 1, queryParams.pageSize || 10, handlePageChange)}
|
|
/>
|
|
</Card>
|
|
|
|
<Drawer
|
|
title={<span><SettingOutlined className="mr-2" />{editing ? t("sysParams.drawerTitleEdit") : t("sysParams.drawerTitleCreate")}</span>}
|
|
open={drawerOpen}
|
|
onClose={() => setDrawerOpen(false)}
|
|
width={500}
|
|
destroyOnHidden
|
|
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>}
|
|
>
|
|
<Form form={form} layout="vertical">
|
|
<Form.Item label={t("sysParams.paramKey")} name="paramKey" rules={[{ required: true, message: t("sysParams.paramKey") }]}>
|
|
<Input placeholder={t("sysParamsExt.paramKeyPlaceholder")} disabled={!!editing} />
|
|
</Form.Item>
|
|
<Form.Item label={t("sysParams.paramValue")} name="paramValue" rules={[{ required: true, message: t("sysParams.paramValue") }]}>
|
|
<Input.TextArea rows={4} placeholder={t("sysParamsExt.paramValuePlaceholder")} />
|
|
</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((item) => ({ label: item.itemLabel, value: item.itemValue }))} />
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Form.Item label={t("common.status")} name="status" initialValue={1}>
|
|
<Select options={statusDict.map((item) => ({ label: item.itemLabel, value: Number(item.itemValue) }))} />
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
<Form.Item
|
|
label={<Space>{t("sysParams.isSystem")}<Tooltip title={t("sysParamsExt.systemHint")}><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={t("sysParamsExt.descriptionPlaceholder")} />
|
|
</Form.Item>
|
|
</Form>
|
|
</Drawer>
|
|
</div>
|
|
);
|
|
} |