Merge pull request #78 from lanyulei/dev

fix: 修复工单处理页面忽闪的问题。

src/views/process/list/handle.vue

 <template>
   <div class="app-container">
-    <el-card class="box-card">
-      <div class="text item">
-        <el-steps v-if="currentNode.clazz !== undefined && currentNode.clazz !== null && currentNode.clazz !== ''" :active="activeIndex" finish-status="success">
-          <template v-for="(item, index) in nodeStepList">
-            <el-step
-              v-if="item.isHideNode === false ||
-                item.isHideNode === undefined ||
-                item.isHideNode == null ||
-                item.id === processStructureValue.workOrder.current_state"
-              :key="index"
-              :title="item.label"
+    <div v-if="isLoadingStatus" />
+    <div v-else>
+      <el-card class="box-card">
+        <div class="text item">
+          <el-steps v-if="currentNode.clazz !== undefined && currentNode.clazz !== null && currentNode.clazz !== ''" :active="activeIndex" finish-status="success">
+            <template v-for="(item, index) in nodeStepList">
+              <el-step
+                v-if="item.isHideNode === false ||
+                  item.isHideNode === undefined ||
+                  item.isHideNode == null ||
+                  item.id === processStructureValue.workOrder.current_state"
+                :key="index"
+                :title="item.label"
+              />
+            </template>
+          </el-steps>
+          <div v-else>
+            <el-alert
+              show-icon
+              title="未找到当前工单流程信息，请确认当前工单绑定的流程是否存在。"
+              type="warning"
             />
-          </template>
-        </el-steps>
-        <div v-else>
-          <el-alert
-            show-icon
-            title="未找到当前工单流程信息，请确认当前工单绑定的流程是否存在。"
-            type="warning"
-          />
+          </div>
         </div>
-      </div>
-    </el-card>
+      </el-card>
 
-    <el-alert
-      v-if="activeIndex !== nodeStepList.length && processStructureValue.workOrder.is_end===1"
-      style="margin-top: 15px"
-      :title="alertMessage"
-      type="error"
-      :closable="false"
-    />
+      <el-alert
+        v-if="activeIndex !== nodeStepList.length && processStructureValue.workOrder.is_end===1"
+        style="margin-top: 15px"
+        :title="alertMessage"
+        type="error"
+        :closable="false"
+      />
 
-    <el-card class="box-card" style="margin-top: 15px">
-      <div slot="header" class="clearfix">
-        <span>公共信息</span>
-      </div>
-      <div class="text item">
-        <el-form label-width="100px">
-          <el-row>
-            <el-col :span="12">
-              <el-form-item label="标题:" style="margin-bottom: 5px">
-                <span>{{ processStructureValue.workOrder.title }}</span>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="优先级:" style="margin-bottom: 0">
-                <span v-if="processStructureValue.workOrder.priority===2">
-                  <el-tag type="warning">紧急</el-tag>
-                </span>
-                <span v-else-if="processStructureValue.workOrder.priority===3">
-                  <el-tag type="danger">非常紧急</el-tag>
-                </span>
-                <span v-else>
-                  <el-tag type="success">一般</el-tag>
-                </span>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-      </div>
-    </el-card>
+      <el-card class="box-card" style="margin-top: 15px">
+        <div slot="header" class="clearfix">
+          <span>公共信息</span>
+        </div>
+        <div class="text item">
+          <el-form label-width="100px">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="标题:" style="margin-bottom: 5px">
+                  <span>{{ processStructureValue.workOrder.title }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="优先级:" style="margin-bottom: 0">
+                  <span v-if="processStructureValue.workOrder.priority===2">
+                    <el-tag type="warning">紧急</el-tag>
+                  </span>
+                  <span v-else-if="processStructureValue.workOrder.priority===3">
+                    <el-tag type="danger">非常紧急</el-tag>
+                  </span>
+                  <span v-else>
+                    <el-tag type="success">一般</el-tag>
+                  </span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+      </el-card>
 
-    <el-card class="box-card" style="margin-top: 15px;">
-      <div slot="header" class="clearfix">
-        <span>表单信息</span>
-      </div>
-      <div class="text item">
-        <template v-for="(tplItem, tplIndex) in processStructureValue.tpls">
-          <fm-generate-form
-            v-show="currentNode.hideTpls===undefined ||
-              currentNode.hideTpls===null ||
-              currentNode.hideTpls.indexOf(tplItem.form_structure.id)===-1"
-            :key="tplIndex"
-            :ref="'generateForm-'+tplItem.id"
-            :preview="(currentNode.hideTpls!==undefined &&
-              currentNode.hideTpls!==null &&
-              currentNode.hideTpls.indexOf(tplItem.form_structure.id)!==-1) ||
-              (currentNode.writeTpls===undefined ||
-              currentNode.writeTpls===null ||
-              currentNode.writeTpls.indexOf(tplItem.form_structure.id)===-1)||
-              (isActiveProcessing && currentNode.activeOrder)?true:false"
-            :remote="remoteFunc"
-            :value="tplItem.form_data"
-            :data="tplItem.form_structure"
-          />
-        </template>
-      </div>
-      <div v-if="processStructureValue.userAuthority">
-        <hr style="background-color: #d9d9d9; border:0; height:1px; margin-bottom: 15px">
-        <div>
-          <el-input
-            v-model="remarks"
-            type="textarea"
-            placeholder="请输入备注信息"
-            maxlength="200"
-            :autosize="{ minRows: 3, maxRows: 99}"
-            show-word-limit
-          />
+      <el-card class="box-card" style="margin-top: 15px;">
+        <div slot="header" class="clearfix">
+          <span>表单信息</span>
         </div>
-        <div class="text item" style="text-align: center;margin-top:18px">
-          <div
-            v-if="isActiveProcessing && currentNode.activeOrder"
-          >
-            <el-button
-              v-permisaction="['process:list:handle:active']"
-              type="primary"
-              @click="activeOrderActive"
-            >
-              主动接单
-            </el-button>
+        <div class="text item">
+          <template v-for="(tplItem, tplIndex) in processStructureValue.tpls">
+            <fm-generate-form
+              v-show="currentNode.hideTpls===undefined ||
+                currentNode.hideTpls===null ||
+                currentNode.hideTpls.indexOf(tplItem.form_structure.id)===-1"
+              :key="tplIndex"
+              :ref="'generateForm-'+tplItem.id"
+              :preview="(currentNode.hideTpls!==undefined &&
+                currentNode.hideTpls!==null &&
+                currentNode.hideTpls.indexOf(tplItem.form_structure.id)!==-1) ||
+                (currentNode.writeTpls===undefined ||
+                currentNode.writeTpls===null ||
+                currentNode.writeTpls.indexOf(tplItem.form_structure.id)===-1)||
+                (isActiveProcessing && currentNode.activeOrder)?true:false"
+              :remote="remoteFunc"
+              :value="tplItem.form_data"
+              :data="tplItem.form_structure"
+            />
+          </template>
+        </div>
+        <div v-if="processStructureValue.userAuthority">
+          <hr style="background-color: #d9d9d9; border:0; height:1px; margin-bottom: 15px">
+          <div>
+            <el-input
+              v-model="remarks"
+              type="textarea"
+              placeholder="请输入备注信息"
+              maxlength="200"
+              :autosize="{ minRows: 3, maxRows: 99}"
+              show-word-limit
+            />
           </div>
-          <div v-else>
-            <template v-for="(item, index) in processStructureValue.edges">
+          <div class="text item" style="text-align: center;margin-top:18px">
+            <div
+              v-if="isActiveProcessing && currentNode.activeOrder"
+            >
               <el-button
-                v-if="processStructureValue.workOrder.is_end===0 && item.source===currentNode.id"
-                :key="index"
+                v-permisaction="['process:list:handle:active']"
                 type="primary"
-                @click="submitAction(item)"
+                @click="activeOrderActive"
               >
-                {{ item.label }}
+                主动接单
               </el-button>
-            </template>
+            </div>
+            <div v-else>
+              <template v-for="(item, index) in processStructureValue.edges">
+                <el-button
+                  v-if="processStructureValue.workOrder.is_end===0 && item.source===currentNode.id"
+                  :key="index"
+                  type="primary"
+                  @click="submitAction(item)"
+                >
+                  {{ item.label }}
+                </el-button>
+              </template>
+            </div>
           </div>
         </div>
-      </div>
-    </el-card>
+      </el-card>
 
-    <el-card class="box-card" style="margin-top: 15px">
-      <div slot="header" class="clearfix">
-        <span>工单流转历史</span>
-      </div>
-      <div class="text item">
-        <el-table
-          :data="circulationHistoryList"
-          border
-          style="width: 100%"
-        >
-          <el-table-column
-            prop="state"
-            label="节点"
-          />
-          <el-table-column
-            prop="circulation"
-            label="流转"
-          />
-          <el-table-column
-            prop="processor"
-            label="处理人"
-          />
-          <el-table-column
-            prop="create_time"
-            label="处理时间"
-          />
-          <el-table-column
-            prop="remarks"
-            label="备注"
-          />
-        </el-table>
-      </div>
-    </el-card>
+      <el-card class="box-card" style="margin-top: 15px">
+        <div slot="header" class="clearfix">
+          <span>工单流转历史</span>
+        </div>
+        <div class="text item">
+          <el-table
+            :data="circulationHistoryList"
+            border
+            style="width: 100%"
+          >
+            <el-table-column
+              prop="state"
+              label="节点"
+            />
+            <el-table-column
+              prop="circulation"
+              label="流转"
+            />
+            <el-table-column
+              prop="processor"
+              label="处理人"
+            />
+            <el-table-column
+              prop="create_time"
+              label="处理时间"
+            />
+            <el-table-column
+              prop="remarks"
+              label="备注"
+            />
+          </el-table>
+        </div>
+      </el-card>
+    </div>
   </div>
 </template>
 
@@ -183,6 +186,7 @@ import { mapGetters } from 'vuex'
 export default {
   data() {
     return {
+      isLoadingStatus: true,
       currentNode: {
         hideTpls: null,
         writeTpls: null
@@ -271,6 +275,7 @@ export default {
             break
           }
         }
+        this.isLoadingStatus = false
         this.getAlertMessage()
       })
     },