front/front-vue/src/views/service/credit/flowDetail.vue

<template>
  <div class="app-container">
    <el-container>
      <el-header>
        <el-steps :active="active" align-center process-status="finish" finish-status="success" v-if="financeType == '0'">
          <el-step title="融信申请"></el-step>
          <el-step title="平台审核"></el-step>
          <el-step title="融信确认"></el-step>
          <el-step title="签收生效"></el-step>
        </el-steps>
        <el-steps :active="active" align-center process-status="finish" finish-status="success" v-if="financeType == '1'">
          <el-step title="融信开立"></el-step>
          <el-step title="补全资料"></el-step>
          <el-step title="平台审核"></el-step>
          <el-step title="签收生效"></el-step>
        </el-steps>
        <el-steps :active="active" align-center process-status="finish" finish-status="success" v-if="financeType == '2'">
          <el-step title="融信开立"></el-step>
          <el-step title="平台审核"></el-step>
          <el-step title="确权生效"></el-step>
        </el-steps>
      </el-header>
      <el-main style="border: 1px solid;margin:10%;min-height:300px">
        <el-steps direction="vertical" :active="financeLogList.length" :space="200">
          <el-step v-for="(item, index) in financeLogList" :key="index" :title="item.zflContent" :description="parseTime(new Date(item.createTime),'{y}-{m}-{d}')"></el-step>
        </el-steps>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { financeLogList } from "@/api/service/credit/financeLog";

export default {
  name: "billAdd",
  components: {},
  props: {
    // 正常的业务数据，对应echarts饼图配置中series[0].data
    financeId: {
      type: String,
      required: true,
      default: () => "",
    },
    // 表示需要特殊定制的配置
    // 一般UI会规定一个统一的设计规范（比如颜色，字体，图例格式，位置等）
    // 但不排除某个图标会和设计规范不同，需要特殊定制样式，所以开放这个配置，增强灵活性
    financeType: {
      type: String,
      required: true,
      default: () => "",
    },
    financeActive: {
      type: Number,
      required: true,
      default: () => 0,
    },
  },
  data() {
    return {
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 是否显示弹出层
      open: false,
      uploadOpen: false,
      // 查询参数
      queryParams: {},
      // 表单参数
      form: {
        zbiAmount: 0.0,
      },
      //操作记录
      financeLogList:[
        // {
        //   zflContent:"12343567890876564343557876543",
        //   createTime:new Date()
        // },
        // {
        //   zflContent:"assdjhfdjshk;dlfgkls;aklfdkslda;",
        //   createTime:new Date()
        // },
        // {
        //   zflContent:"213j3g45k6kl6j76k57hk45j7lk6j75",
        //   createTime:new Date()
        // }
      ],
      active: 0
    };
  },
  created() {
    const financeId = this.financeId
    this.getList(financeId)
  },
  activated() {},
  methods: {
    getList(financeId){
      financeLogList(financeId).then((response) => {
        this.financeLogList = response.data;
        if(response.data && response.data.length > 0){
          const length = response.data.length - 1
          this.active = response.data[length].zflNode + 1
        }
      });
    }
  },
};
</script>