eas_webadmin/src/views/management/user/indexCopy.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="tsx">
import { ref } from 'vue';
import type { Ref } from 'vue';

import type { DataTableColumns, PaginationProps } from 'naive-ui';

import { query_1 } from '~/src/service/api/user';
import type { Query_1Params } from '~/src/service/api/user';

const tableData = ref<Query_1Params[]>([]);

function setTableData(data: Query_1Params[]) {
	tableData.value = data;
}

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

	const params: Query_1Params = {
		depname: '',
		address: '',
		phone: '',
		email: '',
		manager: '',
		createTime: "",
		modifyTime: "" ,
		createUid: 0,
		disabled: '',
	};

	query_1(pageNum, pageSize, params)
		.then(response => {
			console.log(response);

			const data: Query_1Params[] = response.data as Query_1Params[]; // 使用类型断言
			setTimeout(() => {
				setTableData(data);
			}, 1000);
		})
		.catch(error => {
			// 处理错误情况
		});

}

const columns: Ref<DataTableColumns<Query_1Params>> = 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<Query_1Params>>;

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>