<template>
<!-- 消息弹出框绘制开始 -->
<el-badge :is-dot="showIsDot" class="app-message-popover" @click="OpenPopover">
<el-popover
placement="bottom"
v-model="showPopover"
trigger="click"
width="400"
@show="initTabCnt"
@hide="initTabCnt"
>
<el-tabs :value="default_tab_pane" :stretch="true">
<!-- 待办 -->
<el-tab-pane
:label="
this.$t('components.appmessagepopover.myTasksLabel') +
(myTasks.length == 0 ? '' : '(' + 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="popover__content" :key="index" :draggable="false">
<el-col :span="3" class="popover__content__avatar" :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="popover__content__caption" :draggable="false">
<el-row :draggable="false">
<el-col :span="16" :draggable="false" style="width: 65%">
<div
class="process-definition-name"
:draggable="false"
@click="handleTag(myTask)"
>
<strong>{{ myTask.usertaskname }}</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="'success'"
size="small"
style="overflow: hidden; text-overflow: ellipsis"
:draggable="false"
>
成功
</el-tag>
</el-col> -->
</el-row>
</el-col>
</el-row>
</template>
</template>
<template>
<div class="popover__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-tabs>
<i id="bellBtn" size="20" slot="reference" class="el-icon-bell"></i>
</el-popover>
</el-badge>
<!-- 消息弹出框绘制结束 -->
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { Subscription } from 'rxjs';
import { AppServiceBase, LogUtil } from 'ibiz-core';
import { AppCenterService } from 'ibiz-vue';
import moment from 'moment';
@Component({})
export default class AppMessagePopover extends Vue {
// 是否显示Popover
public showPopover: boolean = false;
// 是否显示小圆点
public showIsDot: any = false;
// 默认显示的tab页
public default_tab_pane: any = 'first';
// 待办列表
public myTasks: any = [];
// 待办面板显示条数
public taskShowCnt: number = 0;
// 消息列表
public myMsgs: any = [];
// 信息面板显示条数
public msgShowCnt: number = 0;
// 环境配置对象
public environment: any = AppServiceBase.getInstance().getAppEnvironment();
// 应用状态事件
public appStateEvent: Subscription | undefined;
/**
* vue创建
*/
created(): void {
// 全局刷新通知
if (AppCenterService.getMessageCenter()) {
this.appStateEvent = AppCenterService.getMessageCenter().subscribe(
({ name, action, data }: { name: string; action: string; data: any }) => {
if (!Object.is(name, 'SysTodo')) {
return;
}
if (Object.is(action, 'appRefresh')) {
if (!this.environment.workflow) {
return;
}
this.getMyTasks();
}
},
);
}
}
/**
* vue挂载
*/
mounted(): void {
if (!this.environment.workflow) {
return;
}
// 首次获取待办列表
this.getMyTasks();
// 定时器:每隔１分钟重新获取待办列表
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.showIsDot = false;
}
// 获取消息列表
// this.getMyMsgs();
}
})
.catch((error: any) => {
LogUtil.warn(this.$t('components.appmessagepopover.error'));
});
}
/**
* 获取消息列表
*/
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.$throw(this.$t('components.appmessagepopover.geterror'), 'handleTag');
this.$http
.post(`/systodos/${data.usertaskid}/getlinkurl`, {
todourltype: 'RouterUrl',
todosubtype: 'Todo',
srfapptype: 'pc',
srfapp: AppServiceBase.getInstance().getAppModelDataObject().codeName
})
.then((response: any) => {
if (response && response.status == 200 && response.data && response.data.linkurl) {
this.showPopover = false;
let targetUrl: string = response.data.linkurl;
if (targetUrl.indexOf('/') != 0) {
targetUrl = '/' + targetUrl;
}
targetUrl = `${targetUrl.slice(0, targetUrl.indexOf(';srffullscreen=true'))}`;
targetUrl += `;srfwf=Todo`;
this.$router.push('/index' + targetUrl);
} else {
if (response) {
this.$throw(response);
}
}
})
.catch((response: any) => {
this.$throw(response);
});
}
/**
* 销毁之前
*/
beforeDestroy(): void {
// 清空数据
this.showIsDot = false;
this.myTasks = [];
this.myMsgs = [];
}
/**
* 组件销毁
*/
destroyed() {
if (this.appStateEvent) {
this.appStateEvent.unsubscribe();
}
}
/**
* 时间格式转换
*/
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;
}
/**
* 弹出框显示处理
*/
public OpenPopover() {
this.showPopover = !this.showPopover;
}
}
</script>