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 62 additions and 26 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>
2 <div class="process-viewer"> 3 <div class="process-viewer">
3 <div v-show="!isLoading" ref="processCanvas" class="process-canvas" style="height: 360px;" /> 4 <div v-show="!isLoading" ref="processCanvas" class="process-canvas" style="height: 280px;" />
4 <!-- 自定义箭头样式，用于成功状态下流程连线箭头 --> 5 <!-- 自定义箭头样式，用于成功状态下流程连线箭头 -->
5 <defs ref="customSuccessDefs"> 6 <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" 7 <marker id="sequenceflow-end-white-success" view-box="0 0 20 20" ref-x="11" ref-y="10" marker-width="10"
...@@ -27,24 +28,7 @@ ...@@ -27,24 +28,7 @@
27 style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;" /> 28 style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;" />
28 </marker> 29 </marker>
29 </defs> 30 </defs>
30 <!-- 已完成节点悬浮弹窗 --> 31
31 <el-dialog class="comment-dialog" :title="dlgTitle || '审批记录'" :visible.sync="dialogVisible" append-to-body>
32 <el-row>
33 <el-table :data="taskCommentList" size="mini" border header-cell-class-name="table-header-gray">
34 <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" />
35 <el-table-column label="候选办理" prop="candidate" width="150px" align="center" />
36 <el-table-column label="实际办理" prop="assigneeName" width="100px" align="center" />
37 <el-table-column label="处理时间" prop="createTime" width="140px" align="center" />
38 <el-table-column label="办结时间" prop="finishTime" width="140px" align="center" />
39 <el-table-column label="耗时" prop="duration" width="100px" align="center" />
40 <el-table-column label="审批意见" align="center">
41 <template slot-scope="scope">
42 {{ scope.row.commentList&&scope.row.commentList[0]?scope.row.commentList[0].fullMessage:'' }}
43 </template>
44 </el-table-column>
45 </el-table>
46 </el-row>
47 </el-dialog>
48 <div style="position: absolute; top: 0px; left: 0px; width: 100%;"> 32 <div style="position: absolute; top: 0px; left: 0px; width: 100%;">
49 <el-row type="flex" justify="end"> 33 <el-row type="flex" justify="end">
50 <el-button-group key="scale-control" size="medium"> 34 <el-button-group key="scale-control" size="medium">
...@@ -60,8 +44,26 @@ ...@@ -60,8 +44,26 @@
60 </el-row> 44 </el-row>
61 </div> 45 </div>
62 </div> 46 </div>
47 <!-- 已完成节点悬浮弹窗 -->
48 <div class="information-list">
49 <!-- <p>{{ dlgTitle ? dlgTitle : '浏览记录' }}</p> -->
50 <el-select v-model="selectValue" @change="handleSelect">
51 <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
52 </el-option>
53 </el-select>
54 <el-table :data="taskCommentList" size="mini" border header-cell-class-name="table-header-gray">
55 <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" />
56 <el-table-column label="候选办理" prop="candidate" minWidth="150px" align="center" />
57 <el-table-column label="实际办理" prop="assigneeName" minWidth="100px" align="center" />
58 <el-table-column label="处理时间" prop="createTime" width="140px" align="center" />
59 <el-table-column label="办结时间" prop="finishTime" width="140px" align="center" />
60 <el-table-column label="耗时" prop="duration" minWidth="100px" align="center" />
61 <el-table-column label="操作类型" align="center">
62 </el-table-column>
63 </el-table>
64 </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'))
...@@ -233,3 +254,14 @@ export default { ...@@ -233,3 +254,14 @@ export default {
233 } 254 }
234 } 255 }
235 </script> 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
......