44

src/views/material/BOMmanage/components/LCdetail.vue

@@ -0,0 +1,282 @@
+<template>
+  <el-dialog
+    title="详情"
+    :before-close="handleClose"
+    :visible.sync="dialogVisible"
+    :close-on-click-modal="true"
+    :append-to-body="true"
+    width="80%"
+  >
+    <div class="app-container" style="padding: 15px">
+      <!-- 审批记录 -->
+      <el-card class="box-card" v-loading="tasksLoad">
+        <div slot="header" class="clearfix">
+          <span class="el-icon-picture-outline">审批记录</span>
+        </div>
+        <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)"
+              >
+                <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"
+                  >
+                    审批人：{{ 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="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"
+                  >
+                    {{ getDateStar(item.durationInMillis) }}
+                  </label>
+                  <p v-if="item.reason">
+                    <el-tag :type="getTimelineItemType(item)">{{
+                      item.reason
+                    }}</el-tag>
+                  </p>
+                </el-card>
+              </el-timeline-item>
+            </el-timeline>
+          </div>
+        </el-col>
+      </el-card>
+      <!-- 高亮流程图 -->
+      <el-card class="box-card" v-loading="processInstanceLoading">
+        <div slot="header" class="clearfix">
+          <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"
+        />
+      </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';
+
+  // 流程实例的详情页，可用于审批
+  export default {
+    name: 'ProcessInstanceDetail',
+    mixins: [dictMixins],
+
+    components: {},
+    data() {
+      return {
+        // 遮罩层
+        processInstanceLoading: true,
+        dialogVisible: false,
+
+        // 流程实例
+        id: undefined, // 流程实例的编号
+        processInstance: {},
+
+        // 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();
+      },
+      /** 获得流程实例 */
+      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);
+          // });
+          // 加载流程图
+          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.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;
+            }
+          });
+
+          // 取消加载中
+          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';
+        }
+        return '';
+      },
+      handleClose() {
+        this.dialogVisible = false;
+      }
+    }
+  };
+</script>
+
+<style lang="scss">
+  .my-process-designer {
+    height: calc(100vh - 200px);
+  }
+
+  .box-card {
+    width: 100%;
+    margin-bottom: 20px;
+  }
+</style>

src/views/material/BOMmanage/index.vue

@@ -19,13 +19,19 @@
           class="dict-table"
           tool-class="ele-toolbar-actions"
         >
-          <!-- 表头工具栏 -->
-          <template v-slot:action="{ row }">
+          <template v-slot:approvalStatus="{ row }">
             <el-link
               type="primary"
-              @click="handelDetail(row)"
-              >详情</el-link
+              :underline="false"
+              @click="handleDetails(row)"
             >
+              {{ approvalStatusOpt[+row.approvalStatus] }}
+            </el-link>
+          </template>
+
+          <!-- 表头工具栏 -->
+          <template v-slot:action="{ row }">
+            <el-link type="primary" @click="handelDetail(row)">详情</el-link>
             <!-- <el-switch
               :active-value="'1'"
               :inactive-value="'0'"
@@ -34,26 +40,29 @@
             >
             </el-switch> -->
             <el-link
-            v-if="row.status == 0"
+              v-if="row.status == 0"
               type="primary"
               @click="handSubmit(row)"
               >发布</el-link
             >
-
           </template>
         </ele-pro-table>
       </el-tabs>
     </el-card>
+
+
+    <LCdetail ref="detailRef"></LCdetail>
+
   </div>
 </template>
 
 <script>
   import BOMSearch from './components/BOM-search.vue';
   import { getBomPageList, startAndStop, bomSubmit } from '@/api/material/BOM';
-
+  import LCdetail from './components/LCdetail.vue'
   export default {
     name: 'SystemDictionary',
-    components: { BOMSearch },
+    components: { BOMSearch, LCdetail },
     data() {
       return {
         // 表格列配置
@@ -100,9 +109,7 @@
           {
             prop: 'approvalStatus',
             label: '审核状态',
-            formatter: (row) => {
-              return this.approvalStatusOpt[+row.approvalStatus];
-            }
+            slot: 'approvalStatus'
           },
           {
             prop: 'createName',
@@ -121,7 +128,6 @@
           }
         ],
         statusOpt: {
-          '': '全部',
           0: '已停用',
           1: '已发布'
         },
@@ -136,7 +142,7 @@
         loadingInstance: null,
         where: {},
 
-        activeName: "1"
+        activeName: '1'
       };
     },
     mounted() {
@@ -191,19 +197,21 @@
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
-        }).then(() => {
-          bomSubmit({ businessId: row.id }).then((res) => {
-            this.$message.success('发布成功');
-            this.reload();
-          });
-        }).catch(() => {});
-       },
+        })
+          .then(() => {
+            bomSubmit({ businessId: row.id }).then((res) => {
+              this.$message.success('发布成功');
+              this.reload();
+            });
+          })
+          .catch(() => {});
+      },
 
       /* 表格数据源 */
       datasource({ where, page, limit }) {
         return getBomPageList({
           ...where,
-          bomType:  Number(this.activeName),
+          bomType: Number(this.activeName),
           pageNum: page,
           size: limit
         });
@@ -211,7 +219,12 @@
       handelDetail(row, noBack) {
         this.$router.push({
           path: '/material/BOMmanage/details',
-          query: { versions: row.versions, categoryId: row.categoryId, noBack, bType:this.activeName }
+          query: {
+            versions: row.versions,
+            categoryId: row.categoryId,
+            noBack,
+            bType: this.activeName
+          }
         });
       },
       /* 刷新表格 */
@@ -269,15 +282,25 @@
       },
 
       handleClick(tab) {
-        this.activeName = tab.name
+        this.activeName = tab.name;
         getBomPageList({
           pageNum: 1,
           size: 10,
-          bomType:  Number(this.activeName)
+          bomType: Number(this.activeName)
         }).then((data) => {
           this.$refs.table.setData(data.list || []);
         });
+      },
+
+      
+    handleDetails(row) {
+      if (row.approvalStatus == 0) {
+        this.$message.info('未提交没有审核流程')
+      } else {
+        this.$refs.detailRef.open(row.processInstanceId);
       }
+
+    }
     }
   };
 </script>