提交 3b23bcbb 编写于 作者: tony001's avatar tony001

新增统一待办组件

上级 9ef46cb4
...@@ -85,6 +85,8 @@ import AppFullScren from './components/app-full-scren/app-full-scren.vue' ...@@ -85,6 +85,8 @@ import AppFullScren from './components/app-full-scren/app-full-scren.vue'
import AppLockScren from './components/app-lock-scren/app-lock-scren.vue' import AppLockScren from './components/app-lock-scren/app-lock-scren.vue'
import ActionTimeline from './components/action-timeline/action-timeline.vue' import ActionTimeline from './components/action-timeline/action-timeline.vue'
import CronEditor from './components/cron-editor/cron-editor.vue' import CronEditor from './components/cron-editor/cron-editor.vue'
import AppMessagePopover from './components/app-message-popover/app-message-popover.vue'
// 全局挂载UI实体服务注册中心 // 全局挂载UI实体服务注册中心
window['uiServiceRegister'] = uiServiceRegister; window['uiServiceRegister'] = uiServiceRegister;
// 全局挂载实体权限服务注册中心 // 全局挂载实体权限服务注册中心
...@@ -183,5 +185,6 @@ export const AppComponents = { ...@@ -183,5 +185,6 @@ export const AppComponents = {
v.component('app-menu-item', AppMenuItem); v.component('app-menu-item', AppMenuItem);
v.component('action-timeline', ActionTimeline); v.component('action-timeline', ActionTimeline);
v.component('cron-editor', CronEditor); v.component('cron-editor', CronEditor);
v.component('app-message-popover', AppMessagePopover);
}, },
}; };
\ No newline at end of file
.item {
height: 24px;
line-height: 24px;
}
#bellBtn {
height: 24px;
font-size: 16px;
padding-top: 2px;
}
.Row {
height: 60px;
border-bottom: 1px solid lightgray;
display: flex;
align-items: center;
.column1 {
text-align: center;
border: 0px solid red;
}
.column2 {
border: 0px red solid;
.el-row {
display: flex;
.el-col {
flex-grow: 1;
div:first-child {
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
div:nth-child(n+2) {
font-size: 12px;
}
}
}
}
}
<template>
<!-- 消息弹出框绘制开始 -->
<el-badge :is-dot="showIsDot" class="item">
<el-popover
placement="bottom"
trigger="click"
width="400">
<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">
<el-row v-for="(myTask,index) in myTasks" class="Row" :key="index" :draggable="false">
<el-col :span="6" 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="18" class="column2" :draggable="false">
<el-row :draggable="false">
<el-col :span="12" :draggable="false">
<div :draggable="false">{{myTask.processDefinitionName}}</div>
<div :draggable="false">{{myTask.description}}</div>
<div :draggable="false">{{myTask.createTime}}</div>
</el-col>
<el-col :span="6" :draggable="false">
<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;" :draggable="false">
{{myTask.name}}
</el-tag>
</el-col>
</el-row>
</el-col>
</el-row>
</el-tab-pane>
<!-- 消息 -->
<el-tab-pane :label="myMsgs.length==0?myMsgsLabel:(myMsgsLabel+'('+myMsgs.length+')')" name="second" :style="{height: '300px',overflow: 'auto'}" :draggable="false">
<el-row v-for="(myMsg,index) in myMsgs" class="Row" :key="index" :draggable="false">
<el-col :span="6" 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="18" class="column2" :draggable="false">
<el-row :draggable="false">
<el-col :span="12" :draggable="false">
<div :draggable="false">{{myMsg.processDefinitionName}}</div>
<div :draggable="false">{{myMsg.description}}</div>
<div :draggable="false">{{myMsg.createTime}}</div>
</el-col>
<el-col :span="6" :draggable="false">
<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;" :draggable="false">
{{myMsg.name}}
</el-tag>
</el-col>
</el-row>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs>
<el-button id="bellBtn" icon="el-icon-bell" size="mini" slot="reference"></el-button>
</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';
@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 myMsgs: any = [];
// 消息面板标签
public myMsgsLabel: any = "消息";
/**
* 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) => {
this.$Notice.error({title: '错误', desc: 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.$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 = [];
}
}
</script>
<style lang='less'>
@import "app-message-popover.less";
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册