feat: 完善采购询价详情的展示

config/routes/index.ts

@@ -111,7 +111,7 @@ const memberCenterRoute = {
             },
             {
               // 采购需求单详情
-               path: '/memberCenter/procurementAbility/inquiry/preview',
+               path: '/memberCenter/procurementAbility/purchaseInquiry/inquiry/preview',
                name: '采购需求单详情',
                component: '@/pages/transaction/purchaseAbility/purchaseInquiry/detail',
                hideInMenu: true,
@@ -125,7 +125,7 @@ const memberCenterRoute = {
             },
             {
               // 待新增采购需求单详情
-               path: '/memberCenter/procurementAbility/addInquiry/preview',
+               path: '/memberCenter/procurementAbility/purchaseInquiry/addInquiry/preview',
                name: '待新增采购需求单详情',
                component: '@/pages/transaction/purchaseAbility/purchaseInquiry/detail',
                hideInMenu: true,
@@ -146,7 +146,7 @@ const memberCenterRoute = {
             },
             {
               // 待审核采购需求单(一级)详情
-               path: '/memberCenter/procurementAbility/auditInquiryOne/preview',
+               path: '/memberCenter/procurementAbility/purchaseInquiry/auditInquiryOne/preview',
                name: '待审核采购需求单(一级)详情',
                component: '@/pages/transaction/purchaseAbility/purchaseInquiry/detail',
                hideInMenu: true,
@@ -160,7 +160,7 @@ const memberCenterRoute = {
             },
             {
               // 待审核采购需求单(二级)详情
-               path: '/memberCenter/procurementAbility/auditInquiryTwo/preview',
+               path: '/memberCenter/procurementAbility/purchaseInquiry/auditInquiryTwo/preview',
                name: '待审核采购需求单(二级)详情',
                component: '@/pages/transaction/purchaseAbility/purchaseInquiry/detail',
                hideInMenu: true,
@@ -174,7 +174,7 @@ const memberCenterRoute = {
             },
             {
               // 待提交采购需求单详情
-               path: '/memberCenter/procurementAbility/submitInquiry/preview',
+               path: '/memberCenter/procurementAbility/purchaseInquiry/submitInquiry/preview',
                name: '待提交采购需求单详情',
                component: '@/pages/transaction/purchaseAbility/purchaseInquiry/detail',
                hideInMenu: true,

src/pages/transaction/purchaseAbility/components/detailDrawer/index.less

+.drawerBox {
+  :global {
+    .ant-drawer-body {
+      padding: 0;
+      .ant-row {
+        height: 100%;
+        .ant-anchor {
+          padding-left: 0px;
+          .ant-anchor-ink {
+            display: none;
+          }
+          .ant-anchor-link {
+            padding: 12px 12px 12px 12px;
+          }
+          .ant-anchor-link-active {
+            box-sizing: border-box;
+            border-left: 2px solid #00B37A;
+          }
+        }
+      }
+    }
+  }
+  .affix_title {
+    font-size: 14px;
+    margin-bottom: 12px;
+    color: #909399;
+    .divider_style {
+      width: 2px;
+      height: 16px;
+      margin: 0px 5px 0px 0px ;
+      background-color: #00B37A;
+    }
+  }
+  .list {
+    display: flex;
+    h5 {
+      margin-bottom: 2em;
+    }
+    .listLable {
+      flex: 0 0 25%;
+      color: #909399;
+    }
+  }
+}

src/pages/transaction/purchaseAbility/components/detailDrawer/index.tsx

+import React from 'react';
+import { Drawer, Anchor, Row, Col, Divider } from 'antd';
+import style from './index.less';
+
+const { Link } = Anchor;
+
+interface IProps {
+  dataSource: [],
+  visible: boolean,
+  title?: string,
+  onOk?: () => void,
+  onCalcel?: () => void,
+}
+
+const DetailDrawer: React.FC<IProps> = (props: any) => {
+  const { dataSource, visible, title, onOk, onCalcel } = props;
+  return (
+    <Drawer
+      title={title}
+      placement='right'
+      visible={visible}
+      onClose={onCalcel}
+      width="40%"
+      className={style.drawerBox}
+    >
+      <Row>
+        <Col span={6}>
+          <Anchor>
+            {dataSource.map((item, index) => (
+              <Link key={`link${index + 1}`} href={`#link${index + 1}`} title={item.linkTitle} />
+            ))}
+          </Anchor>
+        </Col>
+        <Col
+          span={18}
+          style={{
+            height: '100%',
+            padding: '16px',
+            overflowY: 'scroll',
+            borderLeft: '1px solid #F4F5F7',
+          }}
+        >
+          {dataSource.map((item, index) => (
+            <div key={`link${index + 1}`} id={`#link${index + 1}`}>
+              <div className={style.affixTitle}>
+                <Divider type="vertical" className={style.dividerStyle} />
+                {item.linkTitle}
+              </div>
+              { item.linkContent.map((items, keys) => (
+                <div key={`content${keys + 1}`} className={style.list}>
+                  <h5 className={style.listLable} style={{ flex: '0 0 100px' }}>{items.label}：</h5>
+                  <h5 className={style.listContent}>{items.content}</h5>
+                </div>
+              ))}
+            </div>
+          ))}
+        </Col>
+      </Row>
+    </Drawer>
+  )
+}
+export default DetailDrawer;

src/pages/transaction/purchaseAbility/purchaseInquiry/addInquiry/index.tsx

@@ -18,7 +18,7 @@ const AddInquiry = () => {
     key: 'purchaseInquiryNo',
     dataIndex: 'purchaseInquiryNo',
     render: (text: any, record: any) => <EyePreview
-      url={`/memberCenter/procurementAbility/addInquiry/preview?id=${record.id}&number=${record.purchaseInquiryNo}`}>{text}</EyePreview>
+      url={`/memberCenter/procurementAbility/purchaseInquiry/addInquiry/preview?id=${record.id}&number=${record.purchaseInquiryNo}`}>{text}</EyePreview>
   }, {
     title: '需求摘要',
     key: 'details',
@@ -50,6 +50,13 @@ const AddInquiry = () => {
     title: '操作',
     key: 'operate',
     dataIndex: 'operate',
+    render: (text: any, record: any) => (
+      <>
+        <Button type='link'>提交审核</Button>
+        <Button type='link'>修改</Button>
+        <Button type='link'>删除</Button>
+      </>
+    )
   }];
   return (
     <Table

src/pages/transaction/purchaseAbility/purchaseInquiry/auditInquiryOne/index.tsx

@@ -16,7 +16,7 @@ const AuditInquiryOne = () => {
     key: 'purchaseInquiryNo',
     dataIndex: 'purchaseInquiryNo',
     render: (text: any, record: any) => <EyePreview
-        url={`/memberCenter/procurementAbility/auditInquiryOne/preview?id=${record.id}&number=${record.purchaseInquiryNo}`}>{text}</EyePreview>
+        url={`/memberCenter/procurementAbility/purchaseInquiry/auditInquiryOne/preview?id=${record.id}&number=${record.purchaseInquiryNo}`}>{text}</EyePreview>
       }, {
     title: '需求摘要',
     key: 'details',
@@ -48,6 +48,11 @@ const AuditInquiryOne = () => {
     title: '操作',
     key: 'operate',
     dataIndex: 'operate',
+    render: (text: any, record: any) => (
+      <>
+        <Button type='link'>审核</Button>
+      </>
+    )
   }];
   return (
     <Table

src/pages/transaction/purchaseAbility/purchaseInquiry/auditInquiryTwo/index.tsx

@@ -16,7 +16,7 @@ const AuditInquiryTwo = () => {
     key: 'purchaseInquiryNo',
     dataIndex: 'purchaseInquiryNo',
     render: (text: any, record: any) => <EyePreview
-      url={`/memberCenter/procurementAbility/auditInquiryTwo/preview?id=${record.id}&number=${record.purchaseInquiryNo}`}>{text}</EyePreview>
+      url={`/memberCenter/procurementAbility/purchaseInquiry/auditInquiryTwo/preview?id=${record.id}&number=${record.purchaseInquiryNo}`}>{text}</EyePreview>
   }, {
     title: '需求摘要',
     key: 'details',
@@ -48,6 +48,11 @@ const AuditInquiryTwo = () => {
     title: '操作',
     key: 'operate',
     dataIndex: 'operate',
+    render: (text: any, record: any) => (
+      <>
+        <Button type='link'>审核</Button>
+      </>
+    )
   }];
   return (
     <Table

src/pages/transaction/purchaseAbility/purchaseInquiry/detail/index.tsx

 import React, { useEffect, useState, useRef } from 'react';
-import { Anchor, Radio, Steps, Row, Col, Table } from 'antd';
+import { Anchor, Radio, Steps, Row, Col, Table, Tooltip, Switch } from 'antd';
 import { history } from 'umi';
 import style from './index.less';
-import { ArrowLeftOutlined } from '@ant-design/icons';
+import { ArrowLeftOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import { StandardTable } from 'god';
 import { GetPurchasePurchaseInquiryDetailsResponse } from '@/services/PurchaseApi/id4172';
 import { PublicApi } from '@/services/api';
+import DetailDrawer from '../../components/detailDrawer';
+import EyePreview from '@/components/EyePreview';
 
 const { Link } = Anchor;
 const { Step } = Steps;
@@ -22,6 +24,11 @@ const LogStatesType = {
   interiorLogStates: 2,
 }
 
+const TYPE = {
+  1: '系统匹配',
+  2: '指定会员',
+}
+
 const Detail: React.FC<{}> = () => {
   const ref = useRef({});
   const { id, number } = history.location.query;
@@ -38,8 +45,10 @@ const Detail: React.FC<{}> = () => {
   const [targetOffset, setTargetOffset] = useState<number | undefined>(undefined);
   const [logStatesStatus, setLogStatesStatus] = useState<number>(LogStatesType.externalLogStates);
   const [logStatus, setLogStatus] = useState<number>(LogType.externalLogs);
+  const [visible, setVisible] = useState<boolean>(false);
+  const [dataSource, setDataSource] = useState([])
   useEffect(() => {
-    setTargetOffset(window.innerHeight / 10);
+    setTargetOffset(window.innerHeight / 8);
     const parmas = {
       id,
       number,
@@ -63,6 +72,58 @@ const Detail: React.FC<{}> = () => {
     }
   };
   /** 采购物料 */
+  const handleDetailDrawer = (item: any) => {
+    setDataSource([
+      {
+        linkTitle: '基本信息',
+        linkContent: [
+          {
+            label: '物料编号',
+            content: item.number
+          },
+          {
+            label: '物料名称',
+            content: item.name
+          },
+          {
+            label: '规格型号',
+            content: item.model
+          },
+          {
+            label: '品类',
+            content: item.category
+          },
+          {
+            label: '品牌',
+            content: item.brand
+          },
+        ]
+      },
+      {
+        linkTitle: '采购数量',
+        linkContent: [
+          {
+            label: '单位',
+            content: item.unit
+          },
+          {
+            label: '采购数量',
+            content: item.purchaseCount
+          },
+        ]
+      },
+      {
+        linkTitle: '附件',
+        linkContent: [
+          {
+            label: '附件',
+            content: item.urls
+          },
+        ]
+      }
+    ])
+    setVisible(true)
+  }
   const columns = [
     {
       title: '物料编号',
@@ -73,6 +134,7 @@ const Detail: React.FC<{}> = () => {
       title: '物料名称',
       key: 'name',
       dataIndex: 'name',
+      render: (text: any, record: any) => <EyePreview handleClick={() => handleDetailDrawer(record)} type='button'>{text}</EyePreview>
     },
     {
       title: '规格型号',
@@ -180,10 +242,71 @@ const Detail: React.FC<{}> = () => {
       dataIndex: 'auditOpinion',
     },
   ]
+  /** 需求对接 */
+  const switchState = (text, record, index) => {
+    return <Switch disabled defaultChecked={text ? true : false} size="small" />
+  }
+  const demandColums = [
+    {
+      title: '序号',
+      key: 'number',
+      dataIndex: 'number',
+      render: (text: any, record: any, index: number) => <>{index + 1}</>
+    },
+    {
+      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: (
+        <>
+          <span>需求发送</span>
+          <Tooltip placement="top" title='打开开关，审核通过后，将发送需求至选择的归属会员'>
+            <QuestionCircleOutlined
+              style={{
+                marginLeft: '5px',
+                fontSize: '14px',
+                color: '#909399'
+              }}
+            />
+          </Tooltip>
+        </>
+      ),
+      key: 'state',
+      dataIndex: 'state',
+      render: switchState,
+    },
+    {
+      title: '操作',
+      key: 'operate',
+      dataIndex: 'operate',
+    },
+  ]
   return (
     <div className={style.anchorWrap}>
       <Anchor
-        // targetOffset={targetOffset}
+        targetOffset={targetOffset}
         onChange={handleAnchorChange}
         onClick={handleAnchorClick}
       >
@@ -196,6 +319,7 @@ const Detail: React.FC<{}> = () => {
               }}
             >
               <ArrowLeftOutlined
+                onClick={() => history.goBack()}
                 style={{
                   fontSize: '14px',
                   color: '#909399',
@@ -372,10 +496,14 @@ const Detail: React.FC<{}> = () => {
             </div>
           </div>
           <div className='ant-card-body'>
-            <StandardTable
-              currentRef={ref}
-              columns={columns}
-              tableProps={{ rowKew: 'id' }}
+            <div className={style.list}>
+              <h5 className={style.listLable} style={{ flex: '0 0 100px' }}>发布方式：</h5>
+              <h5 className={style.listContent}>{TYPE[data.type]}</h5>
+            </div>
+            <Table
+              dataSource={data.demandMembers}
+              columns={demandColums}
+              rowKey='id'
             />
           </div>
         </div>
@@ -409,6 +537,13 @@ const Detail: React.FC<{}> = () => {
           </div>
         </div>
       </div>
+      <DetailDrawer
+        visible={visible}
+        title="物料详情"
+        dataSource={dataSource}
+        onOk={() => setVisible(false)}
+        onCalcel={() => setVisible(false)}
+      />
     </div>
   )
 }

src/pages/transaction/purchaseAbility/purchaseInquiry/inquiry/index.tsx

 import React from 'react';
 import Table from '../../components/table'
+import { Button } from 'antd';
 import { ColumnType } from 'antd/lib/table/interface';
 import EyePreview from '@/components/EyePreview';
 import moment from 'moment';
@@ -15,7 +16,7 @@ const Inquiry = () => {
     key: 'purchaseInquiryNo',
     dataIndex: 'purchaseInquiryNo',
     render: (text: any, record: any) => <EyePreview
-        url={`/memberCenter/procurementAbility/inquiry/preview?id=${record.id}&number=${record.purchaseInquiryNo}`}>{text}</EyePreview>
+      url={`/memberCenter/procurementAbility/purchaseInquiry/inquiry/preview?id=${record.id}&number=${record.purchaseInquiryNo}`}>{text}</EyePreview>
   }, {
     title: '需求摘要',
     key: 'details',
@@ -43,6 +44,11 @@ const Inquiry = () => {
     title: '内部状态',
     key: 'interiorState',
     dataIndex: 'interiorState',
+  }, {
+    title: '操作',
+    key: 'operate',
+    dataIndex: 'operate',
+    render: (text: any, record: any) => <Button type='link'>作废</Button>
   }];
   return (
     <Table

src/pages/transaction/purchaseAbility/purchaseInquiry/submitInquiry/index.tsx

@@ -16,7 +16,7 @@ const SubmitInquiry = () => {
     key: 'purchaseInquiryNo',
     dataIndex: 'purchaseInquiryNo',
     render: (text: any, record: any) => <EyePreview
-      url={`/memberCenter/procurementAbility/submitInquiry/preview?id=${record.id}&number=${record.purchaseInquiryNo}`}>{text}</EyePreview>
+      url={`/memberCenter/procurementAbility/purchaseInquiry/submitInquiry/preview?id=${record.id}&number=${record.purchaseInquiryNo}`}>{text}</EyePreview>
   }, {
     title: '需求摘要',
     key: 'details',
@@ -48,6 +48,11 @@ const SubmitInquiry = () => {
     title: '操作',
     key: 'operate',
     dataIndex: 'operate',
+    render: (text: any, record: any) => (
+      <>
+        <Button type='link'>审核</Button>
+      </>
+    )
   }];
   return (
     <Table