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