ccic-web/packages/component.detail/src/expert.detail/detail.js

//专家列表和专家审核 的详情
import React from 'react';
import {
	ModalForm,
	PageContainer,
	ProDescriptions,
	ProFormTextArea,
} from '@ant-design/pro-components';
import {
	Button,
	Divider,
	Input,
	message,
	Modal,
	Space,
	Tabs,
	Upload,
} from 'antd';
import Record from '../record';
import { useRequest } from 'ahooks';
import { formatImageUrl, useRoutes, themeMessage } from '@component/utils';
import { getDetail, getRecord, onReject } from './action';
import { getStorage } from '@component/utils';
import { CardDetail } from '@component/ui';
import { PreviewFile } from '@component/ui';
import { DescriptionsDetail } from '@component/ui';
const { TabPane } = Tabs;

export default function (props) {
	const { paramsParse } = useRoutes();
	const { userId, type } = paramsParse;
	return (
		<PageContainer
			header={{
				title: null,
			}}
		>
			<Tabs defaultActiveKey="1">
				<TabPane tab="基本信息" key="1">
					<DetailInfo params={userId} type={type} />
				</TabPane>
				<TabPane tab="审核记录" key="2">
					<Record
						service={getRecord}
						params={{ businessId: userId, businessType: 'expert' }}
					/>
				</TabPane>
			</Tabs>
		</PageContainer>
	);
}

//基本信息
const DetailInfo = (props) => {
	const waitTime = (time = 100) => {
		return new Promise((resolve) => {
			setTimeout(() => {
				resolve(true);
			}, time);
		});
	};
	const { historyBack } = useRoutes();
	const { type } = props;
	const { data, loading } = useRequest(() =>
		getDetail({ userId: props.params }),
	);
	const { runAsync } = useRequest(onReject, {
		manual: true,
		onSuccess(result) {
			themeMessage(result, historyBack);
		},
		onError(result) {
			message.error(result.message);
		},
	});
	const submitReview = () => {
		const params = {
			userId: data?.userId || '',
			auditStatus: '2' || '',
			rejecReason: '',
			supAudit: 'Y',
			organId: getStorage('organId') || '',
		};
		Modal.confirm({
			content: '请确认是否提交上级审核？',
			onOk() {
				return runAsync(params);
			},
		});
	};
	const reviewPass = () => {
		const params = {
			userId: data?.userId || '',
			auditStatus: '3' || '',
			rejecReason: '',
			supAudit: 'N',
			organId: getStorage('organId') || '',
		};
		Modal.confirm({
			content: '请确认是否审核通过？',
			onOk() {
				return runAsync(params);
			},
		});
	};
	return (
		<div className="page-content-detail-tabs">
			<CardDetail title="服务信息">
				<DescriptionsDetail column={2} layout="horizontal">
					<ProDescriptions.Item label="姓名">
						{data?.userName}
					</ProDescriptions.Item>
					<ProDescriptions.Item label="所属第三方机构">
						{data?.organName}
					</ProDescriptions.Item>
					<ProDescriptions.Item label="证件类型">身份证</ProDescriptions.Item>
					<ProDescriptions.Item label="证件号码">
						{data?.desensitizationIdNumber}
					</ProDescriptions.Item>
					<ProDescriptions.Item
						label="性别"
						valueEnum={{
							1: { text: '男' },
							2: { text: '女' },
						}}
					>
						{data?.identification?.sex}
					</ProDescriptions.Item>
					<ProDescriptions.Item label="年龄">
						{data?.identification?.age}
					</ProDescriptions.Item>
					<ProDescriptions.Item label="联系电话">
						{data?.desensitizationPhone}
					</ProDescriptions.Item>
					<ProDescriptions.Item label="所在城市">
						{data?.gridName}
					</ProDescriptions.Item>
					<ProDescriptions.Item label="毕业学院">
						{data?.identification?.graduationSchool}
					</ProDescriptions.Item>
					<ProDescriptions.Item label="专业">
						{data?.identification?.major}
					</ProDescriptions.Item>
					<ProDescriptions.Item label="最高学历">
						{data?.identification?.educationName}
					</ProDescriptions.Item>
					<ProDescriptions.Item label="所在单位">
						{data?.identification?.workUnit}
					</ProDescriptions.Item>
					<ProDescriptions.Item label="职务/职称">
						{data?.identification?.titleName}
					</ProDescriptions.Item>
					<ProDescriptions.Item label="擅长领域">
						{data?.identification?.skilledFieldName}
					</ProDescriptions.Item>
					<ProDescriptions.Item label="服务区域">
						{data?.identification?.scopeGridName}
					</ProDescriptions.Item>
					<ProDescriptions.Item label="主要服务行业">
						{data?.identification?.skilledIndustryName}
					</ProDescriptions.Item>
					<ProDescriptions.Item label="主要服务项目">
						{data?.identification?.skilledWorkName}
					</ProDescriptions.Item>
					<ProDescriptions.Item label="从事安全生产工作年限">
						{data?.identification?.workYear}
					</ProDescriptions.Item>
					<ProDescriptions.Item label="工作经历">
						{data?.identification?.experience}
					</ProDescriptions.Item>
					<br />
					<ProDescriptions.Item
						label="专家亲手签名"
						span={2}
						contentStyle={{
							maxWidth: '100%',
						}}
					>
						{data?.identification?.signAttPath && (
							<PreviewFile
								listType="picture-card"
								disabled
								fileList={formatImageUrl(data.identification.signAttPath)}
							/>
						)}
					</ProDescriptions.Item>
				</DescriptionsDetail>
			</CardDetail>

			<Divider className="self-pro-divider" />

			<CardDetail title="安全生产资质信息">
				<DescriptionsDetail column={2}>
					{data?.certifications?.map((item, index) => {
						return (
							<ProDescriptions.Item key={index}>
								<DescriptionsDetail title={item.certificationName} column={1}>
									<ProDescriptions.Item label="证书编号">
										{item.certificationNumber}
									</ProDescriptions.Item>
									<ProDescriptions.Item label="证书照片">
										<PreviewFile
											listType="picture-card"
											disabled
											fileList={formatImageUrl(item.certifications)}
										/>
									</ProDescriptions.Item>
								</DescriptionsDetail>
							</ProDescriptions.Item>
						);
					})}
				</DescriptionsDetail>
			</CardDetail>

			{data?.auditStatus == 1 && type == 'review' && (
				<Space
					style={{
						marginLeft: '50%',
						transform: 'translateX(-50%)',
						marginTop: '50px',
					}}
				>
					<ModalForm
						title="拒绝通过理由"
						trigger={<Button danger>驳回</Button>}
						submitTimeout={2000}
						onFinish={async (values) => {
							const params = {
								userId: data?.userId || '',
								auditStatus: '4' || '',
								rejectReason: values.rejectReason || '',
								supAudit: 'N',
								organId: getStorage('organId') || '',
							};
							runAsync(params);
							return true;
						}}
					>
						<ProFormTextArea name="rejectReason" placeholder="请输入名称" />
					</ModalForm>
					{getStorage('isSup') == 1 && (
						<Button type="primary" ghost onClick={submitReview}>
							提交上级审核
						</Button>
					)}
					<Button type="primary" onClick={reviewPass}>
						审核通过
					</Button>
				</Space>
			)}
		</div>
	);
};