order-ui-pc/src/views/bbc/bbcOnline/components/process-remark-time-line.vue

<template>
  <div class="processRearkTimeLine">
    <el-steps
      direction="vertical"
      :active="options.length"
      :space="80"
      :finish-status="finishStatus"
      :process-status="finishStatus"
    >
      <el-step
        icon="el-icon-success"
        v-for="(item, index) in options"
        :key="item.time + index"
        :finish-status="finishStatus"
        :process-status="finishStatus"
        style="margin: 0 0 0 150px; position: relative"
      >
        <div
          slot="title"
          style="position: absolute; width: 142px; left: -150px; text-align: right"
        >
          {{ (options8.find((si) => si.id == item.exam_status) || {}).name || "--" }}
        </div>
        <div slot="description">
          <p class="name">操作人： {{ item.exam_name }}</p>
          <p class="time" v-if="item.exam_remark">备注： {{ item.exam_remark }}</p>
          <p class="time">
            {{ item.addtime }}
          </p>
        </div>
      </el-step>
    </el-steps>
  </div>
</template>

<script>
import asyncRequest from "@/apis/service/goodStore/goodsOnline";
import resToken from "@/mixins/resToken";
import { options8 } from "../columns";
export default {
  name: "processRearkTimeLine",
  props: ["skuCode", "newTime"],
  mixins: [resToken],
  data() {
    return {
      options: [],
      loading: false,
      options8,
    };
  },
  watch: {
    newTime: function (val) {
      if (val) {
        this.getList();
      }
    },
  },
  mounted() {
    this.getList();
  },

  methods: {
    async getList() {
      if (!this.loading) {
        this.loading = true;
        this.options = [];
        const { code, data } = await asyncRequest.getgoodexamlist({
          skuCode: this.skuCode,
          page: 1,
          size: 1000,
        });
        if (code === 0) {
          const { list } = data ?? {};
          this.options = list ?? [];
        } else {
          this.options = [];
        }
        this.loading = false;
      }
    },
  },
};
</script>
<style lang="scss">
.date-picker.el-input {
  // width: 150px !important;
}
</style>