分类管理开发

src/api/interface/categoryManage.ts

@@ -9,20 +9,25 @@ export interface GoodsInfo {
 
 // 分类列表
 export interface categoryEntity {
-  goodsMasterType: string;
+  id: number;
+  directoryId: number;
+  classifyName: string;
+  pid: number;
+  description?: any;
   icon: string;
-  remark: string;
-  desc: string;
+  remark?: any;
+  type: number;
   createTime: string;
-  goodsMasterTypeId: number | string;
-  goodsSlaveTypeDTO: Partial<categoryEntity>[];
-  pid: number | string;
+  children: any[];
   isADD?: boolean;
+  level?: number;
 }
 
 // 分类目录
 export interface categoryDec {
-  defaultType: number;
-  id: number;
-  sortName: string;
+  "id": number,
+  "directoryName": string,
+  "pid": null,
+  "type": number,
+  directoryType: string
 }

src/api/modules/categoryManage.ts

@@ -4,28 +4,38 @@ import { PaginationEntity } from '~/common/interface/PaginationEntity';
 export class CategoryManageAPI {
   // 分类管理
   // 分类目录
-  static directoryList = () => {
-    return axios.get('uavgoods/directory/directoryList');
+  static directoryList = (params) => {
+    return axios.get("pms/classify/directoryList", {
+      params
+    });
   };
 
+  //目录列表不含分页
+  static getDirectoryList = (params) => {
+    return axios.get("pms/classify/getDirectoryList", {
+      params
+    });
+  };
+
+
   // 新增或编辑目录
-  static addOrEditDirectory = (data: { id?: number; directoryName: string }[]) => {
-    return axios.post('uavgoods/directory/addOrEditDirectory', data);
+  static addOrEditDirectory = (data: { id?: number; directoryName: string, type: number, relevance: number }[]) => {
+    return axios.post('/pms/classify/addOrEditDirectory', data);
   };
 
   // 删除目录
   static removeDirectory = (id: number) => {
-    return axios.get('uavgoods/directory/removeDirectory', { params: { id } });
+    return axios.get('/pms/classify/removeDirectory', { params: { id } });
   };
 
   // 分类新增
   static addClassification = (data: object): any => {
-    return axios.post('uavgoods/mgoods/addClassification', data);
+    return axios.post('/pms/classify/addClassification', data);
   };
 
   // 分类列表
-  static getListGoodsTypeList = (type: number): any => {
-    return axios.get(`uavgoods/mgoods/getGoodsTypeInfoList/${type}`);
+  static getClassificationList = (data: object): any => {
+    return axios.post(`/pms/classify/getClassificationList`, data);
   };
 
   // PC端-根据分类信息新增自定义规格-下拉选项 （只查产品类型）
@@ -40,7 +50,7 @@ export class CategoryManageAPI {
 
   // 分类修改
   static updateClassification = (data: object): any => {
-    return axios.post('uavgoods/mgoods/updateClassification', data);
+    return axios.post('/pms/classify/updateClassification', data);
   };
 
   // 删除分类
@@ -65,14 +75,14 @@ export class CategoryManageAPI {
 
   // 分类上下移动
   static exchangeSortType = (params: object): any => {
-    return axios.get('uavgoods/mgoods/exchangeSortType', { params });
+    return axios.get('/pms/classify/exchangeSortType', { params });
   };
 
   // 分类详情
   static getGoodsTypeDetail = (
-    obj: { id: number } & Pick<PaginationEntity, 'pageNo' | 'pageSize'>,
+    obj: { id: number },
   ) => {
-    return axios.get('uavgoods/mgoods/getGoodsTypeDetail', { params: obj });
+    return axios.get('/pms/classify/getClassifyDetails', { params: obj });
   };
 
   // 分类详情-安全编码开发修改

src/api/request.ts

@@ -4,9 +4,9 @@ import Cookies from 'js-cookie';
 import { Base64 } from 'js-base64';
 
 const { VITE_REQUEST_BASE_URL } = import.meta.env;
-export const uploadImgURL = `${VITE_REQUEST_BASE_URL}ossservlet/upload/imgOss`;
-export const uploadVideoURL = `${VITE_REQUEST_BASE_URL}ossservlet/upload/videoOss`;
-export const uploadFileURL = `${VITE_REQUEST_BASE_URL}ossservlet/upload/oss`;
+export const uploadImgURL = `${VITE_REQUEST_BASE_URL}/pms/upload/imgOsses`;
+export const uploadVideoURL = `${VITE_REQUEST_BASE_URL}/ossservlet/upload/videoOss`;
+export const uploadFileURL = `${VITE_REQUEST_BASE_URL}/ossservlet/upload/oss`;
 const service = axios.create({
   baseURL: VITE_REQUEST_BASE_URL,
   timeout: 6000,

src/pages/categoryManage/components/addCgyDailog/index.tsx → src/pages/categoryManage/category/components/addCgyDailog/index.tsx

@@ -62,9 +62,9 @@ function Index(props: any) {
       setFileList([]);
       form.setFieldsValue({ icon: '' });
     } else if (val.file.status === 'done') {
-      setImageUrl(val.file.response.result[0]);
+      setImageUrl(val.file.response.result?.filePath);
       setFileList(val.fileList);
-      form.setFieldsValue({ icon: val.file.response.result[0] });
+      form.setFieldsValue({ icon: val.file.response.result?.filePath });
     } else {
       setFileList(val.fileList);
     }
@@ -85,7 +85,7 @@ function Index(props: any) {
   return (
     <Modal
       title={props.title}
-      visible={props.isVisable}
+      open={props.isVisable}
       onOk={() => props.handleOk()}
       onCancel={() => props.handleCancel()}
     >
@@ -101,7 +101,7 @@ function Index(props: any) {
       >
         <Form.Item
           label='分类名称'
-          name='groupName'
+          name='classifyName'
           rules={[{ required: true, message: '请输入分类名称' }]}
         >
           <Input placeholder='请输入分类名称' maxLength={15} allowClear />

src/pages/categoryManage/components/addOrEditDec copy/index.tsx → src/pages/categoryManage/category/components/addOrEditDec copy/index.tsx

@@ -106,7 +106,7 @@ const AddOrEditDec: React.FC<PropsType & selfPropsType> = ({
   return (
     <Modal
       title='目录管理'
-      visible={isModalVisible}
+      open={isModalVisible}
       onOk={directorySureEvent}
       onCancel={directoryCancel}
     >

src/pages/categoryManage/components/deleteCgyDailog/index.tsx → src/pages/categoryManage/category/components/deleteCgyDailog/index.tsx

@@ -4,7 +4,7 @@ function Index(props: any) {
   return (
     <Modal
       title='分类删除'
-      visible={props.isDeleteVisable}
+      open={props.isDeleteVisable}
       onOk={() => props.deleteHandleOk()}
       onCancel={() => props.deleteHandleCancel()}
     >

src/pages/categoryManage/detail/index.tsx → src/pages/categoryManage/category/detail/index.tsx

@@ -21,6 +21,7 @@ import { categoryDetailEntity, GoodsInfo } from '~/api/modules/goods';
 import { CategoryManageAPI } from '~/api';
 import useOption from '~/common/hook/optionHook';
 import './index.scss';
+import { useLocation, useParams, useNavigate } from 'react-router-dom';
 
 const CategoryDetail: FC = (props: any) => {
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
@@ -32,7 +33,7 @@ const CategoryDetail: FC = (props: any) => {
   const [categoryId, setCategoryId] = useState<number>(0);
   const [isEdit, setIsEdit] = useState<boolean>(false);
   const [detailForm] =
-    Form.useForm<Pick<categoryDetailEntity, 'description' | 'groupName' | 'icon'>>();
+    Form.useForm<Pick<categoryDetailEntity, 'description' | 'classifyName' | 'icon'>>();
   const [fileList, setFileList] = useState<any>([]);
   const [goodsInfo, setGoodsInfo] = useState<GoodsInfo[]>([]);
   const [viewerVisible, setViewerVisible] = useState<boolean>(false);
@@ -45,6 +46,12 @@ const CategoryDetail: FC = (props: any) => {
   const [currentImgList, setcurrentImgList]: any = useState([]);
   const [sortTypeId, setSortTypeId] = useState<number>(-1);
   const [pid, setPid] = useState<number>(-1);
+  const { id } = useParams();
+  const _id = Number(id);
+  const location = useLocation();
+  const searchParams: any = new URLSearchParams(location.search);
+  const navigate = useNavigate();
+
   const columns: ColumnsType<GoodsInfo> = [
     {
       title: '序号',
@@ -111,19 +118,19 @@ const CategoryDetail: FC = (props: any) => {
   const btnCode = useOption(22111);
   useEffect(() => {
     // 分页数据
-    getGoodsTypeDetail(props.match.params.id);
+    getGoodsTypeDetail(_id);
   }, [pagination]);
 
   useEffect(() => {
     // 全部数据
-    getAllGoodsTypeDetail(props.match.params.id);
-    setSortTypeId(Number(qs.parse(props.location.search).sortTypeId));
-    setPid(Number(qs.parse(props.location.search).pid));
-    setCategoryId(props.match.params.id);
+    getAllGoodsTypeDetail(_id);
+    setSortTypeId(Number(searchParams.directoryId));
+    setPid(Number(searchParams.pid));
+    setCategoryId(_id);
   }, []);
 
   const backRoute = () => {
-    props.history.go(-1);
+    navigate(-1);
   };
   //   关联商品新增
   const addModalShowEvent = () => {
@@ -139,7 +146,7 @@ const CategoryDetail: FC = (props: any) => {
   const getGoodsTypeDetail = async (id: number) => {
     const res: any = await CategoryManageAPI.getGoodsTypeDetail({ id, ...pagination });
     detailForm.setFieldsValue({
-      groupName: res.result.groupName ? res.result.groupName : undefined,
+      classifyName: res.result.classifyName ? res.result.classifyName : undefined,
       description: res.result.description ? res.result.description : undefined,
       icon: res.result.icon ? res.result.icon : '',
     });
@@ -160,10 +167,8 @@ const CategoryDetail: FC = (props: any) => {
   const getAllGoodsTypeDetail = async (id: number) => {
     const res: any = await CategoryManageAPI.getGoodsTypeDetail({
       id,
-      pageNo: 1,
-      pageSize: 99999,
     });
-    setAllGoodsInfo(res.result.goodsInfo || []);
+    setAllGoodsInfo(res.result || []);
   };
   // 自定义上传
   const selfUploadRequest = async (val: any) => {
@@ -232,7 +237,7 @@ const CategoryDetail: FC = (props: any) => {
     });
     if (res.code === '200') {
       message.success('修改成功');
-      getGoodsTypeDetail(props.match.params.id);
+      getGoodsTypeDetail(_id);
     }
   };
 
@@ -246,11 +251,11 @@ const CategoryDetail: FC = (props: any) => {
   const sureChangeDetailInfo = () => {
     detailForm
       .validateFields()
-      .then(async (value: Pick<categoryDetailEntity, 'description' | 'groupName' | 'icon'>) => {
+      .then(async (value: Pick<categoryDetailEntity, 'description' | 'classifyName' | 'icon'>) => {
         // console.log("数据--->", value);
         const res = await CategoryManageAPI.updateClassification({
           // description:value.description,
-          // groupName:value.groupName,
+          // classifyName:value.classifyName,
           // icon:fileList.length?fileList[0].url:'',
           ...value,
           sortTypeId,
@@ -378,13 +383,13 @@ const CategoryDetail: FC = (props: any) => {
         <Form form={detailForm} labelCol={{ span: 2 }} wrapperCol={{ span: 5 }}>
           <Form.Item
             label='行业名称'
-            name='groupName'
+            name='classifyName'
             rules={[{ required: true, message: '请输入行业名称' }]}
           >
             {isEdit ? (
               <Input placeholder='请输入行业名称' disabled={!isEdit} maxLength={15} />
             ) : (
-              <span>{detailData?.groupName}</span>
+              <span>{detailData?.classifyName}</span>
             )}
           </Form.Item>
           <Form.Item label='分类描述' name='description'>
@@ -452,7 +457,7 @@ const CategoryDetail: FC = (props: any) => {
         <Table
           size='small'
           columns={
-            Number(qs.parse(props.location.search).sortTypeId) === 1
+            Number(searchParams.directoryId) === 1
               ? columns.filter((item: ColumnType<GoodsInfo>) => item.title != '安全编码开关')
               : columns
           }

src/pages/categoryManage/components/addOrEditDec/index.tsx

-import { Modal, Form, Input, Button, Row, Col, message } from 'antd';
-import React, { useEffect, useState } from 'react';
-
-import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
-import { PropsType } from '~/common/interface/modal';
-import { categoryDec } from '~/api/modules/goods';
-import { CategoryManageAPI } from '~/api';
-
-interface selfPropsType {
-  directoryList: categoryDec[];
-  refreshDec: Function;
-}
-
-const AddOrEditDec: React.FC<PropsType & selfPropsType> = ({
-  isModalVisible,
-  handleOk,
-  handleCancel,
-  directoryList,
-  refreshDec,
-}) => {
-  const [form] = Form.useForm<any>();
-  // 表单目录标题列表
-  const [addOrEditDirectoryList, setAddOrEditDirectoryList] = useState<categoryDec[]>([]);
-  // 是否点击删除按钮
-  const [isClickDle, setIsClickDle] = useState<boolean>(false);
-  useEffect(() => {
-    if (directoryList.length != 0 && !isClickDle) {
-      setAddOrEditDirectoryList(directoryList);
-      const defaultFormValue = directoryList.reduce((pre: any, cur: categoryDec) => {
-        Object.keys(cur).map((item: string) => {
-          if (item === 'id') {
-            pre[cur[item]] = cur.sortName;
-          }
-        });
-        return pre;
-      }, {});
-      form.setFieldsValue(defaultFormValue);
-    }
-  }, [directoryList]);
-  // 新增或修改目录
-  const addDirectoryTitle = () => {
-    const decList: categoryDec[] = [...addOrEditDirectoryList].sort(
-      (a: categoryDec, b: categoryDec) => a.id - b.id,
-    );
-    setAddOrEditDirectoryList([
-      ...addOrEditDirectoryList,
-      {
-        id: decList[decList.length - 1].id + 1,
-        defaultType: 1,
-        sortName: '',
-      },
-    ]);
-  };
-  // 删除目录
-  const deleteDirectory = async (id: number) => {
-    const bol: boolean = directoryList.some((item: categoryDec) => item.id === id);
-    const index = addOrEditDirectoryList.findIndex((item: categoryDec) => item.id === id);
-    if (bol) {
-      const res: any = await CategoryManageAPI.removeDirectory(id);
-      if (res.code === '200') {
-        message.success('删除成功');
-        setIsClickDle(true);
-        refreshDec(id);
-      } else {
-        return message.warning(res.message);
-      }
-    }
-    const obj: any = {};
-    obj[id] = undefined;
-    form.setFieldsValue(obj);
-    addOrEditDirectoryList.splice(index, 1);
-    setAddOrEditDirectoryList([...addOrEditDirectoryList]);
-  };
-  const directorySureEvent = () => {
-    form.validateFields().then(async (value: any) => {
-      const requestList = Object.keys(value).reduce((pre: any, cur: string) => {
-        const bol: boolean = directoryList.some((item: any) => item.id === Number(cur));
-        if (bol) {
-          pre.push({
-            id: Number(cur),
-            directoryName: value[cur],
-          });
-        } else {
-          pre.push({
-            directoryName: value[cur],
-          });
-        }
-        return pre;
-      }, []);
-      const res: any = await CategoryManageAPI.addOrEditDirectory(requestList);
-      if (res.code === '200') {
-        message.success('操作成功');
-        form.resetFields();
-        setIsClickDle(false);
-        handleOk();
-      } else {
-        message.warning(res.message);
-      }
-    });
-  };
-  const directoryCancel = () => {
-    form.resetFields();
-    setIsClickDle(false);
-    handleCancel();
-  };
-  return (
-    <Modal
-      title='目录管理'
-      visible={isModalVisible}
-      onOk={directorySureEvent}
-      onCancel={directoryCancel}
-    >
-      <Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
-        <Form.Item label='添加目录' labelCol={{ span: 4 }} wrapperCol={{ span: 16 }}>
-          <Button icon={<PlusOutlined />} onClick={addDirectoryTitle} />
-        </Form.Item>
-        {addOrEditDirectoryList.map((item: categoryDec) => (
-          <Row key={item.id} gutter={{ xs: 8, sm: 16, md: 24 }}>
-            <Col span={16}>
-              <Form.Item
-                label='目录名称'
-                name={item.id}
-                rules={[{ required: true, message: '请输入目录名称' }]}
-              >
-                <Input placeholder='请输入目录名称' maxLength={30} />
-              </Form.Item>
-            </Col>
-            <Col>
-              {item.defaultType ? (
-                <Button
-                  icon={<MinusOutlined />}
-                  type='primary'
-                  onClick={() => deleteDirectory(item.id)}
-                />
-              ) : (
-                ''
-              )}
-            </Col>
-          </Row>
-        ))}
-      </Form>
-    </Modal>
-  );
-};
-
-export default AddOrEditDec;

src/pages/categoryManage/directoryManage/components/addOrEditDec/index.tsx

+import {
+  Modal,
+  Form,
+  Input,
+  Button,
+  Row,
+  Col,
+  message,
+  Select,
+  RadioChangeEvent,
+  Radio,
+  Space,
+} from 'antd';
+import React, { useEffect, useState } from 'react';
+
+import { PropsType } from '~/common/interface/modal';
+import { categoryDec } from '~/api/modules/goods';
+import { CategoryManageAPI } from '~/api';
+
+const typeOptions = [
+  {
+    value: 0,
+    label: '通用分类',
+  },
+  {
+    value: 1,
+    label: '作业服务分类',
+  },
+  {
+    value: 2,
+    label: '设备分类',
+  },
+  {
+    value: 3,
+    label: '飞手分类',
+  },
+  {
+    value: 4,
+    label: '商城分类',
+  },
+];
+
+interface selfPropsType {
+  isModalVisible: boolean;
+  handleOk?: () => void;
+  handleCancel?: () => void;
+  editData?: categoryDec; //编辑数据
+}
+
+const AddOrEditDec: React.FC<PropsType & selfPropsType> = ({
+  isModalVisible,
+  handleOk,
+  handleCancel,
+  editData,
+}) => {
+  const [form] = Form.useForm<any>();
+  const [hasPid, setHasPid] = useState(false); //是否有上级目录
+  const [submitLoading, setSubmitLoading] = useState(false); //提交按钮的loading
+  const [directoryOptions, setDirectoryOptions] = useState([]); //目录options
+  const id = editData?.id;
+
+  useEffect(() => {
+    if (isModalVisible) {
+      form.setFieldValue('type', editData.type);
+      form.setFieldValue('pid', editData.pid);
+      form.setFieldValue('directoryName', editData.directoryName);
+      onChangeType(editData.type);
+
+      if (editData.pid) {
+        setHasPid(true);
+      } else {
+        setHasPid(false);
+      }
+    }
+  }, [isModalVisible]);
+
+  const onChangeType = (value) => {
+    console.log('value', value);
+    form.resetFields(['pid']);
+    CategoryManageAPI.directoryList({ pageNo: 1, pageSize: 999, type: value }).then((res) => {
+      setDirectoryOptions(res.result?.list || []);
+    });
+  };
+
+  //提交
+  const onFinish = async () => {
+    const values = await form.validateFields();
+    console.log('values', values);
+    setSubmitLoading(true);
+    try {
+      const res = await CategoryManageAPI.addOrEditDirectory({
+        ...values,
+        id,
+        pid: hasPid ? values.pid : null,
+      });
+      res.code == '200' && message.success('新增成功');
+      handleOk();
+      setTimeout(() => {
+        form.resetFields();
+      }, 500);
+    } catch (e) {}
+    setSubmitLoading(false);
+  };
+
+  return (
+    <Modal
+      title='新增目录'
+      open={isModalVisible}
+      onOk={onFinish}
+      onCancel={() => {
+        form.resetFields();
+        handleCancel();
+      }}
+      okButtonProps={{ loading: submitLoading }}
+    >
+      <Form
+        form={form}
+        labelCol={{ span: 6 }}
+        wrapperCol={{ span: 16 }}
+        style={{ marginBottom: 40 }}
+      >
+        <Form.Item label='分类模块' name='type' rules={[{ required: true }]}>
+          <Select options={typeOptions} allowClear={true} onChange={onChangeType}></Select>
+        </Form.Item>
+        <Form.Item label='目录类型'>
+          <Radio.Group onChange={(e: RadioChangeEvent) => setHasPid(e.target.value)} value={hasPid}>
+            <Radio value={false}>无关联目录</Radio>
+            <Radio value={true}>有关联目录</Radio>
+          </Radio.Group>
+        </Form.Item>
+        {hasPid && (
+          <Form.Item label='上级目录' name='pid' rules={[{ required: true }]}>
+            <Select
+              options={directoryOptions}
+              fieldNames={{ label: 'directoryName', value: 'id' }}
+              allowClear={true}
+            ></Select>
+          </Form.Item>
+        )}
+
+        <Form.Item label='目录名称' name='directoryName' rules={[{ required: true }]}>
+          <Input placeholder='请输入目录名称' allowClear={true}></Input>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default AddOrEditDec;

src/pages/categoryManage/directoryManage/index.tsx

+import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
+import { Tag, Space, Button, Table, Pagination, message, Modal } from 'antd';
+import { ColumnsType, TablePaginationConfig } from 'antd/es/table';
+import type { FilterValue, SorterResult } from 'antd/es/table/interface';
+import { FC, useEffect, useState } from 'react';
+import { CategoryManageAPI } from '~/api';
+import { categoryEntity, categoryDec } from '~/api/interface/categoryManage';
+import AddOrEditDec from './components/addOrEditDec';
+
+interface DataType {
+  title: string;
+  dataIndex: string;
+  key: string;
+  align: string;
+}
+
+const typeOptions = [
+  {
+    value: 0,
+    label: '通用分类',
+  },
+  {
+    value: 1,
+    label: '作业服务分类',
+  },
+  {
+    value: 2,
+    label: '设备分类',
+  },
+  {
+    value: 3,
+    label: '飞手分类',
+  },
+  {
+    value: 4,
+    label: '商城分类',
+  },
+];
+
+const DirectoryManage: FC = (props: any) => {
+  const [data, setData] = useState<categoryDec[]>(); //table数据
+  const [loading, setLoading] = useState(false); //table获取数据的loading
+  const [pagination, setPagination] = useState<TablePaginationConfig>({
+    current: 1,
+    pageSize: 10,
+    total: 0,
+    showSizeChanger: true,
+    showQuickJumper: true,
+    showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
+  });
+  //目录modal
+  const [isAddOrEditDecModal, setIsAddOrEditDecModal] = useState<boolean>(false);
+  const [reload, setReload] = useState(false);
+  const [editData, setEditData] = useState<categoryDec | null>(null);
+
+  const columns: ColumnsType<DataType> = [
+    {
+      title: '目录名称',
+      dataIndex: 'directoryName',
+      key: 'directoryName',
+      align: 'center',
+    },
+    {
+      title: '分类模块',
+      dataIndex: 'type',
+      key: 'type',
+      align: 'center',
+      render: (value) => {
+        let find = typeOptions.find((item) => {
+          return item.value == value;
+        });
+        return <div>{find?.label}</div>;
+      },
+    },
+    {
+      title: '目录类型',
+      dataIndex: 'directoryType',
+      key: 'directoryType',
+      align: 'center',
+    },
+    {
+      title: '上级目录',
+      dataIndex: 'relevanceName',
+      key: 'relevanceName',
+      align: 'center',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      render: (_, record) => (
+        <Space size='middle'>
+          <Button
+            type='link'
+            icon={<EditOutlined />}
+            onClick={() => {
+              console.log('record', record);
+              setEditData(record);
+              setIsAddOrEditDecModal(true);
+            }}
+          >
+            编辑
+          </Button>
+          <Button type='link' danger icon={<DeleteOutlined />} onClick={() => onDel(record.id)}>
+            删除
+          </Button>
+        </Space>
+      ),
+      align: 'center',
+    },
+  ];
+
+  // 目录弹窗
+  const showDecModal = () => {
+    setEditData(null);
+    setIsAddOrEditDecModal(true);
+  };
+  const addOrEditDecHandleOk = () => {
+    getDirectoryList();
+    setIsAddOrEditDecModal(false);
+  };
+  const addOrEditDecHandleCancel = () => {
+    setIsAddOrEditDecModal(false);
+  };
+
+  //获取所有目录列表
+  const getDirectoryList = () => {
+    setLoading(true);
+    CategoryManageAPI.directoryList({
+      pageNo: pagination!.current!,
+      pageSize: pagination!.pageSize!,
+    })
+      .then((res) => {
+        setData(
+          res.result?.list.map((item: categoryDec) => {
+            if (item.pid) {
+              item.directoryType = '有关联用户';
+            } else {
+              item.directoryType = '无关联用户';
+            }
+            return item;
+          }) || [],
+        );
+        setLoading(false);
+        setPagination({
+          ...pagination,
+          current: res.result.pageNo,
+          pageSize: res.result.pageSize,
+          total: res.result.totalCount,
+        });
+      })
+      .catch((err) => {
+        setData([]);
+        setLoading(false);
+      });
+  };
+
+  // 删除
+  const onDel = (id: number) => {
+    Modal.confirm({
+      title: '目录删除',
+      content: '确认删除该目录?',
+      onOk() {
+        CategoryManageAPI.removeDirectory(id).then((res) => {
+          if (res.code == 200) {
+            message.success('删除成功');
+            setReload(!reload);
+          } else {
+            message.error(res.message);
+          }
+        });
+      },
+    });
+  };
+
+  useEffect(() => {
+    getDirectoryList();
+  }, [JSON.stringify(pagination), reload]);
+
+  const handleTableChange = (
+    pagination: TablePaginationConfig,
+    filters: Record<string, FilterValue>,
+    sorter: SorterResult<DataType>,
+  ) => {
+    setPagination(pagination);
+
+    // `dataSource` is useless since `pageSize` changed
+    if (pagination.pageSize !== pagination?.pageSize) {
+      setData([]);
+    }
+  };
+
+  return (
+    <>
+      <div>
+        <Button
+          type='primary'
+          onClick={() => showDecModal()}
+          icon={<PlusOutlined />}
+          style={{
+            margin: '10px 0 15px 10px',
+          }}
+        >
+          新增目录
+        </Button>
+        <Table
+          rowKey='id'
+          columns={columns}
+          dataSource={data}
+          bordered
+          onChange={handleTableChange}
+          pagination={pagination}
+          loading={loading}
+        />
+        ;
+      </div>
+      {/* 目录管理 */}
+      <AddOrEditDec
+        isModalVisible={isAddOrEditDecModal}
+        handleOk={addOrEditDecHandleOk}
+        handleCancel={addOrEditDecHandleCancel}
+        editData={editData}
+      />
+    </>
+  );
+};
+
+export default DirectoryManage;

src/router/router.tsx

@@ -19,6 +19,12 @@ import {
   SettingOutlined,
   UserOutlined,
   SisternodeOutlined,
+  SendOutlined,
+  RocketOutlined,
+  AppstoreAddOutlined,
+  AppstoreOutlined,
+  CoffeeOutlined,
+  UnorderedListOutlined,
 } from '@ant-design/icons';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
@@ -85,8 +91,10 @@ const SplitCouponOperate = React.lazy(
 const CouponDetailed = React.lazy(() => import('src/pages/couponManage/couponDetailed')); //优惠券明细
 
 // 分类管理
-const CategoryList = React.lazy(() => import('src/pages/categoryManage/index'));
-// 路由列表类型
+const CategoryManage = React.lazy(() => import('~/pages/categoryManage/category'));
+const CategoryDetail = React.lazy(() => import('~/pages/categoryManage/category/detail'));
+// 目录管理
+const DirectoryManage = React.lazy(() => import('~/pages/categoryManage/directoryManage'));
 export interface RouteObjectType {
   path: AgnosticIndexRouteObject['path'];
   element: any;
@@ -542,33 +550,67 @@ export const routerList: Array<RouteObjectType> = [
     },
     children: [
       {
-        path: '/categoryManage/categoryList',
-        element: withLoadingComponent(<CategoryList />),
+        path: '/categoryManage/jobServicesCategory/1',
+        element: withLoadingComponent(<CategoryManage />),
         meta: {
           id: 18100,
-          title: '分类列表',
-          icon: <SisternodeOutlined />,
+          title: '作业服务分类',
+          icon: <SendOutlined />,
+        },
+      },
+      {
+        path: '/categoryManage/jobServicesCategory/2',
+        element: withLoadingComponent(<CategoryManage />),
+        meta: {
+          id: 18200,
+          title: '设备租赁分类',
+          icon: <RocketOutlined />,
+        },
+      },
+      {
+        path: '/categoryManage/jobServicesCategory/3',
+        element: withLoadingComponent(<CategoryManage />),
+        meta: {
+          id: 18300,
+          title: '飞手培训分类',
+          icon: <AppstoreAddOutlined />,
+        },
+      },
+      {
+        path: '/categoryManage/jobServicesCategory/4',
+        element: withLoadingComponent(<CategoryManage />),
+        meta: {
+          id: 18400,
+          title: '产品商城分类',
+          icon: <AppstoreOutlined />,
+        },
+      },
+      {
+        path: '/categoryManage/jobServicesCategory/0',
+        element: withLoadingComponent(<CategoryManage />),
+        meta: {
+          id: 18500,
+          title: '通用分类',
+          icon: <CoffeeOutlined />,
+        },
+      },
+      {
+        path: '/categoryManage/detail/:id',
+        element: withLoadingComponent(<CategoryDetail />),
+        meta: {
+          id: 18600,
+          title: '分类详情',
+          icon: '',
+          hidden: true,
         },
       },
-    ],
-  },
-  {
-    path: '/systemManage',
-    element: <LayoutView />,
-    errorElement: <ErrorPage />,
-    meta: {
-      id: 28000,
-      icon: <SettingOutlined />,
-      title: '系统管理',
-    },
-    children: [
       {
-        path: '/systemManage/accountManage',
-        element: withLoadingComponent(<AccountManageView />),
+        path: '/categoryManage/DirectoryManage',
+        element: withLoadingComponent(<DirectoryManage />),
         meta: {
-          id: 28100,
-          title: '账号管理',
-          icon: <UserOutlined />,
+          id: 18700,
+          title: '目录管理',
+          icon: <UnorderedListOutlined />,
         },
       },
     ],