pay-company/src/pages/bills/order_online/modals/OrderShow.tsx

import {
  MyBetaModalFormProps,
  MyColumns,
  MyProTableProps,
  renderTextHelper,
} from '@/common';
import { MyModal } from '@/components/MyModal';
import { Apis } from '@/gen/Apis';
import {
  HouseBillsTypeEnum,
  HouseOrdersAuditStatusEnum,
  HouseOrdersPaymentMethodEnum,
} from '@/gen/Enums';
import { ProCard, ProDescriptions, ProTable } from '@ant-design/pro-components';
import { Space, Spin } from 'antd';
import { useState } from 'react';

export default function OrderShow(props: MyBetaModalFormProps) {
  const [orderData, setOrderData] = useState<any>({});
  const [loading, setLoading] = useState(false);

  const getOrderId = () => {
    if (!props.item) return undefined;
    if (typeof props.item === 'number' || typeof props.item === 'string') {
      return Number(props.item);
    }
    return Number(props.item.id || props.item.order_id);
  };

  const fetchOrderData = () => {
    const id = getOrderId();
    if (!id) return;
    setLoading(true);
    Apis.HouseOrder.HouseOrders.Show({ id })
      .then((res) => {
        setOrderData(res?.data || {});
      })
      .finally(() => {
        setLoading(false);
      });
  };

  return (
    <MyModal
      title={props.title || '查看'}
      modal={{ title: props.title || '查看' }}
      width={800}
      onOpen={() => fetchOrderData()}
      node={
        <Spin spinning={loading}>
          <Space direction="vertical" style={{ width: '100%' }}>
            <ProCard size="small">
              <ProDescriptions bordered size="small" column={2}>
                <ProDescriptions.Item label="房屋名称" span={2}>
                  <Space>
                    {orderData?.house_order_items?.[0]?.asset_house
                      ?.full_name || '-'}
                    <renderTextHelper.Tag
                      Enums={HouseOrdersAuditStatusEnum}
                      value={orderData?.audit_status}
                    />
                  </Space>
                </ProDescriptions.Item>
                <ProDescriptions.Item label="收款账号" span={2}>
                  {orderData?.receipt_account?.company_name || '-'} ；
                  {orderData?.receipt_account?.company_bank || '-'} ；
                  {orderData?.receipt_account?.company_account || '-'}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="关联流水" span={2}>
                  {orderData?.accept_serial_number || '-'}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="收款方式">
                  {Object.values(HouseOrdersPaymentMethodEnum).find(
                    (item) => item.value === orderData?.payment_method,
                  )?.text || '-'}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="收款日期">
                  {orderData?.paid_time || '-'}
                </ProDescriptions.Item>

                <ProDescriptions.Item label="收款金额">
                  {orderData?.actual_paid_amount || '-'}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="录入人">
                  {orderData?.creator || '-'}-{orderData?.creator_phone || '-'}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="录入时间">
                  {orderData?.created_at || '-'}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="审核状态" span={2}>
                  <renderTextHelper.Tag
                    Enums={HouseOrdersAuditStatusEnum}
                    value={orderData?.audit_status}
                  />
                </ProDescriptions.Item>
                <ProDescriptions.Item label="驳回原因" span={2}>
                  {orderData?.reason || '-'}
                </ProDescriptions.Item>
              </ProDescriptions>
            </ProCard>
            <ProCard size="small">
              <ProTable
                {...MyProTableProps.props}
                search={false}
                toolBarRender={false}
                pagination={false}
                dataSource={orderData?.house_order_items}
                rowKey={(record, index) => record?.id || index}
                size="small"
                columns={[
                  {
                    title: '关联账单',
                    render: (_, record) => {
                      return `${record.house_bill.year}-${String(
                        record.house_bill.month,
                      ).padStart(2, '0')}`;
                    },
                  },
                  MyColumns.EnumTag({
                    title: '类型',
                    dataIndex: ['house_bill', 'type'],
                    valueEnum: HouseBillsTypeEnum,
                  }),
                  {
                    title: '未收金额',
                    dataIndex: 'amount',
                    search: false,
                  },
                  {
                    title: '本次收取金额',
                    dataIndex: 'paid_amount',
                    search: false,
                  },
                ]}
              />
            </ProCard>
          </Space>
        </Spin>
      }
    />
  );
}