新增需求发布需求修改

src/pages/transaction/enquirySubmit/addDemandOrder/components/Modal/modalAnchor.tsx

+import React, { useState, useEffect } from 'react';
+import { UPLOAD_TYPE } from '@/constants'
+import { Modal, Anchor, Layout, Menu, Form, Divider, Input, Button, Upload, Select, AutoComplete, Cascader, Spin } from 'antd';
+import style from '../index.less';
+import { LinkOutlined, DeleteOutlined, UploadOutlined } from '@ant-design/icons';
+import { PublicApi } from '@/services/api';
+
+const layout: any = {
+  colon: false,
+  labelCol: { style: { width: '110px' } },
+  labelAlign: "left"
+};
+const { Sider, Content } = Layout;
+const { Link } = Anchor;
+
+interface anchorParams {
+  visible?: boolean,
+  onOk?: Function,
+  onCancel?: Function
+}
+const { Option } = Select;
+
+const ModalAnchor: React.FC<anchorParams> = (props) => {
+  const { visible, onOk, onCancel } = props;
+  const [form] = Form.useForm();
+  const [loading, setloading] = useState(false);
+  const [files, setFiles] = useState([]);
+  const [categoryById, setCategoryById] = useState<any>({});
+  const [category, setcategory] = useState<Array<any>>([]);
+  /**查询品类树 */
+  const searchCategoryTree = (id: any) => {
+    return new Promise(resolve => {
+      PublicApi.getProductPlatformGetCategoryTree({ rootNodeId: id }).then(res => {
+        if (res.code === 1000) {
+          resolve(res.data)
+        }
+      })
+    }).then((data: any) => {
+      setcategory(data)
+    })
+  }
+
+  /**查询品类信息--包括品类、属性、属性值 */
+  const getCategoryById = (val:any) => {
+    const id = val[val.length -1];
+    PublicApi.getProductPlatformGetCategoryById({id}).then(res => {
+      if(res.code === 1000) {
+        setCategoryById(res.data)
+      }
+    })
+  }
+  useEffect(() => {
+    searchCategoryTree('0')
+  }, [visible])
+  
+  const onSubmit = (value:any) => {
+    form.validateFields().then(res => {
+      console.log(res, '提交')
+    }).catch(error => {
+      console.log(error)
+    }) 
+  }
+
+
+  const handleSelect = (val:any, option:any, index:number) => {
+    console.log(val, option)
+  }
+  const handleChange = (val:any, index: number) => {
+    console.log(val)
+  }
+  return (
+    <Modal
+      title='通过平台属性添加'
+      width='800px'
+      wrapClassName={style.modal_wrap_className}
+      bodyStyle={{ padding: '0px' }}
+      visible={visible}
+      onCancel={() => onCancel()}
+      onOk={onSubmit}
+    >
+      <Layout>
+        <Sider width={159} className={style.site_layout_background}>
+          <Anchor
+            bounds={0}
+            targetOffset={120}
+            affix={false}
+          >
+            <Menu
+              mode='inline'
+              defaultSelectedKeys={['1']}
+            >
+              <Menu.Item key="1"><Link href='#basic_info' title='基本信息' /></Menu.Item>
+              {
+                Object.keys(categoryById).length > 0 && 
+                <Menu.Item key="2"><Link href='#category' title={categoryById.name} /></Menu.Item>
+              }
+              <Menu.Item key="3"><Link href='#other_demand' title='其他要求' /></Menu.Item>
+              <Menu.Item key="4"><Link href='#procured_amount' title='采购数量' /></Menu.Item>
+            </Menu>
+          </Anchor>
+        </Sider>
+        <Content className={style.site_content_style}>
+          <Form
+            form={form}
+            {...layout}
+          >
+            <div id='basic_info'>
+              <div className={style.affix_title}><Divider type="vertical" className={style.divider_style} />基本信息</div>
+              <Form.Item label='商品品类' name='category' rules={[{ required: true, message: '请选择商品品类' }]}>
+                <Cascader 
+                  options={category}
+                  fieldNames={{ label: 'title', value: 'id', children: 'children' }}
+                  placeholder="请选择品类"
+                  notFoundContent={<Spin size="small" />}
+                  onChange={getCategoryById}
+                />
+              </Form.Item>
+              <Form.Item label='商品编号' name='goodsNo' rules={[{ required: true, message: '请输入商品编号' }]}><Input /></Form.Item>
+              <Form.Item label='商品名称' name='name' rules={[{ required: true, message: '请输入商品名称' }]}><Input /></Form.Item>
+              <Form.Item label='规格型号' name='model' rules={[{ required: true, message: '请输入规格型号' }]}><Input /></Form.Item>
+              <Form.Item label='规格品牌' name='brand'><Input /></Form.Item>
+            </div>
+            {
+              Object.keys(categoryById).length > 0 &&
+              <div id='category'>
+                <div className={style.affix_title}><Divider type="vertical" className={style.divider_style} />{categoryById.name}</div>
+                {
+                  categoryById.attributeList.length > 0 && 
+                  categoryById.attributeList.map((item:any, index:number) => (
+                    <Form.Item 
+                      label={item.groupName}
+                      name={item.groupName}
+                      key={item.groupId}
+                      rules={[{ required: item.isEmpty, message: `请选择${item.groupName}` }]}
+                    >
+                      <AutoComplete 
+                        onSelect={(val, option) => handleSelect(val, option, index)}
+                        onChange={(val) => handleChange(val, index)}
+                      >
+                        {
+                          item.attributeValueList.map((items:any) => (
+                            <AutoComplete.Option value={items.value} key={items.id}>{items.value}</AutoComplete.Option>
+                          ))
+                        }
+                      </AutoComplete>
+                    </Form.Item>
+                  ))
+                }
+              </div>
+            }
+            <div id='other_demand'>
+              <div className={style.affix_title}><Divider type="vertical" className={style.divider_style} />其他要求</div>
+              <Form.Item label='特殊说明' name='shuoming'><Input.TextArea rows={4} /></Form.Item>
+              <Form.Item label='附件' name='upload'>
+                <div className={style.upload_data}>
+                  {files.length > 0 && files.map((v, index) => (
+                    <div key={index} className={style.upload_item}>
+                      <div className={style.upload_left}>
+                        <LinkOutlined />
+                        <span>{v.name}</span>
+                      </div>
+                      <div className={style.upload_right}>
+                        <DeleteOutlined />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+                <Upload
+                  action="/api/file/file/upload"
+                  data={{ fileType: UPLOAD_TYPE }}
+                  showUploadList={false}
+                  accept='.doc,.docx,.pdf,.ppt,.pptx,.xls,.xlsx'
+                >
+                  <Button loading={loading} icon={<UploadOutlined />}>上传文件</Button>
+                  <div style={{ marginTop: '8px' }}>一次上传一个文件，每个附件大小不能超过 20M</div>
+                </Upload>
+              </Form.Item>
+            </div>
+            <div id='procured_amount'>
+              <div className={style.affix_title}><Divider type="vertical" className={style.divider_style} />采购数量</div>
+              <Form.Item label='单位' name='unit' rules={[{ required: true, message: '请选择单位' }]}><Input /></Form.Item>
+              <Form.Item label='采购数量' name='purchaseCount' rules={[{ required: true, message: '请输入采购数量' }]}><Input /></Form.Item>
+            </div>
+          </Form>
+        </Content>
+      </Layout>
+    </Modal>
+  )
+}
+
+export default ModalAnchor;
\ No newline at end of file

src/pages/transaction/enquirySubmit/addDemandOrder/components/Modal/modalGoods.tsx

+import React, { useState, useEffect } from 'react';
+import { UPLOAD_TYPE } from '@/constants'
+import { Modal, Anchor, Layout, Menu, Form, Divider, Input, Button, Upload, Cascader, Spin, InputNumber  } from 'antd';
+import style from '../index.less';
+import { LinkOutlined, DeleteOutlined, UploadOutlined } from '@ant-design/icons';
+import { PublicApi } from '@/services/api';
+import ModalTable from '@/components/ModalTable';
+import { ColumnType } from 'antd/lib/table/interface';
+import { useRowSelectionTable } from '@/hooks/useRowSelectionTable';
+
+const layout: any = {
+  colon: false,
+  labelCol: { style: { width: '110px' } },
+  labelAlign: "left"
+};
+const { Sider, Content } = Layout;
+const { Link } = Anchor;
+
+interface goodsParams {
+  visible?: boolean,
+  onOk?: Function,
+  onCancel?: Function
+}
+
+const ModalGoods: React.FC<goodsParams> = (props) => {
+  const [form] = Form.useForm();
+  const { visible, onOk, onCancel } = props;
+  const [loading, setloading] = useState(false);
+  const [files, setFiles] = useState([]);
+  const [category, setcategory] = useState<Array<any>>([]);
+  const [rowSelection, RowCtl] = useRowSelectionTable({ customKey: 'id', type: 'radio' });
+  const [visibleChannelGoods, setvisibleChannelGoods] = useState<boolean>(false);
+  const [goods, setGoods] = useState<any>({})
+  /**查询品类树 */
+  const searchCategoryTree = (id: any) => {
+    return new Promise(resolve => {
+      PublicApi.getProductPlatformGetCategoryTree({ rootNodeId: id }).then(res => {
+        if (res.code === 1000) {
+          resolve(res.data)
+        }
+      })
+    }).then((data: any) => {
+      setcategory(data)
+    })
+  }
+  useEffect(() => {
+    searchCategoryTree('0')
+  }, [visible])
+  /**提交表单 */
+  const onSubmit = (value: any) => {
+    form.validateFields().then(res => {
+      onOk(res, goods)
+    }).catch(error => {
+      console.log(error)
+    })
+  }
+  /**货品表头 */
+  const columns: ColumnType<any>[] = [
+    {
+      title: '货号',
+      key: 'code',
+      dataIndex: 'code'
+    },
+    {
+      title: '货品名称',
+      key: 'name',
+      dataIndex: 'name'
+    },
+    {
+      title: '规格型号',
+      key: 'type',
+      dataIndex: 'type'
+    },
+    {
+      title: '品类',
+      key: 'customerCategory',
+      dataIndex: 'customerCategory',
+      render: (text: any) => <span>{text.name}</span>
+    },
+    {
+      title: '品牌',
+      key: 'brand',
+      dataIndex: 'brand',
+      render: (text: any) => <span>{text.name}</span>
+    },
+    {
+      title: '单位',
+      key: 'unitName',
+      dataIndex: 'unitName'
+    },
+  ]
+
+  /** 获取货品 */
+  const fetchGoodsData = (params: any) => {
+    return new Promise(resolve => {
+      PublicApi.getProductGoodsGetGoodsList(params).then(res => {
+        const { data } = res
+        resolve(data)
+      })
+    })
+  }
+
+  /** 选择货品 */
+  const handleConfirm = () => {
+    setvisibleChannelGoods(false)
+    const data = RowCtl.selectRow[0]
+    const fullId = data.customerCategory.fullId
+    const ids = fullId.replace(/\b(0+)/gi,'').split('.');
+    setGoods(data)
+    form.setFieldsValue({
+      goodsNo: data.code,
+      name: data.name,
+      model: data.type,
+      category: ids.join(',').split(','),
+      brand: data.brand.name,
+      unit: data.unitName,
+    })
+  }
+  return (
+    <>
+      <Modal
+        title='通过平台属性添加'
+        width='800px'
+        wrapClassName={style.modal_wrap_className}
+        bodyStyle={{ padding: '0px' }}
+        visible={visible}
+        onCancel={() => onCancel()}
+        onOk={onSubmit}
+      >
+        <Layout>
+          <Sider width={159} className={style.site_layout_background}>
+            <Anchor
+              bounds={0}
+              targetOffset={120}
+              affix={false}
+            >
+              <Menu
+                mode='inline'
+                defaultSelectedKeys={['1']}
+              >
+                <Menu.Item key="1"><Link href='#basic_info' title='基本信息' /></Menu.Item>
+                <Menu.Item key="2"><Link href='#procured_amount' title='采购数量' /></Menu.Item>
+                <Menu.Item key="3"><Link href='#other_demand' title='附件' /></Menu.Item>
+              </Menu>
+            </Anchor>
+          </Sider>
+          <Content className={style.site_content_style}>
+            <Form
+              form={form}
+              {...layout}
+            >
+              <div id='basic_info'>
+                <div className={style.affix_title}><Divider type="vertical" className={style.divider_style} />基本信息</div>
+                <Form.Item label='货号' name='goodsNo' rules={[{ required: true, message: '请输入商品编号' }]}><Input.Search enterButton={<><LinkOutlined /> 选择</>} onSearch={() => setvisibleChannelGoods(true)} /></Form.Item>
+                <Form.Item label='货品名称' name='name' rules={[{ required: true, message: '请输入货品名称' }]}><Input /></Form.Item>
+                <Form.Item label='规格型号' name='model' rules={[{ required: true, message: '请输入规格型号' }]}><Input /></Form.Item>
+                <Form.Item label='商品品类' name='category' rules={[{ required: true, message: '请选择商品品类' }]}>
+                  <Cascader
+                    options={category}
+                    fieldNames={{ label: 'title', value: 'id', children: 'children' }}
+                    placeholder="请选择品类"
+                    notFoundContent={<Spin size="small" />}
+                  />
+                </Form.Item>
+                <Form.Item label='货品品牌' name='brand'><Input /></Form.Item>
+              </div>
+              <div id='procured_amount'>
+                <div className={style.affix_title}><Divider type="vertical" className={style.divider_style} />采购数量</div>
+                <Form.Item label='单位' name='unit' rules={[{ required: true, message: '请选择单位' }]}><Input /></Form.Item>
+                <Form.Item label='采购数量' name='purchaseCount' rules={[{ required: true, message: '请输入采购数量' }]}><InputNumber min={1} style={{width: '100%'}} /></Form.Item>
+              </div>
+              <div id='other_demand'>
+                <div className={style.affix_title}><Divider type="vertical" className={style.divider_style} />其他要求</div>
+                <Form.Item label='附件' name='upload'>
+                  <div className={style.upload_data}>
+                    {files.length > 0 && files.map((v, index) => (
+                      <div key={index} className={style.upload_item}>
+                        <div className={style.upload_left}>
+                          <LinkOutlined />
+                          <span>{v.name}</span>
+                        </div>
+                        <div className={style.upload_right}>
+                          <DeleteOutlined />
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                  <Upload
+                    action="/api/file/file/upload"
+                    data={{ fileType: UPLOAD_TYPE }}
+                    showUploadList={false}
+                    accept='.doc,.docx,.pdf,.ppt,.pptx,.xls,.xlsx'
+                  >
+                    <Button loading={loading} icon={<UploadOutlined />}>上传文件</Button>
+                    <div style={{ marginTop: '8px' }}>一次上传一个文件，每个附件大小不能超过 20M</div>
+                  </Upload>
+                </Form.Item>
+              </div>
+            </Form>
+          </Content>
+        </Layout>
+      </Modal>
+      <ModalTable
+        width={810}
+        modalTitle='选择货品'
+        columns={columns}
+        rowSelection={rowSelection}
+        visible={visibleChannelGoods}
+        confirm={handleConfirm}
+        cancel={() => setvisibleChannelGoods(false)}
+        fetchTableData={params => fetchGoodsData(params)}
+        forceRender={true}
+        modalType='goodsModalSchema'
+        tableProps={{
+          rowKey: 'id',
+        }}
+        resetModal={{
+          destroyOnClose: true
+        }}
+      />
+    </>
+  )
+}
+
+export default ModalGoods;
\ No newline at end of file

src/pages/transaction/enquirySubmit/addDemandOrder/components/addGoods.tsx

-import React from 'react';
+import React, { useState, ReactNode } from 'react';
 import { Form, Radio, Button, Table } from 'antd';
 import { ColumnType } from 'antd/lib/table/interface';
+import ModalAnchor from './Modal/modalAnchor';
+import ModalGoods from './Modal/modalGoods';
+import { PlusOutlined } from '@ant-design/icons';
+
 
 const layout: any = {
   colon: false,
@@ -8,22 +12,105 @@ const layout: any = {
   wrapperCol: { span: 9 },
   labelAlign: "left"
 };
-const AddGoods: React.FC<{}> = () => {
+export interface faceSetData {
+  set?: any,
+  get?: Function
+}
+const AddGoods: React.FC<faceSetData> = (props) => {
+  const { set, get } = props
+  const [type, setType] = useState<number>(0);
+  const btnname: Array<string> = ['添加商品', '选择货品', '导入货品']
+  const [visible, setvisible] = useState<Array<boolean>>([false, false, false, false]);
   
+  /** 平台属性添加表头 */
+  const columns: ColumnType<Object>[] = [
+    {
+      title: '商品编号',
+      key: 'id',
+      dataIndex: 'id',
+    },
+    {
+      title: '商品名称',
+      key: 'name',
+      dataIndex: 'name',
+    },
+    {
+      title: '规格型号',
+      key: 'model',
+      dataIndex: 'model',
+    },
+    {
+      title: '品类',
+      key: 'category',
+      dataIndex: 'category',
+    },
+    {
+      title: '品牌',
+      key: 'brand',
+      dataIndex: 'brand',
+    },
+    {
+      title: '采购数量',
+      key: 'purchaseCount',
+      dataIndex: 'purchaseCount',
+    },
+    {
+      title: '操作',
+      key: '',
+      dataIndex: '',
+    }
+  ]
+  /** 切换添加方式 */
+  const changeRadio = (e: any) => {
+    const { value } = e.target;
+    setType(value)
+  }
+  /** 按钮的文字 */
+  const handleText = (num: any) => {
+    let text: ReactNode = null;
+    text = btnname[num - 1];
+    return text
+  }
+  /** 
+   * @name: 操作弹窗 
+   * @arg: 1.通过平台属性添加 2.选择货品添加 3.导入货品生成
+   * */
+  const handleModal = (arg: number) => {
+    visible[arg] = !visible[arg]
+    setvisible([...visible])
+  }
+  /** 商品添加确定 */
+  const handleSubmit = (data: any, record:any) => {
+    console.log(data, record);
+    handleModal(type);
+  }
   return (
     <Form
       {...layout}
     >
       <Form.Item label='添加方式' required>
-        <Radio.Group>
+        <Radio.Group onChange={changeRadio}>
           <Radio value={1}>通过平台属性添加</Radio>
           <Radio value={2}>选择货品添加</Radio>
           <Radio value={3}>导入货品生成</Radio>
         </Radio.Group>
       </Form.Item>
+      {type > 0 &&
         <Form.Item noStyle>
-        <Button type='dashed' block>添加商品</Button>
+          <Button onClick={() => handleModal(type)} type='dashed' block style={{ marginBottom: '24px' }}><PlusOutlined />{handleText(type)}</Button>
+          <Table columns={columns} />
         </Form.Item>
+      }
+      <ModalAnchor
+        visible={visible[type]}
+        onOk={handleSubmit}
+        onCancel={() => handleModal(type)}
+      />
+      <ModalGoods 
+        visible={visible[type]}
+        onOk={handleSubmit}
+        onCancel={() => handleModal(type)}
+      />
     </Form>
   )
 }

src/pages/transaction/enquirySubmit/addDemandOrder/components/basicInfo.tsx

@@ -11,9 +11,16 @@ const layout: any = {
   labelAlign: "left"
 };
 
+export interface faceSetData {
+  set?: any,
+  get?: Function,
+  currentRef?: any
+}
+
 const { Option } = Select;
-const BasicInfo: React.FC<{}> = () => {
+const BasicInfo: React.FC<faceSetData> = (props) => {
   const [form] = Form.useForm();
+  const { set, get, currentRef } = props
   const [province, setprovince] = useState<any>([]);// 省列表
   const [city, setcity] = useState<any>([]);// 市列表 
   const [requisitionFormAddress, setrequisitionFormAddress] = useState<any>([{
@@ -35,20 +42,19 @@ const BasicInfo: React.FC<{}> = () => {
   }
   // 选择下拉得内容
   const handProvince = (val: any, idx: number, num: number) => {
-    if (num === 1) {
     const result = [...requisitionFormAddress];
+    const cityCode: Array<any> = []
+    result.forEach((item: any) => {
+      if (item.cityCode) {
+        cityCode.push(item.cityCode)
+      }
+    })
+    setcode([...cityCode]);
+    if (num === 1) {
       province.forEach(item => {
         if (item.code === val) {
           PublicApi.getManageAreaByPcodeAll({ pcode: val }).then((res: any) => {
             if (res.code === 1000) {
-              res.data.forEach((items: any) => {
-                const fiterCode = code.filter(value => value === items.code);
-                if (fiterCode[0] === items.code) {
-                  items.disabled = true
-                } else {
-                  items.disabled = false
-                }
-              })
               result[idx].provinceCode = val;
               result[idx].province = item.name;
               city[idx] = { citydata: res.data }
@@ -57,31 +63,49 @@ const BasicInfo: React.FC<{}> = () => {
           })
         }
       })
-      setrequisitionFormAddress(result);
+      
     } else {
-      const result = [...requisitionFormAddress];
       city.forEach(item => {
         item.citydata.forEach(items => {
           if (items.code === val) {
+            const cityCode = code.find(it => items.code);
+            if (cityCode !== items.code) {
+              items.disabled = false
+            }
             result[idx].cityCode = val;
             result[idx].city = items.name;
           }
         })
       })
-      setcode([...code, val]);
+      setcity([...city])
+    }
     setrequisitionFormAddress(result);
   }
+  // 选择城市的时候下拉就调用方
+  const onDropdownVisibleChange = () => {
+    return new Promise(reslove => reslove(code)).then((res: any) => {
+      city.forEach((item: any) => {
+        item.citydata.filter(it => {
+          res.map(items => {
+            if (items === it.code) {
+              it.disabled = true
             }
+          })
+        })
+      })
+      setcity([...city])
+    })
 
+  }
   // 添加一条地址
-  const addFormAddress = (idx:number) => {
+  const addFormAddress = (idx: number) => {
     const address: any = {
       provinceCode: '',
       province: '',
       cityCode: '',
       city: ''
     }
-    if(requisitionFormAddress[idx].provinceCode && requisitionFormAddress[idx].cityCode) {
+    if (requisitionFormAddress[idx].provinceCode && requisitionFormAddress[idx].cityCode) {
       setrequisitionFormAddress([...requisitionFormAddress, address])
     } else {
       message.error('请完善适用城市信息')
@@ -90,15 +114,49 @@ const BasicInfo: React.FC<{}> = () => {
   }
   // 删除一条地址
   const removeFormAddress = (idx: any) => {
-
+    if (requisitionFormAddress.length > 1) {
+      const requisitionFormAddressFilter = requisitionFormAddress.filter((item: any, index: number) => index !== idx);
+      const cityFilter = city.filter((item: any, index: number) => index !== idx);
+      form.resetFields();
+      requisitionFormAddressFilter.forEach((item: any, index: number) => {
+        const cityCode = code.find(it => item.cityCode);
+        if (cityCode !== item.cityCode) {
+          item.disabled = false
+        }
+        form.setFieldsValue({
+          ['province_' + index]: item.provinceCode,
+          ['city_' + index]: item.cityCode
+        });
+      })
+      setcity(cityFilter);
+      setrequisitionFormAddress(requisitionFormAddressFilter);
+    }
   }
-
   useEffect(() => {
     manageProvince().then(data => {
       setprovince(data)
     })
   }, [])
 
+  useEffect(() => {
+    currentRef.current = {
+      get: () => new Promise((resolve: any) => {
+        form.validateFields().then(res => {
+          resolve({
+            state: true,
+            name: 'basicInfo',
+            data: {
+              details: res.details,
+              requisitionFormAddress,
+            }
+          })
+        }).catch(error => {
+          console.log(error)
+        })
+      })
+    }
+  }, [requisitionFormAddress])
+
   return (
     <Form
       {...layout}
@@ -106,7 +164,7 @@ const BasicInfo: React.FC<{}> = () => {
     >
       <Form.Item
         label='需求单摘要'
-        name=''
+        name='details'
         rules={[{ required: true, message: '请输入需求单摘要' }]}
       >
         <Input />
@@ -121,6 +179,7 @@ const BasicInfo: React.FC<{}> = () => {
               <Col span={12}>
                 <Form.Item name={`province_${idx}`}>
                   <Select
+                    onDropdownVisibleChange={onDropdownVisibleChange}
                     onChange={(value) => {
                       handProvince(value, idx, 1)
                     }}
@@ -136,9 +195,9 @@ const BasicInfo: React.FC<{}> = () => {
               <Col span={12}>
                 <Form.Item
                   name={`city_${idx}`}
-                  rules={[{ required: item.provinceCode ? true : false, message: '选择三级分类' }]}
                 >
                   <Select
+                    onDropdownVisibleChange={onDropdownVisibleChange}
                     onChange={(value) => {
                       handProvince(value, idx, 2)
                     }}

src/pages/transaction/enquirySubmit/addDemandOrder/components/demandDbutted.tsx

+import React, { useState } from 'react';
+import { Form, Radio, Tooltip, Row, Col, Checkbox, Avatar, Space, Button, Table } from 'antd';
+import { QuestionCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import style from './index.less';
+import { StandardTable } from 'god';
+import { ColumnType } from 'antd/lib/table/interface';
+
+const layout: any = {
+  colon: false,
+  labelCol: { style: { width: '174px' } },
+  wrapperCol: { span: 9 },
+  labelAlign: "left"
+};
+export interface faceSetData {
+  set?: any,
+  get?: Function
+}
+const DemandDbutted: React.FC<faceSetData> = (props) => {
+  const { set, get } = props
+  const [shopId, setShopId] = useState<Number>(0)
+  // 系统匹配表头
+  const columns: ColumnType<any>[] = [
+    {
+      title: '序号',
+      key: 'id',
+      dataIndex: 'id',
+    },
+    {
+      title: '会员名称',
+      key: 'memberName',
+      dataIndex: 'memberName',
+    },
+    {
+      title: '会员类型',
+      key: 'memberTypeName',
+      dataIndex: 'memberTypeName',
+    },
+    {
+      title: '会员角色',
+      key: 'roleName',
+      dataIndex: 'roleName',
+    },
+    {
+      title: '会员等级',
+      key: 'levelTag',
+      dataIndex: 'levelTag',
+    },
+    {
+      title: '是否归属会员',
+      key: 'membershipOrNot',
+      dataIndex: 'membershipOrNot',
+    },
+    {
+      title: '状态',
+      key: 'state',
+      dataIndex: 'state',
+    },
+    {
+      title: '操作',
+      key: 'options',
+      dataIndex: 'options',
+    },
+  ]
+  // 指定会员表头
+  const memberColumns: ColumnType<any>[] = [
+    {
+      title: '序号',
+      key: 'memberId',
+      dataIndex: 'memberId',
+    },
+    {
+      title: '会员名称',
+      key: 'name',
+      dataIndex: 'name',
+    },
+    {
+      title: '会员类型',
+      key: 'memberTypeName',
+      dataIndex: 'memberTypeName',
+    },
+    {
+      title: '会员角色',
+      key: 'roleName',
+      dataIndex: 'roleName',
+    },
+    {
+      title: '会员等级',
+      key: 'levelTag',
+      dataIndex: 'levelTag',
+    }
+  ]
+  // 选择系统匹配的列表数据
+  const [selectedRowKeys, setSelectedRowKeys] = useState<Array<any>>([]);
+  const rowSelection = {
+    selectedRowKeys,
+    onChange: setSelectedRowKeys
+  };
+  // 切换添加方式
+  const changeRadio = (e: any) => {
+    const { value } = e.target;
+    setShopId(value)
+  }
+
+  // 请求系统匹配列表数据
+  const fetchSystemMateData = (params:any) => {
+    
+  }
+  return (
+    <Form
+      {...layout}
+    >
+      <Form.Item label='添加方式' required>
+        <Radio.Group onChange={changeRadio}>
+          <Radio value={1}><Tooltip placement="topLeft" title={<>需求发布至企业商城求购频道</>}>发布类型<QuestionCircleOutlined style={{ marginLeft: '5px' }} /></Tooltip></Radio>
+          <Radio value={2}><Tooltip placement="topLeft" title={<>系统通过需求单品类、商品属性、适用地市与平台会员发布的商品品类、商品属性、归属地区进行匹配，推荐满足条件的平台会员</>}>系统匹配<QuestionCircleOutlined style={{ marginLeft: '5px' }} /></Tooltip></Radio>
+          <Radio value={3}><Tooltip placement="topLeft" title={<>选择与当前会员有归属关系的会员且角色类型为服务提供的会员（供应商），需求只发送给指定会员</>}>指定会员<QuestionCircleOutlined style={{ marginLeft: '5px' }} /></Tooltip></Radio>
+        </Radio.Group>
+      </Form.Item>
+      {shopId === 1 &&
+        // 发布至平台
+        <Form.Item label='发布至平台' wrapperCol={{ span: 24 }}>
+          <Checkbox.Group className={style.checkbox_wrap_style}>
+            <Row>
+              <Col span={6}>
+                <Checkbox value="A">
+                  <Space>
+                    <Avatar>LOGO</Avatar>
+                    <span>名称</span>
+                  </Space>
+                </Checkbox>
+              </Col>
+            </Row>
+          </Checkbox.Group>
+        </Form.Item>
+      }
+      {
+        shopId === 2 &&
+        // 系统匹配
+        <Form.Item noStyle>
+          <StandardTable
+            rowSelection={rowSelection}
+            columns={columns}
+            // fetchTableData={(params) => fetchSystemMateData(params)}
+          />
+        </Form.Item>
+      }
+      {
+        shopId === 3 &&
+        // 指定会员
+        <Form.Item noStyle>
+          <Button type='dashed' block style={{ marginBottom: '24px' }}><PlusOutlined />选择会员</Button>
+          <Table
+            columns={memberColumns}
+          />
+        </Form.Item>
+      }
+
+    </Form>
+  )
+}
+
+export default DemandDbutted;
\ No newline at end of file

src/pages/transaction/enquirySubmit/addDemandOrder/components/flowRecord.tsx

@@ -4,9 +4,12 @@ import { Radio } from 'antd';
 import PolymericTable from '@/components/PolymericTable';
 import { EditableColumns } from '@/components/PolymericTable/interface';
 import moment from 'moment';
-
-const FlowRecord: React.FC<{}> = () => {
-
+export interface faceSetData {
+  set?: any,
+  get?: Function
+}
+const FlowRecord: React.FC<faceSetData> = (props) => {
+  const { set, get } = props
   const [radio, setRadio] = useState<string>('outer'); //切换单据
   const format = (text) => {
     return <>{moment(text).format("YYYY-MM-DD HH:mm:ss")}</>

src/pages/transaction/enquirySubmit/addDemandOrder/components/index.less

@@ -18,3 +18,125 @@
     }
   }
 }
+
+.modal_wrap_className {
+  .site_layout_background {
+    background-color: #fff;
+    border-right: 1px solid #EEF0F3;
+  }
+  .site_content_style {
+    background-color: #fff;
+    padding: 24px;
+    height: 600px;
+    overflow-y: scroll;
+    .affix_title {
+      font-size: 14px;
+      margin-bottom: 24px;
+      .divider_style {
+        width: 2px;
+        height: 16px;
+        margin: 0px 5px 0px 0px ;
+        background-color: #00B37A;
+      }
+    }
+    .upload_item {
+      padding: 5px 8px;
+      margin-bottom: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background-color: #FAFBFC;
+  
+      .upload_left {
+        display: flex;
+        align-items: center;
+        color: #303133;
+  
+        :global {
+          .anticon-file-word {
+            color: #4279df; 
+            font-size: 20px;
+            margin-right: 8px;
+          }
+        }
+      }
+  
+      .upload_right {
+        color: #00B37A;
+        cursor: pointer;
+  
+        :global {
+          .anticon-delete {
+            margin-left: 19px;
+            color: #C0C4CC;
+          }
+        }
+      }
+    }
+  }
+  
+  :global {
+    .ant-anchor-wrapper {
+      margin-left: 0 !important;
+      padding-left: 0 !important;
+    }
+    .ant-menu-item {
+      margin-top: 0 !important;
+      margin-bottom: 0 !important;
+      &:after {
+        left: 0;
+        border-right: none;
+        border-left: 2px solid #00B37A;
+        height: 80%;
+        margin: auto;
+      }
+      .ant-anchor-link {
+        padding: 0px !important;
+        line-height: 40px !important;
+      }
+    }
+    .ant-menu-item-selected {
+      color: #303133;
+      font-weight: 600;
+      background-color: transparent !important;
+    }
+  }
+}
+
+.checkbox_wrap_style {
+  width: 100%;
+  :global {
+    .ant-checkbox-wrapper {
+      width: 100%;
+      border: 1px solid #ccc;
+      padding: 8px 18px;
+      .ant-checkbox {
+        display: none;
+      }
+      > span {
+        display: flex;
+        align-items: center;
+        padding: 0px 0px;
+        .checkbox_avatar {
+          width: 32px;
+          height: 32px;
+          margin-right: 8px;
+        }
+      }
+    }
+    .ant-checkbox-wrapper-checked {
+      border-color: #00b37a!important;
+      color: #00b37a;
+      position: relative;
+      &:after {
+        content: "";
+        position: absolute;
+        width: 12px;
+        height: 11px;
+        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAALCAYAAABLcGxfAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAADKADAAQAAAABAAAACwAAAAChLCZNAAAA6klEQVQoFWNgIAVsruliJkr9/1XMDCZqcxkY/mczEtSwv4GD4euvlQz/GfxAavFr2N3Bz/Dz8yaG///tYAbj1rC1QYLh/+8dQMX6MMW4bdjSoMTA8Gs30BlAGhUwoXKBvM21QBN/H0VWbMovzXDSOgOsFFXD1mo7Bsa/B5U5BSVgBoEUrzaOZMi5shkshAjWLTWgUNgINJlnh1k8AysTEzhEQIpDzy5nOP3xKVgDxNNbqxIY/jHMAYqADRBi5WTYY5HEIMbGzRB4ZilcMUgHI8PWqlKg4i6wdiRCgIWDQYSNi+HOt3dIogwMANgLQif9hMeFAAAAAElFTkSuQmCC);
+        right: 0;
+        bottom: 0;
+      }
+    }
+  } 
+}
\ No newline at end of file

src/pages/transaction/enquirySubmit/addDemandOrder/components/tradingConditions.tsx

@@ -9,22 +9,57 @@ const layout: any = {
   wrapperCol: { span: 24 },
   labelAlign: "left"
 };
-
-const TradingConditions: React.FC<{}> = () => {
+export interface faceSetData {
+  set?: any,
+  get?: Function,
+  currentRef?: any
+}
+const TradingConditions: React.FC<faceSetData> = (props) => {
+  const { set, get, currentRef } = props
   const [TradingConditionsForm] = Form.useForm();
   const [address, setAddress] = useState([]);
+  const [selectAddress, setselectAddress] = useState<any>({});
   
   useEffect(() => {
     // 获取交付地址
     PublicApi.getLogisticsSelectListReceiverAddress().then(res => {
       setAddress(res.data)
     })
+    currentRef.current = {
+      get: () => new Promise((resolve: any) => {
+        TradingConditionsForm.validateFields().then(res => {
+          resolve({
+            state: true,
+            name: 'tradingConditions',
+            data: {
+              deliveryTime: moment(res.deliveryTime).format('x'),
+              quotationAsTime: moment(res.quotationAsTime).format('x'),
+              addresId: res.addresId,
+              addres: selectAddress.fullAddress,
+              logistics: res.logistics,
+              offer: res.offer,
+              otherRequire: res.otherRequire,
+              packRequire: res.packRequire,
+              paymentType: res.paymentType,
+              taxes: res.taxes,
+
+            }
+          })
+        }).catch(error => {
+          console.log(error)
+        })
+      })
+    }
   }, [])
 
   const disabledDate = (current) => {
     return current && current < moment().endOf('day');
   }
   
+  const onSelect = (val:any , option:any) => {
+    
+    setselectAddress(option)
+  }
 
   return (
     <Form
@@ -40,8 +75,8 @@ const TradingConditions: React.FC<{}> = () => {
               format="YYYY-MM-DD HH:mm:ss" 
             />
           </Form.Item>
-          <Form.Item label='交付地址' name='fullAddressId' rules={[{ required: true, message: '请选择交付地址' }]}>
-            <Select>
+          <Form.Item label='交付地址' name='addresId' rules={[{ required: true, message: '请选择交付地址' }]}>
+            <Select onSelect={onSelect}>
               {address.map(v => (
                 <Select.Option key={v.id} value={v.id}>{v.fullAddress}</Select.Option>
               ))}

src/pages/transaction/enquirySubmit/addDemandOrder/data.ts

+export const setUpdata = {
+  requisitionFormAddress: [], /** 需求单地址列表 ,RequisitionFormAddresRequest */
+  requisitionFormProducts: [],/** 商品列表 ,RequisitionFormProductRequest */
+  demandDockings: [],/** 需求对接-系统匹配列表 ,DemandDockingRequest */
+  shopIds: [],/** 需求对接-发布至平台 ,Long */
+  memberIds: [],/** 需求对接-指定会员ID列表 ,Long */
+  details: '',/** 需求摘要 */
+  deliveryTime: '',/** 交付日期 */
+  quotationAsTime: '',/** 报价截止时间 */
+  voucherTime: '',/** 单据时间 */
+  defaultAddres: null,/** 适用地市：1.默认全部省市区 0.选中项 */
+  addres: '',/** 交付地址 */
+  addresId: null,/** 交付地址Id */
+  offer: '',/** 报价要求 */
+  paymentType: '',/** 付款方式 */
+  taxes: '',/** 税费要求 */
+  logistics: '',/** 物流要求 */
+  packRequire: '',/** 包装要求 */
+  otherRequire: '',/** 其他要求 */
+  type: null,/** 需求对接类型：1.发布至平台 2.系统匹配 3.指定会员 */
+}
\ No newline at end of file

src/pages/transaction/enquirySubmit/addDemandOrder/index.tsx

-import React from 'react';
+import React, { useState, useRef } from 'react';
 import { history } from 'umi';
 import ReutrnEle from '@/components/ReturnEle'
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
@@ -7,33 +7,64 @@ import BasicInfo from './components/basicInfo';
 import TradingConditions from './components/tradingConditions'
 import FlowRecord from './components/flowRecord';
 import AddGoods from './components/addGoods';
+import DemandDbutted from './components/demandDbutted';
+import { setUpdata } from './data'; /**set数据给子组件 */
 const { TabPane } = Tabs;
 
 const AddDemandOrder: React.FC<{}> = () => {
+  const [data, setData] = useState<any>(setUpdata);
+  const basic = useRef<any>();
+  const trading = useRef<any>();
+  /**get子组件的数据 */
+
+  /**提交数据 */
+  const onSubmit = async () => {
+    const basicRef = await basic.current.get();
+    const tradingRef = await trading.current.get();
+    if(basicRef.state && tradingRef.state) {
+      data.details = basicRef.data.details;
+      data.requisitionFormAddress = basicRef.data.requisitionFormAddress;
+      console.log(tradingRef)
+    } else  {
+
+    }
+  }
   return (
     <PageHeaderWrapper
       onBack={() => history.goBack()}
       backIcon={<ReutrnEle description="返回" />}
       extra={
-        <Button type="primary"> 保存</Button>
+        <Button type="primary" onClick={onSubmit}> 保存</Button>
       }
     >
       <Card>
         <Tabs type='card'>
           <TabPane forceRender tab='基本信息' key='1'>
-            <BasicInfo />
+            <BasicInfo
+              set={data}
+              currentRef={basic}
+            />
           </TabPane>
           <TabPane forceRender tab='添加商品' key='2'>
-            <AddGoods />
+            <AddGoods 
+              set={data}
+            />
           </TabPane>
           <TabPane forceRender tab='交易条件' key='3'>
-            <TradingConditions />
+            <TradingConditions 
+              set={data}
+              currentRef={trading}
+            />
           </TabPane>
           <TabPane forceRender tab='需求对接' key='4'>
-
+            <DemandDbutted 
+              set={data}
+            />
           </TabPane>
           <TabPane forceRender tab='流转记录' key='5'>
-            <FlowRecord />
+            <FlowRecord 
+              set={data}
+            />
           </TabPane>
         </Tabs>
       </Card>

src/pages/transaction/goodsOffer/addEnquiryOrder/components/attached.tsx

@@ -30,7 +30,7 @@ const Attached: React.FC<parmas> = (props) => {
   }
   // 上传回调
   const handleChange = ({ file }) => {
-    const arr: any = [];
+    const arr: any = files;
     setloading(true);
     if (file.response) {
       if (file.response.code === 1000) {
@@ -41,7 +41,7 @@ const Attached: React.FC<parmas> = (props) => {
         setloading(false);
       }
     }
-    setFiles([...files, ...arr])
+    setFiles([...arr])
     handleGetEnclosureUrls(arr);
   }
   // 删除附件

src/pages/transaction/goodsOffer/addEnquiryOrder/components/basicInfo.tsx

@@ -12,7 +12,7 @@ import moment from 'moment';
 
 const layout: any = {
   colon: false,
-  labelCol: { style: { width: '174px' } },
+  labelCol: { style: { width: '100px' } },
   wrapperCol: { span: 9 },
   labelAlign: "left"
 };

src/pages/transaction/inquiryQuote/addInquiryOrder/components/attached.tsx

@@ -19,6 +19,7 @@ export interface parmas {
 const Attached: React.FC<parmas> = (props) => {
   const { handleGetEnclosureUrls, editData } = props;
   const [files, setFiles] = useState<Array<any>>([]);
+  const [loading, setloading] = useState(false);
   /**判断文件类型和大小 */
   const beforeDocUpload = (file: UploadFile) => {
     const isLt20M = file.size / 1024 / 1024 < 20;
@@ -30,12 +31,14 @@ const Attached: React.FC<parmas> = (props) => {
   // 上传回调
   const handleChange = ({ file }) => {
     const arr: any = files;
+    setloading(true);
     if (file.response) {
       if (file.response.code === 1000) {
         arr.push({
           name: file.name,
           url: file.response.data
         })
+        setloading(false);
       }
     }
     setFiles([...arr])
@@ -82,7 +85,7 @@ const Attached: React.FC<parmas> = (props) => {
           beforeUpload={beforeDocUpload}
           onChange={handleChange}
         >
-          <Button icon={<UploadOutlined />}>上传文件</Button>
+          <Button loading={loading} icon={<UploadOutlined />}>上传文件</Button>
           <div style={{ marginTop: '8px' }}>一次上传一个文件，每个附件大小不能超过 20M</div>
         </Upload>
       </Form.Item>