| | |
| | | <template> |
| | | <!--流程模板定义--> |
| | | <basic-container style="height: calc(100vh - 123px)"> |
| | | <div style="margin-bottom: 5px;"> |
| | | <div style="margin-bottom: 10px;"> |
| | | 流程分类: |
| | | <el-select v-model="tempType" :clearable="true" placeholder="请选择" size="small" |
| | | style="width: 300px;margin-right: 20px;" |
| | |
| | | </span> |
| | | </el-button> |
| | | </template> |
| | | |
| | | </avue-crud> |
| | | <!-- 创建编辑自定义对话框 --> |
| | | <el-dialog |
| | | v-dialogDrag |
| | | v-loading="dialogLoading" |
| | | :title="dialogType === 'add' ? ' 创建' : '编辑'" |
| | | title="流程自定义" |
| | | :visible.sync="dialogVisible" |
| | | append-to-body="true" |
| | | class="avue-dialog" |
| | | width="1000px" |
| | | @close="dialogClose" |
| | | :close-on-press-escape="false" |
| | | :fullscreen="true" |
| | | :before-close="handleNutflowClose" |
| | | custom-class="wf-dialog" |
| | | > |
| | | <wf-design-base v-if="nutflowOption.step === 1" |
| | | class="animated fadeIn" |
| | | style="height: calc(100vh - 178px);" |
| | | ref="wf-design" |
| | | :options="nutflowOption.step1"></wf-design-base> |
| | | <wf-design-base v-if="nutflowOption.step === 2" |
| | | class="animated fadeIn" |
| | | style="height: calc(100vh - 178px);" |
| | | ref="wf-design-view" |
| | | :options="nutflowOption.step2"></wf-design-base> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button size="small" type="primary" @click="saveHandler">确 定</el-button> |
| | | <el-button size="small" @click="dialogClose">取 消</el-button> |
| | | <el-button v-if="nutflowOption.step === 1" |
| | | size="small" |
| | | type="success" |
| | | @click="handleStep(1)">下 一 步</el-button> |
| | | <el-button v-if="nutflowOption.step === 2" |
| | | size="small" |
| | | type="success" |
| | | @click="handleStep(-1)">上 一 步</el-button> |
| | | <el-button v-if="nutflowOption.step === 2" |
| | | size="small" |
| | | type="primary" |
| | | @click="handleSubmitModel">确 定</el-button> |
| | | <el-button size="small" |
| | | @click="handleNutflowClose(() => {}, true)">取 消</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | <!-- 导入 --> |
| | |
| | | |
| | | <el-main width="60%"> |
| | | <div style="height: 100%;position: relative;"> |
| | | <flow-design style="padding-top: 5px" :is-display.sync="flowBox" :process-definition-id="processDefinitionId" height="calc(100vh - 190px)"></flow-design> |
| | | <flow-design style="padding-top: 5px" :is-display.sync="flowBox" :process-definition-id="processDefinitionId" height="calc(100vh - 195px)"></flow-design> |
| | | <div style="position: absolute;top:0;left: 0;height: 100%;width: 100%"></div> |
| | | </div> |
| | | </el-main> |
| | |
| | | dialogType:'add', |
| | | processDefinitionId: '', |
| | | flowBox: 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, |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | computed: { |
| | |
| | | this.dialogVisible = true; |
| | | this.dialogType = 'edit' |
| | | }, |
| | | // 编辑保存 |
| | | saveHandler() { |
| | | //保存流程配置 |
| | | handleSubmitModel() { |
| | | const registry = this.$refs['wf-design-view'].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 |
| | | } |
| | | if(this.dialogType=='add'){ |
| | | saveProcessTemp(this.form).then(res => { |
| | | saveProcessTemp(params).then(res => { |
| | | if (res.data.code === 200) { |
| | | this.$message.success(res.data.obj); |
| | | this.getTableList(); |
| | | this.handleNutflowClose() |
| | | } |
| | | }); |
| | | }else{ |
| | | updateProcessTemp(this.form).then(res => { |
| | | updateProcessTemp(params).then(res => { |
| | | if (res.data.code === 200) { |
| | | this.$message.success(res.data.obj); |
| | | this.getTableList(); |
| | | this.handleNutflowClose() |
| | | } |
| | | }) |
| | | } |
| | | |
| | | }, |
| | | dialogClose(){ |
| | | this.form={}; |
| | | this.dialogLoading=false; |
| | | this.dialogVisible=false; |
| | | handleStep(step) { |
| | | if (step === 1) { // 下一步 |
| | | this.$refs['wf-design'].getData('xml').then(data => { |
| | | this.$set(this.nutflowOption.step1, 'xml', data) |
| | | this.$set(this.nutflowOption.step2, 'xml', data) |
| | | this.$set(this.nutflowOption.process, 'xml', data) |
| | | this.$set(this.nutflowOption, 'step', 2) |
| | | }) |
| | | } else { |
| | | this.$set(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) { |
| | | this.$confirm('确定要关闭吗?关闭未保存的修改都会丢失。', '警告', { |
| | | type: 'warning' |
| | | }).then(() => { |
| | | this.$set(this, 'nutflowOption', initOption) |
| | | if (typeof done == 'function') done() |
| | | this.dialogVisible = false |
| | | }).catch(() => { |
| | | }) |
| | | } else { |
| | | this.$set(this, 'nutflowOption', initOption) |
| | | this.dialogVisible = false |
| | | } |
| | | }, |
| | | // 删除 |
| | | handleDel(row,index) { |
| | |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | |
| | | <style lang="scss" scoped> |
| | | ::v-deep { |
| | | .avue-dialog .el-dialog__body{ |
| | | margin-bottom: 0 !important; |
| | | } |
| | | } |
| | | </style> |