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 @@
"vue-quill-editor": "^3.0.6",
"vue-router": "3.0.2",
"vue-seamless-scroll": "^1.1.23",
"vuex": "3.1.0"
"vuex": "3.1.0",
"x2js": "^3.4.4"
},
"devDependencies": {
"@vue/cli-plugin-babel": "4.4.4",
......
......@@ -11,6 +11,9 @@ import { startLoadingAddCount, endLoadingSubCount } from './utils/requestLoading
Vue.mixin(mixin);
Vue.use(Loading.directive);
import rules from './utils/rule.js'
// 引入xml
import x2js from 'x2js'
Vue.prototype.$x2js = new x2js()
// 全局方法挂载
Vue.prototype.$rules = rules
// 全局加载
......
<template>
<div class="process-viewer">
<div v-show="!isLoading" ref="processCanvas" class="process-canvas" style="height: 360px;" />
<!-- 自定义箭头样式，用于成功状态下流程连线箭头 -->
<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>
<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>
<!-- 已完成节点悬浮弹窗 -->
<el-dialog class="comment-dialog" :title="dlgTitle || '审批记录'" :visible.sync="dialogVisible" append-to-body>
<el-row>
<el-table :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="候选办理" prop="candidate" width="150px" align="center" />
<el-table-column label="实际办理" prop="assigneeName" width="100px" align="center" />
<el-table-column label="处理时间" prop="createTime" width="140px" align="center" />
<el-table-column label="办结时间" prop="finishTime" width="140px" align="center" />
<el-table-column label="耗时" prop="duration" width="100px" align="center" />
<el-table-column label="审批意见" align="center">
<template slot-scope="scope">
{{ scope.row.commentList&&scope.row.commentList[0]?scope.row.commentList[0].fullMessage:'' }}
</template>
</el-table-column>
</el-table>
</el-row>
</el-dialog>
<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 class="information-list">
<!-- <p>{{ dlgTitle ? dlgTitle : '浏览记录' }}</p> -->
<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 :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="候选办理" prop="candidate" minWidth="150px" align="center" />
<el-table-column label="实际办理" prop="assigneeName" minWidth="100px" align="center" />
<el-table-column label="处理时间" prop="createTime" width="140px" align="center" />
<el-table-column label="办结时间" prop="finishTime" width="140px" align="center" />
<el-table-column label="耗时" prop="duration" minWidth="100px" align="center" />
<el-table-column label="操作类型" align="center">
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import '@/styles/package/theme/index.scss'
import BpmnViewer from 'bpmn-js/lib/Viewer'
......@@ -75,7 +77,6 @@ export default {
},
data () {
return {
dialogVisible: false,
dlgTitle: undefined,
defaultZoom: 1,
// 是否正在加载流程图
......@@ -88,7 +89,10 @@ export default {
// 任务节点审批记录
taskCommentList: [],
// 已完成任务悬浮延迟Timer
hoverTimer: null
hoverTimer: null,
// 下拉
selectValue: '',
selectOptions: []
}
},
created () {
......@@ -160,10 +164,26 @@ export default {
this.taskCommentList = (this.formData.allCommentList || []).filter(item => {
return item.taskDefKey === this.selectTaskId
})
this.dialogVisible = true
},
// 下拉列表切换
handleSelect (val) {
this.taskCommentList = (this.formData.allCommentList || []).filter(item => {
return item.taskDefKey === val
})
},
// 显示流程图
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
}
}).filter(Boolean);
this.selectValue = xmlData.startEvent._id
this.clearViewer('a')
if (xml != null && xml !== '') {
try {
......@@ -178,11 +198,11 @@ export default {
this.bpmnViewer.on('element.click', ({ element }) => {
this.onSelectElement(element)
})
const c = await this.bpmnViewer.importXML(xml)
await this.bpmnViewer.importXML(xml)
this.isLoading = true
this.addCustomDefs()
} catch (e) {
// this.clearViewer('b')
this.clearViewer('b')
} finally {
this.isLoading = false
this.setProcessStatus(this.processNodeInfo)
......@@ -213,6 +233,7 @@ export default {
}
if (Array.isArray(finishedTaskSet)) {
finishedTaskSet.forEach(item => canvas.addMarker(item, 'success'))
console.log(finishedTaskSet, 'finishedTaskSet');
}
if (Array.isArray(unfinishedTaskSet)) {
unfinishedTaskSet.forEach(item => canvas.addMarker(item, 'primary'))
......@@ -232,4 +253,15 @@ export default {
}
}
}
</script>
\ No newline at end of file
</script>
<style scoped lang="scss">
.information-list {
height: 150px;
margin-top: 10px;
p {
font-size: 16px;
line-height: 24px;
}
}
</style>
\ No newline at end of file
......