From 2209882466b8688022077e210d75662484d891c4 Mon Sep 17 00:00:00 2001 From: 32503 <325039231@qq.com> Date: Fri, 23 May 2025 16:06:00 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AD=97=E5=85=B8=E9=A1=B5=E9=9D=A2=E6=8F=90?= =?UTF-8?q?=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Dict/DictService.ts | 51 ++++ src/pages/Dict/DictionaryList.tsx | 386 ++++++++++++++++++++++++++++++ src/pages/Dict/DictionaryPage.tsx | 28 +++ 3 files changed, 465 insertions(+) create mode 100644 src/pages/Dict/DictService.ts create mode 100644 src/pages/Dict/DictionaryList.tsx create mode 100644 src/pages/Dict/DictionaryPage.tsx diff --git a/src/pages/Dict/DictService.ts b/src/pages/Dict/DictService.ts new file mode 100644 index 0000000..c40d842 --- /dev/null +++ b/src/pages/Dict/DictService.ts @@ -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 => { +// 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', + }); +} diff --git a/src/pages/Dict/DictionaryList.tsx b/src/pages/Dict/DictionaryList.tsx new file mode 100644 index 0000000..e430f7c --- /dev/null +++ b/src/pages/Dict/DictionaryList.tsx @@ -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 = () => { + const [dataSource, setDataSource] = useState([]); + const [form] = Form.useForm(); + const [searchForm] = Form.useForm(); + const [isModalVisible, setIsModalVisible] = useState(false); + const [modalTitle, setModalTitle] = useState(''); + const [currentId, setCurrentId] = useState(null); + const [loading, setLoading] = useState(false); + const [searchParams, setSearchParams] = useState({ + parentCode: '', + parentType: '' + }); + // 选中的行ID + const [selectedRowId, setSelectedRowId] = useState(null); + // 选中的行数据 + const [selectedRow, setSelectedRow] = useState(null); + // 展开的行ID + const [expandedRowKeys, setExpandedRowKeys] = useState([]); + // 是否为新增子节点模式 + 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 ( + { + e.stopPropagation(); + onExpand(record); + }}> + {expanded ? : } + + ); + } + 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) => ( + + + + handleDelete(record.id)} + okText="确定" + cancelText="取消" + > + + + + ), + }, + ]; + + return ( +
+
+ + + + + + + + + + + + +
+ +
+ + + + {selectedRow && ( + + 已选择: {selectedRow.dicName} + + )} +
+ + ({ + onClick: () => handleRowClick(record), + style: { + cursor: 'pointer', + backgroundColor: selectedRowId === record.id ? '#e6f7ff' : 'transparent', + }, + })} + expandable={{ + expandedRowKeys, + onExpand: handleExpand, + expandIcon, + }} + /> + + setIsModalVisible(false)} + onOk={handleSubmit} + okText="保存" + cancelText="取消" + > +
+ + {/* 使用 readOnly 替代 disabled，并添加灰色背景 */} + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default DictionaryList; diff --git a/src/pages/Dict/DictionaryPage.tsx b/src/pages/Dict/DictionaryPage.tsx new file mode 100644 index 0000000..5fba497 --- /dev/null +++ b/src/pages/Dict/DictionaryPage.tsx @@ -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 ( + + + 系统管理 + 字典管理 + + + + + + ); +}; + +export default DictionaryPage;