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[]>([]);

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) => {
			console.log(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>>;

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

function init() {
	getTableData();
}

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