perf: 优化移动端部门管理

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

@@ -2,11 +2,15 @@
     <div class="team-management">
         <div class="management-title">
             {{$L('团队管理')}}
+            <div class="title-zoom" @click="minBox=!minBox">
+                <i v-if="minBox" class="taskfont">&#xe7d4;</i>
+                <i v-else class="taskfont">&#xe7d3;</i>
+            </div>
             <div class="title-icon">
                 <Loading v-if="loadIng > 0"/>
             </div>
         </div>
-        <div class="management-box">
+        <div class="management-box" :class="{'min-box':minBox}">
             <div class="management-department">
                 <ul>
                     <li :class="[`level-1`, departmentSelect === 0 ? 'active' : '']" @click="onSelectDepartment(0)">
@@ -308,6 +312,7 @@ export default {
     data() {
         return {
             loadIng: 0,
+            minBox: false,
 
             keys: {},
             keyIs: false,
@@ -762,6 +767,12 @@ export default {
         },
         departmentSelect() {
             this.setPage(1)
+        },
+        windowSmall: {
+            handler(v) {
+                this.minBox = v
+            },
+            immediate: true
         }
     },
     computed: {

resources/assets/sass/pages/components/team-management.scss

@@ -18,6 +18,19 @@
         display: flex;
         align-items: center;
 
+        .title-zoom {
+            display: flex;
+            align-items: center;
+            height: 20px;
+            line-height: 20px;
+            margin-left: 6px;
+
+            > i {
+                cursor: pointer;
+                font-size: 24px;
+            }
+        }
+
         .title-icon {
             display: flex;
             align-items: center;
@@ -37,6 +50,14 @@
         display: flex;
         min-width: 500px;
         height: 0;
+        &.min-box {
+            .management-department {
+                display: none;
+            }
+            .management-user {
+                padding-left: 0;
+            }
+        }
         .management-department {
             width: 239px;
             border-right: 1px solid #efefef;