<template> <div class="extend-action-timeline"> <div class="extend-action-timeline-table"> <div class="extend-action-timeline-thead"></div> <div class="extend-action-timeline-body" v-if="data.length > 0"> <div class="timeline-draw extend-action-timeline-body__timeline timeline-head"> <div class="timeline-wrapper"> <div class="timeline-wrapper__timeline-index">{{ $t('components.timeline.index') }}</div> <div class="timeline-wrapper__usertaskname">{{ $t('components.timeline.node') }}</div> <div class="timeline-wrapper__authorname">{{ $t('components.timeline.author') }}</div> <div class="timeline-wrapper__type">{{ $t('components.timeline.type') }}</div> <div class="timeline-wrapper__last-time">{{ $t('components.timeline.lasttime') }}</div> <div class="timeline-wrapper__fullmessage">{{ $t('components.timeline.opinion') }}</div> </div> <div class="timeline-arrow"></div> </div> <template v-for="(usertask, index) in data"> <div class="timeline-content" :key="index"> <div class="extend-action-timeline-body__timeline"> <div class="timeline-wrapper"> <div class="timeline-wrapper__timeline-index"> <span>{{ usertask.index }}</span> <div class="icon-bottom" v-if="usertask.index != 1"> <i class="el-icon-bottom"></i> </div> <div class="icon-top" v-if="usertask.index < usertasksLength"></div> </div> <div class="timeline-wrapper__usertaskname">{{ usertask.usertaskname }}</div> <div class="timeline-wrapper__authorname">{{usertask.displayNames ? usertask.displayNames.join(' , ') : usertask.authorName}}</div> <div class="timeline-wrapper__type" v-if="usertask.type"> <div class="dot" ></div> <span>{{usertask.type}}</span> </div> <div class="timeline-wrapper__last-time" v-if="usertask.time"> {{ formatDate( usertask.time, 'MM月DD日 HH:mm:ss', ) }} </div> <el-popover class="timeline-wrapper__tooltip" placement="top" :width="500" trigger="hover"> <div slot="reference"> {{ usertask.fullMessage }} </div> <div class="fullmessage"> {{ usertask.fullMessage }} </div> </el-popover> </div> <div v-if="usertask.displayNames && usertask.displayNames.length > 1" class="timeline-arrow" @click="changeExpand(usertask)"> <i :class="usertask.isShow ? 'el-icon-minus' : 'el-icon-plus'" /> </div> </div> <div v-if="usertask.isShow"> <template v-for="(displayName, index) in usertask.displayNames"> <div class="timeline-draw extend-action-timeline-body__timeline" :key="index"> <div class="timeline-wrapper"> <div class="timeline-wrapper__timeline-index"> <div v-if="usertask.index < usertasksLength" class="icon-line"></div> </div> <div class="timeline-wrapper__usertaskname"></div> <div class="timeline-wrapper__authorname"> {{ displayName }} </div> </div> <div class="timeline-arrow"></div> </div> </template> </div> </div> </template> </div> </div> </div> </template> <script lang="ts"> import { Vue, Component, Prop } from 'vue-property-decorator'; import moment from 'moment'; @Component({}) export default class ExtendActionTimeline extends Vue { /** * 上下文 * * @memberof ExtendActionTimeline */ @Prop() public context: any; /** * 视图参数 * * @memberof ExtendActionTimeline */ @Prop() public viewparams: any; /** * 实体名称 * * @memberof ExtendActionTimeline */ @Prop() public appDeCodeName!: string; /** * 数据 * * @memberof ExtendActionTimeline */ public data: any[] = []; /** * 初始化memo * * @memberof ExtendActionTimeline */ public initmemo: string = ''; /** * 子项索引初始值 * * @memberof ExtendActionTimeline */ public usertasksIndex: number = 1; /** * 子项长度初始值 * * @memberof ExtendActionTimeline */ public usertasksLength: number = 1; /** * 实体服务 * * @memberof ExtendActionTimeline */ public appEntityService: any; /** * 初始化数据 * * @memberof ExtendActionTimeline */ public async created() { this.appEntityService = await window.entityServiceRegister.getService(this.appDeCodeName.toLowerCase()); if (this.appEntityService) { this.appEntityService.GetWFHistory(this.context).then((response: any) => { if (response && response.status === 200) { this.formatData(response.data); this.initUIStateData(this.data); } else { this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response }); } }).catch((error: any) => { const message = error.message ? error.message : '加载数据错误'; this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: message }); }) } } /** * 初始化数据添加标记 * * @memberof ExtendActionTimeline */ public initUIStateData(items: any) { if (items.length > 0) { this.usertasksIndex = 1; items.forEach((item: any) => { item.isShow = false; item.index = this.usertasksIndex; this.usertasksIndex++; }) this.usertasksLength = this.usertasksIndex - 1; this.$forceUpdate(); } } /** * 格式化数据 * * @memberof ExtendActionTimeline */ public formatData(data: any) { const historyTasks = data.historytasks || []; const waitTasks = data.waittasks || []; if (historyTasks.length > 0) { this.data.push(...historyTasks); } if (waitTasks.length > 0) { const taskItems: any[] = []; waitTasks.forEach((task: any) => { const index = taskItems.findIndex((item: any) => Object.is(task.usertaskid, item.usertaskid)); if (task.usertaskid && index == -1) { task.displayNames = [task.displayname]; taskItems.push(task); } if (index != -1) { const index = taskItems.findIndex((item: any) => Object.is(item.usertaskid, task.usertaskid)); taskItems[index].displayNames.push(task.displayname); } }) this.data.push(...taskItems); } } /** * 时间转换 * * @memberof ExtendActionTimeline */ public formatDate(date: string, format: string) { return moment(date).format(format); } /** * 点击事件 * * @memberof ExtendActionTimeline */ public changeExpand(usertask: any) { usertask.isShow = !usertask.isShow; this.$forceUpdate(); } /** * 办理人员名称显示去重 * * @param tag 需要去重的名称标识 * @param data 需要去重数据集 * @memberof ExtendActionTimeline */ public acceptingOfficerNodup(tag: string, data: any[]): any[] { let tempData: any[] = []; if (data && data.length > 0 && tag) { data.forEach((data: any) => { tempData.push(data[tag]); }); } const nodup = [...new Set(tempData)]; return nodup; } } </script> <style lang='scss'> @import './extend-action-timeline.scss'; </style>