From 75fe1d491419e3b4b7134ae668faf5c01c34eea4 Mon Sep 17 00:00:00 2001 From: sunyu Date: Thu, 31 Jul 2025 11:02:33 +0800 Subject: [PATCH] =?UTF-8?q?=E5=93=81=E7=B1=BB=E7=AE=A1=E7=90=86=E6=9F=A5?= =?UTF-8?q?=E8=AF=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CategoryMaintenance.tsx | 147 +++++++++--------- src/pages/CategoryManagement/index.tsx | 6 +- 2 files changed, 80 insertions(+), 73 deletions(-) diff --git a/src/pages/CategoryManagement/components/CategoryMaintenance.tsx b/src/pages/CategoryManagement/components/CategoryMaintenance.tsx index 2550ce1..c8c17c5 100644 --- a/src/pages/CategoryManagement/components/CategoryMaintenance.tsx +++ b/src/pages/CategoryManagement/components/CategoryMaintenance.tsx @@ -1,7 +1,7 @@ -import React, { useState, useRef, useEffect } from 'react'; +import React, { useState, useRef } from 'react'; import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'; import { Button, Select, Modal, Form, Input, message, Spin, TreeSelect } from 'antd'; -import {getTreeList, addCategory, updateCategory, deleteCategory} from '../service'; +import { getTreeList, addCategory, updateCategory, deleteCategory } from '../service'; import { useLocation } from 'umi'; const CategoryList: React.FC = () => { @@ -9,53 +9,37 @@ const CategoryList: React.FC = () => { const [searchForm] = Form.useForm(); const [openModal, setOpenModal] = useState(false); const [currentRecord, setCurrentRecord] = useState(null); - const [treeData, setTreeData] = useState([]); - const [loading, setLoading] = useState(true); + const [treeData, setTreeData] = useState([]); // 保存树形数据 const [expandedKeys, setExpandedKeys] = useState([]); const actionRef = useRef(); const location = useLocation(); const params = new URLSearchParams(location.search); const versionId = params.get('versionId'); -console.log(location,location.state) - console.log(versionId,'versionId') - interface DictType { - value: number; - label: string; - } - const version_status: DictType[] = [ + const [searchParams, setSearchParams] = useState<{ categoryName?: string; code?: string }>({}); + + // 状态选项（启用/停用） + const version_status = [ { value: 1, label: '启用' }, { value: 0, label: '停用' }, ]; - useEffect(() => { - fetchData(); - }, []); - - const fetchData = async () => { - try { - setLoading(true); - const response = await getTreeList({ versionId }); - setTreeData(response.data || []); - } catch (error) { - message.error('数据加载失败'); - } finally { - setLoading(false); - } - }; - + // 点击“查询”：更新搜索参数并刷新表格 const handleSearch = () => { const values = searchForm.getFieldsValue(); - // 实际应传递查询参数，此处简化 - fetchData(); + setSearchParams(values); + actionRef.current?.reload(); // 触发 ProTable 重新请求数据 }; + // 点击“重置”：清空搜索参数并刷新表格 const handleReset = () => { searchForm.resetFields(); - fetchData(); + setSearchParams({}); + actionRef.current?.reload(); }; + // 渲染操作列（仅非一级节点显示编辑/删除） const renderOperation = (_: any, record: any) => { - if (record.level === 1) return null; // 一级节点无操作 + if (record.level === 1) return null; return ( <> @@ -64,6 +48,7 @@ console.log(location,location.state) ); }; + // 编辑品类：回显数据到表单 const handleEdit = (record: any) => { form.setFieldsValue({ id: record.id, @@ -76,52 +61,49 @@ console.log(location,location.state) setOpenModal(true); }; + // 新增品类：清空表单 const handleAdd = () => { form.resetFields(); setCurrentRecord(null); setOpenModal(true); }; + // 删除品类：弹框确认后调用接口 const handleDelete = async (id: string) => { Modal.confirm({ title: '确认删除？', onOk: async () => { - await deleteCategory(id).then((r: any) => { - if (r?.code == 200) { - message.success('删除成功'); - fetchData(); - } else { - message.error('删除失败'); - } - }) - .finally(() => actionRef.current?.reload()); + const res = await deleteCategory(id); + if (res?.code === 200) { + message.success('删除成功'); + actionRef.current?.reload(); // 删除后刷新表格 + } else { + message.error('删除失败'); + } }, }); }; + // 提交表单（新增/编辑） const handleSubmit = async () => { try { - console.log("--------------"); - console.log(versionId); const values = await form.validateFields(); - values.versionId = versionId; - console.log(values,"") + values.versionId = versionId; // 携带版本ID const isEdit = !!values.id; - const result = isEdit + const res = isEdit ? await updateCategory(values) - : await addCategory({ ...values }); - if (result.code === 200) { + : await addCategory(values); + if (res.code === 200) { message.success(isEdit ? '编辑成功' : '新增成功'); setOpenModal(false); - fetchData(); + actionRef.current?.reload(); // 操作后刷新表格 } } catch (error) { - console.log(error); message.error('操作失败'); } }; - // 构建父节点树形数据（递归生成） + // 构建树形选择器的数据源（递归处理子节点） const buildParentTree = (data: any[]): any[] => { return data.map(node => ({ value: node.id, @@ -131,26 +113,53 @@ console.log(location,location.state) }; return ( - + + {/* 搜索表单：品类名称 + 品类编码 + 查询/重置按钮 */} +
+ + + + + + + + + + + + +
+ + {/* 品类列表：ProTable 动态加载数据（关闭内置搜索栏） */} { - if (record.status === 1) { - return (<>启用) - } else { - return (<>停用) - } - } + { + title: '状态', + dataIndex: 'status', + render: (_, record) => record.status === 1 ? '启用' : '停用' }, { title: '更新时间', dataIndex: 'updateDate', valueType: 'dateTime' }, - { title: '操作', valueType: 'option', render: renderOperation } + { + title: '操作', + valueType: 'option', + render: renderOperation + } ]} - dataSource={treeData} + // 动态请求数据：结合搜索参数和 versionId + request={async () => { + const queryParams = { ...searchParams, versionId }; + const res = await getTreeList(queryParams); + setTreeData(res.data || []); // 保存树形数据（用于新增时的上级选择） + return { data: res.data || [], success: true }; + }} rowKey="id" expandedRowKeys={expandedKeys} onExpand={(expanded, record) => { @@ -162,28 +171,26 @@ console.log(location,location.state) ]} pagination={false} + search={false} // 👈 关键修改：关闭 ProTable 内置搜索栏 /> {/* 新增/编辑模态框 */} setOpenModal(false)} width={600} >
- {/* 新增时显示父节点树形选择（支持搜索） */} - - +