fe_service_ebtp_frontend/src/pages/Invoice/Supplier/index.tsx

import React, { useState, useRef, useEffect } from 'react';
import { Button, Card } from 'antd';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { addInvoice, getList } from './service';
import EditInvoiceSupplier from './components/EditInvoiceSupplier';
import { handleUpdate } from './utils';
import ViewInvoiceSupplier from './components/ViewInvoiceSupplier';
import '@/assets/zjl_style.less';
import { btnAuthority } from '@/utils/authority';

const InvoiceSupplier: React.FC<{}> = () => {
  const actionRef = useRef<ActionType>();
  //修改页面显隐
  const [updateModalVis, handleUpdateModalVis] = useState<boolean>(false);
  //查看页面显隐
  const [viewModalVis, handleViewModalVis] = useState<boolean>(false);
  //存值
  const [recordValues, setRecordValues] = useState<any>();
  //分页参数
  const [page, setPage] = useState<any>({
    pageSize: 10,
    pageNo: 1,
  });

  const toEdit = (param: any) => {
    setRecordValues(param);
    handleUpdateModalVis(true);
  };

  const toView = (param: any) => {
    setRecordValues(param);
    handleViewModalVis(true);
  };

  const columns: ProColumns<any>[] = [
    {
      title: '序号',
      dataIndex: 'key',
      key: 'key',
      width: 50,
      search: false,
    },
    {
      title: '项目名称',
      dataIndex: 'projectName',
      key: 'projectName',
    },
    {
      title: '公司名称',
      dataIndex: 'companyName',
      key: 'companyName',
    },
    {
      title: '发票类型',
      dataIndex: 'type',
      key: 'type',
      valueType: 'select',
      width: 115,
      valueEnum: {
        '0': '增值税普通发票',
        '1': '增值税专用发票',
      },
      search: false,
    },
    {
      title: '发票状态',
      dataIndex: 'state',
      valueType: 'select',
      width: 75,
      valueEnum: {
        '0': '未开',
        '1': '已开',
      },
    },
    {
      title: '是否需要邮寄',
      width: 100,
      render:(_: any,record: any) => record.isMail == -1 ? '无需邮寄' : '需要邮寄',
      search: false,
    },
    {
      title: '操作',
      dataIndex: 'option',
      width: 70,
      valueType: 'option',
      search: false,
      render: (_, record) =>
        record.state == 1 ? (
          <Button type="text" key="view" onClick={() => toView(record)}>
            查看
          </Button>
        ) : (
          <Button type="text" key="edit" onClick={() => toEdit(record)} hidden={btnAuthority(["ebtp-supplier"])}>
            修改
          </Button>
        ),
    },
  ];
  return (
    <Card
      title="我的发票列表"
      bodyStyle={{ padding: '1px 24px' }}
      style={{ borderRadius: 6 }}
      className="confirm"
    >
      <ProTable
        actionRef={actionRef} //action触发后更新表格
        columns={columns} //表格
        search={{ labelWidth: 70, span: 6 }}
        onReset={() => setPage({ pageSize: 10, pageNo: 1 })}
        pagination={{
          defaultPageSize: 10,
          onChange: (page, pageSize) => setPage({ pageSize: pageSize, pageNo: page }),
          onShowSizeChange: (current, pageSize) => setPage({ pageSize: pageSize, pageNo: current }),
        }} //默认显示条数
        options={false}
        size="small"
        request={async (params) =>
          await getList(params, page).then((res) => {
            let data = res.data.records;
            data.forEach((ele: any, index: any) => {
              ele.key = res.data.size * (res.data.current - 1) + index + 1;
            });
            return {
              data: data,
              total: res.data.total,
              success: res.success,
              pageSize: res.data.size,
              current: res.data.current,
            };
          })
        }
      />
      <EditInvoiceSupplier
        onCancel={() => {
          handleUpdateModalVis(false);
          setRecordValues(undefined);
          actionRef.current?.reload?.();
        }}
        onSubmit={async (value) => {
          const success = await handleUpdate(value);
          if (success) {
            handleUpdateModalVis(false);
            setRecordValues(undefined);
            actionRef.current?.reload?.();
          }
        }}
        modalVisible={updateModalVis}
        values={recordValues}
      />
      <ViewInvoiceSupplier
        onCancel={() => {
          handleViewModalVis(false);
          setRecordValues(undefined);
        }}
        modalVisible={viewModalVis}
        values={recordValues}
      />
    </Card>
  );
};
export default InvoiceSupplier;