将业务表单做为动态组件，直接显示到审批页面，不再需要点击查看

owen
1 parent 1c1894af
Showing 2 changed files with 19 additions and 9 deletions
yudao-ui-admin/src/views/bpm/oa/leave/detail.vue
yudao-ui-admin/src/views/bpm/processInstance/detail.vue
 <template>
   <div class="app-container">
     <!-- 对话框(添加 / 修改) -->
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form ref="form" :model="form" label-width="100px">
         <el-form-item label="开始时间：" prop="startTime"> {{parseTime(form.startTime, '{y}-{m}-{d}')}} </el-form-item>
         <el-form-item label="结束时间：" prop="endTime"> {{parseTime(form.endTime, '{y}-{m}-{d}')}} </el-form-item>
         <el-form-item label="请假类型：" prop="type">
@@ -19,9 +19,15 @@ export default {
   name: "LeaveDetail",
   components: {
   },
+  props: {
+    id: {
+      type: [String, Number],
+      default: undefined
+    },
+  },
   data() {
     return {
-      id: undefined, // 请假编号
+      leaveId: undefined, // 请假编号
       // 表单参数
       form: {
         startTime: undefined,
@@ -34,8 +40,8 @@ export default {
     };
   },
   created() {
-    this.id = this.$route.query.id;
-    if (!this.id) {
+    this.leaveId = this.id || this.$route.query.id;
+    if (!this.leaveId) {
       this.$message.error('未传递 id 参数，无法查看 OA 请假信息');
       return;
     }
@@ -44,7 +50,7 @@ export default {
   methods: {
     /** 获得请假信息 */
     getDetail() {
-      getLeave(this.id).then(response => {
+      getLeave(this.leaveId).then(response => {
         this.form = response.data;
       });
     },
@@ -39,10 +39,7 @@
         </div>
       </el-col>
       <div v-if="this.processInstance.processDefinition && this.processInstance.processDefinition.formType === 20">
-        <router-link :to="this.processInstance.processDefinition.formCustomViewPath + '?id='
-                          + this.processInstance.businessKey">
-          <el-button type="primary">点击查看</el-button>
-        </router-link>
+        <async-biz-form-component :id="this.processInstance.businessKey"></async-biz-form-component>
       </div>
     </el-card>
  
@@ -115,6 +112,7 @@ import {approveTask, getTaskListByProcessInstanceId, rejectTask, updateTaskAssig
 import {getDate} from "@/utils/dateUtils";
 import {listSimpleUsers} from "@/api/system/user";
 import {getActivityList} from "@/api/bpm/activity";
+import Vue from "vue";
  
 // 流程实例的详情页，可用于审批
 export default {
@@ -193,6 +191,12 @@ export default {
         // 设置流程信息
         this.processInstance = response.data;
  
+        //将业务表单，注册为动态组件
+        const path = this.processInstance.processDefinition.formCustomViewPath;
+        Vue.component("async-biz-form-component", function(resolve) {
+          require([`@/views${path}`], resolve);
+        });
+
         // 设置表单信息
         if (this.processInstance.processDefinition.formType === 10) {
           this.detailForm = {