406 lines
11 KiB
Vue
406 lines
11 KiB
Vue
<template>
|
|
<div class="has-text-black">
|
|
<div>{{ row.code }} / {{ isVietnamese ? row.name : row.en }} {{ $lang("access-right") }}:</div>
|
|
<div class="mt-2">
|
|
<span class="icon-text mr-6" v-for="v in options">
|
|
<a @click="changeOption(v)">
|
|
<SvgIcon
|
|
v-bind="{
|
|
name: option === v.code ? 'radio-checked.svg' : 'radio-unchecked.svg',
|
|
type: option === v.code ? 'blue' : 'gray',
|
|
size: 25,
|
|
}"
|
|
/>
|
|
</a>
|
|
<b class="fs-18">{{ v[$store.lang === "en" ? "en" : "name"] }}</b>
|
|
</span>
|
|
</div>
|
|
<aside class="menu">
|
|
<ul class="menu-list" v-for="v in topmenu">
|
|
<li>
|
|
<div class="field is-grouped has-background-light has-text-black py-2 px-3">
|
|
<div class="control is-expanded">
|
|
<b>{{ v[$store.lang] }}</b>
|
|
</div>
|
|
<div class="control" v-if="v.submenu.length === 0 && option === 'limit'">
|
|
<span class="ml-6 is-clickable" @click="changeTick(v)">
|
|
<SvgIcon
|
|
v-bind="{
|
|
name: v.checked ? 'checked.svg' : 'uncheck.svg',
|
|
type: v.checked ? 'blue' : 'gray',
|
|
size: 25,
|
|
}"
|
|
></SvgIcon>
|
|
</span>
|
|
</div>
|
|
<div v-if="v.submenu.length > 0 && option === 'limit'">
|
|
<span class="ml-6 is-clickable" @click="changeViewAll(v)" title="Chọn tất cả">
|
|
<SvgIcon
|
|
v-bind="{
|
|
name: 'view.svg',
|
|
type: 'gray',
|
|
size: 25,
|
|
}"
|
|
></SvgIcon>
|
|
</span>
|
|
<span class="ml-6 is-clickable" @click="changeEditAll(v)" title="Chọn tất cả">
|
|
<SvgIcon
|
|
v-bind="{
|
|
name: 'edit1.svg',
|
|
type: 'gray',
|
|
size: 25,
|
|
}"
|
|
></SvgIcon>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<ul>
|
|
<li class="border-bottom" v-for="x in v.submenu">
|
|
<div class="field is-grouped py-1">
|
|
<div class="control is-expanded">
|
|
<span class="icon-text">
|
|
<span>{{ x[$store.lang] }}</span>
|
|
</span>
|
|
</div>
|
|
<div class="control" v-if="option === 'limit'">
|
|
<span class="ml-6 is-clickable" @click="changeTick(x, v)" title="Xem thông tin">
|
|
<SvgIcon
|
|
v-bind="{
|
|
name: x.checked ? 'checked.svg' : 'uncheck.svg',
|
|
type: x.checked ? 'blue' : 'gray',
|
|
size: 25,
|
|
}"
|
|
/>
|
|
</span>
|
|
<span class="ml-6 is-clickable" @click="changeEdit(x, v)" title="Chỉnh sửa thông tin">
|
|
<SvgIcon
|
|
v-bind="{
|
|
name: x.checked && x.is_edit === true ? 'checked.svg' : 'uncheck.svg',
|
|
type: x.checked && x.is_edit === true ? 'blue' : 'gray',
|
|
size: 25,
|
|
}"
|
|
></SvgIcon>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</aside>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
const { $getdata, $filter, $find, $insertapi, $deleteapi, $store, $updateapi } = useNuxtApp();
|
|
|
|
const props = defineProps({
|
|
row: Object,
|
|
api: String,
|
|
setting: String,
|
|
});
|
|
|
|
const isVietnamese = computed(() => $store.lang.toLowerCase() === "vi");
|
|
|
|
const options = [
|
|
{ code: "all", name: "Tất cả tính năng", en: "All functions" },
|
|
{ code: "limit", name: "Bị giới hạn", en: "Limited functions" },
|
|
];
|
|
|
|
const option = ref("limit");
|
|
const topmenu = ref([]);
|
|
let loanRights = [];
|
|
|
|
const rows = await $getdata(props.setting, {
|
|
category__in: ["topmenu", "submenu"],
|
|
});
|
|
|
|
async function getRights(first) {
|
|
loanRights = await $getdata(props.api, { group: props.row.id });
|
|
if (loanRights.length === 0 && first) {
|
|
option.value = "all";
|
|
}
|
|
|
|
const rights = $filter(rows, { category: "topmenu" });
|
|
|
|
rights
|
|
.sort((a, b) => (a.index ?? 0) - (b.index ?? 0))
|
|
.forEach((parent) => {
|
|
const subs = $filter(rows, {
|
|
category: "submenu",
|
|
classify: parent.code,
|
|
});
|
|
|
|
subs
|
|
.sort((a, b) => (a.index ?? 0) - (b.index ?? 0))
|
|
.forEach((sub) => {
|
|
const found = $find(loanRights, { setting: sub.id });
|
|
sub.checked = !!found;
|
|
sub.is_edit = found?.is_edit || null;
|
|
sub.rightId = found?.id || null;
|
|
});
|
|
|
|
const foundParent = $find(loanRights, { setting: parent.id });
|
|
parent.rightId = foundParent?.id || null;
|
|
|
|
parent.checked = subs.length ? subs.some((s) => s.checked) : !!foundParent;
|
|
|
|
parent.submenu = subs;
|
|
});
|
|
topmenu.value = [...rights];
|
|
}
|
|
|
|
async function changeTick(x, v) {
|
|
if (x.checked) {
|
|
x.checked = false;
|
|
const deleteId = x.rightId;
|
|
if (deleteId) {
|
|
await $deleteapi(props.api, deleteId);
|
|
x.rightId = null;
|
|
}
|
|
|
|
if (v) {
|
|
const stillChecked = v.submenu.some((s) => s.checked);
|
|
if (!stillChecked) {
|
|
const parentDelete = v.rightId;
|
|
v.checked = false;
|
|
v.rightId = null;
|
|
|
|
if (parentDelete) {
|
|
await $deleteapi(props.api, parentDelete);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ===== CHECK =====
|
|
else {
|
|
x.checked = true;
|
|
x.is_edit = false;
|
|
const obj = await $insertapi(props.api, { setting: x.id, group: props.row.id, is_edit: false }, undefined, false);
|
|
|
|
if (obj) x.rightId = obj.id;
|
|
|
|
if (v && !v.checked) {
|
|
v.checked = true;
|
|
v.is_edit = false;
|
|
const parentObj = await $insertapi(
|
|
props.api,
|
|
{ setting: v.id, group: props.row.id, is_edit: false },
|
|
undefined,
|
|
false
|
|
);
|
|
|
|
if (parentObj) v.rightId = parentObj.id;
|
|
}
|
|
}
|
|
|
|
topmenu.value = [...topmenu.value];
|
|
}
|
|
|
|
async function changeOption(v) {
|
|
option.value = v.code;
|
|
loanRights = await $getdata(props.api, { group: props.row.id });
|
|
|
|
if (v.code === "all") {
|
|
if (loanRights?.length > 0) {
|
|
await Promise.all(loanRights.map((item) => $deleteapi(props.api, item.id)));
|
|
}
|
|
|
|
topmenu.value.forEach((p) => {
|
|
p.checked = false;
|
|
p.rightId = null;
|
|
p.submenu?.forEach((s) => {
|
|
s.checked = false;
|
|
s.rightId = null;
|
|
});
|
|
});
|
|
|
|
topmenu.value = [...topmenu.value];
|
|
} else {
|
|
await getRights();
|
|
}
|
|
}
|
|
|
|
async function changeEdit(x, v) {
|
|
if (x.checked) {
|
|
const deleteId = x.rightId;
|
|
|
|
if (deleteId) {
|
|
await $updateapi(props.api, {
|
|
id: x.rightId,
|
|
setting: x.id,
|
|
group: props.row.id,
|
|
is_edit: !x.is_edit,
|
|
});
|
|
}
|
|
x.is_edit = !x.is_edit;
|
|
x.rightId = null;
|
|
}
|
|
|
|
// ===== CHECK =====
|
|
else {
|
|
x.checked = true;
|
|
x.is_edit = true;
|
|
const obj = await $insertapi(props.api, { setting: x.id, group: props.row.id, is_edit: true }, undefined, false);
|
|
|
|
if (obj) x.rightId = obj.id;
|
|
|
|
if (v && !v.checked) {
|
|
v.checked = true;
|
|
|
|
const parentObj = await $insertapi(
|
|
props.api,
|
|
{ setting: v.id, group: props.row.id, is_edit: false },
|
|
undefined,
|
|
false
|
|
);
|
|
|
|
if (parentObj) v.rightId = parentObj.id;
|
|
}
|
|
}
|
|
|
|
topmenu.value = [...topmenu.value];
|
|
}
|
|
|
|
async function changeViewAll(v) {
|
|
try {
|
|
// ===== UNCHECK =====
|
|
if (v.checked) {
|
|
v.checked = false;
|
|
v.is_edit = false;
|
|
console.log("v.rightId", v.rightId);
|
|
|
|
// Xóa quyền parent
|
|
if (v.rightId) {
|
|
await $deleteapi(props.api, v.rightId);
|
|
v.rightId = null;
|
|
}
|
|
|
|
// Xóa quyền submenu
|
|
if (v?.submenu?.length) {
|
|
await Promise.all(
|
|
v.submenu.map(async (item) => {
|
|
if (item.rightId) {
|
|
await $deleteapi(props.api, item.rightId);
|
|
item.rightId = null;
|
|
}
|
|
item.checked = false;
|
|
item.is_edit = false;
|
|
})
|
|
);
|
|
}
|
|
}
|
|
|
|
// ===== CHECK =====
|
|
else {
|
|
v.checked = true;
|
|
v.is_edit = false;
|
|
|
|
// Tạo quyền cho parent
|
|
const parentObj = await $insertapi(
|
|
props.api,
|
|
{ setting: v.id, group: props.row.id, is_edit: false },
|
|
undefined,
|
|
false
|
|
);
|
|
|
|
if (parentObj) v.rightId = parentObj.id;
|
|
|
|
// Tạo quyền cho submenu
|
|
if (v?.submenu?.length) {
|
|
await Promise.all(
|
|
v.submenu.map(async (item) => {
|
|
const obj = await $insertapi(
|
|
props.api,
|
|
{ setting: item.id, group: props.row.id, is_edit: false },
|
|
undefined,
|
|
false
|
|
);
|
|
|
|
if (obj) item.rightId = obj.id;
|
|
|
|
item.checked = true;
|
|
item.is_checked = true;
|
|
})
|
|
);
|
|
}
|
|
}
|
|
|
|
// Force Vue reactive update
|
|
topmenu.value = [...topmenu.value];
|
|
} catch (err) {
|
|
console.error("changeViewAll error:", err);
|
|
}
|
|
}
|
|
|
|
async function changeEditAll(v) {
|
|
try {
|
|
// ===== UNCHECK =====
|
|
if (v.checked) {
|
|
v.checked = true;
|
|
v.is_edit = false;
|
|
|
|
// Xóa quyền submenu
|
|
if (v?.submenu?.length) {
|
|
await Promise.all(
|
|
v.submenu.map(async (item) => {
|
|
if (item.rightId) {
|
|
await $updateapi(props.api, {
|
|
id: item.rightId,
|
|
setting: item.id,
|
|
group: props.row.id,
|
|
is_edit: !item.is_edit,
|
|
});
|
|
}
|
|
item.checked = true;
|
|
item.is_edit = !item.is_edit;
|
|
})
|
|
);
|
|
}
|
|
}
|
|
|
|
// ===== CHECK =====
|
|
else {
|
|
v.checked = true;
|
|
v.is_edit = false;
|
|
|
|
// Tạo quyền cho parent
|
|
const parentObj = await $insertapi(
|
|
props.api,
|
|
{ setting: v.id, group: props.row.id, is_edit: false },
|
|
undefined,
|
|
false
|
|
);
|
|
|
|
if (parentObj) v.rightId = parentObj.id;
|
|
|
|
// Tạo quyền cho submenu
|
|
if (v?.submenu?.length) {
|
|
await Promise.all(
|
|
v.submenu.map(async (item) => {
|
|
const obj = await $insertapi(
|
|
props.api,
|
|
{ setting: item.id, group: props.row.id, is_edit: true },
|
|
undefined,
|
|
false
|
|
);
|
|
|
|
if (obj) item.rightId = obj.id;
|
|
|
|
item.checked = true;
|
|
item.is_edit = true;
|
|
})
|
|
);
|
|
}
|
|
}
|
|
|
|
// Force Vue reactive update
|
|
topmenu.value = [...topmenu.value];
|
|
} catch (err) {
|
|
console.error("changeViewAll error:", err);
|
|
}
|
|
}
|
|
|
|
await getRights(true);
|
|
</script>
|