Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
ecba0e62 by 任超
Options

style:流程图

1 parent 45d8a33e
Inline Side-by-side
Showing 10 changed files with 583 additions and 68 deletions
...@@ -21,7 +21,9 @@ ...@@ -21,7 +21,9 @@
21 "vue-router": "3.0.2", 21 "vue-router": "3.0.2",
22 "vuex": "3.1.0", 22 "vuex": "3.1.0",
23 "bpmn-js": "^7.4.0", 23 "bpmn-js": "^7.4.0",
24 "diagram-js": "^6.8.2" 24 "diagram-js": "^6.8.2",
25 "bpmn-js-properties-panel": "^0.37.2",
26 "bpmn-js-token-simulation": "^0.10.0"
25 }, 27 },
26 "devDependencies": { 28 "devDependencies": {
27 "@vue/cli-plugin-babel": "4.4.4", 29 "@vue/cli-plugin-babel": "4.4.4",
...@@ -74,4 +76,4 @@ ...@@ -74,4 +76,4 @@
74 "type": "git", 76 "type": "git",
75 "url": "git+https://github.com/PanJiaChen/vue-element-admin.git" 77 "url": "git+https://github.com/PanJiaChen/vue-element-admin.git"
76 } 78 }
77 } 79 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -47,13 +47,13 @@ export function logoutReg (data) { ...@@ -47,13 +47,13 @@ export function logoutReg (data) {
47 }) 47 })
48 } 48 }
49 // 流程图 49 // 流程图
50 export function getWorkFlowImage (bsmSlsq) { 50 export function getWorkFlowImage (bsmSlsq, bestepid) {
51 return request({ 51 return request({
52 url: '/business/workFlow/getWorkFlowImage', 52 url: '/business/workFlow/getWorkFlowImage',
53 method: 'get', 53 method: 'get',
54 responseType: 'blob',
55 params: { 54 params: {
56 bsmSlsq: bsmSlsq 55 bsmSlsq: bsmSlsq,
56 bestepid: bestepid
57 } 57 }
58 }) 58 })
59 } 59 }
......
...@@ -55,21 +55,21 @@ export default { ...@@ -55,21 +55,21 @@ export default {
55 }, 55 },
56 mounted () { 56 mounted () {
57 // 计算滚动条高度 57 // 计算滚动条高度
58 setTimeout(() => { 58 // setTimeout(() => {
59 if (this.btnShow) { //判断按钮的显影来决定是否需要计算高度 59 // if (this.btnShow) {
60 if (this.height == 'auto') { 60 // if (this.height == 'auto') {
61 this.contentHeight = (this.$refs.contentRef.offsetHeight - 100) + 'px' 61 // this.contentHeight = (this.$refs.contentRef.offsetHeight - 200) + 'px'
62 } else { 62 // } else {
63 this.contentHeight = this.height 63 // this.contentHeight = this.height
64 } 64 // }
65 } else { 65 // } else {
66 if (this.height == 'auto') { 66 // if (this.height == 'auto') {
67 this.contentHeight = this.$refs.contentRef.offsetHeight 67 // this.contentHeight = this.$refs.contentRef.offsetHeight
68 } else { 68 // } else {
69 this.contentHeight = this.height 69 // this.contentHeight = this.height
70 } 70 // }
71 } 71 // }
72 }, 500) 72 // }, 500)
73 }, 73 },
74 methods: { 74 methods: {
75 onCancel () { 75 onCancel () {
......
...@@ -22,7 +22,6 @@ router.beforeEach(async (to, from, next) => { ...@@ -22,7 +22,6 @@ router.beforeEach(async (to, from, next) => {
22 const { result: getMenuData } = await getMenuInfo() 22 const { result: getMenuData } = await getMenuInfo()
23 const accessRoutes = await store.dispatch('permission/generateRoutes', getMenuData) 23 const accessRoutes = await store.dispatch('permission/generateRoutes', getMenuData)
24 router.addRoutes(accessRoutes) 24 router.addRoutes(accessRoutes)
25 console.log(router);
26 next({ ...to, replace: true }) 25 next({ ...to, replace: true })
27 } 26 }
28 NProgress.done() 27 NProgress.done()
......
1 /* 改变主题色变量 */
2 // $--color-primary: #1890ff;
3 // $--color-danger: #ff4d4f;
4
5 /* 改变 icon 字体路径变量，必需 */
6
7 .process-drawer .el-drawer__header {
8 padding: 16px 16px 8px 16px;
9 margin: 0;
10 line-height: 24px;
11 font-size: 18px;
12 color: #303133;
13 box-sizing: border-box;
14 border-bottom: 1px solid #e8e8e8;
15 }
16
17 div[class^="el-drawer"]:focus,
18 span:focus {
19 outline: none;
20 }
21
22 .process-drawer .el-drawer__body {
23 box-sizing: border-box;
24 padding: 16px;
25 width: 100%;
26 overflow-y: auto;
27 }
28
29 .process-design {
30 .el-table td,
31 .el-table th {
32 color: #333;
33 }
34
35 .el-dialog__header {
36 padding: 16px 16px 8px 16px;
37 box-sizing: border-box;
38 border-bottom: 1px solid #e8e8e8;
39 }
40 .el-dialog__body {
41 padding: 16px;
42 max-height: 80vh;
43 box-sizing: border-box;
44 overflow-y: auto;
45 }
46 .el-dialog__footer {
47 padding: 16px;
48 box-sizing: border-box;
49 border-top: 1px solid #e8e8e8;
50 }
51 .el-dialog__close {
52 font-weight: 600;
53 }
54 .el-select {
55 width: 100%;
56 }
57 .el-divider:not(.el-divider--horizontal) {
58 margin: 0 8px ;
59 }
60 .el-divider.el-divider--horizontal {
61 margin: 16px 0;
62 }
63 }
1 @import "./flow-element-variables.scss";
2 @import "~bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css";
3 @import "~bpmn-js-token-simulation/assets/css/font-awesome.min.css";
4 @import "~bpmn-js-token-simulation/assets/css/normalize.css";
5 @import "~bpmn-js/dist/assets/diagram-js.css";
6 @import "~bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
7 @import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
8 @import "./process-designer.scss";
9 @import "./process-panel.scss";
10
11 $success-color: #4eb819;
12 $primary-color: #409EFF;
13 $warning-color: #E6A23C;
14 $danger-color: #F56C6C;
15 $cancel-color: #909399;
16
17 .process-viewer {
18 position: relative;
19 border: 1px solid #EFEFEF;
20 background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+') repeat!important;
21
22 .success-arrow {
23 fill: $success-color;
24 stroke: $success-color;
25 }
26
27 .success-conditional {
28 fill: white;
29 stroke: $success-color;
30 }
31
32 .fail-arrow {
33 fill: $warning-color;
34 stroke: $warning-color;
35 }
36
37 .fail-conditional {
38 fill: white;
39 stroke: $warning-color;
40 }
41
42 .success.djs-connection {
43 .djs-visual path {
44 stroke: $success-color!important;
45 marker-end: url(#sequenceflow-end-white-success)!important;
46 }
47 }
48
49 .success.djs-connection.condition-expression {
50 .djs-visual path {
51 marker-start: url(#conditional-flow-marker-white-success)!important;
52 }
53 }
54
55 .success.djs-shape {
56 .djs-visual rect {
57 stroke: $success-color!important;
58 fill: $success-color!important;
59 fill-opacity: 0.15!important;
60 }
61
62 .djs-visual polygon {
63 stroke: $success-color!important;
64 }
65
66 .djs-visual path:nth-child(2) {
67 stroke: $success-color!important;
68 fill: $success-color!important;
69 }
70
71 .djs-visual circle {
72 stroke: $success-color!important;
73 fill: $success-color!important;
74 fill-opacity: 0.15!important;
75 }
76 }
77
78 .primary.djs-shape {
79 .djs-visual rect {
80 stroke: $primary-color!important;
81 fill: $primary-color!important;
82 fill-opacity: 0.15!important;
83 }
84
85 .djs-visual polygon {
86 stroke: $primary-color!important;
87 }
88
89 .djs-visual circle {
90 stroke: $primary-color!important;
91 fill: $primary-color!important;
92 fill-opacity: 0.15!important;
93 }
94 }
95
96 .warning.djs-connection {
97 .djs-visual path {
98 stroke: $warning-color!important;
99 marker-end: url(#sequenceflow-end-white-fail)!important;
100 }
101 }
102
103 .warning.djs-connection.condition-expression {
104 .djs-visual path {
105 marker-start: url(#conditional-flow-marker-white-fail)!important;
106 }
107 }
108
109 .warning.djs-shape {
110 .djs-visual rect {
111 stroke: $warning-color!important;
112 fill: $warning-color!important;
113 fill-opacity: 0.15!important;
114 }
115
116 .djs-visual polygon {
117 stroke: $warning-color!important;
118 }
119
120 .djs-visual path:nth-child(2) {
121 stroke: $warning-color!important;
122 fill: $warning-color!important;
123 }
124
125 .djs-visual circle {
126 stroke: $warning-color!important;
127 fill: $warning-color!important;
128 fill-opacity: 0.15!important;
129 }
130 }
131
132 .danger.djs-shape {
133 .djs-visual rect {
134 stroke: $danger-color!important;
135 fill: $danger-color!important;
136 fill-opacity: 0.15!important;
137 }
138
139 .djs-visual polygon {
140 stroke: $danger-color!important;
141 }
142
143 .djs-visual circle {
144 stroke: $danger-color!important;
145 fill: $danger-color!important;
146 fill-opacity: 0.15!important;
147 }
148 }
149
150 .cancel.djs-shape {
151 .djs-visual rect {
152 stroke: $cancel-color!important;
153 fill: $cancel-color!important;
154 fill-opacity: 0.15!important;
155 }
156
157 .djs-visual polygon {
158 stroke: $cancel-color!important;
159 }
160
161 .djs-visual circle {
162 stroke: $cancel-color!important;
163 fill: $cancel-color!important;
164 fill-opacity: 0.15!important;
165 }
166 }
167 }
168
169 .process-viewer .djs-tooltip-container, .process-viewer .djs-overlay-container, .process-viewer .djs-palette {
170 display: none;
171 }
1 // 边框被 token-simulation 样式覆盖了
2 .djs-palette {
3 background: var(--palette-background-color);
4 border: solid 1px var(--palette-border-color) !important;
5 border-radius: 2px;
6 }
7
8 .my-process-designer {
9 padding: 5px 0 10px 10px;
10 display: flex;
11 flex-direction: column;
12 width: 100%;
13 height: 100%;
14 box-sizing: border-box;
15 .my-process-designer__header {
16 width: 100%;
17 min-height: 36px;
18 .el-button {
19 text-align: center;
20 }
21 .el-button-group {
22 margin: 4px;
23 }
24 .el-tooltip__popper {
25 .el-button {
26 width: 100%;
27 text-align: left;
28 padding-left: 8px;
29 padding-right: 8px;
30 }
31 .el-button:hover {
32 background: rgba(64, 158, 255, 0.8);
33 color: #ffffff;
34 }
35 }
36 .align {
37 position: relative;
38 i {
39 &:after {
40 content: "|";
41 position: absolute;
42 transform: rotate(90deg) translate(200%, 60%);
43 }
44 }
45 }
46 .align.align-left i {
47 transform: rotate(90deg);
48 }
49 .align.align-right i {
50 transform: rotate(-90deg);
51 }
52 .align.align-top i {
53 transform: rotate(180deg);
54 }
55 .align.align-bottom i {
56 transform: rotate(0deg);
57 }
58 .align.align-center i {
59 transform: rotate(90deg);
60 &:after {
61 transform: rotate(90deg) translate(0, 60%);
62 }
63 }
64 .align.align-middle i {
65 transform: rotate(0deg);
66 &:after {
67 transform: rotate(90deg) translate(0, 60%);
68 }
69 }
70 }
71 .my-process-designer__container {
72 display: inline-flex;
73 width: 100%;
74 flex: 1;
75 .my-process-designer__canvas {
76 flex: 1;
77 height: 100%;
78 position: relative;
79 background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+")
80 repeat !important;
81 div.toggle-mode {
82 display: none;
83 }
84 }
85 .my-process-designer__property-panel {
86 height: 100%;
87 overflow: scroll;
88 overflow-y: auto;
89 z-index: 10;
90 * {
91 box-sizing: border-box;
92 }
93 }
94 svg {
95 width: 100%;
96 height: 100%;
97 min-height: 100%;
98 overflow: hidden;
99 }
100 }
101 }
102
103 //侧边栏配置
104 .djs-palette.open {
105 .djs-palette-entries {
106 div[class^="bpmn-icon-"]:before,
107 div[class*="bpmn-icon-"]:before {
108 line-height: unset;
109 }
110 div.entry {
111 position: relative;
112 }
113 div.entry:hover {
114 &::after {
115 width: max-content;
116 content: attr(title);
117 vertical-align: text-bottom;
118 position: absolute;
119 right: -10px;
120 top: 0;
121 bottom: 0;
122 overflow: hidden;
123 transform: translateX(100%);
124 font-size: 0.5em;
125 display: inline-block;
126 text-decoration: inherit;
127 font-variant: normal;
128 text-transform: none;
129 background: #fafafa;
130 box-shadow: 0 0 6px #eeeeee;
131 border: 1px solid #cccccc;
132 box-sizing: border-box;
133 padding: 0 16px;
134 border-radius: 4px;
135 z-index: 100;
136 }
137 }
138 }
139 }
140 pre {
141 margin: 0;
142 height: 100%;
143 overflow: hidden;
144 max-height: calc(80vh - 32px);
145 overflow-y: auto;
146 }
147 .hljs {
148 word-break: break-word;
149 white-space: pre-wrap;
150 }
151 .hljs * {
152 font-family: Consolas, Monaco, monospace;
153 }
1 .process-design {
2 .process-panel__container {
3 box-sizing: border-box;
4 padding: 0 8px;
5 border-left: 1px solid #eeeeee;
6 box-shadow: 0 0 8px #cccccc;
7 max-height: 100%;
8 overflow-y: scroll;
9 }
10 .panel-tab__title {
11 font-weight: 600;
12 padding: 0 8px;
13 font-size: 1.1em;
14 line-height: 1.2em;
15 i {
16 margin-right: 8px;
17 font-size: 1.2em;
18 }
19 }
20 .panel-tab__content {
21 width: 100%;
22 box-sizing: border-box;
23 border-top: 1px solid #eeeeee;
24 padding: 8px 16px;
25 .panel-tab__content--title {
26 display: flex;
27 justify-content: space-between;
28 padding-bottom: 8px;
29 span {
30 flex: 1;
31 text-align: left;
32 }
33 }
34 }
35 .element-property {
36 width: 100%;
37 display: flex;
38 align-items: flex-start;
39 margin: 8px 0;
40 .element-property__label {
41 display: block;
42 width: 90px;
43 text-align: right;
44 overflow: hidden;
45 padding-right: 12px;
46 line-height: 32px;
47 font-size: 14px;
48 box-sizing: border-box;
49 }
50 .element-property__value {
51 flex: 1;
52 line-height: 32px;
53 }
54 .el-form-item {
55 width: 100%;
56 margin-bottom: 0;
57 padding-bottom: 18px;
58 }
59 }
60 .list-property {
61 flex-direction: column;
62 .element-listener-item {
63 width: 100%;
64 display: inline-grid;
65 grid-template-columns: 16px auto 32px 32px;
66 grid-column-gap: 8px;
67 }
68 .element-listener-item + .element-listener-item {
69 margin-top: 8px;
70 }
71 }
72 .listener-filed__title {
73 display: inline-flex;
74 width: 100%;
75 justify-content: space-between;
76 align-items: center;
77 margin-top: 0;
78 span {
79 width: 200px;
80 text-align: left;
81 font-size: 14px;
82 }
83 i {
84 margin-right: 8px;
85 }
86 }
87 .element-drawer__button {
88 margin-top: 8px;
89 width: 100%;
90 display: inline-flex;
91 justify-content: space-around;
92 }
93 .element-drawer__button > .el-button {
94 width: 100%;
95 }
96
97 .el-collapse-item__content {
98 padding-bottom: 0;
99 }
100 .el-input.is-disabled .el-input__inner {
101 color: #999999;
102 }
103 .el-form-item.el-form-item--mini {
104 margin-bottom: 0;
105 & + .el-form-item {
106 margin-top: 16px;
107 }
108 }
109 }
110
1 <template> 1 <template>
2 <div class="process-viewer"> 2 <div class="process-viewer">
3 <div v-show="!isLoading" ref="processCanvas" class="process-canvas" style="height: 100%;" /> 3 <div v-show="!isLoading" ref="processCanvas" class="process-canvas" style="height: 360px;" />
4 <!-- 自定义箭头样式，用于成功状态下流程连线箭头 --> 4 <!-- 自定义箭头样式，用于成功状态下流程连线箭头 -->
5 <defs ref="customSuccessDefs"> 5 <defs ref="customSuccessDefs">
6 <marker id="sequenceflow-end-white-success" view-box="0 0 20 20" ref-x="11" ref-y="10" marker-width="10" 6 <marker id="sequenceflow-end-white-success" view-box="0 0 20 20" ref-x="11" ref-y="10" marker-width="10"
...@@ -63,21 +63,18 @@ ...@@ -63,21 +63,18 @@
63 </template> 63 </template>
64 64
65 <script> 65 <script>
66 import '@/styles/package/theme/index.scss'
66 import BpmnViewer from 'bpmn-js/lib/Viewer' 67 import BpmnViewer from 'bpmn-js/lib/Viewer'
67 import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas' 68 import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'
68
69 export default { 69 export default {
70 props: { 70 props: {
71 // eslint-disable-next-line vue/require-default-prop
72 xml: { 71 xml: {
73 type: String 72 type: String
74 }, 73 },
75 // eslint-disable-next-line vue/require-default-prop
76 finishedInfo: { 74 finishedInfo: {
77 type: Object 75 type: Object
78 }, 76 },
79 // 所有节点审批记录 77 // 所有节点审批记录
80 // eslint-disable-next-line vue/require-default-prop
81 allCommentList: { 78 allCommentList: {
82 type: Array 79 type: Array
83 } 80 }
...@@ -88,7 +85,7 @@ export default { ...@@ -88,7 +85,7 @@ export default {
88 dlgTitle: undefined, 85 dlgTitle: undefined,
89 defaultZoom: 1, 86 defaultZoom: 1,
90 // 是否正在加载流程图 87 // 是否正在加载流程图
91 isLoading: false, 88 isLoading: true,
92 bpmnViewer: undefined, 89 bpmnViewer: undefined,
93 // 已完成流程元素 90 // 已完成流程元素
94 processNodeInfo: undefined, 91 processNodeInfo: undefined,
...@@ -100,24 +97,24 @@ export default { ...@@ -100,24 +97,24 @@ export default {
100 hoverTimer: null 97 hoverTimer: null
101 } 98 }
102 }, 99 },
103 watch: { 100 // watch: {
104 xml: { 101 // xml: {
105 handler (newXml) { 102 // handler (newXml) {
106 this.importXML(newXml) 103 // this.importXML(newXml)
107 }, 104 // },
108 immediate: true 105 // immediate: true
109 }, 106 // },
110 finishedInfo: { 107 // finishedInfo: {
111 handler (newInfo) { 108 // handler (newInfo) {
112 this.setProcessStatus(newInfo) 109 // this.setProcessStatus(newInfo)
113 }, 110 // },
114 immediate: true 111 // immediate: true
115 } 112 // }
116 }, 113 // },
117 created () { 114 created () {
118 this.$nextTick(() => { 115 this.$nextTick(() => {
119 this.importXML(this.xml) 116 this.importXML(this.xml)
120 this.setProcessStatus(this.finishedInfo) 117 this.setProcessStatus(this.finishedInfo);
121 }) 118 })
122 }, 119 },
123 destroyed () { 120 destroyed () {
...@@ -146,19 +143,6 @@ export default { ...@@ -146,19 +143,6 @@ export default {
146 }, 143 },
147 getOperationTagType (type) { 144 getOperationTagType (type) {
148 return 'success' 145 return 'success'
149 // switch (type) {
150 // case this.SysFlowTaskOperationType.AGREE:
151 // case this.SysFlowTaskOperationType.MULTI_AGREE:
152 // return 'success';
153 // case this.SysFlowTaskOperationType.REFUSE:
154 // case this.SysFlowTaskOperationType.PARALLEL_REFUSE:
155 // case this.SysFlowTaskOperationType.MULTI_REFUSE:
156 // return 'warning';
157 // case this.SysFlowTaskOperationType.STOP:
158 // return 'danger'
159 // default:
160 // return 'primary';
161 // }
162 }, 146 },
163 // 流程图预览清空 147 // 流程图预览清空
164 clearViewer (a) { 148 clearViewer (a) {
...@@ -214,9 +198,8 @@ export default { ...@@ -214,9 +198,8 @@ export default {
214 this.bpmnViewer.on('element.click', ({ element }) => { 198 this.bpmnViewer.on('element.click', ({ element }) => {
215 this.onSelectElement(element) 199 this.onSelectElement(element)
216 }) 200 })
217
218 this.isLoading = true
219 const c = await this.bpmnViewer.importXML(xml) 201 const c = await this.bpmnViewer.importXML(xml)
202 this.isLoading = true
220 this.addCustomDefs() 203 this.addCustomDefs()
221 } catch (e) { 204 } catch (e) {
222 // this.clearViewer('b') 205 // this.clearViewer('b')
......
...@@ -63,6 +63,10 @@ ...@@ -63,6 +63,10 @@
63 </div> 63 </div>
64 </div> 64 </div>
65 <fqsqDialog v-model="isDialog" :djywbm="$route.query.sqywbm" :isJump="true" @updateDialog="updateDialog" /> 65 <fqsqDialog v-model="isDialog" :djywbm="$route.query.sqywbm" :isJump="true" @updateDialog="updateDialog" />
66 <dialogBox title="流程图" width="60%" v-model="myValue" @closeDialog="closeDialog">
67 <process-viewer :key="`designer-${loadIndex}`" style="height:500px" :xml="xmlData" :finished-info="finishedInfo"
68 :all-comment-list="historyTaskList" @ch="changeLoadIndex" />
69 </dialogBox>
66 </div> 70 </div>
67 </template> 71 </template>
68 72
...@@ -79,6 +83,7 @@ import { ...@@ -79,6 +83,7 @@ import {
79 completeTask, 83 completeTask,
80 } from "@/api/fqsq.js"; 84 } from "@/api/fqsq.js";
81 import { deleteBdcdy } from "@/api/ywbl.js"; 85 import { deleteBdcdy } from "@/api/ywbl.js";
86 import ProcessViewer from './components/processViewer.vue'
82 import { getWorkFlowImage } from "@/api/jsydsyqFlow.js"; 87 import { getWorkFlowImage } from "@/api/jsydsyqFlow.js";
83 import { getForm } from "./flowform.js"; 88 import { getForm } from "./flowform.js";
84 import fqsqDialog from "@/views/ywbl/ywsq/slectBdc.vue"; 89 import fqsqDialog from "@/views/ywbl/ywsq/slectBdc.vue";
...@@ -86,12 +91,17 @@ import { queueDjywmc } from "@/views/ywbl/ywsq/slectBdcdata.js"; ...@@ -86,12 +91,17 @@ import { queueDjywmc } from "@/views/ywbl/ywsq/slectBdcdata.js";
86 export default { 91 export default {
87 components: { 92 components: {
88 fqsqDialog, 93 fqsqDialog,
94 ProcessViewer
89 }, 95 },
90 data () { 96 data () {
91 return { 97 return {
92 isDialog: false, 98 isDialog: false,
93 // 流程图 99 // 流程图
94 imgSrc: "", 100 myValue: false,
101 loadIndex: 0,
102 xmlData: '',
103 finishedInfo: {},
104 historyTaskList: [],
95 // 折叠 105 // 折叠
96 isShowdrawer: true, 106 isShowdrawer: true,
97 // 默认选中 107 // 默认选中
...@@ -131,6 +141,12 @@ export default { ...@@ -131,6 +141,12 @@ export default {
131 this.flowInitParam(); 141 this.flowInitParam();
132 }, 142 },
133 methods: { 143 methods: {
144 changeLoadIndex () {
145 this.loadIndex++
146 },
147 closeDialog () {
148 this.myValue = false
149 },
134 // 更新列表 150 // 更新列表
135 updateDialog () { 151 updateDialog () {
136 this.loadBdcdylist(); 152 this.loadBdcdylist();
...@@ -216,16 +232,34 @@ export default { ...@@ -216,16 +232,34 @@ export default {
216 this.isDialog = true; 232 this.isDialog = true;
217 break; 233 break;
218 case "B1": 234 case "B1":
219 getWorkFlowImage(this.bsmSlsq).then((res) => { 235 getWorkFlowImage(this.bsmSlsq, this.$route.query.bestepid).then(res => {
220 this.imgSrc = URL.createObjectURL(res); 236 let { result } = res
221 this.$popup({ 237 this.myValue = true
222 title: "流程图", 238 this.loadIndex++
223 btnShow: true, 239 this.xmlData = result.xml
224 height: '250px', 240 this.finishedInfo = {
225 editItem: "workflow/components/flowChart", 241 finishedTaskSet: result.finishedTaskSet,
226 formData: this.imgSrc, 242 unfinishedTaskSet: result.unfinishedTaskSet,
227 }); 243 rejectedTaskSet: result.rejectedTaskSet,
228 }); 244 finishedSequenceFlowSet: result.finishedSequenceFlowSet
245 }
246 this.allCommentList = result.historyTaskList
247 // this.$popup({
248 // title: "流程图",
249 // height: '500px',
250 // editItem: "workflow/components/processViewer",
251 // formData: {
252 // xml: result.xml,
253 // finishedInfo: {
254 // finishedTaskSet: result.finishedTaskSet,
255 // unfinishedTaskSet: result.unfinishedTaskSet,
256 // rejectedTaskSet: result.rejectedTaskSet,
257 // finishedSequenceFlowSet: result.finishedSequenceFlowSet
258 // },
259 // allCommentList: result.historyTaskList
260 // }
261 // })
262 })
229 break; 263 break;
230 case "B2": //材料分屏按钮 264 case "B2": //材料分屏按钮
231 this.splitScreen = this.splitScreen ? false : true; 265 this.splitScreen = this.splitScreen ? false : true;
......