add

src/views/bpm/processInstance/detail.vue

@@ -1,6 +1,12 @@
 <template>
-  <el-dialog title="详情" :before-close="handleClose" :visible.sync="dialogVisible" :close-on-click-modal="false"
-    :append-to-body="true" width="80%">
+  <el-dialog
+    title="详情"
+    :before-close="handleClose"
+    :visible.sync="dialogVisible"
+    :close-on-click-modal="false"
+    :append-to-body="true"
+    width="80%"
+  >
     <div class="app-container" style="padding: 15px">
       <!-- 审批记录 -->
       <el-card class="box-card" v-loading="tasksLoad">
@@ -10,25 +16,49 @@
         <el-col :span="16" :offset="4">
           <div class="block">
             <el-timeline>
-              <el-timeline-item v-for="(item, index) in tasks" :key="index" :icon="getTimelineItemIcon(item)"
-                :type="getTimelineItemType(item)">
+              <el-timeline-item
+                v-for="(item, index) in tasks"
+                :key="index"
+                :icon="getTimelineItemIcon(item)"
+                :type="getTimelineItemType(item)"
+              >
                 <p style="font-weight: 700">任务：{{ item.name }}</p>
                 <el-card :body-style="{ padding: '10px' }">
-                  <label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px">
+                  <label
+                    v-if="item.assigneeUser"
+                    style="font-weight: normal; margin-right: 30px"
+                  >
                     审批人：{{ item.assigneeUser.nickname }}
                     <el-tag type="info" size="mini">{{
                       item.assigneeUser.deptName
                     }}</el-tag>
                   </label>
-                  <label style="font-weight: normal" v-if="item.createTime">创建时间：</label>
+                  <label style="font-weight: normal" v-if="item.createTime"
+                    >创建时间：</label
+                  >
                   <label style="color: #8a909c; font-weight: normal">{{
                     item.createTime
                   }}</label>
-                  <label v-if="item.endTime" style="margin-left: 30px; font-weight: normal">审批时间：</label>
-                  <label v-if="item.endTime" style="color: #8a909c; font-weight: normal">
-                    {{ item.endTime }}</label>
-                  <label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">耗时：</label>
-                  <label v-if="item.durationInMillis" style="color: #8a909c; font-weight: normal">
+                  <label
+                    v-if="item.endTime"
+                    style="margin-left: 30px; font-weight: normal"
+                    >审批时间：</label
+                  >
+                  <label
+                    v-if="item.endTime"
+                    style="color: #8a909c; font-weight: normal"
+                  >
+                    {{ item.endTime }}</label
+                  >
+                  <label
+                    v-if="item.durationInMillis"
+                    style="margin-left: 30px; font-weight: normal"
+                    >耗时：</label
+                  >
+                  <label
+                    v-if="item.durationInMillis"
+                    style="color: #8a909c; font-weight: normal"
+                  >
                     {{ getDateStar(item.durationInMillis) }}
                   </label>
                   <p v-if="item.reason">
@@ -42,206 +72,211 @@
           </div>
         </el-col>
       </el-card>
-
       <!-- 高亮流程图 -->
       <el-card class="box-card" v-loading="processInstanceLoading">
         <div slot="header" class="clearfix">
-          <span class="el-icon-picture-outline">流程图</span>
+          <span class="el-icon-picture-outline">流程图1</span>
         </div>
-        <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" :activityData="activityList"
-          :processInstanceData="processInstance" :taskData="tasks" />
+
+        <my-process-viewer
+          key="designer"
+          v-model="bpmnXML"
+          v-bind="bpmnControlForm"
+          :activityData="activityList"
+          :processInstanceData="processInstance"
+          :taskData="tasks"
+        />
       </el-card>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { getProcessDefinitionBpmnXML } from '@/api/bpm/definition';
-import store from '@/store';
-import { getProcessInstance } from '@/api/bpm/processInstance';
-import { getDate } from '@/utils/dateUtils';
-import dictMixins from '@/mixins/dictMixins';
-import { getTaskListByProcessInstanceId } from '@/api/bpm/task';
-import { getActivityList } from '@/api/bpm/activity';
-// import Vue from 'vue';
+  import { getProcessDefinitionBpmnXML } from '@/api/bpm/definition';
+  import store from '@/store';
+  import { getProcessInstance } from '@/api/bpm/processInstance';
+  import { getDate } from '@/utils/dateUtils';
+  import dictMixins from '@/mixins/dictMixins';
+  import { getTaskListByProcessInstanceId } from '@/api/bpm/task';
+  import { getActivityList } from '@/api/bpm/activity';
+  // import Vue from 'vue';
 
-// 流程实例的详情页，可用于审批
-export default {
-  name: 'ProcessInstanceDetail',
-  mixins: [dictMixins],
+  // 流程实例的详情页，可用于审批
+  export default {
+    name: 'ProcessInstanceDetail',
+    mixins: [dictMixins],
 
-  components: {},
-  data() {
-    return {
-      // 遮罩层
-      processInstanceLoading: true,
-      dialogVisible: false,
+    components: {},
+    data() {
+      return {
+        // 遮罩层
+        processInstanceLoading: true,
+        dialogVisible: false,
 
-      // 流程实例
-      id: undefined, // 流程实例的编号
-      processInstance: {},
+        // 流程实例
+        id: undefined, // 流程实例的编号
+        processInstance: {},
 
-      // BPMN 数据
-      bpmnXML: null,
-      bpmnControlForm: {
-        prefix: 'flowable'
-      },
-      activityList: [],
+        // BPMN 数据
+        bpmnXML: null,
+        bpmnControlForm: {
+          prefix: 'flowable'
+        },
+        activityList: [],
 
-      // 审批记录
-      tasksLoad: true,
-      tasks: []
-    };
-  },
-  created() {
-    // this.id = this.$route.query.id;
-    // if (!this.id) {
-    //   this.$message.error('未传递 id 参数，无法查看流程信息');
-    //   return;
-    // }
-    // this.getDetail();
-  },
-  methods: {
-    open(id) {
-      this.id = id;
-      this.dialogVisible = true
-      this.getDetail();
+        // 审批记录
+        tasksLoad: true,
+        tasks: []
+      };
     },
-    /** 获得流程实例 */
-    getDetail() {
-      // 获得流程实例相关
-      this.processInstanceLoading = true;
-      getProcessInstance(this.id).then((response) => {
-        if (!response) {
-          this.$message.error('查询不到流程信息！');
-          return;
-        }
-        // 设置流程信息
-        this.processInstance = response;
+    created() {
+      // this.id = this.$route.query.id;
+      // if (!this.id) {
+      //   this.$message.error('未传递 id 参数，无法查看流程信息');
+      //   return;
+      // }
+      // this.getDetail();
+    },
+    methods: {
+      open(id) {
+        this.id = id;
+        this.dialogVisible = true;
+        this.getDetail();
+      },
+      /** 获得流程实例 */
+      getDetail() {
+        // 获得流程实例相关
+        this.processInstanceLoading = true;
+        getProcessInstance(this.id).then((response) => {
+          if (!response) {
+            this.$message.error('查询不到流程信息！');
+            return;
+          }
+          // 设置流程信息
+          this.processInstance = response;
 
-        // //将业务表单，注册为动态组件
-        // const path = this.processInstance.processDefinition.formCustomViewPath;
-        // Vue.component("async-biz-form-component", function (resolve) {
-        //   require([`@/views${path}`], resolve);
-        // });
+          // //将业务表单，注册为动态组件
+          // const path = this.processInstance.processDefinition.formCustomViewPath;
+          // Vue.component("async-biz-form-component", function (resolve) {
+          //   require([`@/views${path}`], resolve);
+          // });
+          // 加载流程图
+          getProcessDefinitionBpmnXML(
+            this.processInstance.processDefinition.id
+          ).then((response) => {
+            this.bpmnXML = response;
+          });
+          // 加载活动列表
+          getActivityList({
+            processInstanceId: this.processInstance.id
+          }).then((response) => {
+            console.log(response, 'response');
+            this.activityList = response;
+          });
 
-        // 加载流程图
-        getProcessDefinitionBpmnXML(
-          this.processInstance.processDefinition.id
-        ).then((response) => {
-          this.bpmnXML = response;
-        });
-        // 加载活动列表
-        getActivityList({
-          processInstanceId: this.processInstance.id
-        }).then((response) => {
-          console.log(response, 'response');
-          this.activityList = response;
+          // 取消加载中
+          this.processInstanceLoading = false;
         });
 
-        // 取消加载中
-        this.processInstanceLoading = false;
-      });
+        // 获得流程任务列表（审批记录）
+        this.tasksLoad = true;
+        getTaskListByProcessInstanceId(this.id).then((response) => {
+          // 审批记录
+          this.tasks = [];
+          // 移除已取消的审批
+          response.forEach((task) => {
+            if (task.result !== 4) {
+              this.tasks.push(task);
+            }
+          });
+          // 排序，将未完成的排在前面，已完成的排在后面；
+          this.tasks.sort((a, b) => {
+            // 有已完成的情况，按照完成时间倒序
+            if (a.endTime && b.endTime) {
+              return b.endTime - a.endTime;
+            } else if (a.endTime) {
+              return 1;
+            } else if (b.endTime) {
+              return -1;
+              // 都是未完成，按照创建时间倒序
+            } else {
+              return b.createTime - a.createTime;
+            }
+          });
 
-      // 获得流程任务列表（审批记录）
-      this.tasksLoad = true;
-      getTaskListByProcessInstanceId(this.id).then((response) => {
-        // 审批记录
-        this.tasks = [];
-        // 移除已取消的审批
-        response.forEach((task) => {
-          if (task.result !== 4) {
-            this.tasks.push(task);
-          }
-        });
-        // 排序，将未完成的排在前面，已完成的排在后面；
-        this.tasks.sort((a, b) => {
-          // 有已完成的情况，按照完成时间倒序
-          if (a.endTime && b.endTime) {
-            return b.endTime - a.endTime;
-          } else if (a.endTime) {
-            return 1;
-          } else if (b.endTime) {
-            return -1;
-            // 都是未完成，按照创建时间倒序
-          } else {
-            return b.createTime - a.createTime;
-          }
-        });
+          // 需要审核的记录
+          const userId = store.getters.userId;
+          this.tasks.forEach((task) => {
+            if (task.result !== 1 && task.result !== 6) {
+              // 只有待处理才需要
+              return;
+            }
+            if (!task.assigneeUser || task.assigneeUser.id !== userId) {
+              // 自己不是处理人
+              return;
+            }
+          });
 
-        // 需要审核的记录
-        const userId = store.getters.userId;
-        this.tasks.forEach((task) => {
-          if (task.result !== 1 && task.result !== 6) {
-            // 只有待处理才需要
-            return;
-          }
-          if (!task.assigneeUser || task.assigneeUser.id !== userId) {
-            // 自己不是处理人
-            return;
-          }
+          // 取消加载中
+          this.tasksLoad = false;
         });
-
-        // 取消加载中
-        this.tasksLoad = false;
-      });
-    },
-    getDateStar(ms) {
-      return getDate(ms);
-    },
-    getTimelineItemIcon(item) {
-      if (item.result === 1) {
-        return 'el-icon-time';
-      }
-      if (item.result === 2) {
-        return 'el-icon-check';
-      }
-      if (item.result === 3) {
-        return 'el-icon-close';
-      }
-      if (item.result === 4) {
-        return 'el-icon-remove-outline';
-      }
-      if (item.result === 5) {
-        return 'el-icon-back';
-      }
-      return '';
-    },
-    getTimelineItemType(item) {
-      if (item.result === 1) {
-        return 'primary';
-      }
-      if (item.result === 2) {
-        return 'success';
-      }
-      if (item.result === 3) {
-        return 'danger';
-      }
-      if (item.result === 4) {
-        return 'info';
-      }
-      if (item.result === 5) {
-        return 'warning';
-      }
-      if (item.result === 6) {
-        return 'default';
+      },
+      getDateStar(ms) {
+        return getDate(ms);
+      },
+      getTimelineItemIcon(item) {
+        if (item.result === 1) {
+          return 'el-icon-time';
+        }
+        if (item.result === 2) {
+          return 'el-icon-check';
+        }
+        if (item.result === 3) {
+          return 'el-icon-close';
+        }
+        if (item.result === 4) {
+          return 'el-icon-remove-outline';
+        }
+        if (item.result === 5) {
+          return 'el-icon-back';
+        }
+        return '';
+      },
+      getTimelineItemType(item) {
+        if (item.result === 1) {
+          return 'primary';
+        }
+        if (item.result === 2) {
+          return 'success';
+        }
+        if (item.result === 3) {
+          return 'danger';
+        }
+        if (item.result === 4) {
+          return 'info';
+        }
+        if (item.result === 5) {
+          return 'warning';
+        }
+        if (item.result === 6) {
+          return 'default';
+        }
+        return '';
+      },
+      handleClose() {
+        this.dialogVisible = false;
       }
-      return '';
-    },
-    handleClose() {
-      this.dialogVisible = false;
     }
-  }
-};
+  };
 </script>
 
 <style lang="scss">
-.my-process-designer {
-  height: calc(100vh - 200px);
-}
+  .my-process-designer {
+    height: calc(100vh - 200px);
+  }
 
-.box-card {
-  width: 100%;
-  margin-bottom: 20px;
-}
+  .box-card {
+    width: 100%;
+    margin-bottom: 20px;
+  }
 </style>