更新统一待办组件

src/components/app-message-popover/app-message-popover.less

@@ -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

@@ -4,22 +4,26 @@
         <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">
+                    <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="18" class="column2" :draggable="false">
+                                <el-col :span="21" class="column2" :draggable="false">
                                     <el-row :draggable="false">
-                                <el-col :span="12" :draggable="false">
-                                    <div :draggable="false">{{myTask.processDefinitionName}}</div>
+                                        <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">{{myTask.createTime}}</div>
+                                            <div :draggable="false">{{ formatDate(myTask.createTime, 'MM-DD hh:mm') }}</div>
                                         </el-col>
-                                <el-col :span="6" :draggable="false">
+                                        <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">
@@ -29,21 +33,31 @@
                                     </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">
+                    <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="18" class="column2" :draggable="false">
+                                <el-col :span="21" class="column2" :draggable="false">
                                     <el-row :draggable="false">
-                                <el-col :span="12" :draggable="false">
-                                    <div :draggable="false">{{myMsg.processDefinitionName}}</div>
+                                        <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">{{myMsg.createTime}}</div>
+                                            <div :draggable="false">{{ formatDate(myMsg.createTime, 'MM-DD hh:mm') }}</div>
                                         </el-col>
-                                <el-col :span="6" :draggable="false">
+                                        <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">
@@ -53,9 +67,17 @@
                                     </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>