品类管理查询

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<any>(null);
-  const [treeData, setTreeData] = useState<any[]>([]);
+  const [treeData, setTreeData] = useState<any[]>([]); // 保存树形数据
-  const [loading, setLoading] = useState(true);
   const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
   const actionRef = useRef<ActionType>();
   const location = useLocation();
   const params = new URLSearchParams(location.search);
   const versionId = params.get('versionId');
-console.log(location,location.state)
+  const [searchParams, setSearchParams] = useState<{ categoryName?: string; code?: string }>({});
-  console.log(versionId,'versionId')
+
-  interface DictType {
+  // 状态选项（启用/停用）
-    value: number;
+  const version_status = [
-    label: string;
-  }
-  const version_status: DictType[] = [
     { 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();
-    // 实际应传递查询参数，此处简化
+    setSearchParams(values);
-    fetchData();
+    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 (
       <>
         <Button type="text" onClick={() => handleEdit(record)}>编辑</Button>
@@ -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) => {
+        const res = await deleteCategory(id);
-          if (r?.code == 200) {
+        if (res?.code === 200) {
-            message.success('删除成功');
+          message.success('删除成功');
-            fetchData();
+          actionRef.current?.reload(); // 删除后刷新表格
-          } else {
+        } else {
-            message.error('删除失败');
+          message.error('删除失败');
-          }
+        }
-        })
-          .finally(() => actionRef.current?.reload());
       },
     });
   };
 
+  // 提交表单（新增/编辑）
   const handleSubmit = async () => {
     try {
-      console.log("--------------");
-      console.log(versionId);
       const values = await form.validateFields();
-      values.versionId = versionId;
+      values.versionId = versionId; // 携带版本ID
-      console.log(values,"")
       const isEdit = !!values.id;
-      const result = isEdit
+      const res = isEdit
         ? await updateCategory(values)
-        : await addCategory({ ...values });
+        : await addCategory(values);
-      if (result.code === 200) {
+      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 (
-    <Spin spinning={loading}>
+    <Spin spinning={false}>
+      {/* 搜索表单：品类名称 + 品类编码 + 查询/重置按钮 */}
+      <Form
+        form={searchForm}
+        layout="inline"
+        onFinish={handleSearch}
+        style={{ marginBottom: 16 }}
+      >
+        <Form.Item name="categoryName" label="品类名称">
+          <Input placeholder="请输入" />
+        </Form.Item>
+        <Form.Item name="code" label="品类编码">
+          <Input placeholder="请输入" />
+        </Form.Item>
+        <Form.Item>
+          <Button type="primary" htmlType="submit">查询</Button>
+        </Form.Item>
+        <Form.Item>
+          <Button onClick={handleReset}>重置</Button>
+        </Form.Item>
+      </Form>
+
+      {/* 品类列表：ProTable 动态加载数据（关闭内置搜索栏） */}
       <ProTable
         actionRef={actionRef}
         columns={[
           { title: '品类名称', dataIndex: 'categoryName' },
           { title: '品类编码', dataIndex: 'code' },
-          { title: '状态', dataIndex: 'status',
+          {
-            valueEnum: { '1': { text: '启用', status: '1' }, },
+            title: '状态',
-            render: (_, record) => {
+            dataIndex: 'status',
-              if (record.status === 1) {
+            render: (_, record) => record.status === 1 ? '启用' : '停用'
-                return (<>启用</>)
-              } else {
-                return (<>停用</>)
-              }
-            }
           },
           { 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)
           <Button type="primary" onClick={handleAdd}>新增品类</Button>
         ]}
         pagination={false}
+        search={false} // 👈 关键修改：关闭 ProTable 内置搜索栏
       />
 
       {/* 新增/编辑模态框 */}
       <Modal
         title={currentRecord ? '编辑品类' : '新增品类'}
-        // open={openModal}
         visible={openModal}
         onOk={handleSubmit}
         onCancel={() => setOpenModal(false)}
         width={600}
       >
         <Form form={form} layout="vertical">
-          {/* 新增时显示父节点树形选择（支持搜索） */}
+          <Form.Item name="id" hidden />
-          <Form.Item name="id" hidden>
+          <Form.Item name="parentId" hidden />
-          </Form.Item>
+          {/* 新增时显示上级树形选择（支持搜索） */}
-          <Form.Item name="parentId" hidden>
-          </Form.Item>
           {!currentRecord && (
             <Form.Item label="请选择上级" name="parentId" rules={[{ required: true }]}>
               <TreeSelect
                 placeholder="请选择上级（支持搜索）"
-                treeData={buildParentTree(treeData)}
+                treeData={buildParentTree(treeData)} // 使用最新树形数据
                 showSearch
                 treeDefaultExpandAll
                 style={{ width: '100%' }}
@@ -198,7 +205,7 @@ console.log(location,location.state)
           </Form.Item>
           <Form.Item label="品类状态" name="status" rules={[{ required: true }]}>
             <Select>
-              {version_status.map((item) => (
+              {version_status.map(item => (
                 <Select.Option key={item.value} value={item.value}>
                   {item.label}
                 </Select.Option>

src/pages/CategoryManagement/index.tsx

@@ -40,10 +40,10 @@ const NoticeList: React.FC<{}> = () => {
     { title: '名称', dataIndex: 'name',width: '10%' },//, ellipsis: true
     { title: '版本', dataIndex: 'version', width: '10%' },
     { title: '创建时间', dataIndex: 'createDate', width: '10%', valueType: 'dateTime', search: false },
-    { title: '创建人', dataIndex: 'createBy', width: '10%' },
+    { title: '创建人', dataIndex: 'createBy', width: '10%', search: false },
     { title: '最后修改时间', dataIndex: 'updateDate', width: '10%', valueType: 'dateTime', search: false },
-    { title: '修改人', dataIndex: 'updateBy', width: '10%'},
+    { title: '修改人', dataIndex: 'updateBy', width: '10%', search: false},
-    { title: '状态', dataIndex: 'status', width: '10%',
+    { title: '状态', dataIndex: 'status', width: '10%', search: false,
       valueEnum: { '1': { text: '启用', status: '1' }, },
       render: (_, record) => {
         if (record.status === 1) {