vue2-client 1.15.5 → 1.15.6

package/src/pages/WorkflowDetail/WorkflowDetail.vue

@@ -3,7 +3,6 @@
   <a-drawer
     :visible="visible"
     width="95vw"
-    :placement="direction"
     title="流程详情"
     @close="onClose"
     class="modern-workflow-drawer"
@@ -34,24 +33,25 @@
           >
             <!-- 查看/编辑进度标签页 -->
             <a-tab-pane key="1" tab="开始工作">
-              <template v-if="details">
-                <WorkFlowHandle
-                  v-if="activeKey === '1' && details.f_state !== undefined && steps !== undefined"
-                  ref="workflowHandle"
-                  :workflow-id="workflowId"
-                  :workflowState="details.f_state === 1"
-                  :complete-time="details.f_complete_time"
-                  :stepsForChild="steps"
-                  :visible="visible"
-                  :taskName="details.f_task_name"
-                  :details="details"
-                  @refresh="stepChanged"
-                  @success="success"
-                  @nextClick="nextClick"
-                  @x-form-item-emit-func="handleFormItemEvent"
-                  class="handle-content"
-                />
-              </template>
+              <WorkFlowHandle
+                v-if="isWorkflowDataReady"
+                ref="workflowHandle"
+                :workflow-id="workflowId"
+                :workflowState="details.f_state === 1"
+                :complete-time="details.f_complete_time"
+                :stepsForChild="steps"
+                :visible="visible"
+                :taskName="details.f_task_name"
+                :details="details"
+                @refresh="stepChanged"
+                @success="success"
+                @nextClick="nextClick"
+                @x-form-item-emit-func="handleFormItemEvent"
+                class="handle-content"
+              />
+              <div v-else-if="activeKey === '1'" class="loading-placeholder">
+                <a-spin size="large" tip="正在加载工作流数据..."/>
+              </div>
             </a-tab-pane>
 
             <!-- 任务流转记录标签页 -->
@@ -135,28 +135,27 @@ export default {
       steps: undefined,
       // 基础信息
       details: undefined,
-      // 是否已完成
-      allStepDown: false,
       // 给XFormTable增加额外查询条件
       fixedAddForm: {},
       fixedQueryForm: {},
-      // 统计数据
-      chartData: {
-        // 流程进度
-        instructRateOfSuccessValue: 0
-      },
       // 留言数据
       messageList: [],
       messageLoading: true,
       workflowId: '',
-      direction: 'right',
       visible: false
     }
   },
   expose: ['setFormValue'],
   computed: {
     ...mapState('account', { currUser: 'user' }),
-    ...mapState('setting', ['isMobile'])
+    ...mapState('setting', ['isMobile']),
+    // 检查 WorkFlowHandle 组件渲染所需的数据是否都已准备好
+    isWorkflowDataReady () {
+      return this.activeKey === '1' &&
+             this.details &&
+             this.details.f_state !== undefined &&
+             this.steps !== undefined
+    }
   },
   props: {},
   mounted () {
@@ -186,7 +185,6 @@ export default {
       }
       this.visible = false
       this.activeKey = '1'
-      this.allStepDown = false
       this.details = undefined
       this.fixedAddForm = {}
       this.fixedQueryForm = {}
@@ -200,12 +198,8 @@ export default {
         workflowId: this.workflowId
       })
         .then(res => {
-          res.f_sub_state = this.steps[res.f_step_id - 1].name
+          res.f_sub_state = this.steps.find(item => item.id === res.f_step_id)?.name
           this.details = res
-          if (res.f_state === 1) {
-            this.allStepDown = true
-          }
-          this.chartData.instructRateOfSuccessValue = Math.round(res.f_step_id / this.steps.length * 100)
         }, err => {
           console.log(err)
         })
@@ -226,9 +220,8 @@ export default {
       this.fixedAddForm.a_f_workflow_id = this.workflowId
     },
     // 初始化两张固定表
-    async init ({ workflowId, direction = 'right', visible = true }) {
+    async init ({ workflowId, visible = true }) {
       this.workflowId = workflowId
-      this.direction = direction
       this.visible = visible
       await this.reload()
     },
@@ -355,4 +348,16 @@ export default {
   display: flex;
   flex-direction: column;
 }
+
+.loading-placeholder {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 300px;
+
+  /deep/ .ant-spin-text {
+    color: #666;
+    margin-top: 16px;
+  }
+}
 </style>

package/src/pages/WorkflowDetail/WorkflowPageDetail/TrimTextTail.vue

@@ -1,23 +1,23 @@
-<template>
-  <span v-if="text.length < length">{{ text }}</span>
-  <a-tooltip v-else>
-    <span slot="title">{{ text }}</span>
-    <span>{{ text.substring(0, length - 1) }}......</span>
-  </a-tooltip>
-</template>
-
-<script>
-export default {
-  name: 'TrimTextTail',
-  props: {
-    text: {
-      type: String,
-      default: ''
-    },
-    length: {
-      type: Number,
-      default: 10
-    }
-  }
-}
-</script>
+<template>
+  <span v-if="text.length < length">{{ text }}</span>
+  <a-tooltip v-else>
+    <span slot="title">{{ text }}</span>
+    <span>{{ text.substring(0, length - 1) }}......</span>
+  </a-tooltip>
+</template>
+
+<script>
+export default {
+  name: 'TrimTextTail',
+  props: {
+    text: {
+      type: String,
+      default: ''
+    },
+    length: {
+      type: Number,
+      default: 10
+    }
+  }
+}
+</script>