Skip to content

B
bigwood
Commit 9e322a5c authored by 黄奎's avatar 黄奎
Browse files
Options

页面调整

parent ccacaa2d
Show whitespace changes
Inline Side-by-side
Showing with 1395 additions and 769 deletions
src/api/hotel.ts
View file @ 9e322a5c
...@@ -91,7 +91,7 @@ class HotelService { ...@@ -91,7 +91,7 @@ class HotelService {
"pageSize":100, "pageSize":100,
"currentPage":1, "currentPage":1,
"total":0, "total":0,
"OpType":0 "OpType":1
} }
return request('hoteltip_get_GetPageList', params) return request('hoteltip_get_GetPageList', params)
} }
......
src/components/hotel/list/ListCar.vue
View file @ 9e322a5c
<template> <template>
<q-card class="bg-white q-pb-md window-height column" :style="{'width':$q.platform.is.desktop?'500px':'100vw','height':$q.platform.is.desktop?'100%':'100vh'}"> <q-card
class="bg-white q-pb-md window-height column"
:style="{
width: $q.platform.is.desktop ? '500px' : '100vw',
height: $q.platform.is.desktop ? '100%' : '100vh',
}"
>
<div class="q-pt-md q-px-lg row items-center justify-between"> <div class="q-pt-md q-px-lg row items-center justify-between">
<div class="row items-center"> <div class="row items-center">
<q-icon v-if="$q.platform.is.mobile" class="q-pr-sm" style="margin-left: -15px;" name="navigate_before" size="30px" @click="close"></q-icon> <q-icon
<span class="text-h6">{{ $t('hotel.car.subtitle') }}</span> v-if="$q.platform.is.mobile"
class="q-pr-sm"
style="margin-left: -15px"
name="navigate_before"
size="30px"
@click="close"
></q-icon>
<span class="text-h6">{{ $t("hotel.car.subtitle") }}</span>
</div> </div>
<span class="q-pa-sm rounded-border bg-orange-1 text-orange-8 f12"> <span class="q-pa-sm rounded-border bg-orange-1 text-orange-8 f12">
{{$t('hotel.car.title')}} {{ $t("hotel.car.title") }}
<span class="din text-orange-10">{{cars.length}}</span> <span class="din text-orange-10">{{ cars.length }}</span>
{{$t('hotel.car.title1')}} {{ $t("hotel.car.title1") }}
<span class="din text-primary">{{HotelLength}}</span> <span class="din text-primary">{{ HotelLength }}</span>
{{$t('hotel.car.title2')}} {{ $t("hotel.car.title2") }}
</span> </span>
<div v-if="$q.platform.is.desktop" v-close-popup class="q-pa-sm" :class="{'draw-close':$q.platform.is.desktop,'draw-close-modile':$q.platform.is.mobile}"> <div
v-if="$q.platform.is.desktop"
v-close-popup
class="q-pa-sm"
:class="{
'draw-close': $q.platform.is.desktop,
'draw-close-modile': $q.platform.is.mobile,
}"
>
<q-icon name="close" size="26px"></q-icon> <q-icon name="close" size="26px"></q-icon>
</div> </div>
</div> </div>
<q-separator color="grey-3" class="q-mt-md" /> <q-separator color="grey-3" class="q-mt-md" />
<q-scroll-area v-if="cars && cars.length > 0" :thumb-style="scrollStyle.thumbStyle" :bar-style="scrollStyle.barStyle" class="col"> <q-scroll-area
v-if="cars && cars.length > 0"
<div class="q-pa-sm rounded-borders bg-dark text-grey-2 q-mx-md q-mt-md" v-for="(x,xi) in cars" > :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="text-subtitle1 din text-weight-bolder">{{ x.Date }}</div>
<q-list bordered separator> <q-list bordered separator>
<q-slide-item class="rounded-borders" v-for="(y,i) in x.Hotels" :class="{'q-mt-sm':i>0}" :right-color="rightColor" @right="onRight"> <q-slide-item
class="rounded-borders"
v-for="(y, i) in x.Hotels"
:class="{ 'q-mt-sm': i > 0 }"
:right-color="rightColor"
@right="onRight"
>
<template v-slot:right> <template v-slot:right>
<div :class="{'opera-box':$q.platform.is.desktop,'opera-box-mobile':$q.platform.is.mobile,'column':$q.platform.is.mobile,'justify-center':$q.platform.is.mobile,'q-px-md':$q.platform.is.mobile}"> <div
<div class="text-center full-width" :class="{'row':$q.platform.is.mobile,'items-center':$q.platform.is.mobile}"> :class="{
<q-btn rounded icon="mode" color="primary" dense unelevated :class="{'q-mr-md':$q.platform.is.desktop,'q-mr-lg':$q.platform.is.mobile}" @click="setEditorHandler(y)"/> 'opera-box': $q.platform.is.desktop,
<q-btn rounded icon="delete" color="negative" dense unelevated @click="removeHotelHandler(xi,i)"/> 'opera-box-mobile': $q.platform.is.mobile,
column: $q.platform.is.mobile,
'justify-center': $q.platform.is.mobile,
'q-px-md': $q.platform.is.mobile,
}"
>
<div
class="text-center full-width"
:class="{
row: $q.platform.is.mobile,
'items-center': $q.platform.is.mobile,
}"
>
<q-btn
rounded
icon="mode"
color="primary"
dense
unelevated
:class="{
'q-mr-md': $q.platform.is.desktop,
'q-mr-lg': $q.platform.is.mobile,
}"
@click="setEditorHandler(y)"
/>
<q-btn
rounded
icon="delete"
color="negative"
dense
unelevated
@click="removeHotelHandler(xi, i)"
/>
</div> </div>
</div> </div>
</template> </template>
<div class="q-pa-sm rounded-borders bg-light-blue-1 hotel-car-item"> <div class="q-pa-sm rounded-borders bg-light-blue-1 hotel-car-item">
<div v-if="$q.platform.is.desktop" :class="{'opera-box':$q.platform.is.desktop,'opera-box-mobile':$q.platform.is.mobile,'column':$q.platform.is.mobile,'justify-center':$q.platform.is.mobile,'q-px-md':$q.platform.is.mobile}"> <div
<div class="text-center full-width" :class="{'column':$q.platform.is.mobile,'items-center':$q.platform.is.mobile}"> v-if="$q.platform.is.desktop"
<q-btn rounded icon="mode" color="primary" dense unelevated :class="{'q-mr-md':$q.platform.is.desktop,'q-mb-lg':$q.platform.is.mobile}" @click="setEditorHandler(y)"/> :class="{
<q-btn rounded icon="delete" color="negative" dense unelevated @click="removeHotelHandler(xi,i)"/> 'opera-box': $q.platform.is.desktop,
'opera-box-mobile': $q.platform.is.mobile,
column: $q.platform.is.mobile,
'justify-center': $q.platform.is.mobile,
'q-px-md': $q.platform.is.mobile,
}"
>
<div
class="text-center full-width"
:class="{
column: $q.platform.is.mobile,
'items-center': $q.platform.is.mobile,
}"
>
<q-btn
rounded
icon="mode"
color="primary"
dense
unelevated
:class="{
'q-mr-md': $q.platform.is.desktop,
'q-mb-lg': $q.platform.is.mobile,
}"
@click="setEditorHandler(y)"
/>
<q-btn
rounded
icon="delete"
color="negative"
dense
unelevated
@click="removeHotelHandler(xi, i)"
/>
</div> </div>
</div> </div>
<div class="text-subtitle2 text-weight-bolder text-primary row items-center"> <div
class="text-subtitle2 text-weight-bolder text-primary row items-center"
>
<div class="col"> <div class="col">
<span class="listCarHotelName" :style="{'width':$q.platform.is.desktop?'300px':'200px'}">{{ y.HotelName }}</span> <span
class="listCarHotelName"
:style="{ width: $q.platform.is.desktop ? '300px' : '200px' }"
>{{ y.HotelName }}</span
>
</div> </div>
<div class="f12"> <div class="f12">
<span>{{ $t('hotel.shopping.TheSelected') }}</span> <span>{{ $t("hotel.shopping.TheSelected") }}</span>
<span class="text-red q-px-sm">{{ y.SumPeople }}</span> <span class="text-red q-px-sm">{{ y.SumPeople }}</span>
<span>{{ $t('unit.ren') }}</span> <span>{{ $t("unit.ren") }}</span>
<span class="text-red q-px-sm">{{ y.Total }}</span> <span class="text-red q-px-sm">{{ y.Total }}</span>
<span>{{ $t('hotel.shopping.between') }}</span> <span>{{ $t("hotel.shopping.between") }}</span>
</div> </div>
</div> </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
<div class="row no-wrap items-center q-mt-sm" :class="{'justify-between':$q.platform.is.mobile}" v-for="z in y.DetailList"> class="q-mt-sm q-pb-sm text-dark"
<div :class="{'col-6':$q.platform.is.desktop,'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}"> style="
<span :class="{'col-6':$q.platform.is.desktop,'q-mb-xs':$q.platform.is.mobile}">{{ z.RoomName }}</span> border-top: 1px dashed var(--q-primary);
<span :class="{'col-6':$q.platform.is.desktop}">{{ moneyFormat(z.Unit_Price) }}/{{ $t('unit.ren') }}</span> border-bottom: 1px dashed var(--q-primary);
"
>
<div
class="row no-wrap items-center q-mt-sm"
:class="{ 'justify-between': $q.platform.is.mobile }"
v-for="z in y.DetailList"
>
<div
:class="{
'col-6': $q.platform.is.desktop,
row: $q.platform.is.desktop,
column: $q.platform.is.mobile,
}"
>
<span
:class="{
'col-6': $q.platform.is.desktop,
'q-mb-xs': $q.platform.is.mobile,
}"
>{{ z.RoomName }}</span
>
<span :class="{ 'col-6': $q.platform.is.desktop }"
>{{ moneyFormat(z.Unit_Price) }}/{{ $t("unit.ren") }}</span
>
</div> </div>
<div :class="{'col':$q.platform.is.desktop,'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}"> <div
<span :class="{'col-4':$q.platform.is.desktop,'text-right':$q.platform.is.mobile,'q-mb-xs':$q.platform.is.mobile}"> :class="{
col: $q.platform.is.desktop,
row: $q.platform.is.desktop,
column: $q.platform.is.mobile,
}"
>
<span
:class="{
'col-4': $q.platform.is.desktop,
'text-right': $q.platform.is.mobile,
'q-mb-xs': $q.platform.is.mobile,
}"
>
<span>{{ z.PeopleNumber }}</span> <span>{{ z.PeopleNumber }}</span>
<span>{{ $t('unit.ren') }}</span> <span>{{ $t("unit.ren") }}</span>
<span>{{ z.Number }}</span> <span>{{ z.Number }}</span>
<span>{{ $t('hotel.shopping.between') }}</span> <span>{{ $t("hotel.shopping.between") }}</span>
</span> </span>
<span class="col text-right">{{ $t('hotelorder.xj') }}：{{ moneyFormat(z.Unit_Price * z.PeopleNumber) }}</span> <span class="col text-right"
>{{ $t("hotelorder.xj") }}：{{
moneyFormat(z.Unit_Price * z.PeopleNumber)
}}</span
>
</div>
</div> </div>
</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>
<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)"> <div class="q-mt-sm text-right text-primary">
<span v-if="y.TaxesPrice > 0">{{ $t('hotelorder.col.t') }}：{{ y.TaxesPrice }}*{{ y.SumPeople }}{{ $t('unit.ren') }}={{ moneyFormat(y.TaxesPrice * y.SumPeople) }}</span> {{ $t("hotel.groupPrice") }}：{{ moneyFormat(y.Money) }}
<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>
<div class="q-mt-sm text-right text-primary">{{ $t('hotel.groupPrice') }}：{{ moneyFormat(y.Money) }}</div>
</div> </div>
</q-slide-item> </q-slide-item>
</q-list> </q-list>
...@@ -79,39 +240,172 @@ ...@@ -79,39 +240,172 @@
</q-scroll-area> </q-scroll-area>
<div v-else class="q-pa-lg row items-center justify-center"> <div v-else class="q-pa-lg row items-center justify-center">
{{$t('noneData')}} {{ $t("noneData") }}
</div> </div>
<div class="column q-px-md" v-if="cars && cars.length>0"> <div class="column q-px-md" v-if="cars && cars.length > 0">
<div class="col " <div
:class="{'row':$q.platform.is.desktop,'wrap':$q.platform.is.desktop,'justify-between':$q.platform.is.desktop,'q-py-lg':$q.platform.is.desktop,'q-py-sm':$q.platform.is.mobile,}"> class="col"
<div :class="{'col-6':$q.platform.is.desktop}"> :class="{
<n-select filterable :class="{'q-pr-sm':$q.platform.is.desktop,'q-pb-lg':$q.platform.is.desktop,'q-pb-sm':$q.platform.is.mobile}" row: $q.platform.is.desktop,
v-model:value="parameters.OrderType" :placeholder="$t('hotel.car.OrderType')" :options="cacheHotels" max-tag-count="responsive" size="large" value-field="ID" label-field="Name" /> wrap: $q.platform.is.desktop,
'justify-between': $q.platform.is.desktop,
'q-py-lg': $q.platform.is.desktop,
'q-py-sm': $q.platform.is.mobile,
}"
>
<div :class="{ 'col-6': $q.platform.is.desktop }">
<n-select
filterable
:class="{
'q-pr-sm': $q.platform.is.desktop,
'q-pb-lg': $q.platform.is.desktop,
'q-pb-sm': $q.platform.is.mobile,
}"
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> </div>
<div v-if="parameters.OrderType == 2" :class="{'col-6':$q.platform.is.desktop}"> <div
<q-input :class="{'q-pl-sm':$q.platform.is.desktop,'q-pb-lg':$q.platform.is.desktop,'q-pb-sm':$q.platform.is.mobile}" v-model="parameters.TCNum" reverse-fill-mask dense type="text" standout :label="$t('hotel.car.inputText') + $t('hotel.car.TCNum')" ref="TCNumRef" :rules="$q.platform.is.desktop?[val => !!val || $t('hotel.car.inputText') + $t('hotel.car.TCNum')]:[val => !!val || '']" /> v-if="parameters.OrderType == 2"
:class="{ 'col-6': $q.platform.is.desktop }"
>
<q-input
:class="{
'q-pl-sm': $q.platform.is.desktop,
'q-pb-lg': $q.platform.is.desktop,
'q-pb-sm': $q.platform.is.mobile,
}"
v-model="parameters.TCNum"
reverse-fill-mask
dense
type="text"
standout
:label="$t('hotel.car.inputText') + $t('hotel.car.TCNum')"
ref="TCNumRef"
:rules="
$q.platform.is.desktop
? [(val) => !!val || $t('hotel.car.inputText') + $t('hotel.car.TCNum')]
: [(val) => !!val || '']
"
/>
</div> </div>
<template v-if="parameters.OrderType == 1"> <template v-if="parameters.OrderType == 1">
<div :class="{'col-6':$q.platform.is.desktop}"> <div :class="{ 'col-6': $q.platform.is.desktop }">
<q-input v-model="parameters.ContactName" :class="{'q-pl-sm':$q.platform.is.desktop,'q-pb-lg':$q.platform.is.desktop,'q-pb-sm':$q.platform.is.mobile}" reverse-fill-mask dense type="text" standout :label="$t('hotel.car.inputText') + $t('hotel.car.ContactName')" ref="ContactNameRef" :rules="$q.platform.is.desktop?[val => !!val || $t('hotel.car.inputText') + $t('hotel.car.ContactName')]:[val => !!val || '']" /> <q-input
v-model="parameters.ContactName"
:class="{
'q-pl-sm': $q.platform.is.desktop,
'q-pb-lg': $q.platform.is.desktop,
'q-pb-sm': $q.platform.is.mobile,
}"
reverse-fill-mask
dense
type="text"
standout
:label="$t('hotel.car.inputText') + $t('hotel.car.ContactName')"
ref="ContactNameRef"
:rules="
$q.platform.is.desktop
? [
(val) =>
!!val || $t('hotel.car.inputText') + $t('hotel.car.ContactName'),
]
: [(val) => !!val || '']
"
/>
</div> </div>
<div :class="{'col-6':$q.platform.is.desktop}"> <div :class="{ 'col-6': $q.platform.is.desktop }">
<q-input v-model="parameters.ContactNumber" :class="{'col-6':$q.platform.is.desktop,'q-pr-sm':$q.platform.is.desktop,'q-pb-lg':$q.platform.is.desktop,'q-pb-sm':$q.platform.is.mobile}" reverse-fill-mask dense type="text" standout :label="$t('hotel.car.inputText') + $t('hotel.car.ContactNumber')" ref="ContactNumberRef" :rules="$q.platform.is.desktop?[val => !!val || $t('hotel.car.inputText') + $t('hotel.car.ContactNumber')]:[val => !!val || '']" /> <q-input
v-model="parameters.ContactNumber"
:class="{
'col-6': $q.platform.is.desktop,
'q-pr-sm': $q.platform.is.desktop,
'q-pb-lg': $q.platform.is.desktop,
'q-pb-sm': $q.platform.is.mobile,
}"
reverse-fill-mask
dense
type="text"
standout
:label="$t('hotel.car.inputText') + $t('hotel.car.ContactNumber')"
ref="ContactNumberRef"
:rules="
$q.platform.is.desktop
? [
(val) =>
!!val ||
$t('hotel.car.inputText') + $t('hotel.car.ContactNumber'),
]
: [(val) => !!val || '']
"
/>
</div> </div>
</template> </template>
<q-input :class="{'col-6':$q.platform.is.desktop,'q-pl-sm':$q.platform.is.desktop&&parameters.OrderType == 1,'q-pr-sm':$q.platform.is.desktop&&parameters.OrderType == 2,'q-pb-lg':$q.platform.is.desktop}" v-model="parameters.Remark" reverse-fill-mask dense filled clearable type="text" :label="$t('hotel.car.Remark')" /> <q-input
:class="{
'col-6': $q.platform.is.desktop,
'q-pl-sm': $q.platform.is.desktop && parameters.OrderType == 1,
'q-pr-sm': $q.platform.is.desktop && parameters.OrderType == 2,
'q-pb-lg': $q.platform.is.desktop,
}"
v-model="parameters.Remark"
reverse-fill-mask
dense
filled
clearable
type="text"
:label="$t('hotel.car.Remark')"
/>
</div> </div>
<div :class="{'row':$q.platform.is.desktop,'justify-between':$q.platform.is.desktop,'items-center':$q.platform.is.desktop,}"> <div
:class="{
row: $q.platform.is.desktop,
'justify-between': $q.platform.is.desktop,
'items-center': $q.platform.is.desktop,
}"
>
<div class="text-negative text-weight-bolder din"> <div class="text-negative text-weight-bolder din">
<span class="text-weight-thin">{{$t('hotel.car.sumPrice')}}：</span> <span class="text-weight-thin">{{ $t("hotel.car.sumPrice") }}：</span>
<span class="fz14">円</span>
<span class="text-h6">{{ moneyFormat(parameters.Money) }}</span> <span class="text-h6">{{ moneyFormat(parameters.Money) }}</span>
<template v-if="b2bUserInfo && b2bUserInfo.groupId == 2">
<span class="fz14">円</span>
</template>
<template
v-if="
cars &&
cars.length > 0 &&
cars[0].Hotels &&
cars[0].Hotels.length > 0 &&
cars[0].Hotels[0].DetailList &&
cars[0].Hotels[0].DetailList.length > 0
"
>
<span class="fz14"> {{ cars[0].Hotels[0].DetailList[0].CurrencyName }}</span>
</template>
</div> </div>
<div :class="{'row':$q.platform.is.mobile,'justify-end':$q.platform.is.mobile,'q-pt-sm':$q.platform.is.mobile}"> <div
<q-btn color="primary" size="md" unelevated class="q-px-xl" :loading="loading" @click="submit"> :class="{
row: $q.platform.is.mobile,
'justify-end': $q.platform.is.mobile,
'q-pt-sm': $q.platform.is.mobile,
}"
>
<q-btn
color="primary"
size="md"
unelevated
class="q-px-xl"
:loading="loading"
@click="submit"
>
<div class="ellipsis"> <div class="ellipsis">
{{ $t('hotel.car.submit') }} {{ $t("hotel.car.submit") }}
</div> </div>
</q-btn> </q-btn>
</div> </div>
...@@ -121,47 +415,60 @@ ...@@ -121,47 +415,60 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref, reactive, toRefs, provide, onMounted, inject, watch, onBeforeUnmount, computed } from 'vue' import {
import { useI18n } from 'vue-i18n' defineComponent,
import useScrollModule from '../../../module/scrollbar/scrollModule' ref,
import { DirtionmaryHelper } from '../../../config/dictionary' reactive,
import message from '../../../utils/message' toRefs,
import { ApiResult } from '../../../@types/enumHelper' provide,
import HotelService from '../../../api/hotel' onMounted,
import { moneyFormat, dateDiffer } from '../../../utils/tools' inject,
import { useQuasar } from 'quasar' watch,
import { NSelect } from 'naive-ui' onBeforeUnmount,
computed,
} 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, dateDiffer } from "../../../utils/tools";
import { getStoreGetter } from "../../../store/utils";
import { useQuasar } from "quasar";
import { NSelect } from "naive-ui";
export default defineComponent({ export default defineComponent({
components: { NSelect }, components: { NSelect },
props: {}, props: {},
setup(props, context) { setup(props, context) {
const HotelLength = inject(DirtionmaryHelper.HOTEL_CAR_ORDER_LENGTH) as any const HotelLength = inject(DirtionmaryHelper.HOTEL_CAR_ORDER_LENGTH) as any;
const orderstatus = inject(DirtionmaryHelper.HOTEL_CAR_ORDER_STATUS) as any const orderstatus = inject(DirtionmaryHelper.HOTEL_CAR_ORDER_STATUS) as any;
const cars = inject(DirtionmaryHelper.HOTEL_CAR_LIST) as any const cars = inject(DirtionmaryHelper.HOTEL_CAR_LIST) as any;
// cars&&cars.value.forEach((item:any,index:Number) => { // cars&&cars.value.forEach((item:any,index:Number) => {
// if(dateDiffer(item.Date)<15){ // if(dateDiffer(item.Date)<15){
// cars.value.splice(index,1) // cars.value.splice(index,1)
// } // }
// }); // });
HotelLength.value = cars.value.length const b2bUserInfo = getStoreGetter<UserGetter>("user", "getUser");
const editor = inject(DirtionmaryHelper.HOTEL_UPDATEHOTEL_CAR) as any HotelLength.value = cars.value.length;
const { t } = useI18n() const editor = inject(DirtionmaryHelper.HOTEL_UPDATEHOTEL_CAR) as any;
const TCNumRef = ref(null) as any const { t } = useI18n();
const ContactNameRef = ref(null) as any const TCNumRef = ref(null) as any;
const ContactNumberRef = ref(null) as any const ContactNameRef = ref(null) as any;
const $q = useQuasar() const ContactNumberRef = ref(null) as any;
const $q = useQuasar();
const data = reactive({ const data = reactive({
scrollStyle: {} as any, scrollStyle: {} as any,
addNum: 1, addNum: 1,
parameters: { parameters: {
Money: 0, Money: 0,
DetailList: [] as Array<any>, DetailList: [] as Array<any>,
Remark: '', Remark: "",
OrderType: 1, //订单类型 1散客 2团队 OrderType: 1, //订单类型 1散客 2团队
TCNum: '', //=团队时 传递 组团号 TCNum: "", //=团队时 传递 组团号
ContactName: '', //=散客时 传递 联系人 ContactName: "", //=散客时 传递 联系人
ContactNumber: '', //=散客时 传递 联系人电话 ContactNumber: "", //=散客时 传递 联系人电话
OrderId: 0 OrderId: 0,
}, },
currentIndex: 0, currentIndex: 0,
currentI: 0, currentI: 0,
...@@ -169,114 +476,113 @@ export default defineComponent({ ...@@ -169,114 +476,113 @@ export default defineComponent({
RemainingInventory: 0, RemainingInventory: 0,
loading: false, loading: false,
cacheHotels: [ cacheHotels: [
{ Name: t('hotel.car.scattered'), ID: 1 }, { Name: t("hotel.car.scattered"), ID: 1 },
{ Name: t('hotel.car.group'), ID: 2 } { Name: t("hotel.car.group"), ID: 2 },
] ],
}) });
data.scrollStyle = useScrollModule().scrollStyle data.scrollStyle = useScrollModule().scrollStyle;
const info = ref(null) const info = ref(null);
const panning = ref(false) const panning = ref(false);
// 今天购买数量 // 今天购买数量
watch(cars.value, (n, o) => { watch(cars.value, (n, o) => {
methods.getMoney() methods.getMoney();
}) });
const slideRatio = ref({ const slideRatio = ref({
left: 0, left: 0,
right: 0 right: 0,
}) });
const rightColor = computed(() => ( const rightColor = computed(() =>
slideRatio.value.right >= 1 slideRatio.value.right >= 1 ? "bg-light-blue-1" : "blue-1"
? 'bg-light-blue-1' );
: 'blue-1' let timer;
)) function finalize(reset) {
let timer
function finalize (reset) {
timer = setTimeout(() => { timer = setTimeout(() => {
reset() reset();
}, 1000) }, 1000);
} }
onBeforeUnmount(() => { onBeforeUnmount(() => {
clearTimeout(timer) clearTimeout(timer);
}) });
const methods = { const methods = {
onRight ({ reset }) { onRight({ reset }) {
finalize(reset) finalize(reset);
}, },
close(){ close() {
context.emit('close') context.emit("close");
}, },
getMoney() { getMoney() {
data.parameters.Money = 0 data.parameters.Money = 0;
cars.value.forEach((item: any) => { cars.value.forEach((item: any) => {
item.Hotels.forEach((t: any) => { item.Hotels.forEach((t: any) => {
data.parameters.Money += t.Money data.parameters.Money += t.Money;
}) });
}) });
}, },
submit() { submit() {
let temp = JSON.parse(JSON.stringify(cars.value)) let temp = JSON.parse(JSON.stringify(cars.value));
if(data.loading) return if (data.loading) return;
let flag = false let flag = false;
if (data.parameters.OrderType == 1) { if (data.parameters.OrderType == 1) {
ContactNameRef.value.validate() ContactNameRef.value.validate();
ContactNumberRef.value.validate() ContactNumberRef.value.validate();
flag = !ContactNameRef.value.hasError && !ContactNumberRef.value.hasError flag = !ContactNameRef.value.hasError && !ContactNumberRef.value.hasError;
}else{ } else {
TCNumRef.value.validate() TCNumRef.value.validate();
flag = !TCNumRef.value.hasError flag = !TCNumRef.value.hasError;
} }
if(!flag) return if (!flag) return;
data.loading = true data.loading = true;
data.parameters.DetailList = [] as Array<any> data.parameters.DetailList = [] as Array<any>;
temp.forEach((x:any)=>{ temp.forEach((x: any) => {
x.Hotels.forEach((y:any)=>{ x.Hotels.forEach((y: any) => {
y.RoomList = JSON.parse(JSON.stringify(y.DetailList)) y.RoomList = JSON.parse(JSON.stringify(y.DetailList));
delete y.DetailList delete y.DetailList;
data.parameters.DetailList.push(y) data.parameters.DetailList.push(y);
}) });
}) });
data.loading = true data.loading = true;
HotelService.SetCustomerOrder(data.parameters) HotelService.SetCustomerOrder(data.parameters)
.then(r => { .then((r) => {
if (r.data.resultCode == ApiResult.SUCCESS) { if (r.data.resultCode == ApiResult.SUCCESS) {
message.successMsg(`${t('success')}`) message.successMsg(`${t("success")}`);
localStorage.removeItem(DirtionmaryHelper.HOTEL_HOTELCARS_CACHE) localStorage.removeItem(DirtionmaryHelper.HOTEL_HOTELCARS_CACHE);
cars.value=[] cars.value = [];
orderstatus.value = true orderstatus.value = true;
HotelLength.value = 0 HotelLength.value = 0;
context.emit('success') context.emit("success");
} else { } else {
message.errorMsg(r.data.message) message.errorMsg(r.data.message);
} }
data.loading = false data.loading = false;
})
.catch(e => {
message.errorMsg(e.message)
data.loading = false
}) })
.catch((e) => {
message.errorMsg(e.message);
data.loading = false;
});
}, },
removeHotelHandler(x:number,y:number){ removeHotelHandler(x: number, y: number) {
$q.dialog({ $q.dialog({
title: t('dialog.titles.hotel'), title: t("dialog.titles.hotel"),
message: `${t('dialog.contents.hotel.t1')} ${cars.value[x].Date} ${t('dialog.contents.hotel.t2')}${cars.value[x].Hotels[y].HotelName}`, message: `${t("dialog.contents.hotel.t1")} ${cars.value[x].Date} ${t(
"dialog.contents.hotel.t2"
)}${cars.value[x].Hotels[y].HotelName}`,
cancel: true, cancel: true,
persistent: true persistent: true,
}).onOk(() => { }).onOk(() => {
if(cars.value[x].Hotels.length==1){ if (cars.value[x].Hotels.length == 1) {
cars.value.splice(x,1) cars.value.splice(x, 1);
}else{ } else {
cars.value[x].Hotels.splice(y,1) cars.value[x].Hotels.splice(y, 1);
} }
HotelLength.value = cars.value.length HotelLength.value = cars.value.length;
}) });
}, },
setEditorHandler(x:any){ setEditorHandler(x: any) {
editor.value = x editor.value = x;
context.emit('close') context.emit("close");
} },
} };
methods.getMoney() methods.getMoney();
return { return {
...toRefs(data), ...toRefs(data),
cars, cars,
...@@ -288,47 +594,49 @@ export default defineComponent({ ...@@ -288,47 +594,49 @@ export default defineComponent({
panning, panning,
rightColor, rightColor,
HotelLength, HotelLength,
...methods } b2bUserInfo,
} ...methods,
}) };
},
});
</script> </script>
<style> <style>
.ListCar-title { .ListCar-title {
white-space: wrap; white-space: wrap;
} }
.hotel-car-item{ .hotel-car-item {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.hotel-car-item .opera-box{ .hotel-car-item .opera-box {
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: 0;
top: 0; top: 0;
right: 0; right: 0;
display: none; display: none;
background: rgba(0,0,0,.3); background: rgba(0, 0, 0, 0.3);
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.hotel-car-item:hover .opera-box{ .hotel-car-item:hover .opera-box {
display: flex; display: flex;
} }
.hotel-car-item .opera-box-mobile{ .hotel-car-item .opera-box-mobile {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
top: 0; top: 0;
right: 0; right: 0;
display: none; display: none;
background: rgba(0,0,0,.3); background: rgba(0, 0, 0, 0.3);
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.listCarHotelName{ .listCarHotelName {
display: block; display: block;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
......
src/components/hotel/list/ListTable.vue
View file @ 9e322a5c
<template> <template>
<div class="full-height column hotel-list"> <div class="full-height column hotel-list">
<!-- <hotelCard></hotelCard> --> <!-- <hotelCard></hotelCard> -->
<q-table v-if="$q.platform.is.desktop" :loading="loading" :rows="hotels" :loading-label="$t('loading')" <q-table
class="sticky-column-table col sticky-header-column-table hotel-table" flat :pagination="pages" v-if="$q.platform.is.desktop"
:no-data-label="$t('noneData')"> :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> <template v-slot:top>
<div class="row full-width"> <div class="row full-width">
<div class="col"></div> <div class="col"></div>
...@@ -15,8 +22,8 @@ ...@@ -15,8 +22,8 @@
</template> </template>
<template v-slot:header> <template v-slot:header>
<q-tr> <q-tr>
<q-th>{{ $t('hotel.col.first') }}</q-th> <q-th>{{ $t("hotel.col.first") }}</q-th>
<q-th>{{ $t('hotel.col.second') }}</q-th> <q-th>{{ $t("hotel.col.second") }}</q-th>
<q-th v-for="(x, i) in cols"> <q-th v-for="(x, i) in cols">
{{ x }} {{ x }}
</q-th> </q-th>
...@@ -24,25 +31,35 @@ ...@@ -24,25 +31,35 @@
</template> </template>
<template v-slot:body="props"> <template v-slot:body="props">
<q-tr :props="props"> <q-tr :props="props">
<q-td style="width:200px;" class="cursor-pointer ListTable-title" <q-td
@click="showHotelDetailHandler(props.row.HotelId)"> style="width: 200px"
<div class="ellipsis-3-lines" style="padding: 7px 16px;width: 200px;white-space: break-spaces;"> class="cursor-pointer ListTable-title"
@click="showHotelDetailHandler(props.row.HotelId)"
>
<div
class="ellipsis-3-lines"
style="padding: 7px 16px; width: 200px; white-space: break-spaces"
>
{{ props.row.HotelName }} {{ props.row.HotelName }}
<!-- <q-tooltip style="padding:none;">
<hotel-card class="ListTable-show"></hotel-card>
</q-tooltip> -->
</div> </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>
<div class="td-item">{{ $t('hotel.table.ins') }}</div> <div class="td-item">{{ $t("hotel.table.ins") }}</div>
<div class="td-item">{{ $t('hotel.table.confirm') }}</div> <div class="td-item">{{ $t("hotel.table.confirm") }}</div>
<div class="td-item">{{ $t('hotel.table.limit') }}</div> <div class="td-item">{{ $t("hotel.table.limit") }}</div>
</q-td> </q-td>
<q-td v-for="x in props.row.subList" <q-td
@click="x.PriceList[0].CostPrice > 0 ? showOrderSubmitHandler(props.row, x) : ''"> v-for="x in props.row.subList"
@click="
x.PriceList[0].CostPrice > 0 ? showOrderSubmitHandler(props.row, x) : ''
"
>
<template v-if="x.PriceList && x.PriceList.length > 0"> <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]"> <div
class="td-item cursor-pointer"
:class="[x.PriceList[0].ins.bg, x.PriceList[0].ins.color]"
>
{{ x.PriceList[0].CostPrice }} {{ x.PriceList[0].CostPrice }}
<q-tooltip> <q-tooltip>
<sample-price-list :price="x"></sample-price-list> <sample-price-list :price="x"></sample-price-list>
...@@ -56,7 +73,10 @@ ...@@ -56,7 +73,10 @@
<div class="td-item cursor-pointer"> <div class="td-item cursor-pointer">
{{ x.ConfirmNum }}/{{ x.ReserveNum }} {{ x.ConfirmNum }}/{{ x.ReserveNum }}
</div> </div>
<div class="td-item" :class="{ 'bg-red-9 text-white': x.UseInventory - x.Inventory > 0 }"> <div
class="td-item"
:class="{ 'bg-red-9 text-white': x.UseInventory - x.Inventory > 0 }"
>
<span v-if="x.UseInventory - x.Inventory > 0"> <span v-if="x.UseInventory - x.Inventory > 0">
{{ x.UseInventory - x.Inventory }} {{ x.UseInventory - x.Inventory }}
</span> </span>
...@@ -65,46 +85,93 @@ ...@@ -65,46 +85,93 @@
</q-tr> </q-tr>
</template> </template>
<template v-slot:bottom> <template v-slot:bottom>
<q-pagination class="full-width justify-end" v-model="pages.pageIndex" color="primary" :max="pages.pageCount" <q-pagination
:input="true" @update:model-value="changePageHandler" /> class="full-width justify-end"
v-model="pages.pageIndex"
color="primary"
:max="pages.pageCount"
:input="true"
@update:model-value="changePageHandler"
/>
</template> </template>
</q-table> </q-table>
<q-table hide-header v-else :title="pageTitle" :rows="hotels" grid :columns="mobileCols" row-key="name" <q-table
card-class="no-shadow bg-primary text-white" :pagination="pages" :loading="loading"> hide-header
v-else
:title="pageTitle"
:rows="hotels"
grid
:columns="mobileCols"
row-key="name"
card-class="no-shadow bg-primary text-white"
:pagination="pages"
:loading="loading"
>
<template v-slot:item="props"> <template v-slot:item="props">
<div @click="viewHotelPriceListHandler(props.row)" class="rounded-borders bg-primary text-white col-12 q-mb-sm" <div
style="padding: 12px;margin-left: 12px;margin-right: 12px; width: calc(100% - 24px);"> @click="viewHotelPriceListHandler(props.row)"
class="rounded-borders bg-primary text-white col-12 q-mb-sm"
style="
padding: 12px;
margin-left: 12px;
margin-right: 12px;
width: calc(100% - 24px);
"
>
<div @click.stop="showHotelDetailHandler(props.row.HotelId)"> <div @click.stop="showHotelDetailHandler(props.row.HotelId)">
<div style="opacity: 0.54;font-weight: 500;font-size: 12px;margin-bottom: 4px;">{{ $t('hotel.col.first') }} <div
style="opacity: 0.54; font-weight: 500; font-size: 12px; margin-bottom: 4px"
>
{{ $t("hotel.col.first") }}
</div> </div>
<div style="font-size: 13px;">{{ props.row.HotelName }}</div> <div style="font-size: 13px">{{ props.row.HotelName }}</div>
</div> </div>
<div class="q-my-md"> <div class="q-my-md">
<div style="opacity: 0.54;font-weight: 500;font-size: 12px;margin-bottom: 4px;">{{ $t('hotel.col.three') }} <div
style="opacity: 0.54; font-weight: 500; font-size: 12px; margin-bottom: 4px"
>
{{ $t("hotel.col.three") }}
</div> </div>
<div style="font-size: 13px;">{{ props.row.TotalInventory }}</div> <div style="font-size: 13px">{{ props.row.TotalInventory }}</div>
</div> </div>
<div> <div>
<div style="opacity: 0.54;font-weight: 500;font-size: 12px;margin-bottom: 4px;">{{ $t('hotel.col.four') }} <div
style="opacity: 0.54; font-weight: 500; font-size: 12px; margin-bottom: 4px"
>
{{ $t("hotel.col.four") }}
</div> </div>
<div class=""> <div class="">
<span>円{{ props.row.LowerPrice.toFixed(2) }}{{ $t('unit.jp') }} {{ $t('hotel.col.low') }}</span> <span
>円{{ props.row.LowerPrice.toFixed(2) }}{{ $t("unit.jp") }}
{{ $t("hotel.col.low") }}</span
>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<template v-slot:bottom> <template v-slot:bottom>
<q-pagination class="full-width justify-end" v-model="pages.pageIndex" color="primary" :max="pages.pageCount" <q-pagination
:input="true" @update:model-value="changePageHandler" /> class="full-width justify-end"
v-model="pages.pageIndex"
color="primary"
:max="pages.pageCount"
:input="true"
@update:model-value="changePageHandler"
/>
</template> </template>
</q-table> </q-table>
<q-dialog v-model="showPriceList"> <q-dialog v-model="showPriceList">
<hotel-price-list :hotel="queryHotelObj" @update:model-value="showOrderSubmitHandler"></hotel-price-list> <hotel-price-list
:hotel="queryHotelObj"
@update:model-value="showOrderSubmitHandler"
></hotel-price-list>
</q-dialog> </q-dialog>
<q-dialog v-model="showOrderPreview" persistent> <q-dialog v-model="showOrderPreview" persistent>
<table-operation :HotelRow="orderSubmitObj" :hotelInfor="orderSubmitItemObj" <table-operation
@close="showOrderPreview = false"></table-operation> :HotelRow="orderSubmitObj"
:hotelInfor="orderSubmitItemObj"
@close="showOrderPreview = false"
></table-operation>
</q-dialog> </q-dialog>
<q-dialog v-model="showHotelDetails" persistent> <q-dialog v-model="showHotelDetails" persistent>
<hotel-details :hotelId="showHotelDetailId"></hotel-details> <hotel-details :hotelId="showHotelDetailId"></hotel-details>
...@@ -113,48 +180,54 @@ ...@@ -113,48 +180,54 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { ApiResult } from '../../../@types/enumHelper' import { ApiResult } from "../../../@types/enumHelper";
import HotelService from '../../../api/hotel' import HotelService from "../../../api/hotel";
import { DirtionmaryHelper } from '../../../config/dictionary' import { DirtionmaryHelper } from "../../../config/dictionary";
import message from '../../../utils/message' import message from "../../../utils/message";
import { defineComponent, inject, reactive, toRefs, watch } from 'vue' import { defineComponent, inject, reactive, toRefs, watch } from "vue";
import { date, useQuasar } from 'quasar' import { date, useQuasar } from "quasar";
import { DateType, getDateType, getDayOfWeek } from '../../../utils/tools' import { DateType, getDateType, getDayOfWeek } from "../../../utils/tools";
import { useI18n } from 'vue-i18n' import { useI18n } from "vue-i18n";
import HotelPriceList from './HotelPriceList.vue' import HotelPriceList from "./HotelPriceList.vue";
import TableOperation from "./TableOperation.vue" import TableOperation from "./TableOperation.vue";
import SamplePriceList from './SamplePriceList.vue' import SamplePriceList from "./SamplePriceList.vue";
import hotelCard from './hotelCard.vue' import hotelCard from "./hotelCard.vue";
import hotelDetails from './hotelDetails.vue' import hotelDetails from "./hotelDetails.vue";
export default defineComponent({ export default defineComponent({
components: { HotelPriceList, TableOperation, SamplePriceList, hotelCard, hotelDetails }, components: {
name: 'list-table', HotelPriceList,
TableOperation,
SamplePriceList,
hotelCard,
hotelDetails,
},
name: "list-table",
setup() { setup() {
const $q = useQuasar() const $q = useQuasar();
const { t } = useI18n() const { t } = useI18n();
const orderstatus = inject(DirtionmaryHelper.HOTEL_CAR_ORDER_STATUS) as any const orderstatus = inject(DirtionmaryHelper.HOTEL_CAR_ORDER_STATUS) as any;
const search = inject(DirtionmaryHelper.HOTEL_QUERY_PARAM) as any const search = inject(DirtionmaryHelper.HOTEL_QUERY_PARAM) as any;
const updateHotel = inject(DirtionmaryHelper.HOTEL_UPDATEHOTEL_CAR) as any const updateHotel = inject(DirtionmaryHelper.HOTEL_UPDATEHOTEL_CAR) as any;
watch(search, (n, o) => { watch(search, (n, o) => {
if (data.loading) return if (data.loading) return;
data.pages.pageIndex = 1 data.pages.pageIndex = 1;
methods.calcDateRangeCols() methods.calcDateRangeCols();
methods.initHotels() methods.initHotels();
}) });
watch(updateHotel, (n, o) => { watch(updateHotel, (n, o) => {
if (updateHotel.value.HotelId) { if (updateHotel.value.HotelId) {
data.showOrderPreview = true data.showOrderPreview = true;
data.orderSubmitItemObj = null data.orderSubmitItemObj = null;
data.orderSubmitObj = null data.orderSubmitObj = null;
} }
//methods.initHotels() //methods.initHotels()
}) });
watch(orderstatus, (n, o) => { watch(orderstatus, (n, o) => {
if (orderstatus.value == true) { if (orderstatus.value == true) {
methods.initHotels() methods.initHotels();
orderstatus.value = false orderstatus.value = false;
} }
}) });
const data = reactive({ const data = reactive({
hotels: [] as Array<any>, hotels: [] as Array<any>,
...@@ -164,14 +237,27 @@ export default defineComponent({ ...@@ -164,14 +237,27 @@ export default defineComponent({
pageIndex: 1, pageIndex: 1,
pageSize: 10, pageSize: 10,
pageCount: 0, pageCount: 0,
rowsPerPage: 10 rowsPerPage: 10,
}, },
pageTitle: '' as (string | undefined), pageTitle: "" as string | undefined,
dateTypes: [] as Array<DateType>, dateTypes: [] as Array<DateType>,
mobileCols: [ 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: "HotelName",
{ name: 'LowerPrice', label: t('hotel.col.four'), field: (row: any) => `¥${row.LowerPrice.toFixed(2)}${$t('unit.jp')} ${t('hotel.col.low')}` } 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("unit.jp")} ${t("hotel.col.low")}`,
},
], ],
showPriceList: false, showPriceList: false,
queryHotelObj: {}, queryHotelObj: {},
...@@ -179,95 +265,99 @@ export default defineComponent({ ...@@ -179,95 +265,99 @@ export default defineComponent({
orderSubmitItemObj: {} as any, orderSubmitItemObj: {} as any,
showOrderPreview: false, showOrderPreview: false,
showHotelDetails: false, showHotelDetails: false,
showHotelDetailId: 0 showHotelDetailId: 0,
}) });
data.dateTypes = getDateType()
data.pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY)
data.dateTypes = getDateType();
data.pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY);
const methods = { const methods = {
initHotels() { initHotels() {
data.loading = true data.loading = true;
data.hotels = [] data.hotels = [];
let param = Object.assign(data.pages, search) let param = Object.assign(data.pages, search);
HotelService.GetHotelList(param) HotelService.GetHotelList(param)
.then(r => { .then((r) => {
if (r.data.resultCode == ApiResult.SUCCESS) { if (r.data.resultCode == ApiResult.SUCCESS) {
r.data.data.pageData.forEach((x: any) => { r.data.data.pageData.forEach((x: any) => {
x.subList.forEach((y: any) => { x.subList.forEach((y: any) => {
y.PriceList.forEach((z: any) => { y.PriceList.forEach((z: any) => {
z.ins = methods.getDateTypeById(z.InventoryType) z.ins = methods.getDateTypeById(z.InventoryType);
}) });
let cd = new Date(y.DateStr) let cd = new Date(y.DateStr);
y.FormatDate = `${date.formatDate(cd, 'MM/DD')} (${getDayOfWeek(date.getDayOfWeek(cd))})` y.FormatDate = `${date.formatDate(cd, "MM/DD")} (${getDayOfWeek(
}) date.getDayOfWeek(cd)
)})`;
});
if ($q.platform.is.mobile) { if ($q.platform.is.mobile) {
x.LowerPrice = methods.calcLowerPrice(x) x.LowerPrice = methods.calcLowerPrice(x);
} }
}) });
data.hotels = r.data.data.pageData data.hotels = r.data.data.pageData;
} else { } else {
message.errorMsg(r.data.message) message.errorMsg(r.data.message);
} }
data.pages.pageCount = r.data.data.pageCount data.pages.pageCount = r.data.data.pageCount;
data.loading = false data.loading = false;
})
.catch(e => {
message.errorMsg(e.message)
data.loading = false
}) })
.catch((e) => {
message.errorMsg(e.message);
data.loading = false;
});
}, },
calcDateRangeCols() { calcDateRangeCols() {
data.cols = [] data.cols = [];
let dateBegin = new Date(search.StartDate) let dateBegin = new Date(search.StartDate);
const dateEnd = new Date(search.EndDate) const dateEnd = new Date(search.EndDate);
while (dateBegin <= dateEnd) { while (dateBegin <= dateEnd) {
data.cols.push(`${date.formatDate(dateBegin, 'MM/DD')} (${getDayOfWeek(date.getDayOfWeek(dateBegin))})`) data.cols.push(
dateBegin = date.addToDate(dateBegin, { days: 1 }) `${date.formatDate(dateBegin, "MM/DD")} (${getDayOfWeek(
date.getDayOfWeek(dateBegin)
)})`
);
dateBegin = date.addToDate(dateBegin, { days: 1 });
} }
console.log(data.cols) console.log(data.cols);
}, },
changePageHandler(n: any) { changePageHandler(n: any) {
console.log(n) console.log(n);
data.pages.pageIndex = n data.pages.pageIndex = n;
methods.initHotels() methods.initHotels();
}, },
getDateTypeById(id: number) { getDateTypeById(id: number) {
return data.dateTypes.find(x => x.id == id) return data.dateTypes.find((x) => x.id == id);
}, },
calcLowerPrice(hotel: any) { calcLowerPrice(hotel: any) {
let lower = 0 let lower = 0;
hotel.subList.forEach((x: any) => { hotel.subList.forEach((x: any) => {
if (x.PriceList && x.PriceList.length > 0) { if (x.PriceList && x.PriceList.length > 0) {
x.PriceList.forEach((y: any) => { x.PriceList.forEach((y: any) => {
if (y.CostPrice > lower) lower = y.CostPrice if (y.CostPrice > lower) lower = y.CostPrice;
}) });
} }
}) });
return lower return lower;
}, },
viewHotelPriceListHandler(row: any) { viewHotelPriceListHandler(row: any) {
data.queryHotelObj = row data.queryHotelObj = row;
data.showPriceList = true data.showPriceList = true;
}, },
showOrderSubmitHandler(row: any, col: any) { showOrderSubmitHandler(row: any, col: any) {
data.orderSubmitObj = row data.orderSubmitObj = row;
data.orderSubmitItemObj = col data.orderSubmitItemObj = col;
data.showOrderPreview = true data.showOrderPreview = true;
}, },
showHotelDetailHandler(hotelId: number) { showHotelDetailHandler(hotelId: number) {
data.showHotelDetailId = hotelId data.showHotelDetailId = hotelId;
data.showHotelDetails = true data.showHotelDetails = true;
} },
} };
methods.calcDateRangeCols() methods.calcDateRangeCols();
methods.initHotels() methods.initHotels();
return { ...toRefs(data), ...methods } return { ...toRefs(data), ...methods };
} },
}) });
</script> </script>
<style> <style>
...@@ -298,7 +388,7 @@ export default defineComponent({ ...@@ -298,7 +388,7 @@ export default defineComponent({
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
font-size: 13px; font-size: 13px;
font-family: 'Microsoft YaHei' !important; font-family: "Microsoft YaHei" !important;
color: var(--q-dark); color: var(--q-dark);
text-align: center; text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.12); border-bottom: 1px solid rgba(0, 0, 0, 0.12);
......
src/components/hotel/list/TableOperation.vue
View file @ 9e322a5c
<template> <template>
<q-card flat class="q-pa-lg" style="shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);" <q-card
:style="{ 'width': $q.platform.is.desktop ? '50vw' : '100vw' }"> flat
class="q-pa-lg"
style="shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15)"
:style="{ width: $q.platform.is.desktop ? '50vw' : '100vw' }"
>
<div class="q-mb-xs"> <div class="q-mb-xs">
<div class="" :class="{ 'row items': $q.platform.is.desktop }"> <div class="" :class="{ 'row items': $q.platform.is.desktop }">
<span class="text-primary text-h6 col">{{ parameters.HotelName }}</span> <span class="text-primary text-h6 col">{{ parameters.HotelName }}</span>
<div class="f12" :class="{ 'q-mt-sm': $q.platform.is.mobile }"> <div class="f12" :class="{ 'q-mt-sm': $q.platform.is.mobile }">
<span class="q-mr-md"> <span class="q-mr-md">
<q-icon name="check" size="18px" color="primary" v-if="parameters.PriceIsBreakfast == 1" /> <q-icon
name="check"
size="18px"
color="primary"
v-if="parameters.PriceIsBreakfast == 1"
/>
<q-icon name="close" size="18px" color="negative" v-else /> <q-icon name="close" size="18px" color="negative" v-else />
{{ $t('dinner.a') }} {{ $t("dinner.a") }}
</span> </span>
<span class=""> <span class="">
<q-icon name="check" size="18px" color="primary" v-if="parameters.PriceIsDinner == 1" /> <q-icon
name="check"
size="18px"
color="primary"
v-if="parameters.PriceIsDinner == 1"
/>
<q-icon name="close" size="18px" color="negative" v-else /> <q-icon name="close" size="18px" color="negative" v-else />
{{ $t('dinner.c') }} {{ $t("dinner.c") }}
</span> </span>
</div> </div>
</div> </div>
<div class="q-my-md rounded-borders q-pa-sm bg-yellow-1 row items-center justify-between"> <div
<q-field stack-label :label="$t('hotel.inHouseDate')" class="text-primary" standout dense> 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
>
<template v-slot:control> <template v-slot:control>
<div class="self-center no-outline text-yellow-10" tabindex="0">{{ joinHouse.dateRangeFormat }}</div> <div class="self-center no-outline text-yellow-10" tabindex="0">
{{ joinHouse.dateRangeFormat }}
</div>
</template> </template>
<!-- <q-popup-proxy :offset="[0, 10]" ref="qDateProxyOpera">
<q-date v-model="joinHouse.dateRange" :options="optionsFn" range mask="YYYY/MM/DD" landscape @range-end="dateRangeHandler"></q-date>
</q-popup-proxy> -->
</q-field> </q-field>
<span class="text-grey-6 f12"> <span class="text-grey-6 f12">
{{ $t('hotel.inhouseDays') }} {{ $t("hotel.inhouseDays") }}
<span class="din text-yellow-10">{{ joinHouse.days }}</span> <span class="din text-yellow-10">{{ joinHouse.days }}</span>
{{ $t('unit.night') }} {{ $t("unit.night") }}
</span> </span>
</div> </div>
</div> </div>
<div class="f12 text-negative q-mb-md">{{ $t('hotel.waringTips') }}</div> <div class="f12 text-negative q-mb-md">{{ $t("hotel.waringTips") }}</div>
<div class="rounded-borders" style="max-height: 35vh; overflow-y: auto" <div
:class="{ 'bg-grey-1': $q.platform.is.desktop, 'q-px-md': $q.platform.is.desktop, 'q-py-sm': $q.platform.is.desktop, }"> class="rounded-borders"
style="max-height: 35vh; overflow-y: auto"
:class="{
'bg-grey-1': $q.platform.is.desktop,
'q-px-md': $q.platform.is.desktop,
'q-py-sm': $q.platform.is.desktop,
}"
>
<template v-for="(item, index) in parameters.DetailList"> <template v-for="(item, index) in parameters.DetailList">
<div class="row no-wrap items-center q-py-sm"
:style="{ 'border-top': index > 0 && !item.Tips && $q.platform.is.desktop ? '1px dashed #ddd' : '' }"
:class="{ 'HotelTableOperation': $q.platform.is.mobile, 'q-px-md': $q.platform.is.mobile, 'q-mb-md': $q.platform.is.mobile }">
<div <div
:class="{ 'row': $q.platform.is.desktop, 'col-5': $q.platform.is.desktop, 'q-pr-md': $q.platform.is.mobile, 'col-6': $q.platform.is.mobile, 'column': $q.platform.is.mobile }"> class="row no-wrap items-center q-py-sm"
<div :class="{ 'q-pr-md': $q.platform.is.desktop, 'col-4': $q.platform.is.desktop, }"> :style="{
'border-top':
index > 0 && !item.Tips && $q.platform.is.desktop ? '1px dashed #ddd' : '',
}"
:class="{
HotelTableOperation: $q.platform.is.mobile,
'q-px-md': $q.platform.is.mobile,
'q-mb-md': $q.platform.is.mobile,
}"
>
<div
:class="{
row: $q.platform.is.desktop,
'col-5': $q.platform.is.desktop,
'q-pr-md': $q.platform.is.mobile,
'col-6': $q.platform.is.mobile,
column: $q.platform.is.mobile,
}"
>
<div
:class="{
'q-pr-md': $q.platform.is.desktop,
'col-4': $q.platform.is.desktop,
}"
>
<div class="f12">{{ item.RoomName }}</div> <div class="f12">{{ item.RoomName }}</div>
</div> </div>
<div class="text-negative f12" :class="{ 'col-6': $q.platform.is.desktop, 'q-pt-sm': $q.platform.is.mobile }"> <div
class="text-negative f12"
:class="{
'col-6': $q.platform.is.desktop,
'q-pt-sm': $q.platform.is.mobile,
}"
>
<template v-if="b2bUserInfo && b2bUserInfo.groupId == 2">
<span class="fz10">円</span> <span class="fz10">円</span>
</template>
<span class="din">{{ item.UPriceFormat }}</span> <span class="din">{{ item.UPriceFormat }}</span>
<span class="text-dark" style="font-size: 12px">/{{ $t('unit.ren') }}</span> <span class="text-dark" style="font-size: 12px">
<template v-if="b2bUserInfo && b2bUserInfo.groupId != 2">
{{ item.CurrencyName }}
</template>
/{{ $t("unit.ren") }}</span
>
</div> </div>
</div> </div>
<div <div
:class="{ 'row': $q.platform.is.desktop, 'col': $q.platform.is.desktop, 'q-pl-md': $q.platform.is.desktop, 'column': $q.platform.is.mobile }"> :class="{
row: $q.platform.is.desktop,
col: $q.platform.is.desktop,
'q-pl-md': $q.platform.is.desktop,
column: $q.platform.is.mobile,
}"
>
<div :class="{ 'col-7': $q.platform.is.desktop }"> <div :class="{ 'col-7': $q.platform.is.desktop }">
<q-input style="width: 100%" @update:model-value="changePeople" v-model="item.PeopleNumber" class="col" <q-input
:class="{ 'q-mr-md': $q.platform.is.desktop, 'q-px-sm': $q.platform.is.desktop, 'q-pl-sm': $q.platform.is.desktop, }" style="width: 100%"
mask="#" reverse-fill-mask dense standout :label="$t('hotel.shopping.peopleNum')"> @update:model-value="changePeople"
v-model="item.PeopleNumber"
class="col"
:class="{
'q-mr-md': $q.platform.is.desktop,
'q-px-sm': $q.platform.is.desktop,
'q-pl-sm': $q.platform.is.desktop,
}"
mask="#"
reverse-fill-mask
dense
standout
:label="$t('hotel.shopping.peopleNum')"
>
<template v-slot:prepend> <template v-slot:prepend>
<q-btn color="primary" size="sm" class="q-px-none" flat icon="remove" @click="addPeople(item, 0)" /> <q-btn
color="primary"
size="sm"
class="q-px-none"
flat
icon="remove"
@click="addPeople(item, 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="addPeople(item, 1)" /> <q-btn
color="primary"
size="sm"
class="q-px-none"
flat
icon="add"
@click="addPeople(item, 1)"
/>
</template> </template>
</q-input> </q-input>
</div> </div>
<div <div
:class="{ 'col': $q.platform.is.desktop, 'text-center': $q.platform.is.desktop, 'text-right': $q.platform.is.mobile, }"> :class="{
col: $q.platform.is.desktop,
'text-center': $q.platform.is.desktop,
'text-right': $q.platform.is.mobile,
}"
>
<span class="f12 text-grey-6"> <span class="f12 text-grey-6">
{{ $t('hotel.yg') }}<span class="din text-yellow-10">{{ item.Number }}</span> {{ $t('unit.jf') }} {{ $t("hotel.yg")
}}<span class="din text-yellow-10">{{ item.Number }}</span>
{{ $t("unit.jf") }}
</span> </span>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
</div> </div>
<div class="q-pt-md" :class="{ 'row': $q.platform.is.desktop, 'items-center': $q.platform.is.desktop, 'justify-between': $q.platform.is.desktop, 'column': $q.platform.is.mobile } <div
"> class="q-pt-md"
:class="{
row: $q.platform.is.desktop,
'items-center': $q.platform.is.desktop,
'justify-between': $q.platform.is.desktop,
column: $q.platform.is.mobile,
}"
>
<div> <div>
<div class="text-grey-6 fz12 row items-center"> <div class="text-grey-6 fz12 row items-center">
<div class="q-mr-lg"> <div class="q-mr-lg">
{{ $t('hotel.shopping.only') }} {{ $t("hotel.shopping.only") }}
<span class="text-orange-14 fz14 q-px-xs">{{ onlyNum }}</span> <span class="text-orange-14 fz14 q-px-xs">{{ onlyNum }}</span>
{{ $t('hotel.shopping.between') }} {{ $t("hotel.shopping.between") }}
</div> </div>
<div v-if="total > 0" class="q-pr-md f12"> <div v-if="total > 0" class="q-pr-md f12">
<span>{{ $t('hotel.shopping.TheSelected') }}</span> <span>{{ $t("hotel.shopping.TheSelected") }}</span>
<span class="text-red q-px-sm">{{ sumPeople }}</span> <span class="text-red q-px-sm">{{ sumPeople }}</span>
<span>{{ $t('unit.ren') }}</span> <span>{{ $t("unit.ren") }}</span>
<span class="text-red q-px-sm">{{ total }}</span> <span class="text-red q-px-sm">{{ total }}</span>
<span>{{ $t('hotel.shopping.between') }}</span> <span>{{ $t("hotel.shopping.between") }}</span>
</div> </div>
</div> </div>
<div class="q-mt-sm rounded-borders bg-orange-1 text-orange-10 f12 q-pa-sm" v-if="(total - onlyNum) > 0"> <div
{{ $t('hotel.outbind') }} class="q-mt-sm rounded-borders bg-orange-1 text-orange-10 f12 q-pa-sm"
v-if="total - onlyNum > 0"
>
{{ $t("hotel.outbind") }}
</div> </div>
</div> </div>
<div class="row" <div
:class="{ 'items-center': $q.platform.is.desktop, 'q-pl-md': $q.platform.is.desktop, 'justify-end': $q.platform.is.mobile, 'q-pt-md': $q.platform.is.mobile }"> class="row"
:class="{
'items-center': $q.platform.is.desktop,
'q-pl-md': $q.platform.is.desktop,
'justify-end': $q.platform.is.mobile,
'q-pt-md': $q.platform.is.mobile,
}"
>
<div> <div>
<q-btn flat dense color="dark" :label="$t('close')" class="q-mr-sm" @click="editor = {}" v-close-popup /> <q-btn
<q-btn unelevated dense color="negative" :disable="total == 0" icon="shopping_cart" flat
:label="$t('hotel.car.addShopping')" @click="join" /> 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>
</div> </div>
</div> </div>
...@@ -109,156 +244,181 @@ ...@@ -109,156 +244,181 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref, reactive, toRef, toRefs, provide, onMounted, inject, watch } from 'vue' import {
import { useI18n } from 'vue-i18n' defineComponent,
import { DirtionmaryHelper } from '../../../config/dictionary' ref,
import { date } from 'quasar' reactive,
import message from '../../../utils/message' toRef,
import { moneyFormat, dateDiffer } from '../../../utils/tools' toRefs,
provide,
onMounted,
inject,
watch,
} from "vue";
import { useI18n } from "vue-i18n";
import { DirtionmaryHelper } from "../../../config/dictionary";
import { date } from "quasar";
import message from "../../../utils/message";
import { moneyFormat, dateDiffer } from "../../../utils/tools";
import { getStoreGetter } from "../../../store/utils";
export default defineComponent({ export default defineComponent({
props: { props: {
HotelRow: { HotelRow: {
type: Object, type: Object,
require: false require: false,
}, },
hotelInfor: { hotelInfor: {
type: Object, type: Object,
require: false require: false,
} },
}, },
emits: ['close'], emits: ["close"],
setup(props, context) { setup(props, context) {
const { t } = useI18n() const { t } = useI18n();
const qDateProxyOpera = ref<any>(null) const qDateProxyOpera = ref<any>(null);
const HotelLength = inject(DirtionmaryHelper.HOTEL_CAR_ORDER_LENGTH) as any const HotelLength = inject(DirtionmaryHelper.HOTEL_CAR_ORDER_LENGTH) as any;
const cars = inject(DirtionmaryHelper.HOTEL_CAR_LIST) as any const cars = inject(DirtionmaryHelper.HOTEL_CAR_LIST) as any;
// cars&&cars.value.forEach((item:any,index:Number) => {
// if(dateDiffer(item.Date)<15){ HotelLength.value = cars.value.length;
// cars.value.splice(index,1) const editor = inject(DirtionmaryHelper.HOTEL_UPDATEHOTEL_CAR) as any;
// } const b2bUserInfo = getStoreGetter<UserGetter>("user", "getUser");
// });
HotelLength.value = cars.value.length
const editor = inject(DirtionmaryHelper.HOTEL_UPDATEHOTEL_CAR) as any
const data = reactive({ const data = reactive({
HotelRow: {} as any, HotelRow: {} as any,
hotelInfor: {} as any, hotelInfor: {} as any,
onlyNum: 0, onlyNum: 0,
parameters: { parameters: {
HotelId: '', HotelId: "",
HotelName: '', HotelName: "",
Date: '', Date: "",
RemainingInventory: '', RemainingInventory: "",
total: 0, total: 0,
Money: 0, Money: 0,
DetailList: [] as Array<any>, DetailList: [] as Array<any>,
Remark: '', Remark: "",
TaxesPrice: 0, TaxesPrice: 0,
PriceInTangTax: 0, PriceInTangTax: 0,
PriceIsBreakfast: 0, PriceIsBreakfast: 0,
PriceIsDinner: 0 PriceIsDinner: 0,
}, },
total: 0, total: 0,
joinHouse: { joinHouse: {
StartDate: '', StartDate: "",
EndDate: '', EndDate: "",
dateRange: [] as Array<any>, dateRange: [] as Array<any>,
dateRangeFormat: '', dateRangeFormat: "",
days: 1 days: 1,
}, },
sumPrice: 0, sumPrice: 0,
sumPeople: 0 sumPeople: 0,
}) });
watch( watch(
() => props.HotelRow, () => props.HotelRow,
(o, n) => { (o, n) => {
data.HotelRow = props.HotelRow data.HotelRow = props.HotelRow;
data.hotelInfor = props.hotelInfor data.hotelInfor = props.hotelInfor;
methods.setList() methods.setList();
} }
) );
// 今天购买数量 // 今天购买数量
watch(data.parameters, (n, o) => { watch(data.parameters, (n, o) => {
methods.calculateNum() methods.calculateNum();
}) });
const methods = { const methods = {
addPeople(item: any, type: any) { addPeople(item: any, type: any) {
// && item.Number < data.hotelInfor.RemainingInventory // && item.Number < data.hotelInfor.RemainingInventory
if (type == 1) { if (type == 1) {
item.PeopleNumber++ item.PeopleNumber++;
} else if (type == 0 && item.PeopleNumber > 1) { } else if (type == 0 && item.PeopleNumber > 1) {
item.PeopleNumber-- item.PeopleNumber--;
} }
item.PeopleNumber = item.PeopleNumber != '' ? item.PeopleNumber : '0' item.PeopleNumber = item.PeopleNumber != "" ? item.PeopleNumber : "0";
methods.calculateNum() methods.calculateNum();
}, },
changePeople(val: string) { changePeople(val: string) {
setTimeout(() => { setTimeout(() => {
methods.calculateNum() methods.calculateNum();
}, 50) }, 50);
}, },
// 计算房间数量 // 计算房间数量
calculateNum() { calculateNum() {
data.total = 0 data.total = 0;
data.sumPeople = 0 data.sumPeople = 0;
data.parameters.DetailList.forEach(item => { data.parameters.DetailList.forEach((item) => {
item.Number = Math.ceil(parseFloat(item.PeopleNumber) / parseFloat(item.LimitGuestNum)) item.Number = Math.ceil(
data.total += item.Number parseFloat(item.PeopleNumber) / parseFloat(item.LimitGuestNum)
data.sumPeople += parseInt(item.PeopleNumber) );
}) data.total += item.Number;
data.sumPeople += parseInt(item.PeopleNumber);
});
}, },
join() { join() {
const temp = JSON.parse(JSON.stringify(data.parameters)) const temp = JSON.parse(JSON.stringify(data.parameters));
temp.Money = 0 temp.Money = 0;
temp.Total = data.total temp.Total = data.total;
temp.SumPeople = data.sumPeople temp.SumPeople = data.sumPeople;
temp.DetailList = temp.DetailList.filter(((x: any) => x.PeopleNumber > 0)) temp.DetailList = temp.DetailList.filter((x: any) => x.PeopleNumber > 0);
temp.DetailList.forEach((x: any) => { temp.DetailList.forEach((x: any) => {
temp.Money += (x.PeopleNumber * (x.Unit_Price + x.TaxesPrice + x.PriceInTangTax)) temp.Money += x.PeopleNumber * (x.Unit_Price + x.TaxesPrice + x.PriceInTangTax);
}); });
let existsIndex = cars.value.findIndex((x: any) => x.Date == temp.Date) let existsIndex = cars.value.findIndex((x: any) => x.Date == temp.Date);
let exists = existsIndex == -1 ? null : cars.value[existsIndex] let exists = existsIndex == -1 ? null : cars.value[existsIndex];
if (exists) { if (exists) {
let existsHotel = exists.Hotels.findIndex((h: any) => h.HotelId == temp.HotelId) let existsHotel = exists.Hotels.findIndex(
if (existsHotel != -1) exists.Hotels.splice(existsHotel, 1) (h: any) => h.HotelId == temp.HotelId
);
if (existsHotel != -1) exists.Hotels.splice(existsHotel, 1);
} else { } else {
exists = { exists = {
Date: temp.Date, Date: temp.Date,
Hotels: [] as Array<any> Hotels: [] as Array<any>,
};
cars.value.push(exists);
} }
cars.value.push(exists) exists.Hotels.push(temp);
}
exists.Hotels.push(temp)
cars.value.sort((x: any, y: any) => { cars.value.sort((x: any, y: any) => {
return new Date(x.Date).getTime() - new Date(y.Date).getTime() return new Date(x.Date).getTime() - new Date(y.Date).getTime();
}) });
HotelLength.value = cars.value.length HotelLength.value = cars.value.length;
message.successMsg(t('success')) message.successMsg(t("success"));
editor.value = {} editor.value = {};
context.emit('close') context.emit("close");
}, },
// 组装可选房间 // 组装可选房间
setList() { setList() {
data.parameters.DetailList = [] as Array<any>;
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"), "", "", ""];
let limitGuestNum = [2, 1, 1, 3, 1];
let tempPrice = data.hotelInfor.PriceList[0];
data.parameters.DetailList = [] as Array<any> let hotel = data.hotelInfor;
let roomTyps = ['CostPrice', 'BidroomPrice', 'SingleroomPrice', 'AddBedPrice', 'GuideRoomPrice'] data.parameters.HotelId = data.HotelRow.HotelId;
let roomLangs = [t('hotel.rooms.normal'), t('hotel.rooms.big'), t('hotel.rooms.sing'), t('hotel.rooms.three'), t('hotel.rooms.driver')] data.parameters.HotelName = data.HotelRow.HotelName;
let tips = ['', t('hotel.bigTips'), '', '', ''] data.parameters.Date = hotel.DateStr;
let limitGuestNum = [2, 1, 1, 3, 1] data.parameters.RemainingInventory = hotel.RemainingInventory;
let tempPrice = data.hotelInfor.PriceList[0] data.parameters.TaxesPrice = tempPrice.TaxesPrice;
let hotel = data.hotelInfor data.parameters.PriceInTangTax = tempPrice.PriceInTangTax;
data.parameters.HotelId = data.HotelRow.HotelId data.parameters.PriceIsBreakfast = tempPrice.PriceIsBreakfast;
data.parameters.HotelName = data.HotelRow.HotelName data.parameters.PriceIsDinner = tempPrice.PriceIsDinner;
data.parameters.Date = hotel.DateStr
data.parameters.RemainingInventory = hotel.RemainingInventory
data.parameters.TaxesPrice = tempPrice.TaxesPrice
data.parameters.PriceInTangTax = tempPrice.PriceInTangTax
data.parameters.PriceIsBreakfast = tempPrice.PriceIsBreakfast
data.parameters.PriceIsDinner = tempPrice.PriceIsDinner
methods.setDateRange() methods.setDateRange();
roomTyps.forEach((x: any, i: number) => { roomTyps.forEach((x: any, i: number) => {
if (tempPrice[x] > 0) { if (tempPrice[x] > 0) {
let dataMsg = { let dataMsg = {
...@@ -272,56 +432,73 @@ export default defineComponent({ ...@@ -272,56 +432,73 @@ export default defineComponent({
Tips: tips[i], Tips: tips[i],
Number: 0, Number: 0,
PeopleNumber: 0, PeopleNumber: 0,
Destription: '', Destription: "",
TaxesPrice: tempPrice.TaxesPrice, TaxesPrice: tempPrice.TaxesPrice,
PriceInTangTax: tempPrice.PriceInTangTax, PriceInTangTax: tempPrice.PriceInTangTax,
HotelName: data.HotelRow.HotelName HotelName: data.HotelRow.HotelName,
} CurrencyName: tempPrice.CurrencyName,
data.parameters.DetailList.push(dataMsg) };
data.parameters.DetailList.push(dataMsg);
} }
}) });
}, },
dateRangeHandler(e: any) { dateRangeHandler(e: any) {
data.joinHouse.StartDate = `${e.from.year}/${e.from.month}/${e.from.day}` data.joinHouse.StartDate = `${e.from.year}/${e.from.month}/${e.from.day}`;
data.joinHouse.EndDate = `${e.to.year}/${e.to.month}/${e.to.day} ` data.joinHouse.EndDate = `${e.to.year}/${e.to.month}/${e.to.day} `;
data.joinHouse.dateRangeFormat = `${data.joinHouse.StartDate} - ${data.joinHouse.EndDate} ` 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') data.joinHouse.days = date.getDateDiff(
console.log(qDateProxyOpera) new Date(data.joinHouse.EndDate),
if (qDateProxyOpera.value) qDateProxyOpera.value.hide() new Date(data.joinHouse.StartDate),
"days"
);
console.log(qDateProxyOpera);
if (qDateProxyOpera.value) qDateProxyOpera.value.hide();
}, },
setDateRange() { setDateRange() {
data.joinHouse.StartDate = date.formatDate(new Date(data.parameters.Date), 'YYYY/MM/DD') data.joinHouse.StartDate = date.formatDate(
data.joinHouse.EndDate = date.formatDate(date.addToDate(new Date(data.joinHouse.StartDate), { days: 1 }), 'YYYY/MM/DD') new Date(data.parameters.Date),
data.joinHouse.dateRangeFormat = `${data.joinHouse.StartDate} - ${data.joinHouse.EndDate} ` "YYYY/MM/DD"
data.joinHouse.days = date.getDateDiff(new Date(data.joinHouse.EndDate), new Date(data.joinHouse.StartDate), 'days') );
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) { 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: 7 }), "YYYY/MM/DD")
);
}, },
setInjectHandler() { setInjectHandler() {
data.parameters = editor.value data.parameters = editor.value;
methods.calculateNum() methods.calculateNum();
methods.setDateRange() methods.setDateRange();
} },
} };
if (props.HotelRow && props.hotelInfor) { if (props.HotelRow && props.hotelInfor) {
data.HotelRow = props.HotelRow data.HotelRow = props.HotelRow;
data.hotelInfor = props.hotelInfor data.hotelInfor = props.hotelInfor;
methods.setList() methods.setList();
} else { } else {
methods.setInjectHandler() methods.setInjectHandler();
} }
onMounted(() => { onMounted(() => {
if (data.hotelInfor.RemainingInventory) { if (data.hotelInfor.RemainingInventory) {
data.onlyNum = data.hotelInfor.RemainingInventory data.onlyNum = data.hotelInfor.RemainingInventory;
} else { } else {
data.onlyNum = editor.value.RemainingInventory data.onlyNum = editor.value.RemainingInventory;
} }
}) });
return { ...toRefs(data), editor, HotelLength, ...methods } return { ...toRefs(data), editor, b2bUserInfo, HotelLength, ...methods };
} },
}) });
</script> </script>
<style> <style>
...@@ -329,7 +506,7 @@ export default defineComponent({ ...@@ -329,7 +506,7 @@ export default defineComponent({
/* box-shadow: 0 1px 3px #0003, 0 1px 1px #00000024, 0 2px 1px -1px #0000001f; */ /* box-shadow: 0 1px 3px #0003, 0 1px 1px #00000024, 0 2px 1px -1px #0000001f; */
border-radius: 10px; border-radius: 10px;
vertical-align: top; vertical-align: top;
background: rgba(225, 245, 254, .7); background: rgba(225, 245, 254, 0.7);
position: relative; position: relative;
} }
</style> </style>
src/components/layout/Notifications.vue
View file @ 9e322a5c
<template> <template>
<q-card flat class="bg-white q-pa-none light-shadow" style="border:1px solid #EEE" <q-card
:style="{'width':$q.platform.is.desktop?'375px':'350px'}"> flat
class="bg-white q-pa-none light-shadow"
style="border: 1px solid #eee"
:style="{ width: $q.platform.is.desktop ? '375px' : '350px' }"
>
<div class="Notifications-bg"> <div class="Notifications-bg">
<div class="q-pa-lg row items-center"> <div class="q-pa-lg row items-center">
<span class="text-white text-weight-bold text-h6 q-mr-sm q-pl-sm">{{$t('Notifications.title')}}</span> <span class="text-white text-weight-bold text-h6 q-mr-sm q-pl-sm">{{
<div class="text-grey-1 f12 q-pl-sm">0 {{$t('Notifications.subtitle')}}</div> $t("Notifications.title")
}}</span>
<div class="text-grey-1 f12 q-pl-sm">0 {{ $t("Notifications.subtitle") }}</div>
</div> </div>
</div> </div>
<div class="Notifications-height q-py-md" style="display:none"> <div class="Notifications-height q-py-md" style="display: none">
<q-scroll-area :thumb-style="scrollStyle.thumbStyle" :bar-style="scrollStyle.barStyle" class="full-height"> <q-scroll-area
:thumb-style="scrollStyle.thumbStyle"
:bar-style="scrollStyle.barStyle"
class="full-height"
>
<q-list> <q-list>
<q-item v-for="(item,index) in menus" class="rounded-borders q-py-md"> <q-item v-for="(item, index) in menus" class="rounded-borders q-py-md">
<q-item-section> <q-item-section>
<div class="row items-center" :style="{'width':$q.platform.is.desktop?'340px':'317px'}"> <div
<div class="rounded-borders Notifications-item q-mr-md" class="row items-center"
:class="{'bg-blue-1':index==0,'bg-red-1':index==1,'bg-yellow-1':index==2,'bg-green-1':index==3, :style="{ width: $q.platform.is.desktop ? '340px' : '317px' }"
'activeOne':index==0,'activeTwo':index==1,'activeThree':index==2,'activeFour':index==3}"> >
<div
class="rounded-borders Notifications-item q-mr-md"
:class="{
'bg-blue-1': index == 0,
'bg-red-1': index == 1,
'bg-yellow-1': index == 2,
'bg-green-1': index == 3,
activeOne: index == 0,
activeTwo: index == 1,
activeThree: index == 2,
activeFour: index == 3,
}"
>
<svg-icon :icon="item.icon" :size="16" color="nav"></svg-icon> <svg-icon :icon="item.icon" :size="16" color="nav"></svg-icon>
</div> </div>
<div class="col column"> <div class="col column">
<span class="Notifications-overflow Notifications-title text-weight-bold f12 cursor-pointer q-mr-md text-grey-8">Project AlicePhase 1 developmentPhase 1 developmentPhase 1 development</span> <span
<div class="Notifications-overflow Notifications-text text-grey-6 fz12">Phase 1 developmentPhase 1 developmentPhase 1 developmentPhase 1 development</div> class="Notifications-overflow Notifications-title text-weight-bold f12 cursor-pointer q-mr-md text-grey-8"
>Project AlicePhase 1 developmentPhase 1 developmentPhase 1
development</span
>
<div class="Notifications-overflow Notifications-text text-grey-6 fz12">
Phase 1 developmentPhase 1 developmentPhase 1 developmentPhase 1
development
</div>
</div>
<div
class="bg-blue-grey-1 q-px-xs q-ml-lg text-grey-6 Notifications-time fz10"
>
1 {{ $t("Notifications.time") }}
</div> </div>
<div class="bg-blue-grey-1 q-px-xs q-ml-lg text-grey-6 Notifications-time fz10">1 {{$t('Notifications.time')}}</div>
</div> </div>
</q-item-section> </q-item-section>
</q-item> </q-item>
</q-list> </q-list>
</q-scroll-area> </q-scroll-area>
</div> </div>
<div class="text-center q-my-xl"> <div class="text-center q-my-xl">
{{$t('noneNotify')}} {{ $t("noneNotify") }}
</div> </div>
</q-card> </q-card>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref, reactive, toRefs, provide, onMounted, inject } from 'vue' import { defineComponent, ref, reactive, toRefs, provide, onMounted, inject } from "vue";
import { useMenus, Menu } from '../../utils/menus' import { useMenus, Menu } from "../../utils/menus";
import { getLangs } from "../../utils/tools"; import { getLangs } from "../../utils/tools";
import { SitLang } from '../../@types'; import { SitLang } from "../../@types";
import { useI18n } from 'vue-i18n' import { useI18n } from "vue-i18n";
import { dispatchAction } from '../../store/utils'; import { dispatchAction } from "../../store/utils";
import { UserActionsType } from '../../store/modules/user/actions'; import { UserActionsType } from "../../store/modules/user/actions";
import useScrollModule from '../../module/scrollbar/scrollModule' import useScrollModule from "../../module/scrollbar/scrollModule";
import svgIcon from '../global/svg-icon.vue' import svgIcon from "../global/svg-icon.vue";
import { DirtionmaryHelper } from '../../config/dictionary'; import { DirtionmaryHelper } from "../../config/dictionary";
export default defineComponent({ export default defineComponent({
components: { svgIcon }, components: { svgIcon },
name: 'user-info', name: "user-info",
props: { props: {
user: { user: {
type: Object, type: Object,
require: true require: true,
} },
}, },
setup(props) { setup(props) {
const {locale,t } = useI18n(); const { locale, t } = useI18n();
const data=reactive({ const data = reactive({
currentLang: {} as SitLang, currentLang: {} as SitLang,
langs:[] as SitLang[], langs: [] as SitLang[],
menus: [] as Menu[], menus: [] as Menu[],
scrollStyle: {} as any, scrollStyle: {} as any,
}) });
data.scrollStyle = useScrollModule().scrollStyle data.scrollStyle = useScrollModule().scrollStyle;
// 根据域名渲染菜单 // 根据域名渲染菜单
const menList = useMenus.getMenus().filter(x=>{ const menList = useMenus.getMenus().filter((x) => {
return x.id == 16 return x.id == 16;
}) });
data.menus = !inject(DirtionmaryHelper.DOMAIN_NAME)?menList:useMenus.getMenus() data.menus = !inject(DirtionmaryHelper.DOMAIN_NAME) ? menList : useMenus.getMenus();
data.langs=getLangs() data.langs = getLangs();
if(data.langs && data.langs.length>0){ if (data.langs && data.langs.length > 0) {
data.currentLang = data.langs.find(x=> x.langLocale==locale.value) ?? {}; data.currentLang = data.langs.find((x) => x.langLocale == locale.value) ?? {};
} }
// 切换语言 // 切换语言
const methods = { const methods = {
getLanguage (val:SitLang) { getLanguage(val: SitLang) {
locale.value = val.langLocale??'' locale.value = val.langLocale ?? "";
data.currentLang=val data.currentLang = val;
localStorage.setItem('lanuage', val.langLocale??'') localStorage.setItem("lanuage", val.langLocale ?? "");
window.location.reload() window.location.reload();
}, },
signOut(){ signOut() {
dispatchAction<UserActionsType>('user', 'setUserSignout', null) dispatchAction<UserActionsType>("user", "setUserSignout", null);
window.location.reload() window.location.reload();
} },
} };
onMounted(()=>{ onMounted(() => {});
return { ...toRefs(data), ...methods };
}) },
return {...toRefs(data),...methods} });
} </script>
})
</script>
<style> <style>
.Notifications-height{ .Notifications-height {
height: 325px; height: 325px;
} }
.Notifications-bg{ .Notifications-bg {
background:url('../../assets/images/menu-header-bg.jpg')no-repeat; background: url("../../assets/images/menu-header-bg.jpg") no-repeat;
background-size:100% 100%; background-size: 100% 100%;
} }
.Notifications-item{ .Notifications-item {
cursor: default; cursor: default;
display: flex; display: flex;
height: 35px; height: 35px;
width: 35px; width: 35px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.Notifications-item svg g{ .Notifications-item svg g {
cursor: default; cursor: default;
padding: 4px; padding: 4px;
} }
.Notifications-item.activeOne svg g [fill]{ .Notifications-item.activeOne svg g [fill] {
fill: var(--q-primary) !important; fill: var(--q-primary) !important;
} }
.Notifications-item.activeTwo svg g [fill]{ .Notifications-item.activeTwo svg g [fill] {
fill: var(--q-negative) !important; fill: var(--q-negative) !important;
} }
.Notifications-item.activeThree svg g [fill]{ .Notifications-item.activeThree svg g [fill] {
fill: var(--q-warning) !important; fill: var(--q-warning) !important;
} }
.Notifications-item.activeFour svg g [fill]{ .Notifications-item.activeFour svg g [fill] {
fill: var(--q-positive) !important; fill: var(--q-positive) !important;
} }
.Notifications-overflow{ .Notifications-overflow {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.Notifications-title:hover{ .Notifications-title:hover {
color: var(--q-primary) !important; color: var(--q-primary) !important;
} }
.Notifications-title{ .Notifications-title {
font-weight: 600; font-weight: 600;
} }
.Notifications-title,.Notifications-text{ .Notifications-title,
.Notifications-text {
width: 100%; width: 100%;
} }
.Notifications-demo:hover .q-item__section{ .Notifications-demo:hover .q-item__section {
color:var(--q-primary) !important; color: var(--q-primary) !important;
} }
.Notifications-time{ .Notifications-time {
color: var(--kt-light-inverse); color: var(--kt-light-inverse);
line-height: 18px; line-height: 18px;
border-radius: 6px; border-radius: 6px;
} }
</style> </style>
src/pages/hotel/HotelList.vue
View file @ 9e322a5c
<template> <template>
<div class="fix-height-subpage column no-wrap q-pa-md"> <div class="fix-height-subpage column no-wrap q-pa-md">
<list-header></list-header> <list-header></list-header>
<div class="col q-mt-md" :class="{ 'light-shadow q-pa-md bg-white rounded-border': $q.platform.is.desktop }"> <div
class="col q-mt-md"
:class="{ 'light-shadow q-pa-md bg-white rounded-border': $q.platform.is.desktop }"
>
<list-table></list-table> <list-table></list-table>
</div> </div>
<hotel-tips></hotel-tips> <hotel-tips></hotel-tips>
...@@ -9,71 +12,71 @@ ...@@ -9,71 +12,71 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import useMetaModule from '../../module/meta/metaModule' import useMetaModule from "../../module/meta/metaModule";
import { useI18n } from 'vue-i18n' import { useI18n } from "vue-i18n";
import svgIcon from '../../components/global/svg-icon.vue' import svgIcon from "../../components/global/svg-icon.vue";
import { defineComponent, inject, provide, reactive, ref, toRefs } from 'vue' import { defineComponent, inject, provide, reactive, ref, toRefs } from "vue";
import { DirtionmaryHelper } from '../../config/dictionary' import { DirtionmaryHelper } from "../../config/dictionary";
import ListHeader from '../../components/hotel/list/ListHeader.vue' import ListHeader from "../../components/hotel/list/ListHeader.vue";
import ListTable from '../../components/hotel/list/ListTable.vue' import ListTable from "../../components/hotel/list/ListTable.vue";
import HotelTips from '../../components/hotel/list/HotelTips.vue' import HotelTips from "../../components/hotel/list/HotelTips.vue";
import { date } from 'quasar' import { date } from "quasar";
import { getStoreGetter } from '../../store/utils' import { getStoreGetter } from "../../store/utils";
export default defineComponent({ export default defineComponent({
components: { svgIcon, ListHeader, ListTable, HotelTips }, components: { svgIcon, ListHeader, ListTable, HotelTips },
setup() { setup() {
const data = reactive({}) const data = reactive({});
let { setTitle } = useMetaModule() let { setTitle } = useMetaModule();
const { locale, t } = useI18n() const { locale, t } = useI18n();
const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any;
pageTitle.value = t('hotel.pageTitle') pageTitle.value = t("hotel.pageTitle");
setTitle(pageTitle.value) setTitle(pageTitle.value);
const search = reactive({ const search = reactive({
HotelChooseArray: [], HotelChooseArray: [],
StartDate: '', StartDate: "",
EndDate: '', EndDate: "",
Country: '651', Country: "0",
Province: 0, Province: 0,
City: 0, City: 0,
OutBranchId: -1, OutBranchId: -1,
Star: 0, Star: 0,
PriceLevel: 0, PriceLevel: 0,
Supplier: 0, Supplier: 0,
MaxPrice: '', MaxPrice: "",
MinPrice: '', MinPrice: "",
HotelName: '' HotelName: "",
}) });
provide(DirtionmaryHelper.HOTEL_QUERY_PARAM, search) provide(DirtionmaryHelper.HOTEL_QUERY_PARAM, search);
const HotelCarList = ref<Array<any>>([]) const HotelCarList = ref<Array<any>>([]);
let userInfo = getStoreGetter<UserGetter>('user', 'getUser') let userInfo = getStoreGetter<UserGetter>("user", "getUser");
if(userInfo.groupId==100){ if (userInfo && userInfo.groupId == 2) {
search.Country=0 search.Country = "651";
} }
const cacheCars = localStorage.getItem(DirtionmaryHelper.HOTEL_HOTELCARS_CACHE) const cacheCars = localStorage.getItem(DirtionmaryHelper.HOTEL_HOTELCARS_CACHE);
if (cacheCars) { if (cacheCars) {
let cacheCarArray = JSON.parse(cacheCars).filter((x: any) => date.getDateDiff(new Date(x.Date), new Date(), 'days') >= 20) let cacheCarArray = JSON.parse(cacheCars).filter(
HotelCarList.value = cacheCarArray (x: any) => date.getDateDiff(new Date(x.Date), new Date(), "days") >= 20
);
HotelCarList.value = cacheCarArray;
} }
provide(DirtionmaryHelper.HOTEL_CAR_LIST, HotelCarList) provide(DirtionmaryHelper.HOTEL_CAR_LIST, HotelCarList);
const updateObj = ref<any>({}) const updateObj = ref<any>({});
provide(DirtionmaryHelper.HOTEL_UPDATEHOTEL_CAR, updateObj) provide(DirtionmaryHelper.HOTEL_UPDATEHOTEL_CAR, updateObj);
const orderstatus = ref(false) const orderstatus = ref(false);
provide(DirtionmaryHelper.HOTEL_CAR_ORDER_STATUS, orderstatus) provide(DirtionmaryHelper.HOTEL_CAR_ORDER_STATUS, orderstatus);
const HotelLengths = ref(0) const HotelLengths = ref(0);
provide(DirtionmaryHelper.HOTEL_CAR_ORDER_LENGTH, HotelLengths) provide(DirtionmaryHelper.HOTEL_CAR_ORDER_LENGTH, HotelLengths);
const menu = inject(DirtionmaryHelper.MENU_KEYS) as any const menu = inject(DirtionmaryHelper.MENU_KEYS) as any;
menu.value = 2 menu.value = 2;
const methods = {} const methods = {};
return { return {
...toRefs(data), ...toRefs(data),
...methods ...methods,
} };
} },
}) });
</script> </script>
<style> <style></style>
</style>
src/pages/vehicle/vehicleOrder.vue
View file @ 9e322a5c
...@@ -6,60 +6,76 @@ ...@@ -6,60 +6,76 @@
class="text-grey" class="text-grey"
active-color="primary" active-color="primary"
indicator-color="primary" indicator-color="primary"
align="left"> align="left"
>
<template v-if="b2bUserInfo && b2bUserInfo.groupId == 2">
<q-tab :name="0" :label="$t('v102.vehicle.tabtitle0')"></q-tab> <q-tab :name="0" :label="$t('v102.vehicle.tabtitle0')"></q-tab>
</template>
<q-tab :name="1" :label="$t('v102.vehicle.tabtitle1')"></q-tab> <q-tab :name="1" :label="$t('v102.vehicle.tabtitle1')"></q-tab>
<q-tab :name="2" :label="$t('v102.vehicle.tabtitle2')"></q-tab> <q-tab :name="2" :label="$t('v102.vehicle.tabtitle2')"></q-tab>
<q-tab :name="3" :label="$t('v102.vehicle.tabtitle3')"></q-tab> <q-tab :name="3" :label="$t('v102.vehicle.tabtitle3')"></q-tab>
</q-tabs> </q-tabs>
<teamOrder v-if="tab==0" :OrderId="OrderId"></teamOrder> <teamOrder v-if="tab == 0" :OrderId="OrderId"></teamOrder>
<CharteredBusOrder :type="tab" :OrderId="OrderId" v-if="tab!=0"></CharteredBusOrder> <CharteredBusOrder :type="tab" :OrderId="OrderId" v-if="tab != 0"></CharteredBusOrder>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref, reactive, toRefs, provide, onMounted, inject,watch } from 'vue' import {
import useMetaModule from '../../module/meta/metaModule' defineComponent,
import { useI18n } from 'vue-i18n' ref,
import teamOrder from './teamOrder.vue' reactive,
import CharteredBusOrder from '../CharteredBus//CharteredBusOrder.vue' toRefs,
import { DirtionmaryHelper } from '../../config/dictionary' provide,
import { currentRouter } from 'src/router' onMounted,
inject,
watch,
} from "vue";
import useMetaModule from "../../module/meta/metaModule";
import { useI18n } from "vue-i18n";
import teamOrder from "./teamOrder.vue";
import CharteredBusOrder from "../CharteredBus//CharteredBusOrder.vue";
import { DirtionmaryHelper } from "../../config/dictionary";
import { currentRouter } from "src/router";
import { getStoreGetter } from "../../store/utils";
export default defineComponent({ export default defineComponent({
components: { teamOrder,CharteredBusOrder }, components: { teamOrder, CharteredBusOrder },
setup() { setup() {
const { t } = useI18n() const { t } = useI18n();
let { setTitle } = useMetaModule() let { setTitle } = useMetaModule();
const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any;
pageTitle.value = t('v102.vehicle.pageTitle') pageTitle.value = t("v102.vehicle.pageTitle");
setTitle(pageTitle.value) const b2bUserInfo = getStoreGetter<UserGetter>("user", "getUser");
setTitle(pageTitle.value);
const data = reactive({ const data = reactive({
tab: 0, tab: 0,
OrderId: null as any, OrderId: null as any,
}) });
watch(()=>data.tab,(o,n)=>{ if (b2bUserInfo && b2bUserInfo.groupId == 2) {
data.tab = 0;
}) } else {
if(currentRouter.currentRoute){ data.tab = 1;
if(currentRouter.currentRoute.value.params.OrderId){
data.OrderId = currentRouter.currentRoute.value.params.OrderId
} }
if(currentRouter.currentRoute.value.params.pages<4){ watch(
data.tab = Number(currentRouter.currentRoute.value.params.pages) () => data.tab,
}else{ (o, n) => {}
data.tab = 0 );
if (currentRouter.currentRoute) {
if (currentRouter.currentRoute.value.params.OrderId) {
data.OrderId = currentRouter.currentRoute.value.params.OrderId;
} }
if (currentRouter.currentRoute.value.params.pages < 4) {
data.tab = Number(currentRouter.currentRoute.value.params.pages);
} else {
data.tab = 0;
} }
const menu = inject(DirtionmaryHelper.MENU_KEYS) as any
menu.value = 6
const methods = {
} }
onMounted(() => { const menu = inject(DirtionmaryHelper.MENU_KEYS) as any;
menu.value = 6;
}) const methods = {};
return { ...toRefs(data), ...methods } onMounted(() => {});
return { ...toRefs(data), b2bUserInfo, ...methods };
}, },
}) });
</script> </script>
<style scoped> <style scoped>
.date-box :deep(.q-field__control) { .date-box :deep(.q-field__control) {
......
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