/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-07-14 11:29:36
|
* @LastEditTime: 2022-11-28 14:39:42
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 工作流程新建 or 修改
|
*/
|
import React, { useState, useEffect } from 'react';
|
import { useNavigate, useSearchParams, useLocation } from 'react-router-dom';
|
import { Button, Row, Col, Input, Select, Switch, Space, Typography, Radio, Checkbox } from 'antd';
|
import { FileTextOutlined, AimOutlined, BranchesOutlined, BankOutlined, AppstoreOutlined } from '@ant-design/icons';
|
import Page from '../../../components/Page';
|
import * as $$ from '../../../utils/utility';
|
import TableView from '../../../components/TableView';
|
import MyModal from '../../../components/MyModal';
|
import SelectObjModal from '../../../components/SelectObjModal';
|
|
const { TextArea } = Input;
|
|
const { Option } = Select;
|
|
const WorkflowManageEdit = () => {
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const [searchParams] = useSearchParams();
|
|
// 区别纠纷调解 or 司法确认
|
const type = searchParams.get('type') || 'mediate';
|
|
// 区别新增 or 修改
|
const editType = searchParams.get('editType') || 'add';
|
|
// 表单数据
|
const [formData, setFormData] = useState({});
|
|
// 是否选择流程步骤
|
const [stepData, setStepData] = useState({ visible: false });
|
|
// 执行者选择modal
|
const [actionUser, setActionUser] = useState({ visible: false });
|
|
// 选择组织modal
|
const [unitVisible, setUnitVisible] = useState(false);
|
|
// 选择纠纷类型modal
|
const [disputeModal, setDisputeModal] = useState({ visible: false });
|
|
const title = `${editType === 'add' ? '新建' : '修改'}${type === 'mediate' ? '纠纷调解' : '司法确认'}流程`;
|
|
// 步骤columns
|
const columns = [
|
{ title: '步骤顺序', dataIndex: 'num', render: (text, record, index) => index + 1 },
|
{ title: '步骤名称', dataIndex: 'xxx1' },
|
{ title: '步骤描述', dataIndex: 'xxx2' },
|
{
|
title: '处理时限',
|
dataIndex: 'expireTime',
|
render: (text, record, index) => {
|
let obj = $$.getHours(text);
|
return record.status === '1' ? (
|
<span className={obj.isNegativeNum ? 'tableView-dangerTime' : ''}>{!!text ? `${obj.hours}小时` : '-'}</span>
|
) : (
|
'-'
|
);
|
},
|
},
|
{ title: '步骤页面名称', dataIndex: 'xxx3' },
|
{ title: '步骤页面编号', dataIndex: 'xxx4' },
|
{ title: '执行者', dataIndex: 'xxx5', render: (text) => <span className="public-tag public-tag-tagBlue2">未设置</span> },
|
{ title: '操作', dataIndex: 'action', render: () => <Typography.Link>设置执行者</Typography.Link>, width: 100 },
|
];
|
|
// 选择步骤
|
function handleChooseStep() {
|
setStepData({ visible: true });
|
}
|
|
// 表单修改
|
function handleChangeInput(key, value) {
|
console.log(key, value);
|
setFormData({ ...formData, [key]: value });
|
}
|
|
// 表单提交
|
function handleSubmitForm(values) {
|
$$.modalInfo({ title: '工作流模板新建确认', content: `确定建立「婚姻纠纷通用调解流程」吗？`, cancelText: '我再想想', okText: '确定创建' });
|
}
|
|
// 保存信息
|
function handleSaveMsg() {
|
if (editType === 'add') {
|
$$.modalInfo({ title: '保存工作流确认', content: '确定保存工作流信息吗？', okText: '确定保存' });
|
} else {
|
$$.modalInfo({ title: '修改工作流确认', content: '修改成功后将不会改变该工作流的生效状态，确定进行修改工作流操作吗？', okText: '确定修改' });
|
}
|
}
|
|
useEffect(() => {
|
console.log(location.state);
|
setFormData({});
|
}, []);
|
|
const radioArr = [
|
{
|
label: '所有人',
|
value: 1,
|
subtitle: '（拥有该页面权限的所有人）',
|
},
|
{
|
label: '上一步骤选择',
|
value: 2,
|
subtitle: '（由上一步骤执行者选择当前步骤的执行者）',
|
},
|
{
|
label: '上一步骤执行者',
|
value: 3,
|
subtitle: '（上一步骤的执行者为当前步骤的执行者）',
|
},
|
{
|
label: '固定角色',
|
value: 4,
|
subtitle: '（固定角色作为当前步骤的执行者）',
|
},
|
];
|
|
return (
|
<Page
|
pageHead={{
|
title: title,
|
subtitle: type === 'mediate' ? '设置工作流步骤、适用组织单位及纠纷类型等信息' : '设置司法确认有关组织进行司法确认工作的流程步骤等信息',
|
breadcrumbData: [{ title: '工作流管理', url: '/mediate/workflowManage' }, { title: title }],
|
handleReturn: () => navigate(-1),
|
}}
|
>
|
<div className="workflowManage-edit">
|
<div className="workflowManage-edit-form">
|
<Row gutter={[16, 16]}>
|
<Col span={24}>
|
<h4>
|
<FileTextOutlined className="workflowManage-edit-titleIcon" />
|
<span>基础信息</span>
|
</h4>
|
<h5>
|
流程名称
|
<span className="leftRequired">*</span>
|
</h5>
|
<Input
|
style={{ width: '340px' }}
|
value={formData.xxx1}
|
onChange={(e) => handleChangeInput('xxx1', e.target.value)}
|
placeholder="输入流程名称"
|
allowClear
|
/>
|
</Col>
|
{type === 'mediate' && (
|
<Col span={24}>
|
<h5>调解类型</h5>
|
<Select
|
value={formData.mediType}
|
style={{ width: '340px' }}
|
onChange={(value, option) => handleChangeInput('mediType', [value, option.children])}
|
>
|
{$$.options.mediateType.map((x, t) => (
|
<Option key={x.value}>{x.label}</Option>
|
))}
|
</Select>
|
</Col>
|
)}
|
<Col span={24}>
|
<h5>流程描述</h5>
|
<TextArea
|
value={formData.xxx1}
|
onChange={(e) => handleChangeInput('xxx1', e.target.value)}
|
placeholder="简要描述流程的特点及使用的场景"
|
allowClear
|
/>
|
</Col>
|
<Col span={24}>
|
<div className="workflowManage-edit-divider" />
|
</Col>
|
<Col span={24}>
|
<h4>
|
<AimOutlined className="workflowManage-edit-titleIcon" />
|
<span>适用范围</span>
|
</h4>
|
{type === 'mediate' ? (
|
<>
|
<Space>
|
<h5 style={{ margin: 0 }}>自定义适用组织</h5>
|
<Switch size="small" checked={formData.xxx2} onChange={(checked) => handleChangeInput('xxx2', checked)} />
|
</Space>
|
<div className="workflowManage-edit-switchSubtitle">
|
{formData.xxx2 ? '工作流将仅对设置的组织单位生效' : '默认适用全部的组织单位，如需为指定组织单位单独设置流程信息，请开启此选项'}
|
</div>
|
{formData.xxx2 && (
|
<Space size="middle">
|
<Button type="dashed" icon={<BankOutlined />}>
|
选择组织
|
</Button>
|
<span>已选择：5个组织</span>
|
</Space>
|
)}
|
</>
|
) : (
|
<>
|
<h5>
|
适用组织<span className="leftRequired">*</span>
|
</h5>
|
<div className="workflowManage-edit-switchSubtitle">根据司法确认现行规定，仅有法院、派驻法庭及法官工作站具备司法确认的受理资格</div>
|
<Space size="middle">
|
<Button type="dashed" icon={<BankOutlined />}>
|
选择组织
|
</Button>
|
<span>已选择：5个组织</span>
|
</Space>
|
</>
|
)}
|
</Col>
|
{type === 'mediate' && (
|
<Col span={24}>
|
<Space>
|
<h5 style={{ margin: 0 }}>自定义纠纷类型</h5>
|
<Switch size="small" checked={formData.xxx3} onChange={(checked) => handleChangeInput('xxx3', checked)} />
|
</Space>
|
<div className="workflowManage-edit-switchSubtitle">
|
{formData.xxx3 ? '工作流将仅对设置的纠纷类型生效' : '默认适用全部的纠纷类型，如需为指定纠纷类型单独设置流程信息，请开启此选项'}
|
</div>
|
{formData.xxx3 && (
|
<Space size="middle">
|
<Button type="dashed" icon={<AppstoreOutlined />} onClick={() => setDisputeModal({ visible: true })}>
|
选择纠纷类型
|
</Button>
|
<span>已选择：8个纠纷类型</span>
|
</Space>
|
)}
|
</Col>
|
)}
|
<Col span={24}>
|
<div className="workflowManage-edit-divider" />
|
</Col>
|
<Col span={24}>
|
<h4>
|
<BranchesOutlined className="workflowManage-edit-titleIcon" />
|
<span>流程步骤</span>
|
</h4>
|
{stepData.visible ? (
|
<TableView columns={columns} dataSource={[{}]} />
|
) : (
|
<div className="workflowManage-edit-step">
|
{[1, 2, 3, 4, 5, 6, 7].map((x, t) => {
|
return (
|
<div className="workflowManage-edit-step-item" key={t}>
|
<h5 className="workflowManage-edit-step-header">
|
<div className="workflowManage-edit-step-icon">
|
<BranchesOutlined />
|
</div>
|
<div>简易案件通用调解流程</div>
|
</h5>
|
<Space direction="vertical" className="workflowManage-edit-step-content">
|
<div>
|
<h5>流程步骤</h5>
|
<div>签收、受理审查、指派调解员、纠纷调解、结果确认、结案归档</div>
|
</div>
|
<div>
|
<h5>更新时间</h5>
|
<div>{$$.dateFormat(new Date())}</div>
|
</div>
|
<div>
|
<h5>流程描述</h5>
|
<div>适合简单的矛盾纠纷案件的快速调解需求。</div>
|
</div>
|
</Space>
|
<div className="workflowManage-edit-step-button">
|
<Button type="primary" onClick={handleChooseStep}>
|
使用
|
</Button>
|
</div>
|
</div>
|
);
|
})}
|
</div>
|
)}
|
</Col>
|
</Row>
|
</div>
|
<Space size="middle">
|
<Button type="primary" onClick={handleSaveMsg}>
|
保存信息
|
</Button>
|
{stepData.visible && (
|
<Button className="public-mainBtn" onClick={() => setStepData({ visible: false })}>
|
重置流程步骤
|
</Button>
|
)}
|
</Space>
|
</div>
|
{/* 设置执行者 */}
|
<MyModal
|
visible={actionUser.visible}
|
width={558}
|
onCancel={() => setActionUser({ visible: false })}
|
cancelText="关闭页面"
|
okText="保存设置"
|
onOk={() => console.log(99)}
|
>
|
<Row gutter={[16, 16]}>
|
<Col span={24}>
|
<h4 style={{ margin: 0 }}>设置执行者</h4>
|
</Col>
|
<Col span={24}>
|
<h5>步骤名称</h5>
|
<div>签收</div>
|
</Col>
|
<Col span={24}>
|
<h5>执行者类型</h5>
|
<Radio.Group>
|
<Space direction="vertical">
|
{radioArr.map((x, t) => (
|
<Radio value={x.value} key={x.value}>
|
{x.label}
|
<span className="workflowManage-edit-subtitle">{x.subtitle}</span>
|
</Radio>
|
))}
|
</Space>
|
</Radio.Group>
|
</Col>
|
<Col span={24}>
|
<h5>
|
选择角色<span className="leftRequired">*</span>
|
</h5>
|
<Select style={{ width: '220px' }}></Select>
|
</Col>
|
</Row>
|
</MyModal>
|
{/* 选择组织 */}
|
<SelectObjModal visible={unitVisible} checkKeys={[]} type="unit" isCheckbox onClose={() => setUnitVisible(false)} />
|
{/* 选择纠纷类型 */}
|
<MyModal
|
visible={disputeModal.visible}
|
width={558}
|
onCancel={() => setDisputeModal({ visible: false })}
|
cancelText="关闭页面"
|
okText="保存设置"
|
onOk={() => console.log(99)}
|
>
|
<Row gutter={[16, 16]}>
|
<Col span={24}>
|
<h4 style={{ margin: 0 }}>自定义纠纷类型</h4>
|
</Col>
|
<Col span={24}>
|
<div className="workflowManage-edit-dispute-flex">
|
<h5>纠纷类型</h5>
|
<Typography.Link>全选</Typography.Link>
|
</div>
|
<Checkbox.Group style={{ width: '100%' }}>
|
<Row>
|
<Col
|
span={24}
|
className={`workflowManage-edit-dispute-checkbox workflowManage-edit-dispute-checkboxActive`}
|
style={{ padding: '4px 12px' }}
|
>
|
<Checkbox value={1}>荔湾区政法委</Checkbox>
|
</Col>
|
<Col span={24} className="workflowManage-edit-dispute-checkbox">
|
<Checkbox value={2}>白云区政法委</Checkbox>
|
</Col>
|
</Row>
|
</Checkbox.Group>
|
</Col>
|
</Row>
|
</MyModal>
|
</Page>
|
);
|
};
|
|
export default WorkflowManageEdit;
|
