From ded932c002dd1f59ed3ff03fdab3edd309585c0c Mon Sep 17 00:00:00 2001
From: changjinpeng <185154740@qq.com>
Date: Tue, 8 Mar 2022 10:43:23 +0800
Subject: [PATCH] 28093

---
 src/mods/AppMyPlan/progressDetail.vue | 432 ++++++++++++++------------
 1 file changed, 232 insertions(+), 200 deletions(-)

diff --git a/src/mods/AppMyPlan/progressDetail.vue b/src/mods/AppMyPlan/progressDetail.vue
index 223a0a3..a451e90 100644
--- a/src/mods/AppMyPlan/progressDetail.vue
+++ b/src/mods/AppMyPlan/progressDetail.vue
@@ -78,60 +78,72 @@
       <div class="detail-list" v-if="currIndex == 1">
         <div class="step-item" v-for="(item, index) in stepList" :key="index">
           <div class="line"></div>
-          <div class="detail-left">
-            <image class="avatar" v-if="item.stepAvatar && item.userName" :src="item.stepAvatar" />
-            <span v-if="!item.stepAvatar && item.userName">{{ item.userName.substr(item.userName.length - 2) }}</span>
-            <image v-if="index !== 0 && item.candidates && item.candidates.length > 1" class="detail-left__statusicon" src="/static/img/notice.png" />
-            <image class="avatar" v-if="index !== 0 && item.candidates && item.candidates.length === 1 && item.candidates[0].avatar" :src="item.candidates[0].avatar" />
-            <span v-if="index !== 0 && item.candidates && item.candidates.length === 1 && !item.candidates[0].avatar">{{ item.candidates[0].name.substr(item.candidates[0].name - 2) }}</span>
-            <image class="detail-left__icon" src="/static/img/gou.png" v-if="index === 0 || ['0', '1', '6', '5'].indexOf(item.stepType) > -1" />
-            <image class="detail-left__icon" src="/static/img/point.png" v-else-if="item.stepType !== '2'" />
-          </div>
-          <div class="detail-right">
-            <div class="detail-right__title">
-              <h2>{{ item.title }}</h2>
-              <span v-if="item.approvalTime">{{ item.approvalTime }}</span>
+
+          <div class="step-items">
+            <div class="detail-left">
+              <image class="avatar" v-if="item.stepAvatar && item.userName" :src="item.stepAvatar" />
+              <span v-if="!item.stepAvatar && item.userName">{{ item.userName.substr(item.userName.length - 2) }}</span>
+              <image v-if="index !== 0 && item.candidates && item.candidates.length > 1" class="detail-left__statusicon" src="/static/img/notice.png" />
+              <image class="avatar" v-if="index !== 0 && item.candidates && item.candidates.length === 1 && item.candidates[0].avatar" :src="item.candidates[0].avatar" />
+              <span v-if="index !== 0 && item.candidates && item.candidates.length === 1 && !item.candidates[0].avatar">{{ item.candidates[0].name.substr(item.candidates[0].name - 2) }}</span>
+              <image class="detail-left__icon" src="/static/img/gou.png" v-if="index === 0 || ['0', '1', '6', '5'].indexOf(item.stepType) > -1" />
+              <image class="detail-left__icon" src="/static/img/point.png" v-else-if="item.stepType !== '2'" />
             </div>
-            <div class="detail-right__subtitle" v-if="item.stepType === '0'">
-              <span>{{ item.userName || '-' }}</span>
-              <i>({{ stepTypeList[item.stepType] }})</i>
-            </div>
-            <div class="detail-right__subtitle" v-else-if="item.stepType !== '2'">
-              <span>{{ item.title2 }}</span>
-              <i v-if="item.title2Desc" :style="{ color: mapColor(item.stepType) }">{{ item.title2Desc }}</i>
-            </div>
-            <div class="detail-right__subtitle" v-else-if="item.stepType === '2'">
-              <span>
+
+            <div class="detail-right">
+              <div class="detail-right__title">
+                <h2>{{ item.title }}</h2>
+                <span v-if="item.approvalTime">{{ item.approvalTime }}</span>
+              </div>
+              <div class="detail-right__subtitle" v-if="item.stepType === '0'">
+                <span>{{ item.userName || '-' }}</span>
+                <i>({{ stepTypeList[item.stepType] }})</i>
+              </div>
+              <div class="detail-right__subtitle" v-else-if="item.stepType !== '2'">
                 <span>{{ item.title2 }}</span>
-                <span style="opacity: 1">：</span>
-              </span>
-              <i style="color: #f14242"> {{ item.title2Desc }}</i>
-            </div>
-            <div class="detail-right__subtitle" v-if="item.stepType === '2'">
-              <span>审批意见：</span>
-              <i style="color: #333">{{ item.opinion || '-' }}</i>
-            </div>
-            <div class="detail-right__subtitle detail-right__text" style="display: block" v-if="item.candidateFieldInfos && item.candidateFieldInfos.length" v-for="(candidateField, z) in item.candidateFieldInfos" :key="z">
-              <span>{{ candidateField.fieldName }}</span>
-              <i style="color: #343d65; display: contents">{{ candidateField.dictionaryCode ? $dict.getLabel(candidateField.dictionaryCode, candidateField.fieldValue) || '-' : candidateField.fieldValue || '-' }}</i>
-            </div>
-            <div class="detail-right__imgs" v-if="item.pictureFiles && item.pictureFiles.length">
-              <image :src="img.url" mode="aspectFill" v-for="(img, i) in item.pictureFiles" :key="i" @click="previewPic(item.pictureFiles, img.url)" />
-            </div>
-            <div class="detail-right__doc" v-if="item.annexFiles && item.annexFiles.length">
-              <div class="doc-item" v-for="(file, j) in item.annexFiles" :key="j" @click="saveFile(file)">
-                <h2>{{ file.name }}</h2>
-                <span>{{ (file.size / 1024).toFixed(2) }}KB</span>
+                <i v-if="item.title2Desc" :style="{ color: mapColor(item.stepType) }">{{ item.title2Desc }}</i>
               </div>
-            </div>
-            <div class="detail-right__userlist" v-if="item.candidates && item.candidates.length">
-              <div class="detail-right__userinfo" v-for="(user, z) in item.candidates" :key="z">
-                <image v-if="user.avatar" :src="user.avatar" />
-                <span v-else>{{ user.name.substr(user.name.length - 2) }}</span>
-                <h2>{{ user.name }}</h2>
+              <div class="detail-right__subtitle" v-else-if="item.stepType === '2'">
+                <span>
+                  <span>{{ item.title2 }}</span>
+                  <span style="opacity: 1">：</span>
+                </span>
+                <i style="color: #f14242"> {{ item.title2Desc }}</i>
+              </div>
+
+              <div class="detail-right__subtitle" v-if="item.opinion && item.stepType === '2'" style="padding: 5px 0">
+                <span>审批意见：</span>
+                <i style="color: #333">{{ item.opinion }}</i>
+              </div>
+
+              <div class="detail-right__subtitle" v-if="item.stepType != 2 && item.opinion" style="padding: 5px 0">
+                <i style="color: #333">{{ item.opinion }}</i>
+              </div>
+
+              <div class="detail-right__subtitle detail-right__text" style="display: block" v-if="item.candidateFieldInfos && item.candidateFieldInfos.length" v-for="(candidateField, z) in item.candidateFieldInfos" :key="z">
+                <span>{{ candidateField.fieldName }}</span>
+                <i style="color: #343d65; display: contents">{{ candidateField.dictionaryCode ? $dict.getLabel(candidateField.dictionaryCode, candidateField.fieldValue) || '-' : candidateField.fieldValue || '-' }}</i>
+              </div>
+              <div class="detail-right__imgs" v-if="item.pictureFiles && item.pictureFiles.length">
+                <image :src="img.url" mode="aspectFill" v-for="(img, i) in item.pictureFiles" :key="i" @click="previewPic(item.pictureFiles, img.url)" />
+              </div>
+              <div class="detail-right__doc" v-if="item.annexFiles && item.annexFiles.length">
+                <div class="doc-item" v-for="(file, j) in item.annexFiles" :key="j" @click="saveFile(file)">
+                  <h2>{{ file.name }}</h2>
+                  <span>{{ (file.size / 1024).toFixed(2) }}KB</span>
+                </div>
+              </div>
+              <div class="detail-right__userlist" v-if="item.candidates && item.candidates.length">
+                <div class="detail-right__userinfo" v-for="(user, z) in item.candidates" :key="z">
+                  <image v-if="user.avatar" :src="user.avatar" />
+                  <span v-else>{{ user.name.substr(user.name.length - 2) }}</span>
+                  <h2>{{ user.name }}</h2>
+                </div>
               </div>
             </div>
           </div>
+
+          <!-- <div class="opinions" v-if="item.opinion && item.stepType != 2">{{ item.opinion }}</div> -->
         </div>
       </div>
     </div>
@@ -332,190 +344,210 @@ view {
 }
 
 .step-item {
-  display: flex;
-  position: relative;
   padding-bottom: 88px;
+  position: relative;
+  .step-items {
+    display: flex;
 
-  &:last-child {
-    padding-bottom: 0;
+    &:last-child {
+      padding-bottom: 0;
 
-    .line {
-      display: none;
+      .line {
+        display: none;
+      }
     }
-  }
 
-  .detail-right__doc {
-    padding-top: 8px;
+    .detail-right__doc {
+      padding-top: 8px;
 
-    .doc-item {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 16px;
-      padding: 16px;
-      background: #f7f7f7;
-      border-radius: 4px;
-      border: 1px solid #dddddd;
-
-      &:last-child {
+      .doc-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
         margin-bottom: 16px;
-      }
+        padding: 16px;
+        background: #f7f7f7;
+        border-radius: 4px;
+        border: 1px solid #dddddd;
 
-      span {
-        color: #999999;
-        font-size: 24px;
-      }
+        &:last-child {
+          margin-bottom: 16px;
+        }
 
-      h2 {
-        max-width: 444px;
-        line-height: 32px;
-        color: #333333;
-        font-size: 24px;
-        word-break: break-all;
-      }
-    }
-  }
-
-  .detail-right {
-    flex: 1;
-
-    .detail-right__title {
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 6px;
-
-      span {
-        color: #999999;
-        font-size: 28px;
-      }
-
-      & > h2 {
-        color: #333333;
-        font-size: 32px;
-        font-weight: 600;
-      }
-    }
-
-    .detail-right__userlist {
-      margin-top: 16px;
-      font-size: 0;
-
-      .detail-right__userinfo {
-        display: inline-block;
-        margin-right: 32px;
-        margin-bottom: 32px;
-        text-align: center;
-
-        image,
         span {
-          display: inline-block;
-          width: 64px;
-          height: 64px;
-          line-height: 64px;
-          border-radius: 50%;
-          margin-bottom: 8px;
-          text-align: center;
-          color: #ffffff;
-          font-size: 26px;
-          border-radius: 50%;
-          background: #2266ff;
+          color: #999999;
+          font-size: 24px;
         }
 
         h2 {
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          color: #666666;
+          max-width: 444px;
+          line-height: 32px;
+          color: #333333;
           font-size: 24px;
+          word-break: break-all;
         }
       }
     }
 
-    .detail-right__subtitle {
-      display: flex;
-      margin-bottom: 6px span {
-        margin-right: 10px;
-        color: #666666;
-        font-size: 28px;
+    .detail-right {
+      flex: 1;
+
+      .detail-right__title {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 6px;
+
+        span {
+          color: #999999;
+          font-size: 28px;
+        }
+
+        & > h2 {
+          color: #333333;
+          font-size: 32px;
+          font-weight: 600;
+        }
       }
 
-      i {
-        flex: 1;
-        text-align: justify;
-        word-break: break-all;
-        color: #2ea222;
-        font-size: 28px;
+      .detail-right__userlist {
+        margin-top: 16px;
+        font-size: 0;
+
+        .detail-right__userinfo {
+          display: inline-block;
+          margin-right: 32px;
+          margin-bottom: 32px;
+          text-align: center;
+
+          image,
+          span {
+            display: inline-block;
+            width: 64px;
+            height: 64px;
+            line-height: 64px;
+            border-radius: 50%;
+            margin-bottom: 8px;
+            text-align: center;
+            color: #ffffff;
+            font-size: 26px;
+            border-radius: 50%;
+            background: #2266ff;
+          }
+
+          h2 {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            color: #666666;
+            font-size: 24px;
+          }
+        }
+      }
+
+      .detail-right__subtitle {
+        display: flex;
+        margin-bottom: 6px span {
+          margin-right: 10px;
+          color: #666666;
+          font-size: 28px;
+        }
+
+        i {
+          flex: 1;
+          text-align: justify;
+          word-break: break-all;
+          color: #2ea222;
+          font-size: 28px;
+        }
+      }
+
+      .detail-right__text {
+        // color: #343D65;
+        // font-size: 28px;
+        // margin: 6px 0;
+      }
+
+      .detail-right__imgs {
+        font-size: 0;
+
+        image {
+          display: inline-block;
+          width: 136px;
+          height: 136px;
+          margin-right: 8px;
+          margin-bottom: 8px;
+          margin-top: 8px;
+          border-radius: 4px;
+        }
       }
     }
 
-    .detail-right__text {
-      // color: #343D65;
-      // font-size: 28px;
-      // margin: 6px 0;
-    }
-
-    .detail-right__imgs {
-      font-size: 0;
-
-      image {
-        display: inline-block;
-        width: 136px;
-        height: 136px;
-        margin-right: 8px;
-        margin-bottom: 8px;
-        margin-top: 8px;
-        border-radius: 4px;
-      }
-    }
-  }
-
-  .line {
-    position: absolute;
-    left: 38px;
-    top: 80px;
-    width: 4px;
-    height: 100%;
-    background: #eeeeee;
-  }
-
-  .detail-left {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    width: 80px;
-    height: 80px;
-    margin-right: 40px;
-    flex-shrink: 1;
-    border-radius: 50%;
-    background: #2266ff;
-
-    .detail-left__statusicon {
-      width: 48px;
-      height: 48px;
-    }
-
-    .detail-left__icon {
+    .line {
       position: absolute;
-      top: 48px;
-      right: -4px;
-      width: 36px;
-      height: 36px;
+      left: 38px;
+      top: 80px;
+      width: 4px;
+      height: 100%;
+      background: #eeeeee;
     }
 
-    span,
-    .avatar {
-      display: block;
+    .detail-left {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
       width: 80px;
       height: 80px;
-      line-height: 80px;
-      color: #fff;
-      font-size: 28px;
-      text-align: center;
+      margin-right: 40px;
+      flex-shrink: 1;
       border-radius: 50%;
       background: #2266ff;
+
+      .detail-left__statusicon {
+        width: 48px;
+        height: 48px;
+      }
+
+      .detail-left__icon {
+        position: absolute;
+        top: 48px;
+        right: -4px;
+        width: 36px;
+        height: 36px;
+      }
+
+      span,
+      .avatar {
+        display: block;
+        width: 80px;
+        height: 80px;
+        line-height: 80px;
+        color: #fff;
+        font-size: 28px;
+        text-align: center;
+        border-radius: 50%;
+        background: #2266ff;
+        z-index: 999;
+      }
     }
   }
+  .line {
+    position: absolute;
+    height: 100%;
+    width: 1px;
+    left: 40px;
+    background: #eee;
+  }
+  .opinions {
+    padding-top: 10px;
+    margin-left: 120px;
+    line-height: 46px;
+  }
+}
+.step-item:last-child {
+  .line {
+    background: none;
+  }
 }
 
 .status {