feat: 增加批量设置

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

+import React from 'react';
+import { Form, Select, Button } from 'antd';
+import { cleanArray } from './utils';
+import { getInput } from './libs';
+
+const columnsRest = { style: { width: 135 } };
+
+const formItemColumns = () => {
+  console.log('==========');
+  return [
+    {
+      title: '供货价',
+      key: 'supplyPrice',
+      placeholder: '请先选择二级规格',
+      inputType: 'number',
+      rest: columnsRest,
+    },
+    {
+      title: '市场价',
+      key: 'marketPrice',
+      placeholder: '请选择市场价',
+      inputType: 'number',
+      rest: columnsRest,
+    },
+    {
+      title: '重量(kg)',
+      key: 'weight',
+      inputType: 'number',
+      rest: columnsRest,
+      role: [1, 2],
+    },
+    {
+      title: '库存',
+      key: 'productStock',
+      inputType: 'number',
+      rest: columnsRest,
+    },
+  ];
+};
+
+const formItemStyle = {
+  style: {
+    display: 'inline-block',
+    marginRight: 5,
+    marginBottom: 0,
+  },
+};
+
+const createSpecSelect = ({ specId, list, placeholder }) => (
+  <Select allowClear style={{ width: 120 }} placeholder={specId?.label || placeholder}>
+    {list.map(item => (
+      <Select.Option key={item} value={item}>
+        {item}
+      </Select.Option>
+    ))}
+  </Select>
+);
+
+const createFormItems = (productType = 1, { getFieldDecorator }) => {
+  const formItems = formItemColumns()
+    .filter(item => !item.role || item?.role.includes(productType))
+    .map(item => (
+      <Form.Item {...formItemStyle}>
+        {getFieldDecorator(`batchItem[${item.key}]`, {})(getInput(item))}
+      </Form.Item>
+    ));
+  return formItems;
+};
+
+export const BatchSettings = ({ form, settingTable }) => {
+  const { getFieldDecorator, getFieldsValue, getFieldValue } = form;
+  const values = getFieldsValue();
+  const { firstSpecId, secondSpecId, firstValues = [], secondValues = [] } = values;
+  const cleanFirstValues = cleanArray(firstValues);
+  const cleanSecondValues = cleanArray(secondValues);
+  const renderFormItem = createFormItems(2, { getFieldDecorator });
+
+  return (
+    <div>
+      <Form.Item {...formItemStyle}>
+        {getFieldDecorator('batchItem[batchFirst]', {})(
+          createSpecSelect({
+            list: cleanFirstValues,
+            specId: firstSpecId,
+            placeholder: '请先选择一级规格',
+          }),
+        )}
+      </Form.Item>
+      <Form.Item {...formItemStyle}>
+        {getFieldDecorator('batchItem[batchSecond]', {})(
+          createSpecSelect({
+            list: cleanSecondValues,
+            specId: secondSpecId,
+            placeholder: '请先选择二级规格',
+          }),
+        )}
+      </Form.Item>
+      {renderFormItem}
+      <Form.Item style={{ display: 'inline-block' }}>
+        <Button type="primary" onClick={() => settingTable(getFieldValue('batchItem'))}>
+          批量设置
+        </Button>
+      </Form.Item>
+    </div>
+  );
+};

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

 import React, { useState } from 'react';
 import { Table, Form, InputNumber, Input, Popconfirm, Button, notification } from 'antd';
-import { useEditProduct, dataInit } from './utils';
+import { getInput } from './libs';
+import { cleanArray } from './utils';
+import { BatchSettings } from './BatchSettings';
 
 const initData = {
   weight: null,
   productStockWarning: null,
-  marketPrice: 'marketPrice',
-  // salePrice: '',
-  supplyPrice: 'supplyPrice',
-  // stock: '',
-  productStock: 'productStock',
-  thirdSkuNo: 'thirdSkuNo',
-  skuLink: 'skuLink',
+  marketPrice: null,
+  supplyPrice: null,
+  productStock: null,
+  thirdSkuNo: null,
+  skuLink: null,
   imageList: [],
 };
 
-const createProductData = (
-  { firstValues, secondValues, firstSpecId, secondSpecId },
-  productData,
-) => {
+const createSecondProduct = (secondValues, initItem, secondSpecId, dataSource, callback) => {
+  secondValues.forEach(secondItem => {
+    const specSecond = { ...initItem };
+    if (callback) {
+      callback(specSecond);
+    }
+    specSecond.secondSpecId = secondSpecId.key;
+    specSecond.secondSpecValue = secondItem;
+    dataSource.push(specSecond);
+  });
+};
+
+const createProductData = ({ firstValues, secondValues, firstSpecId, secondSpecId }) => {
   const countRowSpan = {};
   const dataSource = [];
+  if (firstValues.length) {
     firstValues.forEach((fisrtItem, index) => {
-    const specFirst = Object.assign({}, initData);
+      const specFirst = { ...initData };
       specFirst.firstSpecId = firstSpecId.key;
       specFirst.firstSpecValue = fisrtItem;
-
       if (secondValues.length) {
-      secondValues.forEach(secondItem => {
-        const specSecond = Object.assign({}, specFirst);
+        createSecondProduct(secondValues, specFirst, secondSpecId, dataSource, specSecond => {
           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);
     });
+  } else if (secondValues.length) {
+    createSecondProduct(secondValues, initData, secondSpecId, dataSource);
+  } else {
+    dataSource.push(initData);
+  }
   return dataSource;
 };
 
@@ -55,12 +65,6 @@ const isRepeatProduct = (list, message) => {
 const EditableContext = React.createContext();
 
 const EditableCell = tableProps => {
-  const getInput = () => {
-    if (tableProps.inputType === 'number') {
-      return <InputNumber />;
-    }
-    return <Input />;
-  };
   const renderCell = form => {
     const { getFieldDecorator } = form;
     const {
@@ -71,43 +75,36 @@ const EditableCell = tableProps => {
       record,
       index,
       children,
-      rules,
+      rules = [],
       required,
       ...restProps
     } = tableProps;
-    console.log(tableProps);
+    console.log(record[dataIndex]);
     return (
       <td {...restProps}>
-        {editable ? (
         <Form.Item style={{ margin: 0 }}>
           {getFieldDecorator(`tableArray[${index}][${dataIndex}]`, {
             rules: [
               {
                 required,
-                  message: `请输入 ${title}!`,
+                message: `请输入${title}!`,
               },
               ...rules,
             ],
             initialValue: record[dataIndex],
-            })(getInput())}
-          </Form.Item>
-        ) : (
-          <Form.Item style={{ margin: 0 }}>
-            {getFieldDecorator(`tableArray[${index}][${dataIndex}]`, {
-              initialValue: record[dataIndex],
-            })(<span className="ant-form-text">{children}</span>)}
+          })(getInput(tableProps))}
         </Form.Item>
-        )}
       </td>
     );
   };
   return <EditableContext.Consumer>{renderCell}</EditableContext.Consumer>;
 };
 
-const ProductInfoColumns = ({ firstSpecId, secondSpecId }, productData) => {
-  console.log(productData);
-  return productData.length
-    ? [
+const ProductInfoColumns = (
+  { firstSpecId, secondSpecId, firstValues, secondValues },
+  productData,
+) => {
+  const productColData = [
     {
       title: firstSpecId?.label,
       dataIndex: 'firstSpecValue',
@@ -116,15 +113,18 @@ const ProductInfoColumns = ({ firstSpecId, secondSpecId }, productData) => {
       render: (val, row) => ({
         children: val,
         props: {
-              rowSpan: row.rowSpanCount ? row.rowSpanCount : 0,
+          // eslint-disable-next-line no-nested-ternary
+          rowSpan: secondValues?.length ? (row.rowSpanCount ? row.rowSpanCount : 0) : true,
         },
       }),
+      hidden: !firstValues?.length,
     },
     {
       title: secondSpecId?.label,
       dataIndex: 'secondSpecValue',
       key: 'secondSpecValue',
       editable: false,
+      hidden: !secondValues?.length,
     },
     {
       title: '供货价',
@@ -140,6 +140,15 @@ const ProductInfoColumns = ({ firstSpecId, secondSpecId }, productData) => {
       key: 'marketPrice',
       dataIndex: 'marketPrice',
       editable: true,
+      inputType: 'number',
+      required: true,
+    },
+    {
+      title: '重量(kg)',
+      key: 'weight',
+      dataIndex: 'weight',
+      editable: true,
+      inputType: 'number',
       required: true,
     },
     {
@@ -150,75 +159,118 @@ const ProductInfoColumns = ({ firstSpecId, secondSpecId }, productData) => {
       inputType: 'number',
       required: true,
     },
+    {
+      title: '库存预警',
+      dataIndex: 'productStockWarning',
+      key: 'productStockWarning',
+      editable: true,
+      inputType: 'number',
+      required: true,
+    },
     {
       title: '商品自编码',
       dataIndex: 'thirdSkuNo',
       key: 'thirdSkuNo',
       editable: true,
-          inputType: 'number',
+      inputType: 'input',
       required: true,
     },
     {
       title: '京东链接',
       dataIndex: 'skuLink',
       key: 'skuLink',
+      inputType: 'input',
       editable: true,
     },
-      ]
-    : [];
+  ];
+  return productData.length ? productColData : [];
 };
 
-const BatchSettings = () => {};
-
-export const GenerateProductInfo = ({ form }) => {
-  const [productData, setProductData] = useState([]);
-  const components = {
-    body: {
-      cell: EditableCell,
-    },
-  };
-
-  const columns = ProductInfoColumns(form.getFieldsValue(), productData).map(col => {
-    console.log('============================================================');
+const createProductColumns = (values, productData) => {
+  const columns = ProductInfoColumns(values, productData)
+    .map(col => {
+      console.log('=================>');
       return {
         ...col,
-      onCell: (record, index) => {
-        console.log(index);
-        return {
+        onCell: (record, index) => ({
           index,
           record,
+          inputType: col.inputType,
           editable: col.editable,
           dataIndex: col.dataIndex,
           title: col.title,
           rules: col.rules,
           required: col.required,
+        }),
       };
+    })
+    .filter(col => !col.hidden);
+  return columns;
+};
+
+export const GenerateProductInfo = ({ form }) => {
+  const [productData, setProductData] = useState([]);
+  const [columns, setColumns] = useState([]);
+  const components = {
+    body: {
+      cell: EditableCell,
     },
   };
-  });
-
   const handleAddProduct = () => {
     const values = form.getFieldsValue();
-    const { firstValues = [], secondValues = [] } = values;
+    const { firstValues = [], secondValues = [], firstSpecId, secondSpecId } = values;
+    const cleanFirstValues = cleanArray(firstValues); // 清楚空属性
+    const cleanSecondValues = cleanArray(secondValues);
+
     // 校验是否有重复的一级规格
-    const fisrtIsRepeat = isRepeatProduct(firstValues, '一级规格不可重复');
-    const secondIsRepeat = isRepeatProduct(secondValues, '二级规格不可重复');
+    const fisrtIsRepeat = isRepeatProduct(cleanFirstValues, '一级规格不可重复');
+    const secondIsRepeat = isRepeatProduct(cleanSecondValues, '二级规格不可重复');
     if ([fisrtIsRepeat, secondIsRepeat].includes(true)) {
       setProductData([]);
       return;
     }
 
-    const newData = createProductData(values, productData);
+    const cleanValues = {
+      firstValues: cleanFirstValues,
+      secondValues: cleanSecondValues,
+      firstSpecId,
+      secondSpecId,
+    };
+
+    const newData = createProductData(cleanValues);
+    console.log(newData);
     setProductData(newData);
+    form.setFieldsValue({
+      tableArray: newData,
+    });
+    const columnsData = createProductColumns(cleanValues, newData);
+    setColumns(columnsData);
+  };
+
+  const settingTable = batchItem => {
+    const productKey = Object.keys(batchItem);
+    console.log(productKey);
+    const newData = productData.map(item => {
+      productKey.forEach(key => {
+        item[key] = batchItem[key] || null;
+      });
+      return item;
+    });
+    console.log(newData);
+    setProductData(newData);
+    form.setFieldsValue({
+      tableArray: newData,
+    });
   };
+
   return (
     <EditableContext.Provider value={form}>
       <div style={{ textAlign: 'center' }}>
-        <Button onClick={handleAddProduct} type="primary" style={{ marginBottom: 16 }}>
+        <Button onClick={() => handleAddProduct()} type="primary" style={{ marginBottom: 16 }}>
           生成商品信息
         </Button>
-        {/* <BatchSettings /> */}
       </div>
+      <BatchSettings form={form} settingTable={settingTable} />
       <Table
         rowKey="id"
         pagination={false}

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

@@ -17,9 +17,11 @@ export const SelectSpecifications = ({
   getFieldDecorator(keys, { initialValue: [] });
   const remove = k => {
     const valueKey = getFieldValue(keys);
+    const removeItem = valueKey.filter(i => i !== k);
     setFieldsValue({
-      [keys]: valueKey.filter(i => i !== k),
+      [keys]: removeItem,
     });
+    setCountNumber(removeItem.length);
   };
 
   const add = () => {
@@ -45,8 +47,8 @@ export const SelectSpecifications = ({
   const formItemList = getFieldValue(keys);
   const formItems = formItemList.map((k, index) => (
     <Col style={{ marginRight: 20 }} key={k}>
-      <Form.Item style={{ width: 200 }} required={false} key={k}>
-        {getFieldDecorator(`${formValue}[${k}]`, {
+      <Form.Item style={{ width: 200 }} required={false}>
+        {getFieldDecorator(`${formValue}[${index}]`, {
           validateTrigger: ['onChange', 'onBlur'],
           rules: [{ required: true, whitespace: true, message: 'Please input passenger' }],
         })(<Input placeholder="passenger name" style={{ width: 150, marginRight: 8 }} />)}

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

 import React from 'react';
 
-import { Radio, Cascader } from 'antd';
+import { Radio, Cascader, InputNumber, Input } from 'antd';
 
 export const RadioComponent = ({ productTypeList }) => (
   <Radio.Group>
@@ -20,3 +20,22 @@ export const CascaderComponent = ({ categoryData }) => (
     options={categoryData}
   />
 );
+
+export const getInput = ({ inputType, title, children, rest = {} }) => {
+  let renderElement = null;
+  switch (inputType) {
+    case 'number':
+      renderElement = <InputNumber {...rest} placeholder={`请输入${title}`} />;
+      break;
+    case 'input':
+      renderElement = <Input {...rest} placeholder={`请输入${title}`} />;
+      break;
+    default:
+      renderElement = (
+        <span {...rest} className="ant-form-text">
+          {children}
+        </span>
+      );
+  }
+  return renderElement;
+};

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

@@ -53,3 +53,14 @@ export const dataInit = list => {
     return finialList;
   });
 };
+
+export const cleanArray = actual => {
+  const newArray = [];
+  // eslint-disable-next-line no-plusplus
+  for (let i = 0; i < actual.length; i++) {
+    if (actual[i]) {
+      newArray.push(actual[i]);
+    }
+  }
+  return newArray;
+};