perf: 工作汇报样式

app/Http/Controllers/Api/ReportController.php

@@ -189,7 +189,7 @@ class ReportController extends AbstractController
             }
 
         } );
-        return Base::retSuccess('success');
+        return Base::retSuccess('保存成功');
     }
 
     /**

resources/assets/js/components/DrawerOverlay.vue

@@ -1,5 +1,10 @@
 <template>
-    <div :class="['drawer-overlay', placement, value ? 'overlay-visible' : 'overlay-hide']">
+    <transition name="transition-drop">
+        <div
+            :data-transfer="transfer"
+            :transfer="transfer"
+            v-transfer-dom
+            :class="['drawer-overlay', placement, value ? 'overlay-visible' : 'overlay-hide']">
             <div class="overlay-mask" @click="mask"></div>
             <div class="overlay-body" :style="bodyStyle">
                 <div class="overlay-close">
@@ -13,13 +18,17 @@
                 <div class="overlay-content"><slot/></div>
             </div>
         </div>
+    </transition>
 </template>
 
 <script>
     import ResizeLine from "./ResizeLine";
+    import TransferDom from '../directives/transfer-dom';
+
     export default {
         name: 'DrawerOverlay',
         components: {ResizeLine},
+        directives: { TransferDom },
         props: {
             value: {
                 type: Boolean,
@@ -47,6 +56,10 @@
                 type: Boolean,
                 default: true
             },
+            transfer: {
+                type: Boolean,
+                default: false
+            },
         },
 
         data() {

resources/assets/js/components/TEditor.vue

@@ -76,6 +76,10 @@
             height: {
                 default: 360,
             },
+            minHeight: {
+                type: Number,
+                default: 0,
+            },
             htmlClass: {
                 default: '',
                 type: String
@@ -115,6 +119,10 @@
                 type: Boolean,
                 default: false
             },
+            autoSize: {
+                type: Boolean,
+                default: false
+            },
             placeholder: {
                 type: String,
                 default: ''
@@ -212,7 +220,7 @@
             },
 
             option(isFull) {
-                return {
+                let optionInfo = {
                     inline: isFull ? false : this.inline,
                     selector: (isFull ? '#T_' : '#') + this.id,
                     base_url: $A.originUrl('js/tinymce'),
@@ -374,6 +382,13 @@
                         }
                     },
                 };
+                if (this.autoSize) {
+                    optionInfo.plugins.push('autoresize')
+                }
+                if (this.minHeight > 0) {
+                    optionInfo.min_height = this.minHeight
+                }
+                return optionInfo;
             },
 
             closeFull() {

resources/assets/js/pages/manage.vue

@@ -23,7 +23,7 @@
                         :divided="!!item.divided"
                         :name="item.path">
                         {{$L(item.name)}}
-                        <Badge v-if="item.path === 'workReport'" :count="reportUnreadNumber"/>
+                        <Badge v-if="item.path === 'workReport'" class="manage-menu-report-badge" :count="reportUnreadNumber"/>
                     </DropdownItem>
                     <Dropdown placement="right-start" @on-click="setLanguage">
                         <DropdownItem divided>
@@ -167,7 +167,7 @@
         <DrawerOverlay
             v-model="workReportShow"
             placement="right"
-            :size="900">
+            :size="1100">
             <Report v-if="workReportShow" @read="reportUnread" />
         </DrawerOverlay>
 
@@ -263,6 +263,7 @@ export default {
             natificationHidden: false,
             natificationReady: false,
             notificationClass: null,
+
             reportUnreadNumber: 0,
         }
     },
@@ -278,6 +279,7 @@ export default {
         //
         this.notificationInit();
         this.onVisibilityChange();
+        this.reportUnread();    // 工作汇报未读标记
         //
         this.addTaskSubscribe = Store.subscribe('addTask', this.onAddTask);
         this.dialogMsgSubscribe = Store.subscribe('dialogMsgPush', this.addDialogMsg);
@@ -288,9 +290,6 @@ export default {
         if (this.$Electron) {
             this.$Electron.ipcRenderer.send('setDockBadge', 0);
         }
-
-        // 工作汇报未读标记
-        this.reportUnread();
     },
 
     beforeDestroy() {
@@ -712,11 +711,9 @@ export default {
             this.$store.dispatch("call", {
                 url: 'report/unread',
                 method: 'get',
-            }).then(({data, msg}) => {
+            }).then(({data}) => {
-                // data 结果数据
                 this.reportUnreadNumber = data.total ? data.total : 0;
-                // msg 结果描述
+            }).catch(() => {});
-            });
         }
     }
 }

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

@@ -1,19 +1,23 @@
 <template>
     <div class="report">
         <Tabs v-model="reportTabs">
-            <TabPane label="填写" name="edit" icon="md-create">
+            <TabPane :label="$L('填写汇报')" name="edit">
-                <ReportEdit :id="reportId" @saveSuccess="saveSuccess">填写</ReportEdit>
+                <ReportEdit :id="reportId" @saveSuccess="saveSuccess"></ReportEdit>
             </TabPane>
-            <TabPane label="我的汇报" name="my" icon="ios-paper-plane-outline">
+            <TabPane :label="$L('我的汇报')" name="my">
-                <ReportMy v-if="reportTabs === 'my'" @detail="showDetail" @edit="editReport">我的汇报</ReportMy>
+                <ReportMy v-if="reportTabs === 'my'" @detail="showDetail" @edit="editReport"></ReportMy>
             </TabPane>
-            <TabPane label="收到的汇报" name="receive" icon="ios-paper-outline">
+            <TabPane :label="$L('收到的汇报')" name="receive">
-                <ReportReceive v-if="reportTabs === 'receive'" @detail="showDetail">收到的汇报</ReportReceive>
+                <ReportReceive v-if="reportTabs === 'receive'" @detail="showDetail"></ReportReceive>
             </TabPane>
         </Tabs>
-        <Drawer v-model="showDetailDrawer"  width="900px"  :closable="false">
+        <DrawerOverlay
-            <ReportDetail :data="detailData" @closeDrawer="closeDrawer"/>
+            v-model="showDetailDrawer"
-        </Drawer>
+            placement="right"
+            :size="950"
+            transfer>
+            <ReportDetail :data="detailData"/>
+        </DrawerOverlay>
     </div>
 </template>
 
@@ -22,10 +26,12 @@ import ReportEdit from "./ReportEdit"
 import ReportMy from "./ReportMy"
 import ReportReceive from "./ReportReceive"
 import ReportDetail from "./ReportDetail"
+import DrawerOverlay from "../../../components/DrawerOverlay";
 
 export default {
     name: "Report",
     components: {
+        DrawerOverlay,
         ReportEdit, ReportMy, ReportReceive, ReportDetail
     },
     data() {
@@ -37,9 +43,6 @@ export default {
         }
     },
     methods: {
-        closeDrawer(){
-            this.showDetailDrawer = false
-        },
         showDetail(row) {
             this.showDetailDrawer = true;
             this.detailData = row;

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

@@ -1,9 +1,8 @@
 <template>
 
     <div class="report-detail">
-
+        <div class="report-title">{{ data.title }}</div>
-        <p class="report-title"><Icon type="ios-arrow-back" class="report-title-icon" @click="closeDrawer"/>  {{ data.title }}</p>
+        <div class="report-detail-context">
-        <Divider />
             <div class="report-profile">
                 <Row>
                     <Col span="2">
@@ -41,6 +40,7 @@
                     </div>
                 </Col>
             </Row>
+        </div>
 
     </div>
 </template>
@@ -75,9 +75,6 @@ export default {
                 // msg 错误原因
             });
         },
-        closeDrawer(){
-            this.$emit('closeDrawer')
-        },
     }
 }
 </script>

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

@@ -2,13 +2,11 @@
     <Form class="report-box" label-position="top" @submit.native.prevent>
         <Row class="report-row report-row-header" >
             <Col span="2"><p class="report-titles">{{ $L("汇报类型") }}</p></Col>
-            <Col span="6">
+            <Col span="12">
                 <RadioGroup type="button" button-style="solid" v-model="reportData.type" @on-change="typeChange" class="report-radiogroup">
                     <Radio label="weekly">{{ $L("周报") }}</Radio>
                     <Radio label="daily">{{ $L("日报") }}</Radio>
                 </RadioGroup>
-            </Col>
-            <Col span="6">
                 <ButtonGroup class="report-buttongroup">
                     <Tooltip class="report-poptip" trigger="hover"  :content="prevCycleText" placement="bottom">
                         <Button  type="primary" @click="prevCycle">
@@ -16,7 +14,7 @@
                         </Button>
                     </Tooltip>
                     <div class="report-buttongroup-shu"></div>
-                    <Tooltip class="report-poptip" trigger="hover"  :content="nextCycleText" placement="bottom">
+                    <Tooltip class="report-poptip" trigger="hover" :disabled="reportData.offset >= 0" :content="nextCycleText" placement="bottom">
                         <Button  type="primary" @click="nextCycle" :disabled="reportData.offset >= 0">
                             <Icon type="ios-arrow-forward" />
                         </Button>
@@ -32,19 +30,22 @@
         </Row>
         <Row class="report-row report-row-header">
             <Col span="2"><p class="report-titles">{{ $L("汇报对象") }}</p></Col>
-            <Col  span="16">
+            <Col span="22">
+                <div class="report-users">
                     <UserInput
                         v-if="userInputShow"
                         v-model="reportData.receive"
+                        :disabledChoice="[userId]"
                         :placeholder="$L('选择接收人')" />
+                    <a class="report-row-a" href="javascript:void(0);" @click="getLastSubmitter"><Icon class="report-row-a-icon" type="ios-share-outline" />{{ $L("使用我上次的汇报对象") }}</a>
+                </div>
             </Col>
-            <Col  span="6"><a class="report-row-a" href="javascript:void(0);" @click="getLastSubmitter"><Icon class="report-row-a-icon" type="ios-share-outline" />{{ $L("使用我上次的汇报对象") }}</a></Col>
         </Row>
         <Row class="report-row report-row-content">
             <Col span="2"><p class="report-titles">{{ $L("汇报内容") }}</p></Col>
             <Col span="22">
-                <FormItem>
+                <FormItem class="report-row-content-editor">
-                    <TEditor v-model="reportData.content" height="550px"/>
+                    <TEditor v-model="reportData.content" height="100%"/>
                 </FormItem>
             </Col>
         </Row>
@@ -53,8 +54,6 @@
             <Col span="4">
                 <FormItem>
                     <Button type="primary" @click="handleSubmit" class="report-bottom">提交</Button>
-                    <!--            <Button type="primary" @click="prevCycle">{{ prevCycleText }}</Button>-->
-                    <!--            <Button type="primary" @click="nextCycle" :disabled="reportData.offset >= 0">{{ nextCycleText }}</Button>-->
                 </FormItem>
             </Col>
         </Row>
@@ -63,6 +62,7 @@
 
 <script>
 import UserInput from "../../../components/UserInput"
+import {mapState} from "vuex";
 
 const TEditor = () => import('../../../components/TEditor');
 export default {
@@ -96,6 +96,9 @@ export default {
             if (this.id > 0) this.getDetail(val);
         },
     },
+    computed: {
+        ...mapState(["userId"])
+    },
     mounted() {
         this.getTemplate();
     },

resources/assets/sass/components/report.scss

@@ -1,6 +1,7 @@
 .report {
     height: 100%;
     padding: 10px 20px;
+
     .report-list-wrap {
         width: 100%;
         height: 100%;
@@ -9,12 +10,15 @@
         padding-top: 53px;
         flex-direction: column;
         position: absolute;
+
         .report-row-header, .report-row-foot {
             flex: 0 0 auto;
         }
+
         .report-row-content {
             flex: 1 1 auto;
             overflow-y: auto;
+
             .ivu-table {
                 .ivu-table-body {
                     height: 100%;
@@ -29,20 +33,24 @@
         text-align: center;
         margin-top: 15px;
     }
+
     .ivu-tabs {
         height: 100%;
         position: relative;
+
         .ivu-tabs-bar {
             position: relative;
             z-index: 2;
             background: #fff;
         }
+
         .ivu-tabs-content {
             height: 100%;
             width: 100%;
             margin-top: -53px;
             padding-top: 53px;
         }
+
         .ivu-tabs-tabpane {
 
         }
@@ -54,12 +62,12 @@
         font-size: 16px;
         font-weight: bold;
         margin-bottom: 12px;
-        padding-top: 20px;
+        padding: 20px 24px;
-        .report-title-icon{
+        border-bottom: 1px solid #eeeeee;
-            font-size: 22px;
-            cursor: pointer;
-            margin-right: 20px;
     }
+
+    .report-detail-context {
+        padding: 12px 24px;
     }
 
     .report-profile {
@@ -71,17 +79,20 @@
         flex-wrap: wrap;
         height: 28px;
         line-height: 28px;
+
         p {
             display: block;
             width: 100%;
             text-align: justify;
             padding-right: 12px;
+
             &:after {
                 content: '';
                 display: inline-block;
                 width: 100%;
             }
         }
+
         & > div {
             margin-right: 8px;
         }
@@ -94,12 +105,15 @@
     .report-content {
         margin-top: 12px;
         width: 100%;
+
         h2 {
             margin-bottom: 10px;
         }
+
         ol {
             margin-bottom: 20px;
             padding-left: 18px;
+
             li {
                 font-size: 14px;
                 line-height: 24px;
@@ -107,69 +121,112 @@
         }
     }
 }
+
 .report-box {
     display: flex;
     flex-direction: column;
     height: 100%;
+
     .report-row-header, .report-row-foot {
         flex: 0 0 auto;
     }
+
     .report-row-content {
         flex: 1 1 auto;
         overflow-y: auto;
+
+        .report-row-content-editor {
+            height: 100%;
+
+            .ivu-form-item-content {
+                height: 100%;
+                display: flex;
+                .teditor-wrapper {
+                    flex: 1;
+                    display: flex;
                 }
+            }
+        }
+    }
+
     .report-row-foot {
         margin-bottom: 0;
     }
 }
+
 .report-row {
     margin-bottom: 20px;
+
     .report-row-a {
         float: right;
         line-height: 32px;
+
         .report-row-a-icon {
             transform: rotate(-90deg);
             font-size: 16px;
             margin-right: 2px;
         }
     }
+
     .report-bottom {
-        width: 120px;
+        height: 36px;
+        line-height: 34px;
+        min-width: 110px;
     }
-    .report-bottom-save{
+
-        width: 120px;
+    .ivu-input[disabled] {
-        background: #F4F5F7 ;
+        color: #666666;
-        color: #515A6E;
-        border-color:  #F4F5F7 ;
     }
 }
+
 .report-titles {
     line-height: 32px;
 }
+
+.report-users {
+    display: flex;
+    align-items: center;
+
+    .common-user {
+        flex: 1;
+        margin-right: 12px;
+    }
+
+    .report-row-a {
+        flex-shrink: 0;
+    }
+}
+
 .report-radiogroup {
     background: #F4F5F7 !important;
     padding: 2px !important;
     border-radius: 4px !important;
+
     .ivu-radio-wrapper {
         padding: 0 30px !important;
         background: #F4F5F7 !important;
         color: #515A6E !important;
         box-shadow: none !important;
         border: none !important;
+
         &:before {
             width: 0 !important;
         }
+
         &:after {
             width: 0 !important;
         }
     }
+
     .ivu-radio-focus {
         box-shadow: none !important;
         border: none !important;
+
         &:after {
             background: none !important;
         }
     }
+
     .ivu-radio-wrapper-checked:not(.ivu-radio-wrapper-disabled) {
         background: #fff !important;
         color: #8BCF70 !important;
@@ -179,10 +236,12 @@
     }
 
 }
+
 .report-buttongroup {
-    margin-top: 2px;
+    margin-left: 20px;
     background: #F4F5F7 !important;
     border-radius: 4px;
+
     .report-buttongroup-shu {
         position: absolute;
         left: 47px;
@@ -191,28 +250,36 @@
         background-color: #E5E5E5;
         top: 5px;
     }
+
     .ivu-btn-primary {
         background: #F4F5F7 !important;
         box-shadow: none !important;
         border: none !important;
         color: #8BCF70 !important;
+        height: 36px;
+        line-height: 34px;
+
         &[disabled] {
             color: #515A6E !important;
         }
     }
 }
+
 .report-poptip {
     .ivu-tooltip-inner {
         min-width: 60px !important;
         font-size: 12px !important;
     }
 }
+
 .reportmy-row {
     margin-bottom: 20px;
+
     .reportmy-titles {
         line-height: 32px;
     }
 }
+
 .report-main {
     .report-submitter {
         padding-top: 13px;

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

@@ -70,6 +70,11 @@
                     }
                 }
             }
+            .manage-menu-report-badge {
+                margin-left: 6px;
+                transform: scale(0.9);
+                vertical-align: top;
+            }
             .manage-menu-language {
                 display: flex;
                 align-items: center;