新增需求发布表单数据获取

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 { Modal, Anchor, Layout, Menu, Form, Divider, Input, Button, Upload, Select, AutoComplete, Cascader, Spin, InputNumber } from 'antd';
 import style from '../index.less';
 import { LinkOutlined, DeleteOutlined, UploadOutlined } from '@ant-design/icons';
 import { PublicApi } from '@/services/api';
@@ -16,16 +16,19 @@ const { Link } = Anchor;
 interface anchorParams {
   visible?: boolean,
   onOk?: Function,
-  onCancel?: Function
+  onCancel?: Function,
+  fetchdata?: any,
+  isEdit?: boolean
 }
 const { Option } = Select;
 
 const ModalAnchor: React.FC<anchorParams> = (props) => {
-  const { visible, onOk, onCancel } = props;
+  const { visible, onOk, onCancel, fetchdata, isEdit } = props;
   const [form] = Form.useForm();
   const [loading, setloading] = useState(false);
   const [files, setFiles] = useState([]);
   const [categoryById, setCategoryById] = useState<any>({});
+  const [selected, setselected] = useState<string>('')
   const [category, setcategory] = useState<Array<any>>([]);
   /**查询品类树 */
   const searchCategoryTree = (id: any) => {
@@ -41,37 +44,89 @@ const ModalAnchor: React.FC<anchorParams> = (props) => {
   }
 
   /**查询品类信息--包括品类、属性、属性值 */
-  const getCategoryById = (val:any) => {
+  const getCategoryById = (val:any, selectedOptions?:any) => {
     const id = val[val.length -1];
+    if(!isEdit && selectedOptions.length > 0) {
+      const name = selectedOptions[selectedOptions.length -1];
+      setselected(name.title)
+    } 
+    
     PublicApi.getProductPlatformGetCategoryById({id}).then(res => {
       if(res.code === 1000) {
         setCategoryById(res.data)
+        
       }
-    })
+    }) 
   }
   useEffect(() => {
+    form.resetFields();
     searchCategoryTree('0')
+    if(Object.keys(fetchdata).length > 0 && isEdit) {
+      getCategoryById(fetchdata.ids)
+      const productAttributeJson = JSON.parse(fetchdata.productAttributeJson);
+      let obj:any = {}
+      let newObj: any = {}
+      productAttributeJson.forEach((item:any) => {
+        obj = {...obj, ...item}
+        for(let key in obj) {
+           newObj = {...newObj, ...{
+            [`${key}__`]: obj[key].join(',')
+          }}
+        }
+      })
+      form.setFieldsValue({
+        model: fetchdata.model,
+        brand: fetchdata.brand,
+        unit: fetchdata.unit,
+        purchaseCount: fetchdata.purchaseCount,
+        name: fetchdata.name,
+        category: fetchdata.ids,
+        goodsNo: fetchdata.goodsNo,
+        specialExplain: fetchdata.specialExplain,
+        ...newObj
+      })
+    }
   }, [visible])
   
   const onSubmit = (value:any) => {
     form.validateFields().then(res => {
-      console.log(res, '提交')
+      const productAttributeJson : Array<any> = [];
+      for(let key in res) {
+        if(key.split('__').length > 1) {
+          const name = key.replace(/__/g, '')
+          productAttributeJson.push({
+            [name]: [res[key]]
+          })
+        }
+      }
+
+      const data = {
+        model: res.model,
+        brand: res.brand,
+        productAttributeJson: JSON.stringify(productAttributeJson),
+        unit: res.unit,
+        purchaseCount: res.purchaseCount,
+        name: res.name,
+        category: selected,
+        goodsNo: res.goodsNo,
+        ids: res.category,
+        urls: files,
+        specialExplain: res.specialExplain,
+      }
+      onOk(data)
+      form.resetFields();
+      setCategoryById([])
     }).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'
+      maskClosable={false}
+      destroyOnClose
       wrapClassName={style.modal_wrap_className}
       bodyStyle={{ padding: '0px' }}
       visible={visible}
@@ -129,14 +184,11 @@ const ModalAnchor: React.FC<anchorParams> = (props) => {
                   categoryById.attributeList.map((item:any, index:number) => (
                     <Form.Item 
                       label={item.groupName}
-                      name={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)}
-                      >
+                      <AutoComplete>
                         {
                           item.attributeValueList.map((items:any) => (
                             <AutoComplete.Option value={items.value} key={items.id}>{items.value}</AutoComplete.Option>
@@ -150,7 +202,7 @@ const ModalAnchor: React.FC<anchorParams> = (props) => {
             }
             <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='specialExplain'><Input.TextArea rows={4} /></Form.Item>
               <Form.Item label='附件' name='upload'>
                 <div className={style.upload_data}>
                   {files.length > 0 && files.map((v, index) => (
@@ -179,7 +231,7 @@ const ModalAnchor: React.FC<anchorParams> = (props) => {
             <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>
+              <Form.Item label='采购数量' name='purchaseCount' rules={[{ required: true, message: '请输入采购数量' }]}><InputNumber min={1} style={{width: '100%'}} /></Form.Item>
             </div>
           </Form>
         </Content>

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 { 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';
@@ -19,12 +19,14 @@ const { Link } = Anchor;
 interface goodsParams {
   visible?: boolean,
   onOk?: Function,
-  onCancel?: Function
+  onCancel?: Function,
+  fetchdata?: any,
+  isEdit?: boolean
 }
 
 const ModalGoods: React.FC<goodsParams> = (props) => {
   const [form] = Form.useForm();
-  const { visible, onOk, onCancel } = props;
+  const { visible, onOk, onCancel, fetchdata, isEdit } = props;
   const [loading, setloading] = useState(false);
   const [files, setFiles] = useState([]);
   const [category, setcategory] = useState<Array<any>>([]);
@@ -44,11 +46,42 @@ const ModalGoods: React.FC<goodsParams> = (props) => {
     })
   }
   useEffect(() => {
-    searchCategoryTree('0')
+    form.resetFields();
+    RowCtl.setSelectRow([])
+    RowCtl.setSelectedRowKeys([])
+    searchCategoryTree('0');
+    if (Object.keys(fetchdata).length > 0 && isEdit) {
+      const params: any = {
+        current: '1',
+        pageSize: '10',
+        code: fetchdata.goodsNo
+      }
+      
+      PublicApi.getProductGoodsGetGoodsList({ ...params }).then(res => {
+        const { data } = res
+        RowCtl.setSelectRow(data.data)
+        RowCtl.setSelectedRowKeys([data.data[0].id])
+      })
+      form.setFieldsValue({
+        model: fetchdata.model,
+        brand: fetchdata.brand,
+        unit: fetchdata.unit,
+        purchaseCount: fetchdata.purchaseCount,
+        name: fetchdata.name,
+        category: fetchdata.category,
+        goodsNo: fetchdata.goodsNo,
+      })
+    }
   }, [visible])
   /**提交表单 */
   const onSubmit = (value: any) => {
     form.validateFields().then(res => {
+      console.log(rowSelection, RowCtl, 10086)
+      const data = {
+        ...res,
+        goodsId: goods.id,
+        goodsName: goods.name
+      }
       onOk(res, goods)
     }).catch(error => {
       console.log(error)
@@ -105,7 +138,7 @@ const ModalGoods: React.FC<goodsParams> = (props) => {
     setvisibleChannelGoods(false)
     const data = RowCtl.selectRow[0]
     const fullId = data.customerCategory.fullId
-    const ids = fullId.replace(/\b(0+)/gi,'').split('.');
+    const ids = fullId.replace(/\b(0+)/gi, '').split('.');
     setGoods(data)
     form.setFieldsValue({
       goodsNo: data.code,
@@ -167,7 +200,7 @@ const ModalGoods: React.FC<goodsParams> = (props) => {
               <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>
+                <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>

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

-import React, { useState, ReactNode } from 'react';
+import React, { useState, ReactNode, useEffect } from 'react';
 import { Form, Radio, Button, Table } from 'antd';
 import { ColumnType } from 'antd/lib/table/interface';
 import ModalAnchor from './Modal/modalAnchor';
@@ -14,20 +14,29 @@ const layout: any = {
 };
 export interface faceSetData {
   set?: any,
-  get?: Function
+  get?: Function,
+  currentRef: any
 }
 const AddGoods: React.FC<faceSetData> = (props) => {
-  const { set, get } = props
+  const { set, get, currentRef } = props
+  const [form] = Form.useForm();
   const [type, setType] = useState<number>(0);
   const btnname: Array<string> = ['添加商品', '选择货品', '导入货品']
   const [visible, setvisible] = useState<Array<boolean>>([false, false, false, false]);
+  const [tabledata, settabledata] = useState<any>([])
+   /**存放编辑的商品数据 */
+  const [editdata, seteditdata] = useState<any>({});
+  /**是否编辑 */
+  const [isEdit, setisEdit] = useState<boolean>(false);
+  /**编辑的下标 */
+  const [idx, setidx] = useState<number>(-1);
   
   /** 平台属性添加表头 */
   const columns: ColumnType<Object>[] = [
     {
       title: '商品编号',
-      key: 'id',
-      dataIndex: 'id',
+      key: 'goodsNo',
+      dataIndex: 'goodsNo',
     },
     {
       title: '商品名称',
@@ -56,14 +65,20 @@ const AddGoods: React.FC<faceSetData> = (props) => {
     },
     {
       title: '操作',
-      key: '',
-      dataIndex: '',
+      key: 'options',
+      dataIndex: 'options',
+      render: (text:any, record:any, index:number) => 
+      <>
+        <Button type='link' onClick={() => handleEdit(record, index)}>编辑</Button>
+        <Button type='link'>删除</Button>
+      </>
     }
   ]
   /** 切换添加方式 */
   const changeRadio = (e: any) => {
     const { value } = e.target;
-    setType(value)
+    setType(value);
+    settabledata([]);
   }
   /** 按钮的文字 */
   const handleText = (num: any) => {
@@ -80,15 +95,51 @@ const AddGoods: React.FC<faceSetData> = (props) => {
     setvisible([...visible])
   }
   /** 商品添加确定 */
-  const handleSubmit = (data: any, record:any) => {
-    console.log(data, record);
+  const handleSubmit = (data: any, record?:any) => {
+    if(idx === -1) {
+      settabledata([...tabledata, data])
+    } else {
+      const newdata = [...tabledata]
+      newdata[idx] = data
+      settabledata([...newdata]);
+      setidx(-1);
+    }
+    get([...tabledata, data])
     handleModal(type);
   }
+  /** 编辑商品 */
+  const handleEdit = (record:any, index:number) => {
+    setidx(index);
+    seteditdata(record)
+    setisEdit(true)
+    handleModal(type)
+  }
+
+  useEffect(() => {
+    currentRef.current = {
+      get: () => new Promise((resolve: any) => {
+        form.validateFields().then(res => {
+          resolve({
+            state: true,
+            name: 'addGoods',
+            data: {
+              type,
+              requisitionFormProducts: tabledata,
+            }
+          })
+        }).catch(error => {
+          console.log(error)
+        })
+      })
+    }
+  }, [tabledata])
+
   return (
     <Form
       {...layout}
+      form={form}
     >
-      <Form.Item label='添加方式' required>
+      <Form.Item label='添加方式' rules={[{ required: true, message: '请选择添加方式' }]}>
         <Radio.Group onChange={changeRadio}>
           <Radio value={1}>通过平台属性添加</Radio>
           <Radio value={2}>选择货品添加</Radio>
@@ -97,17 +148,21 @@ const AddGoods: React.FC<faceSetData> = (props) => {
       </Form.Item>
       {type > 0 &&
         <Form.Item noStyle>
-          <Button onClick={() => handleModal(type)} type='dashed' block style={{ marginBottom: '24px' }}><PlusOutlined />{handleText(type)}</Button>
-          <Table columns={columns} />
+          <Button onClick={() => {handleModal(type);setisEdit(false)}} type='dashed' block style={{ marginBottom: '24px' }}><PlusOutlined />{handleText(type)}</Button>
+          <Table columns={columns} dataSource={tabledata} rowKey={(record, index) => index} />
         </Form.Item>
       }
       <ModalAnchor
-        visible={visible[type]}
+        fetchdata={editdata}
+        isEdit={isEdit}
+        visible={visible[1]}
         onOk={handleSubmit}
         onCancel={() => handleModal(type)}
       />
-      <ModalGoods 
-        visible={visible[type]}
+      <ModalGoods
+        fetchdata={editdata}
+        isEdit={isEdit}
+        visible={visible[2]}
         onOk={handleSubmit}
         onCancel={() => handleModal(type)}
       />

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

@@ -19,15 +19,19 @@ const TradingConditions: React.FC<faceSetData> = (props) => {
   const [TradingConditionsForm] = Form.useForm();
   const [address, setAddress] = useState([]);
   const [selectAddress, setselectAddress] = useState<any>({});
-  
+
   useEffect(() => {
     // 获取交付地址
     PublicApi.getLogisticsSelectListReceiverAddress().then(res => {
       setAddress(res.data)
     })
+  }, [])
+
+  useEffect(() => {
     currentRef.current = {
       get: () => new Promise((resolve: any) => {
         TradingConditionsForm.validateFields().then(res => {
+          console.log(res, selectAddress)
           resolve({
             state: true,
             name: 'tradingConditions',
@@ -35,14 +39,13 @@ const TradingConditions: React.FC<faceSetData> = (props) => {
               deliveryTime: moment(res.deliveryTime).format('x'),
               quotationAsTime: moment(res.quotationAsTime).format('x'),
               addresId: res.addresId,
-              addres: selectAddress.fullAddress,
+              addres: selectAddress.children,
               logistics: res.logistics,
               offer: res.offer,
               otherRequire: res.otherRequire,
               packRequire: res.packRequire,
               paymentType: res.paymentType,
               taxes: res.taxes,
-
             }
           })
         }).catch(error => {
@@ -50,14 +53,14 @@ const TradingConditions: React.FC<faceSetData> = (props) => {
         })
       })
     }
-  }, [])
+  }, [selectAddress])
 
   const disabledDate = (current) => {
     return current && current < moment().endOf('day');
   }
-  
-  const onSelect = (val:any , option:any) => {
-    
+
+  const onSelect = (val: any, option: any) => {
+    console.log(option)
     setselectAddress(option)
   }
 
@@ -70,9 +73,9 @@ const TradingConditions: React.FC<faceSetData> = (props) => {
         <Col span={12}>
           <Form.Item label='交付日期' name='deliveryTime' rules={[{ required: true, message: '请选择交付日期' }]}>
             <DatePicker
-              style={{width: '100%'}}
+              style={{ width: '100%' }}
               disabledDate={disabledDate}
-              format="YYYY-MM-DD HH:mm:ss" 
+              format="YYYY-MM-DD HH:mm:ss"
             />
           </Form.Item>
           <Form.Item label='交付地址' name='addresId' rules={[{ required: true, message: '请选择交付地址' }]}>
@@ -82,9 +85,12 @@ const TradingConditions: React.FC<faceSetData> = (props) => {
               ))}
             </Select>
           </Form.Item>
+          <Form.Item hidden label='交付地址' name='addres'>
+            <Input value={selectAddress.children} />
+          </Form.Item>
           <Form.Item label='报价截止时间' name='quotationAsTime' rules={[{ required: true, message: '请选择报价截止时间' }]}>
             <DatePicker
-              style={{width: '100%'}}
+              style={{ width: '100%' }}
               format="YYYY-MM-DD HH:mm:ss"
               disabledDate={disabledDate}
             />

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

@@ -12,23 +12,32 @@ import { setUpdata } from './data'; /**set数据给子组件 */
 const { TabPane } = Tabs;
 
 const AddDemandOrder: React.FC<{}> = () => {
-  const [data, setData] = useState<any>(setUpdata);
+  const [fetchdata, setfetchdata] = useState<any>(setUpdata);
   const basic = useRef<any>();
+  const goods = useRef<any>();
   const trading = useRef<any>();
   /**get子组件的数据 */
 
   /**提交数据 */
   const onSubmit = async () => {
     const basicRef = await basic.current.get();
+    const goodsRef = await goods.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  {
+    if (basicRef.state && tradingRef.state && goodsRef.state) {
+      const data = {
+        ...basicRef.data,
+        ...tradingRef.data,
+        ...goodsRef.data
+      }
+      console.log(data)
+    } else {
 
     }
   }
+  /**获取商品的属性 */
+  const getAttribute = (data:any) => {
+    console.log(data, 10086)
+  }
   return (
     <PageHeaderWrapper
       onBack={() => history.goBack()}
@@ -41,29 +50,31 @@ const AddDemandOrder: React.FC<{}> = () => {
         <Tabs type='card'>
           <TabPane forceRender tab='基本信息' key='1'>
             <BasicInfo
-              set={data}
+              set={fetchdata}
               currentRef={basic}
             />
           </TabPane>
           <TabPane forceRender tab='添加商品' key='2'>
-            <AddGoods 
-              set={data}
+            <AddGoods
+              set={fetchdata}
+              get={getAttribute}
+              currentRef={goods}
             />
           </TabPane>
           <TabPane forceRender tab='交易条件' key='3'>
-            <TradingConditions 
-              set={data}
+            <TradingConditions
+              set={fetchdata}
               currentRef={trading}
             />
           </TabPane>
           <TabPane forceRender tab='需求对接' key='4'>
-            <DemandDbutted 
-              set={data}
+            <DemandDbutted
+              set={fetchdata}
             />
           </TabPane>
           <TabPane forceRender tab='流转记录' key='5'>
-            <FlowRecord 
-              set={data}
+            <FlowRecord
+              set={fetchdata}
             />
           </TabPane>
         </Tabs>