perf: 优化抽屉窗口

resources/assets/js/pages/manage.vue

@@ -314,7 +314,7 @@
             <Report v-if="workReportShow" v-model="workReportTab" @on-read="$store.dispatch('getReportUnread', 1000)" />
         </DrawerOverlay>
 
-        <!--查看所有团队-->
+        <!--团队成员管理-->
         <DrawerOverlay
             v-model="allUserShow"
             placement="right"
@@ -346,21 +346,21 @@
             <ProjectArchived v-if="archivedProjectShow"/>
         </DrawerOverlay>
 
+        <!--审批中心-->
+        <DrawerOverlay v-model="approveShow" placement="right" :size="1380" class-name="approve-drawer">
+            <Approve v-if="approveShow"/>
+        </DrawerOverlay>
+
+        <!--审批详情-->
+        <DrawerOverlay v-model="approveDetailsShow" placement="right" :size="600">
+            <ApproveDetails v-if="approveDetailsShow" :data="approveDetails"/>
+        </DrawerOverlay>
+
         <!--移动端选项卡-->
         <transition name="mobile-slide">
             <MobileTabbar v-if="mobileTabbar" @on-click="onTabbarClick"/>
         </transition>
 
-        <!--审批中心-->
-        <DrawerOverlay v-model="approveShow" placement="right" :size="1380" class-name="approve-drawer">
-            <Approve v-if="approveShow" @on-close="approveShow=false"/>
-        </DrawerOverlay>
-
-        <!--审批详情-->
-        <DrawerOverlay v-model="approveDetailsShow" placement="right" :size="600" class-name="approve-drawer">
-            <ApproveDetails v-if="approveDetailsShow" :data="approveDetails" @onBack="approveDetailsShow=false"/>
-        </DrawerOverlay>
-
         <!--应用详情-->
         <MicroApps/>
     </div>

resources/assets/js/pages/manage/application.vue

@@ -61,11 +61,13 @@
 
         <!--MY BOT-->
         <DrawerOverlay v-model="mybotShow" placement="right" :size="720">
+            <template v-if="mybotShow" #title>
+                {{ $L('我的机器人') }}
+            </template>
+            <template v-if="mybotShow" #more>
+                <a href="javascript:void(0)" @click="applyClick({value: 'mybot-add'}, {id: 0})">{{ $L('添加机器人') }}</a>
+            </template>
             <div v-if="mybotShow" class="ivu-modal-wrap-apply">
-                <div class="ivu-modal-wrap-apply-title">
-                    {{ $L('我的机器人') }}
-                    <p @click="applyClick({value: 'mybot-add'}, {id: 0})">{{ $L('添加机器人') }}</p>
-                </div>
                 <div class="ivu-modal-wrap-apply-body full-body">
                     <div v-if="mybotList.length === 0" class="empty-data">
                         <Loading v-if="mybotLoad"/>
@@ -162,11 +164,10 @@
 
         <!--AI BOT 设置-->
         <DrawerOverlay v-model="aibotSettingShow" placement="right" :size="950">
+            <template v-if="aibotSettingShow" #title>
+                {{ $L('AI 设置') }}
+            </template>
             <div v-if="aibotSettingShow" class="ivu-modal-wrap-apply">
-                <div class="ivu-modal-wrap-apply-title">
-                    {{ $L('AI 设置') }}
-                    <p @click="aibotSettingShow=false">{{ $L('返回') }}</p>
-                </div>
                 <div class="ivu-modal-wrap-apply-body">
                     <Tabs v-model="aibotTabAction" :animated="false" class="ai-tabs">
                         <TabPane v-for="(item, key) in aibotList" :key="key" :label="item.label" :name="item.value">
@@ -184,11 +185,13 @@
 
         <!--签到-->
         <DrawerOverlay v-model="signInShow" placement="right" :size="500">
+            <template v-if="signInShow" #title>
+                {{ $L('签到管理') }}
+            </template>
+            <template v-if="signInShow" #more>
+                <a href="javascript:void(0)" @click="signInSettingShow=true" v-if="userIsAdmin">{{ $L('签到设置') }}</a>
+            </template>
             <div v-if="signInShow" class="ivu-modal-wrap-apply">
-                <div class="ivu-modal-wrap-apply-title">
-                    {{ $L('签到管理') }}
-                    <p @click="signInSettingShow=true" v-if="userIsAdmin">{{ $L('签到设置') }}</p>
-                </div>
                 <div class="ivu-modal-wrap-apply-body">
                     <Checkin/>
                 </div>
@@ -197,11 +200,10 @@
 
         <!--签到设置-->
         <DrawerOverlay v-model="signInSettingShow" placement="right" :size="720">
+            <template v-if="signInSettingShow" #title>
+                {{ $L('签到设置') }}
+            </template>
             <div v-if="signInSettingShow" class="ivu-modal-wrap-apply">
-                <div class="ivu-modal-wrap-apply-title">
-                    {{ $L('签到设置') }}
-                    <p @click="signInSettingShow=false">{{ $L('返回') }}</p>
-                </div>
                 <div class="ivu-modal-wrap-apply-body">
                     <SystemCheckin/>
                 </div>
@@ -210,11 +212,13 @@
 
         <!--会议-->
         <DrawerOverlay v-model="meetingShow" placement="right" :size="720">
+            <template v-if="meetingShow" #title>
+                {{ $L('会议') }}
+            </template>
+            <template v-if="meetingShow" #more>
+                <a href="javascript:void(0)" @click="meetingSettingShow = true" v-if="userIsAdmin">{{ $L('会议设置') }}</a>
+            </template>
             <div v-if="meetingShow" class="ivu-modal-wrap-apply">
-                <div class="ivu-modal-wrap-apply-title">
-                    {{ $L('会议') }}
-                    <p @click="meetingSettingShow = true" v-if="userIsAdmin">{{ $L('会议设置') }}</p>
-                </div>
                 <div class="ivu-modal-wrap-apply-body full-body">
                     <SystemMeetingNav @openDetail="openDetail" @onMeeting="onMeeting"/>
                 </div>
@@ -223,11 +227,10 @@
 
         <!--会议设置-->
         <DrawerOverlay v-model="meetingSettingShow" placement="right" :size="600">
+            <template v-if="meetingSettingShow" #title>
+                {{ $L('会议设置') }}
+            </template>
             <div v-if="meetingSettingShow" class="ivu-modal-wrap-apply">
-                <div class="ivu-modal-wrap-apply-title">
-                    {{ $L('会议设置') }}
-                    <p @click="meetingSettingShow = false">{{ $L('返回') }}</p>
-                </div>
                 <div class="ivu-modal-wrap-apply-body full-body">
                     <SystemMeeting/>
                 </div>
@@ -236,10 +239,10 @@
 
         <!--LDAP-->
         <DrawerOverlay v-model="ldapShow" placement="right" :size="700">
+            <template v-if="ldapShow" #title>
+                {{ $L('LDAP 设置') }}
+            </template>
             <div v-if="ldapShow" class="ivu-modal-wrap-apply">
-                <div class="ivu-modal-wrap-apply-title">
-                    {{ $L('LDAP 设置') }}
-                </div>
                 <div class="ivu-modal-wrap-apply-body">
                     <SystemThirdAccess/>
                 </div>
@@ -248,10 +251,10 @@
 
         <!--邮件-->
         <DrawerOverlay v-model="mailShow" placement="right" :size="700">
+            <template v-if="mailShow" #title>
+                {{ $L('邮件通知') }}
+            </template>
             <div v-if="mailShow" class="ivu-modal-wrap-apply">
-                <div class="ivu-modal-wrap-apply-title">
-                    {{ $L('邮件通知') }}
-                </div>
                 <div class="ivu-modal-wrap-apply-body">
                     <SystemEmailSetting/>
                 </div>
@@ -260,10 +263,10 @@
 
         <!--App 推送-->
         <DrawerOverlay v-model="appPushShow" placement="right" :size="700">
+            <template v-if="appPushShow" #title>
+                {{ $L('APP 推送') }}
+            </template>
             <div v-if="appPushShow" class="ivu-modal-wrap-apply">
-                <div class="ivu-modal-wrap-apply-title">
-                    {{ $L('APP 推送') }}
-                </div>
                 <div class="ivu-modal-wrap-apply-body">
                     <SystemAppPush/>
                 </div>

resources/assets/js/pages/manage/approve/details.vue

@@ -283,10 +283,6 @@ export default {
                 this.getInfo()
             }
         },
-        // 返回
-        onBack() {
-            this.$emit('onBack')
-        },
         // 把时间转成几小时前
         getTimeAgo(time, type) {
             const timeDiff = $A.dayjs().unix() - $A.dayjs(time).unix(); // convert to seconds

resources/assets/js/pages/manage/approve/index.vue

@@ -4,7 +4,6 @@
         <div class="approve-wrapper" ref="fileWrapper">
             <div class="approve-head">
                 <div class="approve-nav">
-                    <div class="common-nav-back" @click="onBack"><i class="taskfont">&#xe676;</i></div>
                     <h1>{{$L('审批中心')}}</h1>
                 </div>
 
@@ -57,7 +56,7 @@
                             </div>
                         </div>
                         <div class="approve-main-right">
-                            <listDetails v-if="!detailsShow && tabsValue=='unread'" :data="details" @approve="tabsClick" @revocation="tabsClick"></listDetails>
+                            <ApproveDetails v-if="!detailsShow && tabsValue=='unread'" :data="details" @approve="tabsClick" @revocation="tabsClick"></ApproveDetails>
                         </div>
                     </div>
                 </TabPane>
@@ -88,7 +87,7 @@
                             </div>
                         </div>
                         <div class="approve-main-right">
-                            <listDetails v-if="!detailsShow && tabsValue=='done'" :data="details" @approve="tabsClick" @revocation="tabsClick"></listDetails>
+                            <ApproveDetails v-if="!detailsShow && tabsValue=='done'" :data="details" @approve="tabsClick" @revocation="tabsClick"></ApproveDetails>
                         </div>
                     </div>
                 </TabPane>
@@ -121,7 +120,7 @@
                             </div>
                         </div>
                         <div class="approve-main-right">
-                            <listDetails v-if="!detailsShow && tabsValue=='notify'" :data="details" @approve="tabsClick" @revocation="tabsClick"></listDetails>
+                            <ApproveDetails v-if="!detailsShow && tabsValue=='notify'" :data="details" @approve="tabsClick" @revocation="tabsClick"></ApproveDetails>
                         </div>
                     </div>
                 </TabPane>
@@ -155,7 +154,7 @@
                             </div>
                         </div>
                         <div class="approve-main-right">
-                            <listDetails v-if="!detailsShow && tabsValue=='initiated'" :data="details" @approve="tabsClick" @revocation="tabsClick"></listDetails>
+                            <ApproveDetails v-if="!detailsShow && tabsValue=='initiated'" :data="details" @approve="tabsClick" @revocation="tabsClick"></ApproveDetails>
                         </div>
                     </div>
                 </TabPane>
@@ -167,7 +166,7 @@
 
         <!--详情-->
         <DrawerOverlay v-model="detailsShow"  placement="right" :size="600">
-            <listDetails v-if="detailsShow" :data="details" @approve="tabsClick" @revocation="tabsClick" style="height: 100%;border-radius: 10px;"></listDetails>
+            <ApproveDetails v-if="detailsShow" :data="details" @approve="tabsClick" @revocation="tabsClick"></ApproveDetails>
         </DrawerOverlay>
 
         <!--发起-->
@@ -245,7 +244,7 @@
 
 <script>
 import list from "./list.vue";
-import listDetails from "./details.vue";
+import ApproveDetails from "./details.vue";
 import DrawerOverlay from "../../../components/DrawerOverlay";
 import ImgUpload from "../../../components/ImgUpload";
 import ApproveSetting from "./setting";
@@ -254,7 +253,7 @@ import {mapState} from 'vuex'
 import emitter from "../../../store/events";
 
 export default {
-    components: {list, listDetails, DrawerOverlay, ImgUpload, ApproveSetting, ApproveExport},
+    components: {list, ApproveDetails, DrawerOverlay, ImgUpload, ApproveSetting, ApproveExport},
     name: "approve",
     data() {
         return {
@@ -395,14 +394,6 @@ export default {
             this.isShowIcon = this.windowWidth < 515
         },
 
-        onBack() {
-            if (this.$listeners['on-close']) {
-                this.$emit('on-close')
-            } else {
-                this.goBack()
-            }
-        },
-
         // 收到websocket消息
         onWebsocketMsg(info) {
             const {type, action, mode, data} = info;

resources/assets/js/pages/manage/approve/setting.vue

@@ -20,11 +20,10 @@
             </Col>
         </Row>
 
-        <!--查看所有项目-->
+        <!--设置流程-->
         <DrawerOverlay v-model="approvalSettingShow" placement="right" :size="1200">
             <iframe :src="iframeSrc"></iframe>
         </DrawerOverlay>
-
     </div>
 </template>
 
@@ -39,7 +38,7 @@ export default {
         return{
             value:false,
             loadIng:0,
-            approvalSettingShow:false,
+            approvalSettingShow: false,
             iframeSrc:"",
             name:"",
             list:[]

resources/assets/js/pages/manage/setting/components/SystemCheckin.vue

@@ -214,7 +214,7 @@
         <!--导出签到数据-->
         <CheckinExport v-model="exportShow"/>
 
-        <!--查看所有团队-->
+        <!--查看管理团队-->
         <DrawerOverlay
             v-model="allUserShow"
             placement="right"

resources/assets/sass/pages/components/project-task-template-and-tag.scss

@@ -5,7 +5,7 @@
 
     .header {
         height: 60px;
-        padding: 10px 20px;
+        padding: 10px 60px 10px 20px;
         display: flex;
         align-items: center;
         justify-content: flex-start;
@@ -146,7 +146,7 @@
                         height: 28px;
                         padding: 0 12px;
                         font-size: 13px;
-    
+
                         > i {
                             margin: 0 -2px;
                         }

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

@@ -241,28 +241,6 @@
     flex-direction: column;
     max-width: 100vw;
 
-    .ivu-modal-wrap-apply-title {
-        padding: 12px 30px;
-        background: #ffffff;
-        color: #303133;
-        font-size: 20px;
-        font-weight: 500;
-        line-height: 40px;
-
-        > p {
-            float: right;
-            cursor: pointer;
-            color: #2b85e4;
-            font-size: 14px;
-            padding-left: 8px;
-        }
-
-        @media (max-width: 500px) {
-            padding: 10px 30px;
-            margin-right: 28px;
-        }
-    }
-
     .ivu-modal-wrap-apply-body {
         flex: 1;
         position: relative;