pay-company/src/pages/contract/contract_borrows/read/modals/Show.tsx

import { MyBetaModalFormProps, MyButtons } from '@/common';
import { MyModal } from '@/components/MyModal';
import { Apis } from '@/gen/Apis';
import { ProCard, ProDescriptions } from '@ant-design/pro-components';
import { Space, Spin } from 'antd';
import { useState } from 'react';

export default function Show(props: MyBetaModalFormProps) {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState<any>({});

  return (
    <MyModal
      title={props.title || '查看借阅情况'}
      type={props.item?.type || 'primary'}
      width="600px"
      trigger={<MyButtons.View />}
      onOpen={() => {
        if (props?.item?.id) {
          setLoading(true);
          Apis.Contract.ContractArchiveReads.Show({ id: props.item.id })
            .then((res) => {
              setData(res?.data || {});
            })
            .catch((error) => {
              console.error('获取借阅信息失败:', error);
            })
            .finally(() => {
              setLoading(false);
            });
        }
      }}
      node={
        <Space direction="vertical" style={{ width: '100%' }}>
          <ProCard>
            <Spin spinning={loading}>
              <ProDescriptions column={2}>
                <ProDescriptions.Item label="借阅单号">
                  {data?.reader_id}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="借阅人">
                  {data?.reader_name}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="借阅日期">
                  {data?.read_date}
                </ProDescriptions.Item>

                <ProDescriptions.Item label="申请说明" span={2}>
                  {data?.read_reason}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="借阅文件" span={2}>
                  {!data?.contract_archive_read_files ||
                  data.contract_archive_read_files.length === 0 ? (
                    '-'
                  ) : (
                    <div>
                      {data.contract_archive_read_files.map(
                        (file: any, index: number) => (
                          <div
                            key={index}
                            style={{
                              marginBottom: 8,
                              padding: 8,
                              border: '1px solid #f0f0f0',
                              borderRadius: 4,
                            }}
                          >
                            <div
                              style={{ fontWeight: 'bold', marginBottom: 4 }}
                            >
                              文件 {index + 1}:
                              {file?.contract_archive_file?.name}
                            </div>
                          </div>
                        ),
                      )}
                    </div>
                  )}
                </ProDescriptions.Item>
              </ProDescriptions>
            </Spin>
          </ProCard>
        </Space>
      }
    />
  );
}