eas_webadmin/src/views/management/role/queryUser.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: () => {
    // 处理页码变化
  },
  onUpdatePageSize: () => {
    // 处理每页显示数量变化
  }
}).value;

async function getTableData() {
  const pageNum = pagination.page as number;
  const pageSize = pagination.pageSize as number;

  const params: QueryParams = {
    name: '',
    description: '',
    isActive: '',
    createTime: '',
    modifyTime: '',
    createUid: 0,
    disabled: ''
  };

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

const columns: Ref<DataTableColumns<QueryParams>> = ref([
  {
    type: 'selection',
    align: 'center'
  },
  {
    key: 'depname',
    title: '部门名称',
    align: 'center'
  },
  {
    key: 'address',
    title: '部门地址',
    align: 'center'
  },
  {
    key: 'phone',
    title: '部门电话',
    align: 'center'
  },
  {
    key: 'email',
    title: '部门电子邮箱',
    align: 'center'
  },
  {
    key: 'manager',
    title: '部门负责人',
    align: 'center'
  },
  {
    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>