Skip to content

M
mes-ui
Commit 22885b15 authored by renjintao's avatar renjintao
Browse files
Options

mesplan/creator workflow/close

parent e7c7f72e
Hide whitespace changes
Inline Side-by-side
Showing with 540 additions and 501 deletions
pages/mesPlan/index.vue
View file @ 22885b15
...@@ -297,11 +297,11 @@ export default { ...@@ -297,11 +297,11 @@ export default {
type: "date" type: "date"
}, },
{ {
key: "creatorUserId", key: "creator",
title: this.$t("creatorUserId"), title: this.$t("creatorUserId"),
align: "left", align: "left",
high: true, high: true,
type: "user" // type: "user"
}, },
{ {
key: "creationTime", key: "creationTime",
...@@ -310,22 +310,22 @@ export default { ...@@ -310,22 +310,22 @@ export default {
high: true, high: true,
width: 180 width: 180
}, },
{ // {
key: "lastModifierUserId", // key: "lastModifierUserId",
title: this.$t("lastModifierUserId"), // title: this.$t("lastModifierUserId"),
hide: true, // hide: true,
align: "left", // align: "left",
high: true, // high: true,
type: "user" // type: "user"
}, // },
{ // {
key: "lastModificationTime", // key: "lastModificationTime",
title: this.$t("lastModificationTime"), // title: this.$t("lastModificationTime"),
hide: true, // hide: true,
align: "center", // align: "center",
high: true, // high: true,
width: 180 // width: 180
}, // },
{ {
title: "操作", title: "操作",
key: "action", key: "action",
......
pages/workflow/flow/index.vue
View file @ 22885b15
<template> <template>
<div id="flow"> <div id="flow">
<div id="myDiagramDiv" class="flex fd"> <div id="myDiagramDiv" class="flex fd">
<div v-height="100" class="flex"> <div v-height="100" class="flex">
<div id="palette" class="fg"></div> <div id="palette" class="fg"></div>
<div v-width="200" class="tr lh50"> <div v-width="200" class="tr lh50">
<Button type="primary" class="mr10" @click="save" v-noClick>保存</Button> <Button type="primary" class="mr10" @click="save" v-noClick>保存</Button>
</div>
</div> </div>
</div> <div id="draw" class="fg"></div>
<div id="draw" class="fg"></div>
</div> </div>
<Modal v-model="detailModal" title="节点属性设置" :width="800" footer-hide> <Modal v-model="detailModal" title="节点属性设置" :width="800" footer-hide>
<component :is="detail" :eid="curId" :data="node" @on-ok="ok" /> <component :is="detail" :eid="curId" :data="node" @on-ok="ok" @on-close="close" />
</Modal> </Modal>
</div> </div>
</template> </template>
<script> <script>
...@@ -20,500 +20,539 @@ import Api from "@/plugins/request"; ...@@ -20,500 +20,539 @@ import Api from "@/plugins/request";
import go from "gojs"; import go from "gojs";
let $ = go.GraphObject.make; let $ = go.GraphObject.make;
export default { export default {
name: "", name: "",
data() { data() {
return { return {
detailModal: false, detailModal: false,
detail: null, detail: null,
curId: -1, curId: -1,
node: null, node: null,
myDiagram: null myDiagram: null
}; };
}, },
props: { props: {
eid: String, eid: String,
default: null default: null
}, },
mounted() { mounted() {
this.init(); this.init();
this.load(); this.load();
}, },
methods: { methods: {
init() { init() {
// let theme = "black"; // let theme = "black";
let theme = "#2d8cf0"; let theme = "#2d8cf0";
// fill: "#D1DEDC", // fill: "#D1DEDC",
// stroke: "#DC3C00", // stroke: "#DC3C00",
let select = $( let select = $(
go.Adornment, go.Adornment,
go.Panel.Auto, go.Panel.Auto,
// [2] // [2]
$(go.Shape, { $(go.Shape, {
fill: null, fill: null,
stroke: "black", stroke: "black",
strokeWidth: 2, strokeWidth: 2,
strokeDashArray: [8, 2, 8, 2], strokeDashArray: [8, 2, 8, 2],
margin: 0 margin: 0
// padding:4 // padding:4
}), }),
// [3] // [3]
// { width: 500, height: 200 } // { width: 500, height: 200 }
$(go.Placeholder) $(go.Placeholder)
); );
this.myDiagram = $( this.myDiagram = $(
go.Diagram, go.Diagram,
"draw", // must name or refer to the DIV HTML element "draw", // must name or refer to the DIV HTML element
{ {
LinkDrawn: showLinkLabel, // this DiagramEvent listener is defined below LinkDrawn: showLinkLabel, // this DiagramEvent listener is defined below
LinkRelinked: showLinkLabel, LinkRelinked: showLinkLabel,
"undoManager.isEnabled": true, // enable undo & redo, "undoManager.isEnabled": true, // enable undo & redo,
nodeSelectionAdornmentTemplate: select nodeSelectionAdornmentTemplate: select
} }
); );
function nodeStyle() { function nodeStyle() {
return [ return [
// The Node.location comes from the "loc" property of the node data, // The Node.location comes from the "loc" property of the node data,
// converted by the Point.parse static method. // converted by the Point.parse static method.
// If the Node.location is changed, it updates the "loc" property of the node data, // If the Node.location is changed, it updates the "loc" property of the node data,
// converting back using the Point.stringify static method. // converting back using the Point.stringify static method.
new go.Binding("location", "loc", go.Point.parse).makeTwoWay( new go.Binding("location", "loc", go.Point.parse).makeTwoWay(
go.Point.stringify go.Point.stringify
), ),
{ {
// the Node.location is at the center of each node // the Node.location is at the center of each node
locationSpot: go.Spot.Center locationSpot: go.Spot.Center
} }
]; ];
} }
// Define a function for creating a "port" that is normally transparent. // Define a function for creating a "port" that is normally transparent.
// The "name" is used as the GraphObject.portId, // The "name" is used as the GraphObject.portId,
// the "align" is used to determine where to position the port relative to the body of the node, // the "align" is used to determine where to position the port relative to the body of the node,
// the "spot" is used to control how links connect with the port and whether the port // the "spot" is used to control how links connect with the port and whether the port
// stretches along the side of the node, // stretches along the side of the node,
// and the boolean "output" and "input" arguments control whether the user can draw links from or to the port. // and the boolean "output" and "input" arguments control whether the user can draw links from or to the port.
function makePort(name, align, spot, output, input) { function makePort(name, align, spot, output, input) {
var horizontal = var horizontal =
align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom); align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
// the port is basically just a transparent rectangle that stretches along the side of the node, // the port is basically just a transparent rectangle that stretches along the side of the node,
// and becomes colored when the mouse passes over it // and becomes colored when the mouse passes over it
return $(go.Shape, { return $(go.Shape, {
fill: "transparent", // changed to a color in the mouseEnter event handler fill: "transparent", // changed to a color in the mouseEnter event handler
strokeWidth: 0, // no stroke strokeWidth: 0, // no stroke
width: horizontal ? NaN : 8, // if not stretching horizontally, just 8 wide width: horizontal ? NaN : 8, // if not stretching horizontally, just 8 wide
height: !horizontal ? NaN : 8, // if not stretching vertically, just 8 tall height: !horizontal ? NaN : 8, // if not stretching vertically, just 8 tall
alignment: align, // align the port on the main Shape alignment: align, // align the port on the main Shape
stretch: horizontal stretch: horizontal ?
? go.GraphObject.Horizontal go.GraphObject.Horizontal : go.GraphObject.Vertical,
: go.GraphObject.Vertical, portId: name, // declare this object to be a "port"
portId: name, // declare this object to be a "port" fromSpot: spot, // declare where links may connect at this port
fromSpot: spot, // declare where links may connect at this port fromLinkable: output, // declare whether the user may draw links from here
fromLinkable: output, // declare whether the user may draw links from here toSpot: spot, // declare where links may connect at this port
toSpot: spot, // declare where links may connect at this port toLinkable: input, // declare whether the user may draw links to here
toLinkable: input, // declare whether the user may draw links to here cursor: "pointer", // show a different cursor to indicate potential link point
cursor: "pointer", // show a different cursor to indicate potential link point mouseEnter: function (e, port) {
mouseEnter: function(e, port) { // the PORT argument will be this Shape
// the PORT argument will be this Shape if (!e.diagram.isReadOnly) port.fill = "rgba(15,0,25,0.5)";
if (!e.diagram.isReadOnly) port.fill = "rgba(15,0,25,0.5)"; },
}, mouseLeave: function (e, port) {
mouseLeave: function(e, port) { port.fill = "transparent";
port.fill = "transparent"; // port.fill = "white";
// port.fill = "white"; }
} });
}); }
}
function textStyle(c) { function textStyle(c) {
let color = c || "#f8f8f8"; let color = c || "#f8f8f8";
return { return {
font: "14px Microsoft YaHei", font: "14px Microsoft YaHei",
stroke: color stroke: color
}; };
} }
/*添加模版*/ /*添加模版*/
this.myDiagram.nodeTemplateMap.add( this.myDiagram.nodeTemplateMap.add(
"", // the default category "", // the default category
$( $(
go.Node, go.Node,
"Table", "Table",
nodeStyle(), nodeStyle(),
// the main object is a Panel that surrounds a TextBlock with a rectangular Shape // the main object is a Panel that surrounds a TextBlock with a rectangular Shape
$( $(
go.Panel, go.Panel,
"Auto", "Auto", {
{ // resizable: true,
// resizable: true, doubleClick: (e, obj) => {
doubleClick: (e, obj) => { this.show(obj.part.data);
this.show(obj.part.data); }
} },
}, $(
$( go.Shape,
go.Shape, "Rectangle", {
"Rectangle", fill: "white",
{ stroke: theme,
fill: "white", strokeWidth: 2,
stroke: theme, minSize: new go.Size(80, 50)
strokeWidth: 2, },
minSize: new go.Size(80, 50) new go.Binding("figure", "figure"),
}, new go.Binding("data")
new go.Binding("figure", "figure"), ),
new go.Binding("data") $(
), go.TextBlock,
$( textStyle(theme), {
go.TextBlock, margin: 8,
textStyle(theme), maxSize: new go.Size(300, NaN),
{ wrap: go.TextBlock.WrapFit,
margin: 8, editable: false
maxSize: new go.Size(300, NaN), },
wrap: go.TextBlock.WrapFit, new go.Binding("text").makeTwoWay()
editable: false )
}, ),
new go.Binding("text").makeTwoWay() // four named ports, one on each side:
) makePort("T", go.Spot.Top, go.Spot.TopSide, false, true),
), makePort("L", go.Spot.Left, go.Spot.LeftSide, true, true),
// four named ports, one on each side: makePort("R", go.Spot.Right, go.Spot.RightSide, true, true),
makePort("T", go.Spot.Top, go.Spot.TopSide, false, true), makePort("B", go.Spot.Bottom, go.Spot.BottomSide, true, false)
makePort("L", go.Spot.Left, go.Spot.LeftSide, true, true), )
makePort("R", go.Spot.Right, go.Spot.RightSide, true, true), );
makePort("B", go.Spot.Bottom, go.Spot.BottomSide, true, false)
)
);
this.myDiagram.nodeTemplateMap.add( this.myDiagram.nodeTemplateMap.add(
"Conditional", "Conditional",
$( $(
go.Node, go.Node,
"Table", "Table",
nodeStyle(), nodeStyle(),
// the main object is a Panel that surrounds a TextBlock with a rectangular Shape // the main object is a Panel that surrounds a TextBlock with a rectangular Shape
$( $(
go.Panel, go.Panel,
"Auto", "Auto",
$( $(
go.Shape, go.Shape,
"Diamond", "Diamond", {
{ fill: "#fff", stroke: theme, strokeWidth: 2 }, fill: "#fff",
new go.Binding("figure", "figure") stroke: theme,
), strokeWidth: 2
$( },
go.TextBlock, new go.Binding("figure", "figure")
textStyle(theme), ),
{ $(
margin: 8, go.TextBlock,
maxSize: new go.Size(60, NaN), textStyle(theme), {
wrap: go.TextBlock.WrapFit, margin: 8,
editable: false maxSize: new go.Size(60, NaN),
}, wrap: go.TextBlock.WrapFit,
new go.Binding("text").makeTwoWay() editable: false
) },
), new go.Binding("text").makeTwoWay()
// four named ports, one on each side: )
makePort("T", go.Spot.Top, go.Spot.Top, false, true), ),
makePort("L", go.Spot.Left, go.Spot.Left, true, true), // four named ports, one on each side:
makePort("R", go.Spot.Right, go.Spot.Right, true, true), makePort("T", go.Spot.Top, go.Spot.Top, false, true),
makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false) makePort("L", go.Spot.Left, go.Spot.Left, true, true),
) makePort("R", go.Spot.Right, go.Spot.Right, true, true),
); makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false)
)
);
this.myDiagram.nodeTemplateMap.add( this.myDiagram.nodeTemplateMap.add(
"Start", "Start",
$( $(
go.Node, go.Node,
"Table", "Table",
nodeStyle(), nodeStyle(),
$( $(
go.Panel, go.Panel,
"Spot", "Spot",
$(go.Shape, "Circle", { $(go.Shape, "Circle", {
desiredSize: new go.Size(60, 60), desiredSize: new go.Size(60, 60),
fill: theme, fill: theme,
stroke: "#09d3ac", stroke: "#09d3ac",
strokeWidth: 0 strokeWidth: 0
}), }),
$(go.TextBlock, "开始", textStyle()) $(go.TextBlock, "开始", textStyle())
), ),
// three named ports, one on each side except the top, all output only: // three named ports, one on each side except the top, all output only:
makePort("L", go.Spot.Left, go.Spot.Left, true, false), makePort("L", go.Spot.Left, go.Spot.Left, true, false),
makePort("R", go.Spot.Right, go.Spot.Right, true, false), makePort("R", go.Spot.Right, go.Spot.Right, true, false),
makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false) makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false)
) )
); );
this.myDiagram.nodeTemplateMap.add( this.myDiagram.nodeTemplateMap.add(
"End", "End",
$( $(
go.Node, go.Node,
"Table", "Table",
nodeStyle(), nodeStyle(),
$( $(
go.Panel, go.Panel,
"Spot", "Spot",
$(go.Shape, "Circle", { $(go.Shape, "Circle", {
desiredSize: new go.Size(60, 60), desiredSize: new go.Size(60, 60),
fill: "#D1DEDC", fill: "#D1DEDC",
stroke: "#DC3C00", stroke: "#DC3C00",
strokeWidth: 0 strokeWidth: 0
}), }),
$(go.TextBlock, "结束", textStyle("#909B9A")) $(go.TextBlock, "结束", textStyle("#909B9A"))
), ),
// three named ports, one on each side except the bottom, all input only: // three named ports, one on each side except the bottom, all input only:
makePort("T", go.Spot.Top, go.Spot.Top, false, true), makePort("T", go.Spot.Top, go.Spot.Top, false, true),
makePort("L", go.Spot.Left, go.Spot.Left, false, true), makePort("L", go.Spot.Left, go.Spot.Left, false, true),
makePort("R", go.Spot.Right, go.Spot.Right, false, true) makePort("R", go.Spot.Right, go.Spot.Right, false, true)
) )
); );
go.Shape.defineFigureGenerator("File", function(shape, w, h) { go.Shape.defineFigureGenerator("File", function (shape, w, h) {
var geo = new go.Geometry(); var geo = new go.Geometry();
var fig = new go.PathFigure(0, 0, true); // starting point var fig = new go.PathFigure(0, 0, true); // starting point
geo.add(fig); geo.add(fig);
fig.add(new go.PathSegment(go.PathSegment.Line, 0.75 * w, 0)); fig.add(new go.PathSegment(go.PathSegment.Line, 0.75 * w, 0));
fig.add(new go.PathSegment(go.PathSegment.Line, w, 0.25 * h)); fig.add(new go.PathSegment(go.PathSegment.Line, w, 0.25 * h));
fig.add(new go.PathSegment(go.PathSegment.Line, w, h)); fig.add(new go.PathSegment(go.PathSegment.Line, w, h));
fig.add(new go.PathSegment(go.PathSegment.Line, 0, h).close()); fig.add(new go.PathSegment(go.PathSegment.Line, 0, h).close());
var fig2 = new go.PathFigure(0.75 * w, 0, false); var fig2 = new go.PathFigure(0.75 * w, 0, false);
geo.add(fig2); geo.add(fig2);
// The Fold // The Fold
fig2.add(new go.PathSegment(go.PathSegment.Line, 0.75 * w, 0.25 * h)); fig2.add(new go.PathSegment(go.PathSegment.Line, 0.75 * w, 0.25 * h));
fig2.add(new go.PathSegment(go.PathSegment.Line, w, 0.25 * h)); fig2.add(new go.PathSegment(go.PathSegment.Line, w, 0.25 * h));
geo.spot1 = new go.Spot(0, 0.25); geo.spot1 = new go.Spot(0, 0.25);
geo.spot2 = go.Spot.BottomRight; geo.spot2 = go.Spot.BottomRight;
return geo; return geo;
}); });
this.myDiagram.nodeTemplateMap.add( this.myDiagram.nodeTemplateMap.add(
"Comment", "Comment",
$( $(
go.Node, go.Node,
"Auto", "Auto",
nodeStyle(), nodeStyle(),
$(go.Shape, "File", { $(go.Shape, "File", {
fill: "#fff", fill: "#fff",
stroke: theme, stroke: theme,
strokeWidth: 2 strokeWidth: 2
}), }),
$( $(
go.TextBlock, go.TextBlock,
textStyle(theme), textStyle(theme), {
{ margin: 8,
margin: 8, maxSize: new go.Size(200, NaN),
maxSize: new go.Size(200, NaN), wrap: go.TextBlock.WrapFit,
wrap: go.TextBlock.WrapFit, textAlign: "center",
textAlign: "center", editable: false
editable: false },
}, new go.Binding("text").makeTwoWay()
new go.Binding("text").makeTwoWay() )
) // no ports, because no links are allowed to connect with a comment
// no ports, because no links are allowed to connect with a comment )
) );
);
// replace the default Link template in the linkTemplateMap // replace the default Link template in the linkTemplateMap
this.myDiagram.linkTemplate = $( this.myDiagram.linkTemplate = $(
go.Link, // the whole link panel go.Link, // the whole link panel
{ {
routing: go.Link.AvoidsNodes, routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver, curve: go.Link.JumpOver,
corner: 5, corner: 5,
toShortLength: 4, toShortLength: 4,
relinkableFrom: true, relinkableFrom: true,
relinkableTo: true, relinkableTo: true,
reshapable: true, reshapable: true,
resegmentable: true, resegmentable: true,
// mouse-overs subtly highlight links: // mouse-overs subtly highlight links:
mouseEnter: function(e, link) { mouseEnter: function (e, link) {
link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)"; link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)";
}, },
mouseLeave: function(e, link) { mouseLeave: function (e, link) {
link.findObject("HIGHLIGHT").stroke = "transparent"; link.findObject("HIGHLIGHT").stroke = "transparent";
}, },
selectionAdorned: false selectionAdorned: false
}, },
new go.Binding("points").makeTwoWay(), new go.Binding("points").makeTwoWay(),
$( $(
go.Shape, // the highlight shape, normally transparent go.Shape, // the highlight shape, normally transparent
{ {
isPanelMain: true, isPanelMain: true,
strokeWidth: 8, strokeWidth: 8,
stroke: "transparent", stroke: "transparent",
fill: theme, fill: theme,
name: "HIGHLIGHT" name: "HIGHLIGHT"
} }
), ),
$( $(
go.Shape, // the link path shape go.Shape, // the link path shape
{ isPanelMain: true, stroke: theme, strokeWidth: 2 }, {
new go.Binding("stroke", "isSelected", function(sel) { isPanelMain: true,
return sel ? "dodgerblue" : theme; stroke: theme,
}).ofObject() strokeWidth: 2
), },
$( new go.Binding("stroke", "isSelected", function (sel) {
go.Shape, // the "from" end arrowhead return sel ? "dodgerblue" : theme;
{ fromArrow: "Circle", fill: "#fff", strokeWidth: 2, stroke: theme } }).ofObject()
), ),
$( $(
go.Shape, // the arrowhead go.Shape, // the "from" end arrowhead
{ toArrow: "standard", strokeWidth: 2, fill: theme, stroke: theme } {
), fromArrow: "Circle",
$( fill: "#fff",
go.Panel, strokeWidth: 2,
"Auto", // the link label, normally not visible stroke: theme
{ }
visible: false, ),
name: "LABEL", $(
segmentIndex: 2, go.Shape, // the arrowhead
segmentFraction: 0.5 {
}, toArrow: "standard",
new go.Binding("visible", "visible").makeTwoWay(), strokeWidth: 2,
$( fill: theme,
go.Shape, stroke: theme
"RoundedRectangle", // the label shape }
{ fill: "#F8F8F8", strokeWidth: 0 } ),
), $(
$( go.Panel,
go.TextBlock, "Auto", // the link label, normally not visible
"Yes", // the label {
{ visible: false,
textAlign: "center", name: "LABEL",
font: "10pt helvetica, arial, sans-serif", segmentIndex: 2,
stroke: "#333333", segmentFraction: 0.5
editable: false },
}, new go.Binding("visible", "visible").makeTwoWay(),
new go.Binding("text").makeTwoWay() $(
) go.Shape,
) "RoundedRectangle", // the label shape
); {
function showLinkLabel(e) { fill: "#F8F8F8",
var label = e.subject.findObject("LABEL"); strokeWidth: 0
if (label !== null) }
label.visible = e.subject.fromNode.data.category === "Conditional"; ),
} $(
this.myDiagram.toolManager.linkingTool.temporaryLink.routing = go.TextBlock,
go.Link.Orthogonal; "Yes", // the label
this.myDiagram.toolManager.relinkingTool.temporaryLink.routing = {
go.Link.Orthogonal; textAlign: "center",
this.myPalette = $( font: "10pt helvetica, arial, sans-serif",
go.Palette, stroke: "#333333",
"palette", // must name or refer to the DIV HTML element editable: false
{ },
// Instead of the default animation, use a custom fade-down new go.Binding("text").makeTwoWay()
"animationManager.initialAnimationStyle": go.AnimationManager.None, )
InitialAnimationStarting: animateFadeDown, // Instead, animate with this function )
);
nodeTemplateMap: this.myDiagram.nodeTemplateMap, // share the templates used by myDiagram function showLinkLabel(e) {
nodeSelectionAdornmentTemplate: select, var label = e.subject.findObject("LABEL");
model: new go.GraphLinksModel([ if (label !== null)
// specify the contents of the Palette label.visible = e.subject.fromNode.data.category === "Conditional";
{ category: "Start", text: "开始" }, }
{ text: "节点" }, this.myDiagram.toolManager.linkingTool.temporaryLink.routing =
{ category: "Conditional", text: "条件" }, go.Link.Orthogonal;
{ category: "End", text: "结束" }, this.myDiagram.toolManager.relinkingTool.temporaryLink.routing =
{ category: "Comment", text: "备注" } go.Link.Orthogonal;
]) this.myPalette = $(
} go.Palette,
); "palette", // must name or refer to the DIV HTML element
{
// Instead of the default animation, use a custom fade-down
"animationManager.initialAnimationStyle": go.AnimationManager.None,
InitialAnimationStarting: animateFadeDown, // Instead, animate with this function
this.myDiagram.addModelChangedListener(evt => { nodeTemplateMap: this.myDiagram.nodeTemplateMap, // share the templates used by myDiagram
if (!evt.isTransactionFinished) return; nodeSelectionAdornmentTemplate: select,
var txn = evt.object; // a Transaction model: new go.GraphLinksModel([
if (txn === null) return; // specify the contents of the Palette
// iterate over all of the actual ChangedEvents of the Transaction {
txn.changes.each(function(e) { category: "Start",
// ignore any kind of change other than adding/removing a node text: "开始"
if (e.modelChange !== "nodeDataArray") return; },
// record node insertions and removals {
if (e.change === go.ChangedEvent.Insert) { text: "节点"
console.log( },
evt.propertyName + " added node with key: " + e.newValue.key {
); category: "Conditional",
} else if (e.change === go.ChangedEvent.Remove) { text: "条件"
console.log( },
evt.propertyName + " removed node with key: " + e.oldValue.key {
category: "End",
text: "结束"
},
{
category: "Comment",
text: "备注"
}
])
}
); );
}
}); this.myDiagram.addModelChangedListener(evt => {
}); if (!evt.isTransactionFinished) return;
function animateFadeDown(e) { var txn = evt.object; // a Transaction
var diagram = e.diagram; if (txn === null) return;
var animation = new go.Animation(); // iterate over all of the actual ChangedEvents of the Transaction
animation.isViewportUnconstrained = true; // So Diagram positioning rules let the animation start off-screen txn.changes.each(function (e) {
animation.easing = go.Animation.EaseOutExpo; // ignore any kind of change other than adding/removing a node
animation.duration = 900; if (e.modelChange !== "nodeDataArray") return;
// Fade "down", in other words, fade in from above // record node insertions and removals
animation.add( if (e.change === go.ChangedEvent.Insert) {
diagram, console.log(
"position", evt.propertyName + " added node with key: " + e.newValue.key
diagram.position.copy().offset(0, 200), );
diagram.position } else if (e.change === go.ChangedEvent.Remove) {
); console.log(
animation.add(diagram, "opacity", 0, 1); evt.propertyName + " removed node with key: " + e.oldValue.key
animation.start(); );
} }
// this.load(); });
}, });
load() {
Api.get(`${workflowUrl}/schema/get`, { id: this.eid }).then(r => { function animateFadeDown(e) {
console.warn(r); var diagram = e.diagram;
// this.myDiagram.model=go.Model.fromJson(r.content); var animation = new go.Animation();
var data = r.result.content || `{}`; animation.isViewportUnconstrained = true; // So Diagram positioning rules let the animation start off-screen
// this.init(data) animation.easing = go.Animation.EaseOutExpo;
// this.init(data) animation.duration = 900;
this.myDiagram.model = go.Model.fromJson(data); // Fade "down", in other words, fade in from above
}); animation.add(
}, diagram,
save() { "position",
let content = this.myDiagram.model.toJson(); diagram.position.copy().offset(0, 200),
Api.post(`${workflowUrl}/schema/design`, { diagram.position
id: this.eid, );
name: "", animation.add(diagram, "opacity", 0, 1);
content animation.start();
}).then(r => { }
if (r.success) { // this.load();
this.$Message.success("保存成功！"); },
this.load(); load() {
Api.get(`${workflowUrl}/schema/get`, {
id: this.eid
}).then(r => {
console.warn(r);
// this.myDiagram.model=go.Model.fromJson(r.content);
var data = r.result.content || `{}`;
// this.init(data)
// this.init(data)
this.myDiagram.model = go.Model.fromJson(data);
});
},
save() {
let content = this.myDiagram.model.toJson();
Api.post(`${workflowUrl}/schema/design`, {
id: this.eid,
name: "",
content
}).then(r => {
if (r.success) {
this.$Message.success("保存成功！");
this.load();
}
});
},
show(data) {
if (data.id) {
this.detailModal = true;
this.node = data;
this.curId = data.id;
this.detail = () => import("./edit");
} else {
this.$Message.warning("请先保存流程设计！");
}
},
ok(node) {
if (node.name != this.node.text) {
this.node.text = node.name;
var nodeData = this.myDiagram.model.findNodeDataForKey(this.node.key);
nodeData.text = node.name;
this.myDiagram.model.updateTargetBindings(nodeData);
}
this.detailModal = false;
this.detail = null;
this.curId = -1;
},
close() {
this.detailModal = false;
this.detail = null;
this.curId = -1;
} }
});
},
show(data) {
if (data.id) {
this.detailModal = true;
this.node = data;
this.curId = data.id;
this.detail = () => import("./edit");
} else {
this.$Message.warning("请先保存流程设计！");
}
},
ok(node) {
if (node.name != this.node.text) {
this.node.text = node.name;
var nodeData = this.myDiagram.model.findNodeDataForKey(this.node.key);
nodeData.text = node.name;
this.myDiagram.model.updateTargetBindings(nodeData);
}
this.detailModal = false;
this.detail = null;
this.curId = -1;
} }
}
}; };
</script> </script>
<style lang="less"> <style lang="less">
#flow { #flow {
// background:#a7a7a7; // background:#a7a7a7;
margin: -16px; margin: -16px;
padding: 0 10px; padding: 0 10px;
canvas:focus {
outline: 0; canvas:focus {
} outline: 0;
#myDiagramDiv { }
height: calc(100vh - 51px);
display: flex; #myDiagramDiv {
} height: calc(100vh - 51px);
display: flex;
}
} }
</style> </style>
\ No newline at end of file
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