feat: 新增编辑表格组件

src/pages/GoodsManage-new/OperationModal/GenerateProductInfo.jsx

-import React from 'react';
-import { Table, Form, InputNumber, Input, Popconfirm } from 'antd';
+import React, { useState } from 'react';
+import { Table, Form, InputNumber, Input, Popconfirm, Button, notification } from 'antd';
+import { useEditProduct, dataInit } from './utils';
 
-const data = [];
-// eslint-disable-next-line no-plusplus
-for (let i = 0; i < 5; i++) {
-  data.push({
-    firstSpecValue: '规格一级',
-    secondSpecValue: '规格二级',
-    key: i.toString(),
-    name: `Edrward ${i}`,
-    age: 32,
-    address: `London Park no. ${i}`,
+const initData = {
+  weight: null,
+  productStockWarning: null,
+  marketPrice: 'marketPrice',
+  // salePrice: '',
+  supplyPrice: 'supplyPrice',
+  // stock: '',
+  productStock: 'productStock',
+  thirdSkuNo: 'thirdSkuNo',
+  skuLink: 'skuLink',
+  imageList: [],
+};
+
+const createProductData = (
+  { firstValues, secondValues, firstSpecId, secondSpecId },
+  productData,
+) => {
+  const countRowSpan = {};
+  const dataSource = [];
+  firstValues.forEach((fisrtItem, index) => {
+    const specFirst = Object.assign({}, initData);
+    specFirst.firstSpecId = firstSpecId.key;
+    specFirst.firstSpecValue = fisrtItem;
+
+    if (secondValues.length) {
+      secondValues.forEach(secondItem => {
+        const specSecond = Object.assign({}, specFirst);
+        if (!countRowSpan[specFirst.firstSpecValue]) {
+          countRowSpan[specFirst.firstSpecValue] = true;
+          specSecond.rowSpanCount = secondValues.length;
+        }
+        specSecond.secondSpecId = secondSpecId.key;
+        specSecond.secondSpecValue = secondItem;
+        dataSource.push(specSecond);
+      });
+      return;
+    }
+    dataSource.push(specFirst);
   });
-}
+  return dataSource;
+};
+
+const isRepeatProduct = (list, message) => {
+  const isRepeat = [...new Set(list)].length !== list.length;
+  if (isRepeat) {
+    notification.warning({ message });
+  }
+  return isRepeat;
+};
 
 const EditableContext = React.createContext();
 
@@ -26,31 +64,39 @@ const EditableCell = tableProps => {
   const renderCell = form => {
     const { getFieldDecorator } = form;
     const {
-      editing,
+      editable,
       dataIndex,
       title,
       inputType,
       record,
       index,
       children,
+      rules,
+      required,
       ...restProps
     } = tableProps;
+    console.log(tableProps);
     return (
       <td {...restProps}>
-        {editing ? (
+        {editable ? (
           <Form.Item style={{ margin: 0 }}>
-            {getFieldDecorator(`tableArray[${record.key}][${dataIndex}]`, {
+            {getFieldDecorator(`tableArray[${index}][${dataIndex}]`, {
               rules: [
                 {
-                  required: true,
-                  message: `Please Input ${title}!`,
+                  required,
+                  message: `请输入 ${title}!`,
                 },
+                ...rules,
               ],
               initialValue: record[dataIndex],
             })(getInput())}
           </Form.Item>
         ) : (
-          children
+          <Form.Item style={{ margin: 0 }}>
+            {getFieldDecorator(`tableArray[${index}][${dataIndex}]`, {
+              initialValue: record[dataIndex],
+            })(<span className="ant-form-text">{children}</span>)}
+          </Form.Item>
         )}
       </td>
     );
@@ -58,93 +104,127 @@ const EditableCell = tableProps => {
   return <EditableContext.Consumer>{renderCell}</EditableContext.Consumer>;
 };
 
-const isEditing = record => record.key === '';
+const ProductInfoColumns = ({ firstSpecId, secondSpecId }, productData) => {
+  console.log(productData);
+  return productData.length
+    ? [
+        {
+          title: firstSpecId?.label,
+          dataIndex: 'firstSpecValue',
+          key: 'firstSpecValue',
+          editable: false,
+          render: (val, row) => ({
+            children: val,
+            props: {
+              rowSpan: row.rowSpanCount ? row.rowSpanCount : 0,
+            },
+          }),
+        },
+        {
+          title: secondSpecId?.label,
+          dataIndex: 'secondSpecValue',
+          key: 'secondSpecValue',
+          editable: false,
+        },
+        {
+          title: '供货价',
+          key: 'supplyPrice',
+          dataIndex: 'supplyPrice',
+          editable: true,
+          inputType: 'number',
+          required: true,
+          rules: [],
+        },
+        {
+          title: '市场价',
+          key: 'marketPrice',
+          dataIndex: 'marketPrice',
+          editable: true,
+          required: true,
+        },
+        {
+          title: '库存',
+          dataIndex: 'productStock',
+          key: 'productStock',
+          editable: true,
+          inputType: 'number',
+          required: true,
+        },
+        {
+          title: '商品自编码',
+          dataIndex: 'thirdSkuNo',
+          key: 'thirdSkuNo',
+          editable: true,
+          inputType: 'number',
+          required: true,
+        },
+        {
+          title: '京东链接',
+          dataIndex: 'skuLink',
+          key: 'skuLink',
+          editable: true,
+        },
+      ]
+    : [];
+};
 
-const ProductInfoColumns = () => [
-  {
-    title: '一级规格',
-    dataIndex: 'firstSpecValue',
-    editable: false,
-  },
-  {
-    title: '二级规格',
-    dataIndex: 'secondSpecValue',
-    editable: false,
-  },
-  {
-    title: 'name',
-    dataIndex: 'name',
-    editable: true,
-  },
-  {
-    title: 'age',
-    dataIndex: 'age',
-    editable: true,
-  },
-  {
-    title: 'address',
-    dataIndex: 'address',
-    editable: true,
-  },
-  {
-    title: 'operation',
-    dataIndex: 'operation',
-    render: (text, record) => {
-      const editingKey = '';
-      const editable = isEditing(record);
-      return editable ? (
-        <span>
-          <EditableContext.Consumer>
-            {form => (
-              <a
-                // onClick={() => save(form, record.key)}
-                style={{ marginRight: 8 }}
-              >
-                Save
-              </a>
-            )}
-          </EditableContext.Consumer>
-          <Popconfirm title="Sure to cancel?">
-            <a>Cancel</a>
-          </Popconfirm>
-        </span>
-      ) : (
-        <a disabled={editingKey !== ''}>Edit</a>
-      );
-    },
-  },
-];
+const BatchSettings = () => {};
 
 export const GenerateProductInfo = ({ form }) => {
+  const [productData, setProductData] = useState([]);
   const components = {
     body: {
       cell: EditableCell,
     },
   };
 
-  const columns = ProductInfoColumns().map(col => {
-    if (!col.editable) {
-      return col;
-    }
+  const columns = ProductInfoColumns(form.getFieldsValue(), productData).map(col => {
+    console.log('============================================================');
     return {
       ...col,
-      onCell: record => ({
-        record,
-        inputType: col.dataIndex === 'age' ? 'number' : 'text',
-        dataIndex: col.dataIndex,
-        title: col.title,
-        editing: true,
-      }),
+      onCell: (record, index) => {
+        console.log(index);
+        return {
+          index,
+          record,
+          editable: col.editable,
+          dataIndex: col.dataIndex,
+          title: col.title,
+          rules: col.rules,
+          required: col.required,
+        };
+      },
     };
   });
 
+  const handleAddProduct = () => {
+    const values = form.getFieldsValue();
+    const { firstValues = [], secondValues = [] } = values;
+    // 校验是否有重复的一级规格
+    const fisrtIsRepeat = isRepeatProduct(firstValues, '一级规格不可重复');
+    const secondIsRepeat = isRepeatProduct(secondValues, '二级规格不可重复');
+    if ([fisrtIsRepeat, secondIsRepeat].includes(true)) {
+      setProductData([]);
+      return;
+    }
+
+    const newData = createProductData(values, productData);
+    setProductData(newData);
+  };
   return (
     <EditableContext.Provider value={form}>
+      <div style={{ textAlign: 'center' }}>
+        <Button onClick={handleAddProduct} type="primary" style={{ marginBottom: 16 }}>
+          生成商品信息
+        </Button>
+        {/* <BatchSettings /> */}
+      </div>
       <Table
+        rowKey="id"
         pagination={false}
         components={components}
         bordered
-        dataSource={data}
+        dataSource={productData}
         columns={columns}
         rowClassName="editable-row"
       />

src/pages/GoodsManage-new/OperationModal/SelectSpecifications.jsx

@@ -2,7 +2,15 @@ import React, { useState } from 'react';
 import { Form, notification, Col, Input, Icon, Row, Button, Select } from 'antd';
 import { filterSpecId } from './utils';
 
-export const SelectSpecifications = ({ form, keys, formKey, labelName, specList, formValue }) => {
+export const SelectSpecifications = ({
+  form,
+  keys,
+  formKey,
+  labelName,
+  specList,
+  formValue,
+  labelKey,
+}) => {
   const { getFieldValue, getFieldDecorator, setFieldsValue } = form;
   const [countNumber, setCountNumber] = useState(0); // 添加计数器
 
@@ -28,6 +36,12 @@ export const SelectSpecifications = ({ form, keys, formKey, labelName, specList,
     });
   };
 
+  const onChange = option => {
+    // setFieldsValue({
+    //   [labelKey]: option.props.children,
+    // });
+  };
+
   const formItemList = getFieldValue(keys);
   const formItems = formItemList.map((k, index) => (
     <Col style={{ marginRight: 20 }} key={k}>
@@ -45,7 +59,13 @@ export const SelectSpecifications = ({ form, keys, formKey, labelName, specList,
     <>
       <Form.Item label={labelName}>
         {getFieldDecorator(formKey)(
-          <Select allowClear showSearch onChange={(val, option) => {}} filterOption={filterSpecId}>
+          <Select
+            labelInValue
+            allowClear
+            showSearch
+            onChange={(_, option) => onChange(option)}
+            filterOption={filterSpecId}
+          >
             {specList.map(item => (
               <Select.Option key={item.specId} value={item.specId}>
                 {item.specName}

src/pages/GoodsManage-new/OperationModal/index.jsx

@@ -137,6 +137,7 @@ const OperationForm = props => {
             keys="firstKeys"
             formKey="firstSpecId"
             formValue="firstValues"
+            labelKey="firstSpecName"
             labelName="一级规格"
             specList={specList}
           />
@@ -145,6 +146,7 @@ const OperationForm = props => {
             keys="secondKeys"
             formKey="secondSpecId"
             formValue="secondValues"
+            labelKey="secondSpecName"
             labelName="二级规格"
             specList={specList}
           />

src/pages/GoodsManage-new/OperationModal/utils.js

@@ -31,3 +31,25 @@ export const useSpecList = () => {
 
 export const filterSpecId = (input, option) =>
   option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+
+export const useEditProduct = () => [1];
+
+export const dataInit = list => {
+  if (!list || !list.length) return;
+  const obj = {};
+  let finialList = [];
+  list.forEach(item => {
+    obj[item.firstSpecValue] = [];
+  });
+  list.forEach(item => obj[item.firstSpecValue].push(item));
+  const keys = Object.keys(obj);
+  keys.forEach(key => {
+    obj[key].forEach((i, index) => {
+      if (index === 0) {
+        i.length = obj[key].length;
+      }
+    });
+    finialList = finialList.concat(obj[key]);
+    return finialList;
+  });
+};

src/pages/GoodsManage-new/index.jsx

@@ -16,7 +16,7 @@ export default () => {
    */
   const [isEdit, setIsEdit] = useState(false);
   const [categoryData, setCategoryData] = useState([]);
-  const [operationVisible, setOperationVisible] = useState(false);
+  const [operationVisible, setOperationVisible] = useState(true);
   const actionRef = useRef();
   const supplyPriceRef = useRef();
   const [supplyPrice, setSupplyPrice] = useState([]);

src/pages/GoodsManage/createModal/mixin.jsx

@@ -69,6 +69,7 @@ export function createNewList(first, second, firstSpecId, secondSpecId) {
         });
         return;
       }
+      console.log(copy);
       list.push(copy);
     });
   } else if (second.length) {
@@ -83,7 +84,7 @@ export function createNewList(first, second, firstSpecId, secondSpecId) {
     // 缺少一级和二级规格时生成的编辑表格
     list.push(sku);
   }
-
+  console.log(list);
   return list;
 }
 
@@ -374,6 +375,7 @@ export function editColumns(methods, firstData, firstSpec, secondSpec, isJDGoods
       align: 'center',
       width: 100,
       render: (val, row) => {
+        console.log(row);
         const obj = {
           children: val,
           props: {},