fix: TS

src/pages/GoodsManage/index.jsx

 import { Form } from '@ant-design/compatible';
 import '@ant-design/compatible/assets/index.css';
-import { Card, Pagination, Table, notification, Drawer, Spin } from 'antd';
+import { Card, Pagination, Table, notification, Drawer, Spin, Button } from 'antd';
 import React, { Component } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { connect } from 'dva';
@@ -24,6 +24,7 @@ import CreateModal from './createModal';
 import { column, JDSHOPID } from './staticdata';
 import SearchForm from './SearchForm';
 import TempleatModal from './TempleatModal';
+import ServiceGoods from '../ServiceGoods';
 
 @connect(({ goodsManage }) => ({
   goodsManage,
@@ -48,6 +49,7 @@ class goodsManage extends Component {
     isAll: 0,
     templateList: [],
     isType: '',
+    serviceVisble: true,
   };
 
   currentLog = null;
@@ -115,7 +117,7 @@ class goodsManage extends Component {
     this.setState({
       createloading: true,
     });
-    const { data, msg } = await spuDetail({ id: spuId });
+    const { data, msg } = await spuDetail({ id: 894048258062 }); // spuId
     if (data) {
       data.state = state;
       data.pageProductType = productType;
@@ -290,6 +292,12 @@ class goodsManage extends Component {
     });
   };
 
+  serviceVisbleChange = visble => {
+    this.setState({
+      serviceVisble: visble,
+    })
+  }
+
   render() {
     const {
       goodsManage: { tableData = {} },
@@ -303,6 +311,7 @@ class goodsManage extends Component {
       <PageHeaderWrapper>
         <Spin spinning={this.state.createloading}>
           <Card>
+            <Button type="primary" onClick={() => this.serviceVisbleChange(true)}>new 新增商品</Button>
             <SearchForm
               handleSearch={this.handleSearch}
               onReset={this.onReset}
@@ -398,6 +407,8 @@ class goodsManage extends Component {
             isType={this.state.isType}
             templateList={this.state.templateList}
           />
+          {/* '894048258062' */}
+          <ServiceGoods visible={this.state.serviceVisble} onChange={this.serviceVisbleChange} id={894048258062} />
         </Spin>
       </PageHeaderWrapper>
     );

src/pages/ServiceGoods/components/CommonTemplate.tsx

 import React from 'react';
 import commonStyle from '../common.less';
+
 export const WrapperContainer = props => (
   <div className={commonStyle.container}>{props.children}</div>
 );

src/pages/ServiceGoods/components/EditFormTable.tsx → src/pages/ServiceGoods/components/EditFormTable.jsx

-import { InputNumber, InputRef } from 'antd';
-import { Button, Form, Input, Popconfirm, Table } from 'antd';
-import type { FormInstance } from 'antd/es/form';
-import React, { useContext, useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
-
-const EditableContext = React.createContext<FormInstance<any> | null>(null);
-
-interface DataType {
-  rowSpanCount?: number;
-  supplyPrice: number;
-  commissionRate: number;
-  marketPrice: number;
-  salePrice: number;
-  stock: number;
-  productStockWarning: number;
-}
-interface PropType {
-  initData: any[];
-  defaultColumns: any[];
-  setTableData: (item: DataType[]) => {};
-};
-interface Item {
-  key: string;
-  name: string;
-  age: string;
-  address: string;
-}
-interface EditableCellProps {
-  rowIndex: number;
-  title: React.ReactNode;
-  editable: boolean;
-  children: React.ReactNode;
-  dataIndex: keyof Item;
-  record: Item;
-  handleSave: (record: Item) => void;
-}
-interface EditableRowProps {
-  index: number;
-}
-
-type EditableTableProps = Parameters<typeof Table>[0];
-type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
-
-const EditableRow: React.FC<EditableRowProps> = ({ index, ...props }) => {
+import { InputNumber, Button, Form, Table } from 'antd';
+import React, { useContext, createContext, useEffect, useState, forwardRef, useImperativeHandle } from 'react';
+import { ServiceContext } from '../context';
+
+const EditableContext = createContext(null);
+
+const EditableRow= ({ index, ...props }) => {
   // console.log('==========> index', props);
   // const [form] = Form.useForm();
   // console.log('==========>props', props)
@@ -55,7 +18,7 @@ const EditableRow: React.FC<EditableRowProps> = ({ index, ...props }) => {
 };
 
 
-const EditableCell: React.FC<EditableCellProps> = (props) => {
+const EditableCell = (props) => {
   const {
     rowIndex,
     title,
@@ -66,6 +29,7 @@ const EditableCell: React.FC<EditableCellProps> = (props) => {
     handleSave,
     ...restProps
   } = props;
+
   const form = useContext(EditableContext)!;
   const save = async () => {
     try {
@@ -77,15 +41,12 @@ const EditableCell: React.FC<EditableCellProps> = (props) => {
   };
 
   let childNode = children;
-  // if (editable) {
     childNode = <Form.Item
       style={{ margin: 0 }}
       name={['tableList', rowIndex, dataIndex]}
-      // initialValue={record[dataIndex]}
       rules={[{ required: true, message: `${title} is required.` }]}>
-      {editable ?<InputNumber onBlur={save} /> : children[1]}
+      {editable ? <InputNumber onBlur={save} /> : children[1]}
     </Form.Item>
-  // }
   return <td {...restProps}>{childNode}</td>;
 };
 
@@ -93,17 +54,14 @@ const EditableCell: React.FC<EditableCellProps> = (props) => {
 
 
 
-const EditFormTable = forwardRef((props: PropType, ref) => {
+const EditFormTable = forwardRef((props, ref) => {
 
-  const { initData, defaultColumns, setTableData } = props;
-  // console.log(initData);
-  const [dataSource, setDataSource] = useState<DataType[]>([]);
+  const { initData, defaultColumns, setTableData, mergeTable } = props;
+  const customer = useContext(ServiceContext);
+  const [dataSource, setDataSource] = useState([]);
   const [form] = Form.useForm();
-
   useEffect(() => {
     console.log('==============>坚听initData', initData);
-    
-
     form.setFieldsValue({
       tableList: initData,
     });
@@ -119,15 +77,7 @@ const EditFormTable = forwardRef((props: PropType, ref) => {
     }
   };
 
-  const handleSave = (row: DataType[]) => {
-    // console.log('============>row', row);
-    // const newData = [...dataSource];
-    // const index = newData.findIndex(item => row.key === item.key);
-    // const item = newData[index];
-    // newData.splice(index, 1, {
-    //   ...item,
-    //   ...row,
-    // });
+  const handleSave = (row) => {
     setTableData([...row]);
   };
 
@@ -148,19 +98,18 @@ const EditFormTable = forwardRef((props: PropType, ref) => {
 
 
   // 根据这里做判断渲染表格
-  const columns = defaultColumns.map((col, colIndex) => {
-    // if (!col.editable) {
-    //   return col;
-    // }
-    
-
+  const columns = defaultColumns
+    .filter(item => {
+      // console.log('===============>column', item);
+      return !item.role || item.role.includes(customer.productType);
+    })
+    .map((col, colIndex) => {
     return {
       ...col,
-      onCell: (record: DataType, rowIndex: number) => {
+      onCell: (record, rowIndex) => {
         let rowSpan = null;
-        if (col.dataIndex === 'firstSpecValue') {
-          // console.log(record, rowSpan);
-          rowSpan = record.rowSpanCount ? record.rowSpanCount : 0;
+        if (col.dataIndex === 'firstSpecValue' && mergeTable) {
+          rowSpan = record.rowSpanCount || 0;
         }
 
         return ({
@@ -192,7 +141,7 @@ const EditFormTable = forwardRef((props: PropType, ref) => {
             bordered
             dataSource={dataSource}
             rowKey={(row, rowInd) => rowInd}
-            columns={columns as ColumnTypes}
+            columns={columns}
           />
         </EditableContext.Provider>
         <Button onClick={handleAdd} type="primary" style={{ marginBottom: 16 }}>Add a row</Button>

src/pages/ServiceGoods/components/FormInformationBasic.tsx → src/pages/ServiceGoods/components/FormInformationBasic.jsx

-import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import React, { useContext, useEffect, forwardRef, useImperativeHandle } from 'react';
 import { Cascader, Form, Input, Select } from 'antd';
-import { useParams } from 'react-router-dom';
-import { DefaultOptionType } from 'antd/lib/select';
+import { formItemLayout } from '../config';
+import { ServiceContext } from '../context';
 
-interface CategoryItem {
-  id: number;
-  level: number;
-  name: string;
-  parentId: number;
-  children?: CategoryItem[];
-}
-interface BrandItem {
-  id: number;
-  name: string;
-  chineseName?: string;
-  chinesePinyin?: string;
-  englishName?: string;
-  firstLetter?: string;
-  horizontalLogo?: string;
-  logo?: string;
-  priority?: string;
-}
-
-interface PropsType {
-  editData: any;
-  categoryList: Array<CategoryItem>;
-  brandList: BrandItem[];
-}
-
-const categoryIdArrayList = [
-  {
-    value: 'zhejiang',
-    label: 'Zhejiang',
-    children: [
-      {
-        value: 'hangzhou',
-        label: 'Hangzhou',
-        children: [
-          {
-            value: 'xihu',
-            label: 'West Lake',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    value: 'jiangsu',
-    label: 'Jiangsu',
-    children: [
-      {
-        value: 'nanjing',
-        label: 'Nanjing',
-        children: [
-          {
-            value: 'zhonghuamen',
-            label: 'Zhong Hua Men',
-          },
-        ],
-      },
-    ],
-  },
-];
-
-const formItemLayout = {
-  labelCol: {
-    sm: { span: 3 },
-  },
-  wrapperCol: {
-    sm: { span: 16 },
-  },
-};
-
-const CreateSelectOption = (optionList: BrandItem[]) =>
-  optionList.map((brandItem: BrandItem) => (
+const CreateSelectOption = optionList =>
+  optionList.map(brandItem => (
     <Select.Option key={brandItem.id} value={brandItem.id}>
       {brandItem.name}
     </Select.Option>
   ));
 
 const fileterBrandOptions = (
-  input: string,
-  options: { key: string; value: number; children: string },
+  input,
+  options,
 ) => options.children.includes(input);
 
-const filterCategoryOptions = (inputValue: string, path: DefaultOptionType[]) =>
+const filterCategoryOptions = (inputValue, path) =>
   path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
 
-const FormInformationBasic = forwardRef((props: PropsType, ref) => {
+const FormInformationBasic = forwardRef((props, ref) => {
   const { editData, categoryList, brandList } = props;
   const [form] = Form.useForm();
 
@@ -102,23 +33,28 @@ const FormInformationBasic = forwardRef((props: PropsType, ref) => {
 
   useImperativeHandle(ref, () => ({
     onCheck,
+    reset: form.resetFields,
   }));
-  const { id } = useParams<any>();
+  const customer = useContext(ServiceContext);
   useEffect(() => {
-    if (+id !== 0) {
+    if (customer.isEdit) {
       if (!Object.keys(editData).length) return;
-      const { serviceItem } = editData.skuList[0];
-      form.setFieldsValue({
+      const initValues = {
         brandId: editData.brandId,
         supplierId: editData.supplierId,
         name: editData.name,
         categoryId: [editData.firstCategoryId, editData.secondCategoryId, editData.thirdCategoryId],
-        description: serviceItem.description,
-      });
+        description: null,
+      };
+      if (customer.isCard) {
+        const { serviceItem } = editData.skuList[0];
+        initValues.description = (serviceItem || {}).description || null;
+      }
+      form.setFieldsValue(initValues);
     }
-  }, [id, editData]);
+  }, [customer.isEdit, editData]);
 
-  const onFinish = (values: any) => {
+  const onFinish = values => {
     console.log('Received values of form: ', values);
   };
 
@@ -166,13 +102,13 @@ const FormInformationBasic = forwardRef((props: PropsType, ref) => {
         />
       </Form.Item>
 
-      <Form.Item
+      {customer.isCard ? <Form.Item
         name="description"
         label="描述"
         rules={[{ required: true, message: '请输入描述！' }]}
       >
         <Input.TextArea showCount maxLength={100} placeholder="请输入描述！" />
-      </Form.Item>
+      </Form.Item> : null}
     </Form>
   );
 });

src/pages/ServiceGoods/components/FormPriceOrStock.tsx → src/pages/ServiceGoods/components/FormPriceOrStock.jsx

 import { ConsoleSqlOutlined, MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { Button, Form, Input, Select, Space, Modal, InputNumber, notification } from 'antd';
 import React, { useState, forwardRef, useImperativeHandle, useRef, useEffect, useContext } from 'react';
-import { useParams } from 'react-router-dom';
 import { formItemLayout, StaticColumns } from '../config';
 import EditFormTable from './EditFormTable';
 import { createProductData, cleanArray } from '../utils';
 import { ServiceContext } from '../context';
 
-import { ColumnTypes } from '../type';
-
-const { Option } = Select;
-
-interface SpecItem {
-  specId: number;
-  specName: string;
-}
-interface PropsType {
-  editData: any;
-  specList: Array<SpecItem>;
-}
-
 const validatorSpecValue = (value, list, index, specName) => {
   const checkList = list.filter((item, ind) => {
     if (ind === index) {
@@ -49,11 +35,14 @@ const SpecificationTemplate = (props, _) => {
     // onChange();
   };
 
-  const inputOnblurEvent = () => {
-    // onChange();
+  const inputOnblurEvent = event => {
+    console.log(event.target.value);
+    if (event.target.value) {
+      onChange();
+    }
   }
 
-  const bundlePlusAddSpecEvent = (addCallback: () => void) => {
+  const bundlePlusAddSpecEvent = addCallback => {
     console.log(name);
     const specId = form.getFieldValue(name);
     if (!specId) {
@@ -64,12 +53,12 @@ const SpecificationTemplate = (props, _) => {
       return;
     }
     addCallback();
-    // inputOnblurEvent();
+    onChange();
   };
 
   const bundlePlusRemoveSpecEvent = (removeCallback, fieldName) => {
     removeCallback(fieldName)
-    // inputOnblurEvent();
+    onChange();
   }
 
   return (
@@ -153,7 +142,7 @@ const originItems = {
 
 // 编辑回显示时只获取用到的数据
 const filterItem = skuItem => {
-  const { imageList, serviceItem, ...argsItem } = skuItem;
+  const { serviceItem, ...argsItem } = skuItem;
   argsItem.disabled = true;
   return argsItem;
 };
@@ -186,27 +175,16 @@ const CreateBatchFormItems = ({ batchChange, editRef, defaultColumns }) => {
         <InputNumber placeholder={item.title} />
       </Form.Item>
     ));
-  console.log(formItems.length);
-
-  // const batchEvent = () => {
-  //   const batchItem = form.getFieldValue('batchItem');
-  //   console.log(batchItem);
-
-  //   // editRef.current.form.setFieldsValue({
-
-  //   // });
-  // }
-
   return <>
-    {formItems.length && <Space style={{ marginBottom: 20 }}>
+    {formItems.length ? <Space style={{ marginBottom: 20 }}>
       {formItems.concat(<Button key="batch" type="primary" onClick={batchChange}>批量设置</Button>)}
-    </Space>}
+    </Space> : null }
   </>;
 };
 
 
-const FormPriceOrStock = forwardRef((props: PropsType, ref) => {
-  const { specList, editData } = props;
+const FormPriceOrStock = forwardRef((props, ref) => {
+  const { specList, editData, onSpecChange } = props;
   const editRef = useRef(null);
   const customer = useContext(ServiceContext);
   const [form] = Form.useForm();
@@ -221,6 +199,7 @@ const FormPriceOrStock = forwardRef((props: PropsType, ref) => {
 
   const [defaultColumns, setDefaultColumns] = useState([]);
   const [tableData, setTableData] = useState([]);
+  const [mergeTable, setMergeTable] = useState(false);
 
   const onCheck = async () => {
     try {
@@ -237,7 +216,6 @@ const FormPriceOrStock = forwardRef((props: PropsType, ref) => {
       columsData.push({
         title: specData.firstSpec,
         dataIndex: 'firstSpecValue',
-        role: [],
       });
     }
 
@@ -245,15 +223,10 @@ const FormPriceOrStock = forwardRef((props: PropsType, ref) => {
       columsData.push({
         title: specData.secondSpec,
         dataIndex: 'secondSpecValue',
-        role: [],
       });
     }
 
-    if (!columsData.length) {
-      return;
-    }
-
-    const dynamicColumns: (ColumnTypes[number] & { editable?: boolean; dataIndex: string })[] = [
+    const dynamicColumns = [
       ...columsData,
       ...StaticColumns,
     ];
@@ -264,7 +237,6 @@ const FormPriceOrStock = forwardRef((props: PropsType, ref) => {
     try {
       const values = await form.validateFields();
       CreateColumnsEvent(values);
-
       const cleanValues = {
         firstValues: cleanArray(values.firstSpecValue),
         secondValues: cleanArray(values.secondSpecValue),
@@ -272,12 +244,20 @@ const FormPriceOrStock = forwardRef((props: PropsType, ref) => {
         secondSpecId: values.secondSpecId,
       };
       const newData = createProductData(cleanValues);
+      setMergeTable(Boolean(cleanValues.secondValues.length));
       setTableData(newData);
     } catch (error) {
       console.log(error);
     }
   };
 
+  const firstOnChangeEvent = () => {
+    const firstSpecValue = form.getFieldValue('firstSpecValue');
+    const firstSpecValueList = cleanArray(firstSpecValue).map(item => item.firstSpecValue);
+    onSpecChange(firstSpecValueList);
+  }
+
+
   const batchChange = () => {
     const batchItem = form.getFieldValue('batchItem')
     const batchItemKey = Object.keys(batchItem);
@@ -298,8 +278,9 @@ const FormPriceOrStock = forwardRef((props: PropsType, ref) => {
 
   useImperativeHandle(ref, () => ({
     onCheck,
+    reset: form.resetFields,
   }));
-  const { id } = useParams<any>();
+
   useEffect(() => {
     if (customer.isEdit) {
       if (!Object.keys(editData).length) return;
@@ -317,6 +298,7 @@ const FormPriceOrStock = forwardRef((props: PropsType, ref) => {
       };
       form.setFieldsValue(specData); // 设置规格数据
       setSpecInitValue(specData); // 缓存规格数据
+      firstOnChangeEvent(); // 触发成底部动态表格数据
       onFinish(); // 触发生成表格
     }
   }, [customer.isEdit, editData]);
@@ -332,9 +314,9 @@ const FormPriceOrStock = forwardRef((props: PropsType, ref) => {
     >
       <SpecificationTemplate
         form={form}
-        onChange={onFinish}
         label="一级规格"
         name="firstSpecId"
+        onChange={firstOnChangeEvent}
         selectName="firstSpec"
         specName="firstSpecValue"
         specList={specList}
@@ -342,7 +324,6 @@ const FormPriceOrStock = forwardRef((props: PropsType, ref) => {
       />
       <SpecificationTemplate
         form={form}
-        onChange={onFinish}
         label="二级规格"
         name="secondSpecId"
         selectName="secondSpec"
@@ -355,8 +336,18 @@ const FormPriceOrStock = forwardRef((props: PropsType, ref) => {
           生成商品信息
         </Button>
       </div>
-      <CreateBatchFormItems batchChange={batchChange} editRef={editRef} defaultColumns={defaultColumns} />
-      <EditFormTable ref={editRef} defaultColumns={defaultColumns} setTableData={setTableData} initData={tableData} />
+      <CreateBatchFormItems
+        batchChange={batchChange}
+        editRef={editRef}
+        defaultColumns={defaultColumns}
+      />
+      <EditFormTable
+        ref={editRef}
+        mergeTable={mergeTable}
+        setTableData={setTableData}
+        defaultColumns={defaultColumns}
+        initData={tableData}
+      />
     </Form>
   );
 });

src/pages/ServiceGoods/components/FormRuleSetting.tsx → src/pages/ServiceGoods/components/FormRuleSetting.jsx

-import { Form, Input, Select, Checkbox, DatePicker, Radio, InputNumber } from 'antd';
-import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { Form, Input, Select, Checkbox, DatePicker } from 'antd';
+import React, { useState, useEffect, forwardRef, useImperativeHandle, useContext } from 'react';
 import moment from 'moment';
-import { useParams } from 'react-router-dom';
-import UploadImage from './UploadImage';
-import { WeeksList } from '../config';
+import { WeeksList, formItemLayout } from '../config';
+import { ServiceContext } from '../context';
 
 const { Option } = Select;
 const { RangePicker } = DatePicker;
 
-const formItemLayout = {
-  labelCol: {
-    sm: { span: 3 },
-  },
-  wrapperCol: {
-    sm: { span: 16 },
-  },
-};
 
 const WeekCheckBox = () =>
   WeeksList.map(item => (
@@ -31,19 +22,15 @@ const rangeConfig = {
   rules: [{ type: 'array', required: true, message: 'Please select time!' }],
 };
 
-const FormRuleSetting = forwardRef((props: { editData: any }, ref) => {
-  const [form] = Form.useForm();
+const FormRuleSetting = forwardRef((props, ref) => {
   const { editData } = props;
-
-  const url = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
-
-  const { id } = useParams<any>();
+  const [form] = Form.useForm();
+  const customer = useContext(ServiceContext);
   const [imageList, setImageList] = useState([]);
   const [commonImageList, setCommonImageList] = useState([]);
   const [detailImageList, setDetailImageList] = useState([]);
   useEffect(() => {
-    if (+id !== 0) {
-      console.log();
+    if (customer.isEdit) {
       if (!Object.keys(editData).length) return;
       setImageList(editData.commonImageList);
       setCommonImageList(editData.commonImageList);
@@ -62,15 +49,9 @@ const FormRuleSetting = forwardRef((props: { editData: any }, ref) => {
         ruleDescription: serviceItem.ruleDescription, // 规则说明
         applyScope: serviceItem.applyScope, // 适用范围
         tips: serviceItem.tips, // 温馨提示
-
-        imageList: editData.commonImageList,
-        commonImageList: editData.commonImageList,
-        detailImageList: editData.detailImageList,
-        appointment: serviceItem.appointment, // 预约
-        receptionVolume: serviceItem.receptionVolume, // 接待数量
       });
     }
-  }, [id, editData]);
+  }, [customer.isEdit, editData]);
 
   const onCheck = async () => {
     try {
@@ -90,9 +71,10 @@ const FormRuleSetting = forwardRef((props: { editData: any }, ref) => {
 
   useImperativeHandle(ref, () => ({
     onCheck,
+    reset: form.resetFields,
   }));
 
-  const onFinish = (values: any) => {
+  const onFinish = values => {
     console.log('Received values of form: ', values);
   };
   return (
@@ -119,8 +101,6 @@ const FormRuleSetting = forwardRef((props: { editData: any }, ref) => {
           commonImageList,
           detailImageList,
 
-          appointment: null, // 预约
-          receptionVolume: null,
         }}
         scrollToFirstError
       >
@@ -196,65 +176,6 @@ const FormRuleSetting = forwardRef((props: { editData: any }, ref) => {
             placeholder="请输入温馨提示，200字以内 例如：全场通用例如：\n不兑零"
           />
         </Form.Item>
-        <Form.Item
-          label="封面图片"
-          name="commonImageList"
-          extra={`建议尺寸: ##宽##高 (${commonImageList.length} / 1) `}
-          rules={[
-            { required: true, type: 'array', message: '请输入温馨提示', validateTrigger: 'submit' },
-          ]}
-        >
-          <UploadImage
-            name="commonImageList"
-            limit={1}
-            pictures={commonImageList}
-            setPictureList={setCommonImageList}
-          />
-        </Form.Item>
-        <Form.Item
-          label="商品图片"
-          name="imageList"
-          extra={`建议尺寸: ##宽##高 (${imageList.length} / 11) `}
-          rules={[
-            { required: true, type: 'array', message: '请输入温馨提示', validateTrigger: 'submit' },
-          ]}
-        >
-          <UploadImage
-            name="imageList"
-            limit={11}
-            pictures={imageList}
-            setPictureList={setImageList}
-          />
-        </Form.Item>
-        <Form.Item
-          label="商品详情图"
-          name="detailImageList"
-          extra={`最多上传30张，${detailImageList.length} / 30`}
-          rules={[
-            { required: true, type: 'array', message: '请输入温馨提示', validateTrigger: 'submit' },
-          ]}
-        >
-          <UploadImage
-            name="detailImageList"
-            limit={4}
-            pictures={detailImageList}
-            setPictureList={setDetailImageList}
-          />
-        </Form.Item>
-
-        <Form.Item name="appointment" label="预约">
-          <Radio.Group>
-            <Radio value={1}>是</Radio>
-            <Radio value={0}>否</Radio>
-          </Radio.Group>
-        </Form.Item>
-        <Form.Item
-          name="receptionVolume"
-          label="每日最低接待量"
-          rules={[{ required: true, message: '每日最低接待量' }]}
-        >
-          <InputNumber min={0} style={{ width: 200 }} placeholder="请输入每日最低接待量" />
-        </Form.Item>
       </Form>
     </>
   );

src/pages/ServiceGoods/components/FormRuleVPictures.jsx

+import React, { useState, useEffect, useContext, forwardRef, useImperativeHandle } from 'react';
+import { Form } from 'antd';
+import { ServiceContext } from '../context';
+import UploadImage from './UploadImage';
+import { formItemLayout } from '../config';
+
+const FormRuleVPictures = forwardRef((props, ref) => {
+  const { editData, specKeyItem } = props;
+  const [form] = Form.useForm();
+  const [imageList, setImageList] = useState({});
+  const [commonImageList, setCommonImageList] = useState([]);
+  const [detailImageList, setDetailImageList] = useState([]);
+  const customer = useContext(ServiceContext);
+  useEffect(() => {
+    if (customer.isEdit) {
+      console.log('==============>图片', editData)
+      if (!Object.keys(editData).length) return;
+      setCommonImageList(editData.commonImageList); // 编辑状态下设置公共图
+      setDetailImageList(editData.detailImageList); // 编辑状态下设置详情图
+      const commImg = editData.skuList.reduce((orgin, item) => {
+        const keyString = `${item.firstSpecValue}`; // _${item.firstSpecId}
+        if (!Object.keys(orgin).includes(keyString)) {
+          orgin[keyString] = item.imageList;
+        }
+        return orgin;
+      }, {});
+
+      setImageList(commImg);
+      form.setFieldsValue({
+        imageList: commImg,
+        commonImageList: editData.commonImageList,
+        detailImageList: editData.detailImageList,
+      });
+    }
+  }, [customer.isEdit, editData]);
+
+  useEffect(() => {
+    const newImageList = specKeyItem.reduce((origin, item) => {
+      const showItem = imageList[item] || [];
+      origin[item] = showItem;
+      return origin;
+    }, {});
+    setImageList(newImageList);
+  }, [specKeyItem])
+
+
+  const onCheck = async () => {
+    try {
+      const values = await form.validateFields();
+      console.log(values)
+      return values;
+    } catch (errorInfo) {
+      return null;
+    }
+  };
+
+  useImperativeHandle(ref, () => ({
+    onCheck,
+    reset: form.resetFields,
+  }));
+
+  const onFinish = values => {
+    console.log('Received values of form: ', values);
+  };
+  const onPictureSuccessEvent = (imgList, key) => {
+    setImageList({
+      ...imageList,
+      [key]: imgList,
+    });
+  }
+  return (
+    <>
+      <Form
+        {...formItemLayout}
+        form={form}
+        name="register"
+        onFinish={onFinish}
+        initialValues={{
+          imageList,
+          commonImageList,
+          detailImageList,
+        }}
+        scrollToFirstError
+      >
+        <Form.Item
+          label="封面图片"
+          name="commonImageList"
+          extra={`建议尺寸: ##宽##高 (${commonImageList.length} / 1) `}
+          rules={[
+            { required: true, type: 'array', message: '请输入温馨提示', validateTrigger: 'submit' },
+          ]}
+        >
+          <UploadImage
+            name="commonImageList"
+            limit={1}
+            pictures={commonImageList}
+            setPictureList={setCommonImageList}
+          />
+        </Form.Item>
+
+        {Object.keys(imageList).map(key =>
+          <Form.Item
+            key={key}
+            label={`商品图片(${key})`}
+            name={['imageList', key]}
+            extra={`建议尺寸: ##宽##高 (${imageList[key].length} / 11) `}
+            rules={[
+              { required: true, type: 'array', message: '请输入温馨提示', validateTrigger: 'submit' },
+            ]}
+          >
+            <UploadImage
+              name={key}
+              limit={11}
+              pictures={imageList[key]}
+              setPictureList={list => onPictureSuccessEvent(list, key)}
+            />
+          </Form.Item>)}
+        <Form.Item
+          label="商品详情图"
+          name="detailImageList"
+          extra={`最多上传30张，${detailImageList.length} / 30`}
+          rules={[
+            { required: true, type: 'array', message: '请输入温馨提示', validateTrigger: 'submit' },
+          ]}
+        >
+          <UploadImage
+            name="detailImageList"
+            limit={4}
+            pictures={detailImageList}
+            setPictureList={setDetailImageList}
+          />
+        </Form.Item>
+      </Form>
+    </>
+  );
+});
+
+export default FormRuleVPictures;

src/pages/ServiceGoods/components/FormSettlementOthers.tsx → src/pages/ServiceGoods/components/FormSettlementOthers.jsx

-import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
-import { Form, Input, Select, Checkbox, Radio, Space, InputNumber, Switch } from 'antd';
-import { useParams } from 'react-router-dom';
+import React, { useContext, useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { Form, Input, Select, Checkbox, Radio, Space, InputNumber } from 'antd';
 import { Title } from './CommonTemplate';
 import { formItemLayout } from '../config';
+import { ServiceContext } from '../context';
 
-interface PropsType {
-  editData: any;
-}
-
-const FormSettlementOthers = forwardRef((props: PropsType, ref) => {
+const FormSettlementOthers = forwardRef((props, ref) => {
   const { editData } = props;
   const [form] = Form.useForm();
 
@@ -26,8 +22,9 @@ const FormSettlementOthers = forwardRef((props: PropsType, ref) => {
 
   useImperativeHandle(ref, () => ({
     onCheck,
+    reset: form.resetFields,
   }));
-  const { id } = useParams<any>();
+  const customer = useContext(ServiceContext);
   const [initValue, setInitValue] = useState({
     settlementMethod: 1,
     limitPurchase: null, // 是否限购1:限购/0:不限购
@@ -35,10 +32,13 @@ const FormSettlementOthers = forwardRef((props: PropsType, ref) => {
     limitPurchaseCycle: null, // 限购周期1：每天/7：7天/30：30天
     limitPurchaseQuantity: null, // 限购数量
     packageContent: '',
+
+    appointment: null, // 预约
+    receptionVolume: null,
   });
 
   useEffect(() => {
-    if (+id !== 0) {
+    if (customer.isEdit) {
       if (!Object.keys(editData).length) return;
       const { serviceItem } = editData.skuList[0];
 
@@ -49,20 +49,22 @@ const FormSettlementOthers = forwardRef((props: PropsType, ref) => {
         limitPurchaseCycle: serviceItem.limitPurchaseCycle, // 限购周期1：每天/7：7天/30：30天
         limitPurchaseQuantity: serviceItem.limitPurchaseQuantity, // 限购数量
         packageContent: serviceItem.packageContent,
+        appointment: serviceItem.appointment, // 预约
+        receptionVolume: serviceItem.receptionVolume, // 接待数量
       };
 
       form.setFieldsValue(data);
       setInitValue({ ...data });
     }
-  }, [id, editData]);
+  }, [customer.isEdit, editData]);
 
   useEffect(() => {}, [form]);
 
-  const onFinish = (values: any) => {
+  const onFinish = values => {
     console.log('Received values of form: ', values);
   };
 
-  const radioChangeEvent = (key: string) => {
+  const radioChangeEvent = key => {
     const value = form.getFieldValue(key);
     setInitValue({
       ...initValue,
@@ -71,7 +73,7 @@ const FormSettlementOthers = forwardRef((props: PropsType, ref) => {
   };
 
   const AuditLimitPurchaseType = () => {
-    const limitPurchaseType: number = form.getFieldValue('limitPurchaseType');
+    const limitPurchaseType = form.getFieldValue('limitPurchaseType');
     if (limitPurchaseType === 1) {
       return null;
     }
@@ -133,6 +135,19 @@ const FormSettlementOthers = forwardRef((props: PropsType, ref) => {
       initialValues={initValue}
       scrollToFirstError
     >
+      <Form.Item name="appointment" label="预约">
+        <Radio.Group>
+          <Radio value={1}>是</Radio>
+          <Radio value={0}>否</Radio>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item
+        name="receptionVolume"
+        label="每日最低接待量"
+        rules={[{ required: true, message: '每日最低接待量' }]}
+      >
+        <InputNumber min={0} style={{ width: 200 }} placeholder="请输入每日最低接待量" />
+      </Form.Item>
       <Title title="结算信息" />
       <Form.Item
         name="packageContent"
@@ -155,7 +170,6 @@ const FormSettlementOthers = forwardRef((props: PropsType, ref) => {
         <Checkbox onChange={() => radioChangeEvent('limitPurchase')}>
           <b style={{ marginLeft: 10 }}>启用限购</b>
           <span style={{ marginLeft: 10 }} className="ant-form-text">
-            {' '}
             限制每人可购买数量
           </span>
         </Checkbox>

src/pages/ServiceGoods/components/TaskTypeSelect.jsx

+import React, { useContext } from 'react';
+import { TaskList } from '../config';
+import { ServiceContext } from '../context';
+import commonStyle from '../common.less';
+
+export const TaskTypeSelect = props => {
+  const customer = useContext(ServiceContext);
+  const selectTabs = task => {
+    if (!customer.isEdit) {
+      props.onChange(task);
+    }
+  }
+
+  return (
+    <div className={commonStyle.prodcutContent}>
+      {TaskList.map(task => {
+        const activeClassName = props.productType === task.type ? commonStyle.activeCard : '';
+        return (
+          <dl
+            key={task.type}
+            onClick={() => selectTabs(task)}
+            className={`${commonStyle.productCard} ${activeClassName}`}
+          >
+            <dd className="prodcut-name">{task.name}</dd>
+            <dd className="prodcut-desc">({task.desc})</dd>
+          </dl>
+        );
+      })}
+    </div>
+  );
+}

src/pages/ServiceGoods/components/TaskTypeSelect.tsx

-import React from 'react';
-import { TaskList } from '../config';
-import { Task } from '../type';
-import commonStyle from '../common.less';
-
-export const TaskTypeSelect = (props: { productType: number; onChange: (task: Task) => void }) => (
-  <div className={commonStyle.prodcutContent}>
-    {TaskList.map((task: Task) => {
-      const activeClassName: string = props.productType === task.type ? commonStyle.activeCard : '';
-      return (
-        <dl
-          key={task.type}
-          onClick={() => props.onChange(task)}
-          className={`${commonStyle.productCard} ${activeClassName}`}
-        >
-          <dd className="prodcut-name">{task.name}</dd>
-          <dd className="prodcut-desc">({task.desc})</dd>
-        </dl>
-      );
-    })}
-  </div>
-);

src/pages/ServiceGoods/components/UploadImage.tsx → src/pages/ServiceGoods/components/UploadImage.jsx

 import { PlusOutlined } from '@ant-design/icons';
 import { Modal, Upload, notification, Spin } from 'antd';
-import type { UploadProps } from 'antd/es/upload';
-import type { UploadFile } from 'antd/es/upload/interface';
 import React, { useState, useEffect, useRef } from 'react';
 import lodash from 'lodash';
 import { merchantUpload } from '../service';
 
-type PicturesType = {
-  name?: string;
-  limit?: number;
-  uploadParams?: UploadProps;
-  pictures?: Array<string>;
-  onChange?: (path: string[]) => void;
-  setPictureList?: (item: string[]) => void
-};
-
 const MAX_FILE_SIZE = 5;
 const UNIT = 1024 * 1024;
 
@@ -33,7 +22,7 @@ const uploadButton = (
   </div>
 );
 
-const UploadImage: React.FC<PicturesType> = props => {
+const UploadImage = props => {
   const {
     name = `${Date.now()}`,
     limit = 1,
@@ -46,11 +35,11 @@ const UploadImage: React.FC<PicturesType> = props => {
   const [previewVisible, setPreviewVisible] = useState(false);
   const [previewImage, setPreviewImage] = useState('');
   const [previewTitle, setPreviewTitle] = useState('');
-  const [fileList, setFileList] = useState<UploadFile[]>([]);
+  const [fileList, setFileList] = useState([]);
   const fileListRef = useRef([]);
 
   useEffect(() => {
-    const newPictures = pictures.map((url: string, ind: number) => ({
+    const newPictures = pictures.map((url, ind) => ({
       url,
       name: url,
       uid: `${ind}`,
@@ -61,7 +50,7 @@ const UploadImage: React.FC<PicturesType> = props => {
 
   const handleCancel = () => setPreviewVisible(false);
 
-  const handlePreview = async (file: UploadFile) => {
+  const handlePreview = async file => {
     setPreviewImage(file.url);
     setPreviewVisible(true);
     setPreviewTitle(file.name || (file.url).substring(file.url.lastIndexOf('/') + 1));
@@ -116,9 +105,7 @@ const UploadImage: React.FC<PicturesType> = props => {
   //     }
   // };
 
-  const checkFile = file => {
-    console.log(file);
-    return new Promise(resolve => {
+  const checkFile = file => new Promise(resolve => {
       const curType = file.name.substr(file.name.lastIndexOf('.') + 1).toLowerCase();
       const fileType = ['jpg', 'jpeg', 'png'];
       if (!fileType.includes(curType)) {
@@ -136,8 +123,7 @@ const UploadImage: React.FC<PicturesType> = props => {
         return resolve(null);
       }
       return resolve(file);
-    });
-  }
+    })
 
   const imageLoading = (file, ret) => new Promise(resolve => {
       const reader = new FileReader();

src/pages/ServiceGoods/config.ts → src/pages/ServiceGoods/config.js

@@ -75,7 +75,7 @@ export const StaticColumns = [
     title: '佣金费率',
     dataIndex: 'commissionRate',
     editable: true,
-    role: [],
+    role: [3],
   },
   {
     title: '市场价',
@@ -91,6 +91,13 @@ export const StaticColumns = [
     title: '库存',
     dataIndex: 'stock',
     editable: true,
+    role: [3],
+  },
+  {
+    title: '库存',
+    dataIndex: 'productStock',
+    editable: true,
+    role: [1, 2],
   },
   {
     title: '库存预警阈值',
@@ -98,4 +105,18 @@ export const StaticColumns = [
     editable: true,
     role: [],
   },
+  {
+    title: '商品自编码',
+    dataIndex: 'thirdSkuNo',
+    editable: true,
+    role: [1, 2],
+    inputType: 'text',
+  },
+  {
+    title: '京东链接',
+    dataIndex: 'skuLink',
+    editable: true,
+    role: [1, 2],
+    inputType: 'text',
+  },
 ];

src/pages/ServiceGoods/index.tsx → src/pages/ServiceGoods/index.jsx

-import React, { useState, useRef, useEffect } from 'react';
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { Spin, Button } from 'antd';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { Spin, Button, Modal } from 'antd';
 import { Title, WrapperContainer } from './components/CommonTemplate';
 import { TaskTypeSelect } from './components/TaskTypeSelect';
-import { Task } from './type';
 import FormInformationBasic from './components/FormInformationBasic';
 import FormPriceOrStock from './components/FormPriceOrStock';
 import FormRuleSetting from './components/FormRuleSetting';
+import FormRuleVPictures from './components/FormRuleVPictures';
 import FormSettlementOthers from './components/FormSettlementOthers';
-import commonStyle from './common.less';
 import {
   getProductDetail,
   merchantCategoryGetAll,
@@ -23,13 +21,13 @@ import { ServiceContext } from './context';
  * @returns ReactDOM
  */
 const ServiceGoods = options => {
-  const pageId = +options.match.params.id; // pageId: 0-新增，1-修改，2-查看
-
   const basicRef = useRef(null);
   const stockRef = useRef(null);
   const settingRef = useRef(null);
+  const picturesRef = useRef(null);
   const settleOtrRef = useRef(null);
 
+  const [pageId, setPageId] = useState(null);
   const [isEdit, setIsEdit] = useState(false); // 是否是编辑状态
   const [productType, setProductType] = useState(1); // 商品状态
   const [pageLoading, setPageLoading] = useState(false); // 页面加载状态
@@ -37,25 +35,44 @@ const ServiceGoods = options => {
   const [brandList, setBrandList] = useState([]); // 获取商品牌
   const [specList, setSpecList] = useState([]); // 规格列表
   const [editData, setEditData] = useState({}); // 编辑保存数据
+  const baseCheckList = [basicRef, stockRef, picturesRef];
+  const [checkFormList, setCheckFormList] = useState(baseCheckList);
+
+  const [specKeyList, setSpecKeyList] = useState([]); // 记录一级规格key字段
+
+  const changeCheckList = proType => {
+    const newBaseCheckList = proType === 3 ? [
+      ...baseCheckList,
+      settingRef,
+      settleOtrRef,
+    ] : baseCheckList;
+    setCheckFormList(newBaseCheckList);
+  }
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      checkFormList.forEach(({ current }) => {
+        current.reset()
+      });
+      clearTimeout(timer);
+    });
+  }, [checkFormList])
+
 
-  const productChange = (task: Task): void => {
+  const productChange = task => {
     setProductType(task.type);
+    changeCheckList(task.type);
   };
 
   const submitEvent = async () => {
-    const resuslt = await Promise.all([
-      basicRef.current.onCheck(),
-      stockRef.current.onCheck(),
-      settingRef.current.onCheck(),
-      settleOtrRef.current.onCheck(),
-    ]);
+    const checkPromiseList = checkFormList.map(({ current }) => current.onCheck());
+    const resuslt = await Promise.all(checkPromiseList);
     console.log(resuslt);
   };
 
   // 编辑回显详情数据
-  const getProductDetailResponse = async () => {
+  const getProductDetailResponse = async id => {
     try {
-      const res = await getProductDetail(pageId);
+      const res = await getProductDetail(id);
       if (res && res.data) {
         setProductType(res.data.type);
         setEditData(res.data);
@@ -83,23 +100,41 @@ const ServiceGoods = options => {
 
   useEffect(() => {
     (async () => {
+      if (!options.visible) {
+        return;
+      }
+      setPageId(options.id);
       setPageLoading(true);
-      // await getMerchantCategory();
-      // await getMerchantBrandList();
+      await getMerchantCategory();
+      await getMerchantBrandList();
       await getMerchantSpecList();
-      if (pageId !== 0) {
+      if (options.id) {
         setIsEdit(true);
-        await getProductDetailResponse();
+        await getProductDetailResponse(options.id);
+        changeCheckList(productType);
       }
       setPageLoading(false);
     })();
-  }, [pageId]);
+  }, [options.visible, options.id]);
+
+  const handleOk = () => {
+
+  }
+
+  const handleCancel = () => {
+    options.onChange(false);
+  }
+
+  const onSpecCommonImgEvent = useCallback(keys => {
+    setSpecKeyList(keys);
+  }, [specKeyList])
+
 
   return (
-    <Spin tip="正在加载..." spinning={pageLoading} delay={100}>
-      <PageHeaderWrapper className={commonStyle.header}>
+    <Modal visible={options.visible} onOk={handleOk} onCancel={handleCancel} width={1366}>
+      <Spin tip="正在加载..." spinning={pageLoading} delay={100}>
         <WrapperContainer>
-          <ServiceContext.Provider value={{ pageId, isEdit, productType }}>
+          <ServiceContext.Provider value={{ pageId, isEdit, productType, isCard: productType === 3 }}>
             <Title title="商品类型" />
             <TaskTypeSelect productType={productType} onChange={productChange} />
 
@@ -112,19 +147,20 @@ const ServiceGoods = options => {
             />
 
             <Title title="价格与库存" />
-            <FormPriceOrStock ref={stockRef} specList={specList} editData={editData} />
+            <FormPriceOrStock ref={stockRef} specList={specList} onSpecChange={onSpecCommonImgEvent} editData={editData} />
 
             <Title title="规则设置" />
-            <FormRuleSetting ref={settingRef} editData={editData} />
+            {productType === 3 && <FormRuleSetting ref={settingRef} editData={editData} />}
 
-            <FormSettlementOthers ref={settleOtrRef} editData={editData} />
+            <FormRuleVPictures ref={picturesRef} specKeyItem={specKeyList} editData={editData} />
+            {productType === 3 && <FormSettlementOthers ref={settleOtrRef} editData={editData} />}
             <Button type="primary" onClick={submitEvent}>
               Register
             </Button>
           </ServiceContext.Provider>
         </WrapperContainer>
-      </PageHeaderWrapper>
-    </Spin>
+      </Spin>
+    </Modal>
   );
 };
 

src/pages/ServiceGoods/service.js

@@ -4,6 +4,9 @@ import { stringify } from 'qs';
 import _ from 'lodash';
 
 const { goodsApi, kdspApi } = config;
+const headers = {
+  'Content-Type': 'application/x-www-form-urlencoded',
+};
 
 export const merchantUpload = async files => {
   const params = new FormData();
@@ -16,9 +19,10 @@ export const merchantUpload = async files => {
 };
 
 export const getProductDetail = id =>
-  request.post('/mock/389/product/detail', {
-    prefix: 'http://yapi.quantgroups.com',
-    data: { id },
+  request.post('/product/api/merchant/detail', {
+    prefix: goodsApi,
+    params: { id },
+    headers,
   });
 
 export const merchantCategoryGetAll = () =>

src/pages/ServiceGoods/utils.js

@@ -57,7 +57,7 @@ const createSecondProduct = (secondSpecList, initItem, secondSpec, dataSource, c
 };
 
 export const createProductData = ({ firstValues, secondValues, firstSpecId, secondSpecId }) => {
-  console.log(firstValues, secondValues);
+  console.log('=============>firstValues, secondValues', firstValues, secondValues);
   const countRowSpan = {};
   const dataSource = [];
   if (firstValues.length) {
@@ -82,5 +82,6 @@ export const createProductData = ({ firstValues, secondValues, firstSpecId, seco
     const specFirst = createInitProduct();
     dataSource.push(specFirst);
   }
+  console.log('dataSource===========>', dataSource);
   return dataSource;
 };