Skip to content

B
bigwood
Commit c5efc745 authored by 罗超's avatar 罗超
Browse files
Options

调整表格

parent 94f3f544
Hide whitespace changes
Inline Side-by-side
Showing with 36 additions and 196 deletions
src/pages/hotel/HotelList.vue
View file @ c5efc745
<template> <template>
<div class="rounded-borders bg-white row items-center q-pa-md"> <div class="fix-height-subpage column no-wrap q-pa-md">
<n-cascader v-if="$q.platform.is.desktop" class="col-2 no-border" @update:value="changearea" <list-header></list-header>
v-model:value="cascader.addressValue" size="large" :placeholder="$t('hotel.area')" clearable <div class="light-shadow col q-mt-md q-pa-md bg-white rounded-border">
check-strategy="all" :options="provinces" value-field="ID" label-field="Name" remote :on-load="loadChilds" <list-table></list-table>
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>
<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 @compositionstart="onCompositionStart" @compositionend="onCompositionEnd" class="q-ml-lg col-2"
v-model="hotelName" @update:model-value="changeHotelNameHnadler" type="text" :label="$t('hotel.searchName')" dense
standout style="min-width: 190px">
<q-popup-proxy class="no-shadow" ref="qNameProxy" v-if="cacheHotels.length > 0">
<q-card class="q-pa-sm" flat dark>
<q-list>
<q-item class="rounded-borders" clickable v-ripple v-for="(x, i) in cacheHotels">
<q-item-section>
<div class="row">
<div class="f12 dark col">{{ x.langName }}</div>
</div>
</q-item-section>
</q-item>
</q-list>
</q-card>
</q-popup-proxy>
<template v-slot:append>
<q-spinner-tail color="grey" v-if="loading" />
</template>
</q-input>
<div class="col"></div>
<q-btn unelevated class="bg-grey-3 hover q-mr-md" :title="$t('morequery')">
<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]">
<q-card class="q-pa-md rounded-borders" style="width:300px">
<div class="q-mb-md text-subtitle2">{{ $t('morequery') }}</div>
<div>
<n-cascader v-if="$q.platform.is.mobile" @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 />
</div>
<div class="q-my-md">
<q-field v-if="$q.platform.is.mobile" stack-label :label="$t('daterange')" outlined
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 color="primary" unelevated :label="$t('query')" />
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
...@@ -68,145 +13,40 @@ import { DateTimeFormatResult, useI18n } from 'vue-i18n' ...@@ -68,145 +13,40 @@ import { DateTimeFormatResult, useI18n } from 'vue-i18n'
import svgIcon from '../../components/global/svg-icon.vue' import svgIcon from '../../components/global/svg-icon.vue'
import { inject, provide, reactive, ref, toRefs } from 'vue' import { inject, provide, reactive, ref, toRefs } from 'vue'
import { DirtionmaryHelper } from '../../config/dictionary' import { DirtionmaryHelper } from '../../config/dictionary'
import HotelService from '../../api/hotel' import ListHeader from '../../components/hotel/list/ListHeader.vue'
import message from '../../utils/message' import ListTable from '../../components/hotel/list/List-Table.vue'
import { ApiResult } from '../../@types/enumHelper'
import { CascaderOption } from 'naive-ui'
import { date } from 'quasar'
export default { export default {
components: { svgIcon }, components: { svgIcon, ListHeader, ListTable },
setup() { setup() {
const qDateProxy = ref(null) as any const data = reactive({})
const qNameProxy = ref(null) as any
const data = reactive({
addressParams: {
Id: '651'
},
provinces: [],
search: {
HotelChooseArray: [],
StartDate: '',
EndDate: '',
Country: '651',
Province: 0,
City: 0,
OutBranchId: -1,
Star: 0,
PriceLevel: 0,
Supplier: 0
},
cascader: {
addressValue: null
} as any,
dateRange: {} as any,
dateRangeFormat: '',
hotelName: '',
loading: false,
cacheHotels: [] as Array<any>,
lockInput: false
})
let { setTitle } = useMetaModule() let { setTitle } = useMetaModule()
const { locale, t } = useI18n() const { locale, t } = useI18n()
const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any
pageTitle.value = t('hotel.pageTitle') pageTitle.value = t('hotel.pageTitle')
setTitle(pageTitle.value) setTitle(pageTitle.value)
data.dateRange.to = date.formatDate(date.addToDate(new Date(), { days: 37 }), 'YYYY/MM/DD') const search = reactive({
data.dateRange.from = date.formatDate(date.addToDate(new Date(), { days: 7 }), 'YYYY/MM/DD') HotelChooseArray: [],
data.dateRangeFormat = `${data.dateRange.from} - ${data.dateRange.to}` StartDate: '',
data.search.StartDate = data.dateRange.from EndDate: '',
data.search.EndDate = data.dateRange.to Country: '651',
let timer = null as any Province: 0,
City: 0,
const methods = { OutBranchId: -1,
initAddress() { Star: 0,
HotelService.GetDestination(data.addressParams) PriceLevel: 0,
.then(r => { Supplier: 0,
if (r.data.resultCode == ApiResult.SUCCESS) { MaxPrice:'',
r.data.data.forEach((x: any) => { MinPrice:''
x.isLeaf = false })
x.depth = 1 provide(DirtionmaryHelper.HOTEL_QUERY_PARAM, search)
}) const methods = {}
data.provinces = r.data.data return {
} else { ...toRefs(data),
message.errorMsg(r.data.message) ...methods
}
})
.catch(e => {
message.errorMsg(e.message)
})
},
loadChilds(option: CascaderOption) {
return new Promise<void>(resolve => {
console.log('innnnnnn', option)
HotelService.GetDestination({ Id: option.ID })
.then(r => {
if (r.data.resultCode == ApiResult.SUCCESS) {
r.data.data.forEach((x: any) => {
x.isLeaf = true
x.depth = 2
})
option.children = r.data.data
resolve()
} else {
message.errorMsg(r.data.message)
resolve()
}
})
.catch(e => {
message.errorMsg(e.message)
resolve()
})
})
},
dateRangeHandler(e: any) {
data.search.StartDate = `${e.from.year}/${e.from.month}/${e.from.day}`
data.search.EndDate = `${e.to.year}/${e.to.month}/${e.to.day} `
data.dateRangeFormat = `${data.search.StartDate} - ${data.search.EndDate} `
if (qDateProxy.value) qDateProxy.value.hide()
},
optionsFn(cd: any) {
return cd >= date.formatDate(date.addToDate(new Date(), { days: 7 }), 'YYYY/MM/DD')
},
changearea(e: number, option: any, pathValues: Array<any>) {
data.search.Province = 0
data.search.City = 0
if (pathValues.length > 0) {
data.search.Province = pathValues[0].ID
} else if (pathValues.length > 1) {
data.search.City = pathValues[1].ID
}
},
changeHotelNameHnadler(val: any) {
if(!data.lockInput){
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
console.log(data.hotelName)
}, 1000);
}
},
onCompositionStart() {
data.lockInput = true;
},
onCompositionEnd(e: any) {
console.log('.......')
// 输入中文触发
data.lockInput = false;
// 在调用
this.changeHotelNameHnadler(e);
},
}
methods.initAddress()
return {
...toRefs(data),
...methods,
qDateProxy,
qNameProxy
}
} }
}
} }
</script> </script>
<style> <style></style>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment