新增菜单响应

src/components/hotel/order/list/OrderList.vue

@@ -47,7 +47,7 @@
       </div>
 
       <div class="q-mt-md row">
-        <q-table separator="vertical" :hide-bottom="true" dense :rows="x.DetailList" bordered :columns="cols" class="light-border col borders no-shadow text-left">
+        <q-table separator="vertical" :hide-bottom="true" dense :rows="x.DetailList" bordered :columns="cols" class="light-border col no-shadow text-left">
           <template v-slot:header-cell-Room="props">
             <q-th :props="props">
               <div class="row items-center">
@@ -245,7 +245,7 @@ export default defineComponent({
               })
               data.orders = r.data.data.pageData
               data.pages.pageCount = r.data.data.pageCount
-              
+
             } else {
               message.errorMsg(r.data.message)
             }

src/components/layout/nav-item.vue

 <template>
-  <q-expansion-item class="demo" :class="{ 'nav-parent': activeParent }">
+  <q-expansion-item class="demo" :class="{ 'nav-parent': activeParent }" v-model="activeParent">
     <template v-slot:header>
       <q-item-section>
         <div class="row items-center nav-group">
@@ -22,11 +22,12 @@
 </template>
 
 <script lang="ts">
-import { Menu, MENU_KEYS } from '../../utils/menus'
-import { computed, defineComponent, inject, PropType, provide, reactive, toRefs,ref, watch } from 'vue'
+import { Menu } from '../../utils/menus'
+import { computed, defineComponent, inject, PropType, provide, reactive, toRefs, ref, watch } from 'vue'
 import svgIcon from '../global/svg-icon.vue'
+import { DirtionmaryHelper } from '../../config/dictionary'
 export default defineComponent({
-  components:{svgIcon},
+  components: { svgIcon },
   name: 'nav-item',
   props: {
     menu: {
@@ -34,22 +35,24 @@ export default defineComponent({
       required: true
     }
   },
-  
+
   setup(props) {
-    const activeMenu = inject(MENU_KEYS) as any
+    const activeMenu = inject(DirtionmaryHelper.MENU_KEYS) as any
+
+    watch(activeMenu, (n, o) => {
+      if (!activeMenu.value) data.activeParent = false
+      if (props.menu.childs) {
+        let temp = props.menu.childs.find(x => x.id == activeMenu.value)
+        data.activeParent = temp ? true : false
+      } else {
+        data.activeParent = props.menu.id == activeMenu.value
+      }
+    })
+
     const data = reactive({
-      activeParent: computed(() => {
-        if(!activeMenu) return false
-        if (props.menu.childs) {
-          let temp = props.menu.childs.find(x => x.id == activeMenu.value)
-          return temp ? true : false
-        } else {
-          return props.menu.id == activeMenu.value
-        }
-      })
+      activeParent: false
     })
-   
-    
+
     const methods = {
       checkMenuHandler(id: number) {
         activeMenu.value = id
@@ -58,4 +61,4 @@ export default defineComponent({
     return { ...toRefs(data), ...methods, activeMenu }
   }
 })
-</script>
\ No newline at end of file
+</script>

src/components/layout/navs.vue

@@ -5,15 +5,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent,ref,reactive, toRefs, provide } from 'vue'
+import { defineComponent,ref,reactive, toRefs } from 'vue'
 import navItem from './nav-item.vue'
-import { useMenus, Menu, MENU_KEYS } from '../../utils/menus'
+import { useMenus, Menu } from '../../utils/menus'
 export default defineComponent({
   components: { navItem },
   name: 'navs',
   setup() {
-    const activeMenu=ref(0)
-    provide(MENU_KEYS, activeMenu)
     const data = reactive({
       menus: [] as Menu[]
     })

src/config/dictionary.ts

@@ -8,6 +8,12 @@ const userDictionmary = {
 }
 
 class DirtionmaryHelper {
+
+  /**
+   * 菜單選項
+   */
+  static readonly MENU_KEYS='Current_Menu_Cehck'
+
 	/**
 	 * 子頁面傳遞給主界面的標題KEY
 	 */

src/layouts/MainLayout.vue

@@ -81,6 +81,8 @@ export default {
     })
     const childPageTitle = ref('')
     provide(DirtionmaryHelper.PAGE_TITLE_KEY ,childPageTitle)
+    const activeMenu=ref(0)
+    provide(DirtionmaryHelper.MENU_KEYS, activeMenu)
     data.userInfo = getStoreGetter<UserGetter>('user', 'getUser')
     data.scrollStyle = useScrollModule().scrollStyle
     const methods = {

src/pages/hotel/HotelList.vue

@@ -19,7 +19,6 @@ export default defineComponent({
   components: { svgIcon, ListHeader, ListTable },
   setup() {
     const data = reactive({})
-    console.log(' in ')
     let { setTitle } = useMetaModule()
     const { locale, t } = useI18n()
     const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any
@@ -49,6 +48,9 @@ export default defineComponent({
     provide(DirtionmaryHelper.HOTEL_CAR_LIST, HotelCarList)
     const updateObj = ref<any>({})
     provide(DirtionmaryHelper.HOTEL_UPDATEHOTEL_CAR,updateObj)
+
+    const menu=inject(DirtionmaryHelper.MENU_KEYS) as any
+    menu.value=2
     const methods = {
 
     }

src/pages/hotel/HotelOrder.vue

@@ -39,6 +39,8 @@ export default defineComponent({
           ContactNumber:''
         })
         provide(DirtionmaryHelper.HOTEL_ORDER_SEARCH,search)
+        const menu=inject(DirtionmaryHelper.MENU_KEYS) as any
+        menu.value=3
 
         const data = reactive({})
         const methods = {}
@@ -50,4 +52,4 @@ export default defineComponent({
 
 <style>
 
-</style>
\ No newline at end of file
+</style>

src/utils/menus.ts

@@ -98,5 +98,4 @@ const useMenus={
         return menus
     }
 }
-const MENU_KEYS='Current_Menu_Cehck'
-export {useMenus, type Menu,MENU_KEYS}
\ No newline at end of file
+export {useMenus, type Menu}