<template> <!-- 消息弹出框绘制开始 --> <el-badge :is-dot="showIsDot" class="app-message-popover"> <el-popover placement="bottom" trigger="click" width="400" @show="initTabCnt" @hide="initTabCnt"> <el-tabs :value="default_tab_pane" :stretch="true"> <!-- 待办 --> <el-tab-pane :label="myTasks.length==0?myTasksLabel:(myTasksLabel+'('+myTasks.length+')')" name="first" style="height: 300px; overflow: auto" :draggable="false"> <template v-for="(myTask,index) in myTasks"> <template v-if="index < taskShowCnt"> <el-row class="Row" :key="index" :draggable="false"> <el-col :span="3" class="column1" :draggable="false"> <el-avatar icon="el-icon-s-check" size="small" :draggable="false" style="color: white;background-color: #409eff;"></el-avatar> </el-col> <el-col :span="21" class="column2" :draggable="false"> <el-row :draggable="false"> <el-col :span="16" :draggable="false" style="width: 65%;"> <div class="process-definition-name" :draggable="false"><strong>{{myTask.processDefinitionName}}</strong></div> <div class="description" :draggable="false">{{myTask.description}}</div> <div class="createtime" :draggable="false">{{ formatDate(myTask.createTime, 'MM-DD hh:mm') }}</div> </el-col> <el-col :span="5" :draggable="false" style='display: flex; align-items: center'> <el-tag :type="myTask.name.indexOf('驳回')!=-1?'danger':(myTask.name.indexOf('成功')!=-1?'success':(myTask.name.indexOf('取消')!=-1?'info':'-'))" size="small" @click="handleTag(myTask)" style="cursor: pointer;overflow: hidden;text-overflow: ellipsis;" :draggable="false"> {{myTask.name}} </el-tag> </el-col> </el-row> </el-col> </el-row> </template> </template> <template> <div class='show-more' @click="showMore('taskShowCnt')"> <label v-if="taskShowCnt < myTasks.length ">{{ this.$t('components.appMessagePopover.loadMore') }}</label> <label v-else>{{ this.$t('components.appMessagePopover.noMore') }}</label> </div> </template> </el-tab-pane> <!-- 消息 --> <el-tab-pane :label="myMsgs.length==0?myMsgsLabel:(myMsgsLabel+'('+myMsgs.length+')')" name="second" :style="{height: '300px',overflow: 'auto'}" :draggable="false"> <template v-for="(myMsg,index) in myMsgs"> <template v-if="index < msgShowCnt"> <el-row class="Row" :key="index" :draggable="false"> <el-col :span="3" class="column1" :draggable="false"> <el-avatar icon="el-icon-chat-dot-square" size="small" :draggable="false" style="color: white;background-color: orange;"></el-avatar> </el-col> <el-col :span="21" class="column2" :draggable="false"> <el-row :draggable="false"> <el-col :span="16" :draggable="false" style="width: 65%;"> <div class="process-definition-name" :draggable="false"><strong>{{myMsg.processDefinitionName}}</strong></div> <div class="description" :draggable="false">{{myMsg.description}}</div> <div class="createtime" :draggable="false">{{ formatDate(myMsg.createTime, 'MM-DD hh:mm') }}</div> </el-col> <el-col :span="5" :draggable="false" style='display: flex; align-items: center'> <el-tag :type="myMsg.name.indexOf('驳回')!=-1?'danger':(myMsg.name.indexOf('成功')!=-1?'success':(myMsg.name.indexOf('取消')!=-1?'info':'-'))" size="small" @click="handleTag(myMsg)" style="cursor: pointer;overflow: hidden;text-overflow: ellipsis;" :draggable="false"> {{myMsg.name}} </el-tag> </el-col> </el-row> </el-col> </el-row> </template> </template> <template> <div class='show-more' @click="showMore('msgShowCnt')"> <label v-if="msgShowCnt < myTasks.length ">{{ this.$t('components.appMessagePopover.loadMore') }}</label> <label v-else>{{ this.$t('components.appMessagePopover.noMore') }}</label> </div> </template> </el-tab-pane> </el-tabs> <i id="bellBtn" size="20" slot="reference" class='el-icon-bell'></i> </el-popover> </el-badge> <!-- 消息弹出框绘制结束 --> </template> <script lang="ts"> import {Vue, Component, Prop, Model, Emit} from "vue-property-decorator"; import {Subject} from "rxjs"; import {Environment} from '@/environments/environment'; import moment from 'moment'; @Component({}) export default class AppMessagePopover extends Vue { // 是否显示小圆点 public showIsDot: any = false; // 默认显示的tab页 public default_tab_pane: any = "first"; // 待办列表 public myTasks: any = []; // 待办面板标签 public myTasksLabel: any = "待办"; // 待办面板显示条数 public taskShowCnt:number = 0; // 消息列表 public myMsgs: any = []; // 消息面板标签 public myMsgsLabel: any = "消息"; // 信息面板显示条数 public msgShowCnt:number = 0; /** * vue创建 */ created(): void {} /** * vue挂载 */ mounted(): void { // 首次获取待办列表 this.getMyTasks(); // 定时器:每隔1分钟重新获取待办列表 const timer = setInterval(()=>{ this.getMyTasks(); },60000); // 监听定时器,在vue销毁前清除定时器 this.$once('hook:beforeDestroy',()=>{ // 清除定时器 clearInterval(timer); }); } /** * 获取待办列表 */ public getMyTasks() { let url: any = '/wfcore/mytasks'; this.$http.get(url).then((response: any) => { if (response && response.status == 200) { const data: any = response.data; if (data && data.length > 0) { this.myTasks = data; this.showIsDot = true; } else { this.myTasks = []; } // 获取消息列表 this.getMyMsgs(); } }).catch((error: any) => { console.warn("加载数据错误"); }) } /** * 获取消息列表 */ public getMyMsgs(){ // TODO:接口获取消息列表,这里用的待办数据 this.myMsgs = this.myTasks; if (this.myMsgs.length > 0 && this.myTasks.length == 0) { // 显示小圆点 this.showIsDot = true; } } /** * 点击标签事件 */ public handleTag(data: any) { if (!data) return this.$message.error("未获取到标签内容"); // 拼接要打开的窗口地址 const baseUrl:any = Environment.BaseUrl; const openUrl:any = baseUrl + `/wfcore/mytasks/${data.processDefinitionKey}/web/${data.processInstanceBusinessKey}/usertasks/${data.taskDefinitionKey}`; // 打开新窗口 window.open(openUrl,'_blank'); } /** * 销毁之前 */ beforeDestroy(): void { // 清空数据 this.showIsDot = false; this.myTasks = []; this.myMsgs = []; } /** * 时间格式转换 */ public formatDate(date: string, format: string) { if(date && format) { return moment(date).format(format); } return date; } /** * 加载更多 */ public showMore(cnt: string) { if(Object.is('taskShowCnt', cnt)) { this.taskShowCnt + 10 < this.myTasks.length ? this.taskShowCnt += 10 : this.taskShowCnt += this.myTasks.length-this.taskShowCnt; } if(Object.is('msgShowCnt', cnt)) { this.msgShowCnt + 10 < this.myMsgs.length ? this.msgShowCnt += 10 : this.msgShowCnt += this.myMsgs.length-this.msgShowCnt; } } /** * 弹出框 显示/隐藏 时显示条数初始化 */ public initTabCnt() { this.taskShowCnt = this.myTasks.length >= 10 ? 10 : this.myTasks.length; this.msgShowCnt = this.myMsgs.length >= 10 ? 10 : this.myMsgs.length; } } </script> <style lang='less'> @import "app-message-popover.less"; </style>