初始化

刘光辉

8 小时以前 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
64
65
66
67
68
69
70
71
<script lang="ts" setup>
import type { DmsPermissionGrant } from '#/api/x/dms/permission';
 
import { ref } from 'vue';
 
import { BasicDrawer, useDrawerInner } from '@jnpf/ui/drawer';
import { formatToDateTime } from '@jnpf/utils';
 
import { getPermissionGrant } from '#/api/x/dms/permission';
 
import { actionLabel, principalDisplayName, principalDisplayTitle, principalTypeLabel, scopeLabel, statusColor, statusLabel } from './permissionRules';
 
const detail = ref<DmsPermissionGrant>();
const [registerDrawer, { changeLoading }] = useDrawerInner(init);
 
async function init(data: { grantId: string }) {
  detail.value = undefined;
  changeLoading(true);
  try {
    const response = await getPermissionGrant(data.grantId);
    detail.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(720px, calc(100vw - 16px))" destroy-on-close>
    <div class="detail-body" v-if="detail">
      <a-descriptions bordered size="small" :column="1">
        <a-descriptions-item label="状态">
          <a-tag :color="statusColor(detail.status)">{{ statusLabel(detail.status) }}</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="授权主体">
          <span :title="principalDisplayTitle(detail.principalName, detail.principalId)">
            {{ principalTypeLabel(detail.principalType) }} / {{ principalDisplayName(detail.principalName, detail.principalId) }}
          </span>
        </a-descriptions-item>
        <a-descriptions-item label="主体 ID">{{ detail.principalId }}</a-descriptions-item>
        <a-descriptions-item label="操作与范围">{{ actionLabel(detail.actionCode) }} / {{ scopeLabel(detail.resourceScope) }}</a-descriptions-item>
        <a-descriptions-item label="包含子组织">{{ detail.includeChildOrgs ? '是' : '否' }}</a-descriptions-item>
        <a-descriptions-item label="有效期">{{ displayTime(detail.validFrom) }} 至 {{ displayTime(detail.validTo) }}</a-descriptions-item>
        <a-descriptions-item label="使用次数">
          {{ detail.usedCount }} / {{ detail.maxUseCount ?? '不限' }}
          <span v-if="detail.remainingUseCount !== undefined">（剩余 {{ detail.remainingUseCount }}）</span>
        </a-descriptions-item>
        <a-descriptions-item label="授权来源">{{ detail.sourceType }} / {{ detail.sourceId }}</a-descriptions-item>
        <a-descriptions-item label="授权原因">{{ detail.grantReason || '—' }}</a-descriptions-item>
        <a-descriptions-item label="撤销时间">{{ displayTime(detail.revokedAt) }}</a-descriptions-item>
        <a-descriptions-item label="撤销原因">{{ detail.revokeReason || '—' }}</a-descriptions-item>
        <a-descriptions-item label="版本号">{{ detail.revision }}</a-descriptions-item>
        <a-descriptions-item label="权限 ID">{{ detail.id }}</a-descriptions-item>
      </a-descriptions>
    </div>
  </BasicDrawer>
</template>
 
<style lang="scss" scoped>
.detail-body {
  padding: 20px 24px 28px;
 
  :deep(.ant-descriptions-item-content) {
    overflow-wrap: anywhere;
  }
}
</style>