mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-11-03 13:44:47 +08:00
revert: add Menu in LogicFlow
This commit is contained in:
xiaoxian521
parent
f44804538c
commit
a8250e718a
@ -25,84 +25,96 @@
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
import { defineComponent ,ref, unref, onMounted } from "vue";
|
||||
import { templateRef } from '@vueuse/core'
|
||||
import { defineComponent, ref, unref, onMounted } from "vue";
|
||||
import { templateRef } from "@vueuse/core";
|
||||
|
||||
export default defineComponent({
|
||||
name: "Control",
|
||||
props: {
|
||||
lf: Object || String,
|
||||
catTurboData: Boolean,
|
||||
catTurboData: Boolean
|
||||
},
|
||||
emits: ["catData"],
|
||||
setup(props,{emit}) {
|
||||
const controlButton3 = templateRef<HTMLElement | null>('controlButton3', null)
|
||||
const controlButton4 = templateRef<HTMLElement | null>('controlButton4', null)
|
||||
setup(props, { emit }) {
|
||||
const controlButton3 = templateRef<HTMLElement | null>(
|
||||
"controlButton3",
|
||||
null
|
||||
);
|
||||
const controlButton4 = templateRef<HTMLElement | null>(
|
||||
"controlButton4",
|
||||
null
|
||||
);
|
||||
|
||||
let focusIndex = ref(-1)
|
||||
let focusIndex = ref(-1);
|
||||
let titleLists = ref([
|
||||
{
|
||||
icon: "icon-zoom-out-hs",
|
||||
text: "缩小",
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
icon: "icon-enlarge-hs",
|
||||
text: "放大",
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
icon: "icon-full-screen-hs",
|
||||
text: "适应",
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
icon: "icon-previous-hs",
|
||||
text: "上一步",
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
icon: "icon-next-step-hs",
|
||||
text: "下一步",
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
icon: "icon-download-hs",
|
||||
text: "下载图片",
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
icon: "icon-watch-hs",
|
||||
text: "查看数据",
|
||||
disabled: false
|
||||
},
|
||||
])
|
||||
{
|
||||
icon: "icon-zoom-out-hs",
|
||||
text: "缩小",
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
icon: "icon-enlarge-hs",
|
||||
text: "放大",
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
icon: "icon-full-screen-hs",
|
||||
text: "适应",
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
icon: "icon-previous-hs",
|
||||
text: "上一步",
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
icon: "icon-next-step-hs",
|
||||
text: "下一步",
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
icon: "icon-download-hs",
|
||||
text: "下载图片",
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
icon: "icon-watch-hs",
|
||||
text: "查看数据",
|
||||
disabled: false
|
||||
}
|
||||
]);
|
||||
|
||||
const onControl = (item, key) => {
|
||||
["zoom", "zoom", "resetZoom", "undo", "redo", "getSnapshot"].forEach((v, i) => {
|
||||
let domControl = props.lf
|
||||
if (key === 1) {
|
||||
domControl.zoom(true)
|
||||
["zoom", "zoom", "resetZoom", "undo", "redo", "getSnapshot"].forEach(
|
||||
(v, i) => {
|
||||
let domControl = props.lf;
|
||||
if (key === 1) {
|
||||
domControl.zoom(true);
|
||||
}
|
||||
if (key === 6) {
|
||||
emit("catData");
|
||||
}
|
||||
if (key === i) {
|
||||
domControl[v]();
|
||||
}
|
||||
}
|
||||
if (key === 6) {
|
||||
emit("catData")
|
||||
}
|
||||
if (key === i) {
|
||||
domControl[v]()
|
||||
}
|
||||
})
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const onEnter = (key) => {
|
||||
focusIndex.value = key
|
||||
}
|
||||
const onEnter = key => {
|
||||
focusIndex.value = key;
|
||||
};
|
||||
|
||||
onMounted(()=>{
|
||||
onMounted(() => {
|
||||
props.lf.on("history:change", ({ data: { undoAble, redoAble } }) => {
|
||||
unref(titleLists)[3].disabled = unref(controlButton3).disabled = !undoAble
|
||||
unref(titleLists)[4].disabled = unref(controlButton4).disabled = !redoAble
|
||||
})
|
||||
})
|
||||
unref(titleLists)[3].disabled = unref(
|
||||
controlButton3
|
||||
).disabled = !undoAble;
|
||||
unref(titleLists)[4].disabled = unref(
|
||||
controlButton4
|
||||
).disabled = !redoAble;
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
focusIndex,
|
||||
@ -110,7 +122,7 @@ export default defineComponent({
|
||||
onControl,
|
||||
onEnter
|
||||
};
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,13 +1,7 @@
|
||||
<template>
|
||||
<div class="logic-flow-view">
|
||||
<!-- 辅助工具栏 -->
|
||||
<Control
|
||||
class="demo-control"
|
||||
v-if="lf"
|
||||
:lf="lf"
|
||||
:catTurboData="false"
|
||||
@catData="catData"
|
||||
></Control>
|
||||
<Control class="demo-control" v-if="lf" :lf="lf" :catTurboData="false" @catData="catData"></Control>
|
||||
<!-- 节点面板 -->
|
||||
<NodePanel :lf="lf" :nodeList="nodeList"></NodePanel>
|
||||
<!-- 画布 -->
|
||||
@ -20,59 +14,67 @@
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
import { ref, unref, onMounted, nextTick } from "vue"
|
||||
import LogicFlow from '@logicflow/core'
|
||||
import { Snapshot, BpmnElement } from '@logicflow/extension'
|
||||
import '@logicflow/core/dist/style/index.css'
|
||||
import '@logicflow/extension/lib/style/index.css'
|
||||
import { Control, NodePanel, DataDialog } from '/@/components/FlowChart'
|
||||
import { ref, unref, onMounted, nextTick } from "vue";
|
||||
import LogicFlow from "@logicflow/core";
|
||||
import { Snapshot, BpmnElement, Menu } from "@logicflow/extension";
|
||||
import "@logicflow/core/dist/style/index.css";
|
||||
import "@logicflow/extension/lib/style/index.css";
|
||||
import { Control, NodePanel, DataDialog } from "/@/components/FlowChart";
|
||||
|
||||
import { toTurboData, toLogicflowData } from '/@/components/FlowChart/src/adpterForTurbo'
|
||||
import { BpmnNode } from '/@/components/FlowChart/src/config'
|
||||
import demoData from './dataTurbo.json'
|
||||
import {
|
||||
toTurboData,
|
||||
toLogicflowData
|
||||
} from "/@/components/FlowChart/src/adpterForTurbo";
|
||||
import { BpmnNode } from "/@/components/FlowChart/src/config";
|
||||
import demoData from "./dataTurbo.json";
|
||||
export default {
|
||||
components: { NodePanel, Control, DataDialog },
|
||||
setup() {
|
||||
let lf = ref(null)
|
||||
let graphData =ref(null)
|
||||
let dataVisible = ref(false)
|
||||
let lf = ref(null);
|
||||
let graphData = ref(null);
|
||||
let dataVisible = ref(false);
|
||||
let config = ref({
|
||||
grid: true,
|
||||
background: {
|
||||
color: '#f7f9ff'
|
||||
},
|
||||
keyboard: {
|
||||
enabled: true
|
||||
},
|
||||
})
|
||||
let nodeList= BpmnNode
|
||||
grid: true,
|
||||
background: {
|
||||
color: "#f7f9ff"
|
||||
},
|
||||
keyboard: {
|
||||
enabled: true
|
||||
}
|
||||
});
|
||||
let nodeList = BpmnNode;
|
||||
|
||||
function initLf() {
|
||||
// 画布配置
|
||||
LogicFlow.use(Snapshot)
|
||||
LogicFlow.use(Snapshot);
|
||||
// 使用bpmn插件，引入bpmn元素，这些元素可以在turbo中转换后使用
|
||||
LogicFlow.use(BpmnElement)
|
||||
const domLf = new LogicFlow({ ...unref(config), container: document.querySelector('#LF-Turbo') })
|
||||
lf.value = domLf
|
||||
LogicFlow.use(BpmnElement);
|
||||
// 启动右键菜单
|
||||
LogicFlow.use(Menu);
|
||||
const domLf = new LogicFlow({
|
||||
...unref(config),
|
||||
container: document.querySelector("#LF-Turbo")
|
||||
});
|
||||
lf.value = domLf;
|
||||
// 设置边类型bpmn:sequenceFlow为默认类型
|
||||
unref(lf).setDefaultEdgeType('bpmn:sequenceFlow')
|
||||
onRender()
|
||||
unref(lf).setDefaultEdgeType("bpmn:sequenceFlow");
|
||||
onRender();
|
||||
}
|
||||
|
||||
function onRender() {
|
||||
// Turbo数据转换为LogicFlow内部识别的数据结构
|
||||
const lFData = toLogicflowData(demoData)
|
||||
lf.value.render(lFData)
|
||||
const lFData = toLogicflowData(demoData);
|
||||
lf.value.render(lFData);
|
||||
}
|
||||
|
||||
function catData() {
|
||||
graphData.value = unref(lf).getGraphData()
|
||||
dataVisible.value = true
|
||||
graphData.value = unref(lf).getGraphData();
|
||||
dataVisible.value = true;
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
initLf()
|
||||
})
|
||||
onMounted(() => {
|
||||
initLf();
|
||||
});
|
||||
|
||||
return {
|
||||
lf,
|
||||
@ -82,7 +84,7 @@ export default {
|
||||
nodeList,
|
||||
catData
|
||||
};
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user