import React, { useEffect, useState } from 'react';
|
import Page from '../../../components/Page/index';
|
import { Form, Typography, Space, Button, Empty, Checkbox, Anchor } from 'antd';
|
import { FolderFilled } from '@ant-design/icons';
|
import * as $$ from '../../../utils/utility';
|
import { ledger_1, ledger_2, ledger_3, ledger_4 } from '../../../assets/images';
|
import { useLocation, useNavigate } from 'react-router-dom';
|
import TableView from '../../../components/TableView';
|
import TableSearch from '../../../components/TableSearch';
|
import MyTabs from '../../../components/MyTabs';
|
import MyModal from '../../../components/MyModal';
|
const { Link } = Typography;
|
|
// 导入成功接口数据
|
function getPageInputCaseApi(submitData) {
|
return $$.ax.request({ url: 'caseInfo/pageCaseTotal', type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
// 导入草稿接口数据
|
function getPageDraftApi(submitData) {
|
return $$.ax.request({ url: 'caseBook/pageInputCase', type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
// 删除草稿接口数据
|
function deleteDraftApi(submitData) {
|
return $$.ax.request({ url: 'caseBook/removeByIdList', type: 'post', data: submitData, service: 'mediate' });
|
}
|
|
// 导入成功接口数据
|
function getPageSuccessApi(submitData) {
|
return $$.ax.request({ url: 'caseInfo/caseInfoByBookId', type: 'poet', data: submitData, service: 'mediate' });
|
}
|
|
// 获取附件列表
|
function getAttachmentListApi(submitData) {
|
return $$.ax.request({ url: 'fileRelate/listNewSysFile', type: 'get', data: submitData, service: 'sys' });
|
}
|
|
|
const Ledger = () => {
|
let appUrl = $$.appUrl;
|
const [form] = Form.useForm();
|
|
let location = useLocation();
|
|
let navigate = useNavigate();
|
|
// 搜索
|
const [search, setSearch] = useState({ page: 1, size: 10, });
|
|
// 导入成功数据
|
const [data, setData] = useState({ tableData: [] });
|
|
// 导入草稿数据
|
const [draftData, setDraftData] = useState({ tableData: [], visible: false, });
|
|
// tabs标签分页
|
const [ledgerTab, setLedgerTab] = useState('1');
|
|
// 模板
|
const [mould, setMould] = useState(false)
|
|
// table选择数据
|
const [selectedRowsObj, setSelectedRowsObj] = useState({});
|
|
const [attachmentId, setAttachmentId] = useState('');
|
|
// 表头
|
const columns = [
|
{ title: '调解案号', dataIndex: 'caseNo' },
|
{ title: '申请人', dataIndex: 'plaintiffs' },
|
{ title: '被申请人', dataIndex: 'defendants' },
|
{ title: '纠纷发生时间', width: 150, dataIndex: 'occurTime', render: (text) => $$.dateFormat(text) },
|
{ title: '纠纷发生地', dataIndex: 'addr' },
|
{ title: '调解组织', dataIndex: 'mediateUnitName' },
|
{ title: '纠纷类型', dataIndex: 'mediTypeName' },
|
{ title: '调解员', dataIndex: 'mediator' },
|
{ title: '协助调解员', width: 120, dataIndex: 'otherMediator' },
|
{
|
title: '调解结果',
|
dataIndex: 'mediResultName',
|
render: (text, record) =>
|
!text ? '-' : <div className={`public-tag public-tag-${record.mediResult === '22_00025-1' ? 'tagGreen' : 'tagRed'}`}>{text}</div>,
|
},
|
{ title: '案件导入时间', dataIndex: 'createTime' },
|
{
|
title: '操作',
|
dataIndex: 'action',
|
width: 100,
|
render: (_, record) => <Space size="middle" className="public-fileCard-action">
|
<Link onClick={() => handleJump('details', record)}>查看</Link>
|
{/* <Link disabled onClick={() => handleJump(record)}>修改</Link> */}
|
</Space>,
|
},
|
];
|
|
// 草稿表头
|
const draftColumns = [
|
{ title: '申请人', dataIndex: 'plaintiffs' },
|
{ title: '被申请人', dataIndex: 'defendants' },
|
{ title: '纠纷发生时间', width: 150, dataIndex: 'occurTime', render: (text) => $$.dateFormat(text) },
|
{ title: '纠纷发生地', dataIndex: 'addr' },
|
{ title: '调解组织', dataIndex: 'mediateUnitName' },
|
{ title: '纠纷类型', dataIndex: 'mediTypeName' },
|
{ title: '调解员', dataIndex: 'mediator' },
|
{ title: '协助调解员', width: 120, dataIndex: 'otherMediator' },
|
{
|
title: '调解结果',
|
dataIndex: 'mediResultName',
|
render: (text, record) =>
|
!text ? '-' : <div className={`public-tag public-tag-${record.mediResult === '22_00025-1' ? 'tagGreen' : 'tagRed'}`}>{text}</div>,
|
},
|
{ title: '案件导入时间', dataIndex: 'createTime' },
|
{
|
title: '操作',
|
dataIndex: 'action',
|
width: 100,
|
render: (_, record) => <Link onClick={() => handleJump('detail', record)}>查看</Link>,
|
},
|
];
|
|
function handleJump(type, record) {
|
if (type == 'detail') {
|
$$.setSessionStorage(location.pathname, {
|
search,
|
title: '详情',
|
breadcrumbData: [{ title: '案件导入', url: location.pathname }, { title: '查看' }],
|
tableActive: record.id,
|
pageFrom: 'ledger',
|
});
|
navigate(`/mediate/caseDetail?caseId=${record.id}&mediationType=ledger&judicialId=${record.judicId}&back=${location.pathname}`);
|
} else if (type == 'details') {
|
$$.setSessionStorage(location.pathname, {
|
search,
|
title: '详情',
|
breadcrumbData: [{ title: '案件导入', url: location.pathname }, { title: '查看' }],
|
tableActive: record.id,
|
pageFrom: 'ledger',
|
});
|
navigate(`/mediate/caseDetail?caseId=${record.id}&judicialId=${record.judicId}&back=${location.pathname}`);
|
} else {
|
$$.info({ type: 'error', content: '修改功能暂未开放' })
|
|
}
|
}
|
|
// 页码修改
|
function handleChangePage(type, page, pageSize) {
|
let paramsObj = Object.assign(search, { page, size: pageSize });
|
setSearch(paramsObj);
|
if (type == 'data') {
|
getMyMediationData(paramsObj);
|
} else {
|
getPageDraftData(paramsObj);
|
}
|
}
|
|
// 搜索 or 重置
|
function handleSearch(type, session) {
|
let paramsObj = {};
|
if (type === 'search') {
|
paramsObj = { ...search, ...form.getFieldsValue(), page: 1 };
|
$$.changeTimeFormat(paramsObj, 'occurTime', 'occurStart', 'occurEnd');
|
$$.changeTimeFormat(paramsObj, 'createtime', 'createStart', 'createEnd');
|
$$.changeTimeFormat(paramsObj, 'mediStartTime', 'mediStartTimeStart', 'mediStartTimeEnd');
|
}
|
if (type === 'reset') {
|
paramsObj = { page: 1, size: 10, pageType: '1', joinRole: '1' };
|
form.resetFields();
|
form.setFieldsValue({ joinRole: '1' });
|
}
|
if (type === 'recurrent') {
|
paramsObj = { ...search, ...session.search };
|
let copyObj = { ...paramsObj };
|
if (copyObj.acceptStart) {
|
copyObj.acceptTime = [$$.myMoment(copyObj.acceptStart), $$.myMoment(copyObj.acceptEnd)];
|
}
|
if (copyObj.mediEndTimeStart) {
|
copyObj.mediEndTime = [$$.myMoment(copyObj.mediEndTimeStart), $$.myMoment(copyObj.mediEndTimeEnd)];
|
}
|
if (copyObj.mediStartTimeStart) {
|
copyObj.mediStartTime = [$$.myMoment(copyObj.mediStartTimeStart), $$.myMoment(copyObj.mediStartTimeEnd)];
|
}
|
form.setFieldsValue(copyObj);
|
}
|
getMyMediationData(paramsObj, session?.tableActive);
|
getPageDraftData(paramsObj, session?.tableActive);
|
}
|
|
// 草稿选择
|
function onSelectChange(selectedRowKeys, selectedRows) {
|
let obj = {};
|
obj[search.page] = { selectedRowKeys, selectedRows };
|
|
console.log('{ ...selectedRowsObj, ...obj }', { ...selectedRowsObj, ...obj });
|
setSelectedRowsObj({ ...selectedRowsObj, ...obj });
|
}
|
|
//草稿 获取table选择数据
|
function handleGetSelectedRowKeys(type) {
|
let arr = [];
|
for (let item in selectedRowsObj) {
|
arr = arr.concat(selectedRowsObj[item][type]);
|
}
|
return arr;
|
}
|
|
// 获取导入成功数据
|
async function getMyMediationData(submitData, tableActive) {
|
global.setSpinning(true);
|
const res = await getPageInputCaseApi({ ...submitData, inputWay: '2' });
|
global.setSpinning(false);
|
if (res.type) {
|
setSearch(submitData);
|
setData({
|
total: res.data?.totalElements,
|
tableData: res.data?.content || [],
|
});
|
}
|
}
|
|
// 获取附件列表
|
async function getAttachmentList(submitData) {
|
global.setSpinning(true);
|
const res = await getAttachmentListApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
// attachmentList,
|
// 获取下载导入模板
|
let data = res.data || []
|
setAttachmentId(data[0]?.id)
|
}
|
}
|
|
// 获取导入草稿数据
|
async function getPageDraftData(submitData, tableActive) {
|
global.setSpinning(true);
|
const res = await getPageDraftApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
setSearch(submitData);
|
setDraftData({
|
visible: res.data?.content.length > 0 ? false : true,
|
total: res.data?.totalElements,
|
tableData: res.data?.content || [],
|
});
|
}
|
}
|
|
//批量导入
|
async function showDrawer(list) {
|
console.log('list', list);
|
$$.modalInfo({
|
title: '正式导入确认',
|
content: <span>导入后数据将直接归档，后续可通过<span className='public-color'>调解总览（一本账）</span>进行查看，确定将当前选中记录正式导入多元化解平台吗？</span>,
|
okText: '确定导入',
|
cancelText: '我再想想',
|
onOk: async () => {
|
global.setSpinning(true);
|
const res = await getPageSuccessApi(list);
|
global.setSpinning(false);
|
if (res.type) {
|
$$.infoSuccess({ content: <span>成功导入多元化解平台<span className='public-color'>{list.length}</span>个案件信息</span> });
|
setSelectedRowsObj({});
|
setLedgerTab('1');
|
getMyMediationData({ ...search, page: 1, size: 10 });
|
}
|
},
|
});
|
}
|
|
// 批量删除
|
async function handleDelete(list) {
|
console.log('list', list);
|
$$.modalInfo({
|
title: '缓存案件删除确认',
|
content: '删除后数据将无法找回，确定从当前列表中删除选中记录吗？',
|
okText: '确定删除',
|
cancelText: '我再想想',
|
onOk: async () => {
|
global.setSpinning(true);
|
const res = await deleteDraftApi(list);
|
global.setSpinning(false);
|
if (res.type) {
|
$$.infoSuccess({ content: '删除成功' });
|
setSelectedRowsObj({});
|
getPageDraftData({ ...search, page: 1, size: 10 });
|
}
|
},
|
});
|
}
|
|
|
// 初始化
|
useEffect(() => {
|
let type = false;
|
let values = $$.getSessionStorage(location.pathname);
|
type = $$.getQueryString('isBack') && !!values;
|
let tab = $$.getQueryString('tab');
|
type ? handleSearch('recurrent', values) : handleSearch('reset');
|
setLedgerTab(tab || '1');
|
if (!!values) {
|
$$.clearSessionStorage(location.pathname);
|
}
|
getAttachmentList({ ownerType: '22_00018-605', ownerId: '10001', size: '3' })
|
}, []);
|
|
const countData = data.total || 0;
|
|
const countDraftData = draftData.total || 0;
|
|
const selectedRowKeys = handleGetSelectedRowKeys('selectedRowKeys');
|
console.log('draftData.tableData', draftData.tableData, ledgerTab);
|
console.log('draftData.visible', draftData.visible,);
|
return (
|
<Page pageHead={{ title: '案件导入', subtitle: <span>通过文件的方式批量导入{<span className='ledger-main-title'>已结束</span>}的调解案件信息</span> }}>
|
<div className="ledger-main" style={{ marginBottom: selectedRowKeys?.length > 0 ? '56px' : '0' }}>
|
<div className="myMediation-search">
|
<TableSearch
|
labelLength={6}
|
form={form}
|
itemData={[
|
{ type: 'Input', name: 'plaintiffs', label: '申请人' },
|
{ type: 'Input', name: 'defendants', label: '被申请人' },
|
{ type: 'RangePicker', name: 'occurTime', label: '纠纷发生时间' },
|
{ type: 'Input', name: 'mediator', label: '调解员', placeholder: '调解员姓名' },
|
{ type: 'Input', name: 'addr', label: '纠纷发生地' },
|
{ type: 'RangePicker', name: 'createtime', label: '案件导入时间' },
|
{ type: 'Input', name: 'caseNo', label: '调解案号', placeholder: '输入调解案号' },
|
{ type: 'Input', name: 'otherMediator', label: '协助调解员', placeholder: '协助调解员姓名' },
|
]}
|
handleReset={() => handleSearch('reset')}
|
handleSearch={() => handleSearch('search')}
|
/>
|
</div>
|
<div className="pageTabs">
|
<MyTabs
|
tabs={[
|
{ key: '1', label: `导入成功(${$$.showMoreNum(countData)})` },
|
{ key: '2', label: `导入草稿(${$$.showMoreNum(countDraftData)})` },
|
]}
|
activeKey={ledgerTab}
|
onChange={(activeKey) => {
|
setLedgerTab(activeKey);
|
setSearch({ ...search, page: 1 })
|
activeKey == '1' ? getMyMediationData({ ...search, page: 1, size: 10 }) : getPageDraftData({ ...search, page: 1, size: 10 })
|
}}
|
/>
|
</div>
|
{
|
draftData.tableData?.length > 0 && ledgerTab == '2' &&
|
<div className='ledger-main-mould' style={{ marginBottom: '12px', padding: '10px 16px', backgroundColor: "#ffffff", boxShadow: '0px 2px 8px 0px rgba(0,0,0,0.15)' }}>
|
<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>
|
</div>
|
}
|
{
|
data.tableData?.length > 0 && ledgerTab == '1' &&
|
<div className='ledger-main-mould' style={{ marginBottom: '12px', padding: '10px 16px', backgroundColor: "#ffffff", boxShadow: '0px 2px 8px 0px rgba(0,0,0,0.15)' }}>
|
<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>
|
</div>
|
}
|
{
|
ledgerTab == '1' &&
|
<div className="pageTable">
|
<TableView
|
showHeader
|
title="查询结果"
|
columns={columns}
|
dataSource={data.tableData}
|
pagination={{
|
current: search.page,
|
pageSize: search.size,
|
total: data.total,
|
onChange: (page, pageSize) => handleChangePage('data', page, pageSize),
|
}}
|
buttonAction={[
|
<Space>
|
<Button
|
style={{ padding: '0 8px' }}
|
type="link"
|
onClick={() => setMould(true)}
|
>查看导入说明</Button>
|
<Button
|
style={{ padding: '0 8px' }}
|
type="link"
|
onClick={() => window.open(`${$$.appUrl.fileUrl}${$$.appUrl.fileDownUrl}${attachmentId}`)}
|
>下载导入模板</Button>
|
<Button type="primary" onClick={() => navigate(`/mediate/ledgerEdit?attachmentId=${attachmentId}`)}>导入</Button>
|
</Space>
|
]}
|
/>
|
</div>
|
}
|
{
|
ledgerTab == '2' &&
|
<>
|
{
|
draftData.visible ?
|
<div className='ledger-main-empty'>
|
<Empty description={'暂无数据'} image={Empty.PRESENTED_IMAGE_SIMPLE}>
|
<Button onClick={() => navigate(`/mediate/ledgerEdit?attachmentId=${attachmentId}`)} type="primary">导入</Button>
|
<div className='ledger-main-display' style={{ marginTop: '8px' }}>
|
<Button onClick={() => setMould(true)} type="link">查看导入说明</Button>
|
{/* <Button onClick={() => { console.log(`${$$.appUrl}dyh-sys/api/v1/fileInfo/down/2304241207311000`) }} type="link">下载导入模板</Button> */}
|
<Button onClick={() => window.open(`${$$.appUrl.fileUrl}${$$.appUrl.fileDownUrl}${attachmentId}`)} type="link">下载导入模板</Button>
|
</div>
|
</Empty>
|
</div> :
|
<>
|
<div className="pageTable">
|
<TableView
|
showHeader
|
title="查询结果"
|
columns={draftColumns}
|
dataSource={draftData.tableData}
|
rowKey="id"
|
rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
|
pagination={{
|
current: search.page,
|
pageSize: search.size,
|
total: draftData.total,
|
onChange: (page, pageSize) => handleChangePage('draftData', page, pageSize),
|
}}
|
buttonAction={[
|
<Space>
|
<Button
|
style={{ padding: '0 8px' }}
|
type="link"
|
onClick={() => setMould(true)}
|
>查看导入说明</Button>
|
<Button
|
style={{ padding: '0 8px' }}
|
type="link"
|
onClick={() => window.open(`${$$.appUrl.fileUrl}${$$.appUrl.fileDownUrl}${attachmentId}`)}
|
>下载导入模板</Button>
|
<Button type="primary" onClick={() => navigate(`/mediate/ledgerEdit?attachmentId=${attachmentId}`)}>导入</Button>
|
</Space>
|
]}
|
/>
|
</div>
|
{selectedRowKeys.filter(d => d).length > 0 && (
|
<div className="ledger-main-excel">
|
<Space size="middle">
|
<Checkbox
|
onChange={(e) => {
|
if (!e.target.checked) {
|
setSelectedRowsObj({});
|
}
|
}}
|
checked={(selectedRowKeys.filter(d => d).length = data.total)}
|
indeterminate={selectedRowKeys.filter(d => d).length < data.total}
|
>
|
已选{selectedRowKeys.filter(d => d).length}项
|
</Checkbox>
|
<Link onClick={() => setSelectedRowsObj({})}>取消</Link>
|
</Space>
|
<div>
|
<Space size="middle">
|
<Button onClick={() => showDrawer(handleGetSelectedRowKeys('selectedRowKeys'))} type="primary" style={{ marginLeft: '24px' }}>
|
确定导入
|
</Button>
|
<Button type="primary" ghost onClick={() => handleDelete(handleGetSelectedRowKeys('selectedRowKeys'))}>删除</Button>
|
</Space>
|
</div>
|
</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 Ledger;
|
