151 lines
3.9 KiB
Vue
151 lines
3.9 KiB
Vue
<template>
|
|
<div>
|
|
<el-dialog title="发起审批" :visible.sync="openItemDl" :close-on-click-modal="true">
|
|
<div v-loading="loading" class="initiate_process">
|
|
<div v-if="!loading" style="min-width: 338px;">
|
|
<!--渲染表单-->
|
|
<form-render class="process-form" ref="initiateForm" :form-items="processDefinition.formItems"
|
|
v-model="formData"/>
|
|
</div>
|
|
<div style="display: flex;justify-content: center;flex-direction: column;min-width: 1036px;">
|
|
<span style="font-size: 18px;text-align: center;padding-top: 20px;">审批流程</span>
|
|
<process-diagram-viewer ref="processDiagramViewer"/>
|
|
<!--渲染流程执行过程-->
|
|
</div>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button size="mini" @click="openItemDl = false">取 消</el-button>
|
|
<el-button size="mini" type="primary" @click="resubmitForm">提 交</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import FormRender from "@/views/common/form/FormRender";
|
|
import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
|
|
import {getInitiatedInstanceReInfo, restartProcessInstance} from "@/api/processInstance";
|
|
|
|
export default {
|
|
name: "ReProcess",
|
|
components: {FormRender, ProcessDiagramViewer},
|
|
props: {
|
|
code: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
openItemDl: false,
|
|
scale: 100,
|
|
loading: true,
|
|
formData: {},
|
|
processDefinition: {
|
|
processDefinitionKey: "",
|
|
deploymentName: "",
|
|
logo: {},
|
|
formItems: [],
|
|
process: {},
|
|
remark: ""
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$store.state.preview = true;
|
|
this.loadProcessDefinitionReInfo(this.code);
|
|
},
|
|
created() {
|
|
this.$store.state.preview = true;
|
|
},
|
|
computed: {
|
|
forms() {
|
|
return this.$store.state.design.formItems;
|
|
}
|
|
},
|
|
destroyed() {
|
|
this.$store.state.preview = false;
|
|
},
|
|
methods: {
|
|
loadProcessDefinitionReInfo(instanceId) {
|
|
this.openItemDl = true;
|
|
getInitiatedInstanceReInfo(instanceId).then(res => {
|
|
let processDefinition = res.data;
|
|
this.processDefinition = processDefinition;
|
|
this.formData = processDefinition.formData
|
|
if (processDefinition.optionalUser){
|
|
this.$store.state.selectUserMap = new Map();
|
|
for (let key in processDefinition.optionalUser) {
|
|
this.$store.state.selectUserMap.set(key,processDefinition.optionalUser[key])
|
|
}
|
|
}
|
|
//构建表单及校验规则
|
|
this.$store.state.design = processDefinition;
|
|
this.loading = false;
|
|
}).catch(err => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
|
|
resubmitForm() {
|
|
let selectUserMap = {}
|
|
this.$store.state.selectUserMap.forEach(((value, key) => {
|
|
selectUserMap[key] = value
|
|
}))
|
|
let paramsData = {
|
|
processDefinitionId: this.code,
|
|
formData: JSON.stringify(this.formData),
|
|
optionalUser: selectUserMap
|
|
}
|
|
this.validate(valid => {
|
|
if (valid) {
|
|
restartProcessInstance(paramsData).then(res => {
|
|
this.$emit("submit", true)
|
|
this.openItemDl = false
|
|
this.$message.success(res.msg)
|
|
})
|
|
} else {
|
|
this.$message.warning("请完善表单😥")
|
|
}
|
|
})
|
|
},
|
|
validate(call) {
|
|
this.$refs.initiateForm.validate(call);
|
|
this.$refs.processDiagramViewer.validate(call);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@media screen and (max-width: 1545px) {
|
|
.initiate_process {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
}
|
|
}
|
|
|
|
.initiate_process {
|
|
display: flex;
|
|
flex: 1;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.process-form {
|
|
/deep/ .el-form-item__label {
|
|
padding: 0 0;
|
|
}
|
|
|
|
/deep/ .el-divider--horizontal {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
/deep/ .el-divider__text {
|
|
font-size: 16px;
|
|
}
|
|
|
|
</style>
|
|
|