修复：产品，行业，页面

package.json

@@ -30,6 +30,7 @@
     "query-string": "^8.1.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-quill": "^2.0.0",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.10.0",
     "sort-by": "^1.2.0",

src/api/index.ts

 import { PointManageAPI } from './modules/pointManageAPI';
+import { ProduceManageAPI } from './modules/produceManageAPI';
+import { IndustryManageAPI } from './modules/industryManageAPI';
 import { ActivityManageAPI } from './modules/activityManage';
 import { CouponManageAPI } from './modules/couponManage';
 import { CommonAPI } from './modules/common';
 import { MakeManageAPI } from './modules/makeManage';
 
-export { PointManageAPI, ActivityManageAPI, CommonAPI, CouponManageAPI, MakeManageAPI };
+export {
+  PointManageAPI,
+  ProduceManageAPI,
+  IndustryManageAPI,
+  ActivityManageAPI,
+  CommonAPI,
+  CouponManageAPI,
+  MakeManageAPI,
+};

src/api/interface/produceManageType.ts

+import { InterItemFunction } from '~/api/interface';
+
+export type MakeListType = InterItemFunction<
+  any,
+  {
+    createTime: string;
+    brandName: string;
+    id: number;
+  }[]
+>;

src/api/modules/industryManageAPI.ts

+import axios from '../request';
+export class IndustryManageAPI {
+  // 行业列表
+  static getFirstIndustryTypeInfo = (params: unknown) => {
+    return axios.get('uavgoods/appgoods/getFirstGoodsTypeInfo/2', { params });
+  };
+  // 行业sku管理-方案规格管理-分页列表
+  static listPageIndustrySpec = (params: unknown) => {
+    return axios.get('uavgoods/industry/spec/listPageIndustrySpec', {
+      params,
+    });
+  };
+
+  // 行业sku管理---分页列表
+  static listPageIndustrySku = (data: unknown) => {
+    return axios.post('uavgoods/industry/spec/listPageIndustrySku', data);
+  };
+
+  // 行业sku管理---新增行业sku
+  static addIndustrySku = (data: unknown) => {
+    return axios.post('uavgoods/industry/spec/addIndustrySku', data);
+  };
+
+  // 行业sku管理---编辑行业sku
+  static editIndustrySku = (data: unknown) => {
+    return axios.post('uavgoods/industry/spec/editIndustrySku', data);
+  };
+
+  // 行业sku管理---删除行业sku
+  static removeIndustrySku = (params: unknown) => {
+    return axios.get('uavgoods/industry/spec/removeIndustrySku', { params });
+  };
+
+  // 行业sku管理-详情-基本信息
+  static getIndustrySkuDetail = (params: unknown) => {
+    return axios.get('uavgoods/industry/spec/getIndustrySkuDetail', {
+      params,
+    });
+  };
+
+  // 行业sku管理---方案规格管理---新增方案规格
+  static addIndustrySpec = (data: unknown) => {
+    return axios.post('uavgoods/industry/spec/addIndustrySpec', data);
+  };
+
+  // 行业sku管理---方案规格管理---编辑行业规格
+  static editIndustrySpec = (data: unknown) => {
+    return axios.post('uavgoods/industry/spec/editIndustrySpec', data);
+  };
+
+  // 行业sku管理---方案规格管理---删除行业规格
+  static removeIndustrySpec = (params: unknown) => {
+    return axios.get('uavgoods/industry/spec/removeIndustrySpec', { params });
+  };
+
+  // 行业sku管理---方案规格管理---获取价格配置信息  (获取价格配置)
+  static getIndustrySpecCPQ = (params: unknown) => {
+    return axios.get('uavgoods/industry/spec/getIndustrySpecCPQ', { params });
+  };
+
+  // 行业sku管理---方案规格管理---价格配置  (新增价格配置)
+  static industrySpecCPQ = (data: unknown) => {
+    return axios.post('uavgoods/industry/spec/industrySpecCPQ', data);
+  };
+
+  // 行业sku管理---方案规格管理---价格配置信息的修改 (修改价格配置)
+  static updateIndustrySpecCPQ = (data: unknown) => {
+    return axios.post('uavgoods/industry/spec/updateIndustrySpecCPQ', data);
+  };
+
+  // 行业sku管理---方案规格管理---单个方案规格回显 (查看产品清单)
+  static getIndustrySpecDetail = (params: unknown) => {
+    return axios.get('uavgoods/industry/spec/getIndustrySpecDetail', {
+      params,
+    });
+  };
+}

src/api/modules/produceManageAPI.ts

+import axios from '../request';
+import { MakeListType } from '~/api/interface/produceManageType';
+
+export class ProduceManageAPI {
+  // 产品sku管理-分页列表
+  static listPageProductSku = (data: unknown) => {
+    return axios.post('uavgoods/product/spec/listPageProductSku', data);
+  };
+  // 产品sku管理-删除产品sku
+  static removeProductSku = (params: unknown) => {
+    return axios.get('uavgoods/product/spec/removeProductSku', { params });
+  };
+  static directoryList = () => {
+    return axios.get('uavgoods/directory/directoryList');
+  };
+  // 分类列表(属于商品)
+  static getListGoodsTypeList = (type: number): any => {
+    return axios.get(`uavgoods/mgoods/getGoodsTypeInfoList/${type}`);
+  };
+  // 品牌-列表
+  static getListBrandInfo: MakeListType = (params) => {
+    return axios.get('uavgoods/brand/listBrandInfo', { params });
+  };
+  // 产品sku管理-新增产品sku
+  static addProductSku = (data: unknown) => {
+    return axios.post('uavgoods/product/spec/addProductSku', data);
+  };
+
+  // 产品sku管理-编辑产品sku
+  static editProductSku = (data: unknown) => {
+    return axios.post('uavgoods/product/spec/editProductSku', data);
+  };
+}

src/assets/style/index.scss

-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
 #root {
   position: relative;
   box-sizing: border-box;
@@ -14,6 +6,7 @@ body {
   min-height: 100vh;
   min-width: 100vw;
 }
+//body
 @font-face {
   font-family: 'YouSheBiaoTiHei'; //重命名字体名
   src: url('../font/title.ttf'); //引入字体

src/common/hook/optionHook/index.tsx

@@ -4,7 +4,7 @@ import { limitEntity } from '@/api/modules/role';
 
 function useOptionShow(id: number) {
   // const [show, setShow] = useState<boolean>(false);
-  return JSON.parse(localStorage.getItem('routeList') as string)?.some(
+  return (JSON.parse(localStorage.getItem('routeList') as string) || []).some(
     (v: limitEntity) => v.id === id,
   );
   // useEffect(() => {

src/components/layout/index.scss

@@ -6,9 +6,9 @@ $page-background: #f3f6ff;
   left: 0;
   width: 100%;
   height: 100%;
-  .layout-bg {
-    background: $page-background;
-  }
+  //.layout-bg{
+  //  background: $page-background;
+  //}
 
   .ant-layout-header {
     background: $page-background;
@@ -39,10 +39,7 @@ $page-background: #f3f6ff;
   .ant-layout-sider {
     background-color: $page-background;
     overflow: auto;
-    //height: calc(100vh - 44px);
-    left: 0;
-    top: 0;
-    bottom: 48px;
+    height: calc(100vh - 40px);
 
     .ant-menu-dark {
       background: transparent;
@@ -76,7 +73,7 @@ $page-background: #f3f6ff;
       background-color: #fff;
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
-      color: #556da7;
+      color: rgb(59, 89, 255);
     }
 
     .sider-collapsed {
@@ -102,6 +99,9 @@ $page-background: #f3f6ff;
     .ant-menu-sub.ant-menu-inline {
     background: none;
   }
+  :where(.css-dev-only-do-not-override-rvhhh3).ant-layout {
+    background: #f3f6ff;
+  }
 
   .layout-logo {
     height: 100%;

src/pages/mallManage/industryManage/industryList/components/addOrEditIndustryModal/index.scss

+.add-edit-modal {
+  #form_productBrand {
+    resize: none;
+  }
+}

src/pages/mallManage/industryManage/industryList/components/addOrEditIndustryModal/index.tsx

+import React, { useEffect, useState } from 'react';
+import { Form, Input, Modal, message, Select } from 'antd';
+import { IndustryManageAPI } from '~/api';
+import { IndustrySkuType } from '../../propsType';
+import './index.scss';
+
+interface PropsType {
+  visible: boolean;
+  closed: any;
+  data: IndustrySkuType;
+}
+
+const { Option } = Select;
+
+function AddOrEditIndustryModal(props: PropsType) {
+  // 父组件传参
+  const { visible, closed, data } = props;
+  // 表格事件
+  const [form] = Form.useForm();
+  // 所属行业列表
+  const [industryType, setIndustryType] = useState<{ label: string; val: number }[]>([]);
+  // 关闭弹窗
+  const handleClosed = async () => {
+    form.setFieldsValue({
+      goodsTypeId: undefined,
+      description: undefined,
+      solutionName: undefined,
+      id: undefined,
+    });
+    closed();
+  };
+  // 获取所属行业列表
+  const getFirstIndustryTypeInfo = async () => {
+    const res: any = await IndustryManageAPI.getFirstIndustryTypeInfo({});
+    if (res && res.code === '200') {
+      const arr = res.result.map((i: { goodsMasterType: string; goodsMasterTypeId: number }) => {
+        return {
+          label: i.goodsMasterType,
+          val: i.goodsMasterTypeId,
+        };
+      });
+      setIndustryType(arr);
+    }
+  };
+  // 触发表单验证
+  const handleSubmit = () => {
+    form
+      .validateFields()
+      .then(async (values) => {
+        const obj = { ...data, ...values };
+        const res: any = await IndustryManageAPI[!obj.id ? 'addIndustrySku' : 'editIndustrySku'](
+          obj,
+        );
+        if (res && res.code === '200') {
+          message.success('操作成功');
+          await handleClosed();
+        } else {
+          message.warning(res.message);
+        }
+      })
+      .catch((err) => {
+        message.warning(err.errorFields[0].errors[0]).then();
+      });
+  };
+  // componentsDidMounted
+  useEffect(() => {
+    if (!data) return;
+    // console.log("新增编辑弹窗 -->", data);
+    form.setFieldsValue({
+      ...data,
+    });
+    getFirstIndustryTypeInfo().then();
+  }, [data]);
+  return (
+    <Modal
+      open={visible}
+      title={data.id ? '修改' : '新增'}
+      onCancel={handleClosed}
+      onOk={handleSubmit}
+      destroyOnClose
+      width={768}
+      wrapClassName='add-edit-modal'
+    >
+      <Form
+        name='form'
+        form={form}
+        layout='horizontal'
+        labelCol={{ span: 4 }}
+        wrapperCol={{ span: 16 }}
+      >
+        <Form.Item
+          name='solutionName'
+          label='方案名称'
+          rules={[{ required: true, message: '请输入方案名称' }]}
+        >
+          <Input placeholder='请输入方案名称' allowClear maxLength={30} />
+        </Form.Item>
+        <Form.Item
+          name='goodsTypeId'
+          label='所属行业'
+          rules={[{ required: true, message: '请选择所属行业' }]}
+        >
+          <Select placeholder='请选择所属行业' allowClear>
+            {industryType.map((i, j) => (
+              <Option value={i.val} key={j}>
+                {i.label}
+              </Option>
+            ))}
+          </Select>
+        </Form.Item>
+        <Form.Item
+          name='description'
+          label='描述'
+          rules={[{ required: false, message: '请输入方案描述' }]}
+        >
+          <Input.TextArea
+            placeholder='请输入方案描述'
+            allowClear
+            maxLength={70}
+            rows={4}
+            showCount
+          />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}
+export default AddOrEditIndustryModal;

src/pages/mallManage/industryManage/industryList/index.scss

+.from-table-wrap {
+  position: relative;
+  //padding: 15px 0 0 0;
+  .header-view {
+    position: relative;
+    width: 100%;
+    min-height: 60px;
+    height: auto;
+    background: #fff;
+    border-radius: 8px;
+    display: flex;
+    justify-content: flex-start;
+    align-content: center;
+    flex-wrap: wrap;
+    padding: 15px 20px 5px 20px;
+    margin: 0 0 10px 0;
+    .ant-select-selector {
+      min-width: 200px;
+    }
+    .ant-row {
+      margin-bottom: 10px;
+    }
+    .add-button {
+      margin-right: 15px;
+    }
+  }
+}
+.detail-wrap {
+  position: relative;
+  width: 100%;
+  min-height: 60px;
+  height: auto;
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px 25px;
+  .ant-descriptions:nth-child(1) {
+    .ant-descriptions-view {
+      max-width: 600px;
+    }
+  }
+}

src/pages/mallManage/industryManage/industryList/index.tsx

+import React, { useEffect, useState } from 'react';
+import './index.scss';
+import { Button, Form, Input, message, Select, Table } from 'antd';
+import { useNavigate } from 'react-router-dom';
+import { ColumnsType } from 'antd/es/table';
+import { IndustryManageAPI } from '~/api';
+import { IndustrySkuType } from './propsType';
+import AddOrEditIndustryModal from './components/addOrEditIndustryModal';
+// import DeleteModal from '@/components/DeleteModal';
+import useOption from '~/common/hook/optionHook';
+
+const { Option } = Select;
+// 搜索表单的数据
+let query: any = {};
+
+// 表单提交
+interface FormType {
+  goodsTypeId?: number;
+  solutionName?: string;
+}
+
+function IndustryList() {
+  // 路由操作
+  const navigate = useNavigate();
+  // 表格数据
+  const [tableData, setTableData] = useState<IndustrySkuType[]>([]);
+  // 加载中
+  const [loading, setLoading] = useState<boolean>(false);
+  // 行业列表
+  const [industryType, setIndustryType] = useState<{ label: string; val: number }[]>([]);
+  // 行业列表对象
+  const [industryTypeObj, setIndustryTypeObj] = useState<any>({});
+  // 跳转详情
+  const handleDetail = (record: { id: number }) => {
+    navigate({
+      pathname: '/goodsManage/industryManage/detail',
+      search: `id=${record.id}`,
+    });
+    // console.log(record);
+  };
+  // 删除弹窗是否显示
+  const [visibleDeleteModal, setVisibleDeleteModal] = useState<boolean>(false);
+  // 当前操作方案
+  const [curtRow, setCurtRow] = useState<IndustrySkuType>({
+    goodsTypeId: undefined,
+    description: '',
+    solutionName: '',
+    createTime: '',
+    id: 0,
+  });
+  // 表格结构
+  const columns: ColumnsType<IndustrySkuType> = [
+    { title: '方案名称', dataIndex: 'solutionName', align: 'center' },
+    {
+      title: '所属行业',
+      align: 'center',
+      render: (text: string, record) => {
+        return (
+          <div>{industryTypeObj[record.goodsTypeId as keyof typeof industryTypeObj] || ''}</div>
+        );
+      },
+    },
+    { title: '描述', dataIndex: 'description', align: 'center' },
+    {
+      title: '操作',
+      align: 'center',
+      width: '15%',
+      fixed: 'right',
+      render: (text: string, record) => {
+        return (
+          <div>
+            {btnDetail ? (
+              <Button type='link' onClick={() => handleDetail(record)}>
+                详情
+              </Button>
+            ) : (
+              ''
+            )}
+            {btnEdit ? (
+              <Button type='link' onClick={() => handleEdit(record)}>
+                编辑
+              </Button>
+            ) : (
+              ''
+            )}
+            {btnDelete ? (
+              <Button type='link' onClick={() => openDeleteModal(record)}>
+                删除
+              </Button>
+            ) : (
+              ''
+            )}
+          </div>
+        );
+      },
+    },
+  ];
+  // 表格分页配置
+  const [pagination, setPagination] = useState({
+    total: 0,
+    pageSize: 10,
+    current: 1,
+    totalPage: 0,
+  });
+  // 按钮权限
+  const btnAdd = useOption(22201);
+  const btnDelete = useOption(22202);
+  const btnEdit = useOption(22203);
+  const btnDetail = useOption(22204);
+
+  // 新版通用部分(ES6+ for React) ZhangLK 2022/08/30 Start
+  // 加载列表
+  const getTableList = async (value = {}) => {
+    setLoading(true);
+    // 只需要修改这个地方的接口即可
+    const res: any = await IndustryManageAPI.listPageIndustrySku({
+      pageNo: pagination.current,
+      pageSize: pagination.pageSize,
+      ...value,
+      ...query,
+    });
+    setLoading(false);
+    if (res && res.code === '200') {
+      // console.log("res -->", res);
+      const { list, pageNo, totalCount, pageSize, totalPage } = res.result; // 解构
+      setPagination({
+        total: totalCount,
+        pageSize,
+        current: pageNo,
+        totalPage,
+      });
+      setTableData(list);
+    } else {
+      message.warning(res.message);
+    }
+  };
+  // 翻页
+  const paginationChange = (pageNo: number, pageSize: number) => {
+    getTableList({ pageNo, pageSize }).then();
+  };
+  // 表单提交
+  const onFinish = (val: FormType) => {
+    // 在这里对提交的数据做处理，如range转为开始和结束时间
+    const data = Object.fromEntries(
+      // 过滤为空项
+      Object.entries({
+        ...val,
+      }).filter((i) => i[1] !== '' && i[1] !== undefined && i[1] !== null),
+    );
+    query = data;
+    getTableList(data).then();
+  };
+
+  // 获取所属行业下拉列表
+  const getFirstIndustryTypeInfo = async () => {
+    const res: any = await IndustryManageAPI.getFirstIndustryTypeInfo({});
+    if (res && res.code === '200') {
+      const arr = res.result.map((i: { goodsMasterType: string; goodsMasterTypeId: number }) => {
+        return {
+          label: i.goodsMasterType,
+          val: i.goodsMasterTypeId,
+        };
+      });
+      const obj = res.result.reduce((prev: any, curt: any) => {
+        prev[curt.goodsMasterTypeId] = curt.goodsMasterType;
+        return prev;
+      }, {});
+      setIndustryType(arr);
+      setIndustryTypeObj(obj);
+    }
+  };
+
+  // 新增弹窗是否显示
+  const [visibleAddEdit, setVisibleAddEdit] = useState(false);
+  // 新增弹窗内容
+  const [addEditData, setAddEditData] = useState<IndustrySkuType>({
+    goodsTypeId: undefined,
+    description: '',
+    solutionName: '',
+    createTime: '',
+    id: 0,
+  });
+  // 新增弹窗
+  const handleAdd = () => {
+    setVisibleAddEdit(true);
+    setAddEditData({
+      createTime: '',
+      goodsTypeId: undefined,
+      description: '',
+      solutionName: '',
+      id: 0,
+    });
+  };
+  // 编辑弹窗
+  const handleEdit = (record: IndustrySkuType) => {
+    setVisibleAddEdit(true);
+    setAddEditData(record);
+  };
+  // 关闭弹窗
+  const handleAddEditClosed = () => {
+    setVisibleAddEdit(false);
+    setAddEditData({
+      createTime: '',
+      goodsTypeId: undefined,
+      description: '',
+      solutionName: '',
+      id: 0,
+    });
+    paginationChange(pagination.current, pagination.pageSize);
+  };
+  // 删除弹窗是否显示
+
+  // 打开删除弹窗
+  const openDeleteModal = (record: IndustrySkuType) => {
+    setVisibleDeleteModal(true);
+    setCurtRow(record);
+  };
+  // 关闭删除弹窗
+  const handleDeleteSkuClosed = () => {
+    setVisibleDeleteModal(false);
+  };
+  // 删除行业方案
+  const handleDeleteSku = async () => {
+    const res: any = await IndustryManageAPI.removeIndustrySku({ id: curtRow.id });
+    if (res.code === '200') {
+      message.success('操作成功');
+      handleDeleteSkuClosed();
+      getTableList().then();
+    } else {
+      message.error(res.message);
+      handleDeleteSkuClosed();
+    }
+  };
+
+  // componentDidMount
+  useEffect(() => {
+    query = {};
+    (async () => {
+      await getFirstIndustryTypeInfo();
+      await getTableList();
+    })();
+  }, []);
+
+  return (
+    <div className='from-table-wrap'>
+      <div className='header-view'>
+        <Form name='basic' layout='inline' onFinish={onFinish}>
+          {btnAdd || true ? (
+            <Form.Item>
+              <Button type='primary' onClick={handleAdd}>
+                新增
+              </Button>
+            </Form.Item>
+          ) : (
+            ''
+          )}
+
+          <Form.Item name='solutionName' label='方案名称'>
+            <Input placeholder='请输入方案名称' allowClear />
+          </Form.Item>
+          <Form.Item name='goodsTypeId' label='所属行业'>
+            <Select placeholder='请选择所属行业' allowClear>
+              {industryType.map((i, j) => (
+                <Option value={i.val} key={j}>
+                  {i.label}
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
+          <Form.Item>
+            <Button type='primary' htmlType='submit'>
+              搜索
+            </Button>
+          </Form.Item>
+        </Form>
+      </div>
+      <Table
+        size='small'
+        dataSource={tableData}
+        columns={columns}
+        rowKey='id'
+        scroll={{ x: 1500 }}
+        bordered
+        loading={loading}
+        pagination={{
+          total: pagination.total,
+          pageSize: pagination.pageSize,
+          current: pagination.current,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
+          showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
+        }}
+      />
+
+      <AddOrEditIndustryModal
+        visible={visibleAddEdit}
+        closed={handleAddEditClosed}
+        data={addEditData}
+      />
+
+      {/*<DeleteModal*/}
+      {/*  visible={visibleDeleteModal}*/}
+      {/*  onCancel={handleDeleteSkuClosed}*/}
+      {/*  onOK={handleDeleteSku}*/}
+      {/*/>*/}
+    </div>
+  );
+}
+export default IndustryList;

src/pages/mallManage/industryManage/industryList/propsType.ts

+// 行业sku管理-分页列表
+export interface IndustrySkuType {
+  goodsTypeId: number | undefined;
+  description: string;
+  solutionName: string;
+  id: number;
+  createTime: string;
+}
+// 行业sku管理-行业规格管理-分页列表
+export interface IndustrySpecType {
+  createTime?: string;
+  productSkuId?: number;
+  id: number;
+  industrySkuId?: number;
+  list: inventoryType[];
+  specImage: string;
+  specName: string;
+}
+// 行业sku管理-行业规格管理-清单列表
+export interface inventoryType {
+  productSku: productSkuType;
+  productSkuId: number;
+  productSpecList: productSpecType[];
+  select?: 0 | 1;
+  radio?: 0 | 1;
+}
+// 行业sku管理-产品sku类型
+export interface productSkuType {
+  goodsTypeId: number;
+  id: number;
+  model: string;
+  productBrand: string;
+  productName: string;
+}
+// 行业sku管理-产品spec类型
+export interface productSpecType {
+  id: number;
+  partNo: string;
+  productSkuId: number;
+  productSpecCPQVO?: null;
+  specImage: string;
+  specName: string;
+  versionDesc: string;
+}

src/pages/mallManage/produceManage/produceList/components/addOrEditProduceModal/index.tsx

+import React, { useEffect, useState } from 'react';
+import { Form, Input, Modal, message, Select } from 'antd';
+import { ProduceManageAPI } from '~/api';
+import { ProductSkuType, MakeItemEntity } from '../../propsType';
+// import { categoryDec } from '@/api/modules/goods';
+
+interface PropsType {
+  visible: boolean;
+  closed: any;
+  data: ProductSkuType | undefined;
+  makeList: MakeItemEntity[];
+  decList: any;
+}
+
+const { Option } = Select;
+
+function AddOrEditProduceModal(props: PropsType) {
+  // 父组件传参
+  const { visible, closed, data, makeList, decList } = props;
+  // 产品类型下拉列表
+  const [productTypeSelectList, setProductTypeSelectList] = useState<
+    { label: string; val: number }[]
+  >([]);
+  // 表格事件
+  const [form] = Form.useForm();
+  // 关闭弹窗
+  const handleClosed = async () => {
+    form.resetFields();
+    closed();
+  };
+  // 触发表单验证
+  const handleSubmit = () => {
+    form
+      .validateFields()
+      .then(async (values) => {
+        const obj = { ...data, ...values };
+        const res: any = await ProduceManageAPI[!obj.id ? 'addProductSku' : 'editProductSku'](obj);
+        if (res && res.code === '200') {
+          message.success('操作成功');
+          await handleClosed();
+        } else {
+          message.warning(res.message);
+        }
+      })
+      .catch((err) => {
+        message.warning(err.errorFields[0].errors[0]).then();
+      });
+  };
+  // 获取产品类型列表
+  const getListGoodsTypeList = async (type: number) => {
+    const res: any = await ProduceManageAPI.getListGoodsTypeList(type);
+    if (res && res.code === '200') {
+      const arr = res.result.map((i: { goodsMasterType: string; goodsMasterTypeId: number }) => {
+        return {
+          label: i.goodsMasterType,
+          val: i.goodsMasterTypeId,
+        };
+      });
+      setProductTypeSelectList(arr);
+    }
+  };
+  // 目录修改
+  const decSelectChange = (value: number) => {
+    form.setFieldValue('goodsTypeId', undefined);
+    getListGoodsTypeList(value);
+  };
+  // componentsDidMounted
+  useEffect(() => {
+    if (!data) return;
+    getListGoodsTypeList(data.directoryId);
+    form.setFieldsValue({
+      ...data,
+    });
+  }, [data]);
+  return (
+    <Modal
+      open={visible}
+      title={data?.id ? '编辑' : '新增'}
+      onCancel={handleClosed}
+      onOk={handleSubmit}
+      destroyOnClose
+      width={768}
+    >
+      <Form
+        name='form'
+        form={form}
+        layout='horizontal'
+        labelCol={{ span: 4 }}
+        wrapperCol={{ span: 16 }}
+      >
+        <Form.Item
+          name='productName'
+          label='产品名称'
+          rules={[{ required: true, message: '请输入产品名称' }]}
+        >
+          <Input placeholder='请输入产品名称' allowClear maxLength={30} />
+        </Form.Item>
+        <Form.Item
+          label='产品目录'
+          name='directoryId'
+          rules={[{ required: true, message: '请选择产品目录' }]}
+        >
+          <Select placeholder='请选择产品目录' onChange={decSelectChange}>
+            {decList.map((v: any, index: number) => (
+              <Select.Option value={v.id} key={index}>
+                {v.sortName}
+              </Select.Option>
+            ))}
+          </Select>
+        </Form.Item>
+        <Form.Item
+          name='goodsTypeId'
+          label='产品类型'
+          rules={[{ required: true, message: '请选择产品类型' }]}
+        >
+          <Select
+            placeholder='请选择产品类型'
+            allowClear
+            showSearch
+            filterOption={(input, option) =>
+              (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
+            }
+          >
+            {productTypeSelectList.map((i, j) => (
+              <Option value={i.val} key={j}>
+                {i.label}
+              </Option>
+            ))}
+          </Select>
+        </Form.Item>
+        <Form.Item
+          name='model'
+          label='产品型号'
+          rules={[{ required: false, message: '请输入产品型号' }]}
+        >
+          <Input placeholder='请输入产品型号' allowClear maxLength={50} />
+        </Form.Item>
+        <Form.Item
+          name='productBrandId'
+          label='产品品牌'
+          rules={[{ required: false, message: '请选择产品品牌' }]}
+        >
+          <Select
+            filterOption={(input, option) =>
+              (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
+            }
+            showSearch
+            placeholder='请选择产品品牌'
+          >
+            {makeList.map((v) => (
+              <Select.Option value={v.id} key={v.id}>
+                {v.brandName}
+              </Select.Option>
+            ))}
+          </Select>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}
+export default AddOrEditProduceModal;

src/pages/mallManage/produceManage/produceList/index.scss

+.from-table-wrap {
+  position: relative;
+  .header-view {
+    position: relative;
+    width: 100%;
+    min-height: 60px;
+    height: auto;
+    background: #fff;
+    border-radius: 8px;
+    display: flex;
+    justify-content: flex-start;
+    align-content: center;
+    flex-wrap: wrap;
+    padding: 15px 20px 5px 20px;
+    margin: 0 0 10px 0;
+    .ant-select-selector {
+      min-width: 200px;
+    }
+    .ant-row {
+      margin-bottom: 10px;
+    }
+    .add-button {
+      margin-right: 15px;
+    }
+  }
+}
+.detail-wrap {
+  position: relative;
+  width: 100%;
+  min-height: 60px;
+  height: auto;
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px 25px;
+  .ant-descriptions:nth-child(1) {
+    .ant-descriptions-view {
+      max-width: 600px;
+    }
+  }
+}
+
+.custom-class {
+  margin-top: 10vh;
+  .ant-message-notice-content {
+    padding: 15px 30px;
+    position: relative;
+    pointer-events: none;
+    span[role='img'] {
+      display: none;
+    }
+  }
+
+  .ant-message-notice-content:after {
+    position: absolute;
+    pointer-events: auto;
+    left: 100%;
+    top: 0px;
+    content: 'X';
+    border: 1px solid rgba(128, 129, 133, 0.25);
+    width: 15px;
+    height: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    font-weight: 900;
+    transform: scale(1.3, 1.1) translateX(-2px);
+    color: rgba(128, 129, 133, 0.6);
+    cursor: pointer;
+  }
+}

src/pages/mallManage/produceManage/produceList/index.tsx

+import React, { useEffect, useState } from 'react';
+import './index.scss';
+import { Button, Form, Input, message, Modal, Select, Table } from 'antd';
+import { useNavigate } from 'react-router-dom';
+import { ColumnsType } from 'antd/es/table';
+import { ProduceManageAPI } from '~/api';
+import AddOrEditProduce from './components/addOrEditProduceModal';
+import { ProductSkuType, MakeItemEntity } from './propsType';
+import useOption from '~/common/hook/optionHook';
+// import { categoryDec } from '@/api/modules/goods';
+
+const { Option } = Select;
+const { confirm } = Modal;
+// 搜索表单的数据
+let query: any = {};
+
+// 表单提交
+interface FormType {
+  productName?: string;
+  goodsTypeId?: number;
+}
+
+function ProduceManage() {
+  // 路由操作
+  const navigate = useNavigate();
+  // 表格数据
+  const [tableData, setTableData] = useState<ProductSkuType[]>([]);
+  // 加载中
+  const [loading, setLoading] = useState<boolean>(false);
+  // 产品类型下拉列表
+  const [productTypeSelectList, setProductTypeSelectList] = useState<
+    { label: string; val: number }[]
+  >([]);
+  // 新增弹窗是否显示
+  const [visibleAddEdit, setVisibleAddEdit] = useState(false);
+  // 新增弹窗内容
+  const [addEditData, setAddEditData] = useState<ProductSkuType>();
+  // 品牌列表
+  const [makeList, setMakeList] = useState<MakeItemEntity[]>([]);
+  // 目录列表
+  const [decList, setDecList] = useState<any>([]);
+  // 跳转详情
+  const handleDetail = (record: ProductSkuType) => {
+    navigate({
+      pathname: '/goodsManage/productManage/detail',
+      search: `id=${record.id}`,
+    });
+  };
+  // 新增弹窗
+  const handleAdd = () => {
+    setVisibleAddEdit(true);
+    setAddEditData(undefined);
+  };
+  // 编辑弹窗
+  const handleEdit = (record: ProductSkuType) => {
+    setVisibleAddEdit(true);
+    setAddEditData(record);
+  };
+  // 关闭弹窗
+  const handleAddEditClosed = () => {
+    setVisibleAddEdit(false);
+    setAddEditData(undefined);
+    paginationChange(pagination.current, pagination.pageSize);
+  };
+  // 删除产品
+  const handleDelete = (record: ProductSkuType) => {
+    confirm({
+      title: '提示',
+      content: '删除后此数据将会丢失，确定删除吗？',
+      async onOk() {
+        const res: any = await ProduceManageAPI.removeProductSku({ id: record.id });
+        if (res && res.code === '200') {
+          await message.success('操作成功');
+          await paginationChange(pagination.current, pagination.pageSize);
+        } else {
+          message.error(res.message);
+        }
+      },
+    });
+  };
+  // 表格结构
+  const columns: ColumnsType<ProductSkuType> = [
+    {
+      title: '产品名称',
+      dataIndex: 'productName',
+      align: 'center',
+      fixed: 'left',
+    },
+    {
+      title: '产品目录',
+      dataIndex: 'directoryId',
+      align: 'center',
+      render: (text: string, record: ProductSkuType) =>
+        decList.find((v) => v.id === record.directoryId)?.sortName || '',
+    },
+    { title: '产品类型', dataIndex: 'typeName', align: 'center' },
+    { title: '型号', dataIndex: 'model', align: 'center' },
+    { title: '产品品牌', dataIndex: 'productBrand', align: 'center' },
+    {
+      title: '操作',
+      align: 'center',
+      width: '15%',
+      fixed: 'right',
+      render: (text: string, record) => {
+        return (
+          <div>
+            {btnDetail ? (
+              <Button type='link' onClick={() => handleDetail(record)}>
+                详情
+              </Button>
+            ) : (
+              ''
+            )}
+            {btnEdit ? (
+              <Button type='link' onClick={() => handleEdit(record)}>
+                编辑
+              </Button>
+            ) : (
+              ''
+            )}
+            {btnDelete ? (
+              <Button type='link' onClick={() => handleDelete(record)}>
+                删除
+              </Button>
+            ) : (
+              ''
+            )}
+          </div>
+        );
+      },
+    },
+  ];
+  // 表格分页配置
+  const [pagination, setPagination] = useState({
+    total: 0,
+    pageSize: 10,
+    current: 1,
+    totalPage: 0,
+  });
+  // 按钮权限
+  const btnAdd = useOption(22151);
+  const btnEdit = useOption(22152);
+  const btnDelete = useOption(22153);
+  const btnDetail = useOption(22154);
+
+  // 新版通用部分(ES6+ for React) ZhangLK 2022/08/30 Start
+  // 加载列表
+  const getTableList = async (value = {}) => {
+    setLoading(true);
+    // 只需要修改这个地方的接口即可
+    const res: any = await ProduceManageAPI.listPageProductSku({
+      pageNo: pagination.current,
+      pageSize: pagination.pageSize,
+      ...value,
+      ...query,
+    });
+    setLoading(false);
+    if (res && res.code === '200') {
+      const { list, pageNo, totalCount, pageSize, totalPage } = res.result; // 解构
+      setPagination({
+        total: totalCount,
+        pageSize,
+        current: pageNo,
+        totalPage,
+      });
+      setTableData(list);
+    } else {
+      message.warning(res.message);
+    }
+  };
+  // 翻页
+  const paginationChange = (pageNo: number, pageSize: number) => {
+    getTableList({ pageNo, pageSize }).then();
+  };
+  // 表单提交
+  const onFinish = (val: FormType) => {
+    // 在这里对提交的数据做处理，如range转为开始和结束时间
+    const data = Object.fromEntries(
+      // 过滤为空项
+      Object.entries({
+        ...val,
+      }).filter((i) => i[1] !== '' && i[1] !== undefined && i[1] !== null),
+    );
+    query = data;
+    getTableList(data).then();
+  };
+
+  // 获取产品类型列表
+  const getListGoodsTypeList = async (type: number) => {
+    const res: any = await ProduceManageAPI.getListGoodsTypeList(type);
+    if (res && res.code === '200') {
+      const arr = res.result.map((i: { goodsMasterType: string; goodsMasterTypeId: number }) => {
+        return {
+          label: i.goodsMasterType,
+          val: i.goodsMasterTypeId,
+        };
+      });
+      setProductTypeSelectList(arr);
+    }
+  };
+  // 获取品牌列表
+  const getMakeList = () => {
+    ProduceManageAPI.getListBrandInfo({ pageNo: 1, pageSize: 999999 }).then(({ code, result }) => {
+      setMakeList(result.list || []);
+    });
+  };
+  // 目录列表
+  const getDescList = () => {
+    ProduceManageAPI.directoryList().then((res: any) => {
+      if (res.result) {
+        setDecList(res.result.filter((v: any) => v.id !== 2));
+      }
+    });
+  };
+  // 目录修改
+  const decSelectChange = (value: number) => {
+    if (value) {
+      getListGoodsTypeList(value);
+    }
+  };
+  // componentDidMount
+  useEffect(() => {
+    query = {};
+    getMakeList();
+    getDescList();
+    (async () => {
+      await getTableList();
+    })();
+  }, []);
+
+  return (
+    <div className='from-table-wrap'>
+      <div className='header-view'>
+        <Form name='basic' layout='inline' onFinish={onFinish}>
+          {btnAdd || true ? (
+            <Form.Item>
+              <Button type='primary' onClick={handleAdd}>
+                新增
+              </Button>
+            </Form.Item>
+          ) : (
+            ''
+          )}
+
+          <Form.Item name='productName' label='产品名称'>
+            <Input placeholder='请输入产品名称' allowClear />
+          </Form.Item>
+          <Form.Item name='directoryId' label='产品目录'>
+            <Select placeholder='请选择产品目录' onChange={decSelectChange} allowClear>
+              {decList.map((v, index: number) => (
+                <Select.Option value={v.id} key={index}>
+                  {v.sortName}
+                </Select.Option>
+              ))}
+            </Select>
+          </Form.Item>
+          <Form.Item name='goodsTypeId' label='产品类型'>
+            <Select placeholder='请选择产品类型' allowClear>
+              {productTypeSelectList.map((i, j) => (
+                <Option value={i.val} key={j}>
+                  {i.label}
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
+          <Form.Item>
+            <Button type='primary' htmlType='submit'>
+              搜索
+            </Button>
+          </Form.Item>
+        </Form>
+      </div>
+      <Table
+        size='small'
+        dataSource={tableData}
+        loading={loading}
+        columns={columns}
+        rowKey='id'
+        scroll={{ x: 1500 }}
+        bordered
+        pagination={{
+          total: pagination.total,
+          pageSize: pagination.pageSize,
+          current: pagination.current,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
+          showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
+        }}
+      />
+      <AddOrEditProduce
+        visible={visibleAddEdit}
+        closed={handleAddEditClosed}
+        data={addEditData}
+        makeList={makeList}
+        decList={decList}
+      />
+    </div>
+  );
+}
+export default ProduceManage;

src/pages/mallManage/produceManage/produceList/propsType.ts

+// 产品sku管理-分页列表
+export interface ProductSkuType {
+  createTime: string;
+  goodsTypeId: number;
+  id: number;
+  model: string;
+  productBrand: number;
+  productName: string;
+  typeName: string;
+  productBrandId: number;
+  directoryId: number;
+  directoryName: string;
+}
+// 产品sku管理-产品规格管理-分页列表
+export interface ProductSpecType {
+  createTime: string;
+  id: number;
+  partNo: string;
+  productSkuId: number;
+  specImage: string;
+  specName: string;
+  versionDesc: string;
+}
+// 品牌管理-列表
+export type MakeItemEntity = {
+  createTime: string;
+  brandName: string;
+  id: number;
+};

src/pages/mallManage/serviceManage/serviceDetail/index.scss

+.service-detail {
+  &-operate {
+    text-align: right;
+    & button:first-child {
+      margin-right: 10px;
+    }
+  }
+}

src/pages/mallManage/serviceManage/serviceDetail/index.tsx

+import { Button, Form } from 'antd';
+import { useNavigate } from 'react-router-dom';
+import './index.scss';
+
+const ServiceDetail = () => {
+  const navigate = useNavigate();
+
+  //返回
+  const backRoute = () => {
+    navigate(-1);
+  };
+  return (
+    <div className='service-detail'>
+      <div className='service-detail-operate'>
+        <Button type='primary'>修改</Button>
+        <Button type='primary' onClick={backRoute}>
+          返回
+        </Button>
+      </div>
+      <div className='service-detail-form'>
+        <Form labelCol={{ span: 2 }} wrapperCol={{ span: 16 }}>
+          <Form.Item label='服务名称'>哈哈</Form.Item>
+          <Form.Item label='应用类型'>哈哈</Form.Item>
+          <Form.Item label='对应行业'>哈哈</Form.Item>
+          <Form.Item label='展示状态'>哈哈</Form.Item>
+          <Form.Item label='封面图'></Form.Item>
+          <Form.Item label='分享卡片'></Form.Item>
+          <Form.Item label='视频'></Form.Item>
+        </Form>
+      </div>
+    </div>
+  );
+};
+export default ServiceDetail;

src/pages/mallManage/serviceManage/serviceIntroduce/index.scss

+.service-introduce {
+  &-operate {
+    text-align: right;
+    & button:first-child {
+      margin-right: 10px;
+    }
+  }
+  &-rich-text {
+    margin-top: 10px;
+  }
+}

src/pages/mallManage/serviceManage/serviceIntroduce/index.tsx

+import { Button } from 'antd';
+import ReactQuill from 'react-quill';
+import { useNavigate } from 'react-router-dom';
+import 'react-quill/dist/quill.snow.css';
+import './index.scss';
+
+const ServiceIntroduce = () => {
+  const navigate = useNavigate();
+  const modules = {
+    toolbar: {
+      container: [
+        [{ size: ['small', false, 'large', 'huge'] }], //字体设置
+        // [{ 'header': [1, 2, 3, 4, 5, 6, false] }], //标题字号，不能设置单个字大小
+        ['bold', 'italic', 'underline', 'strike'],
+        [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
+        ['link', 'image'], // a链接和图片的显示
+        [{ align: [] }],
+        [
+          {
+            background: [
+              'rgb(  0,   0,   0)',
+              'rgb(230,   0,   0)',
+              'rgb(255, 153,   0)',
+              'rgb(255, 255,   0)',
+              'rgb(  0, 138,   0)',
+              'rgb(  0, 102, 204)',
+              'rgb(153,  51, 255)',
+              'rgb(255, 255, 255)',
+              'rgb(250, 204, 204)',
+              'rgb(255, 235, 204)',
+              'rgb(255, 255, 204)',
+              'rgb(204, 232, 204)',
+              'rgb(204, 224, 245)',
+              'rgb(235, 214, 255)',
+              'rgb(187, 187, 187)',
+              'rgb(240, 102, 102)',
+              'rgb(255, 194, 102)',
+              'rgb(255, 255, 102)',
+              'rgb(102, 185, 102)',
+              'rgb(102, 163, 224)',
+              'rgb(194, 133, 255)',
+              'rgb(136, 136, 136)',
+              'rgb(161,   0,   0)',
+              'rgb(178, 107,   0)',
+              'rgb(178, 178,   0)',
+              'rgb(  0,  97,   0)',
+              'rgb(  0,  71, 178)',
+              'rgb(107,  36, 178)',
+              'rgb( 68,  68,  68)',
+              'rgb( 92,   0,   0)',
+              'rgb(102,  61,   0)',
+              'rgb(102, 102,   0)',
+              'rgb(  0,  55,   0)',
+              'rgb(  0,  41, 102)',
+              'rgb( 61,  20,  10)',
+            ],
+          },
+        ],
+        [
+          {
+            color: [
+              'rgb(  0,   0,   0)',
+              'rgb(230,   0,   0)',
+              'rgb(255, 153,   0)',
+              'rgb(255, 255,   0)',
+              'rgb(  0, 138,   0)',
+              'rgb(  0, 102, 204)',
+              'rgb(153,  51, 255)',
+              'rgb(255, 255, 255)',
+              'rgb(250, 204, 204)',
+              'rgb(255, 235, 204)',
+              'rgb(255, 255, 204)',
+              'rgb(204, 232, 204)',
+              'rgb(204, 224, 245)',
+              'rgb(235, 214, 255)',
+              'rgb(187, 187, 187)',
+              'rgb(240, 102, 102)',
+              'rgb(255, 194, 102)',
+              'rgb(255, 255, 102)',
+              'rgb(102, 185, 102)',
+              'rgb(102, 163, 224)',
+              'rgb(194, 133, 255)',
+              'rgb(136, 136, 136)',
+              'rgb(161,   0,   0)',
+              'rgb(178, 107,   0)',
+              'rgb(178, 178,   0)',
+              'rgb(  0,  97,   0)',
+              'rgb(  0,  71, 178)',
+              'rgb(107,  36, 178)',
+              'rgb( 68,  68,  68)',
+              'rgb( 92,   0,   0)',
+              'rgb(102,  61,   0)',
+              'rgb(102, 102,   0)',
+              'rgb(  0,  55,   0)',
+              'rgb(  0,  41, 102)',
+              'rgb( 61,  20,  10)',
+            ],
+          },
+        ],
+        ['clean'], //清空
+        ['emoji'], //emoji表情，设置了才能显示
+        ['video2'], //我自定义的视频图标，和插件提供的不一样，所以设置为video2
+      ],
+      // handlers: {
+      //   image: this.imageHandler.bind(this), //点击图片标志会调用的方法
+      //   video2: this.showVideoModal.bind(this),
+      // },
+    },
+    // ImageExtend: {
+    //   loading: true,
+    //   name: 'img',
+    //   action: RES_URL + "connector?isRelativePath=true",
+    //   response: res => FILE_URL + res.info.url
+    // },
+    // ImageDrop: true,
+    // 'emoji-toolbar': true, //是否展示出来
+    // 'emoji-textarea': false, //我不需要emoji展示在文本框所以设置为false
+    // 'emoji-shortname': true,
+  };
+  //返回
+  const backRoute = () => {
+    navigate(-1);
+  };
+
+  return (
+    <div className='service-introduce'>
+      <div className='service-introduce-operate'>
+        <Button type='primary'>保存修改</Button>
+        <Button type='primary' onClick={backRoute}>
+          返回
+        </Button>
+      </div>
+      <div className='service-introduce-title'></div>
+      <div className='service-introduce-rich-text'>
+        <ReactQuill modules={modules} style={{ height: '500px' }} />
+      </div>
+    </div>
+  );
+};
+export default ServiceIntroduce;

src/pages/mallManage/serviceManage/serviceList/components/addOrEditServiceModal/index.tsx

+import { FC } from 'react';
+import { Button, Col, Form, Input, Modal, Row, Select, Upload } from 'antd';
+import { ModalProps } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+
+const AddOrEditServiceModal: FC<ModalProps> = ({ open, title, onCancel }) => {
+  return (
+    <Modal open={open} title={title} onCancel={onCancel}>
+      <Form labelCol={{ span: 4 }} wrapperCol={{ span: 16 }}>
+        <Form.Item label='服务名称'>
+          <Input placeholder='请输入服务名称' />
+        </Form.Item>
+        <Form.Item label='应用'>
+          <Select placeholder='请选择应用'>
+            <Select.Option>111</Select.Option>
+          </Select>
+        </Form.Item>
+        <Form.Item label='对应行业'>
+          <Select placeholder='请选择对应行业'>
+            <Select.Option>111</Select.Option>
+          </Select>
+        </Form.Item>
+        <Form.Item label='封面图'>
+          <Upload listType='picture-card'>
+            <UploadOutlined />
+          </Upload>
+        </Form.Item>
+        <Form.Item label='分享卡片'>
+          <Upload listType='picture-card'>
+            <UploadOutlined />
+          </Upload>
+        </Form.Item>
+        <Form.Item label='视频'>
+          <Row>
+            <Col></Col>
+            <Col>
+              <Upload>
+                <Button icon={<UploadOutlined />} size='small' type='primary'>
+                  上传
+                </Button>
+              </Upload>
+            </Col>
+          </Row>
+        </Form.Item>
+        <Form.Item label='展示状态'>
+          <Select placeholder='请选择展示状态'>
+            <Select.Option>上架</Select.Option>
+            <Select.Option>下架</Select.Option>
+          </Select>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+export default AddOrEditServiceModal;

src/pages/mallManage/serviceManage/serviceList/index.tsx

+import { FC, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { searchColumns } from '~/components/search-box';
+import SearchBox from '~/components/search-box';
+import AddOrEditServiceModal from './components/addOrEditServiceModal';
+import { Button, Card, Table } from 'antd';
+import {
+  PlusOutlined,
+  ArrowUpOutlined,
+  ArrowDownOutlined,
+  DeleteOutlined,
+} from '@ant-design/icons';
+import { ColumnsType } from 'antd/es/table';
+
+const ServiceList: FC<any> = () => {
+  const navigate = useNavigate();
+  const tabList = [
+    {
+      key: '1',
+      tab: '全部',
+    },
+    {
+      key: '2',
+      tab: '上架中',
+    },
+    {
+      key: '3',
+      tab: '仓库中',
+    },
+  ];
+  const [activeTabKey, setActiveTabKey] = useState<string>('1');
+  const [searchColumnsData] = useState<searchColumns[]>([
+    {
+      type: 'input',
+      placeholder: '请输入服务名称',
+      label: '服务名称',
+      name: '',
+    },
+    {
+      type: 'select',
+      placeholder: '请选择应用类型',
+      label: '应用类型',
+      name: '',
+      options: [],
+    },
+    {
+      type: 'select',
+      placeholder: '请选择对应行业',
+      label: '对应行业',
+      name: '',
+      options: [],
+    },
+  ]);
+  const tableColumns: ColumnsType<any> = [
+    { title: '序号', align: 'center' },
+    { title: '服务名称', align: 'center' },
+    { title: '应用', align: 'center' },
+    { title: '对应行业', align: 'center' },
+    { title: '封面图', align: 'center' },
+    { title: '分享卡片', align: 'center' },
+    { title: '视频', align: 'center' },
+    {
+      title: '服务介绍',
+      align: 'center',
+      render: () => (
+        <Button type='link' onClick={toServiceIntroduce}>
+          --
+        </Button>
+      ),
+    },
+    { title: '状态', align: 'center' },
+    {
+      title: '操作',
+      align: 'center',
+      render: () => (
+        <>
+          <Button type='link' onClick={toServiceDetail}>
+            详情
+          </Button>
+        </>
+      ),
+    },
+  ];
+  const [tableData] = useState<{ id: number }[]>([{ id: 1 }]);
+  //新增、编辑服务弹窗
+  const [addOrEditServiceModalOpen, setAddOrEditServiceModalOpen] = useState<boolean>(false);
+  const [addOrEditServiceModalTitle, setAddOrEditServiceModalTitle] = useState<string>('新增服务');
+
+  const onTabChange = (key: string) => {
+    setActiveTabKey(key);
+  };
+  //新增服务
+  const addServiceModalShow = () => {
+    setAddOrEditServiceModalTitle('新增服务');
+    setAddOrEditServiceModalOpen(true);
+  };
+
+  const addOrEditServiceModalCancel = () => {
+    setAddOrEditServiceModalOpen(false);
+  };
+  //服务详情
+  const toServiceDetail = () => {
+    navigate({ pathname: '/mallManage/serviceDetail' });
+  };
+  //服务介绍
+  const toServiceIntroduce = () => {
+    navigate({ pathname: '/mallManage/serviceIntroduce' });
+  };
+
+  return (
+    <div className='service-list'>
+      <SearchBox
+        search={searchColumnsData}
+        child={
+          <Button type='primary' icon={<PlusOutlined />} onClick={addServiceModalShow}>
+            新增服务
+          </Button>
+        }
+      />
+      <Card tabList={tabList} activeTabKey={activeTabKey} onTabChange={onTabChange}>
+        <div className='header-operate' style={{ marginBottom: '10px' }}>
+          <Button type='primary' style={{ marginRight: '10px' }} icon={<ArrowUpOutlined />}>
+            上架
+          </Button>
+          <Button type='primary' style={{ marginRight: '10px' }} icon={<ArrowDownOutlined />}>
+            下架
+          </Button>
+          <Button danger icon={<DeleteOutlined />}>
+            删除
+          </Button>
+        </div>
+        <Table columns={tableColumns} bordered dataSource={tableData} />
+      </Card>
+      {/*新增/编辑服务弹窗*/}
+      <AddOrEditServiceModal
+        open={addOrEditServiceModalOpen}
+        title={addOrEditServiceModalTitle}
+        onCancel={addOrEditServiceModalCancel}
+      />
+    </div>
+  );
+};
+export default ServiceList;

src/pages/pointManage/pointDetail/index.tsx

@@ -24,7 +24,7 @@ const withdrawStatus = [
   { label: '提现失败', value: 2 },
 ];
 
-function PointDetailList(props: { location: { search: string } }) {
+function PointDetailList(props: any) {
   // 参数解析
   const option = qs.parse(props.location.search);
   // 表格数据

src/pages/pointManage/pointList/detail/index.tsx

@@ -27,7 +27,7 @@ const statusList = [
   { value: 1, label: '提现成功' },
   { value: 2, label: '提现失败' },
 ];
-export function PointDetail(props: { location: { search: string } }) {
+export function PointDetail(props: any) {
   const [searchParams] = useSearchParams();
   // 参数解析
   const option = qs.parse(props.location.search);

src/router/router.tsx

@@ -28,6 +28,20 @@ import ServiceOrderDetail from '~/pages/orderManage/serviceOrder/detail';
 import EquipmentOrderDetail from '~/pages/orderManage/equipmentOrder/detail';
 
 const ActivityList = React.lazy(() => import('src/pages/activityManage/activityList')); //活动管理
+//服务
+const ServiceListView = React.lazy(() => import('~/pages/mallManage/serviceManage/serviceList'));
+const ServiceDetailView = React.lazy(
+  () => import('~/pages/mallManage/serviceManage/serviceDetail'),
+);
+const ServiceIntroduceView = React.lazy(
+  () => import('~/pages/mallManage/serviceManage/serviceIntroduce'),
+);
+//产品
+const ProduceListView = React.lazy(() => import('~/pages/mallManage/produceManage/produceList'));
+//行业
+const IndustryListView = React.lazy(() => import('~/pages/mallManage/industryManage/industryList'));
+
+//订单
 const ProductOrderView = React.lazy(() => import('src/pages/orderManage/productOrder')); //销售订单
 const EquipmentOrderView = React.lazy(() => import('src/pages/orderManage/equipmentOrder')); //设备订单
 const ServiceOrderView = React.lazy(() => import('src/pages/orderManage/serviceOrder')); //服务订单
@@ -88,6 +102,65 @@ export const routerList: Array<RouteObjectType> = [
     ],
   },
   {
+    path: '/mallManage',
+    element: <LayoutView />,
+    errorElement: <ErrorPage />,
+    meta: {
+      id: 10100,
+      icon: <MacCommandOutlined />,
+      title: '商品管理',
+    },
+    children: [
+      {
+        path: '/mallManage/serviceList',
+        element: withLoadingComponent(<ServiceListView />),
+        meta: {
+          id: 10110,
+          icon: <MacCommandOutlined />,
+          title: '服务管理',
+        },
+      },
+      {
+        path: '/mallManage/serviceDetail',
+        element: withLoadingComponent(<ServiceDetailView />),
+        meta: {
+          id: 10120,
+          icon: <MacCommandOutlined />,
+          title: '服务详情',
+          hidden: true,
+        },
+      },
+      {
+        path: '/mallManage/serviceIntroduce',
+        element: withLoadingComponent(<ServiceIntroduceView />),
+        meta: {
+          id: 10120,
+          icon: <MacCommandOutlined />,
+          title: '服务介绍',
+          hidden: true,
+        },
+      },
+      {
+        path: '/mallManage/produceList',
+        element: withLoadingComponent(<ProduceListView />),
+        meta: {
+          id: 10130,
+          icon: <MacCommandOutlined />,
+          title: '产品管理',
+        },
+      },
+      {
+        path: '/mallManage/industryList',
+        element: withLoadingComponent(<IndustryListView />),
+        meta: {
+          id: 10140,
+          icon: <MacCommandOutlined />,
+          title: '行业方案',
+        },
+      },
+    ],
+  },
+  {
     path: '/orderManage',
     element: <LayoutView />,
     errorElement: <ErrorPage />,

src/style/index.scss

 @import './reset.scss';
-
-body {
-  background-color: rgba(239, 241, 244, 1);
-}
-
-body::-webkit-scrollbar {
-  width: 0;
-}
-
-//页面基础属性
-.page {
-  width: 1200px;
-  margin: auto;
-  padding-bottom: 90px;
-}
-
-.filter-wrap {
-  padding: 0px 32px;
-  background: #ffffff;
-  border-radius: 6px;
-
-  * {
-    font-size: 14px !important;
+.ant-modal-footer {
+  border: none !important;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  & button {
+    background-color: #fff !important;
+    border: 1px solid #cccccc !important;
+    color: #000;
+    width: 124px;
   }
 
-  .filter-item {
-    padding: 11px 0;
-    border-bottom: 1px dashed RGBA(222, 222, 222, 1);
-    display: flex;
-    align-items: center;
-
-    &:nth-last-child(1) {
-      border-bottom: none;
-    }
-
-    .filter-item__title {
-      width: 80px;
-      margin-right: 8px;
-      font-family: MicrosoftYaHei;
-      color: rgba(153, 153, 153, 1);
-      line-height: 20px;
-    }
-
-    .filter-item-main {
-      flex: 1;
-      display: flex;
-      justify-content: space-between;
-    }
-
-    .ant-select-selector {
-      padding: 0 12px 0 0;
-
-      .ant-select-selection-item,
-      .ant-select-selection-placeholder {
-        font-size: 16px;
-        font-family: MicrosoftYaHei;
-        color: #3e4149;
-      }
-    }
-
-    .ant-select-arrow {
-      color: #3e4149;
-    }
-
-    .ant-btn-link {
-      font-size: 16px;
-      font-family: MicrosoftYaHei;
-      color: #3e4149;
-      padding: 0;
-    }
-
-    .ant-tag {
-      padding: 4px 9px;
-    }
+  & button:last-child {
+    width: 124px;
+    color: #fff;
+    background: #1677ff !important;
   }
 }
-
-.ant-tag-close-icon {
-  font-size: 10px !important;
-}