完成提交比价接口接入

src/pages/transaction/purchaseAbility/confirmOffer/detail/components/bidTable/index.less

+.card-list {
+  font-size: 12px;
+  // line-height: 20px;
+  // margin-top: 24px;
+  // border: 1px solid #F4F5F7;
+  // padding: 12px;
+  p {
+    margin-bottom: 8px;
+  }
+}
+.card-list_title {
+  font-size: 12px;
+  color: #909399;
+}
+
+.bidConfirmWrapper {
+  overflow-x: scroll;
+  .bidRowWrapper {
+    min-width: 1300px;
+  }
+  :global {
+    .ant-row {
+      .ant-col {
+        .ant-row {
+          .ant-col-4 {
+            padding-top: 0;
+            padding-bottom: 0;
+            margin-bottom: 2px;
+            margin-top: 2px;
+            background-color: #FFFFFF;
+          }
+        }
+      }
+    }
+  }
+  background: #F4F5F7;
+  .bidTableHead {
+    height: 40px;
+    line-height: 32px;
+    background: #F4F5F7;
+    border: 4px solid #F4F5F7;
+    color: #303133;
+    padding-left: 16px;
+    margin-bottom: 0;
+    img {
+      width: 24px;
+      height: 24px;
+    }
+    .levelCircle {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      line-height: 20px;
+      background: #EBECF0;
+      border-radius: 50%;
+      color: #909399;
+      margin-right: 8px;
+      text-align: center;
+    }
+  }
+  .materialInfo, .amountInfo, .throwBidInfo, .totalWrapper {
+    height: 162px;
+    background-color: #fff;
+    padding: 16px;
+    position: relative;
+    overflow: hidden;
+  }
+  .rankNumber {
+    width: 32px;
+    height: 32px;
+    font-size: 12px;
+    font-weight: 500;
+    color: #606266;
+    line-height: 44px;
+    border-radius: 50%;
+    background-color: #F4F5F7;
+    position: absolute;
+    top: -16px;
+    left: -16px;
+    text-align: right;
+    padding-right: 6px;
+  }
+}

src/pages/transaction/purchaseAbility/confirmOffer/detail/components/context.ts

+import { createContext } from 'react';
+
+// 招标详情 Context
+export const BidDetailContext = createContext<any>({})

src/pages/transaction/purchaseAbility/confirmOffer/detail/components/modal/index.less

+.upload_item {
+  padding: 5px 8px;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #FAFBFC;
+
+  .upload_left {
+    display: flex;
+    align-items: center;
+    color: #303133;
+
+    :global {
+      .anticon-file-word {
+        color: #4279df;
+        font-size: 20px;
+        margin-right: 8px;
+      }
+    }
+  }
+
+  .upload_right {
+    color: #00B37A;
+    cursor: pointer;
+
+    :global {
+      .anticon-delete {
+        margin-left: 19px;
+        color: #C0C4CC;
+      }
+    }
+  }
+}

src/pages/transaction/purchaseAbility/confirmOffer/detail/components/modal/index.tsx

+import React, { useEffect, useState, useContext } from 'react';
+import {
+  Modal,
+  Form,
+  Input,
+  Button,
+  Upload,
+  message
+} from 'antd';
+import { BidDetailContext } from '../context'
+import { UploadOutlined, LinkOutlined, DeleteOutlined } from '@ant-design/icons';
+import { UPLOAD_TYPE } from '@/constants'
+import style from './index.less'
+import { PublicApi } from '@/services/api';
+
+const { TextArea } = Input;
+
+export interface IProps {
+  id: number,
+  turn: number,
+  visible: boolean,
+  handleConfirm: () => void,
+  onCancel: () => void,
+}
+
+const BidModal: React.FC<IProps> = (props: any) => {
+  const [form] = Form.useForm();
+  const { id, turn, visible, handleConfirm, onCancel } = props;
+  const bidDetailContext = useContext(BidDetailContext);
+  const [files, setFiles] = useState([]);
+  const [loading, setloading] = useState(false);
+  const [priceParityInfos, setPriceParityInfos] = useState<any>([]);
+  /**判断文件类型和大小 */
+  const beforeDocUpload = (file: any) => {
+    const isLt20M = file.size / 1024 / 1024 < 20;
+    if (!isLt20M) {
+      message.error('上传文件大小不超过 20M!');
+    }
+    return isLt20M;
+  }
+  // 上传回调
+  const handleChange = ({ file }) => {
+    const arr: any = files;
+    setloading(true);
+    if (file.response) {
+      if (file.response.code === 1000) {
+        arr.push({
+          name: file.name,
+          url: file.response.data
+        })
+        setloading(false);
+      }
+    }
+    setFiles([...arr])
+  }
+  // 删除附件
+  const removeFiles = (index: any) => {
+    const arr = [...files];
+    arr.splice(index, 1);
+    setFiles(arr);
+  }
+
+  useEffect(() => {
+    if (bidDetailContext.length > 0) {
+      const arr: any = bidDetailContext[0].company || [];
+      const params: any = [];
+      arr.forEach((it: any, idx: number) => {
+        let item = {
+          awardCount: it.awardCount,
+          id: it.id,
+          memberId: it.memberId,
+          memberName: it.memberName,
+          memberRoleId: it.memberRoleId,
+          minimum: it.minimum,
+          ranking: it.ranking,
+          subtotal: it.subtotal,
+          sumPrice: it.sumPrice,
+          awardInfoResponses: [],
+        }
+        console.log(item)
+        let awardInfoResponses = [];
+        bidDetailContext.forEach((item: any, index: number) => {
+          let cItem = {
+            brand: item.brand,
+            category: item.category,
+            goodsId: item.goodsId,
+            id: item.id,
+            unit: item.unit,
+            model: item.model,
+            name: item.name,
+            number: item.number,
+            purchaseCount: item.purchaseCount,
+            awardTaxProbability: item.company[idx].awardTaxProbability,
+            taxPrice: item.company[idx].taxPrice,
+            taxProbability: item.company[idx].taxProbability,
+            taxUnitPrice: item.company[idx].taxUnitPrice,
+            isPrize: item.company[idx].isPrize,
+            isTax: item.company[idx].isTax,
+          }
+          awardInfoResponses.push(cItem)
+        })
+        item.awardInfoResponses = awardInfoResponses
+        params.push(item)
+      })
+      setPriceParityInfos(params)
+    }
+  }, [visible])
+
+  const handleSubmit = async () => {
+    try {
+      const values = await form.validateFields();
+      const params = {
+        id,
+        turn,
+        awardComments: values.awardComments,
+        urls: files,
+        priceParityInfos,
+      }
+      PublicApi.postPurchaseConfirmQuotedPriceSubmitContrastPrice(params).then(res => {
+        if (res.code === 1000) {
+          handleConfirm();
+        }
+      })
+    } catch (errInfo) {
+      console.log('Save failed:', errInfo);
+    }
+  }
+
+  return (
+    <Modal
+      title='提交审核'
+      visible={visible}
+      width={600}
+      onCancel={onCancel}
+      onOk={handleSubmit}
+    >
+      <Form form={form} layout="vertical">
+        <Form.Item
+          name='awardComments'
+          label='授标意见'
+        >
+          <TextArea />
+        </Form.Item>
+        <Form.Item label='附件' name='upload'>
+          <div className={style.upload_data}>
+            {files.length > 0 && files.map((v, index) => (
+              <div key={index} className={style.upload_item}>
+                <div className={style.upload_left}>
+                  <LinkOutlined />
+                  <span>{v.name}</span>
+                </div>
+                <div className={style.upload_right} onClick={() => removeFiles(index)}>
+                  <DeleteOutlined />
+                </div>
+              </div>
+            ))}
+          </div>
+          <Upload
+            action="/api/file/file/upload"
+            data={{ fileType: UPLOAD_TYPE }}
+            showUploadList={false}
+            accept='.doc,.docx,.pdf,.ppt,.pptx,.xls,.xlsx'
+            beforeUpload={beforeDocUpload}
+            onChange={handleChange}
+          >
+            <Button loading={loading} icon={<UploadOutlined />}>上传文件</Button>
+            <div style={{ marginTop: '8px' }}>一次上传一个文件，每个附件大小不能超过 20M</div>
+          </Upload>
+        </Form.Item>
+      </Form>
+    </Modal>
+  )
+}
+export default BidModal;

src/pages/transaction/purchaseAbility/confirmOffer/detail/effects/useBidTable.tsx

+import { useState } from 'react'
+
+export const useBidTable = () => {
+  const [dataSource, setDataSource] = useState<any>([]);
+
+  const formContext = {
+    dataSource: dataSource,
+    ctl: {
+      dataSource: dataSource,
+      setDataSource: setDataSource,
+    },
+  }
+
+  return {
+    formContext
+  }
+}