114 lines
2.6 KiB
Vue
114 lines
2.6 KiB
Vue
<template>
|
|
<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/>
|
|
<!--渲染流程执行过程-->
|
|
<el-timeline :reverse="false">
|
|
<!-- <el-timeline-item v-for="(activity, index) in activities" :key="index">-->
|
|
|
|
<!-- </el-timeline-item>-->
|
|
</el-timeline>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import FormRender from "@/views/common/form/FormRender";
|
|
import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
|
|
import {getInitiateInfo} from "@/api/processDefinition";
|
|
|
|
export default {
|
|
name: "InitiateProcess",
|
|
components: {FormRender, ProcessDiagramViewer},
|
|
props: {
|
|
code: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
scale: 100,
|
|
loading: true,
|
|
formData: {},
|
|
processDefinition: {
|
|
processDefinitionKey: "",
|
|
deploymentName: "",
|
|
logo: {},
|
|
formItems: [],
|
|
process: {},
|
|
remark: ""
|
|
}
|
|
};
|
|
},
|
|
mounted() {
|
|
this.$store.state.preview = true;
|
|
this.loadProcessDefinitionInfo(this.code);
|
|
},
|
|
created() {
|
|
this.$store.state.preview = true;
|
|
},
|
|
computed: {
|
|
forms() {
|
|
return this.$store.state.design.formItems;
|
|
}
|
|
},
|
|
destroyed() {
|
|
this.$store.state.preview = false;
|
|
},
|
|
methods: {
|
|
loadProcessDefinitionInfo(processDefinitionKey) {
|
|
getInitiateInfo(processDefinitionKey).then(res => {
|
|
let processDefinition = res.data;
|
|
this.processDefinition = processDefinition;
|
|
//构建表单及校验规则
|
|
this.$store.state.design = processDefinition;
|
|
this.loading = false;
|
|
}).catch(err => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
validate(call) {
|
|
console.log("我被调用了")
|
|
this.$refs.initiateForm.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>
|