|
@@ -1,7 +1,102 @@
|
|
|
<template>
|
|
|
- <div>权限管理</div>
|
|
|
+ <div class="h-full overflow-hidden">
|
|
|
+ <n-card title="权限管理" :bordered="false" class="rounded-16px shadow-sm">
|
|
|
+ <n-space class="pb-12px" justify="space-between">
|
|
|
+ <n-space>
|
|
|
+ <n-button type="primary">
|
|
|
+ <icon-ic-round-plus class="mr-4px text-20px" />
|
|
|
+ 新增
|
|
|
+ </n-button>
|
|
|
+ <n-button type="error">
|
|
|
+ <icon-ic-round-delete class="mr-4px text-20px" />
|
|
|
+ 删除
|
|
|
+ </n-button>
|
|
|
+ <n-button type="success">
|
|
|
+ <icon-uil:export class="mr-4px text-20px" />
|
|
|
+ 导出Excel
|
|
|
+ </n-button>
|
|
|
+ </n-space>
|
|
|
+ <n-space align="center" :size="18">
|
|
|
+ <n-button size="small" type="primary">
|
|
|
+ <icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': false }" />
|
|
|
+ 刷新表格
|
|
|
+ </n-button>
|
|
|
+ <column-setting v-model:columns="columns" />
|
|
|
+ </n-space>
|
|
|
+ </n-space>
|
|
|
+ <n-data-table :columns="columns" :data="tableData" :pagination="pagination" />
|
|
|
+ </n-card>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
-<script setup lang="tsx"></script>
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, reactive } from 'vue';
|
|
|
+import type { Ref } from 'vue';
|
|
|
+import type { DataTableColumns, PaginationProps } from 'naive-ui';
|
|
|
+import { query } from '../../../service/api/user';
|
|
|
+import type { QueryParams } from '~/src/service/api/user';
|
|
|
|
|
|
+const queryInfo: QueryParams = {};
|
|
|
+
|
|
|
+const pagination: PaginationProps = reactive({
|
|
|
+ page: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ showSizePicker: true,
|
|
|
+ pageSizes: [10, 15, 20, 25, 30],
|
|
|
+ onChange: (page: number) => {
|
|
|
+ pagination.page = page;
|
|
|
+ },
|
|
|
+ onUpdatePageSize: (pageSize: number) => {
|
|
|
+ pagination.pageSize = pageSize;
|
|
|
+ pagination.page = 1;
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const tableData = ref<QueryParams[] | null>([]);
|
|
|
+
|
|
|
+query(pagination.page, pagination.pageSize, queryInfo).then(result => {
|
|
|
+ tableData.value = result.data as [];
|
|
|
+});
|
|
|
+const columns: Ref<DataTableColumns<QueryParams>> = ref([
|
|
|
+ {
|
|
|
+ type: 'selection',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'id',
|
|
|
+ title: 'ID',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'name',
|
|
|
+ title: '名称',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'description',
|
|
|
+ title: '描述',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'isActive',
|
|
|
+ title: '是否激活',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'modifyTime',
|
|
|
+ title: '修改时间',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'createUid',
|
|
|
+ title: '创建用户ID',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'disabled',
|
|
|
+ title: '状态',
|
|
|
+ align: 'center'
|
|
|
+ }
|
|
|
+]) as Ref<DataTableColumns<QueryParams>>;
|
|
|
+</script>
|
|
|
<style scoped></style>
|