联调：商品联调

package.json

@@ -32,11 +32,11 @@
     "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",
     "react-viewer": "^3.2.2",
     "sort-by": "^1.2.0",
+    "wangeditor": "^4.7.15",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {

src/api/interface/categoryManage.ts

@@ -48,6 +48,15 @@ export type categoryListType = InterItemFunction<
   { directoryId?: number; type?: number },
   categoryReposeType[]
 >;
+//目录列表类型-分页
+export type directoryPageListType = InterItemFunction<
+  { type?: number },
+  {
+    id: number;
+    directoryName: string;
+    type: number;
+  }[]
+>;
 //目录列表类型-不分页
 export type directoryListType = InterFunction<
   { type: number },

src/api/interface/commonType.ts

@@ -14,4 +14,4 @@ export type BackEndLoginType = InterFunction<
   }
 >;
 // 上传图片
-export type uploadOssType = InterFunction<any, NonNullable<unknown>>;
+export type uploadOssType = InterFunction<any, { filePath: string }>;

src/api/interface/goodsType.ts

+import { UploadFile } from 'antd/es/upload/interface';
+// 商城-新增商品
+import { InterFunction } from '~/api/interface';
+
+//商品-新增
+export type BaseInfoType = {
+  goodsName: string;
+  goodsDesc: string;
+  directoryId: number;
+  tag: string;
+  shelfStatus: number;
+  categoryByOne: number;
+  categoryByTwo: number;
+  images: { id: number; imgType: number; imgUrl: string }[];
+  goodsVideo: string;
+};
+// 库存规格
+export interface specEntity {
+  id: number;
+  categoryId: number | string;
+  goodsSpecName: string;
+  skuId: number;
+  specIds: any;
+  chooseType: number;
+  must: number;
+  skuUnitId: number;
+  customizeInfo?: customizeEntity[];
+  productSpecList?: customizeEntity[];
+  industrySpecList?: any;
+  isCustomProd: boolean;
+  skuName?: string;
+  flag: number;
+  productName?: string;
+}
+// 自定义规格
+export interface customizeEntity {
+  id: number;
+  partNo: string;
+  specName: string;
+  specImage?: string;
+  fileList?: UploadFile[];
+  productSpecCPQVO?: any;
+  productSpec?: number;
+}
+export type addGoodsType = InterFunction<
+  BaseInfoType & {
+    productSpec: specEntity[];
+    goodsDetailVO: { goodsDesc: string; productDesc?: string };
+    otherService: number[];
+  },
+  any
+>;
+//商品-编辑
+export type editGoodsType = InterFunction<
+  BaseInfoType & {
+    productSpec: specEntity[];
+    goodsDetailVO: { goodsDesc: string; productDesc?: string };
+    otherService: number[];
+    id: number;
+  },
+  any
+>;
+//商品-详情
+export type detailGoodsType = InterFunction<
+  { goodsInfoId: number },
+  BaseInfoType & {
+    goodsSpec: specEntity[];
+    goodsDetail: { goodsDesc: string; productDesc: string };
+    otherService: number[];
+    goodsVideoId: number;
+    id: number;
+  }
+>;
+//商品-其它服务列表
+export type otherServiceType = InterFunction<any, { id: number; saleServiceName: string }[]>;
+//商品-规格单位
+export type skuUnitType = InterFunction<any, { id: number; unitName: string }[]>;

src/api/modules/categoryManage.ts

 import axios from '../request';
-import { categoryListType, directoryListType, GoodsInfo } from '~/api/interface/categoryManage';
+import {
+  categoryListType,
+  directoryListType,
+  directoryPageListType,
+  GoodsInfo,
+} from '~/api/interface/categoryManage';
 
 export class CategoryManageAPI {
   // 分类目录
@@ -9,17 +14,15 @@ export class CategoryManageAPI {
     });
   };
   // 分类目录(类型)
-  static getDirectoryListClone: directoryListType = (params) => {
-    return axios.get('/pms/classify/getDirectoryList', { params });
-  };
-
-  //目录列表不含分页
-  static getDirectoryList = (params: { type: number }) => {
-    return axios.get('pms/classify/getDirectoryList', {
+  static directoryListClone: directoryPageListType = (params) => {
+    return axios.get('pms/classify/directoryList', {
       params,
     });
   };
-
+  // 分类目录-不分页(类型)
+  static getDirectoryListClone: directoryListType = (params) => {
+    return axios.get('/pms/classify/getDirectoryList', { params });
+  };
   // 新增或编辑目录
   static addOrEditDirectory = (
     data: { id?: number; directoryName: string; type: number; relevance: number }[],

src/api/modules/goodsAPI.ts

+import {
+  addGoodsType,
+  detailGoodsType,
+  editGoodsType,
+  otherServiceType,
+  skuUnitType,
+} from '~/api/interface/goodsType';
+import axios from '../request';
+
+class GoodsAPI {
+  //商品-新增
+  static addGoods: addGoodsType = (data) => {
+    return axios.post('/pms/goods/addGoodsInfo', data);
+  };
+  //商品-编辑
+  static editGoods: editGoodsType = (data) => {
+    return axios.post('/pms/goods/editGoodsInfo', data);
+  };
+  //商品-详情
+  static getGoodsDetail: detailGoodsType = (params) => {
+    return axios.get('/pms/goods/getGoodsInfoDetail', { params });
+  };
+  // 商品-单位
+  static getSkuUnit: skuUnitType = () => {
+    return axios.get('/pms/goods/getSkuUnit');
+  };
+  //  商品-其它服务列表
+  static getOtherServiceList: otherServiceType = () => {
+    return axios.get('/pms/goods/listOtherService');
+  };
+}
+export default GoodsAPI;

src/api/modules/produceManageAPI.ts

@@ -14,7 +14,6 @@ import {
   ProductSpecListType,
   productSpecPriceType,
 } from '~/api/interface/produceManageType';
-import dayjs from 'dayjs';
 
 export class ProduceManageAPI {
   // 产品管理-分页列表

src/components/EditableCell/index.tsx

+import { Form, InputNumber, Input } from 'antd';
+import React from 'react';
+
+// 表格可编辑单元格
+interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
+  editing: boolean;
+  dataIndex: string;
+  title: any;
+  inputType: 'number' | 'text';
+  record: any;
+  index: number;
+  children: React.ReactNode;
+}
+const EditableCell: React.FC<EditableCellProps> = ({
+  editing,
+  dataIndex,
+  title,
+  inputType,
+  record,
+  index,
+  children,
+  ...restProps
+}) => {
+  const inputNode =
+    inputType === 'number' ? <InputNumber /> : <Input placeholder={`请输入${title}`} />;
+
+  return (
+    <td {...restProps}>
+      {editing ? (
+        <Form.Item
+          name={dataIndex + record.id}
+          style={{ margin: 0 }}
+          rules={[
+            {
+              required: true,
+              message: `请输入${title}`,
+            },
+          ]}
+        >
+          {inputNode}
+        </Form.Item>
+      ) : (
+        children
+      )}
+    </td>
+  );
+};
+
+export default EditableCell;

src/components/richText/index.tsx

-import ReactQuill from 'react-quill';
-import 'react-quill/dist/quill.snow.css';
-import { FC, useEffect, useRef } from 'react';
+import React, { useEffect } from 'react';
+import E from 'wangeditor';
+import { message } from 'antd';
+// import events from '@/events';
+import { CommonAPI } from '~/api';
 
-interface selfProps {
-  richTextHeight: number;
+let editor: any = null;
+
+interface PropsType {
+  onChange: (html?: string) => void;
+  value: string;
+  // eslint-disable-next-line react/require-default-props
+  isDetail?: boolean;
 }
 
-const RichText: FC<selfProps> = ({ richTextHeight }) => {
-  const quillRef = useRef<any>();
-  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 RichText: React.FC<PropsType> = ({ onChange, value, isDetail }) => {
+  useEffect(() => {
+    // 注：class写法需要在componentDidMount 创建编辑器
+    editor = new E('.edit');
+    editor.config.uploadImgShowBase64 = false;
+    editor.config.zIndex = 1;
+    editor.config.height = 550;
+    editor.config.uploadImgMaxLength = 5;
+    editor.config.uploadImgMaxSize = 1024 * 1024 * 3; // 2M
+    editor.config.customUploadImg = async (resultFiles: any, insertImgFn: any) => {
+      // resultFiles 是 input 中选中的文件列表
+      // insertImgFn 是获取图片 url 后，插入到编辑器的方法
+      const formData = new FormData();
+      resultFiles.map(async (item: any) => {
+        formData.append('uploadFile', item);
+      });
+      const { code, result } = await CommonAPI.uploadOss(formData);
+      if (code === '200') {
+        insertImgFn(result.filePath);
+        message.success('上传成功');
+      } else {
+        message.error('上传失败');
+      }
+    };
+    editor.config.onchange = (newHtml: string) => {
+      if (newHtml) {
+        onChange(newHtml);
+      } else {
+        onChange(undefined);
+      }
+    };
+
+    // 需要展示的菜单
+    editor.config.menus = [
+      'head',
+      'bold',
+      'fontSize',
+      'fontName',
+      'italic',
+      'underline',
+      'strikeThrough',
+      'indent',
+      'lineHeight',
+      'foreColor',
+      'backColor',
+      'link',
+      'list',
+      'todo',
+      'justify',
+      'quote',
+      'table',
+      'splitLine',
+      'undo',
+      'redo',
+      'image',
+    ];
+
+    /** 一定要创建 */
+    editor.create();
+    // events.addListener('clearEdit', () => {
+    //   editor.txt.html('');
+    // });
+    return () => {
+      // 组件销毁时销毁编辑器 注：class写法需要在componentWillUnmount中调用
+      editor.destroy();
+    };
+
+    // 这里一定要加上下面的这个注释
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   useEffect(() => {
-    quillRef.current.editor.container.style.height = richTextHeight + 'px';
-  });
-  return <ReactQuill modules={modules} ref={quillRef} />;
+    if (editor) {
+      editor.txt.html(value);
+    }
+    if (isDetail) {
+      editor.disable();
+    }
+  }, [value]);
+
+  return <div className='edit' />;
 };
 export default RichText;

src/components/uploader/index.tsx

 import React, { useEffect, useState } from 'react';
 import { message, Upload, UploadProps } from 'antd';
-// import { UploadFile } from "antd/es/upload/interface";
 import { CommonAPI } from '~/api';
 import './index.scss';
 
@@ -26,7 +25,17 @@ export const Uploader: React.FC<PropsType> = (props) => {
     listType: 'text',
     fileSize: 2,
     fileLength: 1,
-    fileType: ['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/bmp'],
+    fileType: [
+      'image/png',
+      'image/jpeg',
+      'image/jpg',
+      'image/gif',
+      'image/bmp',
+      'video/mp4',
+      'video/avi',
+      'video/mov',
+      'video/mkv',
+    ],
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onChange: () => {},
     defaultFileList: [],

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

+import React, { useEffect, useState } from 'react';
+import { Modal, Form, Select, Input, message, Button, ModalProps } from 'antd';
+import { InterDataType } from '~/api/interface';
+import { cooperationTagType } from '~/api/interface/produceManageType';
+import { customizeEntity } from '~/api/interface/goodsType';
+
+//加盟标签返回类型
+type cooperationTagResponseType = InterDataType<cooperationTagType>;
+interface selfProps {
+  handleOk: (specPrice: any) => void;
+  handleCancel: () => void;
+  customRowData: Partial<customizeEntity>;
+  tagInfoList: cooperationTagResponseType;
+}
+
+const ConfigurePriceModal: React.FC<ModalProps & selfProps> = ({
+  open,
+  handleOk,
+  handleCancel,
+  customRowData,
+  tagInfoList,
+}) => {
+  // 选择的列表
+  const [selectList, setSelectList] = useState<number[]>([]);
+
+  // 配置价格Form
+  const [cfgPriceForm] = Form.useForm<any>();
+  const deselectEvent = (id: number) => {
+    const obj: any = {};
+    obj[id] = undefined;
+    cfgPriceForm.setFieldsValue(obj);
+    const numArr: number[] = selectList.filter((i: number) => i !== id);
+    setSelectList([...numArr]);
+  };
+  const levelSelectEvent = (id: number) => {
+    selectList.push(id);
+    setSelectList([...selectList]);
+  };
+  // 将val转换为label
+  const transValtoLabel = (id: number) => {
+    const item = tagInfoList.find((i) => i.id === id);
+    return item ? item.tagName : id;
+  };
+  // 表单验证
+  const handleSubmit = async () => {
+    cfgPriceForm
+      .validateFields()
+      .then(async (values) => {
+        const specPrice = Object.keys(values).reduce((pre: any, cur: string) => {
+          if (Object.keys(customRowData.productSpecCPQVO).length != 0) {
+            const priceItem: any = customRowData.productSpecCPQVO.specPrice.find(
+              (i: any) => i.cooperationTag === Number(cur),
+            );
+            pre.push({
+              id: priceItem?.id,
+              price: values[cur],
+              cooperationTag: cur,
+            });
+          } else {
+            pre.push({ price: values[cur], cooperationTag: cur });
+          }
+          return pre;
+        }, []);
+        handleOk([...specPrice]);
+      })
+      .catch((err) => {
+        message.warning(err.errorFields[0].errors[0]).then();
+      });
+  };
+  const handleCancelEvent = () => {
+    cfgPriceForm.resetFields();
+    handleCancel();
+  };
+  // 价格正则
+  const priceValidator = (_rule: any, value: any) => {
+    const regExp = /^[1-9]\d{0,7}(\.\d{1,2})?$|^0(\.\d{1,2})?$/;
+    const bol: boolean = regExp.test(value);
+    if (!value) {
+      return Promise.reject(new Error('请输入定价金额'));
+    }
+    if (!bol) {
+      return Promise.reject(
+        new Error('金额应为数字,小数最多两位,整数最多八位,不能输入0开头的整数'),
+      );
+    }
+    return Promise.resolve();
+  };
+
+  useEffect(() => {
+    // 新增规格则清空表单数据
+    if (Object.keys(customRowData.productSpecCPQVO).length === 0) {
+      cfgPriceForm.resetFields();
+      setSelectList([]);
+    } else {
+      const ids: number[] = [];
+      customRowData.productSpecCPQVO.specPrice.map((item: any) => {
+        cfgPriceForm.setFieldValue(Number(item.tagInfoId), item.price);
+        if (item.tagInfoId != '0') {
+          ids.push(Number(item.tagInfoId));
+        }
+        setSelectList(ids);
+      });
+    }
+  }, [customRowData]);
+
+  return (
+    <Modal
+      title='配置价格'
+      open={open}
+      onCancel={handleCancelEvent}
+      zIndex={1009}
+      footer={[
+        <Button key={1} type='default' onClick={handleCancelEvent}>
+          取消
+        </Button>,
+        <Button key={2} type='primary' onClick={handleSubmit}>
+          确认
+        </Button>,
+      ]}
+    >
+      <Form labelCol={{ span: 7 }} wrapperCol={{ span: 14 }} form={cfgPriceForm}>
+        <Form.Item label='渠道等级'>
+          <Select
+            placeholder='请选择渠道等级'
+            mode='multiple'
+            filterOption={(input, option) =>
+              (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
+            }
+            onDeselect={deselectEvent}
+            onSelect={levelSelectEvent}
+            value={selectList}
+          >
+            {tagInfoList.map((item) => (
+              <Select.Option key={item.id} value={item.id}>
+                {item.tagName}
+              </Select.Option>
+            ))}
+          </Select>
+        </Form.Item>
+        <Form.Item
+          label='市场单价'
+          name={0}
+          rules={[{ required: true, validator: priceValidator }]}
+        >
+          <Input placeholder='请输入市场单价' maxLength={11} />
+        </Form.Item>
+        {selectList.map((item: number) => (
+          <Form.Item
+            label={transValtoLabel(item)}
+            key={item}
+            name={item}
+            rules={[{ required: true, validator: priceValidator }]}
+          >
+            <Input placeholder='请输入定价金额' maxLength={11} />
+          </Form.Item>
+        ))}
+      </Form>
+    </Modal>
+  );
+};
+
+export default ConfigurePriceModal;

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

 import './index.scss';
 import RichText from '~/components/richText';
-const GoodsIntroduce = () => {
+import { FC } from 'react';
+
+interface selfProps {
+  getRichText: (html?: string) => void;
+}
+
+const GoodsIntroduce: FC<selfProps> = ({ getRichText }) => {
+  const richTextChange = (html?: string) => {
+    getRichText(html);
+  };
   return (
     <div className='goods-introduce'>
       <div className='goods-introduce-title'>产品介绍图</div>
       <div className='goods-introduce-content'>
-        <RichText richTextHeight={300} />
+        <RichText value='' onChange={richTextChange} />
       </div>
     </div>
   );

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

-import React, { forwardRef } from 'react';
-import { Checkbox, Form, Select, Row, Col } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { Checkbox, Form } from 'antd';
 import './index.scss';
+import GoodsAPI from '~/api/modules/goodsAPI';
+import { detailGoodsType, otherServiceType } from '~/api/interface/goodsType';
+import { InterDataType } from '~/api/interface';
+//商品返回类型
+type goodsDetailType = InterDataType<detailGoodsType>;
 
-const OtherInfo: React.FC<any> = forwardRef(() => {
+interface selfProps {
+  otherServiceSelect: (id: number[]) => void;
+  goodsDetail: goodsDetailType | undefined;
+}
+//其它服务返回类型
+type otherServiceListType = InterDataType<otherServiceType>;
+
+const OtherInfo: React.FC<selfProps> = ({ otherServiceSelect, goodsDetail }) => {
+  //其它服务
+  const [otherServiceList, setOtherServiceList] = useState<otherServiceListType>([]);
+  const otherServiceRadioChange = (e: any) => {
+    otherServiceSelect(e);
+  };
+  //获取其它服务
+  const getOtherServiceList = () => {
+    GoodsAPI.getOtherServiceList().then(({ result }) => {
+      setOtherServiceList(result);
+    });
+  };
+
+  useEffect(() => {
+    getOtherServiceList();
+  });
   return (
     <div className='other-info'>
       <div className='other-info-title'>其它信息</div>
       <div className='other-info-form'>
         <Form>
           <Form.Item label='搭配服务' name='otherService'>
-            <Checkbox.Group>
-              <Checkbox>1</Checkbox>
+            <Checkbox.Group
+              onChange={otherServiceRadioChange}
+              value={goodsDetail?.otherService || []}
+            >
+              {otherServiceList.map((item: any, index: number) => (
+                <Checkbox value={item.id} key={index}>
+                  {item.saleServiceName}
+                </Checkbox>
+              ))}
             </Checkbox.Group>
           </Form.Item>
-
-          <Row>
-            <Col>
-              <span>用服务&gt;云享飞：</span>
-            </Col>
-            <Col span={8}>
-              <Form.Item name='shareFlyServiceId'>
-                <Select
-                  allowClear
-                  placeholder='请选择服务'
-                  showSearch
-                  filterOption={(input, option) =>
-                    (option!.children as unknown as string)
-                      .toLowerCase()
-                      .includes(input.toLowerCase())
-                  }
-                >
-                  <Select.Option>1</Select.Option>
-                </Select>
-              </Form.Item>
-            </Col>
-          </Row>
-
-          <Row>
-            <Col>
-              <span>&nbsp;&nbsp;&nbsp;&nbsp;我要租&gt;云仓：</span>
-            </Col>
-            <Col span={8}>
-              <Form.Item name='repoId'>
-                <Select
-                  allowClear
-                  placeholder='请选择商品'
-                  showSearch
-                  filterOption={(input, option) =>
-                    (option!.children as unknown as string)
-                      .toLowerCase()
-                      .includes(input.toLowerCase())
-                  }
-                >
-                  <Select.Option>1</Select.Option>
-                </Select>
-              </Form.Item>
-            </Col>
-          </Row>
         </Form>
       </div>
     </div>
   );
-});
+};
 
 export default OtherInfo;

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

@@ -3,81 +3,141 @@ import { Table, Button } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import './index.scss';
 import { ColumnsType } from 'antd/es/table';
-const columns: ColumnsType<any> = [
-  {
-    title: '序号',
-    align: 'center',
-    render: () => <div>--</div>,
-  },
-  {
-    title: `产品类型`,
-    align: 'center',
-    // dataIndex: "goodsTypeId",
-    render: () => <div>--</div>,
-  },
-  {
-    title: '规格名称',
-    align: 'center',
-    dataIndex: 'goodsSpecName',
-  },
-  {
-    title: `方案`,
-    align: 'center',
-    dataIndex: 'skuName',
-  },
-  {
-    title: '选项来源',
-    align: 'center',
-    dataIndex: 'specIds',
-    render: () => <div>--</div>,
-  },
-  {
-    title: '选择方式',
-    align: 'center',
-    dataIndex: 'chooseType',
-    render: () => <div>--</div>,
-  },
-  {
-    title: '是否必选',
-    align: 'center',
-    dataIndex: 'must',
-    render: () => <div>--</div>,
-  },
-  {
-    title: '规格单位',
-    align: 'center',
-    dataIndex: 'skuUnitId',
-    render: () => {
-      return <div>--</div>;
+import { customizeEntity, skuUnitType, specEntity } from '~/api/interface/goodsType';
+import { InterDataType } from '~/api/interface';
+import { categoryListType } from '~/api/interface/categoryManage';
+
+//分类返回类型
+type categoryType = InterDataType<categoryListType>['list'];
+
+//产品-规格单位返回类型
+type unitType = InterDataType<skuUnitType>;
+
+interface selfProps {
+  addOrEditSku: (record?: specEntity) => void;
+  specData: specEntity[];
+  categoryList: categoryType;
+  skuUnitList: unitType;
+}
+
+const StockSku: React.FC<selfProps> = ({ addOrEditSku, specData, categoryList, skuUnitList }) => {
+  const columns: ColumnsType<specEntity> = [
+    {
+      title: '序号',
+      align: 'center',
+      render: (_text: string, _record: specEntity, index: number) => index + 1,
     },
-  },
-  {
-    title: '操作',
-    align: 'center',
-    width: '20%',
-    render: () => {
-      return (
+    {
+      title: `产品类型`,
+      align: 'center',
+      dataIndex: 'categoryId',
+      render: (text: string) => <div>{getGoodsTypeName(text)}</div>,
+    },
+    {
+      title: '规格名称',
+      align: 'center',
+      dataIndex: 'goodsSpecName',
+    },
+    {
+      title: `方案`,
+      align: 'center',
+      dataIndex: 'skuName',
+    },
+    {
+      title: '选项来源',
+      align: 'center',
+      dataIndex: 'specIds',
+      render: (_text: string, record) => (
         <div>
-          <Button type='link' style={{ marginRight: '10px' }}>
-            编辑
-          </Button>
-          <Button type='link'>删除</Button>
+          {record.flag !== 1
+            ? record.specIds.map((i: any, j: number) => (
+                <div key={j}>
+                  {i.specName}
+                  {i.partNo && `(${i.partNo})`}
+                </div>
+              ))
+            : record.customizeInfo &&
+              record.customizeInfo.map((i, index: number) => (
+                <div key={index}>{getSelfSpecName(i)}</div>
+              ))}
         </div>
-      );
+      ),
+    },
+    {
+      title: '选择方式',
+      align: 'center',
+      dataIndex: 'chooseType',
+      render: (text: number) => <div>{text === 0 ? '单选' : '多选'}</div>,
+    },
+    {
+      title: '是否必选',
+      align: 'center',
+      dataIndex: 'must',
+      render: (text: number) => <div>{text ? '必选' : '非必选'}</div>,
+    },
+    {
+      title: '规格单位',
+      align: 'center',
+      dataIndex: 'skuUnitId',
+      render: (text: number) => {
+        return <div>{getSkuUnitName(text)}</div>;
+      },
+    },
+    {
+      title: '操作',
+      align: 'center',
+      width: '20%',
+      render: (_text: any, record) => {
+        return (
+          <div>
+            <Button
+              type='link'
+              style={{ marginRight: '10px' }}
+              onClick={() => addOrEditSkuClick(record)}
+            >
+              编辑
+            </Button>
+            <Button type='link'>删除</Button>
+          </div>
+        );
+      },
     },
-  },
-];
-const StockSku: React.FC<any> = () => {
+  ];
+  //添加、编辑规格操作
+  const addOrEditSkuClick = (record?: specEntity) => {
+    addOrEditSku(record);
+  };
+  // 自定义选项来源名称
+  const getSelfSpecName = (obj: customizeEntity) => {
+    return `${obj.specName}(${obj.partNo || ''})`;
+  };
+  // 行业或产品名称
+  const getGoodsTypeName = (id: number | string) => {
+    const obj = categoryList.find((i) => i.id === id);
+    return obj?.classifyName;
+  };
+  // 单位名称
+  const getSkuUnitName = (id: number) => {
+    const unitObj = skuUnitList.find((i) => i.id === id);
+    return unitObj?.unitName;
+  };
   return (
     <div className='stock-sku'>
       <div className='stock-sku-title'>库存规格</div>
       <div className='stock-sku-content'>
         <div className='stock-sku-operate'>
-          <Button icon={<PlusOutlined />} type='primary'>
+          <Button icon={<PlusOutlined />} type='primary' onClick={() => addOrEditSkuClick()}>
             添加规格
           </Button>
         </div>
-        <Table size='small' bordered rowKey='id' pagination={false} columns={columns} />
+        <Table
+          size='small'
+          bordered
+          dataSource={specData}
+          rowKey='id'
+          pagination={false}
+          columns={columns}
+        />
       </div>
     </div>
   );

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

@@ -59,7 +59,9 @@ const GoodsList = () => {
       align: 'center',
       render: () => (
         <>
-          <Button type='link'>编辑</Button>
+          <Button type='link' onClick={toEditGoods}>
+            编辑
+          </Button>
           <Button type='link'>详情</Button>
         </>
       ),
@@ -74,6 +76,13 @@ const GoodsList = () => {
   const toAddMallGoods = () => {
     navigate({ pathname: '/mallManage/mallGoods/add' });
   };
+  //编辑商品
+  const toEditGoods = () => {
+    navigate({
+      pathname: '/mallManage/mallGoods/add',
+      search: `id=${43}`,
+    });
+  };
   return (
     <div className='goods-list'>
       <SearchBox

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

 import { Button } from 'antd';
 import { useNavigate } from 'react-router-dom';
 import './index.scss';
-import RichText from '~/components/richText';
 
 const ServiceIntroduce = () => {
   const navigate = useNavigate();
@@ -19,9 +18,7 @@ const ServiceIntroduce = () => {
         </Button>
       </div>
       <div className='service-introduce-title'></div>
-      <div className='service-introduce-rich-text'>
-        <RichText richTextHeight={500} />
-      </div>
+      <div className='service-introduce-rich-text'></div>
     </div>
   );
 };

src/router/router.tsx

@@ -16,9 +16,6 @@ import {
   ReconciliationOutlined,
   SolutionOutlined,
   RedEnvelopeOutlined,
-  SettingOutlined,
-  UserOutlined,
-  SisternodeOutlined,
   SendOutlined,
   RocketOutlined,
   AppstoreAddOutlined,
@@ -44,7 +41,6 @@ import DivideRules from '~/pages/pointManage/divideRules';
 import CustomListView from '~/pages/customManage/customList';
 import CustomMoneyView from '~/pages/customManage/customMoney';
 import CustomMoneyDetail from '~/pages/customManage/customMoney/detail';
-import AccountManageView from '~/pages/systemManage/accountManage';
 // 活动
 const ActivityList = React.lazy(() => import('src/pages/activityManage/activityList')); //活动管理
 
@@ -294,6 +290,16 @@ export const routerList: Array<RouteObjectType> = [
         },
       },
       {
+        path: '/mallManage/mallGoods/edit',
+        element: withLoadingComponent(<MallAddOrEditOrDetailView />),
+        meta: {
+          id: 10146,
+          icon: <SmileOutlined />,
+          title: '商城商品编辑',
+          hidden: true,
+        },
+      },
+      {
         path: '/mallManage/produceList',
         element: withLoadingComponent(<ProduceListView />),
         meta: {