mirror of
https://github.com/soybeanjs/soybean-admin.git
synced 2025-09-27 05:36:43 +08:00
102 lines
2.1 KiB
Vue
102 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed, shallowRef } from 'vue';
|
|
import { $t } from '@/locales';
|
|
|
|
defineOptions({
|
|
name: 'ButtonAuthModal'
|
|
});
|
|
|
|
interface Props {
|
|
/** the roleId */
|
|
roleId: number;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const visible = defineModel<boolean>('visible', {
|
|
default: false
|
|
});
|
|
|
|
function closeModal() {
|
|
visible.value = false;
|
|
}
|
|
|
|
const title = computed(() => $t('common.edit') + $t('page.manage.role.buttonAuth'));
|
|
|
|
type ButtonConfig = {
|
|
id: number;
|
|
label: string;
|
|
code: string;
|
|
};
|
|
|
|
const tree = shallowRef<ButtonConfig[]>([]);
|
|
|
|
async function getAllButtons() {
|
|
// request
|
|
tree.value = [
|
|
{ id: 1, label: 'button1', code: 'code1' },
|
|
{ id: 2, label: 'button2', code: 'code2' },
|
|
{ id: 3, label: 'button3', code: 'code3' },
|
|
{ id: 4, label: 'button4', code: 'code4' },
|
|
{ id: 5, label: 'button5', code: 'code5' },
|
|
{ id: 6, label: 'button6', code: 'code6' },
|
|
{ id: 7, label: 'button7', code: 'code7' },
|
|
{ id: 8, label: 'button8', code: 'code8' },
|
|
{ id: 9, label: 'button9', code: 'code9' },
|
|
{ id: 10, label: 'button10', code: 'code10' }
|
|
];
|
|
}
|
|
|
|
const checks = shallowRef<number[]>([]);
|
|
|
|
async function getChecks() {
|
|
console.log(props.roleId);
|
|
// request
|
|
checks.value = [1, 2, 3, 4, 5];
|
|
}
|
|
|
|
function handleSubmit() {
|
|
console.log(checks.value, props.roleId);
|
|
// request
|
|
|
|
window.$message?.success?.($t('common.modifySuccess'));
|
|
|
|
closeModal();
|
|
}
|
|
|
|
function init() {
|
|
getAllButtons();
|
|
getChecks();
|
|
}
|
|
|
|
// init
|
|
init();
|
|
</script>
|
|
|
|
<template>
|
|
<NModal v-model:show="visible" :title="title" preset="card" class="w-480px">
|
|
<NTree
|
|
v-model:checked-keys="checks"
|
|
:data="tree"
|
|
key-field="id"
|
|
block-line
|
|
checkable
|
|
expand-on-click
|
|
virtual-scroll
|
|
class="h-280px"
|
|
/>
|
|
<template #footer>
|
|
<NSpace justify="end">
|
|
<NButton size="small" class="mt-16px" @click="closeModal">
|
|
{{ $t('common.cancel') }}
|
|
</NButton>
|
|
<NButton type="primary" size="small" class="mt-16px" @click="handleSubmit">
|
|
{{ $t('common.confirm') }}
|
|
</NButton>
|
|
</NSpace>
|
|
</template>
|
|
</NModal>
|
|
</template>
|
|
|
|
<style scoped></style>
|