eas_webadmin/src/views/management/role/index.vue

<template>
  <div class="h-full overflow-hidden">
    <n-card title="权限管理" :bordered="false" class="rounded-16px shadow-sm">
      <n-data-table :columns="columns" :data="tableData" :pagination="pagination" />
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { Ref } from 'vue';
import type { DataTableColumns, PaginationProps } from 'naive-ui';
import { query } from '~/src/service/api/user';
import type { QueryParams } from '~/src/service/api/user';

const tableData = ref<QueryParams[]>([]);
const pagination: PaginationProps = ref({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 50]
  // onChange: (page: number) => {
  //   // 处理页码变化
  // },
  // onUpdatePageSize: (pageSize: number) => {
  //   // 处理每页显示数量变化
  // }
}).value;

async function getTableData() {
  const pageNum = pagination.page as number; // 页码
  const pageSize = pagination.pageSize as number; // 当前所在数
  const params: QueryParams = {};

  query(pageNum, pageSize, params).then(res => {
    tableData.value = res.data as [];
  });
}

const columns: Ref<DataTableColumns<QueryParams>> = ref([
  {
    type: 'selection',
    align: 'center'
  },
  {
    key: 'name',
    title: '部门名称',
    align: 'center'
  },
  {
    key: 'description',
    title: '部门地址',
    align: 'center'
  },
  {
    key: 'isActive',
    title: '是否激活',
    align: 'center',
    render: (row: QueryParams) => {
      return row.isActive ? '是' : '否';
    }
  },
  {
    key: 'createTime',
    title: '创建时间',
    align: 'center'
  },
  {
    key: 'modifyTime',
    title: '修改时间',
    align: 'center'
  },
  {
    key: 'createUid',
    title: '创建用户ID',
    align: 'center'
  },
  {
    key: 'disabled',
    title: '状态',
    align: 'center'
  }
]) as Ref<DataTableColumns<QueryParams>>;

function init() {
  getTableData();
}

// 初始化
init();
</script>