/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-12 17:46:18
|
* @LastEditTime: 2022-12-02 10:58:17
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 登记列表
|
*/
|
import React, { useEffect, useState } from 'react';
|
import Page from '../../../components/Page/index';
|
import { Form, Button, Space, Typography, Tooltip, InputNumber, Checkbox, Col, Row, Radio, Input } from 'antd';
|
import { PlusOutlined, FolderOutlined, DeleteOutlined, FolderFilled } from '@ant-design/icons';
|
import * as $$ from '../../../utils/utility';
|
import { useLocation, useNavigate } from 'react-router-dom';
|
import TableView from '../../../components/TableView';
|
import TableSearch from '../../../components/TableSearch';
|
import MyModal from '../../../components/MyModal';
|
|
const { Link } = Typography;
|
|
const { Search } = Input;
|
|
// 获取数据
|
function getRegisterListDataApi(submitData) {
|
return $$.ax.request({ url: 'caseInfo/pageRegister', type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
// 删除草稿案件
|
function deleteCaseApi(submitData) {
|
return $$.ax.request({ url: 'caseInfo/removeDraftInfo', type: 'post', data: submitData, service: 'mediate' });
|
}
|
|
// 复制案件
|
function copyCaseApi(submitData) {
|
return $$.ax.request({ url: 'caseInfo/copyCaseDraft', type: 'post', data: submitData, service: 'mediate' });
|
}
|
|
// 生成系列案
|
function createFolderCaseApi(submitData) {
|
return $$.ax.request({ url: 'caseInfo/createDraftSerie', type: 'post', data: submitData, service: 'mediate' });
|
}
|
|
const RegisterList = () => {
|
const [form] = Form.useForm();
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
// 搜索
|
const [search, setSearch] = useState({ page: 1, size: 10 });
|
|
// 数据
|
const [data, setData] = useState({ tableData: [] });
|
|
// table选择数据
|
const [selectedRowsObj, setSelectedRowsObj] = useState({});
|
|
// 复制modal
|
const [copyModal, setCopyModal] = useState({ visible: false, num: 1, option: ['caseInfo', 'dagents', 'evidenceFile'] });
|
|
// 系列案modal, type: '1':生成新的系列案 '2':添加到已有系列案中
|
const [caseFolder, setCaseFolder] = useState({ visible: false, num: 0, type: '1', search: {}, data: [], total: 0 });
|
|
// 表头
|
const columns = [
|
{
|
title: '是否为系列案',
|
dataIndex: 'serieStatus',
|
width: 105,
|
render: (text) =>
|
text === '2' ? (
|
<Space size={4}>
|
<FolderFilled className="public-folder" />
|
<span>系列案</span>
|
</Space>
|
) : (
|
'非系列案'
|
),
|
},
|
{ title: '登记状态', dataIndex: 'inputStatusName', render: (text) => <div className="public-tag public-tag-tagRed">{text}</div> },
|
{ title: '申请人', dataIndex: 'plaintiffs' },
|
{ title: '被申请人', dataIndex: 'defendants' },
|
{ title: '纠纷类型', dataIndex: 'caseTypeName' },
|
{ title: '调解类型', dataIndex: 'mediTypeName' },
|
{ title: '纠纷发生地详址', dataIndex: 'addr' },
|
{ title: '登记时间', dataIndex: 'createTime' },
|
{ title: '登记人', dataIndex: 'inputUserName' },
|
{
|
title: '操作',
|
dataIndex: 'action',
|
width: 90,
|
render: (_, record) => {
|
return (
|
<Space size="middle">
|
<Link onClick={() => handleJump(record)}>修改</Link>
|
{record.serieStatus !== '2' && <Link onClick={() => handleOpenCopyModal(record)}>复制</Link>}
|
</Space>
|
);
|
},
|
},
|
];
|
|
// 跳转至修改页面
|
function handleJump(record) {
|
$$.setSessionStorage(location.pathname, { search: search, tableActive: record.id });
|
navigate(`/mediate/casePerfection?caseId=${record.id}&isDraft=true`);
|
}
|
|
// 系列案选择表头
|
const folderColumns = [
|
{
|
title: '状态',
|
dataIndex: 'serieStatus',
|
render: () => (
|
<Space size={4}>
|
<FolderFilled className="public-folder" />
|
<span>系列案</span>
|
</Space>
|
),
|
},
|
{ title: '申请人', dataIndex: 'plaintiffs', width: 130 },
|
{ title: '被申请人', dataIndex: 'defendants', width: 130 },
|
{ title: '创建时间', dataIndex: 'createTime' },
|
];
|
|
// 获取table选择数据
|
function handleGetSelectedRowKeys(type) {
|
let arr = [];
|
for (let item in selectedRowsObj) {
|
arr = arr.concat(selectedRowsObj[item][type]);
|
}
|
return arr;
|
}
|
const selectedRowKeys = handleGetSelectedRowKeys('selectedRowKeys');
|
|
const selectedRows = handleGetSelectedRowKeys('selectedRows');
|
|
// 选择table行
|
function handleSelectRow(selectedRowKeys, selectedRows, type) {
|
if (type === 'modal') {
|
if (selectedRowKeys.length > 1) {
|
$$.info({ type: 'warning', content: '只能选择一个要添加的系列案' });
|
return;
|
}
|
setCaseFolder({ ...caseFolder, selectedRowKeys });
|
} else {
|
let obj = { [search.page]: { selectedRowKeys, selectedRows } };
|
setSelectedRowsObj({ ...selectedRowsObj, ...obj });
|
}
|
}
|
|
// 点击开启复制modal
|
function handleOpenCopyModal(value) {
|
setCopyModal({
|
id: value.id,
|
visible: true,
|
num: 1,
|
option: ['caseInfo', 'dagents', 'evidenceFile'],
|
plaintiffs: value.plaintiffs,
|
defendants: value.defendants,
|
caseTypeName: value.caseTypeName,
|
});
|
}
|
|
// 点击开启系列案modal
|
function handleOpenCaseFolder() {
|
if (selectedRows.find((item) => item.serieStatus === '2')) {
|
$$.info({ type: 'warning', content: '生成系列案功能仅对非系列案生效，请重新选择' });
|
return;
|
}
|
if (selectedRowKeys.length === 0) {
|
$$.info({ type: 'warning', content: '至少选中一条记录' });
|
return;
|
}
|
setCaseFolder({ visible: true, num: selectedRowKeys.length, type: '1', search: { page: 1, size: 5 }, data: [] });
|
}
|
|
// 系列案生成方式选择
|
function handleChangeCaseFolder(value) {
|
if (value === '2') {
|
getCaseFolderData(caseFolder.search, value);
|
} else {
|
setCaseFolder({ ...caseFolder, type: value });
|
}
|
}
|
|
// 系列案modal点击生成
|
function handleCreateCaseFolder() {
|
if (caseFolder.type === '1' && caseFolder.num < 2) {
|
$$.info({ type: 'warning', content: '至少选择两条记录才可生成新的系列案' });
|
return;
|
}
|
if (caseFolder.type === '2' && !caseFolder.selectedRowKeys?.length) {
|
$$.info({ type: 'warning', content: '至少选择一个要添加的系列案' });
|
return;
|
}
|
let submitData = {
|
caseIdList: selectedRowKeys,
|
oldSerieNo: caseFolder.type === '2' ? caseFolder.selectedRowKeys[0] : undefined,
|
};
|
$$.modalInfo({
|
title: '生成系列案确认',
|
content: `生成系列案后将清空意向调解员信息，确定生成系列案吗？`,
|
okText: '确定生成',
|
onOk: () => createCaseFolder(submitData),
|
});
|
}
|
|
// 搜索 or 重置
|
function handleSearch(type, value) {
|
if (type === 'search' || type === 'changePage') {
|
let values = form.getFieldsValue();
|
$$.changeTimeFormat(values, 'createTime', 'applyStart', 'applyEnd');
|
getRegisterListData({ ...search, ...values, page: value[0], size: value[1] });
|
}
|
if (type === 'reset') {
|
form.resetFields();
|
getRegisterListData({ page: 1, size: 10 });
|
}
|
if (type === 'recurrent') {
|
form.setFieldsValue(value.search);
|
getRegisterListData({ ...search, ...value.search }, value.tableActive);
|
}
|
}
|
|
// 获取生成系列案modal中系列案数据
|
async function getCaseFolderData(submitData, value) {
|
global.setSpinning(true);
|
const res = await getRegisterListDataApi({ ...submitData, serieStatus: '2' });
|
global.setSpinning(false);
|
if (res.type) {
|
if (value) {
|
setCaseFolder({ ...caseFolder, type: value, search: submitData, total: res.data?.totalElements, data: res.data?.content });
|
} else {
|
setCaseFolder({ ...caseFolder, search: submitData, total: res.data?.totalElements, data: res.data?.content });
|
}
|
}
|
}
|
|
// 获取数据
|
async function getRegisterListData(submitData, tableActive) {
|
global.setSpinning(true);
|
const res = await getRegisterListDataApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
setSearch(submitData);
|
setData({ total: res.data?.totalElements, tableData: res.data?.content, tableActive });
|
}
|
}
|
|
// 删除案件
|
async function handleDeleteCase() {
|
if (selectedRowKeys.length === 0) {
|
$$.info({ type: 'warning', content: '至少选中一条记录' });
|
return;
|
}
|
$$.modalInfo({
|
title: '案件删除确认',
|
content: '确定删除选中的案件信息吗？',
|
okText: '确定删除',
|
onOk: async () => {
|
global.setSpinning(true);
|
const res = await deleteCaseApi(selectedRowKeys);
|
global.setSpinning(false);
|
if (res.type) {
|
$$.infoSuccess({ content: '删除成功' });
|
getRegisterListData(search);
|
}
|
},
|
});
|
}
|
|
// 复制案件
|
async function handleCopyCase(serieStatus) {
|
let submitData = { serieStatus, caseId: copyModal.id, number: copyModal.num };
|
['caseInfo', 'pagents', 'dagents', 'applyFile', 'evidenceFile', 'otherFile'].forEach(
|
(x) => (submitData[x] = copyModal.option.includes(x) ? '1' : '2')
|
);
|
global.setSpinning(true);
|
const res = await copyCaseApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
setCopyModal({ visible: false });
|
$$.infoSuccess({ content: serieStatus === '1' ? `已为您成功复制${copyModal.num}个案件` : `已为您成功生成包含${copyModal.num}个案件的系列案` });
|
getRegisterListData(search);
|
}
|
}
|
|
// 生成系列案
|
async function createCaseFolder(submitData) {
|
global.setSpinning(true);
|
const res = await createFolderCaseApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
setCaseFolder({ visible: false });
|
$$.infoSuccess({ content: '操作成功！已为您置顶显示最新的系列案' });
|
getRegisterListData(search);
|
}
|
}
|
|
// 初始化
|
useEffect(() => {
|
let values = $$.getSessionStorage(location.pathname);
|
let type = $$.getQueryString('isBack') && !!values;
|
if (type) {
|
handleSearch('recurrent', values);
|
} else {
|
handleSearch('reset');
|
}
|
if (!!values) {
|
$$.clearSessionStorage(location.pathname);
|
}
|
}, []);
|
|
return (
|
<Page pageHead={{ title: '草稿箱', subtitle: '存储草稿状态的案件信息' }}>
|
<div className="registerList">
|
<div className="pageSearch">
|
<TableSearch
|
form={form}
|
labelLength={5}
|
itemData={[
|
{ type: 'Input', name: 'plaintiffs', label: '申请人' },
|
{ type: 'Input', name: 'defendants', label: '被申请人' },
|
{ type: 'RangePicker', name: 'createTime', label: '登记时间' },
|
{ type: 'Input', name: 'inputUserName', label: '登记人', placeholder: '登记人姓名' },
|
{ type: 'Input', name: 'addr', label: '纠纷发生地' },
|
{
|
type: 'Select',
|
name: 'serieStatus',
|
label: '系列案筛选',
|
selectdata: $$.options.selectdata,
|
placeholder: '系列案+非系列案',
|
},
|
]}
|
handleReset={() => handleSearch('reset')}
|
handleSearch={() => handleSearch('search', [1, search.size])}
|
/>
|
</div>
|
<div className="pageTable">
|
<TableView
|
showHeader
|
title="查询结果"
|
buttonAction={[
|
// 白云区多元化平台功能下线-liyj
|
// <Button icon={<FolderOutlined />} onClick={handleOpenCaseFolder}>
|
// 生成系列案
|
// </Button>,
|
<Tooltip
|
title={
|
<span>
|
<span className="public-a" onClick={() => navigate('/mediate/casePerfection')}>
|
常规登记
|
</span>
|
<span className="public-a public-rightBorder" onClick={() => navigate('/mediate/register')}>
|
快速登记
|
</span>
|
</span>
|
}
|
>
|
<Button type="primary" icon={<PlusOutlined />}>
|
登记纠纷
|
</Button>
|
</Tooltip>,
|
]}
|
iconAction={[{ title: '删除', dom: <DeleteOutlined onClick={handleDeleteCase} /> }]}
|
columns={columns}
|
dataSource={data.tableData}
|
rowSelection={{
|
selectedRowKeys,
|
onChange: (selectedRowKeys, selectedRows) => handleSelectRow(selectedRowKeys, selectedRows),
|
}}
|
pagination={{
|
current: search.page,
|
pageSize: search.size,
|
total: data.total,
|
onChange: (page, pageSize) => handleSearch('changePage', [page, pageSize]),
|
}}
|
rowClassName={(record) => (record.id === data.tableActive ? 'tableRowActive' : '')}
|
/>
|
</div>
|
</div>
|
{/* 复制案件 */}
|
<MyModal
|
width={400}
|
visible={copyModal.visible}
|
onCancel={() => setCopyModal({ visible: false })}
|
footer={[
|
<Button
|
type="primary"
|
onClick={() => {
|
if (copyModal.option.length < 1) {
|
$$.info({ type: 'warning', content: '请至少选择一个复制选项' });
|
return;
|
}
|
$$.modalInfo({
|
title: '复制案件确认',
|
content: `确定复制${copyModal.num}个案件吗？`,
|
okText: '确定复制',
|
onOk: () => handleCopyCase('1'),
|
});
|
}}
|
>
|
复制案件
|
</Button>,
|
<Button
|
className="public-mainBtn"
|
onClick={() => {
|
if (copyModal.option.length < 1) {
|
$$.info({ type: 'warning', content: '请至少选择一个复制选项' });
|
return;
|
}
|
$$.modalInfo({
|
title: '生成系列案确认',
|
content: `确定生成包含${copyModal.num}个案件的系列案吗？`,
|
okText: '生成系列案',
|
onOk: () => handleCopyCase('2'),
|
});
|
}}
|
>
|
生成系列案
|
</Button>,
|
<Button onClick={() => setCopyModal({ visible: false })}>取消操作</Button>,
|
]}
|
>
|
<h5>复制对象</h5>
|
<div style={{ marginBottom: '16px' }}>
|
{`申请人（${copyModal.plaintiffs || '-'}）与被申请人（${copyModal.defendants || '-'}）的${copyModal.caseTypeName}一案`}
|
</div>
|
<h5 style={{ marginBottom: '12px' }}>复制数量</h5>
|
<InputNumber
|
style={{ width: '100%', marginBottom: '20px' }}
|
addonAfter={<span>件</span>}
|
value={copyModal.num}
|
onChange={(value) => setCopyModal({ ...copyModal, num: value })}
|
placeholder="单次复制数量不能超过100"
|
max={100}
|
min={1}
|
/>
|
<h5 style={{ marginBottom: '12px' }}>复制选项</h5>
|
<Checkbox.Group value={copyModal.option} onChange={(value) => setCopyModal({ ...copyModal, option: value })}>
|
<Row>
|
{[
|
{ label: '纠纷信息', value: 'caseInfo' },
|
{ label: '申请人', value: 'pagents' },
|
{ label: '被申请人', value: 'dagents' },
|
{ label: '申请材料', value: 'applyFile' },
|
{ label: '证据材料', value: 'evidenceFile' },
|
{ label: '其他材料', value: 'otherFile' },
|
].map((x, t) => (
|
<Col span={24} key={t}>
|
<Checkbox
|
className={`registerList-checkboxItem ${copyModal.option?.includes(x.value) ? 'registerList-checkboxItem-active' : ''}`}
|
value={x.value}
|
>
|
{x.label}
|
</Checkbox>
|
</Col>
|
))}
|
</Row>
|
</Checkbox.Group>
|
</MyModal>
|
{/* 生成系列案 */}
|
<MyModal
|
width={558}
|
visible={caseFolder.visible}
|
okText="确定生成"
|
onOk={handleCreateCaseFolder}
|
onCancel={() => setCaseFolder({ visible: false })}
|
>
|
<Row gutter={[16, 16]}>
|
<Col span={24}>
|
<h4 style={{ margin: 0 }}>生成系列案</h4>
|
</Col>
|
<Col span={24}>
|
<h5>选中案件数量</h5>
|
<div>{caseFolder.num}</div>
|
</Col>
|
<Col span={24}>
|
<h5>生成方式</h5>
|
<Radio.Group onChange={(e) => handleChangeCaseFolder(e.target.value)} value={caseFolder.type}>
|
<Radio value={'1'} style={{ width: '100%', marginBottom: '8px' }}>
|
生成新的系列案
|
</Radio>
|
<Radio value={'2'} style={{ width: '100%' }}>
|
添加到已有系列案中
|
</Radio>
|
</Radio.Group>
|
</Col>
|
{caseFolder.type === '2' && (
|
<Col span={24}>
|
{caseFolder.data?.length === 0 && !caseFolder.search.partys ? (
|
$$.MyEmpty({ description: '没有可以添加的系列案' })
|
) : (
|
<TableView
|
showHeader
|
title={<span style={{ fontSize: '14px' }}>已有系列案列表</span>}
|
buttonAction={[
|
<Search
|
placeholder="查询申请人、被申请人"
|
style={{ width: 232 }}
|
onSearch={(value) => getCaseFolderData({ ...caseFolder.search, partys: value })}
|
/>,
|
]}
|
columns={folderColumns}
|
dataSource={caseFolder.data || []}
|
rowSelection={{
|
selectedRowKeys: caseFolder.selectedRowKeys || [],
|
onChange: (selectedRowKeys, selectedRows) => handleSelectRow(selectedRowKeys, selectedRows, 'modal'),
|
}}
|
pagination={{
|
showSizeChanger: false,
|
current: caseFolder.search?.page,
|
pageSize: caseFolder.search?.size,
|
total: caseFolder.total,
|
onChange: (page) => getCaseFolderData({ ...caseFolder.search, page }),
|
}}
|
/>
|
)}
|
</Col>
|
)}
|
</Row>
|
</MyModal>
|
</Page>
|
);
|
};
|
|
export default RegisterList;
|
