|
|
@ -8,14 +8,9 @@ |
|
|
|
<i class="ri-save-3-line"></i> 保存 |
|
|
|
</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> |
|
|
|
</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('其他模块')"> |
|
|
|
其他模块----敬请期待 |
|
|
|
<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 === item.module ?'#ebf5ff':'none'}" @click="changeBackGround(item.module)"> |
|
|
|
{{ item.text }} |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
@ -64,13 +59,14 @@ import { Selection } from '@antv/x6-plugin-selection' |
|
|
|
import { Clipboard } from '@antv/x6-plugin-clipboard' |
|
|
|
import { ref, nextTick, computed, watch, reactive, onMounted } from 'vue' |
|
|
|
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 |
|
|
|
const roleList = ref([]) |
|
|
|
const data = ref([]) |
|
|
|
const checked = ref('元数据') |
|
|
|
const checked = ref('metaDataInfo') |
|
|
|
const ports = ref({ |
|
|
|
groups: { |
|
|
|
top: { |
|
|
@ -230,7 +226,7 @@ function register(){ |
|
|
|
inherit: 'edge', |
|
|
|
attrs: { |
|
|
|
line: { |
|
|
|
stroke: '#A2B1C3', |
|
|
|
stroke: '#C71E1EFF', |
|
|
|
strokeWidth: 2, |
|
|
|
}, |
|
|
|
}, |
|
|
@ -239,14 +235,19 @@ function register(){ |
|
|
|
) |
|
|
|
} |
|
|
|
function changeBackGround(module){ |
|
|
|
if (module === '元数据信息'){ |
|
|
|
checked.value = '元数据' |
|
|
|
} |
|
|
|
if (module === '其他模块'){ |
|
|
|
checked.value = '其他模块' |
|
|
|
} |
|
|
|
getflowList(checked.value).then(res=>{ |
|
|
|
|
|
|
|
checked.value = module |
|
|
|
searchFlowData() |
|
|
|
} |
|
|
|
function searchFlowData(){ |
|
|
|
getFlowConfList(checked.value).then(res=>{ |
|
|
|
let resData = res.data |
|
|
|
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(){ |
|
|
@ -258,7 +259,6 @@ function showAddDialog(){ |
|
|
|
function save(){ |
|
|
|
let json = graph.toJSON() |
|
|
|
let array = json.cells; |
|
|
|
console.log(array) |
|
|
|
let flows = [] |
|
|
|
if (array.length>0){ |
|
|
|
for (let i = 0; i < array.length; i++) { |
|
|
@ -268,6 +268,7 @@ function save(){ |
|
|
|
id: cell.id, |
|
|
|
code: cell.code, |
|
|
|
text: cell.attrs.text.text, |
|
|
|
module: checked.value, |
|
|
|
type: cell.type, |
|
|
|
x: cell.position.x, |
|
|
|
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(){ |
|
|
|
let array = [] |
|
|
@ -302,6 +332,7 @@ function loadGraphData(){ |
|
|
|
code: item.code, |
|
|
|
attrs: {text:{text: item.text}}, |
|
|
|
position:{x:item.x,y:item.y}, |
|
|
|
type: item.type, |
|
|
|
width: 100, |
|
|
|
height: 60, |
|
|
|
shape: "activity" |
|
|
@ -333,16 +364,8 @@ onMounted(re=>{ |
|
|
|
grid:true, |
|
|
|
autoResize: true, |
|
|
|
connecting: { |
|
|
|
router: 'orth', |
|
|
|
router: 'manhattan' |
|
|
|
}, |
|
|
|
createEdge() { |
|
|
|
return new Shape.Edge({ |
|
|
|
"id": uuid(), |
|
|
|
"shape": "bpmn-edge", |
|
|
|
"source": "7", |
|
|
|
"target": "13" |
|
|
|
}); |
|
|
|
} |
|
|
|
}) |
|
|
|
graph.use(new Keyboard()) |
|
|
|
.use( |
|
|
@ -375,7 +398,7 @@ onMounted(re=>{ |
|
|
|
const ports = container.querySelectorAll('.x6-port-body',) |
|
|
|
showPorts(ports, false) |
|
|
|
}) |
|
|
|
loadGraphData() |
|
|
|
searchFlowData() |
|
|
|
}) |
|
|
|
|
|
|
|
</script> |
|
|
|