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

<template>
  <div class="demo-timeline">
    <div v-if="loading" v-loading="loading" style="height: 180px"></div>
    <template v-else>
      <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="暂无数据" :image-size="80"></el-empty>
    </template>
  </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, Number],
      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>