upload project source code
This commit is contained in:
478
后端源码/yifan.action-ai.cn/index/js/index.C0CAvyUI.js
Normal file
478
后端源码/yifan.action-ai.cn/index/js/index.C0CAvyUI.js
Normal file
@@ -0,0 +1,478 @@
|
||||
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
|
||||
};
|
||||
Reference in New Issue
Block a user