479 lines
16 KiB
JavaScript
479 lines
16 KiB
JavaScript
import { en as useVueFlow, r as ref, au as markRaw, eo as MarkerType, S as openBlock, _ as createElementBlock, a1 as createBaseVNode, $ as createVNode, a0 as withCtx, a9 as createTextVNode, o as unref, H as Fragment, ay as renderList, aa as toDisplayString, ep as _sfc_main$1, eq as _sfc_main$2, er as _sfc_main$3, es as _sfc_main$1$1, a8 as createCommentVNode } from "./.pnpm.BW3P1y8f.js";
|
||
import CustomNode from "./CustomNode.DH3hMbi5.js";
|
||
import { h as ElButton, y as ElInput, ar as ElOption, aq as ElSelect, v as ElDialog, E as ElMessage } from "./element-plus.CkEW9frc.js";
|
||
import "./_plugin-vue_export-helper.1tPrXgE0.js";
|
||
const _hoisted_1 = { class: "app-container" };
|
||
const _hoisted_2 = { class: "top-toolbar" };
|
||
const _hoisted_3 = {
|
||
class: "toolbar-right",
|
||
style: { "margin-left": "auto" }
|
||
};
|
||
const _hoisted_4 = { class: "main-layout" };
|
||
const _hoisted_5 = { class: "left-panel" };
|
||
const _hoisted_6 = { class: "flex-center" };
|
||
const _hoisted_7 = {
|
||
class: "scroll-container",
|
||
style: { "height": "calc(100% - 50px)" }
|
||
};
|
||
const _hoisted_8 = ["onDragstart"];
|
||
const _hoisted_9 = { class: "canvas-container" };
|
||
const _hoisted_10 = {
|
||
key: 0,
|
||
class: "right-panel"
|
||
};
|
||
const _hoisted_11 = { class: "panel-header" };
|
||
const _hoisted_12 = {
|
||
key: 0,
|
||
class: "gap-y-2"
|
||
};
|
||
const _hoisted_13 = {
|
||
key: 1,
|
||
class: "gap-y-2"
|
||
};
|
||
const _hoisted_14 = { class: "dialog-footer" };
|
||
const _hoisted_15 = { class: "dialog-footer" };
|
||
const _sfc_main = /* @__PURE__ */ Object.assign({
|
||
name: "Workflow",
|
||
inheritAttrs: false
|
||
}, {
|
||
__name: "index",
|
||
setup(__props) {
|
||
const {
|
||
onInit,
|
||
onNodeDragStop,
|
||
onConnect,
|
||
addEdges,
|
||
getNodes,
|
||
getEdges,
|
||
setEdges,
|
||
setNodes,
|
||
screenToFlowCoordinate,
|
||
onNodesInitialized,
|
||
updateNode,
|
||
addNodes
|
||
} = useVueFlow();
|
||
const defaultEdgeOptions = {
|
||
type: "smoothstep",
|
||
// 默认边类型
|
||
animated: true,
|
||
// 是否启用动画
|
||
markerEnd: {
|
||
type: "arrowclosed",
|
||
// 默认箭头样式
|
||
color: "black"
|
||
}
|
||
};
|
||
const nodes = ref([
|
||
{
|
||
id: "5",
|
||
type: "input",
|
||
data: { label: "开始" },
|
||
position: { x: 235, y: 100 },
|
||
class: "round-start"
|
||
},
|
||
{
|
||
id: "6",
|
||
type: "custom",
|
||
// 使用自定义类型
|
||
data: { label: "工位：流程1" },
|
||
position: { x: 200, y: 200 },
|
||
class: "light"
|
||
},
|
||
{
|
||
id: "7",
|
||
type: "output",
|
||
data: { label: "结束" },
|
||
position: { x: 235, y: 300 },
|
||
class: "round-stop"
|
||
}
|
||
]);
|
||
const nodeTypes = ref({
|
||
custom: markRaw(CustomNode)
|
||
// 注册自定义节点类型
|
||
});
|
||
const edges = ref([
|
||
{
|
||
id: "e4-5",
|
||
type: "straight",
|
||
source: "5",
|
||
target: "6",
|
||
sourceHandle: "top-6",
|
||
label: "测试1",
|
||
markerEnd: {
|
||
type: MarkerType.ArrowClosed,
|
||
// 使用闭合箭头
|
||
color: "black"
|
||
}
|
||
},
|
||
{
|
||
id: "e4-6",
|
||
type: "straight",
|
||
source: "6",
|
||
target: "7",
|
||
sourceHandle: "bottom-6",
|
||
label: "测试2",
|
||
markerEnd: {
|
||
type: MarkerType.ArrowClosed,
|
||
// 使用闭合箭头
|
||
color: "black"
|
||
}
|
||
}
|
||
]);
|
||
onInit((vueFlowInstance) => {
|
||
vueFlowInstance.fitView();
|
||
});
|
||
onNodeDragStop(({ event, nodes: nodes2, node }) => {
|
||
console.log("Node Drag Stop", { event, nodes: nodes2, node });
|
||
});
|
||
onConnect((connection) => {
|
||
addEdges(connection);
|
||
});
|
||
const pointsList = ref([{ name: "测试1" }, { name: "测试2" }]);
|
||
const updateState = ref("");
|
||
const selectedEdge = ref({});
|
||
const removeEdgeDialogVisible = ref(false);
|
||
const removeNodeDialogVisible = ref(false);
|
||
const onEdgeClick = ({ edge }) => {
|
||
selectedEdge.value = edge;
|
||
updateState.value = "edge";
|
||
console.log(selectedEdge.value);
|
||
};
|
||
function updateEdge() {
|
||
const allEdges = getEdges.value;
|
||
const newType = selectedEdge.value.type === "smoothstep" ? null : "smoothstep";
|
||
setEdges([
|
||
...allEdges.filter((e) => e.id !== selectedEdge.value.id),
|
||
// 移除旧的边
|
||
{ ...selectedEdge.value, type: newType, label: "Node 3" }
|
||
// 更新边的类型
|
||
]);
|
||
}
|
||
function removeEdge() {
|
||
removeEdgeDialogVisible.value = true;
|
||
}
|
||
function confirmRemoveEdge() {
|
||
const allEdges = getEdges.value;
|
||
setEdges([
|
||
...allEdges.filter((e) => e.id !== selectedEdge.value.id)
|
||
// 移除边
|
||
]);
|
||
ElMessage.success("连线删除成功");
|
||
updateState.value = null;
|
||
selectedEdge.value = {};
|
||
removeEdgeDialogVisible.value = false;
|
||
}
|
||
const selectedNode = ref({});
|
||
const onNodeClick = ({ node }) => {
|
||
selectedNode.value = node;
|
||
updateState.value = "node";
|
||
console.log("选中的节点：", node);
|
||
};
|
||
function removeNode() {
|
||
removeNodeDialogVisible.value = true;
|
||
}
|
||
function confirmRemoveNode() {
|
||
const allNodes = getNodes.value;
|
||
setNodes([
|
||
...allNodes.filter((e) => e.id !== selectedNode.value.id)
|
||
// 移除边
|
||
]);
|
||
const allEdges = getEdges.value;
|
||
setEdges([
|
||
...allEdges.filter(
|
||
(e) => e.source !== selectedNode.value.id && e.target !== selectedNode.value.id
|
||
)
|
||
// 移除边
|
||
]);
|
||
ElMessage.success("点位删除成功");
|
||
updateState.value = null;
|
||
selectedNode.value = {};
|
||
console.log(getEdges.value);
|
||
removeNodeDialogVisible.value = false;
|
||
}
|
||
const dragItem = ref(null);
|
||
function onDragStart(event, state) {
|
||
dragItem.value = {
|
||
id: `node-${Date.now()}`,
|
||
// 动态生成唯一 id
|
||
data: { label: state === "开始" ? "开始" : state === "结束" ? "结束" : "工位：" + state },
|
||
type: state === "开始" ? "input" : state === "结束" ? "output" : "custom",
|
||
position: { x: event.clientX, y: event.clientY },
|
||
animated: false,
|
||
class: state === "开始" ? "round-start" : state === "结束" ? "round-stop" : "light"
|
||
};
|
||
}
|
||
function onDragEnd() {
|
||
dragItem.value = null;
|
||
}
|
||
function onDragOver(event) {
|
||
event.preventDefault();
|
||
}
|
||
function onDrop(event) {
|
||
const position = screenToFlowCoordinate({
|
||
x: event.clientX,
|
||
y: event.clientY
|
||
});
|
||
const newNode = {
|
||
...dragItem.value,
|
||
position
|
||
};
|
||
const { off } = onNodesInitialized(() => {
|
||
var _a;
|
||
updateNode((_a = dragItem.value) == null ? void 0 : _a.id, (node) => ({
|
||
position: {
|
||
x: node.position.x - node.dimensions.width / 2,
|
||
y: node.position.y - node.dimensions.height / 2
|
||
}
|
||
}));
|
||
off();
|
||
});
|
||
dragItem.value = null;
|
||
addNodes(newNode);
|
||
}
|
||
return (_ctx, _cache) => {
|
||
return openBlock(), createElementBlock("div", _hoisted_1, [
|
||
createBaseVNode("div", _hoisted_2, [
|
||
createBaseVNode("div", _hoisted_3, [
|
||
createVNode(unref(ElButton), {
|
||
type: "primary",
|
||
class: "m-2"
|
||
}, {
|
||
default: withCtx(() => [..._cache[11] || (_cache[11] = [
|
||
createTextVNode("保存", -1)
|
||
])]),
|
||
_: 1
|
||
})
|
||
])
|
||
]),
|
||
createBaseVNode("div", _hoisted_4, [
|
||
createBaseVNode("div", _hoisted_5, [
|
||
createBaseVNode("div", _hoisted_6, [
|
||
createBaseVNode("div", {
|
||
class: "drag-item text-center start-item",
|
||
draggable: "true",
|
||
onDragstart: _cache[0] || (_cache[0] = ($event) => onDragStart($event, "开始")),
|
||
onDragend: onDragEnd
|
||
}, [..._cache[12] || (_cache[12] = [
|
||
createBaseVNode("span", null, "开始", -1)
|
||
])], 32),
|
||
createBaseVNode("div", {
|
||
class: "drag-item text-center end-item ml-2",
|
||
draggable: "true",
|
||
onDragstart: _cache[1] || (_cache[1] = ($event) => onDragStart($event, "结束")),
|
||
onDragend: onDragEnd
|
||
}, [..._cache[13] || (_cache[13] = [
|
||
createBaseVNode("span", null, "结束", -1)
|
||
])], 32)
|
||
]),
|
||
createBaseVNode("div", _hoisted_7, [
|
||
(openBlock(true), createElementBlock(Fragment, null, renderList(pointsList.value, (item, index) => {
|
||
return openBlock(), createElementBlock("div", {
|
||
key: index,
|
||
class: "drag-item text-center w-full mt-2",
|
||
draggable: "true",
|
||
onDragstart: ($event) => onDragStart($event, item.name),
|
||
onDragend: onDragEnd
|
||
}, [
|
||
createBaseVNode("span", null, toDisplayString(item.name), 1)
|
||
], 40, _hoisted_8);
|
||
}), 128))
|
||
])
|
||
]),
|
||
createBaseVNode("div", _hoisted_9, [
|
||
createVNode(unref(_sfc_main$1$1), {
|
||
nodes: nodes.value,
|
||
edges: edges.value,
|
||
class: "basic-flow",
|
||
"default-viewport": { zoom: 1 },
|
||
"min-zoom": 0.2,
|
||
"max-zoom": 4,
|
||
"node-types": nodeTypes.value,
|
||
"default-edge-options": defaultEdgeOptions,
|
||
"connect-on-click": true,
|
||
onNodeClick,
|
||
onEdgeClick,
|
||
onDrop,
|
||
onDragover: onDragOver
|
||
}, {
|
||
default: withCtx(() => [
|
||
createVNode(unref(_sfc_main$1)),
|
||
createVNode(unref(_sfc_main$2), {
|
||
"pattern-color": "#aaa",
|
||
gap: 16
|
||
}),
|
||
createVNode(unref(_sfc_main$3))
|
||
]),
|
||
_: 1
|
||
}, 8, ["nodes", "edges", "node-types"])
|
||
]),
|
||
updateState.value ? (openBlock(), createElementBlock("div", _hoisted_10, [
|
||
createBaseVNode("div", _hoisted_11, [
|
||
createBaseVNode("span", null, toDisplayString(updateState.value === "edge" ? "连接线规则配置" : "点位规则配置"), 1),
|
||
createVNode(unref(ElButton), {
|
||
type: "text",
|
||
class: "float-right",
|
||
icon: "close",
|
||
onClick: _cache[2] || (_cache[2] = ($event) => updateState.value = "")
|
||
})
|
||
]),
|
||
updateState.value === "edge" ? (openBlock(), createElementBlock("div", _hoisted_12, [
|
||
createVNode(unref(ElInput), {
|
||
modelValue: selectedEdge.value.label,
|
||
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => selectedEdge.value.label = $event),
|
||
placeholder: "线名称",
|
||
clearable: "",
|
||
class: "mb-2"
|
||
}, null, 8, ["modelValue"]),
|
||
createVNode(unref(ElSelect), {
|
||
modelValue: selectedEdge.value.type,
|
||
"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => selectedEdge.value.type = $event),
|
||
placeholder: "线类型",
|
||
class: "mb-2"
|
||
}, {
|
||
default: withCtx(() => [
|
||
createVNode(unref(ElOption), {
|
||
label: "折线",
|
||
value: "smoothstep"
|
||
}),
|
||
createVNode(unref(ElOption), {
|
||
label: "曲线",
|
||
value: "default"
|
||
}),
|
||
createVNode(unref(ElOption), {
|
||
label: "直线",
|
||
value: "straight"
|
||
})
|
||
]),
|
||
_: 1
|
||
}, 8, ["modelValue"]),
|
||
createVNode(unref(ElSelect), {
|
||
modelValue: selectedEdge.value.animated,
|
||
"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => selectedEdge.value.animated = $event),
|
||
placeholder: "线动画",
|
||
class: "mb-2"
|
||
}, {
|
||
default: withCtx(() => [
|
||
createVNode(unref(ElOption), {
|
||
label: "开启",
|
||
value: true
|
||
}),
|
||
createVNode(unref(ElOption), {
|
||
label: "关闭",
|
||
value: null
|
||
})
|
||
]),
|
||
_: 1
|
||
}, 8, ["modelValue"]),
|
||
createVNode(unref(ElButton), {
|
||
type: "primary",
|
||
size: "small",
|
||
onClick: updateEdge
|
||
}, {
|
||
default: withCtx(() => [..._cache[14] || (_cache[14] = [
|
||
createTextVNode("修改", -1)
|
||
])]),
|
||
_: 1
|
||
}),
|
||
createVNode(unref(ElButton), {
|
||
type: "danger",
|
||
size: "small",
|
||
onClick: removeEdge
|
||
}, {
|
||
default: withCtx(() => [..._cache[15] || (_cache[15] = [
|
||
createTextVNode("删除", -1)
|
||
])]),
|
||
_: 1
|
||
})
|
||
])) : (openBlock(), createElementBlock("div", _hoisted_13, [
|
||
createVNode(unref(ElInput), {
|
||
modelValue: selectedNode.value.data.label,
|
||
"onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => selectedNode.value.data.label = $event),
|
||
placeholder: "点位名称",
|
||
clearable: "",
|
||
class: "mb-2"
|
||
}, null, 8, ["modelValue"]),
|
||
createVNode(unref(ElButton), {
|
||
type: "danger",
|
||
size: "small",
|
||
onClick: removeNode
|
||
}, {
|
||
default: withCtx(() => [..._cache[16] || (_cache[16] = [
|
||
createTextVNode("删除", -1)
|
||
])]),
|
||
_: 1
|
||
})
|
||
]))
|
||
])) : createCommentVNode("", true)
|
||
]),
|
||
createVNode(unref(ElDialog), {
|
||
modelValue: removeEdgeDialogVisible.value,
|
||
"onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => removeEdgeDialogVisible.value = $event),
|
||
title: "删除连线",
|
||
width: "30%"
|
||
}, {
|
||
footer: withCtx(() => [
|
||
createBaseVNode("div", _hoisted_14, [
|
||
createVNode(unref(ElButton), {
|
||
onClick: _cache[7] || (_cache[7] = ($event) => removeEdgeDialogVisible.value = false)
|
||
}, {
|
||
default: withCtx(() => [..._cache[17] || (_cache[17] = [
|
||
createTextVNode("取消", -1)
|
||
])]),
|
||
_: 1
|
||
}),
|
||
createVNode(unref(ElButton), {
|
||
type: "danger",
|
||
onClick: confirmRemoveEdge
|
||
}, {
|
||
default: withCtx(() => [..._cache[18] || (_cache[18] = [
|
||
createTextVNode("确定", -1)
|
||
])]),
|
||
_: 1
|
||
})
|
||
])
|
||
]),
|
||
default: withCtx(() => [
|
||
_cache[19] || (_cache[19] = createBaseVNode("span", null, "是否要删除该连线？", -1))
|
||
]),
|
||
_: 1
|
||
}, 8, ["modelValue"]),
|
||
createVNode(unref(ElDialog), {
|
||
modelValue: removeNodeDialogVisible.value,
|
||
"onUpdate:modelValue": _cache[10] || (_cache[10] = ($event) => removeNodeDialogVisible.value = $event),
|
||
title: "删除点位",
|
||
width: "30%"
|
||
}, {
|
||
footer: withCtx(() => [
|
||
createBaseVNode("div", _hoisted_15, [
|
||
createVNode(unref(ElButton), {
|
||
onClick: _cache[9] || (_cache[9] = ($event) => removeNodeDialogVisible.value = false)
|
||
}, {
|
||
default: withCtx(() => [..._cache[20] || (_cache[20] = [
|
||
createTextVNode("取消", -1)
|
||
])]),
|
||
_: 1
|
||
}),
|
||
createVNode(unref(ElButton), {
|
||
type: "danger",
|
||
onClick: confirmRemoveNode
|
||
}, {
|
||
default: withCtx(() => [..._cache[21] || (_cache[21] = [
|
||
createTextVNode("确定", -1)
|
||
])]),
|
||
_: 1
|
||
})
|
||
])
|
||
]),
|
||
default: withCtx(() => [
|
||
_cache[22] || (_cache[22] = createBaseVNode("span", null, "是否要删除该点位？", -1))
|
||
]),
|
||
_: 1
|
||
}, 8, ["modelValue"])
|
||
]);
|
||
};
|
||
}
|
||
});
|
||
export {
|
||
_sfc_main as default
|
||
};
|