Skip to content

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

優化顯示

parent 5b1b09e8
Hide whitespace changes
Inline Side-by-side
Showing with 127 additions and 59 deletions
package.json
View file @ 25d240f0
......@@ -23,6 +23,7 @@
"lodash": "^4.17.21",
"md5-ts": "^0.1.6",
"mermaid": "^8.12.1",
"opencc-js": "^1.0.4",
"quasar": "^2.10.1",
"quasar-tiptap-branch": "^1.8.1",
"vue": "^3.0.0",
......
src/App.vue
View file @ 25d240f0
......@@ -190,6 +190,7 @@ body
right: 0
z-index: 1
box-shadow: rgba(0, 0, 0, 0.05) -2px 0px 0px
.sticky-header-table
.q-table__top,
.q-table__bottom,
......@@ -237,4 +238,27 @@ body
background: var(--q-primary)
color: white
cursor: pointer
.sticky-rightrowspan-column-table
max-width: 100%
thead
background: rgb(245, 246, 247)
thead tr:first-child
height: 40px
line-height: 14px
thead tr:first-child th
font-size: 12px
font-weight: 400
color: rgb(168, 168, 179)
thead tr:first-child th:last-child
background-color: rgb(245, 246, 247)
td:last-child
background-color: #fff
th:last-child,
tbody tr:first-child td:last-child
position: sticky
right: 0
z-index: 1
box-shadow: rgba(0, 0, 0, 0.05) -2px 0px 0px
</style>
src/api/hotel.ts
View file @ 25d240f0
......@@ -6,17 +6,27 @@ class HotelService {
static async SetCustomerOrder(param:any):Promise<HttpResponse>{
return request('dict_post_SetCustomerOrder',param)
}
/**
* 查詢城市信息
* @param params
* @returns
* @param params
* @returns
*/
static async GetDestination(params: any): Promise<HttpResponse> {
return request('dict_post_Destination_GetChildList', params)
}
/**
* 取消酒店订单
* @param OrderId 订单编号
* @returns
*/
static async CancelHotelOrder(OrderId: number): Promise<HttpResponse> {
return request('dict_post_CancelCustomerOrder', {OrderId})
}
static async GetHasStockHotelList(): Promise<HttpResponse> {
let params={
IsMoreThanZero: 0,
......@@ -33,8 +43,8 @@ class HotelService {
/**
* 查詢當前登入用戶的酒店訂單信息
* @param param
* @returns
* @param param
* @returns
*/
static async GetHotelOrders(param:any):Promise<HttpResponse>{
return request('dict_post_GetMyCustomerOrderPageList',param)
......@@ -45,7 +55,7 @@ class HotelService {
* @param name 酒店名稱，支持空格分割
* @param province 省編號
* @param city 城市編號
* @returns
* @returns
*/
static async GetHotels(name:string, province: number, city: number): Promise<HttpResponse> {
let params = {
......
src/components/hotel/order/list/OrderList.vue
View file @ 25d240f0
<template>
<div >
<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">
......@@ -11,8 +11,8 @@
<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-else>{{$t('hotelorder.search.tcNum')}}：{{x.TCNum}}</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>
<div class="q-ml-md f12" :class="[x.typeInfo.Color]">
......@@ -39,15 +39,15 @@
</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-else>{{$t('hotelorder.search.tcNum')}}：{{x.TCNum}}</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>
</div>
</div>
<div class="q-mt-md row">
<q-table separator="vertical" :hide-bottom="true" dense :rows="x.DetailList" bordered :columns="cols" class="light-border col no-shadow text-left">
<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">
......@@ -73,10 +73,15 @@
{{ $t('hotelorder.check.un') }}
</n-tag>
<n-tag :bordered="false" size="small" type="success" v-else>
{{ props.row.ReserveRoomNo}}
{{ props.row.ReserveRoomNo }}
</n-tag>
</q-td>
</template>
<template v-slot:body-cell-HandFittingFee="props">
<q-td :props="props" :rowspan="x.DetailList.length" v-if="props.rowIndex==0">
{{x.HandFittingFee}}
</q-td>
</template>
<template v-slot:body-cell-HotelName="props">
<q-td :props="props">
<div class="max-hotelname ellipsis">{{ props.value }}</div>
......@@ -85,16 +90,16 @@
</template>
</q-table>
</div>
<div class="q-mt-md" :class="{ row: $q.platform.is.desktop, 'column reverse': $q.platform.is.mobile }">
<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="q-mb-sm" v-if="x.CustomerPayType == 2 || x.CustomerPayType == 3">
<div class="f12" v-html="$t('hotelorder.pay.t1', { d: x.PaymentDate, e: x.FinalPaymentDate })"></div>
<q-btn dense outline color="accent" size="sm" class="q-mt-sm" :label="$t('hotelorder.payinfo')"></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 v-if="x.CustomerPayType == 1 || x.CustomerPayType == 3">
<div class="f12" v-html="$t('hotelorder.pay.t2', { e: x.UploadGuestDate })"></div>
<q-btn dense outline color="primary" size="sm" class="q-mt-sm" :label="$t('hotelorder.uploadGuest')"></q-btn>
</div>
......@@ -109,7 +114,7 @@
</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="row items-center justify-between q-mb-sm q-pb-sm" style="border-bottom:1px dashed #ddd;">
<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">
<span class="f12">{{ $t('unit.jpc') }}</span>
......@@ -117,40 +122,40 @@
<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">{{ (x.SelfPayMoney ?? 1999).toFixed(2) }}</span>
<span class="f12">{{ $t('unit.jp') }}</span>
</div>
</div>
<div class="row items-center justify-between" v-if="x.CustomerPayType==2 ||x.CustomerPayType==3">
<div class="f12 text-grey">{{ $t('hotelorder.payType.t2') }}</div>
<div class="dark">
<span class="f12">{{ (x.BeforeMoney ?? 0).toFixed(2) }}</span>
<span class="f12">{{ $t('unit.jp') }}</span>
</div>
<div class="row items-center justify-between" v-if="x.CustomerPayType == 2 || x.CustomerPayType == 3">
<div class="f12 text-grey">{{ $t('hotelorder.payType.t2') }}</div>
<div class="dark">
<span class="f12">{{ (x.BeforeMoney ?? 0).toFixed(2) }}</span>
<span class="f12">{{ $t('unit.jp') }}</span>
</div>
</div>
</div>
<div class="rounded-borders q-pa-md 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 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>
<q-item-section>
<q-item-label>{{ $t('hotelorder.opera.cancel') }}</q-item-label>
</q-item-section>
</q-item>
<q-item class="text-primary" clickable v-close-popup>
<q-item-section>
<q-item-label>{{ $t('hotelorder.opera.edit') }}</q-item-label>
</q-item-section>
</q-item>
<!-- <q-item class="text-dark" clickable v-close-popup>
<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>
</q-item-section>
</q-item>
<q-item class="text-primary" clickable v-close-popup>
<q-item-section>
<q-item-label>{{ $t('hotelorder.opera.edit') }}</q-item-label>
</q-item-section>
</q-item>
<!-- <q-item class="text-dark" clickable v-close-popup>
<q-item-section>
<q-item-label>{{ $t('hotelorder.opera.view') }}</q-item-label>
</q-item-section>
</q-item> -->
</q-list>
<div v-else>
</q-list>
<div v-else>
<div class="f12 text-green-4">{{ $t('hotelorder.payed') }}</div>
<div class="text-subtitle1 din text-green-14">
0.00
......@@ -160,18 +165,14 @@
</div>
</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-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-card>
<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>
<div class="text-center q-mt-xl" v-if="(!orders || orders.length==0) && !loading">
<div class="text-center q-mt-xl" v-if="(!orders || orders.length == 0) && !loading">
<svg-icon :size="50" color="nav" icon="General/Clipboard.svg"></svg-icon>
<div class="q-mt-md f12 text-grey-6">{{$t('noneData')}}</div>
<div class="q-mt-md f12 text-grey-6">{{ $t('noneData') }}</div>
</div>
</template>
......@@ -185,16 +186,18 @@ import { RoomType, StandardStatus } from '../../../../@types'
import { getHotelOrderStatus, getHotelRoomType } from '../../../../utils/tools'
import { useI18n } from 'vue-i18n'
import svgIcon from '../../../global/svg-icon.vue'
import { useQuasar } from 'quasar'
export default defineComponent({
components: { svgIcon },
setup(props) {
const search = inject(DirtionmaryHelper.HOTEL_ORDER_SEARCH) as any
const { t } = useI18n()
const $q = useQuasar()
watch(search, (n, o) => {
if (data.loading) return
data.loading=true
data.loading = true
data.pages.pageIndex = 1
data.orders = []
methods.initOrders()
......@@ -217,10 +220,11 @@ export default defineComponent({
{ name: 'HotelName', label: t('hotelorder.col.hn'), field: (row: any) => row.HotelName, align: 'left' },
{ name: 'Room', label: t('hotelorder.col.r'), align: 'left' },
{ name: 'RoomNo', label: t('hotelorder.col.n'), align: 'left' },
{ name: 'Tax', label: t('hotelorder.col.t'), field: (row: any) => (row.TaxesPrice ? (`${(row.PeopleNum*row.TaxesPrice).toFixed(2)}`) : t('hotelorder.col.noneTax')), align: 'left' },
{ name: 'Tax2', label: t('hotelorder.col.t2'), field: (row: any) => (row.PriceInTangTax ? (`${(row.PeopleNum*row.PriceInTangTax).toFixed(2)}`) : t('hotelorder.col.noneTax')), align: 'left' },
{ name: 'Tax', label: t('hotelorder.col.t'), field: (row: any) => (row.TaxesPrice ? `${(row.PeopleNum * row.TaxesPrice).toFixed(2)}` : t('hotelorder.col.noneTax')), align: 'left' },
{ name: 'Tax2', label: t('hotelorder.col.t2'), field: (row: any) => (row.PriceInTangTax ? `${(row.PeopleNum * row.PriceInTangTax).toFixed(2)}` : t('hotelorder.col.noneTax')), align: 'left' },
{ name: 'Money', label: t('hotelorder.col.m'), field: (row: any) => (row.HotelMoeny + row.TaxesPrice).toFixed(2), align: 'left' },
{ name: 'PayType', label: t('hotelorder.col.pt'), field: (row: any) => (row.PayType == 1 ? t('hotelorder.payType.t1') : t('hotelorder.payType.t2')), align: 'left' }
{ name: 'PayType', label: t('hotelorder.col.pt'), field: (row: any) => (row.PayType == 1 ? t('hotelorder.payType.t1') : t('hotelorder.payType.t2')), align: 'left' },
{ name: 'HandFittingFee', label: t('hotelorder.hands'), align: 'left' }
] as any
})
......@@ -237,7 +241,7 @@ export default defineComponent({
let PeopleNum = 0
y.RoomList.forEach((z: any) => {
z.RoomInfo = data.rooms.find(r => r.TypeId == z.RoomType) ?? data.rooms[0]
PeopleNum+=z.PeopleNumber
PeopleNum += z.PeopleNumber
})
console.log(PeopleNum)
y.PeopleNum = PeopleNum
......@@ -245,15 +249,41 @@ export default defineComponent({
})
data.orders = r.data.data.pageData
data.pages.pageCount = r.data.data.pageCount
} else {
message.errorMsg(r.data.message)
}
data.loading=false
data.loading = false
})
.catch(e => {
message.errorMsg(e.message)
data.loading = false
})
},
cancelConfirmHandler(orderId: number){
$q.dialog({
title: t('dialog.titles.horder'),
message: t('dialog.contents.horder'),
cancel: true,
persistent: true
}).onOk(() => {
methods.cancelOrderHandler(orderId)
})
},
cancelOrderHandler(orderId: number) {
if (data.loading) return
data.loading = true
HotelService.CancelHotelOrder(orderId)
.then(r => {
if (r.data.resultCode == ApiResult.SUCCESS) {
data.pages.pageIndex = 1
this.initOrders()
}
data.loading = false
message.errorMsg(r.data.message)
})
.catch(e => {
message.errorMsg(e.message)
data.loading=false
data.loading = false
})
},
setCopyHandler(order: any) {
......
src/i18n/zh-TW/index.ts
View file @ 25d240f0
......@@ -15,10 +15,12 @@ export default {
loading: '正在加載數據',
dialog:{
titles:{
hotel:'移除酒店警示'
hotel:'移除酒店警示',
horder:'取消订单警示'
},
contents:{
hotel:'你確定要移除{day}的酒店{hotel}?'
hotel:'你確定要移除{day}的酒店{hotel}?',
horder:'你确定需要取消此订单吗？'
}
},
close:'關閉',
......@@ -37,6 +39,7 @@ export default {
t1: '出發前收款酒店，請您於 <span class="text-orange">{d}</span> 前支付訂金，並且於 <span class="text-negative">{e}</span> 日前支付尾款',
t2: '到店自付酒店，需要您於 <span class="text-negative">{e}</span> 前上傳旅客名單'
},
hands:'手配費',
payinfo: '查看支付方式',
sendpay: '提繳付款憑證',
uploadGuest: '上傳旅客名單',
......
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