✨ feat: 恢复详情一些子组件

src/pages/transaction/components/detailLayout/components/basicLayout/index.less

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

src/pages/transaction/components/detailLayout/components/basicLayout/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 BasicLayout: React.FC<BasicInfoProps> = (props: any) => {
+  const { effect } = props;
+
+  return (
+    <Card
+      id='basicLayout'
+      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 BasicLayout

src/pages/transaction/components/detailLayout/components/context.ts

+import { createContext } from 'react';
+
+/** 详情 */
+export const Context = createContext<any>({})
+
+/**招标详情 Context */
+export const BidDetailContext = createContext<any>({})
+
+/**采购竞价单详情 Context */
+export const PurchaseBidContext = createContext<any>({})

src/pages/transaction/components/detailLayout/components/progressLayout/index.tsx

+/** 详情通用 - 流转进度 */
+import React, { useContext, useState } from 'react';
+import { Radio, Steps } from 'antd';
+import { Context } from '../context';
+import Card from '../../../card';
+import style from './index.less';
+
+const LOGSTATESTYPE = {
+  /** 外部流转 */
+  EXTERNALSTATES: 1,
+  /** 内部流转 */
+  INTERIORSTATES: 2,
+  /** 竞价结果内部流转 */
+  EXMAINEINERIORSTATES: 3
+}
+
+export interface ProgressProps {
+  /** 选中哪个radio */
+  logstate?: number,
+}
+
+const ProgressLayout: React.FC<ProgressProps> = (props: any) => {
+  const { logstate } = props;
+  const context = useContext(Context);
+  const [logStatesStatus, setLogStatesStatus] = useState<number>( logstate || LOGSTATESTYPE.EXTERNALSTATES);
+
+  return (
+    <Card
+      id='progressLayout'
+      title='流转进度'
+      extra={
+        <Radio.Group
+          onChange={(e) => setLogStatesStatus(e.target.value)}
+          defaultValue={logStatesStatus}
+        >
+          {context.externalLogStates && <Radio.Button value={LOGSTATESTYPE.EXTERNALSTATES}>外部流转</Radio.Button>}
+          {context.interiorLogStates && <Radio.Button value={LOGSTATESTYPE.INTERIORSTATES}>内部流转</Radio.Button>}
+          {context.examineInteriorLogStates && <Radio.Button value={LOGSTATESTYPE.EXMAINEINERIORSTATES}>竞价结果内部流转</Radio.Button>}
+        </Radio.Group>
+      }
+    >
+      <Steps
+        progressDot
+      >
+        {logStatesStatus === LOGSTATESTYPE.EXTERNALSTATES ?
+          context.externalLogStates && context.externalLogStates.map(item => (
+            <Steps.Step
+              key={item.state}
+              title={item.operationalProcess}
+              description={item.roleName}
+              status={item.isExecute ? 'finish' : 'wait'}
+            />
+          )) : (logStatesStatus === LOGSTATESTYPE.INTERIORSTATES ?
+            context.interiorLogStates && context.interiorLogStates.map(item => (
+              <Steps.Step
+                key={item.state}
+                title={item.operationalProcess}
+                description={item.roleName}
+                status={item.isExecute ? 'finish' : 'wait'}
+              />
+            )) :
+            context.examineInteriorLogStates && context.examineInteriorLogStates.map(item => (
+              <Steps.Step
+                key={item.state}
+                title={item.operationalProcess}
+                description={item.roleName}
+                status={item.isExecute ? 'finish' : 'wait'}
+              />
+            ))
+          )
+        }
+      </Steps>
+    </Card>
+  )
+}
+
+export default ProgressLayout

src/pages/transaction/components/detailLayout/index.less

+.wrap {
+  .title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 16px;
+    .titleBox {
+      display: flex;
+      align-items: center;
+      .goBack {
+        font-size: 14px;
+        color: #909399;
+      }
+      .titleContext {
+        color: #303133;
+        font-size: 16px;
+        font-weight: 500;
+        margin-left: 8px;
+      }
+    }
+  }
+  .anchor {
+    display: flex;
+    padding: 0 16px;
+  }
+  .layout {
+    margin: 24px;
+    :global {
+      .ant-card {
+        margin-bottom: 24px;
+        .ant-card-head {
+          > .ant-card-head-wrapper {
+            padding: 12px 0;
+          }
+        }
+        .ant-card-extra {
+          padding: 0 0;
+          .ant-radio-button-wrapper {
+            height: 24px;
+            line-height: 23px;
+          }
+          .ant-radio-button-wrapper:hover {
+            color: #606266;
+          }
+          .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
+            color: #fff;
+            background: #6B778C;
+            border-color: #6B778C;
+          }
+        }
+      }
+      .god-table-control {
+        margin-bottom: 0;
+      }
+    }
+  }
+  :global {
+    .ant-anchor {
+      display: flex;
+      .ant-anchor-ink {
+        display: none;
+      }
+      .ant-anchor-link {
+        padding: 14px 0 !important;
+        margin: 0 16px;
+        .ant-anchor-link-title {
+          font-size: 14px;
+          color: #909399;
+        }
+      }
+      .ant-anchor-link-active {
+        position: relative;
+        border-bottom: 2px solid #00B37A;
+        box-sizing: border-box;
+        .ant-anchor-link-title {
+          font-weight: 500;
+          color: #303133;
+        }
+      }
+    }
+  }
+
+}

src/pages/transaction/components/detailLayout/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/components/detailLayout/modal/index.tsx

+import React, { useEffect, useState, useContext } from 'react';
+import {
+  Modal,
+  Form,
+  Input,
+  Button,
+  Upload,
+  message
+} from 'antd';
+import { UploadOutlined, LinkOutlined, DeleteOutlined } from '@ant-design/icons';
+import { UPLOAD_TYPE } from '@/constants'
+import style from './index.less'
+import { PublicApi } from '@/services/api';
+import { BidDetailContext } from '../components/context';
+import { isEmpty, sumBy } from 'lodash';
+
+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 [files, setFiles] = useState([]);
+  const [loading, setloading] = useState(false);
+  const [priceParityInfos, setPriceParityInfos] = useState<any>([]);
+  const dataSource = useContext(BidDetailContext);
+  /**判断文件类型和大小 */
+  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 (dataSource.length > 0) {
+      const arr: any = dataSource[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: [],
+        }
+        let awardInfoResponses = [];
+        dataSource.forEach((item: any, index: number) => {
+          let cItem = {
+            brand: item.brand,
+            category: item.category,
+            goodsId: item.goodsId,
+            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,
+            id: item.company[idx].itemId,
+          }
+          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,
+      }
+      for(let i = 0; i < dataSource.length; i++) {
+        const count = sumBy(dataSource[i].company, 'awardTaxProbability');
+        if (count > 100 || count < 100) {
+          message.warning(`${dataSource[i].number}授标百分比分配不准确，请核对！`);
+          return
+        }
+      }
+      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;