|
|
|
|
@ -7,7 +7,16 @@ |
|
|
|
|
<el-step title="设计表单" |
|
|
|
|
icon="el-icon-edit"></el-step> |
|
|
|
|
<el-step title="设计流程" |
|
|
|
|
icon="el-icon-upload"></el-step> |
|
|
|
|
icon="el-icon-upload"> |
|
|
|
|
<template #title> |
|
|
|
|
设计流程 |
|
|
|
|
<el-tooltip v-show="step == '1'" |
|
|
|
|
content="全屏"> |
|
|
|
|
<i class="el-icon-full-screen" |
|
|
|
|
@click="handleFullScreen"></i> |
|
|
|
|
</el-tooltip> |
|
|
|
|
</template> |
|
|
|
|
</el-step> |
|
|
|
|
<el-step title="完成" |
|
|
|
|
icon="el-icon-circle-check"></el-step> |
|
|
|
|
</el-steps> |
|
|
|
|
@ -22,14 +31,16 @@ |
|
|
|
|
@click="$router.push('/plugin/workflow/design/form')">没有想要的表单？点击去设计</el-link> |
|
|
|
|
</template> |
|
|
|
|
<template slot="form"> |
|
|
|
|
<avue-form v-model="step1.form" |
|
|
|
|
<avue-form ref="form2" |
|
|
|
|
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)" |
|
|
|
|
<wf-design id="bpmn2" |
|
|
|
|
ref="bpmn2" |
|
|
|
|
style="height: calc(100vh - 290px); background: white;" |
|
|
|
|
:options="step2.option"></wf-design> |
|
|
|
|
</div> |
|
|
|
|
<div v-if="step == 2"> |
|
|
|
|
@ -38,7 +49,8 @@ |
|
|
|
|
:options="step3.option"></wf-design> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="footer"> |
|
|
|
|
<div class="foot-item" |
|
|
|
|
:style="{width: isCollapse? 'calc(100% - 80px)': 'calc(100% - 260px)' }"> |
|
|
|
|
<el-button type="primary" |
|
|
|
|
size="medium" |
|
|
|
|
v-if="step > 0" |
|
|
|
|
@ -66,7 +78,7 @@ import { mapGetters } from 'vuex' |
|
|
|
|
export default { |
|
|
|
|
name: 'design', |
|
|
|
|
computed: { |
|
|
|
|
...mapGetters(['tag']), |
|
|
|
|
...mapGetters(['tag', 'isCollapse']), |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
'$route.params.id': { |
|
|
|
|
@ -110,13 +122,19 @@ export default { |
|
|
|
|
}, |
|
|
|
|
event: { |
|
|
|
|
change: (val) => { |
|
|
|
|
this.step1.option1 = {} |
|
|
|
|
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 |
|
|
|
|
setTimeout(() => { |
|
|
|
|
_this.$refs.form2.clearValidate() |
|
|
|
|
}) |
|
|
|
|
}).catch(() => { |
|
|
|
|
_this.step1.option.group[1].display = false |
|
|
|
|
}) |
|
|
|
|
} else { |
|
|
|
|
_this.step1.option.group[1].display = false |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
@ -158,7 +176,8 @@ export default { |
|
|
|
|
engine: 'flowable' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
process: {} |
|
|
|
|
process: {}, |
|
|
|
|
fullscreen: false |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
@ -272,25 +291,53 @@ export default { |
|
|
|
|
deptName: r.deptName |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
console.log(userConfig) |
|
|
|
|
this.$set(this.step2.option, 'user', userConfig) |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
handleFullScreen() { |
|
|
|
|
let element = document.querySelector("#bpmn2"); |
|
|
|
|
if (this.fullscreen) { |
|
|
|
|
if (document.exitFullscreen) { |
|
|
|
|
document.exitFullscreen(); |
|
|
|
|
} else if (document.webkitCancelFullScreen) { |
|
|
|
|
document.webkitCancelFullScreen(); |
|
|
|
|
} else if (document.mozCancelFullScreen) { |
|
|
|
|
document.mozCancelFullScreen(); |
|
|
|
|
} else if (document.msExitFullscreen) { |
|
|
|
|
document.msExitFullscreen(); |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
if (element.requestFullscreen) { |
|
|
|
|
element.requestFullscreen(); |
|
|
|
|
} else if (element.webkitRequestFullScreen) { |
|
|
|
|
element.webkitRequestFullScreen(); |
|
|
|
|
} else if (element.mozRequestFullScreen) { |
|
|
|
|
element.mozRequestFullScreen(); |
|
|
|
|
} else if (element.msRequestFullscreen) { |
|
|
|
|
// IE11 |
|
|
|
|
element.msRequestFullscreen(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
this.fullscreen = !this.fullscreen; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
.footer { |
|
|
|
|
.foot-item { |
|
|
|
|
position: fixed; |
|
|
|
|
bottom: 0; |
|
|
|
|
right: 0; |
|
|
|
|
margin-left: -20px; |
|
|
|
|
// right: 0; |
|
|
|
|
z-index: 101; |
|
|
|
|
width: 100%; |
|
|
|
|
padding: 15px 20px; |
|
|
|
|
height: 66px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
-webkit-transition: 0.3s; |
|
|
|
|
transition: 0.3s; |
|
|
|
|
-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); |
|
|
|
|
} |
|
|
|
|
|
ssc
5 years ago