66 lines
1.7 KiB
Vue
66 lines
1.7 KiB
Vue
<script setup>
|
|
import { isEqual } from "es-toolkit";
|
|
|
|
const store = useStore();
|
|
const { $copy, $snackbar } = useNuxtApp();
|
|
|
|
const localMenu = ref($copy(store.menu));
|
|
|
|
function save() {
|
|
store.menu = $copy(localMenu.value);
|
|
localMenu.value = $copy(store.menu);
|
|
$snackbar("Đã cập nhật phân quyền");
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div style="max-width: 800px; margin-inline: auto">
|
|
<table class="table is-fullwidth is-hoverable is-bordered fs-14 mb-4">
|
|
<thead>
|
|
<tr style="background-color: #e4fff0">
|
|
<th>
|
|
<SvgIcon v-bind="{ name: 'visibility.svg', size: 20 }" />
|
|
</th>
|
|
<th>Menu</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="m in localMenu"
|
|
:key="m.id"
|
|
@click="m.view = !m.view"
|
|
class="is-clickable"
|
|
>
|
|
<td>
|
|
<label class="checkbox">
|
|
<input
|
|
type="checkbox"
|
|
:disabled="localMenu.filter((menu) => menu.view).length === 1 && m.view"
|
|
v-model="m.view"
|
|
/>
|
|
</label>
|
|
</td>
|
|
<td>
|
|
<div class="is-flex is-justify-content-space-between is-align-items-center">
|
|
<p>{{ m.vi }}</p>
|
|
<p class="fs-13 has-text-grey">{{ m.code }}</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="block">
|
|
<button
|
|
:disabled="isEqual(store.menu, localMenu)"
|
|
@click="save"
|
|
class="button is-primary"
|
|
>
|
|
<span class="icon">
|
|
<SvgIcon v-bind="{ name: 'save.svg', type: 'white', size: 19 }" />
|
|
</span>
|
|
<span>Lưu thay đổi</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|