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'; ...@@ -10,22 +10,24 @@ import styles from '../workflow.less';
import NodeModal from './flowChartComponents/NodeModal'; import NodeModal from './flowChartComponents/NodeModal';
import LineModal from './flowChartComponents/LineModal'; import LineModal from './flowChartComponents/LineModal';
import imgUrl from '@/assets/images/icons/closeBlue.png'; import imgUrl from '@/assets/images/icons/closeBlue.png';
import imgEnd from '@/assets/images/workFlow/end.png'; import nodeEnd from '@/assets/images/workFlow/nodeEnd.png';
import imgGeneral from '@/assets/images/workFlow/general.png'; import nodeGeneral from '@/assets/images/workFlow/nodeGeneral.png';
import imgStart from '@/assets/images/workFlow/start.png'; import nodeStart from '@/assets/images/workFlow/nodeStart.png';
import cc from '@/assets/images/workFlow/cc.png'; // import cc from '@/assets/images/workFlow/cc.png';
import gatewayExclusive from '@/assets/images/workFlow/gatewayExclusive.png'; import gatewayCondition from '@/assets/images/workFlow/gatewayCondition.png';
import gatewayConfluence from '@/assets/images/workFlow/gatewayConfluence.png'; import gatewayParallel from '@/assets/images/workFlow/gatewayParallel.png';
import gatewayInclude from '@/assets/images/workFlow/gatewayInclude.png'; import gatewayJoin from '@/assets/images/workFlow/gatewayJoin.png';
const { confirm } = Modal; const { confirm } = Modal;
let diagram = null; let diagram = null;
const nodeTypeList = [ const nodeTypeList = [
{ nodeTypeName: '开始节点', NodeType: '1', src: imgStart }, { nodeTypeName: '开始节点', NodeType: '1', src: nodeStart },
{ nodeTypeName: '普通节点', NodeType: '0', src: imgGeneral }, { nodeTypeName: '普通节点', NodeType: '0', src: nodeGeneral },
{ nodeTypeName: '结束节点', NodeType: '2', src: imgEnd }, { nodeTypeName: '结束节点', NodeType: '2', src: nodeEnd },
{ nodeTypeName: '条件网关', NodeType: '20', src: gatewayExclusive }, ];
{ nodeTypeName: '并行网关', NodeType: '22', src: gatewayConfluence }, const gatewayList = [
{ nodeTypeName: '汇合网关', NodeType: '21', src: gatewayInclude }, { nodeTypeName: '条件网关', NodeType: '20', src: gatewayCondition },
{ nodeTypeName: '并行网关', NodeType: '22', src: gatewayParallel },
{ nodeTypeName: '汇合网关', NodeType: '21', src: gatewayJoin },
]; ];
const FlowChart = props => { const FlowChart = props => {
const { flowData, flowID, chartLoading, leaveCallBack } = props; const { flowData, flowID, chartLoading, leaveCallBack } = props;
...@@ -192,11 +194,11 @@ const FlowChart = props => { ...@@ -192,11 +194,11 @@ const FlowChart = props => {
allowDragOut: false, allowDragOut: false,
'dragSelectingTool.isEnabled': false, // 禁止多选 'dragSelectingTool.isEnabled': false, // 禁止多选
allowCopy: true, // 禁止复制 allowCopy: true, // 禁止复制
nodeSelectionAdornmentTemplate: objGo( // nodeSelectionAdornmentTemplate: objGo(
go.Adornment, // go.Adornment,
'Auto', // 'Auto',
objGo(go.Shape, 'Rectangle', { fill: 'white', stroke: null }), // objGo(go.Shape, 'Rectangle', { fill: 'white', stroke: null }),
), // 去掉节点点击时的边框颜色 // ), // 去掉节点点击时的边框颜色
scale: '0.8', scale: '0.8',
}); });
// 节点配置 // 节点配置
...@@ -207,76 +209,53 @@ const FlowChart = props => { ...@@ -207,76 +209,53 @@ const FlowChart = props => {
// 节点样式配置 // 节点样式配置
objGo( objGo(
go.Panel, go.Panel,
nodeBoxStyle('width'),
nodeBoxStyle('height'),
objGo( objGo(
go.Picture, go.Picture,
new go.Binding('source', 'NodeType', v => { new go.Binding('source', 'NodeType', v => {
switch (v) { switch (v) {
case '1': case '1':
return imgStart; return nodeStart;
case '2': case '2':
return imgEnd; return nodeEnd;
case '0': case '0':
return imgGeneral; return nodeGeneral;
case '4': // case '4':
return cc; // return cc;
case '20': case '20':
return gatewayExclusive; return gatewayCondition;
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;
case '21': case '21':
return 55; return gatewayJoin;
case '22': case '22':
return 55; return gatewayParallel;
default: default:
return null; return null;
} }
}), }),
nodeBoxStyle('width'),
nodeBoxStyle('height'),
), ),
), objGo(
go.Panel,
'Horizontal',
nodeBoxStyle('height'),
{ alignment: go.Spot.Center },
objGo(
go.Panel,
'Vertical', // 节点文案
// 节点文案 nodeBoxStyle('width'),
objGo( objGo(
go.TextBlock, 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 => { new go.Binding('text', 'nodeDetail', v => {
const obj = JSON.parse(v); const obj = JSON.parse(v);
if (obj.NodeType === '20' || obj.NodeType === '21' || obj.NodeType === '22') { if (obj.NodeType === '20' || obj.NodeType === '21' || obj.NodeType === '22') {
...@@ -284,39 +263,50 @@ const FlowChart = props => { ...@@ -284,39 +263,50 @@ const FlowChart = props => {
} }
return obj.NodeName; return obj.NodeName;
}), }),
new go.Binding('stroke', 'NodeType', v => { nodeBoxStyle('stroke', 'nodeStyle'),
switch (v) { ),
case '1': objGo(
return '#1685FF'; go.TextBlock,
case '2':
return '#51C21A';
case '0':
return '#1685FF';
case '4':
return '#9850F6';
case '20':
return null;
case '21':
return null;
case '22':
return null;
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('T', go.Spot.Top),
makePort('L', go.Spot.Left), makePort('L', go.Spot.Left),
makePort('R', go.Spot.Right), makePort('R', go.Spot.Right),
makePort('B', go.Spot.Bottom), makePort('B', go.Spot.Bottom),
{ {
// 节点之间线得连接
linkValidation(fromnode, fromport, tonode, toport, thisLink) { linkValidation(fromnode, fromport, tonode, toport, thisLink) {
// console.log(fromnode.data, tonode.data, 'aaaaaa'); // console.log(fromnode.data, tonode.data, 'aaaaaa');
// if (fromnode.data.NodeType === '20' && tonode.data.NodeType === '20') { if (fromnode.data.NodeType === '22' && tonode.data.NodeType === '21') {
// return false; return false;
// } }
return true; return true;
}, },
// 处理鼠标进入/离开事件以显示/隐藏端口 // 处理鼠标进入/离开事件以显示/隐藏端口
...@@ -331,6 +321,19 @@ const FlowChart = props => { ...@@ -331,6 +321,19 @@ const FlowChart = props => {
// 双击事件 // 双击事件
handlerDC(e, node); // 双击执行的方法 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 => { ...@@ -426,6 +429,69 @@ const FlowChart = props => {
new go.Binding('fromLinkable', 'NodeType', v => v !== '2'), // 是否允许用户绘制的链接到这里 new go.Binding('fromLinkable', 'NodeType', v => v !== '2'), // 是否允许用户绘制的链接到这里
new go.Binding('toLinkable', 'NodeType', v => v !== '1'), // 声明用户是否可以从这里绘制链接 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) => { const handlerDC = (e, node) => {
setNodeKey(node.part.data.key); setNodeKey(node.part.data.key);
...@@ -702,8 +768,29 @@ const FlowChart = props => { ...@@ -702,8 +768,29 @@ const FlowChart = props => {
</div> </div>
</Tooltip> </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>
<div className={styles.buttonList}> <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 type="primary" onClick={() => saveFlow()} loading={buttonLoading}>
发布 发布
</Button> </Button>
......
src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/NodeModal.jsx
View file @ ee61659a
...@@ -440,7 +440,7 @@ const NodeModal = props => { ...@@ -440,7 +440,7 @@ const NodeModal = props => {
borderTopColor: '#99bbe8', borderTopColor: '#99bbe8',
color: '#15428b', color: '#15428b',
fontWeight: 700, fontWeight: 700,
marginBottom: '30px', // marginBottom: '30px',
}} }}
> >
{nodeMsg.NodeType === '20' || nodeMsg.NodeType === '21' || nodeMsg.NodeType === '22' {nodeMsg.NodeType === '20' || nodeMsg.NodeType === '21' || nodeMsg.NodeType === '22'
...@@ -448,6 +448,20 @@ const NodeModal = props => { ...@@ -448,6 +448,20 @@ const NodeModal = props => {
: '节点'} : '节点'}
信息 信息
</Divider> </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={form} form={form}
labelCol={{ span: 4 }} labelCol={{ span: 4 }}
...@@ -531,6 +545,7 @@ const NodeModal = props => { ...@@ -531,6 +545,7 @@ const NodeModal = props => {
</Form.Item> </Form.Item>
</div> </div>
</Form> </Form>
<div <div
style={{ style={{
display: display:
...@@ -547,7 +562,7 @@ const NodeModal = props => { ...@@ -547,7 +562,7 @@ const NodeModal = props => {
borderTopColor: '#99bbe8', borderTopColor: '#99bbe8',
color: '#15428b', color: '#15428b',
fontWeight: 700, fontWeight: 700,
margin: '30px 0 10px 0', // margin: '30px 0 10px 0',
}} }}
> >
承办管理 承办管理
...@@ -592,7 +607,7 @@ const NodeModal = props => { ...@@ -592,7 +607,7 @@ const NodeModal = props => {
borderTopColor: '#99bbe8', borderTopColor: '#99bbe8',
color: '#15428b', color: '#15428b',
fontWeight: 700, 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 { .titleBox {
color: #DCDCDC; color: #BCBCBC;
font-size: 14px; font-size: 14px;
padding-left: 20px; padding-left: 20px;
} }
......
src/pages/bsmanager/workOrder/workflowEdit/workflow.less
View file @ ee61659a
...@@ -115,6 +115,13 @@ ...@@ -115,6 +115,13 @@
.nodeList { .nodeList {
display: flex; display: flex;
.lineBox {
height: 40px;
width: 1px;
background-color: #ccc;
margin-right: 10px;
}
.nodeBox { .nodeBox {
display: flex; display: flex;
align-items: center; 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