功能：商品分类，商品新增（未调完）

src/api/interface/categoryManage.ts

@@ -72,3 +72,58 @@ export type categoryDetailsType = InterFunction<
 >;
 //分类-关联列表
 export type categoryRelevantType = InterFunction<{ id: number; type: number }, any>;
+
+//分类管理-分类列表（新）
+type categoryItemType = {
+  id: number;
+  name: string;
+  createTime: string;
+  icon: string;
+  description: string;
+  subDTOList: (Omit<categoryItemType, 'createTime' | 'icon' | 'subDTOList'> & {
+    categoryPrimaryId: number;
+  })[];
+};
+export type categoryListRespType = InterItemFunction<{ id?: number }, categoryItemType[]>;
+//分类管理-1级分类新增（新）
+export type addPrimaryCategoryType = InterFunction<
+  {
+    description: string;
+    icon: string;
+    name: string;
+  },
+  any
+>;
+//分类管理-1级分类编辑（新）
+export type updatePrimaryCategoryType = InterFunction<
+  {
+    description: string;
+    icon: string;
+    name: string;
+    id?: number;
+  },
+  any
+>;
+//分类管理-1级分类删除（新）
+export type deletePrimaryCategoryType = InterFunction<{ id: number }, any>;
+//分类管理-2级分类新增(新)
+export type addSubCategoryType = InterFunction<
+  {
+    categoryPrimaryId: number;
+    description: string;
+    name: string;
+  },
+  any
+>;
+//分类管理-2级分类编辑（新）
+export type updateSubCategoryType = InterFunction<
+  {
+    categoryPrimaryId: number;
+    description: string;
+    name: string;
+    id?: number;
+  },
+  any
+>;
+//分类管理-2级分类删除（新）
+export type deleteSubCategoryType = InterFunction<{ id: number }, any>;

src/api/interface/goodsType.ts

@@ -103,3 +103,42 @@ export type batchOnShelfOrTakeDownType = InterFunction<{ goodsIds: number[]; sta
 export type batchRemoveWareInfoType = InterFunction<number[], any>;
 //商品-上下移动
 export type exchangeGoodsInfoType = InterFunction<{ firstId: number; secondId: number }, any>;
+
+//商品-新增（新）
+export type addMallGoodsType = InterFunction<
+  {
+    categoryPrimaryId: number;
+    categorySubId: number;
+    description: string;
+    goodsDetails: string;
+    goodsLabel: string;
+    goodsSpecList: {
+      chooseType: number;
+      goodsSpecValuesList: {
+        channelPrice?: number;
+        id: number;
+        partNo: string;
+        salePrice: number;
+        showPrice: number;
+        specValueImage: string;
+        specValueName: string;
+        stock?: number;
+      }[];
+      id: number;
+      mallGoodsId: number;
+      must: number;
+      skuUnitId: number;
+      specName: string;
+    }[];
+    id: number;
+    labelShow: number;
+    resourcesList: {
+      id: number;
+      type: number;
+      url: string;
+    }[];
+    shelfStatus: number;
+    tradeName: string;
+  },
+  any
+>;

src/api/modules/categoryManage.ts

 import axios from '../request';
 import {
+  addPrimaryCategoryType,
+  addSubCategoryType,
   categoryDetailsType,
+  categoryListRespType,
   categoryListType,
   categoryRelevantType,
+  deletePrimaryCategoryType,
   directoryListType,
   directoryPageListType,
+  updatePrimaryCategoryType,
+  updateSubCategoryType,
 } from '~/api/interface/categoryManage';
 
 export class CategoryManageAPI {
@@ -97,4 +103,26 @@ export class CategoryManageAPI {
   static getRelevantBusiness: categoryRelevantType = (params) => {
     return axios.get('/pms/classify/queryRelevantBusiness', { params });
   };
+
+  //  分类管理-分类列表（新）
+  static getCategoryRespList: categoryListRespType = (data) =>
+    axios.post('/pms/category/categoryList', data);
+  //  分类管理-1级分类新增（新）
+  static addPrimaryCategory: addPrimaryCategoryType = (data) =>
+    axios.post('/pms/category/addPrimaryCategory', data);
+  //  分类管理-1级分类编辑（新）
+  static updatePrimaryCategory: updatePrimaryCategoryType = (data) =>
+    axios.post('/pms/category/updatePrimaryCategory', data);
+  //  分类管理-1级分类删除（新）
+  static deletePrimaryCategory: deletePrimaryCategoryType = (params) =>
+    axios.get('/pms/category/deletePrimaryCategory', { params });
+  //  分类管理-2级分类新增（新）
+  static addSubCategory: addSubCategoryType = (data) =>
+    axios.post('/pms/category/addSubCategory', data);
+  //  分类管理-2级分类编辑（新）
+  static updateSubCategory: updateSubCategoryType = (data) =>
+    axios.post('/pms/category/updateSubCategory', data);
+  //  分类管理-2级分类删除（新）
+  static deleteSubCategory: deletePrimaryCategoryType = (params) =>
+    axios.get('/pms/category/deleteSubCategory', { params });
 }

src/api/modules/goodsAPI.ts

 import {
   addGoodsType,
+  addMallGoodsType,
   batchOnShelfOrTakeDownType,
   batchRemoveWareInfoType,
   detailGoodsType,
@@ -30,7 +31,7 @@ class GoodsAPI {
   };
   // 商品-单位
   static getSkuUnit: skuUnitType = () => {
-    return axios.get('/pms/goods/getSkuUnit');
+    return axios.get('/pms/mall/goods/getSkuUnit');
   };
   //  商品-其它服务列表
   static getOtherServiceList: otherServiceType = () => {
@@ -48,5 +49,8 @@ class GoodsAPI {
   static exchangeGoodsInfo: exchangeGoodsInfoType = (params) => {
     return axios.get('/pms/goods/exchangeGoodsInfo', { params });
   };
+  //  商品-新增（新）
+  static addMallGoods: addMallGoodsType = (data) =>
+    axios.post('/pms/mall/goods/addMallGoods', data);
 }
 export default GoodsAPI;

src/components/EditableCell/index.tsx

@@ -8,7 +8,7 @@ export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
   editing: boolean;
   dataIndex: string;
   title: any;
-  inputType: 'number' | 'text' | 'select' | 'uploader' | 'radio';
+  inputType: 'number' | 'text' | 'select' | 'uploader' | 'radio' | 'textArea';
   record: any;
   index: number;
   children: React.ReactNode;
@@ -19,6 +19,7 @@ const EditableCell: React.FC<
     radioOption?: { name: string; id: number }[];
     uploadSuccess?: (record: any, result: any) => void;
     rules?: any;
+    maxLength?: number;
   }
 > = ({
   editing,
@@ -32,6 +33,7 @@ const EditableCell: React.FC<
   uploadSuccess,
   children,
   rules,
+  maxLength,
   ...restProps
 }) => {
   const inputNode = () => {
@@ -70,8 +72,10 @@ const EditableCell: React.FC<
             ))}
           </Radio.Group>
         );
+      case 'textArea':
+        return <Input.TextArea placeholder={`请输入${title}`} maxLength={maxLength} showCount />;
       default:
-        return <Input placeholder={`请输入${title}`} />;
+        return <Input placeholder={`请输入${title}`} maxLength={maxLength} />;
     }
   };
   return (

src/pages/categoryManage/categoryList/components/addOrEditCategoryModal/index.tsx

+import { Form, Input, message, Modal, ModalProps } from 'antd';
+import { FC, useEffect, useState } from 'react';
+import { Uploader } from '~/components/uploader';
+import { UploadOutlined } from '@ant-design/icons';
+import { InterDataType, InterReqType } from '~/api/interface';
+import { addPrimaryCategoryType, categoryListRespType } from '~/api/interface/categoryManage';
+import { CategoryManageAPI } from '~/api';
+
+//分类列表返回类型
+type categoryType = InterDataType<categoryListRespType>['list'];
+//新增分类请求参数类型
+type addPrimaryCategoryParameter = InterReqType<addPrimaryCategoryType>;
+interface selfProps {
+  onCancel: () => void;
+  onOK: () => void;
+  currentCategory: categoryType[0] | undefined;
+}
+
+const AddOrEditCategoryModal: FC<ModalProps & selfProps> = ({
+  open,
+  onCancel,
+  onOK,
+  currentCategory,
+}) => {
+  const [form] = Form.useForm<addPrimaryCategoryParameter>();
+  const [fileList, setFileList] = useState<
+    {
+      id: number;
+      name: string;
+      uid: number;
+      url: string;
+    }[]
+  >([]);
+  //上传成功
+  const uploadSuccess = (
+    value: {
+      id: number;
+      name: string;
+      uid: number;
+      url: string;
+    }[],
+  ) => {
+    form.setFieldValue('icon', value[0].url);
+    setFileList([...value]);
+  };
+  //提交
+  const handleOk = () => {
+    form.validateFields().then((values: any) => {
+      CategoryManageAPI[currentCategory ? 'updatePrimaryCategory' : 'addPrimaryCategory']({
+        ...values,
+        id: currentCategory ? currentCategory.id : undefined,
+      }).then(({ code }) => {
+        if (code === '200') {
+          message.success('新增成功');
+          form.resetFields();
+          setFileList([]);
+          onOK();
+        }
+      });
+    });
+  };
+  const handleCancel = () => {
+    form.resetFields();
+    setFileList([]);
+    onCancel();
+  };
+  useEffect(() => {
+    if (currentCategory) {
+      form.setFieldsValue({
+        name: currentCategory.name,
+        icon: currentCategory.icon,
+        description: currentCategory.description || undefined,
+      });
+      setFileList([
+        {
+          name: 'categoryImg',
+          id: Math.random(),
+          uid: Math.random(),
+          url: currentCategory.icon,
+        },
+      ]);
+    }
+  }, [currentCategory]);
+  return (
+    <Modal
+      open={open}
+      title={currentCategory ? '编辑分类' : '新增分类'}
+      onCancel={handleCancel}
+      onOk={handleOk}
+    >
+      <Form wrapperCol={{ span: 16 }} labelCol={{ span: 4 }} form={form}>
+        <Form.Item
+          label='分类名称'
+          name='name'
+          rules={[{ required: true, message: '请输入分类名称' }]}
+        >
+          <Input placeholder='请输入分类名称' maxLength={15} />
+        </Form.Item>
+        <Form.Item
+          label='分类图标'
+          name='icon'
+          rules={[{ required: true, message: '请上传分类图标' }]}
+        >
+          <Uploader
+            fileUpload
+            listType='picture-card'
+            onChange={uploadSuccess}
+            fileLength={1}
+            fileSize={5}
+            defaultFileList={fileList}
+          >
+            <UploadOutlined />
+          </Uploader>
+        </Form.Item>
+        <Form.Item label='分类描述' name='description'>
+          <Input.TextArea placeholder='请输入分类描述' rows={4} maxLength={70} showCount />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+export default AddOrEditCategoryModal;

src/pages/categoryManage/categoryList/index.scss

+.category-list{
+  &-row-bg{
+    td{
+      background-color: rgba($color: #000000, $alpha: 0.1) !important;
+    }
+  }
+}

src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/baseInfo/index.tsx

 import { Button, Cascader, Form, Input, Radio, Select } from 'antd';
 import { Uploader } from '~/components/uploader';
+import type { RadioChangeEvent } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { InterDataType } from '~/api/interface';
+import { categoryListRespType } from '~/api/interface/categoryManage';
+import { CategoryManageAPI } from '~/api';
+
+//分类返回类型
+type categoryType = InterDataType<categoryListRespType>['list'];
+
+interface selfProps {
+  ref: any;
+}
+//基本信息表单类型
+export type baseInfoType = {
+  tradeName: string;
+  description: string;
+  mainImgList: {
+    id: number;
+    name: string;
+    uid: number;
+    url: string;
+  }[];
+  subImgList: {
+    id: number;
+    name: string;
+    uid: number;
+    url: string;
+  }[];
+  videoList: {
+    id: number;
+    name: string;
+    uid: number;
+    url: string;
+  }[];
+  categoryId: number[];
+  shelfStatus: number;
+  labelShow: number;
+  goodsLabel: string;
+};
+
+const BaseInfo = forwardRef<any, selfProps>((_props, ref) => {
+  const [baseInfoForm] = Form.useForm<baseInfoType>();
+  const [labelShow, setLabelShow] = useState<boolean>(false);
+  //分类列表
+  const [categoryList, setCategoryList] = useState<categoryType>([]);
+  //主图
+  const [mainFileList, setMainFileList] = useState<
+    {
+      id: number;
+      name: string;
+      uid: number;
+      url: string;
+    }[]
+  >([]);
+  //副图
+  const [subFileList, setSubFileList] = useState<
+    {
+      id: number;
+      name: string;
+      uid: number;
+      url: string;
+    }[]
+  >([]);
+  //视频
+  const [videoFileList, setVideoFileList] = useState<
+    {
+      id: number;
+      name: string;
+      uid: number;
+      url: string;
+    }[]
+  >([]);
+
+  useImperativeHandle(ref, () => ({
+    getForm: () => baseInfoForm,
+  }));
+
+  //标签选中监听
+  const labelRadioChange = (e: RadioChangeEvent) => {
+    setLabelShow(!!e.target.value);
+  };
+  //上传结果
+  const uploadSuccess = (
+    fileList: {
+      id: number;
+      name: string;
+      uid: number;
+      url: string;
+    }[],
+    type: string,
+  ) => {
+    switch (type) {
+      case 'mainImgList':
+        setMainFileList(fileList);
+        baseInfoForm.setFieldValue('mainImgList', fileList);
+        break;
+      case 'subImgList':
+        setSubFileList(fileList);
+        baseInfoForm.setFieldValue('subImgList', fileList);
+        break;
+      case 'videoList':
+        setVideoFileList(fileList);
+        baseInfoForm.setFieldValue('videoList', fileList);
+        break;
+      default:
+        break;
+    }
+  };
+  //分类列表
+  const getCategoryList = () => {
+    CategoryManageAPI.getCategoryRespList({ pageNo: 1, pageSize: 99999 }).then(({ result }) => {
+      setCategoryList(result.list || []);
+    });
+  };
+
+  useEffect(() => {
+    getCategoryList();
+  }, []);
 
-const BaseInfo = () => {
-  const [baseInfoForm] = Form.useForm();
   return (
     <div className='base-info'>
-      <Form labelCol={{ span: 1 }} wrapperCol={{ span: 8 }} form={baseInfoForm}>
-        <Form.Item label='商品名称'>
+      <Form
+        labelCol={{ span: 2 }}
+        wrapperCol={{ span: 8 }}
+        form={baseInfoForm}
+        initialValues={{ labelShow: 0, shelfStatus: 1 }}
+      >
+        <Form.Item
+          label='商品名称'
+          name='tradeName'
+          rules={[{ required: true, message: '请输入商品名称' }]}
+        >
           <Input placeholder='请输入商品名称' />
         </Form.Item>
-        <Form.Item label='商品描述'>
+        <Form.Item label='商品描述' name='description'>
           <Input.TextArea rows={4} placeholder='请输入商品描述' />
         </Form.Item>
-        <Form.Item label='商品主图'>
-          <Uploader fileUpload listType='picture-card'>
+        <Form.Item
+          label='商品主图'
+          name='mainImgList'
+          rules={[{ required: true, message: '请上传商品主图' }]}
+        >
+          <Uploader
+            fileUpload
+            listType='picture-card'
+            onChange={(fileList) => uploadSuccess(fileList, 'mainImgList')}
+            defaultFileList={mainFileList}
+          >
             <UploadOutlined />
           </Uploader>
         </Form.Item>
-        <Form.Item label='商品副图'>
-          <Uploader fileUpload listType='picture-card'>
+        <Form.Item label='商品副图' name='subImgList'>
+          <Uploader
+            fileUpload
+            listType='picture-card'
+            onChange={(fileList) => uploadSuccess(fileList, 'subImgList')}
+            defaultFileList={subFileList}
+          >
             <UploadOutlined />
           </Uploader>
-        </Form.Item>{' '}
-        <Form.Item label='商品视频'>
-          <Uploader fileUpload listType='text'>
+        </Form.Item>
+        <Form.Item label='商品视频' name='videoList'>
+          <Uploader
+            fileUpload
+            listType='text'
+            onChange={(fileList) => uploadSuccess(fileList, 'videoList')}
+            defaultFileList={videoFileList}
+          >
             <Button icon={<UploadOutlined />}>上传视频</Button>
           </Uploader>
         </Form.Item>
-        <Form.Item label='商品分类'>
-          <Cascader placeholder='请选择商品分类' />
+        <Form.Item
+          label='商品分类'
+          name='categoryId'
+          rules={[{ required: true, message: '请选择商品分类' }]}
+        >
+          <Cascader
+            placeholder='请选择商品分类'
+            options={categoryList}
+            fieldNames={{ label: 'name', value: 'id', children: 'subDTOList' }}
+          />
         </Form.Item>
-        <Form.Item label='商品状态'>
+        <Form.Item
+          label='商品状态'
+          name='shelfStatus'
+          rules={[{ required: true, message: '请选择商品状态' }]}
+        >
           <Select placeholder='请选择商品状态'>
-            <Select.Option>上架</Select.Option>
-            <Select.Option>下架</Select.Option>
+            <Select.Option value={1}>上架</Select.Option>
+            <Select.Option value={0}>下架</Select.Option>
           </Select>
         </Form.Item>
-        <Form.Item label='商品标签'>
-          <Radio.Group>
+        <Form.Item label='显示标签' name='labelShow'>
+          <Radio.Group onChange={labelRadioChange}>
             <Radio value={1}>显示</Radio>
             <Radio value={0}>不显示</Radio>
           </Radio.Group>
         </Form.Item>
+        {labelShow ? (
+          <Form.Item
+            label='商品标签'
+            name='goodsLabel'
+            rules={[{ required: true, message: '请输入商品标签' }]}
+          >
+            <Input placeholder='请输入商品标签' />
+          </Form.Item>
+        ) : (
+          ''
+        )}
       </Form>
     </div>
   );
-};
+});
 export default BaseInfo;

src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/skuInfo/index.tsx

-import { Button, Table } from 'antd';
+import { Button, Popconfirm, Table } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import { ColumnsType } from 'antd/es/table';
 import { FC } from 'react';
+import { InterDataType, InterReqType } from '~/api/interface';
+import { addMallGoodsType, skuUnitType } from '~/api/interface/goodsType';
 
+//商品sku规格类型
+type goodsSpecType = InterReqType<addMallGoodsType>['goodsSpecList'][0];
+//单位返回类型
+type unitType = InterDataType<skuUnitType>;
 interface selfProps {
   addOrEditSkuClick: () => void;
+  skuTableData: goodsSpecType[];
+  skuUnitList: unitType;
+  deleteSkuClick: (record: goodsSpecType) => void;
+  editSkuClick: (record: goodsSpecType) => void;
 }
 
-const SkuInfo: FC<selfProps> = ({ addOrEditSkuClick }) => {
-  const TableColumns: ColumnsType<any> = [
+const SkuInfo: FC<selfProps> = ({
+  addOrEditSkuClick,
+  skuTableData,
+  skuUnitList,
+  deleteSkuClick,
+  editSkuClick,
+}) => {
+  const tableColumns: ColumnsType<goodsSpecType> = [
     {
       title: '序号',
       align: 'center',
+      render: (_text: string, _record, index: number) => index + 1,
     },
     {
       title: '规格名称',
       align: 'center',
+      dataIndex: 'specName',
     },
     {
       title: '选择方式',
       align: 'center',
+      dataIndex: 'chooseType',
+      render: (text: number) => (text ? '多选' : '单选'),
     },
     {
       title: '是否必选',
       align: 'center',
+      dataIndex: 'must',
+      render: (text: number) => (text ? '必选' : '非必选'),
     },
     {
       title: '规格单位',
       align: 'center',
+      dataIndex: 'skuUnitId',
+      render: (text: number) => skuUnitList.find((v) => v.id === text)?.unitName || '',
     },
     {
       title: '操作',
       align: 'center',
+      render: (_text: string, record) => (
+        <>
+          <Button type='link' onClick={() => editSkuClick(record)}>
+            编辑
+          </Button>
+          <Popconfirm
+            placement='topLeft'
+            title={'删除规格'}
+            description={'确认删除该规格吗？'}
+            onConfirm={() => deleteSkuClick(record)}
+            okText='确定'
+            cancelText='取消'
+          >
+            <Button type='link' danger>
+              删除
+            </Button>
+          </Popconfirm>
+        </>
+      ),
     },
   ];
+
   return (
     <div className='sku-info'>
       <div className='sku-info-operate' style={{ margin: ' 20px 0 ' }}>
@@ -45,7 +89,7 @@ const SkuInfo: FC<selfProps> = ({ addOrEditSkuClick }) => {
           添加规格
         </Button>
       </div>
-      <Table bordered columns={TableColumns} />
+      <Table bordered columns={tableColumns} dataSource={skuTableData} rowKey='id' />
     </div>
   );
 };

src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/index.tsx

-import { Button, Tabs, TabsProps } from 'antd';
-import { useState } from 'react';
+import { Button, message, Tabs, TabsProps } from 'antd';
+import { useEffect, useRef, useState } from 'react';
 import BaseInfo from './components/baseInfo';
 import SkuInfo from './components/skuInfo';
 import IntroduceInfo from './components/introduceInfo';
 import SkuAddOrEditModal from './components/skuAddOrEditModal';
 import './index.scss';
 import { useNavigate } from 'react-router-dom';
+import { baseInfoType } from './components/baseInfo';
+import { InterDataType, InterReqType } from '~/api/interface';
+import { addMallGoodsType, skuUnitType } from '~/api/interface/goodsType';
+import GoodsAPI from '~/api/modules/goodsAPI';
+
+//商品sku规格类型
+type goodsSpecType = InterReqType<addMallGoodsType>['goodsSpecList'][0];
+//单位返回类型
+type unitType = InterDataType<skuUnitType>;
 
 const GoodsAddOrEditOrDetail = () => {
+  const baseInfoRef = useRef<any>();
   const navigate = useNavigate();
+
+  //单位列表
+  const [skuUnitList, setSkuUnitList] = useState<unitType>([]);
   const [tabSelectKeys, setTabSelectKeys] = useState<string>('1');
   //新增、编辑sku弹窗
   const [addOrEditSkuModalShow, setAddOrEditSkuModalShow] = useState<boolean>(false);
+  //当前编辑sku
+  const [currentSku, setCurrentSku] = useState<goodsSpecType>();
+  //基本信息暂存
+  const [baseInfo, setBaseInfo] = useState<baseInfoType>();
+  //skuTable数据
+  const [skuTable, setSkuTable] = useState<goodsSpecType[]>([]);
 
   //新增、编辑sku弹窗显示
-  const addOrEditSkuClick = () => {
+  const addOrEditSkuClick = (record?: goodsSpecType) => {
+    setCurrentSku(record ? { ...record } : undefined);
     setAddOrEditSkuModalShow(true);
   };
   const addOrEditSkuModalCancel = () => {
     setAddOrEditSkuModalShow(false);
   };
-  //tab 切换
-  const tabSelectChange = (key: string) => {
-    setTabSelectKeys(key);
-  };
-  //下一步
-  const toNextStep = () => {
-    setTabSelectKeys((Number(tabSelectKeys) + 1).toString());
-  };
-  //上一步
-  const toBackStep = () => {
-    setTabSelectKeys((Number(tabSelectKeys) - 1).toString());
+  const addOrEditSkuModalOk = (values: goodsSpecType) => {
+    setAddOrEditSkuModalShow(false);
+    const skuTableIndex: number = skuTable.findIndex((v) => v.id === values.id);
+    if (skuTableIndex !== -1) {
+      skuTable.splice(skuTableIndex, 1, values);
+      setSkuTable([...skuTable]);
+    } else {
+      setSkuTable([...skuTable, { ...values }]);
+    }
   };
-  const backRoute = () => {
-    navigate(-1);
+  //sku删除
+  const deleteSkuClick = (record: goodsSpecType) => {
+    const skuIndex: number = skuTable.findIndex((v) => v.id === record.id);
+    skuTable.splice(skuIndex, 1);
+    setSkuTable([...skuTable]);
   };
-  const TabItems: TabsProps['items'] = [
+
+  const tabItems: TabsProps['items'] = [
     {
       key: '1',
       label: `基础信息`,
-      children: <BaseInfo />,
+      children: <BaseInfo ref={baseInfoRef} />,
     },
     {
       key: '2',
       label: `商品规格`,
-      children: <SkuInfo addOrEditSkuClick={addOrEditSkuClick} />,
+      children: (
+        <SkuInfo
+          addOrEditSkuClick={addOrEditSkuClick}
+          skuTableData={skuTable}
+          skuUnitList={skuUnitList}
+          deleteSkuClick={deleteSkuClick}
+          editSkuClick={addOrEditSkuClick}
+        />
+      ),
     },
     {
       key: '3',
@@ -52,9 +82,60 @@ const GoodsAddOrEditOrDetail = () => {
       children: <IntroduceInfo />,
     },
   ];
+
+  //tab 切换
+  const tabSelectChange = (key: string) => {
+    setTabSelectKeys(key);
+  };
+  //下一步
+  const toNextStep = () => {
+    switch (tabSelectKeys) {
+      case '1':
+        baseInfoRef.current
+          .getForm()
+          .validateFields()
+          .then((value: baseInfoType) => {
+            setBaseInfo(value);
+            setTabSelectKeys((Number(tabSelectKeys) + 1).toString());
+          })
+          .catch((error: any) => {
+            message.error(error.errorFields[0].errors[0]);
+          });
+        break;
+      case '2':
+        if (skuTable.length) {
+          setTabSelectKeys((Number(tabSelectKeys) + 1).toString());
+        } else {
+          message.warning('请添加规格');
+        }
+        break;
+      case '3':
+        break;
+      default:
+        break;
+    }
+  };
+  //上一步
+  const toBackStep = () => {
+    setTabSelectKeys((Number(tabSelectKeys) - 1).toString());
+  };
+  const backRoute = () => {
+    navigate(-1);
+  };
+  //单位列表
+  const getSkuUnit = () => {
+    GoodsAPI.getSkuUnit().then(({ result }) => {
+      setSkuUnitList(result || []);
+    });
+  };
+
+  useEffect(() => {
+    getSkuUnit();
+  }, []);
+
   return (
     <div className='goods-operate-wrap'>
-      <Tabs items={TabItems} activeKey={tabSelectKeys} onChange={tabSelectChange}></Tabs>
+      <Tabs items={tabItems} activeKey={tabSelectKeys} onChange={tabSelectChange}></Tabs>
       <div className='next-step'>
         {tabSelectKeys !== '1' ? <Button onClick={toBackStep}>上一步</Button> : ''}
         {tabSelectKeys !== '3' ? (
@@ -71,7 +152,13 @@ const GoodsAddOrEditOrDetail = () => {
         </Button>
       </div>
       {/*新增、编辑sku弹窗*/}
-      <SkuAddOrEditModal open={addOrEditSkuModalShow} onCancel={addOrEditSkuModalCancel} />
+      <SkuAddOrEditModal
+        open={addOrEditSkuModalShow}
+        onCancel={addOrEditSkuModalCancel}
+        onOk={addOrEditSkuModalOk}
+        skuUnitList={skuUnitList}
+        currentSku={currentSku}
+      />
     </div>
   );
 };

src/pages/systemManage/companyManage/companyDetail/index.tsx

+import { useSearchParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+const CompanyDetail = () => {
+  const [searchParams] = useSearchParams();
+  const [companyId, setCompanyId] = useState<number>(-1);
+
+  useEffect(() => {
+    setCompanyId(Number(searchParams.get('id')));
+  }, []);
+
+  return <div className='company-detail'>单位详情</div>;
+};
+export default CompanyDetail;

src/pages/systemManage/companyManage/index.tsx → src/pages/systemManage/companyManage/companyList/index.tsx

@@ -6,6 +6,7 @@ import { InterListType, InterReqType } from '~/api/interface';
 import { ColumnsType } from 'antd/es/table';
 import { SystemManageAPI } from '~/api';
 import { listCompanyPage } from '~/api/interface/systemManageType';
+import { useNavigate } from 'react-router-dom';
 import AddEditModal from './comp/addEditModal';
 
 // 列表的数据类型
@@ -16,6 +17,7 @@ type ReqType = InterReqType<listCompanyPage>;
 let query: ReqType = {};
 
 const CompanyManageView = () => {
+  const navigate = useNavigate();
   const { confirm } = Modal;
   // 新增编辑弹窗是否开启
   const [addEditModalVisible, setAddEditModalVisible] = useState(false);
@@ -77,6 +79,14 @@ const CompanyManageView = () => {
       },
     });
   };
+  //跳转单位详情
+  const toCompanyDetail = (record: TableType[0]) => {
+    navigate({
+      pathname: '/systemManage/companyDetail',
+      search: `id=${record.id}`,
+    });
+  };
+
   // componentDidMount
   useEffect(() => {
     query = {};
@@ -88,17 +98,11 @@ const CompanyManageView = () => {
       title: '单位名称',
       dataIndex: 'companyName',
       align: 'center',
-      width: '150px',
+      width: '20%',
       fixed: 'left',
       ellipsis: true,
     },
     {
-      title: '行政区划',
-      dataIndex: 'province',
-      align: 'center',
-      render: (_value, record) => `${record.province} / ${record.city} / ${record.district}`,
-    },
-    {
       title: '详细地址',
       dataIndex: 'address',
       align: 'center',
@@ -117,7 +121,7 @@ const CompanyManageView = () => {
     },
     {
       title: '操作',
-      width: '100px',
+      width: '20%',
       fixed: 'right',
       align: 'center',
       render: (_text, record) => (
@@ -131,6 +135,9 @@ const CompanyManageView = () => {
           >
             变更
           </Button>
+          <Button type='link' onClick={() => toCompanyDetail(record)}>
+            详情
+          </Button>
           <Button
             type='link'
             danger

src/router/index.ts

@@ -3,7 +3,6 @@ import { RouteObjectType, routerList } from '~/router/router';
 import { InterDataType } from '~/api/interface';
 import { listMenuInfoType } from '~/api/interface/systemManageType';
 import { SystemManageAPI } from '~/api';
-import Cookies from 'js-cookie';
 //菜单类型
 type menuType = InterDataType<listMenuInfoType>;
 
@@ -11,36 +10,33 @@ type menuType = InterDataType<listMenuInfoType>;
 let routerListStore: any[] = [];
 // 获取用户权限路由列表
 export const authRouterList = async () => {
-  if (localStorage.getItem('roleId') && Cookies.get('SHAREFLY-TOKEN')) {
-    // 如果缓存中没有数据
-    if (routerListStore.length === 0) {
-      // 加载路由数据
-      const { result } = await SystemManageAPI.getListRoleMenuInfo({
-        roleId: Number(localStorage.getItem('roleId')),
-      });
-      const ids: number[] = getAllKeys([result]);
-      const getRouteList = (data: RouteObjectType[]) => {
-        return data.reduce((pre: RouteObjectType[], cur) => {
-          const Obj: RouteObjectType = { ...cur };
-          if (ids.includes(Obj.meta.id) || Obj.meta.hidden) {
-            if (Obj.children) {
-              Obj.children = [...getRouteList(Obj.children)];
-            }
-            pre.push(Obj);
+  // 如果缓存中没有数据
+  if (routerListStore.length === 0) {
+    // 加载路由数据
+    const { result } = await SystemManageAPI.getListRoleMenuInfo({
+      roleId: Number(localStorage.getItem('roleId')),
+    });
+    const ids: number[] = getAllKeys([result]);
+    const getRouteList = (data: RouteObjectType[]) => {
+      return data.reduce((pre: RouteObjectType[], cur) => {
+        const Obj: RouteObjectType = { ...cur };
+        if (ids.includes(Obj.meta.id) || Obj.meta.hidden) {
+          if (Obj.children) {
+            Obj.children = [...getRouteList(Obj.children)];
           }
-          return pre;
-        }, []);
-      };
-      const arr = [...getRouteList(routerList)];
-      // 将路由数据存到store中
-      routerListStore = arr;
-      // 完成后返回路由数据
-      return Promise.resolve(arr);
-    } else {
-      return Promise.resolve(routerListStore);
-    }
+          pre.push(Obj);
+        }
+        return pre;
+      }, []);
+    };
+    const arr = [...getRouteList(routerList)];
+    // 将路由数据存到store中
+    routerListStore = arr;
+    // 完成后返回路由数据
+    return Promise.resolve(arr);
+  } else {
+    return Promise.resolve(routerListStore);
   }
-  return Promise.resolve([]);
 };
 //获取全部节点
 const getAllKeys = (data: menuType[]) => {

src/router/privateRouter.tsx

@@ -14,23 +14,29 @@ function PrivateRouter() {
     // TODO: 判断是否登录 (需要改为实时获取地址栏的路由)
     const path = location.pathname;
     const token = Cookies.get('SHAREFLY-TOKEN');
+    const roleId = localStorage.getItem('roleId');
     if (!token && path !== '/login') {
       navigate('/login', { replace: true });
       return;
     }
+    if (roleId && token) {
+      // 整合路由数据
+      authRouterList().then((value) => {
+        if (value.length) {
+          const routes = [...value, ...whiteRouterList];
+          setRouter(routes);
+          if (path === '/') {
+            navigate({ pathname: value[0].children.find((v: any) => !v.meta.hidden)?.path });
+          }
+        } else {
+          message.warning('该账号暂无权限');
+          navigate('/login', { replace: true });
+        }
+      });
+    }
   };
   useEffect(() => {
     beforeEach();
-    // 整合路由数据
-    authRouterList().then((value) => {
-      if (value.length) {
-        const routes = [...value, ...whiteRouterList];
-        setRouter(routes); //不同账号登录时，重新更新路由（有瑕疵）
-      } else if (localStorage.getItem('roleId')) {
-        message.warning('该账号暂无权限');
-        navigate('/login', { replace: true });
-      }
-    });
   }, [location.pathname]);
 
   return useRoutes(router);

src/router/router.tsx

@@ -98,6 +98,7 @@ const ProduceDetailView = React.lazy(
 ); //产品详情
 const MakeListView = React.lazy(() => import('~/pages/mallManage/makeManage/makeList'));
 // 分类管理
+const CategoryListView = React.lazy(() => import('~/pages/categoryManage/categoryList'));
 const CategoryManage = React.lazy(() => import('~/pages/categoryManage/category'));
 const CategoryDetail = React.lazy(() => import('~/pages/categoryManage/category/detail'));
 // 目录管理
@@ -119,7 +120,10 @@ import TenderManageDetail from '~/pages/resourceManage/tenderManage/detail';
 import TenderManageFeedback from '~/pages/resourceManage/tenderManage/feedback';
 import BusinessCaseManage from '~/pages/resourceManage/businessCaseManage';
 import CustomIdentityView from '~/pages/customManage/customIdentity';
-import CompanyManageView from '~/pages/systemManage/companyManage';
+import CompanyListView from '~/pages/systemManage/companyManage/companyList'; //单位列表
+const CompanyDetailView = React.lazy(
+  () => import('~/pages/systemManage/companyManage/companyDetail'),
+);
 import AccountLimit from '~/pages/systemManage/limitManage/roleList'; //账号权限
 import LimitInfo from '~/pages/systemManage/limitManage/limitInfo';
 import CustomListDetail from '~/pages/customManage/customList/detail'; //权限信息
@@ -647,76 +651,86 @@ export const routerList: Array<RouteObjectType> = [
     },
     children: [
       {
-        path: '/categoryManage/jobServicesCategory/1',
-        element: withLoadingComponent(<CategoryManage />),
+        path: '/categoryManage/categoryList',
+        element: withLoadingComponent(<CategoryListView />),
         errorElement: <ErrorPage />,
         meta: {
           id: 1210,
-          title: '作业服务分类',
+          title: '分类列表',
           icon: <SendOutlined />,
         },
       },
-      {
-        path: '/categoryManage/jobServicesCategory/2',
-        element: withLoadingComponent(<CategoryManage />),
-        errorElement: <ErrorPage />,
-        meta: {
-          id: 1220,
-          title: '设备租赁分类',
-          icon: <RocketOutlined />,
-        },
-      },
-      {
-        path: '/categoryManage/jobServicesCategory/3',
-        element: withLoadingComponent(<CategoryManage />),
-        errorElement: <ErrorPage />,
-        meta: {
-          id: 1230,
-          title: '飞手培训分类',
-          icon: <AppstoreAddOutlined />,
-        },
-      },
-      {
-        path: '/categoryManage/jobServicesCategory/4',
-        element: withLoadingComponent(<CategoryManage />),
-        errorElement: <ErrorPage />,
-        meta: {
-          id: 1240,
-          title: '产品商城分类',
-          icon: <AppstoreOutlined />,
-        },
-      },
-      {
-        path: '/categoryManage/jobServicesCategory/0',
-        element: withLoadingComponent(<CategoryManage />),
-        errorElement: <ErrorPage />,
-        meta: {
-          id: 1250,
-          title: '通用分类',
-          icon: <CoffeeOutlined />,
-        },
-      },
-      {
-        path: '/categoryManage/detail/:id',
-        element: withLoadingComponent(<CategoryDetail />),
-        errorElement: <ErrorPage />,
-        meta: {
-          id: 18600,
-          title: '分类详情',
-          icon: '',
-          hidden: true,
-        },
-      },
-      {
-        path: '/categoryManage/DirectoryManage',
-        element: withLoadingComponent(<DirectoryManage />),
-        errorElement: <ErrorPage />,
-        meta: {
-          id: 1260,
-          title: '目录管理',
-          icon: <UnorderedListOutlined />,
-        },
-      },
+      // {
+      //   path: '/categoryManage/jobServicesCategory/1',
+      //   element: withLoadingComponent(<CategoryManage />),
+      //   errorElement: <ErrorPage />,
+      //   meta: {
+      //     id: 1210,
+      //     title: '作业服务分类',
+      //     icon: <SendOutlined />,
+      //   },
+      // },
+      // {
+      //   path: '/categoryManage/jobServicesCategory/2',
+      //   element: withLoadingComponent(<CategoryManage />),
+      //   errorElement: <ErrorPage />,
+      //   meta: {
+      //     id: 1220,
+      //     title: '设备租赁分类',
+      //     icon: <RocketOutlined />,
+      //   },
+      // },
+      // {
+      //   path: '/categoryManage/jobServicesCategory/3',
+      //   element: withLoadingComponent(<CategoryManage />),
+      //   errorElement: <ErrorPage />,
+      //   meta: {
+      //     id: 1230,
+      //     title: '飞手培训分类',
+      //     icon: <AppstoreAddOutlined />,
+      //   },
+      // },
+      // {
+      //   path: '/categoryManage/jobServicesCategory/4',
+      //   element: withLoadingComponent(<CategoryManage />),
+      //   errorElement: <ErrorPage />,
+      //   meta: {
+      //     id: 1240,
+      //     title: '产品商城分类',
+      //     icon: <AppstoreOutlined />,
+      //   },
+      // },
+      // {
+      //   path: '/categoryManage/jobServicesCategory/0',
+      //   element: withLoadingComponent(<CategoryManage />),
+      //   errorElement: <ErrorPage />,
+      //   meta: {
+      //     id: 1250,
+      //     title: '通用分类',
+      //     icon: <CoffeeOutlined />,
+      //   },
+      // },
+      // {
+      //   path: '/categoryManage/detail/:id',
+      //   element: withLoadingComponent(<CategoryDetail />),
+      //   errorElement: <ErrorPage />,
+      //   meta: {
+      //     id: 18600,
+      //     title: '分类详情',
+      //     icon: '',
+      //     hidden: true,
+      //   },
+      // },
+      // {
+      //   path: '/categoryManage/DirectoryManage',
+      //   element: withLoadingComponent(<DirectoryManage />),
+      //   errorElement: <ErrorPage />,
+      //   meta: {
+      //     id: 1260,
+      //     title: '目录管理',
+      //     icon: <UnorderedListOutlined />,
+      //   },
+      // },
     ],
   },
   // {
@@ -982,13 +996,24 @@ export const routerList: Array<RouteObjectType> = [
         },
       },
       {
-        path: '/systemManage/companyManage',
-        element: withLoadingComponent(<CompanyManageView />),
+        path: '/systemManage/companyList',
+        element: withLoadingComponent(<CompanyListView />),
         errorElement: <ErrorPage />,
         meta: {
           id: 1430,
-          title: '单位管理',
+          title: '单位列表',
+          icon: <BankOutlined />,
+        },
+      },
+      {
+        path: '/systemManage/companyDetail',
+        element: withLoadingComponent(<CompanyDetailView />),
+        errorElement: <ErrorPage />,
+        meta: {
+          id: 1440,
+          title: '单位详情',
           icon: <BankOutlined />,
+          hidden: true,
         },
       },
     ],