shuhi-ui/src/views/recycleOrder/components/order-timeline.vue

<template>
    <div class="demo-timeline">
        <div v-if="records.length" style="margin-bottom: 10px">{{ title }}</div>
        <el-timeline v-if="records.length">
            <el-timeline-item v-for="(item, index) in records" :key="index" :timestamp="item.createTime"
                :color="item.label">
                <div style="display: flex;align-items: center;flex-wrap: wrap;">
                    <el-icon :size="14" :color="item.label">
                        <Flag />
                    </el-icon>
                    <span>{{ item.createName }}：</span>
                    <span>{{ item.remark }}</span>
                </div>
            </el-timeline-item>
        </el-timeline>
        <el-empty v-else description="暂无数据"></el-empty>
    </div>
</template>

<script setup>
import { watch, ref, onMounted } from 'vue';
import request from '@/utils/request';
import { Flag } from '@element-plus/icons-vue';

const props = defineProps({
    orderId: {
        type: String,
        default: ''
    },
    title: {
        type: String,
        default: ''
    }
});

const records = ref([]);
const loading = ref(false);

//获取备注
const getRemarks = async () => {
    if (!props.orderId || loading.value) return;
    
    loading.value = true;
    try {
        const res = await request.get(`/order/remark/list?orderId=${props.orderId}`);
        records.value = res.data.data;
    } catch (error) {
        console.error('Failed to fetch remarks:', error);
    } finally {
        loading.value = false;
    }
};

watch(() => props.orderId, (newVal, oldVal) => {
    if (newVal && newVal !== oldVal) {
        records.value = [];
        getRemarks();
    }
}, { immediate: true });
</script>