448 lines
9.3 KiB
Vue
448 lines
9.3 KiB
Vue
<template>
|
|
<internal-detail-page :title="$route.meta.title" :content-padding="0">
|
|
<div class="detail-page-scroll-content">
|
|
<!--流程图dom-->
|
|
<div id="flowChart"></div>
|
|
</div>
|
|
<div class="detail-page-bottom-operate-box">
|
|
<!--取消-->
|
|
<a-button type="primary" :loading="loading" ghost @click="handleCancel">{{ $t('cancel') }}</a-button>
|
|
<!--保存-->
|
|
<a-button type="primary" :loading="loading" @click="handleSubmit">{{ $t('preservation') }}</a-button>
|
|
</div>
|
|
</internal-detail-page>
|
|
</template>
|
|
|
|
<script>
|
|
import InternalDetailPage from '../../../components/InternalDetailPage.vue'
|
|
import G6 from '@antv/g6'
|
|
|
|
const ApiData = {
|
|
nodes: [
|
|
{
|
|
isCanDeleted: 0,
|
|
name: '',
|
|
isApprovalNode: 0,
|
|
id: 'Gateway_jLcZEGDP'
|
|
},
|
|
{
|
|
isCanDeleted: 1,
|
|
name: '自定义审批节点',
|
|
isApprovalNode: 1,
|
|
id: 'Activity_i0BgnsJS'
|
|
},
|
|
{
|
|
isCanDeleted: 0,
|
|
name: '填写基本信息，在线编辑，分发其他起草人',
|
|
isApprovalNode: 0,
|
|
id: 'Activity_0v98tow'
|
|
},
|
|
{
|
|
isCanDeleted: 0,
|
|
name: '主起草人汇总',
|
|
isApprovalNode: 0,
|
|
id: 'Activity_1dz3u0m'
|
|
},
|
|
{
|
|
isCanDeleted: 0,
|
|
name: '标准化审批',
|
|
isApprovalNode: 1,
|
|
id: 'Activity_0m576ex'
|
|
},
|
|
{
|
|
isCanDeleted: 0,
|
|
name: '其他起草人线下填写，上传',
|
|
isApprovalNode: 0,
|
|
id: 'Activity_1d2la4l'
|
|
},
|
|
{
|
|
isCanDeleted: 0,
|
|
name: '',
|
|
isApprovalNode: 0,
|
|
id: 'Gateway_0vz4kbb'
|
|
},
|
|
{
|
|
isCanDeleted: 0,
|
|
name: '评分人评分',
|
|
isApprovalNode: 0,
|
|
id: 'Activity_1qhpnpa'
|
|
},
|
|
{
|
|
isCanDeleted: 0,
|
|
name: '标准化确认是否开启征求意见',
|
|
isApprovalNode: 1,
|
|
id: 'Activity_1siuksf'
|
|
},
|
|
{
|
|
isCanDeleted: 0,
|
|
name: '',
|
|
isApprovalNode: 0,
|
|
id: 'Gateway_04sf5vu'
|
|
},
|
|
{
|
|
isCanDeleted: 0,
|
|
name: '主起草人汇总',
|
|
isApprovalNode: 0,
|
|
id: 'Activity_1hb9aun'
|
|
},
|
|
{
|
|
isCanDeleted: 0,
|
|
name: '其它起草人校对',
|
|
isApprovalNode: 1,
|
|
id: 'Activity_1seways'
|
|
},
|
|
{
|
|
isCanDeleted: 0,
|
|
name: '主管审批',
|
|
isApprovalNode: 1,
|
|
id: 'Activity_1l028rz'
|
|
},
|
|
{
|
|
isCanDeleted: 0,
|
|
name: '',
|
|
isApprovalNode: 0,
|
|
id: 'Gateway_0a6pmod'
|
|
},
|
|
{
|
|
isCanDeleted: 0,
|
|
name: '',
|
|
isApprovalNode: 0,
|
|
id: 'Gateway_07iwvx9'
|
|
},
|
|
{
|
|
isCanDeleted: 0,
|
|
name: '',
|
|
isApprovalNode: 0,
|
|
id: 'Gateway_18kluhj'
|
|
},
|
|
{
|
|
isCanDeleted: 0,
|
|
name: '主管部门的领导会签',
|
|
isApprovalNode: 0,
|
|
id: 'Activity_05pybsc'
|
|
},
|
|
{
|
|
isCanDeleted: 0,
|
|
name: '标准化审批',
|
|
isApprovalNode: 1,
|
|
id: 'Activity_0uxua0b'
|
|
},
|
|
{
|
|
isCanDeleted: 0,
|
|
name: '总工程师批准',
|
|
isApprovalNode: 0,
|
|
id: 'Activity_1yr56ac'
|
|
},
|
|
{
|
|
isCanDeleted: 0,
|
|
name: '主起草人发布',
|
|
isApprovalNode: 0,
|
|
id: 'Activity_0n0h60s'
|
|
},
|
|
{
|
|
isCanDeleted: 0,
|
|
name: '主起草人上传会议纪要和参会人员',
|
|
isApprovalNode: 0,
|
|
id: 'Activity_11uuyg0'
|
|
},
|
|
{
|
|
isCanDeleted: 0,
|
|
name: '',
|
|
isApprovalNode: 0,
|
|
id: 'Activity_0dbh708'
|
|
},
|
|
{
|
|
isCanDeleted: 0,
|
|
name: '责任人填写征求意见',
|
|
isApprovalNode: 0,
|
|
id: 'Activity_04m430n'
|
|
},
|
|
{
|
|
isCanDeleted: 0,
|
|
name: '部门联络人分发责任人',
|
|
isApprovalNode: 0,
|
|
id: 'Activity_1ns6olf'
|
|
},
|
|
{
|
|
isCanDeleted: 0,
|
|
name: '部门联络人汇总数据',
|
|
isApprovalNode: 0,
|
|
id: 'Activity_1riqzkp'
|
|
},
|
|
{
|
|
isCanDeleted: 0,
|
|
name: '责任人的主管审批',
|
|
isApprovalNode: 1,
|
|
id: 'Activity_1ralk8e'
|
|
},
|
|
{
|
|
isCanDeleted: 0,
|
|
name: '',
|
|
isApprovalNode: 0,
|
|
id: 'Gateway_0fczaih'
|
|
}
|
|
],
|
|
edges: [
|
|
{
|
|
source: 'Gateway_jLcZEGDP',
|
|
target: 'Activity_1qhpnpa'
|
|
},
|
|
{
|
|
source: 'Activity_i0BgnsJS',
|
|
target: 'Gateway_jLcZEGDP'
|
|
},
|
|
{
|
|
source: 'StartEvent_1',
|
|
target: 'Activity_0v98tow'
|
|
},
|
|
{
|
|
source: 'Activity_0v98tow',
|
|
target: 'Activity_1d2la4l'
|
|
},
|
|
{
|
|
source: 'Activity_1d2la4l',
|
|
target: 'Activity_1dz3u0m'
|
|
},
|
|
{
|
|
source: 'Activity_1dz3u0m',
|
|
target: 'Activity_0m576ex'
|
|
},
|
|
{
|
|
source: 'Activity_0m576ex',
|
|
target: 'Gateway_0vz4kbb'
|
|
},
|
|
{
|
|
source: 'Gateway_0vz4kbb',
|
|
target: 'Activity_i0BgnsJS'
|
|
},
|
|
{
|
|
source: 'Activity_1qhpnpa',
|
|
target: 'Activity_1siuksf'
|
|
},
|
|
{
|
|
source: 'Activity_1siuksf',
|
|
target: 'Gateway_04sf5vu'
|
|
},
|
|
{
|
|
source: 'Gateway_04sf5vu',
|
|
target: 'Activity_11uuyg0'
|
|
},
|
|
{
|
|
source: 'Activity_1hb9aun',
|
|
target: 'Activity_1siuksf'
|
|
},
|
|
{
|
|
source: 'Activity_11uuyg0',
|
|
target: 'Activity_1seways'
|
|
},
|
|
{
|
|
source: 'Gateway_0a6pmod',
|
|
target: 'Activity_1l028rz'
|
|
},
|
|
{
|
|
source: 'Activity_1seways',
|
|
target: 'Gateway_0a6pmod'
|
|
},
|
|
{
|
|
source: 'Activity_1l028rz',
|
|
target: 'Gateway_07iwvx9'
|
|
},
|
|
{
|
|
source: 'Gateway_07iwvx9',
|
|
target: 'Activity_0uxua0b'
|
|
},
|
|
{
|
|
source: 'Activity_0uxua0b',
|
|
target: 'Gateway_18kluhj'
|
|
},
|
|
{
|
|
source: 'Gateway_18kluhj',
|
|
target: 'Activity_05pybsc'
|
|
},
|
|
{
|
|
source: 'Activity_05pybsc',
|
|
target: 'Activity_1yr56ac'
|
|
},
|
|
{
|
|
source: 'Activity_1yr56ac',
|
|
target: 'Activity_0n0h60s'
|
|
},
|
|
{
|
|
source: 'Activity_0n0h60s',
|
|
target: 'Event_0ke21ds'
|
|
},
|
|
{
|
|
source: 'Gateway_04sf5vu',
|
|
target: 'Activity_0dbh708'
|
|
},
|
|
{
|
|
source: 'Activity_0dbh708',
|
|
target: 'Activity_1hb9aun'
|
|
},
|
|
{
|
|
source: 'Activity_1ns6olf',
|
|
target: 'Activity_04m430n'
|
|
},
|
|
{
|
|
source: 'Activity_04m430n',
|
|
target: 'Activity_1riqzkp'
|
|
},
|
|
{
|
|
source: 'Activity_1riqzkp',
|
|
target: 'Activity_1ralk8e'
|
|
},
|
|
{
|
|
source: 'Activity_1ralk8e',
|
|
target: 'Gateway_0fczaih'
|
|
},
|
|
{
|
|
source: 'Gateway_0fczaih',
|
|
target: 'Event_1b5p26u'
|
|
},
|
|
{
|
|
source: 'Event_1noqwjv',
|
|
target: 'Activity_1ns6olf'
|
|
}
|
|
]
|
|
}
|
|
|
|
export default {
|
|
name: 'EditFlowNode',
|
|
components: { InternalDetailPage },
|
|
data () {
|
|
return {
|
|
loading: false,
|
|
chartData: {},
|
|
graph: null
|
|
}
|
|
},
|
|
mounted () {
|
|
this.initProcessNode()
|
|
},
|
|
methods: {
|
|
/**
|
|
* 获取流程节点信息
|
|
*/
|
|
initProcessNode () {
|
|
this.chartData = ApiData
|
|
this.$nextTick(() => {
|
|
this.initFlowChart()
|
|
})
|
|
},
|
|
/**
|
|
* 初始化流程图
|
|
*/
|
|
initFlowChart () {
|
|
// 自定义节点
|
|
G6.registerNode('sql', {
|
|
drawShape (cfg, group) {
|
|
const rect = group.addShape('rect', {
|
|
attrs: {
|
|
x: -75,
|
|
y: -25,
|
|
width: 150,
|
|
height: 50,
|
|
radius: 10,
|
|
stroke: '#5B8FF9',
|
|
fill: '#C6E5FF',
|
|
lineWidth: 3
|
|
},
|
|
name: 'rect-shape'
|
|
})
|
|
if (cfg.name) {
|
|
group.addShape('text', {
|
|
attrs: {
|
|
text: cfg.name,
|
|
x: 0,
|
|
y: 0,
|
|
fill: '#00287E',
|
|
fontSize: 14,
|
|
textAlign: 'center',
|
|
textBaseline: 'middle',
|
|
fontWeight: 'bold'
|
|
},
|
|
name: 'text-shape'
|
|
})
|
|
}
|
|
return rect
|
|
}
|
|
}, 'single-node')
|
|
|
|
this.graph = new G6.Graph({
|
|
container: 'flowChart',
|
|
width: document.getElementById('flowChart').clientWidth,
|
|
height: document.getElementById('flowChart').clientHeight,
|
|
layout: {
|
|
type: 'dagre',
|
|
// rankdir: 'LR',
|
|
nodesep: 70,
|
|
ranksep: 30,
|
|
controlPoints: true
|
|
},
|
|
defaultNode: {
|
|
type: 'sql'
|
|
},
|
|
defaultEdge: {
|
|
type: 'polyline',
|
|
style: {
|
|
radius: 20,
|
|
offset: 45,
|
|
endArrow: {
|
|
path: G6.Arrow.triangle(),
|
|
fill: '#C2C8D5'
|
|
},
|
|
lineWidth: 2,
|
|
stroke: '#C2C8D5'
|
|
}
|
|
},
|
|
nodeStateStyles: {
|
|
selected: {
|
|
stroke: '#d9d9d9',
|
|
fill: '#5394ef'
|
|
}
|
|
},
|
|
modes: {
|
|
default: [
|
|
'drag-canvas',
|
|
'zoom-canvas',
|
|
'click-select',
|
|
{
|
|
type: 'tooltip',
|
|
formatText (model) {
|
|
return model.name
|
|
},
|
|
offset: 30
|
|
}
|
|
]
|
|
}
|
|
})
|
|
|
|
this.graph.data(this.chartData)
|
|
this.graph.render()
|
|
|
|
window.onresize = () => {
|
|
if (!this.graph || this.graph.get('destroyed')) {
|
|
return
|
|
}
|
|
this.graph.changeSize(document.getElementById('flowChart').clientWidth, document.getElementById('flowChart').clientHeight)
|
|
}
|
|
},
|
|
handleCancel () {
|
|
this.$router.go(-1)
|
|
},
|
|
handleSubmit () {
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import '~@assets/less/common.less';
|
|
|
|
#flowChart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|