import React, { useEffect, useState } from 'react';
|
import { Row, Col, Steps, Divider, Space, Spin } from 'antd';
|
import { Alert, Button, Select } from '@arco-design/web-react';
|
import { IconInfoCircle } from '@arco-design/web-react/icon';
|
import MyUpload from '../../components/MyUpload';
|
import NewPage from '../../components/NewPage';
|
import { useSearchParams, useNavigate } from 'react-router-dom';
|
import { ledger_1, ledger_2, ledger_3, ledger_4, ledger_5, ledger_6, ledger_7, ledger_10, ledger_11 } from '../../assets/images';
|
import { ax, info, infoSuccess, modalInfo, sleep, verifyEmpty } from '../../utils/utility';
|
import MyModal from '../../components/MyModal';
|
import * as $$ from '../../utils/utility';
|
|
const { Step } = Steps;
|
// 调解调度
|
function inCaseByExcelApi(submitData) {
|
return ax.request({ url: 'caseBook/inputCaseByExcel', type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
// 获取附件列表
|
function getAttachmentListApi(submitData) {
|
return $$.ax.request({ url: 'fileInfo/listNewSysFile', type: 'get', data: submitData, service: 'sys' });
|
}
|
|
|
const CaseImportAdd = () => {
|
let appUrl = $$.appUrl;
|
|
let navigate = useNavigate();
|
|
const [searchParams] = useSearchParams();
|
// 模板
|
const [mould, setMould] = useState(false)
|
|
const attachmentId = searchParams.get('attachmentId');
|
|
const [filesList, setFilesList] = useState([]);
|
|
const [result, setResult] = useState({});
|
|
const [stepsNum, setStepsNum] = useState(0);
|
|
// 文件导入状态
|
const [status, setStatus] = useState('');
|
|
// 导入成功数据
|
const [successData, setSuccessData] = useState({});
|
const [downUrlId, setDownUrlId] = useState('');
|
|
|
|
function onSubmit() {
|
if (filesList?.length === 0) {
|
return info({ type: 'warning', content: '至少上传一个文件' });
|
}
|
if (filesList?.length > 1) {
|
return info({ type: 'warning', content: '每次只允许导入一个文件' });
|
}
|
if (filesList[0]?.name?.indexOf('xlsx') < 0 || filesList[0]?.name?.indexOf('xls') < 0) {
|
return info({ type: 'warning', content: '上传文件格式不正确' });
|
}
|
console.log('filesList', filesList);
|
let fileId = result.id;
|
$$.arcoModalInfo({
|
icon: <IconInfoCircle style={{ color: '#1A6FB8' }} />,
|
title: '提醒',
|
content: <span>确定进行导入操作吗？</span>,
|
okText: '确定',
|
cancelText: '我再想想',
|
onOk: () => {
|
inCaseByExcel({ fileId });
|
},
|
});
|
}
|
|
async function inCaseByExcel(inCaseData) {
|
setStatus('loading');
|
const res = await inCaseByExcelApi(inCaseData);
|
console.log('res.type', res);
|
if (res.type) {
|
// 成功
|
setSuccessData(res.data || {});
|
setStatus('success');
|
} else if (res.code === 105) {
|
setStatus('');
|
$$.modalInfo({
|
title: '案件导入确认',
|
content: <span>检测到您近期上传了相似的案件导入文件，{<span className='ledger-main-title'>请避免重复上传相同文件</span>}，请核实本次导入文件名称</span>,
|
okText: '继续导入',
|
cancelText: '我再想想',
|
onOk: () => {
|
inCaseByExcel({ fileId: result.id, adopt: true });
|
},
|
})
|
} else if (res.code === 409) {
|
setStatus('error');
|
} else {
|
setStatus('error');
|
}
|
}
|
|
function handleChangeFile(type, info, apiResult) {
|
console.log('handleChangeFile', type, info, apiResult);
|
let list = info.fileList ? info.fileList : [];
|
// .map(item => ({ ...item, name: item.trueName }))
|
setFilesList(list)
|
setResult(apiResult)
|
console.log('list', list);
|
if (list.length >= 1) {
|
setStepsNum(1)
|
} else {
|
setStepsNum(0)
|
}
|
}
|
|
async function getAttachmentList(params) {
|
global.setSpinning(true);
|
const res = await getAttachmentListApi({ ownerType: '22_00018-605', ownerId: '10001', size: '3' });
|
global.setSpinning(false);
|
if (res.type) {
|
let list = res?.data || [];
|
setDownUrlId(list?.length > 0 ? list[0].id : '')
|
}
|
}
|
|
// 初始化
|
useEffect(() => {
|
getAttachmentList();
|
}, []);
|
|
|
|
return (
|
<NewPage pageHead={{ breadcrumbData: [{ title: '工作台' }, { title: '案件导入' }], title: '案件导入' }}>
|
<div className="comprehensive" >
|
<div style={{ backgroundColor: '#ffffff', padding: '16px 24px', marginBottom: '16px', height: '100%', position: 'relative' }}>
|
<Row>
|
<Col span={24} style={{ padding: '20px', display: 'flex', justifyContent: 'center' }}>
|
<div style={{ minWidth: '824px' }}>
|
<Steps className="ledgerEdit-main-steps" current={stepsNum}>
|
<Step title="上传导入文件" description={<span style={{ color: stepsNum == '2' && 'rgba(0,0,0,0.45)' }}>上传包含案件信息的导入文件</span>} />
|
<Step title="解析导入文件" description={<span style={{ color: stepsNum == '1' && 'rgba(0,0,0,0.45)' }}>解析上传文件并批量导入案件信息</span>} />
|
</Steps>
|
</div>
|
</Col>
|
<Divider style={{ margin: '24px 0 12px' }} />
|
<Col span={24}>
|
<div style={{ margin: '12px 0' }}>
|
<Alert
|
type='info'
|
content={<span>请使用系统提供的文件模板进行导入<span style={{ color: '#F53F3F' }}>已结案的矛盾纠纷数据</span><span>，且每次只允许上传一个导入文件 </span><span className='public-color public-a' onClick={() => window.open(`${$$.appUrl.fileUrl}${$$.appUrl.fileDownUrl}${downUrlId}`)}>下载模板</span></span>}
|
/>
|
</div>
|
</Col>
|
{
|
!status &&
|
<Col span={24}>
|
<h5><div style={{ display: 'flex' }}>导入文件<div className="must">必填</div></div></h5>
|
<MyUpload
|
ledgerType={true}
|
styleHeight={'158px'}
|
fileIcon={true}
|
mainId={'10001'}
|
ownerId={'10001'}
|
ownerType={'22_00018-504'}
|
handleChangeFile={(type, info, apiResult) => {
|
handleChangeFile(type, info, apiResult);
|
}}
|
accept=".xls, .xlsx"
|
formatType='支持xls、xlsx格式的文件上传，每次上传大小不超过10M'
|
fileType="22_00018-504"
|
fileList={filesList}
|
/>
|
</Col>
|
}
|
|
{
|
status && status == 'loading' &&
|
<div style={{ width: '100%', paddingTop: '150px', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
|
<div>
|
<Spin className='ledgerEdit-main-spin' size={'large'} spinning={status} />
|
</div>
|
<div style={{ fontSize: '20px', lineHeight: '28px', color: 'rgba(0,0,0,0.85)', margin: '20px 0 12px' }}>文件导入中</div>
|
<div style={{ marginBottom: '12px', }}>
|
<span style={{ lineHeight: '22px', color: 'rgba(0,0,0,0.45)' }}>这个过程可能需要几分钟的时间，请耐心等待...<br />
|
导入后，为确保最终导入系统的案件质量<br />
|
请在<span className='public-color' >导入草稿</span>列表中进行二次确认</span>
|
</div>
|
</div>
|
}
|
|
{
|
status && status == 'error' &&
|
<div style={{ width: '100%', paddingTop: '150px', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
|
<div>
|
<img className='ledgerEdit-main-spin-img' src={ledger_6} alt="" />
|
</div>
|
<div style={{ fontSize: '20px', lineHeight: '28px', color: 'rgba(0,0,0,0.85)', margin: '20px 0 12px' }}>文件导入失败</div>
|
<div style={{ marginBottom: '12px', }}>
|
<span style={{ lineHeight: '22px', color: 'rgba(0,0,0,0.45)' }}>原因：<span className='ledger-main-title' >导入文件模板不正确（未使用系统模板）</span></span>
|
</div>
|
<Space size="large">
|
<Button onClick={() => setStatus('')} type="primary">
|
重新上传
|
</Button>
|
<Button onClick={() => navigate(-1)}>返回列表</Button>
|
</Space>
|
</div>
|
}
|
|
|
{
|
status && status == 'success' &&
|
<div style={{ width: '100%', display: 'flex', gap: "16px", flexDirection: 'column', justifyContent: 'center' }}>
|
<div style={{ display: 'flex', justifyContent: 'center', backgroundColor: '#F8FAFB', padding: '16px', borderRadius: '10px' }}>
|
<div style={{ display: 'flex', width: '824px', justifyContent: 'space-between' }}>
|
<div>
|
<div style={{ fontSize: '16px', paddingBottom: '4px', color: '#86909C' }}>数据总数</div>
|
<div><span style={{ fontSize: '24px', lineHeight: '32px' }}>{(successData.countSuccess || 0) + (successData.countFalse || 0)}</span><span style={{ fontSize: '14px', color: '#86909C' }}> 条</span></div>
|
</div>
|
<div style={{ width: '1px', backgroundColor: '#E5E6EB', height: '100%', margin: '0 12px' }} />
|
|
<div>
|
<div style={{ fontSize: '16px', paddingBottom: '4px', color: '#86909C' }}>导入成功</div>
|
<div><span style={{ color: '#00B42A', fontSize: '24px', lineHeight: '32px' }}>{(successData.countSuccess || 0)}</span><span style={{ fontSize: '14px', color: '#86909C' }}> 条</span></div>
|
</div>
|
<div style={{ width: '1px', backgroundColor: '#E5E6EB', height: '100%', margin: '0 12px' }} />
|
<div>
|
<div style={{ fontSize: '16px', paddingBottom: '4px', color: '#86909C' }}>导入失败</div>
|
<div><span style={{ color: '#F53F3F', fontSize: '24px', lineHeight: '32px' }}>{(successData.countFalse || 0)}</span><span style={{ fontSize: '14px', color: '#86909C' }}> 条</span></div>
|
</div>
|
</div>
|
|
</div>
|
{
|
successData.countFalse > 0 &&
|
<Alert type='warning' title="导入失败原因" content={
|
<div>
|
{
|
successData.countFalseContent?.map((item, index) => (
|
<div key={`Alert${index}`}>{item}</div>
|
))
|
}
|
</div>
|
} banner />
|
}
|
<Space size="large" className='ledgerEdit-main-submit'>
|
<Button style={{ marginLeft: '12px' }} type="primary" onClick={() => navigate(-1)}>返回列表</Button>
|
</Space>
|
</div>
|
}
|
|
</Row>
|
{
|
!status &&
|
<Space size="large" className='ledgerEdit-main-submit'>
|
<Button onClick={() => onSubmit()} type="primary" className="dialogPrimary">
|
导入
|
</Button>
|
<Button type='secondary' onClick={() => navigate(-1)}>返回上级页面</Button>
|
</Space>
|
}
|
</div>
|
</div>
|
<MyModal
|
width={'80%'}
|
visible={mould}
|
okText="关闭页面"
|
onOk={() => setMould(false)}
|
bodyStyle={{ padding: '0 16px 16px' }}
|
closable={false}
|
>
|
<div className="myMessage-modal-header">
|
<h4>导入说明</h4>
|
</div>
|
<div>
|
<pre>
|
<div className='ledger-main-mould'>
|
<div className='ledger-main-mould-img'>
|
<img src={ledger_2} alt="" />
|
</div>
|
<span style={{ lineHeight: '22px' }}>案件首次导入后，将进入<span className='ledger-main-title'>导入草稿</span>列表，操作人需要在该列表内对案件数据进行核实后，批量勾选并点击<span className='ledger-main-title'>确定导入</span>按钮，以实现将案件正式导入多元化解平台操作案件正式导入平台后将自动归档，调解员可在<span className='ledger-main-title'>我的调解/我负责的（协助调解员为我参与的）/调解结束、调解总览（一本账）</span>功能中看到案件信息</span>
|
</div>
|
<div className='ledger-main-mould' style={{ margin: '12px 0' }}>
|
<div className='ledger-main-mould-img'>
|
<img src={ledger_1} alt="" />
|
</div>
|
<span style={{ lineHeight: '22px' }}>模板案件填写样例</span>
|
</div>
|
<img style={{ height: '300px', width: '100%' }} src={ledger_4} alt="" />
|
<img style={{ height: '300px', width: "100%" }} src={ledger_3} alt="" />
|
</pre>
|
</div>
|
</MyModal>
|
</NewPage >
|
)
|
};
|
|
export default CaseImportAdd;
|
