thainv: ghép navigation
This commit is contained in:
nguyen van thai
+138
@@ -0,0 +1,138 @@
|
||||
<script lang="ts" setup>
|
||||
// import RecusiveNavItem from "@/components/cms/page-component/templates/navigations/components/RecusiveNavItem.vue";
|
||||
// import RecusiveSection from "@/components/cms/page-section/RecusiveSection.vue";
|
||||
// import { enumPageComponentTemplates, enumPageComponentStaticChild } from "@/definitions/enum";
|
||||
|
||||
// const props = defineProps<{
|
||||
// records?: any[]
|
||||
// component: any;
|
||||
// }>();
|
||||
|
||||
// const store = reactive({
|
||||
// page: useCmsPageStore(),
|
||||
// section: usePageSectionStore(),
|
||||
// component: usePageComponentStore(),
|
||||
// });
|
||||
|
||||
// const globalState = ref({})
|
||||
// const setGlobalState = (id: any) => {
|
||||
// globalState.value[id] = !globalState.value[id];
|
||||
// }
|
||||
|
||||
// const selectNavigationComponent = () => {
|
||||
// store.page.selectComponentNavigation(props.component);
|
||||
// }
|
||||
|
||||
// const dropSection = (event: any, child: any) => {
|
||||
// if (event.dataTransfer.getData("section")) {
|
||||
// const section = JSON.parse(event.dataTransfer.getData("section"));
|
||||
// store.component.updateNavigationItemInfor(props.component, child, { data: section.id });
|
||||
// store.section.updatePublishedSectionInGeneralPage(section.id, 9999999999);
|
||||
// }
|
||||
// };
|
||||
</script>
|
||||
|
||||
<template>
|
||||
ábsabda
|
||||
<!-- <div class="navigation-container d-flex gap-4 justify-content-center align-items-center">
|
||||
<div v-for="(record) in props.records" :key="record.id" class="navigation-branch cursor-pointer">
|
||||
<template v-if="record && record.childs && record.childs.length > 0 && record.typeChild === enumPageComponentStaticChild.DEFAULT">
|
||||
<div class="navigation-submenu">
|
||||
<div class="" @click="selectNavigationComponent">{{ record?.title }}</div>
|
||||
<div class="navigation-item submenu-container dropdown-container">
|
||||
<RecusiveNavItem :records="record.childs" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="record.typeChild === enumPageComponentStaticChild.LAYOUT">
|
||||
<div class="navigation-submenu">
|
||||
<div class="position-relative ps-3">
|
||||
<span class="position-absolute " style="left: -10px; top: -7px" @click="() => setGlobalState(record.id)">
|
||||
<i v-if="!globalState[record.id]" class="ri-eye-2-line fs-3"></i>
|
||||
<i v-else class="ri-eye-close-line fs-3"></i>
|
||||
</span>
|
||||
<span @click="selectNavigationComponent">{{ record?.title }}</span>
|
||||
</div>
|
||||
<div class="full-layout dropdown-container" :class="[!globalState[record.id] && 'show-menu']">
|
||||
<template v-if="record.data">
|
||||
<div class="p-2">
|
||||
<RecusiveSection type="section" :id="record.data" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-empty description="Kéo Section vào đây" @dragover.prevent @drop.stop.prevent="dropSection($event, record)" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="navigation-item" @click="selectNavigationComponent">{{ record?.title }}</div>
|
||||
</template>
|
||||
</div>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navigation-branch {
|
||||
.navigation-submenu {
|
||||
position: relative;
|
||||
padding: 15px 5px;
|
||||
&:hover {
|
||||
> .dropdown-container {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0%);
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
.submenu-container {
|
||||
width: 200px;
|
||||
display: flex;
|
||||
> div {
|
||||
justify-content: start !important;
|
||||
align-items: flex-start !important;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 0px !important;
|
||||
}
|
||||
div {
|
||||
width: 100% !important;
|
||||
}
|
||||
.navigation-item {
|
||||
width: 100% !important;
|
||||
padding: 10px 20px;
|
||||
&:hover {
|
||||
background: #409eff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.navigation-branch {
|
||||
padding: 0px !important;
|
||||
}
|
||||
}
|
||||
.dropdown-container {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 10%);
|
||||
left: 50%;
|
||||
visibility: hidden;
|
||||
transition: all .3s;
|
||||
position: absolute;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
top: 100%;
|
||||
}
|
||||
.full-layout {
|
||||
width: 800px;
|
||||
z-index: 100;
|
||||
// height: 400px;
|
||||
|
||||
}
|
||||
|
||||
.show-menu {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0%);
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+160
@@ -0,0 +1,160 @@
|
||||
<script setup lang="ts">
|
||||
// import { nanoid } from "nanoid"
|
||||
// import RecusiveTopChild from "@/components/dynamic-page/page-component/templates/navigations/components/RecusiveTopChild.vue";
|
||||
// import { enumPageComponentTemplates, enumPageComponentStaticChild } from "@/definitions/enum";
|
||||
|
||||
// const props = defineProps<{
|
||||
// records?: any[]
|
||||
// currentComponent?: any
|
||||
// }>()
|
||||
|
||||
// const store = reactive({
|
||||
// page: useCmsPageStore(),
|
||||
// section: usePageSectionStore(),
|
||||
// component: usePageComponentStore(),
|
||||
// });
|
||||
|
||||
// const showChildItem = ref<boolean>(false)
|
||||
|
||||
// const toggleStatusBar = (type: "section", id?: any) => {
|
||||
// // if (type === "section") {
|
||||
// // store.section.setCurrentSection(id);
|
||||
// // } else {
|
||||
// // store.section.setCurrentSection(null);
|
||||
// // }
|
||||
// // store.section.toggleStatusSectionBar(true);
|
||||
// };
|
||||
|
||||
// const removeStaticRecord = (currentChild: any) => {
|
||||
// store.component.removeChildtNavigation(props.currentComponent, currentChild);
|
||||
// };
|
||||
|
||||
// const addChildRecord = (currentChild: any) => {
|
||||
// const newChildItem = {
|
||||
// id: nanoid(10),
|
||||
// title: 'Mới mới',
|
||||
// slug: '',
|
||||
// childs: [],
|
||||
// parentId: currentChild.id,
|
||||
// data: null,
|
||||
// typeChild: enumPageComponentStaticChild.DEFAULT,
|
||||
// }
|
||||
// store.component.setChildForComponentNavigation(props.currentComponent, newChildItem);
|
||||
// }
|
||||
|
||||
// const setNavigationItem = (currentChild: any) => {
|
||||
// console.log(currentChild)
|
||||
// store.component.setNavigationItem(currentChild);
|
||||
// }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
ádasd
|
||||
<!-- <div class="lists-record">
|
||||
<div v-for="(record) in props.records" :key="record.id">
|
||||
<template v-if="record && record.childs && record.childs.length > 0 && record.typeChild === enumPageComponentStaticChild.DEFAULT">
|
||||
<div class="record-item child">
|
||||
<div class="record-infor d-flex align-items-center gap-2">
|
||||
<span @click="() => showChildItem = !showChildItem" class="cursor-pointer">
|
||||
<i :class="[showChildItem ? 'ri-arrow-down-s-line' : 'ri-arrow-right-s-line']"></i>
|
||||
</span>
|
||||
<h6>{{ record.title || '' }}</h6>
|
||||
</div>
|
||||
<div class="record-action">
|
||||
<span @click="addChildRecord(record)"><i class="ri-add-line"></i></span>
|
||||
<span @click="setNavigationItem(record)"><i class="ri-eye-line"></i></span>
|
||||
<span @click="removeStaticRecord(record)"><i class="ri-delete-bin-7-line"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ps-4 mt-2" :class="[showChildItem ? 'is-show-item' : 'is-hidden-item']">
|
||||
<RecusiveTopChild :records="record.childs" :currentComponent="props.currentComponent" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="record.typeChild === enumPageComponentStaticChild.LAYOUT">
|
||||
<div class="record-item child">
|
||||
<div class="record-infor d-flex align-items-center gap-2">
|
||||
<h6>{{ record.title || '' }}</h6>
|
||||
</div>
|
||||
<div class="record-action">
|
||||
<span @click="setNavigationItem(record)"><i class="ri-eye-line"></i></span>
|
||||
<span @click="removeStaticRecord(record)"><i class="ri-delete-bin-7-line"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="record-item">
|
||||
<div class="record-infor d-flex align-items-center gap-2">
|
||||
<h6>{{ record.title || '' }}</h6>
|
||||
</div>
|
||||
<div class="record-action">
|
||||
<span @click="addChildRecord(record)"><i class="ri-add-line"></i></span>
|
||||
<span @click="setNavigationItem(record)"><i class="ri-eye-line"></i></span>
|
||||
<span @click="removeStaticRecord(record)"><i class="ri-delete-bin-7-line"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.lists-record {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
|
||||
.record-item {
|
||||
padding: 3px 15px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
cursor: move;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&.child {
|
||||
padding: 3px 15px 3px 10px;
|
||||
}
|
||||
&:hover {
|
||||
> .record-action {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
> .record-action {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
gap: 10px;
|
||||
font-size: 18px;
|
||||
opacity: 0;
|
||||
transition: 0.3s;
|
||||
color: #7e7e7e;
|
||||
|
||||
> span:hover {
|
||||
color: #409eff;
|
||||
transition: 0.3s all;
|
||||
}
|
||||
}
|
||||
> .record-infor {
|
||||
span i {
|
||||
font-size: 18px;
|
||||
cursor: point;
|
||||
}
|
||||
h6 {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.is-show-item {
|
||||
height: auto;
|
||||
}
|
||||
.is-hidden-item {
|
||||
height: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user