初始化

刘光辉

11 小时以前 0dfe84494048ce27ba8449831782128412d3eb13

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<script lang="ts" setup>
import type { DmsPermissionGrant, DmsPermissionUsage } from '#/api/x/dms/permission';
 
import { ref } from 'vue';
 
import { BasicDrawer, useDrawerInner } from '@jnpf/ui/drawer';
import { formatToDateTime } from '@jnpf/utils';
 
import { Empty } from 'ant-design-vue';
 
import { getPermissionUsages } from '#/api/x/dms/permission';
 
const grant = ref<DmsPermissionGrant>();
const usages = ref<DmsPermissionUsage[]>([]);
const [registerDrawer, { changeLoading }] = useDrawerInner(init);
 
const columns = [
  { dataIndex: 'usedAt', key: 'usedAt', title: '使用时间', width: 170 },
  { dataIndex: 'userId', key: 'userId', title: '用户 ID', width: 210 },
  { dataIndex: 'actualResourceType', key: 'actualResourceType', title: '实际资源', width: 130 },
  { dataIndex: 'actualResourceId', key: 'actualResourceId', title: '实际资源 ID', width: 280 },
  { dataIndex: 'operationId', key: 'operationId', title: '幂等操作 ID', width: 280 },
  { dataIndex: 'sessionExpiresAt', key: 'sessionExpiresAt', title: '会话到期', width: 170 },
];
 
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 ?? '不限'} 次`" />
      <a-table v-if="usages.length" :columns="columns" :data-source="usages" :pagination="false" :scroll="{ x: 1240 }" row-key="id" size="small">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'usedAt'">{{ displayTime(record.usedAt) }}</template>
          <template v-else-if="column.key === 'sessionExpiresAt'">{{ displayTime(record.sessionExpiresAt) }}</template>
        </template>
      </a-table>
      <Empty v-else description="暂无使用记录" />
    </div>
  </BasicDrawer>
</template>
 
<style lang="scss" scoped>
.usage-body {
  min-width: 0;
  padding: 20px 24px 28px;
}
</style>