style:流程图

@@ -26,7 +26,8 @@
     "vue-quill-editor": "^3.0.6",
     "vue-router": "3.0.2",
     "vue-seamless-scroll": "^1.1.23",
-    "vuex": "3.1.0"
+    "vuex": "3.1.0",
+    "x2js": "^3.4.4"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.4",

@@ -11,6 +11,9 @@ import { startLoadingAddCount, endLoadingSubCount } from './utils/requestLoading
 Vue.mixin(mixin);
 Vue.use(Loading.directive);
 import rules from './utils/rule.js'
+// 引入xml
+import x2js from 'x2js'
+Vue.prototype.$x2js = new x2js()
 // 全局方法挂载
 Vue.prototype.$rules = rules
 // 全局加载

 <template>
+  <div>
     <div class="process-viewer">
-    <div v-show="!isLoading" ref="processCanvas" class="process-canvas" style="height: 360px;" />
+      <div v-show="!isLoading" ref="processCanvas" class="process-canvas" style="height: 280px;" />
       <!-- 自定义箭头样式，用于成功状态下流程连线箭头 -->
       <defs ref="customSuccessDefs">
         <marker id="sequenceflow-end-white-success" view-box="0 0 20 20" ref-x="11" ref-y="10" marker-width="10"
@@ -27,24 +28,7 @@
             style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;" />
         </marker>
       </defs>
-    <!-- 已完成节点悬浮弹窗 -->
-    <el-dialog class="comment-dialog" :title="dlgTitle || '审批记录'" :visible.sync="dialogVisible" append-to-body>
-      <el-row>
-        <el-table :data="taskCommentList" size="mini" border header-cell-class-name="table-header-gray">
-          <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" />
-          <el-table-column label="候选办理" prop="candidate" width="150px" align="center" />
-          <el-table-column label="实际办理" prop="assigneeName" width="100px" align="center" />
-          <el-table-column label="处理时间" prop="createTime" width="140px" align="center" />
-          <el-table-column label="办结时间" prop="finishTime" width="140px" align="center" />
-          <el-table-column label="耗时" prop="duration" width="100px" align="center" />
-          <el-table-column label="审批意见" align="center">
-            <template slot-scope="scope">
-              {{ scope.row.commentList&&scope.row.commentList[0]?scope.row.commentList[0].fullMessage:'' }}
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-row>
-    </el-dialog>
+
       <div style="position: absolute; top: 0px; left: 0px; width: 100%;">
         <el-row type="flex" justify="end">
           <el-button-group key="scale-control" size="medium">
@@ -60,8 +44,26 @@
         </el-row>
       </div>
     </div>
+    <!-- 已完成节点悬浮弹窗 -->
+    <div class="information-list">
+      <!-- <p>{{ dlgTitle ? dlgTitle : '浏览记录' }}</p> -->
+      <el-select v-model="selectValue" @change="handleSelect">
+        <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
+        </el-option>
+      </el-select>
+      <el-table :data="taskCommentList" size="mini" border header-cell-class-name="table-header-gray">
+        <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" />
+        <el-table-column label="候选办理" prop="candidate" minWidth="150px" align="center" />
+        <el-table-column label="实际办理" prop="assigneeName" minWidth="100px" align="center" />
+        <el-table-column label="处理时间" prop="createTime" width="140px" align="center" />
+        <el-table-column label="办结时间" prop="finishTime" width="140px" align="center" />
+        <el-table-column label="耗时" prop="duration" minWidth="100px" align="center" />
+        <el-table-column label="操作类型" align="center">
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
 </template>
-
 <script>
 import '@/styles/package/theme/index.scss'
 import BpmnViewer from 'bpmn-js/lib/Viewer'
@@ -75,7 +77,6 @@ export default {
   },
   data () {
     return {
-      dialogVisible: false,
       dlgTitle: undefined,
       defaultZoom: 1,
       // 是否正在加载流程图
@@ -88,7 +89,10 @@ export default {
       // 任务节点审批记录
       taskCommentList: [],
       // 已完成任务悬浮延迟Timer
-      hoverTimer: null
+      hoverTimer: null,
+      // 下拉
+      selectValue: '',
+      selectOptions: []
     }
   },
   created () {
@@ -160,10 +164,26 @@ export default {
       this.taskCommentList = (this.formData.allCommentList || []).filter(item => {
         return item.taskDefKey === this.selectTaskId
       })
-      this.dialogVisible = true
+    },
+    // 下拉列表切换
+    handleSelect (val) {
+      this.taskCommentList = (this.formData.allCommentList || []).filter(item => {
+        return item.taskDefKey === val
+      })
     },
     // 显示流程图
     async importXML (xml) {
+      let xmlData = this.$x2js.xml2js(xml).definitions.process;
+      this.selectOptions = xmlData.userTask.map(item => {
+        return { value: item._id, label: item._name }
+      })
+      this.selectOptions = [{ value: xmlData.startEvent._id, label: '浏览记录' }, ...this.selectOptions]
+      this.selectOptions = this.selectOptions.map(item => {
+        if (this.formData.finishedInfo.finishedTaskSet.includes(item.value)) {
+          return item
+        }
+      }).filter(Boolean);
+      this.selectValue = xmlData.startEvent._id
       this.clearViewer('a')
       if (xml != null && xml !== '') {
         try {
@@ -178,11 +198,11 @@ export default {
           this.bpmnViewer.on('element.click', ({ element }) => {
             this.onSelectElement(element)
           })
-          const c = await this.bpmnViewer.importXML(xml)
+          await this.bpmnViewer.importXML(xml)
           this.isLoading = true
           this.addCustomDefs()
         } catch (e) {
-          // this.clearViewer('b')
+          this.clearViewer('b')
         } finally {
           this.isLoading = false
           this.setProcessStatus(this.processNodeInfo)
@@ -213,6 +233,7 @@ export default {
       }
       if (Array.isArray(finishedTaskSet)) {
         finishedTaskSet.forEach(item => canvas.addMarker(item, 'success'))
+        console.log(finishedTaskSet, 'finishedTaskSet');
       }
       if (Array.isArray(unfinishedTaskSet)) {
         unfinishedTaskSet.forEach(item => canvas.addMarker(item, 'primary'))
@@ -233,3 +254,14 @@ export default {
   }
 }
 </script>
+<style scoped lang="scss">
+.information-list {
+  height: 150px;
+  margin-top: 10px;
+
+  p {
+    font-size: 16px;
+    line-height: 24px;
+  }
+}
+</style>
\ No newline at end of file