You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
261 lines
7.4 KiB
261 lines
7.4 KiB
5 years ago
|
<template>
|
||
|
|
<basic-container>
|
||
|
|
<el-steps :active="step"
|
||
|
|
finish-status="success"
|
||
|
|
simple
|
||
|
|
style="margin-bottom: 20px;">
|
||
|
|
<el-step title="设计表单"
|
||
|
|
icon="el-icon-edit"></el-step>
|
||
|
|
<el-step title="设计流程"
|
||
|
|
icon="el-icon-upload"></el-step>
|
||
|
|
<el-step title="完成"
|
||
|
|
icon="el-icon-circle-check"></el-step>
|
||
|
|
</el-steps>
|
||
|
|
|
||
|
|
<div v-show="step == 0">
|
||
|
|
<avue-form ref="form1"
|
||
|
|
:option="step1.option"
|
||
|
|
v-model="step1.form">
|
||
|
|
<template slot="tip">
|
||
|
|
<el-link type="primary"
|
||
|
|
:underline="false"
|
||
|
|
@click="$router.push('/workflow/design/form')">没有想要的表单？点击去设计</el-link>
|
||
|
|
</template>
|
||
|
|
<template slot="form">
|
||
|
|
<avue-form v-model="step1.form"
|
||
|
|
:option="step1.option1"></avue-form>
|
||
|
|
</template>
|
||
|
|
</avue-form>
|
||
|
|
</div>
|
||
|
|
<div v-if="step == 1">
|
||
|
|
<wf-design ref="bpmn2"
|
||
|
|
style="height: calc(100vh - 290px)"
|
||
|
|
:options="step2.option"></wf-design>
|
||
|
|
</div>
|
||
|
|
<div v-if="step == 2">
|
||
|
|
<wf-design ref="bpmn3"
|
||
|
|
style="height: calc(100vh - 290px)"
|
||
|
|
:options="step3.option"></wf-design>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="footer">
|
||
|
|
<el-button type="primary"
|
||
|
|
size="medium"
|
||
|
|
v-if="step > 0"
|
||
|
|
@click="step--">上一步</el-button>
|
||
|
|
<el-button type="success"
|
||
|
|
size="medium"
|
||
|
|
v-if="step < 2"
|
||
|
|
@click="handleNextStep">下一步</el-button>
|
||
|
|
<el-button type="success"
|
||
|
|
size="medium"
|
||
|
|
v-if="step == 2"
|
||
|
|
@click="handleSave">保存</el-button>
|
||
|
|
</div>
|
||
|
|
</basic-container>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { getDetail as getFormByKey } from '@/api/plugin/workflow/form'
|
||
|
|
import { submit, getDetail } from '@/api/plugin/workflow/model'
|
||
|
|
import { getList as buttonList } from '@/api/plugin/workflow/button'
|
||
|
|
|
||
|
|
import { mapGetters } from 'vuex'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'design',
|
||
|
|
computed: {
|
||
|
|
...mapGetters(['tag']),
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
'$route.params.id': {
|
||
|
|
handler(val) {
|
||
|
|
if (!val || val == 0) return
|
||
|
|
getDetail(val).then(res => {
|
||
|
|
this.process = res.data.data
|
||
|
|
const { formKey, xml } = this.process
|
||
|
|
this.$set(this.step1.form, 'formKey', formKey)
|
||
|
|
this.$set(this.step2.option, 'xml', xml)
|
||
|
|
this.$set(this.step2.option, 'process', this.process)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
immediate: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
const _this = this
|
||
|
|
return {
|
||
|
|
step: 0,
|
||
|
|
step1: {
|
||
|
|
form: {},
|
||
|
|
option: {
|
||
|
|
menuBtn: false,
|
||
|
|
group: [{
|
||
|
|
labelPosition: 'left',
|
||
|
|
label: '选择表单',
|
||
|
|
icon: 'el-icon-warning-outline',
|
||
|
|
arrow: false,
|
||
|
|
column: [{
|
||
|
|
label: '表单',
|
||
|
|
prop: 'formKey',
|
||
|
|
type: 'select',
|
||
|
|
dicUrl: '/api/blade-workflow/design/form/list?current=1&size=99',
|
||
|
|
dicFormatter: (data) => {
|
||
|
|
return data.data.records
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
label: 'name',
|
||
|
|
value: 'key'
|
||
|
|
},
|
||
|
|
event: {
|
||
|
|
change: (val) => {
|
||
|
|
if (val) {
|
||
|
|
getFormByKey({ key: val }).then(res => {
|
||
|
|
_this.step1.option1 = { ...eval('(' + res.data.data.content + ')'), menuBtn: false, readonly: true }
|
||
|
|
_this.step1.option.group[1].display = true
|
||
|
|
}).catch(() => {
|
||
|
|
_this.step1.option.group[1].display = false
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
rules: [{ required: true, message: '请选择表单' }]
|
||
|
|
}, {
|
||
|
|
labelWidth: 0,
|
||
|
|
prop: 'tip',
|
||
|
|
formslot: true
|
||
|
|
}]
|
||
|
|
}, {
|
||
|
|
label: '表单预览',
|
||
|
|
icon: 'el-icon-view',
|
||
|
|
display: false,
|
||
|
|
arrow: false,
|
||
|
|
column: [{
|
||
|
|
prop: 'form',
|
||
|
|
labelWidth: 0,
|
||
|
|
span: 24,
|
||
|
|
formslot: true
|
||
|
|
}]
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
option1: {}
|
||
|
|
},
|
||
|
|
step2: {
|
||
|
|
option: {
|
||
|
|
config: false,
|
||
|
|
mode: 'edit',
|
||
|
|
engine: 'flowable',
|
||
|
|
toolbar: ['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo', 'import', 'preview'],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
step3: {
|
||
|
|
option: {
|
||
|
|
config: false,
|
||
|
|
mode: 'view',
|
||
|
|
simulation: true,
|
||
|
|
minimap: true,
|
||
|
|
engine: 'flowable'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
process: {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.getButtonList()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleNextStep() {
|
||
|
|
switch (this.step) {
|
||
|
|
case 0:
|
||
|
|
this.$refs.form1.validate((valid, done) => {
|
||
|
|
if (valid) {
|
||
|
|
this.process.formKey = this.step1.form.formKey
|
||
|
|
this.$set(this.step2.option, 'form', this.step1.option1)
|
||
|
|
this.step++
|
||
|
|
done()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
break;
|
||
|
|
case 1:
|
||
|
|
this.$refs.bpmn2.getData('xml').then(data => {
|
||
|
|
this.$set(this.step2.option, 'xml', data)
|
||
|
|
this.$set(this.step3.option, 'xml', data)
|
||
|
|
this.process.xml = data
|
||
|
|
this.step++
|
||
|
|
})
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
handleSave() {
|
||
|
|
const { businessObject } = this.$refs.bpmn3.getElementRegistry().getAll()[0]
|
||
|
|
const { id, name, documentation } = businessObject
|
||
|
|
const description = (documentation && documentation.length > 0) ? documentation[0].text : null
|
||
|
|
|
||
|
|
const params = {
|
||
|
|
...this.process,
|
||
|
|
modelKey: id,
|
||
|
|
name,
|
||
|
|
description
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.process.id) {
|
||
|
|
this.$confirm('是否将此模型保存为新版本？这意味着可以返回到以前的版本。', '提示', {
|
||
|
|
confirmButtonText: '否',
|
||
|
|
cancelButtonText: '是',
|
||
|
|
type: 'warning'
|
||
|
|
}).then(() => {
|
||
|
|
params.newVersion = false
|
||
|
|
|
||
|
|
submit(params).then(() => {
|
||
|
|
this.$message.success("操作成功")
|
||
|
|
this.$store.commit('DEL_TAG', this.tag)
|
||
|
|
this.$router.push("/plugin/workflow/design/model")
|
||
|
|
})
|
||
|
|
}).catch(() => {
|
||
|
|
params.newVersion = true
|
||
|
|
|
||
|
|
submit(params).then(() => {
|
||
|
|
this.$message.success("操作成功")
|
||
|
|
this.$store.commit('DEL_TAG', this.tag)
|
||
|
|
this.$router.push("/plugin/workflow/design/model")
|
||
|
|
})
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
submit(params).then(() => {
|
||
|
|
this.$message.success("操作成功")
|
||
|
|
this.$store.commit('DEL_TAG', this.tag)
|
||
|
|
this.$router.push("/plugin/workflow/design/model")
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getButtonList() {
|
||
|
|
buttonList(1, 99, { status: 1 }).then(res => {
|
||
|
|
const list = res.data.data.records.map(l => {
|
||
|
|
return {
|
||
|
|
label: l.name,
|
||
|
|
prop: l.key,
|
||
|
|
display: true
|
||
|
|
}
|
||
|
|
})
|
||
|
|
this.$set(this.step2.option, 'button', list)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.footer {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
right: 0;
|
||
|
|
z-index: 101;
|
||
|
|
width: 100%;
|
||
|
|
padding: 15px 20px;
|
||
|
|
background-color: #fff;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
</style>
|