pay-admin/src/pages/examine/house_registers_audit/modals/Audit.tsx

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

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

  return (
    <BetaSchemaForm<ApiTypes.Archive.HouseRegisters.Update>
      {...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}
      onFinish={async (values: any) =>
        Apis.Archive.HouseRegisters.Audit({
          id: props.item?.id ?? 0,
          ...values,
        })
          .then(() => {
            props.reload?.();
            message.success(props.title + '成功');
            return true;
          })
          .catch(() => false)
      }
      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(`/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="居住关系">
                    <renderTextHelper.Tag
                      Enums={HouseOccupantsResidentialRelationEnum}
                      value={
                        props?.item?.customer_info?.[0].residential_relation
                      }
                    />
                  </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}
                                    src={item?.card_front_image[0]?.url}
                                    placeholder="正面"
                                  />
                                )}
                                {item?.card_back_image?.[0] && (
                                  <Image
                                    height={30}
                                    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}
                                  src={item?.card_front_image[0]?.url}
                                  placeholder="正面"
                                />
                              )}
                              {item?.card_back_image?.[0] && (
                                <Image
                                  height={30}
                                  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={30}
                              src={res?.url || ''}
                              placeholder="产证资料"
                            />
                          ),
                        )}
                      </Space>
                    </Image.PreviewGroup>
                  </ProCard>
                )}
            </Space>
          ),
          colProps: { span: 24 },
        },
        {
          valueType: 'group',
          // title: '审核操作',
          columns: [
            MyFormItems.EnumRadio({
              key: 'status',
              title: '审核操作',
              colProps: { span: 24 },
              valueEnum: () => {
                let obj: any = JSON.parse(
                  JSON.stringify(HouseRegistersStatusEnum),
                );
                delete obj.Pending;
                return obj;
              },
              required: true,
            }),
            {
              valueType: 'dependency',
              name: ['status'],
              columns: ({ status }) => {
                return status === 'Rejected'
                  ? [
                      {
                        title: '驳回原因',
                        dataIndex: 'reason',
                        valueType: 'textarea',
                        formItemProps: { ...rulesHelper.text },
                        colProps: { span: 24 },
                      },
                    ]
                  : [];
              },
            },
          ],
        },
      ]}
    />
  );
}