117 lines
2.7 KiB
Vue
117 lines
2.7 KiB
Vue
<template>
|
|
<div v-loading="loading" class="initiate_process">
|
|
<div v-if="!loading" style="min-width:30%">
|
|
<!--渲染表单-->
|
|
<!-- todo 关闭以前的表单渲染 , 此处需要根据参数来定制当前需要展示的页面信息 -->
|
|
<!-- <form-render class="process-form" ref="initiateForm" :form-items="processDefinition.formItems"-->
|
|
<!-- v-model:value="formData" mode="E"/>-->
|
|
</div>
|
|
<div v-if="!loading" id="approveTree"
|
|
style="display: flex;justify-content: center;flex-direction: column;min-width:60%">
|
|
<span style="font-size: 18px;text-align: center;padding-top: 20px;">审批流程</span>
|
|
<process-tree ref="processTree" mode="view" id-name="approveTree"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {getInitiateInfo} from "@/api/workflow/process-definition.js";
|
|
import ProcessTree from '@/views/workflow/process/ProcessTree.vue'
|
|
import FormRender from '@/views/workflow/form/FormRender.vue'
|
|
import {useProcessStore} from '@/stores/processStore.js'
|
|
|
|
const processStore = useProcessStore()
|
|
import {defineProps, defineExpose} from 'vue'
|
|
import {ElMessage} from "element-plus";
|
|
|
|
const props = defineProps({
|
|
code: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const scale = ref({})
|
|
const initiateForm = ref()
|
|
const processTree = ref()
|
|
const formData = ref({})
|
|
const loading = ref({})
|
|
const processDefinition = ref({
|
|
processDefinitionKey: "",
|
|
deploymentName: "",
|
|
logo: {},
|
|
formItems: [],
|
|
process: {},
|
|
remark: ""
|
|
})
|
|
|
|
const loadProcessDefinitionInfo = (processDefinitionKey) => {
|
|
loading.value = true
|
|
getInitiateInfo(processDefinitionKey).then(res => {
|
|
processDefinition.value = res.data;
|
|
//构建表单及校验规则
|
|
processStore.setDesign(res.data)
|
|
loading.value = false;
|
|
nextTick(() => {
|
|
processTree.value.init()
|
|
})
|
|
}).catch(err => {
|
|
ElMessage.error(err);
|
|
});
|
|
}
|
|
const validate = () => {
|
|
let formValidate
|
|
initiateForm.value().validate(formCall => {
|
|
formValidate = formCall;
|
|
})
|
|
let proValidate = processTree.value().validate()
|
|
if (!formValidate) {
|
|
return false;
|
|
}
|
|
return (Array.isArray(proValidate) && proValidate.length === 0);
|
|
}
|
|
|
|
|
|
loadProcessDefinitionInfo(props.code)
|
|
|
|
defineExpose({
|
|
formData,
|
|
validate
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" 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;
|
|
}
|
|
|
|
:deep .node-footer {
|
|
z-index: 0 !important;
|
|
}
|
|
|
|
</style>
|