346 lines
11 KiB
TypeScript
346 lines
11 KiB
TypeScript
|
import {
|
|||
|
|
Button,
|
|||
|
|
Card,
|
|||
|
|
Col,
|
|||
|
|
Drawer,
|
|||
|
|
Form,
|
|||
|
|
Input,
|
|||
|
|
InputNumber,
|
|||
|
|
message,
|
|||
|
|
Popconfirm,
|
|||
|
|
Row,
|
|||
|
|
Select,
|
|||
|
|
Space,
|
|||
|
|
Table,
|
|||
|
|
Tag,
|
|||
|
|
Typography
|
|||
|
|
} from "antd";
|
|||
|
|
import { useEffect, useState } from "react";
|
|||
|
|
import {
|
|||
|
|
createDictItem,
|
|||
|
|
createDictType,
|
|||
|
|
deleteDictItem,
|
|||
|
|
deleteDictType,
|
|||
|
|
fetchDictItems,
|
|||
|
|
fetchDictTypes,
|
|||
|
|
updateDictItem,
|
|||
|
|
updateDictType
|
|||
|
|
} from "../api";
|
|||
|
|
import { usePermission } from "../hooks/usePermission";
|
|||
|
|
import { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
|
|||
|
|
import type { SysDictItem, SysDictType } from "../types";
|
|||
|
|
|
|||
|
|
const { Title } = Typography;
|
|||
|
|
|
|||
|
|
export default function Dictionaries() {
|
|||
|
|
const { can } = usePermission();
|
|||
|
|
const [types, setTypes] = useState<SysDictType[]>([]);
|
|||
|
|
const [items, setItems] = useState<SysDictItem[]>([]);
|
|||
|
|
const [selectedType, setSelectedType] = useState<SysDictType | null>(null);
|
|||
|
|
const [loadingTypes, setLoadingTypes] = useState(false);
|
|||
|
|
const [loadingItems, setLoadingItems] = useState(false);
|
|||
|
|
|
|||
|
|
// Type Drawer
|
|||
|
|
const [typeDrawerVisible, setTypeDrawerVisible] = useState(false);
|
|||
|
|
const [editingType, setEditingType] = useState<SysDictType | null>(null);
|
|||
|
|
const [typeForm] = Form.useForm();
|
|||
|
|
|
|||
|
|
// Item Drawer
|
|||
|
|
const [itemDrawerVisible, setItemDrawerVisible] = useState(false);
|
|||
|
|
const [editingItem, setEditingItem] = useState<SysDictItem | null>(null);
|
|||
|
|
const [itemForm] = Form.useForm();
|
|||
|
|
|
|||
|
|
const loadTypes = async () => {
|
|||
|
|
setLoadingTypes(true);
|
|||
|
|
try {
|
|||
|
|
const data = await fetchDictTypes();
|
|||
|
|
setTypes(data || []);
|
|||
|
|
if (data && data.length > 0 && !selectedType) {
|
|||
|
|
setSelectedType(data[0]);
|
|||
|
|
}
|
|||
|
|
} finally {
|
|||
|
|
setLoadingTypes(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const loadItems = async (typeCode: string) => {
|
|||
|
|
setLoadingItems(true);
|
|||
|
|
try {
|
|||
|
|
const data = await fetchDictItems(typeCode);
|
|||
|
|
setItems(data || []);
|
|||
|
|
} finally {
|
|||
|
|
setLoadingItems(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
loadTypes();
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (selectedType) {
|
|||
|
|
loadItems(selectedType.typeCode);
|
|||
|
|
} else {
|
|||
|
|
setItems([]);
|
|||
|
|
}
|
|||
|
|
}, [selectedType]);
|
|||
|
|
|
|||
|
|
// Type Actions
|
|||
|
|
const handleAddType = () => {
|
|||
|
|
setEditingType(null);
|
|||
|
|
typeForm.resetFields();
|
|||
|
|
setTypeDrawerVisible(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleEditType = (record: SysDictType) => {
|
|||
|
|
setEditingType(record);
|
|||
|
|
typeForm.setFieldsValue(record);
|
|||
|
|
setTypeDrawerVisible(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleDeleteType = async (id: number) => {
|
|||
|
|
await deleteDictType(id);
|
|||
|
|
message.success("删除成功");
|
|||
|
|
loadTypes();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleTypeSubmit = async () => {
|
|||
|
|
const values = await typeForm.validateFields();
|
|||
|
|
if (editingType) {
|
|||
|
|
await updateDictType(editingType.dictTypeId, values);
|
|||
|
|
} else {
|
|||
|
|
await createDictType(values);
|
|||
|
|
}
|
|||
|
|
message.success(editingType ? "更新成功" : "创建成功");
|
|||
|
|
setTypeDrawerVisible(false);
|
|||
|
|
loadTypes();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Item Actions
|
|||
|
|
const handleAddItem = () => {
|
|||
|
|
if (!selectedType) {
|
|||
|
|
message.warning("请先选择一个字典类型");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setEditingItem(null);
|
|||
|
|
itemForm.resetFields();
|
|||
|
|
itemForm.setFieldsValue({ typeCode: selectedType.typeCode, sortOrder: 0, status: 1 });
|
|||
|
|
setItemDrawerVisible(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleEditItem = (record: SysDictItem) => {
|
|||
|
|
setEditingItem(record);
|
|||
|
|
itemForm.setFieldsValue(record);
|
|||
|
|
setItemDrawerVisible(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleDeleteItem = async (id: number) => {
|
|||
|
|
await deleteDictItem(id);
|
|||
|
|
message.success("删除成功");
|
|||
|
|
if (selectedType) loadItems(selectedType.typeCode);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleItemSubmit = async () => {
|
|||
|
|
const values = await itemForm.validateFields();
|
|||
|
|
if (editingItem) {
|
|||
|
|
await updateDictItem(editingItem.dictItemId, values);
|
|||
|
|
} else {
|
|||
|
|
await createDictItem(values);
|
|||
|
|
}
|
|||
|
|
message.success(editingItem ? "更新成功" : "创建成功");
|
|||
|
|
setItemDrawerVisible(false);
|
|||
|
|
if (selectedType) loadItems(selectedType.typeCode);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="p-6">
|
|||
|
|
<Title level={4} className="mb-6">字典管理</Title>
|
|||
|
|
<Row gutter={16}>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Card
|
|||
|
|
title="字典类型"
|
|||
|
|
extra={
|
|||
|
|
can("sys_dict:type:create") && (
|
|||
|
|
<Button type="primary" icon={<PlusOutlined />} onClick={handleAddType}>
|
|||
|
|
新增
|
|||
|
|
</Button>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<Table
|
|||
|
|
rowKey="dictTypeId"
|
|||
|
|
loading={loadingTypes}
|
|||
|
|
dataSource={types}
|
|||
|
|
pagination={false}
|
|||
|
|
size="small"
|
|||
|
|
onRow={(record) => ({
|
|||
|
|
onClick: () => setSelectedType(record),
|
|||
|
|
className: `cursor-pointer ${selectedType?.dictTypeId === record.dictTypeId ? "ant-table-row-selected" : ""}`
|
|||
|
|
})}
|
|||
|
|
columns={[
|
|||
|
|
{ title: "类型名称", dataIndex: "typeName" },
|
|||
|
|
{ title: "编码", dataIndex: "typeCode" },
|
|||
|
|
{
|
|||
|
|
title: "操作",
|
|||
|
|
width: 100,
|
|||
|
|
render: (_, record) => (
|
|||
|
|
<Space>
|
|||
|
|
{can("sys_dict:type:update") && (
|
|||
|
|
<Button
|
|||
|
|
type="text"
|
|||
|
|
size="small"
|
|||
|
|
icon={<EditOutlined />}
|
|||
|
|
onClick={(e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
handleEditType(record);
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
{can("sys_dict:type:delete") && (
|
|||
|
|
<Popconfirm
|
|||
|
|
title="删除类型会影响关联的项，确认删除？"
|
|||
|
|
onConfirm={(e) => {
|
|||
|
|
e?.stopPropagation();
|
|||
|
|
handleDeleteType(record.dictTypeId);
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Button
|
|||
|
|
type="text"
|
|||
|
|
size="small"
|
|||
|
|
danger
|
|||
|
|
icon={<DeleteOutlined />}
|
|||
|
|
onClick={(e) => e.stopPropagation()}
|
|||
|
|
/>
|
|||
|
|
</Popconfirm>
|
|||
|
|
)}
|
|||
|
|
</Space>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
]}
|
|||
|
|
/>
|
|||
|
|
</Card>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={16}>
|
|||
|
|
<Card
|
|||
|
|
title={`字典项 - ${selectedType?.typeName || "未选择"}`}
|
|||
|
|
extra={
|
|||
|
|
can("sys_dict:item:create") && (
|
|||
|
|
<Button type="primary" icon={<PlusOutlined />} onClick={handleAddItem} disabled={!selectedType}>
|
|||
|
|
新增
|
|||
|
|
</Button>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<Table
|
|||
|
|
rowKey="dictItemId"
|
|||
|
|
loading={loadingItems}
|
|||
|
|
dataSource={items}
|
|||
|
|
pagination={false}
|
|||
|
|
columns={[
|
|||
|
|
{ title: "标签", dataIndex: "itemLabel" },
|
|||
|
|
{ title: "数值", dataIndex: "itemValue" },
|
|||
|
|
{ title: "排序", dataIndex: "sortOrder", width: 80 },
|
|||
|
|
{
|
|||
|
|
title: "状态",
|
|||
|
|
dataIndex: "status",
|
|||
|
|
width: 80,
|
|||
|
|
render: (v) => (v === 1 ? <Tag color="green">启用</Tag> : <Tag color="red">禁用</Tag>)
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "操作",
|
|||
|
|
width: 120,
|
|||
|
|
render: (_, record) => (
|
|||
|
|
<Space>
|
|||
|
|
{can("sys_dict:item:update") && (
|
|||
|
|
<Button
|
|||
|
|
type="text"
|
|||
|
|
size="small"
|
|||
|
|
icon={<EditOutlined />}
|
|||
|
|
onClick={() => handleEditItem(record)}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
{can("sys_dict:item:delete") && (
|
|||
|
|
<Popconfirm title="确认删除该项？" onConfirm={() => handleDeleteItem(record.dictItemId)}>
|
|||
|
|
<Button type="text" size="small" danger icon={<DeleteOutlined />} />
|
|||
|
|
</Popconfirm>
|
|||
|
|
)}
|
|||
|
|
</Space>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
]}
|
|||
|
|
/>
|
|||
|
|
</Card>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
{/* Type Drawer */}
|
|||
|
|
<Drawer
|
|||
|
|
title={editingType ? "编辑字典类型" : "新增字典类型"}
|
|||
|
|
open={typeDrawerVisible}
|
|||
|
|
onClose={() => setTypeDrawerVisible(false)}
|
|||
|
|
width={400}
|
|||
|
|
destroyOnClose
|
|||
|
|
footer={
|
|||
|
|
<div className="flex justify-end space-x-2">
|
|||
|
|
<Button onClick={() => setTypeDrawerVisible(false)}>取消</Button>
|
|||
|
|
<Button type="primary" onClick={handleTypeSubmit}>确认</Button>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<Form form={typeForm} layout="vertical">
|
|||
|
|
<Form.Item label="类型编码" name="typeCode" rules={[{ required: true }]}>
|
|||
|
|
<Input disabled={!!editingType} placeholder="例如：user_status" />
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item label="类型名称" name="typeName" rules={[{ required: true }]}>
|
|||
|
|
<Input placeholder="例如：用户状态" />
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item label="备注" name="remark">
|
|||
|
|
<Input.TextArea />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Form>
|
|||
|
|
</Drawer>
|
|||
|
|
|
|||
|
|
{/* Item Drawer */}
|
|||
|
|
<Drawer
|
|||
|
|
title={editingItem ? "编辑字典项" : "新增字典项"}
|
|||
|
|
open={itemDrawerVisible}
|
|||
|
|
onClose={() => setItemDrawerVisible(false)}
|
|||
|
|
width={400}
|
|||
|
|
destroyOnClose
|
|||
|
|
footer={
|
|||
|
|
<div className="flex justify-end space-x-2">
|
|||
|
|
<Button onClick={() => setItemDrawerVisible(false)}>取消</Button>
|
|||
|
|
<Button type="primary" onClick={handleItemSubmit}>确认</Button>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<Form form={itemForm} layout="vertical">
|
|||
|
|
<Form.Item label="所属类型" name="typeCode">
|
|||
|
|
<Input disabled />
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item label="标签" name="itemLabel" rules={[{ required: true }]}>
|
|||
|
|
<Input placeholder="例如：启用" />
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item label="数值" name="itemValue" rules={[{ required: true }]}>
|
|||
|
|
<Input placeholder="例如：1" />
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item label="排序" name="sortOrder" initialValue={0}>
|
|||
|
|
<InputNumber className="w-full" />
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item label="状态" name="status" initialValue={1}>
|
|||
|
|
<Select
|
|||
|
|
options={[
|
|||
|
|
{ label: "启用", value: 1 },
|
|||
|
|
{ label: "禁用", value: 0 }
|
|||
|
|
]}
|
|||
|
|
/>
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item label="备注" name="remark">
|
|||
|
|
<Input.TextArea />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Form>
|
|||
|
|
</Drawer>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|