缓存问题解决，回显bug解决

src/router/index.js

@@ -71,7 +71,7 @@ export const constantRoutes = [
       {
         path: '/platform_manage/process/processApproval',
         component: () => import('@/views/process/processApproval/index.vue'),
-        name: 'processApproval',
+        name: 'ProcessApproval',
         meta: { title: '流程审批', icon: 'dashboard', affix: true }
       }
     ]

src/views/process/processApproval/auxiliary.vue

@@ -1,98 +1,127 @@
 <template>
-    <div class="auxiliary">
-        <ul>
-            <li>
-                <div class="list-box">
-                    <div class="label">货币类型：</div>
-                    <div class="value">产品123asdasd1231啊实打实大苏打阿三大熬是的</div>
-                </div>
-                <div class="list-box">
-                    <div class="label">货币类型：</div>
-                    <div class="value">产品</div>
-                </div>
-                <div class="list-box">
-                    <div class="label">货币类型：</div>
-                    <div class="value">产品</div>
-                </div>
-                <div class="list-box">
-                    <div class="label">货币类型：</div>
-                    <div class="value">产品</div>
-                </div>
-            </li>
-            <li>
-                <div class="list-box">
-                    <div class="label">货币类型：</div>
-                    <div class="value">产品123asdasd1231啊实打实大苏打阿三大熬是的</div>
-                </div>
-                <div class="list-box">
-                    <div class="label">货币类型：</div>
-                    <div class="value">产品</div>
-                </div>
-                <div class="list-box">
-                    <div class="label">货币类型：</div>
-                    <div class="value">产品</div>
-                </div>
-                <div class="list-box">
-                    <div class="label">货币类型：</div>
-                    <div class="value">产品</div>
-                </div>
-            </li>
-            <li>
-                <div class="list-box">
-                    <div class="label">货币类型：</div>
-                    <div class="value">产品123asdasd1231啊实打实大苏打阿三大熬是的</div>
-                </div>
-                <div class="list-box">
-                    <div class="label">货币类型：</div>
-                    <div class="value">产品</div>
-                </div>
-                <div class="list-box">
-                    <div class="label">货币类型：</div>
-                    <div class="value">产品</div>
-                </div>
-                <div class="list-box">
-                    <div class="label">货币类型：</div>
-                    <div class="value">产品</div>
-                </div>
-            </li>
-        </ul>
-    </div>
+	<div class="auxiliary">
+		<el-collapse>
+			<el-collapse-item title="一致性 Consistency" name="1">
+			</el-collapse-item>
+			<el-collapse-item title="反馈 Feedback" name="2">
+				<ul>
+					<li>
+						<div class="list-box">
+							<div class="label">货币类型：</div>
+							<div class="value">
+								产品123asdasd1231啊实打实大苏打阿三大熬是的
+							</div>
+						</div>
+						<div class="list-box">
+							<div class="label">货币类型：</div>
+							<div class="value">产品</div>
+						</div>
+						<div class="list-box">
+							<div class="label">货币类型：</div>
+							<div class="value">产品</div>
+						</div>
+						<div class="list-box">
+							<div class="label">货币类型：</div>
+							<div class="value">产品</div>
+						</div>
+					</li>
+					<li>
+						<div class="list-box">
+							<div class="label">货币类型：</div>
+							<div class="value">
+								产品123asdasd1231啊实打实大苏打阿三大熬是的
+							</div>
+						</div>
+						<div class="list-box">
+							<div class="label">货币类型：</div>
+							<div class="value">产品</div>
+						</div>
+						<div class="list-box">
+							<div class="label">货币类型：</div>
+							<div class="value">产品</div>
+						</div>
+						<div class="list-box">
+							<div class="label">货币类型：</div>
+							<div class="value">产品</div>
+						</div>
+					</li>
+					<li>
+						<div class="list-box">
+							<div class="label">货币类型：</div>
+							<div class="value">
+								产品123asdasd1231啊实打实大苏打阿三大熬是的
+							</div>
+						</div>
+						<div class="list-box">
+							<div class="label">货币类型：</div>
+							<div class="value">产品</div>
+						</div>
+						<div class="list-box">
+							<div class="label">货币类型：</div>
+							<div class="value">产品</div>
+						</div>
+						<div class="list-box">
+							<div class="label">货币类型：</div>
+							<div class="value">产品</div>
+						</div>
+					</li>
+				</ul>
+			</el-collapse-item>
+			<el-collapse-item title="效率 Efficiency" name="3">
+				<div>简化流程：设计简洁直观的操作流程；</div>
+				<div>
+					清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
+				</div>
+				<div>
+					帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
+				</div>
+			</el-collapse-item>
+			<el-collapse-item title="可控 Controllability" name="4">
+				<div>
+					用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
+				</div>
+				<div>
+					结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
+				</div>
+			</el-collapse-item>
+		</el-collapse>
+	</div>
 </template>
 
 <style lang="scss">
-    .auxiliary{
-        ul{
-            padding: 0;
-            margin: 0;
-            li{
-                list-style:none;
-                padding: 15px 15px;
-                background: #f1f1f1;
-                overflow: hidden;
-                margin-bottom: 10px;
-                .list-box{
-                    float: left;
-                    width: 50%;
-                    padding:0 5px;
-                    box-sizing: border-box;
-                    .label{
-                        width: 70px;
-                        text-align: right;
-                        color: #666;
-                        font-size: 14px;
-                        float: left;
-                        line-height: 30px;
-                    }
-                    .value{
-                        flex: 1;
-                        float: left;
-                        font-size: 14px;
-                        line-height: 30px;
-                        color: #333;
-                        width: calc(100% - 70px);
-                    }
-                }
-            }
-        }
-    }
+.auxiliary {
+	ul {
+		padding: 0;
+		margin: 0;
+		li {
+			list-style: none;
+			padding: 15px 15px;
+			background: #f1f1f1;
+			overflow: hidden;
+			margin-bottom: 10px;
+			.list-box {
+				float: left;
+				width: 50%;
+				padding: 0 5px;
+				box-sizing: border-box;
+				.label {
+					width: 70px;
+					text-align: right;
+					color: #666;
+					font-size: 14px;
+					float: left;
+					line-height: 30px;
+				}
+				.value {
+					flex: 1;
+					float: left;
+					font-size: 14px;
+					line-height: 30px;
+					color: #333;
+					width: calc(100% - 70px);
+				}
+			}
+		}
+	}
+}
 </style>

src/views/process/processConfig/handleBtn.vue

@@ -18,6 +18,7 @@
     node.on('change:data', ({current}) => {
         title.value = current.title
     })
+    
 
 </script>
 <style lang="scss">

src/views/process/processConfig/vueFlow.vue

@@ -270,6 +270,7 @@ const submitAll = () => {
 	submitFormData.titleTemplate = proxy.title
 	const nodeList = graph.toJSON().cells
 	submitFormData.nodeObject = JSON.stringify(nodeList)
+	submitFormData.lineObject = JSON.stringify(flowDefinitionNodeObj.value)
 	const isStart = false
 	for (let i = 0; i < nodeList.length; i++) {
 		const element = nodeList[i]
@@ -475,7 +476,7 @@ const pushRoom = (port: any) => {
 }
 //用于存储流程定义节点数据
 
-const antvInit = () => {
+const antvInit = (data) => {
 	graph = new Graph({
 		height: 600,
 		container: document.getElementById('graph-container')!,
@@ -618,6 +619,7 @@ const antvInit = () => {
 	})
 	// #endregion
 	graph.on('cell:click', ({ e, x, y, cell, view }) => {
+		console.log(cell)
 		if (cell.shape === 'start-btn') return
 		if(cell.shape === 'end-btn' || cell.shape === 'edge') {
 			ElMessageBox.confirm("是否删除", "提示", {
@@ -814,34 +816,69 @@ const antvInit = () => {
 	// 	x: 500,
 	// 	y: 100,
 	// })
+	if(data) {
+		graph.fromJSON(
+			data
+		)
+		console.log(graph,123123)
+	}else{
+		graph.addNode({
+			shape: 'start-btn',
+			x: 500,
+			y: 20,
+			label: '开始',
+			id:1,
+			attrs: {
+				
+			},
+		})
+	}
 	
-	graph.addNode({
-		shape: 'start-btn',
-		x: 500,
-		y: 20,
-		label: '开始',
-		id:1,
-		attrs: {
-			
-		},
-	})
 	
 }
 const getFlowInfo =	(()=>{
 	proxy.post('/flowDefinition/getDetails', {id:submitFormData.id}).then((res) => {
+		res.nodeObject = JSON.parse(res.nodeObject)
+		antvInit(res.nodeObject)
+		// console.log(graph.toJSON().cells)
+		// console.log(JSON.parse(res.lineObject))
+		// setTimeout(() => {
+		// 	for (const key in JSON.parse(res.lineObject)) {
+		// 		if(JSON.parse(res.lineObject)[key].cell) {
+		// 			console.log(JSON.parse(res.lineObject)[key].cell.setData)
+		// 		}
+				
+		// 		// JSON.parse(res.lineObject)[key].cell.setData({
+		// 		// 	title:"12312312"
+		// 		// })
+		// 	}
+		// }, 2000);
+		// for (let i = 0; i < res.flowDefinitionId.length; i++) {
+		// 	const element = res.flowDefinitionId[i];
+		// 	flowDefinitionNodeObj.value[element.id] = element
+		// 	formData.data.cell.setData({
+		// 		title: formData.data.nodeName,
+		// 	});
+		// }
+		
+		
+		dialogVisible.value = false
 		
 	})
 })
 const router = useRouter()
 onActivated(() => {
+	
+	
 })
 onDeactivated(() => {
-
-	//清空minimap子元素
-	window.document.getElementById('minimap').innerHTML = ''
+	console.log(window.document.getElementById('minimap').children)
+	if(window.document.getElementById('minimap').children.length > 1) {
+		window.document.getElementById('minimap').children[0].remove()
+	}
 })
 onMounted(() => {
-	antvInit()
+	
 	//获取url router参数
 	submitFormData.flowInfoId = router.currentRoute.value.query.flowInfoId 
 	submitFormData.id = router.currentRoute.value.query.id
@@ -849,6 +886,11 @@ onMounted(() => {
 	if(submitFormData.flowInfoId) {
 		getFlowInfo()
 	}
+	setTimeout(() => {
+		if(window.document.getElementById('minimap').children.length > 1) {
+			window.document.getElementById('minimap').children[0].remove()
+		}
+	}, 500);
 })
 </script>
 <style lang="scss">