pay-company/src/pages/customer/house_registers_audit/modals/Show.tsx

import {
  MyBetaModalFormProps,
  MyButtons,
  MyColumns,
  MyModalFormProps,
  MyProTableProps,
  renderTextHelper,
} from '@/common';

import {
  HouseOccupantsCardTypeEnum,
  HouseOccupantsResidentialRelationEnum,
  HouseRegistersTypeEnum,
} from '@/gen/Enums';
import {
  BetaSchemaForm,
  ProCard,
  ProDescriptions,
  ProTable,
} from '@ant-design/pro-components';
import { useNavigate } from '@umijs/max';
import { Form, Image, Space } from 'antd';
export default function Show(props: MyBetaModalFormProps) {
  const [form] = Form.useForm();
  const navigate = useNavigate();

  return (
    <BetaSchemaForm<ApiTypes.Archive.HouseRegisters.Show>
      {...MyModalFormProps.props}
      title={props.title}
      trigger={<MyButtons.Default title="查看" type="primary" />}
      wrapperCol={{ span: 24 }}
      width="800px"
      modalProps={{
        bodyStyle: { maxHeight: '70vh', overflowY: 'auto' },
      }}
      key={new Date().getTime()}
      form={form}
      columns={[
        {
          // title: '登记信息',
          dataIndex: 'info_display',
          valueType: 'text',
          renderFormItem: () => (
            <Space direction="vertical" style={{ width: '100%' }}>
              <ProCard size="small">
                <ProDescriptions bordered size="small" column={1}>
                  <ProDescriptions.Item label="房屋信息">
                    <a
                      onClick={() =>
                        navigate(
                          `/customer/archive/show/${props?.item?.model_id}`,
                        )
                      }
                    >
                      {props?.item?.asset_house?.full_name || '-'}
                    </a>
                  </ProDescriptions.Item>
                  <ProDescriptions.Item label="登记类型">
                    <renderTextHelper.Tag
                      Enums={HouseRegistersTypeEnum}
                      value={props?.item?.type}
                    />
                  </ProDescriptions.Item>

                  <ProDescriptions.Item label="申请时间">
                    {props?.item?.created_at || '-'}
                  </ProDescriptions.Item>
                </ProDescriptions>
              </ProCard>

              {props?.item?.customer_info &&
                props?.item?.customer_info?.length > 0 && (
                  <ProCard size="small">
                    <ProTable
                      {...MyProTableProps.props}
                      search={false}
                      toolBarRender={false}
                      pagination={false}
                      dataSource={props?.item?.customer_info}
                      rowKey={(record, index) => record?.id_card || index}
                      size="small"
                      columns={[
                        MyColumns.EnumTag({
                          title: '关联身份',
                          dataIndex: 'residential_relation',
                          valueEnum: HouseOccupantsResidentialRelationEnum,
                        }),
                        {
                          title: '姓名',
                          dataIndex: 'name',
                        },
                        {
                          title: '手机号',
                          dataIndex: 'phone',
                        },
                        MyColumns.EnumTag({
                          title: '证件类型',
                          dataIndex: 'card_type',
                          valueEnum: HouseOccupantsCardTypeEnum,
                        }),
                        {
                          title: '证件号码',
                          dataIndex: 'id_card',
                        },
                        {
                          title: '证件资料',
                          render: (_, item) => {
                            return (
                              <Space>
                                {item?.card_front_image?.[0] && (
                                  <Image
                                    height={30}
                                    style={{
                                      width: 'auto',
                                      objectFit: 'contain',
                                    }}
                                    src={item?.card_front_image[0]?.url}
                                    placeholder="正面"
                                  />
                                )}
                                {item?.card_back_image?.[0] && (
                                  <Image
                                    height={30}
                                    style={{
                                      width: 'auto',
                                      objectFit: 'contain',
                                    }}
                                    src={item?.card_back_image[0]?.url}
                                    placeholder="反面"
                                  />
                                )}
                              </Space>
                            );
                          },
                        },
                      ]}
                    />
                  </ProCard>
                )}
              {(props?.item?.type === 'UpdateInfo' ||
                props?.item?.type === 'UpdatePhone') && (
                <ProCard title="更新信息" size="small">
                  <ProTable
                    {...MyProTableProps.props}
                    search={false}
                    toolBarRender={false}
                    pagination={false}
                    dataSource={[props?.item?.update_info]}
                    rowKey={(record, index) => record?.id_card || index}
                    size="small"
                    columns={[
                      {
                        title: '姓名',
                        dataIndex: 'name',
                      },
                      {
                        title: '手机号',
                        dataIndex: 'phone',
                      },
                      MyColumns.EnumTag({
                        title: '证件类型',
                        dataIndex: 'card_type',
                        valueEnum: HouseOccupantsCardTypeEnum,
                      }),
                      {
                        title: '证件号码',
                        dataIndex: 'id_card',
                      },
                      {
                        title: '证件资料',
                        render: (_, item) => {
                          return (
                            <Space>
                              {item?.card_front_image?.[0] && (
                                <Image
                                  height={30}
                                  style={{
                                    width: 'auto',
                                    objectFit: 'contain',
                                  }}
                                  src={item?.card_front_image[0]?.url}
                                  placeholder="正面"
                                />
                              )}
                              {item?.card_back_image?.[0] && (
                                <Image
                                  height={30}
                                  style={{
                                    width: 'auto',
                                    objectFit: 'contain',
                                  }}
                                  src={item?.card_back_image[0]?.url}
                                  placeholder="反面"
                                />
                              )}
                            </Space>
                          );
                        },
                      },
                    ]}
                  />
                </ProCard>
              )}
              {props?.item?.type === 'AddOwner' &&
                props?.item?.ownership_info &&
                props?.item?.ownership_info?.length > 0 && (
                  <ProCard title="产证信息" size="small">
                    <Image.PreviewGroup>
                      <Space wrap>
                        {props?.item?.ownership_info?.map(
                          (res: any, index: number) => (
                            <Image
                              key={`${res?.name}_${index}`}
                              height={50}
                              src={res?.url || ''}
                              placeholder="产证资料"
                            />
                          ),
                        )}
                      </Space>
                    </Image.PreviewGroup>
                  </ProCard>
                )}
            </Space>
          ),
          colProps: { span: 24 },
        },
      ]}
    />
  );
}