pay-company/src/pages/bills/temporary/index.tsx

import {
  MyButtons,
  MyColumns,
  MyPageContainer,
  MyProTableProps,
  MyTableActions,
  MyToolBarActions,
} from '@/common';

import { MyExport } from '@/components/MyExport';
import { Selects } from '@/components/Select';
import { Apis } from '@/gen/Apis';
import {
  ApprovalTemplatesTypeEnum,
  BillPaymentsTypeEnum,
  BillsStatusEnum,
} from '@/gen/Enums';
import { ProTable } from '@ant-design/pro-components';
import { useNavigate } from '@umijs/max';
import { Tooltip } from 'antd';
import { useState } from 'react';
import AuditPayment from './modals/AuditPayment';
import BillCopy from './modals/BillCopy';
import BillCreate from './modals/BillCreate';
import BIllInfo from './modals/BIllInfo';
import BillRefund from './modals/BillRefund';
import BillUpdate from './modals/BillUpdate';
import PayCreate from './modals/Pay';
import ShowQrCode from './modals/QrCode';

export default function Index({ title = '临时收费' }) {
  const navigate = useNavigate();
  const [getParams, setParams] = useState({});

  return (
    <MyPageContainer
      title={title}
      enableTabs={true}
      tabKey="bills"
      tabLabel={title}
    >
      <ProTable
        {...MyProTableProps.props}
        headerTitle={title}
        request={async (params, sort) => {
          setParams(params);
          return MyProTableProps.request(params, sort, Apis.Bill.Bills.List);
        }}
        toolBarRender={(action: any) => [
          <MyToolBarActions
            key="toolbar"
            actions={{
              export: (
                <MyExport
                  key="export"
                  title="账单导出"
                  item={getParams}
                  download={Apis.Bill.Bills}
                />
              ),
              add: (
                <BillCreate
                  key="Create"
                  reload={action?.reload}
                  title={title}
                />
              ),
            }}
          />,
        ]}
        columns={[
          MyColumns.ID({ search: false }),
          Selects?.AssetProjects({
            title: '选择项目',
            key: 'asset_projects_id',
            hidden: true,
          }),

          {
            key: 'year',
            title: '账单年',
            valueType: 'date',
            fieldProps: {
              picker: 'year',
              format: 'YYYY',
              valueFormat: 'YYYY',
              style: {
                width: '100%',
              },
            },
            hidden: true,
          },
          {
            key: 'month',
            title: '账单月',
            valueType: 'date',
            fieldProps: {
              picker: 'month',
              format: 'YYYY-MM',
              valueFormat: 'YYYY/MM',
              style: {
                width: '100%',
              },
            },
            search: {
              transform: (value) => {
                let month = value.split('-');
                return { year: month[0], month: month[1] };
              },
            },
            hidden: true,
          },
          {
            title: '所属项目',
            dataIndex: ['asset_project', 'name'],
            search: false,
          },
          {
            title: '账单月份',
            render: (_, record) => {
              return `${record.year}-${String(record.month).padStart(2, '0')}`;
            },
            search: false,
          },

          MyColumns.EnumTag({
            title: '类型',
            dataIndex: 'type',
            valueEnum: BillPaymentsTypeEnum,
          }),
          MyColumns.EnumTag({
            title: '状态',
            dataIndex: 'status',
            valueEnum: BillsStatusEnum,
          }),
          {
            title: '账单金额',
            dataIndex: 'amount',
            search: false,
          },
          {
            title: '账单备注',
            dataIndex: 'remark',
            search: false,
            render: (_, item: any) => {
              const text = item?.remark || '';
              if (text.length > 4) {
                return <Tooltip title={text}>{text.slice(0, 10)}...</Tooltip>;
              }
              return text;
            },
          },
          {
            title: '已收金额',
            dataIndex: ['bill_payment', 'amount'],
            search: false,
          },
          {
            title: '收款日期',
            dataIndex: ['bill_payment', 'paid_time'],
            render: (_, item: any) => {
              return item?.bill_payment?.paid_time?.slice(0, 10) || '-';
            },
            search: false,
          },
          {
            title: '收款人',
            render: (_, record) => {
              return `${record?.reconciliation_person || ''}-${
                record?.reconciliation_person_phone || ''
              }`;
            },
            search: false,
          },

          MyColumns.Boolean({
            title: '退款申请',
            dataIndex: 'has_refunding',
          }),

          MyColumns.Option({
            render: (_, item: any, _index, action) => (
              <MyTableActions
                actions={{
                  show: (
                    <BIllInfo
                      item={{ ...item, type: 'primary' }}
                      reload={action?.reload}
                      title="查看"
                    />
                  ),
                  qrcode: (
                    <ShowQrCode key="ShowQrCode" item={item} title="收款码" />
                  ),
                  pay: (
                    <PayCreate
                      item={{ ...item, size: 'small' }}
                      reload={action?.reload}
                      title={title}
                    />
                  ),
                  update: (
                    <BillUpdate
                      item={item}
                      reload={action?.reload}
                      title={title}
                    />
                  ),
                  refund: (
                    <BillRefund
                      item={{
                        ...item,
                        type: item?.type,
                        approval_type: ApprovalTemplatesTypeEnum.Refund.value,
                        total_paid_amount: item.total_paid_amount,
                      }}
                      reload={action?.reload}
                      title={title}
                    />
                  ),
                  audit_payment: (
                    <AuditPayment item={item} reload={action?.reload} />
                  ),
                  copy: (
                    <BillCopy
                      key="Copy"
                      item={{
                        ...item,
                      }}
                      reload={action?.reload}
                      title="复制"
                    />
                  ),
                  delete: (
                    <MyButtons.Delete
                      disabled={
                        item.status === BillsStatusEnum.Paid.value ||
                        item.status === BillsStatusEnum.ToBeConfirmed.value ||
                        item.status === BillsStatusEnum.UnderApproval.value
                      }
                      onConfirm={() =>
                        Apis.Bill.Bills.Delete({ id: item.id }).then(() =>
                          action?.reload(),
                        )
                      }
                    />
                  ),
                }}
              />
            ),
          }),
        ]}
      />
    </MyPageContainer>
  );
}