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/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;
+};