/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-07-14 10:51:10
|
* @LastEditTime: 2022-11-01 09:52:00
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 工作流管理
|
*/
|
import React, { useState, useEffect } from 'react';
|
import { useNavigate, useLocation, useSearchParams } from 'react-router-dom';
|
import { Button, Form, Space, Tooltip, Typography } from 'antd';
|
import { PlusOutlined } from '@ant-design/icons';
|
import Page from '../../../components/Page';
|
import TableView from '../../../components/TableView';
|
import TableSearch from '../../../components/TableSearch';
|
import * as $$ from '../../../utils/utility';
|
|
// 获取工作流管理数据
|
function getWorkflowManageApi(submitData) {
|
return $$.ax.request({ url: '', type: 'get', data: submitData, service: '' });
|
}
|
|
const { Link } = Typography;
|
|
const WorkflowManage = () => {
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const [searchParams] = useSearchParams();
|
|
const [form] = Form.useForm();
|
|
// 搜索
|
const [search, setSearch] = useState({ page: 1, size: 10 });
|
|
// 数据
|
const [data, setData] = useState({});
|
|
const columns = [
|
{ title: '流程类型', dataIndex: 'xxx1' },
|
{ title: '流程名称', dataIndex: 'xxx2' },
|
{ title: '纠纷类型', dataIndex: 'caseTypeName' },
|
{ title: '适用组织', dataIndex: 'xxx3' },
|
{ title: '生效状态', dataIndex: 'xxx4', width: 85, render: (text) => <div className={`public-tag public-tag-tagBlue`}>启用中</div> },
|
{ title: '使用次数', dataIndex: 'xxx6' },
|
{ title: '更新时间', dataIndex: 'xxx7' },
|
{ title: '更新人', dataIndex: 'xxx8' },
|
{
|
title: '操作',
|
dataIndex: 'action',
|
width: 200,
|
render: (_, record) => (
|
<Space size="middle">
|
<Link onClick={() => handleJump('check', 'mediate', record)}>查看</Link>
|
<Link onClick={() => handleJump('change', 'mediate', record)}>修改</Link>
|
<Link onClick={() => handleOpenOrStop(record)}>启用</Link>
|
<Link onClick={() => handleDel(record)}>删除</Link>
|
</Space>
|
),
|
},
|
];
|
|
// 新建，修改，查看跳转
|
function handleJump(editType, type, record) {
|
$$.setSessionStorage(location.pathname, {
|
search,
|
tableActive: null,
|
});
|
if (editType === 'check') {
|
navigate(`/mediate/workflowManage/workflowManageDetail?type=${type}&back=${location.pathname}`, { state: { aa: 11 } });
|
return;
|
}
|
navigate(`/mediate/workflowManage/workflowManageEdit?type=${type}&editType=${editType}&back=${location.pathname}`, { state: { aa: 11 } });
|
}
|
|
// 启用 or 停用
|
function handleOpenOrStop(record) {
|
$$.modalInfo({ type: 'warning', content: `该工作流有在途任务，暂时无法停用` });
|
$$.modalInfo({ title: '停用工作流确认', content: `停用后将无法继续使用该流程，确定停用「纠纷调解通用流程」吗？`, okText: '确定停用' });
|
$$.modalInfo({ title: '启用工作流确认', content: `确定启用「婚姻调解工作流」吗？`, okText: '确定启用' });
|
}
|
|
// 删除模板
|
function handleDel(record) {
|
$$.modalInfo({ type: 'warning', content: `该工作流有在途任务，暂时无法删除` });
|
$$.modalInfo({ title: '删除工作流确认', content: `删除后将无法继续使用该流程，确定删除「纠纷调解通用流程」吗？`, okText: '确定删除' });
|
}
|
|
// 搜索 or 重置
|
function handleSearch(type, data) {
|
if (type === 'recovery') {
|
// 案件详情返回时恢复跳转前查询
|
let obj = Object.assign({}, data.search);
|
form.setFieldsValue(obj);
|
getWorkflowManage(obj);
|
return;
|
}
|
if (type === 'reset') {
|
form.resetFields();
|
getWorkflowManage({ page: 1, size: 10 });
|
return;
|
}
|
if (type === 'search') {
|
let values = form.getFieldsValue();
|
getWorkflowManage({ ...search, ...values, page: 1 });
|
return;
|
}
|
if (type === 'changePage') {
|
getWorkflowManage({ ...search, page: data[0], size: data[1] });
|
}
|
}
|
|
// 获取数据
|
async function getWorkflowManage(submitData, tableActive) {
|
global.setSpinning(true);
|
const res = await getWorkflowManageApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
setData({ total: res.data?.totalElements, tableData: res.data?.content || [], tableActive });
|
}
|
}
|
|
return (
|
<Page pageHead={{ title: '工作流管理', subtitle: '管理平台内调解及司法确认涉及的工作流配置清单与规则' }}>
|
<div className="workflowManage">
|
<div className="pageSearch">
|
<TableSearch
|
labelLength={4}
|
form={form}
|
itemData={[
|
{ type: 'Input', name: 'xxx1', label: '流程名称' },
|
{ type: 'Select', name: 'caseType', label: '纠纷类型', selectdata: $$.caseOptions.caseCause },
|
{
|
type: 'Select',
|
name: 'xxx3',
|
label: '生效状态',
|
selectdata: [
|
{ label: '启用', value: '1' },
|
{ label: '停用', value: '2' },
|
],
|
},
|
{
|
type: 'Select',
|
name: 'xxx2',
|
label: '流程类型',
|
selectdata: [
|
{ label: '纠纷调解', value: '1' },
|
{ label: '司法确认', value: '2' },
|
{ label: '法律咨询', value: '3' },
|
],
|
},
|
{ type: 'Input', name: 'xxx4', label: '适用组织', placeholder: '选择工作流适用的组织' },
|
]}
|
handleReset={() => handleSearch('reset')}
|
handleSearch={() => handleSearch('search')}
|
/>
|
</div>
|
<div className="pageTable">
|
<TableView
|
showHeader
|
title="查询结果"
|
buttonAction={[
|
<Tooltip
|
title={
|
<span>
|
<span className="public-a" onClick={() => handleJump('add', 'mediate')}>
|
纠纷调解
|
</span>
|
<span className="public-a public-rightBorder" onClick={() => handleJump('add', 'judicial')}>
|
司法确认
|
</span>
|
</span>
|
}
|
>
|
<Button type="primary" icon={<PlusOutlined />}>
|
新建流程
|
</Button>
|
</Tooltip>,
|
]}
|
columns={columns}
|
dataSource={data.tableData || [{}]}
|
rowClassName={(record, index) => (record.id === data.tableActive ? 'tableRowActive' : '')}
|
pagination={{
|
current: search.page,
|
pageSize: search.size,
|
total: data.total,
|
onChange: (page, pageSize) => handleSearch('changePage', [page, pageSize]),
|
}}
|
/>
|
</div>
|
</div>
|
</Page>
|
);
|
};
|
|
export default WorkflowManage;
|
