Skip to content

iBiz-Vue-R7-Res
iBiz-Vue-R7-Res
提交 29ce5f6c 编写于 作者: Mosher's avatar Mosher
浏览文件
操作

更新统一待办组件

上级 3683f48c
隐藏空白字符变更
内嵌 并排
正在显示 包含 116 行增加 和 40 行删除
src/components/app-message-popover/app-message-popover.less
浏览文件 @ 29ce5f6c
......@@ -3,14 +3,26 @@
line-height: 24px;
}
.show-more {
text-align: center;
margin-top: 10px;
height: 20px;
color: #409eff;
label {
cursor: pointer;
}
}
#bellBtn {
height: 24px;
font-size: 16px;
font-size: 19px;
padding-top: 2px;
padding-right: 2px;
color: #aaa;
}
.Row {
height: 60px;
height: 70px;
border-bottom: 1px solid lightgray;
display: flex;
align-items: center;
......@@ -23,12 +35,19 @@
.column2 {
border: 0px red solid;
.process-definition-name {
font-size: 14px;
}
.el-row {
display: flex;
.el-col {
flex-grow: 1;
div {
margin-bottom: 5px;
}
div:first-child {
font-weight: 500;
overflow: hidden;
......
src/components/app-message-popover/app-message-popover.vue
浏览文件 @ 29ce5f6c
......@@ -4,58 +4,80 @@
<el-popover
placement="bottom"
trigger="click"
width="400">
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">
<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>
<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="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 :span="21" class="column2" :draggable="false">
<el-row :draggable="false">
<el-col :span="16" :draggable="false">
<div class="process-definition-name" :draggable="false"><strong>{{myTask.processDefinitionName}}</strong></div>
<div :draggable="false">{{myTask.description}}</div>
<div :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;" :draggable="false">
{{myTask.name}}
</el-tag>
</el-col>
</el-row>
</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">
<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>
<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="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 :span="21" class="column2" :draggable="false">
<el-row :draggable="false">
<el-col :span="16" :draggable="false">
<div class="process-definition-name" :draggable="false"><strong>{{myMsg.processDefinitionName}}</strong></div>
<div :draggable="false">{{myMsg.description}}</div>
<div :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;" :draggable="false">
{{myMsg.name}}
</el-tag>
</el-col>
</el-row>
</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>
<el-button id="bellBtn" icon="el-icon-bell" size="mini" slot="reference"></el-button>
<i id="bellBtn" size="20" slot="reference" class='el-icon-bell'></i>
</el-popover>
</el-badge>
<!-- 消息弹出框绘制结束 -->
......@@ -65,6 +87,7 @@
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 {
......@@ -77,10 +100,14 @@
public myTasks: any = [];
// 待办面板标签
public myTasksLabel: any = "待办";
// 待办面板显示条数
public taskShowCnt:number = 0;
// 消息列表
public myMsgs: any = [];
// 消息面板标签
public myMsgsLabel: any = "消息";
// 信息面板显示条数
public msgShowCnt:number = 0;
/**
* vue创建
......@@ -160,6 +187,36 @@
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>
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或