init

src/views/workflow/approve/InitiateProcess.vue

@@ -0,0 +1,114 @@
+<template>
+  <div v-loading="loading" class="initiate_process">
+    <div v-if="!loading" style="min-width:30%">
+      <!--渲染表单-->
+      <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>