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 @@
"vue-router": "3.0.2",
"vuex": "3.1.0",
"bpmn-js": "^7.4.0",
"diagram-js": "^6.8.2"
"diagram-js": "^6.8.2",
"bpmn-js-properties-panel": "^0.37.2",
"bpmn-js-token-simulation": "^0.10.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "4.4.4",
......@@ -74,4 +76,4 @@
"type": "git",
"url": "git+https://github.com/PanJiaChen/vue-element-admin.git"
}
}
}
\ No newline at end of file
......
......@@ -47,13 +47,13 @@ export function logoutReg (data) {
})
}
// 流程图
export function getWorkFlowImage (bsmSlsq) {
export function getWorkFlowImage (bsmSlsq, bestepid) {
return request({
url: '/business/workFlow/getWorkFlowImage',
method: 'get',
responseType: 'blob',
params: {
bsmSlsq: bsmSlsq
bsmSlsq: bsmSlsq,
bestepid: bestepid
}
})
}
......
......@@ -55,21 +55,21 @@ export default {
},
mounted () {
// 计算滚动条高度
setTimeout(() => {
if (this.btnShow) { //判断按钮的显影来决定是否需要计算高度
if (this.height == 'auto') {
this.contentHeight = (this.$refs.contentRef.offsetHeight - 100) + 'px'
} else {
this.contentHeight = this.height
}
} else {
if (this.height == 'auto') {
this.contentHeight = this.$refs.contentRef.offsetHeight
} else {
this.contentHeight = this.height
}
}
}, 500)
// setTimeout(() => {
// if (this.btnShow) {
// if (this.height == 'auto') {
// this.contentHeight = (this.$refs.contentRef.offsetHeight - 200) + 'px'
// } else {
// this.contentHeight = this.height
// }
// } else {
// if (this.height == 'auto') {
// this.contentHeight = this.$refs.contentRef.offsetHeight
// } else {
// this.contentHeight = this.height
// }
// }
// }, 500)
},
methods: {
onCancel () {
......
......@@ -22,7 +22,6 @@ router.beforeEach(async (to, from, next) => {
const { result: getMenuData } = await getMenuInfo()
const accessRoutes = await store.dispatch('permission/generateRoutes', getMenuData)
router.addRoutes(accessRoutes)
console.log(router);
next({ ...to, replace: true })
}
NProgress.done()
......
/* 改变主题色变量 */
// $--color-primary: #1890ff;
// $--color-danger: #ff4d4f;
/* 改变 icon 字体路径变量，必需 */
.process-drawer .el-drawer__header {
padding: 16px 16px 8px 16px;
margin: 0;
line-height: 24px;
font-size: 18px;
color: #303133;
box-sizing: border-box;
border-bottom: 1px solid #e8e8e8;
}
div[class^="el-drawer"]:focus,
span:focus {
outline: none;
}
.process-drawer .el-drawer__body {
box-sizing: border-box;
padding: 16px;
width: 100%;
overflow-y: auto;
}
.process-design {
.el-table td,
.el-table th {
color: #333;
}
.el-dialog__header {
padding: 16px 16px 8px 16px;
box-sizing: border-box;
border-bottom: 1px solid #e8e8e8;
}
.el-dialog__body {
padding: 16px;
max-height: 80vh;
box-sizing: border-box;
overflow-y: auto;
}
.el-dialog__footer {
padding: 16px;
box-sizing: border-box;
border-top: 1px solid #e8e8e8;
}
.el-dialog__close {
font-weight: 600;
}
.el-select {
width: 100%;
}
.el-divider:not(.el-divider--horizontal) {
margin: 0 8px ;
}
.el-divider.el-divider--horizontal {
margin: 16px 0;
}
}
@import "./flow-element-variables.scss";
@import "~bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css";
@import "~bpmn-js-token-simulation/assets/css/font-awesome.min.css";
@import "~bpmn-js-token-simulation/assets/css/normalize.css";
@import "~bpmn-js/dist/assets/diagram-js.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
@import "./process-designer.scss";
@import "./process-panel.scss";
$success-color: #4eb819;
$primary-color: #409EFF;
$warning-color: #E6A23C;
$danger-color: #F56C6C;
$cancel-color: #909399;
.process-viewer {
position: relative;
border: 1px solid #EFEFEF;
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+') repeat!important;
.success-arrow {
fill: $success-color;
stroke: $success-color;
}
.success-conditional {
fill: white;
stroke: $success-color;
}
.fail-arrow {
fill: $warning-color;
stroke: $warning-color;
}
.fail-conditional {
fill: white;
stroke: $warning-color;
}
.success.djs-connection {
.djs-visual path {
stroke: $success-color!important;
marker-end: url(#sequenceflow-end-white-success)!important;
}
}
.success.djs-connection.condition-expression {
.djs-visual path {
marker-start: url(#conditional-flow-marker-white-success)!important;
}
}
.success.djs-shape {
.djs-visual rect {
stroke: $success-color!important;
fill: $success-color!important;
fill-opacity: 0.15!important;
}
.djs-visual polygon {
stroke: $success-color!important;
}
.djs-visual path:nth-child(2) {
stroke: $success-color!important;
fill: $success-color!important;
}
.djs-visual circle {
stroke: $success-color!important;
fill: $success-color!important;
fill-opacity: 0.15!important;
}
}
.primary.djs-shape {
.djs-visual rect {
stroke: $primary-color!important;
fill: $primary-color!important;
fill-opacity: 0.15!important;
}
.djs-visual polygon {
stroke: $primary-color!important;
}
.djs-visual circle {
stroke: $primary-color!important;
fill: $primary-color!important;
fill-opacity: 0.15!important;
}
}
.warning.djs-connection {
.djs-visual path {
stroke: $warning-color!important;
marker-end: url(#sequenceflow-end-white-fail)!important;
}
}
.warning.djs-connection.condition-expression {
.djs-visual path {
marker-start: url(#conditional-flow-marker-white-fail)!important;
}
}
.warning.djs-shape {
.djs-visual rect {
stroke: $warning-color!important;
fill: $warning-color!important;
fill-opacity: 0.15!important;
}
.djs-visual polygon {
stroke: $warning-color!important;
}
.djs-visual path:nth-child(2) {
stroke: $warning-color!important;
fill: $warning-color!important;
}
.djs-visual circle {
stroke: $warning-color!important;
fill: $warning-color!important;
fill-opacity: 0.15!important;
}
}
.danger.djs-shape {
.djs-visual rect {
stroke: $danger-color!important;
fill: $danger-color!important;
fill-opacity: 0.15!important;
}
.djs-visual polygon {
stroke: $danger-color!important;
}
.djs-visual circle {
stroke: $danger-color!important;
fill: $danger-color!important;
fill-opacity: 0.15!important;
}
}
.cancel.djs-shape {
.djs-visual rect {
stroke: $cancel-color!important;
fill: $cancel-color!important;
fill-opacity: 0.15!important;
}
.djs-visual polygon {
stroke: $cancel-color!important;
}
.djs-visual circle {
stroke: $cancel-color!important;
fill: $cancel-color!important;
fill-opacity: 0.15!important;
}
}
}
.process-viewer .djs-tooltip-container, .process-viewer .djs-overlay-container, .process-viewer .djs-palette {
display: none;
}
// 边框被 token-simulation 样式覆盖了
.djs-palette {
background: var(--palette-background-color);
border: solid 1px var(--palette-border-color) !important;
border-radius: 2px;
}
.my-process-designer {
padding: 5px 0 10px 10px;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
box-sizing: border-box;
.my-process-designer__header {
width: 100%;
min-height: 36px;
.el-button {
text-align: center;
}
.el-button-group {
margin: 4px;
}
.el-tooltip__popper {
.el-button {
width: 100%;
text-align: left;
padding-left: 8px;
padding-right: 8px;
}
.el-button:hover {
background: rgba(64, 158, 255, 0.8);
color: #ffffff;
}
}
.align {
position: relative;
i {
&:after {
content: "|";
position: absolute;
transform: rotate(90deg) translate(200%, 60%);
}
}
}
.align.align-left i {
transform: rotate(90deg);
}
.align.align-right i {
transform: rotate(-90deg);
}
.align.align-top i {
transform: rotate(180deg);
}
.align.align-bottom i {
transform: rotate(0deg);
}
.align.align-center i {
transform: rotate(90deg);
&:after {
transform: rotate(90deg) translate(0, 60%);
}
}
.align.align-middle i {
transform: rotate(0deg);
&:after {
transform: rotate(90deg) translate(0, 60%);
}
}
}
.my-process-designer__container {
display: inline-flex;
width: 100%;
flex: 1;
.my-process-designer__canvas {
flex: 1;
height: 100%;
position: relative;
background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+")
repeat !important;
div.toggle-mode {
display: none;
}
}
.my-process-designer__property-panel {
height: 100%;
overflow: scroll;
overflow-y: auto;
z-index: 10;
* {
box-sizing: border-box;
}
}
svg {
width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden;
}
}
}
//侧边栏配置
.djs-palette.open {
.djs-palette-entries {
div[class^="bpmn-icon-"]:before,
div[class*="bpmn-icon-"]:before {
line-height: unset;
}
div.entry {
position: relative;
}
div.entry:hover {
&::after {
width: max-content;
content: attr(title);
vertical-align: text-bottom;
position: absolute;
right: -10px;
top: 0;
bottom: 0;
overflow: hidden;
transform: translateX(100%);
font-size: 0.5em;
display: inline-block;
text-decoration: inherit;
font-variant: normal;
text-transform: none;
background: #fafafa;
box-shadow: 0 0 6px #eeeeee;
border: 1px solid #cccccc;
box-sizing: border-box;
padding: 0 16px;
border-radius: 4px;
z-index: 100;
}
}
}
}
pre {
margin: 0;
height: 100%;
overflow: hidden;
max-height: calc(80vh - 32px);
overflow-y: auto;
}
.hljs {
word-break: break-word;
white-space: pre-wrap;
}
.hljs * {
font-family: Consolas, Monaco, monospace;
}
.process-design {
.process-panel__container {
box-sizing: border-box;
padding: 0 8px;
border-left: 1px solid #eeeeee;
box-shadow: 0 0 8px #cccccc;
max-height: 100%;
overflow-y: scroll;
}
.panel-tab__title {
font-weight: 600;
padding: 0 8px;
font-size: 1.1em;
line-height: 1.2em;
i {
margin-right: 8px;
font-size: 1.2em;
}
}
.panel-tab__content {
width: 100%;
box-sizing: border-box;
border-top: 1px solid #eeeeee;
padding: 8px 16px;
.panel-tab__content--title {
display: flex;
justify-content: space-between;
padding-bottom: 8px;
span {
flex: 1;
text-align: left;
}
}
}
.element-property {
width: 100%;
display: flex;
align-items: flex-start;
margin: 8px 0;
.element-property__label {
display: block;
width: 90px;
text-align: right;
overflow: hidden;
padding-right: 12px;
line-height: 32px;
font-size: 14px;
box-sizing: border-box;
}
.element-property__value {
flex: 1;
line-height: 32px;
}
.el-form-item {
width: 100%;
margin-bottom: 0;
padding-bottom: 18px;
}
}
.list-property {
flex-direction: column;
.element-listener-item {
width: 100%;
display: inline-grid;
grid-template-columns: 16px auto 32px 32px;
grid-column-gap: 8px;
}
.element-listener-item + .element-listener-item {
margin-top: 8px;
}
}
.listener-filed__title {
display: inline-flex;
width: 100%;
justify-content: space-between;
align-items: center;
margin-top: 0;
span {
width: 200px;
text-align: left;
font-size: 14px;
}
i {
margin-right: 8px;
}
}
.element-drawer__button {
margin-top: 8px;
width: 100%;
display: inline-flex;
justify-content: space-around;
}
.element-drawer__button > .el-button {
width: 100%;
}
.el-collapse-item__content {
padding-bottom: 0;
}
.el-input.is-disabled .el-input__inner {
color: #999999;
}
.el-form-item.el-form-item--mini {
margin-bottom: 0;
& + .el-form-item {
margin-top: 16px;
}
}
}
<template>
<div class="process-viewer">
<div v-show="!isLoading" ref="processCanvas" class="process-canvas" style="height: 100%;" />
<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"
......@@ -63,21 +63,18 @@
</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: {
// eslint-disable-next-line vue/require-default-prop
xml: {
type: String
},
// eslint-disable-next-line vue/require-default-prop
finishedInfo: {
type: Object
},
// 所有节点审批记录
// eslint-disable-next-line vue/require-default-prop
allCommentList: {
type: Array
}
......@@ -88,7 +85,7 @@ export default {
dlgTitle: undefined,
defaultZoom: 1,
// 是否正在加载流程图
isLoading: false,
isLoading: true,
bpmnViewer: undefined,
// 已完成流程元素
processNodeInfo: undefined,
......@@ -100,24 +97,24 @@ export default {
hoverTimer: null
}
},
watch: {
xml: {
handler (newXml) {
this.importXML(newXml)
},
immediate: true
},
finishedInfo: {
handler (newInfo) {
this.setProcessStatus(newInfo)
},
immediate: true
}
},
// watch: {
// xml: {
// handler (newXml) {
// this.importXML(newXml)
// },
// immediate: true
// },
// finishedInfo: {
// handler (newInfo) {
// this.setProcessStatus(newInfo)
// },
// immediate: true
// }
// },
created () {
this.$nextTick(() => {
this.importXML(this.xml)
this.setProcessStatus(this.finishedInfo)
this.setProcessStatus(this.finishedInfo);
})
},
destroyed () {
......@@ -146,19 +143,6 @@ export default {
},
getOperationTagType (type) {
return 'success'
// switch (type) {
// case this.SysFlowTaskOperationType.AGREE:
// case this.SysFlowTaskOperationType.MULTI_AGREE:
// return 'success';
// case this.SysFlowTaskOperationType.REFUSE:
// case this.SysFlowTaskOperationType.PARALLEL_REFUSE:
// case this.SysFlowTaskOperationType.MULTI_REFUSE:
// return 'warning';
// case this.SysFlowTaskOperationType.STOP:
// return 'danger'
// default:
// return 'primary';
// }
},
// 流程图预览清空
clearViewer (a) {
......@@ -214,9 +198,8 @@ export default {
this.bpmnViewer.on('element.click', ({ element }) => {
this.onSelectElement(element)
})
this.isLoading = true
const c = await this.bpmnViewer.importXML(xml)
this.isLoading = true
this.addCustomDefs()
} catch (e) {
// this.clearViewer('b')
......
......@@ -63,6 +63,10 @@
</div>
</div>
<fqsqDialog v-model="isDialog" :djywbm="$route.query.sqywbm" :isJump="true" @updateDialog="updateDialog" />
<dialogBox title="流程图" width="60%" v-model="myValue" @closeDialog="closeDialog">
<process-viewer :key="`designer-${loadIndex}`" style="height:500px" :xml="xmlData" :finished-info="finishedInfo"
:all-comment-list="historyTaskList" @ch="changeLoadIndex" />
</dialogBox>
</div>
</template>
......@@ -79,6 +83,7 @@ import {
completeTask,
} from "@/api/fqsq.js";
import { deleteBdcdy } from "@/api/ywbl.js";
import ProcessViewer from './components/processViewer.vue'
import { getWorkFlowImage } from "@/api/jsydsyqFlow.js";
import { getForm } from "./flowform.js";
import fqsqDialog from "@/views/ywbl/ywsq/slectBdc.vue";
......@@ -86,12 +91,17 @@ import { queueDjywmc } from "@/views/ywbl/ywsq/slectBdcdata.js";
export default {
components: {
fqsqDialog,
ProcessViewer
},
data () {
return {
isDialog: false,
// 流程图
imgSrc: "",
myValue: false,
loadIndex: 0,
xmlData: '',
finishedInfo: {},
historyTaskList: [],
// 折叠
isShowdrawer: true,
// 默认选中
......@@ -131,6 +141,12 @@ export default {
this.flowInitParam();
},
methods: {
changeLoadIndex () {
this.loadIndex++
},
closeDialog () {
this.myValue = false
},
// 更新列表
updateDialog () {
this.loadBdcdylist();
......@@ -216,16 +232,34 @@ export default {
this.isDialog = true;
break;
case "B1":
getWorkFlowImage(this.bsmSlsq).then((res) => {
this.imgSrc = URL.createObjectURL(res);
this.$popup({
title: "流程图",
btnShow: true,
height: '250px',
editItem: "workflow/components/flowChart",
formData: this.imgSrc,
});
});
getWorkFlowImage(this.bsmSlsq, this.$route.query.bestepid).then(res => {
let { result } = res
this.myValue = true
this.loadIndex++
this.xmlData = result.xml
this.finishedInfo = {
finishedTaskSet: result.finishedTaskSet,
unfinishedTaskSet: result.unfinishedTaskSet,
rejectedTaskSet: result.rejectedTaskSet,
finishedSequenceFlowSet: result.finishedSequenceFlowSet
}
this.allCommentList = result.historyTaskList
// this.$popup({
// title: "流程图",
// height: '500px',
// editItem: "workflow/components/processViewer",
// formData: {
// xml: result.xml,
// finishedInfo: {
// finishedTaskSet: result.finishedTaskSet,
// unfinishedTaskSet: result.unfinishedTaskSet,
// rejectedTaskSet: result.rejectedTaskSet,
// finishedSequenceFlowSet: result.finishedSequenceFlowSet
// },
// allCommentList: result.historyTaskList
// }
// })
})
break;
case "B2": //材料分屏按钮
this.splitScreen = this.splitScreen ? false : true;
......