<template> <div class="action-timeline"> <table class="action-timeline-table"> <thead class="action-timeline-thead"> <tr> <th></th> <th></th> </tr> </thead> <tbody class="action-timeline-tbody"> <template v-for="(usertask, usertaskIndex) in data.usertasks"> <tr :key='usertaskIndex'> <td align="right" valign="top"> <div class='date'> <div class='usertaskname'>{{ usertask.userTaskName }}</div> <div class='arrow' @click="changeExpand(usertask)"> <i :class="usertask.isShow ? 'el-icon-arrow-down' : 'el-icon-arrow-up' " /> </div> </div> </td> <td> <div class='timeline'> <template v-if="usertask.identitylinks && usertask.identitylinks.length > 0"> {{$t('components.appWFApproval.wait')}} <strong> <template v-for="(identitylink, len) in usertask.identitylinks"> <template v-if="identitylink.displayname"> {{ identitylink.displayname }} <template v-if="len != usertask.identitylinks.length - 1"> 、 </template> </template> </template> </strong> {{$t('components.appWFApproval.handle')}} </template> <template v-else> <ul class="action-timeline-wrapper"> <template v-if="!usertask.isShow"> <li v-if="usertask.comments && usertask.comments.length > 0" class="action-timeline-item"> <div class='timeline-time'> {{ formatDate(usertask.comments[0].time, 'MM月DD日 HH:mm') }} {{ usertask.comments[0].authorName }} </div> <div class='timeline-content'> {{ usertask.comments[0].type }} {{ usertask.comments[0].fullMessage }} </div> </li> </template> <template v-else> <template v-for="(comment, commentIndex) in usertask.comments"> <li :key="commentIndex" class="action-timeline-item"> <div class='timeline-time'> {{ formatDate(comment.time, 'MM月DD日 HH:mm')}} {{ comment.authorName }} </div> <div class='timeline-content'> {{ comment.type }} {{ comment.fullMessage }} </div> </li> </template> </template> </ul> </template> </div> </td> </tr> </template> </tbody> </table> </div> </template> <script lang="ts"> import { Vue, Component, Prop, Watch } from 'vue-property-decorator'; import moment from 'moment'; @Component({ }) export default class ActionTimeline extends Vue { /** * 数据 * * @memberof ActionTimeline */ public data:any = {}; /** * 初始化memo * * @memberof ActionTimeline */ public initmemo:string = ""; /** * 传入数据服务 * * @memberof ActionTimeline */ @Prop() public service:any; /** * 上下文 * * @memberof ActionTimeline */ @Prop() public context:any; /** * 视图参数 * * @memberof ActionTimeline */ @Prop() public viewparams:any; /** * 初始化数据 * * @memberof ActionTimeline */ public created(){ if(this.service){ this.service.GetWFHistory(this.context).then((res:any) =>{ if(res && (res.status === 200)){ this.data = res.data; this.initUIStateData(); } }) } } /** * 初始化数据添加标记 * * @memberof ActionTimeline */ public initUIStateData() { if(this.data && this.data.usertasks) { this.data.usertasks.forEach((item: any) => { item.isShow = true; }) } } /** * 时间转换 * * @memberof ActionTimeline */ public formatDate(date: string, format: string) { return moment(date).format(format); } /** * 点击事件 * * @memberof ActionTimeline */ public changeExpand(usertask:any) { usertask.isShow = !usertask.isShow; this.$forceUpdate(); } } </script> <style lang='scss'> @import './action-timeline.scss'; </style>