Skip to content

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

修改訂單

parent 3fca6160
Show whitespace changes
Inline Side-by-side
Showing with 681 additions and 58 deletions
src/@types/index.ts
View file @ 446f37cc
...@@ -211,7 +211,7 @@ export type StandardStatus = { ...@@ -211,7 +211,7 @@ export type StandardStatus = {
export type RoomType = { export type RoomType = {
TypeId:number, TypeId:number,
TypeName:string, TypeName:string,
Filed?:string Field?:string
} }
export type OrderType={ export type OrderType={
......
src/App.vue
View file @ 446f37cc
...@@ -259,4 +259,7 @@ body ...@@ -259,4 +259,7 @@ body
right: 0 right: 0
z-index: 1 z-index: 1
box-shadow: rgba(0, 0, 0, 0.05) -2px 0px 0px box-shadow: rgba(0, 0, 0, 0.05) -2px 0px 0px
.q-dialog__inner--minimized>div
max-width: unset !important
</style> </style>
src/components/hotel/chosen/ChosenHeader.vue 0 → 100644
View file @ 446f37cc
<template>
<div class="rounded-borders bg-white row items-center q-pa-md">
<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>
</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" />
<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" />
<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 v-if="$q.platform.is.mobile">
<n-cascader @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" v-if="$q.platform.is.mobile">
<q-field stack-label :label="$t('daterange')" outlined style="min-width: 190px" dense>
<div class="self-center full-width no-outline" tabindex="0">{{ search.StartDate }} - {{search.EndDate}}</div>
</q-field>
</div>
<div v-if="$q.platform.is.mobile">
<n-select filterable 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>
<div class="q-my-md">
<q-select v-model="search.Star" dense :options="hotelsRates" emit-value option-label="name" option-value="id" map-options clearable :label="$t('hotel.hotelRate')" standout />
</div>
<div class="row items-center">
<q-input v-model="search.MinPrice" class="col q-mr-md" mask="#.##" reverse-fill-mask dense type="text" standout :label="$t('hotel.minPrice')" />
<q-input v-model="search.MaxPrice" class="col" dense mask="#.##" reverse-fill-mask ftype="text" standout :label="$t('hotel.maxPrice')" />
</div>
</q-card>
</q-popup-proxy>
</q-btn>
</div>
</template>
<script lang="ts">
import svgIcon from '../../global/svg-icon.vue'
import { computed, inject, provide, reactive, ref, toRefs, defineComponent, onMounted, watch } from 'vue'
import HotelService from '../../../api/hotel'
import message from '../../../utils/message'
import { ApiResult } from '../../../@types/enumHelper'
import { CascaderOption } from 'naive-ui'
import { date } from 'quasar'
import { HotelRate, useHotel } from '../../../utils/hotelRate'
import { useQuasar } from 'quasar'
import useScrollModule from '../../../module/scrollbar/scrollModule'
import { DirtionmaryHelper } from '../../../config/dictionary'
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'
},
provinces: [],
cascader: {
addressValue: null
} as any,
hotelName: '',
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
data.hotelsRates = useHotel.getHotelRate()
const methods = {
initAddress() {
HotelService.GetDestination(data.addressParams)
.then(r => {
if (r.data.resultCode == ApiResult.SUCCESS) {
r.data.data.forEach((x: any) => {
x.isLeaf = false
x.depth = 1
})
data.provinces = r.data.data
} else {
message.errorMsg(r.data.message)
}
})
.catch(e => {
message.errorMsg(e.message)
})
},
initHotels() {
HotelService.GetHasStockHotelList()
.then(r => {
if (r.data.resultCode == ApiResult.SUCCESS) {
data.cacheHotels = r.data.data
} else {
message.errorMsg(r.data.message)
}
})
.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) {
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
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
}
}
const searchCnt = computed(() => {
let setCnt = 0
if ($q.platform.is.mobile) {
if (search.Province > 0) setCnt++
if (search.StartDate.length > 0) setCnt++
if (search.HotelChooseArray.length > 0) setCnt++
}
if (search.Star != 0) setCnt++
if (search.MaxPrice.length > 0) setCnt++
if (search.MinPrice.length > 0) setCnt++
return setCnt
})
methods.initAddress()
methods.initHotels()
return {
...toRefs(data),
...methods,
qDateProxy,
qNameProxy,
searchCnt,
search
}
}
})
</script>
<style>
</style>
src/components/hotel/chosen/ChosenHotel.vue 0 → 100644
View file @ 446f37cc
<template>
<q-card flat bordered class="q-pa-md bg-white column" style="width:100vw;height: 80vh;">
<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>
</q-card>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import ChosenHeader from "./ChosenHeader.vue";
import ChosenTable from "./ChosenTable.vue";
export default defineComponent({
components: { ChosenHeader, ChosenTable },
setup(props) {
const data=reactive({})
const methods = {}
return {
...toRefs(data),
...methods
}
}
})
</script>
<style>
</style>
src/components/hotel/chosen/ChosenTable.vue 0 → 100644
View file @ 446f37cc
<template>
<div class="full-height column hotel-list">
<q-table v-if="$q.platform.is.desktop" :loading="loading" :rows="hotels" :loading-label="$t('loading')" class="sticky-column-table col sticky-header-column-table hotel-table" flat :pagination="pages" :no-data-label="$t('noneData')">
<template v-slot:top>
<div class="row full-width">
<div class="col"></div>
<div class="flex items-center q-ml-md" v-for="x in dateTypes">
<div class="cos-item-icon rounded-border q-mr-sm" :class="[x.bg]"></div>
<span class="f12">{{ x.text }}</span>
</div>
</div>
</template>
<template v-slot:header>
<q-tr>
<q-th>{{ $t('hotel.col.first') }}</q-th>
<q-th>{{ $t('hotel.col.second') }}</q-th>
<q-th v-for="(x, i) in cols">
{{ x }}
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props">
<q-td>
<div class="ellipsis-3-lines" style="padding: 7px 16px;width: 200px;white-space: break-spaces;">{{ props.row.HotelName }}</div>
</q-td>
<q-td>
<div class="td-item">{{ $t('hotel.table.price') }}</div>
<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)">
<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 }}
<q-tooltip>
<sample-price-list :price="x"></sample-price-list>
</q-tooltip>
</div>
</template>
<div class="td-item bg-dark" v-else></div>
<div class="td-item cursor-pointer">
{{ x.Inventory }}/{{ x.UseInventory }}/{{ x.RemainingInventory }}
</div>
<div class="td-item" :class="{ 'bg-red-9 text-white': x.UseInventory - x.Inventory > 0 }">
<span v-if="x.UseInventory - x.Inventory > 0">
{{ x.UseInventory - x.Inventory }}
</span>
</div>
</q-td>
</q-tr>
</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-table
hide-header
v-else
:rows="hotels"
grid
:columns="mobileCols"
row-key="name"
card-class="no-shadow bg-primary text-white"
:pagination="pages"
:loading="loading"
@row-click="viewHotelPriceListHandler"
>
<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>
</q-dialog>
</div>
</template>
<script lang="ts">
import { ApiResult } from '../../../@types/enumHelper'
import HotelService from '../../../api/hotel'
import { DirtionmaryHelper } from '../../../config/dictionary'
import message from '../../../utils/message'
import { defineComponent, inject, reactive, toRefs, watch } from 'vue'
import { date,useQuasar } from 'quasar'
import { DateType, getDateType, getDayOfWeek } from '../../../utils/tools'
import { useI18n } from 'vue-i18n'
import HotelPriceList from '../list/HotelPriceList.vue'
import SamplePriceList from '../list/SamplePriceList.vue'
export default defineComponent({
components: { HotelPriceList, SamplePriceList },
name: 'list-table',
setup() {
const $q=useQuasar()
const { t } = useI18n()
const search = inject(DirtionmaryHelper.HOTEL_QUERY_PARAM) as any
watch(search, (n, o) => {
if (data.loading) return
data.pages.pageIndex = 1
methods.calcDateRangeCols()
methods.initHotels()
})
const data = reactive({
hotels: [] as Array<any>,
loading: false,
cols: [] as Array<string>,
pages: {
pageIndex: 1,
pageSize: 10,
pageCount: 0,
rowsPerPage: 10
},
pageTitle: '' as (string | undefined),
dateTypes: [] as Array<DateType>,
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')}`}
],
showPriceList:false,
queryHotelObj:{},
orderSubmitObj:{} as any,
orderSubmitItemObj:{} as any,
showOrderPreview: false
})
data.dateTypes = getDateType()
data.pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY)
const methods = {
initHotels() {
data.loading = true
data.hotels = []
let param = Object.assign(data.pages, search)
HotelService.GetHotelList(param)
.then(r => {
if (r.data.resultCode == ApiResult.SUCCESS) {
r.data.data.pageData.forEach((x: any) => {
x.subList.forEach((y: any) => {
y.PriceList.forEach((z: any) => {
z.ins = methods.getDateTypeById(z.InventoryType)
})
let cd=new Date(y.DateStr)
y.FormatDate=`${date.formatDate(cd, 'MM/DD')} (${getDayOfWeek(date.getDayOfWeek(cd))})`
})
if($q.platform.is.mobile){
x.LowerPrice=methods.calcLowerPrice(x)
}
})
data.hotels = r.data.data.pageData
} else {
message.errorMsg(r.data.message)
}
data.pages.pageCount = r.data.data.pageCount
data.loading = false
})
.catch(e => {
message.errorMsg(e.message)
data.loading = false
})
},
calcDateRangeCols() {
data.cols = []
let dateBegin = new Date(search.StartDate)
const dateEnd = new Date(search.EndDate)
while (dateBegin <= dateEnd) {
data.cols.push(`${date.formatDate(dateBegin, 'MM/DD')} (${getDayOfWeek(date.getDayOfWeek(dateBegin))})`)
dateBegin = date.addToDate(dateBegin, { days: 1 })
}
console.log(data.cols)
},
changePageHandler(n: any) {
console.log(n)
data.pages.pageIndex = n
methods.initHotels()
},
getDateTypeById(id: number) {
return data.dateTypes.find(x => x.id == id)
},
calcLowerPrice(hotel:any){
let lower=0
hotel.subList.forEach((x:any)=>{
if(x.PriceList &&x.PriceList.length>0){
x.PriceList.forEach((y:any)=>{
if(y.CostPrice>lower) lower= y.CostPrice
})
}
})
return lower
},
viewHotelPriceListHandler(e:any,row:any,index:number){
data.queryHotelObj = row
data.showPriceList = true
},
showOrderSubmitHandler(row:any,col:any){
data.orderSubmitObj = row
data.orderSubmitItemObj = col
data.showOrderPreview = true
}
}
methods.calcDateRangeCols()
methods.initHotels()
return { ...toRefs(data), ...methods }
}
})
</script>
<style>
.cos-item-icon {
width: 14px;
height: 14px;
border-radius: 4px;
}
.td-item {
width: 100%;
height: 35px;
line-height: 35px;
font-size: 13px;
font-family: 'Microsoft YaHei' !important;
color: var(--q-dark);
text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.td-item:last-child {
border-bottom: none;
}
.hotel-table .q-table td {
padding: 0 !important;
}
/* .td-item.cursor-pointer:hover{
color: var(--q-primary) !important;
} */
</style>
src/components/hotel/list/ListHeader.vue
View file @ 446f37cc
...@@ -94,8 +94,8 @@ export default defineComponent({ ...@@ -94,8 +94,8 @@ export default defineComponent({
data.scrollStyle = useScrollModule().scrollStyle data.scrollStyle = useScrollModule().scrollStyle
const search = inject(DirtionmaryHelper.HOTEL_QUERY_PARAM) as any const search = inject(DirtionmaryHelper.HOTEL_QUERY_PARAM) as any
data.dateRange.to = date.formatDate(date.addToDate(new Date(), { days: 37 }), 'YYYY/MM/DD') data.dateRange.to = date.formatDate(date.addToDate(new Date(), { days: 45 }), 'YYYY/MM/DD')
data.dateRange.from = date.formatDate(date.addToDate(new Date(), { days: 7 }), 'YYYY/MM/DD') data.dateRange.from = date.formatDate(date.addToDate(new Date(), { days: 15 }), 'YYYY/MM/DD')
data.dateRangeFormat = `${data.dateRange.from} - ${data.dateRange.to}` data.dateRangeFormat = `${data.dateRange.from} - ${data.dateRange.to}`
search.StartDate = data.dateRange.from search.StartDate = data.dateRange.from
search.EndDate = data.dateRange.to search.EndDate = data.dateRange.to
...@@ -162,7 +162,7 @@ export default defineComponent({ ...@@ -162,7 +162,7 @@ export default defineComponent({
if (qDateProxy.value) qDateProxy.value.hide() if (qDateProxy.value) qDateProxy.value.hide()
}, },
optionsFn(cd: any) { optionsFn(cd: any) {
return cd >= date.formatDate(date.addToDate(new Date(), { days: 7 }), 'YYYY/MM/DD') return cd >= date.formatDate(date.addToDate(new Date(), { days: 15 }), 'YYYY/MM/DD')
}, },
changearea(e: number, option: any, pathValues: Array<any>) { changearea(e: number, option: any, pathValues: Array<any>) {
search.Province = 0 search.Province = 0
......
src/components/hotel/list/ListTable.vue
View file @ 446f37cc
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<template v-slot:body="props"> <template v-slot:body="props">
<q-tr :props="props"> <q-tr :props="props">
<q-td> <q-td>
<div style="padding: 7px 16px">{{ props.row.HotelName }}</div> <div class="ellipsis-3-lines" style="padding: 7px 16px;width: 200px;white-space: break-spaces;">{{ props.row.HotelName }}</div>
</q-td> </q-td>
<q-td> <q-td>
<div class="td-item">{{ $t('hotel.table.price') }}</div> <div class="td-item">{{ $t('hotel.table.price') }}</div>
...@@ -232,9 +232,7 @@ export default defineComponent({ ...@@ -232,9 +232,7 @@ export default defineComponent({
</script> </script>
<style> <style>
.q-dialog__inner--minimized > div{
max-width: unset !important;
}
.cos-item-icon { .cos-item-icon {
width: 14px; width: 14px;
height: 14px; height: 14px;
......
src/i18n/zh-TW/index.ts
View file @ 446f37cc
...@@ -47,7 +47,10 @@ export default { ...@@ -47,7 +47,10 @@ export default {
}, },
hotelm:{ hotelm:{
pageTitle:"酒店訂單變更", pageTitle:"酒店訂單變更",
otherRoom:"添加其他房型", otherRoom:"使用其他房型",
noneOther:"無其他可用房型",
save:'保存訂單',
cancel:'取消訂單'
}, },
hotelorder: { hotelorder: {
dialog:{ dialog:{
......
src/pages/hotel/ModifyHotelOrder.vue
View file @ 446f37cc
...@@ -3,33 +3,38 @@ ...@@ -3,33 +3,38 @@
<div class="q-py-sm q-px-md rounded-borders bg-white row items-center justify-between f12"> <div class="q-py-sm q-px-md rounded-borders bg-white row items-center justify-between f12">
<div class="f12 text-grey-6">{{ $t('hotelorder.search.orderNum') }}：{{ order.OrderNo }}</div> <div class="f12 text-grey-6">{{ $t('hotelorder.search.orderNum') }}：{{ order.OrderNo }}</div>
<div class="q-pa-sm rounded-border text-orange-10 f12"> <div class="q-pa-sm rounded-border text-orange-10 f12">
{{$t('hotel.car.title')}} {{ $t('hotel.car.title') }}
<span class="din text-orange-10">{{order.DetailList.length}}</span> <span class="din text-orange-10">{{ order.DetailList.length }}</span>
{{$t('hotel.car.title1')}} {{ $t('hotel.car.title1') }}
<span class="din text-primary">{{order.HotelCount}}</span> <span class="din text-primary">{{ order.HotelCount }}</span>
{{$t('hotel.car.title2')}} {{ $t('hotel.car.title2') }}
</div> </div>
<div class="q-ml-md f12" :class="[order.typeInfo.Color]"> <div class="q-ml-md f12" :class="[order.typeInfo.Color]">
<q-icon :name="order.typeInfo.Icon" /> <q-icon :name="order.typeInfo.Icon" />
<span class="q-ml-sm">{{ order.typeInfo.StatusName }}</span> <span class="q-ml-sm">{{ order.typeInfo.StatusName }}</span>
</div> </div>
<div>
<q-btn color="negative" class="q-mr-sm" flat :label="$t('hotelm.cancel')" @click="cancelOrder" />
<q-btn color="primary" unelevated :label="$t('hotelm.save')" />
</div>
</div> </div>
<div class="flex justify-start items-start content-start"> <div class="flex justify-start items-start content-start">
<div class="q-pa-sm rounded-borders bg-white q-mt-md q-mr-md" style="width: 320px" v-for="x in order.DetailList"> <div class="q-pa-sm rounded-borders bg-white q-mt-md q-mr-md" style="width: 320px" v-for="(x, xi) in order.DetailList">
<div class="text-h6 row items-center"> <div class="text-h6 row items-center">
<div class="col">{{ x.key }}</div> <div class="col">{{ x.key }}</div>
<q-btn color="primary" icon="add" class="q-mr-md" rounded dense size="sm" flat /> <q-btn color="primary" icon="add" class="q-mr-md" rounded dense size="sm" flat />
<q-btn color="negative" icon="delete" rounded dense size="sm" flat /> <q-btn color="negative" icon="delete" rounded dense size="sm" flat @click="removeHotelHandler(xi, -1)" />
</div> </div>
<div class="q-pa-sm rounded-borders bg-blue-grey-1 q-mt-sm" v-for="y in x.data"> <div class="q-pa-sm rounded-borders bg-blue-grey-1 q-mt-sm" v-for="(y, yi) in x.data">
<div class="row items-center item-hide-opera" style="border-bottom: 1px dashed #607d8b33"> <div class="row items-center item-hide-opera" style="border-bottom: 1px dashed #607d8b33">
<div class="text-subtitle1 text-primary ellipsis col">{{ y.HotelName }}</div> <div class="text-subtitle1 text-primary ellipsis col">{{ y.HotelName }}</div>
<div class="q-ml-sm opera-box-item"> <div class="q-ml-sm opera-box-item">
<q-btn color="negative" icon="delete" rounded dense size="sm" flat /> <q-btn color="negative" icon="delete" @click="removeHotelHandler(xi, yi)" rounded dense size="sm" flat />
</div> </div>
</div> </div>
<div v-for="(z,i) in y.RoomList" class="q-mb-md"> <template v-for="(z, i) in y.RoomList">
<div v-if="z.IsSelf" class="q-mb-md">
<div class="row no-wrap items-center q-mt-sm f12"> <div class="row no-wrap items-center q-mt-sm f12">
<span class="col"> <span class="col">
{{ z.RoomInfo.TypeName }} {{ z.RoomInfo.TypeName }}
...@@ -37,26 +42,53 @@ ...@@ -37,26 +42,53 @@
</span> </span>
<div class="col"> <div class="col">
<div class="f12 text-grey-6 text-center col"> <div class="f12 text-grey-6 text-center col">
{{$t('hotel.yg')}}<span class="din text-yellow-10">{{z.Number}}</span> {{$t('unit.jf')}} {{ $t('hotel.yg') }}<span class="din text-yellow-10">{{ z.Number }}</span> {{ $t('unit.jf') }}
</div> </div>
<!-- <div>{{$t('hotelorder.xj')}}：{{moneyFormat(z.Money)}}</div> --> <!-- <div>{{$t('hotelorder.xj')}}：{{moneyFormat(z.Money)}}</div> -->
</div> </div>
<span> <span>
<q-input style="width: 90px" v-model="z.PeopleNumber" class="q-pa-none" mask="#" reverse-fill-mask dense standout> <q-input style="width: 90px" v-model="z.PeopleNumber" class="q-pa-none" mask="#" reverse-fill-mask dense standout>
<template v-slot:prepend> <template v-slot:prepend>
<q-btn color="primary" size="sm" class="q-px-none" flat icon="remove" @click="calcPeople(y,i,0)" /> <q-btn color="primary" size="sm" class="q-px-none" flat icon="remove" @click="calcPeople(y, i, 0)" />
</template> </template>
<template v-slot:append> <template v-slot:append>
<q-btn color="primary" size="sm" class="q-px-none" flat icon="add" @click="calcPeople(y,i,1)"/> <q-btn color="primary" size="sm" class="q-px-none" flat icon="add" @click="calcPeople(y, i, 1)" />
</template> </template>
</q-input> </q-input>
</span> </span>
</div> </div>
</div> </div>
<div class="text-right q-mb-sm"> </template>
<span class="q-mr-md f12">暫無其他可用房型</span> <div class="q-mb-sm f12">
<q-btn color="accent" dense outline :label="$t('hotelm.otherRoom')" size="sm" /> <span class="text-blue-grey-4" v-if="!y.HaveOtherRoom">{{ $t('hotelm.noneOther') }}</span>
<span class="text-accent" v-else>{{ $t('hotelm.otherRoom') }}</span>
</div>
<template v-for="(z, i) in y.RoomList">
<div v-if="!z.IsSelf" class="q-mb-md">
<div class="row no-wrap items-center q-mt-sm f12">
<span class="col">
{{ z.RoomInfo.TypeName }}
<div class="text-blue-grey-6">{{ moneyFormat(z.Unit_Price) }}/{{ $t('unit.ren') }}</div>
</span>
<div class="col">
<div class="f12 text-grey-6 text-center col">
{{ $t('hotel.yg') }}<span class="din text-yellow-10">{{ z.Number }}</span> {{ $t('unit.jf') }}
</div>
<!-- <div>{{$t('hotelorder.xj')}}：{{moneyFormat(z.Money)}}</div> -->
</div>
<span>
<q-input style="width: 90px" v-model="z.PeopleNumber" class="q-pa-none" mask="#" reverse-fill-mask dense standout>
<template v-slot:prepend>
<q-btn color="primary" size="sm" class="q-px-none" flat icon="remove" @click="calcPeople(y, i, 0)" />
</template>
<template v-slot:append>
<q-btn color="primary" size="sm" class="q-px-none" flat icon="add" @click="calcPeople(y, i, 1)" />
</template>
</q-input>
</span>
</div>
</div> </div>
</template>
<div class="row items-center justify-between" style="border-top: 1px dashed #607d8b33"> <div class="row items-center justify-between" style="border-top: 1px dashed #607d8b33">
<div class="q-mt-sm text-blue-grey-6">{{ $t('hotelorder.col.t') }}：{{ moneyFormat(y.TaxesPrice) }}/{{ $t('unit.ren') }}</div> <div class="q-mt-sm text-blue-grey-6">{{ $t('hotelorder.col.t') }}：{{ moneyFormat(y.TaxesPrice) }}/{{ $t('unit.ren') }}</div>
<div class="q-mt-sm text-blue-grey-6">{{ $t('hotelorder.col.t2') }}：{{ moneyFormat(y.PriceInTangTax) }}/{{ $t('unit.ren') }}</div> <div class="q-mt-sm text-blue-grey-6">{{ $t('hotelorder.col.t2') }}：{{ moneyFormat(y.PriceInTangTax) }}/{{ $t('unit.ren') }}</div>
...@@ -70,6 +102,9 @@ ...@@ -70,6 +102,9 @@
</div> </div>
</div> </div>
</div> </div>
<q-dialog v-model="showChosenHotel">
<chosen-hotel></chosen-hotel>
</q-dialog>
<q-inner-loading :showing="loading" :label="$t('loading')" label-class="text-grey-6 f12" /> <q-inner-loading :showing="loading" :label="$t('loading')" label-class="text-grey-6 f12" />
<div class="text-center q-mt-xl" v-if="!order && !loading"> <div class="text-center q-mt-xl" v-if="!order && !loading">
...@@ -85,12 +120,16 @@ import HotelService from 'src/api/hotel' ...@@ -85,12 +120,16 @@ import HotelService from 'src/api/hotel'
import { DirtionmaryHelper } from 'src/config/dictionary' import { DirtionmaryHelper } from 'src/config/dictionary'
import { currentRouter } from 'src/router' import { currentRouter } from 'src/router'
import message from 'src/utils/message' import message from 'src/utils/message'
import { defineComponent, inject, reactive, toRefs } from 'vue' import { defineComponent, inject, provide, reactive, toRefs } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { RoomType, StandardStatus } from 'src/@types' import { RoomType, StandardStatus } from 'src/@types'
import { getHotelOrderStatus, getHotelRoomType, groupBy, moneyFormat } from 'src/utils/tools' import { getHotelOrderStatus, getHotelRoomType, groupBy, moneyFormat } from 'src/utils/tools'
import { useQuasar } from 'quasar'
import ChosenHotel from '../../components/hotel/chosen/ChosenHotel.vue'
export default defineComponent({ export default defineComponent({
components:{ChosenHotel},
setup(props) { setup(props) {
const $q = useQuasar()
let { setTitle } = useMetaModule() let { setTitle } = useMetaModule()
const { t } = useI18n() const { t } = useI18n()
const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any
...@@ -99,15 +138,31 @@ export default defineComponent({ ...@@ -99,15 +138,31 @@ export default defineComponent({
const menu = inject(DirtionmaryHelper.MENU_KEYS) as any const menu = inject(DirtionmaryHelper.MENU_KEYS) as any
menu.value = 3 menu.value = 3
const search = reactive({
HotelChooseArray: [],
StartDate: '2022/11/25',
EndDate: '2022/11/25',
Country: '651',
Province: 0,
City: 0,
OutBranchId: -1,
Star: 0,
PriceLevel: 0,
Supplier: 0,
MaxPrice: '',
MinPrice: ''
})
provide(DirtionmaryHelper.HOTEL_QUERY_PARAM, search)
const data = reactive({ const data = reactive({
orderId: 0, orderId: 0,
order: null as any, order: null as any,
loading: false, loading: true,
status: [] as Array<StandardStatus>, status: [] as Array<StandardStatus>,
rooms: [] as Array<RoomType>, rooms: [] as Array<RoomType>,
limitGuestNum: [2, 1, 1, 3, 1] limitGuestNum: [2, 1, 1, 3, 1],
showChosenHotel:true
}) })
console.log(currentRouter)
data.orderId = currentRouter.currentRoute.value.params.orderId data.orderId = currentRouter.currentRoute.value.params.orderId
if (data.orderId == 0) { if (data.orderId == 0) {
history.back() history.back()
...@@ -126,9 +181,11 @@ export default defineComponent({ ...@@ -126,9 +181,11 @@ export default defineComponent({
z.RoomInfo = data.rooms.find(r => r.TypeId == z.RoomType) ?? data.rooms[0] z.RoomInfo = data.rooms.find(r => r.TypeId == z.RoomType) ?? data.rooms[0]
console.log(z.RoomInfo) console.log(z.RoomInfo)
PeopleNum += z.PeopleNumber PeopleNum += z.PeopleNumber
z.IsSelf = true
}) })
console.log(PeopleNum) console.log(PeopleNum)
y.PeopleNum = PeopleNum y.PeopleNum = PeopleNum
methods.loadOtherRoom(y)
}) })
data.order.HotelCount = data.order.DetailList.length data.order.HotelCount = data.order.DetailList.length
...@@ -145,25 +202,119 @@ export default defineComponent({ ...@@ -145,25 +202,119 @@ export default defineComponent({
data.loading = false data.loading = false
}) })
}, },
calcPeople(hotel:any,room:number,type:(0|1)){ calcPeople(hotel: any, room: number, type: 0 | 1) {
let t=hotel.RoomList[room] let t = hotel.RoomList[room]
if(t.PeopleNumber==0 && type==0) return if (t.PeopleNumber == 0 && type == 0) return
t.PeopleNumber += type==0?-1:1 t.PeopleNumber += type == 0 ? -1 : 1
t.Number = Math.ceil(t.PeopleNumber/data.limitGuestNum[t.RoomType-1]) t.Number = Math.ceil(t.PeopleNumber / data.limitGuestNum[t.RoomType - 1])
t.Money = t.PeopleNumber*t.Number t.Money = t.PeopleNumber * t.Number
methods.calcMoney(hotel) methods.calcMoney(hotel)
}, },
calcMoney(hotel: any) { calcMoney(hotel: any) {
let money = 0.0 let money = 0.0
let peoples = 0 let peoples = 0
hotel.RoomList.forEach((x: any) => { hotel.RoomList.forEach((x: any) => {
money += x.Unit_Price * (x.PeopleNumber) money += x.Unit_Price * x.PeopleNumber
peoples +=x.PeopleNumber peoples += x.PeopleNumber
}) })
money += peoples * (hotel.TaxesPrice+hotel.PriceInTangTax) money += peoples * (hotel.TaxesPrice + hotel.PriceInTangTax)
hotel.PeopleNum = peoples hotel.PeopleNum = peoples
hotel.HotelMoeny = money hotel.HotelMoeny = money
//return money //return money
},
loadOtherRoom(hotel: any) {
let searchObj = {
HotelChooseArray: [hotel.HotelId],
StartDate: hotel.Date,
EndDate: hotel.Date,
Country: '651',
Province: 0,
City: 0,
OutBranchId: -1,
Star: 0,
PriceLevel: 0,
Supplier: 0,
MaxPrice: '',
MinPrice: '',
pageIndex: 1,
pageSize: 10,
pageCount: 0
}
HotelService.GetHotelList(searchObj).then(r => {
if (r.data.resultCode == ApiResult.SUCCESS) {
if (r.data.data.pageData.length > 0) {
let temp = r.data.data.pageData[0].subList[0].PriceList[0]
data.rooms.forEach((x: RoomType) => {
if (hotel.RoomList.findIndex((y: any) => y.RoomType == x.TypeId) == -1 && temp[x.Field ?? ''] > 0) {
hotel.RoomList.push({
Description: '',
Money: 0,
PeopleNumber: 0,
RoomType: x.TypeId,
RoomTypeName: x.TypeName,
Unit_Price: temp[x.Field ?? ''],
RoomInfo: x,
IsSelf: false
})
hotel.HaveOtherRoom = true
}
})
}
}
})
},
removeHotelHandler(x: number, y: number) {
let cando = false
if (y > -1) {
cando = data.order.DetailList.length > 1 || data.order.DetailList[0].data.length > 1
} else {
cando = data.order.DetailList.length > 1
}
if (cando) {
methods.deleteHotelsHandler(x, y)
} else {
methods.cancelOrder()
}
},
cancelOrder() {
$q.dialog({
title: t('dialog.titles.horder'),
message: t('dialog.contents.horder'),
cancel: true,
persistent: true
}).onOk(() => {
if (data.loading) return
data.loading = true
HotelService.CancelHotelOrder(data.order.OrderId)
.then(r => {
if (r.data.resultCode == ApiResult.SUCCESS) {
currentRouter.push('/hotel/order')
}
data.loading = false
message.errorMsg(r.data.message)
})
.catch(e => {
message.errorMsg(e.message)
data.loading = false
})
})
},
deleteHotelsHandler(x: number, y: number) {
$q.dialog({
title: t('dialog.titles.hotel'),
message: `${t('dialog.contents.hotel.t1')} ${data.order.DetailList[x].key} ${t('dialog.contents.hotel.t2')}${y > -1 ? data.order.DetailList[x].data[y].HotelName : ''}`,
cancel: true,
persistent: true
}).onOk(() => {
if (y > -1) {
data.order.DetailList[x].data.splice(y, 1)
if (data.order.DetailList[x].data.length == 0) {
data.order.DetailList.splice(x, 1)
}
} else {
data.order.DetailList.splice(x, 1)
}
})
} }
} }
data.status = getHotelOrderStatus() data.status = getHotelOrderStatus()
...@@ -179,10 +330,10 @@ export default defineComponent({ ...@@ -179,10 +330,10 @@ export default defineComponent({
</script> </script>
<style> <style>
.opera-box-item{ .opera-box-item {
display: none !important; display: none !important;
} }
.item-hide-opera:hover .opera-box-item{ .item-hide-opera:hover .opera-box-item {
display: block !important; display: block !important;
} }
</style> </style>
src/utils/tools.ts
View file @ 446f37cc
...@@ -136,7 +136,7 @@ export function getHotelRoomType(getNormal:boolean = false):Array<RoomType>{ ...@@ -136,7 +136,7 @@ export function getHotelRoomType(getNormal:boolean = false):Array<RoomType>{
rooms.push({ rooms.push({
TypeId:(i+1), TypeId:(i+1),
TypeName:x, TypeName:x,
Filed:fileds[i] Field:fileds[i]
}) })
}) })
return rooms return rooms
......
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