| 提交 | 用户 | 时间 | ||
| 722af2 | 1 | <template> |
| X | 2 | <div class="process-design" :style="'display: flex; height:' + height"> |
| 3 | <bpmn-process-designer | |
| 4 | v-model="xmlString" | |
| 5 | v-bind="controlForm" | |
| 6 | keyboard | |
| 7 | ref="processDesigner" | |
| 8 | :events="[ | |
| 9 | 'element.click', | |
| 10 | 'connection.added', | |
| 11 | 'connection.removed', | |
| 12 | 'connection.changed' | |
| 13 | ]" | |
| 14 | @element-click="elementClick" | |
| 15 | @init-finished="initModeler" | |
| 16 | @event="handlerEvent" | |
| 17 | @save="onSaveProcess" | |
| 18 | /> | |
| 19 | <bmpn-process-penal :bpmn-modeler="modeler" :prefix="controlForm.prefix" class="process-panel" /> | |
| 20 | </div> | |
| 21 | </template> | |
| 22 | ||
| 23 | <script> | |
| 24 | import Vue from 'vue'; | |
| 25 | import '@/plugins/package/theme/index.scss'; | |
| 26 | import { BpmnProcessDesigner, BmpnProcessPenal } from '@/plugins/package/index'; | |
| 27 | // 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务） | |
| 28 | import CustomContentPadProvider from '@/plugins/package/designer/plugins/content-pad'; | |
| 29 | // 自定义左侧菜单（修改 默认任务 为 用户任务） | |
| 30 | import CustomPaletteProvider from '@/plugins/package/designer/plugins/palette'; | |
| 31 | import { vuePlugin } from '@/plugins/package/highlight'; | |
| 32 | import 'highlight.js/styles/atom-one-dark-reasonable.css'; | |
| 33 | Vue.use(vuePlugin); | |
| 34 | ||
| 35 | export default { | |
| 36 | name: 'ProcessDesigner', | |
| 37 | props: { | |
| 38 | bpmnXml: { | |
| 39 | type: String, | |
| 40 | required: true | |
| 41 | }, | |
| 42 | designerForm: { | |
| 43 | type: Object, | |
| 44 | required: true | |
| 45 | } | |
| 46 | }, | |
| 47 | components: { | |
| 48 | BpmnProcessDesigner, | |
| 49 | BmpnProcessPenal | |
| 50 | }, | |
| 51 | data () { | |
| 52 | return { | |
| 53 | height: document.documentElement.clientHeight - 94.5 + "px;", | |
| 54 | xmlString: this.bpmnXml, | |
| 55 | modeler: null, | |
| 56 | controlForm: { | |
| 57 | processId: this.designerForm.processKey || '', | |
| 58 | processName: this.designerForm.processName || '', | |
| 59 | simulation: false, | |
| 60 | labelEditing: false, | |
| 61 | labelVisible: false, | |
| 62 | prefix: 'flowable', | |
| 63 | headerButtonSize: 'small', | |
| 64 | additionalModel: [CustomContentPadProvider, CustomPaletteProvider] | |
| 65 | } | |
| 66 | } | |
| 67 | }, | |
| 68 | methods: { | |
| 69 | elementClick (element) { | |
| 70 | this.element = element; | |
| 71 | }, | |
| 72 | initModeler (modeler) { | |
| 73 | setTimeout(() => { | |
| 74 | this.modeler = modeler; | |
| 75 | }, 10); | |
| 76 | }, | |
| 77 | handlerEvent (eventName, element) { | |
| 78 | }, | |
| 79 | onSaveProcess (saveData) { | |
| 80 | this.$emit('save', saveData); | |
| 81 | } | |
| 82 | } | |
| 83 | } | |
| 84 | </script> | |
| 85 | ||
| 86 | <style lang="scss"> | |
| 87 | body { | |
| 88 | overflow: auto !important; | |
| 89 | margin: 0; | |
| 90 | box-sizing: border-box; | |
| 91 | } | |
| 92 | body, | |
| 93 | body * { | |
| 94 | /* 滚动条 */ | |
| 95 | &::-webkit-scrollbar-track-piece { | |
| 96 | background-color: #fff; /*滚动条的背景颜色*/ | |
| 97 | -webkit-border-radius: 0; /*滚动条的圆角宽度*/ | |
| 98 | } | |
| 99 | ||
| 100 | &::-webkit-scrollbar { | |
| 101 | width: 10px; /*滚动条的宽度*/ | |
| 102 | height: 8px; /*滚动条的高度*/ | |
| 103 | } | |
| 104 | ||
| 105 | &::-webkit-scrollbar-thumb:vertical { | |
| 106 | /*垂直滚动条的样式*/ | |
| 107 | height: 50px; | |
| 108 | background-color: rgba(153, 153, 153, 0.5); | |
| 109 | -webkit-border-radius: 4px; | |
| 110 | outline: 2px solid #fff; | |
| 111 | outline-offset: -2px; | |
| 112 | border: 2px solid #fff; | |
| 113 | } | |
| 114 | ||
| 115 | &::-webkit-scrollbar-thumb { | |
| 116 | /*滚动条的hover样式*/ | |
| 117 | background-color: rgba(159, 159, 159, 0.3); | |
| 118 | -webkit-border-radius: 4px; | |
| 119 | } | |
| 120 | ||
| 121 | &::-webkit-scrollbar-thumb:hover { | |
| 122 | /*滚动条的hover样式*/ | |
| 123 | background-color: rgba(159, 159, 159, 0.5); | |
| 124 | -webkit-border-radius: 4px; | |
| 125 | } | |
| 126 | } | |
| 127 | </style> | |
