order-ui-pc/src/components/globalComponents/process-time-line/main.vue

<template>
  <div class="processTimeLine">
    <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"
        >
          {{ item.status_name }}
        </div>
        <!-- v-if="index + 1 !== options.length" -->
        <div slot="description" style="padding: 20px 0 0 0">
          <p class="name">
            &nbsp;操&nbsp;作&nbsp;人&nbsp;：
            {{ item.action_name ? item.action_name : "未知" }}
          </p>
          <p class="item">
            账号来源：
            {{ item.source + "" === "2" ? "供应商端" : "采销平台" }}
          </p>
          <p class="time">
            {{ item.addtime }}
          </p>
        </div>
      </el-step>
    </el-steps>
  </div>
</template>

<script>
import asyncRequest from "@/apis/components/process-time-line";
import resToken from "@/mixins/resToken";
export default {
  name: "processTimeLine",
  props: ["type", "orderCode", "newTime"],
  mixins: [resToken],
  data() {
    return {
      options: [],
      loading: false,
    };
  },
  watch: {
    newTime: function (val) {
      if (val) {
        this.getList();
      }
    },
  },
  mounted() {
    this.getList();
  },

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