From 76740bb992484140342ba9c664f9bf4e277db459 Mon Sep 17 00:00:00 2001
From: sunyu <sunyu0924>
Date: Fri, 11 Jul 2025 09:06:21 +0800
Subject: [PATCH] =?UTF-8?q?=E5=93=81=E7=B1=BB=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CategoryMaintenance.tsx        | 233 +++++++++++++++++
 src/pages/CategoryManagement/index.tsx        | 238 ++++++++++++++++++
 src/pages/CategoryManagement/service.ts       |  99 ++++++++
 3 files changed, 570 insertions(+)
 create mode 100644 src/pages/CategoryManagement/components/CategoryMaintenance.tsx
 create mode 100644 src/pages/CategoryManagement/index.tsx
 create mode 100644 src/pages/CategoryManagement/service.ts

diff --git a/src/pages/CategoryManagement/components/CategoryMaintenance.tsx b/src/pages/CategoryManagement/components/CategoryMaintenance.tsx
new file mode 100644
index 0000000..908958e
--- /dev/null
+++ b/src/pages/CategoryManagement/components/CategoryMaintenance.tsx
@@ -0,0 +1,233 @@
+import React, { useState, useRef, useEffect } 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 { useLocation } from 'umi';
+
+const CategoryList: React.FC = () => {
+  const [form] = Form.useForm();
+  const [searchForm] = Form.useForm();
+  const [openModal, setOpenModal] = useState(false);
+  const [currentRecord, setCurrentRecord] = useState<any>(null);
+  const [treeData, setTreeData] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
+  const actionRef = useRef<ActionType>();
+  const location = useLocation();
+  const versionId = location.state?.versionId;
+
+  interface DictType {
+    value: string;
+    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();
+    // 实际应传递查询参数，此处简化
+    fetchData();
+  };
+
+  const handleReset = () => {
+    searchForm.resetFields();
+    fetchData();
+  };
+
+  const renderOperation = (_, record) => {
+    if (record.level === 1) return null; // 一级节点无操作
+    return (
+      <>
+        <Button type="text" onClick={() => handleEdit(record)}>编辑</Button>
+        <Button type="text" onClick={() => handleDelete(record.id)}>删除</Button>
+      </>
+    );
+  };
+
+  const handleEdit = (record: any) => {
+    form.setFieldsValue({
+      id: record.id,
+      parentId: record.parentId,
+      categoryName: record.categoryName,
+      status: record.status,
+      code: record.code,
+    });
+    setCurrentRecord(record);
+    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 handleSubmit = async () => {
+    try {
+      console.log("--------------");
+      console.log(versionId);
+      const values = await form.validateFields();
+      values.versionId = versionId;
+      console.log(values,"")
+      const isEdit = !!values.id;
+      const result = isEdit
+        ? await updateCategory(values)
+        : await addCategory({ ...values });
+      if (result.code === 200) {
+        message.success(isEdit ? '编辑成功' : '新增成功');
+        setOpenModal(false);
+        fetchData();
+      }
+    } catch (error) {
+      console.log(error);
+      message.error('操作失败');
+    }
+  };
+
+  // 构建父节点树形数据（递归生成）
+  const buildParentTree = (data: any[]): any[] => {
+    return data.map(node => ({
+      value: node.id,
+      title: node.categoryName,
+      children: node.children && buildParentTree(node.children),
+    }));
+  };
+
+  return (
+    <Spin spinning={loading}>
+      {/* 查询区域：条件靠左，按钮靠右 */}
+      <div style={{ margin: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <Form form={searchForm} layout="inline">
+          <Form.Item name="categoryName" label="品类名称">
+            <Input placeholder="请输入品类名称" />
+          </Form.Item>
+          <Form.Item name="status" label="状态">
+            <Select placeholder="请选择状态">
+              <Option value="启用">启用</Option>
+              <Option value="停用">停用</Option>
+            </Select>
+          </Form.Item>
+        </Form>
+        <div>
+          <Button type="primary" onClick={handleSearch}>查询</Button>
+          <Button onClick={handleReset} style={{ marginLeft: 8 }}>重置</Button>
+        </div>
+      </div>
+
+      {/* 树表格 */}
+      <ProTable
+        actionRef={actionRef}
+        columns={[
+          { title: '品类名称', dataIndex: 'categoryName', treeData: true },
+          { title: '品类编码', dataIndex: 'code' },
+          { title: '状态', dataIndex: 'status',
+            valueEnum: { '1': { text: '启用', status: '1' }, },
+            render: (_, record) => {
+              if (record.status === 1) {
+                return (<>启用</>)
+              } else {
+                return (<>停用</>)
+              }
+            }
+          },
+          { title: '更新时间', dataIndex: 'updateDate', valueType: 'dateTime' },
+          { title: '操作', valueType: 'option', render: renderOperation }
+        ]}
+        treeData={true}
+        dataSource={treeData}
+        rowKey="id"
+        expandedRowKeys={expandedKeys}
+        onExpand={(expanded, record) => {
+          setExpandedKeys(prev =>
+            expanded ? [...prev, record.id] : prev.filter(key => key !== record.id)
+          );
+        }}
+        toolBarRender={() => (
+          <Button type="primary" onClick={handleAdd}>新增品类</Button>
+        )}
+        pagination={false}
+      />
+
+      {/* 新增/编辑模态框 */}
+      <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>
+          <Form.Item name="parentId" hidden>
+          </Form.Item>
+          {!currentRecord && (
+            <Form.Item label="请选择上级" name="parentId" rules={[{ required: true }]}>
+              <TreeSelect
+                placeholder="请选择上级（支持搜索）"
+                treeData={buildParentTree(treeData)}
+                showSearch
+                treeDefaultExpandAll
+                style={{ width: '100%' }}
+              />
+            </Form.Item>
+          )}
+          <Form.Item label="品类名称" name="categoryName" rules={[{ required: true }]}>
+            <Input />
+          </Form.Item>
+          <Form.Item label="品类编码" name="code" rules={[{ required: true }]}>
+            <Input placeholder="请输入编码" />
+          </Form.Item>
+          <Form.Item label="品类状态" name="status" rules={[{ required: true }]}>
+            <Select>
+              {version_status.map((item) => (
+                <Option key={item.value} value={item.value}>
+                  {item.label}
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
+        </Form>
+      </Modal>
+    </Spin>
+  );
+};
+
+export default CategoryList;
diff --git a/src/pages/CategoryManagement/index.tsx b/src/pages/CategoryManagement/index.tsx
new file mode 100644
index 0000000..fff3f35
--- /dev/null
+++ b/src/pages/CategoryManagement/index.tsx
@@ -0,0 +1,238 @@
+import React, {useRef, useState} from 'react';
+import ProTable, {ActionType, ProColumns} from '@ant-design/pro-table';
+import { getPage,getDataById,deleteVersion,addVersion,updateVersion } from './service';
+import {Button, Form, Input, message, Modal, PageHeader, Select, Spin} from 'antd';
+import { history } from 'umi';
+import TextArea from "antd/lib/input/TextArea";
+import {getDicData} from "@/utils/session";
+
+const NoticeList: React.FC<{}> = () => {
+  const [title, setTitle] = useState<string>('');
+  const [open, setOpen] = useState<boolean>(false);
+
+  const [spin, spinSet] = useState<boolean>(false);
+  const actionRef = useRef<ActionType>();
+  const [form] = Form.useForm();
+  //获取字典
+  const getDict: any = getDicData();
+  //查询分页数据
+  const [pageData, pageDataSet] = useState<any>({
+    pageNo: 1,
+    pageSize: 10
+  });
+  const layout = {
+    labelCol: { span: 6 },
+    wrapperCol: { span: 13 },
+  };
+  const dictData = JSON.parse(getDict);
+  interface DictType {
+    value: string;
+    label: string;
+  }
+  const version_status: DictType[] = [
+    { value: 1, label: '启用' },
+    { value: 0, label: '停用' },
+  ];
+
+  //委托列表
+  const columns: ProColumns<any>[] = [
+    { title: '序号', valueType: 'index', width: 50, },
+    { 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: 'updateDate', width: '10%', valueType: 'dateTime', search: false },
+    { title: '修改人', dataIndex: 'updateBy', width: '10%'},
+    { title: '状态', dataIndex: 'status', width: '10%',
+      valueEnum: { '1': { text: '启用', status: '1' }, },
+      render: (_, record) => {
+        if (record.status === 1) {
+          return (<>启用</>)
+        } else {
+          return (<>停用</>)
+        }
+      }
+    },
+    {
+      title: '操作', width: '9%',
+      valueType: 'option',
+      render: (_, record) => [
+        <Button type='text' onClick={() => { handleUpdate(record) }}>修改</Button>,
+        <Button type='text' onClick={() => { maintainCategory(record) }}>维护品类</Button>,
+        <Button type='text' onClick={() => { handleDelete(record.id) }}>删除</Button>
+      ]
+    },
+  ];
+
+  const handleSubmit = async () => {
+    console.log("提交按钮触发")
+    try {
+      const values = await form.validateFields();
+      if (values.id) {
+        await updateVersion(values).then((r: any) => {
+          if (r?.code == 200) {
+            message.success('修改成功');
+          } else {
+            message.error('修改失败');
+          }
+        });
+      } else {
+
+        await addVersion(values).then((r: any) => {
+          if (r?.code == 200) {
+            message.success('新增成功');
+          } else {
+            message.error('新增失败');
+          }
+        });
+      }
+      closeModal();
+    } catch (error) {
+      console.log("错误失败！")
+      console.error(error);
+    }
+  };
+
+  const checkSupModal = (
+    <Modal
+      title={title}
+      visible={open}
+      width="70%"
+      centered
+      destroyOnClose={true}
+      bodyStyle={{ maxHeight: window.innerHeight * 0.96 - 108, overflowY: 'auto', paddingTop: 0 }}
+      // footer={<Button onClick={() => setOpen(false)}>关闭</Button>}
+      onOk={handleSubmit}
+      onCancel={() => closeModal()}
+    >
+      <Form form={form} {...layout}>
+        <Form.Item label="主键id" name="id" hidden>
+          <Input />
+        </Form.Item>
+        <Form.Item label="名称" name="name" rules={[{ required: true }]} >
+          <Input />
+        </Form.Item>
+        <Form.Item label="版本" name="version" rules={[{ required: true }]}>
+          <Input />
+        </Form.Item>
+        <Form.Item label="状态" name="status" rules={[{ required: true }]}>
+          <Select>
+            {version_status.map((item) => (
+              <Option key={item.value} value={item.value}>
+                {item.label}
+              </Option>
+            ))}
+          </Select>
+        </Form.Item>
+        <Form.Item label="备注" name="label" >
+          <TextArea />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+
+  const handleUpdate = async (record: any) => {
+    form.resetFields();
+    const version = await getDataById(record.id);
+    console.log("version---------"+version)
+    form.setFieldsValue({
+      ...version.data,
+    });
+    // console.log("version---------"+version)
+    setOpen(true);
+    setTitle('修改品类版本');
+  };
+
+  const maintainCategory = async (record: any) => {
+    const versionId = record.id;
+    // console.log(versionId,'versionId')
+    // 使用history.push跳转到新页面，并传递id参数
+
+    history.push({
+      pathname: '/categoryMaintenance',
+      state: { versionId: versionId }
+    });
+  };
+
+  // 删除操作
+  const handleDelete = (id: string) => {
+    Modal.confirm({
+      title: '确认删除该品类版本？',
+      onOk: async () => {
+        await deleteVersion(id).then((r: any) => {
+          if (r?.code == 200) {
+            message.success('删除成功');
+          } else {
+            message.error('删除失败');
+          }
+        })
+          .finally(() => actionRef.current?.reload());
+      },
+    });
+  };
+
+
+
+  const handleAdd = async () => {
+    form.resetFields();
+    setOpen(true);
+    setTitle('创建品类版本');
+  };
+
+  const closeModal = async () => {
+    actionRef.current?.reload();
+    form.resetFields();
+    // setCheckedKeys([]);
+    setOpen(false);
+  };
+
+  return (
+    <Spin spinning={spin}>
+      <PageHeader title="创建品类版本" />
+      <div style={{ maxHeight: innerHeight - 130, height: innerHeight - 130 }} className='xsy-entrust bgCWhite'>
+        <ProTable<any>
+          actionRef={actionRef}//action触发后更新表格
+          columns={columns}//表格
+          options={false}
+          bordered={false}
+          className='tableSearch'
+          size='small'
+          search={{ labelWidth: 'auto', span: 6 }}
+          request={(params) =>
+            getPage({
+              ...params,
+              basePageRequest: { pageNo: pageData.pageNo, pageSize: pageData.pageSize },
+            }).then((res) => {
+              const result = {
+                data: res.data.records,
+                total: res.data.total,
+                success: res.success,
+                pageSize: res.data.size,
+                current: res.data.current
+              }
+              return result;
+            })
+          }
+          toolBarRender={() => [
+            <Button onClick={() => { handleAdd() }} type="primary">
+              新增
+            </Button>,
+          ]
+          }
+          pagination={{
+            defaultPageSize: 10,
+            showSizeChanger: false,
+            onChange: (page, pageSize) => pageDataSet({ pageNo: page, pageSize: pageSize }),
+            onShowSizeChange: (current, size) => pageDataSet({ pageNo: current, pageSize: size }),
+          }}
+          onReset={() => { pageDataSet({ pageNo: 1, pageSize: 10 }) }}
+        />
+        {checkSupModal}
+      </div>
+      {/* 查看 */}
+    </Spin >
+  );
+
+}
+
+export default NoticeList;
diff --git a/src/pages/CategoryManagement/service.ts b/src/pages/CategoryManagement/service.ts
new file mode 100644
index 0000000..4023538
--- /dev/null
+++ b/src/pages/CategoryManagement/service.ts
@@ -0,0 +1,99 @@
+import request from "@/utils/request";
+
+/**
+ * 查询数据并分页
+ * @param params
+ */
+export async function getPage(params: any) {
+  return request('/api/sys-manager-ebtp-project/v1/coscocategoryversion/getPage', {
+    method: 'post',
+    data: params,
+  });
+}
+
+/**
+ * 新增品类版本
+ * @param params
+ */
+export async function addVersion(params: any) {
+  return request('/api/sys-manager-ebtp-project/v1/coscocategoryversion', {
+    method: 'post',
+    data: params,
+  });
+}
+
+/**
+ * 修改品类版本
+ * @param params
+ */
+export async function updateVersion(params: any) {
+  return request('/api/sys-manager-ebtp-project/v1/coscocategoryversion/update', {
+    method: 'post',
+    data: params,
+  });
+}
+
+/**
+ * 根据id查询品类版本详情
+ * @param params
+ */
+export async function getDataById(id: any) {
+  return request(`/api/sys-manager-ebtp-project/v1/coscocategoryversion/${id}`, {
+    method: 'get',
+  });
+}
+
+/**
+ * 根据id删除品类版本详情
+ * @param params
+ */
+export async function deleteVersion(id: any) {
+  return request(`/api/sys-manager-ebtp-project/v1/coscocategoryversion/delete/${id}`, {
+    method: 'get',
+  });
+}
+
+
+/**
+ * 查询品类维护页面列表数据 树结构
+ * @param params
+ */
+export async function getTreeList(params: any) {
+  return request('/api/sys-manager-ebtp-project/v1/coscocategorymaintenance/getTreeList', {
+    method: 'post',
+    data: params,
+  });
+}
+
+/**
+ * 删除品类维护
+ * @param params
+ */
+export async function deleteCategory(id: any) {
+  return request(`/api/sys-manager-ebtp-project/v1/coscocategorymaintenance/delete/${id}`, {
+    method: 'get',
+  });
+}
+
+
+/**
+ * 新增品类维护
+ * @param params
+ */
+export async function addCategory(params: any) {
+  return request('/api/sys-manager-ebtp-project/v1/coscocategorymaintenance', {
+    method: 'post',
+    data: params,
+  });
+}
+
+/**
+ * 修改品类维护
+ * @param params
+ */
+export async function updateCategory(params: any) {
+  return request('/api/sys-manager-ebtp-project/v1/coscocategorymaintenance/update', {
+    method: 'post',
+    data: params,
+  });
+}