<!-- * @Description: * @Autor: renchao * @LastEditTime: 2023-05-17 10:41:15 --> <template> <div> <div class="process-viewer"> <div v-show="!isLoading" ref="processCanvas" class="process-canvas" style="height: 280px;" /> <!-- 自定义箭头样式,用于成功状态下流程连线箭头 --> <defs ref="customSuccessDefs"> <marker id="sequenceflow-end-white-success" view-box="0 0 20 20" ref-x="11" ref-y="10" marker-width="10" marker-height="10" orient="auto"> <path class="success-arrow" d="M 1 5 L 11 10 L 1 15 Z" style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;" /> </marker> <marker id="conditional-flow-marker-white-success" view-box="0 0 20 20" ref-x="-1" ref-y="10" marker-width="10" marker-height="10" orient="auto"> <path class="success-conditional" d="M 0 10 L 8 6 L 16 10 L 8 14 Z" style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;" /> </marker> </defs> <!-- 自定义箭头样式,用于失败状态下流程连线箭头 --> <defs ref="customFailDefs"> <marker id="sequenceflow-end-white-fail" view-box="0 0 20 20" ref-x="11" ref-y="10" marker-width="10" marker-height="10" orient="auto"> <path class="fail-arrow" d="M 1 5 L 11 10 L 1 15 Z" style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;" /> </marker> <marker id="conditional-flow-marker-white-fail" view-box="0 0 20 20" ref-x="-1" ref-y="10" marker-width="10" marker-height="10" orient="auto"> <path class="fail-conditional" d="M 0 10 L 8 6 L 16 10 L 8 14 Z" style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;" /> </marker> </defs> <div style="position: absolute; top: 0px; left: 0px; width: 100%;"> <el-row type="flex" justify="end"> <el-button-group key="scale-control" size="medium"> <el-button size="medium" type="default" :plain="true" :disabled="defaultZoom <= 0.3" icon="el-icon-zoom-out" @click="processZoomOut()" /> <el-button size="medium" type="default" style="width: 90px;">{{ Math.floor(this.defaultZoom * 10 * 10) + "%" }}</el-button> <el-button size="medium" type="default" :plain="true" :disabled="defaultZoom >= 3.9" icon="el-icon-zoom-in" @click="processZoomIn()" /> <el-button size="medium" type="default" icon="el-icon-c-scale-to-original" @click="processReZoom()" /> <slot /> </el-button-group> </el-row> </div> </div> <!-- 已完成节点悬浮弹窗 --> <div class="information-list"> <el-select v-model="selectValue" @change="handleSelect"> <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> <el-table height="190" :data="taskCommentList" size="mini" border header-cell-class-name="table-header-gray"> <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" /> <el-table-column label="流程状态" header-align="center" align="center"> <template slot-scope="scope"> <div v-if="scope.row.endTime">已完结</div> <div v-else>正在办理</div> </template> </el-table-column> <el-table-column label="环节名称" prop="name" minWidth="100" align="center" /> <el-table-column label="办理人" prop="agent" minWidth="120" align="center" /> <el-table-column label="转入时间" prop="createTime" :formatter="formatDate" width="160" align="center" /> <el-table-column label="认领时间" prop="claimTime" :formatter="formatDate" width="160" align="center" /> <el-table-column label="转出时间" prop="endTime" :formatter="formatDate" width="160" align="center" /> <el-table-column label="操作方式" prop="controls" align="center"/> <el-table-column label="意见" prop="idea" align="center"/> </el-table> </div> </div> </template> <script> import '@/styles/package/theme/index.scss' import BpmnViewer from 'bpmn-js/lib/Viewer' import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas' export default { props: { formData: { type: Object, default: {} } }, data () { return { dlgTitle: undefined, defaultZoom: 1, // 是否正在加载流程图 isLoading: true, bpmnViewer: undefined, // 已完成流程元素 processNodeInfo: undefined, // 当前任务id selectTaskId: undefined, // 任务节点审批记录 taskList:[], taskCommentList: [], // 已完成任务悬浮延迟Timer hoverTimer: null, // 下拉 selectValue: '', selectOptions: [] } }, created () { this.$nextTick(() => { // 获取流程记录 this.getCommentList() this.setProcessStatus(this.formData.finishedInfo); this.importXML(this.formData.xml) }) }, destroyed () { this.clearViewer() }, methods: { formatDate(row, column) { let data = row[column.property] if(data == null) { return null } let dt = new Date(data) return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds() }, processReZoom () { this.defaultZoom = 1 this.bpmnViewer.get('canvas').zoom('fit-viewport', 'auto') }, processZoomIn (zoomStep = 0.1) { const newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100 if (newZoom > 4) { throw new Error('[Process Designer Warn ]: The zoom ratio cannot be greater than 4') } this.defaultZoom = newZoom this.bpmnViewer.get('canvas').zoom(this.defaultZoom) }, processZoomOut (zoomStep = 0.1) { const newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100 if (newZoom < 0.2) { throw new Error('[Process Designer Warn ]: The zoom ratio cannot be scss than 0.2') } this.defaultZoom = newZoom this.bpmnViewer.get('canvas').zoom(this.defaultZoom) }, getOperationTagType (type) { return 'success' }, // 流程图预览清空 clearViewer (a) { if (this.$refs.processCanvas) { this.$refs.processCanvas.innerHTML = '' } if (this.bpmnViewer) { this.bpmnViewer.destroy() } this.bpmnViewer = null }, // 添加自定义箭头 addCustomDefs () { const canvas = this.bpmnViewer.get('canvas') const svg = canvas._svg const customSuccessDefs = this.$refs.customSuccessDefs const customFailDefs = this.$refs.customFailDefs svg.appendChild(customSuccessDefs) svg.appendChild(customFailDefs) }, // 任务悬浮弹窗 onSelectElement (element) { this.selectTaskId = undefined this.dlgTitle = undefined let allfinishedTaskSet = [...this.processNodeInfo.finishedTaskSet, ...this.processNodeInfo.unfinishedTaskSet] if (this.processNodeInfo == null || allfinishedTaskSet == null) return if (element == null || allfinishedTaskSet.indexOf(element.id) === -1) { return } this.selectTaskId = element.id this.selectValue = element.id this.dlgTitle = element.businessObject ? element.businessObject.name : undefined // 计算当前悬浮任务审批记录,如果记录为空不显示弹窗 this.taskCommentList = (this.taskList || []).filter(item => { return item.taskDefinitionKey === this.selectTaskId }) if (this.taskCommentList.length==0) { this.taskCommentList = this.taskList; } }, // 下拉列表切换 handleSelect (val) { this.taskCommentList = (this.taskList || []).filter(item => { return item.taskDefinitionKey === val }) if (this.taskCommentList.length==0) { this.taskCommentList = this.taskList; } }, // 显示流程图 async importXML (xml) { let xmlData = this.$x2js.xml2js(xml).definitions.process; this.selectOptions = xmlData.userTask.map(item => { return { value: item._id, label: item._name } }) this.selectOptions = [{ value: xmlData.startEvent._id, label: '浏览记录' }, ...this.selectOptions] this.selectOptions = this.selectOptions.map(item => { if (this.formData.finishedInfo.finishedTaskSet.includes(item.value)) { return item } if (this.formData.finishedInfo.unfinishedTaskSet.includes(item.value)) { return item } }).filter(Boolean); this.selectValue = xmlData.startEvent._id this.clearViewer('a') if (xml != null && xml !== '') { try { this.bpmnViewer = new BpmnViewer({ additionalModules: [ // 移动整个画布 MoveCanvasModule ], container: this.$refs.processCanvas }) // 任务节点悬浮事件 this.bpmnViewer.on('element.click', ({ element }) => { this.onSelectElement(element) }) await this.bpmnViewer.importXML(xml) this.isLoading = true this.addCustomDefs() } catch (e) { this.clearViewer('b') } finally { this.isLoading = false this.setProcessStatus(this.processNodeInfo) this.$nextTick(() => { this.processReZoom() }) } } }, // 获取流程记录 getCommentList() { this.formData.allCommentList.forEach(async (item,index) => { item.comments.forEach(element => { if(element.type=="COMPLETE"){ this.formData.allCommentList[index].idea=element.message this.formData.allCommentList[index].controls="完成" } }); this.formData.allCommentList[index].agent=item.assignee.name }) this.formData.handlinglist.forEach(async (item,index) => { if(item.assignee.name){ this.formData.handlinglist[index].agent=item.assignee.name }else{ let str="" item.countersign.forEach((item) => { str+=item.name+"," }) str=str.slice(0, -1); this.formData.allCommentList[index].agent=str } }) this.taskList =[...this.formData.allCommentList,...this.formData.handlinglist]; // this.taskList =this.formData.allCommentList; // 处理数据之后赋值 this.taskCommentList=this.taskList }, // 设置流程图元素状态 setProcessStatus (processNodeInfo) { this.processNodeInfo = processNodeInfo if (this.isLoading || this.processNodeInfo == null || this.bpmnViewer == null) return const { finishedTaskSet, rejectedTaskSet, unfinishedTaskSet, finishedSequenceFlowSet } = this.processNodeInfo const canvas = this.bpmnViewer.get('canvas') const elementRegistry = this.bpmnViewer.get('elementRegistry') if (Array.isArray(finishedSequenceFlowSet)) { finishedSequenceFlowSet.forEach(item => { if (item != null) { canvas.addMarker(item, 'success') const element = elementRegistry.get(item) const conditionExpression = element.businessObject.conditionExpression if (conditionExpression) { canvas.addMarker(item, 'condition-expression') } } }) } if (Array.isArray(finishedTaskSet)) { finishedTaskSet.forEach(item => canvas.addMarker(item, 'success')) } if (Array.isArray(unfinishedTaskSet)) { unfinishedTaskSet.forEach(item => canvas.addMarker(item, 'primary')) } if (Array.isArray(rejectedTaskSet)) { rejectedTaskSet.forEach(item => { if (item != null) { const element = elementRegistry.get(item) if (element.type.includes('Task')) { canvas.addMarker(item, 'danger') } else { canvas.addMarker(item, 'warning') } } }) } } } } </script> <style scoped lang="scss"> .information-list { height: 220px; margin-top: 10px; p { font-size: 16px; line-height: 24px; } } /deep/.bjs-powered-by { display: none; } // /deep/.information-list { // height: 170px; // overflow: visible; // } </style>