ZQ/laws-sinotruk-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 编辑流程节点

Browse Source
This commit is contained in:
赵霄
2023-10-08 18:03:17 +08:00
parent ade0cf2729
commit 2df34506a9
2 changed files with 453 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/workCenter/processConfig/EditFlowNode.vue
+447
View File
@@ -0,0 +1,447 @@
<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>
src/views/workCenter/processConfig/ProcessConfig.vue
+6
View File
@@ -99,6 +99,12 @@ export default {
handleEditFlowchart ({ id }) {
window.open(window._CONFIG.flowchartFixedAddress + id, '_blank')
},
handleEditFlowNode ({ id }) {
this.$router.push({
path: '/workCenter/EditFlowNode',
query: { id }
})
},
/**
* 部署
* @param id