Skip to content

B
bigwood
Commit 547bd1b1 authored by youjie's avatar youjie
Browse files
Options

no message

parent 8aaa645f
Show whitespace changes
Inline Side-by-side
Showing with 82 additions and 123 deletions
src/components/hotel/order/list/OrderList.vue
View file @ 547bd1b1
<template>
<template>
<div>
<q-card class="light-shadow q-pa-md bg-white rounded-borders q-mb-md" flat v-for="x in orders">
<div class="row items-center desktop-only">
<div class="q-mr-md">
<q-btn :color="x.OrderType == 1 ? 'cyan' : 'negative'" unelevated disable size="sm"
:label="`${x.OrderType == 1 ? $t('hotelorder.orderType.guest') : $t('hotelorder.orderType.tour')}`"></q-btn>
<q-btn :color="x.OrderType == 1 ? 'cyan' : 'negative'" unelevated disable size="sm" :label="`${x.OrderType == 1 ? $t('hotelorder.orderType.guest') : $t('hotelorder.orderType.tour')}`"></q-btn>
</div>
<div class="f12 text-grey-6">{{ $t('hotelorder.search.orderNum') }}：{{ x.OrderNo }}</div>
<div class="q-ml-md">
<q-btn color="dark" flat size="sm" :label="$t('hotelorder.copy')" v-if="copyId != x.OrderId"
@click="setCopyHandler(x)" />
<q-btn color="dark" flat size="sm" :label="$t('hotelorder.copy')" v-if="copyId != x.OrderId" @click="setCopyHandler(x)" />
<q-btn color="cyan" icon="check" outline size="sm" :label="$t('hotelorder.copyed')" v-else></q-btn>
</div>
<div class="col text-center f12 text-grey-6">
<span v-if="x.OrderType == 1">{{ $t('hotelorder.search.contactInfo') }}：{{ x.ContactName }}/{{ x.ContactNumber
}}</span>
<span v-if="x.OrderType == 1">{{ $t('hotelorder.search.contactInfo') }}：{{ x.ContactName }}/{{ x.ContactNumber }}</span>
<span v-else>{{ $t('hotelorder.search.tcNum') }}：{{ x.TCNum }}</span>
</div>
<div class="f12 text-grey-6">{{ $t('hotelorder.createTime') }}：{{ x.CreateTime }}</div>
......@@ -26,9 +23,7 @@
<div class="mobile-only">
<div class="row justify-between">
<div class="q-mr-md">
<q-btn :color="x.OrderType == 1 ? 'cyan' : 'negative'" unelevated disable size="sm"
:label="`${x.OrderType == 1 ? $t('hotelorder.orderType.guest') : $t('hotelorder.orderType.tour')}`">
</q-btn>
<q-btn :color="x.OrderType == 1 ? 'cyan' : 'negative'" unelevated disable size="sm" :label="`${x.OrderType == 1 ? $t('hotelorder.orderType.guest') : $t('hotelorder.orderType.tour')}`"></q-btn>
</div>
<div class="q-ml-md f12" :class="[x.typeInfo.Color]">
<q-icon :name="x.typeInfo.Icon" />
......@@ -39,15 +34,12 @@
<div class="row items-center justify-between">
<div class="f12 text-grey-6">{{ $t('hotelorder.search.orderNum') }}：{{ x.OrderNo }}</div>
<div class="q-ml-md">
<q-btn color="dark" flat size="sm" :label="$t('hotelorder.copy')" v-if="copyId != x.OrderId"
@click="setCopyHandler(x)" />
<q-btn color="dark" flat size="sm" :label="$t('hotelorder.copy')" v-if="copyId != x.OrderId" @click="setCopyHandler(x)" />
<q-btn color="cyan" outline size="sm" :label="$t('hotelorder.copyed')" v-else></q-btn>
</div>
</div>
<div class="f12 text-grey-6">
<span v-if="x.OrderType == 1">{{ $t('hotelorder.search.contactInfo') }}：{{ x.ContactName }}/{{
x.ContactNumber
}}</span>
<span v-if="x.OrderType == 1">{{ $t('hotelorder.search.contactInfo') }}：{{ x.ContactName }}/{{ x.ContactNumber }}</span>
<span v-else>{{ $t('hotelorder.search.tcNum') }}：{{ x.TCNum }}</span>
</div>
<div class="f12 text-grey-6">{{ $t('hotelorder.createTime') }}：{{ x.CreateTime }}</div>
......@@ -55,8 +47,7 @@
</div>
<div class="q-mt-md row">
<q-table separator="cell" :pagination="{ rowsPerPage: 100 }" :hide-bottom="true" dense :rows="x.DetailList"
bordered :columns="cols" class="sticky-rightrowspan-column-table light-border col no-shadow">
<q-table separator="cell" :hide-bottom="true" dense :rows="x.DetailList" bordered :columns="cols" class="sticky-rightrowspan-column-table light-border col no-shadow">
<template v-slot:header-cell-Room="props">
<q-th :props="props">
<div class="row items-center">
......@@ -70,8 +61,7 @@
<q-td :props="props">
<div class="room-item f12 text-grey-6" v-for="x in props.row.RoomList">
<span class="q-mr-md"> {{ x.RoomInfo.TypeName }}: {{ x.Number }} {{ $t('unit.jian') }} </span>
<span class="q-mr-md"> {{ $t('hotelorder.people') }}: {{ x.PeopleNumber ?? 1 }} {{ $t('unit.ren') }}
</span>
<span class="q-mr-md"> {{ $t('hotelorder.people') }}: {{ x.PeopleNumber ?? 1 }} {{ $t('unit.ren') }} </span>
<span class="q-mr-md"> {{ $t('hotelorder.unitPrice') }}: {{ x.Unit_Price ?? 1 }} </span>
<span class="q-mr-md"> {{ $t('hotelorder.xj') }}: {{ x.Money ?? 1 }} </span>
</div>
......@@ -100,44 +90,34 @@
</template>
</q-table>
</div>
<div class="q-mt-md" v-if="x.OrderStatus != 3"
:class="{ row: $q.platform.is.desktop, 'column reverse': $q.platform.is.mobile }">
<div class="pay row text-grey rounded-borders q-pa-md"
v-if="$q.platform.is.desktop || ($q.platform.is.mobile && expendsOrderId == x.OrderId)"
:class="{ 'bg-grey-2': $q.platform.is.mobile }">
<svg-icon color=" svg-red" icon="Code/Warning-1-circle.svg" :size="16" v-if="$q.platform.is.desktop">
</svg-icon>
<div class="q-mt-md" v-if="x.OrderStatus != 3" :class="{ row: $q.platform.is.desktop, 'column reverse': $q.platform.is.mobile }">
<div class="pay row text-grey rounded-borders q-pa-md" v-if="$q.platform.is.desktop || ($q.platform.is.mobile && expendsOrderId == x.OrderId)" :class="{ 'bg-grey-2': $q.platform.is.mobile }">
<svg-icon color=" svg-red" icon="Code/Warning-1-circle.svg" :size="16" v-if="$q.platform.is.desktop"></svg-icon>
<div class="q-ml-sm">
<div class="q-mb-sm" v-if="x.CustomerPayType == 2 || x.CustomerPayType == 3">
<div class="f12">
{{ $t('hotelorder.pay.t1') }}
<span class="text-orange">{{ x.PaymentDate }}</span>
{{ $t('hotelorder.pay.t11') }}
<span class="text-orange">{{ x.FinalPaymentDate }}</span>
{{ $t('hotelorder.pay.t12') }}
</div>
<q-btn dense outline color="accent" size="sm" class="q-mt-sm" :label="$t('hotelorder.payinfo')"
@click="ViewPayment"></q-btn>
{{$t('hotelorder.pay.t1')}}
<span class="text-orange">{{x.PaymentDate}}</span>
{{$t('hotelorder.pay.t11')}}
<span class="text-orange">{{x.FinalPaymentDate}}</span>
{{$t('hotelorder.pay.t12')}}
</div>
<q-btn dense outline color="accent" size="sm" class="q-mt-sm" :label="$t('hotelorder.payinfo')" @click="ViewPayment"></q-btn>
<!-- <q-btn dense unelevated color="accent" size="sm" class="q-mt-sm q-ml-sm" :label="$t('hotelorder.sendpay')"></q-btn> -->
</div>
<div v-if="x.CustomerPayType == 1 || x.CustomerPayType == 3">
<div class="f12">
{{ $t('hotelorder.pay.t2') }}
<span class="text-negative">{{ x.UploadGuestDate }}</span>
{{ $t('hotelorder.pay.t21') }}
{{$t('hotelorder.pay.t2')}}
<span class="text-negative">{{x.UploadGuestDate }}</span>
{{$t('hotelorder.pay.t21')}}
</div>
<div class="row items-center f12 q-mt-sm">
<div class="text-accent q-mr-md" v-if="x.GuestFileList.length > 0">{{
x.GuestFileList[0].split('/').at(-1)
}}</div>
<q-btn dense unelevated color="primary" size="sm" class="q-mr-sm" v-if="x.GuestFileList.length > 0">
<a class="text-white" style="text-decoration: none" :href="x.GuestFileList[0]">{{ $t('upload.down')
}}</a>
<div class="text-accent q-mr-md" v-if="x.GuestFileList.length>0">{{x.GuestFileList[0].split('/').at(-1)}}</div>
<q-btn dense unelevated color="primary" size="sm" class="q-mr-sm" v-if="x.GuestFileList.length>0">
<a class="text-white" style="text-decoration:none" :href="x.GuestFileList[0]">{{$t('upload.down')}}</a>
</q-btn>
<n-upload class="col" :action="importFileUrl" @finish="handleFinish"
@change="uploadHandleChange(x.OrderId)" file-list-style="display:none">
<q-btn dense outline color="primary" size="sm"
:label="x.GuestFileList.length == 0 ? $t('hotelorder.uploadGuest') : $t('upload.reload')"></q-btn>
<n-upload class="col" :action="importFileUrl" @finish="handleFinish" @change="uploadHandleChange(x.OrderId)" file-list-style="display:none">
<q-btn dense outline color="primary" size="sm" :label="x.GuestFileList.length==0?$t('hotelorder.uploadGuest'):$t('upload.reload')"></q-btn>
</n-upload>
</div>
</div>
......@@ -148,12 +128,10 @@
<svg-icon color=" svg-red" icon="Code/Warning-1-circle.svg" :size="16"></svg-icon>
<span class="q-ml-sm">{{ $t('hotelorder.warn') }}</span>
</div>
<q-btn color="grey" @click="setShowWarnHander(x.OrderId)" dense size="sm" flat
:label="expendsOrderId == x.OrderId ? $t('expends.off') : $t('expends.on')" />
<q-btn color="grey" @click="setShowWarnHander(x.OrderId)" dense size="sm" flat :label="expendsOrderId == x.OrderId ? $t('expends.off') : $t('expends.on')" />
</div>
<div class="col desktop-only"></div>
<div class="rounded-borders bg-grey-2 q-pa-md"
:class="{ 'q-mx-md': $q.platform.is.desktop, 'q-mt-md': $q.platform.is.mobile }">
<div class="rounded-borders bg-grey-2 q-pa-md" :class="{ 'q-mx-md': $q.platform.is.desktop, 'q-mt-md': $q.platform.is.mobile }">
<div class="row items-center justify-between q-mb-sm q-pb-sm" style="border-bottom: 1px dashed #ddd">
<div class="f12 text-grey">{{ $t('hotelorder.orderMoney') }}</div>
<div class="dark q-ml-xl">
......@@ -162,8 +140,7 @@
<span class="f12">{{ $t('unit.jp') }}</span>
</div>
</div>
<div class="row items-center justify-between q-mb-sm q-pb-sm" style="border-bottom: 1px dashed #ddd"
v-if="x.CustomerPayType == 1 || x.CustomerPayType == 3">
<div class="row items-center justify-between q-mb-sm q-pb-sm" style="border-bottom: 1px dashed #ddd" v-if="x.CustomerPayType == 1 || x.CustomerPayType == 3">
<div class="f12 text-grey">{{ $t('hotelorder.payType.t1') }}</div>
<div class="dark">
<span class="f12">{{ moneyFormat(x.SelfPayMoney) }}</span>
......@@ -178,10 +155,8 @@
</div>
</div>
</div>
<div class="rounded-borders q-pa-sm justify-between"
:class="{ column: $q.platform.is.desktop, 'row items-center': $q.platform.is.mobile, 'bg-green-1': x.OrderStatus != 1, 'bg-grey-2': x.OrderStatus == 1 }">
<q-list dense v-if="x.OrderStatus == 1"
:class="{ 'row items-center justify-between full-width': $q.platform.is.mobile }">
<div class="rounded-borders q-pa-sm justify-between" :class="{ column: $q.platform.is.desktop, 'row items-center': $q.platform.is.mobile, 'bg-green-1': x.OrderStatus != 1, 'bg-grey-2': x.OrderStatus == 1 }">
<q-list dense v-if="x.OrderStatus == 1" :class="{ 'row items-center justify-between full-width': $q.platform.is.mobile }">
<q-item class="text-negative" clickable v-close-popup @click="cancelConfirmHandler(x.OrderId)">
<q-item-section>
<q-item-label>{{ $t('hotelorder.opera.cancel') }}</q-item-label>
......@@ -209,8 +184,7 @@
</div>
</q-card>
<q-card class="light-shadow q-pa-md bg-white rounded-borders q-mb-md" v-if="pages.pageCount > 0" flat>
<q-pagination class="full-width justify-end" v-model="pages.pageIndex" color="primary" :max="pages.pageCount"
:input="true" @update:model-value="changePageHandler" />
<q-pagination class="full-width justify-end" v-model="pages.pageIndex" color="primary" :max="pages.pageCount" :input="true" @update:model-value="changePageHandler" />
</q-card>
<q-inner-loading :showing="loading" :label="$t('loading')" label-class="text-grey-6 f12" />
</div>
......@@ -219,29 +193,30 @@
<div class="q-mt-md f12 text-grey-6">{{ $t('noneData') }}</div>
</div>
<q-dialog v-model="PaymentDialog">
<div class="rounded-borders bg-white q-pb-lg q-pt-lg" style="width: 450px">
<div class="orderListDialog-title row justify-center q-pb-xs">
<span class="text-weight-bold">{{ $t('hotelorder.dialog.title') }}</span>
<q-icon class="orderListDialog-close text-grey" name="close" @click="PaymentDialog = false"></q-icon>
<div class="rounded-borders bg-white q-px-lg q-pb-lg q-pt-lg" :style="{'width': $q.platform.is.desktop?'450px':'450px'}">
<div class="orderListDialog-title row justify-center q-pb-xs ">
<span class="text-weight-bold">{{$t('hotelorder.dialog.title')}}</span>
<q-icon class="orderListDialog-close text-grey" name="close" @click="PaymentDialog=false"></q-icon>
</div>
<div class="orderListDialog-bg column rounded-borders q-ma-lg q-py-lg q-px-lg">
<div class="orderListDialog-img">
<div class="row items-end q-pb-md">
<span class="text-grey-3">{{ $t('hotelorder.dialog.AccountName') }}：</span>
<span class="text-weight-bold text-white" style="font-size: 18px">張三</span>
<span class="text-grey-3">{{$t('hotelorder.dialog.AccountName')}}：</span>
<span class="text-weight-bold text-white" style="font-size: 18px;">張三</span>
</div>
<div class="row items-center justify-between q-pb-sm">
<div>
<span class="text-grey-3">{{$t('hotelorder.dialog.account')}}：</span>
<span class="text-cyan-12 text-weight-bold" style="font-size: 18px;">7489327279423</span>
</div>
<div class="q-pb-sm" :class="{'row items-center justify-between':$q.platform.is.desktop}">
<div :class="{'q-mb-sm':$q.platform.is.mobile,'col':$q.platform.is.desktop}" >
<span class="text-grey-3">{{ $t('hotelorder.dialog.account') }}：</span>
<span class="text-cyan-12 text-weight-bold din" style="font-size: 18px">7489 3272 7942 311</span>
</div >
<q-btn :class="{'q-ml-xl':$q.platform.is.mobile}" unelevated size="xs" class="bg-blue-11 text-white" v-if="copyId != -1" :label="$t('hotelorder.dialog.copy')" @click="setCopyHandler(null,'開戶名：張三，帳戶：7489 3272 7942 311')"></q-btn>
<q-btn :class="{'q-ml-xl':$q.platform.is.mobile}" icon="check" unelevated size="xs" class="bg-blue-11 text-white" :label="$t('hotelorder.copyed')" v-else></q-btn>
<q-btn size="xs" color="cyan-12 q-ml-sm">
<span class="text-dark">{{$t('hotelorder.dialog.copy')}}</span></q-btn>
</div>
</div>
</div>
<div class="row justify-center q-pb-lg">
<span class="text-center f12 text-grey-6 q-px-lg">{{ $t('hotelorder.dialog.prompt') }}</span>
<div class="row justify-center q-pb-lg q-px-lg q-mx-lg">
<span class="text-center text-grey-8 q-px-lg">{{$t('hotelorder.dialog.prompt')}}</span>
</div>
</div>
</q-dialog>
......@@ -257,7 +232,7 @@ import { RoomType, StandardStatus } from '../../../../@types'
import { getHotelOrderStatus, getHotelRoomType, moneyFormat } from '../../../../utils/tools'
import { useI18n } from 'vue-i18n'
import svgIcon from '../../../global/svg-icon.vue'
import { copyToClipboard, useQuasar } from 'quasar'
import { useQuasar } from 'quasar'
import { currentRouter } from '../../../../router'
import { UploadFileInfo } from 'naive-ui'
import { slice } from 'lodash'
......@@ -306,7 +281,7 @@ export default defineComponent({
})
const methods = {
ViewPayment() {
ViewPayment(){
data.PaymentDialog = true
},
initOrders() {
......@@ -366,15 +341,8 @@ export default defineComponent({
data.loading = false
})
},
setCopyHandler(order: any,ctx?:string) {
if(ctx){
data.copyId = -1
copyToClipboard(ctx)
}else{
setCopyHandler(order: any) {
data.copyId = order.OrderId
copyToClipboard(order.OrderNo)
}
setTimeout(() => {
data.copyId = 0
}, 2000)
......@@ -386,7 +354,7 @@ export default defineComponent({
data.pages.pageIndex = n
methods.initOrders()
},
uploadHandleChange(orderId: number) {
uploadHandleChange(orderId:number) {
data.uploadOrderId = orderId
data.loading = true
},
......@@ -402,33 +370,32 @@ export default defineComponent({
handleFinish(options: { file: UploadFileInfo; event?: ProgressEvent }) {
data.loading = false
let r = (options.event?.target as XMLHttpRequest).response
if (r) {
let res = JSON.parse(r)
if (res.resultCode == ApiResult.SUCCESS && res.data) {
if(r){
let res=JSON.parse(r)
if(res.resultCode == ApiResult.SUCCESS && res.data){
methods.setGuestListHandler(res.data)
} else {
}else{
message.errorMsg(t('upload.failed'))
data.loading = false
data.loading=false
}
} else {
}else{
message.errorMsg(t('upload.failed'))
data.loading = false
data.loading=false
}
},
setGuestListHandler(url: string) {
HotelService.SetGuestFile(data.uploadOrderId, url)
.then(r => {
if (r.data.resultCode == ApiResult.SUCCESS) {
setGuestListHandler(url:string){
HotelService.SetGuestFile(data.uploadOrderId,url).then(r=>{
if(r.data.resultCode == ApiResult.SUCCESS){
message.successMsg(t('upload.success'))
let order = data.orders.find(x => x.OrderId == data.uploadOrderId)
order.GuestFileList = [url]
} else {
let order = data.orders.find(x=>x.OrderId==data.uploadOrderId)
order.GuestFileList=[url]
}else{
message.errorMsg(t('upload.failed'))
}
data.loading = false
})
.catch(r => {
data.loading = false
data.loading=false
}).catch(r=>{
data.loading=false
message.errorMsg(r.message)
})
}
......@@ -452,45 +419,37 @@ export default defineComponent({
.light-border table th {
border-color: #eee !important;
}
.light-border .room-item {
height: 28px;
line-height: 28px;
border-bottom: 1px solid #eee;
}
.light-border .room-item:last-child {
border-bottom: none;
}
.light-border .max-hotelname {
width: 140px;
height: 28px;
line-height: 28px;
}
.orderListDialog-title {
.orderListDialog-title{
position: relative;
}
.orderListDialog-title span {
.orderListDialog-title span{
font-size: 20px;
}
.orderListDialog-close {
.orderListDialog-close{
position: absolute;
right: 0;
top: -10px;
font-size: 26px;
}
.orderListDialog-bg {
background: #5098ff;
.orderListDialog-bg{
background: #5098FF;
border-radius: 10px;
}
.orderListDialog-img {
background: url('../../../../assets/images/wallet.png') no-repeat right #5098ff;
.orderListDialog-img{
background: url('../../../../assets/images/wallet.png')no-repeat right #5098FF;
background-size: 97px 100%;
}
</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