Skip to content

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

完成PC端內容

parent df725c80
Hide whitespace changes
Inline Side-by-side
Showing with 333 additions and 407 deletions
src/components/hotel/list/HotelPriceList.vue
View file @ 06615da2
......@@ -76,7 +76,7 @@ export default defineComponent({
methods.setCurrentHotel(n)
}
)
data.scrollStyle = useScrollModule().scrollStyle
const methods = {
......
src/components/hotel/list/ListCar.vue
View file @ 06615da2
<template>
<q-card class="bg-white q-pb-md window-height column" style="width: 500px;">
<q-card class="bg-white q-pb-md window-height column" style="width: 500px">
<div class="q-pt-md q-px-lg row items-center justify-between">
<span class="text-h6">{{$t('hotel.car.subtitle')}}</span>
<span v-html="$t('hotel.car.title',{days:cars.length,hotels:HotelLength})" class="q-pa-sm rounded-border bg-orange-1 text-orange-8 f12"></span>
<span class="text-h6">{{ $t('hotel.car.subtitle') }}</span>
<span v-html="$t('hotel.car.title', { days: cars.length, hotels: HotelLength })" class="q-pa-sm rounded-border bg-orange-1 text-orange-8 f12"></span>
<div class="draw-close q-pa-sm">
<q-icon name="close" size="26px" v-close-popup></q-icon>
</div>
</div>
<q-separator color="grey-3" class="q-mt-md" />
<div class="col">
<div class="q-pa-sm rounded-borders bg-dark text-grey-2 q-mx-md q-mt-md" v-for="x in cars">
<div class="text-subtitle1 din text-weight-bolder" >{{x.Date}}</div>
<div class="q-pa-sm rounded-borders bg-light-blue-1" v-for="y in x.Hotels">
<div class="text-subtitle2 text-weight-bolder text-primary row items-center">
<span class="col">{{y.HotelName}}</span>
<div class="f12">
<span>{{ $t('hotel.shopping.TheSelected') }}</span>
<span class="text-red q-px-sm">{{ y.SumPeople }}</span>
<span>{{ $t('unit.ren') }}</span>
<span class="text-red q-px-sm">{{ y.Total }}</span>
<span>{{ $t('hotel.shopping.between') }}</span>
</div>
<q-scroll-area v-if="cars && cars.length > 0" :thumb-style="scrollStyle.thumbStyle" :bar-style="scrollStyle.barStyle" class="col">
<div class="q-pa-sm rounded-borders bg-dark text-grey-2 q-mx-md q-mt-md" v-for="(x,xi) in cars">
<div class="text-subtitle1 din text-weight-bolder">{{ x.Date }}</div>
<div class="q-pa-sm rounded-borders bg-light-blue-1 hotel-car-item" v-for="(y,i) in x.Hotels" :class="{'q-mt-sm':i>0}">
<div class="opera-box">
<div class="text-center full-width">
<q-btn rounded icon="mode" color="primary" dense unelevated class="q-mr-md" @click="setEditorHandler(y)"/>
<q-btn rounded icon="delete" color="negative" dense unelevated @click="removeHotelHandler(xi,i)"/>
</div>
<div class="q-mt-sm q-pb-sm text-dark" style="border-top:1px dashed var(--q-primary);border-bottom:1px dashed var(--q-primary);">
<div class="row no-wrap items-center q-mt-sm" v-for="z in y.DetailList">
<span class="col-3">{{z.RoomName}}</span>
<span class="col-3">{{moneyFormat(z.Unit_Price)}}/{{$t('unit.ren')}}</span>
<span class="col-2">
<span>{{ z.PeopleNumber }}</span>
<span>{{ $t('unit.ren') }}</span>
<span>{{ z.Number }}</span>
<span>{{ $t('hotel.shopping.between') }}</span>
</span>
<span class="col text-right">{{$t('hotelorder.xj')}}：{{moneyFormat(z.Unit_Price*z.PeopleNumber)}}</span>
</div>
</div>
<div class="q-mt-sm row items-center text-dark justify-between q-pb-sm" v-if="y.TaxesPrice>0 || y.PriceInTangTax>0" style="border-bottom:1px dashed var(--q-primary);">
<span v-if="y.TaxesPrice>0">{{$t('hotelorder.col.t')}}：{{y.TaxesPrice}}*{{y.SumPeople}}{{$t('unit.ren')}}={{moneyFormat(y.TaxesPrice*y.SumPeople)}}</span>
<span v-if="y.PriceInTangTax>0">{{$t('hotelorder.col.t2')}}：{{y.PriceInTangTax}}*{{y.SumPeople}}{{$t('unit.ren')}}={{moneyFormat(y.PriceInTangTax*y.SumPeople)}}</span>
</div>
<div class="text-subtitle2 text-weight-bolder text-primary row items-center">
<span class="col">{{ y.HotelName }}</span>
<div class="f12">
<span>{{ $t('hotel.shopping.TheSelected') }}</span>
<span class="text-red q-px-sm">{{ y.SumPeople }}</span>
<span>{{ $t('unit.ren') }}</span>
<span class="text-red q-px-sm">{{ y.Total }}</span>
<span>{{ $t('hotel.shopping.between') }}</span>
</div>
<div class="q-mt-sm text-right text-primary">
{{moneyFormat(y.Money)}}
</div>
<div class="q-mt-sm q-pb-sm text-dark" style="border-top: 1px dashed var(--q-primary); border-bottom: 1px dashed var(--q-primary)">
<div class="row no-wrap items-center q-mt-sm" v-for="z in y.DetailList">
<span class="col-3">{{ z.RoomName }}</span>
<span class="col-3">{{ moneyFormat(z.Unit_Price) }}/{{ $t('unit.ren') }}</span>
<span class="col-2">
<span>{{ z.PeopleNumber }}</span>
<span>{{ $t('unit.ren') }}</span>
<span>{{ z.Number }}</span>
<span>{{ $t('hotel.shopping.between') }}</span>
</span>
<span class="col text-right">{{ $t('hotelorder.xj') }}：{{ moneyFormat(z.Unit_Price * z.PeopleNumber) }}</span>
</div>
</div>
<div class="q-mt-sm row items-center text-dark justify-between q-pb-sm" v-if="y.TaxesPrice > 0 || y.PriceInTangTax > 0" style="border-bottom: 1px dashed var(--q-primary)">
<span v-if="y.TaxesPrice > 0">{{ $t('hotelorder.col.t') }}：{{ y.TaxesPrice }}*{{ y.SumPeople }}{{ $t('unit.ren') }}={{ moneyFormat(y.TaxesPrice * y.SumPeople) }}</span>
<span v-if="y.PriceInTangTax > 0">{{ $t('hotelorder.col.t2') }}：{{ y.PriceInTangTax }}*{{ y.SumPeople }}{{ $t('unit.ren') }}={{ moneyFormat(y.PriceInTangTax * y.SumPeople) }}</span>
</div>
<div class="q-mt-sm text-right text-primary">{{ $t('hotel.groupPrice') }}：{{ moneyFormat(y.Money) }}</div>
</div>
</div>
</q-scroll-area>
<!-- <q-scroll-area v-if="cars.length>0" :thumb-style="scrollStyle.thumbStyle" :bar-style="scrollStyle.barStyle" class="full-height">
<q-list>
<q-item class="rounded-borders">
<q-item-section>
<q-card bordered class="q-pa-md q-my-sm" v-for="(item,index) in HotelCarList" :key="index">
<div class="column">
<div class="row items-center">
<span class="text-red fz18">{{item.HotelName}}</span>
</div>
<div v-for="(x,i) in item.timeList" :key="i" class="column q-py-xs">
<div class="row justify-between">
<div></div>
<div class="row">
<div class="q-pl-md f12">
<span class="text-red q-px-sm">{{x.total}}</span>
<span>{{$t('hotel.shopping.between')}}</span>
</div>
<span class="text-grey-6 fz12 q-pl-md" style="flex-shrink: 0;">
{{x.Date}}
</span>
</div>
</div>
<div class="row items-center justify-between no-wrap q-py-xs" v-for="(room,s) in x.rooms" ::key="s">
<div class="column q-pr-lg" style="flex-grow: 1;">
<div class="row items-center justify-between">
<div class="q-pb-xs ListCar-title f12">
<template v-if="room.RoomType==1">{{$t('hotel.shopping.StandardRooms')}}</template>
<template v-if="room.RoomType==2">{{$t('hotel.shopping.maxRooms')}}</template>
<template v-if="room.RoomType==3">{{$t('hotel.shopping.naturalRooms')}}</template>
<template v-if="room.RoomType==4">{{$t('hotel.shopping.ThreeRooms')}}</template>
<template v-if="room.RoomType==5">{{$t('hotel.shopping.driverRoom')}}</template>
</div>
<div>
<span class="fz10 text-red">¥</span>
<span class="fz14 text-weight-bold q-pl-sm">{{room.Unit_Price}}</span>
</div>
</div>
</div>
<div class="row">
<div class="row items-center justify-between">
<div>
<q-btn rounded dense color="white" text-color="black" size="xs" icon="remove" @click='addGoods(item,index,x,i,room,s,0)'/>
</div>
<div class="q-px-sm" style="width: 80px;">
<q-input style="width: 100%;" v-model="room.Number" class="col q-mr-md" mask="#.##"
reverse-fill-mask dense type="text" standout :label="$t('hotel.shopping.labelNum')" />
</div>
<div>
<q-btn rounded dense color="primary" size="xs" icon="add" @click='addGoods(item,index,x,i,room,s,1)'/>
</div>
</div>
<div class="row items-center justify-between q-pl-md">
<div>
<q-btn rounded dense color="white" text-color="black" size="xs" icon="remove" @click='addPeople(item,index,x,i,room,s,0)'/>
</div>
<div class="q-px-sm" style="width: 80px;">
<q-input style="width: 100%;" v-model="room.PeopleNumber" class="col q-mr-md" mask="#.##"
reverse-fill-mask dense type="text" standout :label="$t('hotel.shopping.peopleNum')" />
</div>
<div>
<q-btn rounded dense color="primary" size="xs" icon="add" @click='addPeople(item,index,x,i,room,s,1)'/>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-end">
<div v-if="item.TaxesPrice>0">
<span class="text-red q-pr-sm f12">
{{$t('hotel.car.tax')}}
</span>
<span>
{{item.TaxesPrice}}
</span>
</div>
<div v-if="item.PriceInTangTax>0" class="q-pl-sm">
<span class="text-red q-pr-sm f12">
{{$t('hotel.car.soup')}}
</span>
<span>
{{item.PriceInTangTax}}
</span>
</div>
</div>
</div>
</q-card>
</q-item-section>
</q-item>
</q-list>
</q-scroll-area> -->
<!-- <div v-else class="q-pa-lg row items-center justify-center">
{{$t('noneData')}}
</div> -->
<div v-else class="q-pa-lg row items-center justify-center">
{{$t('noneData')}}
</div>
<div class="column q-px-md">
<div class="column q-px-md" v-if="cars && cars.length>0">
<div class="row wrap justify-between col q-py-lg">
<div class="col-6 q-pb-sm">
<n-select filterable @update:value="changeOrderType" style="max-width: 200px;"
v-model:value="parameters.OrderType" :placeholder="$t('hotel.car.OrderType')" :options="cacheHotels"
max-tag-count="responsive" size="large" value-field="ID" label-field="Name" />
<n-select filterable style="max-width: 200px" v-model:value="parameters.OrderType" :placeholder="$t('hotel.car.OrderType')" :options="cacheHotels" max-tag-count="responsive" size="large" value-field="ID" label-field="Name" />
</div>
<q-input v-if="parameters.OrderType==2" class="col-6" v-model="parameters.TCNum" style="max-width: 200px;" reverse-fill-mask dense
type="text" standout :label="$t('hotel.car.inputText')+$t('hotel.car.TCNum')" ref="TCNumRef"
:rules="[val => !!val || $t('hotel.car.inputText')+$t('hotel.car.TCNum')]"/>
<q-input v-if="parameters.OrderType == 2" class="col-6" v-model="parameters.TCNum" style="max-width: 200px" reverse-fill-mask dense type="text" standout :label="$t('hotel.car.inputText') + $t('hotel.car.TCNum')" ref="TCNumRef" :rules="[val => !!val || $t('hotel.car.inputText') + $t('hotel.car.TCNum')]" />
<template v-if="parameters.OrderType==1">
<q-input v-model="parameters.ContactName" style="max-width: 200px;" class="col-6" reverse-fill-mask dense
type="text" standout :label="$t('hotel.car.inputText')+$t('hotel.car.ContactName')" ref="ContactNameRef"
:rules="[val => !!val || $t('hotel.car.inputText')+$t('hotel.car.ContactName')]"/>
<template v-if="parameters.OrderType == 1">
<q-input v-model="parameters.ContactName" style="max-width: 200px" class="col-6" reverse-fill-mask dense type="text" standout :label="$t('hotel.car.inputText') + $t('hotel.car.ContactName')" ref="ContactNameRef" :rules="[val => !!val || $t('hotel.car.inputText') + $t('hotel.car.ContactName')]" />
<q-input v-model="parameters.ContactNumber" style="max-width: 200px;" class="col-6 q-mr-md" reverse-fill-mask dense
type="text" standout :label="$t('hotel.car.inputText')+$t('hotel.car.ContactNumber')" ref="ContactNumberRef"
:rules="[val => !!val || $t('hotel.car.inputText')+$t('hotel.car.ContactNumber')]"/>
<q-input v-model="parameters.ContactNumber" style="max-width: 200px" class="col-6 q-mr-md" reverse-fill-mask dense type="text" standout :label="$t('hotel.car.inputText') + $t('hotel.car.ContactNumber')" ref="ContactNumberRef" :rules="[val => !!val || $t('hotel.car.inputText') + $t('hotel.car.ContactNumber')]" />
</template>
<q-input class="col-6"
style="max-width: 200px;"
v-model="parameters.Remark"
reverse-fill-mask dense
filled
clearable
type="text"
:label="$t('hotel.car.Remark')"
/>
<q-input class="col-6" style="max-width: 200px" v-model="parameters.Remark" reverse-fill-mask dense filled clearable type="text" :label="$t('hotel.car.Remark')" />
</div>
<div class="row justify-between">
<div>
<div class="row justify-between items-center">
<div class="text-negative text-weight-bolder din">
<span class="text-weight-thin">{{$t('hotel.car.sumPrice')}}：</span>
<span class="fz14">¥</span>
{{parameters.Money}}
<span class="text-h6">{{ moneyFormat(parameters.Money) }}</span>
</div>
<q-btn color="red" style="width: 150px" :loading="loading" @click="submit">
<q-btn color="primary" size="md" unelevated class="q-px-xl" :loading="loading" @click="submit">
<div class="ellipsis">
{{$t('hotel.car.submit')}}
{{ $t('hotel.car.submit') }}
</div>
</q-btn>
</div>
</div>
</q-card>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs, provide, onMounted, inject, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import useScrollModule from '../../../module/scrollbar/scrollModule'
import { DirtionmaryHelper } from '../../../config/dictionary'
import message from '../../../utils/message'
import { ApiResult } from '../../../@types/enumHelper'
import HotelService from '../../../api/hotel'
<script lang="ts">
import { defineComponent, ref, reactive, toRefs, provide, onMounted, inject, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import useScrollModule from '../../../module/scrollbar/scrollModule'
import { DirtionmaryHelper } from '../../../config/dictionary'
import message from '../../../utils/message'
import { ApiResult } from '../../../@types/enumHelper'
import HotelService from '../../../api/hotel'
import { moneyFormat } from '../../../utils/tools'
export default defineComponent({
props: {
},
setup(props, context) {
const cars = inject(DirtionmaryHelper.HOTEL_CAR_LIST) as any
const { t } = useI18n();
const TCNumRef = ref(null) as any
const ContactNameRef = ref(null) as any
const ContactNumberRef = ref(null) as any
const data=reactive({
scrollStyle: {} as any,
addNum: 1,
parameters: {
Money: 0,
DetailList: [] as Array<any>,
Remark: '',
OrderType: 1,//订单类型 1散客 2团队
TCNum: '',//=团队时 传递 组团号
ContactName: '',//=散客时 传递 联系人
ContactNumber: '',//=散客时 传递 联系人电话
OrderId: 0,
},
currentIndex: 0,
currentI: 0,
currentS: 0,
RemainingInventory: 0,
HotelLength: 0,
loading: false,
cacheHotels: [
{Name:t('hotel.car.scattered'),ID:1},
{Name:t('hotel.car.group'),ID:2},
],
})
data.scrollStyle = useScrollModule().scrollStyle
// 今天购买数量
watch(cars.value, (n, o) => {
methods.getMoney()
})
const methods = {
changeOrderType() {
setTimeout(() => {
// console.log(data.parameters.OrderType)
}, 1000)
},
getMoney(){
data.parameters.Money = 0
cars.value.forEach((item:any)=>{
item.Hotels.forEach((t:any)=>{
t.DetailList.forEach((room:any)=>{
let m = (room.PeopleNumber*room.Unit_Price)+(room.Number*room.TaxesPrice)+(room.Number*room.PriceInTangTax)
data.parameters.Money+=m
})
})
import { useQuasar } from 'quasar'
export default defineComponent({
props: {},
setup(props, context) {
const cars = inject(DirtionmaryHelper.HOTEL_CAR_LIST) as any
const editor = inject(DirtionmaryHelper.HOTEL_UPDATEHOTEL_CAR) as any
const { t } = useI18n()
const TCNumRef = ref(null) as any
const ContactNameRef = ref(null) as any
const ContactNumberRef = ref(null) as any
const $q = useQuasar()
const data = reactive({
scrollStyle: {} as any,
addNum: 1,
parameters: {
Money: 0,
DetailList: [] as Array<any>,
Remark: '',
OrderType: 1, //订单类型 1散客 2团队
TCNum: '', //=团队时 传递 组团号
ContactName: '', //=散客时 传递 联系人
ContactNumber: '', //=散客时 传递 联系人电话
OrderId: 0
},
currentIndex: 0,
currentI: 0,
currentS: 0,
RemainingInventory: 0,
HotelLength: 0,
loading: false,
cacheHotels: [
{ Name: t('hotel.car.scattered'), ID: 1 },
{ Name: t('hotel.car.group'), ID: 2 }
]
})
data.scrollStyle = useScrollModule().scrollStyle
// 今天购买数量
watch(cars.value, (n, o) => {
methods.getMoney()
})
const methods = {
getMoney() {
data.parameters.Money = 0
cars.value.forEach((item: any) => {
item.Hotels.forEach((t: any) => {
data.parameters.Money += t.Money
})
},
submit() {
// context.emit('success')
// return
console.log(ContactNameRef)
})
},
submit() {
let temp = JSON.parse(JSON.stringify(cars.value))
if(data.loading) return
let flag = false
if (data.parameters.OrderType == 1) {
ContactNameRef.value.validate()
return;
// ContactNameRef.value.validate()
// ContactNumberRef.value.validate()
if(data.parameters.OrderType==1){
if(!data.parameters.ContactName){
message.warnMsg(`${t("hotel.car.inputText")}${t("hotel.car.ContactName")}`)
return
}if(!data.parameters.ContactNumber){
message.warnMsg(`${t("hotel.car.inputText")}${t("hotel.car.ContactNumber")}`)
return
ContactNumberRef.value.validate()
flag = !ContactNameRef.value.hasError && !ContactNumberRef.value.hasError
}else{
TCNumRef.value.validate()
flag = !TCNumRef.value.hasError
}
if(!flag) return
data.loading = true
data.parameters.DetailList = [] as Array<any>
temp.forEach((x:any)=>{
x.Hotels.forEach((y:any)=>{
y.RoomList = JSON.parse(JSON.stringify(y.DetailList))
delete y.DetailList
data.parameters.DetailList.push(y)
})
})
data.loading = true
HotelService.SetCustomerOrder(data.parameters)
.then(r => {
if (r.data.resultCode == ApiResult.SUCCESS) {
message.successMsg(`${t('success')}`)
localStorage.removeItem(DirtionmaryHelper.HOTEL_HOTELCARS_CACHE)
cars.value=[]
context.emit('success')
} else {
message.errorMsg(r.data.message)
}
}
if(data.parameters.OrderType==2&&!data.parameters.TCNum){
message.warnMsg(`${t("hotel.car.inputText")}${t("hotel.car.TCNum")}`)
return
}
data.parameters.DetailList = [] as Array<any>
// HotelCarList.value.forEach((item:any)=>{
// item.timeList.forEach((t:any)=>{
// let datas = {
// HotelId: item.HotelId,
// Date: t.Date,
// Destription:'',
// RoomList:[] as Array<any>,
// }
// t.rooms.forEach((room:any)=>{
// let msg = {
// RoomType: room.RoomType,
// Unit_Price: room.Unit_Price,
// Number: room.Number,
// PeopleNumber: room.PeopleNumber,
// Destription: room.Destription?room.Destription:''
// }
// datas.RoomList.push(msg)
// })
// data.parameters.DetailList.push(datas)
// })
// })
data.loading = true
HotelService.SetCustomerOrder(data.parameters)
.then(r => {
if (r.data.resultCode == ApiResult.SUCCESS) {
message.successMsg(`${t('success')}`)
data.parameters = {
Money: 0,
DetailList: [],
Remark: '',
OrderType: 1,//订单类型 1散客 2团队
TCNum: '',//=团队时 传递 组团号
ContactName: '',//=散客时 传递 联系人
ContactNumber: '',//=散客时 传递 联系人电话
OrderId: 0,
},
context.emit('success')
} else {
message.errorMsg(r.data.message)
}
data.loading = false
})
.catch(e => {
message.errorMsg(e.message)
data.loading = false
})
},
getLength(){
data.HotelLength = 0
cars.value.forEach((item:any)=>{
data.HotelLength+=item.Hotels.length
data.loading = false
})
.catch(e => {
message.errorMsg(e.message)
data.loading = false
})
},
getLength() {
data.HotelLength = 0
cars.value.forEach((item: any) => {
data.HotelLength += item.Hotels.length
})
},
removeHotelHandler(x:number,y:number){
$q.dialog({
title: t('dialog.titles.hotel'),
message: t('dialog.contents.hotel',{day:cars.value[x].Date,hotel:cars.value[x].Hotels[y].HotelName}),
cancel: true,
persistent: true
}).onOk(() => {
if(cars.value[x].Hotels.length==1){
cars.value.splice(x,1)
}else{
cars.value[x].Hotels.splice(y,1)
}
})
},
},
setEditorHandler(x:any){
editor.value = x
context.emit('close')
}
onMounted(()=>{
methods.getLength()
methods.getMoney()
})
return {...toRefs(data),cars,TCNumRef,ContactNameRef,ContactNumberRef,...methods,moneyFormat}
}
})
</script>
methods.getLength()
methods.getMoney()
return { ...toRefs(data), cars, TCNumRef, ContactNameRef, ContactNumberRef, ...methods, moneyFormat }
}
})
</script>
<style>
.ListCar-title{
white-space: wrap;
}
.ListCar-title {
white-space: wrap;
}
.hotel-car-item{
position: relative;
overflow: hidden;
}
.hotel-car-item .opera-box{
position: absolute;
left: 0;
bottom: 0;
top: 0;
right: 0;
display: none;
background: rgba(0,0,0,.3);
flex-direction: column;
justify-content: center;
align-items: center;
}
.hotel-car-item:hover .opera-box{
display: flex;
}
</style>
src/components/hotel/list/ListHeader.vue
View file @ 06615da2
......@@ -46,7 +46,7 @@
<q-btn color="primary" unelevated :label="$t('query')" />
</div>
<q-dialog v-if="cars.length>0" v-model="rightCarOpen" maximized full-height position="right">
<q-dialog v-model="rightCarOpen" maximized full-height position="right">
<list-car @close="close" @success="setSuccess"></list-car>
</q-dialog>
......
src/components/hotel/list/List-Table.vue → src/components/hotel/list/ListTable.vue
View file @ 06615da2
......@@ -33,6 +33,9 @@
<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>
......@@ -88,21 +91,29 @@ import { date,useQuasar } from 'quasar'
import { DateType, getDateType, getDayOfWeek } from '../../../utils/tools'
import { useI18n } from 'vue-i18n'
import HotelPriceList from './HotelPriceList.vue'
import TableOperation from "./Table-Operation.vue"
import TableOperation from "./TableOperation.vue"
import SamplePriceList from './SamplePriceList.vue'
export default defineComponent({
components: { HotelPriceList, TableOperation },
components: { HotelPriceList, TableOperation,SamplePriceList },
name: 'list-table',
setup() {
const $q=useQuasar()
const { t } = useI18n()
inject(DirtionmaryHelper.HOTEL_QUERY_PARAM)
const search = inject(DirtionmaryHelper.HOTEL_QUERY_PARAM) as any
const updateHotel = inject(DirtionmaryHelper.HOTEL_UPDATEHOTEL_CAR) as any
watch(search, (n, o) => {
if (data.loading) return
data.pages.pageIndex = 1
methods.calcDateRangeCols()
methods.initHotels()
})
watch(updateHotel,(n,o)=>{
if(updateHotel.value.HotelId){
data.showOrderPreview=true
data.orderSubmitItemObj=null
data.orderSubmitObj=null
}
})
const data = reactive({
hotels: [] as Array<any>,
......@@ -237,7 +248,7 @@ export default defineComponent({
.hotel-table .q-table td {
padding: 0 !important;
}
.td-item.cursor-pointer:hover{
/* .td-item.cursor-pointer:hover{
color: var(--q-primary) !important;
}
} */
</style>
src/components/hotel/list/SamplePriceList.vue 0 → 100644
View file @ 06615da2
<template>
<div v-if="rooms.length>0" class="row q-pa-sm rounded-borders">
<div class="price-item q-ma-none text-white" :class="{'q-ml-md':i>0}" v-for="(x,i) in rooms">
<div class="label">{{ x.name }}</div>
<div class="f12">{{ x.price }}</div>
</div>
</div>
<div v-if="rooms.length==0">{{$t('hotel.col.noMore')}}</div>
</template>
<script lang="ts">
import { X } from 'app/dist/spa/assets/index.89636ad9'
import { defineComponent, toRefs, reactive, inject } from 'vue'
import { useI18n } from 'vue-i18n'
import { moneyFormat } from '../../../utils/tools'
export default defineComponent({
props: {
price: {
type: Object,
default: {},
require: true
}
},
setup(props) {
const { t } = useI18n()
const data = reactive({
rooms:[] as Array<any>
})
const methods = {
setCurrentHotel() {
let temp = props.price.PriceList?props.price.PriceList[0]:null
if(!temp) return
let roomTyps = ['BidroomPrice', 'SingleroomPrice', 'AddBedPrice', 'GuideRoomPrice']
let roomLangs = [t('hotel.rooms.big'), t('hotel.rooms.sing'), t('hotel.rooms.three'), t('hotel.rooms.driver')]
roomTyps.forEach((x: any, i: number) => {
if (temp[x] > 0) {
data.rooms.push({
price:moneyFormat(temp[x]),
name:roomLangs[i]
})
}
})
}
}
methods.setCurrentHotel()
return { ...toRefs(data) }
}
})
</script>
<style scoped>
.price-item {
margin-top: 8px;
}
.price-item .label {
opacity: 0.5;
font-size: 12px;
font-weight: 400;
}
</style>
src/components/hotel/list/Table-Operation.vue → src/components/hotel/list/TableOperation.vue
View file @ 06615da2
......@@ -2,7 +2,7 @@
<q-card flat class="q-pa-lg" style="shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15); width: 50vw">
<div class="q-mb-xs">
<div class="">
<span class="text-primary text-h6">{{ HotelRow.HotelName }}</span>
<span class="text-primary text-h6">{{ parameters.HotelName }}</span>
</div>
<div class="q-my-md rounded-borders q-pa-sm bg-yellow-1 row items-center justify-between">
<q-field stack-label :label="$t('hotel.inHouseDate')" class="text-primary" standout dense>
......@@ -66,7 +66,7 @@
</div>
<div class="row items-center q-pl-md">
<div>
<q-btn flat dense color="dark" :label="$t('close')" class="q-mr-sm" v-close-popup/>
<q-btn flat dense color="dark" :label="$t('close')" class="q-mr-sm" @click="editor={}" v-close-popup/>
<q-btn unelevated dense color="negative" :disable="total==0" icon="shopping_cart" :label="$t('hotel.car.addShopping')" @click="join" />
</div>
</div>
......@@ -85,11 +85,11 @@ export default defineComponent({
props: {
HotelRow: {
type: Object,
require: true
require: false
},
hotelInfor: {
type: Object,
require: true
require: false
}
},
emits:['close'],
......@@ -97,9 +97,10 @@ export default defineComponent({
const { t } = useI18n()
const qDateProxyOpera = ref<any>(null)
const cars = inject(DirtionmaryHelper.HOTEL_CAR_LIST) as any
const editor = inject(DirtionmaryHelper.HOTEL_UPDATEHOTEL_CAR) as any
const data = reactive({
HotelRow: props.HotelRow as any,
hotelInfor: props.hotelInfor as any,
HotelRow: {} as any,
hotelInfor: {} as any,
onlyNum: 0,
parameters: {
HotelId: '',
......@@ -163,7 +164,7 @@ export default defineComponent({
data.sumPeople += parseInt(item.PeopleNumber)
})
},
joinOverride(){
join(){
const temp= JSON.parse(JSON.stringify(data.parameters))
temp.Money=0
temp.Total=data.total
......@@ -173,10 +174,11 @@ export default defineComponent({
temp.Money+=(x.PeopleNumber*(x.Unit_Price+x.TaxesPrice+x.PriceInTangTax))
});
let existsIndex = cars.value.findIndex((x:any)=>x.Date == temp.Date)
let exists = existsIndex==-1?null:cars[existsIndex]
let exists = existsIndex==-1?null:cars.value[existsIndex]
if(exists){
let existsHotel = exists.Hotels?.find((h:any)=>h.HotelId==temp.HotelId)
if(existsHotel) exists.Hotels.remove(existsHotel)
let existsHotel = exists.Hotels.findIndex((h:any)=>h.HotelId==temp.HotelId)
if(existsHotel!=-1) exists.Hotels.splice(existsHotel,1)
}else{
exists = {
Date:temp.Date,
......@@ -185,83 +187,17 @@ export default defineComponent({
cars.value.push(exists)
}
exists.Hotels.push(temp)
console.log(cars.value)
cars.value.sort((x:any,y:any)=>{
return new Date(x.Date).getDate()-new Date(y.Date).getDate()
})
message.successMsg(t('success'))
editor.value={}
context.emit('close')
},
// 加入购物车
join() {
methods.joinOverride()
return
// if (data.total < 1 || data.total > data.hotelInfor.RemainingInventory) {
// message.errorMsg(`${t('hotel.shopping.small')}1${t('hotel.shopping.big')}${data.hotelInfor.RemainingInventory}`)
// }
// const parameters = data.parameters
// let msgData = {
// HotelId: parameters.HotelId,
// HotelName: parameters.HotelName,
// TaxesPrice: 0.0,
// PriceInTangTax: 0.0,
// timeList: [] as Array<any>
// }
// let msg = {
// Date: parameters.Date,
// total: data.total,
// RemainingInventory: parameters.RemainingInventory,
// rooms: [] as Array<any>
// }
// data.parameters.DetailList.forEach((x, index) => {
// msgData.TaxesPrice = x.TaxesPrice
// msgData.PriceInTangTax = x.PriceInTangTax
// //console.log(moneyFormat(x.Unit_Price),11111111)
// if (x.Number > 0) {
// let ArrData = {
// HotelId: x.HotelId,
// Date: x.Date,
// RoomType: x.RoomType,
// RoomName: x.RoomName,
// Unit_Price: x.Unit_Price,
// Number: x.Number,
// PeopleNumber: x.PeopleNumber,
// Destription: x.Destription,
// TaxesPrice: x.TaxesPrice,
// PriceInTangTax: x.PriceInTangTax
// }
// msg.rooms.push(ArrData)
// }
// })
// msgData.timeList.push(msg)
// if (data.total > 0) {
// let list = HotelCarList.value
// if (list.length > 0) {
// let fault = true
// list.forEach((item: any, index: number) => {
// if (item.HotelId == parameters.HotelId) {
// item.timeList.forEach((x: any, i: number) => {
// if (fault && x.Date == parameters.Date) {
// HotelCarList.value[index].timeList.splice(i, 1)
// HotelCarList.value[index].timeList.push(msg)
// fault = false
// } else if (fault && x.Date != parameters.Date) {
// HotelCarList.value[index].timeList.push(msg)
// fault = false
// }
// })
// }
// })
// if (fault) HotelCarList.value.push(msgData)
// } else {
// HotelCarList.value.push(msgData)
// }
// }
// message.successMsg(`${t('success')}`)
// context.emit('close')
},
// 组装可选房间
setList() {
methods.setDateRange()
data.parameters.DetailList = [] as Array<any>
// 1:標間成本价 2:大床成本价 3:自然間成本价 4:3人間成本价 5:司機房成本价 稅金 TaxesPrice 入湯稅 PriceInTangTax
let roomTyps = ['CostPrice', 'BidroomPrice', 'SingleroomPrice', 'AddBedPrice', 'GuideRoomPrice']
let roomLangs = [t('hotel.rooms.normal'), t('hotel.rooms.big'), t('hotel.rooms.sing'), t('hotel.rooms.three'), t('hotel.rooms.driver')]
let tips = ['', t('hotel.bigTips'), '', '', '']
......@@ -274,6 +210,7 @@ export default defineComponent({
data.parameters.RemainingInventory = hotel.RemainingInventory
data.parameters.TaxesPrice = tempPrice.TaxesPrice
data.parameters.PriceInTangTax= tempPrice.PriceInTangTax,
methods.setDateRange()
roomTyps.forEach((x: any, i: number) => {
if (tempPrice[x] > 0) {
let dataMsg = {
......@@ -305,17 +242,29 @@ export default defineComponent({
if (qDateProxyOpera.value) qDateProxyOpera.value.hide()
},
setDateRange() {
data.joinHouse.StartDate = date.formatDate(new Date(data.hotelInfor.DateStr), 'YYYY/MM/DD')
data.joinHouse.StartDate = date.formatDate(new Date(data.parameters.Date), 'YYYY/MM/DD')
data.joinHouse.EndDate = date.formatDate(date.addToDate(new Date(data.joinHouse.StartDate), { days: 1 }), 'YYYY/MM/DD')
data.joinHouse.dateRangeFormat = `${data.joinHouse.StartDate} - ${data.joinHouse.EndDate} `
data.joinHouse.days = date.getDateDiff(new Date(data.joinHouse.EndDate), new Date(data.joinHouse.StartDate), 'days')
},
optionsFn(cd: any) {
return cd >= date.formatDate(date.addToDate(new Date(), { days: 7 }), 'YYYY/MM/DD')
},
setInjectHandler(){
data.parameters = editor.value
methods.calculateNum()
methods.setDateRange()
}
}
methods.setList()
return { ...toRefs(data), ...methods }
if(props.HotelRow && props.hotelInfor){
data.HotelRow = props.HotelRow
data.hotelInfor = props.hotelInfor
methods.setList()
}else{
methods.setInjectHandler()
}
return { ...toRefs(data), ...methods,editor }
}
})
</script>
......
src/config/dictionary.ts
View file @ 06615da2
......@@ -32,5 +32,10 @@ class DirtionmaryHelper {
* 酒店購物車緩存
*/
static readonly HOTEL_HOTELCARS_CACHE = "hotelcarscache"
/**
* 要修改的酒店預訂對象
*/
static readonly HOTEL_UPDATEHOTEL_CAR = "hotelupdatecar"
}
export { userDictionmary,DirtionmaryHelper }
src/i18n/zh-TW/index.ts
View file @ 06615da2
......@@ -13,6 +13,14 @@ export default {
query: '檢索',
noneData: '沒有找到相關的數據',
loading: '正在加載數據',
dialog:{
titles:{
hotel:'移除酒店警示'
},
contents:{
hotel:'你確定要移除{day}的酒店{hotel}?'
}
},
close:'關閉',
unit: {
jian: '間',
......@@ -112,6 +120,7 @@ export default {
time: 'h'
},
hotel: {
groupPrice:'合計',
pageTitle: '酒店檢索',
area: '檢索區域',
searchName: '酒店名稱',
......@@ -130,7 +139,7 @@ export default {
orderTitle: '訂單',
people: '人',
between: '间',
submit: '提交',
submit: '確認下單',
tax: '税',
soup: '入汤',
OrderType: '訂單類型',
......@@ -142,7 +151,8 @@ export default {
scattered: '散客',
group: '團',
title:'本次行程<span class="din text-orange-10">{days}</span>天，入住<span class="din text-primary">{hotels}</span>個酒店',
subtitle:'酒店採購單'
subtitle:'酒店採購單',
sumPrice:'訂單總金額'
},
shopping:{
labelNum: '房數',
......@@ -183,7 +193,8 @@ export default {
ins: '庫存',
sins: '剩餘庫存',
uins: '已預訂',
more: '更多房型報價'
more: '更多房型報價',
noMore: '沒有其他房型報價'
},
datetype: {
red: '紅日',
......
src/pages/hotel/HotelList.vue
View file @ 06615da2
......@@ -14,7 +14,7 @@ import svgIcon from '../../components/global/svg-icon.vue'
import { defineComponent, inject, provide, reactive, ref, toRefs } from 'vue'
import { DirtionmaryHelper } from '../../config/dictionary'
import ListHeader from '../../components/hotel/list/ListHeader.vue'
import ListTable from '../../components/hotel/list/List-Table.vue'
import ListTable from '../../components/hotel/list/ListTable.vue'
export default defineComponent({
components: { svgIcon, ListHeader, ListTable },
setup() {
......@@ -47,6 +47,8 @@ export default defineComponent({
HotelCarList.value = JSON.parse(cacheCars)
}
provide(DirtionmaryHelper.HOTEL_CAR_LIST, HotelCarList)
const updateObj = ref<any>({})
provide(DirtionmaryHelper.HOTEL_UPDATEHOTEL_CAR,updateObj)
const methods = {
}
......
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