xie_fang_tong_admin/src/pages/AuditsList/detail.tsx

import React, { useEffect, useState } from 'react';
import { Button, Descriptions, Image, message } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { approvalSignNUsingPost, approvalSignYUsingGet, getRecordByBusinessIdAdminUsingGet } from '@/services/pop-b2b2c/pbcBusinessApprovalController';
import { Access, useAccess, useParams } from '@umijs/max';
import { ModalForm, ProCard, ProFormTextArea } from '@ant-design/pro-components';

const Detail: React.FC<{}> = () => {
  const params  = useParams();
  const access: any = useAccess();

  const [info, setInfo] = useState<API.PbcBusinessApproval>({});
  const [isModalOpen, setIsModalOpen] = useState(false);

  const getInfo = () => {
    if (params.id) {
      getRecordByBusinessIdAdminUsingGet({businessId: params.id}).then(res => {
        if (res.retcode && res.data) {
          setInfo(res.data)
        }
      })
    }
    
  }

  useEffect(() => {
    getInfo()
  }, [])

  return (
    <PageContainer
      header={{
        title: '',
      }}
      footer={info.pbcBusinessApprovalResult === 0 ? [
        <Button key="back" onClick={() => {
          history.back()
        }}>
          返回
        </Button>,
        <Access key="no" accessible={access.approvalSign}>
          <Button type="primary" danger onClick={() => {
            setIsModalOpen(true)
          }}>
            审核驳回
          </Button>
        </Access>,
        <Access key="pass" accessible={access.approvalSign}>
          <Button type="primary" onClick={() => {
            if (params.id) {
              approvalSignYUsingGet({pbcId: params.id}).then(res => {
                if (res.retcode) {
                  message.success("审核通过")
                  getInfo()
                } else {
                  message.error(res.retmsg)
                }
              })
            }
          }}>
            审核通过
          </Button>
        </Access>
      ] : [
        <Button key="back" onClick={() => {
          history.back()
        }}>
          返回
        </Button>
      ]}
    >
      <ProCard style={{ marginBottom: 12 }}>
        <Descriptions bordered title="基本信息" column={2}>
          <Descriptions.Item label="商户名称">{info.pbcBusinessName}</Descriptions.Item>
          <Descriptions.Item label="商户类别">{info.pbcBusinessType}</Descriptions.Item>
          <Descriptions.Item label="联系人">{info.pbcBusinessContact}</Descriptions.Item>
          <Descriptions.Item label="手机号">{info.pbcBusinessContactMobile}</Descriptions.Item>
          <Descriptions.Item label="负责人">{info.pbcBusinessHead}</Descriptions.Item>
          <Descriptions.Item label="负责人身份证号">{info.pbcBusinessHeadUserNo}</Descriptions.Item>
          <Descriptions.Item label="身份证人像面">
            <Image
              width={200}
              src={info.pbcBusinessHeadUserNoBackUrl}
            />
          </Descriptions.Item>
          <Descriptions.Item label="身份证国徽面">
            <Image
              width={200}
              src={info.pbcBusinessHeadUserNoFrontUrl}
            />
          </Descriptions.Item>
        </Descriptions>
      </ProCard>
      <ProCard style={{ marginBottom: 12 }}>
        <Descriptions bordered title="工商信息">
          <Descriptions.Item label="法人">{info.pbcBusinessHead}</Descriptions.Item>
          <Descriptions.Item label="法人身份证号">{info.pbcBusinessHeadUserNo}</Descriptions.Item>
          <Descriptions.Item label="公司成立时间">{info.pbcBusinessStartDate}</Descriptions.Item>
          <Descriptions.Item label="开户行">{info.pbcBusinessBank}</Descriptions.Item>
          <Descriptions.Item label="收款账号" span={2}>{info.pbcBusinessAccount}</Descriptions.Item>
          <Descriptions.Item label="经营范围" span={3}>{info.pbcBusinessMainCategory}</Descriptions.Item>
          <Descriptions.Item label="营业执照" span={3}>
            <Image
              width={200}
              src={info.pbcBusinessLicenseUrl}
            />
          </Descriptions.Item>
        </Descriptions>
      </ProCard>
      <ModalForm
        title="填写驳回理由"
        open={isModalOpen}
        modalProps={{
          destroyOnClose: true,
          onCancel: () => setIsModalOpen(false),
        }}
        onFinish={async (value: any) => {
          console.log(value)
          if (params.id) {
            await approvalSignNUsingPost({pbcId: params.id, pbcBusinessApprovalRefusedReason: value.pbcBusinessApprovalRefusedReason}).then(res => {
              if (res.retcode) {
                message.success("成功驳回")
                getInfo()
                setIsModalOpen(false)
              } else {
                message.error(res.retmsg)
              }
            })
          }
        }}
      >
        <ProFormTextArea
          placeholder={'请输入驳回理由'}
          label="驳回理由"
          rules={[
            {
              required: true,
              message: '驳回理由为必填项',
            },
          ]}
          width="md"
          name="pbcBusinessApprovalRefusedReason"
        />
      </ModalForm>
    </PageContainer>
  );
};

export default Detail;