geg-gas-web/src/components/SecondDev/FlowHistory.vue

<template>
    <div class="geg-flow-history">
        <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" style="display: flex;">
                            {{ item.approveUserName }} 
                        <a-image v-if="item.approveStampUrl" class="signature" :src="item.approveStampUrl"></a-image>
                    </div>
                    <div class="col-2">{{ parseTime(item.approveTime) }}</div>
                    <div class="col-3">
                        <span :class="getTagCls(item)">
                            [{{ item.approveResult }}]
                            <template v-if="item.approveComment != '' && item.approveComment != null">
                            [补充意见]
                             </template>
                        </span>
                        {{ item.approveComment }}
                    </div>
                </div>
            </template>
            <template v-if="mode === 'complex'">
                <div class="row">
                    <div class="col-1">{{ item.approveUserName }}</div>
                    <div class="col-2">用时：1小时10分</div>
                    <div class="col-3 agree">{{ item.taskName }}</div>
                </div>
                <div class="row">
                    <div class="col-1 position"></div>
                    <div class="col-2">{{ parseTime(item.approveTime) }}</div>
                    <div class="col-3">{{ item.approveComment }}</div>
                </div>
            </template>
        </div>
    </div>
</template>

<style lang="less">
    .geg-flow-history {
        .signature {
            height: 20px;
            width: 50px;
        }
        .row {
            display: flex;
            flex-direction: row;
            margin: 6px 0;
            line-height: 20px;
            font-size: 14px;
        }

        .col-1 {
            width: 160px;
        }

        .col-2 {
            width: 130px;
            color: #5a6875;
        }

        .col-3 {
            flex: 1;

            &.agree {
                color: #52c41a;
            }
        }

        .tag {
            padding-right: 4px;

            &.agree {
                color: #52c41a;
            }

            &.reject {
                color: #eaa63c;
            }
        }

        .col-node {
            width: 120px;
        }

        .position {
            color: #90a0af;
        }

        .item {
            padding: 8px 0;

            &.sep {
                border-top: 1px solid #e9e9e9;
            }
        }
    }
</style>

<script setup>
    import { defineProps, onMounted, ref, watch } from 'vue';
    import dayjs from 'dayjs';

    const props = defineProps({
        mode: {
            type: String,
            default: 'simple'
        },
        items: Array,
        autoHide: {
            type: Boolean,
            default: true
        },
        sort: {
            type: String,
            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>