405 lines
13 KiB
JavaScript
405 lines
13 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
||
import { Tree, Button, Form, Input, InputNumber, Select, Switch, Space, Card, Empty, Popconfirm, App, Row, Col, Typography, Checkbox } from 'antd';
|
||
import {
|
||
BookOutlined,
|
||
PlusOutlined,
|
||
SaveOutlined,
|
||
DeleteOutlined,
|
||
FolderOpenOutlined,
|
||
FileOutlined,
|
||
CloseOutlined
|
||
} from '@ant-design/icons';
|
||
import apiClient from '../../utils/apiClient';
|
||
import { buildApiUrl, API_ENDPOINTS } from '../../config/api';
|
||
|
||
const { Option } = Select;
|
||
const { TextArea } = Input;
|
||
const { Title, Text } = Typography;
|
||
|
||
const DictManagement = () => {
|
||
const { message } = App.useApp();
|
||
const [loading, setLoading] = useState(false);
|
||
const [dictTypes, setDictTypes] = useState([]); // 字典类型列表
|
||
const [selectedDictType, setSelectedDictType] = useState('client_platform'); // 当前选中的字典类型
|
||
const [dictData, setDictData] = useState([]); // 当前字典类型的数据
|
||
const [treeData, setTreeData] = useState([]); // 树形结构数据
|
||
const [selectedNode, setSelectedNode] = useState(null); // 当前选中的节点
|
||
const [isEditing, setIsEditing] = useState(false); // 是否处于编辑状态
|
||
const [form] = Form.useForm();
|
||
|
||
// 获取所有字典类型
|
||
const fetchDictTypes = async () => {
|
||
try {
|
||
const response = await apiClient.get(buildApiUrl(API_ENDPOINTS.DICT_DATA.TYPES));
|
||
if (response.code === '200') {
|
||
const types = (response.data.types || []).filter((type) => type !== 'system_config');
|
||
setDictTypes(types);
|
||
if (!types.includes(selectedDictType)) {
|
||
setSelectedDictType(types[0] || '');
|
||
}
|
||
}
|
||
} catch (error) {
|
||
message.error('获取字典类型失败');
|
||
}
|
||
};
|
||
|
||
// 获取指定类型的字典数据
|
||
const fetchDictData = async (dictType) => {
|
||
setLoading(true);
|
||
try {
|
||
const response = await apiClient.get(buildApiUrl(API_ENDPOINTS.DICT_DATA.BY_TYPE(dictType)));
|
||
if (response.code === '200') {
|
||
setDictData(response.data.items);
|
||
|
||
// 转换为 antd Tree 需要的格式
|
||
const antdTreeData = buildAntdTreeData(response.data.tree);
|
||
setTreeData(antdTreeData);
|
||
|
||
// 清空选中节点
|
||
setSelectedNode(null);
|
||
setIsEditing(false);
|
||
form.resetFields();
|
||
}
|
||
} catch (error) {
|
||
message.error('获取字典数据失败');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
// 将树形数据转换为 antd Tree 组件格式
|
||
const buildAntdTreeData = (tree) => {
|
||
return tree.map(node => ({
|
||
title: (
|
||
<Space>
|
||
{node.parent_code === 'ROOT' ? <FolderOpenOutlined /> : <FileOutlined />}
|
||
<span>{node.label_cn}</span>
|
||
<Text type="secondary" size="small">({node.dict_code})</Text>
|
||
</Space>
|
||
),
|
||
key: node.dict_code,
|
||
data: node,
|
||
children: node.children && node.children.length > 0 ? buildAntdTreeData(node.children) : []
|
||
}));
|
||
};
|
||
|
||
useEffect(() => {
|
||
fetchDictTypes();
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (selectedDictType) {
|
||
fetchDictData(selectedDictType);
|
||
}
|
||
}, [selectedDictType]);
|
||
|
||
// 选中树节点
|
||
const handleSelectNode = (selectedKeys, info) => {
|
||
if (selectedKeys.length > 0) {
|
||
const nodeData = info.node.data;
|
||
setSelectedNode(nodeData);
|
||
setIsEditing(true);
|
||
|
||
// 填充表单
|
||
form.setFieldsValue({
|
||
dict_type: nodeData.dict_type,
|
||
dict_code: nodeData.dict_code,
|
||
parent_code: nodeData.parent_code,
|
||
label_cn: nodeData.label_cn,
|
||
label_en: nodeData.label_en,
|
||
sort_order: nodeData.sort_order,
|
||
extension_attr: nodeData.extension_attr ? JSON.stringify(nodeData.extension_attr, null, 2) : '',
|
||
is_default: nodeData.is_default === 1,
|
||
status: nodeData.status
|
||
});
|
||
}
|
||
};
|
||
|
||
// 新增节点
|
||
const handleAddNode = () => {
|
||
setSelectedNode(null);
|
||
setIsEditing(true);
|
||
form.resetFields();
|
||
form.setFieldsValue({
|
||
dict_type: selectedDictType,
|
||
parent_code: 'ROOT',
|
||
sort_order: 0,
|
||
status: 1,
|
||
is_default: false
|
||
});
|
||
};
|
||
|
||
// 保存
|
||
const handleSave = async () => {
|
||
try {
|
||
const values = await form.validateFields();
|
||
|
||
// 解析 extension_attr JSON
|
||
if (values.extension_attr) {
|
||
try {
|
||
values.extension_attr = JSON.parse(values.extension_attr);
|
||
} catch (e) {
|
||
message.error('扩展属性 JSON 格式错误');
|
||
return;
|
||
}
|
||
}
|
||
|
||
// 转换 is_default 为数字
|
||
values.is_default = values.is_default ? 1 : 0;
|
||
|
||
if (selectedNode) {
|
||
// 更新
|
||
const response = await apiClient.put(
|
||
buildApiUrl(API_ENDPOINTS.DICT_DATA.UPDATE(selectedNode.id)),
|
||
values
|
||
);
|
||
if (response.code === '200') {
|
||
message.success('更新成功');
|
||
fetchDictData(selectedDictType);
|
||
}
|
||
} else {
|
||
// 新增
|
||
const response = await apiClient.post(
|
||
buildApiUrl(API_ENDPOINTS.DICT_DATA.CREATE),
|
||
values
|
||
);
|
||
if (response.code === '200') {
|
||
message.success('创建成功');
|
||
fetchDictData(selectedDictType);
|
||
}
|
||
}
|
||
} catch (error) {
|
||
if (!error.errorFields) {
|
||
message.error(error.response?.data?.message || '操作失败');
|
||
}
|
||
}
|
||
};
|
||
|
||
// 删除
|
||
const handleDelete = async () => {
|
||
if (!selectedNode) return;
|
||
try {
|
||
await apiClient.delete(buildApiUrl(API_ENDPOINTS.DICT_DATA.DELETE(selectedNode.id)));
|
||
message.success('删除成功');
|
||
setSelectedNode(null);
|
||
setIsEditing(false);
|
||
form.resetFields();
|
||
fetchDictData(selectedDictType);
|
||
} catch (error) {
|
||
message.error('删除失败');
|
||
}
|
||
};
|
||
|
||
// 取消编辑
|
||
const handleCancel = () => {
|
||
setIsEditing(false);
|
||
setSelectedNode(null);
|
||
form.resetFields();
|
||
};
|
||
|
||
// 获取父级选项
|
||
const getParentOptions = () => {
|
||
const options = [{ label: 'ROOT（顶级）', value: 'ROOT' }];
|
||
dictData.forEach(item => {
|
||
if (item.parent_code === 'ROOT') {
|
||
options.push({ label: `${item.label_cn} (${item.dict_code})`, value: item.dict_code });
|
||
}
|
||
});
|
||
return options;
|
||
};
|
||
|
||
return (
|
||
<div className="dict-management">
|
||
<div style={{ marginBottom: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||
<Space size="middle">
|
||
<BookOutlined style={{ fontSize: 24, color: '#1677ff' }} />
|
||
<Title level={4} style={{ margin: 0 }}>字典管理</Title>
|
||
</Space>
|
||
</div>
|
||
|
||
<Row gutter={24}>
|
||
<Col span={8}>
|
||
<Card
|
||
title={
|
||
<Space>
|
||
<FolderOpenOutlined />
|
||
<span>字典树</span>
|
||
</Space>
|
||
}
|
||
extra={
|
||
<Button
|
||
type="primary"
|
||
size="small"
|
||
icon={<PlusOutlined />}
|
||
onClick={handleAddNode}
|
||
>
|
||
新增
|
||
</Button>
|
||
}
|
||
variant="borderless"
|
||
>
|
||
<div style={{ marginBottom: 16 }}>
|
||
<Select
|
||
value={selectedDictType}
|
||
onChange={setSelectedDictType}
|
||
style={{ width: '100%' }}
|
||
placeholder="选择字典类型"
|
||
>
|
||
{dictTypes.map(type => (
|
||
<Option key={type} value={type}>{type}</Option>
|
||
))}
|
||
</Select>
|
||
</div>
|
||
|
||
<div style={{ maxHeight: '60vh', overflowY: 'auto' }}>
|
||
{treeData.length > 0 ? (
|
||
<Tree
|
||
showLine
|
||
treeData={treeData}
|
||
onSelect={handleSelectNode}
|
||
selectedKeys={selectedNode ? [selectedNode.dict_code] : []}
|
||
defaultExpandAll
|
||
/>
|
||
) : (
|
||
<Empty description="暂无数据" image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||
)}
|
||
</div>
|
||
</Card>
|
||
</Col>
|
||
|
||
<Col span={16}>
|
||
<Card
|
||
title={
|
||
<Space>
|
||
<FileOutlined />
|
||
<span>{selectedNode ? '编辑字典项' : isEditing ? '新增字典项' : '字典详情'}</span>
|
||
</Space>
|
||
}
|
||
extra={
|
||
isEditing && (
|
||
<Space>
|
||
{selectedNode && (
|
||
<Popconfirm
|
||
title="确定要删除此项吗？"
|
||
onConfirm={handleDelete}
|
||
okText="确定"
|
||
cancelText="取消"
|
||
>
|
||
<Button danger size="small" icon={<DeleteOutlined />}>删除</Button>
|
||
</Popconfirm>
|
||
)}
|
||
<Button size="small" icon={<CloseOutlined />} onClick={handleCancel}>取消</Button>
|
||
<Button
|
||
type="primary"
|
||
size="small"
|
||
icon={<SaveOutlined />}
|
||
onClick={handleSave}
|
||
>
|
||
保存
|
||
</Button>
|
||
</Space>
|
||
)
|
||
}
|
||
variant="borderless"
|
||
>
|
||
<Form
|
||
form={form}
|
||
layout="vertical"
|
||
>
|
||
{isEditing ? (
|
||
<>
|
||
<Row gutter={16}>
|
||
<Col span={12}>
|
||
<Form.Item
|
||
label="字典类型"
|
||
name="dict_type"
|
||
rules={[{ required: true, message: '请输入字典类型' }]}
|
||
>
|
||
<Input disabled={!!selectedNode} placeholder="如: client_platform" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item
|
||
label="编码"
|
||
name="dict_code"
|
||
rules={[{ required: true, message: '请输入编码' }]}
|
||
>
|
||
<Input disabled={!!selectedNode} placeholder="如: WIN, MAC" />
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Row gutter={16}>
|
||
<Col span={12}>
|
||
<Form.Item
|
||
label="中文名称"
|
||
name="label_cn"
|
||
rules={[{ required: true, message: '请输入中文名称' }]}
|
||
>
|
||
<Input placeholder="如: Windows" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item label="英文名称" name="label_en">
|
||
<Input placeholder="如: Windows" />
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Row gutter={16}>
|
||
<Col span={12}>
|
||
<Form.Item
|
||
label="父级编码"
|
||
name="parent_code"
|
||
rules={[{ required: true, message: '请选择父级' }]}
|
||
>
|
||
<Select placeholder="选择父级">
|
||
{getParentOptions().map(opt => (
|
||
<Option key={opt.value} value={opt.value}>{opt.label}</Option>
|
||
))}
|
||
</Select>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item label="排序" name="sort_order">
|
||
<InputNumber min={0} style={{ width: '100%' }} />
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Form.Item label="扩展属性（JSON格式）" name="extension_attr">
|
||
<TextArea
|
||
rows={4}
|
||
placeholder='如: {"suffix": ".exe"}'
|
||
/>
|
||
</Form.Item>
|
||
|
||
<Space size="large">
|
||
<Form.Item name="is_default" valuePropName="checked" style={{ marginBottom: 0 }}>
|
||
<Checkbox>设为默认</Checkbox>
|
||
</Form.Item>
|
||
|
||
<Form.Item name="status" label="状态">
|
||
<Select style={{ width: 120 }}>
|
||
<Option value={1}>正常</Option>
|
||
<Option value={0}>停用</Option>
|
||
</Select>
|
||
</Form.Item>
|
||
</Space>
|
||
</>
|
||
) : (
|
||
<Empty
|
||
description="请从左侧树中选择一个节点进行编辑，或点击新增按钮创建新节点"
|
||
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
||
/>
|
||
)}
|
||
</Form>
|
||
</Card>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default DictManagement;
|