import React, { useEffect, useState } from 'react';
|
import { useNavigate, useLocation, useSearchParams } from 'react-router-dom';
|
import { Form, Typography, Space } from 'antd';
|
import { Alert } from '@arco-design/web-react';
|
import NewTableSearch from '../../components/NewTableSearch';
|
import TableView from '../../components/TableViewCanSort';
|
import MyTabsNew from '../../components/MyTabsNew';
|
import NewPage from '../../components/NewPage';
|
import * as $$ from '../../utils/utility';
|
import './index.less';
|
// 列表数据
|
function getImportDraftDataApi(submitData) {
|
return $$.ax.request({ url: 'judicInfo/pageSuccessCase', type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
function copyJudicApi(data) {
|
return $$.ax.request({ url: 'judicInfo/copyJudic', type: 'get', data, service: 'mediate' });
|
}
|
|
const { Link } = Typography;
|
|
// 两个列表的默认搜索参数
|
const unApplySearch = { page: 1, size: 10, sortColmn: 2, sortType: 2 };
|
const applySearch = { page: 1, size: 10, sortColmn: 1, sortType: 2 };
|
const MediateAll = () => {
|
let location = useLocation();
|
|
let navigate = useNavigate();
|
|
const [searchParams] = useSearchParams();
|
|
const [form] = Form.useForm();
|
|
// 搜索
|
const [search, setSearch] = useState(unApplySearch);
|
|
// tabs标签分页
|
const [mediateTab, setMediateTab] = useState('0');
|
|
// 数据
|
const [data, setData] = useState({ tableData: [] });
|
|
//自定义排序
|
function getOrderPara(field, order) {
|
// field, closeTime 、applyTime
|
// sortColmn 2 办结时间 1申请时间
|
// sortType 1-升序，2-降序
|
if (field === 'closeTime') {
|
if (order === 'descend') {
|
return { sortColmn: 2, sortType: 2 };
|
}
|
if (order === 'ascend') {
|
return { sortColmn: 2, sortType: 1 };
|
}
|
if (order === 'undefined') {
|
return { sortColmn: 2, sortType: '' };
|
}
|
}
|
if (field === 'applyTime') {
|
if (order === 'descend') {
|
return { sortColmn: 1, sortType: 2 };
|
}
|
if (order === 'ascend') {
|
return { sortColmn: 1, sortType: 1 };
|
}
|
if (order === 'undefined') {
|
return { sortColmn: 1, sortType: '' };
|
}
|
}
|
}
|
|
// 查看，签收跳转
|
function handleJump(record) {
|
$$.setSessionStorage(location.pathname, { search: search });
|
navigate(
|
`/mediate/visit/fileMessage?caseTaskId=${record.caseTaskId}&caseId=${record.caseId}&judicId=${record.judicId}&back=${location.pathname}&tab=${mediateTab}`
|
);
|
}
|
//申请或再次申请
|
function modifyJump(record) {
|
$$.setSessionStorage(location.pathname, { search: search });
|
copyJudic(record);
|
}
|
|
async function copyJudic(record) {
|
global.setSpinning(true);
|
const res = await copyJudicApi({ caseId: record.caseId });
|
global.setSpinning(false);
|
if (res.type) {
|
$$.setSessionStorage('judicialSubmitEdit', res.data || {});
|
navigate(`/mediate/judicialSubmit/audit?caseTaskId=${record.caseTaskId}&caseId=${record.id}&back=${location.pathname}`);
|
}
|
}
|
|
// 搜索 or 重置
|
function handleSearch(type, data, tab) {
|
// 重置
|
if (type === 'reset') {
|
let defaultSearch = tab === '0' ? unApplySearch : applySearch;
|
form.resetFields();
|
getImportDraftData({ ...defaultSearch, judicApply: tab });
|
return;
|
}
|
// 筛选条件搜索
|
if (type === 'search') {
|
let values = form.getFieldsValue();
|
$$.changeTimNeweFormat(values, 'closeTime', 'closeStart', 'closeEnd');
|
$$.searchCascader(values, 'caseType', 1, ['caseType', 'caseType']);
|
getImportDraftData({
|
page: search.page,
|
size: search.size,
|
sortColmn: search.sortColmn,
|
sortType: search.sortType,
|
...values,
|
judicApply: tab,
|
});
|
}
|
// 翻页、正序倒序
|
if (type === 'sort') {
|
getImportDraftData({ ...data, judicApply: tab });
|
}
|
// 案件详情返回时恢复跳转前查询
|
if (type === 'recovery') {
|
let obj = { ...data };
|
if (obj.closeStart) {
|
obj.closeTime = [obj.closeStart, obj.closeEnd];
|
}
|
form.setFieldsValue(obj);
|
getImportDraftData({ ...data, judicApply: tab });
|
return;
|
}
|
}
|
|
// 获取草稿数据
|
async function getImportDraftData(submitData) {
|
global.setSpinning(true);
|
const res = await getImportDraftDataApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
setData({ total: res.data.totalElements, tableData: res?.data?.content, totalData: res?.data?.totalData });
|
setSearch(submitData);
|
}
|
}
|
|
// 初始化
|
useEffect(() => {
|
let returnRouteData = $$.getSessionStorage(location.pathname);
|
if (searchParams.get('isBack') && !!returnRouteData) {
|
searchParams.get('tab') && setMediateTab(searchParams.get('tab'));
|
handleSearch('recovery', returnRouteData.search, searchParams.get('tab'));
|
} else {
|
handleSearch('reset', '', '0');
|
}
|
if (!!returnRouteData) {
|
$$.clearSessionStorage(location.pathname);
|
}
|
}, []);
|
|
const columns = [
|
{
|
title: '办结时间',
|
width: 120,
|
dataIndex: 'closeTime',
|
defaultSortOrder: 'descend',
|
order: 'ascend',
|
sorter: { compare: (a, b) => {} },
|
render: (text) => <span>{$$.dateFormat(text)}</span>,
|
},
|
{ title: '登记机构', dataIndex: 'inputUnitName' },
|
{
|
title: '问题属地',
|
dataIndex: 'areaName',
|
render: (text, record) => (
|
<div>
|
{record.queAreaName || ''}
|
{record.queRoadName ? `/${record.queRoadName}` : ''}
|
{record.queVillageName ? `/${record.queVillageName}` : ''}
|
</div>
|
),
|
},
|
{ title: '事项来源', dataIndex: 'canalName' },
|
{
|
title: '事项等级',
|
dataIndex: 'caseLevel',
|
render: (text) => <span>{text === '3' ? '三级' : text === '2' ? '二级' : text === '1' ? '一级' : '-'}</span>,
|
},
|
{ title: '纠纷类型', dataIndex: 'caseTypeName' },
|
{ title: '申请方', width: 150, dataIndex: 'plaintiffs' },
|
{ title: '被申请方', width: 150, dataIndex: 'defendants' },
|
{ title: '承办部门', width: 100, dataIndex: 'mediateUnitName' },
|
{ title: '经办人', width: 100, dataIndex: 'mediator' },
|
{
|
title: '操作',
|
dataIndex: 'action',
|
width: 90,
|
render: (_, record) => {
|
return (
|
<Space size="middle">
|
<Link onClick={() => handleJump(record)}>详情</Link>
|
<Link onClick={() => modifyJump(record)}>申请</Link>
|
</Space>
|
);
|
},
|
},
|
];
|
|
const appliedColumns = [
|
{
|
title: '申请时间',
|
width: 120,
|
dataIndex: 'applyTime',
|
defaultSortOrder: 'descend',
|
order: 'ascend',
|
sorter: { compare: (a, b) => {} },
|
render: (text) => <span>{$$.dateFormat(text)}</span>,
|
},
|
{ title: '申请部门', width: 100, dataIndex: 'applyUnitName' },
|
{ title: '纠纷类型', dataIndex: 'caseTypeName' },
|
{ title: '承办部门', width: 100, dataIndex: 'mediateUnitName' },
|
{ title: '经办人', width: 100, dataIndex: 'mediator' },
|
{
|
title: '办结时间',
|
width: 120,
|
dataIndex: 'closeTime',
|
order: 'ascend',
|
sorter: { compare: (a, b) => {} },
|
render: (text) => <span>{$$.dateFormat(text)}</span>,
|
},
|
{ title: '事项编号', dataIndex: 'caseRef' },
|
{ title: '司法确认部门', dataIndex: 'courtName' },
|
{ title: '审核进度', dataIndex: 'status', render: (text) => <span>{text === 0 ? '审核中' : text === 1 ? '已审核' : '-'}</span> },
|
{
|
title: '审核结果',
|
dataIndex: 'judicAudit',
|
render: (text) => (
|
<span className={text === '24_00004-1' ? 'public-success' : text === '24_00004-2' ? 'public-danger' : ''}>
|
{text === '24_00004-1' ? '通过' : text === '24_00004-2' ? '未通过' : '-'}
|
</span>
|
),
|
},
|
{ title: '司法确认进度', dataIndex: 'processName' },
|
{
|
title: '司法确认结果',
|
dataIndex: 'judicResult',
|
render: (text) => (
|
<span className={text === '22_00028-1' ? 'public-success' : text === '22_00028-2' ? 'public-danger' : ''}>
|
{text === '22_00028-1' ? '已达成' : text === '22_00028-2' ? '未达成' : '-'}
|
</span>
|
),
|
},
|
{
|
title: '操作',
|
dataIndex: 'action',
|
width: 120,
|
render: (_, record) => {
|
return (
|
<Space size="middle">
|
<Link onClick={() => handleJump(record)}>详情</Link>
|
{record.judicAudit === '24_00004-2' && <Link onClick={() => modifyJump(record)}>再次申请</Link>}
|
</Space>
|
);
|
},
|
},
|
];
|
|
return (
|
<NewPage pageHead={{ breadcrumbData: [{ title: '工作台' }, { title: '申请确认' }], title: '申请确认' }}>
|
<div className="comprehensive">
|
<div className="myMediation-search">
|
<NewTableSearch
|
exportButtonShow={false}
|
headTitle={'查询条件'}
|
labelLength={4}
|
rowNum={2}
|
form={form}
|
itemData={[
|
{ type: 'RangePicker', name: 'closeTime', label: '办结时间', shortcutsPlacementLeft: true, shortcuts: $$.shortcutsList(), span: 8 },
|
{ type: 'Input', name: 'caseRef', label: '事项编号', placeholder: '请填写' },
|
{
|
type: 'Select',
|
name: 'judicResult',
|
label: '司法确认结果',
|
placeholder: '请选择',
|
span: 8,
|
selectdata: [
|
{ label: '已达成', value: '22_00028-1' },
|
{ label: '未达成', value: '22_00028-2' },
|
],
|
},
|
{
|
type: 'Cascader',
|
name: 'caseType',
|
label: '纠纷类型',
|
placeholder: '请选择',
|
changeSelect: true,
|
span: 8,
|
treedata: $$.caseTypeSelect.caseTypeSelect,
|
},
|
{ type: 'Input', name: 'plaintiffs', label: '申请方', placeholder: '请填写', labelStyle: { width: '56px' } },
|
{ type: 'Input', name: 'defendants', label: '被申请方', placeholder: '请填写', labelStyle: { width: '84px' } },
|
]}
|
handleReset={() => handleSearch('reset', '', mediateTab)}
|
handleSearch={() => handleSearch('search', '', mediateTab)}
|
/>
|
</div>
|
<div className="pageTabs" style={{ borderBottom: '1px solid #e5e6eb' }}>
|
<MyTabsNew
|
tabs={[
|
{ key: '0', label: `未申请(${$$.showMoreNum(data.totalData?.unApplyNum || 0)})` },
|
{ key: '1', label: `已申请(${$$.showMoreNum(data.totalData?.applyNum || 0)})` },
|
]}
|
activeKey={mediateTab}
|
onChange={(activeKey) => {
|
setMediateTab(activeKey);
|
handleSearch('search', activeKey === '0' ? unApplySearch : applySearch, activeKey);
|
}}
|
/>
|
</div>
|
<div style={{ margin: '6px 0' }}>
|
{mediateTab == '0' && data.total > 0 && (
|
<Alert
|
type="info"
|
content={
|
<span>
|
只有<span className="public-color">化解成功案</span>
|
<span>件才可以申请司法确认</span>
|
</span>
|
}
|
/>
|
)}
|
</div>
|
<div style={{ flex: '1', marginBottom: '16px' }} className="pageTable">
|
{/* 未申请 */}
|
{mediateTab === '0' && (
|
<TableView
|
showHeader
|
title="查询结果"
|
columns={columns}
|
dataSource={data.tableData}
|
onChange={(pagination, filters, sorter) => {
|
handleSearch(
|
'sort',
|
{ page: pagination.current, size: pagination.pageSize, ...getOrderPara(sorter.field, sorter.order) },
|
mediateTab
|
);
|
}}
|
pagination={{
|
current: search.page,
|
pageSize: search.size,
|
total: data.total,
|
}}
|
/>
|
)}
|
{/* 已申请 */}
|
{mediateTab === '1' && (
|
<TableView
|
showHeader
|
title="查询结果"
|
columns={appliedColumns}
|
dataSource={data.tableData}
|
rowKey={(record) => record.id}
|
onChange={(pagination, filters, sorter) => {
|
handleSearch(
|
'sort',
|
{ page: pagination.current, size: pagination.pageSize, ...getOrderPara(sorter.field, sorter.order) },
|
mediateTab
|
);
|
}}
|
pagination={{
|
current: search.page,
|
pageSize: search.size,
|
total: data.total,
|
}}
|
/>
|
)}
|
</div>
|
</div>
|
</NewPage>
|
);
|
};
|
|
export default MediateAll;
|
