| 
						
						
							
								
							
						
						
					 | 
					@ -8,14 +8,9 @@ | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					            <i class="ri-save-3-line"></i> 保存 | 
					 | 
					 | 
					            <i class="ri-save-3-line"></i> 保存 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					          </el-button> | 
					 | 
					 | 
					          </el-button> | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					        </div> | 
					 | 
					 | 
					        </div> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					        <div style="text-align: center;margin-top: 10px;" > | 
					 | 
					 | 
					        <div v-for="item in moduleList" style="text-align: center;margin-top: 10px;" > | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					          <el-button class="moduleButton" style="width: 50%;height: 100px;" :style="{background: checked ==='元数据'?'#ebf5ff':'none'}" @click="changeBackGround('元数据信息')"> | 
					 | 
					 | 
					          <el-button class="moduleButton" style="width: 50%;height: 100px;" :style="{background: checked === item.module ?'#ebf5ff':'none'}" @click="changeBackGround(item.module)"> | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					            元数据信息模块 | 
					 | 
					 | 
					            {{ item.text }} | 
				
			
			
				
				
			
		
	
		
		
			
				
					 | 
					 | 
					          </el-button> | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					        </div> | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					        <div style="text-align: center;margin-top: 10px"> | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					          <el-button class="moduleButton"  style="width: 50%;height: 100px"  :style="{background: checked ==='其他模块'?'#ebf5ff':'none'}"  @click="changeBackGround('其他模块')"> | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					            其他模块----敬请期待 | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
	
		
		
	
		
		
	
		
		
			
				
					 | 
					 | 
					          </el-button> | 
					 | 
					 | 
					          </el-button> | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					        </div> | 
					 | 
					 | 
					        </div> | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					      </el-col> | 
					 | 
					 | 
					      </el-col> | 
				
			
			
		
	
	
		
		
			
				
					| 
						
							
								
							
						
						
							
								
							
						
						
					 | 
					@ -64,13 +59,14 @@ import { Selection } from '@antv/x6-plugin-selection' | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					import { Clipboard } from '@antv/x6-plugin-clipboard' | 
					 | 
					 | 
					import { Clipboard } from '@antv/x6-plugin-clipboard' | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					import { ref, nextTick, computed, watch, reactive, onMounted } from 'vue' | 
					 | 
					 | 
					import { ref, nextTick, computed, watch, reactive, onMounted } from 'vue' | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					import { listRole } from "@/api/system/role"; | 
					 | 
					 | 
					import { listRole } from "@/api/system/role"; | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					import {getflowList } from "@/api/flow/flow"; | 
					 | 
					 | 
					import {getFlowConfList,saveFlowConfig } from "@/api/flow/flow"; | 
				
			
			
				
				
			
		
	
		
		
			
				
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
	
		
		
			
				
					 | 
					 | 
					
 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					const { proxy } = getCurrentInstance(); | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					const moduleList = ref([{'module':'metaDataInfo','text':'元数据'},{'module':'other','text':'其他模块(敬请期待)'}]) | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					let graph = null | 
					 | 
					 | 
					let graph = null | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					const roleList = ref([]) | 
					 | 
					 | 
					const roleList = ref([]) | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					const data = ref([]) | 
					 | 
					 | 
					const data = ref([]) | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					const checked = ref('元数据') | 
					 | 
					 | 
					const checked = ref('metaDataInfo') | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					 | 
					 | 
					const ports = ref({ | 
					 | 
					 | 
					const ports = ref({ | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  groups: { | 
					 | 
					 | 
					  groups: { | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					    top: { | 
					 | 
					 | 
					    top: { | 
				
			
			
		
	
	
		
		
			
				
					| 
						
							
								
							
						
						
							
								
							
						
						
					 | 
					@ -230,7 +226,7 @@ function register(){ | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					        inherit: 'edge', | 
					 | 
					 | 
					        inherit: 'edge', | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					        attrs: { | 
					 | 
					 | 
					        attrs: { | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					          line: { | 
					 | 
					 | 
					          line: { | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					            stroke: '#A2B1C3', | 
					 | 
					 | 
					            stroke: '#C71E1EFF', | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					 | 
					 | 
					            strokeWidth: 2, | 
					 | 
					 | 
					            strokeWidth: 2, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					          }, | 
					 | 
					 | 
					          }, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					        }, | 
					 | 
					 | 
					        }, | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
					@ -239,14 +235,19 @@ function register(){ | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  ) | 
					 | 
					 | 
					  ) | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					} | 
					 | 
					 | 
					} | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					function changeBackGround(module){ | 
					 | 
					 | 
					function changeBackGround(module){ | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					  if (module === '元数据信息'){ | 
					 | 
					 | 
					  checked.value = module | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					    checked.value = '元数据' | 
					 | 
					 | 
					  searchFlowData() | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					  } | 
					 | 
					 | 
					} | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					  if (module === '其他模块'){ | 
					 | 
					 | 
					function searchFlowData(){ | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					    checked.value = '其他模块' | 
					 | 
					 | 
					  getFlowConfList(checked.value).then(res=>{ | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					  } | 
					 | 
					 | 
					    let resData = res.data | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					  getflowList(checked.value).then(res=>{ | 
					 | 
					 | 
					    if (resData.length > 0){ | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					
 | 
					 | 
					 | 
					      for (let i = 0; i < resData.length; i++) { | 
				
			
			
				
				
			
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					        resData[i].parent = JSON.parse(resData[i].parent) | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					      } | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					    } | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					    data.value = resData | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					    loadGraphData() | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  }) | 
					 | 
					 | 
					  }) | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					} | 
					 | 
					 | 
					} | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					function showAddDialog(){ | 
					 | 
					 | 
					function showAddDialog(){ | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
					@ -258,7 +259,6 @@ function showAddDialog(){ | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					function save(){ | 
					 | 
					 | 
					function save(){ | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  let json = graph.toJSON() | 
					 | 
					 | 
					  let json = graph.toJSON() | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  let array = json.cells; | 
					 | 
					 | 
					  let array = json.cells; | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  console.log(array) | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  let flows = [] | 
					 | 
					 | 
					  let flows = [] | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  if (array.length>0){ | 
					 | 
					 | 
					  if (array.length>0){ | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					    for (let i = 0; i < array.length; i++) { | 
					 | 
					 | 
					    for (let i = 0; i < array.length; i++) { | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
					@ -268,6 +268,7 @@ function save(){ | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					          id: cell.id, | 
					 | 
					 | 
					          id: cell.id, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					          code: cell.code, | 
					 | 
					 | 
					          code: cell.code, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					          text: cell.attrs.text.text, | 
					 | 
					 | 
					          text: cell.attrs.text.text, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					          module: checked.value, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					          type: cell.type, | 
					 | 
					 | 
					          type: cell.type, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					          x: cell.position.x, | 
					 | 
					 | 
					          x: cell.position.x, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					          y: cell.position.y, | 
					 | 
					 | 
					          y: cell.position.y, | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
					@ -292,7 +293,36 @@ function save(){ | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					      } | 
					 | 
					 | 
					      } | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					    } | 
					 | 
					 | 
					    } | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  } | 
					 | 
					 | 
					  } | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					  console.log(flows) | 
					 | 
					 | 
					  if (flows.length>0){ | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					    for (let i = 0; i < flows.length; i++) { | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					      flows[i].step = getNodeStep(flows[i],flows) | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					    } | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					    for (let i = 0; i < flows.length; i++) { | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					      flows[i].parent = JSON.stringify(flows[i].parent) | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					    } | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					    let saveData = { | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					      module: checked.value, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					      confList: flows | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					    } | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					    saveFlowConfig(saveData).then(res=>{ | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					      proxy.$modal.msgSuccess("操作成功"); | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					    }) | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					  } | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					} | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					function getNodeStep(node,array){ | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					  if(node.parent.length === 0){ | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					    return 1; | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					  }else { | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					    let step = 0; | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					    node.parent.forEach(parentId=>{ | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					      let parentNode = array.find(item => item.id === parentId) | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					      let parentStep = getNodeStep(parentNode,array) | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					      if (step < (parentStep +1)){ | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					        step = parentStep + 1; | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					      } | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					    }) | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					    return step | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					  } | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					} | 
					 | 
					 | 
					} | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					function loadGraphData(){ | 
					 | 
					 | 
					function loadGraphData(){ | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  let array = [] | 
					 | 
					 | 
					  let array = [] | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
					@ -302,6 +332,7 @@ function loadGraphData(){ | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					      code: item.code, | 
					 | 
					 | 
					      code: item.code, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					      attrs: {text:{text: item.text}}, | 
					 | 
					 | 
					      attrs: {text:{text: item.text}}, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					      position:{x:item.x,y:item.y}, | 
					 | 
					 | 
					      position:{x:item.x,y:item.y}, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					      type: item.type, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					      width: 100, | 
					 | 
					 | 
					      width: 100, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					      height: 60, | 
					 | 
					 | 
					      height: 60, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					      shape: "activity" | 
					 | 
					 | 
					      shape: "activity" | 
				
			
			
		
	
	
		
		
			
				
					| 
						
							
								
							
						
						
							
								
							
						
						
					 | 
					@ -333,16 +364,8 @@ onMounted(re=>{ | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					    grid:true, | 
					 | 
					 | 
					    grid:true, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					    autoResize: true, | 
					 | 
					 | 
					    autoResize: true, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					    connecting: { | 
					 | 
					 | 
					    connecting: { | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					      router: 'orth', | 
					 | 
					 | 
					      router: 'manhattan' | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					 | 
					 | 
					    }, | 
					 | 
					 | 
					    }, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					    createEdge() { | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					      return new Shape.Edge({ | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					        "id": uuid(), | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					        "shape": "bpmn-edge", | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					        "source": "7", | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					        "target": "13" | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					      }); | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					    } | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  }) | 
					 | 
					 | 
					  }) | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  graph.use(new Keyboard()) | 
					 | 
					 | 
					  graph.use(new Keyboard()) | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					       .use( | 
					 | 
					 | 
					       .use( | 
				
			
			
		
	
	
		
		
			
				
					| 
						
							
								
							
						
						
							
								
							
						
						
					 | 
					@ -375,7 +398,7 @@ onMounted(re=>{ | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					    const ports = container.querySelectorAll('.x6-port-body',) | 
					 | 
					 | 
					    const ports = container.querySelectorAll('.x6-port-body',) | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					    showPorts(ports, false) | 
					 | 
					 | 
					    showPorts(ports, false) | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  }) | 
					 | 
					 | 
					  }) | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					  loadGraphData() | 
					 | 
					 | 
					  searchFlowData() | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					 | 
					 | 
					}) | 
					 | 
					 | 
					}) | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					
 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					</script> | 
					 | 
					 | 
					</script> | 
				
			
			
		
	
	
		
		
			
				
					| 
						
							
								
							
						
						
						
					 | 
					
  |