perf: 移动端显示工作报告

resources/assets/js/App.vue

@@ -227,6 +227,8 @@ export default {
             this.$store.state.windowHeight = $A(window).height()
             this.$store.state.windowLarge = this.$store.state.windowWidth > 768
             this.$store.state.windowSmall = this.$store.state.windowWidth <= 768
+            this.$store.state.formLabelPosition = this.$store.state.windowWidth > 576 ? 'right' : 'top'
+            this.$store.state.formLabelWidth = this.$store.state.windowWidth > 576 ? 'auto' : ''
         },
 
         windowScrollListener() {

resources/assets/js/components/Mobile/Tabbar.vue

@@ -12,6 +12,7 @@
                         <div class="more-item">
                             <i class="taskfont" v-html="item.icon"></i>
                             <div class="tabbar-title">{{$L(item.label)}}</div>
+                            <Badge v-if="item.name === 'workReport'" class="tabbar-badge" :overflow-count="999" :count="reportUnreadNumber"/>
                         </div>
                     </li>
                 </ul>
@@ -29,6 +30,9 @@
                 <template v-else-if="item.name === 'dialog'">
                     <Badge class="tabbar-badge" :overflow-count="999" :text="msgUnreadMention"/>
                 </template>
+                <template v-else-if="item.name === 'more'">
+                    <Badge class="tabbar-badge" :overflow-count="999" :count="reportUnreadNumber"/>
+                </template>
             </li>
         </ul>
         <Modal
@@ -77,6 +81,9 @@ export default {
                     {icon: '&#xe7b8;', name: 'addTask', label: '添加任务'},
                     {icon: '&#xe7c1;', name: 'createMeeting', label: '新会议'},
                     {icon: '&#xe794;', name: 'joinMeeting', label: '加入会议'},
+                ],
+                [
+                    {icon: '&#xe7c0;', name: 'workReport', label: '工作报告'},
                 ]
             ],
 
@@ -90,6 +97,9 @@ export default {
         if ($A.isEEUiApp) {
             this.navMore[0].splice(2, 0, {icon: '&#xe602;', name: 'scan', label: '扫一扫'})
         }
+        if (this.userIsAdmin) {
+            this.navMore[2].splice(0, 0, {icon: '&#xe63f;', name: 'allUser', label: '团队管理'})
+        }
     },
 
     mounted() {
@@ -101,7 +111,7 @@ export default {
     },
 
     computed: {
-        ...mapState(['cacheDialogs']),
+        ...mapState(['userIsAdmin', 'cacheDialogs', 'reportUnreadNumber']),
         ...mapGetters(['dashboardTask']),
 
         routeName() {
@@ -241,6 +251,8 @@ export default {
 
                 case 'addTask':
                 case 'addProject':
+                case 'allUser':
+                case 'workReport':
                     return;
 
                 case 'createMeeting':

resources/assets/js/pages/manage.vue

@@ -254,7 +254,7 @@
             v-model="workReportShow"
             placement="right"
             :size="1200">
-            <Report v-if="workReportShow" :reportType="reportTabs" @on-read="$store.dispatch('getReportUnread', 1000)" />
+            <Report v-if="workReportShow" v-model="reportTabs" @on-read="$store.dispatch('getReportUnread', 1000)" />
         </DrawerOverlay>
 
         <!--查看所有团队-->
@@ -1048,6 +1048,10 @@ export default {
                 case 'addProject':
                     this.onAddShow()
                     break;
+                case 'allUser':
+                case 'workReport':
+                    this.settingRoute(act)
+                    break;
             }
         },
 

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

@@ -41,7 +41,7 @@ export default {
     },
 
     props: {
-        reportType: {
+        value: {
             default: "my"
         }
     },
@@ -57,7 +57,7 @@ export default {
     },
 
     mounted() {
-        this.reportTabs = this.reportType;
+        this.reportTabs = this.value;
         //
         if (this.$isMainElectron) {
             this.$Electron.listenerOnly('reportSaveSuccess', ({data, msg}) => {
@@ -73,6 +73,12 @@ export default {
         ])
     },
 
+    watch: {
+        reportTabs(val) {
+            this.$emit("input", val)
+        }
+    },
+
     methods: {
         tabRebder(num) {
             return h => {

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

@@ -4,8 +4,8 @@
             {{ data.title }}
             <Icon v-if="loadIng > 0" type="ios-loading" class="icon-loading"></Icon>
         </div>
-        <div class="report-detail-context">
+        <div v-if="formLabelWidth === 'auto'" class="report-detail-context">
-            <Form class="report-form" label-width="auto" inline>
+            <Form class="report-form auto-form" label-width="auto" inline>
                 <FormItem :label="$L('汇报人')">
                     <UserAvatar :userid="data.userid" :size="28"/>
                 </FormItem>
@@ -17,7 +17,26 @@
                     <UserAvatar v-else v-for="(item, key) in data.receives_user" :key="key" :userid="item.userid" :size="28"/>
                 </FormItem>
             </Form>
-            <Form class="report-form" label-width="auto">
+            <Form class="report-form auto-form" label-width="auto">
+                <FormItem :label="$L('汇报内容')">
+                    <div class="report-content" v-html="data.content"></div>
+                </FormItem>
+            </Form>
+        </div>
+        <div v-else class="report-detail-context">
+            <Form class="report-form" :labelPosition="formLabelPosition" :labelWidth="formLabelWidth">
+                <template v-if="formLabelWidth !== 'auto'">
+                    <FormItem :label="$L('汇报人')">
+                        <UserAvatar :userid="data.userid" :size="28"/>
+                    </FormItem>
+                    <FormItem :label="$L('提交时间')">
+                        {{ data.created_at }}
+                    </FormItem>
+                    <FormItem :label="$L('汇报对象')">
+                        <template v-if="data.receives_user.length === 0">-</template>
+                        <UserAvatar v-else v-for="(item, key) in data.receives_user" :key="key" :userid="item.userid" :size="28"/>
+                    </FormItem>
+                </template>
                 <FormItem :label="$L('汇报内容')">
                     <div class="report-content" v-html="data.content"></div>
                 </FormItem>
@@ -27,6 +46,8 @@
 </template>
 
 <script>
+import {mapState} from "vuex";
+
 export default {
     name: "ReportDetail",
     props: {
@@ -39,6 +60,9 @@ export default {
             loadIng: 0,
         }
     },
+    computed: {
+        ...mapState(['formLabelPosition', 'formLabelWidth']),
+    },
     watch: {
         'data.id': {
             handler(id) {

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

@@ -80,6 +80,9 @@ export default {
                 title: this.$L("名称"),
                 key: 'title',
                 minWidth: 120,
+                render: (h, {row}) => {
+                    return h('AutoTip', row.title);
+                }
             }, {
                 title: this.$L("类型"),
                 key: 'type',

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

@@ -108,16 +108,24 @@ export default {
                             h('Tag', {
                                 props: {   //传递参数
                                     color: "orange",
+                                },
+                                style: {
+                                    flexShrink: 0,
                                 }
                             }, this.$L("未读")),
-                            h('span', row.title)
+                            h('AutoTip', row.title)
                         )
                     } else {
                         arr.push(
-                            h('span', row.title)
+                            h('AutoTip', row.title)
                         )
                     }
-                    return h('div', arr)
+                    return h('div', {
+                        style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                        }
+                    }, arr)
                 }
             }, {
                 title: this.$L("类型"),

resources/assets/sass/components/mobile.scss

@@ -124,6 +124,7 @@
                     flex-direction: column;
                     align-items: center;
                     justify-content: center;
+                    position: relative;
 
                     .taskfont {
                         display: flex;
@@ -145,6 +146,12 @@
                         text-overflow: ellipsis;
                         white-space: nowrap;
                     }
+
+                    .tabbar-badge {
+                        position: absolute;
+                        top: -4px;
+                        right: 12px;
+                    }
                 }
             }
         }

resources/assets/sass/components/report.scss

@@ -81,15 +81,22 @@
     }
 
     .report-form {
-        display: flex;
+        &.auto-form {
-        margin-bottom: 12px;
+            display: flex;
+            margin-bottom: 12px;
+
+            .ivu-form-item {
+                flex: 1;
+                flex-shrink: 0;
+
+                .ivu-form-item-label {
+                    padding-top: 8px;
+                }
+            }
+        }
 
         .ivu-form-item {
-            flex: 1;
-            flex-shrink: 0;
-
             .ivu-form-item-label {
-                padding-top: 8px;
                 opacity: 0.8;
             }
 
@@ -97,6 +104,7 @@
                 line-height: 30px;
                 display: flex;
                 align-items: center;
+
                 .common-avatar {
                     margin-right: 6px;
                 }