fe_service_ebtp_frontend/src/pages/Tender/BiddingResponse/index.tsx

import React, { useState, useEffect } from 'react';
import { Button, Table, Space, Modal, Collapse } from 'antd';
import { getPayandreply, getDetail } from './service';
import '@/assets/ld_style.less';
import { getProId } from '@/utils/session';

const { Panel } = Collapse;

const Index: React.FC<{}> = () => {
  const [detailList, setDetailList] = useState<any>([]); // 标包详情
  const [downloadList, setDownloadList] = useState<any>([]); // 标书下载记录
  const [detailVisible, setDetailVisible] = useState<boolean>(false);
  const [packageList, setPackageList] = useState([]);
  const [companyName, setCompanyName] = useState<object>(); // 单位名称
  const [downloadStatus, setDownloadStatus] = useState<object>(); // 状态
  const [contactName, setContactName] = useState<object>(); // 联系人姓名

  const columns: any[] = [  // 标包列表
    {
      title: '序号',
      width: '10%',
      render: (text: any, record: any, index: any) => `${index + 1}`
    },
    {
      title: '单位名称',
      width: '25%',
      dataIndex: 'companyName',
    },
    {
      title: '购标联系人',
      width: '15%',
      dataIndex: 'contactName',
    },
    {
      title: '购标联系人电话',
      width: '20%',
      dataIndex: 'contactTelephone',
    },
    {
      title: '当前状态',
      width: '15%',
      render: (text: any, record: any) => {
        if (record.registerStatus == '4') {
          return (
            <>已退出</>
          )
        } else {
          if (record.downloadStatus == '1') {
            return (
              <>已下载</>
            )
          } else if (record.downloadStatus == '2') {
            return (
              <>已投标</>
            )
          } else {
            if (record.payStatus == '2') {
              return (
                <>已付款</>
              )
            } else if (record.payStatus == '1') {
              return (
                <>未付款</>
              )
            }
          }
        }
      },
    },
    {
      title: '操作',
      width: '15%',
      render: (text: any, record: any) => (
        <Space>
          <Button type="link" danger onClick={() => lookDetail(record)}>查看详情</Button>
        </Space>
      ),
    },
  ];
  const detailColumns: any[] = [  // 标包详情
    {
      title: '序号',
      render: (text: any, record: any, index: any) => `${index + 1}`
    },
    {
      title: '标包编号',
      dataIndex: 'bidSectBizNum',
    },
    {
      title: '标段(包)名称',
      dataIndex: 'bidSectName',
    },
    {
      title: '标包分类',
      dataIndex: 'bidSectTypeDict',
    },
    {
      title: '购标联系人',
      dataIndex: 'contactName',
    },
    {
      title: '当前状态',
      dataIndex: 'downloadStatus',
      render: (text: any, record: any) => {
        if (record.downloadStatus == '0') {
          return (
            <>未下载</>
          )
        } else if (record.downloadStatus == '1') {
          return (
            <>已下载</>
          )
        } else if (record.downloadStatus == '2') {
          return (
            <>已上传投标文件</>
          )
        } else if (record.downloadStatus == '3') {
          return (
            <>已撤回</>
          )
        }
      },
    }
  ];
  const downloadColumns: any[] = [  // 标书下载记录
    {
      title: '序号',
      width: 80,
      render: (text: any, record: any, index: any) => `${index + 1}`
    },
    {
      title: '标包编号',
      dataIndex: 'bidSectBizNum',
    },
    {
      title: '版本',
      dataIndex: 'downloadVersion',
    },
    {
      title: '下载时间',
      dataIndex: 'downloadTime',
    },
    {
      title: '下载人',
      dataIndex: 'updownUserName',
    },
    {
      title: '下载文件名',
      width: '20%',
      dataIndex: 'fileName',
    }
  ];

  const callback = (key: any) => {
    console.log(key);
  }

  const lookDetail = (val: any) => { // 购标及应答情况查看-查看详情
    setDetailVisible(true)
    setCompanyName(val.companyName)
    setDownloadStatus(val.downloadStatus)
    setContactName(val.contactName)
    getDetail(val.id).then((res) => {
      if (res.code == 200) {
        setDetailList(res.data.projectSection)
        setDownloadList(res.data.bizUpdownRecords)
      }
    })
  }

  useEffect(() => {
    let projectId = getProId()
    getPayandreply(projectId).then((res) => {
      if (res.code == 200) {
        setPackageList(res.data)
      }
    })
  }, []);

  return (
    <>
      <div className="bidContent">
        <Button type="primary" danger>导出购标信息</Button>
        {
          packageList.map((item: any, index: any) => {
            return (
              <Collapse className='m10' defaultActiveKey={['1']} onChange={callback}>
                <Panel header={item.sectionVO.bsName} key="1">
                  <div>
                    <Table pagination={false} columns={columns} dataSource={item.bizSupplierRegisters} />
                  </div>
                </Panel>
              </Collapse>
            )
          })
        }
        <Modal // 查看详情
          title="购标信息"
          width={800}
          visible={detailVisible}
          onCancel={() => setDetailVisible(false)}
          footer={null}
        >
          <div className="relative">
            <Collapse className='m10' defaultActiveKey={['1']}>
              <Panel header="购标申请信息" key="1">
                <div className="address">
                  <p>单位名称：{companyName}</p>
                </div>
              </Panel>
            </Collapse>
          </div>
          <div className="relative">
            <Collapse className='m10' defaultActiveKey={['1']}>
              <Panel header="标包详情" key="1">
                {
                  detailList.map((val: any, index: any) => {
                    val.contactName = contactName
                    val.downloadStatus = downloadStatus
                  })
                }
                <Table
                  pagination={false}
                  columns={detailColumns}
                  dataSource={detailList}
                  className="mt10"
                />
              </Panel>
            </Collapse>
          </div>
          <div className="relative">
            <Collapse className='m10' defaultActiveKey={['1']}>
              <Panel header="标书下载记录" key="1">
                {
                  downloadList.map((val: any, index: any) => {
                    val.bidSectBizNum = detailList[0].bidSectBizNum
                  })
                }
                <Table
                  pagination={false}
                  columns={downloadColumns}
                  dataSource={downloadList}
                  className="mt10"
                />
              </Panel>
            </Collapse>
          </div>
        </Modal>
      </div>
    </>
  )
}
export default Index