fe_service_ebtp_frontend/src/pages/Finance/Cost/components/Complete.tsx

import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
import { Button, Input, message, Space } from 'antd';
import React, { useRef, useState } from 'react';
import { addInvoice, getList } from './service';
import '@/assets/xsy_style.less';
import AddInvoiceComplete from './AddInvoiceComplete';
import { btnAuthority } from '@/utils/authority';

const Complete: React.FC<{}> = () => {
  const [invoiceModalVis, handleInvoiceModalVis] = useState<boolean>(false); //发票

  const actionRefComplete = useRef<ActionType>();
  //多选keys
  const [keys, setKeys] = useState<any>([]);
  //当前选中行的数据
  const [recordData, setRecordData] = useState<any>();
  const [proName, setProName] = useState<any>();//项目名称

  const columnsComplete: ProColumns<any>[] = [
    //已完成表格
    { title: '项目名称', dataIndex: 'projectName', width: '35%' },
    {
      title: '费用类型', width: '5%', render: (_, record) => {
        let val = '-';
        if (record.expensesType == '1') {//标书费  采购文件费用 招募文件费用
          if (record.bidMethodDict === 'procurement_mode_1' || record.bidMethodDict === 'procurement_mode_2') {
            val = '标书费'
          } else if (record.bidMethodDict === 'procurement_mode_4') {
            val = '招募文件费用'
          } else { val = '采购文件费用' }
        } else if (record.expensesType == '4') {//中标服务费 中选服务费
          if (record.bidMethodDict === 'procurement_mode_1' || record.bidMethodDict === 'procurement_mode_2') {
            val = '中标服务费'
          } else { val = '中选服务费' }
        } else if (record.expensesType == '5') {//投标保证金 保证金
          if (record.bidMethodDict === 'procurement_mode_1' || record.bidMethodDict === 'procurement_mode_2') {
            val = '投标保证金'
          } else { val = '保证金' }
        }
        return val;
      }
    },
    { title: '费用内容描述', dataIndex: 'commodityDescribe', width: '25%' },
    { title: '下单时间', dataIndex: 'createDate', width: '10%', valueType: 'dateTime' },
    { title: '支付时间', dataIndex: 'paymentTime', width: '10%', valueType: 'dateTime' },
    { title: '金额(元)', dataIndex: 'amount', width: '6%', render: (_, record) => record.chargeType == "0" ? "免费" : record.amount },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => {
        if (record.chargeType == "0") {//免费无需申请发票
          return null;
        }
        if (record.bidInvoice == null) {
          return <Button
            type="text"
            onClick={() => {
              setRecordData(record);
              handleInvoiceModalVis(true);
            }}
            disabled={record.bidInvoice == null ? false : true}
            hidden={btnAuthority(["ebtp-supplier"])}
          >
            申请发票
          </Button>
        } else {
          return <Button
            type="link"
            style={{ paddingLeft: 4, paddingRight: 4 }}
            disabled
          >
            已申请
          </Button>
        }
      },
    },
  ];
  return (
    <div style={{ padding: '0px 24px' }}>
      <ProTable
        actionRef={actionRefComplete} //action触发后更新表格
        columns={columnsComplete} //表格
        request={(params) =>
          getList({ pageNo: params.current, pageSize: params.pageSize, payState: 2, projectName: proName }).then((res) => {
            const result = {
              data: res.data.records,
              total: res.data.total,
              success: res.data.success,
              pageSize: res.data.pageSize,
              current: res.data.current,
            };
            return result;
          })
        }
        search={false}
        size="small"
        rowKey="id"
        options={false}
        rowSelection={{
          getCheckboxProps: (record) => ({
            disabled: record.bidInvoice == null ? record.chargeType == "0" : true
          }),
          preserveSelectedRowKeys: true,
          // columnWidth: '50px',
          // fixed: true,
        }}
        pagination={{ defaultPageSize: 10 }} //默认显示条数
        // bordered
        tableAlertRender={({ selectedRowKeys, selectedRows, onCleanSelected }) => (
          <Space size={24}>
            <span>
              已选 {selectedRowKeys.length} 项
              <a style={{ marginLeft: 8 }} onClick={onCleanSelected}>
                取消选择
              </a>
              <a
                style={{ marginLeft: 8 }}
                onClick={() => {
                  setKeys(selectedRowKeys);
                  handleInvoiceModalVis(true);
                }}
                hidden={btnAuthority(["ebtp-supplier"])}
              >
                批量申请
              </a>
            </span>
          </Space>
        )}
        tableAlertOptionRender={false}
        toolBarRender={() => [
          <>
            <Input type="text" placeholder='项目名称' value={proName} onChange={(event) => setProName(event.target.value)} />
            <Button
              type="primary"
              key="search"
              onClick={() => {
                actionRefComplete.current?.reload();
              }}
            >
              查询
            </Button>
            <Button key='reload' onClick={() => {
              setProName('')
              actionRefComplete.current?.reload();
            }}>重置</Button>
          </>,
        ]}
      />
      <AddInvoiceComplete
        modalVisible={invoiceModalVis}
        onCancel={() => handleInvoiceModalVis(false)}
        onSubmit={async (value: any) => {
          if (recordData == undefined || recordData == '') {
            value.orderIds = keys
          } else {
            let orderIds: any[] = [];
            orderIds.push(recordData.id);
            value.orderIds = orderIds;
          }
          await addInvoice(value).then((res) => {
            if (res.code == 200) {
              message.success('申请成功!');
              handleInvoiceModalVis(false);
              setRecordData('');
              actionRefComplete.current?.reloadAndRest?.()
            } else {
              message.error(res.message);
              setRecordData('');
            }
          });
        }}
      />
    </div>
  );
};
export default Complete;