<script lang="ts" setup>
|
import type { BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import type { DmsPermissionGrant, DmsPermissionUsage } from '#/api/x/dms/permission';
|
|
import { ref } from 'vue';
|
|
import { BasicDrawer, useDrawerInner } from '@jnpf/ui/drawer';
|
import { BasicVxeTable, useVxeTable } from '@jnpf/ui/vxeTable';
|
import { formatToDateTime } from '@jnpf/utils';
|
|
import { getPermissionUsages } from '#/api/x/dms/permission';
|
|
const grant = ref<DmsPermissionGrant>();
|
const usages = ref<DmsPermissionUsage[]>([]);
|
const [registerDrawer, { changeLoading }] = useDrawerInner(init);
|
|
const columns: BasicColumn[] = [
|
{ dataIndex: 'usedAt', title: '使用时间', width: 170, slots: { default: 'usedAt' } },
|
{ dataIndex: 'userId', title: '用户 ID', minWidth: 210 },
|
{ dataIndex: 'actualResourceType', title: '实际资源', width: 130 },
|
{ dataIndex: 'actualResourceId', title: '实际资源 ID', minWidth: 280 },
|
{ dataIndex: 'operationId', title: '幂等操作 ID', minWidth: 280 },
|
{ dataIndex: 'sessionExpiresAt', title: '会话到期', width: 170, slots: { default: 'sessionExpiresAt' } },
|
];
|
const [registerTable] = useVxeTable({
|
columns,
|
dataSource: usages,
|
emptyText: '暂无使用记录',
|
immediate: false,
|
pagination: false,
|
rowKey: 'id',
|
showIndexColumn: false,
|
showTableSetting: false,
|
});
|
|
async function init(data: { grant: DmsPermissionGrant }) {
|
grant.value = data.grant;
|
usages.value = [];
|
changeLoading(true);
|
try {
|
const response = await getPermissionUsages(data.grant.id);
|
usages.value = response.data || [];
|
} finally {
|
changeLoading(false);
|
}
|
}
|
|
function displayTime(value?: string) {
|
return value ? formatToDateTime(value, 'YYYY-MM-DD HH:mm:ss') : '—';
|
}
|
</script>
|
|
<template>
|
<BasicDrawer v-bind="$attrs" @register="registerDrawer" title="权限使用记录" width="min(980px, calc(100vw - 16px))" destroy-on-close>
|
<div class="usage-body">
|
<a-alert v-if="grant" class="mb-[16px]" type="info" :message="`已使用 ${grant.usedCount} 次，最多 ${grant.maxUseCount ?? '不限'} 次`" />
|
<BasicVxeTable class="usage-table" @register="registerTable">
|
<template #usedAt="{ record }">{{ displayTime(record.usedAt) }}</template>
|
<template #sessionExpiresAt="{ record }">{{ displayTime(record.sessionExpiresAt) }}</template>
|
</BasicVxeTable>
|
</div>
|
</BasicDrawer>
|
</template>
|
|
<style lang="scss" scoped>
|
.usage-body {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
min-width: 0;
|
padding: 20px 24px 28px;
|
}
|
|
.usage-table {
|
flex: 1;
|
min-height: 280px;
|
}
|
</style>
|
