/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-18 10:21:49
|
* @LastEditTime: 2024-08-09 16:57:06
|
* @LastEditors: dminyi 1301963064@qq.com
|
* @Version: 1.0.0
|
* @Description: 调度中心
|
*/
|
|
import React, { useState, useEffect, useMemo } from 'react';
|
import * as $$ from '../../../utils/utility';
|
import { Form, Typography, Button, Space } from 'antd';
|
import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
|
import Page from '../../../components/Page/index';
|
import TableView from '../../../components/TableView';
|
import TableSearch from '../../../components/TableSearch';
|
import MyTabs from '../../../components/MyTabs';
|
import BatchDispatch from '../../../components/dispatch/mediateList/BatchDispatch';
|
import SelectObjModal from '../../../components/SelectObjModal';
|
|
const { Link } = Typography;
|
|
// 调度中心列表
|
function getMyMediationDataApi(submitData) {
|
return $$.ax.request({ url: 'caseDisp/pageQuery', type: 'get', data: submitData, service: 'disp' });
|
}
|
|
// 获取列表分类tab
|
function getTabsDataApi() {
|
return $$.ax.request({ url: 'caseDisp/getApplyCanal', type: 'get', service: 'disp' });
|
}
|
|
const MediateList = () => {
|
const [form] = Form.useForm();
|
|
const navigate = useNavigate();
|
|
const [searchParams] = useSearchParams();
|
|
const location = useLocation();
|
|
// table选择数据
|
const [selectedRowsObj, setSelectedRowsObj] = useState({});
|
|
// 搜索
|
const [search, setSearch] = useState({ page: 1, size: 10 });
|
|
// 数据
|
const [data, setData] = useState({ key: new Date() });
|
|
// tabs
|
const [tabs, setTabs] = useState([]);
|
|
// drawer
|
const [drawerVisible, setDrawerVisible] = useState(false);
|
|
// 选择modal
|
const [selectModal, setSelectModal] = useState(false);
|
|
// 批量调度
|
const [formData, setFormData] = useState({});
|
|
const columns = [
|
{
|
title: '调度标签',
|
dataIndex: 'dispTagName',
|
width: 100,
|
render: (text, record) => {
|
let tagName = '';
|
switch (record.dispTag) {
|
case '22_00011-1':
|
tagName = 'tagBlue2';
|
break;
|
case '22_00011-2':
|
tagName = 'tagPurple';
|
break;
|
case '22_00011-3':
|
tagName = 'tagRed';
|
break;
|
case '22_00011-4':
|
tagName = 'tagOrange';
|
break;
|
default:
|
tagName = 'tagBlue';
|
}
|
return <div className={`public-tag public-tag-${tagName}`}>{text}</div>;
|
},
|
},
|
{ title: '调解案号', dataIndex: 'caseNo' },
|
{ title: '申请渠道', dataIndex: 'applyCanalName' },
|
{ title: '调度状态', dataIndex: 'statusName' },
|
{ title: '纠纷类型', dataIndex: 'caseTypeName' },
|
{ title: '申请人', dataIndex: 'plaintiffs' },
|
{ title: '被申请人', dataIndex: 'defendants' },
|
{ title: '纠纷发生地', dataIndex: 'addr' },
|
{ title: '调解类型', dataIndex: 'mediTypeName' },
|
{ title: '登记时间', dataIndex: 'inputTime' },
|
{ title: '调度次数', dataIndex: 'dispCount', render: (text) => text || 0 },
|
{
|
title: '操作',
|
dataIndex: 'action',
|
width: 50,
|
render: (_, record) => {
|
return <Link onClick={() => handleJump(record.caseNo, record.caseId, record.dispId)}>调度</Link>;
|
},
|
},
|
];
|
|
// 获取table选择数据
|
function handleGetSelectedRowKeys(type) {
|
let arr = [];
|
for (let item in selectedRowsObj) {
|
arr = arr.concat(selectedRowsObj[item][type]);
|
}
|
return arr;
|
}
|
const selectedRowKeys = handleGetSelectedRowKeys('selectedRowKeys');
|
|
// 选择table行
|
function handleSelectRow(selectedRowKeys, selectedRows) {
|
let obj = {};
|
obj[data.page] = { selectedRowKeys, selectedRows };
|
setSelectedRowsObj({ ...selectedRowsObj, ...obj });
|
}
|
|
// 搜索 or 重置
|
function handleSearch(type, data) {
|
if (type === 'recovery') {
|
// 详情返回时恢复跳转前查询
|
let obj = Object.assign({}, data.search);
|
$$.changeTimeFormat(obj, 'createTime', 'createStart', 'createEnd');
|
form.setFieldsValue(obj);
|
getData(obj, data.tableActive);
|
return;
|
}
|
if (type === 'search') {
|
let values = form.getFieldsValue();
|
$$.changeTimeFormat(values, 'createTime', 'createStart', 'createEnd');
|
getData({ ...search, ...values, page: 1 });
|
return;
|
}
|
if (type === 'reset') {
|
form.resetFields();
|
getData(data);
|
}
|
}
|
|
// 查看，处理跳转
|
function handleJump(title, caseId, dispId) {
|
$$.setSessionStorage(location.pathname, {
|
search: { ...search },
|
title,
|
subtitle: '分流调度进入账号下的矛盾纠纷案件',
|
breadcrumbData: [{ title: '调度中心', url: location.pathname }, { title: '调度' }],
|
tabs: [{ label: '调度', key: 'dispatch' }],
|
tableActive: dispId,
|
pageFrom: 'mediateList',
|
});
|
navigate(`/mediate/caseDetail?caseId=${caseId}&dispId=${dispId}&back=${location.pathname}`);
|
}
|
|
// 获取待调度数据
|
async function getData(submitData, tableActive) {
|
global.setSpinning(true);
|
const res = await getMyMediationDataApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
setSearch(submitData);
|
setData({ total: res.data?.totalElements, tableData: res.data?.content || [], tableActive });
|
}
|
}
|
|
// 初始化
|
useEffect(() => {
|
// 获取列表分类tab
|
async function getTabsData() {
|
global.setSpinning(true);
|
const res = await getTabsDataApi();
|
global.setSpinning(false);
|
let initSearch = { page: 1, size: 10 };
|
if (res.type) {
|
let data = res.data || [];
|
initSearch.applyCanal = data[0]?.applyCanal;
|
setTabs(data);
|
}
|
let returnRouteData = $$.getSessionStorage(location.pathname);
|
if (searchParams.get('isBack') && !!returnRouteData) {
|
handleSearch('recovery', returnRouteData);
|
} else {
|
handleSearch('reset', initSearch);
|
}
|
if (!!returnRouteData) {
|
$$.clearSessionStorage(location.pathname);
|
}
|
}
|
getTabsData();
|
}, []);
|
|
// tab设置
|
const tabsSet = useMemo(() => {
|
return tabs.map((x) => {
|
if (search.applyCanal === x.applyCanal) {
|
x.label = `${x.applyCanalName}(${$$.showMoreNum(data.total)})`;
|
} else {
|
x.label = `${x.applyCanalName}(${$$.showMoreNum(x.count)})`;
|
}
|
return x;
|
});
|
}, [data.total, search.applyCanal]);
|
|
return (
|
<Page pageHead={{ title: '调度中心', subtitle: '展示平台内未调度的矛盾纠纷案件列表' }}>
|
<div className="mediateList" style={{ marginBottom: selectedRowKeys.length !== 0 && '66px' }}>
|
<div className="pageSearch">
|
<TableSearch
|
form={form}
|
itemData={[
|
{ type: 'Input', name: 'plaintiffs', label: '申请人' },
|
{ type: 'Input', name: 'defendants', label: '被申请人' },
|
{ type: 'RangePicker', name: 'createTime', label: '登记时间' },
|
{
|
type: 'Select',
|
name: 'dispTag', // mediType
|
label: '调度标签',
|
selectdata: [
|
{ value: '22_00011-1', label: '首次调度' },
|
{ value: '22_00011-2', label: '再次申请' },
|
{ value: '22_00011-3', label: '拒绝签收' },
|
{ value: '22_00011-4', label: '超时未签收' },
|
{ value: '22_00011-5', label: '重新调度' },
|
],
|
},
|
{ type: 'Input', name: 'addr', label: '纠纷发生地' },
|
{
|
type: 'Select',
|
name: 'caseType',
|
label: '纠纷类型',
|
selectdata: $$.caseOptions.caseCause,
|
},
|
]}
|
handleReset={() => handleSearch('reset')}
|
handleSearch={() => handleSearch('search')}
|
/>
|
</div>
|
<div className="pageTabs">
|
<MyTabs
|
tabs={tabsSet}
|
activeKey={search.applyCanal}
|
keyStr={['applyCanal', 'label']}
|
onChange={(activeKey) => getData({ ...search, page: 1, size: 10, applyCanal: activeKey })}
|
/>
|
</div>
|
<div className="pageTable">
|
<TableView
|
showHeader
|
title="查询结果"
|
columns={columns}
|
dataSource={data.tableData}
|
rowKey="dispId"
|
rowSelection={{
|
selectedRowKeys,
|
onChange: (selectedRowKeys, selectedRows) => handleSelectRow(selectedRowKeys, selectedRows),
|
}}
|
pagination={{
|
current: search.page,
|
pageSize: search.size,
|
total: data.total,
|
onChange: (page, pageSize) => getData({ ...search, page, size: pageSize }),
|
}}
|
rowClassName={(record) => (record.dispId === data.tableActive ? 'tableRowActive' : '')}
|
/>
|
</div>
|
</div>
|
{selectedRowKeys.length !== 0 && (
|
<div className="mediateList-submit" style={{ left: document.getElementById('nav').clientWidth }}>
|
<Space size="middle">
|
<span>已选{selectedRowKeys.length}项</span>
|
<Link onClick={() => setSelectedRowsObj({})}>取消</Link>
|
</Space>
|
<Space size="middle">
|
{/* TODO:暂无此功能 */}
|
{/* <Button>导出数据</Button> */}
|
<Button type="primary" onClick={() => setDrawerVisible(true)}>
|
批量调度
|
</Button>
|
</Space>
|
</div>
|
)}
|
{/* 批量调度 */}
|
<BatchDispatch
|
dispType="all"
|
dispId={selectedRowKeys}
|
title="批量调度"
|
drawerVisible={drawerVisible}
|
onClose={() => setDrawerVisible(false)}
|
onSubmitCallback={() => {
|
getData(search);
|
setDrawerVisible(false);
|
setSelectedRowsObj({});
|
}}
|
/>
|
{/* 选择modal */}
|
<SelectObjModal
|
visible={selectModal}
|
checkKeys={formData.wantUserId ? [{ label: formData.wantUserName, value: formData.wantUserId }] : []}
|
onOk={(value) => {
|
setSelectModal(false);
|
setFormData({ ...formData, wantUserId: value.keys[0], wantUserName: value.items[0].name });
|
}}
|
onClose={() => setSelectModal(false)}
|
/>
|
</Page>
|
);
|
};
|
|
export default MediateList;
|
