style: 平台管理页面样式修改

src/views/system/approval/PageApproval.vue

@@ -11,8 +11,8 @@
         <BasicTable
           :tableConfig="tableConfig"
           :tableData="tableData"
-          @update:pageSize="handleSizeChange"
-          @update:pageNumber="handleCurrentChange"
+          @update:page-size="handleSizeChange"
+          @update:page-number="handleCurrentChange"
         >
           <template #action="scope">
             <ActionButton text="设置审批流程" @click="handleEditApproval(scope.row.id)" />

src/views/system/dictionary/dictionary.vue

@@ -8,27 +8,29 @@
         <el-button type="primary" @click="handleAddDialogShow" :icon="Plus">新增字典项</el-button>
       </div>
 
-      <el-table v-loading="loading" :data="dataSource" style="width: 100%; margin-top: 16px" :max-height="'calc(100vh - 300px)'">
-        <el-table-column prop="dictName" label="字典名称" width="360" />
-        <el-table-column prop="dictCode" label="字典编码" width="360" />
-        <el-table-column prop="description" label="字典描述" width="680" />
-        <el-table-column prop="dictType" label="分类" width="180">
-          <template #default="{ row }">
-            {{ typeLabelMap[row.dictType] || '' }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="status" label="状态" width="180">
-          <template #default="{ row }">
-            {{ statusLabelMap[row.status] || '' }}
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="200" fixed="right">
-          <template #default="{ row }">
-            <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
-            <el-button type="primary" link @click="handleDelete(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+      <div class="table-wrapper">
+        <el-table v-loading="loading" :data="dataSource" height="100%">
+          <el-table-column prop="dictName" label="字典名称" width="360" />
+          <el-table-column prop="dictCode" label="字典编码" width="360" />
+          <el-table-column prop="description" label="字典描述" />
+          <el-table-column prop="dictType" label="分类" width="180">
+            <template #default="{ row }">
+              {{ typeLabelMap[row.dictType] || '' }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="status" label="状态" width="180">
+            <template #default="{ row }">
+              {{ statusLabelMap[row.status] || '' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="160" fixed="right">
+            <template #default="{ row }">
+              <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
+              <el-button type="primary" link @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
 
       <div class="paginationPosition">
         <el-pagination
@@ -170,13 +172,21 @@
 
 <style lang="scss" scoped>
   .dictionary-container {
-    margin: 20px;
-    .search-form {
-      margin-bottom: 16px;
-    }
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
 
     .table-operations {
-      margin-bottom: 16px;
+      margin-bottom: 20px;
+      flex-shrink: 0;
     }
   }
+
+  .table-wrapper {
+    flex: 1;
+    overflow: hidden;
+    min-height: 0;
+  }
 </style>

src/views/system/person-group/PersonGroup.vue

@@ -3,8 +3,9 @@
     <template #static>
       <Breadcrumb />
     </template>
-    <div>
-      <div style="margin: 20px">
+
+    <div class="content">
+      <div class="toolbar">
         <el-button type="primary" @click="openEditDrawer()" v-permission="PERM_NOTICE.PERSONNEL_GROUP">
           <template #icon>
             <el-icon>
@@ -13,14 +14,16 @@
           </template>
           新建人员分组
         </el-button>
+      </div>
 
-        <el-table :data="personGroupList" style="margin-top: 20px">
+      <div class="table-wrapper">
+        <el-table :data="personGroupList" height="100%">
           <el-table-column label="分组名" prop="name" width="240" />
-          <el-table-column label="分组描述" prop="description" width="580" />
+          <el-table-column label="分组描述" prop="description" />
           <el-table-column label="人员数量" prop="total" width="200" />
           <el-table-column label="创建人" prop="operatorName" width="240" />
           <el-table-column label="创建时间" prop="operationTime" width="240" />
-          <el-table-column label="操作" width="300" fixed="right">
+          <el-table-column label="操作" width="250" fixed="right">
             <template #default="{ row }">
               <section class="actions">
                 <el-button type="primary" link @click="openCheckDrawer(row)">查看</el-button>
@@ -34,21 +37,21 @@
             </template>
           </el-table-column>
         </el-table>
-
-        <section class="paginationPosition">
-          <el-pagination
-            background
-            :layout="DEFAULT_PAGINATION_LAYOUT"
-            :page-sizes="PAGE_SIZE_CONFIG"
-            :total="total"
-            v-model:page-size="personGroupListRequestParams.pageSize"
-            v-model:current-page="personGroupListRequestParams.pageNumber"
-            @change="queryPersonGroupList"
-          />
-        </section>
-        <PersonGroupEditDrawer :title="drawerTitle" ref="editDrawerInstance" @submitted="onSubmit" />
-        <PersonGroupExhibitionDrawer :title="drawerTitle" ref="exhibitionDrawerInstance" />
       </div>
+
+      <section class="paginationPosition">
+        <el-pagination
+          background
+          :layout="DEFAULT_PAGINATION_LAYOUT"
+          :page-sizes="PAGE_SIZE_CONFIG"
+          :total="total"
+          v-model:page-size="personGroupListRequestParams.pageSize"
+          v-model:current-page="personGroupListRequestParams.pageNumber"
+          @change="queryPersonGroupList"
+        />
+      </section>
+      <PersonGroupEditDrawer :title="drawerTitle" ref="editDrawerInstance" @submitted="onSubmit" />
+      <PersonGroupExhibitionDrawer :title="drawerTitle" ref="exhibitionDrawerInstance" />
     </div>
   </VerticalFlexLayout>
 </template>
@@ -106,3 +109,29 @@
     queryPersonGroupList();
   });
 </script>
+
+<style lang="scss" scoped>
+  .content {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .toolbar {
+    margin-bottom: 20px;
+    flex-shrink: 0;
+  }
+
+  .table-wrapper {
+    flex: 1;
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  .paginationPosition {
+    flex-shrink: 0;
+    margin-top: 20px;
+  }
+</style>

src/views/system/role/role.vue

@@ -20,24 +20,26 @@
         <el-button type="primary" @click="openDrawer()" v-permission="PERM_USER.ROLE"> 添加角色 </el-button>
       </div>
 
-      <el-table :data="roleList">
-        <el-table-column label="角色ID" width="100" prop="id" />
-        <el-table-column label="角色名称" prop="roleName" width="480" />
-        <el-table-column label="备注" prop="remark" width="800" />
-        <el-table-column label="创建时间" width="240" prop="createdAt" />
-        <el-table-column label="操作" width="200" fixed="right">
-          <template #default="{ row }">
-            <section class="actions">
-              <img src="@/assets/icons/edit.png" @click="openDrawer(row)" v-permission="PERM_USER.ROLE" />
-              <img
-                src="@/assets/icons/delete.png"
-                @click="deleteRole(row.id)"
-                v-permission="{ action: [PERM_USER.ROLE] }"
-              />
-            </section>
-          </template>
-        </el-table-column>
-      </el-table>
+      <div class="table-wrapper">
+        <el-table :data="roleList" height="100%" class="role-table">
+          <el-table-column label="角色ID" width="100" prop="id" />
+          <el-table-column label="角色名称" prop="roleName" width="480" />
+          <el-table-column label="备注" prop="remark" width="800" />
+          <el-table-column label="创建时间" width="240" prop="createdAt" />
+          <el-table-column label="操作" min-width="120" fixed="right">
+            <template #default="{ row }">
+              <section class="actions">
+                <img src="@/assets/icons/edit.png" @click="openDrawer(row)" v-permission="PERM_USER.ROLE" />
+                <img
+                  src="@/assets/icons/delete.png"
+                  @click="deleteRole(row.id)"
+                  v-permission="{ action: [PERM_USER.ROLE] }"
+                />
+              </section>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
 
       <section class="paginationPosition">
         <el-pagination
@@ -117,10 +119,31 @@
 
   .content {
     padding: 20px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
   }
+
   .toolbar {
     margin-bottom: 20px;
     display: flex;
     justify-content: space-between;
+    flex-shrink: 0;
+  }
+
+  .table-wrapper {
+    flex: 1;
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  .role-table {
+    height: 100%;
+  }
+
+  .paginationPosition {
+    flex-shrink: 0;
+    margin-top: 20px;
   }
 </style>

src/views/system/user/component/SearchForm.vue

@@ -41,7 +41,6 @@
 
 <script setup lang="ts">
   import { ref } from 'vue';
-  import { Filter, Refresh } from '@element-plus/icons-vue';
   import { FormInstance } from 'element-plus';
   import { queryTypeSelect } from '../constant';
   import { OptionsProps } from '../types';
@@ -118,7 +117,4 @@
   .el-form--inline .el-form-item {
     margin-right: 40px;
   }
-  .el-form {
-    padding: 20px 0 0 20px;
-  }
 </style>

src/views/system/user/user.vue

@@ -12,28 +12,28 @@
         @get-table-data="onSearchCommit"
         @reset-form="onResetForm"
       />
-      <div class="content-wrapper">
-        <div v-permission="PERM_USER.ACCOUNT_MANAGE">
-          <el-button type="primary" @click="openAddSingleDrawer">
-            <template #icon>
-              <el-icon>
-                <Plus />
-              </el-icon>
-            </template>
-            添加用户
-          </el-button>
-
-          <el-button color="#1890FF" @click="openAddMultipleDrawer" style="margin-left: 18px" plain>
-            <template #icon>
-              <el-icon>
-                <DocumentAdd />
-              </el-icon>
-            </template>
-            批量导入
-          </el-button>
-        </div>
+      <div v-permission="PERM_USER.ACCOUNT_MANAGE" class="toolbar">
+        <el-button type="primary" @click="openAddSingleDrawer">
+          <template #icon>
+            <el-icon>
+              <Plus />
+            </el-icon>
+          </template>
+          添加用户
+        </el-button>
+
+        <el-button color="#1890FF" @click="openAddMultipleDrawer" style="margin-left: 18px" plain>
+          <template #icon>
+            <el-icon>
+              <DocumentAdd />
+            </el-icon>
+          </template>
+          批量导入
+        </el-button>
+      </div>
 
-        <el-table :data="userList" row-key="id" style="margin-top: 10px">
+      <div class="table-wrapper">
+        <el-table :data="userList" row-key="id" height="100%">
           <el-table-column label="工号" prop="staffNo" width="200">
             <template #default="scope">
               <div>
@@ -61,7 +61,7 @@
           </el-table-column>
           <el-table-column label="姓名" prop="realname" width="200" />
           <el-table-column label="手机" prop="mobile" width="200" />
-          <el-table-column label="状态" prop="isDisabled" width="200">
+          <el-table-column label="状态" prop="isDisabled" width="120">
             <template #default="scope">
               <div>
                 <el-tag :type="!scope.row.isDisabled ? 'success' : 'danger'">
@@ -70,7 +70,7 @@
               </div>
             </template>
           </el-table-column>
-          <el-table-column label="角色" prop="roleList" width="240">
+          <el-table-column label="角色" prop="roleList">
             <template #default="scope">
               <div>
                 {{ tranformRoleList(scope.row.roleList) }}
@@ -90,19 +90,9 @@
             <template #default="scope">
               <el-space v-if="scope.row.roleType !== RoleTypeEnum.SUPER_ADMIN">
                 <div class="el-space el-space--horizontal">
-                  <!-- <div
-                  class="el-space__item"
-                  @click="handleEdit(scope.row)"
-                  v-permission="{ action: [PERM_USER.ACCOUNT_EDIT] }"
-                > -->
                   <div class="el-space__item" @click="handleEdit(scope.row)" v-permission="PERM_USER.ACCOUNT_MANAGE">
                     <div><img :src="editIcon" class="el-tooltip__trigger" /></div>
                   </div>
-                  <!-- <div
-                  class="el-space__item"
-                  @click="handleDelete(scope.row)"
-                  v-permission="{ action: [PERM_USER.ACCOUNT_DELETE] }"
-                > -->
                   <div class="el-space__item" @click="handleDelete(scope.row)" v-permission="PERM_USER.ACCOUNT_MANAGE">
                     <div><img :src="deleteIcon" class="el-tooltip__trigger" /></div>
                   </div>
@@ -118,20 +108,20 @@
             </template>
           </el-table-column>
         </el-table>
-
-        <section class="paginationPosition">
-          <el-pagination
-            background
-            :layout="DEFAULT_PAGINATION_LAYOUT"
-            :page-sizes="PAGE_SIZE_CONFIG"
-            :total="total"
-            v-model:page-size="params.pageSize"
-            v-model:current-page="params.pageNumber"
-            @change="loadPageData"
-          />
-        </section>
       </div>
 
+      <section class="paginationPosition">
+        <el-pagination
+          background
+          :layout="DEFAULT_PAGINATION_LAYOUT"
+          :page-sizes="PAGE_SIZE_CONFIG"
+          :total="total"
+          v-model:page-size="params.pageSize"
+          v-model:current-page="params.pageNumber"
+          @change="loadPageData"
+        />
+      </section>
+
       <CreateDrawer
         ref="createDrawerRef"
         :title="drawerTitle"
@@ -346,25 +336,36 @@
 <style lang="scss" scoped>
   .user-page {
     position: relative;
-    /* height: calc(100vh - 64px - 12px); */
-    background-color: #ffffff;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
   }
 
-  .content-wrapper {
-    padding: 20px;
-    padding-top: 0;
+  .toolbar {
+    margin-bottom: 20px;
+    display: flex;
+    flex-shrink: 0;
+  }
+
+  .table-wrapper {
+    flex: 1;
+    overflow: hidden;
+    min-height: 0;
   }
 
-  .user-list {
-    padding: 0 21px;
+  .paginationPosition {
+    flex-shrink: 0;
+    margin-top: 20px;
   }
 
   .add-popover {
     position: absolute;
     width: 593px;
     height: 435px;
-    left: 50%;
-    top: 50%;
+    left: 45%;
+    top: 45%;
     margin-top: -218px;
     margin-left: -297px;
     z-index: 99;