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

import React, { useState, useRef, } from 'react';
import { message,Button } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { TableListItem, FormValueType } from './data.d'
import UpdateForm from './components/updateForm';
import {updateInv} from './service';



/**
 * 更新节点
 * @param fields
 */
const handleUpdate = async (fields: FormValueType) => {
  const hide = message.loading('正在配置');
  try {
    await updateInv({
      companyName: fields.companyName,
      shibieNo: fields.shibieNo,
      companyAdd: fields.companyAdd,
      companyPhone: fields.companyPhone,
      bank: fields.bank,
      bankNo: fields.bankNo,
      area: fields.area,
      allAdd: fields.allAdd,
      man: fields.man,
      manPh: fields.manPh,
      status: fields.status,
    });
    hide();

    message.success('配置成功');
    return true;
  } catch (error) {
    hide();
    message.error('配置失败请重试！');
    return false;
  }
};
const invoice: React.FC<{}> = () => {
  const actionRef = useRef<ActionType>();
  //修改页面显隐
  const [updateModalVis, handleUpdateModalVis] = useState<boolean>(false);
  //存值
  const [formValues, setFormValues] = useState({});
  //假数据
  const genList = (current: number, pageSize: number) => {
    const tableDataSource: any[] | undefined = [];
    for (let i = 0; i < pageSize; i += 1) {
      const index = (current - 1) * 10 + i;
      tableDataSource.push({
        key: index,
        proName: '2020年长春市分公司集采项目',
        invType: Math.floor(Math.random() * 2),
        status: Math.floor(Math.random() * 2),
        companyName: '联通系统集成有限公司吉林省分公司',
        shibieNo: '1234567890111111',
        companyAdd: `吉林省长春市解放大路3535号${index}`,
        companyPhone: '0431-84564561',
        bank: '中国银行',
        bankNo: '6212264200003894945',
        area: `吉林省长春市宽城区${index}`,
        allAdd: '吉林省长春市解放大路3535号',
        man: '邢书源邢书源邢书源',
        manPh: '18643124142',
      });
    }
    //撤销方法
    tableDataSource.reverse();
    return tableDataSource;
  };
  let tableDataSource = genList(1, 100);

  const columns: ProColumns<TableListItem>[] = [
    { title: '序号', dataIndex: 'index', valueType: 'index', width: 10, },
    { title: '项目名称', dataIndex: 'proName', width: 300, copyable: true },
    {
      title: '发票类型', dataIndex: 'invType', width: 150,
      valueEnum: {
        0: { text: '普通' },
        1: { text: '专用' },
      },
    },
    {
      title: '状态', dataIndex: 'status', sorter: true, width: 100,
      valueEnum: {
        0: { text: '未开', status: 'Processing' },
        1: { text: '已开', status: 'Success' },
      },
    },
    {
      title: '操作', dataIndex: 'option', width: 180,
      valueType: 'option',
      render: (_, record) => {
        return (
          <>
            <Button size='small' disabled={record.status == 1} onClick={() => { setFormValues(record);handleUpdateModalVis(true); }}>修改</Button>
          </>
        )
      }
    },
  ];
  return (
    <PageHeaderWrapper>
      <ProTable<any>
        actionRef={actionRef}//action触发后更新表格
        columns={columns}//表格
        search={{ labelWidth: 70, span: 6 }}
        pagination={{ defaultPageSize: 10 }}//默认显示条数
        //request={(params, sorter, filter) => queryEntrust({ ...params, sorter, filter })}//数据
        dataSource={tableDataSource}
        bordered
      />
      {formValues && Object.keys(formValues).length ? (
        //分派界面
        <UpdateForm
          onCancel={() => {
            handleUpdateModalVis(false);
            setFormValues({});
          }}
          onSubmit={async (value) => {
            const success = await handleUpdate(value);
            if (success) {
              handleUpdateModalVis(false);
              setFormValues({});
              if (actionRef.current) {
                actionRef.current.reload();
              }
            }
          }}
          updateModalVis={updateModalVis}
          values={formValues}
        />
      ) : null}
    </PageHeaderWrapper>

  )
};
export default invoice;