/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2023-04-24 20:43:36
|
* @LastEditTime: 2023-07-17 15:53:36
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description:
|
*/
|
import React, { useEffect, useState } from 'react';
|
import { Row, Col, Steps, Divider, Space, Button, Spin, Alert } from 'antd';
|
import MyUpload from '../../../components/MyUpload';
|
import Page from '../../../components/Page';
|
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/inCaseByExcel', type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
const LedgerEdit = () => {
|
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({});
|
|
function onSubmit() {
|
if (filesList?.length === 0) {
|
return info({ type: 'warning', content: '请上传文件' });
|
}
|
if (filesList?.length > 1) {
|
return info({ type: 'warning', content: '每次只能导入一个文件，请核实后再试' });
|
}
|
console.log('filesList', filesList);
|
let fileId = result.id;
|
$$.modalInfo({
|
title: '案件导入确认',
|
// content: `确定执行案件导入${<span className='ledger-main-title'>{filesList[0]?.name}</span>} 文件中的案件数据吗？`,
|
content: <span>确定导入<span className='ledger-main-title'>{filesList[0]?.name}</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)
|
}
|
}
|
console.log('stepsNum', stepsNum);
|
return (
|
<Page pageHead={{ title: '案件导入', subtitle: <span>通过文件的方式批量导入{<span className='ledger-main-title'>已结束</span>}的调解案件信息</span> }}>
|
<div className="ledgerEdit-main" >
|
<div style={{ backgroundColor: '#ffffff', padding: '16px 24px', height: '100%', position: 'relative' }}>
|
<Row >
|
<Col span={24} style={{ padding: '0 420px' }}>
|
<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>
|
</Col>
|
<Divider style={{ margin: '24px 0 12px' }} />
|
<Col span={24}>
|
<div className='ledger-main-mould' style={{ marginBottom: '12px', }}>
|
<div className='ledger-main-mould-img'>
|
<img src={ledger_2} alt="" />
|
</div>
|
<span style={{ lineHeight: '22px', color: 'rgba(0,0,0,0.50)' }}>文件导入功能仅支持使用多元化解平台提供的导入模板实现案件的批量导入<Button style={{ padding: '0', height: '19px' }} type="link" onClick={() => window.open(`${$$.appUrl.fileUrl}${$$.appUrl.fileDownUrl}${attachmentId}`)}>下载导入模板</Button><br />首次导入建议您先了解<Button style={{ padding: '0', lineHeight: '22px' }} type="link" onClick={() => setMould(true)}>导入说明</Button>，以提升导入成功率</span>
|
</div>
|
<div className='ledger-main-mould' style={{ marginBottom: '12px', }}>
|
<div className='ledger-main-mould-img'>
|
<img src={ledger_1} alt="" />
|
</div>
|
<span style={{ lineHeight: '22px', color: 'rgba(0,0,0,0.50)' }}>每次只允许导入一个文件</span>
|
</div>
|
</Col>
|
{
|
!status &&
|
<Col span={24}>
|
<h5>案件导入文件<span className="leftRequired">*</span></h5>
|
<MyUpload
|
ledgerType={true}
|
fileId={'10001'}
|
handleChangeFile={(type, info, apiResult) => {
|
handleChangeFile(type, info, apiResult);
|
}}
|
accept="XLS、XLSX"
|
formatType='格式支持XLS、XLSX'
|
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='ledger-main-title' >导入草稿</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('/mediate/ledger?isBack=true', { replace: true })}>返回列表</Button>
|
</Space>
|
</div>
|
}
|
|
|
{
|
status && status == 'success' &&
|
<div style={{ width: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
|
{/* <div>
|
<img className='ledgerEdit-main-spin-img' src={ledger_7} alt="" />
|
</div> */}
|
<div style={{ width: '100%', backgroundColor: '#F8FAFB', padding: '16px', borderRadius: '10px' }}>
|
<div style={{ display: 'flex', alignItems: 'center', fontSize: '16px', color: 'rgba(0,0,0,0.50)' }}><img style={{ width: '20px', height: '20px', marginRight: '8px' }} src={ledger_10} alt="" />导入成功<span className='ledger-main-title' style={{ fontSize: '30px' }} >{successData.countSuccess || 0}</span>条</div>
|
<div style={{ display: 'flex', alignItems: 'center', fontSize: '16px', color: 'rgba(0,0,0,0.50)' }}><img style={{ width: '20px', height: '20px', marginRight: '8px' }} src={ledger_11} alt="" />导入失败<span className='ledger-main-title' style={{ fontSize: '30px' }} >{successData.countFalse || 0}</span>条</div>
|
<Alert message="导入失败原因" description={
|
<div>
|
{
|
successData.countFalseContent?.map((item, index) => (
|
<div key={`Alert${index}`}>{item}</div>
|
))
|
}
|
</div>
|
} banner />
|
</div>
|
<div style={{ margin: '12px', }}>请尽快在<span className='ledger-main-title'>导入草稿</span>列表中对案件进行二次确认
|
</div>
|
<Space size="large">
|
<Button style={{ marginLeft: '12px' }} type="primary" onClick={() => navigate('/mediate/ledger?isBack=true&tab=2', { replace: true })}>返回列表</Button>
|
</Space>
|
</div>
|
}
|
|
</Row>
|
{
|
!status &&
|
<Space size="large" className='ledgerEdit-main-submit'>
|
<Button onClick={() => onSubmit()} type="primary">
|
导入
|
</Button>
|
<Button onClick={() => navigate('/mediate/ledger?isBack=true', { replace: true })}>返回</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>
|
</Page >
|
)
|
};
|
|
export default LedgerEdit;
|
