|
|
@@ -22,19 +22,11 @@ |
|
|
|
<el-button type="primary" plain class="btn-create" icon="el-icon-plus" @click="handleAdd"> |
|
|
|
新建工序 |
|
|
|
</el-button> |
|
|
|
<!-- <el-button class="btn-serialize" @click="handleToJson">序列化</el-button> |
|
|
|
<el-button class="btn-antiserialize" @click="handleLoadJson"> |
|
|
|
反序列化 |
|
|
|
</el-button> --> |
|
|
|
<el-button class="btn-edit" :disabled="currentDet == null" @click="handleEdit">编辑</el-button> |
|
|
|
<!-- <el-button type="danger" plain :disabled="currentDet == null" class="btn-delete" @click="handleDelete"> |
|
|
|
删除 |
|
|
|
</el-button> --> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="process-graph__panel" ref="panel"></div> |
|
|
|
|
|
|
|
<!-- 对话框(添加 / 修改) --> |
|
|
|
<base-dialog :dialogTitle="title" :dialogVisible="open" width="35%" @close="cancel" @cancel="cancel" |
|
|
|
@confirm="submitForm"> |
|
|
|
<DialogForm v-if="open" ref="form" v-model="form" :rows="rows" /> |
|
|
@@ -44,7 +36,7 @@ |
|
|
|
|
|
|
|
<script> |
|
|
|
import { Graph } from '@antv/x6'; |
|
|
|
import ProcessNode, { createProcessNode, CACHE_NAME } from './ProcessNode'; |
|
|
|
import ProcessNode, { createProcessNode, CACHE_NAME, getSectionFrom } from './ProcessNode'; |
|
|
|
import DialogForm from '@/components/DialogForm'; |
|
|
|
// import { IdToName } from '@/utils' |
|
|
|
|
|
|
@@ -98,8 +90,9 @@ export default { |
|
|
|
}, |
|
|
|
], |
|
|
|
], |
|
|
|
updateUrl: '/extend/process-flow-view/update', |
|
|
|
addUrl: '/extend/process-flow-view/create', |
|
|
|
updateUrl: '/extend/process-flow-det/update', |
|
|
|
deleteUrl: '/extend/process-flow-det/delete', |
|
|
|
addUrl: '/extend/process-flow-det/create', |
|
|
|
// pageUrl: '/extend/process-flow-det/get', |
|
|
|
infoUrl: '/extend/process-flow-view/getByFlowId', |
|
|
|
layout: { |
|
|
@@ -109,6 +102,7 @@ export default { |
|
|
|
createTime: null |
|
|
|
}, |
|
|
|
currentDet: null, |
|
|
|
currentNode: null |
|
|
|
|
|
|
|
}; |
|
|
|
}, |
|
|
@@ -130,177 +124,6 @@ export default { |
|
|
|
this.loadLayout().then(json => { |
|
|
|
this.initGraph(json) |
|
|
|
}) |
|
|
|
|
|
|
|
// const pn1 = graph.addNode({ |
|
|
|
// shape: 'process-node', |
|
|
|
// x: 30, |
|
|
|
// y: 30, |
|
|
|
// processName: '工序00A', |
|
|
|
// workshopName: '工段1', |
|
|
|
// processDesc: 'test test test', |
|
|
|
// processId: '1', |
|
|
|
// tools: [{ name: 'button-remove' }], |
|
|
|
// }); |
|
|
|
// const pn2 = graph.addNode({ |
|
|
|
// shape: 'process-node', |
|
|
|
// x: 240, |
|
|
|
// y: 30, |
|
|
|
// processName: '工序00B', |
|
|
|
// workshopName: '工段1', |
|
|
|
// processDesc: 'test test test', |
|
|
|
// processId: '1', |
|
|
|
// }); |
|
|
|
|
|
|
|
// const pn3 = graph.addNode({ |
|
|
|
// shape: 'process-node', |
|
|
|
// x: 360, |
|
|
|
// y: 30, |
|
|
|
// processName: '工序00C', |
|
|
|
// workshopName: '工段1', |
|
|
|
// processDesc: 'test test test', |
|
|
|
// processId: '1', |
|
|
|
// }); |
|
|
|
|
|
|
|
// const pn4 = graph.addNode({ |
|
|
|
// shape: 'process-node', |
|
|
|
// x: 360, |
|
|
|
// y: 120, |
|
|
|
// processName: '工序00D', |
|
|
|
// workshopName: '工段1', |
|
|
|
// processDesc: 'test test test', |
|
|
|
// processId: '1', |
|
|
|
// }); |
|
|
|
|
|
|
|
// const pn5 = graph.addNode({ |
|
|
|
// shape: 'process-node', |
|
|
|
// x: 500, |
|
|
|
// y: 30, |
|
|
|
// processName: '工序00E', |
|
|
|
// workshopName: '工段1', |
|
|
|
// processDesc: 'test test test', |
|
|
|
// processId: '1', |
|
|
|
// }); |
|
|
|
|
|
|
|
// graph.addEdge({ |
|
|
|
// source: pn1, |
|
|
|
// target: pn2, |
|
|
|
// router: { |
|
|
|
// name: 'er', |
|
|
|
// }, |
|
|
|
// attrs: { |
|
|
|
// line: { |
|
|
|
// stroke: '#0b58ff', |
|
|
|
// strokeWidth: 1, |
|
|
|
// targetMarker: { |
|
|
|
// // name: 'classic', |
|
|
|
// // name: 'async', |
|
|
|
// size: 0, |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
// }); |
|
|
|
// graph.addEdge({ |
|
|
|
// source: pn2, |
|
|
|
// target: pn3, |
|
|
|
// router: { |
|
|
|
// name: 'er', |
|
|
|
// }, |
|
|
|
// attrs: { |
|
|
|
// line: { |
|
|
|
// stroke: '#0b58ff', |
|
|
|
// strokeWidth: 1, |
|
|
|
// targetMarker: { |
|
|
|
// // name: 'classic', |
|
|
|
// // name: 'async', |
|
|
|
// size: 0, |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
// }); |
|
|
|
// graph.addEdge({ |
|
|
|
// source: pn2, |
|
|
|
// target: pn4, |
|
|
|
// router: { |
|
|
|
// name: 'er', |
|
|
|
// }, |
|
|
|
// attrs: { |
|
|
|
// line: { |
|
|
|
// stroke: '#0b58ff', |
|
|
|
// strokeWidth: 1, |
|
|
|
// targetMarker: { |
|
|
|
// // name: 'classic', |
|
|
|
// // name: 'async', |
|
|
|
// size: 0, |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
// }); |
|
|
|
// graph.addEdge({ |
|
|
|
// source: pn3, |
|
|
|
// target: pn5, |
|
|
|
// router: { |
|
|
|
// name: 'er', |
|
|
|
// }, |
|
|
|
// attrs: { |
|
|
|
// line: { |
|
|
|
// stroke: '#0b58ff', |
|
|
|
// strokeWidth: 1, |
|
|
|
// targetMarker: { |
|
|
|
// // name: 'classic', |
|
|
|
// // name: 'async', |
|
|
|
// size: 0, |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
// }); |
|
|
|
// graph.addEdge({ |
|
|
|
// source: pn4, |
|
|
|
// target: pn5, |
|
|
|
// router: { |
|
|
|
// name: 'er', |
|
|
|
// }, |
|
|
|
// attrs: { |
|
|
|
// line: { |
|
|
|
// stroke: '#0b58ff', |
|
|
|
// strokeWidth: 1, |
|
|
|
// targetMarker: { |
|
|
|
// // name: 'classic', |
|
|
|
// // name: 'async', |
|
|
|
// size: 0, |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
// }); |
|
|
|
|
|
|
|
// const pn1 = graph.addNode({ |
|
|
|
// shape: 'process-node', |
|
|
|
// x: 0, |
|
|
|
// y: 0, |
|
|
|
// detName: '测试工序', // 工序名称 |
|
|
|
// sectionName: 'default', // 工段 |
|
|
|
// detDesc: 'loremakdfkd...', // 工序说明 |
|
|
|
// processId: 'p-1', // 工艺ID |
|
|
|
// detId: 'det-id-1', // 工序ID |
|
|
|
// tools: [{ name: 'button-remove' }], |
|
|
|
// }); |
|
|
|
|
|
|
|
// const htmlNode = graph.addNode({ |
|
|
|
// x: 0, |
|
|
|
// y: 0, |
|
|
|
// width: 200, |
|
|
|
// height: 100, |
|
|
|
// shape: 'html', |
|
|
|
// html() { |
|
|
|
// const ctn = document.createElement('div'); |
|
|
|
// ctn.style.width = '100%'; |
|
|
|
// ctn.style.height = '100%'; |
|
|
|
// ctn.style.border = '1px solid #ccc'; |
|
|
|
// ctn.style.background = '#fff'; |
|
|
|
// ctn.innerText = 'hello'; |
|
|
|
|
|
|
|
// return ctn; |
|
|
|
// }, |
|
|
|
// }); |
|
|
|
}, |
|
|
|
deactivated() { |
|
|
|
this.graph.dispose(); |
|
|
@@ -331,11 +154,14 @@ export default { |
|
|
|
allowPort: true, |
|
|
|
allowEdge: false, |
|
|
|
}, |
|
|
|
scroller: { |
|
|
|
enabled: true, |
|
|
|
pannable: true, |
|
|
|
cursor: 'grab' |
|
|
|
}, |
|
|
|
panning: true, |
|
|
|
// scroller: { |
|
|
|
// enabled: true, |
|
|
|
// pannable: true, |
|
|
|
// cursor: '', |
|
|
|
// width: 800, |
|
|
|
// height: 200 |
|
|
|
// }, |
|
|
|
mousewheel: { |
|
|
|
enabled: true, |
|
|
|
modifiers: ['ctrl', 'meta'] |
|
|
@@ -354,6 +180,8 @@ export default { |
|
|
|
const nodes = this.graph.getNodes(); |
|
|
|
const edges = this.graph.getEdges(); |
|
|
|
this.currentDet = null; |
|
|
|
this.currentNode = null; |
|
|
|
|
|
|
|
nodes.forEach(node => { |
|
|
|
node.attr('container/stroke', '#ccc'); |
|
|
|
}); |
|
|
@@ -365,13 +193,15 @@ export default { |
|
|
|
this.graph.on('node:click', ({ e, x, y, node, view }) => { |
|
|
|
reset(); |
|
|
|
node.attr('container/stroke', '#0b58ff'); |
|
|
|
const { detId, detName, detDesc, processId, sectionName } = node.attrs; |
|
|
|
const { detId, detName, detDesc, processId, sectionId, sectionName } = node.attrs; |
|
|
|
this.currentDet = {} |
|
|
|
this.$set(this.currentDet, 'detId', detId.text) |
|
|
|
this.$set(this.currentDet, 'sectionId', sectionId.text) |
|
|
|
this.$set(this.currentDet, 'detName', detName.text) |
|
|
|
this.$set(this.currentDet, 'detDesc', detDesc.text) |
|
|
|
this.$set(this.currentDet, 'flowId', processId.text) |
|
|
|
this.$set(this.currentDet, 'sectionName', sectionName.text) |
|
|
|
this.currentNode = node |
|
|
|
}); |
|
|
|
this.graph.on('edge:click', ({ e, x, y, edge, view }) => { |
|
|
|
// console.log('edge clicked!', edge) |
|
|
@@ -451,10 +281,10 @@ export default { |
|
|
|
console.table([this.layout, this.$route.params.id]) |
|
|
|
// 手动刷新布局 |
|
|
|
if (this.layout.id) { |
|
|
|
({ code, data } = await this.put(this.layout)); |
|
|
|
({ code, data } = await this.http('/extend/process-flow-view/update', 'put', this.layout)); |
|
|
|
} else { |
|
|
|
this.layout.flowId = this.$route.params.id; |
|
|
|
({ code, data } = await this.post(this.layout)); |
|
|
|
({ code, data } = await this.http('/extend/process-flow-view/create', 'post', this.layout)); |
|
|
|
} |
|
|
|
|
|
|
|
if (code == 0) { |
|
|
@@ -484,11 +314,24 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
handleEdit() { |
|
|
|
this.open = true; |
|
|
|
this.form.name = this.currentDet.detName; |
|
|
|
this.form.sectionId = this.currentDet.sectionId; |
|
|
|
this.form.remark = this.currentDet.detDesc; |
|
|
|
this.form.id = this.currentDet.detId; |
|
|
|
this.title = '编辑工序'; |
|
|
|
this.$nextTick(() => { |
|
|
|
this.open = true; |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
handleDelete(id) { }, |
|
|
|
async handleDelete(id) { |
|
|
|
const { code, data } = await this.delete({ id }); |
|
|
|
if (code == 0) { |
|
|
|
this.$msgSuccess('成功删除一个工序!'); |
|
|
|
return true; |
|
|
|
} |
|
|
|
return false; |
|
|
|
}, |
|
|
|
|
|
|
|
/** 提交按钮 */ |
|
|
|
submitForm() { |
|
|
@@ -498,37 +341,61 @@ export default { |
|
|
|
} |
|
|
|
// 修改的提交 |
|
|
|
if (this.form.id != null) { |
|
|
|
this.updateProcess(); |
|
|
|
this.updateProcess() |
|
|
|
.then((form) => { |
|
|
|
const { name, sectionId, remark } = form; |
|
|
|
getSectionFrom(sectionId).then(sectionName => { |
|
|
|
// 修改当前node的信息 |
|
|
|
this.currentNode.setAttrs({ |
|
|
|
detName: { text: name }, |
|
|
|
sectionId: { text: sectionId }, |
|
|
|
sectionName: { text: sectionName }, |
|
|
|
detDesc: { text: remark } |
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
.catch(err => { }); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
const flowId = this.getFlowId(); |
|
|
|
this.createProcess() |
|
|
|
.then(({ id, name, sectionId, remark }) => { |
|
|
|
if (!id || !flowId) return null; |
|
|
|
.then(({ id, name, sectionId, remark, flowId }) => { |
|
|
|
if (!id) return null; |
|
|
|
return createProcessNode({ |
|
|
|
flowId: flowId, |
|
|
|
name, sectionId, remark, |
|
|
|
id, |
|
|
|
}) |
|
|
|
} |
|
|
|
).then(node => { |
|
|
|
}).then(node => { |
|
|
|
if (!node) { |
|
|
|
this.$modal.msgError('创建节点失败'); |
|
|
|
return; |
|
|
|
}; |
|
|
|
this.graph.addNode(node); |
|
|
|
}).catch(err => { |
|
|
|
return; |
|
|
|
}); |
|
|
|
|
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
updateProcess() { |
|
|
|
return updateEquipmentType(this.form).then((response) => { |
|
|
|
this.$modal.msgSuccess('修改成功'); |
|
|
|
this.open = false; |
|
|
|
// this.getList(); |
|
|
|
}); |
|
|
|
const flowId = this.getFlowId(); |
|
|
|
if (!flowId) { |
|
|
|
this.$modal.msgError('工艺ID不能为空'); |
|
|
|
return Promise.reject('工艺ID不能为空'); |
|
|
|
} |
|
|
|
return this.put({ flowId, ...this.form }) |
|
|
|
.then(({ code, data }) => { |
|
|
|
if (code == 0) { |
|
|
|
this.$modal.msgSuccess('修改成功'); |
|
|
|
} else { |
|
|
|
this.$modal.msgError('修改失败'); |
|
|
|
} |
|
|
|
const formCopy = { ...this.form } |
|
|
|
this.open = false; |
|
|
|
return formCopy; |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
createProcess() { |
|
|
@@ -536,11 +403,11 @@ export default { |
|
|
|
const flowId = this.getFlowId(); // it also works |
|
|
|
if (!flowId) { |
|
|
|
this.$modal.msgError('工艺ID不能为空'); |
|
|
|
return Promise.reject(null); |
|
|
|
return Promise.reject('工艺ID不能为空'); |
|
|
|
} |
|
|
|
console.log('create process', this.form) |
|
|
|
// 添加的提交 |
|
|
|
return this.post({ flowId: this.flowId, ...this.form }).then( |
|
|
|
return this.post({ flowId, ...this.form }).then( |
|
|
|
({ code, data }) => { |
|
|
|
this.$modal.msgSuccess('新增成功'); |
|
|
|
this.open = false; |
|
|
@@ -548,9 +415,12 @@ export default { |
|
|
|
return { |
|
|
|
id: data, // 服务器返回的新建的工段id |
|
|
|
...this.form, // 保存一份 this.form 副本,当 open->false 时 this.form 里的信息就清空了 |
|
|
|
flowId |
|
|
|
}; |
|
|
|
} |
|
|
|
); |
|
|
|
).catch(err => { |
|
|
|
this.$msgError(err) |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
put(payload) { |
|
|
@@ -565,6 +435,9 @@ export default { |
|
|
|
info(payload) { |
|
|
|
return this.http(this.infoUrl, 'get', payload); |
|
|
|
}, |
|
|
|
delete(payload) { |
|
|
|
return this.http(this.deleteUrl, 'delete', payload); |
|
|
|
}, |
|
|
|
http(url, method, payload) { |
|
|
|
return this.$axios({ |
|
|
|
url, |
|
|
|