feat: 将我发起的流程列表独立出来，改为tab中打开，调整审批记录的样式

src/components/SecondDev/FlowHistory.vue

@@ -1,17 +1,26 @@
 <template>
     <div class="geg-flow-history">
-        <div v-for="(item, index) in items" :class="{ sep: index !== 0 }" class="item">
-            <template v-if="mode === 'simple'"></template>
+        <div v-for="(item, index) in comments" :class="{ sep: index !== 0 }" class="item">
+            <template v-if="mode === 'simple'">
+                <div class="row">
+                    <div class="col-node">{{ item.taskName }}</div>
+                    <div class="col-1">{{ item.approveUserName }}</div>
+                    <div class="col-2">{{ parseTime(item.approveTime) }}</div>
+                    <div class="col-3"
+                        ><span :class="getTagCls(item)">[{{ item.approveResult }}]</span>{{ item.approveComment }}</div
+                    >
+                </div>
+            </template>
             <template v-if="mode === 'complex'">
                 <div class="row">
-                    <div class="col-1">审批人</div>
+                    <div class="col-1">{{ item.approveUserName }}</div>
                     <div class="col-2">用时：1小时10分</div>
-                    <div class="col-3 agree">{{ item.nodeName }}</div>
+                    <div class="col-3 agree">{{ item.taskName }}</div>
                 </div>
                 <div class="row">
-                    <div class="col-1 position">职务</div>
-                    <div class="col-2">2023-03-27 12:00:00</div>
-                    <div class="col-3">{{ item.comment }}</div>
+                    <div class="col-1 position"></div>
+                    <div class="col-2">{{ parseTime(item.approveTime) }}</div>
+                    <div class="col-3">{{ item.approveComment }}</div>
                 </div>
             </template>
         </div>
@@ -29,11 +38,11 @@
         }
 
         .col-1 {
-            width: 180px;
+            width: 140px;
         }
 
         .col-2 {
-            width: 180px;
+            width: 130px;
             color: #5a6875;
         }
 
@@ -45,7 +54,23 @@
             }
         }
 
-        .position{
+        .tag {
+            padding-right: 4px;
+
+            &.agree {
+                color: #52c41a;
+            }
+
+            &.reject {
+                color: #eaa63c;
+            }
+        }
+
+        .col-node {
+            width: 120px;
+        }
+
+        .position {
             color: #90a0af;
         }
 
@@ -60,12 +85,13 @@
 </style>
 
 <script setup>
-    import { defineProps, ref } from 'vue';
+    import { defineProps, onMounted, ref, watch } from 'vue';
+    import dayjs from 'dayjs';
 
     const props = defineProps({
         mode: {
             type: String,
-            default: 'complex'
+            default: 'simple'
         },
         items: Array,
         autoHide: {
@@ -77,4 +103,42 @@
             default: 'desc'
         }
     });
+
+    const comments = ref([]);
+
+    function parseTime(t) {
+        return dayjs(t).format('YYYY-MM-DD HH:mm');
+    }
+
+    onMounted(() => {
+        if (props.items?.length) {
+            sortList();
+        }
+    });
+
+    watch(
+        () => props.items,
+        () => {
+            sortList();
+        }
+    );
+
+    function sortList() {
+        const newList = props.items.map((item) => {
+            item.ts = dayjs(item.approveTime).valueOf();
+            return item;
+        });
+        newList.sort((item1, item2) => {
+            return props.sort === 'desc' ? item2.ts - item1.ts : item1.ts - item2.ts;
+        });
+        comments.value = newList;
+    }
+
+    function getTagCls(item) {
+        return {
+            agree: item.approveType === 0,
+            reject: item.approveType === 2,
+            tag: true
+        };
+    }
 </script>