解決衝突

src/@types/index.ts

@@ -199,3 +199,21 @@ export type EditCloudRoleItemType = {
   toolId: number
   cloudRoleId: number
 }
+
+export type StandardStatus = {
+  StatusId:number,
+  StatusName:string,
+  Icon?:string,
+  Color?:string,
+  BgColor?:string
+}
+
+export type RoomType = {
+  TypeId:number,
+  TypeName:string
+}
+
+export type OrderType={
+  TypeId:number,
+  TypeName:string
+}
\ No newline at end of file

src/App.vue

@@ -18,7 +18,7 @@ export default defineComponent({
   top: 0
   bottom: 0
 .light-shadow
-  box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.02)
+  box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.02) !important
 @font-face
     // 苹方字体
     font-family: 'pf'

src/api/hotel.ts

@@ -27,6 +27,15 @@ class HotelService {
     return request('dict_post_HotelOffer_GetClientHotelStatics',param)
   }
 
+  /**
+   * 查詢當前登入用戶的酒店訂單信息
+   * @param param 
+   * @returns 
+   */
+  static async GetHotelOrders(param:any):Promise<HttpResponse>{
+    return request('dict_post_GetMyCustomerOrderPageList',param)
+  }
+
   /**
    * 查詢酒店信息
    * @param name 酒店名稱，支持空格分割

src/components/global/svg-icon.vue

@@ -60,7 +60,10 @@ svg g [fill]{
   transition: fill 0.3s ease;
   fill: #3699FF !important;
 }
-
+.svg-red g [fill]{
+  transition: fill 0.3s ease;
+  fill: red !important;
+}
 .svg-icon-success g [fill] {
   transition: fill 0.3s ease;
   fill: #50cd89 !important;

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

+<template>
+  <div class="rounded-borders bg-white row items-center q-pa-md">
+    <q-select v-if="$q.platform.is.desktop" class="q-mr-md" v-model="search.OrderStatus" dense :options="status" emit-value option-label="StatusName" option-value="StatusId" map-options :label="$t('hotelorder.search.status')" standout />
+    <q-input v-if="$q.platform.is.desktop" class="q-mr-md" v-model="search.OrderNo" dense standout :label="$t('hotelorder.search.orderNum')" />
+    <q-field v-if="$q.platform.is.desktop" clearable v-model="dateRangeFormat" :label="$t('hotelorder.search.daterange')" standout class="col-2" style="min-width: 190px" dense>
+      <div class="self-center full-width no-outline" tabindex="0">{{ dateRangeFormat }}</div>
+      <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
+        <q-date v-model="dateRange" :options="optionsFn" range mask="YYYY/MM/DD" landscape @range-end="dateRangeHandler"></q-date>
+      </q-popup-proxy>
+    </q-field>
+    <div class="col"></div>
+    <q-btn unelevated class="bg-grey-3 hover q-mr-md" :title="$t('morequery')">
+      <q-badge rounded class="din bg-red-2 text-red-14 text-weight-bold" floating :label="searchCnt" v-if="searchCnt > 0" />
+      <svg-icon color="dark" icon="Text/Filter.svg" :tips="$t('morequery')" :size="20"></svg-icon>
+      <q-tooltip>{{ $t('morequery') }}</q-tooltip>
+      <q-popup-proxy class="no-shadow" style="box-shadow: 0 0 50px #ddd !important" :offset="[0, 20]" :model-value="canHide">
+        <q-card class="q-pa-md rounded-borders" style="width: 300px">
+          <div class="q-mb-md text-subtitle2">{{ $t('morequery') }}</div>
+          <div class="q-mt-md row">
+            <q-input v-model="search.OrderNo" dense standout :label="$t('hotelorder.search.orderNum')" class="mobile-only col q-mr-md" />
+            <q-input v-model="search.OrderId" dense standout :label="$t('hotelorder.search.orderId')" class="col" />
+          </div>
+          <div class="mobile-only q-mt-md">
+            <q-field clearable v-model="dateRangeFormat" :label="$t('hotelorder.search.daterange')" standout style="min-width: 190px" dense>
+              <div class="self-center full-width no-outline" tabindex="0">{{ dateRangeFormat }}</div>
+              <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
+                <q-date v-model="dateRange" :options="optionsFn" range mask="YYYY/MM/DD" @range-end="dateRangeHandler"></q-date>
+              </q-popup-proxy>
+            </q-field>
+          </div>
+          <q-select class="q-mt-md" v-model="search.RoomType" dense :options="rooms" emit-value option-label="TypeName" option-value="TypeId" map-options :label="$t('hotelorder.search.roomType')" standout />
+          <q-select class="q-mt-md" v-model="search.OrderType" dense :options="orderTypes" emit-value option-label="TypeName" option-value="TypeId" map-options :label="$t('hotelorder.search.orderType')" standout />
+          <q-input v-model="search.TCNum" dense standout :label="$t('hotelorder.search.tcNum')" class="q-mt-md" v-if="search.OrderType==2"/>
+          <q-input v-model="search.ContactName" :placeholder="$t('hotelorder.search.contactInfoHolder')" dense standout :label="$t('hotelorder.search.contactInfo')" class="q-mt-md" v-if="search.OrderType==1"/>
+        </q-card>
+      </q-popup-proxy>
+    </q-btn>
+    <q-btn unelevated class="bg-blue-1 text-primary hover q-mr-md" :label="$t('hotelorder.recovery')" />
+    <q-btn color="primary" unelevated :label="$t('query')"  @click="setQueryHandler"/>
+  </div>
+  <div class="rounded-borders bg-white q-pa-sm q-mt-md mobile-only">
+    <q-tabs v-model="search.OrderStatus" class="text-cyan" dense>
+      <q-tab :name="x.StatusId" :label="x.StatusName" v-for="x in status" @click="setOrderStatus(x.StatusId)"/>
+    </q-tabs>
+  </div>
+</template>
+
+<script lang="ts">
+import { DirtionmaryHelper } from '../../../../config/dictionary'
+import { computed, defineComponent, inject, reactive, ref, toRefs } from 'vue'
+import { OrderType, RoomType, StandardStatus } from '../../../../@types'
+import { getHotelOrderStatus, getHotelOrderType, getHotelRoomType } from '../../../../utils/tools'
+import { date,useQuasar } from 'quasar'
+import svgIcon from '../../../global/svg-icon.vue'
+
+export default defineComponent({
+  components: { svgIcon },
+  setup(props) {
+    const qDateProxy = ref(null) as any
+    const $q = useQuasar()
+
+    const data = reactive({
+      status: [] as Array<StandardStatus>,
+      cancelStatus: {} as StandardStatus | undefined,
+      dateRangeFormat: '',
+      dateRange: {} as any,
+      rooms: [] as Array<RoomType>,
+      orderTypes: [] as Array<OrderType>,
+      canHide: false
+    })
+    const realSearch = inject(DirtionmaryHelper.HOTEL_ORDER_SEARCH) as any
+    const search = reactive(JSON.parse(JSON.stringify(realSearch)))
+    const methods = {
+      initStatus() {
+        let allStatus = getHotelOrderStatus()
+        data.status = allStatus.filter((x: StandardStatus) => {
+          return x.StatusId != 3
+        })
+        data.cancelStatus = allStatus.find((x: StandardStatus) => {
+          return x.StatusId == 3
+        })
+        data.rooms = getHotelRoomType(true)
+        data.orderTypes = getHotelOrderType(true)
+      },
+      optionsFn(cd: any) {
+        return cd < date.formatDate(date.addToDate(new Date(), { days: 1 }), 'YYYY/MM/DD')
+      },
+      dateRangeHandler(e: any) {
+        search.StartTime = `${e.from.year}/${e.from.month}/${e.from.day}`
+        search.EndTime = `${e.to.year}/${e.to.month}/${e.to.day} `
+        data.dateRangeFormat = `${search.StartTime} - ${search.EndTime} `
+        if (qDateProxy.value) qDateProxy.value.hide()
+      },
+      setQueryHandler(){
+        realSearch.OrderId=search.OrderId
+        realSearch.RoomType=search.RoomType
+        realSearch.StartTime=search.StartTime
+        realSearch.EndTime=search.EndTime
+        realSearch.OrderStatus=search.OrderStatus
+        realSearch.OrderNo=search.OrderNo
+        realSearch.OrderType=search.OrderType
+        realSearch.TCNum=search.TCNum
+        realSearch.ContactName=search.ContactName
+        realSearch.ContactNumber=search.ContactName
+        console.log(realSearch)
+      },
+      setOrderStatus(statusId:number){
+        realSearch.OrderStatus=statusId
+      }
+    }
+
+    const searchCnt = computed(() => {
+      let setCnt = 0
+      if ($q.platform.is.mobile) {
+        if (search.OrderStatus > 0) setCnt++
+        if (search.StartTime.length > 0) setCnt++
+        if (search.OrderNo > 0) setCnt++
+      }
+      if (search.OrderId.length>0) setCnt++
+      if (search.RoomType > 0) setCnt++
+      if (search.OrderType > 0) setCnt++
+      if (search.OrderType == 1 && search.ContactName.length>0) setCnt++
+      if (search.OrderType == 2 && search.TCNum.length>0) setCnt++
+      return setCnt
+    })
+
+    methods.initStatus()
+    return {
+      ...toRefs(data),
+      ...methods,
+      search,
+      searchCnt
+    }
+  }
+})
+</script>
+
+<style></style>

src/config/dictionary.ts

@@ -22,5 +22,10 @@ class DirtionmaryHelper {
 	 * 购物车参数
 	 */
 	 static readonly HOTEL_CAR_LIST = 'hotelcarlist'
+
+	 /**
+	 * 酒店订单查询条件
+	 */
+	static readonly HOTEL_ORDER_SEARCH = 'hotelordersearch'
 }
 export { userDictionmary,DirtionmaryHelper }

src/i18n/zh-TW/index.ts

@@ -16,6 +16,85 @@ export default {
   query: '檢索',
   noneData: '沒有找到相關的數據',
   loading: '正在加載數據',
+  unit: {
+    jian: '間',
+    ren: '人',
+    jp: '円',
+    jpc: '¥'
+  },
+  expends:{
+    on:'展開',
+    off:'收起'
+  },
+  hotelorder: {
+    pay: {
+      t1: '出發前收款酒店，請您於 <span class="text-orange">{d}</span> 前支付訂金，並且於 <span class="text-negative">{e}</span> 日前支付尾款',
+      t2: '到店自付酒店，需要您於 <span class="text-negative">{e}</span> 前上傳旅客名單'
+    },
+    payinfo: '查看支付方式',
+    sendpay: '提繳付款憑證',
+    uploadGuest: '上傳旅客名單',
+    pageTitle: '酒店訂單',
+    recovery: '訂單回收站',
+    copy: '複製',
+    copyed: '已複製',
+    createTime: '下訂時間',
+    priceTips: '按照入住人數*房型單價=房型總價小計（不含稅）',
+    people: '人數',
+    unitPrice: '單價',
+    xj: '小計',
+    orderMoney: '訂單總金額',
+    payed: '已支付',
+    warn:'查看預定的注意事項',
+
+    check: {
+      un: '未確認',
+      ok: '確認'
+    },
+    opera: {
+      normal: '訂單操作',
+      cancel: '取消訂單',
+      edit: '訂單變更',
+      view: '查看詳情'
+    },
+    payType: {
+      t1: '到店自付',
+      t2: '出發前付款'
+    },
+    col: {
+      hn: '酒店名稱',
+      d: '入住日期',
+      r: '入住信息',
+      n: '訂房號',
+      t: '稅金',
+      m: '小計',
+      noRoomNo: '訂房號',
+      noneTax: '税入'
+    },
+    search: {
+      status: '訂單狀態',
+      orderNum: '訂單編號',
+      daterange: '下單時間',
+      roomType: '酒店房型',
+      orderId: '訂單流水號',
+      orderType: '訂單類型',
+      tcNum: '組團號',
+      contactInfo: '聯繫人信息',
+      contactInfoHolder: '請輸入聯繫人/聯繫電話'
+    },
+    orderType: {
+      default: '所有類型',
+      tour: '團隊訂房',
+      guest: '散拼訂房'
+    },
+    orderStatus: {
+      normal: '全部訂單',
+      apply: '待確認',
+      check: '已確認',
+      cancel: '已取消',
+      sun: '收損訂單'
+    }
+  },
   dayOfWeek: {
     mon: '一',
     tues: '二',
@@ -38,12 +117,12 @@ export default {
     hotelRate: '酒店星級',
     minPrice: '最低價格',
     maxPrice: '最高價格',
-    car:{
+    car: {
       shoppingTitle: '購物車',
       addShopping: '加入購物車',
       orderTitle: '訂單',
       people: '人',
-      between: '间',
+      between: '间'
     },
     shopping:{
       labelNum: '房數',
@@ -57,32 +136,34 @@ export default {
       driverRoom: '司機間',
       only: '僅剩',
       between: '間',
-      TheSelected: '已选',
+      TheSelected: '已选'
     },
     pricetips: '酒店報價表',
-    buy:'預定',
+    buy: '預定',
     table: {
       price: '價格',
       ins: '總/用/剩',
       limit: '超定'
     },
-    rooms:{
-      big:'大床房',
-      sing:'自然單間',
-      three:'三人間',
-      driver:'司導間'
+    rooms: {
+      default: '全部房型',
+      normal: '標準間',
+      big: '大床房',
+      sing: '自然單間',
+      three: '三人間',
+      driver: '司導間'
     },
     col: {
       first: '酒店名稱',
       second: '價格&庫存',
       three: '總庫存',
-      four:'價格',
-      five:'標準間價格',
-      low:'起',
-      ins:'庫存',
-      sins:'剩餘庫存',
-      uins:'已預訂',
-      more:'更多房型報價'
+      four: '價格',
+      five: '標準間價格',
+      low: '起',
+      ins: '庫存',
+      sins: '剩餘庫存',
+      uins: '已預訂',
+      more: '更多房型報價'
     },
     datetype: {
       red: '紅日',

src/pages/hotel/HotelOrder.vue

+<template>
+  <div class="fix-height-subpage column no-wrap q-pa-md">
+    <order-list-header></order-list-header>
+    <div class="col q-mt-md">
+      <order-list></order-list>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { inject, provide, reactive, toRefs } from 'vue';
+import useMetaModule from '../../module/meta/metaModule'
+import { useI18n } from 'vue-i18n'
+import { DirtionmaryHelper } from '../../config/dictionary';
+import OrderListHeader from '../../components/hotel/order/list/OrderListHeader.vue';
+import OrderList from '../../components/hotel/order/list/OrderList.vue';
+
+export default {
+  components: { OrderListHeader, OrderList },
+    setup(props) {
+        console.log(' in ')
+        let { setTitle } = useMetaModule()
+        const { t } = useI18n()
+        const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any
+        pageTitle.value = t('hotelorder.pageTitle')
+        setTitle(pageTitle.value)
+
+        const search=reactive({
+          OrderId:'',
+          OrderNo:'',
+          OrderStatus: 0,
+          StartTime:'',
+          EndTime:'',
+          RoomType:0,
+          HotelId:0,
+          OrderType:0,
+          TCNum:'',
+          ContactName:'',
+          ContactNumber:''
+        })
+        provide(DirtionmaryHelper.HOTEL_ORDER_SEARCH,search)
+
+        const data = reactive({})
+        const methods = {}
+
+        return {...toRefs(data),...methods,search}
+    }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/router/routes.ts

 import { RouteRecordRaw } from 'vue-router'
 
 const routes: RouteRecordRaw[] = [
-	{
-		path: '/index',
-		component: () => import('../layouts/MainLayout.vue'),
-		children: [
-			{ path: '', component: () => import('../pages/Index.vue') },
-		{ path: '/hotel', component: () => import('../pages/hotel/HotelList.vue') }]
-	},
-	{
-		path:'/auth/login',
-		component: () => import('../pages/auth/login.vue')
-	},
-	{
-		path:'/auth/regist',
-		component: () => import('../pages/auth/regist.vue')
-	},
-	{
-		path:'/auth/forget',
-		component: () => import('../pages/auth/forget.vue')
-	},
-	{
-		path:'/auth/newpassword/:code',
-		component: () => import('../pages/auth/newpassword.vue')
-	},
-	// Always leave this as last one,
-	// but you can also remove it
-	{
-		path: '/:catchAll(.*)*',
-		component: () => import('../pages/Error404.vue')
-	}
+  {
+    path: '/index',
+    component: () => import('../layouts/MainLayout.vue'),
+    children: [
+      { path: '', component: () => import('../pages/Index.vue') },
+      { path: '/hotel', component: () => import('../pages/hotel/HotelList.vue') },
+	  { path: '/hotel/order', component: () => import('../pages/hotel/HotelOrder.vue') }
+    ]
+  },
+  {
+    path: '/auth/login',
+    component: () => import('../pages/auth/login.vue')
+  },
+  {
+    path: '/auth/regist',
+    component: () => import('../pages/auth/regist.vue')
+  },
+  {
+    path: '/auth/forget',
+    component: () => import('../pages/auth/forget.vue')
+  },
+  {
+    path: '/auth/newpassword/:code',
+    component: () => import('../pages/auth/newpassword.vue')
+  },
+  // Always leave this as last one,
+  // but you can also remove it
+  {
+    path: '/:catchAll(.*)*',
+    component: () => import('../pages/Error404.vue')
+  }
 ]
 
 export default routes

src/utils/menus.ts

@@ -26,7 +26,7 @@ const useMenus={
                 },
                 {
                     name:t('menu.hotel.three'),
-                    url:'',
+                    url:'/hotel/order',
                     id:3,
                     parentId:1,
                 }

src/utils/tools.ts

-import { SitLang } from './../@types/index';
+import { SitLang, StandardStatus, RoomType, OrderType } from './../@types/index';
 import { i18n } from '../boot/i18n'
 const {t} =i18n.global
 /**
@@ -45,6 +45,24 @@ export function getDayOfWeek(day:number){
   return weekLang[day-1]
 }
 
+export function getHotelOrderStatus():Array<StandardStatus>{
+  let status=[] as Array<StandardStatus>
+  let text = [t('hotelorder.orderStatus.normal'),t('hotelorder.orderStatus.apply'),t('hotelorder.orderStatus.check'),t('hotelorder.orderStatus.cancel'),t('hotelorder.orderStatus.sun')]
+  let color = ['','positive','dark','orange','negative']
+  let icons = ['','update','done','offline_bolt','cached']
+  text.forEach((x,i:number)=>{
+    status.push({
+      StatusId:i,
+      StatusName:x,
+      Icon:icons[i],
+      Color:`text-${color[i]}`
+    })
+  })
+  
+
+  return status
+}
+
 export function getDateType(){
   let types=[] as Array<DateType>
   types.push({
@@ -87,6 +105,42 @@ export function getDateType(){
   return types
 }
 
+export function getHotelRoomType(getNormal:boolean = false):Array<RoomType>{
+  let rooms = [] as Array<RoomType>
+  if(getNormal){
+    rooms.push({
+      TypeId:0,
+      TypeName:t('hotel.rooms.default')
+    })
+  }
+  let roomLangs=[t('hotel.rooms.normal'),t('hotel.rooms.big'),t('hotel.rooms.sing'),t('hotel.rooms.three'),t('hotel.rooms.driver')]
+  roomLangs.forEach((x:string,i:number)=>{
+    rooms.push({
+      TypeId:(i+1),
+      TypeName:x
+    })
+  })
+  return rooms
+}
+
+export function getHotelOrderType(getNormal:boolean = false):Array<OrderType>{
+  let types = [] as Array<OrderType>
+  if(getNormal){
+    types.push({
+      TypeId:0,
+      TypeName:t('hotelorder.orderType.default')
+    })
+  }
+  let typeLangs=[t('hotelorder.orderType.guest'),t('hotelorder.orderType.tour')]
+  typeLangs.forEach((x:string,i:number)=>{
+    types.push({
+      TypeId:(i+1),
+      TypeName:x
+    })
+  })
+  return types
+}
+
 export function getLangs() {
   const zhTw:SitLang={
     langLocale:"zh-TW",