productivity-platform-web/src/views/house/workbench/components/timeline.vue

<template>
    <div class="contrl-bar">
        <el-timeline style="max-width: 600px">
          <el-timeline-item :timestamp="p.state?'已完成':'未完成'" placement="top" :color="p.state?'#ff6154':'#dae1eb'"
            v-for="(p , index) in processes">
            <el-card shadow="never"  @click="goto('consignor')" class="timeline-card report-item">
              <h4>{{ p.name }}</h4>
              <p v-if="p.state" >更新时间：{{ p.updateDate }}</p>
              <el-button v-if="p.state" @click="openPageoffice(p.docUrl)">{{ p.name }}.docx 预览</el-button>
            </el-card>
          </el-timeline-item>
        </el-timeline>
    </div>
</template>

<script>
import houseGuaranty from '@/api/houseGuaranty';
import { POBrowser } from 'js-pageoffice'

export default {


  props: {
     processParentId:{
      type:Number,
      required:false,
     }
  },

  watch:{
    processParentId:{
      handler(nv){
         this.getProcesses();
      }
    }
  },


  created(){
    
    this.getProcesses();
  },

    data() {
        return {
           processes:[]
        }
    },
    methods:{
      goto(path) {
        this.$router.push(`/home/houseWorkbench/${path}`)
      },
      getProcesses(){
        if (this.processParentId){
          houseGuaranty.getProcesses(this.processParentId).then(res=>{
          if (res.code === 200){
              this.processes = res.data;
            }
          })
        }
      },
      openPageoffice(fileUrl) {
            let paramJson={};
            paramJson.fileName="";
            paramJson.fileUrl=fileUrl;
            let paramString=JSON.stringify(paramJson);
            POBrowser.openWindow('/showDoc', 'width=1150px;height=900px;',paramString);
        },
    }
 }

</script>

<style scoped>
.contrl-bar{
  height: 600px;
  width: 20%;
  position:fixed;
  top:160px;
  right: 150px;

}

.timeline-card:hover{
  cursor: pointer;
}
</style>