import React, { useRef, useEffect, useState } from 'react';
|
import NewPage from '../../components/NewPage/index';
|
import { Form, Typography, Space, Tooltip } from 'antd';
|
import * as $$ from '../../utils/utility';
|
import { useLocation, useNavigate } from 'react-router-dom';
|
import TableView from '../../components/TableViewCanSort';
|
import NewTableSearch from '../../components/NewTableSearch';
|
import SelectObjModal from '@/components/SelectObjModal/newSelectPerson';
|
import './index.less';
|
const { Link } = Typography;
|
|
// 获取数据
|
function getCaseInfoDataApi(submitData) {
|
return $$.ax.request({ url: 'caseInfo/pageQueryAll', type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
// 区域字典值
|
function treeByUserIdApi(submitData) {
|
return $$.ax.request({ url: 'syRegion/treeByUserId', type: 'get', data: submitData, service: 'sys' });
|
}
|
|
const Comprehensive = () => {
|
const [form] = Form.useForm();
|
const formRef = useRef();
|
let location = useLocation();
|
|
let navigate = useNavigate();
|
|
// 区域字典值
|
const [treeList, setTreeList] = useState([]);
|
// 筛选区域的中文
|
const [labels, setLabels] = useState([]);
|
// 默认查询询条件
|
const [normalSearch, setNormalSearch] = useState({});
|
// 搜索
|
const [search, setSearch] = useState({ page: 1, size: 10, sortColmn: 1, sortType: 2 });
|
|
// 数据
|
const [data, setData] = useState({ tableData: [] });
|
|
// 承办配合部门select框数据
|
const [isModalVisible, setIsModalVisible] = useState(false);
|
const [selectObjModalData, setSelectObjModalData] = useState({});
|
|
// 选择部门弹窗
|
function onChange(key) {
|
if (key === 'mediateUnitId') {
|
setSelectObjModalData({ ...selectObjModalData, key, title: '承办部门' });
|
} else if (key === 'assistUnitId') {
|
setSelectObjModalData({ ...selectObjModalData, key, title: '配合部门' });
|
} else {
|
setSelectObjModalData({ ...selectObjModalData, key, type: 'person', title: '经办人' });
|
}
|
setIsModalVisible(true);
|
}
|
|
// 表头
|
const columns = () => {
|
const columnsData = [
|
{
|
title: '登记时间',
|
width: 140,
|
dataIndex: 'createTime',
|
defaultSortOrder: 'descend',
|
order: 'ascend',
|
sorter: { compare: (a, b) => {} },
|
render: (text, record, index) => {
|
return (
|
<div style={{ display: 'flex', gap: '8px' }}>
|
<div>{$$.dateFormat(text)}</div>
|
{record?.isRisk === '1' && <div className="public-tag public-tag-tagRed">扬言</div>}
|
</div>
|
);
|
},
|
},
|
{ title: '登记机构', width: 150, dataIndex: 'inputUnitName' },
|
{ title: '问题属地', width: 100, dataIndex: 'areaName' },
|
{ title: '事项来源', width: 100, dataIndex: 'canalName' },
|
{ title: '事项等级', width: 100, dataIndex: 'caseLevel' },
|
{ title: '纠纷类型', width: 100, dataIndex: 'caseTypeName' },
|
{ title: '承办部门', width: 120, dataIndex: 'mediateUnitName' },
|
{ title: '配合部门', width: 120, dataIndex: 'assistUnitName' },
|
{ title: '事项状态', width: 100, dataIndex: 'statusName' },
|
{
|
title: '办结时间',
|
width: 100,
|
dataIndex: 'closeTime',
|
order: 'ascend',
|
sorter: { compare: (a, b) => {} },
|
render: (text) => <span>{$$.dateFormat(text)}</span>,
|
},
|
{
|
title: '化解结果',
|
width: 100,
|
dataIndex: 'mediResult',
|
render: (text) => (
|
<div className={text === '22_00025-1' ? 'comprehensive-green' : text === '22_00025-2' ? 'comprehensive-red' : '-'}>
|
{text === '22_00025-1' ? '化解成功' : text === '22_00025-2' ? '化解不成功' : '-'}
|
</div>
|
),
|
},
|
{
|
title: '申请方',
|
width: 100,
|
dataIndex: 'action',
|
render: (text, record) => <div>{record.plaintiffList?.length > 0 ? record.plaintiffList?.map((i) => i.trueName)?.join(',') : '-'}</div>,
|
},
|
{
|
title: '被申请方',
|
width: 100,
|
dataIndex: 'action',
|
render: (text, record) => <div>{record.defendantList?.length > 0 ? record.defendantList?.map((i) => i.trueName)?.join(',') : '-'}</div>,
|
},
|
|
{
|
title: '操作',
|
dataIndex: 'action',
|
width: 50,
|
render: (_, record) => {
|
return (
|
<Space>
|
<span
|
onClick={() => window.open(`${$$.windowUrl}/windowDetail?caseTaskId=${record.caseTaskId}&caseId=${record.id}`)}
|
className="public-color public-a"
|
>
|
详情
|
</span>
|
</Space>
|
);
|
},
|
// render: (_, record) => {
|
// return <Link onClick={() => {
|
// $$.setSessionStorage(location.pathname, { search: search, treeList: treeList, normalSearch: normalSearch });
|
// navigate(`/mediate/visit/fileMessage?caseTaskId=${record.caseTaskId}&caseId=${record.id}`)
|
// }}>详情</Link>;
|
// },
|
},
|
];
|
return columnsData;
|
};
|
|
// 页码修改
|
function handleChangePage(page, pageSize, field, order) {
|
let paramsObj = Object.assign(search, { page, size: pageSize });
|
let sortColmn = '';
|
let sortType = '';
|
sortColmn = field === 'createTime' ? 1 : field === 'closeTime' ? 2 : '';
|
sortType = order === 'ascend' ? 1 : order === 'descend' ? 2 : '';
|
setSearch({ ...paramsObj, sortColmn, sortType });
|
getCaseInfoData({ ...paramsObj, sortColmn, sortType });
|
}
|
|
// 导出数据
|
function downloadXls() {
|
const keysToFilter = ['page', 'size'];
|
const filteredObj = Object.fromEntries(Object.entries(search).filter(([key, value]) => value !== undefined && !keysToFilter.includes(key)));
|
|
window.open(`${$$.appUrl.baseUrl}/${$$.appUrl.mediate}/api/web/caseInfo/exportQueryAll?${$$.useQueryParams(filteredObj)}`);
|
}
|
|
// 搜索 or 重置
|
function handleSearch(type, session) {
|
if (type === 'search') {
|
let values = form.getFieldsValue();
|
$$.changeTimNeweFormat(values, 'createTime', 'createStart', 'createEnd');
|
$$.changeTimNeweFormat(values, 'closeTime', 'closeStart', 'closeEnd');
|
$$.changeTimNeweFormat(values, 'fileTime', 'fileStart', 'fileEnd');
|
$$.searchCascader(values, 'queCode', normalSearch.level, ['queCity', 'queArea', 'queRoad', 'queVillage']);
|
$$.searchCascader(values, 'caseType', 1, ['caseType', 'caseType']);
|
$$.searchCascader(search, 'caseType', 1, ['caseType', 'caseType']);
|
$$.searchCascader(values, 'canal', 1, ['canal', 'canalSecond']);
|
$$.searchCascader(search, 'canal', 1, ['canal', 'canalSecond']);
|
|
if (form.getFieldsValue()?.caseType) {
|
values.caseType1 = form.getFieldsValue()?.caseType[0];
|
}
|
if (form.getFieldsValue()?.canal) {
|
values.caseType1 = form.getFieldsValue()?.canal[0];
|
}
|
if (values.mediateUnitId) {
|
values.mediateUnitId = selectObjModalData?.mediateUnitId?.key;
|
} else {
|
delete values.mediateUnitId;
|
delete search.mediateUnitId;
|
}
|
if (values.assistUnitId) {
|
values.assistUnitId = selectObjModalData?.assistUnitId?.key;
|
} else {
|
delete values.assistUnitId;
|
delete search.assistUnitId;
|
}
|
if (values.mediatorId) {
|
values.mediatorId = selectObjModalData?.mediatorId?.key;
|
} else {
|
delete values.mediatorId;
|
delete search.mediatorId;
|
}
|
getCaseInfoData({ page: search.page, size: search.size, sortColmn: search.sortColmn, sortType: search.sortType, ...values });
|
}
|
if (type === 'reset') {
|
let paramsObj = { page: 1, size: 10, sortColmn: 1, sortType: 2 };
|
getCaseInfoData({
|
...paramsObj,
|
[session.key]: session.value[0],
|
createStart: $$.dateFormat(session.createStart),
|
createEnd: $$.dateFormat(session.createEnd),
|
});
|
return;
|
}
|
if (type === 'recurrent') {
|
let paramsObj = { ...search, ...session.search };
|
let copyObj = { ...paramsObj };
|
if (copyObj.createStart) {
|
copyObj.createTime = [$$.dateFormat($$.myMoment(copyObj.createStart)), $$.dateFormat($$.myMoment(copyObj.createEnd))];
|
}
|
if (copyObj.closeTime) {
|
copyObj.closeTime = [$$.dateFormat($$.myMoment(copyObj.closeStart)), $$.dateFormat($$.myMoment(copyObj.closeEnd))];
|
}
|
if (copyObj.fileTime) {
|
copyObj.fileTime = [$$.dateFormat($$.myMoment(copyObj.fileStart)), $$.dateFormat($$.myMoment(copyObj.fileEnd))];
|
}
|
if (copyObj.queCity) {
|
copyObj.queCode = [copyObj.queCity];
|
}
|
if (copyObj.queArea) {
|
let arrayList = $$.convertStringToArray(copyObj.queArea);
|
console.log('arrayList', arrayList);
|
|
copyObj.queCode = arrayList;
|
}
|
if (copyObj.queRoad) {
|
let arrayList = $$.convertStringToArray(copyObj.queRoad);
|
console.log('arrayList', arrayList);
|
copyObj.queCode = arrayList;
|
}
|
if (copyObj.queVillage) {
|
let arrayList = $$.convertStringToArray(copyObj.queVillage);
|
copyObj.queCode = arrayList;
|
}
|
if (copyObj.caseType) {
|
copyObj.caseType = [copyObj.caseType1, copyObj.caseType];
|
}
|
if (copyObj.canal) {
|
copyObj.canal = [copyObj.canalSecond, copyObj.canal];
|
}
|
form.setFieldsValue(copyObj);
|
getCaseInfoData(paramsObj);
|
return;
|
}
|
}
|
|
// 获取数据
|
async function getCaseInfoData(submitData) {
|
global.setSpinning(true);
|
const res = await getCaseInfoDataApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
setSearch(submitData);
|
setData({
|
total: res?.data?.totalElements || 0,
|
tableData: res?.data?.content || [],
|
});
|
}
|
}
|
|
// 获取区域字典值
|
async function treeByUserId() {
|
global.setSpinning(true);
|
const res = await treeByUserIdApi();
|
global.setSpinning(false);
|
if (res.type) {
|
let list = res.data || [];
|
setTreeList(list);
|
let values = form.getFieldsValue();
|
let key = levelKey(list[0].level || '1');
|
values.queCode = [list[0].value];
|
values.createTime = [
|
$$.myMoment().subtract(0, 'months').startOf('month').format('YYYY-MM-DD'),
|
$$.myMoment().subtract(0, 'months').endOf('month').format('YYYY-MM-DD'),
|
];
|
form.setFieldsValue(values);
|
setLabels([list[0].label]);
|
setNormalSearch({
|
key,
|
value: [list[0].value],
|
level: list[0].level,
|
createStart: $$.myMoment().subtract(0, 'months').startOf('month').format('YYYY-MM-DD'),
|
createEnd: $$.myMoment().subtract(0, 'months').endOf('month').format('YYYY-MM-DD'),
|
});
|
handleSearch('reset', {
|
key,
|
value: [list[0].value],
|
createStart: $$.myMoment().subtract(0, 'months').startOf('month').format('YYYY-MM-DD'),
|
createEnd: $$.myMoment().subtract(0, 'months').endOf('month').format('YYYY-MM-DD'),
|
});
|
}
|
}
|
|
function levelKey(KeyIndex) {
|
return {
|
1: 'queCity',
|
2: 'queArea',
|
3: 'queRoad',
|
4: 'queVillage',
|
}[KeyIndex];
|
}
|
|
// 初始化
|
useEffect(() => {
|
let values = $$.getSessionStorage(location.pathname);
|
console.log('values', values);
|
|
if (!!values) {
|
setTreeList(values?.treeList || []);
|
setNormalSearch(values?.normalSearch || {});
|
handleSearch('recurrent', values);
|
$$.clearSessionStorage(location.pathname);
|
} else {
|
treeByUserId();
|
}
|
}, []);
|
|
return (
|
<NewPage pageHead={{ breadcrumbData: [{ title: '工作台' }, { title: '综合查询' }], title: '综合查询' }}>
|
<div className="comprehensive">
|
<div className="pageSearch">
|
<div className="comprehensive-title">查询条件</div>
|
<NewTableSearch
|
exportButton={downloadXls}
|
labelLength={6}
|
form={form}
|
itemData={[
|
{
|
type: 'Cascader',
|
name: 'queCode',
|
label: '问题属地',
|
placeholder: '请选择',
|
changeSelect: true,
|
allowClear: false,
|
treedata: treeList || [],
|
},
|
{
|
type: 'RangePicker',
|
name: 'createTime',
|
label: '登记时间',
|
shortcutsPlacementLeft: true,
|
allowClear: false,
|
shortcuts: $$.shortcutsList(),
|
span: 8,
|
},
|
{ type: 'RangePicker', name: 'closeTime', label: '办结时间', shortcutsPlacementLeft: true, shortcuts: $$.shortcutsList(), span: 8 },
|
{ type: 'RangePicker', name: 'fileTime', label: '归档时间', shortcutsPlacementLeft: true, shortcuts: $$.shortcutsList(), span: 8 },
|
{
|
type: 'Cascader',
|
name: 'caseType',
|
label: '纠纷类型',
|
placeholder: '请选择',
|
span: 8,
|
changeSelect: true,
|
treedata: $$.caseTypeSelect.caseTypeSelect,
|
},
|
{ type: 'Select', name: 'mediResult', label: '化解结果', placeholder: '请选择', span: 8, selectdata: $$.options.mediResult },
|
{ type: 'Input', name: 'caseRef', label: '事项编号' },
|
{
|
type: 'Cascader',
|
name: 'canal',
|
label: '事项来源',
|
placeholder: '请选择',
|
span: 8,
|
changeSelect: true,
|
treedata: $$.options.caseCanal,
|
},
|
{ type: 'Select', name: 'status', label: '事项状态', placeholder: '请选择', span: 8, selectdata: $$.options.caseStatus },
|
{ type: 'Select', name: 'caseLevel', label: '事项等级', placeholder: '请选择', span: 8, selectdata: $$.options.caseLevelList },
|
{ type: 'Select', name: 'systemSource', label: '系统来源', placeholder: '请选择', span: 8, selectdata: $$.options.systemSource },
|
{ type: 'Input', name: 'inputUnitName', label: '登记机构' },
|
{
|
type: 'searchButton',
|
name: 'mediateUnitId',
|
maxLength: 0,
|
onClear: () => {
|
console.log('clear');
|
setSelectObjModalData({ ...selectObjModalData, mediateUnitId: {} });
|
form.setFieldValue('mediateUnitId', '');
|
},
|
onSearch: () => {
|
onChange('mediateUnitId');
|
},
|
searchButton: '选择',
|
placeholder: '请选择',
|
label: '承办部门',
|
},
|
{
|
type: 'searchButton',
|
name: 'assistUnitId',
|
maxLength: 0,
|
onClear: () => {
|
setSelectObjModalData({ ...selectObjModalData, assistUnitId: {} });
|
form.setFieldValue('assistUnitId', '');
|
},
|
onSearch: () => {
|
onChange('assistUnitId');
|
},
|
searchButton: '选择',
|
placeholder: '请选择',
|
label: '配合部门',
|
},
|
{ type: 'Input', name: 'plaintiffs', label: '申请方', labelStyle: { width: '56px' } },
|
{ type: 'Input', name: 'defendants', label: '被申请方' },
|
{ type: 'Select', name: 'peopleNum', placeholder: '请选择', label: '涉及人数', selectdata: $$.options.peopleNum },
|
{ type: 'Select', name: 'amount', placeholder: '请选择', label: '涉及金额', selectdata: $$.options.amount },
|
{ type: 'Select', name: 'evaluateGrade', placeholder: '请选择', label: '评价等级', selectdata: $$.options.evaluateGrade },
|
{
|
type: 'Select',
|
name: 'majorStatus',
|
placeholder: '请选择',
|
label: '是否重大矛盾',
|
selectdata: [
|
{ label: '是', value: '1' },
|
{ label: '否', value: '0' },
|
],
|
},
|
{
|
type: 'searchButton',
|
name: 'mediatorId',
|
maxLength: 0,
|
onClear: () => {
|
setSelectObjModalData({ ...selectObjModalData, mediatorId: {} });
|
form.setFieldValue('mediatorId', '');
|
},
|
onSearch: () => {
|
onChange('mediatorId');
|
},
|
searchButton: '选择',
|
placeholder: '请选择',
|
label: '经办人',
|
},
|
{
|
type: 'Select',
|
name: 'isRisk',
|
placeholder: '请选择',
|
label: '是否扬言极端',
|
selectdata: [
|
{ label: '是', value: '1' },
|
{ label: '否', value: '0' },
|
],
|
},
|
{ type: 'Select', name: 'agreeType', placeholder: '请选择', label: '结案协议类型', selectdata: $$.options.caseAgreeType },
|
{ type: 'Select', name: 'repeatCase', placeholder: '请选择', label: '合并事项', selectdata: $$.options.repeatCase },
|
{ type: 'Input', name: 'caseCityCode', label: '市民编号' },
|
]}
|
handleReset={() => {
|
form.resetFields();
|
form.setFieldsValue({
|
queCode: [normalSearch.value[0]],
|
createTime: [$$.dateFormat(normalSearch.createStart), $$.dateFormat(normalSearch.createEnd)],
|
});
|
setLabels([treeList[0].label]);
|
handleSearch('reset', normalSearch);
|
}}
|
handleSearch={() => handleSearch('search')}
|
/>
|
</div>
|
|
<div style={{ marginTop: '8px' }} className="comprehensive-table">
|
<TableView
|
showHeader
|
title="查询结果"
|
columns={columns()}
|
dataSource={data.tableData}
|
onChange={(pagination, filters, sorter) => {
|
handleChangePage(pagination.current, pagination.pageSize, sorter.field, sorter.order);
|
}}
|
pagination={{
|
current: search.page,
|
pageSize: search.size,
|
total: data.total,
|
}}
|
/>
|
</div>
|
<SelectObjModal
|
visible={isModalVisible}
|
nameStr={selectObjModalData.title}
|
checkKeys={[selectObjModalData[selectObjModalData.key]?.key || '']}
|
onOk={(item) => {
|
setIsModalVisible(false);
|
setSelectObjModalData({ ...selectObjModalData, [selectObjModalData.key]: item });
|
form.setFieldValue(selectObjModalData?.key, item.name);
|
}}
|
type={selectObjModalData.type || 'dept'}
|
onClose={() => setIsModalVisible(false)}
|
isCheckbox={false}
|
/>
|
</div>
|
</NewPage>
|
);
|
};
|
|
export default Comprehensive;
|
