分页

src/common/utils/http-util.ts

@@ -1,7 +1,4 @@
-import {
+import { serverBaseUrl } from '@/common'
-  closeUrl,
-  serverBaseUrl,
-} from '@/common'
 import axios, {
   type AxiosRequestConfig,
   type AxiosResponse,
@@ -26,7 +23,7 @@ export interface R<T = any> {
 }
 
 type AxiosConfig = Pick<AxiosRequestConfig, 'headers' | 'params' | 'responseType'>
-const closeUrls = closeUrl.split(',')
+// const closeUrls = closeUrl.split(',')
 // type ParamsSerializerType = Extract<AxiosRequestConfig['paramsSerializer'], any>;
 
 /**
@@ -124,9 +121,9 @@ httpUtil.interceptors.response.use(
  * @param disposeErr 是否处理错误响应，默认-->true
  */
 export function get<T = any>(url: string, params?: any, disposeErr: boolean = true) {
-  if (closeUrls.includes(url)) {
+  /* if (closeUrls.includes(url)) {
     return Promise.reject({code: 0, success: true, msg: '', message: '', data: null} as R<T>)
-  }
+   } */
   return httpUtil.get<R<T>>(url, {params, paramsSerializer, responseType: 'json'})
     .then(({data}) => data)
     .catch(res => {
@@ -144,9 +141,9 @@ export function get<T = any>(url: string, params?: any, disposeErr: boolean = tr
  * @param disposeErr 是否处理错误响应，默认-->true
  */
 export function post<T>(url: string, body?: any, params?: any, disposeErr: boolean = true) {
-  if (closeUrls.includes(url)) {
+  /* if (closeUrls.includes(url)) {
     return Promise.reject({code: 0, success: true, msg: '', message: '', data: null} as R<T>)
-  }
+   } */
   return httpUtil.post<R<T>>(url, body, {responseType: 'json', params})
     .then(({data}) => data)
     .catch(res => {

src/pages/sys/dict/DictCategory.vue

@@ -50,11 +50,14 @@
       </ElTableColumn>
     </ElTable>
     <ElPagination
-      :page-size="pagination.size"
+      v-model:current-page="searchForm.current"
-      :total="pagination.total"
+      v-model:page-size="searchForm.size"
-      class="pagination"
+      :hide-on-single-page="false"
-      layout="prev, pager, next"
+      :page-sizes="[10, 20, 50, 100, 500]"
-      @change="pageChangeHandler"/>
+      :teleported="false"
+      :total="totalCount"
+      layout="->, sizes, total, prev, pager, next"
+      @change="paging"/>
     <DictForm ref="dictForm" @edit-succ="paging"/>
   </div>
 </template>
@@ -63,22 +66,16 @@ import DictApi from '@/pages/sys/dict/dict-api.ts'
 import { elIcons } from '@/common/element/element.ts'
 import DictForm from '@/pages/sys/dict/DictForm.vue'
 
+const totalCount = ref(0)
 const tableData = ref<DictTypes.SearchDictResult[]>([])
-const searchForm = reactive<DictTypes.SearchDictParam>(
+const searchForm = ref<DictTypes.SearchDictParam>({
-  {
+  orders: 'dict_key,id',
-    orders: 'dict_key,id',
-    current: 1,
-    size: 20,
-  })
-const searching = ref(false)
-const deling = ref(false)
-const dictFormIns = useTemplateRef<InstanceType<typeof DictForm>>('dictForm')
-const pagination = reactive<G.Pagination>({
-  total: 0,
-  pages: 0,
   current: 1,
   size: 20,
 })
+const searching = ref(false)
+const deling = ref(false)
+const dictFormIns = useTemplateRef<InstanceType<typeof DictForm>>('dictForm')
 
 function showDialog(data?: DictTypes.SearchDictResult) {
   dictFormIns.value?.open(data)
@@ -117,21 +114,20 @@ function pageChangeHandler(currentPage: number, pageSize: number) {
 }
 
 function reset() {
-  Object.assign(searchForm, {})
+  searchForm.value = {
+    orders: 'dict_key,id',
+    current: 1,
+    size: 20,
+  }
   paging()
 }
 
 function paging() {
   searching.value = true
-  DictApi.paging(searchForm)
+  DictApi.paging(searchForm.value)
     .then(res => {
+      totalCount.value = res.data?.total ?? 0
       tableData.value = res.data?.records ?? []
-      Object.assign(pagination, {
-        total: res.data?.total ?? 0,
-        pages: res.data?.pages ?? 0,
-        current: res.data?.current ?? 1,
-        size: res.data?.size ?? 20,
-      })
     })
     .finally(() => {
       searching.value = false
@@ -145,6 +141,7 @@ onMounted(() => {
 <style lang="stylus" scoped>
 .table-list {
   flex 1;
+  margin 0 0 20px 0
   width 100%
 
   :deep(.table-header) {

src/pages/sys/endpoint/Endpoint.vue

@@ -51,11 +51,14 @@
       </ElTableColumn>
     </ElTable>
     <ElPagination
-      :page-size="pagination.size"
+      v-model:current-page="searchForm.current"
-      :total="pagination.total"
+      v-model:page-size="searchForm.size"
-      class="pagination"
+      :hide-on-single-page="false"
-      layout="prev, pager, next"
+      :page-sizes="[10, 20, 50, 100, 500]"
-      @change="pageChangeHandler"/>
+      :teleported="false"
+      :total="totalCount"
+      layout="->, sizes, total, prev, pager, next"
+      @change="paging"/>
     <EndpointForm ref="endpointForm" @edit-succ="paging"/>
   </Page>
 </template>
@@ -66,8 +69,9 @@ import EndpointForm from '@/pages/sys/endpoint/EndpointForm.vue'
 import Page from '@/components/page/Page.vue'
 import { elIcons } from '@/common/element/element.ts'
 
+const totalCount = ref(0)
 const tableData = ref<EndpointTypes.SearchEndpointResult[]>([])
-const searchForm = reactive<EndpointTypes.SearchEndpointParam>({
+const searchForm = ref<EndpointTypes.SearchEndpointParam>({
   current: 1,
   size: 20,
 })
@@ -75,17 +79,6 @@ const searching = ref(false)
 const deling = ref(false)
 const showSearchForm = ref(true)
 const endpointFormIns = useTemplateRef<InstanceType<typeof EndpointForm>>('endpointForm')
-const pagination = reactive<G.Pagination>({
-  total: 0,
-  current: 1,
-  size: 1,
-})
-
-function pageChangeHandler(currentPage: number, pageSize: number) {
-  searchForm.current = currentPage
-  searchForm.size = pageSize
-  paging()
-}
 
 function showDialog(data?: EndpointTypes.SearchEndpointResult) {
   endpointFormIns.value?.open(data)
@@ -112,14 +105,18 @@ function addHandler() {
 }
 
 function reset() {
-  Object.assign(searchForm, {})
+  searchForm.value = {
+    current: 1,
+    size: 20,
+  }
   paging()
 }
 
 function paging() {
   searching.value = true
-  EndpointApi.paging(searchForm)
+  EndpointApi.paging(searchForm.value)
     .then(res => {
+      totalCount.value = res.data?.total ?? 0
       tableData.value = res.data?.records ?? []
     })
     .finally(() => {
@@ -136,6 +133,7 @@ onMounted(() => {
 <style lang="stylus" scoped>
 .table-list {
   flex 1;
+  margin 0 0 20px 0
   width 100%
 
   :deep(.table-header) {

src/pages/sys/gen/db-table/DbTable.vue

@@ -32,11 +32,14 @@
       </ElTableColumn>
     </ElTable>
     <ElPagination
-      :page-size="pagination.size"
+      v-model:current-page="searchForm.current"
-      :total="pagination.total"
+      v-model:page-size="searchForm.size"
-      class="pagination"
+      :hide-on-single-page="false"
-      layout="prev, pager, next"
+      :page-sizes="[10, 20, 50, 100, 500]"
-      @change="pageChangeHandler"/>
+      :teleported="false"
+      :total="totalCount"
+      layout="->, sizes, total, prev, pager, next"
+      @change="paging"/>
     <CodePreview ref="codePreview"/>
   </Page>
 </template>
@@ -46,8 +49,9 @@ import { elIcons } from '@/common/element/element.ts'
 import CodePreview from '@/pages/sys/gen/db-table/CodePreview.vue'
 import DbTableApi from '@/pages/sys/gen/db-table/db-table-api.ts'
 
+const totalCount = ref(0)
 const tableData = ref<DbTableTypes.TableInfo[]>([])
-const searchForm = reactive<DbTableTypes.SearchTplParam>({
+const searchForm = ref<DbTableTypes.SearchTplParam>({
   current: 1,
   size: 20,
 })
@@ -55,19 +59,6 @@ const searching = ref(false)
 const showSearchForm = ref(true)
 const codePreviewIns = useTemplateRef<InstanceType<typeof CodePreview>>('codePreview')
 
-const pagination = reactive<G.Pagination>({
-  total: 0,
-  pages: 0,
-  current: 1,
-  size: 20,
-})
-
-function pageChangeHandler(currentPage: number, pageSize: number) {
-  searchForm.current = currentPage
-  searchForm.size = pageSize
-  paging()
-}
-
 function showDialog(data?: DbTableTypes.TableInfo) {
   codePreviewIns.value?.open(data)
 }
@@ -77,22 +68,20 @@ function previewHandler({row}: { row: DbTableTypes.TableInfo }) {
 }
 
 function reset() {
-  Object.assign(searchForm, {})
+  searchForm.value = {
+    current: 1,
+    size: 20,
+  }
   paging()
 }
 
 
 function paging() {
   searching.value = true
-  DbTableApi.tablePaing(searchForm)
+  DbTableApi.tablePaing(searchForm.value)
     .then(res => {
+      totalCount.value = res.data?.total ?? 0
       tableData.value = res.data.records ?? []
-      Object.assign(pagination, {
-        total: res.data?.total ?? 0,
-        pages: res.data?.pages ?? 0,
-        current: res.data?.current ?? 1,
-        size: res.data?.size ?? 20,
-      })
     })
     .finally(() => {
       searching.value = false
@@ -106,6 +95,7 @@ onMounted(() => {
 <style lang="stylus" scoped>
 .table-list {
   flex 1;
+  margin 0 0 20px 0
   width 100%
 
   :deep(.table-header) {

src/pages/sys/gen/tpl/Tpl.vue

@@ -72,11 +72,14 @@
       </ElTableColumn>
     </ElTable>
     <ElPagination
-      :page-size="pagination.size"
+      v-model:current-page="searchForm.current"
-      :total="pagination.total"
+      v-model:page-size="searchForm.size"
-      class="pagination"
+      :hide-on-single-page="false"
-      layout="prev, pager, next"
+      :page-sizes="[10, 20, 50, 100, 500]"
-      @change="pageChangeHandler"/>
+      :teleported="false"
+      :total="totalCount"
+      layout="->, sizes, total, prev, pager, next"
+      @change="paging"/>
     <TplForm ref="tplForm" @edit-succ="paging"/>
   </Page>
 </template>
@@ -86,8 +89,9 @@ import Page from '@/components/page/Page.vue'
 import { elIcons } from '@/common/element/element.ts'
 import TplForm from '@/pages/sys/gen/tpl/TplForm.vue'
 
+const totalCount = ref(0)
 const tableData = ref<TplTypes.SearchTplResult[]>([])
-const searchForm = reactive<TplTypes.SearchTplParam>({
+const searchForm = ref<TplTypes.SearchTplParam>({
   current: 1,
   size: 20,
   orders: 'lang,tpl_name',
@@ -103,12 +107,6 @@ const pagination = reactive<G.Pagination>({
   size: 1,
 })
 
-function pageChangeHandler(currentPage: number, pageSize: number) {
-  searchForm.current = currentPage
-  searchForm.size = pageSize
-  paging()
-}
-
 function showDialog(data?: TplTypes.SearchTplResult) {
   tplFormIns.value?.open(data)
 }
@@ -134,14 +132,20 @@ function addHandler() {
 }
 
 function reset() {
-  Object.assign(searchForm, {})
+  searchForm.value = {
+    current: 1,
+    size: 20,
+    orders: 'lang,tpl_name',
+    tpl: {},
+  }
   paging()
 }
 
 function paging() {
   searching.value = true
-  TplApi.paging(searchForm)
+  TplApi.paging(searchForm.value)
     .then(res => {
+      totalCount.value = res.data?.total ?? 0
       tableData.value = res.data?.records ?? []
     })
     .finally(() => {
@@ -156,6 +160,7 @@ onMounted(() => {
 <style lang="stylus" scoped>
 .table-list {
   flex 1;
+  margin 0 0 20px 0
   width 100%
 
   :deep(.table-header) {

src/pages/sys/menus/Menus.vue

@@ -94,7 +94,7 @@ import AIcon from '@/components/a-icon/AIcon.tsx'
 import type { TableInstance } from 'element-plus'
 
 const tableData = ref<MenuTypes.SysMenu[]>([])
-const searchForm = reactive<MenuTypes.SearchForm>({})
+const searchForm = ref<MenuTypes.SearchForm>({})
 const searching = ref(false)
 const showSearchForm = ref(true)
 const menuFormIns = useTemplateRef<InstanceType<typeof MenuForm>>('menuForm')
@@ -104,7 +104,6 @@ const deling = ref(false)
 function showDialog(data?: MenuTypes.MenuForm) {
   menuFormIns.value?.open(data)
 }
-
 function delHandler({row}: { row: MenuTypes.MenuForm, }) {
   deling.value = true
 
@@ -125,7 +124,7 @@ function addHandler() {
 }
 
 function reset() {
-  Object.assign(searchForm, {})
+  searchForm.value = {}
   listAll()
 }
 
@@ -135,7 +134,7 @@ function editSuccHandler() {
 
 function listAll() {
   searching.value = true
-  MenuApi.listAll({...searchForm, pid: '0'})
+  MenuApi.listAll({...searchForm.value, pid: '0'})
     .then(res => {
       tableData.value = []
       tableData.value = res.data?.map(it => {
@@ -152,7 +151,7 @@ function listAll() {
 function treeLoad(row: MenuTypes.SysMenu, expanded: boolean, resolve: (data: MenuTypes.SysMenu[]) => void) {
   if (resolve == null && !expanded) return
   searching.value = true
-   MenuApi.listAll({...searchForm, pid: row.id})
+  MenuApi.listAll({...searchForm.value, pid: row.id})
    .then(res => {
      if (resolve!=null){
        resolve(res.data?.map(it => {

src/pages/sys/role/Role.vue

@@ -60,6 +60,15 @@
         </template>
       </ElTableColumn>
     </ElTable>
+    <ElPagination
+      v-model:current-page="searchForm.current"
+      v-model:page-size="searchForm.size"
+      :hide-on-single-page="false"
+      :page-sizes="[10, 20, 50, 100, 500]"
+      :teleported="false"
+      :total="totalCount"
+      layout="->, sizes, total, prev, pager, next"
+      @change="paging"/>
     <RoleForm ref="roleForm" @edit-succ="paging"/>
     <BindRes ref="bindRes"/>
   </Page>
@@ -72,8 +81,9 @@ import RoleForm from '@/pages/sys/role/RoleForm.vue'
 import { ElMessage } from 'element-plus'
 import BindRes from '@/pages/sys/role/BindRes.vue'
 
+const totalCount = ref(0)
 const tableData = ref<RoleTypes.SearchRoleResult[]>([])
-const searchForm = reactive<RoleTypes.SearchRoleParam>({
+const searchForm = ref<RoleTypes.SearchRoleParam>({
   current: 1,
   size: 20,
 })
@@ -120,14 +130,20 @@ function addHandler() {
 }
 
 function reset() {
-  Object.assign(searchForm, {})
+  searchForm.value = {
+    current: 1,
+    size: 20,
+  }
   paging()
 }
 
 function paging() {
   searching.value = true
-  RoleApi.paging(searchForm)
+  RoleApi.paging({
+    ...searchForm.value,
+  })
     .then(res => {
+      totalCount.value = res.data?.total ?? 0
       tableData.value = res.data?.records ?? []
     })
     .finally(() => {
@@ -142,6 +158,7 @@ onMounted(() => {
 <style lang="stylus" scoped>
 .table-list {
   flex 1;
+  margin 0 0 20px 0
   width 100%
 
   :deep(.table-header) {

src/pages/sys/sn-config/SnConfig.vue

@@ -13,38 +13,26 @@ function addHandler() {
 }
 
 function reset() {
-  Object.assign(searchForm, {})
+  searchForm.value = {}
   searchHandler()
 }
 
-const searchForm = reactive<SnConfigTypes.SearchSnConfigParam>({
+const searchForm = ref<SnConfigTypes.SearchSnConfigParam>({
   snname: undefined,
   sncode: undefined,
-})
-const pagination = reactive<G.Pagination>({
-  total: 0,
-  pages: 0,
   current: 1,
   size: 20,
 })
 const searching = ref(false)
 
-function pageChangeHandler(currentPage: number, pageSize: number) {
+const totalCount = ref(0)
-  searchForm.current = currentPage
-  searchForm.size = pageSize
-  searchHandler()
-}
-
-
 const datasource = ref<SnConfigTypes.SnConfigDetail[]>([])
 
 function searchHandler() {
   searching.value = true
-  SnConfigApi.paging(searchForm, {...pagination})
+  SnConfigApi.paging(searchForm.value)
     .then((res) => {
-      pagination.size = res.data.size
+      totalCount.value = res.data?.total ?? 0
-      pagination.total = res.data.total
-      pagination.pages = res.data.pages
       datasource.value = res.data.records.map((it) => ({
         key: it.id,
         ...it,
@@ -135,18 +123,69 @@ onMounted(() => {
 
     </ElTable>
     <ElPagination
-      :page-size="pagination.size"
+      v-model:current-page="searchForm.current"
-      :total="pagination.total"
+      v-model:page-size="searchForm.size"
-      class="pagination"
+      :hide-on-single-page="false"
-      layout="prev, pager, next"
+      :page-sizes="[10, 20, 50, 100, 500]"
-      @change="pageChangeHandler"/>
+      :teleported="false"
+      :total="totalCount"
+      layout="->, sizes, total, prev, pager, next"
+      @change="searchHandler"/>
     <SnConfigForm ref="snConfigForm" @close="searchHandler"/>
   </Page>
 </template>
 
 <style lang="stylus" scoped>
-.pagination {
+.table-list {
-  justify-content: end;
+  flex 1;
-  margin: 8px;
+  margin 0 0 20px 0
+  width 100%
+
+  :deep(.table-header) {
+    color #454C59
+
+    th {
+      background-color #EDF1F7
+      font-weight 500
+      position relative
+
+      & > div {
+        display flex
+        gap 5px
+        align-items center
+      }
+
+      &:not(:first-child) > div::before {
+        position: absolute;
+        top: 50%;
+        left: 1px;
+        width: 1px;
+        background-color: #D3D7DE;
+        transform: translateY(-50%);
+        content: "";
+        height 50%
+      }
+    }
+  }
+
+  :deep(.table-cell) {
+    color #2F3540
+  }
+
+  .action-btn {
+    width 100%
+    display flex
+    flex-wrap wrap
+
+    & > button {
+      margin 0
+    }
+  }
+}
+
+.tool-bar {
+  display flex
+  justify-content space-between
+  margin 0 0 20px 0
 }
 </style>

src/pages/sys/sn-config/sn-config-api.ts

@@ -4,11 +4,8 @@ import {
 } from '@/common/utils/http-util.ts'
 
 export default {
-  paging(data: SnConfigTypes.SearchSnConfigParam, {size, current, orders}: G.PageParam) {
+  paging(data: SnConfigTypes.SearchSnConfigParam) {
-    return get<G.PageResult<SnConfigTypes.SnConfigDetail>>('/sys_sn_config/paging', {
+    return get<G.PageResult<SnConfigTypes.SnConfigDetail>>('/sys_sn_config/paging', data)
-      size, current, orders,
-      ...data,
-    })
   },
   modify(data: SnConfigTypes.ModifySnConfigParam) {
     return post('/sys_sn_config/modify', data)

src/pages/sys/user/User.vue

@@ -77,6 +77,15 @@
         </template>
       </ElTableColumn>
     </ElTable>
+    <ElPagination
+      v-model:current-page="searchForm.current"
+      v-model:page-size="searchForm.size"
+      :hide-on-single-page="false"
+      :page-sizes="[10, 20, 50, 100, 500]"
+      :teleported="false"
+      :total="totalCount"
+      layout="->, sizes, total, prev, pager, next"
+      @change="paging"/>
     <UserForm ref="userForm" @edit-succ="paging"/>
     <BindRole ref="bindRole"/>
   </Page>
@@ -94,8 +103,9 @@ import AppApi from '@/common/app/app-api.ts'
 import BindRole from '@/pages/sys/user/BindRole.vue'
 import ClientUtil from '@/common/utils/client-util.ts'
 
+const totalCount = ref(0)
 const tableData = ref<UserTypes.SearchUserResult[]>([])
-const searchForm = reactive<UserTypes.SearchUserParam>({
+const searchForm = ref<UserTypes.SearchUserParam>({
   current: 1,
   size: 20,
 })
@@ -153,7 +163,10 @@ function addHandler() {
 }
 
 function reset() {
-  Object.assign(searchForm, {})
+  searchForm.value = {
+    current: 1,
+    size: 20,
+  }
   paging()
 }
 
@@ -185,8 +198,9 @@ function disabledUserHandler(val: string | number | boolean, id: string) {
 
 function paging() {
   searching.value = true
-  UserApi.paging(searchForm)
+  UserApi.paging(searchForm.value)
     .then(res => {
+      totalCount.value = res.data?.total ?? 0
       tableData.value = res.data?.records ?? []
       tableData.value.map(it => {
         it.account.clients = ClientUtil.getClients(it.account.clientCode!).map(it => it.val)
@@ -205,6 +219,7 @@ onMounted(() => {
 <style lang="stylus" scoped>
 .table-list {
   flex 1;
+  margin 0 0 20px 0
   width 100%
 
   :deep(.table-header) {