<template>
|
<el-dialog
|
class=" nf-dialog"
|
v-model="visible"
|
title="流程配置"
|
append-to-body
|
destroy-on-close
|
:close-on-press-escape="false"
|
:fullscreen="true"
|
:before-close="handleNutflowClose"
|
@closed="visible = false"
|
>
|
<nf-design-base
|
v-if="nutflowOption.step === 1"
|
class="animated fadeIn"
|
style="height: calc(100vh - 108px)"
|
ref="nfDesignRef"
|
:options="nutflowOption.step1"
|
></nf-design-base>
|
<nf-design-base
|
v-if="nutflowOption.step === 2"
|
class="animated fadeIn"
|
style="height: calc(100vh - 108px)"
|
ref="nfDesignViewRef"
|
:options="nutflowOption.step2"
|
></nf-design-base>
|
<template #footer>
|
<span class="avue-dialog__footer">
|
<el-button @click="handleNutflowClose(() => {}, true)">取 消</el-button>
|
<el-button color="#4C34FF" v-if="nutflowOption.step === 1" type="success" @click="handleStep(1)">下 一 步</el-button>
|
<el-button color="#4C34FF" v-if="nutflowOption.step === 2" type="success" @click="handleStep(-1)">上 一 步</el-button>
|
<el-button v-if="nutflowOption.step === 2" type="primary" @click="handleSubmitModel">确 定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { submitModel, detail } from '@/api/flow/flow'
|
import { ElMessageBox, ElMessage } from 'element-plus'
|
|
export default {
|
data() {
|
return {
|
visible: false,
|
nutflowOption: {
|
process: {},
|
step: 1,
|
step1: {
|
toolbar: ['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo', 'import', 'preview'],
|
},
|
step2: {
|
mode: 'view',
|
simulation: true,
|
minimap: true,
|
},
|
},
|
}
|
},
|
methods: {
|
// 打开弹框
|
open(row) {
|
this.visible = true
|
if (row) {
|
detail({ id: row.id }).then(res => {
|
const data = res.data.data
|
const { modelEditorXml } = data
|
this.nutflowOption.step1.xml = modelEditorXml
|
this.nutflowOption.process = data
|
})
|
}
|
},
|
// 提交流程模型
|
handleSubmitModel() {
|
const registry = this.$refs['nfDesignViewRef'].getElementRegistry().getAll()
|
const { businessObject } = registry[0]
|
const { id, name, documentation } = businessObject
|
const description = documentation && documentation.length > 0 ? documentation[0].text : null
|
const params = {
|
...this.nutflowOption.process,
|
modelKey: id,
|
name,
|
description,
|
modelEditorXml: this.nutflowOption.process.xml,
|
}
|
submitModel(params).then(() => {
|
ElMessage.success('操作成功')
|
this.handleNutflowClose()
|
this.$emit('success')
|
})
|
},
|
// 步骤切换
|
handleStep(step) {
|
if (step === 1) {
|
// 下一步
|
this.$refs['nfDesignRef'].getData('xml').then(data => {
|
this.nutflowOption.step1.xml = data
|
this.nutflowOption.step2.xml = data
|
this.nutflowOption.process.xml = data
|
this.nutflowOption.step = 2
|
})
|
} else {
|
this.nutflowOption.step = 1
|
}
|
},
|
// 关闭弹框处理
|
handleNutflowClose(done, flag) {
|
const initOption = {
|
process: {},
|
step: 1,
|
step1: {
|
toolbar: ['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo', 'import', 'preview'],
|
},
|
step2: {
|
mode: 'view',
|
simulation: true,
|
minimap: true,
|
},
|
}
|
if (done || flag) {
|
ElMessageBox.confirm('确定要关闭吗？关闭未保存的修改都会丢失。', '警告', {
|
type: 'warning',
|
})
|
.then(() => {
|
this.nutflowOption = initOption
|
if (typeof done === 'function') done()
|
this.visible = false
|
})
|
.catch(() => {})
|
} else {
|
this.nutflowOption = initOption
|
this.visible = false
|
}
|
},
|
},
|
}
|
</script>
|
|
<style scoped lang="scss">
|
:deep() {
|
/* 隐藏右下角的 BPMN.io 标识 */
|
.bjs-powered-by,
|
.bjs-powered-by *,
|
.bjs-powered-by-overlay,
|
[data-id="logo-bpmn-io"],
|
.bpmn-io-logo,
|
[data-overlay-id="powered-by"],
|
.overlay-sidebar-powered-by,
|
a[href="https://bpmn.io"] {
|
display: none !important;
|
}
|
}
|
</style>
|
