feat: 设置表格

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

+import React from 'react';
+import { Table, Form, InputNumber, Input, Popconfirm } from 'antd';
+
+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 EditableContext = React.createContext();
+
+const EditableCell = tableProps => {
+  const getInput = () => {
+    if (tableProps.inputType === 'number') {
+      return <InputNumber />;
+    }
+    return <Input />;
+  };
+  const renderCell = form => {
+    const { getFieldDecorator } = form;
+    const {
+      editing,
+      dataIndex,
+      title,
+      inputType,
+      record,
+      index,
+      children,
+      ...restProps
+    } = tableProps;
+    return (
+      <td {...restProps}>
+        {editing ? (
+          <Form.Item style={{ margin: 0 }}>
+            {getFieldDecorator(`tableArray[${record.key}][${dataIndex}]`, {
+              rules: [
+                {
+                  required: true,
+                  message: `Please Input ${title}!`,
+                },
+              ],
+              initialValue: record[dataIndex],
+            })(getInput())}
+          </Form.Item>
+        ) : (
+          children
+        )}
+      </td>
+    );
+  };
+  return <EditableContext.Consumer>{renderCell}</EditableContext.Consumer>;
+};
+
+const isEditing = record => record.key === '';
+
+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>
+      );
+    },
+  },
+];
+
+export const GenerateProductInfo = ({ form }) => {
+  const components = {
+    body: {
+      cell: EditableCell,
+    },
+  };
+
+  const columns = ProductInfoColumns().map(col => {
+    if (!col.editable) {
+      return col;
+    }
+    return {
+      ...col,
+      onCell: record => ({
+        record,
+        inputType: col.dataIndex === 'age' ? 'number' : 'text',
+        dataIndex: col.dataIndex,
+        title: col.title,
+        editing: true,
+      }),
+    };
+  });
+
+  return (
+    <EditableContext.Provider value={form}>
+      <Table
+        pagination={false}
+        components={components}
+        bordered
+        dataSource={data}
+        columns={columns}
+        rowClassName="editable-row"
+      />
+    </EditableContext.Provider>
+  );
+};

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

@@ -2,7 +2,7 @@ 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, arrkey }) => {
+export const SelectSpecifications = ({ form, keys, formKey, labelName, specList, formValue }) => {
   const { getFieldValue, getFieldDecorator, setFieldsValue } = form;
   const [countNumber, setCountNumber] = useState(0); // 添加计数器
 
@@ -32,7 +32,7 @@ export const SelectSpecifications = ({ form, keys, formKey, labelName, specList,
   const formItems = formItemList.map((k, index) => (
     <Col style={{ marginRight: 20 }} key={k}>
       <Form.Item style={{ width: 200 }} required={false} key={k}>
-        {getFieldDecorator(`${arrkey}[${k}]`, {
+        {getFieldDecorator(`${formValue}[${k}]`, {
           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/index.jsx

@@ -20,6 +20,8 @@ import { useModalTitle, useSpecList, formItemLayout, filterSpecId } from './util
 import { RadioComponent, CascaderComponent } from './libs';
 import { productTypeRules, categoryIdRules, brandIdRules } from './rules';
 import { SelectSpecifications } from './SelectSpecifications';
+import { GenerateProductInfo } from './GenerateProductInfo';
+// import GenerateProductInfo from './GenerateProductInfo';
 
 const { Option } = Select;
 
@@ -64,10 +66,22 @@ const OperationForm = props => {
 
   const onSubmitGoodsForm = () => {
     validateFields(async (errors, values) => {
+      const { firstKeys = [], firstValues = [], secondKeys = [], secondValues = [] } = values;
+      console.log(values);
+      console.log(firstKeys.map(key => firstValues[key]));
+      console.log(secondKeys.map(key => secondValues[key]));
       if (!errors) {
-        const { first = [], firstKeys = [] } = values;
-        console.log(values);
-        console.log(firstKeys.map(key => first[key]));
+        const formData = {
+          id: '', // 有id是编辑
+          name: values.name,
+          items: [], // sku表格
+          brandId: values.brandId, // 商品品牌
+          supplierId: '',
+          detailImageList: [], // 详情图片列表
+          commonImageList: [], // 公共滑动图
+          categoryId: values.categoryId, // 类目id
+          type: values.productType, // 商品类型
+        };
       }
     });
   };
@@ -121,20 +135,23 @@ const OperationForm = props => {
           <SelectSpecifications
             form={form}
             keys="firstKeys"
-            arrkey="first"
             formKey="firstSpecId"
+            formValue="firstValues"
             labelName="一级规格"
             specList={specList}
           />
           <SelectSpecifications
             form={form}
             keys="secondKeys"
-            arrkey="tow"
             formKey="secondSpecId"
+            formValue="secondValues"
             labelName="二级规格"
             specList={specList}
           />
         </Card>
+        <Card>
+          <GenerateProductInfo form={form} />
+        </Card>
       </Form>
     </Modal>
   );

src/pages/GoodsManage/createModal/index.jsx

@@ -329,6 +329,7 @@ class goodsManage extends Component {
     const { editData, productType } = this.state;
 
     validateFields(async (errors, values) => {
+      console.log(values);
       let imgErr = false;
       if (!errors) {
         if (validateSpuInfo(values, initData, editData, productType)) return;