From 66c173a50b123742343c0663a03f741db4291881 Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期一, 09 十月 2023 09:33:48 +0800
Subject: [PATCH] feat: 步骤条圆点前颜色与当前状态同步

---
 src/components/TaskControlModal.vue |   87 ++++++++++++++++++++++++++++++++++++-------
 1 files changed, 72 insertions(+), 15 deletions(-)

diff --git a/src/components/TaskControlModal.vue b/src/components/TaskControlModal.vue
index a32ed8d..2134a65 100644
--- a/src/components/TaskControlModal.vue
+++ b/src/components/TaskControlModal.vue
@@ -74,7 +74,7 @@
                   瀹㈡埛鍚嶇О锛歿{ currentTaskData.Order.customer || "" }}
                 </div>
                 <div class="title-item title-item-two">
-                  璐х墿鎻忚堪锛� {{ currentTaskData.Order.orderAttr || "" }}
+                  閫氶亾锛� {{ channelNameConfig[currentTaskData.Channel] || "" }}
                 </div>
 
                 <div class="title-item title-item-two">
@@ -101,6 +101,14 @@
                   {{ item.Key }}锛歿{ item.Value || "" }}
 
                 </div>
+              </div>
+            </div>
+            <div class="process-err-tip" v-if="getProcessParamsErrMsg">
+              <div class="tip-icon">
+                <span class="el-icon-error color_error"></span>
+              </div>
+              <div class="tip-content">
+                鎻愮ず: {{getProcessParamsErrMsg}}
               </div>
             </div>
             <div class="process-box" v-if="showBtn === 2 || showBtn === 3">
@@ -152,13 +160,13 @@
           </template>
         </div>
         <!--宸︾炕椤垫寜閽�-->
-        <div v-show="showPreviousTaskBtn" class="paginator-btn previous" @click="previousTask">&lt;</div>
+        <div v-show="showPreviousTaskBtn" class="paginator-btn previous" :class="{disabled:showBtn ===2 ||messageError}" @click="previousTask">&lt;</div>
         <!--鍙崇炕椤垫寜閽�-->
-        <div v-show="showNextTaskBtn" class="paginator-btn next" @click="nextTask">&gt;</div>
+        <div v-show="showNextTaskBtn" class="paginator-btn next" :class="{disabled:showBtn ===2 ||messageError}" @click="nextTask">&gt;</div>
       </div>
       <div slot="footer" :class="messageError?'dialog-footer tac btn-error':'dialog-footer tac'"
            style="overflow: hidden">
-        <template v-if="messageError">
+        <template v-if="messageError || getProcessParamsErrMsg">
           <div class="btn" v-if="messageError ==='涓嬪彂鎴愬姛锛�'||getProcessParamsErrMsg" @click="closeClick">
             <img src="../../public/close-btn.png"/>
           </div>
@@ -228,13 +236,18 @@
       showBtn: 1,
       num: 0,
       timer: null,
-      safeProduce:'',
+      safeProduce: '',
       message: this.safeProduce,
       messageError: "",
       resParams: {},
       isLoading: false,
       second: 0,
       secondTimer: null,
+      // 閫氶亾鍚嶇О閰嶇疆 Channel 0 瀵瑰簲灞曠ず 0, Channel 1 瀵瑰簲灞曠ず A,鏆傛椂蹇界暐鍏朵綑鎯呭喌
+      channelNameConfig: {
+        0: '0',
+        1: 'A'
+      }
     };
   },
   mounted() {
@@ -271,10 +284,6 @@
     }
   },
   watch: {
-    taskData(val) {
-      this.message = this.safeProduce;
-      this.getInfo();
-    },
     num() {
       if (this.num === 30) {
         clearInterval(this.timer);
@@ -291,6 +300,9 @@
       if (this.timer) {
         clearInterval(this.timer);
       }
+      if (this.secondTimer) {
+        clearInterval(this.secondTimer)
+      }
       this.num = 0;
       this.showBtn = 1;
       this.isLoading = false
@@ -298,7 +310,7 @@
       this.secondTimer = null
       this.messageError = ''
       this.resParams = {};
-      if (newVal){
+      if (newVal) {
         this.getTaskList().then(() => {
           const firstData = this.taskList[0]
           const id = firstData?.Procedure?.ID
@@ -357,16 +369,28 @@
         startTask({id}).then((res) => {
           if (res.code === 200) {
             this.currentProcessParams = res.data.Params ?? []
+            this.getProcessParamsErrMsg =''
           } else {
+            this.currentProcessParams = []
             this.getProcessParamsErrMsg = res.msg ?? '鑾峰彇宸ヨ壓鍙傛暟澶辫触锛�';
           }
+          this.getInfo()
+        },err=>{
+          console.error(err)
+          this.currentProcessParams = []
+          this.getProcessParamsErrMsg = '鑾峰彇宸ヨ壓鍙傛暟澶辫触锛�'
         });
       }
     },
+
     /**
      * 鍓嶇炕椤�
      */
     previousTask() {
+      // 鐢熶骇鍑嗗鍊掕鏃朵腑鍜屼笅鍙戝け璐ョ姝㈢炕椤�
+      if (this.showBtn === 2 || this.messageError){
+        return
+      }
       if (this.currentTaskIndex - 1 >= 0) {
         this.currentTaskIndex -= 1
         this.$nextTick(() => {
@@ -381,6 +405,10 @@
      * 鍚庣炕椤�
      */
     nextTask() {
+      // 鐢熶骇鍑嗗鍊掕鏃朵腑鍜屼笅鍙戝け璐ョ姝㈢炕椤�
+      if (this.showBtn === 2 || this.messageError){
+        return
+      }
       if (this.currentTaskIndex + 1 <= this.taskList.length - 1) {
         this.currentTaskIndex += 1
         this.$nextTick(() => {
@@ -399,9 +427,6 @@
         this.show = true;
       } else {
         this.show = false;
-      }
-      if (this.getProcessParamsErrMsg) {
-        this.messageError = this.getProcessParamsErrMsg;
       }
     },
     getDateObj(date, fmt) {
@@ -470,9 +495,10 @@
           }
         }, err => {
           console.error(err)
-        }).finally(() => {
-          this.isLoading = false
         });
+        setTimeout(() => {
+          this.isLoading = false;
+        }, 30000)
       }
     },
     getCode(res) {
@@ -899,6 +925,12 @@
   &.next {
     right: -60px;
     padding-left: 4px;
+
+  }
+  &.disabled{
+    background-color: #cccccc;
+    opacity: 0.8;
+    cursor: not-allowed;
   }
 }
 
@@ -919,5 +951,30 @@
     color: #ffffffaa;
     font-size: 16px;
   }
+
+}
+.process-err-tip{
+  box-sizing: border-box;
+  padding-top: 10px;
+  height: 160px;
+  width: 100%;
+  .tip-icon{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 70px;
+    .el-icon-error{
+      font-size: 70px;
+    }
+  }
+  .tip-content{
+    height: 70px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 17px;
+    font-weight: 500;
+  }
 }
 </style>

--
Gitblit v1.8.0