fara-fe-admin/src/views/role-management/index.vue

<script setup lang="ts">

defineOptions({
  name: 'Role Management',
})
import { Plus } from '@element-plus/icons-vue'
import { ElButton, ElDialog, ElEmpty, ElInput, ElOption, ElPagination, ElSelect, ElTable, ElTableColumn, ElTag } from 'element-plus'
// import SearchForm from './components/SearchForm.vue'

import type { TAgent } from '@/types/role'
import { anycallPage } from '@/api/modules/anycallService'
import { formatDateGeneral } from '@/utils'

const tableRef = ref()
const loading = ref(false)
const router = useRouter()
const route = useRoute()

// 搜索参数
const searchParams = ref({
  name: '',
})
const dataList = ref<TAgent[]>([]);

// 从URL获取初始分页参数
const getInitialPagination = () => {
  const page = Number(route.query.page) || 1
  const size = Number(route.query.size) || 20
  return {
    total: 0,
    page: page > 0 ? page : 1,
    size: [10, 20, 50, 100].includes(size) ? size : 20,
  }
}

// 分页信息
const pagination = ref(getInitialPagination())

// 更新URL中的分页参数
const updateUrlParams = (page: number, size: number) => {
  const query = {
    ...route.query,
    page: page.toString(),
    size: size.toString(),
  }

  // 使用replace模式更新URL，避免产生历史记录
  router.replace({
    path: route.path,
    query
  })
}


const  handleCreate = ()=> {
  router.push({
    name: 'CharacterEdit',  // 使用路由名称跳转，更推荐
    params: {
      id: ''  // 传递角色ID
    }
  })
}

async function fetchList() {
  loading.value = true
  const res = await anycallPage({
    name: searchParams.value.name,
    page: pagination.value.page,
    size: pagination.value.size,
  })
  if(res.code === 0){
    dataList.value = res.data.content
    pagination.value.total = res.data.total
  }
  loading.value = false
}
function handlePageChange(page: number) {
  pagination.value.page = page
  updateUrlParams(page, pagination.value.size)
  fetchList()
}

function handleSizeChange(size: number) {
  pagination.value.size = size
  pagination.value.page = 1
  updateUrlParams(1, size)
  fetchList()
}

function handleSearch () {
  pagination.value.page = 1 // 搜索时重置到第一页
  updateUrlParams(1, pagination.value.size)
  fetchList()
}

function handleReset () {
  searchParams.value = {
    name: '',
  }
  pagination.value.page = 1 // 重置时重置到第一页
  updateUrlParams(1, pagination.value.size)
  fetchList()
}


// 监听URL参数变化，用于处理浏览器后退/前进
watch(
  () => route.query,
  (newQuery) => {
    const newPage = Number(newQuery.page) || 1
    const newSize = Number(newQuery.size) || 20

    // 只有当参数真正发生变化时才更新
    if (newPage !== pagination.value.page || newSize !== pagination.value.size) {
      pagination.value.page = newPage > 0 ? newPage : 1
      pagination.value.size = [10, 20, 50, 100].includes(newSize) ? newSize : 20
      fetchList()
    }
  },
  { deep: true }
)

onMounted(async () => {
  await fetchList()
})


</script>

<template>
  <div>
    <FaPageHeader title="Role Management" />
    <FaPageMain>
      <ElTable
        ref="tableRef" :data="dataList" stripe highlight-current-row border height="100%"
      >
        <ElTableColumn label="Role Name" prop="name" />
      </ElTable>
      <div class="p-4">
        <ElPagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.size"
          :total="pagination.total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </FaPageMain>
  </div>
</template>