Skip to content

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

fix: 工作流编辑器节点上添加描述，样式优化

parent be1adf3e
Show whitespace changes
Inline Side-by-side
Showing with 204 additions and 95 deletions
src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/FlowChart.jsx
View file @ ee61659a
......@@ -10,22 +10,24 @@ import styles from '../workflow.less';
import NodeModal from './flowChartComponents/NodeModal';
import LineModal from './flowChartComponents/LineModal';
import imgUrl from '@/assets/images/icons/closeBlue.png';
import imgEnd from '@/assets/images/workFlow/end.png';
import imgGeneral from '@/assets/images/workFlow/general.png';
import imgStart from '@/assets/images/workFlow/start.png';
import cc from '@/assets/images/workFlow/cc.png';
import gatewayExclusive from '@/assets/images/workFlow/gatewayExclusive.png';
import gatewayConfluence from '@/assets/images/workFlow/gatewayConfluence.png';
import gatewayInclude from '@/assets/images/workFlow/gatewayInclude.png';
import nodeEnd from '@/assets/images/workFlow/nodeEnd.png';
import nodeGeneral from '@/assets/images/workFlow/nodeGeneral.png';
import nodeStart from '@/assets/images/workFlow/nodeStart.png';
// import cc from '@/assets/images/workFlow/cc.png';
import gatewayCondition from '@/assets/images/workFlow/gatewayCondition.png';
import gatewayParallel from '@/assets/images/workFlow/gatewayParallel.png';
import gatewayJoin from '@/assets/images/workFlow/gatewayJoin.png';
const { confirm } = Modal;
let diagram = null;
const nodeTypeList = [
{ nodeTypeName: '开始节点', NodeType: '1', src: imgStart },
{ nodeTypeName: '普通节点', NodeType: '0', src: imgGeneral },
{ nodeTypeName: '结束节点', NodeType: '2', src: imgEnd },
{ nodeTypeName: '条件网关', NodeType: '20', src: gatewayExclusive },
{ nodeTypeName: '并行网关', NodeType: '22', src: gatewayConfluence },
{ nodeTypeName: '汇合网关', NodeType: '21', src: gatewayInclude },
{ nodeTypeName: '开始节点', NodeType: '1', src: nodeStart },
{ nodeTypeName: '普通节点', NodeType: '0', src: nodeGeneral },
{ nodeTypeName: '结束节点', NodeType: '2', src: nodeEnd },
];
const gatewayList = [
{ nodeTypeName: '条件网关', NodeType: '20', src: gatewayCondition },
{ nodeTypeName: '并行网关', NodeType: '22', src: gatewayParallel },
{ nodeTypeName: '汇合网关', NodeType: '21', src: gatewayJoin },
];
const FlowChart = props => {
const { flowData, flowID, chartLoading, leaveCallBack } = props;
......@@ -192,11 +194,11 @@ const FlowChart = props => {
allowDragOut: false,
'dragSelectingTool.isEnabled': false, // 禁止多选
allowCopy: true, // 禁止复制
nodeSelectionAdornmentTemplate: objGo(
go.Adornment,
'Auto',
objGo(go.Shape, 'Rectangle', { fill: 'white', stroke: null }),
), // 去掉节点点击时的边框颜色
// nodeSelectionAdornmentTemplate: objGo(
// go.Adornment,
// 'Auto',
// objGo(go.Shape, 'Rectangle', { fill: 'white', stroke: null }),
// ), // 去掉节点点击时的边框颜色
scale: '0.8',
});
// 节点配置
......@@ -207,76 +209,53 @@ const FlowChart = props => {
// 节点样式配置
objGo(
go.Panel,
nodeBoxStyle('width'),
nodeBoxStyle('height'),
objGo(
go.Picture,
new go.Binding('source', 'NodeType', v => {
switch (v) {
case '1':
return imgStart;
return nodeStart;
case '2':
return imgEnd;
return nodeEnd;
case '0':
return imgGeneral;
case '4':
return cc;
return nodeGeneral;
// case '4':
// return cc;
case '20':
return gatewayExclusive;
case '21':
return gatewayInclude;
case '22':
return gatewayConfluence;
default:
return null;
}
}),
new go.Binding('width', 'NodeType', v => {
switch (v) {
case '1':
return 125;
case '2':
return 125;
case '0':
return 210;
case '4':
return 210;
case '20':
return 55;
case '21':
return 55;
case '22':
return 55;
default:
return null;
}
}),
new go.Binding('height', 'NodeType', v => {
switch (v) {
case '1':
return 125;
case '2':
return 125;
case '0':
return 110;
case '4':
return 110;
case '20':
return 55;
return gatewayCondition;
case '21':
return 55;
return gatewayJoin;
case '22':
return 55;
return gatewayParallel;
default:
return null;
}
}),
nodeBoxStyle('width'),
nodeBoxStyle('height'),
),
),
objGo(
go.Panel,
'Horizontal',
nodeBoxStyle('height'),
{ alignment: go.Spot.Center },
objGo(
go.Panel,
'Vertical', // 节点文案
// 节点文案
nodeBoxStyle('width'),
objGo(
go.TextBlock,
{ maxSize: new go.Size(130, NaN), wrap: go.TextBlock.WrapFit, font: 'normal 12pt serif' },
{
maxSize: new go.Size(120, NaN),
maxLines: 1,
alignment: go.Spot.Center,
margin: new go.Margin(0, 10, 0, 10),
overflow: go.TextBlock.OverflowEllipsis,
font: 'normal 12pt serif',
},
new go.Binding('text', 'nodeDetail', v => {
const obj = JSON.parse(v);
if (obj.NodeType === '20' || obj.NodeType === '21' || obj.NodeType === '22') {
......@@ -284,39 +263,50 @@ const FlowChart = props => {
}
return obj.NodeName;
}),
new go.Binding('stroke', 'NodeType', v => {
switch (v) {
case '1':
return '#1685FF';
case '2':
return '#51C21A';
case '0':
return '#1685FF';
case '4':
return '#9850F6';
case '20':
return null;
case '21':
return null;
case '22':
return null;
nodeBoxStyle('stroke', 'nodeStyle'),
),
objGo(
go.TextBlock,
default:
return null;
{
alignment: go.Spot.Center,
maxLines: 2,
overflow: go.TextBlock.OverflowEllipsis,
font: 'normal 12pt serif',
},
new go.Binding('spacingAbove', 'roleList', v => (v?.length > 0 ? 10 : 0)),
new go.Binding('height', 'roleList', v => (v?.length > 0 ? 20 : 0)),
new go.Binding('margin', 'roleList', v =>
v?.length > 0 ? new go.Margin(10, 10, 0, 10) : 0,
),
new go.Binding('text', 'nodeDetail', v => {
const obj = JSON.parse(v);
if (obj.NodeType === '20' || obj.NodeType === '21' || obj.NodeType === '22') {
return '';
}
if (obj.roleList?.length === 0) {
return '';
}
return obj.roleList.map(item => item.roleName).join(',');
}),
nodeBoxStyle('stroke', 'roleStyle'),
),
),
),
),
// 我们的小命名端口，每侧一个：
makePort('T', go.Spot.Top),
makePort('L', go.Spot.Left),
makePort('R', go.Spot.Right),
makePort('B', go.Spot.Bottom),
{
// 节点之间线得连接
linkValidation(fromnode, fromport, tonode, toport, thisLink) {
// console.log(fromnode.data, tonode.data, 'aaaaaa');
// if (fromnode.data.NodeType === '20' && tonode.data.NodeType === '20') {
// return false;
// }
if (fromnode.data.NodeType === '22' && tonode.data.NodeType === '21') {
return false;
}
return true;
},
// 处理鼠标进入/离开事件以显示/隐藏端口
......@@ -331,6 +321,19 @@ const FlowChart = props => {
// 双击事件
handlerDC(e, node); // 双击执行的方法
},
toolTip: objGo(
'ToolTip',
objGo(
go.TextBlock,
{ margin: 4 },
new go.Binding('text', 'nodeDetail', v => {
const obj = JSON.parse(v);
return `节点名称:${obj.NodeName}\n${
obj.roleList.length > 0 ? '承办:' : ''
}${obj.roleList.map(item => item.roleName).join(',')}`;
}),
),
),
},
);
// 链接设置
......@@ -426,6 +429,69 @@ const FlowChart = props => {
new go.Binding('fromLinkable', 'NodeType', v => v !== '2'), // 是否允许用户绘制的链接到这里
new go.Binding('toLinkable', 'NodeType', v => v !== '1'), // 声明用户是否可以从这里绘制链接
);
const nodeBoxStyle = (atr, classname) => {
switch (atr) {
case 'width':
return new go.Binding('width', 'NodeType', v => {
switch (v) {
case '1':
return 150;
case '2':
return 150;
case '0':
return 210;
case '4':
return 210;
case '20':
return 55;
case '21':
return 55;
case '22':
return 55;
default:
return null;
}
});
case 'height':
return new go.Binding('height', 'NodeType', v => {
switch (v) {
case '1':
return 150;
case '2':
return 150;
case '0':
return 110;
case '4':
return 110;
case '20':
return 55;
case '21':
return 55;
case '22':
return 55;
default:
return null;
}
});
case 'stroke':
return new go.Binding('stroke', 'NodeType', v => {
switch (v) {
case '1':
return classname === 'roleStyle' ? '#BCBCBC' : '#1685FF';
case '2':
return classname === 'roleStyle' ? '#BCBCBC' : '#51C21A';
case '0':
return classname === 'roleStyle' ? '#BCBCBC' : '#1685FF';
case '4':
return '#9850F6';
default:
return null;
}
});
default:
return null;
}
};
// 双击节点
const handlerDC = (e, node) => {
setNodeKey(node.part.data.key);
......@@ -702,8 +768,29 @@ const FlowChart = props => {
</div>
</Tooltip>
))}
<div className={styles.lineBox} />
{gatewayList.map(item => (
<Tooltip placement="topLeft" title="点击插入网关" key={item.NodeType}>
<div className={styles.nodeBox} onClick={() => addNode(item.NodeType)}>
<div className={styles.nodeImg}>
<img src={item.src} alt="" />
</div>
<div className={styles.nodeTypeName}>{item.nodeTypeName}</div>
</div>
</Tooltip>
))}
</div>
<div className={styles.buttonList}>
<Button
type="link"
onClick={() => {
window.open(
'https://www.yuque.com/docs/share/da224db9-b8d1-49d2-838f-a23fcd15f0da?#%20%E3%80%8A%E6%B5%81%E7%A8%8B%E8%AE%BE%E8%AE%A1%E3%80%8B',
);
}}
>
说明文档
</Button>
<Button type="primary" onClick={() => saveFlow()} loading={buttonLoading}>
发布
</Button>
......
src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/NodeModal.jsx
View file @ ee61659a
......@@ -440,7 +440,7 @@ const NodeModal = props => {
borderTopColor: '#99bbe8',
color: '#15428b',
fontWeight: 700,
marginBottom: '30px',
// marginBottom: '30px',
}}
>
{nodeMsg.NodeType === '20' || nodeMsg.NodeType === '21' || nodeMsg.NodeType === '22'
......@@ -448,6 +448,20 @@ const NodeModal = props => {
: '节点'}
信息
</Divider>
<div className={styles.titleBox}>
{/* 条件网关 */}
<p style={{ display: form?.getFieldValue('NodeType') === '20' ? 'block' : 'none' }}>
条件网关：客户端填写表单内容，根据设置的条件规则以及出口的目标节点，进行全规则匹配，确定最终流转节点。
</p>
{/* 汇合网关 */}
<p style={{ display: form?.getFieldValue('NodeType') === '21' ? 'block' : 'none' }}>
汇合网关：等待所有的入口分支流程全部完成，自动移交到下一节点，汇合网关支持规则配置。
</p>
{/* 并行网关 */}
<p style={{ display: form?.getFieldValue('NodeType') === '22' ? 'block' : 'none' }}>
并行网关：根据网关的连接情况，强制所有出口分支流程必须流转。
</p>
</div>
<Form
form={form}
labelCol={{ span: 4 }}
......@@ -531,6 +545,7 @@ const NodeModal = props => {
</Form.Item>
</div>
</Form>
<div
style={{
display:
......@@ -547,7 +562,7 @@ const NodeModal = props => {
borderTopColor: '#99bbe8',
color: '#15428b',
fontWeight: 700,
margin: '30px 0 10px 0',
// margin: '30px 0 10px 0',
}}
>
承办管理
......@@ -592,7 +607,7 @@ const NodeModal = props => {
borderTopColor: '#99bbe8',
color: '#15428b',
fontWeight: 700,
margin: '30px 0 10px 0',
// margin: '30px 0 10px 0',
}}
>
规则配置
......
src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/NodeModal.less
View file @ ee61659a
.titleBox {
color: #DCDCDC;
color: #BCBCBC;
font-size: 14px;
padding-left: 20px;
}
......
src/pages/bsmanager/workOrder/workflowEdit/workflow.less
View file @ ee61659a
......@@ -115,6 +115,13 @@
.nodeList {
display: flex;
.lineBox {
height: 40px;
width: 1px;
background-color: #ccc;
margin-right: 10px;
}
.nodeBox {
display: flex;
align-items: center;
......
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