.1502411993651747:1a2e7b841e3d7a3f10c36c867160c50f_69effbdc07d6136ac82f8471.69f0080e07d6136ac82f860c.69f0080d09579236246839cf:Trae CN.T(2026/4/28 09:06:22)

.vscode/settings.json

@@ -112,7 +112,7 @@
     "lintstagedrc",
     "tailwindcss",
     "sider",
-    "pnpm",
+    "pnpm"
   ],
   // 控制相关文件嵌套展示
   "explorer.fileNesting.enabled": true,
@@ -128,7 +128,11 @@
     "vite.config.js": "tsconfig.json,tailwind.config.js,jsconfig.json, .cz-config.js"
   },
   "terminal.integrated.scrollback": 10000,
-  "cSpell.enableFiletypes": [
-    "!tailwindcss"
+  "cSpell.enableFiletypes": ["!tailwindcss"],
+  "i18n-ally.localesPaths": [
+    "src/language",
+    "src/utils/locales",
+    "src/views/home/locales",
+    "src/views/login/locales"
   ]
 }

src/views/authority/admin/index.vue

@@ -6,12 +6,23 @@
       :shadow="defaultData.cardShadow"
     >
       <div class="operate-container">
-        <div>
+        <div
+          class="_flex _flex-align-center"
+          style="cursor: pointer"
+          @click="isSearchExpanded = !isSearchExpanded"
+        >
           <i class="el-icon-search"></i>
           <span>筛选搜索</span>
+          <el-icon class="ml-2" :class="{ 'is-rotate': isSearchExpanded }">
+            <ArrowDown />
+          </el-icon>
         </div>
         <div>
-          <el-button style="float: right" type="primary" @click="getList()">
+          <el-button
+            style="float: right"
+            type="primary"
+            @click="handleSearch()"
+          >
             查询搜索
           </el-button>
           <el-button
@@ -22,20 +33,23 @@
           </el-button>
         </div>
       </div>
-      <div style="margin-top: 15px">
-        <el-form :inline="true" :model="powerfulTableData.listQuery">
-          <div class="screenForm">
-            <el-form-item label="名称：">
-              <el-input
-                v-model="powerfulTableData.listQuery.username"
-                placeholder="请输入账号名"
-                style="width: 80%"
-                clearable
-              />
-            </el-form-item>
-          </div>
-        </el-form>
-      </div>
+      <transition name="el-zoom-in-top">
+        <div v-show="isSearchExpanded" style="margin-top: 15px">
+          <el-form :inline="true" :model="powerfulTableData.listQuery">
+            <div class="screenForm">
+              <el-form-item label="名称：">
+                <el-input
+                  v-model="powerfulTableData.listQuery.username"
+                  placeholder="请输入账号名"
+                  style="width: 80%"
+                  clearable
+                  @keyup.enter="handleSearch"
+                />
+              </el-form-item>
+            </div>
+          </el-form>
+        </div>
+      </transition>
     </el-card>
 
     <el-card :shadow="defaultData.cardShadow">
@@ -45,11 +59,37 @@
           <span>数据列表</span>
         </div>
 
-        <!-- <div>
-					<el-button type="primary" class="btn-add">
-						添加
-					</el-button>
-				</div> -->
+        <div class="table-toolbar">
+          <el-popover placement="bottom" width="200" trigger="click">
+            <template #reference>
+              <el-button type="default" size="small">
+                <el-icon><Setting /></el-icon>
+                列设置
+                <el-icon class="el-icon--right"><ArrowDown /></el-icon>
+              </el-button>
+            </template>
+            <div class="column-settings">
+              <el-checkbox
+                v-for="col in columnOptions"
+                :key="col.value"
+                v-model="columnVisibility[col.value]"
+                :label="col.value"
+                style="display: flex; margin-bottom: 8px"
+              >
+                {{ col.label }}
+              </el-checkbox>
+              <el-divider style="margin: 10px 0" />
+              <el-button
+                type="primary"
+                size="small"
+                @click="resetColumns"
+                style="width: 100%"
+              >
+                重置列
+              </el-button>
+            </div>
+          </el-popover>
+        </div>
       </div>
 
       <div>
@@ -61,8 +101,12 @@
           :tableName="'menuTable'"
           :pagination-property="{
             total: powerfulTableData.total,
+            pageSize: powerfulTableData.listQuery.pageSize,
+            currentPage: powerfulTableData.listQuery.pageNum,
           }"
-          @size-change="getList"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          @sort-change="handleSortChange"
           @component-event="handleComponentChange"
           @btn-click="handleBtnClick"
         >
@@ -103,20 +147,36 @@
 <script lang="ts" setup>
 import { getUserList, userRemove } from '@/api/logins'
 import { getRoleList } from '@/api/ums/role'
-import { useData, RowType } from './indexData'
+import { useData, RowType, defaultData } from './indexData'
 import { Handlers } from 'el-plus-powerful-table-ts'
 import { ElMessage } from 'element-plus'
 import { useUserStore } from '@/stores'
+import { ArrowDown, Setting } from '@element-plus/icons-vue'
+import { onMounted, onBeforeUnmount } from 'vue'
+import { useRouter, onBeforeRouteLeave } from 'vue-router'
 
-const { header, switchs, powerfulTableData, currentForm, roleLists } = useData()
+const {
+  header,
+  switchs,
+  powerfulTableData,
+  currentForm,
+  roleLists,
+  isSearchExpanded,
+  columnVisibility,
+  columnOptions,
+  resetColumns,
+  saveListState,
+} = useData()
 
 const userStore = useUserStore()
+const router = useRouter()
 
 // 获取用户列表
 const getList = () => {
   getUserList(powerfulTableData.listQuery).then((res) => {
     powerfulTableData.list = res.data.data.list
     powerfulTableData.total = res.data.data.total
+    saveListState()
   })
 }
 
@@ -127,8 +187,40 @@ const getRole = () => {
   })
 }
 
-getRole()
-getList()
+const handleSearch = () => {
+  powerfulTableData.listQuery.pageNum = 1
+  getList()
+}
+
+const handleSizeChange = (val: number) => {
+  powerfulTableData.listQuery.pageSize = val
+  getList()
+}
+
+const handleCurrentChange = (val: number) => {
+  powerfulTableData.listQuery.pageNum = val
+  getList()
+}
+
+const handleSortChange = (e: { prop: string; order: string | null }) => {
+  powerfulTableData.listQuery.sortProp = e.prop || ''
+  powerfulTableData.listQuery.sortOrder = e.order || ''
+  getList()
+}
+
+onMounted(() => {
+  getRole()
+  getList()
+})
+
+onBeforeRouteLeave((to, from, next) => {
+  saveListState()
+  next()
+})
+
+onBeforeUnmount(() => {
+  saveListState()
+})
 
 const handleComponentChange: Handlers['component-event'] = (payload) => {
   switch (payload.componentName) {
@@ -182,5 +274,42 @@ const handleResetSearch = () => {
         ''
     }
   })
+  powerfulTableData.listQuery.pageNum = 1
+  getList()
 }
 </script>
+
+<style scoped>
+.operate-container {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+._flex {
+  display: flex;
+}
+
+._flex-align-center {
+  align-items: center;
+}
+
+.ml-2 {
+  margin-left: 8px;
+}
+
+.is-rotate {
+  transform: rotate(180deg);
+  transition: transform 0.3s;
+}
+
+.el-icon {
+  transition: transform 0.3s;
+}
+
+.table-toolbar {
+  display: flex;
+  gap: 8px;
+}
+</style>