Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
2e401d01 by renchao@pashanhoo.com
Options

style:流程图

1 parent 5009ee54
Inline Side-by-side
Showing 3 changed files with 102 additions and 66 deletions
...@@ -26,7 +26,8 @@ ...@@ -26,7 +26,8 @@
26 "vue-quill-editor": "^3.0.6", 26 "vue-quill-editor": "^3.0.6",
27 "vue-router": "3.0.2", 27 "vue-router": "3.0.2",
28 "vue-seamless-scroll": "^1.1.23", 28 "vue-seamless-scroll": "^1.1.23",
29 "vuex": "3.1.0" 29 "vuex": "3.1.0",
30 "x2js": "^3.4.4"
30 }, 31 },
31 "devDependencies": { 32 "devDependencies": {
32 "@vue/cli-plugin-babel": "4.4.4", 33 "@vue/cli-plugin-babel": "4.4.4",
......
...@@ -11,6 +11,9 @@ import { startLoadingAddCount, endLoadingSubCount } from './utils/requestLoading ...@@ -11,6 +11,9 @@ import { startLoadingAddCount, endLoadingSubCount } from './utils/requestLoading
11 Vue.mixin(mixin); 11 Vue.mixin(mixin);
12 Vue.use(Loading.directive); 12 Vue.use(Loading.directive);
13 import rules from './utils/rule.js' 13 import rules from './utils/rule.js'
14 // 引入xml
15 import x2js from 'x2js'
16 Vue.prototype.$x2js = new x2js()
14 // 全局方法挂载 17 // 全局方法挂载
15 Vue.prototype.$rules = rules 18 Vue.prototype.$rules = rules
16 // 全局加载 19 // 全局加载
......
1 <template> 1 <template>
2 <div class="process-viewer"> 2 <div>
3 <div v-show="!isLoading" ref="processCanvas" class="process-canvas" style="height: 360px;" /> 3 <div class="process-viewer">
4 <!-- 自定义箭头样式，用于成功状态下流程连线箭头 --> 4 <div v-show="!isLoading" ref="processCanvas" class="process-canvas" style="height: 280px;" />
5 <defs ref="customSuccessDefs"> 5 <!-- 自定义箭头样式，用于成功状态下流程连线箭头 -->
6 <marker id="sequenceflow-end-white-success" view-box="0 0 20 20" ref-x="11" ref-y="10" marker-width="10" 6 <defs ref="customSuccessDefs">
7 marker-height="10" orient="auto"> 7 <marker id="sequenceflow-end-white-success" view-box="0 0 20 20" ref-x="11" ref-y="10" marker-width="10"
8 <path class="success-arrow" d="M 1 5 L 11 10 L 1 15 Z" 8 marker-height="10" orient="auto">
9 style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;" /> 9 <path class="success-arrow" d="M 1 5 L 11 10 L 1 15 Z"
10 </marker> 10 style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;" />
11 <marker id="conditional-flow-marker-white-success" view-box="0 0 20 20" ref-x="-1" ref-y="10" marker-width="10" 11 </marker>
12 marker-height="10" orient="auto"> 12 <marker id="conditional-flow-marker-white-success" view-box="0 0 20 20" ref-x="-1" ref-y="10" marker-width="10"
13 <path class="success-conditional" d="M 0 10 L 8 6 L 16 10 L 8 14 Z" 13 marker-height="10" orient="auto">
14 style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;" /> 14 <path class="success-conditional" d="M 0 10 L 8 6 L 16 10 L 8 14 Z"
15 </marker> 15 style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;" />
16 </defs> 16 </marker>
17 <!-- 自定义箭头样式，用于失败状态下流程连线箭头 --> 17 </defs>
18 <defs ref="customFailDefs"> 18 <!-- 自定义箭头样式，用于失败状态下流程连线箭头 -->
19 <marker id="sequenceflow-end-white-fail" view-box="0 0 20 20" ref-x="11" ref-y="10" marker-width="10" 19 <defs ref="customFailDefs">
20 marker-height="10" orient="auto"> 20 <marker id="sequenceflow-end-white-fail" view-box="0 0 20 20" ref-x="11" ref-y="10" marker-width="10"
21 <path class="fail-arrow" d="M 1 5 L 11 10 L 1 15 Z" 21 marker-height="10" orient="auto">
22 style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;" /> 22 <path class="fail-arrow" d="M 1 5 L 11 10 L 1 15 Z"
23 </marker> 23 style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;" />
24 <marker id="conditional-flow-marker-white-fail" view-box="0 0 20 20" ref-x="-1" ref-y="10" marker-width="10" 24 </marker>
25 marker-height="10" orient="auto"> 25 <marker id="conditional-flow-marker-white-fail" view-box="0 0 20 20" ref-x="-1" ref-y="10" marker-width="10"
26 <path class="fail-conditional" d="M 0 10 L 8 6 L 16 10 L 8 14 Z" 26 marker-height="10" orient="auto">
27 style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;" /> 27 <path class="fail-conditional" d="M 0 10 L 8 6 L 16 10 L 8 14 Z"
28 </marker> 28 style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;" />
29 </defs> 29 </marker>
30 </defs>
31
32 <div style="position: absolute; top: 0px; left: 0px; width: 100%;">
33 <el-row type="flex" justify="end">
34 <el-button-group key="scale-control" size="medium">
35 <el-button size="medium" type="default" :plain="true" :disabled="defaultZoom <= 0.3" icon="el-icon-zoom-out"
36 @click="processZoomOut()" />
37 <el-button size="medium" type="default" style="width: 90px;">{{ Math.floor(this.defaultZoom * 10 * 10) + "%"
38 }}</el-button>
39 <el-button size="medium" type="default" :plain="true" :disabled="defaultZoom >= 3.9" icon="el-icon-zoom-in"
40 @click="processZoomIn()" />
41 <el-button size="medium" type="default" icon="el-icon-c-scale-to-original" @click="processReZoom()" />
42 <slot />
43 </el-button-group>
44 </el-row>
45 </div>
46 </div>
30 <!-- 已完成节点悬浮弹窗 --> 47 <!-- 已完成节点悬浮弹窗 -->
31 <el-dialog class="comment-dialog" :title="dlgTitle || '审批记录'" :visible.sync="dialogVisible" append-to-body> 48 <div class="information-list">
32 <el-row> 49 <!-- <p>{{ dlgTitle ? dlgTitle : '浏览记录' }}</p> -->
33 <el-table :data="taskCommentList" size="mini" border header-cell-class-name="table-header-gray"> 50 <el-select v-model="selectValue" @change="handleSelect">
34 <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" /> 51 <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
35 <el-table-column label="候选办理" prop="candidate" width="150px" align="center" /> 52 </el-option>
36 <el-table-column label="实际办理" prop="assigneeName" width="100px" align="center" /> 53 </el-select>
37 <el-table-column label="处理时间" prop="createTime" width="140px" align="center" /> 54 <el-table :data="taskCommentList" size="mini" border header-cell-class-name="table-header-gray">
38 <el-table-column label="办结时间" prop="finishTime" width="140px" align="center" /> 55 <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" />
39 <el-table-column label="耗时" prop="duration" width="100px" align="center" /> 56 <el-table-column label="候选办理" prop="candidate" minWidth="150px" align="center" />
40 <el-table-column label="审批意见" align="center"> 57 <el-table-column label="实际办理" prop="assigneeName" minWidth="100px" align="center" />
41 <template slot-scope="scope"> 58 <el-table-column label="处理时间" prop="createTime" width="140px" align="center" />
42 {{ scope.row.commentList&&scope.row.commentList[0]?scope.row.commentList[0].fullMessage:'' }} 59 <el-table-column label="办结时间" prop="finishTime" width="140px" align="center" />
43 </template> 60 <el-table-column label="耗时" prop="duration" minWidth="100px" align="center" />
44 </el-table-column> 61 <el-table-column label="操作类型" align="center">
45 </el-table> 62 </el-table-column>
46 </el-row> 63 </el-table>
47 </el-dialog>
48 <div style="position: absolute; top: 0px; left: 0px; width: 100%;">
49 <el-row type="flex" justify="end">
50 <el-button-group key="scale-control" size="medium">
51 <el-button size="medium" type="default" :plain="true" :disabled="defaultZoom <= 0.3" icon="el-icon-zoom-out"
52 @click="processZoomOut()" />
53 <el-button size="medium" type="default" style="width: 90px;">{{ Math.floor(this.defaultZoom * 10 * 10) + "%"
54 }}</el-button>
55 <el-button size="medium" type="default" :plain="true" :disabled="defaultZoom >= 3.9" icon="el-icon-zoom-in"
56 @click="processZoomIn()" />
57 <el-button size="medium" type="default" icon="el-icon-c-scale-to-original" @click="processReZoom()" />
58 <slot />
59 </el-button-group>
60 </el-row>
61 </div> 64 </div>
62 </div> 65 </div>
63 </template> 66 </template>
64
65 <script> 67 <script>
66 import '@/styles/package/theme/index.scss' 68 import '@/styles/package/theme/index.scss'
67 import BpmnViewer from 'bpmn-js/lib/Viewer' 69 import BpmnViewer from 'bpmn-js/lib/Viewer'
...@@ -75,7 +77,6 @@ export default { ...@@ -75,7 +77,6 @@ export default {
75 }, 77 },
76 data () { 78 data () {
77 return { 79 return {
78 dialogVisible: false,
79 dlgTitle: undefined, 80 dlgTitle: undefined,
80 defaultZoom: 1, 81 defaultZoom: 1,
81 // 是否正在加载流程图 82 // 是否正在加载流程图
...@@ -88,7 +89,10 @@ export default { ...@@ -88,7 +89,10 @@ export default {
88 // 任务节点审批记录 89 // 任务节点审批记录
89 taskCommentList: [], 90 taskCommentList: [],
90 // 已完成任务悬浮延迟Timer 91 // 已完成任务悬浮延迟Timer
91 hoverTimer: null 92 hoverTimer: null,
93 // 下拉
94 selectValue: '',
95 selectOptions: []
92 } 96 }
93 }, 97 },
94 created () { 98 created () {
...@@ -160,10 +164,26 @@ export default { ...@@ -160,10 +164,26 @@ export default {
160 this.taskCommentList = (this.formData.allCommentList || []).filter(item => { 164 this.taskCommentList = (this.formData.allCommentList || []).filter(item => {
161 return item.taskDefKey === this.selectTaskId 165 return item.taskDefKey === this.selectTaskId
162 }) 166 })
163 this.dialogVisible = true 167 },
168 // 下拉列表切换
169 handleSelect (val) {
170 this.taskCommentList = (this.formData.allCommentList || []).filter(item => {
171 return item.taskDefKey === val
172 })
164 }, 173 },
165 // 显示流程图 174 // 显示流程图
166 async importXML (xml) { 175 async importXML (xml) {
176 let xmlData = this.$x2js.xml2js(xml).definitions.process;
177 this.selectOptions = xmlData.userTask.map(item => {
178 return { value: item._id, label: item._name }
179 })
180 this.selectOptions = [{ value: xmlData.startEvent._id, label: '浏览记录' }, ...this.selectOptions]
181 this.selectOptions = this.selectOptions.map(item => {
182 if (this.formData.finishedInfo.finishedTaskSet.includes(item.value)) {
183 return item
184 }
185 }).filter(Boolean);
186 this.selectValue = xmlData.startEvent._id
167 this.clearViewer('a') 187 this.clearViewer('a')
168 if (xml != null && xml !== '') { 188 if (xml != null && xml !== '') {
169 try { 189 try {
...@@ -178,11 +198,11 @@ export default { ...@@ -178,11 +198,11 @@ export default {
178 this.bpmnViewer.on('element.click', ({ element }) => { 198 this.bpmnViewer.on('element.click', ({ element }) => {
179 this.onSelectElement(element) 199 this.onSelectElement(element)
180 }) 200 })
181 const c = await this.bpmnViewer.importXML(xml) 201 await this.bpmnViewer.importXML(xml)
182 this.isLoading = true 202 this.isLoading = true
183 this.addCustomDefs() 203 this.addCustomDefs()
184 } catch (e) { 204 } catch (e) {
185 // this.clearViewer('b') 205 this.clearViewer('b')
186 } finally { 206 } finally {
187 this.isLoading = false 207 this.isLoading = false
188 this.setProcessStatus(this.processNodeInfo) 208 this.setProcessStatus(this.processNodeInfo)
...@@ -213,6 +233,7 @@ export default { ...@@ -213,6 +233,7 @@ export default {
213 } 233 }
214 if (Array.isArray(finishedTaskSet)) { 234 if (Array.isArray(finishedTaskSet)) {
215 finishedTaskSet.forEach(item => canvas.addMarker(item, 'success')) 235 finishedTaskSet.forEach(item => canvas.addMarker(item, 'success'))
236 console.log(finishedTaskSet, 'finishedTaskSet');
216 } 237 }
217 if (Array.isArray(unfinishedTaskSet)) { 238 if (Array.isArray(unfinishedTaskSet)) {
218 unfinishedTaskSet.forEach(item => canvas.addMarker(item, 'primary')) 239 unfinishedTaskSet.forEach(item => canvas.addMarker(item, 'primary'))
...@@ -232,4 +253,15 @@ export default { ...@@ -232,4 +253,15 @@ export default {
232 } 253 }
233 } 254 }
234 } 255 }
235 </script>
...\ No newline at end of file ...\ No newline at end of file
256 </script>
257 <style scoped lang="scss">
258 .information-list {
259 height: 150px;
260 margin-top: 10px;
261
262 p {
263 font-size: 16px;
264 line-height: 24px;
265 }
266 }
267 </style>
...\ No newline at end of file ...\ No newline at end of file
......