perf: 工作报告优化

resources/assets/js/pages/manage.vue

@@ -15,6 +15,7 @@
                         <Icon type="ios-arrow-up" />
                         <Icon type="ios-arrow-down" />
                     </div>
+                    <Badge v-if="reportUnreadNumber > 0" class="manage-box-top-report" :count="reportUnreadNumber"/>
                 </div>
                 <DropdownMenu slot="list">
                     <DropdownItem
@@ -23,7 +24,7 @@
                         :divided="!!item.divided"
                         :name="item.path">
                         {{$L(item.name)}}
-                        <Badge v-if="item.path === 'workReport'" class="manage-menu-report-badge" :count="reportUnreadNumber"/>
+                        <Badge v-if="item.path === 'workReport'"  @click.native="openReceiveReport"  class="manage-menu-report-badge" :count="reportUnreadNumber"/>
                     </DropdownItem>
                     <Dropdown placement="right-start" @on-click="setTheme">
                         <DropdownItem divided>
@@ -179,7 +180,7 @@
             v-model="workReportShow"
             placement="right"
             :size="1100">
-            <Report v-if="workReportShow" @read="reportUnread" />
+            <Report v-if="workReportShow" :reportType="reportTabs" :reportUnreadNumber="reportUnreadNumber" @read="reportUnread" />
         </DrawerOverlay>
 
         <!--查看所有团队-->
@@ -276,6 +277,7 @@ export default {
             notificationClass: null,
 
             reportUnreadNumber: 0,
+            reportTabs: "my"
         }
     },
 
@@ -738,12 +740,17 @@ export default {
         },
 
         reportUnread() {
+            this.reportTabs = "my";
             this.$store.dispatch("call", {
                 url: 'report/unread',
                 method: 'get',
             }).then(({data}) => {
                 this.reportUnreadNumber = data.total ? data.total : 0;
             }).catch(() => {});
+        },
+
+        openReceiveReport(){
+            this.reportTabs = "receive";
         }
     }
 }

resources/assets/js/pages/manage/components/Report.vue

@@ -1,24 +1,24 @@
 <template>
-    <div class="report">
-        <Tabs v-model="reportTabs">
-            <TabPane :label="$L('填写汇报')" name="edit">
-                <ReportEdit :id="reportId" @saveSuccess="saveSuccess"></ReportEdit>
-            </TabPane>
-            <TabPane :label="$L('我的汇报')" name="my">
-                <ReportMy v-if="reportTabs === 'my'" @detail="showDetail" @edit="editReport"></ReportMy>
-            </TabPane>
-            <TabPane :label="$L('收到的汇报')" name="receive">
-                <ReportReceive v-if="reportTabs === 'receive'" @detail="showDetail"></ReportReceive>
-            </TabPane>
-        </Tabs>
-        <DrawerOverlay
-            v-model="showDetailDrawer"
-            placement="right"
-            :size="950"
-            transfer>
-            <ReportDetail :data="detailData"/>
-        </DrawerOverlay>
-    </div>
+  <div class="report">
+    <Tabs v-model="reportTabs">
+      <TabPane :label="$L('填写汇报')" name="edit">
+        <ReportEdit :id="reportId" @saveSuccess="saveSuccess"></ReportEdit>
+      </TabPane>
+      <TabPane :label="$L('我的汇报')" name="my">
+        <ReportMy v-if="reportTabs === 'my'" @detail="showDetail" @edit="editReport"></ReportMy>
+      </TabPane>
+      <TabPane :label="tabRebder(reportUnreadNumber)" name="receive">
+        <ReportReceive v-if="reportTabs === 'receive'" @detail="showDetail"></ReportReceive>
+      </TabPane>
+    </Tabs>
+    <DrawerOverlay
+        v-model="showDetailDrawer"
+        placement="right"
+        :size="950"
+        transfer>
+      <ReportDetail :data="detailData"/>
+    </DrawerOverlay>
+  </div>
 </template>
 
 <script>
@@ -27,39 +27,66 @@ import ReportMy from "./ReportMy"
 import ReportReceive from "./ReportReceive"
 import ReportDetail from "./ReportDetail"
 import DrawerOverlay from "../../../components/DrawerOverlay";
+import {mapState} from "vuex";
 
 export default {
-    name: "Report",
-    components: {
-        DrawerOverlay,
-        ReportEdit, ReportMy, ReportReceive, ReportDetail
+  name: "Report",
+  components: {
+    DrawerOverlay,
+    ReportEdit, ReportMy, ReportReceive, ReportDetail
+  },
+  props: {
+    reportUnreadNumber: {
+      type: Number,
+      default: 0
     },
-    data() {
-        return {
-            reportTabs: "my",
-            showDetailDrawer: false,
-            detailData: {},
-            reportId: 0,
-        }
-    },
-    methods: {
-        showDetail(row) {
-            this.showDetailDrawer = true;
-            this.detailData = row;
-            //1.5秒后执行
-            setTimeout(() => {
-                this.$emit("read");
-            }, 1500);
-        },
-        editReport(id) {
-            this.reportId = id;
-            this.reportTabs = "edit";
-        },
-        saveSuccess() {
-            this.reportId = 0;
-            this.reportTabs = "my";
-        }
+    reportType:{
+      default: "my"
     }
+  },
+  data() {
+    return {
+      reportTabs: "my",
+      showDetailDrawer: false,
+      detailData: {},
+      reportId: 0,
+      tabRebder: data => {
+        return h => {
+          if(data > 0){
+            return h('div', [
+              h('span', { class: 'navbar-item-content' }, '收到的汇报'),
+              h('Badge', { class: 'manage-box-report' }, data),
+            ])
+          }else {
+            return h('div', [
+              h('span', { class: 'navbar-item-content' }, '收到的汇报'),
+            ])
+          }
+        }
+      }
+    }
+  },
+  mounted() {
+    this.reportTabs = this.reportType;
+  },
+  methods: {
+    showDetail(row) {
+      this.showDetailDrawer = true;
+      this.detailData = row;
+      //1.5秒后执行
+      setTimeout(() => {
+        this.$emit("read");
+      }, 1500);
+    },
+    editReport(id) {
+      this.reportId = id;
+      this.reportTabs = "edit";
+    },
+    saveSuccess() {
+      this.reportId = 0;
+      this.reportTabs = "my";
+    }
+  }
 }
 </script>
 

resources/assets/js/pages/manage/components/ReportMy.vue

@@ -51,6 +51,7 @@ export default {
             createAt: [],
             reportType:'',
             reportTypeList:[
+                {value:"",label:'全部' },
                 {value:"weekly",label:'周报' },
                 {value:"daily",label:'日报' },
             ],
@@ -123,6 +124,7 @@ export default {
                 url: 'report/my',
                 data: {
                     page: this.listPage,
+                    pagesize: this.listPageSize,
                     created_at: this.createAt,
                     type: this.reportType
                 },

resources/assets/js/pages/manage/components/ReportReceive.vue

@@ -58,6 +58,7 @@ export default {
             reportType:'',
             createAt: [],
             reportTypeList:[
+                {value:"",label:'全部' },
                 {value:"weekly",label:'周报' },
                 {value:"daily",label:'日报' },
             ],
@@ -87,11 +88,6 @@ export default {
                         )
                     }else {
                         arr.push(
-                            h('Tag', {
-                                props: {   //传递参数
-                                    color: "lime",
-                                }
-                            },  this.$L("已读")),
                             h('span',params.row.title)
                         )
                     }
@@ -145,6 +141,7 @@ export default {
                 url: 'report/receive',
                 data: {
                     page: this.listPage,
+                    pagesize: this.listPageSize,
                     username: this.username,
                     created_at: this.createAt,
                     type: this.reportType

resources/assets/sass/components/report.scss

@@ -28,6 +28,33 @@
             }
         }
     }
+    .manage-box-report{
+        font-family: "Monospaced Number";
+        line-height: 1;
+        vertical-align: middle;
+        position: absolute;
+        -webkit-transform: translateX(50%);
+        -ms-transform: translateX(50%);
+        transform: translateX(50%);
+        right: 0;
+        height: 20px;
+        border-radius: 10px;
+        min-width: 20px;
+        background: #ed4014;
+        border: 1px solid transparent;
+        color: #fff;
+        line-height: 18px;
+        text-align: center;
+        padding: 0 6px;
+        font-size: 12px;
+        white-space: nowrap;
+        -webkit-transform-origin: -10% center;
+        -ms-transform-origin: -10% center;
+        transform-origin: -10% center;
+        z-index: 10;
+        -webkit-box-shadow: 0 0 0 1px #fff;
+        box-shadow: 0 0 0 1px #fff;
+    }
 
     .page-box {
         text-align: center;

resources/assets/sass/pages/page-manage.scss

@@ -69,6 +69,16 @@
                         margin: -1px;
                     }
                 }
+                .manage-box-top-report {
+                    align-items: center;
+                    flex-direction: column;
+                    justify-content: center;
+                    flex: 0 0 auto;
+                    > i {
+                        font-size: 12px;
+                        margin: -1px;
+                    }
+                }
             }
             .manage-menu-report-badge {
                 margin-left: 6px;