perf: 工作汇报样式

2022-01-14 17:57:51 +08:00 · 2022-01-14 17:57:51 +08:00 · ede298a142
commit ede298a142
parent e63c5c074c
9 changed files with 263 additions and 163 deletions
--- a/app/Http/Controllers/Api/ReportController.php
+++ b/app/Http/Controllers/Api/ReportController.php
@ -189,7 +189,7 @@ class ReportController extends AbstractController
            }

        } );
-        return Base::retSuccess('success');
+        return Base::retSuccess('保存成功');
    }

    /**
--- a/resources/assets/js/components/DrawerOverlay.vue
+++ b/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() {
--- a/resources/assets/js/components/TEditor.vue
+++ b/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() {
--- a/resources/assets/js/pages/manage.vue
+++ b/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}) => {
-                // data 结果数据
+            }).then(({data}) => {
                this.reportUnreadNumber = data.total ? data.total : 0;
-                // msg 结果描述
-            });
+            }).catch(() => {});
        }
    }
 }
--- a/resources/assets/js/pages/manage/components/Report.vue
+++ b/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">
-                <ReportEdit :id="reportId" @saveSuccess="saveSuccess">填写</ReportEdit>
+            <TabPane :label="$L('填写汇报')" name="edit">
+                <ReportEdit :id="reportId" @saveSuccess="saveSuccess"></ReportEdit>
            </TabPane>
-            <TabPane label="我的汇报" name="my" icon="ios-paper-plane-outline">
-                <ReportMy v-if="reportTabs === 'my'" @detail="showDetail" @edit="editReport">我的汇报</ReportMy>
+            <TabPane :label="$L('我的汇报')" name="my">
+                <ReportMy v-if="reportTabs === 'my'" @detail="showDetail" @edit="editReport"></ReportMy>
            </TabPane>
-            <TabPane label="收到的汇报" name="receive" icon="ios-paper-outline">
-                <ReportReceive v-if="reportTabs === 'receive'" @detail="showDetail">收到的汇报</ReportReceive>
+            <TabPane :label="$L('收到的汇报')" name="receive">
+                <ReportReceive v-if="reportTabs === 'receive'" @detail="showDetail"></ReportReceive>
            </TabPane>
        </Tabs>
-        <Drawer v-model="showDetailDrawer"  width="900px"  :closable="false">
-            <ReportDetail :data="detailData" @closeDrawer="closeDrawer"/>
-        </Drawer>
+        <DrawerOverlay
+            v-model="showDetailDrawer"
+            placement="right"
+            :size="950"
+            transfer>
+            <ReportDetail :data="detailData"/>
+        </DrawerOverlay>
    </div>
 </template>

@ -22,11 +26,13 @@ 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: {
-        ReportEdit, ReportMy, ReportReceive,ReportDetail
+        DrawerOverlay,
+        ReportEdit, ReportMy, ReportReceive, ReportDetail
    },
    data() {
        return {
@ -37,9 +43,6 @@ export default {
        }
    },
    methods: {
-        closeDrawer(){
-            this.showDetailDrawer = false
-        },
        showDetail(row) {
            this.showDetailDrawer = true;
            this.detailData = row;
--- a/resources/assets/js/pages/manage/components/ReportDetail.vue
+++ b/resources/assets/js/pages/manage/components/ReportDetail.vue
@ -1,9 +1,8 @@
 <template>

    <div class="report-detail">
-
-        <p class="report-title"><Icon type="ios-arrow-back" class="report-title-icon" @click="closeDrawer"/>  {{ data.title }}</p>
-        <Divider />
+        <div class="report-title">{{ data.title }}</div>
+        <div class="report-detail-context">
            <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>
--- a/resources/assets/js/pages/manage/components/ReportEdit.vue
+++ b/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>
-                    <TEditor v-model="reportData.content" height="550px"/>
+                <FormItem class="report-row-content-editor">
+                    <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();
    },
--- a/resources/assets/sass/components/report.scss
+++ b/resources/assets/sass/components/report.scss
@ -1,6 +1,7 @@
 .report {
    height: 100%;
    padding: 10px 20px;
+
    .report-list-wrap {
        width: 100%;
        height: 100%;
@ -9,14 +10,17 @@
        padding-top: 53px;
        flex-direction: column;
        position: absolute;
-        .report-row-header,.report-row-foot{
+
+        .report-row-header, .report-row-foot {
            flex: 0 0 auto;
        }
-        .report-row-content{
-            flex:1 1 auto;
+
+        .report-row-content {
+            flex: 1 1 auto;
            overflow-y: auto;
-            .ivu-table{
-                .ivu-table-body{
+
+            .ivu-table {
+                .ivu-table-body {
                    height: 100%;
                    overflow-y: auto;
                    padding-bottom: 50px;
@ -29,21 +33,25 @@
        text-align: center;
        margin-top: 15px;
    }
-    .ivu-tabs{
+
+    .ivu-tabs {
        height: 100%;
        position: relative;
-        .ivu-tabs-bar{
+
+        .ivu-tabs-bar {
            position: relative;
            z-index: 2;
            background: #fff;
        }
-        .ivu-tabs-content{
+
+        .ivu-tabs-content {
            height: 100%;
            width: 100%;
            margin-top: -53px;
            padding-top: 53px;
        }
-        .ivu-tabs-tabpane{
+
+        .ivu-tabs-tabpane {

        }
    }
@ -54,12 +62,12 @@
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 12px;
-        padding-top: 20px;
-        .report-title-icon{
-            font-size: 22px;
-            cursor: pointer;
-            margin-right: 20px;
+        padding: 20px 24px;
+        border-bottom: 1px solid #eeeeee;
    }
+
+    .report-detail-context {
+        padding: 12px 24px;
    }

    .report-profile {
@ -71,119 +79,170 @@
        flex-wrap: wrap;
        height: 28px;
        line-height: 28px;
-        p{
+
+        p {
            display: block;
            width: 100%;
            text-align: justify;
            padding-right: 12px;
-            &:after{
+
+            &:after {
                content: '';
                display: inline-block;
                width: 100%;
            }
        }
+
        & > div {
            margin-right: 8px;
        }
    }

-    .ivu-col{
+    .ivu-col {
        margin-bottom: 12px;
    }

    .report-content {
        margin-top: 12px;
        width: 100%;
-        h2{
+
+        h2 {
            margin-bottom: 10px;
        }
-        ol{
+
+        ol {
            margin-bottom: 20px;
            padding-left: 18px;
-            li{
+
+            li {
                font-size: 14px;
                line-height: 24px;
            }
        }
    }
 }
-.report-box{
+
+.report-box {
    display: flex;
    flex-direction: column;
    height: 100%;
-    .report-row-header,.report-row-foot{
+
+    .report-row-header, .report-row-foot {
        flex: 0 0 auto;
    }
-    .report-row-content{
-        flex:1 1 auto;
-        overflow-y: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{
+            }
+        }
+    }
+
+    .report-row-foot {
        margin-bottom: 0;
    }
 }
-.report-row{
+
+.report-row {
    margin-bottom: 20px;
-    .report-row-a{
+
+    .report-row-a {
        float: right;
        line-height: 32px;
-        .report-row-a-icon{
+
+        .report-row-a-icon {
            transform: rotate(-90deg);
            font-size: 16px;
            margin-right: 2px;
        }
    }
-    .report-bottom{
-        width: 120px;
+
+    .report-bottom {
+        height: 36px;
+        line-height: 34px;
+        min-width: 110px;
    }
-    .report-bottom-save{
-        width: 120px;
-        background: #F4F5F7 ;
-        color: #515A6E;
-        border-color:  #F4F5F7 ;
+
+    .ivu-input[disabled] {
+        color: #666666;
    }
 }
-.report-titles{
+
+.report-titles {
    line-height: 32px;
 }
-.report-radiogroup{
+
+.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{
+    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;
+        border: none !important;
+
+        &:before {
+            width: 0 !important;
        }
-        &:after{
-            width: 0!important;
+
+        &:after {
+            width: 0 !important;
        }
    }
-    .ivu-radio-focus{
+
+    .ivu-radio-focus {
        box-shadow: none !important;
-        border: none!important;
-        &:after{
-            background: none!important;
+        border: none !important;
+
+        &:after {
+            background: none !important;
        }
    }
-    .ivu-radio-wrapper-checked:not(.ivu-radio-wrapper-disabled){
+
+    .ivu-radio-wrapper-checked:not(.ivu-radio-wrapper-disabled) {
        background: #fff !important;
        color: #8BCF70 !important;
        box-shadow: none !important;
-        border: none!important;
-        border-radius: 4px!important;
+        border: none !important;
+        border-radius: 4px !important;
    }

 }
-.report-buttongroup{
-    margin-top: 2px;
-    background: #F4F5F7!important;
+
+.report-buttongroup {
+    margin-left: 20px;
+    background: #F4F5F7 !important;
    border-radius: 4px;
-    .report-buttongroup-shu{
+
+    .report-buttongroup-shu {
        position: absolute;
        left: 47px;
        width: 1px;
@ -191,30 +250,38 @@
        background-color: #E5E5E5;
        top: 5px;
    }
-    .ivu-btn-primary{
-        background: #F4F5F7!important;
+
+    .ivu-btn-primary {
+        background: #F4F5F7 !important;
        box-shadow: none !important;
-        border: none!important;
+        border: none !important;
        color: #8BCF70 !important;
-        &[disabled]{
+        height: 36px;
+        line-height: 34px;
+
+        &[disabled] {
            color: #515A6E !important;
        }
    }
 }
-.report-poptip{
-    .ivu-tooltip-inner{
+
+.report-poptip {
+    .ivu-tooltip-inner {
        min-width: 60px !important;
        font-size: 12px !important;
    }
 }
-.reportmy-row{
+
+.reportmy-row {
    margin-bottom: 20px;
-    .reportmy-titles{
+
+    .reportmy-titles {
        line-height: 32px;
    }
 }
-.report-main{
-    .report-submitter{
+
+.report-main {
+    .report-submitter {
        padding-top: 13px;
    }
 }
--- a/resources/assets/sass/pages/page-manage.scss
+++ b/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;