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(p.router)" class="timeline-card report-item">
              <h4>{{ p.name }}</h4>
              <p v-if="p.state" >更新时间：{{ p.updateDate }}</p>
              <el-button type="text" v-if="p.state" @click="openPageoffice(p.docUrl)">文档预览</el-button>
            </el-card>
          </el-timeline-item>
          <el-timeline-item :timestamp="finalDoc.docUrl?'已完成':'未完成'" v-if="lastNode"  placement="top">
            <el-card shadow="never"  class="timeline-card report-item">
              <h4>合并文档</h4>
              <p v-if="finalDoc.docUrl" >更新时间：{{ finalDoc.updateTime}}</p>
              <el-button type="text" @click="mergeDoc()">合并</el-button>
              <el-button type="text" v-if="finalDoc.docUrl">下载完整报告</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,
     },
     documentId:{
      type:Number,
      required:false,
     },
     businessId:{
      type:Number,
      required:false,
     },
  },

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


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

    data() {
        return {
           processes:[],
           lastNode:false,
           finalDoc:{
             url:null,
             created:null
           }
        }
    },
    methods:{
      goto(path) {
        if (this.documentId){
          this.$router.push(`/home/houseWorkbench/${path}?id=${this.documentId}&businessId=${this.businessId}`)
        }
      },
      getProcesses(){
        houseGuaranty.getProcesses(this.processParentId).then(res=>{
        if (res.code === 200){
            this.processes = res.data;
            let nodes =  this.processes.filter(item=>item.state==null);
            this.lastNode = !nodes.length>0;
          }
        })
      },
      openPageoffice(fileUrl) {
            let paramJson={};
            paramJson.fileName="";
            paramJson.fileUrl=fileUrl;
            let paramString=JSON.stringify(paramJson);
            POBrowser.openWindow('/prod/showDoc', 'width=1150px;height=900px;',paramString);
      },

      mergeDoc(){
        const loading = this.$loading();
        houseGuaranty.mergeDoc(this.processParentId).then(res=>{
        if (res.code === 200){
            ElMessage({
              message: '文档已合并',
              type: 'success',
              plain: true
            })
            loading.close();
          }
        })
      },

      getFinalyDoc(){
          if (this.documentId){
            houseGuaranty.getFinalyDoc(this.documentId).then(res=>{
              if (res.code === 200){
                  this.finalDoc = res.data;
              }
            })
          }
      }

    }
 }

</script>

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

}

.timeline-card:hover{
  cursor: pointer;
}

:deep(.el-button--text:hover){
    color:#ff6154;
}
:deep(.el-button--text){
    color:#ff6154;
}
</style>