包机服务

src/pages/travel/components/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"  style="min-width: 150px" v-model="search.B2BSelectOrderState"  @update:model-value="setOrderStatus" dense :options="status" emit-value option-label="StatusName" option-value="StatusId" map-options :label="$t('hotelorder.search.status')" standout />
-    <q-input class="q-mr-md" v-model="search.HotelName" dense standout :label="$t('v101.scatteredOrderList.first')"/>
+    <q-field :class="$q.platform.is.desktop ? '' : 'q-mb-md'" 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>
+      <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>
+    <q-input class="q-mr-md q-ml-md" v-model="search.TCID" dense standout label="团号"/>
     <div class="col"></div>
     <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.B2BSelectOrderState" 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 { getScatteredHotelOrderStatus, getHotelOrderType, getHotelRoomType } from '../../../utils/tools'
-import { date,useQuasar } from 'quasar'
+import { defineComponent, inject, reactive, ref } from 'vue'
+import { date } from 'quasar'
 
 export default defineComponent({
   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.TRAVEL_ORDER_OBJ) as any
     const search = reactive(JSON.parse(JSON.stringify(realSearch)))
+    const dateRange = reactive({from: '', to: ''})
+    dateRange.to = date.formatDate(date.addToDate(new Date(), { days: 50 }), 'YYYY/MM/DD')
+    dateRange.from = date.formatDate(date.addToDate(new Date(), { days: 20 }), 'YYYY/MM/DD')
+    const dateRangeFormat = ref(`${dateRange.from} - ${dateRange.to}`)
+    search.StartTime = dateRange.from
+    search.EndTime = dateRange.to
     const methods = {
-      initStatus() {
-        let allStatus = getScatteredHotelOrderStatus()
-        data.status = allStatus.filter((x: StandardStatus) => {
-          return x.StatusId != 4
-        })
-        data.cancelStatus = allStatus.find((x: StandardStatus) => {
-          return x.StatusId == 4
-        })
-        data.rooms = getHotelRoomType(true)
-        data.orderTypes = getHotelOrderType(true)
-      },
-      optionsFn(cd: any) {
-        return cd < date.formatDate(date.addToDate(new Date(), { days: 1 }), 'YYYY/MM/DD')
+      setQueryHandler(){
+        realSearch.StartTime=search.StartTime
+        realSearch.EndTime=search.EndTime
+        realSearch.TCID=search.TCID
       },
       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} `
+        dateRangeFormat.value = `${search.StartTime} - ${search.EndTime} `
         if (qDateProxy.value) qDateProxy.value.hide()
       },
-      setQueryHandler(){
-        realSearch.B2BSelectOrderState=search.B2BSelectOrderState
-        realSearch.CustomerId=search.CustomerId
-        realSearch.HotelName=search.HotelName
+      optionsFn(cd: any) {
+        return cd >= date.formatDate(date.addToDate(new Date(), { days: 20 }), 'YYYY/MM/DD')
       },
-      setOrderStatus(statusId:number){
-        realSearch.B2BSelectOrderState=statusId
-      }
     }
-
-    const searchCnt = computed(() => {
-      let setCnt = 0
-      if ($q.platform.is.mobile) {
-        if (realSearch.HotelName) setCnt++
-      }
-      return setCnt
-    })
-
-    methods.initStatus()
     return {
-      ...toRefs(data),
       ...methods,
       search,
-      searchCnt
+      dateRange,
+      dateRangeFormat
+      
     }
   }
 })