zzh
99f7ddf73c
新增 RbacDetailShell、DataPermPanel 五维配置、权限模板/角色管理右侧 Tab 与卡片布局，并补充 i18n。 Co-authored-by: Cursor <cursoragent@cursor.com>
95 lines
2.7 KiB
Vue
95 lines
2.7 KiB
Vue
<template>
|
||
<div class="secret-perm-panel">
|
||
<div class="panel-toolbar">
|
||
<a-button type="primary" size="small" @click="addRow">
|
||
<template #icon><icon-plus /></template>
|
||
添加密级
|
||
</a-button>
|
||
<span class="hint">行级过滤 + 字段脱敏；无配置时默认公开+内部</span>
|
||
</div>
|
||
<a-table :data="modelValue" :pagination="false" size="small" row-key="_key">
|
||
<template #columns>
|
||
<a-table-column title="密级" :width="140">
|
||
<template #cell="{ record }">
|
||
<a-select v-model="record.secretLevel" :options="secretLevelOptions" />
|
||
</template>
|
||
</a-table-column>
|
||
<a-table-column title="适用模块">
|
||
<template #cell="{ record }">
|
||
<a-select
|
||
v-model="record.dataResourceCode"
|
||
:options="resourceOptions"
|
||
placeholder="全局"
|
||
allow-clear
|
||
/>
|
||
</template>
|
||
</a-table-column>
|
||
<a-table-column title="过期时间" :width="180">
|
||
<template #cell="{ record }">
|
||
<a-date-picker
|
||
v-model="record.expireTime"
|
||
show-time
|
||
format="YYYY-MM-DD HH:mm:ss"
|
||
value-format="YYYY-MM-DDTHH:mm:ss[Z]"
|
||
placeholder="永久"
|
||
allow-clear
|
||
style="width: 100%"
|
||
/>
|
||
</template>
|
||
</a-table-column>
|
||
<a-table-column title="操作" :width="70" align="center">
|
||
<template #cell="{ rowIndex }">
|
||
<a-button type="text" status="danger" size="mini" @click="removeRow(rowIndex)">删除</a-button>
|
||
</template>
|
||
</a-table-column>
|
||
</template>
|
||
</a-table>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed } from 'vue'
|
||
import { IconPlus } from '@arco-design/web-vue/es/icon'
|
||
import type { SecretPermItem } from '@/api/rbac/data-perm'
|
||
|
||
type Row = SecretPermItem & { _key: string }
|
||
|
||
const props = defineProps<{
|
||
modelValue: Row[]
|
||
secretLevelOptions: { value: number; label: string }[]
|
||
dataResources: { code: string; name: string }[]
|
||
}>()
|
||
|
||
const emit = defineEmits<{ 'update:modelValue': [Row[]] }>()
|
||
|
||
const resourceOptions = computed(() =>
|
||
props.dataResources.map((r) => ({ value: r.code, label: r.name }))
|
||
)
|
||
|
||
function addRow() {
|
||
emit('update:modelValue', [
|
||
...props.modelValue,
|
||
{ _key: `secret-${Date.now()}`, secretLevel: 2, dataResourceCode: null, expireTime: null },
|
||
])
|
||
}
|
||
|
||
function removeRow(index: number) {
|
||
const next = [...props.modelValue]
|
||
next.splice(index, 1)
|
||
emit('update:modelValue', next)
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.panel-toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.hint {
|
||
color: var(--color-text-3);
|
||
font-size: 12px;
|
||
}
|
||
</style>
|