字典页面提交
This commit is contained in:
32503
51
src/pages/Dict/DictService.ts
Normal file
51
src/pages/Dict/DictService.ts
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
import request from "@/utils/request";
|
||||||
|
|
||||||
|
// 字典项类型定义
|
||||||
|
export interface DictionaryItem {
|
||||||
|
id: string;
|
||||||
|
code: string;
|
||||||
|
dicName: string;
|
||||||
|
dictTypeCode: string,
|
||||||
|
dictTypeName: string,
|
||||||
|
parentCode: string,
|
||||||
|
parentType: string,
|
||||||
|
orderFlag: number;
|
||||||
|
description: string;
|
||||||
|
createTime: string;
|
||||||
|
updateTime: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取字典列表
|
||||||
|
// export const fetchDictionaries = async (): Promise<DictionaryItem[]> => {
|
||||||
|
// const response = await axios.get('/api/sys-manager-ebtp-project/v1/dictProject/getDictList?parentCode=procurement_type&toParentCode=entrust');
|
||||||
|
// return response.data.data;
|
||||||
|
// };
|
||||||
|
|
||||||
|
const prefix = '/api/sys-manager-ebtp-project/';
|
||||||
|
|
||||||
|
export async function fetchDictionaries(params: any) {
|
||||||
|
return request(prefix + 'v1/dictProject/selectDictList', {
|
||||||
|
params: params,
|
||||||
|
method: 'GET'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function createDictionary(params: any) {
|
||||||
|
return request(prefix + 'v1/dictProject', {
|
||||||
|
data: params,
|
||||||
|
method: 'POST'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function updateDictionary(params: any) {
|
||||||
|
return request(prefix + 'v1/dictProject', {
|
||||||
|
data: params,
|
||||||
|
method: 'POST'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function deleteDictionary(param: any) {
|
||||||
|
return request(prefix + 'v1/dictProject/delete/' + param, {
|
||||||
|
method: 'POST',
|
||||||
|
});
|
||||||
|
}
|
||||||
386
src/pages/Dict/DictionaryList.tsx
Normal file
386
src/pages/Dict/DictionaryList.tsx
Normal file
@ -0,0 +1,386 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { Table, Space, Button, Modal, Form, Input, Popconfirm, message, Tag } from 'antd';
|
||||||
|
import { DeleteOutlined, EditOutlined, PlusOutlined, SearchOutlined, CheckCircleOutlined, CaretRightOutlined, CaretDownOutlined } from '@ant-design/icons';
|
||||||
|
import {DictionaryItem, createDictionary, updateDictionary, deleteDictionary, fetchDictionaries} from './DictService';
|
||||||
|
|
||||||
|
interface DictionaryListProps {}
|
||||||
|
|
||||||
|
const DictionaryList: React.FC<DictionaryListProps> = () => {
|
||||||
|
const [dataSource, setDataSource] = useState<DictionaryItem[]>([]);
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
const [searchForm] = Form.useForm();
|
||||||
|
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||||
|
const [modalTitle, setModalTitle] = useState('');
|
||||||
|
const [currentId, setCurrentId] = useState<string | null>(null);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [searchParams, setSearchParams] = useState({
|
||||||
|
parentCode: '',
|
||||||
|
parentType: ''
|
||||||
|
});
|
||||||
|
// 选中的行ID
|
||||||
|
const [selectedRowId, setSelectedRowId] = useState<string | null>(null);
|
||||||
|
// 选中的行数据
|
||||||
|
const [selectedRow, setSelectedRow] = useState<DictionaryItem | null>(null);
|
||||||
|
// 展开的行ID
|
||||||
|
const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);
|
||||||
|
// 是否为新增子节点模式
|
||||||
|
const [isChildAddMode, setIsChildAddMode] = useState(false);
|
||||||
|
|
||||||
|
// const tableData: DictionaryItem[] = [
|
||||||
|
// {
|
||||||
|
// "id": '1164',
|
||||||
|
// "code": "code",
|
||||||
|
// "dicName": "行政区划",
|
||||||
|
// "parentCode": '',
|
||||||
|
// "parentType": "",
|
||||||
|
// "orderFlag": 0,
|
||||||
|
// "description": '',
|
||||||
|
// "children": [
|
||||||
|
// {
|
||||||
|
// "id": 1163,
|
||||||
|
// "code": "province",
|
||||||
|
// "dicName": "省份",
|
||||||
|
// "parentCode": "code",
|
||||||
|
// "parentType": "行政区划",
|
||||||
|
// "orderFlag": 1,
|
||||||
|
// "description": ''
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// "id": 1162,
|
||||||
|
// "code": "city",
|
||||||
|
// "dicName": "地市",
|
||||||
|
// "parentCode": "code",
|
||||||
|
// "parentType": "行政区域",
|
||||||
|
// "orderFlag": 3,
|
||||||
|
// "description": ''
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// "id": 1161,
|
||||||
|
// "code": "distict",
|
||||||
|
// "dicName": "区县",
|
||||||
|
// "parentCode": "code",
|
||||||
|
// "parentType": "行政区域",
|
||||||
|
// "orderFlag": 4,
|
||||||
|
// "description": "区县级"
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
// }
|
||||||
|
// ];
|
||||||
|
|
||||||
|
const fetchData = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const result = await fetchDictionaries(searchParams); // 传递搜索参数
|
||||||
|
setDataSource(result.data);
|
||||||
|
} catch (error) {
|
||||||
|
message.error('获取字典列表失败');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchData();
|
||||||
|
}, [searchParams]);
|
||||||
|
|
||||||
|
const handleAdd = () => {
|
||||||
|
form.resetFields();
|
||||||
|
setModalTitle('新增字典');
|
||||||
|
setIsModalVisible(true);
|
||||||
|
setCurrentId(null);
|
||||||
|
setIsChildAddMode(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChildAdd = (record: DictionaryItem) =>{
|
||||||
|
// 先清空表单
|
||||||
|
form.resetFields();
|
||||||
|
// 使用 setTimeout 确保表单重置完成后再设置值
|
||||||
|
setTimeout(() => {
|
||||||
|
form.setFieldsValue({
|
||||||
|
code: '',
|
||||||
|
dicName: '',
|
||||||
|
parentCode: record.code,
|
||||||
|
parentType: record.dicName,
|
||||||
|
orderFlag: '',
|
||||||
|
description: '',
|
||||||
|
});
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
setModalTitle(`新增${record.dicName}的子字典`);
|
||||||
|
setIsModalVisible(true);
|
||||||
|
setCurrentId(null);
|
||||||
|
setIsChildAddMode(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleEdit = (record: DictionaryItem) => {
|
||||||
|
form.resetFields();
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
form.setFieldsValue({
|
||||||
|
code: record.code,
|
||||||
|
dicName: record.dicName,
|
||||||
|
parentCode: record.parentCode,
|
||||||
|
parentType: record.parentType,
|
||||||
|
orderFlag: record.orderFlag,
|
||||||
|
description: record.description,
|
||||||
|
});
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
setModalTitle('编辑字典');
|
||||||
|
setIsModalVisible(true);
|
||||||
|
setCurrentId(record.id);
|
||||||
|
setIsChildAddMode(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = async (id: string) => {
|
||||||
|
try {
|
||||||
|
await deleteDictionary(id);
|
||||||
|
message.success('删除成功');
|
||||||
|
setSelectedRowId(null);
|
||||||
|
setSelectedRow(null);
|
||||||
|
fetchData();
|
||||||
|
} catch (error) {
|
||||||
|
message.error('删除失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRowClick = (record: DictionaryItem) => {
|
||||||
|
if (selectedRowId === record.id) {
|
||||||
|
setSelectedRowId(null);
|
||||||
|
setSelectedRow(null);
|
||||||
|
} else {
|
||||||
|
setSelectedRowId(record.id);
|
||||||
|
setSelectedRow(record);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleExpand = (expanded: boolean, record: DictionaryItem) => {
|
||||||
|
if (expanded) {
|
||||||
|
setExpandedRowKeys([...expandedRowKeys, record.id]);
|
||||||
|
} else {
|
||||||
|
setExpandedRowKeys(expandedRowKeys.filter(key => key !== record.id));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
try {
|
||||||
|
const values = await form.validateFields();
|
||||||
|
if (currentId) {
|
||||||
|
values.id = currentId;
|
||||||
|
await updateDictionary(values);
|
||||||
|
message.success('更新成功');
|
||||||
|
} else {
|
||||||
|
await createDictionary(values);
|
||||||
|
message.success('创建成功');
|
||||||
|
}
|
||||||
|
setIsModalVisible(false);
|
||||||
|
fetchData();
|
||||||
|
} catch (error) {
|
||||||
|
message.error(error.message || '操作失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSearch = (values: any) => {
|
||||||
|
setSearchParams({
|
||||||
|
parentCode: values.parentCode || '',
|
||||||
|
parentType: values.parentType || ''
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleReset = () => {
|
||||||
|
searchForm.resetFields();
|
||||||
|
setSearchParams({
|
||||||
|
parentCode: '',
|
||||||
|
parentType: ''
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const expandIcon = ({ expanded, onExpand, record }: any) => {
|
||||||
|
if (record.children && record.children.length > 0) {
|
||||||
|
return (
|
||||||
|
<span onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
onExpand(record);
|
||||||
|
}}>
|
||||||
|
{expanded ? <CaretDownOutlined /> : <CaretRightOutlined />}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '字典编号',
|
||||||
|
dataIndex: 'code',
|
||||||
|
key: 'code',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '字典名称',
|
||||||
|
dataIndex: 'dicName',
|
||||||
|
key: 'dicName',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '分组编码',
|
||||||
|
dataIndex: 'parentCode',
|
||||||
|
key: 'parentCode',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '分组名称',
|
||||||
|
dataIndex: 'parentType',
|
||||||
|
key: 'parentType',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '排序',
|
||||||
|
dataIndex: 'orderFlag',
|
||||||
|
key: 'orderFlag',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '描述',
|
||||||
|
dataIndex: 'description',
|
||||||
|
key: 'description',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
render: (_: any, record: DictionaryItem) => (
|
||||||
|
<Space size="middle">
|
||||||
|
<Button icon={<PlusOutlined />} onClick={() => handleChildAdd(record)}>
|
||||||
|
新增
|
||||||
|
</Button>
|
||||||
|
<Button icon={<EditOutlined />} onClick={() => handleEdit(record)}>
|
||||||
|
编辑
|
||||||
|
</Button>
|
||||||
|
<Popconfirm
|
||||||
|
title="确定要删除吗?"
|
||||||
|
onConfirm={() => handleDelete(record.id)}
|
||||||
|
okText="确定"
|
||||||
|
cancelText="取消"
|
||||||
|
>
|
||||||
|
<Button icon={<DeleteOutlined />} danger>
|
||||||
|
删除
|
||||||
|
</Button>
|
||||||
|
</Popconfirm>
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Form
|
||||||
|
form={searchForm}
|
||||||
|
layout="inline"
|
||||||
|
onFinish={handleSearch}
|
||||||
|
style={{ marginBottom: 16 }}
|
||||||
|
>
|
||||||
|
<Form.Item name="parentCode" label="分组编码">
|
||||||
|
<Input placeholder="请输入分组编码" />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item name="parentType" label="分组名称">
|
||||||
|
<Input placeholder="请输入分组名称" />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item>
|
||||||
|
<Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
|
||||||
|
搜索
|
||||||
|
</Button>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item>
|
||||||
|
<Button onClick={handleReset}>重置</Button>
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
|
||||||
|
<div style={{ marginBottom: 16, display: 'flex', alignItems: 'center' }}>
|
||||||
|
<Button type="primary" icon={<PlusOutlined />} onClick={handleAdd} style={{ marginRight: 8 }}>
|
||||||
|
新增字典
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
|
||||||
|
{selectedRow && (
|
||||||
|
<Tag color="blue" style={{ marginLeft: 'auto' }}>
|
||||||
|
已选择: {selectedRow.dicName} <CheckCircleOutlined />
|
||||||
|
</Tag>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Table
|
||||||
|
dataSource={dataSource}
|
||||||
|
columns={columns}
|
||||||
|
rowKey="id"
|
||||||
|
loading={loading}
|
||||||
|
pagination={{
|
||||||
|
pageSize: 10,
|
||||||
|
}}
|
||||||
|
onRow={(record) => ({
|
||||||
|
onClick: () => handleRowClick(record),
|
||||||
|
style: {
|
||||||
|
cursor: 'pointer',
|
||||||
|
backgroundColor: selectedRowId === record.id ? '#e6f7ff' : 'transparent',
|
||||||
|
},
|
||||||
|
})}
|
||||||
|
expandable={{
|
||||||
|
expandedRowKeys,
|
||||||
|
onExpand: handleExpand,
|
||||||
|
expandIcon,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
title={modalTitle}
|
||||||
|
visible={isModalVisible}
|
||||||
|
onCancel={() => setIsModalVisible(false)}
|
||||||
|
onOk={handleSubmit}
|
||||||
|
okText="保存"
|
||||||
|
cancelText="取消"
|
||||||
|
>
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
name="dictionaryForm"
|
||||||
|
labelCol={{ span: 8 }}
|
||||||
|
wrapperCol={{ span: 16 }}
|
||||||
|
initialValues={{ remember: true }}
|
||||||
|
autoComplete="off"
|
||||||
|
>
|
||||||
|
<Form.Item
|
||||||
|
label="分组名称"
|
||||||
|
name="parentType"
|
||||||
|
>
|
||||||
|
{/* 使用 readOnly 替代 disabled，并添加灰色背景 */}
|
||||||
|
<Input
|
||||||
|
readOnly={isChildAddMode}
|
||||||
|
style={isChildAddMode ? { backgroundColor: '#f5f5f5' } : {}}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="分组编码" name="parentCode">
|
||||||
|
<Input
|
||||||
|
readOnly={isChildAddMode}
|
||||||
|
style={isChildAddMode ? { backgroundColor: '#f5f5f5' } : {}}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
label="字典名称"
|
||||||
|
name="dicName"
|
||||||
|
rules={[{ required: true, message: '请输入字典名称' }]}
|
||||||
|
>
|
||||||
|
<Input />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
label="字典编号"
|
||||||
|
name="code"
|
||||||
|
rules={[{ required: true, message: '请输入字典编号' }]}
|
||||||
|
>
|
||||||
|
<Input />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="排序" name="orderFlag">
|
||||||
|
<Input type="number" />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="描述" name="description">
|
||||||
|
<Input.TextArea />
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DictionaryList;
|
||||||
28
src/pages/Dict/DictionaryPage.tsx
Normal file
28
src/pages/Dict/DictionaryPage.tsx
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Layout, Breadcrumb } from 'antd';
|
||||||
|
import DictionaryList from './DictionaryList';
|
||||||
|
|
||||||
|
const { Content } = Layout;
|
||||||
|
|
||||||
|
const DictionaryPage: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<Layout style={{ padding: '0 24px 24px' }}>
|
||||||
|
<Breadcrumb style={{ margin: '16px 0' }}>
|
||||||
|
<Breadcrumb.Item>系统管理</Breadcrumb.Item>
|
||||||
|
<Breadcrumb.Item>字典管理</Breadcrumb.Item>
|
||||||
|
</Breadcrumb>
|
||||||
|
<Content
|
||||||
|
style={{
|
||||||
|
background: '#fff',
|
||||||
|
padding: 24,
|
||||||
|
margin: 0,
|
||||||
|
minHeight: 280,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DictionaryList />
|
||||||
|
</Content>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DictionaryPage;
|
||||||
Reference in New Issue
Block a user