✨feat: 确认报价 详情里的表格点击跳转报价单详情

config/routes/index.ts

@@ -58,11 +58,11 @@ const memberCenterRoute = {
     // ShopRoute,
     // CommodityRoute,
     // srm开发临时使用...
-    // ProcurementRoute,
+    ProcurementRoute,
     // // 合同能力
     // contracRoute,
     //...
-    ...asyncRoutes,
+    // ...asyncRoutes,
     {
       path: '/memberCenter/noAuth',
       auth: false,

config/routes/procurementRoute/confirmOffer.ts

@@ -112,6 +112,14 @@ export const confirmOfferRoute = [
         hideInMenu: true,
         noMargin: true,
       },
+      {
+        /**报价单详情 */
+        path: '/memberCenter/procurementAbility/confirmOffer/quote/detail',
+        name: '报价单详情',
+        component: '@/pages/transaction/purchaseAbility/confirmOffer/quote',
+        hideInMenu: true,
+        noMargin: true,
+      }
     ]
   }
 ]

src/pages/transaction/purchaseAbility/components/detail/components/bidInfoLayout/index.tsx

+import React from 'react';
+import { Tabs } from 'antd';
+import Card from '../../../card';
+
+const BidInfoLayout = () => {
+  return (
+    <Card>
+
+    </Card>
+  )
+}
+export default BidInfoLayout

src/pages/transaction/purchaseAbility/components/detail/components/contrastLyout/index.tsx

@@ -44,7 +44,7 @@ const ContrastLyout: React.FC<ContrastProps> = (props: any) => {
       dataIndex: 'quotedPriceNo',
       render: (text: any, record: any) => (
         <Space direction='vertical'>
-          <EyePreview>{text}</EyePreview>
+          <EyePreview url={`/memberCenter/procurementAbility/confirmOffer/quote/detail?id=${record.id}&number=${record.quotedPriceNo}`}>{text}</EyePreview>
           <Typography.Text>{record.details}</Typography.Text>
         </Space>
       )

src/pages/transaction/purchaseAbility/components/detail/components/otherLayout/index.less

+.cell {
+  display: flex;
+  h5 { margin-bottom: 2em; }
+  .label {
+    flex: 0 0 25%;
+      color: #909399;
+  }
+}

src/pages/transaction/purchaseAbility/components/detail/components/otherLayout/index.tsx

+/** 详情通用 - 基本信息 */
+import React from 'react';
+import { Row, Col } from 'antd';
+import Card from '../../../card';
+import style from './index.less';
+
+export interface BasicInfoProps {
+  effect?: any,
+}
+
+const count = 0;
+
+const OtherLayout: React.FC<BasicInfoProps> = (props: any) => {
+  const { effect } = props;
+
+  return (
+    <Card
+      id='otherLayout'
+      title='其他说明'
+    >
+      <Row gutter={[8, 8]}>
+        {effect.length > count && effect.map((item, index) => (
+          <Col key={`effect_${index + 1}`} span={8}>
+            { item.col.map((it, idx) => (
+              <div className={style.cell} key={`effect_col_${idx + 1}`}>
+                <h5 className={style.label}>{it.label}: </h5>
+                <h5 className={style.content}>{it.extra}</h5>
+              </div>
+            ))}
+          </Col>
+        ))}
+      </Row>
+    </Card>
+  )
+}
+
+export default OtherLayout

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

+import React, { useState, useEffect, Fragment, useCallback } from 'react';
+import { PublicApi } from '@/services/api';
+import { history } from 'umi';
+import moment from 'moment';
+import { Tag, Badge, Tooltip, Button } from 'antd';
+import { Context, BidDetailContext } from '../../components/detail/components/context';
+import PeripheralLayout from '../../components/detail';
+import BasicLayout from '../../components/detail/components/basicLayout';
+import OtherLayout from '../../components/detail/components/otherLayout';
+
+import {
+  OFFTER_EXTERNALSTATE,
+  OFFTER_EXTERNALSTATE_COLOR,
+  OFFTER_INTERNALSTATE,
+  OFFTER_INTERNALSTATE_COLOR,
+} from '../../constants';
+import { CheckCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+
+const ICONSTYLE: any = {
+  color: '#C0C4CC',
+  fontSize: '14px',
+  marginLeft: '5px'
+}
+
+const TABLINK = [
+  { id: 'basicLayout', title: '基本信息' },
+  { id: 'contrastLyout', title: '报价信息' },
+  { id: 'otherLyout', title: '其他说明' },
+]
+
+const QuoteDetails = () => {
+  const format = (text) => {
+    return <>{moment(text).format("YYYY-MM-DD HH:mm:ss")}</>
+  }
+  const { query: { id, number }, pathname } = history.location;
+  const [dataSource, setDataSource] = useState<any>({});
+  const [basicEffect, setBasicEffect] = useState<any>([]);
+  const [otherEffect, setOtherEffect] = useState<any>([]);
+
+  const handleBasicEffect = (data: any) => {
+    setBasicEffect([
+      {
+        col: [
+          { label: '报价单号', extra: data.quotedPriceNo },
+          { label: '报价摘要', extra: data.quotedDetails },
+          { label: '报价会员', extra: data.createMemberName },
+          { label: '外部状态', extra: <Tag color={OFFTER_EXTERNALSTATE_COLOR[data.externalState]}>{OFFTER_EXTERNALSTATE[data.externalState]}</Tag> }
+        ]
+      },
+      {
+        col: [
+          { label: '对应需求单号', extra: data.purchaseInquiryNo },
+          { label: '联系人姓名', extra: '缺少字段' },
+          { label: '联系人手机', extra: '缺少字段' },
+        ]
+      },
+      {
+        col: [
+          { label: '报价截止时间', extra: format(data.offerEndTime) },
+          { label: '单据时间', extra: format(data.createTime) },
+        ]
+      },
+    ])
+  }
+
+  const handleOtherEffect = (data: any) => {
+    setOtherEffect([
+      {
+        col: [
+          { label: '交付说明', extra: '缺少字段' },
+          { label: '付款说明', extra: data.payDetails },
+          { label: '税费说明', extra: data.taxes },
+        ]
+      },
+      {
+        col: [
+          { label: '物流说明', extra: data.logistics },
+          { label: '包装说明', extra: data.packRequire },
+          { label: '其他说明', extra: data.otherRequire },
+        ]
+      },
+      {
+        col: [
+          { label: '附件', extra: '缺少字段' },
+        ]
+      },
+    ])
+  }
+
+  const fetchDataSource = useCallback(async() => {
+    await PublicApi.getPurchaseConfirmQuotedPriceOrderDetails({id, number,  current: '1', pageSize: '1' }).then(res => {
+      if (res.code !== 1000) {
+        return;
+      }
+      const { data } = res.data;
+      setDataSource(data);
+      handleBasicEffect(data);
+      handleOtherEffect(data)
+    })
+  }, [])
+
+  useEffect(() => {
+    fetchDataSource()
+  }, [])
+
+  return (
+    <Context.Provider value={dataSource}>
+      <PeripheralLayout
+         no={dataSource.purchaseInquiryNo}
+         tabLink={TABLINK}
+         components={
+           <Fragment>
+             <BasicLayout effect={basicEffect} />
+             <OtherLayout effect={otherEffect} />
+           </Fragment>
+         }
+      />
+    </Context.Provider>
+  )
+}
+export default QuoteDetails;