|
@@ -65,14 +65,15 @@
|
|
|
v-model:nodes="nodes"
|
|
|
v-model:edges="edges"
|
|
|
:apply-default="!editStatus && usableStatus"
|
|
|
+ @connect="onConnectMethod"
|
|
|
@dragover="onDragOver"
|
|
|
@dragleave="onDragLeave"
|
|
|
@node-click="nodeClick($event)"
|
|
|
@edge-click="edgeClick($event)"
|
|
|
@nodes-change="(data) => nodesChange(data)"
|
|
|
@edges-change="(data) => edgesChange(data)"
|
|
|
- @node-drag-start="nodeDragStart"
|
|
|
@node-drag-stop="nodeDragStop"
|
|
|
+ @node-drag-start="nodeDragStart"
|
|
|
>
|
|
|
<MiniMap style="background-color: grey" />
|
|
|
<template #edge-custom="props">
|
|
@@ -122,70 +123,36 @@
|
|
|
<div class="detailInfo">
|
|
|
<el-scrollbar>
|
|
|
<div class="opBox">
|
|
|
- <!-- <el-button type="success" @click="changeStyle">
|
|
|
- 按钮风格切换
|
|
|
- </el-button> -->
|
|
|
<el-button type="primary" @click="changeEditStatus">{{
|
|
|
!editStatus ? "切换为工序信息编辑模式" : "切换为工序路线编辑模式"
|
|
|
}}</el-button>
|
|
|
|
|
|
<el-button @click="getPng">导出流程图 </el-button>
|
|
|
+ <el-button type="success" @click="changeStyle">
|
|
|
+ 按钮风格切换
|
|
|
+ </el-button>
|
|
|
</div>
|
|
|
|
|
|
<!-- 工艺路线编辑模式 -->
|
|
|
<div v-if="!editStatus && usableStatus">
|
|
|
- <div class="btns">
|
|
|
+ <div :class="styleStatus ? 'btnsChange' : 'btns'">
|
|
|
<div>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- @click="saveFlow"
|
|
|
- :class="styleStatus == true ? 'showStyle' : ''"
|
|
|
- >
|
|
|
- <span :class="styleStatus == true ? 'fontStyle' : ''"
|
|
|
- >保</span
|
|
|
- >
|
|
|
- <span :class="styleStatus == true ? 'fontStyle' : ''">
|
|
|
-
|
|
|
- </span>
|
|
|
- <span :class="styleStatus == true ? 'fontStyle' : ''"
|
|
|
- >存</span
|
|
|
- >
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <el-button
|
|
|
- type="danger"
|
|
|
- v-if="false"
|
|
|
- :class="styleStatus == true ? 'showStyle' : ''"
|
|
|
- @click="cancer"
|
|
|
- >
|
|
|
- <span :class="styleStatus == true ? 'fontStyle' : ''"
|
|
|
- >回</span
|
|
|
- >
|
|
|
- <span :class="styleStatus == true ? 'fontStyle' : ''">
|
|
|
-
|
|
|
- </span>
|
|
|
- <span :class="styleStatus == true ? 'fontStyle' : ''"
|
|
|
- >退</span
|
|
|
- >
|
|
|
+ <el-button type="primary" @click="saveFlow">
|
|
|
+ <span>保</span>
|
|
|
+ <span> </span>
|
|
|
+ <span>存</span>
|
|
|
</el-button>
|
|
|
</div>
|
|
|
+
|
|
|
<div>
|
|
|
<el-button
|
|
|
type="info"
|
|
|
v-if="selectNode || selectLine"
|
|
|
- :class="styleStatus == true ? 'showStyle' : ''"
|
|
|
@click="deleteFlow"
|
|
|
>
|
|
|
- <span :class="styleStatus == true ? 'fontStyle' : ''"
|
|
|
- >删</span
|
|
|
- >
|
|
|
- <span :class="styleStatus == true ? 'fontStyle' : ''">
|
|
|
-
|
|
|
- </span>
|
|
|
- <span :class="styleStatus == true ? 'fontStyle' : ''"
|
|
|
- >除</span
|
|
|
- ></el-button
|
|
|
+ <span>删</span>
|
|
|
+ <span> </span>
|
|
|
+ <span>除</span></el-button
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -283,48 +250,53 @@ import { formOption } from "./bindConfig";
|
|
|
import { ElMessage } from "element-plus";
|
|
|
import { useScreenshot } from "./screenshot.ts";
|
|
|
import { useLayout } from "@/hooks/useLayout";
|
|
|
-import { initialEdges, initialNodes } from "./initial-elements";
|
|
|
import { useSnakeLayoutHook } from "@/hooks/vueflowHooks";
|
|
|
defineOptions({
|
|
|
name: "bindProcess/:id/:prodtCode",
|
|
|
});
|
|
|
const styleStatus = ref(false);
|
|
|
+
|
|
|
const changeStyle = () => {
|
|
|
styleStatus.value = !styleStatus.value;
|
|
|
};
|
|
|
-const addHistory = () => {
|
|
|
- historyList.value.push(JSON.parse(JSON.stringify(flowData)));
|
|
|
+const addHistory = (type) => {
|
|
|
+ historyList.value.unshift(JSON.parse(JSON.stringify(flowData)));
|
|
|
};
|
|
|
const resetHistory = () => {
|
|
|
historyList.value = [];
|
|
|
- historyList.value.push(JSON.parse(JSON.stringify(flowData)));
|
|
|
};
|
|
|
const nodesChange = (data) => {
|
|
|
- if (data.length > 0) {
|
|
|
- if (data[0].type == "add" || data.type == "remove") {
|
|
|
- addHistory();
|
|
|
- }
|
|
|
+ if (
|
|
|
+ data.length > 0 &&
|
|
|
+ data[0].type &&
|
|
|
+ (data[0].type === "add" || data[0].type === "remove")
|
|
|
+ ) {
|
|
|
+ addHistory();
|
|
|
}
|
|
|
};
|
|
|
const edgesChange = (data) => {
|
|
|
- if (data.length > 0) {
|
|
|
- if (data[0].type == "add" || data[0].type == "remove") {
|
|
|
- addHistory();
|
|
|
- }
|
|
|
+ if (
|
|
|
+ data.length > 0 &&
|
|
|
+ data[0].type &&
|
|
|
+ (data[0].type === "add" || data[0].type === "remove")
|
|
|
+ ) {
|
|
|
+ addHistory();
|
|
|
}
|
|
|
};
|
|
|
-const nodeDragStart = () => {};
|
|
|
+
|
|
|
+let dragStartFlowData = null;
|
|
|
+const nodeDragStart = () => {
|
|
|
+ dragStartFlowData = JSON.parse(JSON.stringify(flowData));
|
|
|
+};
|
|
|
const nodeDragStop = () => {
|
|
|
- setTimeout(() => {
|
|
|
- addHistory();
|
|
|
- }, 0);
|
|
|
+ historyList.value.unshift(JSON.parse(JSON.stringify(dragStartFlowData)));
|
|
|
};
|
|
|
|
|
|
const goBack = () => {
|
|
|
- if (historyList.value.length > 1) {
|
|
|
- flowData.nodes = historyList.value[historyList.value.length - 2].nodes;
|
|
|
- flowData.edges = historyList.value[historyList.value.length - 2].edges;
|
|
|
- historyList.value.pop();
|
|
|
+ let firstHistory = historyList.value.shift();
|
|
|
+ if (firstHistory) {
|
|
|
+ flowData.nodes = firstHistory.nodes;
|
|
|
+ flowData.edges = firstHistory.edges;
|
|
|
} else {
|
|
|
ElMessage.warning("已是初始线路");
|
|
|
}
|
|
@@ -333,16 +305,16 @@ const historyList = ref([]);
|
|
|
const { capture } = useScreenshot();
|
|
|
const { layout } = useLayout();
|
|
|
const instance = useVueFlow();
|
|
|
-const {
|
|
|
- onConnect,
|
|
|
- addEdges,
|
|
|
- vueFlowRef,
|
|
|
- onEdgeUpdateEnd,
|
|
|
- applyEdgeChanges,
|
|
|
- fitView,
|
|
|
-} = instance;
|
|
|
+const { addEdges, vueFlowRef, onEdgeUpdateEnd, applyEdgeChanges, fitView } =
|
|
|
+ instance;
|
|
|
const { onDragOver, onDrop, onDragLeave, isDragOver, onDragStart } =
|
|
|
useDragAndDrop();
|
|
|
+// onConnect(addEdges);
|
|
|
+const onConnectMethod = (edge) => {
|
|
|
+ edge.type = "custom";
|
|
|
+ addEdges(edge);
|
|
|
+};
|
|
|
+
|
|
|
const flowData = reactive({ edges: [], nodes: [] });
|
|
|
const flowDataCopy = ref({ edges: [], nodes: [] });
|
|
|
const currentProcess = ref({});
|
|
@@ -414,7 +386,7 @@ const handleKeydown = () => {
|
|
|
selectLine.value = null;
|
|
|
}
|
|
|
};
|
|
|
-onConnect(addEdges);
|
|
|
+
|
|
|
const getPng = () => {
|
|
|
if (!vueFlowRef.value) {
|
|
|
console.warn("VueFlow element not found");
|
|
@@ -516,6 +488,7 @@ const cancelFlow = () => {
|
|
|
resetHistory();
|
|
|
};
|
|
|
const deleteFlow = () => {
|
|
|
+ addHistory();
|
|
|
if (selectNode.value != null) {
|
|
|
flowData.nodes.forEach((item, index) => {
|
|
|
if (item.id == selectNode.value.id) {
|
|
@@ -533,7 +506,6 @@ const deleteFlow = () => {
|
|
|
selectNode.value = null;
|
|
|
selectLine.value = null;
|
|
|
ElMessage.success("删除成功");
|
|
|
- addHistory();
|
|
|
};
|
|
|
|
|
|
const saveInfo = async () => {
|
|
@@ -608,9 +580,8 @@ const loadProcessesFlow = async () => {
|
|
|
if (res.data.usable == 1) {
|
|
|
usableStatus.value = false;
|
|
|
}
|
|
|
- setTimeout(() => {
|
|
|
- resetHistory();
|
|
|
- }, 0);
|
|
|
+
|
|
|
+ resetHistory();
|
|
|
} else {
|
|
|
cancelStatus.value = false;
|
|
|
}
|
|
@@ -650,14 +621,14 @@ const getNameByDictType = (dictValue) => {
|
|
|
return str;
|
|
|
};
|
|
|
|
|
|
-watch(
|
|
|
- () => flowData.edges,
|
|
|
- () => {
|
|
|
- flowData.edges.forEach((item) => {
|
|
|
- item.type = "custom";
|
|
|
- });
|
|
|
- }
|
|
|
-);
|
|
|
+// watch(
|
|
|
+// () => flowData.edges,
|
|
|
+// () => {
|
|
|
+// flowData.edges.forEach((item) => {
|
|
|
+// item.type = "custom";
|
|
|
+// });
|
|
|
+// }
|
|
|
+// );
|
|
|
|
|
|
watch(
|
|
|
() => list1SearchGroupDictKey.value,
|
|
@@ -669,16 +640,16 @@ watch(
|
|
|
const { nodes } = toRefs(flowData); //ref(initialNodes);
|
|
|
const { edges } = toRefs(flowData); //ref(initialEdges);
|
|
|
async function layoutGraph(direction) {
|
|
|
+ addHistory();
|
|
|
nodes.value = layout(nodes.value, edges.value, direction);
|
|
|
nextTick(() => {
|
|
|
fitView();
|
|
|
- addHistory();
|
|
|
});
|
|
|
}
|
|
|
// 转换为蛇形布局
|
|
|
const convertToSnakeLayout = () => {
|
|
|
- nodes.value = useSnakeLayoutHook(nodes.value, edges.value);
|
|
|
addHistory();
|
|
|
+ nodes.value = useSnakeLayoutHook(nodes.value, edges.value);
|
|
|
};
|
|
|
</script>
|
|
|
|
|
@@ -704,6 +675,14 @@ const convertToSnakeLayout = () => {
|
|
|
width: 80px;
|
|
|
}
|
|
|
}
|
|
|
+.btnsChange {
|
|
|
+ margin: 10px 0;
|
|
|
+ div {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
.header {
|
|
|
height: 50px;
|
|
|
display: flex;
|