|
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'])
|
if (form.getFieldsValue()?.caseType) {
|
values.caseType1 = form.getFieldsValue()?.caseType[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]
|
}
|
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: 'Select', name: 'canal', label: '事项来源', placeholder: '请选择', span: 8, selectdata: $$.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: '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: 'caseRef', 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 },
|
]}
|
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;
|
