Changes MenuGroupRights
This commit is contained in:
Thien Pham Van
@@ -33,6 +33,26 @@
|
||||
></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">
|
||||
@@ -43,13 +63,22 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="control" v-if="option === 'limit'">
|
||||
<span class="ml-6 is-clickable" @click="changeTick(x, v)">
|
||||
<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>
|
||||
@@ -62,7 +91,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
const { $getdata, $filter, $find, $insertapi, $deleteapi, $store } = useNuxtApp();
|
||||
const { $getdata, $filter, $find, $insertapi, $deleteapi, $store, $updateapi } = useNuxtApp();
|
||||
|
||||
const props = defineProps({
|
||||
row: Object,
|
||||
@@ -93,37 +122,42 @@ async function getRights(first) {
|
||||
|
||||
const rights = $filter(rows, { category: "topmenu" });
|
||||
|
||||
rights.forEach((parent) => {
|
||||
const subs = $filter(rows, {
|
||||
category: "submenu",
|
||||
classify: parent.code,
|
||||
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;
|
||||
});
|
||||
|
||||
subs.forEach((sub) => {
|
||||
const found = $find(loanRights, { setting: sub.id });
|
||||
sub.checked = !!found;
|
||||
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) {
|
||||
// ===== UNCHECK =====
|
||||
if (x.checked) {
|
||||
x.checked = false;
|
||||
const deleteId = x.rightId;
|
||||
x.rightId = null;
|
||||
if (deleteId) {
|
||||
await $deleteapi(props.api, deleteId);
|
||||
x.rightId = null;
|
||||
}
|
||||
|
||||
// Nếu là submenu → kiểm tra parent
|
||||
if (v) {
|
||||
const stillChecked = v.submenu.some((s) => s.checked);
|
||||
if (!stillChecked) {
|
||||
@@ -136,24 +170,25 @@ async function changeTick(x, v) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (deleteId) {
|
||||
await $deleteapi(props.api, deleteId);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== CHECK =====
|
||||
else {
|
||||
x.checked = true;
|
||||
|
||||
const obj = await $insertapi(props.api, { setting: x.id, group: props.row.id }, undefined, false);
|
||||
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;
|
||||
|
||||
const parentObj = await $insertapi(props.api, { setting: v.id, group: props.row.id }, undefined, false);
|
||||
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;
|
||||
}
|
||||
@@ -186,5 +221,185 @@ async function changeOption(v) {
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user