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  handleRecommend = (id: string) => {

}

async function fetchData() {
  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)
  fetchData()
}

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

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

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


// 监听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
      fetchData()
    }
  },
  { deep: true }
)

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


</script>

<template>
  <div class="absolute-container">
    <FaPageHeader title="Role Management" />
    <FaPageMain class="flex-1 overflow-auto" main-class="flex-1 flex flex-col overflow-auto">
      <ElTable
        ref="tableRef" :data="dataList" stripe highlight-current-row border height="100%"
      >
        <ElTableColumn label="Role Name" prop="name" />
        <ElTableColumn label="Avatar" prop="photo">
          <template #default="{row}">
            <ElImage :src="row.photo" fit="cover" class="w-12 h-12 rounded" />
          </template>
        </ElTableColumn>
        <ElTableColumn label="callings" prop="callings" />
        <ElTableColumn label="prompt" prop="prompt" min-width="340">
          <template #default="{row}">
            <ElTag type="info" v-for="(tag, index) in row.prompt.split(/\,|\，/)" :key="index" class="mb-1 mr-1">
              <div :title="tag">{{ tag }}</div>
            </ElTag>
          </template>
        </ElTableColumn>
        <ElTableColumn label="Language" prop="language" />
        <ElTableColumn label="voiceName" prop="voiceName" />
        <ElTableColumn fixed="right" label="操作" min-width="200">
          <template #default="{row}">
            <ElButton link type="primary" size="small" @click="()=> handleRecommend(row.id)">
              推荐
            </ElButton>
          </template>
        </ElTableColumn>
      </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>
<style scoped>
.absolute-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
</style>