修改商品询价新增

src/pages/transaction/goodsOffer/addEnquiryOrder/add.tsx

@@ -12,10 +12,14 @@ import { PublicApi } from '@/services/api'
 
 const { TabPane } = Tabs;
 const AddQuotes: React.FC<{}> = () => {
-  const ref = useRef<any>({})
   const [memberList, setmemberList] = useState([]);
+  const basicInfoRef = useRef<any>({});
+  const tradingConditionsRef = useRef<any>({});
   /************* 页面的一些操作start *************/
   const onSumbit = async (params: any) => {
+    const basicInfo = await basicInfoRef.current.validateFields();
+    const tradingConditions = await tradingConditionsRef.current.validateFields();
+    console.log(tradingConditions, basicInfo)
   }
   const getMemberList = (list: any) => {
     setmemberList(list);
@@ -27,13 +31,14 @@ const AddQuotes: React.FC<{}> = () => {
       backIcon={<ReutrnEle description="返回" />}
       title='新建报价单'
       extra={
-        <Button type="primary"> 保存</Button>
+        <Button type="primary" onClick={onSumbit}> 保存</Button>
       }
     >
       <Card>
-        <Tabs type="card">
+        <Tabs>
           <TabPane tab="基本信息" key="1">
-            <BasicInfo 
+            <BasicInfo
+              currentRef={basicInfoRef}
               getMemberList={getMemberList}
             />
           </TabPane>
@@ -43,7 +48,9 @@ const AddQuotes: React.FC<{}> = () => {
             />
           </TabPane>
           <TabPane tab="交易条件" key="3">
-            <TradingConditions/>
+            <TradingConditions
+              currentRef={tradingConditionsRef}
+            />
           </TabPane>
           <TabPane tab="附件" key="4">
             <Attached />

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

@@ -15,12 +15,13 @@ const layout: any = {
 };
 const { Search } = Input;
 interface queryProps {
+  currentRef?: any,
   getMemberList?: Function
 }
 
 const BasicInfo: React.FC<queryProps> = (props) => {
   const [basicform] = Form.useForm();
-  const { getMemberList } = props;
+  const { getMemberList, currentRef } = props;
   // 会员添加弹窗控制
   const [visibleChannelMember, setVisibleChannelMember] = useState(false);
   const [memberList, setmemberList] = useState([]);
@@ -112,6 +113,36 @@ const BasicInfo: React.FC<queryProps> = (props) => {
   },[memberList])
   /************* 页面的一些操作start *************/
 
+  // 拿到表单数据
+  const hadnleValidateFields = () => {
+    return new Promise((resolve) => {
+      basicform.validateFields().then(values => {
+        resolve({
+          state: true,
+          data: {
+            details: values.details,
+            memberName: values.memberName,
+          }
+        })
+      }).catch(errorInfo => {
+        console.log(errorInfo)
+      })
+    })
+  }
+  useEffect(() => {
+    if (currentRef) {
+      const userAction = {
+        validateFields: () => hadnleValidateFields()
+      }
+      if (currentRef && typeof currentRef === 'function') {
+        currentRef(userAction);
+      }
+      if (currentRef && typeof currentRef !== 'function') {
+        currentRef.current = userAction;
+      }
+    }
+  },[])
+
   /************* 页面的一些操作end *************/
   return (
     <>

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

-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import styles from './index.less';
 import { Button, message, Input,Table } from 'antd';
 import { ColumnType } from 'antd/lib/table/interface';
 import { PlusOutlined } from '@ant-design/icons';
 import { useRowSelectionTable } from '@/hooks/useRowSelectionTable';
-import { ISchema, createAsyncFormActions } from '@formily/antd';
+import { ISchema, createAsyncFormActions, ISchemaFormActions, ISchemaFormAsyncActions } from '@formily/antd';
 import ModalTable, { ModalTableProps } from '@/components/ModalTable';
 import { PublicApi } from '@/services/api';
 import { FORM_FILTER_PATH } from '@/formSchema/const';
@@ -14,11 +14,47 @@ import Search from '@/components/NiceForm/components/Search'
 import Submit from '@/components/NiceForm/components/Submit'
 
 interface queryProps extends ModalTableProps {
-  memberList?: any
+  memberList?: any,
+  schemaAction?: ISchemaFormActions | ISchemaFormAsyncActions
 }
+
+// 只能输入数字的输入框
+const NumericInput = (props) => {
+  const onChange = (e) => {
+    const { value } = e.target;
+    const reg = /^-?\d*(\.\d*)?$/;
+    if ((!isNaN(value) && reg.test(value)) || value === "" || value === "-") {
+      props.onChange(value);
+    }
+  };
+  const onBlur = () => {
+    const { value, onBlur, onChange } = props;
+    let valueTemp = value;
+    if (value.charAt(value.length - 1) === "." || value === "-") {
+      valueTemp = value.slice(0, -1);
+    }
+    onChange(valueTemp.replace(/0*(\d+)/, "$1"));
+    if (onBlur) {
+      onBlur();
+    }
+  };
+  return (
+    <Input
+      {...props}
+      onChange={onChange}
+      onBlur={onBlur}
+      maxLength={25}
+    />
+  );
+};
+
 const EnquiryGoods: React.FC<queryProps> = (props) => {
-  const { memberList, ...restProps } = props
+  const { memberList, schemaAction, ...restProps } = props
+  const [value, setValue] = useState<any>('')
   const productFormActions = createAsyncFormActions()
+  const onChange = (value) => {
+    setValue(value);
+  };
   const columns: ColumnType<any>[] = [{
     title: '序号',
     dataIndex: 'productId',
@@ -37,10 +73,13 @@ const EnquiryGoods: React.FC<queryProps> = (props) => {
   }, {
     title: '采购数量',
     dataIndex: 'purchaseQuantity',
-    render:(text:any, recode: any) => <Input />
+    render:(text:any, record: any) => (
+      <NumericInput value={value} onChange={onChange} />
+    )
   }, {
     title: '操作',
     dataIndex: 'operation',
+    render:(text:any, record: any) => <Button type='link' onClick={() => handleDelete(record)}>删除</Button>
   }]
   // 会员添加弹窗控制
   const [visibleChannelMember, setVisibleChannelMember] = useState(false);
@@ -171,72 +210,6 @@ const EnquiryGoods: React.FC<queryProps> = (props) => {
     brandName: 'PELLE',
     unitName: '个',
 
-  },{
-    commodityId: 6,
-    name: '进口头层黄牛皮荔枝纹/红色/XXL',
-    customerCategoryName: '牛皮',
-    brandName: 'PELLE',
-    unitName: '个',
-
-  },{
-    commodityId: 7,
-    name: '进口头层黄牛皮荔枝纹/红色/XXL',
-    customerCategoryName: '牛皮',
-    brandName: 'PELLE',
-    unitName: '个',
-  },{
-    commodityId: 8,
-    name: '进口头层黄牛皮荔枝纹/红色/XXL',
-    customerCategoryName: '牛皮',
-    brandName: 'PELLE',
-    unitName: '个',
-
-  },{
-    commodityId: 9,
-    name: '进口头层黄牛皮荔枝纹/红色/XXL',
-    customerCategoryName: '牛皮',
-    brandName: 'PELLE',
-    unitName: '个',
-  },{
-    commodityId: 10,
-    name: '进口头层黄牛皮荔枝纹/红色/XXL',
-    customerCategoryName: '牛皮',
-    brandName: 'PELLE',
-    unitName: '个',
-
-  },{
-    commodityId: 11,
-    name: '进口头层黄牛皮荔枝纹/红色/XXL',
-    customerCategoryName: '牛皮',
-    brandName: 'PELLE',
-    unitName: '个',
-
-  },{
-    commodityId: 12,
-    name: '进口头层黄牛皮荔枝纹/红色/XXL',
-    customerCategoryName: '牛皮',
-    brandName: 'PELLE',
-    unitName: '个',
-  },{
-    commodityId: 13,
-    name: '进口头层黄牛皮荔枝纹/红色/XXL',
-    customerCategoryName: '牛皮',
-    brandName: 'PELLE',
-    unitName: '个',
-
-  },{
-    commodityId: 14,
-    name: '进口头层黄牛皮荔枝纹/红色/XXL',
-    customerCategoryName: '牛皮',
-    brandName: 'PELLE',
-    unitName: '个',
-  },{
-    commodityId: 15,
-    name: '进口头层黄牛皮荔枝纹/红色/XXL',
-    customerCategoryName: '牛皮',
-    brandName: 'PELLE',
-    unitName: '个',
-
   }]
   const fetchGoodsList = async (params) => {
     // const res = await PublicApi.getMemberManageLowerProviderPage(params)
@@ -253,8 +226,11 @@ const EnquiryGoods: React.FC<queryProps> = (props) => {
     });
   }
   // 选择会员弹框结束
-  /************* 页面的一些操作start *************/
 
+  useEffect(() => {
+    // 重选会员清掉已选择的商品
+    setgoodsList([]);
+  }, [memberList])
   // 添加商品
   const addGoods = () => {
     if(memberList.length > 0 && memberList[0].memberId) {
@@ -263,13 +239,22 @@ const EnquiryGoods: React.FC<queryProps> = (props) => {
       message.error('请选择被询价会员')
     }
   }
+  // 删除
+  const handleDelete = (record) => {
+    const newData = [...goodsList];
+    const colIndex = newData.findIndex(v => v.productId === record.productId)
+    newData.splice(colIndex, 1)
 
-  /************* 页面的一些操作end *************/
+    // 删除选中的项
+    memberRowCtl.setSelectRow(newData)
+    memberRowCtl.setSelectedRowKeys(newData.map(v => v.productId))
+    setgoodsList(newData)
+  }
 
   return (
     <div className={styles.revise_style}>
       <Button block type='dashed' onClick={addGoods}><PlusOutlined />添加商品</Button>
-      <Table style={{marginTop: '16px'}} columns={columns} dataSource={goodsList} pagination={false} />
+      <Table rowKey={'productId'} style={{marginTop: '16px'}} columns={columns} dataSource={goodsList} pagination={false} />
       {/* 选择商品弹框 */}
       <ModalTable
         modalTitle='选择商品'

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

-import React from 'react';
+import React, { useEffect } from 'react';
 import styles from './index.less';
-import { Form, Input, Select, Row, Col, DatePicker  } from 'antd';
+import moment from 'moment';
+import { Form, Input, Select, Row, Col, DatePicker } from 'antd';
 
+interface queryProps {
+  currentRef?: any
+}
 const layout: any = {
   colon: false,
   labelCol: { style: { width: '174px' } },
   wrapperCol: { span: 24 },
   labelAlign: "left"
 };
-const TradingConditions: React.FC<{}> = () => {
+
+const TradingConditions: React.FC<queryProps> = (props) => {
+  const { currentRef } = props;
+  const [TradingConditionsForm] = Form.useForm();
+  const hadnleValidateFields = () => {
+    return new Promise((resolve) => {
+      TradingConditionsForm.validateFields().then(values => {
+        resolve({
+          state: true,
+          data: {
+            deliveryTime: moment(values.deliveryTime).unix(),
+            quotationAsTime: moment(values.quotationAsTime).unix(),
+            offer: values.offer,
+            paymentType: values.paymentType,
+            taxes: values.taxes,
+            logistics: values.logistics,
+            packRequire: values.logistics,
+            otherRequire: values.logistics,
+          }
+        })
+      }).catch(errorInfo => {
+        console.log(errorInfo)
+      })
+    })
+  }
+  useEffect(() => {
+    if (currentRef) {
+      const userAction = {
+        validateFields: () => hadnleValidateFields()
+      }
+      if (currentRef && typeof currentRef === 'function') {
+        currentRef(userAction);
+      }
+      if (currentRef && typeof currentRef !== 'function') {
+        currentRef.current = userAction;
+      }
+    }
+  }, [])
   return (
     <Form
       {...layout}
+      form={TradingConditionsForm}
       className={styles.revise_style}
     >
       <Row gutter={70}>
         <Col span={12}>
-          <Form.Item label='交付日期'>
+          <Form.Item label='交付日期' name='deliveryTime' rules={[{ required: true, message: '请选择交付日期' }]}>
             <DatePicker format="YYYY-MM-DD HH:mm:ss" />
           </Form.Item>
-          <Form.Item label='交付地址'>
+          <Form.Item label='交付地址' name='' rules={[{ required: true, message: '请选择交付地址' }]}>
             <Select>
               <Select.Option value="demo">Demo</Select.Option>
             </Select>
           </Form.Item>
-          <Form.Item label='报价截止时间'>
+          <Form.Item label='报价截止时间' name='quotationAsTime' rules={[{ required: true, message: '请选择报价截止时间' }]}>
             <DatePicker format="YYYY-MM-DD HH:mm:ss" />
           </Form.Item>
-          <Form.Item label='报价要求'>
+          <Form.Item label='报价要求' name='offer'>
             <Input.TextArea placeholder='最长100个字符，50个汉字' />
           </Form.Item>
-          <Form.Item label='付款方式'>
+          <Form.Item label='付款方式' name='paymentType'>
             <Input.TextArea placeholder='最长100个字符，50个汉字' />
           </Form.Item>
-          <Form.Item label='税费要求'>
+          <Form.Item label='税费要求' name='taxes'>
             <Input.TextArea placeholder='最长100个字符，50个汉字' />
           </Form.Item>
-          <Form.Item label='物流要求'>
+          <Form.Item label='物流要求' name='logistics'>
             <Input.TextArea placeholder='最长100个字符，50个汉字' />
           </Form.Item>
         </Col>
         <Col span={12}>
-          <Form.Item label='包装要求'>
+          <Form.Item label='包装要求' name='packRequire'>
             <Input.TextArea placeholder='最长100个字符，50个汉字' />
           </Form.Item>
-          <Form.Item label='其他要求'>
+          <Form.Item label='其他要求' name='otherRequire'>
             <Input.TextArea placeholder='最长100个字符，50个汉字' />
           </Form.Item>
         </Col>