确认报价列表完善

config/routes/procurementRoute/confirmOffer.ts

+/**
+ * @description: 采购能力 确认报价
+ * @param {type}
+ * @return {type}
+*/
+
+export const confirmOfferRoute = [
+  /** 确认报价 */
+  {
+    path:'/memberCenter/procurementAbility/confirmOffer',
+    name:'确认报价',
+    routes: [
+      {
+        /** 报价查询 */
+        path: '/memberCenter/procurementAbility/confirmOffer/offerInquire',
+        name: '报价查询',
+        component: '@/pages/transaction/purchaseAbility/confirmOffer/offerInquire'
+      },
+      {
+        /** 待比价 */
+        path: '/memberCenter/procurementAbility/confirmOffer/toComparePrices',
+        name: '待比价',
+        component: '@/pages/transaction/purchaseAbility/confirmOffer/toComparePrices'
+      },
+      {
+        /** 待审核授标结果(一级) */
+        path: '/memberCenter/procurementAbility/confirmOffer/auditResultsOne',
+        name: '待审核授标结果(一级)',
+        component: '@/pages/transaction/purchaseAbility/confirmOffer/auditResultsOne'
+      },
+      {
+        /** 待审核授标结果(二级) */
+        path: '/memberCenter/procurementAbility/confirmOffer/auditResultsTwo',
+        name: '待审核授标结果(一级)',
+        component: '@/pages/transaction/purchaseAbility/confirmOffer/auditResultsTwo'
+      },
+      {
+        /** 待确认授标结果 */
+        path: '/memberCenter/procurementAbility/confirmOffer/confirmResults',
+        name: '待确认授标结果',
+        component: '@/pages/transaction/purchaseAbility/confirmOffer/confirmResults'
+      }
+    ]
+  }
+]

src/pages/transaction/purchaseAbility/confirmOffer/auditResultsOne/index.tsx

+import React from 'react';
+import Table from '../../components/table'
+import { ColumnType } from 'antd/lib/table/interface';
+import EyePreview from '@/components/EyePreview';
+import moment from 'moment';
+import { PublicApi } from '@/services/api';
+import { Row, Col, Button, Badge, Tag, Space, Typography } from 'antd';
+import {
+  OFFTER_EXTERNALSTATE,
+  OFFTER_EXTERNALSTATE_COLOR,
+  OFFTER_INTERNALSTATE,
+  OFFTER_INTERNALSTATE_COLOR
+} from '../../constants';
+const { Text } = Typography;
+
+const AuditResultsOne = () => {
+  console.log('待审核授标结果 1');
+  const format = (text) => {
+    return <>{moment(text).format("YYYY-MM-DD HH:mm:ss")}</>
+  }
+  const columns: ColumnType<any>[] = [{
+    title: '报价单号/摘要',
+    key: 'quotedPriceNo',
+    dataIndex: 'quotedPriceNo',
+    render: (text: any, record: any) => (
+      <Space direction='vertical'>
+        <EyePreview url={`/memberCenter/procurementAbility/offter/auditOffterOne/view?id=${record.id}&number=${record.quotedPriceNo}`}>{text}</EyePreview>
+        <Text type='secondary'>{record.details}</Text>
+      </Space>
+    )
+  }, {
+    title: '需求单号/会员',
+    key: 'purchaseInquiryNo',
+    dataIndex: 'purchaseInquiryNo',
+    render: (text: any, record: any) => (
+      <Space direction='vertical'>
+        <EyePreview
+          url={`/memberCenter/procurementAbility/offter/auditOffterOne/preview?id=${record.purchaseInquiryId}&number=${record.purchaseInquiryNo}`}
+        >{text}</EyePreview>
+        <Text type='secondary'>{record.memberName}</Text>
+      </Space>
+    )
+  }, {
+    title: '报价截止时间',
+    key: 'offerEndTime',
+    dataIndex: 'offerEndTime',
+    render: (text: any, record: any) => format(text)
+  }, {
+    title: '单据时间',
+    key: 'createTime',
+    dataIndex: 'createTime',
+    render: (text: any, record: any) => format(text)
+  }, {
+    title: '报价轮次',
+    key: 'turn',
+    dataIndex: 'turn',
+  }, {
+    title: '外部状态',
+    key: 'externalState',
+    dataIndex: 'externalState',
+    render: (text: any, record: any) => <Tag color={OFFTER_EXTERNALSTATE_COLOR[text]}>{OFFTER_EXTERNALSTATE[text]}</Tag>
+  }, {
+    title: '内部状态',
+    key: 'interiorState',
+    dataIndex: 'interiorState',
+    render: (text: any, record: any) => <Badge status={OFFTER_INTERNALSTATE_COLOR[text]} text={OFFTER_INTERNALSTATE[text]} />
+  }];
+  return (
+    <Table
+      schemaType="PurchaseDemandPublic"
+      columns={columns}
+      effects="requisitionFormNo"
+      fetch={PublicApi.getPurchaseQuotedPriceStayExamineList1}
+      controllerBtns={
+        <Row>
+          <Col span={6}>
+            <Button>批量提交审核</Button>
+          </Col>
+        </Row>
+      }
+    />
+  )
+}
+export default AuditResultsOne

src/pages/transaction/purchaseAbility/confirmOffer/auditResultsTwo/index.tsx

+import React from 'react';
+import Table from '../../components/table'
+import { ColumnType } from 'antd/lib/table/interface';
+import EyePreview from '@/components/EyePreview';
+import moment from 'moment';
+import { PublicApi } from '@/services/api';
+import { Row, Col, Button, Badge, Tag, Space, Typography } from 'antd';
+import {
+  OFFTER_EXTERNALSTATE,
+  OFFTER_EXTERNALSTATE_COLOR,
+  OFFTER_INTERNALSTATE,
+  OFFTER_INTERNALSTATE_COLOR
+} from '../../constants';
+const { Text } = Typography;
+
+const AuditResultsTwo = () => {
+  console.log('待审核授标结果 1');
+  const format = (text) => {
+    return <>{moment(text).format("YYYY-MM-DD HH:mm:ss")}</>
+  }
+  const columns: ColumnType<any>[] = [{
+    title: '报价单号/摘要',
+    key: 'quotedPriceNo',
+    dataIndex: 'quotedPriceNo',
+    render: (text: any, record: any) => (
+      <Space direction='vertical'>
+        <EyePreview url={`/memberCenter/procurementAbility/offter/auditOffterOne/view?id=${record.id}&number=${record.quotedPriceNo}`}>{text}</EyePreview>
+        <Text type='secondary'>{record.details}</Text>
+      </Space>
+    )
+  }, {
+    title: '需求单号/会员',
+    key: 'purchaseInquiryNo',
+    dataIndex: 'purchaseInquiryNo',
+    render: (text: any, record: any) => (
+      <Space direction='vertical'>
+        <EyePreview
+          url={`/memberCenter/procurementAbility/offter/auditOffterOne/preview?id=${record.purchaseInquiryId}&number=${record.purchaseInquiryNo}`}
+        >{text}</EyePreview>
+        <Text type='secondary'>{record.memberName}</Text>
+      </Space>
+    )
+  }, {
+    title: '报价截止时间',
+    key: 'offerEndTime',
+    dataIndex: 'offerEndTime',
+    render: (text: any, record: any) => format(text)
+  }, {
+    title: '单据时间',
+    key: 'createTime',
+    dataIndex: 'createTime',
+    render: (text: any, record: any) => format(text)
+  }, {
+    title: '报价轮次',
+    key: 'turn',
+    dataIndex: 'turn',
+  }, {
+    title: '外部状态',
+    key: 'externalState',
+    dataIndex: 'externalState',
+    render: (text: any, record: any) => <Tag color={OFFTER_EXTERNALSTATE_COLOR[text]}>{OFFTER_EXTERNALSTATE[text]}</Tag>
+  }, {
+    title: '内部状态',
+    key: 'interiorState',
+    dataIndex: 'interiorState',
+    render: (text: any, record: any) => <Badge status={OFFTER_INTERNALSTATE_COLOR[text]} text={OFFTER_INTERNALSTATE[text]} />
+  }];
+  return (
+    <Table
+      schemaType="PurchaseDemandPublic"
+      columns={columns}
+      effects="requisitionFormNo"
+      fetch={PublicApi.getPurchaseQuotedPriceStayExamineList1}
+      controllerBtns={
+        <Row>
+          <Col span={6}>
+            <Button>批量提交审核</Button>
+          </Col>
+        </Row>
+      }
+    />
+  )
+}
+export default AuditResultsTwo

src/pages/transaction/purchaseAbility/confirmOffer/confirmResults/index.tsx

+import React from 'react';
+import Table from '../../components/table';
+import { history } from 'umi';
+import { Button, Space, Typography, Tag } from 'antd';
+import { ColumnType } from 'antd/lib/table/interface';
+import EyePreview from '@/components/EyePreview';
+import moment from 'moment';
+import { PublicApi } from '@/services/api';
+import {
+  OFFTER_EXTERNALSTATE,
+  OFFTER_EXTERNALSTATE_COLOR,
+} from '../../constants';
+
+const { Text } = Typography
+
+const ConfirmResults = () => {
+  const format = (text) => {
+    return <>{moment(text).format("YYYY-MM-DD HH:mm:ss")}</>
+  }
+  const columns: ColumnType<any>[] = [{
+    title: '需求单号',
+    key: 'purchaseInquiryNo',
+    dataIndex: 'purchaseInquiryNo',
+    render: (text: any, record: any) => (
+      <Space direction='vertical'>
+        <EyePreview
+          url={`/memberCenter/procurementAbility/offter/inquiry/preview?id=${record.id}&number=${record.purchaseInquiryNo}`}>{text}</EyePreview>
+        <Text type='secondary'>{record.details}</Text>
+      </Space>
+    )
+  }, {
+    title: '需求会员',
+    key: 'memberName',
+    dataIndex: 'memberName',
+  }, {
+    title: '交付日期',
+    key: 'deliveryTime',
+    dataIndex: 'deliveryTime',
+    render: (text: any, record: any) => format(text)
+  }, {
+    title: '报价截止时间',
+    key: 'quotationAsTime',
+    dataIndex: 'quotationAsTime',
+    render: (text: any, record: any) => format(text)
+  }, {
+    title: '单据时间',
+    key: 'voucherTime',
+    dataIndex: 'voucherTime',
+    render: (text: any, record: any) => format(text)
+  }, {
+    title: '外部状态',
+    key: 'externalState',
+    dataIndex: 'externalState',
+    render: (text: any, record: any) => <Tag color={OFFTER_EXTERNALSTATE_COLOR[text]}>{OFFTER_EXTERNALSTATE[text]}</Tag>
+  }, {
+    title: '操作',
+    key: 'operate',
+    dataIndex: 'operate',
+    render: (text: any, record: any) =>
+      <Button
+        onClick={() => history.push(`/memberCenter/procurementAbility/offter/quote?id=${record.id}&number=${record.purchaseInquiryNo}`)}
+        type='link'
+      >
+        报价
+      </Button>
+  }];
+  return (
+    <Table
+      schemaType="PurchaseDemand"
+      columns={columns}
+      effects="requisitionFormNo"
+      fetch={PublicApi.getPurchaseQuotedPricePurchaseInquiryList}
+    />
+  )
+}
+export default ConfirmResults

src/pages/transaction/purchaseAbility/confirmOffer/offerInquire/index.tsx

+import React from 'react';
+import Table from '../../components/table';
+import { history } from 'umi';
+import { Button, Space, Typography, Tag } from 'antd';
+import { ColumnType } from 'antd/lib/table/interface';
+import EyePreview from '@/components/EyePreview';
+import moment from 'moment';
+import { PublicApi } from '@/services/api';
+import {
+  OFFTER_EXTERNALSTATE,
+  OFFTER_EXTERNALSTATE_COLOR,
+} from '../../constants';
+
+const { Text } = Typography
+
+const OfferInquire = () => {
+  const format = (text) => {
+    return <>{moment(text).format("YYYY-MM-DD HH:mm:ss")}</>
+  }
+  const columns: ColumnType<any>[] = [{
+    title: '需求单号',
+    key: 'purchaseInquiryNo',
+    dataIndex: 'purchaseInquiryNo',
+    render: (text: any, record: any) => (
+      <Space direction='vertical'>
+        <EyePreview
+          url={`/memberCenter/procurementAbility/offter/inquiry/preview?id=${record.id}&number=${record.purchaseInquiryNo}`}>{text}</EyePreview>
+        <Text type='secondary'>{record.details}</Text>
+      </Space>
+    )
+  }, {
+    title: '需求会员',
+    key: 'memberName',
+    dataIndex: 'memberName',
+  }, {
+    title: '交付日期',
+    key: 'deliveryTime',
+    dataIndex: 'deliveryTime',
+    render: (text: any, record: any) => format(text)
+  }, {
+    title: '报价截止时间',
+    key: 'quotationAsTime',
+    dataIndex: 'quotationAsTime',
+    render: (text: any, record: any) => format(text)
+  }, {
+    title: '单据时间',
+    key: 'voucherTime',
+    dataIndex: 'voucherTime',
+    render: (text: any, record: any) => format(text)
+  }, {
+    title: '外部状态',
+    key: 'externalState',
+    dataIndex: 'externalState',
+    render: (text: any, record: any) => <Tag color={OFFTER_EXTERNALSTATE_COLOR[text]}>{OFFTER_EXTERNALSTATE[text]}</Tag>
+  }, {
+    title: '操作',
+    key: 'operate',
+    dataIndex: 'operate',
+    render: (text: any, record: any) =>
+      <Button
+        onClick={() => history.push(`/memberCenter/procurementAbility/offter/quote?id=${record.id}&number=${record.purchaseInquiryNo}`)}
+        type='link'
+      >
+        报价
+      </Button>
+  }];
+  return (
+    <Table
+      schemaType="PurchaseDemand"
+      columns={columns}
+      effects="requisitionFormNo"
+      fetch={PublicApi.getPurchaseQuotedPricePurchaseInquiryList}
+    />
+  )
+}
+export default OfferInquire

src/pages/transaction/purchaseAbility/confirmOffer/toComparePrices/index.tsx

+import React from 'react';
+import Table from '../../components/table';
+import { history } from 'umi';
+import { Button, Space, Typography, Tag } from 'antd';
+import { ColumnType } from 'antd/lib/table/interface';
+import EyePreview from '@/components/EyePreview';
+import moment from 'moment';
+import { PublicApi } from '@/services/api';
+import {
+  OFFTER_EXTERNALSTATE,
+  OFFTER_EXTERNALSTATE_COLOR,
+} from '../../constants';
+
+const { Text } = Typography
+
+const ToComparePrices = () => {
+  const format = (text) => {
+    return <>{moment(text).format("YYYY-MM-DD HH:mm:ss")}</>
+  }
+  const columns: ColumnType<any>[] = [{
+    title: '需求单号',
+    key: 'purchaseInquiryNo',
+    dataIndex: 'purchaseInquiryNo',
+    render: (text: any, record: any) => (
+      <Space direction='vertical'>
+        <EyePreview
+          url={`/memberCenter/procurementAbility/offter/inquiry/preview?id=${record.id}&number=${record.purchaseInquiryNo}`}>{text}</EyePreview>
+        <Text type='secondary'>{record.details}</Text>
+      </Space>
+    )
+  }, {
+    title: '需求会员',
+    key: 'memberName',
+    dataIndex: 'memberName',
+  }, {
+    title: '交付日期',
+    key: 'deliveryTime',
+    dataIndex: 'deliveryTime',
+    render: (text: any, record: any) => format(text)
+  }, {
+    title: '报价截止时间',
+    key: 'quotationAsTime',
+    dataIndex: 'quotationAsTime',
+    render: (text: any, record: any) => format(text)
+  }, {
+    title: '单据时间',
+    key: 'voucherTime',
+    dataIndex: 'voucherTime',
+    render: (text: any, record: any) => format(text)
+  }, {
+    title: '外部状态',
+    key: 'externalState',
+    dataIndex: 'externalState',
+    render: (text: any, record: any) => <Tag color={OFFTER_EXTERNALSTATE_COLOR[text]}>{OFFTER_EXTERNALSTATE[text]}</Tag>
+  }, {
+    title: '操作',
+    key: 'operate',
+    dataIndex: 'operate',
+    render: (text: any, record: any) =>
+      <Button
+        onClick={() => history.push(`/memberCenter/procurementAbility/offter/quote?id=${record.id}&number=${record.purchaseInquiryNo}`)}
+        type='link'
+      >
+        报价
+      </Button>
+  }];
+  return (
+    <Table
+      schemaType="PurchaseDemand"
+      columns={columns}
+      effects="requisitionFormNo"
+      fetch={PublicApi.getPurchaseQuotedPricePurchaseInquiryList}
+    />
+  )
+}
+export default ToComparePrices

src/pages/transaction/purchaseAbility/offter/addOffter/add.tsx

-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { Tabs, Button, Card } from 'antd';
 import { history } from 'umi';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
@@ -16,6 +16,7 @@ const AddForm = () => {
     query: { id, number },
     pathname,
   } = history.location;
+  const [loading, setLoading] = useState<boolean>(false);
   const [path] = useState(pathname.split('/')[pathname.split('/').length - 1]);
   /** 基本信息 */
   const [basic, setbasic] = useState<any>({});
@@ -26,6 +27,11 @@ const AddForm = () => {
   /** 附件 */
   const [file, setfile] = useState<any>([]);
 
+  /** 获取各模块的数据 */
+  const currentBasic = useRef<any>({});
+  const currentExplain = useRef<any>({});
+  const currentOffer = useRef<any>({});
+
   useEffect(() => {
     let link: any;
     const params = {
@@ -81,32 +87,66 @@ const AddForm = () => {
     })
   }, [])
 
+  const handleSubmit = async () => {
+    const { memberId, memberRoleId, name } = JSON.parse(localStorage.getItem('auth'));
+    const basicRef = await currentBasic.current.get();
+    const explainRef = await currentExplain.current.get();
+    const offerRef = await currentOffer.current.get();
+    setLoading(true);
+    if (basicRef.state && explainRef.state && offerRef.state) {
+      const params = {
+        purchaseInquiryId: id,
+        purchaseInquiryNo: number,
+        quotedDetails: basicRef.data.quotedDetails,
+        tel: basicRef.data.phone.tel,
+        telPrefix: basicRef.data.phone.telPrefix,
+        contacts: basicRef.data.contacts,
+        memberName: name,
+        memberId: memberId,
+        memberRoleId: memberRoleId,
+        ...explainRef.data,
+        detailss: offerRef.data,
+      }
+      const res = await PublicApi.postPurchaseQuotedPriceAdd(params);
+      if (res.code === 1000) {
+        history.goBack()
+      } else {
+        setLoading(false);
+      }
+    } else {
+      setLoading(false);
+    }
+  }
+
   return (
     <PageHeaderWrapper
       onBack={() => history.goBack()}
       backIcon={<ReutrnEle description="返回" />}
       extra={
-        <Button type="primary"> 保存</Button>
+        <Button loading={loading} type="primary" onClick={handleSubmit}> 保存</Button>
       }
     >
       <Card>
         <Tabs type='card'>
-          <TabPane key='1' tab='基本信息'>
+          <TabPane key='1' tab='基本信息' forceRender>
             <Basic
               fetchdata={basic}
+              currentRef={currentBasic}
             />
           </TabPane>
-          <TabPane key='2' tab='报价信息'>
+          <TabPane key='2' tab='报价信息' forceRender>
             <Offer
               fetchdata={offer}
+              currentRef={currentOffer}
             />
           </TabPane>
-          <TabPane key='3' tab='报价说明'>
+          <TabPane key='3' tab='报价说明' forceRender>
             <Explain
               fetchdata={explain}
+              currentRef={currentExplain}
             />
           </TabPane>
-          <TabPane key='4' tab='附件'>
+          <TabPane key='4' tab='附件' forceRender>
             <File
               fetchdata={file}
             />

src/pages/transaction/purchaseAbility/offter/addOffter/components/basic.tsx

-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   Form,
   Input,
@@ -14,6 +14,7 @@ import {
   OFFTER_INTERNALSTATE,
   OFFTER_INTERNALSTATE_COLOR
 } from '../../../constants';
+import { PublicApi } from '@/services/api';
 
 const { Option } = Select;
 const { Text, Link } = Typography;
@@ -27,13 +28,16 @@ const layout: any = {
 
 export interface IProps {
   fetchdata: any,
+  currentRef: any,
 }
 
 const BasicInfo: React.FC<IProps> = (props: any) => {
   const [form] = Form.useForm();
   const {
     fetchdata,
+    currentRef
   } = props;
+  const [telCode, setTelCode] = useState<any>([])
 
   useEffect(() => {
     if (fetchdata) {
@@ -45,9 +49,33 @@ const BasicInfo: React.FC<IProps> = (props: any) => {
           tel: fetchdata.tel,
         },
       })
+      PublicApi.getManageCountryAreaGetTelCode().then(res => {
+        if (res.code === 1000) {
+          setTelCode(res.data)
+        }
+      });
+
     }
   }, [fetchdata])
 
+  useEffect(() => {
+    currentRef.current = {
+      get: () => new Promise((resolve: any) => {
+        form.validateFields().then(res => {
+          resolve({
+            state: true,
+            name: 'basic',
+            data: res,
+          })
+        }).catch(error => {
+          if (error && error.errorFields) {
+
+          }
+        })
+      })
+    }
+  })
+
   return (
     <Form
       className={style.formStyle}
@@ -93,9 +121,10 @@ const BasicInfo: React.FC<IProps> = (props: any) => {
             noStyle
             rules={[{ required: true, message: '请输入需求单摘要' }]}
           >
-            <Select placeholder="Select province">
-              <Option value="Zhejiang">浙江</Option>
-              <Option value="Jiangsu">江苏</Option>
+            <Select placeholder="+86">
+              {telCode.map((item:any) => (
+                <Option value={item}>{item}</Option>
+              ))}
             </Select>
           </Form.Item>
           <Form.Item

src/pages/transaction/purchaseAbility/offter/addOffter/components/explain.tsx

@@ -15,12 +15,14 @@ const layout: any = {
 
 export interface IProps {
   fetchdata: any,
+  currentRef: any,
 }
 
 const OfferExplain: React.FC<IProps> = (props:any) => {
   const [form] = Form.useForm();
   const {
-    fetchdata
+    fetchdata,
+    currentRef,
   } = props;
 
   useEffect(() => {
@@ -28,6 +30,24 @@ const OfferExplain: React.FC<IProps> = (props:any) => {
       form.setFieldsValue({...fetchdata});
     }
   }, [fetchdata])
+
+  useEffect(() => {
+    currentRef.current = {
+      get: () => new Promise((resolve: any) => {
+        form.validateFields().then(res => {
+          resolve({
+            state: true,
+            name: 'explain',
+            data: res,
+          })
+        }).catch(error => {
+          if (error && error.errorFields) {
+
+          }
+        })
+      })
+    }
+  })
   return (
     <Form
       {...layout}

src/pages/transaction/purchaseAbility/offter/addOffter/components/index.less

@@ -32,5 +32,48 @@
     .ant-table-wrapper {
       margin-top: 24px;
     }
+    .ant-table-expanded-row td {
+      padding: 0;
+    }
+  }
+}
+.childrenWrap {
+  background-color: #fff;
+  .childrenTitle {
+    height: 100%;
+    background: linear-gradient(to left, #FFFFFF, #DAF2E7);
+    color: #00B37A;
+    p {
+      padding-left: 16px;
+      margin: 0;
+      font-size: 12px;
+      height: 14px;
+      line-height: 14px;
+    }
+    padding: 12px 0;
+  }
+  .childrenContent {
+    margin-top: 8px;
+    p {
+      margin: 0;
+      span {
+        height: 12px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #909399;
+        line-height: 12px;
+        padding-right: 10px;
+      }
+    }
+  }
+}
+.editableRow {
+  :global {
+    .ant-form-item-explain {
+      position: absolute;
+      top: 100%;
+      font-size: 12px
+    }
   }
 }
+

src/pages/transaction/purchaseAbility/offter/addOffter/components/offer.tsx

@@ -6,22 +6,51 @@ import {
   Button,
   Input,
   Select,
+  Row,
+  Col,
+  Typography
 } from 'antd';
 import { CaretDownOutlined, CaretRightOutlined } from '@ant-design/icons';
 import style from './index.less';
+import CrossSellProducts from '../modal/crossSellProducts';
 
+const { Text } = Typography;
 const { Option } = Select;
 
 export interface IProps {
   fetchdata: any,
+  currentRef: any
 }
 
-const OfferInfo: React.FC<IProps> = (props:any) => {
+const OfferInfo: React.FC<IProps> = (props: any) => {
+  const [form] = Form.useForm();
   const {
-    fetchdata
+    fetchdata,
+    currentRef,
   } = props;
   const [tabs, setTabs] = useState<number[]>([]);
+  const [visible, setVisible] = useState<boolean>(false);
+  const [record, setRecord] = useState<any>({});
+  const [index, setIndex] = useState<number>();
   const [dataSource, setDataSource] = useState<any>(fetchdata.materiels)
+
+  /** 修改税率&单价 */
+  const handleEdit = (e, name, idx) => {
+    const data = [...dataSource];
+    switch (name) {
+      case 'isTax':
+        data[idx].isTax = '100'
+        break;
+      case 'taxProbability':
+        data[idx].taxProbability = e.target.value;
+        break;
+      case 'taxUnitPrice':
+        data[idx].taxUnitPrice = e.target.value;
+        break;
+    }
+    setDataSource(data)
+  }
+
   const columns = [
     {
       title: '物料编号/名称',
@@ -47,40 +76,86 @@ const OfferInfo: React.FC<IProps> = (props:any) => {
       title: '采购数量/单位',
       key: 'purchaseCount',
       dataIndex: 'purchaseCount',
-      render: () => (
-        <Select>
-          <Option value={1}>是</Option>
-          <Option value={2}>否</Option>
-        </Select>
-      )
     },
     {
       title: '含税',
       key: 'isTax',
       dataIndex: 'isTax',
+      render: (text: any, record: any, index: number) => (
+        <Form.Item
+          name={`isTax${index}`}
+          style={{ margin: 0 }}
+          rules={[{ required: true, message: '请选择' }]}
+        >
+          <Select
+            style={{ width: 100 }}
+            onChange={(e) => handleEdit(e, 'isTax', index)}
+          >
+            <Option value={1}>是</Option>
+            <Option value={2}>否</Option>
+          </Select>
+        </Form.Item>
+      )
     },
     {
       title: '税率',
       key: 'taxProbability',
       dataIndex: 'taxProbability',
-      render: () => <Input addonAfter="%" />
+      render: (text: any, record: any, index: number) => (
+        <Form.Item
+          style={{ margin: 0 }}
+          name={`taxProbability${index}`}
+          rules={[{ required: true, message: '请输入' }]}
+        >
+          <Input
+            onChange={(e) => handleEdit(e, 'taxProbability', index)}
+            disabled={fetchdata && (fetchdata.count !== index + 1)}
+            addonAfter="%"
+          />
+        </Form.Item>
+
+      )
     },
     {
       title: '单价(含税)',
       key: 'taxUnitPrice',
       dataIndex: 'taxUnitPrice',
-      render: () => <Input addonBefore="¥" />
+      render: (text: any, record: any, index: number) =>
+        <Form.Item
+          style={{ margin: 0 }}
+          name={`taxUnitPrice${index}`}
+          rules={[{ required: true, message: '请输入' }]}
+        >
+          <Input
+            onChange={(e) => handleEdit(e, 'taxUnitPrice', index)}
+            disabled={fetchdata && (fetchdata.count !== index + 1)}
+            addonBefore="¥"
+          />
+        </Form.Item>
+
     },
     {
       title: '金额(含税)',
       key: 'taxPrice',
       dataIndex: 'taxPrice',
+      render: (text: any, record: any) => <Text>{Number(record.purchaseCount) * Number(record.taxUnitPrice)}</Text>
     },
     {
       title: '操作',
       key: 'operate',
       dataIndex: 'operate',
-      render: (text:any) => <Button type='link'>关联报价商品</Button>
+      render: (text: any, record: any, index: number) => (
+        <Button
+          type='link'
+          onClick={() => {
+            setIndex(index);
+            setRecord(record);
+            setVisible(true);
+          }}
+        >
+          关联报价商品
+        </Button>
+      )
     },
   ]
   /** 用于展示有第几轮的TABS */
@@ -91,26 +166,107 @@ const OfferInfo: React.FC<IProps> = (props:any) => {
     }
     setTabs(tabs.reverse())
   }
+  /** 确定关联商品 */
+  const handleConfirm = (params: any) => {
+    console.log(params, 10086)
+    const data = [...dataSource];
+    data[index].productId = params.product.id;
+    data[index].goodsId = params.product.goodsId;
+    data[index].customerCategoryName = params.product.customerCategoryName;
+    data[index].productName = params.product.name;
+    data[index].productBrand = params.product.brandName;
+    setDataSource(data)
+    setVisible(false);
+  }
   useEffect(() => {
-    console.log(fetchdata.count, 11882266)
     handleTabs(fetchdata && fetchdata.count);
   }, [])
+
+  useEffect(() => {
+    if (fetchdata.materiels) {
+      setDataSource(fetchdata.materiels)
+    }
+  }, [fetchdata.materiels])
+
+  useEffect(() => {
+    currentRef.current = {
+      get: () => new Promise((resolve: any) => {
+        form.validateFields().then(res => {
+          const detailss: any = [];
+          dataSource.forEach(item => {
+            detailss.push({
+              purchaseInquiryDetailsId: item.id,
+              taxUnitPrice: item.taxUnitPrice,
+              isTax: item.isTax,
+              taxProbability: item.taxProbability,
+              productName: item.productName,
+              productId: item.productId,
+              goodsId: item.goodsId,
+              productBrand: item.productBrand,
+              productAttributeJson: '',
+            })
+          })
+          resolve({
+            state: true,
+            name: 'offer',
+            data: detailss,
+          })
+        }).catch(error => {
+          if (error && error.errorFields) {
+
+          }
+        })
+      })
+    }
+  }, [dataSource])
+
   return (
     <Form
+      form={form}
       className={style.offerStyle}
     >
       <Radio.Group defaultValue={fetchdata && fetchdata.count}>
-        { tabs.length > 0 && tabs.map(item => (
+        {tabs.length > 0 && tabs.map(item => (
           <Radio.Button key={item} value={item}>第{item}轮</Radio.Button>
-        )) }
+        ))}
       </Radio.Group>
       <Table
         columns={columns}
         dataSource={dataSource}
+        rowClassName={style.editableRow}
         pagination={{ size: "small" }}
         rowKey='id'
         expandable={{
-          expandedRowRender: record => <p style={{ margin: 0 }}>11231235</p>,
+          expandedRowRender: record => (
+            <div className={style.childrenWrap}>
+              <Row>
+                <Col span={3}>
+                  <div className={style.childrenTitle}>
+                    <p>对应</p>
+                    <p>招标商品</p>
+                  </div>
+                </Col>
+                <Col span={6}>
+                  <div className={style.childrenContent}>
+                    <p><span>商品ID:</span>{record.productId}</p>
+                    <p><span>商品名称:</span>{record.productName}</p>
+                  </div>
+                </Col>
+                <Col span={6}>
+                  <div className={style.childrenContent}>
+                    <p><span>规格:</span>Q89YTE1</p>
+                    <p><span>品类:</span>{record.customerCategoryName}</p>
+                  </div>
+                </Col>
+                <Col span={6}>
+                  <div className={style.childrenContent}>
+                    <p><span>品牌:</span>{record.productBrand}</p>
+                  </div>
+                </Col>
+              </Row>
+            </div>
+          ),
+          rowExpandable: record => record.productId,
           expandIcon: ({ expanded, onExpand, record }) =>
             expanded ? (
               <CaretDownOutlined onClick={e => onExpand(record, e)} />
@@ -119,6 +275,12 @@ const OfferInfo: React.FC<IProps> = (props:any) => {
             )
         }}
       />
+      <CrossSellProducts
+        visible={visible}
+        record={record}
+        onClose={() => setVisible(false)}
+        onClick={handleConfirm}
+      />
     </Form>
   )
 }

src/pages/transaction/purchaseAbility/offter/addOffter/modal/crossSellProducts.tsx

+import React, { useState } from 'react';
+import {
+  Drawer,
+  Anchor,
+  Menu,
+  Layout,
+  Button,
+  Form,
+  Divider,
+  Typography,
+} from 'antd';
+import cx from 'classnames'
+import style from './index.less';
+import { PlusSquareOutlined } from '@ant-design/icons';
+import SelectProduct from './selectProduct';
+import { PublicApi } from '@/services/api';
+
+const { Sider, Content } = Layout;
+const { Text } = Typography;
+const { Link } = Anchor;
+const { SubMenu } = Menu;
+
+export interface IProps {
+  visible: boolean,
+  record: any,
+  onClose?: () => void,
+  onClick?: (e: any) => void,
+}
+
+const layout: any = {
+  colon: false,
+  labelCol: { style: { width: '110px' } },
+  labelAlign: "left"
+};
+
+const CrossSellProducts: React.FC<IProps> = (props: any) => {
+  const {
+    visible,
+    record,
+    onClose,
+    onClick
+  } = props;
+  const [flag, setFlag] = useState<boolean>(false);
+  const [product, setProduct] = useState<any>({});
+  const [attribute, setAttribute] = useState<any>([]);
+  const handleAnchorClick = (e) => {
+    e.preventDefault()
+  };
+
+  /**报价商品属性 */
+  const GetCommodityAttribute = (id) => {
+    PublicApi.getProductCommodityGetCommodityAttributeByUnitPriceAndPicId({ unitPriceAndPicId: id }).then(res => {
+      if (res.code === 1000) {
+        let { data } = res || {}
+        setAttribute(data)
+      }
+    })
+  }
+
+  /**选择报价商品回调  */
+  const handleSelectPrduct = (params: any) => {
+    setProduct(params);
+    GetCommodityAttribute(params.id);
+    setFlag(false);
+  }
+
+  /** 关闭 */
+  const handleClose = () => {
+    onClose()
+  }
+  /** 确定 */
+  const handleConfirm = () => {
+    onClick({
+      product,
+      attribute
+    })
+  }
+  return (
+    <>
+      <Drawer
+        title='关联报价商品'
+        placement='right'
+        width={800}
+        className={style.drawer}
+        visible={visible}
+        footer={
+          <div
+            style={{
+              textAlign: 'right',
+            }}
+          >
+            <Button onClick={handleClose} style={{ marginRight: 8 }}>
+              取消
+          </Button>
+            <Button onClick={handleConfirm} type="primary">
+              确定
+          </Button>
+          </div>
+        }
+      >
+        <Layout>
+          <Sider width={159}>
+            <Anchor
+              getContainer={() => document.getElementById('current')}
+              onClick={handleAnchorClick}
+            >
+              <Menu>
+                <Menu.Item key="1">
+                  <Link href='#basic' title='基本信息' />
+                </Menu.Item>
+                {attribute.length > 0 && attribute.map((item: any, index: number) => (
+                  <Menu.Item key={`attribute_${index + 1}`}>
+                    <Link href={`attribute_${index + 1}`} title={item.customerAttribute.name} />
+                  </Menu.Item>
+                ))}
+                <Menu.Item key="6">
+                  <Link href='#file' title='附件' />
+                </Menu.Item>
+              </Menu>
+            </Anchor>
+          </Sider>
+          <Content id='current'>
+            <Form
+              {...layout}
+            >
+              {/* 基本信息 */}
+              <div id='basic'>
+                <Form.Item
+                  style={{ marginBottom: '10px' }}
+                  label={
+                    <>
+                      <Divider
+                        type="vertical"
+                        style={{
+                          width: '2px',
+                          height: '16px',
+                          margin: '0px 5px 0px 0px',
+                          backgroundColor: '#00B37A',
+                        }}
+                      />
+                      <span
+                        style={{
+                          fontSize: '14px',
+                          color: '#909399',
+                        }}
+                      >
+                        基本信息
+                  </span>
+                    </>
+                  }
+                />
+                {record
+                  && (
+                    <div className={style.box}>
+                      <div className={style.title}>对应采购物料</div>
+                      <div className={style.content}>
+                        <div className={style.row}>
+                          <span className={style.label}>物料编号：</span>
+                          <span className={style.col}>{record.number}</span>
+                        </div>
+                        <div className={style.row}>
+                          <span className={style.label}>品牌：</span>
+                          <span className={style.col}>{record.brand}</span>
+                        </div>
+                        <div className={style.row}>
+                          <span className={style.label}>物料名称：</span>
+                          <span className={style.col}>{record.name}</span>
+                        </div>
+                        <div className={style.row}>
+                          <span className={style.label}>品类：</span>
+                          <span className={style.col}>{record.category}</span>
+                        </div>
+                        <div className={style.row}>
+                          <span className={style.label}>规格型号：</span>
+                          <span className={style.col}>{record.model}</span>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                <div className={cx(style.box, style.boxBlue)}>
+                  <div className={cx(style.title, style.tagBlue)}>
+                    报价商品
+                  <Text type='danger'>*</Text>
+                  </div>
+                  <div className={style.content}>
+                    {Object.keys(product).length > 0
+                      && (
+                        <>
+                          <div className={style.row}>
+                            <span className={style.label}>商品名称：</span>
+                            <span className={style.col}>{product.name}</span>
+                          </div>
+                          <div className={style.row}>
+                            <span className={style.label}>品牌：</span>
+                            <span className={style.col}>{product.brandName}</span>
+                          </div>
+                          <div className={style.row}>
+                            <span className={style.label}>品类：</span>
+                            <span className={style.col}>{product.customerCategoryName}</span>
+                          </div>
+                        </>
+                      )}
+                    <Button onClick={() => setFlag(true)} block type="dashed" style={{ margin: '16px 0px' }}>
+                      <PlusSquareOutlined />
+                      选择商品
+                  </Button>
+                  </div>
+                </div>
+              </div>
+              {attribute.length > 0 && attribute.map((item: any, index: number) => (
+                <div id={`attribute_${index + 1}`} key={`attribute_${index + 1}`}>
+                  <Form.Item
+                    style={{ marginBottom: '10px' }}
+                    label={
+                      <>
+                        <Divider
+                          type="vertical"
+                          style={{
+                            width: '2px',
+                            height: '16px',
+                            margin: '0px 5px 0px 0px',
+                            backgroundColor: '#00B37A',
+                          }}
+                        />
+                        <span
+                          style={{
+                            fontSize: '14px',
+                            color: '#909399',
+                          }}
+                        >
+                          {item.customerAttribute.name}
+                        </span>
+                      </>
+                    }
+                  />
+                  {item.customerAttributeValueList.map((child: any, childIdx: number) => (
+                    <Form.Item
+                      key={childIdx}
+                      label={item.customerAttribute.name}
+                      style={{ marginBottom: 0 }}
+                    >
+                      <Text>{child.value}</Text>
+                    </Form.Item>
+                  ))}
+                </div>
+              ))}
+
+
+              {/* 附件 */}
+              <div id='file'>
+                <Form.Item
+                  style={{ marginBottom: '10px' }}
+                  label={
+                    <>
+                      <Divider
+                        type="vertical"
+                        style={{
+                          width: '2px',
+                          height: '16px',
+                          margin: '0px 5px 0px 0px',
+                          backgroundColor: '#00B37A',
+                        }}
+                      />
+                      <span
+                        style={{
+                          fontSize: '14px',
+                          color: '#909399',
+                        }}
+                      >
+                        附件
+                  </span>
+                    </>
+                  }
+                />
+              </div>
+            </Form>
+          </Content>
+        </Layout>
+      </Drawer>
+      <SelectProduct
+        visible={flag}
+        onclose={() => setFlag(false)}
+        confirm={handleSelectPrduct}
+      />
+    </>
+  )
+}
+
+export default CrossSellProducts;

src/pages/transaction/purchaseAbility/offter/addOffter/modal/index.less

+.drawer {
+  :global {
+    .ant-drawer-body {
+      padding: 0px;
+      .ant-layout {
+        height: 100%;
+        .ant-layout-sider {
+          background-color: #FFFFFF;
+        }
+        .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;
+        }
+        .ant-layout-content {
+          height: 100%;
+          padding: 24px;
+          background-color: #FFFFFF;
+        }
+      }
+    }
+  }
+}
+.box {
+  width: 100%;
+  border: 1px solid #DAF2E7;
+  .title {
+    width: 100%;
+    padding: 0px 7px;
+    font-size: 12px;
+    color: #00B37A;
+    background-color: #E4F7EF;
+  }
+  .tagBlue {
+    color: #3877FF;
+    background-color: #F0F7FF;
+  }
+  .content {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0px 7px;
+    .row {
+      margin: 2px 0px;
+      flex: 0 0 50%;
+      .label {
+        width: 64px;
+        font-size: 12px;
+        color: #909399;
+      }
+      .col {
+        font-size: 12px;
+        color: #303133;
+      }
+    }
+  }
+}
+.boxBlue {
+  margin-top: 16px;
+  border: 1px solid #F0F7FF;
+}
+

src/pages/transaction/purchaseAbility/offter/addOffter/modal/selectProduct.tsx

+import React, { useRef } from 'react';
+import {
+  Drawer,
+  Button
+} from 'antd';
+import { StandardTable } from 'god';
+import { ColumnType } from 'antd/lib/table/interface';
+import { PublicApi } from '@/services/api';
+import NiceForm from '@/components/NiceForm';
+import { FORM_FILTER_PATH } from '@/formSchema/const';
+import { createFormActions, FormEffectHooks } from '@formily/antd';
+import { useRowSelectionTable } from '@/hooks/useRowSelectionTable';
+import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
+import { searchSelectGetSelectCategoryOptionEffect } from '@/pages/transaction/effect/index';
+import {
+  OfferProductSchema,
+} from '../../../schema';
+
+const formActions = createFormActions();
+
+interface Iprops {
+  visible: boolean,
+  onclose?(),
+  confirm?(e: any),
+}
+
+const SelectProduct: React.FC<Iprops> = (props: any) => {
+  const ref = useRef({});
+  const { visible, onclose, confirm } = props;
+  const [rowSelection, RowCtl] = useRowSelectionTable({ customKey: 'id', type: 'radio' });
+  const columns: ColumnType<any>[] = [
+    {
+      title: 'ID',
+      key: 'id',
+      dataIndex: 'id'
+    },
+    {
+      title: '商品名称',
+      key: 'name',
+      dataIndex: 'name'
+    },
+    {
+      title: '品类',
+      key: 'customerCategoryName',
+      dataIndex: 'customerCategoryName'
+    },
+    {
+      title: '品牌',
+      key: 'brandName',
+      dataIndex: 'brandName',
+      render: (text: any) => <span>{(text && Object.keys(text).length > 0) && text.name}</span>
+    },
+  ]
+  const data = [{
+    applyTime: 1610691292164,
+    brandName: "t11-1",
+    code: "P000066",
+    commodityId: 68,
+    commodityUnitPriceAndPicId: null,
+    customerCategoryName: "床上用品",
+    goodsId: 13,
+    id: 198,
+    isMemberPrice: false,
+    logistics: { deliveryType: 3, carriageType: null, weight: null, useTemplate: null, templateId: null },
+    mainPic: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/c02b01ccaed8402f862db2d7c3d718371610691032335.jpg",
+    max: null,
+    memberId: 8,
+    memberName: "昊嘉网络有限公司",
+    memberRoleId: 4,
+    memberRoleName: "企业会员_服务提供者",
+    min: null,
+    minOrder: 3,
+    name: "tttttttt/黄色/M/111111",
+    priceType: 2,
+    status: 5,
+    stockCount: null,
+    unitName: "件",
+    unitPrice: null,
+  }]
+  const fetchGoodsData = (params: any) => {
+    return new Promise(resolve => {
+      // PublicApi.getProductCommodityCommonGetCommodityListBySeller({ ...params, priceTypeList: 2, environment: 1, shopType: 1 }).then(res => {
+      //   resolve(res.data)
+      // })
+      const queryResult = data.find(v => v.id === params.keywords);
+      setTimeout(() => {
+        resolve({
+          code: 200,
+          message: '',
+          data: queryResult ? [queryResult] : data,
+        });
+      }, 1000);
+    })
+  }
+  /** 关闭 */
+  const onClose = () => {
+    onclose();
+    RowCtl.setSelectRow([]);
+    RowCtl.setSelectedRowKeys([]);
+  }
+
+  console.log(rowSelection, RowCtl)
+  return (
+    <Drawer
+      visible={visible}
+      onClose={onclose}
+      title='选择货品'
+      width={900}
+      footer={
+        <div
+          style={{
+            textAlign: 'right',
+          }}
+        >
+          <Button onClick={onClose} style={{ marginRight: 8 }}>
+            取消
+          </Button>
+          <Button onClick={() => confirm(RowCtl.selectRow[0])} type="primary">
+            确定
+          </Button>
+        </div>
+      }
+    >
+      <StandardTable
+        currentRef={ref}
+        columns={columns}
+        tableProps={{ rowKew: 'id' }}
+        rowSelection={rowSelection}
+        fetchTableData={(params) => fetchGoodsData(params)}
+        controlRender={
+          <NiceForm
+            actions={formActions}
+            effects={($, actions) => {
+              useStateFilterSearchLinkageEffect($, actions, 'name', FORM_FILTER_PATH)
+              FormEffectHooks.onFieldChange$('category').subscribe(state => {
+                searchSelectGetSelectCategoryOptionEffect(actions, 'category')
+              })
+            }}
+            schema={OfferProductSchema}
+          >
+          </NiceForm>
+        }
+      />
+    </Drawer>
+  )
+}
+export default SelectProduct

src/pages/transaction/purchaseAbility/schema/index.ts

@@ -279,3 +279,88 @@ export const formSearch: ISchema = {
     }
   }
 }
+
+/** 选择报价商品 */
+export const OfferProductSchema: ISchema = {
+  type: 'object',
+  properties: {
+    megalayout: {
+      type: 'object',
+      "x-component": 'mega-layout',
+      properties: {
+        name: {
+          type: 'string',
+          "x-component": "Search",
+          "x-mega-props": {
+
+          },
+          "x-component-props": {
+            placeholder: '货品名称',
+            align: 'flex-left',
+          }
+        }
+      }
+    },
+    [FORM_FILTER_PATH]: {
+      type: 'object',
+      "x-component": "flex-layout",
+      "x-component-props": {
+        rowStyle: {
+          justifyContent: 'flex-start',
+          flexWrap: 'nowrap'
+        },
+        colStyle: {//改变间隔
+          marginRight: 20
+        }
+      },
+      properties: {
+        PRO_LAYOUT: {
+          type: 'object',
+          "x-component": 'mega-layout',
+          "x-mega-props": {
+            span: 5
+          },
+          "x-component-props": {
+            inline: true
+          },
+          properties: {
+            code: {
+              type: 'string',
+              "x-component-props": {
+                placeholder: '货号'
+              }
+            },
+            customerCategory: {
+              type: 'string',
+              "x-component-props": {
+                placeholder: '品类'
+              }
+            },
+            brand: {
+              type: 'string',
+              "x-component-props": {
+                placeholder: '品牌'
+              }
+            },
+            type: {
+              type: 'string',
+              "x-component-props": {
+                placeholder: '规格型号'
+              }
+            },
+
+          }
+        },
+        sumbit: {
+          "x-component": 'Submit',
+          "x-mega-props": {
+            span: 1
+          },
+          "x-component-props": {
+            children: '查询'
+          }
+        }
+      }
+    }
+  }
+}