From ec766abb3609ca3d3f526e87ac40af89b98360bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E4=BA=91=E9=B9=8F?= <ypgaop@isoftstone.com>
Date: Wed, 26 Jun 2024 17:42:25 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=92=E8=89=B2=E3=80=81=E6=9C=BA=E6=9E=84?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/layouts/backend/router-view/main.vue  |   2 +-
 .../InstitutionalManagement.vue               | 110 +++++++++++-------
 .../backend/RoleManagement/RoleManagement.vue |  62 ++++++----
 3 files changed, 105 insertions(+), 69 deletions(-)

diff --git a/ui/dasadmin/src/layouts/backend/router-view/main.vue b/ui/dasadmin/src/layouts/backend/router-view/main.vue
index 038615c2..7b4e1494 100644
--- a/ui/dasadmin/src/layouts/backend/router-view/main.vue
+++ b/ui/dasadmin/src/layouts/backend/router-view/main.vue
@@ -1,6 +1,6 @@
 <template>
     <el-main class="layout-main">
-        <el-scrollbar class="layout-main-scrollbar" :style="layoutMainScrollbarStyle" ref="layoutMainScrollbarRef">
+        <el-scrollbar view-class="layout-main-scrollbar" :view-style="layoutMainScrollbarStyle" ref="layoutMainScrollbarRef">
             <router-view v-slot="{ Component }">
                 <transition :name="config.layout.mainAnimation" mode="out-in">
                     <keep-alive :include="state.keepAliveComponentNameList">
diff --git a/ui/dasadmin/src/views/backend/InstitutionalManagement/InstitutionalManagement.vue b/ui/dasadmin/src/views/backend/InstitutionalManagement/InstitutionalManagement.vue
index 8d1da895..ec081312 100644
--- a/ui/dasadmin/src/views/backend/InstitutionalManagement/InstitutionalManagement.vue
+++ b/ui/dasadmin/src/views/backend/InstitutionalManagement/InstitutionalManagement.vue
@@ -46,13 +46,14 @@
                 <el-button @click="closeAddForm">关闭</el-button>
             </template>
         </el-dialog>
-        <el-container>
+        <el-container class="defaultContainer">
             <el-aside class="defaultAside">
                 <el-header class="treeHeader">
                     <el-input v-model="searchInputTreeValue" :placeholder="treeSearchInputPlaceholder" class="searchInput"></el-input>
                 </el-header>
                 <el-main class="treeMain">
                     <el-tree
+                        class="treePart"
                         ref="treeRef"
                         :data="treeData"
                         lazy
@@ -63,7 +64,7 @@
                     ></el-tree>
                 </el-main>
             </el-aside>
-            <el-container>
+            <el-container class="defaultMainContainer">
                 <el-header class="defaultHeader">
                     <div class="searchPart">
                         <el-input v-model="searchTableInput" class="searchInput"></el-input>
@@ -72,7 +73,7 @@
                     <el-button type="primary" :icon="Plus" class="defaultBtn" @click="addInstitutional">{{ t('management.add') }}</el-button>
                 </el-header>
                 <el-main class="defaultMain">
-                    <el-table :data="tableData">
+                    <el-table :data="tableData" class="tablePart">
                         <el-table-column
                             v-for="item in tableColumn"
                             :key="item.key"
@@ -176,7 +177,6 @@ const defaultFormModel = {
     revision: 1,
 }
 
-
 const formModel = ref<addDataType | changeDataType>(JSON.parse(JSON.stringify(defaultFormModel)))
 
 const provinceOptions: selectDataType[] = pcaTextArr
@@ -281,7 +281,7 @@ const dialogTitle = ref('新增机构')
 const dialogVible = ref(false)
 const addInstitutional = () => {
     dialogTitle.value = '新增机构'
-    formModel.value = defaultFormModel    
+    formModel.value = defaultFormModel
     formRef.value && formRef.value.clearValidate(Object.keys(defaultFormModel))
     console.log(defaultFormModel, 'defaultFormModel')
 
@@ -518,47 +518,71 @@ onMounted(() => {
     width: 220px;
     height: 40px;
 }
+$defaultHeaderHeight: 60px;
+$defaultMainHeight: calc(100% - 60px);
+$paginationHeight: 32px;
 .institutionalManagement {
-    .defaultAside {
-        width: 260px;
-        border-right: 1px solid #eaebed;
-        .treeHeader {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            .searchInput {
-                @include searchInput(0);
+    width: 100%;
+    height: 100%;
+    .defaultContainer {
+        height: 100%;
+        .defaultAside {
+            width: 260px;
+            height: 100%;
+            border-right: 1px solid #eaebed;
+            .treeHeader {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: $defaultHeaderHeight;
+                .searchInput {
+                    @include searchInput(0);
+                }
+            }
+            .treeMain {
+                height: $defaultMainHeight;
+                .treePart {
+                    height: 100%;
+                }
             }
         }
-    }
-    .defaultHeader {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        .searchPart {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .defaultBtn {
-            width: 88px;
-            height: 40px;
-        }
-        .searchInput {
-            @include searchInput(10px);
-        }
-    }
-    .defaultMain {
-        .tableOperate {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            a {
-                margin: 5px;
-                color: #0064aa;
-                font-weight: 600;
-                &:hover {
-                    cursor: pointer;
+        .defaultMainContainer {
+            height: 100%;
+            .defaultHeader {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                height: $defaultHeaderHeight;
+                .searchPart {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                .defaultBtn {
+                    width: 88px;
+                    height: 40px;
+                }
+                .searchInput {
+                    @include searchInput(10px);
+                }
+            }
+            .defaultMain {
+                height: $defaultMainHeight;
+                .tablePart {
+                    height: calc(100% - $paginationHeight);
+                }
+                .tableOperate {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    a {
+                        margin: 5px;
+                        color: #0064aa;
+                        font-weight: 600;
+                        &:hover {
+                            cursor: pointer;
+                        }
+                    }
                 }
             }
         }
diff --git a/ui/dasadmin/src/views/backend/RoleManagement/RoleManagement.vue b/ui/dasadmin/src/views/backend/RoleManagement/RoleManagement.vue
index f3895afb..be4c1be1 100644
--- a/ui/dasadmin/src/views/backend/RoleManagement/RoleManagement.vue
+++ b/ui/dasadmin/src/views/backend/RoleManagement/RoleManagement.vue
@@ -27,7 +27,7 @@
                 <el-button @click="cancelSubmitForm">取消</el-button>
             </template>
         </el-dialog>
-        <el-container>
+        <el-container class="container">
             <el-header class="containerHeader">
                 <div class="searchPart">
                     <el-input class="searchInput" v-model="searchInputValue" :placeholder="searchInputPlacehoder"></el-input>
@@ -36,7 +36,7 @@
                 <el-button type="primary" :icon="Plus" class="defaultBtn" @click="addClick">{{ t('management.add') }}</el-button>
             </el-header>
             <el-main class="containerMain">
-                <el-table :data="tableData">
+                <el-table :data="tableData" class="tablePart">
                     <el-table-column
                         v-for="item in tableColumn"
                         :key="item.key"
@@ -255,35 +255,47 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
+$defaultHeaderHeight: 60px;
+$defaultMainHeight: calc(100% - 60px);
+$paginationHeight: 32px;
 .roleManagement {
     width: 100%;
     height: 100%;
-    .containerHeader {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        .searchInput {
-            margin-right: 10px;
-            width: 220px;
-            height: 40px;
-        }
-        .defaultBtn {
-            width: 88px;
-            height: 40px;
-        }
-    }
-    .containerMain {
+    .container {
         width: 100%;
-        .tableOperate {
+        height: 100%;
+        .containerHeader {
             display: flex;
-            justify-content: center;
             align-items: center;
-            a {
-                margin: 5px;
-                color: #0064aa;
-                font-weight: 600;
-                &:hover {
-                    cursor: pointer;
+            justify-content: space-between;
+            height: $defaultHeaderHeight;
+            .searchInput {
+                margin-right: 10px;
+                width: 220px;
+                height: 40px;
+            }
+            .defaultBtn {
+                width: 88px;
+                height: 40px;
+            }
+        }
+        .containerMain {
+            width: 100%;
+            height: $defaultMainHeight;
+            .tablePart {
+                height: calc(100% - $paginationHeight);
+                .tableOperate {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    a {
+                        margin: 5px;
+                        color: #0064aa;
+                        font-weight: 600;
+                        &:hover {
+                            cursor: pointer;
+                        }
+                    }
                 }
             }
         }