xie_fang_tong_admin/src/pages/BusinessList/detail.tsx

import React, { useEffect, useState } from 'react';
import { Button, Image, Input, Tag, message } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { Access, useAccess, useParams } from '@umijs/max';
import { CheckCircleOutlined, InfoCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
import { getPbcBusinessByIdUsingPost } from '@/services/pop-b2b2c/pbcBusinessController';
import { ProCard, ProDescriptions, ProFormUploadButton } from '@ant-design/pro-components';
import Constants from '@/constants';
import { RcFile } from 'antd/es/upload';

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

  const [info, setInfo] = useState<API.PbcBusiness>({});

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

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

  return (
    <PageContainer
      header={{
        title: '',
      }}
      footer={[
        <Button key="back" onClick={() => {
          history.back()
        }}>
          返回
        </Button>
      ]}
    >
      <ProCard style={{ marginBottom: 12 }}>
        <ProDescriptions editable={{}} bordered title={<>
          <span style={{ marginRight: 20 }}>基本信息</span>
          {info.pbcBusinessState === 1 ? <Tag icon={<CheckCircleOutlined />} color="success">
            已认证
          </Tag> :
          <Tag icon={<InfoCircleOutlined />} color="default">
            未认证
          </Tag>}
        </>} column={3}>
          <ProDescriptions.Item label="商户名称" dataIndex="pbcBusinessName">{info.pbcBusinessName}</ProDescriptions.Item>
          <ProDescriptions.Item label="商户类别" dataIndex="pbcBusinessType" valueEnum={Constants.pbcBusinessType}>{info.pbcBusinessType}</ProDescriptions.Item>
          <ProDescriptions.Item label="商户状态" dataIndex="pbcState" valueType="switch" fieldProps={{ checkedChildren: '启用', unCheckedChildren: '禁用' }}>{info.pbcState === 1}</ProDescriptions.Item>
          <ProDescriptions.Item label="联系人" dataIndex="pbcBusinessContact">{info.pbcBusinessContact}</ProDescriptions.Item>
          <ProDescriptions.Item label="手机号" dataIndex="pbcBusinessContactMobile">{info.pbcBusinessContactMobile}</ProDescriptions.Item>
          <ProDescriptions.Item label="商户等级" dataIndex="pbcBusinessLevel" valueType="select" fieldProps={{ options: ['1级', '2级', '3级', '4级', '5级'] }}>{info.pbcBusinessLevel}</ProDescriptions.Item>
        </ProDescriptions>
      </ProCard>
      <ProCard style={{ marginBottom: 12 }}>
        <ProDescriptions
          editable={{}}
          dataSource={{
            pbcBusinessHead: info.pbcBusinessHead,
            pbcBusinessHeadUserNo: info.pbcBusinessHeadUserNo,
            pbcBusinessStartDate: info.pbcBusinessStartDate,
            pbcBusinessBank: info.pbcBusinessBank,
            pbcBusinessAccount: info.pbcBusinessAccount,
            pbcBusinessMainCategory: info.pbcBusinessMainCategory,
            pbcBusinessLicenseUrl: info.pbcBusinessLicenseUrl ? [
              {
                uid: '-1',
                name: 'image.png',
                status: 'done',
                url: info.pbcBusinessLicenseUrl,
              },
            ] : []
          }}
          columns={[
            {
              title: '法人',
              key: 'pbcBusinessHead',
              dataIndex: 'pbcBusinessHead',
            },
            {
              title: '法人身份证号',
              key: 'pbcBusinessHeadUserNo',
              dataIndex: 'pbcBusinessHeadUserNo',
            },
            {
              title: '公司成立时间',
              key: 'pbcBusinessStartDate',
              valueType: 'date',
              dataIndex: 'pbcBusinessStartDate',
            },
            {
              title: '开户行',
              key: 'pbcBusinessBank',
              dataIndex: 'pbcBusinessBank',
            },
            {
              title: '收款账号',
              key: 'pbcBusinessAccount',
              span: 2,
              dataIndex: 'pbcBusinessAccount',
            },
            {
              title: '经营范围',
              key: 'pbcBusinessMainCategory',
              span: 3,
              dataIndex: 'pbcBusinessMainCategory',
            },
            {
              title: '营业执照',
              key: 'pbcBusinessLicenseUrl',
              dataIndex: 'pbcBusinessLicenseUrl',
              span: 3,
              render: () => {
                return <Image
                  width={200}
                  src={info.pbcBusinessLicenseUrl}
                />
              },
              renderFormItem: () => {
                return <ProFormUploadButton
                  icon={<PlusCircleOutlined style={{ fontSize: 30 }} />}
                  title={<div style={{ marginTop: 10, fontSize: 12 }}>点击上传图片</div>}
                  max={1}
                  fieldProps={{
                    name: 'file',
                    accept: 'image/*',
                    listType: 'picture-card',
                    headers: {
                      authorization: localStorage.getItem('token') ?? '',
                    },
                    onPreview: async (file) => {
                      if (file.uid === '-1') {
                        window.open(file.url);
                      }
                      if (file.response && file.response.retcode) {
                        window.open(file.response.data);
                      }
                    },
                  }}
                  action={process.env.BASE_URL + '/oss/imgUpload'}
                />;
              },
            },
          ]}
          bordered 
          title="工商信息"
        >
        </ProDescriptions>
      </ProCard>
    </PageContainer>
  );
};

export default Detail;