perf(@gms/gms-plugin-billexpand): 调整变更轨迹样式

develop/@gms/gms-plugin-billexpand/src/control/modification-track/modification-track.vue

@@ -37,13 +37,18 @@
               </div>
               <div>{{formatDate(step.createTime)}}</div>
               <div class="comment">
-                <div class="modification">
+                <div class="collapse-header" @click="toggleDetail(k)">
+                  <Icon type="md-arrow-dropup" v-if="expandMap[k]" />
+                  <Icon type="md-arrow-dropdown" v-else />
+                </div>
+                <div class="modification" v-show="expandMap[k]">
                   <div
-                    v-for="modification in step.modifyDesc"
+                    v-for="modification, modificationIndex in step.modifyDesc"
                     :key="modification.label"
                   >
                     <div class="label text-main">{{modification.label}}</div>
                     <div v-if="isArray(modification.value)">
+                      <div class="sub-table-modification-overview">{{modification.value[1].value}}</div>
                       <div
                         class="sub-table-modification-header"
                         @click="currentExpandBlock == modification ? currentExpandBlock = null : currentExpandBlock = modification"
@@ -63,7 +68,7 @@
                       </div>
                     </div>
                     <ValueChangeDetail v-else :value="modification.value" />
-                    <Divider />
+                    <Divider v-if="modificationIndex != step.modifyDesc.length - 1" />
                   </div>
                 </div>
               </div>
@@ -97,6 +102,7 @@ export default {
       showDrawer: false,
       data: [],
       currentExpandBlock: null,
+      expandMap: [],
     }
   },
   
@@ -124,12 +130,17 @@ export default {
         ans['modifyDesc'] = JSON.parse(ans['modifyDesc'])
         return ans
       })
+      this.expandMap = new Array(this.data.length).fill(false)
     }
   },
   
   beforeDestroy() {
   },
   methods:{
+    toggleDetail(index) {
+      this.expandMap[index] = !this.expandMap[index]
+      this.expandMap = [...this.expandMap]
+    },
     isCurrentExpandBlock(block) {
       return this.currentExpandBlock === block
     },
@@ -249,8 +260,23 @@ export default {
           line-height: 20px;
         }
         .comment {
+          .collapse-header {
+            background-color: #e5e5e5;
+            height: 26px;
+            font-size: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            user-select: none;
+          }
           .modification {
-            margin-top: 5px;
+            border: 1px solid #e5e5e5;
+            padding: 18px 5px;
+            .sub-table-modification-overview {
+              color: black;
+              margin: 5px 0;
+            }
             .sub-table-modification-header {
               user-select: none;
               cursor: pointer;