嵌套添加

/*
 * @Author: usename 3198834401@qq.com
 * @Date: 2023-02-21 14:29:17
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-03-09 09:48:22
 * @FilePath: \fisp-web\src\pages\demo\platform\sale\FixtureQuotation.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
// 平台销售夹具报价
import React, { useEffect, useState } from 'react';
import { BaseDetails } from '../../../../components/index';
import { useLocation } from 'react-router-dom';
import useAddEidt from './data';
import { Button, Form, Input, Space } from 'antd';
import './specs.less';
const { TextArea } = Input;
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
const baseUrl = import.meta.env.VITE_APP_PROXY_URL;
export default function Specs() {
  const useLocationTo = useLocation();
  const item = useLocationTo.state;
  // const { onFinish, form } = useAddEidt(item);
  const [form] = Form.useForm();
  const onFinish = () => {
    form.validateFields().then(async (a) => {
      console.log("外面",a);
      
      // if (item.status === 0) {
       
      // } else if (item.status === 1) {
        
      // }
    });
  };

  const specsdata = (name:number) => {
    return (
        <Form.List name={[name, 'attributeBindingDTOList']} >
          {(attributeBindingDTOList, { add, remove }) => (
            <>
              {attributeBindingDTOList.map(({ key, name, ...restField }) => (
                <Space direction="vertical" key={key} className="specsdataz-wrap">
                  <Form.Item
                    label="规格名"
                    {...restField}
                    name={[name, 'productAttributeName']}
                    rules={[{ required: true, message: 'Missing last name' }]}
                  >
                    <Input placeholder="Last Name" />
                  </Form.Item>
                  <Form.Item
                    label="规格值"
                    {...restField}
                    name={[name, 'productAttributeValue']}
                    rules={[{ required: true, message: 'Missing last name' }]}
                  >
                    <Input placeholder="Last Name" />
                  </Form.Item>
                  <Button type="link" danger onClick={() => remove(name)} style={{ color: 'red' }}>
                    删除
                  </Button>
                </Space>
              ))}
              <Form.Item>
                <Button type="link" onClick={() => add()} icon={<PlusOutlined />}>
                  规格项
                </Button>
              </Form.Item>
            </>
          )}
        </Form.List>
      // </Form>
    );
  };
  const specsvalue = (name:number) => {
    return (
        <Form.List name={[name, 'specificationBindingDTOList']}>
          {(specificationBindingDTOList, { add, remove }) => (
            <>
              {specificationBindingDTOList.map(({ key, name, ...restField }) => (
                <div key={key} className="specsvaluez-wrap">
                  <>
                    <Form.Item
                      {...restField}
                      name={[name, 'sttrValue']}
                      rules={[{ required: true, message: 'Missing last name' }]}
                    >
                      <Input style={{ width: '300px' }} placeholder="Last Name" />
                    </Form.Item>
                  </>
                  {specsdata(name)}
                  <Button type="link" danger onClick={() => remove(name)} style={{ color: 'red' }}>
                    删除
                  </Button>
                </div>
              ))}
              <Form.Item>
                <Button type="link" onClick={() => add()} icon={<PlusOutlined />}>
                  规格值
                </Button>
              </Form.Item>
            </>
          )}
        </Form.List>
    );
  };
  return (
    <BaseDetails form={form} onFinish={onFinish} title={{ name: item?.title, show: true }}>
      <div>
        <div>自定义添加规格</div>
        <Form.List name="productSpecsDTOList">
          {(fields, { add, remove }) => (
            <>
              {fields.map(({ key, name, ...restField }) => (
                <div key={key} className="specs-wrap">
                  <div className="specsvalue-wrap">
                    <Form.Item
                      label="规格名"
                      {...restField}
                      name={[name, 'productSpecsName']}
                      rules={[{ required: true, message: '请输入规格名' }]}
                    >
                      <Input style={{ width: '300px' }} placeholder="请输入规格名" />
                    </Form.Item>
                    <Form.Item label="规格值" {...restField} name={[name, 'title']}>
                      {specsvalue(name)}
                    </Form.Item>
                  </div>
                  <Button type="link" danger onClick={() => remove(name)} style={{ color: 'red' }}>
                    删除
                  </Button>
                </div>
              ))}
              <Button type="primary" onClick={() => {
                add()
                
              }} icon={<PlusOutlined />}>
                规格项
              </Button>
            </>
          )}
        </Form.List>
      </div>
    </BaseDetails>
  );
}