no message

src/App.vue

@@ -264,4 +264,13 @@ body
 
 .q-dialog__inner--minimized>div
     max-width: unset !important
+.full-window
+  .q-dialog__inner--minimized
+    padding: unset !important
+  .q-dialog__inner--minimized>div
+    max-width: unset !important
+    max-height: unset !important
+    width: 100vw !important
+    height: 100vh !important
+
 </style>

src/components/hotel/chosen/ChosenHeader.vue

 <template>
   <div class="rounded-borders bg-white row items-center q-pa-md">
+    <q-icon name="navigate_before" size="36px" style="margin-left:-15px" v-close-popup />
     <n-cascader v-if="$q.platform.is.desktop" class="col-2 no-border" @update:value="changearea" v-model:value="cascader.addressValue" size="large" :placeholder="$t('hotel.area')" clearable check-strategy="all" :options="provinces" value-field="ID" label-field="Name" remote :on-load="loadChilds" cascade />
     <q-field v-if="$q.platform.is.desktop" stack-label :label="$t('daterange')" standout class="q-ml-lg col-2" style="min-width: 190px" dense>
-      <div class="self-center full-width no-outline" tabindex="0">{{ dateRangeFormat }}</div>
+      <div class="self-center full-width no-outline" tabindex="0">{{ search.StartDate }} - {{search.EndDate}}</div>
     </q-field>
-    <n-select v-if="$q.platform.is.desktop" filterable @update:value="changeHotel" class="q-ml-lg col-2" style="min-width: 190px" clearable v-model:value="search.HotelChooseArray" :placeholder="$t('hotel.searchName')" multiple :options="cacheHotels" max-tag-count="responsive" size="large" value-field="ID" label-field="Name" />
+    <n-select v-if="$q.platform.is.desktop" filterable class="q-ml-lg col-2" style="min-width: 190px" clearable v-model:value="search.HotelChooseArray" :placeholder="$t('hotel.searchName')" multiple :options="cacheHotels" max-tag-count="responsive" size="large" value-field="ID" label-field="Name" />
     <div class="col"></div>
     <q-btn unelevated class="bg-grey-3 hover" :title="$t('morequery')">
       <q-badge rounded class="din bg-red-2 text-red-14 text-weight-bold" floating :label="searchCnt" v-if="searchCnt > 0" />
@@ -40,7 +41,7 @@
 
 <script lang="ts">
 import svgIcon from '../../global/svg-icon.vue'
-import { computed, inject, provide, reactive, ref, toRefs, defineComponent, onMounted, watch } from 'vue'
+import { computed, inject, reactive, toRefs, defineComponent } from 'vue'
 import HotelService from '../../../api/hotel'
 import message from '../../../utils/message'
 import { ApiResult } from '../../../@types/enumHelper'
@@ -54,10 +55,7 @@ export default defineComponent({
   components: { svgIcon },
   setup() {
     const $q = useQuasar()
-    const qDateProxy = ref(null) as any
-    const qNameProxy = ref(null) as any
     const data = reactive({
-      rightCarOpen: false,
       scrollStyle: {} as any,
       addressParams: {
         Id: '651'
@@ -70,8 +68,6 @@ export default defineComponent({
       loading: false,
       cacheHotels: [] as Array<any>,
       hotelsRates: [] as Array<HotelRate>,
-      canHide: false,
-      HotelLength: 0
     })
     data.scrollStyle = useScrollModule().scrollStyle
     const search = inject(DirtionmaryHelper.HOTEL_QUERY_PARAM) as any
@@ -131,35 +127,20 @@ export default defineComponent({
             })
         })
       },
-      dateRangeHandler(e: any) {
-        search.StartDate = `${e.from.year}/${e.from.month}/${e.from.day}`
-        search.EndDate = `${e.to.year}/${e.to.month}/${e.to.day} `
-        data.dateRangeFormat = `${search.StartDate} - ${search.EndDate} `
-        if (qDateProxy.value) qDateProxy.value.hide()
-      },
       optionsFn(cd: any) {
         return cd >= date.formatDate(date.addToDate(new Date(), { days: 15 }), 'YYYY/MM/DD')
       },
       changearea(e: number, option: any, pathValues: Array<any>) {
         search.Province = 0
         search.City = 0
+        try {
           if (pathValues.length > 0) {
             search.Province = pathValues[0].ID
           }
           if (pathValues.length > 1) {
             search.City = pathValues[1].ID
           }
-      },
-      changeHotel() {
-        setTimeout(() => {
-          console.log(search.HotelChooseArray)
-        }, 1000)
-      },
-      close(){
-        data.rightCarOpen = false
-      },
-      setSuccess(){
-        data.rightCarOpen = false
+        } catch (error) {}
       }
     }
     const searchCnt = computed(() => {
@@ -179,8 +160,6 @@ export default defineComponent({
     return {
       ...toRefs(data),
       ...methods,
-      qDateProxy,
-      qNameProxy,
       searchCnt,
       search
     }

src/components/hotel/chosen/ChosenHotel.vue

 <template>
-  <q-card flat bordered class="q-pa-md bg-white column" style="width:100vw;height: 80vh;">
+  <q-card flat bordered class="bg-white column" style="width:50vw;height: 70vh;">
+    <div style="height:72px;overflow:hidden;">
       <chosen-header></chosen-header>
-    <div class="col q-mt-md" :class="{'light-shadow q-pa-md bg-white rounded-border':$q.platform.is.desktop}">
-      <chosen-table></chosen-table>
+    </div>
+    <div class="col" :class="{'light-shadow bg-white rounded-border':$q.platform.is.desktop}">
+      <chosen-table @finish="finishHandler"></chosen-table>
     </div>
   </q-card>
 </template>
@@ -13,12 +15,16 @@ import ChosenHeader from "./ChosenHeader.vue";
 import ChosenTable from "./ChosenTable.vue";
 export default defineComponent({
   components: { ChosenHeader, ChosenTable },
-
-  setup(props) {
+  emits:["finish"],
+  setup(props,context) {
 
     const data=reactive({})
 
-    const methods = {}
+    const methods = {
+      finishHandler(hotel:any){
+        context.emit('finish',hotel)
+      }
+    }
 
     return {
       ...toRefs(data),

src/components/hotel/chosen/ChosenTable.vue

@@ -17,11 +17,12 @@
           <q-th v-for="(x, i) in cols">
             {{ x }}
           </q-th>
+          <q-th>{{$t('hotel.addRoomBtn')}}</q-th>
         </q-tr>
       </template>
       <template v-slot:body="props">
         <q-tr :props="props">
-          <q-td>
+          <q-td style="width:200px">
             <div class="ellipsis-3-lines" style="padding: 7px 16px;width: 200px;white-space: break-spaces;">{{ props.row.HotelName }}</div>
           </q-td>
           <q-td>
@@ -29,7 +30,7 @@
             <div class="td-item">{{ $t('hotel.table.ins') }}</div>
             <div class="td-item">{{ $t('hotel.table.limit') }}</div>
           </q-td>
-          <q-td v-for="x in props.row.subList" @click="showOrderSubmitHandler(props.row,x)">
+          <q-td v-for="x in props.row.subList">
             <template v-if="x.PriceList && x.PriceList.length > 0">
               <div class="td-item cursor-pointer" :class="[x.PriceList[0].ins.bg, x.PriceList[0].ins.color]">
                 {{ x.PriceList[0].CostPrice }}
@@ -48,6 +49,9 @@
               </span>
             </div>
           </q-td>
+          <q-td class="text-center" style="border-left:1px solid #eee;">
+          <q-btn color="primary" :label="$t('hotel.addRoom')" size="sm" outline @click="finishHanler(props.row)"/>
+          </q-td>
         </q-tr>
       </template>
       <template v-slot:bottom>
@@ -62,20 +66,35 @@
       grid
       :columns="mobileCols"
       row-key="name"
-      card-class="no-shadow bg-primary text-white"
+      card-class="no-shadow bg-primary text-white col"
       :pagination="pages"
       :loading="loading"
-      @row-click="viewHotelPriceListHandler"
     >
+    <template v-slot:item="props">
+      <div @click="viewHotelPriceListHandler(props.row)" class="rounded-borders bg-primary text-white col-12 q-mb-sm" style="padding: 12px;margin-left: 12px;margin-right: 12px; width: calc(100% - 24px);">
+        <div>
+          <div style="opacity: 0.54;font-weight: 500;font-size: 12px;margin-bottom: 4px;">{{$t('hotel.col.first')}}</div>
+          <div style="font-size: 13px;">{{props.row.HotelName}}</div>
+        </div>
+        <div class="q-my-md">
+          <div style="opacity: 0.54;font-weight: 500;font-size: 12px;margin-bottom: 4px;">{{$t('hotel.col.three')}}</div>
+          <div style="font-size: 13px;">{{props.row.TotalInventory}}</div>
+        </div>
+        <div>
+          <div style="opacity: 0.54;font-weight: 500;font-size: 12px;margin-bottom: 4px;">{{$t('hotel.col.four')}}</div>
+          <div class="row items-center justify-between">
+            <span>¥{{props.row.LowerPrice.toFixed(2)}}円 {{$t('hotel.col.low')}}</span>
+            <q-btn color="grey-3" :label="$t('hotel.addRoom')" size="sm" outline @click="finishHanler(props.row)"/>
+          </div>
+        </div>
+      </div>
+    </template>
     <template v-slot:bottom>
         <q-pagination class="full-width justify-end" v-model="pages.pageIndex" color="primary" :max="pages.pageCount" :input="true" @update:model-value="changePageHandler" />
       </template>
     </q-table>
     <q-dialog v-model="showPriceList">
-      <hotel-price-list :hotel="queryHotelObj" @update:model-value="showOrderSubmitHandler"></hotel-price-list>
-    </q-dialog>
-    <q-dialog v-model="showOrderPreview" persistent>
-      <TableOperation :HotelRow="orderSubmitObj" :hotelInfor="orderSubmitItemObj" @close="showOrderPreview = false"></TableOperation>
+      <hotel-price-list :hotel="queryHotelObj"></hotel-price-list>
     </q-dialog>
   </div>
 </template>
@@ -94,7 +113,8 @@ import SamplePriceList from '../list/SamplePriceList.vue'
 export default defineComponent({
   components: { HotelPriceList, SamplePriceList },
   name: 'list-table',
-  setup() {
+  emits:['finish'],
+  setup(props,context) {
     const $q=useQuasar()
     const { t } = useI18n()
     const search = inject(DirtionmaryHelper.HOTEL_QUERY_PARAM) as any
@@ -120,13 +140,10 @@ export default defineComponent({
       mobileCols:[
         {name:'HotelName',label:t('hotel.col.first'),field:(row:any)=>row.HotelName},
         {name:'TotalInventory',label:t('hotel.col.three'),field:(row:any)=>row.TotalInventory},
-        {name:'LowerPrice',label:t('hotel.col.four'),field:(row:any)=>`¥${row.LowerPrice.toFixed(2)}円 ${t('hotel.col.low')}`}
+        {name:'LowerPrice',label:t('hotel.col.four'),field:(row:any)=>row.LowerPrice}
       ],
       showPriceList:false,
-      queryHotelObj:{},
-      orderSubmitObj:{} as any,
-      orderSubmitItemObj:{} as any,
-      showOrderPreview: false
+      queryHotelObj:{}
     })
 
 
@@ -196,19 +213,17 @@ export default defineComponent({
         })
         return lower
       },
-      viewHotelPriceListHandler(e:any,row:any,index:number){
+      viewHotelPriceListHandler(row:any){
         data.queryHotelObj = row
         data.showPriceList = true
       },
-      showOrderSubmitHandler(row:any,col:any){
-        data.orderSubmitObj = row
-        data.orderSubmitItemObj = col
-        data.showOrderPreview = true
+      finishHanler(hotel:any){
+        context.emit('finish',hotel)
       }
     }
     methods.calcDateRangeCols()
     methods.initHotels()
-    return { ...toRefs(data), ...methods }
+    return { ...toRefs(data), ...methods,search }
   }
 })
 </script>

src/components/hotel/list/HotelPriceList.vue

@@ -36,7 +36,7 @@
                 <!-- <div class="q-ml-md" style="font-size: 12px; opacity: 0.5">{{ $t('hotel.col.more') }}</div> -->
               </div>
             </div>
-            <q-btn color="color" :label="$t('hotel.buy')" class="q-pa-none q-px-md" dense outline style="opacity: 0.5" @click="showOrderSubmitHandler(h,x)"/>
+            <q-btn color="color" v-if="!search.SearchByUpdate" :label="$t('hotel.buy')" class="q-pa-none q-px-md" dense outline style="opacity: 0.5" @click="showOrderSubmitHandler(h,x)"/>
           </div>
           <div class="row justify-between q-mt-md q-pa-sm rounded-borders" style="background:rgba(255,255,255,.3)"  v-if="x.PriceList[0].room.length>0">
             <div class="price-item q-ma-none" v-for="y in x.PriceList[0].room">
@@ -78,6 +78,7 @@ export default defineComponent({
     )
 
     data.scrollStyle = useScrollModule().scrollStyle
+    const search = inject(DirtionmaryHelper.HOTEL_QUERY_PARAM) as any
 
     const methods = {
       showOrderSubmitHandler(row:any,col:any){
@@ -121,7 +122,6 @@ export default defineComponent({
     }
 
     methods.setCurrentHotel(props.hotel)
-    const search = inject(DirtionmaryHelper.HOTEL_QUERY_PARAM) as any
 
     return { ...toRefs(data), ...methods, search }
   }

src/components/hotel/list/ListTable.vue

@@ -21,11 +21,10 @@
       </template>
       <template v-slot:body="props">
         <q-tr :props="props">
-          <q-td>
-            <div class="ellipsis-3-lines cursor-pointer reactive" style="padding: 7px 16px;width: 200px;white-space: break-spaces;">
+          <q-td style="width:200px">
+            <div class="ellipsis-3-lines" style="padding: 7px 16px;width: 200px;white-space: break-spaces;">
               {{ props.row.HotelName }}
-              <!-- <hotelCard class="absolute" style="left: 0;top: 20px;"></hotelCard> -->
-            </div>
+              <hotelCard class="absolute" style="left: 0;top: 20px;"></hotelCard></div>
           </q-td>
           <q-td>
             <div class="td-item">{{ $t('hotel.table.price') }}</div>

src/components/hotel/list/TableOperation.vue

@@ -199,7 +199,7 @@ export default defineComponent({
         }
         exists.Hotels.push(temp)
         cars.value.sort((x:any,y:any)=>{
-          return new Date(x.Date).getDate()-new Date(y.Date).getDate()
+          return new Date(x.Date).getTime()-new Date(y.Date).getTime()
         })
         message.successMsg(t('success'))
         editor.value={}

src/i18n/zh-TW/index.ts

@@ -164,6 +164,11 @@ export default {
     time: "h"
   },
   hotel: {
+    newDateOrder:'新日期預定',
+    newDateTips:'請先選擇需要預訂的日期',
+    newHotelBtn:'選擇酒店',
+    addRoomBtn:'操作',
+    addRoom:'選擇',
     groupPrice:"合計",
     pageTitle: "酒店檢索",
     area: "檢索區域",