角色、机构样式修改

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">

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
@@ -518,47 +518,71 @@ onMounted(() => {
     width: 220px;
     height: 40px;
 }
+$defaultHeaderHeight: 60px;
+$defaultMainHeight: calc(100% - 60px);
+$paginationHeight: 32px;
 .institutionalManagement {
-    .defaultAside {
+    width: 100%;
-        width: 260px;
+    height: 100%;
-        border-right: 1px solid #eaebed;
+    .defaultContainer {
-        .treeHeader {
+        height: 100%;
-            display: flex;
+        .defaultAside {
-            align-items: center;
+            width: 260px;
-            justify-content: center;
+            height: 100%;
-            .searchInput {
+            border-right: 1px solid #eaebed;
-                @include searchInput(0);
+            .treeHeader {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: $defaultHeaderHeight;
+                .searchInput {
+                    @include searchInput(0);
+                }
+            }
+            .treeMain {
+                height: $defaultMainHeight;
+                .treePart {
+                    height: 100%;
+                }
             }
         }
-    }
+        .defaultMainContainer {
-    .defaultHeader {
+            height: 100%;
-        display: flex;
+            .defaultHeader {
-        justify-content: space-between;
+                display: flex;
-        align-items: center;
+                justify-content: space-between;
-        .searchPart {
+                align-items: center;
-            display: flex;
+                height: $defaultHeaderHeight;
-            justify-content: space-between;
+                .searchPart {
-            align-items: center;
+                    display: flex;
-        }
+                    justify-content: space-between;
-        .defaultBtn {
+                    align-items: center;
-            width: 88px;
+                }
-            height: 40px;
+                .defaultBtn {
-        }
+                    width: 88px;
-        .searchInput {
+                    height: 40px;
-            @include searchInput(10px);
+                }
-        }
+                .searchInput {
-    }
+                    @include searchInput(10px);
-    .defaultMain {
+                }
-        .tableOperate {
+            }
-            display: flex;
+            .defaultMain {
-            justify-content: center;
+                height: $defaultMainHeight;
-            align-items: center;
+                .tablePart {
-            a {
+                    height: calc(100% - $paginationHeight);
-                margin: 5px;
+                }
-                color: #0064aa;
+                .tableOperate {
-                font-weight: 600;
+                    display: flex;
-                &:hover {
+                    justify-content: center;
-                    cursor: pointer;
+                    align-items: center;
+                    a {
+                        margin: 5px;
+                        color: #0064aa;
+                        font-weight: 600;
+                        &:hover {
+                            cursor: pointer;
+                        }
+                    }
                 }
             }
         }

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 {
+    .container {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        .searchInput {
-            margin-right: 10px;
-            width: 220px;
-            height: 40px;
-        }
-        .defaultBtn {
-            width: 88px;
-            height: 40px;
-        }
-    }
-    .containerMain {
         width: 100%;
-        .tableOperate {
+        height: 100%;
+        .containerHeader {
             display: flex;
-            justify-content: center;
             align-items: center;
-            a {
+            justify-content: space-between;
-                margin: 5px;
+            height: $defaultHeaderHeight;
-                color: #0064aa;
+            .searchInput {
-                font-weight: 600;
+                margin-right: 10px;
-                &:hover {
+                width: 220px;
-                    cursor: pointer;
+                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;
+                        }
+                    }
                 }
             }
         }