Commit be1adf3e authored by 邓超's avatar 邓超

fix: 修改工作流编辑器选中样式

parent fd10e934
Pipeline #63012 passed with stages
...@@ -49,6 +49,7 @@ const FlowChart = props => { ...@@ -49,6 +49,7 @@ const FlowChart = props => {
const [showLeaveTip, setShowLeaveTip] = useState(false); // 离开路由是否又提醒 const [showLeaveTip, setShowLeaveTip] = useState(false); // 离开路由是否又提醒
const [newSerialNo, setNewSerialNo] = useState(0); const [newSerialNo, setNewSerialNo] = useState(0);
const [nodeLength, setNodeLength] = useState(); const [nodeLength, setNodeLength] = useState();
const [buttonLoading, setButtonLoading] = useState(); // 发布按钮保存loading
const objGo = go.GraphObject.make; const objGo = go.GraphObject.make;
// 监听删除,给删除数组里添加删除id // 监听删除,给删除数组里添加删除id
useEffect(() => { useEffect(() => {
...@@ -312,10 +313,10 @@ const FlowChart = props => { ...@@ -312,10 +313,10 @@ const FlowChart = props => {
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 === '20' && tonode.data.NodeType === '20') {
return false; // return false;
} // }
return true; return true;
}, },
// 处理鼠标进入/离开事件以显示/隐藏端口 // 处理鼠标进入/离开事件以显示/隐藏端口
...@@ -340,11 +341,11 @@ const FlowChart = props => { ...@@ -340,11 +341,11 @@ const FlowChart = props => {
curve: go.Link.JumpOver, curve: go.Link.JumpOver,
corner: 5, corner: 5,
toShortLength: 4, toShortLength: 4,
// selectionAdornmentTemplate: objGo( selectionAdornmentTemplate: objGo(
// go.Adornment, go.Adornment,
// objGo(go.Shape, { isPanelMain: true, stroke: 'red', strokeWidth: 2 }), // 修改线颜色和大小 objGo(go.Shape, { isPanelMain: true, stroke: '#faad14', strokeWidth: 2 }), // 修改线颜色和大小
// objGo(go.Shape, { toArrow: 'Standard', fill: 'red', stroke: null }), // 修改线箭头的颜色和大小 objGo(go.Shape, { toArrow: 'Standard', fill: '#faad14', stroke: '#faad14' }), // 修改线箭头的颜色和大小
// ), ),
}, },
new go.Binding('points').makeTwoWay(), new go.Binding('points').makeTwoWay(),
objGo( objGo(
...@@ -454,7 +455,29 @@ const FlowChart = props => { ...@@ -454,7 +455,29 @@ const FlowChart = props => {
newKey = 1; newKey = 1;
newNum = 1; newNum = 1;
} }
let NodeName = '';
switch (type) {
case '1':
NodeName = `开始节点${newNum}`;
break;
case '0':
NodeName = `普通节点${newNum}`;
break;
case '2':
NodeName = `结束节点${newNum}`;
break;
case '20':
NodeName = `条件网关${newNum}`;
break;
case '21':
NodeName = `汇合网关${newNum}`;
break;
case '22':
NodeName = `并行网关${newNum}`;
break;
default:
break;
}
setNodeLength(list.length); setNodeLength(list.length);
console.log(newNum, newKey); console.log(newNum, newKey);
setNewSerialNo(newNum); setNewSerialNo(newNum);
...@@ -465,6 +488,7 @@ const FlowChart = props => { ...@@ -465,6 +488,7 @@ const FlowChart = props => {
NodeId: newKey, NodeId: newKey,
NodeType: type, NodeType: type,
SerialNo: newNum, SerialNo: newNum,
NodeName,
aheadHandle: 1, aheadHandle: 1,
NodeHandling: 1, NodeHandling: 1,
RuleList: [], RuleList: [],
...@@ -613,6 +637,7 @@ const FlowChart = props => { ...@@ -613,6 +637,7 @@ const FlowChart = props => {
// 保存流程 // 保存流程
const saveFlow = () => { const saveFlow = () => {
setButtonLoading(true);
let diagramObj = JSON.parse(diagram.model.toJson()); let diagramObj = JSON.parse(diagram.model.toJson());
// let list = isRepeat(diagramObj.nodeDataArray, 'SerialNo'); // let list = isRepeat(diagramObj.nodeDataArray, 'SerialNo');
...@@ -632,6 +657,7 @@ const FlowChart = props => { ...@@ -632,6 +657,7 @@ const FlowChart = props => {
Nodes: diagramObj.nodeDataArray, Nodes: diagramObj.nodeDataArray,
}) })
.then(res => { .then(res => {
setButtonLoading(false);
if (res.code === 0) { if (res.code === 0) {
setDeleteNodes([]); setDeleteNodes([]);
setDeleteLines([]); setDeleteLines([]);
...@@ -653,6 +679,7 @@ const FlowChart = props => { ...@@ -653,6 +679,7 @@ const FlowChart = props => {
} }
}) })
.catch(() => { .catch(() => {
setButtonLoading(false);
notification.error({ notification.error({
message: '提示', message: '提示',
duration: 3, duration: 3,
...@@ -677,7 +704,7 @@ const FlowChart = props => { ...@@ -677,7 +704,7 @@ const FlowChart = props => {
))} ))}
</div> </div>
<div className={styles.buttonList}> <div className={styles.buttonList}>
<Button type="primary" onClick={() => saveFlow()}> <Button type="primary" onClick={() => saveFlow()} loading={buttonLoading}>
发布 发布
</Button> </Button>
</div> </div>
......
...@@ -196,12 +196,13 @@ const NodeModal = props => { ...@@ -196,12 +196,13 @@ const NodeModal = props => {
// 获取表单回显 // 获取表单回显
const getFormData = () => { const getFormData = () => {
const { NodeName, NodeType, SerialNo, aheadHandle, NodeHandling } = editMsg; const { NodeName, NodeType, SerialNo, aheadHandle, NodeHandling } = editMsg;
console.log(NodeHandling, 'NodeHandling');
form.setFieldsValue({ form.setFieldsValue({
NodeName, NodeName,
NodeType, NodeType,
SerialNo, SerialNo,
aheadHandle: aheadHandle || 1, aheadHandle: aheadHandle || aheadHandle === 0 ? aheadHandle : 1,
NodeHandling: NodeHandling || 1, NodeHandling: NodeHandling || NodeHandling === 0 ? NodeHandling : 1,
}); });
setNodeMsg(editMsg); setNodeMsg(editMsg);
setFlag(flag + 1); setFlag(flag + 1);
...@@ -209,6 +210,7 @@ const NodeModal = props => { ...@@ -209,6 +210,7 @@ const NodeModal = props => {
// 提交表单 // 提交表单
const onFinish = () => { const onFinish = () => {
form.validateFields().then(validate => { form.validateFields().then(validate => {
console.log(validate, 'validate');
if (validate) { if (validate) {
validate.SerialNo = Number(validate.SerialNo); validate.SerialNo = Number(validate.SerialNo);
let nodeDetail = JSON.stringify({ let nodeDetail = JSON.stringify({
...@@ -651,7 +653,8 @@ const NodeModal = props => { ...@@ -651,7 +653,8 @@ const NodeModal = props => {
<div className={styles.buttonBox} onClick={() => editRule(item, index)}> <div className={styles.buttonBox} onClick={() => editRule(item, index)}>
<div className={styles.setButton}> <div className={styles.setButton}>
<Tooltip title={item.RuleContent}> <Tooltip title={item.RuleContent}>
<span>{item.RuleContent ? '已设置条件' : '设置条件'} </span> {/* <span>{item.RuleContent ? '已设置条件' : '设置条件'} </span> */}
<span>{item.RuleContent} </span>
</Tooltip> </Tooltip>
</div> </div>
<div className={styles.addIcon}> <div className={styles.addIcon}>
......
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
.ruleBox { .ruleBox {
margin-top: 5px; margin-top: 5px;
margin-bottom: 15px; margin-bottom: 15px;
.ruleTitle { .ruleTitle {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -73,7 +74,12 @@ ...@@ -73,7 +74,12 @@
height: 100%; height: 100%;
line-height: 34px; line-height: 34px;
border: 2px solid #6A98FA; border: 2px solid #6A98FA;
text-align: center; text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 10px;
} }
.addIcon { .addIcon {
......
...@@ -111,6 +111,7 @@ ...@@ -111,6 +111,7 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 10px; padding: 0 10px;
.nodeList { .nodeList {
display: flex; display: flex;
...@@ -119,7 +120,8 @@ ...@@ -119,7 +120,8 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 40px; height: 40px;
width: 145px;
padding: 0 10px;
border-radius: 10px; border-radius: 10px;
background-color: #D9E0FF; background-color: #D9E0FF;
margin-right: 10px; margin-right: 10px;
......
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