no message

src/components/vehicle/list/ListHeader.vue

+<template>
+  <div class="rounded-borders bg-white row items-center q-pa-md q-my-md">
+    <q-input v-if="$q.platform.is.desktop" v-model="searchClone.UseCompName" class="col-2 q-mr-md" reverse-fill-mask dense type="text" standout :label="$t('v102.vehicle.list.s1')" />
+    <q-input v-if="$q.platform.is.desktop" v-model="searchClone.TeamName" class="col-2 q-mr-md" reverse-fill-mask dense type="text" standout :label="$t('v102.vehicle.list.s3')" />
+    <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>
+      <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-my-md" v-if="$q.platform.is.mobile">
+              <q-input v-model="searchClone.UseCompName" class="col-2 q-mr-md" reverse-fill-mask dense type="text" standout :label="$t('v102.vehicle.list.s1')" />
+            </div>
+            <div class="q-my-md">
+              <q-input v-model="searchClone.UseName" class="col-2 q-mr-md" reverse-fill-mask dense type="text" standout :label="$t('v102.vehicle.list.s2')" />
+            </div>
+            <div class="q-my-md" v-if="$q.platform.is.mobile">
+              <q-input v-model="searchClone.TeamName" class="col-2 q-mr-md" reverse-fill-mask dense type="text" standout :label="$t('v102.vehicle.list.s3')" />
+            </div>
+            
+            <div class="q-my-md" v-if="$q.platform.is.mobile">
+              <q-field stack-label :label="$t('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>
+          </q-card>
+        </q-popup-proxy>
+    </q-btn>
+    <q-btn v-if="$q.platform.is.desktop" color="primary" unelevated :label="$t('query')" @click="setSearchHandler"/>
+    <q-btn v-else color="primary" :round="$q.platform.is.mobile" :dense="$q.platform.is.mobile" :icon="$q.platform.is.mobile?'search':''" unelevated :label="$q.platform.is.mobile?'':$t('query')" @click="setSearchHandler"/>
+    <q-btn class="q-ml-sm" color="primary" unelevated :label="$t('v102.CharteredBus.td')" @click="goUrl"/>
+  </div>
+</template>
+
+<script lang="ts">
+import svgIcon from '../../global/svg-icon.vue'
+import { date } from 'quasar'
+import { useQuasar } from 'quasar'
+import { computed, ref, inject, reactive, toRefs } from 'vue'
+import { DirtionmaryHelper } from 'src/config/dictionary'
+import CharteredBusService from 'src/api/CharteredBus'
+import { CascaderOption, NCascader } from 'naive-ui'
+import { ApiResult } from 'src/@types/enumHelper'
+import message from 'src/utils/message'
+import { useHotel } from '../../../utils/hotelRate'
+import { useRouter } from 'vue-router'
+export default {
+  components: { svgIcon, NCascader },
+  setup(props) {
+    const $q = useQuasar()
+    const $router = useRouter()
+    const qDateProxy = ref(null) as any
+    const data = reactive({
+      dateRange: {} as any,
+      dateRangeFormat: '',
+      CharteredBusType: useHotel.getCharteredBusType(),
+      provinces: [] as any,
+      cascader: {
+        addressValue: null,
+        AirportValue: null
+      } as any,
+      searchClone:{} as any,
+      canHide: false,
+      AirportList: [] as any
+    })
+    
+
+    const search = inject(DirtionmaryHelper.TICKET_QUERY_PARAM) as any
+    data.dateRange.from = date.formatDate(date.addToDate(new Date(), { days: 1 }), 'YYYY/MM/DD')
+    data.dateRange.to = date.formatDate(date.addToDate(new Date(), { days: 10 }), 'YYYY/MM/DD')
+    data.dateRangeFormat = `${data.dateRange.from} - ${data.dateRange.to}`
+
+    data.searchClone = JSON.parse(JSON.stringify(search.msg))
+
+    data.searchClone.StartTime = data.dateRange.from
+    data.searchClone.EndTime = data.dateRange.to
+    const methods = {
+      goUrl(){
+        $router.push({ path:`/vehicle/addEditVehicle`})
+      },
+      changearea(e: number, option: any, pathValues: Array<any>) {
+        data.searchClone.Q_Province = 0
+        data.searchClone.Q_City = 0
+        if (pathValues) {
+          if (pathValues.length > 0) {
+            data.searchClone.Q_Province = pathValues[0].ID
+          }
+          if (pathValues.length > 1) {
+            data.searchClone.Q_City = pathValues[1].ID
+          }
+        }
+        methods.initAirport()
+      },
+      changeareaAirport(e: number, option: any, pathValues: Array<any>) {
+        data.searchClone.Q_AirportId = 0
+        if (pathValues) {
+          if (pathValues.length > 0) {
+            // data.searchClone.Q_Province = pathValues[0].ID
+          }
+          if (pathValues.length > 1) {
+            data.searchClone.Q_AirportId = pathValues[1].ID
+          }
+        }
+      },
+      setSearchHandler(){
+        search.msg = JSON.parse(JSON.stringify(data.searchClone))
+      },
+      changeViewHandler(t:number){
+        data.searchClone.ViewType = t
+        methods.setSearchHandler()
+      },
+      dateRangeHandler(e: any) {
+        data.searchClone.StartTime = `${e.from.year}/${e.from.month}/${e.from.day}`
+        data.searchClone.EndTime = `${e.to.year}/${e.to.month}/${e.to.day} `
+        data.dateRangeFormat = `${data.searchClone.StartTime} - ${data.searchClone.EndTime} `
+        if (qDateProxy.value) qDateProxy.value.hide()
+      },
+      optionsFn(cd: any) {
+        return cd >= date.formatDate(date.addToDate(new Date(), { days: 1 }), 'YYYY/MM/DD')
+      },
+    }
+    const searchCnt = computed(() => {
+      let setCnt = 0
+      if ($q.platform.is.mobile) {
+        if (data.searchClone.UseCompName > 0) setCnt++
+        if (data.searchClone.TeamName > 0) setCnt++
+        if (data.dateRangeFormat.length>0) setCnt++
+      }
+      if (data.searchClone.UseName>0) setCnt++
+      return setCnt
+    })
+    
+    return {
+      qDateProxy,
+      searchCnt,
+      ...toRefs(data),
+      ...methods
+    }
+  }
+}
+</script>
+
+<style></style>