fix: 新增服务类商品success

src/pages/GoodsManage/SearchForm/index.jsx

@@ -156,6 +156,13 @@ class goodsManage extends Component {
             <InputNumber style={iptNumWidth} placeholder="请输入" onChange={this.valueMin} />
           </FormItem>
         </FormItem>
+        <FormItem label="商品类型" name="productType">
+          <Select style={iptNumWidth}>
+            <Option value={1}>实体商品</Option>
+            <Option value={2}>虚拟商品</Option>
+            <Option value={4}>服务类商品</Option>
+          </Select>
+        </FormItem>
         <FormItem name="thirdSkuNo" label="第三方SKU编码">
           <Input placeholder="请输入第三方SKU编码" allowClear style={selectW} />
         </FormItem>

src/pages/GoodsManage/index.jsx

@@ -294,12 +294,6 @@ class goodsManage extends Component {
     });
   };
 
-  // serviceVisbleChange = row => {
-  //   this.setState({
-  //     serviceVisble: true,
-  //   });
-  // };
-
   serviceVisbleChange = async row => {
     const { state, spuId, productType } = row;
     this.setState({ createloading: true });
@@ -323,14 +317,18 @@ class goodsManage extends Component {
   };
 
   serviceVisbleOpen = () => {
+    console.log('============>open');
     this.serviceVisbleClose(true);
   };
 
-  serviceVisbleClose = flag => {
+  serviceVisbleClose = (flag, refresh) => {
     this.setState({
       serviceVisble: flag,
       serviceData: {},
     });
+    if (refresh) {
+      this.handleSearch();
+    }
   };
 
   render() {
@@ -445,15 +443,11 @@ class goodsManage extends Component {
           {/* '894048258062' */}
           <ServiceGoods
             visible={this.state.serviceVisble}
-            id={894048258062}
             onChange={this.serviceVisbleClose}
             SourceData={this.state.serviceData}
             shopList={this.shopList}
-            categoryList={
-              this.state.serviceData.productType === 2
-                ? this.state.virtualTreeData
-                : this.state.treeData
-            }
+            categoryList={this.state.treeData}
+            virtualCategoryList={this.state.virtualTreeData}
             specListData={this.state.specListData}
           />
         </Spin>

src/pages/GoodsManage/staticdata.js

@@ -213,6 +213,9 @@ export const productTypeList = [
 
 export const JDSHOPID = [3, 5, 6];
 
+/** ********************************************************************************* */
+/** ********************************************************************************* */
+/** ********************************************************************************* */
 // 编辑回显示时只获取用到的数据
 const filterItem = skuItem => {
   const { serviceItem, ...argsItem } = skuItem;
@@ -224,7 +227,7 @@ const filterSpecData = skuList =>
   skuList.reduce(
     (orgin, skuItem) => {
       const item = filterItem(skuItem);
-      const { firstSpecValue, secondSpecValue } = item;
+      const { firstSpecValue, secondSpecValue, id } = item;
       if (firstSpecValue && !orgin.firstDuplicate.includes(firstSpecValue)) {
         orgin.firstSpecValue.push(item);
         orgin.firstDuplicate.push(firstSpecValue);
@@ -233,14 +236,15 @@ const filterSpecData = skuList =>
         orgin.secondSpecValue.push(item);
         orgin.secondDuplicate.push(secondSpecValue);
       }
+      // origin.skuItemResultList.push(item);
       return orgin;
     },
     {
       firstSpecValue: [],
       secondSpecValue: [],
-      dataSource: [],
       firstDuplicate: [],
       secondDuplicate: [],
+      skuItemResultList: [],
     },
   );
 
@@ -252,47 +256,57 @@ const filterCarouseList = (carouseList = []) =>
     return origin;
   }, {});
 
+const filterServiceItem = (type, serviceItem) => {
+  if (type !== 4) {
+    return {};
+  }
+  console.log(serviceItem);
+  return {
+    serviceItem: {
+      useTime: [resetTime(serviceItem.useStartTime), resetTime(serviceItem.useEndTime)],
+      purchaseTime: [
+        resetTime(serviceItem.purchaseStartTime),
+        resetTime(serviceItem.purchaseEndTime),
+      ], // 购买开始时间
+      shopIds: serviceItem.shopIds || [], // 适用门店列表
+      unavailableDate: serviceItem.unavailableDate, // 不可用日期
+      useTimeDescription: serviceItem.useTimeDescription, // 使用时间
+      useMethod: serviceItem.useMethod, // 使用方法
+      ruleDescription: serviceItem.ruleDescription, // 规则说明
+      applyScope: serviceItem.applyScope, // 适用范围
+      tips: serviceItem.tips, // 温馨提示
+    },
+    settlementItem: {
+      settlementMethod: 1,
+      limitPurchase: Boolean(serviceItem.limitPurchase), // 是否限购1:限购/0:不限购
+      limitPurchaseType: serviceItem.limitPurchaseType, // 限购类型，如果限购必填1:长期限购/2:周期限购
+      limitPurchaseCycle: serviceItem.limitPurchaseCycle, // 限购周期1：每天/7：7天/30：30天
+      limitPurchaseQuantity: serviceItem.limitPurchaseQuantity, // 限购数量
+      packageContent: serviceItem.packageContent,
+      appointment: serviceItem.appointment, // 预约
+      receptionVolume: serviceItem.receptionVolume, // 接待数量
+    },
+  };
+};
+
 export const ProcessEditData = (data, row) => {
   const [oneItem = {}] = data.skuList;
   const serviceItem = oneItem.serviceItem || {};
   const orginSpecItem = filterSpecData(data.skuList);
   const imageList = filterCarouseList(data.carouseList);
+  const servesItemParams = filterServiceItem(data.productType, serviceItem);
 
-  const servesItemParams =
-    data.productType === 4
-      ? {
-          serviceItem: {
-            useTime: [resetTime(serviceItem.useStartTime), resetTime(serviceItem.useEndTime)],
-            purchaseTime: [
-              resetTime(serviceItem.purchaseStartTime),
-              resetTime(serviceItem.purchaseEndTime),
-            ], // 购买开始时间
-            shopIds: serviceItem.shopIds || [], // 适用门店列表
-            unavailableDate: serviceItem.unavailableDate, // 不可用日期
-            useTimeDescription: serviceItem.useTimeDescription, // 使用时间
-            useMethod: serviceItem.useMethod, // 使用方法
-            ruleDescription: serviceItem.ruleDescription, // 规则说明
-            applyScope: serviceItem.applyScope, // 适用范围
-            tips: serviceItem.tips, // 温馨提示
-          },
-          settlementItem: {
-            settlementMethod: 1,
-            limitPurchase: Boolean(serviceItem.limitPurchase), // 是否限购1:限购/0:不限购
-            limitPurchaseType: serviceItem.limitPurchaseType, // 限购类型，如果限购必填1:长期限购/2:周期限购
-            limitPurchaseCycle: serviceItem.limitPurchaseCycle, // 限购周期1：每天/7：7天/30：30天
-            limitPurchaseQuantity: serviceItem.limitPurchaseQuantity, // 限购数量
-            packageContent: serviceItem.packageContent,
-            appointment: serviceItem.appointment, // 预约
-            receptionVolume: serviceItem.receptionVolume, // 接待数量
-          },
-        }
-      : {};
+  const specsParams = data.specs.reduce((origin, item) => {
+    origin[item.specId] = item.specValues.map(child => child.value);
+    return origin;
+  }, {});
 
   const SourceData = {
+    id: data.id,
     productType: data.productType,
     pageProductType: row.productType,
-    state: row.state,
     infoMation: {
+      ...specsParams,
       brandId: data.brandId,
       supplierId: data.supplierId,
       character: data.character,
@@ -310,6 +324,7 @@ export const ProcessEditData = (data, row) => {
     },
     infoImageData: {
       imageList,
+      cardImageList: oneItem.imageList || [],
       commonImageList: data.commonImageList,
       detailImageList: data.detailImageList,
     },
@@ -318,47 +333,8 @@ export const ProcessEditData = (data, row) => {
   };
 
   return SourceData;
-
-  // data.state = state;
-  // data.pageProductType = productType;
-  // data.categoryId = data.thirdCategoryId;
-  // data.firstSpecId = data.skuList[0].firstSpecId;
-  // data.secondSpecId = data.skuList[0].secondSpecId;
-  // data.firstSpecName = data.skuList[0].firstSpec;
-  // data.secondSpecName = data.skuList[0].secondSpec;
-  // data.firstSpecList = [];
-  // data.secondSpecList = [];
-  // data.colorKeys = [];
-  // data.carouseList.forEach(i => {
-  //   if (i.specValue) {
-  //     data.colorKeys.push(i.specValue);
-  //   }
-  // });
-  // data.skuList.forEach(i => {
-  //   if (data.firstSpecList.indexOf(i.firstSpecValue) === -1) {
-  //     data.firstSpecList.push(`${i.firstSpecValue}`);
-  //   }
-  //   if (i.secondSpecValue && data.secondSpecList.indexOf(i.secondSpecValue) === -1) {
-  //     data.secondSpecList.push(i.secondSpecValue);
-  //   }
-  // });
-  // data.specs.forEach(item => {
-  //   const arr = [];
-  //   if (item.specValues.length) {
-  //     item.specValues.forEach(childItem => {
-  //       arr.push(childItem.value);
-  //     });
-  //   }
-  //   data[item.specId] = arr;
-  // });
-  // data.imageList = [];
-  // data.carouseList.forEach(i => {
-  //   data.imageList[`${i.specValue}`] = i.skuSpecImageList || [];
-  // });
-  // data.editData = sortBy(data.skuList, item => item.firstSpecValue);
-  // this.setState({
-  //   initData: data,
-  //   createVisible: true,
-  //   createloading: false,
-  // });
 };
+
+/** ********************************************************************************* */
+/** ********************************************************************************* */
+/** ********************************************************************************* */

src/pages/ServiceGoods/components/CommonTemplate.tsx

-import React from 'react';
+import React, { useState } from 'react';
 import { Select, Form, InputNumber, Input, Button, Popover } from 'antd';
 import commonStyle from '../common.less';
 
@@ -64,9 +64,34 @@ export const SelectTemplate = props => {
 };
 
 export const CreateFormInput = props => {
-  const { title, record, dataIndex, rowIndex, onClick, type, ...options } = props;
+  const {
+    batchRole,
+    rowIndex,
+    dataIndex,
+    onBlurEvent,
+    onClickEvent,
+    record,
+    role,
+    roleProps,
+    title,
+    type,
+    batchProps,
+    disabeldRender,
+    ...options
+  } = props;
+
+  console.log(dataIndex, roleProps);
+
   if (type === 'input') {
-    return <Input placeholder={title} {...options} />;
+    return (
+      <Input
+        {...roleProps}
+        {...options}
+        style={{ width: '100%' }}
+        placeholder={`请输入${title}`}
+        onBlur={e => onBlurEvent(e.target.value, dataIndex, rowIndex)}
+      />
+    );
   }
 
   if (type === 'btnText') {
@@ -77,19 +102,23 @@ export const CreateFormInput = props => {
     );
   }
 
+  if (type === 'text') {
+    return <span className="ant-form-text">{record[dataIndex]}</span>;
+  }
+
   if (type === 'option') {
     return (
       <>
         {record.skuLink && (
-          <Button type="primary" size="small" onClick={() => onClick('cloneImg', record)}>
+          <Button type="primary" size="small" onClick={() => onClickEvent('cloneImg', record)}>
             拉图片
           </Button>
         )}
-        {props.isJDGoods && (
+        {roleProps.isJDGoods && (
           <Button
             type="primary"
             size="small"
-            onClick={() => onClick('updateName', { ...record, dataIndex, rowIndex })}
+            onClick={() => onClickEvent('updateName', { ...record, dataIndex, rowIndex })}
             disabled={props.disabled}
           >
             修改sku名称
@@ -99,5 +128,16 @@ export const CreateFormInput = props => {
     );
   }
 
-  return <InputNumber placeholder={title} {...options} />;
+  return (
+    <InputNumber
+      {...roleProps}
+      {...options}
+      style={{ width: '100%' }}
+      placeholder={`请输入${title}`}
+      onBlur={e => {
+        console.log(e);
+        onBlurEvent(e.target.value, dataIndex, rowIndex);
+      }}
+    />
+  );
 };

src/pages/ServiceGoods/components/EditFormTable.jsx

-import { InputNumber, Input, Modal, Button, Form, Table } from 'antd';
+import { Input, Modal, Button, Form, Table, InputNumber } from 'antd';
 import React, {
   useContext,
   createContext,
@@ -45,74 +45,6 @@ const UpdateSkuName = ({ skuVisble, value, confirmEvent, cancelEvent }) => {
 };
 
 const EditableContext = createContext(null);
-const EditableRow = ({ index, ...props }) => (
-  // console.log('=============>EditableRow', props);
-  <tr {...props} />
-);
-const EditableCell = props => {
-  const {
-    rowIndex,
-    title,
-    editable,
-    children,
-    dataIndex,
-    record,
-    roleProps,
-    handleSave,
-    roleHidden,
-    rowOnClickEvent,
-    roleRules = {},
-    ...restProps
-  } = props;
-
-  // console.log('==============>', props);
-  const form = useContext(EditableContext);
-  const customer = useContext(ServiceContext);
-  const save = async () => {
-    try {
-      const tableList = form.getFieldValue('tableList');
-      handleSave(tableList);
-    } catch (errInfo) {
-      console.log('Save failed:', errInfo);
-    }
-  };
-  const onClickEvent = (type, row) => {
-    // 点击拉取京东图片功能
-    if (type === 'cloneImg') {
-      customer.onEventBus(type, row);
-      return;
-    }
-
-    // 修改sku名称
-    if (type === 'updateName') {
-      rowOnClickEvent(row);
-    }
-  };
-  const childNode = editable ? (
-    <Form.Item
-      style={{ margin: 0 }}
-      hidden={roleHidden}
-      name={['tableList', rowIndex, dataIndex]}
-      rules={[{ required: roleRules.required, message: `请输入${title}.` }]}
-    >
-      <CreateFormInput
-        {...roleProps}
-        title={title}
-        rowIndex={rowIndex}
-        dataIndex={dataIndex}
-        record={record}
-        type={props.type}
-        onBlur={save}
-        onClick={onClickEvent}
-        disabled={props.disabled}
-      />
-    </Form.Item>
-  ) : (
-    children
-  ); // <Button type="text">{children[1]}</Button>
-  return <td {...restProps}>{childNode}</td>;
-};
-
 const EditFormTable = forwardRef((props, ref) => {
   const { initData, defaultColumns, setTableData, mergeTable } = props;
   const customer = useContext(ServiceContext);
@@ -124,34 +56,45 @@ const EditFormTable = forwardRef((props, ref) => {
   });
   const [form] = Form.useForm();
   useEffect(() => {
-    console.log('==============>坚听initData', initData);
     form.setFieldsValue({
       tableList: initData,
     });
-    setDataSource(initData);
+    console.log('==============>生成的表格数据', initData);
+    setDataSource([...initData]);
   }, [initData]);
 
-  const handleAdd = async () => {
-    try {
-      const { tableList } = await form.validateFields();
-      console.log(tableList);
-    } catch (errInfo) {
-      console.log('Save failed:', errInfo);
-    }
-  };
-
-  const handleSave = row => {
-    form.setFieldsValue({
-      tableList: [...row],
-    });
-    // setTableData([...row]);
+  // const handleSave = row => {
+  //   form.setFieldsValue({
+  //     tableList: [...row],
+  //   });
+  //   const dataList = [...dataSource];
+  //   dataList[rowIndex][dataIndex] = value;
+  //   setDataSource([...dataList]);
+  // };
+
+  const handleSave = (value, dataIndex, rowIndex) => {
+    // form.setFieldsValue({
+    //   [`tableList[${rowIndex}][${dataIndex}]`]: value,
+    // });
+    const dataList = [...dataSource];
+    dataList[rowIndex][dataIndex] = value;
+    setDataSource([...dataList]);
   };
 
   const onCheck = async () => {
     try {
-      const values = await form.validateFields();
-      return values;
+      const { tableList } = await form.validateFields();
+      console.log('===============>编辑表格', tableList);
+      const newTableList = customer.isEdit
+        ? [...dataSource]
+        : [...tableList].map(item => {
+            const { rowSpanCount, option, ...childItem } = item;
+            return childItem;
+          });
+      console.log('===============>newTableList', newTableList);
+      return newTableList;
     } catch (errorInfo) {
+      console.log(errorInfo);
       return null;
     }
   };
@@ -176,58 +119,79 @@ const EditFormTable = forwardRef((props, ref) => {
       tableList: newDataSource,
     });
   };
+  const onClickEvent = () => {};
 
   useImperativeHandle(ref, () => ({
     onCheck,
     form,
   }));
-
+  const save = async () => {
+    try {
+      const tableList = form.getFieldValue('tableList');
+      handleSave(tableList);
+    } catch (errInfo) {
+      console.log('Save failed:', errInfo);
+    }
+  };
   // 根据这里做判断渲染表格
   const columns = defaultColumns
     .filter(item => !item.role || item.role.includes(customer.productType))
     .map((col, colIndex) => ({
       ...col,
-      onCell: (record, rowIndex) => {
-        let rowSpan = null;
-        if (col.dataIndex === 'firstSpecValue' && mergeTable) {
-          rowSpan = record.rowSpanCount || 0;
+      align: 'center',
+      render(text, record, rowIndex) {
+        const {
+          dataIndex,
+          title,
+          editable,
+          roleRules = {},
+          roleProps = {},
+          inputType,
+          ...otherParams
+        } = col;
+        const disabled = Boolean(col.disabeldRender ? col.disabeldRender(record) : false);
+        const childrenElement = (
+          <Form.Item
+            style={{ margin: 0 }}
+            key={`${dataIndex}_${rowIndex}`}
+            name={['tableList', rowIndex, dataIndex]}
+            initialValue={record[dataIndex] || null}
+            rules={[{ required: roleRules.required, message: `请输入${title}.` }]}
+          >
+            <CreateFormInput
+              {...otherParams}
+              title={title}
+              type={inputType}
+              record={record}
+              rowIndex={rowIndex}
+              roleProps={roleProps}
+              dataIndex={dataIndex}
+              disabled={disabled}
+              onBlurEvent={handleSave}
+              onClickEvent={onClickEvent}
+            />
+          </Form.Item>
+        );
+        const rowProps = { children: childrenElement, props: {} };
+        if (dataIndex === 'firstSpecValue' && mergeTable) {
+          const rowSpan = record.rowSpanCount;
+          rowProps.props.rowSpan = rowSpan || 0;
         }
-
-        return {
-          rowSpan,
-          record,
-          rowIndex,
-          roleRules: col.roleRules || {},
-          editable: col.editable,
-          dataIndex: col.dataIndex,
-          disabled: col.disabled,
-          type: col.inputType,
-          roleProps: col.roleProps || {},
-          title: col.title,
-          handleSave,
-          rowOnClickEvent,
-        };
+        return rowProps;
       },
     }));
 
   return (
     <>
       <Form form={form} scrollToFirstError component={false}>
+        <Button onClick={onCheck}>测试</Button>
         <EditableContext.Provider value={form}>
-          {/* scroll={{ y: 300, x: 1200 }} */}
           <Table
             height={300}
             pagination={false}
             size="small"
-            components={{
-              body: {
-                row: EditableRow,
-                cell: EditableCell,
-              },
-            }}
             bordered
             dataSource={dataSource}
-            rowKey={row => UUID.createUUID()}
             columns={columns}
           />
         </EditableContext.Provider>

src/pages/ServiceGoods/components/FormInformationBasic.jsx

@@ -16,7 +16,15 @@ const filterCategoryOptions = (inputValue, path) =>
   path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
 
 const FormInformationBasic = forwardRef((props, ref) => {
-  const { editData, categoryList, brandList, shopList, afterAddressList, specListData } = props;
+  const {
+    editData,
+    categoryList,
+    virtualCategoryList,
+    brandList,
+    shopList,
+    afterAddressList,
+    specListData,
+  } = props;
   const [form] = Form.useForm();
   const [noreBrandList, setNoreBrandList] = useState([]);
   const customer = useContext(ServiceContext);
@@ -24,7 +32,21 @@ const FormInformationBasic = forwardRef((props, ref) => {
   const onCheck = async () => {
     try {
       const values = await form.validateFields();
+      const specs = [];
+      // 非服务类商品过滤specs数据
+      if (!customer.isCard) {
+        specListData.forEach(item => {
+          const specValues = values[item.specId];
+          // 判断是否包含改参数
+          if (specValues) {
+            specs.push({ specId: item.specId, specValues });
+          }
+          delete values[item.specId];
+        });
+      }
+      values.specs = specs;
       values.temp = 'infoMation';
+      console.log(values);
       return values;
     } catch (errorInfo) {
       return null;
@@ -60,22 +82,15 @@ const FormInformationBasic = forwardRef((props, ref) => {
       onFinish={onFinish}
       initialValues={{
         brandId: null,
-        supplierId: '',
         name: '',
         categoryId: [],
         description: '',
       }}
       scrollToFirstError
     >
-      {/* <Form.Item
-        label="供应商名称"
-        name="supplierId"
-        rules={[{ required: true, message: '请选择供应商名称' }]}
-      >
-        <Select showSearch placeholder="请选择供应商名称" filterOption={fileterBrandOptions}>
-          {CreateSelectOption(shopList)}
-        </Select>
-      </Form.Item> */}
+      <Button type="primary" onClick={onCheck}>
+        测试
+      </Button>
       <Form.Item
         name="categoryId"
         label="商品类目"
@@ -86,7 +101,7 @@ const FormInformationBasic = forwardRef((props, ref) => {
           placeholder="请选择商品类目！"
           showSearch={{ filter: filterCategoryOptions }}
           fieldNames={{ label: 'name', value: 'id', children: 'children' }}
-          options={categoryList}
+          options={customer.productType === 2 ? virtualCategoryList : categoryList}
         />
       </Form.Item>
       {!customer.isCard && (
@@ -102,7 +117,9 @@ const FormInformationBasic = forwardRef((props, ref) => {
             placeholder="请选择商品品牌"
             filterOption={fileterBrandOptions}
           >
-            {CreateSelectOption(customer.productType === 2 ? noreBrandList : brandList)}
+            {customer.productType === 2
+              ? CreateSelectOption(noreBrandList)
+              : CreateSelectOption(brandList)}
           </Select>
         </Form.Item>
       )}
@@ -127,11 +144,12 @@ const FormInformationBasic = forwardRef((props, ref) => {
         <Form.Item
           name="character"
           label="商品卖点"
-          maxLength={50}
-          placeholder="卖点最优可填写3个词,12个字。前后用空格加竖杠分隔,例: 莹莹剔透 | 粒粒优选 | 易煮易熟"
           rules={[{ required: true, message: '请输入商品卖点!', whitespace: true }]}
         >
-          <Input placeholder="请输入商品名称" />
+          <Input
+            maxLength={50}
+            placeholder="卖点最优可填写3个词,12个字。前后用空格加竖杠分隔,例: 莹莹剔透 | 粒粒优选 | 易煮易熟"
+          />
         </Form.Item>
       )}
 
@@ -141,7 +159,7 @@ const FormInformationBasic = forwardRef((props, ref) => {
           label="售后地址"
           rules={[{ required: true, message: '请选择售后地址!' }]}
         >
-          <Select showSearch placeholder="请选择商品品牌" filterOption={fileterBrandOptions}>
+          <Select showSearch placeholder="请选择售后地址" filterOption={fileterBrandOptions}>
             {([{ id: 9527, addressName: '测试地址' }] || afterAddressList).map(item => (
               <Select.Option key={item.id} value={item.id}>
                 {item.addressName}
@@ -153,12 +171,7 @@ const FormInformationBasic = forwardRef((props, ref) => {
 
       {!customer.isCard &&
         specListData.map((item, index) => (
-          <Form.Item
-            key={item.specId}
-            label={item.specName}
-            name={item.specId}
-            labelCol={{ span: 2 }}
-          >
+          <Form.Item name={item.specId} key={item.specId} label={item.specName}>
             <Checkbox.Group options={item.specValues} />
           </Form.Item>
         ))}

src/pages/ServiceGoods/components/FormPriceOrStock.jsx

@@ -10,7 +10,15 @@ import React, {
 } from 'react';
 import { formItemLayout, StaticColumns } from '../config';
 import EditFormTable from './EditFormTable';
-import { createProductData, cleanArray, batchTableSourceData } from '../utils';
+import {
+  createProductData,
+  cleanArray,
+  filterCoverItemList,
+  batchTableSourceData,
+  fliterSkuListSortData,
+  filterSkuNotIdList,
+} from '../utils';
+
 import { ServiceContext } from '../context';
 import { SelectTemplate } from './CommonTemplate';
 
@@ -158,14 +166,6 @@ const SpecificationTemplate = (props, _) => {
   );
 };
 
-const originItems = {
-  firstSpecValue: [],
-  secondSpecValue: [],
-  dataSource: [],
-  firstDuplicate: [],
-  secondDuplicate: [],
-};
-
 const CreateBatchFormItems = ({ specInitValue, batchChange, editRef, defaultColumns }) => {
   const customer = useContext(ServiceContext);
   const formItems = defaultColumns
@@ -184,26 +184,22 @@ const CreateBatchFormItems = ({ specInitValue, batchChange, editRef, defaultColu
     <>
       {formItems.length ? (
         <Space style={{ marginBottom: 20 }}>
-          {
-            <SelectTemplate
-              width={150}
-              noSty
-              formName="bacthFirst"
-              placeholder={specInitValue.firstSpec}
-              dataList={specInitValue.firstSpecValue}
-              fieldNames={{ label: 'firstSpecValue', value: 'firstSpecValue' }}
-            />
-          }
-          {
-            <SelectTemplate
-              noSty
-              width={150}
-              formName="bacthSecon"
-              placeholder={specInitValue.secondSpec}
-              dataList={specInitValue.secondSpecValue}
-              fieldNames={{ label: 'secondSpecValue', value: 'secondSpecValue' }}
-            />
-          }
+          <SelectTemplate
+            width={150}
+            noSty
+            formName="bacthFirst"
+            placeholder={specInitValue.firstSpec}
+            dataList={specInitValue.firstSpecValue}
+            fieldNames={{ label: 'firstSpecValue', value: 'firstSpecValue' }}
+          />
+          <SelectTemplate
+            noSty
+            width={150}
+            formName="bacthSecon"
+            placeholder={specInitValue.secondSpec}
+            dataList={specInitValue.secondSpecValue}
+            fieldNames={{ label: 'secondSpecValue', value: 'secondSpecValue' }}
+          />
           {formItems.concat(
             <Button key="batch" type="primary" disabled={customer.isService} onClick={batchChange}>
               批量设置
@@ -216,7 +212,7 @@ const CreateBatchFormItems = ({ specInitValue, batchChange, editRef, defaultColu
 };
 
 const FormPriceOrStock = forwardRef((props, ref) => {
-  const { specList, editData, skuList, onSpecChange } = props;
+  const { specList, editData, skuList = [], onSpecChange } = props;
   const editRef = useRef(null);
   const customer = useContext(ServiceContext);
   const [form] = Form.useForm();
@@ -229,7 +225,7 @@ const FormPriceOrStock = forwardRef((props, ref) => {
   const onCheck = async () => {
     try {
       const values = await form.validateFields();
-      const { tableList: items } = await editRef.current.onCheck();
+      const items = await editRef.current.onCheck();
       console.log('================>items', items);
       if (items) {
         return { ...values, items, temp: 'infoSpecData' };
@@ -250,6 +246,7 @@ const FormPriceOrStock = forwardRef((props, ref) => {
       columsData.push({
         title: specData.firstSpec,
         dataIndex: 'firstSpecValue',
+        inputType: 'text',
       });
     }
 
@@ -257,6 +254,7 @@ const FormPriceOrStock = forwardRef((props, ref) => {
       columsData.push({
         title: specData.secondSpec,
         dataIndex: 'secondSpecValue',
+        inputType: 'text',
       });
     }
 
@@ -267,16 +265,38 @@ const FormPriceOrStock = forwardRef((props, ref) => {
   const onFinish = async () => {
     try {
       const values = await form.validateFields();
-      CreateColumnsEvent(values);
       const cleanValues = {
-        firstValues: cleanArray(values.firstSpecValue),
-        secondValues: cleanArray(values.secondSpecValue),
+        firstValues: cleanArray(values.firstSpecValue || []),
+        secondValues: cleanArray(values.secondSpecValue || []),
         firstSpecId: values.firstSpecId,
         secondSpecId: values.secondSpecId,
       };
-      const newData = createProductData(cleanValues);
+
+      const { inIdList: fisrtInIdList, noIdList: fisrtNoIdList } = filterSkuNotIdList(
+        cleanValues.firstValues,
+      );
+      const { inIdList: secndInIdList, noIdList: secndNoIdList } = filterSkuNotIdList(
+        cleanValues.secondValues,
+      );
+
+      const createSkuList = createProductData(
+        {
+          firstSpecId: cleanValues.firstSpecId,
+          secondSpecId: cleanValues.secondSpecId,
+          fisrtInIdList,
+          secndInIdList,
+          fisrtNoIdList,
+          secndNoIdList,
+        },
+        customer.isEdit,
+      );
+      CreateColumnsEvent(values);
+      if (!cleanValues.firstSpecId && !createSkuList.secondSpecId) {
+        setTableData([...createSkuList]);
+        return;
+      }
       setMergeTable(Boolean(cleanValues.secondValues.length));
-      setTableData(newData);
+      setTableData(fliterSkuListSortData([...skuList, ...createSkuList]));
     } catch (error) {
       console.log(error);
     }
@@ -338,64 +358,50 @@ const FormPriceOrStock = forwardRef((props, ref) => {
   useEffect(() => {
     if (customer.isEdit) {
       if (!editData) return;
-      // const { skuList } = editData;
-      // const [oneItem] = skuList;
-      // // 根据接口过滤数据
-      // const { firstSpecValue, secondSpecValue, dataSource } = filterSpecData(skuList);
-      // const specData = {
-      //   firstSpec: oneItem.firstSpec,
-      //   firstSpecId: oneItem.firstSpecId,
-      //   firstSpecValue,
-      //   secondSpec: oneItem.secondSpec,
-      //   secondSpecId: oneItem.secondSpecId,
-      //   secondSpecValue,
-      // };
-
+      console.log('===============>设置参数', editData);
       form.setFieldsValue(editData); // 设置规格数据
-      setSpecInitValue(editData); // 缓存规格数据
       firstOnChangeEvent(); // 触发成底部动态表格数据
-      if (editData.firstSpecId) {
-        onFinish(); // 触发生成表格
-      } else {
-        CreateColumnsEvent(editData);
-        setMergeTable(Boolean(editData.secondSpecValue.length));
-        setTableData(skuList);
-      }
+      setSpecInitValue(editData); // 缓存规格数据
+      CreateColumnsEvent(editData);
+      setMergeTable(Boolean(editData.secondSpecValue.length));
+      setTableData(fliterSkuListSortData(skuList));
     }
   }, [customer.isEdit, editData]);
 
   return (
-    <Form form={form} autoComplete="off" initialValues={initSpecReced()}>
-      <SpecificationTemplate
-        form={form}
-        label="一级规格"
-        formName="firstSpecId"
-        onChange={firstOnChangeEvent}
-        selectName="firstSpec"
-        specName="firstSpecValue"
-        specList={specList}
-        specDataList={specInitValue.firstSpecValue}
-      />
-      <SpecificationTemplate
-        form={form}
-        label="二级规格"
-        onChange={seconOnChangeEvent}
-        formName="secondSpecId"
-        selectName="secondSpec"
-        specName="secondSpecValue"
-        specList={specList}
-        specDataList={specInitValue.secondSpecValue}
-      />
-      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 20 }}>
-        <Button type="primary" disabled={customer.isService} onClick={onFinish}>
-          生成商品信息
-        </Button>
-      </div>
-      <CreateBatchFormItems
-        batchChange={batchChange}
-        specInitValue={specInitValue}
-        defaultColumns={defaultColumns}
-      />
+    <>
+      <Form form={form} autoComplete="off" initialValues={initSpecReced()}>
+        <SpecificationTemplate
+          form={form}
+          label="一级规格"
+          selectName="firstSpec"
+          formName="firstSpecId"
+          specName="firstSpecValue"
+          onChange={firstOnChangeEvent}
+          specList={specList}
+          specDataList={specInitValue.firstSpecValue}
+        />
+        <SpecificationTemplate
+          form={form}
+          label="二级规格"
+          selectName="secondSpec"
+          formName="secondSpecId"
+          specName="secondSpecValue"
+          onChange={seconOnChangeEvent}
+          specList={specList}
+          specDataList={specInitValue.secondSpecValue}
+        />
+        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 20 }}>
+          <Button type="primary" disabled={customer.isService} onClick={onFinish}>
+            生成商品信息
+          </Button>
+        </div>
+        <CreateBatchFormItems
+          batchChange={batchChange}
+          specInitValue={specInitValue}
+          defaultColumns={defaultColumns}
+        />
+      </Form>
       <EditFormTable
         ref={editRef}
         mergeTable={mergeTable}
@@ -403,7 +409,7 @@ const FormPriceOrStock = forwardRef((props, ref) => {
         defaultColumns={defaultColumns}
         initData={tableData}
       />
-    </Form>
+    </>
   );
 });
 

src/pages/ServiceGoods/components/FormRuleSetting.jsx

 import { Form, Input, Select, Checkbox, DatePicker } from 'antd';
-import React, { useState, useEffect, forwardRef, useImperativeHandle, useContext } from 'react';
-import moment from 'moment';
+import React, { useEffect, forwardRef, useImperativeHandle, useContext } from 'react';
 import { WeeksList, formItemLayout } from '../config';
 import { ServiceContext } from '../context';
 import { formatTime } from '../../../utils/utils';
@@ -96,7 +95,7 @@ const FormRuleSetting = forwardRef((props, ref) => {
         <Form.Item
           name="unavailableDate"
           label="不可用日期"
-          rules={[{ required: true, message: '请选择不可用日期!', type: 'array' }]}
+          rules={[{ required: false, message: '请选择不可用日期!', type: 'array' }]}
         >
           <Checkbox.Group>{WeekCheckBox()}</Checkbox.Group>
         </Form.Item>

src/pages/ServiceGoods/components/FormRuleVPictures.jsx

@@ -5,26 +5,35 @@ import { TaskList, formItemLayout } from '../config';
 import UploadImage from './UploadImage';
 import commonStyle from '../common.less';
 
-const { imgConfig: defaultImgConfig } = TaskList[0];
-
 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 [cardImageList, setCardImageList] = useState([]);
+
+  const [form] = Form.useForm();
 
   const customer = useContext(ServiceContext);
   useEffect(() => {
     if (customer.isEdit) {
       if (editData) {
         setImageList(editData.imageList);
+        setCardImageList(editData.cardImageList);
         setCommonImageList(editData.commonImageList); // 编辑状态下设置公共图
         setDetailImageList(editData.detailImageList); // 编辑状态下设置详情图
-        form.setFieldsValue({
-          imageList: editData.imageList,
+        const editParams = {
           commonImageList: editData.commonImageList,
           detailImageList: editData.detailImageList,
+        };
+        if (customer.isCard) {
+          editParams.cardImageList = editData.cardImageList;
+        } else {
+          editParams.imageList = editData.imageList;
+        }
+        const timer = setTimeout(() => {
+          form.setFieldsValue(editParams);
+          clearTimeout(timer);
         });
       }
     }
@@ -48,6 +57,7 @@ const FormRuleVPictures = forwardRef((props, ref) => {
       values.temp = 'infoImageData';
       return values;
     } catch (errorInfo) {
+      console.log(errorInfo);
       return null;
     }
   };
@@ -59,14 +69,12 @@ const FormRuleVPictures = forwardRef((props, ref) => {
     reset: () => {
       form.resetFields();
       setImageList({});
+      setCardImageList([]);
       setCommonImageList([]);
       setDetailImageList([]);
     },
   }));
 
-  const onFinish = values => {
-    console.log('Received values of form: ', values);
-  };
   const onPictureSuccessEvent = (imgList, key) => {
     const newImgList = { ...imageList, [key]: imgList };
     setImageList(newImgList);
@@ -82,6 +90,13 @@ const FormRuleVPictures = forwardRef((props, ref) => {
     });
   };
 
+  const onCardSuccessImageList = imgList => {
+    setCardImageList(imgList);
+    form.setFieldsValue({
+      cardImageList: imgList,
+    });
+  };
+
   const onDetailSuccessImageList = imgList => {
     setDetailImageList(imgList);
     form.setFieldsValue({
@@ -90,103 +105,109 @@ const FormRuleVPictures = forwardRef((props, ref) => {
   };
 
   const [{ imgConfig }] = TaskList.filter(item => item.type === customer.productType);
-
   return (
-    <>
-      <Form
-        {...formItemLayout}
-        form={form}
-        name="register"
-        onFinish={onFinish}
-        initialValues={{
-          imageList: {},
-          commonImageList: [],
-          detailImageList: [],
-        }}
-        scrollToFirstError
+    <Form
+      form={form}
+      {...formItemLayout}
+      initialValues={{
+        commonImageList: [],
+        cardImageList: [],
+      }}
+    >
+      <Form.Item
+        name="commonImageList"
+        label={imgConfig.commonImageList.title}
+        extra={imgConfig.commonImageList.renderExtra(commonImageList.length)}
+        rules={[
+          {
+            required: imgConfig.commonImageList.rule,
+            type: 'array',
+            message: `请上传${imgConfig.commonImageList.title}！`,
+          },
+          {
+            validator(rule, value, callback) {
+              if (customer.productType !== 1) {
+                return callback();
+              }
+              const checkImageList = form.getFieldValue('imageList');
+              const check = Object.keys(checkImageList).length;
+              return check > 0 ? callback() : callback('请上传封面图片');
+            },
+          },
+        ]}
       >
-        <Form.Item
-          label="封面图片"
+        <UploadImage
+          disabled={customer.isService}
           name="commonImageList"
-          extra={`建议尺寸: ##宽##高 (${commonImageList.length} / 1) `}
-          rules={[
-            {
-              required: imgConfig.commonImageList.rule,
-              type: 'array',
-              message: '请上传图片！',
-              validateTrigger: 'submit',
-            },
-            {
-              validator(rule, value, callback) {
-                if (customer.productType !== 1) callback();
-                const checkImageList = form.getFieldValue('imageList');
-                const check = Object.keys(checkImageList).length;
-                return check > 0 ? callback() : callback('请上传封面图片');
-              },
-              validateTrigger: 'submit',
-            },
-          ]}
-        >
-          <UploadImage
-            disabled={customer.isService}
-            name="commonImageList"
-            limit={1}
-            pictures={commonImageList}
-            setPictureList={list => onCommonSuccessEvent(list)}
-          />
-        </Form.Item>
-
-        {!customer.isCard &&
-          Object.keys(imageList).map(key => (
-            <Form.Item
-              key={key}
-              label={`商品图片(${key})`}
-              name={['imageList', key]}
-              extra={`建议尺寸: ##宽##高 (${imageList[key].length} / 11) `}
-              rules={[
-                {
-                  required: imgConfig.imageList.rule,
-                  type: 'array',
-                  message: '请上传图片！',
-                  validateTrigger: 'submit',
-                },
-              ]}
-            >
-              <UploadImage
-                disabled={customer.isService}
-                name={key}
-                limit={11}
-                pictures={imageList[key]}
-                setPictureList={list => onPictureSuccessEvent(list, key)}
-              />
-              <Button className={commonStyle.pullImage} type="primary">
-                拉取公共图
-              </Button>
-            </Form.Item>
-          ))}
-
+          limit={imgConfig.commonImageList.limit}
+          pictures={commonImageList}
+          setPictureList={list => onCommonSuccessEvent(list)}
+        />
+      </Form.Item>
+      {customer.isCard && (
         <Form.Item
-          label="商品详情图"
-          name="detailImageList"
-          extra={`最多上传30张，${detailImageList.length} / 30`}
+          name="cardImageList"
+          label={imgConfig.cardImageList.title}
+          extra={imgConfig.cardImageList.renderExtra(cardImageList.length)}
           rules={[
             {
+              required: imgConfig.cardImageList.rule,
               type: 'array',
-              required: imgConfig.detailImageList.rule,
-              message: '请上传商品详情图！',
-              validateTrigger: 'submit',
+              message: `请上传${imgConfig.cardImageList.title}！`,
             },
           ]}
         >
           <UploadImage
             disabled={customer.isService}
-            name="detailImageList"
-            pictures={detailImageList}
-            setPictureList={list => onDetailSuccessImageList(list)}
+            name="cardImageList"
+            limit={imgConfig.cardImageList.limit}
+            pictures={cardImageList}
+            setPictureList={list => onCardSuccessImageList(list)}
           />
         </Form.Item>
-      </Form>
-    </>
+      )}
+      {!customer.isCard &&
+        Object.keys(imageList).map(key => (
+          <Form.Item
+            name={['imageList', key]}
+            key={key}
+            label={`商品图片(${key})`}
+            rules={[{ required: imgConfig.imageList.rule, type: 'array', message: '请上传图片！' }]}
+            extra={imgConfig.imageList.renderExtra()}
+          >
+            <UploadImage
+              disabled={customer.isService}
+              name={key}
+              limit={11}
+              pictures={imageList[key]}
+              setPictureList={list => onPictureSuccessEvent(list, key)}
+            />
+            <Button className={commonStyle.pullImage} type="primary">
+              拉取公共图
+            </Button>
+          </Form.Item>
+        ))}
+      <Form.Item
+        name="detailImageList"
+        label={imgConfig.detailImageList.title}
+        rules={[
+          {
+            type: 'array',
+            required: imgConfig.detailImageList.rule,
+            message: `请上传${imgConfig.detailImageList.title}！`,
+          },
+        ]}
+        extra={imgConfig.detailImageList.renderExtra()}
+      >
+        <UploadImage
+          disabled={customer.isService}
+          limit={imgConfig.detailImageList.limit}
+          name="detailImageList"
+          pictures={detailImageList}
+          setPictureList={list => onDetailSuccessImageList(list)}
+        />
+      </Form.Item>
+    </Form>
   );
 });
 

src/pages/ServiceGoods/components/UploadImage.jsx

 import { PlusOutlined } from '@ant-design/icons';
-import { Modal, Upload, notification, Spin } from 'antd';
-import React, { useState, useEffect, useRef } from 'react';
+import { Modal, Upload, notification, Spin, Button } from 'antd';
+import React, { useState, useEffect, useRef, forwardRef } from 'react';
 import lodash from 'lodash';
 import { merchantUpload } from '../service';
 
@@ -15,14 +15,14 @@ const UNIT = 1024 * 1024;
 //     reader.onerror = error => reject(error);
 //   });
 
-const uploadButton = (
+const UploadButton = (
   <div>
     <PlusOutlined />
-    <div style={{ marginTop: 8 }}>Upload</div>
+    <div style={{ marginTop: 8 }}>上传图片</div>
   </div>
 );
 
-const UploadImage = props => {
+const UploadImage = forwardRef((props, ref) => {
   const {
     name = `${Date.now()}`,
     limit = null,
@@ -30,8 +30,8 @@ const UploadImage = props => {
     disabled,
     uploadParams,
     pictures = [],
-    onChange = () => {},
     setPictureList = () => {},
+    ...imgOptions
   } = props;
   const [uploadLoading, setUploadLoading] = useState(false);
   const [previewVisible, setPreviewVisible] = useState(false);
@@ -59,53 +59,16 @@ const UploadImage = props => {
   };
 
   const bundleChange = imgFile => {
+    // setFileList(imgFile);
     const imgList = imgFile.map(item => item.url);
     setPictureList(imgList);
+    props.onChange(imgList);
   };
 
   const handleRemove = file => {
     const freshFiles = fileList?.filter(ele => ele.uid !== file.uid);
     bundleChange(freshFiles);
   };
-  // const saveFiles = (file, ret) => {
-  //   return new Promise((resolve) => {
-  //     const reader = new FileReader();
-  //     // 监听图片转换完成
-  //     reader.addEventListener('load',
-  //       () => {
-  //         // ...接入antd upload 的 filelist 中
-  //         // if (typeof setPictureList === 'function') {
-  //         const temFile = { uid: file.uid, status: 'done', name: file.name, url: ret };
-  //         let newFiles = [...fileListRef.current, temFile];
-  //         if (!uploadParams.multiple) {
-  //           // 只保留最后一个文件
-  //           newFiles = newFiles.slice(-1);
-  //         }
-  //         bundleChange(newFiles);
-  //         // }
-  //       },
-  //       false,
-  //     );
-  //     reader.readAsDataURL(file);
-
-  //   })
-  //   // 图片转换成base64编码作为缩略图
-  // };
-  // const customRequestObject = async params => {
-  //   console.log(fileList.length);
-  //   const { file, onSuccess, onError } = params;
-  //     try {
-  //       const res = await merchantUpload([file]);
-  //       const [url] = res.data;
-  //       onSuccess();
-  //       saveFiles(file, url);
-  //       setFileList(preFileList => preFileList.map(item => id === item.uid ? { ...item, status: 'done', url, percent: 100,} : item));
-  //     } catch(error) {
-  //       onError();
-  //       console.log(error);
-  //     }
-  // };
-
   const checkFile = file =>
     new Promise(resolve => {
       const curType = file.name.substr(file.name.lastIndexOf('.') + 1).toLowerCase();
@@ -159,12 +122,19 @@ const UploadImage = props => {
           if (checkFiles.length) {
             setUploadLoading(true);
             const res = await merchantUpload(checkFiles);
-            const proFiles = (res.data || []).map((urlItem, urlIndex) =>
-              imageLoading(checkFiles[urlIndex], urlItem),
-            );
-            const imagList = await Promise.all(proFiles);
-            const newFiles = [...fileListRef.current, ...imagList];
-            bundleChange(newFiles);
+            if (res.data) {
+              const proFiles = (res.data || []).map((urlItem, urlIndex) =>
+                imageLoading(checkFiles[urlIndex], urlItem),
+              );
+              const imagList = await Promise.all(proFiles);
+              const newFiles = [...fileListRef.current, ...imagList];
+              bundleChange(newFiles);
+            } else {
+              notification.warning({
+                message: '警告',
+                description: res.msg,
+              });
+            }
             setUploadLoading(false);
           }
         } catch (error) {
@@ -181,8 +151,8 @@ const UploadImage = props => {
   return (
     <Spin tip="正在上传..." spinning={uploadLoading} delay={100}>
       <Upload
-        disabled={disabled}
         {...uploadParams}
+        disabled={Boolean(disabled)}
         multiple={multiple}
         name={name}
         customRequest={() => {}}
@@ -192,13 +162,13 @@ const UploadImage = props => {
         onPreview={handlePreview}
         onRemove={handleRemove}
       >
-        {fileList.length >= props.limit ? null : uploadButton}
+        {limit !== null && fileList.length >= limit ? null : UploadButton}
       </Upload>
       <Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}>
         <img alt="example" style={{ width: '100%' }} src={previewImage} />
       </Modal>
     </Spin>
   );
-};
+});
 
 export default UploadImage;

src/pages/ServiceGoods/config.js

@@ -12,22 +12,24 @@ export const TaskList = [
     name: '实体商品',
     type: 1,
     desc: '物流发货',
-    hide: true,
+    // hide: true,
     imgConfig: {
-      imageList: {
-        tip: '（图片最大上传2M）',
+      commonImageList: {
+        title: '公共滑动图',
         rule: false,
         limit: null,
+        renderExtra: () => '（图片最大上传2M）',
       },
-      commonImageList: {
-        tip: '（图片最大上传2M）',
+      imageList: {
         rule: false,
         limit: null,
+        renderExtra: () => '（图片最大上传2M）',
       },
       detailImageList: {
-        tip: '（图片最大上传2M）',
+        title: '详情图',
         rule: true,
         limit: null,
+        renderExtra: () => '（图片最大上传2M）',
       },
     },
   },
@@ -35,19 +37,24 @@ export const TaskList = [
     name: '虚拟商品',
     type: 2,
     desc: '无需物流',
-    hide: true,
+    // hide: true,
     imgConfig: {
-      imageList: {
+      commonImageList: {
+        title: '公共滑动图',
         rule: false,
         limit: null,
+        renderExtra: () => '（图片最大上传2M）',
       },
-      commonImageList: {
+      imageList: {
         rule: false,
-        limit: false,
+        limit: null,
+        renderExtra: () => '（图片最大上传2M）',
       },
       detailImageList: {
-        rule: false,
-        limit: false,
+        title: '详情图',
+        rule: true,
+        limit: null,
+        renderExtra: () => '（图片最大上传2M）',
       },
     },
   },
@@ -57,17 +64,25 @@ export const TaskList = [
     desc: '无需物流',
     hide: true,
     imgConfig: {
-      imageList: {
-        rule: true,
-        limit: 1,
-      },
       commonImageList: {
+        title: '封面图片',
         rule: true,
         limit: 11,
+        renderExtra(leng) {
+          return `建议尺寸: ##宽##高 (${leng} / 1) `;
+        },
+      },
+      imageList: {
+        rule: true,
+        limit: 1,
       },
       detailImageList: {
+        title: '商品图片',
         rule: true,
-        limit: 30,
+        limit: null,
+        renderExtra() {
+          return '请上传商品图！';
+        },
       },
     },
   },
@@ -76,17 +91,29 @@ export const TaskList = [
     type: 4,
     desc: '无需物流',
     imgConfig: {
-      imageList: {
+      commonImageList: {
+        title: '封面图片',
         rule: true,
         limit: 1,
+        renderExtra(leng) {
+          return `建议尺寸: ##宽##高 (${leng} / 1) 封面图第一张 `;
+        },
       },
-      commonImageList: {
+      cardImageList: {
+        title: '商品图片',
         rule: true,
         limit: 11,
+        renderExtra(leng) {
+          return `建议尺寸: ##宽##高,sku商品轮播图(${leng} / 11)`;
+        },
       },
       detailImageList: {
+        title: '商品详情图',
         rule: true,
         limit: 30,
+        renderExtra() {
+          return '最多上传30张';
+        },
       },
     },
   },
@@ -138,7 +165,7 @@ export const StaticColumns = customer => [
       min: 0,
     },
     roleRules: { required: true },
-    disabled: customer.isJDGoods || customer.isService,
+    disabeldRender: () => customer.isJDGoods,
   },
   {
     title: '佣金费率',
@@ -146,6 +173,10 @@ export const StaticColumns = customer => [
     editable: true,
     role: [4],
     roleRules: { required: true },
+    roleProps: {
+      min: 0,
+      max: 100,
+    },
   },
   {
     title: '市场价',
@@ -157,7 +188,6 @@ export const StaticColumns = customer => [
       min: 0,
     },
     roleRules: { required: true },
-    disabled: customer.isService,
   },
   {
     title: '销售价',
@@ -166,6 +196,10 @@ export const StaticColumns = customer => [
     batchRole: [4],
     role: [4],
     roleRules: { required: true },
+    roleProps: {
+      precision: 2,
+      min: 0,
+    },
   },
   {
     title: '重量(kg)',
@@ -176,15 +210,18 @@ export const StaticColumns = customer => [
       precision: 3,
       max: 999999.999,
     },
-    role: [1, 2],
+    role: [1],
     roleRules: { required: true },
-    disabled: customer.isService,
+    roleProps: {
+      precision: 3,
+      max: 999999.999,
+    },
   },
   {
     title: '库存',
     dataIndex: 'productStock',
     editable: true,
-    role: [4],
+    role: [1, 2, 4],
     batchRole: [1, 2, 4],
     batchProps: {
       precision: 0,
@@ -193,30 +230,11 @@ export const StaticColumns = customer => [
       formatter: val => parseInt(val, '10') || '',
     },
     roleProps: {
-      precision: 2,
       min: 0,
     },
     roleRules: { required: true },
+    disabeldRender: record => customer.isEdit && record.id,
   },
-  // {
-  //   title: '库存',
-  //   dataIndex: 'productStock',
-  //   editable: true,
-  //   role: [1, 2],
-  //   batchRole: [1, 2],
-  //   batchProps: {
-  //     precision: 0,
-  //     step: 1,
-  //     // eslint-disable-next-line radix
-  //     formatter: val => parseInt(val, '10') || '',
-  //   },
-  //   roleProps: {
-  //     precision: 2,
-  //     min: 0,
-  //   },
-  //   roleRules: { required: true },
-  //   disabled: customer.isService,
-  // },
   {
     title: '库存预警阈值',
     dataIndex: 'productStockWarning',
@@ -224,7 +242,9 @@ export const StaticColumns = customer => [
     batchRole: [1],
     role: [1, 4],
     roleRules: { required: true },
-    disabled: customer.isService,
+    roleProps: {
+      min: 0,
+    },
   },
   {
     title: '商品自编码',
@@ -232,7 +252,6 @@ export const StaticColumns = customer => [
     editable: true,
     role: [1, 2],
     inputType: 'input',
-    disabled: customer.isService,
     roleRules: { required: true },
   },
   {
@@ -241,7 +260,6 @@ export const StaticColumns = customer => [
     editable: true,
     role: [1, 2],
     inputType: 'input',
-    disabled: customer.isService,
     roleRules: { required: false },
   },
   {
@@ -263,6 +281,5 @@ export const StaticColumns = customer => [
       min: 0,
     },
     roleRules: { required: false },
-    disabled: customer.isService,
   },
 ];

src/pages/ServiceGoods/index.jsx

@@ -29,7 +29,7 @@ import { ServiceContext } from './context';
  * @returns ReactDOM
  */
 const ServiceGoods = options => {
-  const { SourceData, categoryList, specListData } = options;
+  const { SourceData, categoryList, virtualCategoryList, specListData } = options;
 
   const basicRef = useRef(null);
   const stockRef = useRef(null);
@@ -249,8 +249,10 @@ const ServiceGoods = options => {
 
   return (
     <Modal
+      title={isEdit ? '修改商品' : '新增商品'}
       visible={options.visible}
-      width={1366}
+      onCancel={() => handleCancel()}
+      width={1000}
       footer={[
         <Button key="submit" type="primary" loading={pageLoading} onClick={submitEvent}>
           提交
@@ -271,6 +273,7 @@ const ServiceGoods = options => {
               ref={basicRef}
               editData={editData.infoMation}
               categoryList={categoryList}
+              virtualCategoryList={virtualCategoryList}
               brandList={brandList}
               afterAddressList={afterAddressList}
               specListData={specListData}

src/pages/ServiceGoods/utils.js

-import { ConsoleSqlOutlined } from '@ant-design/icons';
+import { sortBy } from 'lodash';
+import UUID from '../../utils/uuid';
+
+export const clearCurrent = currentList => currentList.filter(item => item.current);
+
+export const filterSpecId = (input, option) =>
+  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
 
 export const cleanArray = actual => {
   const newArray = [];
@@ -11,6 +17,8 @@ export const cleanArray = actual => {
   return newArray;
 };
 
+export const filterCoverItemList = (list, key) => (list || []).map(item => ({ [key]: item[key] }));
+
 const createInitProduct = (skuItem, isCreate) => {
   if (isCreate && Object.keys(skuItem).length > 5) {
     return skuItem;
@@ -24,72 +32,10 @@ const createInitProduct = (skuItem, isCreate) => {
     thirdSkuNo: null,
     skuLink: null,
     name: null,
+    uuid: UUID.createUUID(),
   };
 };
 
-const initData = {
-  weight: null,
-  productStockWarning: null,
-  marketPrice: null,
-  supplyPrice: null,
-  stock: null,
-  thirdSkuNo: null,
-  skuLink: null,
-  name: null,
-};
-
-const createSecondProduct = (secondSpecList, initItem, secondSpec, dataSource, callback) => {
-  secondSpecList.forEach(secondItem => {
-    const specSecond =
-      Object.keys(secondItem).length < 2
-        ? {
-            firstSpecId: initItem.firstSpecId,
-            firstSpecValue: initItem.firstSpecValue,
-            ...initData,
-          }
-        : Object.assign({}, initItem); // 继承fist参数
-
-    if (callback) {
-      callback(specSecond);
-    }
-    specSecond.secondSpecId = secondSpec;
-    specSecond.secondSpecValue = secondItem.secondSpecValue;
-    // specSecond.uuid = UUID.createUUID();
-    dataSource.push(specSecond);
-  });
-};
-
-export const createProductData = ({ firstValues, secondValues, firstSpecId, secondSpecId }) => {
-  console.log('=============>firstValues, secondValues', firstValues, secondValues);
-  const countRowSpan = {};
-  const dataSource = [];
-  if (firstValues.length) {
-    firstValues.forEach((fisrtItem, index) => {
-      const specFirst = createInitProduct(fisrtItem, true);
-      specFirst.firstSpecId = firstSpecId;
-      specFirst.firstSpecValue = fisrtItem.firstSpecValue;
-      // specFirst.uuid = UUID.createUUID();
-      if (secondSpecId && secondValues.length) {
-        createSecondProduct(secondValues, specFirst, secondSpecId, dataSource, specSecond => {
-          if (!countRowSpan[specFirst.firstSpecValue]) {
-            countRowSpan[specFirst.firstSpecValue] = true;
-            specSecond.rowSpanCount = secondValues.length;
-          }
-        });
-        return;
-      }
-      dataSource.push(specFirst);
-    });
-  } else if (secondValues.length) {
-    createSecondProduct(secondValues, initData, secondSpecId, dataSource);
-  } else {
-    const specFirst = createInitProduct();
-    dataSource.push(specFirst);
-  }
-  console.log('dataSource===========>', dataSource);
-  return dataSource;
-};
-
 export const isUrl = path => {
   // eslint-disable-next-line no-useless-escape
   const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
@@ -132,13 +78,18 @@ export const batchTableSourceData = ({ batchItem, tableData, bacthSecon, bacthFi
 const filterItems = (type, props) => {
   const { infoSpecData, serviceItem, infoImageData, infoMation, settlementItem } = props;
 
-  console.log('===========>serviceItem', serviceItem);
-  console.log('===========>settlementItem', settlementItem);
+  console.log('===========>infoSpecData', infoSpecData);
 
-  const { imageList = {}, commonImageList } = infoImageData;
+  const { imageList = {}, commonImageList, cardImageList } = infoImageData;
   return infoSpecData.items.map(item => {
-    const imgList = imageList[item.firstSpecValue] || [];
-    item.imageList = imgList.length ? imgList : commonImageList;
+    if (type === 4) {
+      // 如果为服务类商品，默认取cardImageList，cardImageList为必选项目
+      item.imageList = cardImageList;
+    } else {
+      // 如果为虚拟或实体商品，默认取自己{}中对应的的，没有则取公共图
+      const imgList = imageList[item.firstSpecValue] || [];
+      item.imageList = imgList.length ? imgList : commonImageList;
+    }
     item.firstSpecId = infoSpecData.firstSpecId;
     item.secondSpecId = infoSpecData.secondSpecId || null;
     if (type === 4) {
@@ -156,11 +107,12 @@ export const filterSendData = (type, params) => {
   console.log('===============>生成数据', params);
   const { infoMation, infoImageData } = params;
   const items = filterItems(type, params);
-
   return {
     type,
     items,
     name: infoMation.name,
+    specs: infoMation.specs || [],
+    supplierId: infoMation.supplierId,
     brandId: infoMation.brandId || null,
     character: infoMation.character,
     categoryId: infoMation.categoryId[2],
@@ -169,3 +121,123 @@ export const filterSendData = (type, params) => {
     commonImageList: infoImageData.commonImageList,
   };
 };
+
+export const fliterSkuListSortData = list => {
+  if (!list || !list.length) return;
+
+  const fristSkuList = sortBy(list, item => item.firstSpecValue).reduce((origin, item) => {
+    if (!origin[item.firstSpecValue]) {
+      origin[item.firstSpecValue] = [item];
+    } else {
+      origin[item.firstSpecValue].push(item);
+    }
+    return origin;
+  }, {});
+  let finialList = [];
+  // eslint-disable-next-line no-restricted-syntax, guard-for-in
+  for (const skuKey in fristSkuList) {
+    const skuFirst = fristSkuList[skuKey];
+    skuFirst.forEach((sku, ind) => {
+      if (!ind) {
+        sku.rowSpanCount = skuFirst.length;
+      }
+    });
+    finialList = [...finialList, ...skuFirst];
+  }
+  // eslint-disable-next-line consistent-return
+  return finialList;
+};
+
+export const filterSkuNotIdList = list =>
+  (list || []).reduce(
+    (origin, item) => {
+      if (item.id) {
+        origin.inIdList.push(item);
+      } else {
+        origin.noIdList.push(item);
+      }
+      return origin;
+    },
+    {
+      inIdList: [],
+      noIdList: [],
+    },
+  );
+
+const createInitSkuItems = () => ({
+  weight: null,
+  productStockWarning: null,
+  marketPrice: null,
+  supplyPrice: null,
+  stock: null,
+  thirdSkuNo: null,
+  skuLink: null,
+  name: null,
+});
+
+export const createSkuListData = (first, second, firstSpecId, secondSpecId) => {
+  const list = [];
+  const skuItem = createInitSkuItems();
+
+  console.log(first, second, firstSpecId, secondSpecId);
+
+  if (first && first.length) {
+    // 一级规格有值时，生成的编辑表格
+    first.forEach(fir => {
+      const copy = { ...skuItem };
+      copy.firstSpecId = firstSpecId;
+      copy.firstSpecValue = fir.firstSpecValue;
+      // console.log(copy);
+      if (second.length) {
+        second.forEach(sec => {
+          const copySec = { ...copy };
+          copySec.secondSpecId = secondSpecId;
+          copySec.secondSpecValue = sec.secondSpecValue;
+          list.push(copySec);
+        });
+        return;
+      }
+
+      list.push(copy);
+    });
+  } else if (second && second.length) {
+    // 缺少一级规格值，只有二级规格值时，生成的编辑表格
+    second.forEach(sec => {
+      const copy = { ...skuItem };
+      copy.secondSpecId = secondSpecId;
+      copy.secondSpecValue = sec.secondSpecValue;
+      list.push(copy);
+    });
+  } else {
+    // 缺少一级和二级规格时生成的编辑表格
+    list.push(skuItem);
+  }
+  return list;
+};
+
+export const createProductData = (props, isEdit) => {
+  const {
+    firstSpecId,
+    secondSpecId,
+    fisrtNoIdList,
+    secndNoIdList,
+    fisrtInIdList,
+    secndInIdList,
+  } = props;
+  const newFirstList = fisrtNoIdList.concat(fisrtInIdList || []);
+  let list = [];
+  // if (!isFirstSame && !isSecondSame) {
+  if (!isEdit) {
+    list = createSkuListData(fisrtNoIdList, secndNoIdList, firstSpecId, secondSpecId);
+  } else {
+    const list1 = fisrtNoIdList.length
+      ? createSkuListData(fisrtNoIdList, secndInIdList, firstSpecId, secondSpecId)
+      : [];
+    const list2 = secndNoIdList.length
+      ? createSkuListData(newFirstList, secndNoIdList, firstSpecId, secondSpecId)
+      : [];
+    list = [...list1, ...list2];
+  }
+  // }
+  return list;
+};