xie_fang_tong_admin/src/pages/AuditsList/detail.tsx

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

const Detail: React.FC<any> = () => {
  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: parseInt(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: parseInt(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: parseInt(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;