Skip to content

C
CivManage
Commit 7070002e authored by 邓超's avatar 邓超
Browse files
Options

feat: 流程节点模块

parent f9560ad6
Hide whitespace changes
Inline Side-by-side
Showing with 1065 additions and 84 deletions
src/pages/platformCenter/bsmanager/workFlow/flow.jsx
View file @ 7070002e
......@@ -20,11 +20,13 @@ import {
ApartmentOutlined,
DeleteOutlined,
OrderedListOutlined,
ControlOutlined,
} from '@ant-design/icons';
import classnames from 'classnames';
import PageContainer from '@/components/BasePageContainer';
import ProcessConfig from './flowComponents/ProcessConfig';
import Order from './flowComponents/Order';
import Timelimit from './flowComponents/Timelimit';
import styles from './flow.less';
const Flow = () => {
......@@ -39,6 +41,7 @@ const Flow = () => {
const [visible, setVisible] = useState({
processConfig: false,
order: false,
auxiliaryView: false,
}); // 弹窗显示
// 初始化
useEffect(() => {
......@@ -100,7 +103,7 @@ const Flow = () => {
notification.success({
message: '提示',
duration: 3,
description: '删除成功',
description: '清除成功',
});
} else {
notification.error({
......@@ -147,9 +150,10 @@ const Flow = () => {
),
},
{
title: '辅助试图',
title: '辅助视图',
dataIndex: 'extendPageCount',
align: 'center',
width: 80,
render: text => (
// eslint-disable-next-line react/no-danger
<span dangerouslySetInnerHTML={{ __html: text }} />
......@@ -204,6 +208,15 @@ const Flow = () => {
style={{ fontSize: '16px', color: '#1890FF' }}
/>
</Tooltip>
<Tooltip title="时限配置">
<ControlOutlined
onClick={() => {
showModal('auxiliaryView', true);
setProcessMsg(record);
}}
style={{ fontSize: '16px', color: '#1890FF' }}
/>
</Tooltip>
<Tooltip title="节点配置">
<ApartmentOutlined
onClick={() => toNode(record.name)}
......@@ -338,6 +351,12 @@ const Flow = () => {
getProcessData();
}}
/>
{/* 流程时限配置 */}
<Timelimit
visible={visible.auxiliaryView}
msg={processMsg}
handleCancel={() => showModal('auxiliaryView', false)}
/>
</PageContainer>
);
};
......
src/pages/platformCenter/bsmanager/workFlow/flow.less
View file @ 7070002e
......@@ -8,7 +8,7 @@
left: 0;
top: 0;
height: calc(100vh - 74px);
width: 280px;
width: 250px;
margin-right: 10px;
overflow-x: hidden;
transition-property: width, left;
......@@ -124,3 +124,48 @@
}
}
}
.buttonList {
display: flex;
justify-content: flex-end;
margin-bottom: 15px;
.ant-btn {
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
}
}
// 表格样式
.ant-table-pagination {
padding-right: 12px;
background: white;
margin: 1px 0;
padding: 8px;
padding-right: 20px;
}
.ant-table-thead tr th {
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
}
.ant-table-cell {
// text-align: center;
overflow: hidden;
white-space: nowrap;
}
.ant-table-body {
height: calc(100vh - 160px);
border-right: 1px solid rgb(240, 240, 240);
overflow: auto !important;
}
.ant-pagination {
z-index: 999;
border-top: 1px solid #f0eded;
}
.unfoldTable {
.ant-table {
margin-left: -9px !important;
}
}
\ No newline at end of file
src/pages/platformCenter/bsmanager/workFlow/flowComponents/ProcessConfig.jsx
View file @ 7070002e
......@@ -8,6 +8,7 @@ const ProcessConfig = props => {
const { onSubumit, handleCancel, visible, processMsg } = props;
const [form] = Form.useForm();
useEffect(() => {
form.resetFields();
if (visible) {
getFormData();
}
......@@ -78,7 +79,7 @@ const ProcessConfig = props => {
</Radio.Group>
</Form.Item>
<Form.Item label="前端页面" name="webPage">
<Select>
<Select placeholder="请选择前端页面">
<Option value="多表显示">多表显示</Option>
<Option value="多表在办显示">多表在办显示</Option>
<Option value="表堆叠显示">表堆叠显示</Option>
......@@ -92,7 +93,7 @@ const ProcessConfig = props => {
</Radio.Group>
</Form.Item>
<Form.Item label="接口配置" name="interfaceConfig">
<TextArea />
<TextArea placeholder="请填写接口配置" />
</Form.Item>
</Form>
</Modal>
......
src/pages/platformCenter/bsmanager/workFlow/flowComponents/Timelimit.jsx
View file @ 7070002e
import React, { useEffect, useState } from 'react';
import { reloadFlowTimers, removeFlowTimer } from '@/services/platform/flow';
import {
Table,
Modal,
Space,
Tooltip,
Popconfirm,
Button,
notification,
message,
Spin,
} from 'antd';
import { EditTwoTone, PlusOutlined, DeleteOutlined } from '@ant-design/icons';
import AddModal from './timelimitComponents/AddModal';
import styles from '../flow.less';
const Timelimit = props => {
const { handleCancel, visible, msg } = props;
const [tableData, setTableData] = useState([]); // 回显的表格
const [viewModal, setViewModal] = useState(false); // 编辑模态框
const [modalType, setModalType] = useState(''); // 模态框是编辑还是修改的状态
const [editMsg, setEditMsg] = useState({}); // 保存编辑的信息
const [title, setTitle] = useState('');
const [flowId, setFlowId] = useState('');
const [loading, setLoading] = useState(false);
useEffect(() => {
if (visible) {
console.log(msg);
setFlowId(msg.ID);
setTitle(`${msg.name}`);
getData();
}
}, [visible]);
// 数据初始化
const getData = () => {
setLoading(true);
reloadFlowTimers({ flowName: msg.name }).then(res => {
setLoading(false);
if (res.code === 0) {
setTableData(res.data);
}
});
};
// 编辑
const toEdit = val => {
setViewModal(true);
setModalType('edit');
setEditMsg(val);
};
// 删除
const delRow = record => {
removeFlowTimer({ flowTimerID: record.ID })
.then(res => {
if (res.code === 0) {
getData();
notification.success({
message: '提示',
duration: 3,
description: '删除成功',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: res.msg,
});
}
})
.catch(() => {
notification.error({
message: '提示',
duration: 3,
description: '网络异常',
});
});
};
// 定义表格
const columns = [
{
title: '规则名称',
dataIndex: 'Name',
align: 'center',
render: text => (
// eslint-disable-next-line react/no-danger
<span dangerouslySetInnerHTML={{ __html: text }} />
),
},
{
title: '开始节点',
dataIndex: 'StartNode',
align: 'center',
render: text => (
// eslint-disable-next-line react/no-danger
<span dangerouslySetInnerHTML={{ __html: text }} />
),
},
{
title: '结束节点',
dataIndex: 'EndNode',
align: 'center',
render: text => (
// eslint-disable-next-line react/no-danger
<span dangerouslySetInnerHTML={{ __html: text }} />
),
},
{
title: '默认时限',
dataIndex: 'TimeLimit',
align: 'center',
render: text => (
// eslint-disable-next-line react/no-danger
<span dangerouslySetInnerHTML={{ __html: text }} />
),
},
{
title: '时限指派字段',
dataIndex: 'TimeLimitFieldHtml',
align: 'center',
render: text => (
// eslint-disable-next-line react/no-danger
<span dangerouslySetInnerHTML={{ __html: text }} />
),
},
{
title: '超时记录字段',
dataIndex: 'TimeoutField',
align: 'center',
render: text => (
// eslint-disable-next-line react/no-danger
<span dangerouslySetInnerHTML={{ __html: text }} />
),
},
{
title: '操作',
align: 'center',
ellipsis: true,
render: record => (
<>
<Space>
<Tooltip title="修改流程时限配置">
<EditTwoTone
onClick={() => toEdit(record)}
style={{ fontSize: '16px', color: '#1890FF' }}
/>
</Tooltip>
<Tooltip title="删除流程时限配置">
<Popconfirm
title="是否删除改流程时限配置?"
onConfirm={() => delRow(record)}
onCancel={() => message.error('取消清除')}
okText="是"
cancelText="否"
>
<DeleteOutlined
style={{ fontSize: '16px', color: '#e86060' }}
/>
</Popconfirm>
</Tooltip>
</Space>
</>
),
},
];
return (
<Modal
title={`${title}-流程时限配置`}
visible={visible}
width="1200px"
onCancel={handleCancel}
maskClosable={false}
centered
footer={null}
destroyOnClose
>
<div className={styles.buttonList}>
<Button
type="primary"
onClick={() => {
setViewModal(true);
setModalType('add');
}}
icon={<PlusOutlined />}
>
新增流程时限配置
</Button>
</div>
<Spin spinning={loading} tip="loading...">
<Table
dataSource={tableData}
columns={columns}
rowKey={record => record.ID}
bordered
size="small"
scroll={{ y: '500px' }}
onRow={record => ({
onDoubleClick: () => {
toEdit(record);
},
})}
pagination={{
showTotal: (total, range) =>
`第${range[0]}-${range[1]} 条/共 ${total} 条`,
pageSizeOptions: [10, 20, 50, 100],
defaultPageSize: 10,
showQuickJumper: true,
showSizeChanger: true,
}}
/>
</Spin>
<AddModal
visible={viewModal}
msg={editMsg}
title={title}
flowId={flowId}
modalType={modalType}
handleCancel={() => setViewModal(false)}
onSubumit={() => {
setViewModal(false);
getData();
}}
/>
</Modal>
);
};
export default Timelimit;
src/pages/platformCenter/bsmanager/workFlow/flowComponents/timelimitComponents/AddModal.jsx 0 → 100644
View file @ 7070002e
import React, { useEffect, useState } from 'react';
import {
flowReloadFlowNodes,
reloadTimeLimitadFlowNodes,
operateFlowTimer,
} from '@/services/platform/flow';
import { Form, Modal, Input, notification, Select } from 'antd';
const { Option } = Select;
const AddModal = props => {
const {
onSubumit,
handleCancel,
visible,
msg,
flowId,
modalType,
title,
} = props;
const [flowNodes, setFlowNodes] = useState([]);
const [timeLimitFlowNodes, setTimeLimitFlowNodes] = useState([]);
const [startNodeIndex, setStartNodeIndex] = useState(null);
const [endNodeIndex, setEndNodeIndex] = useState(null);
const [form] = Form.useForm();
useEffect(() => {
form.resetFields();
setStartNodeIndex(null);
setEndNodeIndex(null);
if (visible) {
getFlowNodes();
getLimitadFlowNodes();
if (modalType === 'edit') {
getFormData();
} else {
form.setFieldsValue({ FlowName: title });
}
}
}, [visible]);
// 获取到节点后存入当前选中对应的索引用于限制选择节点
useEffect(() => {
if (flowNodes.length > 0) {
flowNodes.forEach((item, index) => {
if (item.Name === msg.StartNode && modalType === 'edit') {
setStartNodeIndex(index);
}
if (item.Name === msg.EndNode && modalType === 'edit') {
setEndNodeIndex(index);
}
});
}
}, [flowNodes]);
// 根据下拉框选择的流程节点关联的表名加载指派字段
const getLimitadFlowNodes = () => {
reloadTimeLimitadFlowNodes({ flowNodeTableName: title }).then(res => {
if (res.code === 0) {
setTimeLimitFlowNodes(res.data);
}
});
};
// 根据流程ID加载起止节点和终止节点
const getFlowNodes = () => {
flowReloadFlowNodes({ flowId }).then(res => {
if (res.code === 0) {
setFlowNodes(res.data);
}
});
};
// 获取表单回显
const getFormData = () => {
console.log(msg);
form.setFieldsValue({ ...msg, FlowName: title });
};
// 表单监听
const onValuesChange = val => {
if (Object.keys(val)[0] === 'StartNode') {
flowNodes.forEach((item, index) => {
if (item.Name === val.StartNode) {
console.log(234234);
setStartNodeIndex(index);
}
});
}
if (Object.keys(val)[0] === 'EndNode') {
flowNodes.forEach((item, index) => {
if (item.Name === val.EndNode) {
console.log(234234);
setEndNodeIndex(index);
}
});
}
};
// 提交表单
const onFinish = () => {
form.validateFields().then(validate => {
if (validate) {
let obj = {};
console.log(modalType);
if (modalType === 'add') {
obj = { ...validate, ID: 0 };
} else {
obj = { ...validate, ID: msg.ID };
}
operateFlowTimer(obj)
.then(res => {
if (res.code === 0) {
notification.success({
message: '提示',
duration: 3,
description: '编辑成功',
});
onSubumit();
} else {
notification.error({
message: '提示',
duration: 3,
description: res.msg,
});
}
})
.catch(() => {
notification.error({
message: '提示',
duration: 3,
description: '网络异常',
});
});
}
});
};
return (
<Modal
title="流程节点辅助视图配置"
visible={visible}
onOk={onFinish}
onCancel={handleCancel}
maskClosable={false}
destroyOnClose
>
<Form
form={form}
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }}
initialValues={{ remember: true }}
onValuesChange={onValuesChange}
>
<Form.Item label="流程名称" name="FlowName">
<Input disabled />
</Form.Item>
<Form.Item label="规则名称" name="Name" rules={[{ required: true }]}>
<Input placeholder="请输入规则名称" />
</Form.Item>
<Form.Item
label="起止节点"
style={{ marginBottom: 0, message: '请选择节点' }}
required
>
<div style={{ display: 'flex' }}>
<Form.Item
name="StartNode"
style={{ width: '100%' }}
rules={[{ required: true, message: '请选择节点' }]}
>
<Select>
{flowNodes.map((item, index) => (
<Option
value={item.Name}
key={item.ID}
disabled={endNodeIndex !== null && index >= endNodeIndex}
>
{item.Name}
</Option>
))}
</Select>
</Form.Item>
<span style={{ width: '40px', textAlign: 'center' }}>--</span>
<Form.Item
name="EndNode"
style={{ width: '100%' }}
rules={[{ required: true, message: '请选择节点' }]}
>
<Select>
{flowNodes.map((item, index) => (
<Option
value={item.Name}
key={item.ID}
disabled={
startNodeIndex !== null && index <= startNodeIndex
}
>
{item.Name}
</Option>
))}
</Select>
</Form.Item>
</div>
</Form.Item>
<Form.Item label="默认时限" style={{ marginBottom: 0 }} required>
<div style={{ display: 'flex' }}>
<Form.Item
name="TimeLimitInt"
style={{ marginRight: '18px', width: '100%' }}
rules={[
{ required: true, message: '请选填写时限' },
{
validator: (_, value) =>
value < 0
? Promise.reject(new Error('默认时限需要大于零'))
: Promise.resolve(),
},
]}
>
<Input placeholder="请输入默认时限" />
</Form.Item>
<Form.Item
name="TimeUnit"
style={{ width: '100%' }}
rules={[{ required: true, message: '请选择时限单位' }]}
>
<Select>
<Option value="小时">小时</Option>
<Option value="自然日">自然日</Option>
<Option value="工作日">工作日</Option>
</Select>
</Form.Item>
</div>
</Form.Item>
<Form.Item
label="时限指派字段"
name="TimeLimitField"
rules={[{ required: true, message: '请选择时限指派字段' }]}
>
<Select>
{timeLimitFlowNodes.map(item => (
<Option value={item.Name} key={item.ID}>
{/* eslint-disable-next-line react/no-danger */}
<span dangerouslySetInnerHTML={{ __html: item.Name }} />
</Option>
))}
</Select>
</Form.Item>
<Form.Item
label="超时记录字段"
name="TimeoutField"
rules={[{ required: true, message: '请选择超时记录字段' }]}
>
<Select>
{timeLimitFlowNodes.map(item => (
<Option value={item.Name} key={item.ID}>
{/* eslint-disable-next-line react/no-danger */}
<span dangerouslySetInnerHTML={{ __html: item.Name }} />
</Option>
))}
</Select>
</Form.Item>
</Form>
</Modal>
);
};
export default AddModal;
src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNode.jsx
View file @ 7070002e
......@@ -12,14 +12,16 @@ import {
notification,
message,
Button,
Spin,
} from 'antd';
import {
RollbackOutlined,
EditTwoTone,
FontColorsOutlined,
ControlOutlined,
DeleteOutlined,
} from '@ant-design/icons';
import NodeEdit from './flowNodeComponents/NodeEdit';
import AuxiliaryView from './flowNodeComponents/AuxiliaryView';
import styles from './flowNode.less';
const FlowNode = () => {
......@@ -27,11 +29,12 @@ const FlowNode = () => {
const { flowName, pickItemIndex } = history.location.state;
const [visible, setVisible] = useState({
nodeEdit: false,
auxiliaryView: false,
}); // 弹窗显示
const [tableData, setTableData] = useState([]); // 流程对应的回显的表格
const [expandedRowKeys, setExpandedRowKeys] = useState([]); // 开开的表格的key
const [expandedRowKeys, setExpandedRowKeys] = useState([]); // 展开的表格的key
const [nodeMsg, setNodeMsg] = useState(); // 保存节点信息
const [loading, setLoading] = useState(false);
useEffect(() => {
getData();
}, []);
......@@ -41,7 +44,9 @@ const FlowNode = () => {
};
// 获取数据
const getData = () => {
setLoading(true);
reloadFlowNodes({ flowName }).then(res => {
setLoading(false);
if (res.code === 0) {
setTableData(res.data);
// 存入需要展开得节点
......@@ -51,9 +56,10 @@ const FlowNode = () => {
};
// 清除节点
const delNode = record => {
removeFlowNodeExtend({ flowNodeExtendID: record.flowID })
removeFlowNodeExtend({ flowNodeExtendID: record.extendID })
.then(res => {
if (res.code === 0) {
getData();
notification.success({
message: '提示',
duration: 3,
......@@ -104,7 +110,7 @@ const FlowNode = () => {
},
{
title: '节点别名',
dataIndex: 'NodeAliasName',
dataIndex: 'aliasName',
align: 'center',
width: 80,
render: text => (
......@@ -217,21 +223,28 @@ const FlowNode = () => {
render: record => (
<>
<Space>
<Tooltip title="修改节点">
<EditTwoTone
onClick={() => {
showModal('nodeEdit', true);
setNodeMsg(record);
}}
style={{ fontSize: '16px', color: '#1890FF' }}
/>
</Tooltip>
<Tooltip title="节点辅助视图">
<FontColorsOutlined
// onClick={() => toNode(record.name)}
style={{ fontSize: '16px', color: '#1890FF' }}
/>
</Tooltip>
{record.ID !== 0 && (
<>
<Tooltip title="修改节点">
<EditTwoTone
onClick={() => {
showModal('nodeEdit', true);
setNodeMsg(record);
}}
style={{ fontSize: '16px', color: '#1890FF' }}
/>
</Tooltip>
<Tooltip title="节点辅助视图">
<ControlOutlined
onClick={() => {
showModal('auxiliaryView', true);
setNodeMsg(record);
}}
style={{ fontSize: '16px', color: '#1890FF' }}
/>
</Tooltip>
</>
)}
<Tooltip title="清除节点配置">
<Popconfirm
title="是否清除该节点配置?"
......@@ -253,7 +266,7 @@ const FlowNode = () => {
return (
<Table
className={styles.unfoldTable}
rowKey={record => record.ID}
rowKey={record => record.name}
columns={columns}
bordered
size="small"
......@@ -262,8 +275,10 @@ const FlowNode = () => {
pagination={false}
onRow={record => ({
onDoubleClick: () => {
showModal('nodeEdit', true);
setNodeMsg(record);
if (record.ID !== 0) {
showModal('nodeEdit', true);
setNodeMsg(record);
}
},
})}
/>
......@@ -354,7 +369,7 @@ const FlowNode = () => {
return (
<div className={styles.NodeContent}>
<div className={styles.header}>
<div className={styles.nodeTitle}>{flowName}</div>
<div className={styles.nodeTitle}>{flowName}-流程节点配置</div>
<div className={styles.buttonBox}>
<Button type="primary" onClick={() => backFlow()}>
<RollbackOutlined />
......@@ -362,20 +377,23 @@ const FlowNode = () => {
</Button>
</div>
</div>
<Table
dataSource={tableData}
columns={columns}
rowKey={record => record.GroupName}
size="small"
showHeader
scroll={{ y: '100vh-150px' }}
expandable={{
expandedRowRender: record => createUnfoldTable(record.Items),
}}
expandedRowKeys={expandedRowKeys}
onExpand={onUnfold}
pagination={false}
/>
<Spin spinning={loading} tip="loading...">
<Table
dataSource={tableData}
columns={columns}
rowKey={record => record.GroupName}
size="small"
showHeader
scroll={{ y: '100vh-150px' }}
expandable={{
expandedRowRender: record => createUnfoldTable(record.Items),
}}
expandedRowKeys={expandedRowKeys}
onExpand={onUnfold}
pagination={false}
/>
</Spin>
<NodeEdit
visible={visible.nodeEdit}
msg={nodeMsg}
......@@ -385,6 +403,11 @@ const FlowNode = () => {
getData();
}}
/>
<AuxiliaryView
visible={visible.auxiliaryView}
msg={nodeMsg}
handleCancel={() => showModal('auxiliaryView', false)}
/>
</div>
);
};
......
src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNode.less
View file @ 7070002e
......@@ -24,36 +24,6 @@
}
}
}
.ant-table-pagination {
padding-right: 12px;
background: white;
margin: 1px 0;
padding: 8px;
padding-right: 20px;
}
.ant-table-thead tr th {
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
}
.ant-table-cell {
// text-align: center;
overflow: hidden;
white-space: nowrap;
}
.ant-table-body {
height: calc(100vh - 160px);
border-right: white;
overflow: auto !important;
}
.ant-pagination {
z-index: 999;
border-top: 1px solid #f0eded;
}
.unfoldTable {
.ant-table {
margin-left: -9px !important;
}
}
}
// 编辑节点表单
......@@ -142,3 +112,47 @@
border-top-color: #99bbe8;
}
}
.buttonList {
display: flex;
justify-content: flex-end;
margin-bottom: 15px;
.ant-btn {
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
}
}
// 表格样式
.ant-table-pagination {
padding-right: 12px;
background: white;
margin: 1px 0;
padding: 8px;
padding-right: 20px;
}
.ant-table-thead tr th {
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
}
.ant-table-cell {
// text-align: center;
overflow: hidden;
white-space: nowrap;
}
.ant-table-body {
height: calc(100vh - 160px);
border-right: 1px solid rgb(240, 240, 240);
overflow: auto !important;
}
.ant-pagination {
z-index: 999;
border-top: 1px solid #f0eded;
}
.unfoldTable {
.ant-table {
margin-left: -9px !important;
}
}
src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNodeComponents/AuxiliaryView.jsx 0 → 100644
View file @ 7070002e
import React, { useEffect, useState } from 'react';
import {
reloadFlowNodeExtendPages,
removeFlowNodeExtendPage,
} from '@/services/platform/flow';
import {
Table,
Modal,
Space,
Tooltip,
Popconfirm,
Button,
notification,
message,
Spin,
} from 'antd';
import { EditTwoTone, PlusOutlined, DeleteOutlined } from '@ant-design/icons';
import AddModal from './auxiliaryComponents/AddModal';
import styles from '../flowNode.less';
const AuxiliaryView = props => {
const { handleCancel, visible, msg } = props;
const [tableData, setTableData] = useState([]); // 辅助视图对应的回显的表格
const [viewModal, setViewModal] = useState(false); // 辅助视图新政编辑模态框
const [modalType, setModalType] = useState(''); // 模态框是编辑还是修改的状态
const [editMsg, setEditMsg] = useState({}); // 保存编辑的信息
const [title, setTitle] = useState('');
const [flowNodeId, setFlowNodeId] = useState('');
const [loading, setLoading] = useState(false);
useEffect(() => {
if (visible) {
console.log(msg);
setFlowNodeId(msg.ID);
setTitle(`${msg.flowName}/${msg.name}`);
getData();
}
}, [visible]);
// 数据初始化
const getData = () => {
setLoading(true);
reloadFlowNodeExtendPages({ flowNodeId: msg.ID }).then(res => {
setLoading(false);
if (res.code === 0) {
setTableData(res.data);
}
});
};
// 编辑辅助视图
const toEdit = val => {
setViewModal(true);
setModalType('edit');
setEditMsg(val);
};
// 删除辅助视图
const delRow = record => {
removeFlowNodeExtendPage({ flowNodeExtendId: record.ID })
.then(res => {
if (res.code === 0) {
getData();
notification.success({
message: '提示',
duration: 3,
description: '删除成功',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: res.msg,
});
}
})
.catch(() => {
notification.error({
message: '提示',
duration: 3,
description: '网络异常',
});
});
};
// 定义表格
const columns = [
{
title: '前端便签',
dataIndex: 'WebLabel',
align: 'center',
render: text => (
// eslint-disable-next-line react/no-danger
<span dangerouslySetInnerHTML={{ __html: text }} />
),
},
{
title: '前端视图',
dataIndex: 'WebPage',
align: 'center',
render: text => (
// eslint-disable-next-line react/no-danger
<span dangerouslySetInnerHTML={{ __html: text }} />
),
},
{
title: '前端参数',
dataIndex: 'WebParam',
align: 'center',
render: text => (
// eslint-disable-next-line react/no-danger
<span dangerouslySetInnerHTML={{ __html: text }} />
),
},
{
title: '手持标签',
dataIndex: 'MobileLabel',
align: 'center',
render: text => (
// eslint-disable-next-line react/no-danger
<span dangerouslySetInnerHTML={{ __html: text }} />
),
},
{
title: '手持视图',
dataIndex: 'MobilePage',
align: 'center',
render: text => (
// eslint-disable-next-line react/no-danger
<span dangerouslySetInnerHTML={{ __html: text }} />
),
},
{
title: '手持参数',
dataIndex: 'MobileParam',
align: 'center',
render: text => (
// eslint-disable-next-line react/no-danger
<span dangerouslySetInnerHTML={{ __html: text }} />
),
},
{
title: '操作',
align: 'center',
ellipsis: true,
render: record => (
<>
<Space>
<Tooltip title="修改节点辅助视图">
<EditTwoTone
onClick={() => toEdit(record)}
style={{ fontSize: '16px', color: '#1890FF' }}
/>
</Tooltip>
<Tooltip title="删除节点辅助视图">
<Popconfirm
title="是否清除该辅助视图?"
onConfirm={() => delRow(record)}
onCancel={() => message.error('取消清除')}
okText="是"
cancelText="否"
>
<DeleteOutlined
style={{ fontSize: '16px', color: '#e86060' }}
/>
</Popconfirm>
</Tooltip>
</Space>
</>
),
},
];
return (
<Modal
title={`${title} 的辅助视图`}
visible={visible}
width="1200px"
onCancel={handleCancel}
maskClosable={false}
centered
footer={null}
>
<div className={styles.buttonList}>
<Button
type="primary"
onClick={() => {
setViewModal(true);
setModalType('add');
}}
icon={<PlusOutlined />}
>
新增辅助视图
</Button>
</div>
<Spin spinning={loading} tip="loading...">
<Table
dataSource={tableData}
columns={columns}
rowKey={record => record.ID}
bordered
size="small"
scroll={{ y: '500px' }}
onRow={record => ({
onDoubleClick: () => {
toEdit(record);
},
})}
pagination={{
showTotal: (total, range) =>
`第${range[0]}-${range[1]} 条/共 ${total} 条`,
pageSizeOptions: [10, 20, 50, 100],
defaultPageSize: 10,
showQuickJumper: true,
showSizeChanger: true,
}}
/>
</Spin>
<AddModal
visible={viewModal}
msg={editMsg}
title={title}
flowNodeId={flowNodeId}
modalType={modalType}
handleCancel={() => setViewModal(false)}
onSubumit={() => {
setViewModal(false);
getData();
}}
/>
</Modal>
);
};
export default AuxiliaryView;
src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNodeComponents/NodeEdit.jsx
View file @ 7070002e
......@@ -34,6 +34,7 @@ const NodeEdit = props => {
const [isDisable, setIsDisable] = useState(); // 允许回退是否可选择
const [form] = Form.useForm();
useEffect(() => {
form.resetFields();
if (visible) {
// 获取表单回显
getFormData();
......@@ -53,7 +54,7 @@ const NodeEdit = props => {
...res.data.Extend,
FlowName: res.data.FlowName,
};
if (res.data.Extend.Rollbackable) {
if (res.data.Extend && res.data.Extend.Rollbackable) {
setIsDisable(false);
} else {
setIsDisable(true);
......@@ -231,11 +232,11 @@ const NodeEdit = props => {
<Input disabled />
</Form.Item>
<Form.Item label="节点别名" name="NodeAliasName">
<Input />
<Input placeholder="请输入节点别名" />
</Form.Item>
<Form.Item label="节点类型">
<Form.Item name="NodeType" style={{ marginBottom: '10px' }}>
<Select>
<Select placeholder="请选择节点类型">
<Option value="办理">办理</Option>
<Option value="上报">上报</Option>
<Option value="分派">分派</Option>
......@@ -262,7 +263,7 @@ const NodeEdit = props => {
name="RollbackNode"
style={{ marginBottom: 0, width: '100%' }}
>
<Select disabled={isDisable}>
<Select disabled={isDisable} placeholder="请选择回退节点">
{backNodes.map(item => (
<Option value={item.Name} key={item.ID}>
{item.Name}
......@@ -336,7 +337,7 @@ const NodeEdit = props => {
/>
</div>
</Form.Item>
<Form.Item label="前端视图" name="webPage">
<Form.Item label="前端视图" name="WebPage">
<Input placeholder="请配置前端视图" />
</Form.Item>
<Form.Item label="手持视图" name="MobilePage">
......@@ -346,7 +347,7 @@ const NodeEdit = props => {
<Input placeholder="请配置视图参数" />
</Form.Item>
<Form.Item label="反馈类型" name="FeedbackName">
<Select>
<Select placeholder="请选择反馈类型">
{backType.map(item => (
<Option value={item.value} key={item.value}>
{item.value}
......
src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNodeComponents/auxiliaryComponents/AddModal.jsx 0 → 100644
View file @ 7070002e
import React, { useEffect } from 'react';
import {
getFlowNodeExtendPage,
operateFlowNodeExtendPage,
} from '@/services/platform/flow';
import { Form, Modal, Input, notification } from 'antd';
const ProcessConfig = props => {
const {
onSubumit,
handleCancel,
visible,
msg,
flowNodeId,
modalType,
title,
} = props;
const [form] = Form.useForm();
useEffect(() => {
form.resetFields();
if (visible) {
if (modalType === 'edit') {
getFormData();
} else {
form.setFieldsValue({ FlowName: title });
}
}
}, [visible]);
// 获取表单回显
const getFormData = () => {
getFlowNodeExtendPage({ flowNodeExtendPageId: msg.ID }).then(res => {
if (res.code === 0) {
form.setFieldsValue({ ...res.data, FlowName: title });
}
});
};
// 提交表单
const onFinish = () => {
form.validateFields().then(validate => {
if (validate) {
let obj = {};
console.log(modalType);
if (modalType === 'add') {
obj = validate;
} else {
obj = { ...validate, ID: msg.ID };
}
operateFlowNodeExtendPage(obj, flowNodeId)
.then(res => {
if (res.code === 0) {
notification.success({
message: '提示',
duration: 3,
description: '编辑成功',
});
onSubumit();
} else {
notification.error({
message: '提示',
duration: 3,
description: res.msg,
});
}
})
.catch(() => {
notification.error({
message: '提示',
duration: 3,
description: '网络异常',
});
});
}
});
};
return (
<Modal
title="流程节点辅助视图配置"
visible={visible}
onOk={onFinish}
onCancel={handleCancel}
maskClosable={false}
destroyOnClose
>
<Form
form={form}
labelCol={{ span: 5 }}
wrapperCol={{ span: 18 }}
initialValues={{ remember: true }}
>
<Form.Item label="流程节点" name="FlowName">
<Input disabled />
</Form.Item>
<Form.Item label="前端标签" name="WebLabel">
<Input placeholder="请输入前端标签" />
</Form.Item>
<Form.Item label="前端视图" name="WebPage">
<Input placeholder="请输入前端视图" />
</Form.Item>
<Form.Item label="视图参数" name="WebParam">
<Input placeholder="请输入视图参数" />
</Form.Item>
<Form.Item label="手持标签" name="MobileLabel">
<Input placeholder="请输入手持标签" />
</Form.Item>
<Form.Item label="手持视图" name="MobilePage">
<Input placeholder="请输入手持视图" />
</Form.Item>
<Form.Item label="手持参数" name="MobileParam">
<Input placeholder="请输入手持参数" />
</Form.Item>
</Form>
</Modal>
);
};
export default ProcessConfig;
src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNodeComponents/nodeEditComponents/Fieldselection.jsx
View file @ 7070002e
......@@ -26,11 +26,9 @@ const Fieldselection = props => {
setTimeout(() => {
dragSort();
}, 0);
console.log(arr);
}, [checkList]);
// 提交表单
const onFinish = () => {
console.log(selectList, '子组件');
onSubumit(selectList);
};
// 复选框
......@@ -47,7 +45,6 @@ const Fieldselection = props => {
};
// 全选
const onCheckAllChange = (e, index) => {
console.log(e, 'eeeee');
setCheckList(value => {
const chooseList = JSON.parse(JSON.stringify(value));
chooseList[index][1].defaultCheckedList = e.target.checked
......
src/services/platform/flow.jsx
View file @ 7070002e
......@@ -15,10 +15,10 @@ export const flowReOrder = param =>
param.flowIDs
}`,
);
// 工单流程组内调序
// 删除流程配置
export const removeFlowExtend = param =>
post(
`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_RemoveFlowExtend?flowIDs=${
`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_RemoveFlowExtend?flowId=${
param.flowIDs
}`,
);
......@@ -64,3 +64,51 @@ export const loadFeedbackType = query =>
// 加载反馈类型
export const editFlowNodeExtend = query =>
post(`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Event_EditFlowNodeExtend`, query);
// 加载流程辅助视图
export const reloadFlowNodeExtendPages = query =>
get(
`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_ReloadFlowNodeExtendPages`,
query,
);
// 查询流程辅助视图配置信息
export const getFlowNodeExtendPage = query =>
get(
`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_GetFlowNodeExtendPage`,
query,
);
// 添加或修改流程节点辅助视图配置
export const operateFlowNodeExtendPage = (query, flowNodeId) =>
post(
`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_OperateFlowNodeExtendPage?flowNodeId=${flowNodeId}`,
query,
);
// 删除流程节点辅助视图配置
export const removeFlowNodeExtendPage = query =>
post(
`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_RemoveFlowNodeExtendPage?flowNodeExtendId=${
query.flowNodeExtendId
}`,
query,
);
// 加载时限配置列表
export const reloadFlowTimers = query =>
get(`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_ReloadFlowTimers`, query);
// 根据流程ID加载起止节点和终止节点
export const flowReloadFlowNodes = query =>
get(`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_ReloadFlowNodes`, query);
// 根据下拉框选择的流程节点关联的表名加载指派字段
export const reloadTimeLimitadFlowNodes = query =>
get(`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_ReloadTimeLimit`, query);
// 添加或修改时限配置
export const operateFlowTimer = query =>
post(`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_OperateFlowTimer`, query);
// 添加或修改时限配置
export const removeFlowTimer = query =>
post(
`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_RemoveFlowTimer?flowTimerID=${
query.flowTimerID
}`,
query,
);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment