Skip to content

B
bigwood
Commit 4d9426bd authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 72f19a57
Show whitespace changes
Inline Side-by-side
Showing with 1140 additions and 521 deletions
src/components/CharteredBus/order/CharteredBusOrderHeader.vue
View file @ 4d9426bd
<template>
<div class="rounded-borders bg-white row items-center q-pa-md q-mb-md">
<q-select v-if="$q.platform.is.desktop" class="q-mr-md" style="min-width: 150px" v-model="search.OrderStatus" @update:model-value="setOrderStatus" dense :options="status" emit-value option-label="StatusName" option-value="StatusId" map-options :label="$t('hotelorder.search.status')" standout />
<q-input v-if="$q.platform.is.desktop" class="q-mr-md" v-model="search.OrderNo" dense standout :label="$t('hotelorder.search.orderNum')" />
<q-field v-if="$q.platform.is.desktop" clearable v-model="dateRangeFormat" :label="$t('hotelorder.search.daterange')" standout class="col-2" style="min-width: 190px" dense @clear="getDateRange">
<div class="self-center full-width no-outline" tabindex="0">{{ dateRangeFormat }}</div>
<q-select
v-if="$q.platform.is.desktop"
class="q-mr-md"
style="min-width: 150px"
v-model="search.OrderStatus"
@update:model-value="setOrderStatus"
dense
:options="status"
emit-value
option-label="StatusName"
option-value="StatusId"
map-options
:label="$t('hotelorder.search.status')"
standout
/>
<q-input
v-if="$q.platform.is.desktop"
class="q-mr-md"
v-model="search.OrderNo"
dense
standout
:label="$t('hotelorder.search.orderNum')"
/>
<q-field
v-if="$q.platform.is.desktop"
clearable
v-model="dateRangeFormat"
:label="$t('hotelorder.search.daterange')"
standout
class="col-2"
style="min-width: 190px"
dense
@clear="getDateRange"
>
<div class="self-center full-width no-outline" tabindex="0">
{{ dateRangeFormat }}
</div>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
<q-date v-model="dateRange" :options="optionsFn" range mask="YYYY/MM/DD" landscape @range-end="dateRangeHandler"></q-date>
<q-date
v-model="dateRange"
:options="optionsFn"
range
mask="YYYY/MM/DD"
landscape
@range-end="dateRangeHandler"
></q-date>
</q-popup-proxy>
</q-field>
<div class="col"></div>
<q-btn unelevated class="bg-grey-3 hover q-mr-md" :title="$t('morequery')">
<q-badge rounded class="din bg-red-2 text-red-14 text-weight-bold" floating :label="searchCnt" v-if="searchCnt > 0" />
<svg-icon color="dark" icon="Text/Filter.svg" :tips="$t('morequery')" :size="20"></svg-icon>
<q-tooltip>{{ $t('morequery') }}</q-tooltip>
<q-popup-proxy class="no-shadow" style="box-shadow: 0 0 50px #ddd !important" :offset="[0, 20]" :model-value="canHide">
<q-badge
rounded
class="din bg-red-2 text-red-14 text-weight-bold"
floating
:label="searchCnt"
v-if="searchCnt > 0"
/>
<svg-icon
color="dark"
icon="Text/Filter.svg"
:tips="$t('morequery')"
:size="20"
></svg-icon>
<q-tooltip>{{ $t("morequery") }}</q-tooltip>
<q-popup-proxy
class="no-shadow"
style="box-shadow: 0 0 50px #ddd !important"
:offset="[0, 20]"
:model-value="canHide"
>
<q-card class="q-pa-md rounded-borders" style="width: 300px">
<div class="q-mb-md text-subtitle2">{{ $t('morequery') }}</div>
<div class="q-mb-md text-subtitle2">{{ $t("morequery") }}</div>
<div class="q-mt-md row">
<q-input v-model="search.OrderNo" dense standout :label="$t('hotelorder.search.orderNum')" class="mobile-only col q-mr-md" />
<q-input v-model="search.OrderId" dense standout :label="$t('hotelorder.search.orderId')" class="col" />
<q-input
v-model="search.OrderNo"
dense
standout
:label="$t('hotelorder.search.orderNum')"
class="mobile-only col q-mr-md"
/>
<q-input
v-model="search.OrderId"
dense
standout
:label="$t('hotelorder.search.orderId')"
class="col"
/>
</div>
<div class="mobile-only q-mt-md">
<q-field clearable v-model="dateRangeFormat" :label="$t('hotelorder.search.daterange')" standout style="min-width: 190px" dense @clear="getDateRange">
<div class="self-center full-width no-outline" tabindex="0">{{ dateRangeFormat }}</div>
<q-field
clearable
v-model="dateRangeFormat"
:label="$t('hotelorder.search.daterange')"
standout
style="min-width: 190px"
dense
@clear="getDateRange"
>
<div class="self-center full-width no-outline" tabindex="0">
{{ dateRangeFormat }}
</div>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
<q-date v-model="dateRange" :options="optionsFn" range mask="YYYY/MM/DD" @range-end="dateRangeHandler" ></q-date>
<q-date
v-model="dateRange"
:options="optionsFn"
range
mask="YYYY/MM/DD"
@range-end="dateRangeHandler"
></q-date>
</q-popup-proxy>
</q-field>
</div>
<div class="q-mt-md">
<q-field clearable v-model="dateRangeFormatUse" :label="$t('v102.CharteredBus.sjc.c8')" standout style="min-width: 190px" dense @clear="getDateRangeUse">
<div class="self-center full-width no-outline" tabindex="0">{{ dateRangeFormatUse }}</div>
<q-field
clearable
v-model="dateRangeFormatUse"
:label="$t('v102.CharteredBus.sjc.c8')"
standout
style="min-width: 190px"
dense
@clear="getDateRangeUse"
>
<div class="self-center full-width no-outline" tabindex="0">
{{ dateRangeFormatUse }}
</div>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxyUse">
<q-date v-model="dateRangeUse" :options="optionsFnUse" range mask="YYYY/MM/DD" @range-end="dateRangeHandlerUse" ></q-date>
<q-date
v-model="dateRangeUse"
:options="optionsFnUse"
range
mask="YYYY/MM/DD"
@range-end="dateRangeHandlerUse"
></q-date>
</q-popup-proxy>
</q-field>
</div>
<div class="q-mt-md row">
<q-input class="col" v-model="search.SurName" dense standout :label="$t('v102.CharteredBus.sjc.c1x')" />
<q-input class="col q-ml-sm" v-model="search.Name" dense standout :label="$t('v102.CharteredBus.sjc.c1m')" />
<q-input
class="col"
v-model="search.SurName"
dense
standout
:label="$t('v102.CharteredBus.sjc.c1x')"
/>
<q-input
class="col q-ml-sm"
v-model="search.Name"
dense
standout
:label="$t('v102.CharteredBus.sjc.c1m')"
/>
</div>
<q-input v-model="search.ProductName" dense standout :label="$t('v102.CharteredBus.sjc.c19')" class="q-mt-md" />
<q-input v-model="search.Mobile" dense standout :label="$t('v102.CharteredBus.sjc.c2')" class="q-mt-md"/>
<q-input
v-model="search.ProductName"
dense
standout
:label="$t('v102.CharteredBus.sjc.c19')"
class="q-mt-md"
/>
<q-input
v-model="search.Mobile"
dense
standout
:label="$t('v102.CharteredBus.sjc.c2')"
class="q-mt-md"
/>
</q-card>
</q-popup-proxy>
</q-btn>
<q-btn unelevated class="bg-blue-1 text-primary hover q-mr-md" :label="$t('hotelorder.recovery')" />
<template v-if="b2bUserInfo && b2bUserInfo.groupId == 2">
<q-btn
unelevated
class="bg-blue-1 text-primary hover q-mr-md"
:label="$t('hotelorder.recovery')"
/>
</template>
<q-btn color="primary" unelevated :label="$t('query')" @click="setQueryHandler" />
</div>
<div class="rounded-borders bg-white q-pa-sm q-mt-md mobile-only">
<q-tabs v-model="search.OrderStatus" class="text-cyan" dense>
<q-tab :name="x.StatusId" :label="x.StatusName" v-for="x in status" @click="setOrderStatus(x.StatusId)" />
<q-tab
:name="x.StatusId"
:label="x.StatusName"
v-for="x in status"
@click="setOrderStatus(x.StatusId)"
/>
</q-tabs>
</div>
</template>
<script lang="ts">
import { DirtionmaryHelper } from '../../../config/dictionary'
import { computed, defineComponent, inject, reactive, ref, toRefs } from 'vue'
import { OrderType, RoomType, StandardStatus } from '../../../@types'
import { getHotelOrderStatus, getHotelOrderType, getHotelRoomType } from '../../../utils/tools'
import { date, useQuasar } from 'quasar'
import svgIcon from '../../global/svg-icon.vue'
import { DirtionmaryHelper } from "../../../config/dictionary";
import { computed, defineComponent, inject, reactive, ref, toRefs } from "vue";
import { OrderType, RoomType, StandardStatus } from "../../../@types";
import { getStoreGetter } from "../../../store/utils";
import {
getHotelOrderStatus,
getHotelOrderType,
getHotelRoomType,
} from "../../../utils/tools";
import { date, useQuasar } from "quasar";
import svgIcon from "../../global/svg-icon.vue";
export default defineComponent({
components: { svgIcon },
setup(props) {
const qDateProxy = ref(null) as any
const qDateProxyUse = ref(null) as any
const $q = useQuasar()
const qDateProxy = ref(null) as any;
const qDateProxyUse = ref(null) as any;
const $q = useQuasar();
const b2bUserInfo = getStoreGetter<UserGetter>("user", "getUser");
const data = reactive({
status: [] as Array<StandardStatus>,
cancelStatus: {} as StandardStatus | undefined,
dateRangeFormat: '',
dateRangeFormatUse: '',
dateRangeFormat: "",
dateRangeFormatUse: "",
dateRange: {} as any,
dateRangeUse: {} as any,
canHide: false
})
const realSearch = inject(DirtionmaryHelper.TICKET_ORDER_SEARCH) as any
const search = reactive(JSON.parse(JSON.stringify(realSearch))) as any
canHide: false,
});
const realSearch = inject(DirtionmaryHelper.TICKET_ORDER_SEARCH) as any;
const search = reactive(JSON.parse(JSON.stringify(realSearch))) as any;
const methods = {
initStatus() {
//通用的訂單類型
let allStatus = getHotelOrderStatus()
let allStatus = getHotelOrderStatus();
data.status = allStatus.filter((x: StandardStatus) => {
return x.StatusId != 3
})
return x.StatusId != 3;
});
data.cancelStatus = allStatus.find((x: StandardStatus) => {
return x.StatusId == 3
})
return x.StatusId == 3;
});
},
optionsFnUse(cd: any) {
return true
return true;
},
optionsFn(cd: any) {
return cd < date.formatDate(date.addToDate(new Date(), { days: 1 }), 'YYYY/MM/DD')
return (
cd < date.formatDate(date.addToDate(new Date(), { days: 1 }), "YYYY/MM/DD")
);
},
getDateRangeUse(value){
search.OrderSTime = ''
search.OrderETime = ''
data.dateRangeFormatUse = ''
getDateRangeUse(value) {
search.OrderSTime = "";
search.OrderETime = "";
data.dateRangeFormatUse = "";
},
getDateRange(value){
search.StartTime = ''
search.EndTime = ''
data.dateRangeFormat = ''
getDateRange(value) {
search.StartTime = "";
search.EndTime = "";
data.dateRangeFormat = "";
},
dateRangeHandlerUse(e: any) {
search.OrderSTime = `${e.from.year}/${e.from.month}/${e.from.day}`
search.OrderETime = `${e.to.year}/${e.to.month}/${e.to.day} `
data.dateRangeFormatUse = `${search.OrderSTime} - ${search.OrderETime} `
if (qDateProxyUse.value) qDateProxyUse.value.hide()
search.OrderSTime = `${e.from.year}/${e.from.month}/${e.from.day}`;
search.OrderETime = `${e.to.year}/${e.to.month}/${e.to.day} `;
data.dateRangeFormatUse = `${search.OrderSTime} - ${search.OrderETime} `;
if (qDateProxyUse.value) qDateProxyUse.value.hide();
},
dateRangeHandler(e: any) {
search.StartTime = `${e.from.year}/${e.from.month}/${e.from.day}`
search.EndTime = `${e.to.year}/${e.to.month}/${e.to.day} `
data.dateRangeFormat = `${search.StartTime} - ${search.EndTime} `
if (qDateProxy.value) qDateProxy.value.hide()
search.StartTime = `${e.from.year}/${e.from.month}/${e.from.day}`;
search.EndTime = `${e.to.year}/${e.to.month}/${e.to.day} `;
data.dateRangeFormat = `${search.StartTime} - ${search.EndTime} `;
if (qDateProxy.value) qDateProxy.value.hide();
},
setQueryHandler() {
realSearch.OrderId = search.OrderId
realSearch.OrderType = search.OrderType
realSearch.StartTime = search.StartTime
realSearch.EndTime = search.EndTime
realSearch.OrderSTime = search.OrderSTime
realSearch.OrderETime = search.OrderETime
realSearch.OrderStatus = search.OrderStatus
realSearch.OrderNo = search.OrderNo
realSearch.SurName = search.SurName
realSearch.Name = search.Name
realSearch.ProductName = search.ProductName
realSearch.Mobile = search.Mobile
console.log(realSearch)
realSearch.OrderId = search.OrderId;
realSearch.OrderType = search.OrderType;
realSearch.StartTime = search.StartTime;
realSearch.EndTime = search.EndTime;
realSearch.OrderSTime = search.OrderSTime;
realSearch.OrderETime = search.OrderETime;
realSearch.OrderStatus = search.OrderStatus;
realSearch.OrderNo = search.OrderNo;
realSearch.SurName = search.SurName;
realSearch.Name = search.Name;
realSearch.ProductName = search.ProductName;
realSearch.Mobile = search.Mobile;
console.log(realSearch);
},
setOrderStatus(statusId: number) {
realSearch.OrderStatus = statusId
}
}
realSearch.OrderStatus = statusId;
},
};
const searchCnt = computed(() => {
let setCnt = 0
let setCnt = 0;
if ($q.platform.is.mobile) {
if (search.OrderStatus > 0) setCnt++
if (search.StartTime.length > 0) setCnt++
if (search.OrderNo > 0) setCnt++
if (search.OrderStatus > 0) setCnt++;
if (search.StartTime.length > 0) setCnt++;
if (search.OrderNo > 0) setCnt++;
}
if (search.OrderId > 0) setCnt++
if (search.OrderSTime.length > 0) setCnt++
if (search.MailingState > 0) setCnt++
if (search.Name) setCnt++
if (search.ProductName) setCnt++
if (search.Mobile) setCnt++
return setCnt
})
if (search.OrderId > 0) setCnt++;
if (search.OrderSTime.length > 0) setCnt++;
if (search.MailingState > 0) setCnt++;
if (search.Name) setCnt++;
if (search.ProductName) setCnt++;
if (search.Mobile) setCnt++;
return setCnt;
});
methods.initStatus()
methods.initStatus();
return {
...toRefs(data),
...methods,
search,
searchCnt
}
}
})
searchCnt,
b2bUserInfo,
};
},
});
</script>
<style></style>
src/components/CharteredBus/order/CharteredBusOrderList.vue
View file @ 4d9426bd
<template>
<div>
<q-card class="light-shadow q-pa-md bg-white rounded-borders q-mb-md" flat v-for="(x,index) in orders">
<q-card
class="light-shadow q-pa-md bg-white rounded-borders q-mb-md"
flat
v-for="(x, index) in orders"
>
<div class="row items-center desktop-only">
<div class="q-mr-md">
<q-btn :color="search.OrderType == 1 ?'cyan' : (search.OrderType == 2 ?'negative':'positive')" unelevated disable size="sm">
<template v-if="search.OrderType == 1">{{$t('v102.CharteredBus.baochetype1')}}</template>
<template v-if="search.OrderType == 2">{{$t('v102.CharteredBus.baochetype2')}}</template>
<template v-if="search.OrderType == 3">{{$t('v102.CharteredBus.baochetype3')}}</template>
<q-btn
:color="
search.OrderType == 1
? 'cyan'
: search.OrderType == 2
? 'negative'
: 'positive'
"
unelevated
disable
size="sm"
>
<template v-if="search.OrderType == 1">{{
$t("v102.CharteredBus.baochetype1")
}}</template>
<template v-if="search.OrderType == 2">{{
$t("v102.CharteredBus.baochetype2")
}}</template>
<template v-if="search.OrderType == 3">{{
$t("v102.CharteredBus.baochetype3")
}}</template>
</q-btn>
</div>
<div class="f12 text-grey-6">{{ $t('hotelorder.search.orderNum') }}：{{ x.OrderNo }}</div>
<div class="f12 text-grey-6">
{{ $t("hotelorder.search.orderNum") }}：{{ x.OrderNo }}
</div>
<div class="q-ml-md">
<q-btn color="dark" flat size="sm" :label="$t('hotelorder.copy')" v-if="copyId != x.OrderId" @click="setCopyHandler(x)" />
<q-btn color="cyan" icon="check" outline size="sm" :label="$t('hotelorder.copyed')" v-else></q-btn>
<q-btn
color="dark"
flat
size="sm"
:label="$t('hotelorder.copy')"
v-if="copyId != x.OrderId"
@click="setCopyHandler(x)"
/>
<q-btn
color="cyan"
icon="check"
outline
size="sm"
:label="$t('hotelorder.copyed')"
v-else
></q-btn>
</div>
<div class="col text-center f12 text-grey-6">
<span>{{ $t('v102.ticket.sj') }}：{{ x.SurName }}{{ x.Name }}/{{ x.Mobile }}</span>
<span
>{{ $t("v102.ticket.sj") }}：{{ x.SurName }}{{ x.Name }}/{{ x.Mobile }}</span
>
</div>
<div class="f12 text-grey-6">
{{ $t("hotelorder.createTime") }}：{{ x.CreateTime }}
</div>
<div class="f12 text-grey-6">{{ $t('hotelorder.createTime') }}：{{ x.CreateTime }}</div>
<div class="q-ml-md f12" :class="[x.typeInfo.Color]">
<q-icon :name="x.typeInfo.Icon" />
<span class="q-ml-sm">{{ x.typeInfo.StatusName }}</span>
......@@ -26,7 +67,17 @@
<div class="mobile-only">
<div class="row justify-between">
<div class="q-mr-md">
<q-btn :color="x.MailingState == 1 ? 'cyan' : 'negative'" unelevated disable size="sm" :label="`${x.MailingState == 1 ? $t('hotelorder.orderType.guest') : $t('hotelorder.orderType.tour')}`"></q-btn>
<q-btn
:color="x.MailingState == 1 ? 'cyan' : 'negative'"
unelevated
disable
size="sm"
:label="`${
x.MailingState == 1
? $t('hotelorder.orderType.guest')
: $t('hotelorder.orderType.tour')
}`"
></q-btn>
</div>
<div class="q-ml-md f12" :class="[x.typeInfo.Color]">
<q-icon :name="x.typeInfo.Icon" />
......@@ -35,21 +86,50 @@
</div>
<div class="bg-grey-2 rounded-borders q-pa-sm q-mt-md">
<div class="row items-center justify-between">
<div class="f12 text-grey-6">{{ $t('hotelorder.search.orderNum') }}：{{ x.OrderNo }}</div>
<div class="f12 text-grey-6">
{{ $t("hotelorder.search.orderNum") }}：{{ x.OrderNo }}
</div>
<div class="q-ml-md">
<q-btn color="dark" flat size="sm" :label="$t('hotelorder.copy')" v-if="copyId != x.OrderId" @click="setCopyHandler(x)" />
<q-btn color="cyan" outline size="sm" :label="$t('hotelorder.copyed')" v-else></q-btn>
<q-btn
color="dark"
flat
size="sm"
:label="$t('hotelorder.copy')"
v-if="copyId != x.OrderId"
@click="setCopyHandler(x)"
/>
<q-btn
color="cyan"
outline
size="sm"
:label="$t('hotelorder.copyed')"
v-else
></q-btn>
</div>
</div>
<div class="f12 text-grey-6">
<span v-if="x.MailingState">{{ $t('hotelorder.search.contactInfo') }}：{{ x.Name }}({{ x.EName }})/{{ x.ContactPhone }}</span>
<span v-if="x.MailingState"
>{{ $t("hotelorder.search.contactInfo") }}：{{ x.Name }}({{ x.EName }})/{{
x.ContactPhone
}}</span
>
</div>
<div class="f12 text-grey-6">
{{ $t("hotelorder.createTime") }}：{{ x.CreateTime }}
</div>
<div class="f12 text-grey-6">{{ $t('hotelorder.createTime') }}：{{ x.CreateTime }}</div>
</div>
</div>
<div class="q-mt-md row">
<q-table separator="cell" :hide-bottom="!x.Remark" :pagination="{ rowsPerPage: 100 }" :rows="[x]" bordered :columns="cols" class="sticky-rightrowspan-column-table light-border col no-shadow">
<q-table
separator="cell"
:hide-bottom="!x.Remark"
:pagination="{ rowsPerPage: 100 }"
:rows="[x]"
bordered
:columns="cols"
class="sticky-rightrowspan-column-table light-border col no-shadow"
>
<template v-slot:header>
<q-tr>
<q-th v-for="(item, i) in cols">
......@@ -60,74 +140,113 @@
<template v-slot:body-cell-OrderDate="props">
<q-td :props="props">
<div class="max-hotelname ellipsis">
{{props.row.ProductName}}
{{ props.row.ProductName }}
</div>
<div class="text-grey-6 q-pt-xs">{{props.row.CreateTime
}}</div>
<div class="text-grey-6 q-pt-xs">{{ props.row.CreateTime }}</div>
<q-tooltip>{{ props.row.ProductName }}</q-tooltip>
</q-td>
</template>
<template v-slot:body-cell-AirportName="props">
<q-td :props="props">
<div>{{ props.row.AirLine}}</div>
<div>{{ props.row.AirLine }}</div>
<div>
{{props.row.AirportName}}
{{ props.row.AirportName }}
</div>
<div class="text-grey-9 q-pt-xs">{{props.row.FlightNumber}}</div>
<div class="text-grey-9 q-pt-xs">{{ props.row.FlightNumber }}</div>
<div class="text-grey-6 q-pt-xs">
{{props.row.FlightTime}}
{{search.OrderType == 1?$t('v102.CharteredBus.dida'):$t('v102.CharteredBus.chufa')}}
{{ props.row.FlightTime }}
{{
search.OrderType == 1
? $t("v102.CharteredBus.dida")
: $t("v102.CharteredBus.chufa")
}}
</div>
</q-td>
</template>
<template v-slot:body-cell-HandLuggageNum="props">
<q-td :props="props">
<div v-if="props.row.HandLuggageNum>0">
<span class="text-grey-6 q-pt-xs q-pr-sm">{{ $t('v102.CharteredBus.sjc.c27') }}:</span> {{props.row.HandLuggageNum}}
</div>
<div v-if="props.row.RegisteredLuggageNum>0">
<span class="text-grey-6 q-pt-xs q-pr-sm">{{ $t('v102.CharteredBus.sjc.c28') }}:</span> {{props.row.RegisteredLuggageNum}}
<div v-if="props.row.HandLuggageNum > 0">
<span class="text-grey-6 q-pt-xs q-pr-sm"
>{{ $t("v102.CharteredBus.sjc.c27") }}:</span
>
{{ props.row.HandLuggageNum }}
</div>
<div v-if="props.row.RegisteredLuggageNum > 0">
<span class="text-grey-6 q-pt-xs q-pr-sm"
>{{ $t("v102.CharteredBus.sjc.c28") }}:</span
>
{{ props.row.RegisteredLuggageNum }}
</div>
</q-td>
</template>
<template v-slot:body-cell-GetonAddress="props">
<q-td :props="props">
<div v-if="props.row.GetonAddress">
<span class="text-grey-6 q-pt-xs q-pr-sm">{{ $t('v102.CharteredBus.sjc.c25') }}:</span>
{{props.row.GetonAddress}}
<span class="text-grey-6 q-pt-xs q-pr-sm"
>{{ $t("v102.CharteredBus.sjc.c25") }}:</span
>
{{ props.row.GetonAddress }}
</div>
<div class="q-pt-xs" v-if="props.row.GetoffAddress">
<span class="text-grey-6 q-pt-xs q-pr-sm">{{ $t('v102.CharteredBus.sjc.c26') }}:</span> {{props.row.GetoffAddress}}
<span class="text-grey-6 q-pt-xs q-pr-sm"
>{{ $t("v102.CharteredBus.sjc.c26") }}:</span
>
{{ props.row.GetoffAddress }}
</div>
<div class="q-pt-xs">
<span class="text-grey-6 q-pt-xs q-pr-sm fz12"
>{{ $t("v102.CharteredBus.sjc.c8") }}:</span
>{{ props.row.OrderDate }}
</div>
<div class="q-pt-xs"><span class="text-grey-6 q-pt-xs q-pr-sm fz12">{{ $t('v102.CharteredBus.sjc.c8') }}:</span>{{props.row.OrderDate}}</div>
</q-td>
</template>
<template v-slot:body-cell-Numr="props">
<q-td :props="props">
<div v-if="props.row.ManNum>0">
<span class="text-grey-6 q-pt-xs q-pr-sm">{{ $t('v102.CharteredBus.sjc.c21') }}:</span> {{props.row.ManNum}}{{ $t('v102.CharteredBus.sjc.c30') }}
</div>
<div class="q-pt-xs" v-if="props.row.ChildNum>0">
<span class="text-grey-6 q-pt-xs q-pr-sm">{{ $t('v102.CharteredBus.sjc.c22') }}:</span> {{props.row.ChildNum}}{{ $t('v102.CharteredBus.sjc.c30') }}
</div>
<div class="q-pt-xs" v-if="props.row.BabyNum>0">
<span class="text-grey-6 q-pt-xs q-pr-sm">{{ $t('v102.CharteredBus.sjc.c23') }}:</span> {{props.row.BabyNum}}{{ $t('v102.CharteredBus.sjc.c30') }}
<div v-if="props.row.ManNum > 0">
<span class="text-grey-6 q-pt-xs q-pr-sm"
>{{ $t("v102.CharteredBus.sjc.c21") }}:</span
>
{{ props.row.ManNum }}{{ $t("v102.CharteredBus.sjc.c30") }}
</div>
<div class="q-pt-xs" v-if="props.row.ChildNum > 0">
<span class="text-grey-6 q-pt-xs q-pr-sm"
>{{ $t("v102.CharteredBus.sjc.c22") }}:</span
>
{{ props.row.ChildNum }}{{ $t("v102.CharteredBus.sjc.c30") }}
</div>
<div class="q-pt-xs" v-if="props.row.BabyNum > 0">
<span class="text-grey-6 q-pt-xs q-pr-sm"
>{{ $t("v102.CharteredBus.sjc.c23") }}:</span
>
{{ props.row.BabyNum }}{{ $t("v102.CharteredBus.sjc.c30") }}
</div>
</q-td>
</template>
<template v-slot:body-cell-Money="props">
<q-td :props="props" >
{{props.row.Money}}
<q-td :props="props">
{{ props.row.Money }}
</q-td>
</template>
<template v-slot:bottom>
<div class="msl text-negative">{{ $t('v101.hotelRemark') }}：{{ x.Remark }}</div>
<div class="msl text-negative">
{{ $t("v101.hotelRemark") }}：{{ x.Remark }}
</div>
</template>
</q-table>
</div>
<div class="q-mt-md" v-if="x.OrderStatus != 3" :class="{ row: $q.platform.is.desktop, 'column reverse': $q.platform.is.mobile }">
<div class="pay row text-grey rounded-borders" :class="{ 'bg-grey-2 q-mt-md': $q.platform.is.mobile, col: $q.platform.is.desktop }">
<div
class="q-mt-md"
v-if="x.OrderStatus != 3"
:class="{ row: $q.platform.is.desktop, 'column reverse': $q.platform.is.mobile }"
>
<div
class="pay row text-grey rounded-borders"
:class="{
'bg-grey-2 q-mt-md': $q.platform.is.mobile,
col: $q.platform.is.desktop,
}"
>
<!-- <div class="bg-orange-1 col-12 rounded-borders q-pa-md">
<div v-if="x.MailingState==2||x.MailingState==3">
<div class="text-subtitle2 text-dark text-weight-bolder row items-center">
......@@ -145,9 +264,15 @@
</div> -->
</div>
<div class="col desktop-only"></div>
<div class="rounded-borders bg-grey-2 q-pa-md" :class="{ 'q-mx-md': $q.platform.is.desktop, 'q-mt-md': $q.platform.is.mobile }">
<div class="row items-center justify-between q-mb-sm q-pb-sm" style="border-bottom: 1px dashed #ddd">
<div class="f12 text-grey">{{ $t('hotelorder.orderMoney') }}</div>
<div
class="rounded-borders bg-grey-2 q-pa-md"
:class="{ 'q-mx-md': $q.platform.is.desktop, 'q-mt-md': $q.platform.is.mobile }"
>
<div
class="row items-center justify-between q-mb-sm q-pb-sm"
style="border-bottom: 1px dashed #ddd"
>
<div class="f12 text-grey">{{ $t("hotelorder.orderMoney") }}</div>
<div class="dark q-ml-xl">
<!-- <span class="f12">{{ $t('unit.jpc') }}</span> -->
<span class="din text-subtitle1">{{ moneyFormat(x.Money) }}</span>
......@@ -155,90 +280,139 @@
</div>
</div>
<div class="text-right">
<q-btn dense outline color="accent" size="sm" class="q-mt-sm" :label="$t('hotelorder.payinfo')" @click="ViewPayment"></q-btn>
</div>
</div>
<div class="rounded-borders q-pa-sm justify-between" :class="{ column: $q.platform.is.desktop, 'row items-center': $q.platform.is.mobile, 'bg-green-1': x.OrderStatus != 1, 'bg-grey-2': x.OrderStatus == 1 }">
<q-list dense v-if="x.OrderStatus == 1" :class="{ 'row items-center justify-between full-width': $q.platform.is.mobile }">
<q-item class="text-negative" clickable v-close-popup @click="cancelConfirmHandler(x.OrderId)">
<q-btn
dense
outline
color="accent"
size="sm"
class="q-mt-sm"
:label="$t('hotelorder.payinfo')"
@click="ViewPayment"
></q-btn>
</div>
</div>
<div
class="rounded-borders q-pa-sm justify-between"
:class="{
column: $q.platform.is.desktop,
'row items-center': $q.platform.is.mobile,
'bg-green-1': x.OrderStatus != 1,
'bg-grey-2': x.OrderStatus == 1,
}"
>
<q-list
dense
v-if="x.OrderStatus == 1"
:class="{
'row items-center justify-between full-width': $q.platform.is.mobile,
}"
>
<q-item
class="text-negative"
clickable
v-close-popup
@click="cancelConfirmHandler(x.OrderId)"
>
<q-item-section>
<q-item-label>{{ $t('hotelorder.opera.cancel') }}</q-item-label>
<q-item-label>{{ $t("hotelorder.opera.cancel") }}</q-item-label>
</q-item-section>
</q-item>
<q-item class="text-primary" clickable v-close-popup @click="editOrder(x)">
<q-item-section>
<q-item-label>{{ $t('hotelorder.opera.edit') }}</q-item-label>
<q-item-label>{{ $t("hotelorder.opera.edit") }}</q-item-label>
</q-item-section>
</q-item>
<q-item class="text-positive" clickable v-close-popup>
<q-item-section>
<q-item-label>{{ $t('v101.Listofquotation.baojiadan') }}</q-item-label>
<q-item-label>{{ $t("v101.Listofquotation.baojiadan") }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
<div v-else>
<div class="f12 text-green-4">{{ $t('hotelorder.payed') }}</div>
<div class="f12 text-green-4">{{ $t("hotelorder.payed") }}</div>
<div class="text-subtitle1 din text-green-14">
{{ x.Income.toFixed(2) }}
<span class="text-green-4 f12">{{ $t('unit.jp') }}</span>
<span class="text-green-4 f12">{{ $t("unit.jp") }}</span>
</div>
</div>
</div>
</div>
<div v-if="x.OrderStatus == 3">
<div class="q-mt-md q-pa-sm row items-center rounded-borders bg-orange-1" style="border-width: 0 5px; border-style: solid; border-color: #ffb74d">
<div class="text-subtitle2 text-weight-bolder text-grey-900">{{ $t('v101.cancelRemark') }}：</div>
<div class="f12 text-grey-600 q-ml-sm col">{{ x.CancelRemark ? x.CancelRemark : $t('v101.selfCancle') }}</div>
<div
class="q-mt-md q-pa-sm row items-center rounded-borders bg-orange-1"
style="border-width: 0 5px; border-style: solid; border-color: #ffb74d"
>
<div class="text-subtitle2 text-weight-bolder text-grey-900">
{{ $t("v101.cancelRemark") }}：
</div>
<div class="f12 text-grey-600 q-ml-sm col">
{{ x.CancelRemark ? x.CancelRemark : $t("v101.selfCancle") }}
</div>
<div class="f12 text-grey-900">{{ x.CancelEmpName }} {{ x.CancelTime }}</div>
</div>
</div>
</q-card>
<q-card class="light-shadow q-pa-md bg-white rounded-borders q-mb-md" v-if="pages.pageCount > 0" flat>
<q-pagination class="full-width justify-end" v-model="pages.pageIndex" color="primary" :max="pages.pageCount" :input="true" @update:model-value="changePageHandler" />
<q-card
class="light-shadow q-pa-md bg-white rounded-borders q-mb-md"
v-if="pages.pageCount > 0"
flat
>
<q-pagination
class="full-width justify-end"
v-model="pages.pageIndex"
color="primary"
:max="pages.pageCount"
:input="true"
@update:model-value="changePageHandler"
/>
</q-card>
<q-inner-loading :showing="loading" :label="$t('loading')" label-class="text-grey-6 f12" />
<q-inner-loading
:showing="loading"
:label="$t('loading')"
label-class="text-grey-6 f12"
/>
</div>
<div class="text-center q-mt-xl" v-if="(!orders || orders.length == 0) && !loading">
<svg-icon :size="50" color="nav" icon="General/Clipboard.svg"></svg-icon>
<div class="q-mt-md f12 text-grey-6">{{ $t('noneData') }}</div>
<div class="q-mt-md f12 text-grey-6">{{ $t("noneData") }}</div>
</div>
<q-dialog v-model="showBankAccount">
<BankAccount @change="showBankAccount=false"></BankAccount>
<BankAccount @change="showBankAccount = false"></BankAccount>
</q-dialog>
</template>
<script lang="ts">
import CharteredBusService from '../../../api/CharteredBus'
import { DirtionmaryHelper } from '../../../config/dictionary'
import { defineComponent, inject, reactive, toRefs, watch } from 'vue'
import { ApiResult } from '../../../@types/enumHelper'
import message from '../../../utils/message'
import { SendType, StandardStatus } from '../../../@types'
import { useI18n } from 'vue-i18n'
import svgIcon from '../../global/svg-icon.vue'
import { copyToClipboard, useQuasar } from 'quasar'
import { getHotelOrderStatus, getSendType, moneyFormat } from '../../../utils/tools'
import { useRouter } from 'vue-router'
import BankAccount from '../../BankAccount.vue'
import CharteredBusService from "../../../api/CharteredBus";
import { DirtionmaryHelper } from "../../../config/dictionary";
import { defineComponent, inject, reactive, toRefs, watch } from "vue";
import { ApiResult } from "../../../@types/enumHelper";
import message from "../../../utils/message";
import { SendType, StandardStatus } from "../../../@types";
import { useI18n } from "vue-i18n";
import svgIcon from "../../global/svg-icon.vue";
import { copyToClipboard, useQuasar } from "quasar";
import { getHotelOrderStatus, getSendType, moneyFormat } from "../../../utils/tools";
import { useRouter } from "vue-router";
import BankAccount from "../../BankAccount.vue";
export default defineComponent({
components: { svgIcon,BankAccount },
props:['OrderType'],
components: { svgIcon, BankAccount },
props: ["OrderType"],
setup(props) {
const $router = useRouter()
const search = inject(DirtionmaryHelper.TICKET_ORDER_SEARCH) as any
const { t } = useI18n()
const $q = useQuasar()
const $router = useRouter();
const search = inject(DirtionmaryHelper.TICKET_ORDER_SEARCH) as any;
const { t } = useI18n();
const $q = useQuasar();
watch(search, (n, o) => {
if (data.loading) return
data.loading = true
data.pages.pageIndex = 1
data.orders = []
methods.initOrders()
})
if (data.loading) return;
data.loading = true;
data.pages.pageIndex = 1;
data.orders = [];
methods.initOrders();
});
watch(props, (n, o) => {
search.OrderType = props.OrderType
})
search.OrderType = props.OrderType;
});
const data = reactive({
PaymentDialog: false,
......@@ -249,108 +423,149 @@ export default defineComponent({
pages: {
pageIndex: 1,
pageSize: 10,
pageCount: 0
pageCount: 0,
},
loading: false,
copyId: 0,
expendsOrderId: 0,
cols: [
{ name: 'OrderDate', label: t('v102.CharteredBus.sjc.c19')+'('+t('v102.CharteredBus.pt')+')', field: (row: any) => row, align: 'left' },
{ name: 'AirportName', label: t('v102.CharteredBus.hangban'), field: (row: any) => row, align: 'left' },
{ name: 'HandLuggageNum', label: t('v102.CharteredBus.sjc.c31'), field: (row: any) => row, align: 'left' },
{ name: 'GetonAddress', label: t('v102.CharteredBus.sjc.c24'), field: (row: any) => row, align: 'left' },
{ name: 'Numr', label: t('v102.CharteredBus.sjc.c29'), field: (row: any) => row.Num, align: 'left' },
{ name: 'Num', label: t('v102.ticket.sl'), field: (row: any) => row.Num, align: 'left' },
{ name: 'Money', label: t('hotelorder.col.m'), field: (row: any) => row.Money, align: 'left' }
{
name: "OrderDate",
label: t("v102.CharteredBus.sjc.c19") + "(" + t("v102.CharteredBus.pt") + ")",
field: (row: any) => row,
align: "left",
},
{
name: "AirportName",
label: t("v102.CharteredBus.hangban"),
field: (row: any) => row,
align: "left",
},
{
name: "HandLuggageNum",
label: t("v102.CharteredBus.sjc.c31"),
field: (row: any) => row,
align: "left",
},
{
name: "GetonAddress",
label: t("v102.CharteredBus.sjc.c24"),
field: (row: any) => row,
align: "left",
},
{
name: "Numr",
label: t("v102.CharteredBus.sjc.c29"),
field: (row: any) => row.Num,
align: "left",
},
{
name: "Num",
label: t("v102.ticket.sl"),
field: (row: any) => row.Num,
align: "left",
},
{
name: "Money",
label: t("hotelorder.col.m"),
field: (row: any) => row.Money,
align: "left",
},
] as any[],
})
});
const methods = {
ViewPayment() {
data.showBankAccount = true
data.showBankAccount = true;
},
initOrders() {
data.loading = true
let param = Object.assign(data.pages, search)
data.loading = true;
let param = Object.assign(data.pages, search);
CharteredBusService.GetTYMyCarOrderPageList(param)
.then(r => {
data.loading = false
.then((r) => {
data.loading = false;
if (r.data.resultCode == ApiResult.SUCCESS) {
r.data.data.pageData.forEach((x: any) => {
x.typeInfo = data.status.find(y => y.StatusId == x.OrderStatus) ?? data.status[1]
x.SendType = data.sends.find(y => y.Id == x.MailingState) ?? data.sends[0]
})
data.orders = r.data.data.pageData
data.pages.pageCount = r.data.data.pageCount
x.typeInfo =
data.status.find((y) => y.StatusId == x.OrderStatus) ?? data.status[1];
x.SendType =
data.sends.find((y) => y.Id == x.MailingState) ?? data.sends[0];
});
data.orders = r.data.data.pageData;
data.pages.pageCount = r.data.data.pageCount;
} else {
message.errorMsg(r.data.message)
message.errorMsg(r.data.message);
}
}).catch(e => {
message.errorMsg(e.message)
data.loading = false
})
.catch((e) => {
message.errorMsg(e.message);
data.loading = false;
});
},
cancelConfirmHandler(orderId: number) {
$q.dialog({
title: t('dialog.titles.horder'),
message: t('dialog.contents.horder'),
title: t("dialog.titles.horder"),
message: t("dialog.contents.horder"),
cancel: true,
persistent: true
persistent: true,
}).onOk(() => {
methods.cancelOrderHandler(orderId)
})
methods.cancelOrderHandler(orderId);
});
},
cancelOrderHandler(orderId: number) {
if (data.loading) return
data.loading = true
if (data.loading) return;
data.loading = true;
CharteredBusService.CancelTYCarOrder(orderId)
.then(r => {
data.loading = false
.then((r) => {
data.loading = false;
if (r.data.resultCode == ApiResult.SUCCESS) {
methods.init()
message.successMsg(`${t('success')}`)
methods.init();
message.successMsg(`${t("success")}`);
} else {
message.errorMsg(r.data.message)
message.errorMsg(r.data.message);
}
}).catch(e => {
message.errorMsg(e.message)
data.loading = false
})
.catch((e) => {
message.errorMsg(e.message);
data.loading = false;
});
},
setShowWarnHander(id: number) {
data.expendsOrderId = id == data.expendsOrderId ? 0 : id
data.expendsOrderId = id == data.expendsOrderId ? 0 : id;
},
changePageHandler(n: any) {
data.pages.pageIndex = n
methods.initOrders()
data.pages.pageIndex = n;
methods.initOrders();
},
init() {
data.status = getHotelOrderStatus()
data.sends = getSendType()
methods.initOrders()
data.status = getHotelOrderStatus();
data.sends = getSendType();
methods.initOrders();
},
editOrder(order:any) {
let onldOpen = `${order.OrderDate.split('-')}`
let newOpen = onldOpen.substring(0,4) + onldOpen.substring(5,7) + onldOpen.substring(8,10)
$router.push({ path:`/vehicle/Preview/${order.ProductId}/${newOpen}/${order.OrderId}`})
editOrder(order: any) {
let onldOpen = `${order.OrderDate.split("-")}`;
let newOpen =
onldOpen.substring(0, 4) + onldOpen.substring(5, 7) + onldOpen.substring(8, 10);
$router.push({
path: `/vehicle/Preview/${order.ProductId}/${newOpen}/${order.OrderId}`,
});
},
setCopyHandler(order: any, ctx?: string) {
if (ctx) {
data.copyId = -1
copyToClipboard(ctx)
data.copyId = -1;
copyToClipboard(ctx);
} else {
data.copyId = order.OrderId
copyToClipboard(order.OrderNo)
data.copyId = order.OrderId;
copyToClipboard(order.OrderNo);
}
setTimeout(() => {
data.copyId = 0
}, 2000)
}
}
data.copyId = 0;
}, 2000);
},
};
methods.init()
methods.init();
// data.orders.push(
// {
// OrderType: 0,
......@@ -438,22 +653,22 @@ export default defineComponent({
...toRefs(data),
...methods,
search,
moneyFormat
}
}
})
moneyFormat,
};
},
});
</script>
<style scoped>
.light-border table td:first-child{
border-left: 1px solid #eee
}
.light-border table tr td:last-child{
.light-border table td:first-child {
border-left: 1px solid #eee;
}
.light-border table tr td:last-child {
position: sticky;
right: 0;
z-index: 1;
box-shadow: rgb(0 0 0 / 5%) -2px 0px 0px;
}
}
.light-border table,
.light-border table td,
.light-border .q-table__middle,
......@@ -491,7 +706,7 @@ export default defineComponent({
border-radius: 10px;
}
.orderListDialog-img {
background: url('../../../../assets/images/wallet.png') no-repeat right #5098ff;
background: url("../../../../assets/images/wallet.png") no-repeat right #5098ff;
background-size: 97px 100%;
}
</style>
src/components/hotel/order/list/OrderList.vue
View file @ 4d9426bd
<template>
<div>
<q-card class="light-shadow q-pa-md bg-white rounded-borders q-mb-md" flat v-for="(x,index) in orders" :key="index">
<q-card
class="light-shadow q-pa-md bg-white rounded-borders q-mb-md"
flat
v-for="(x, index) in orders"
:key="index"
>
<div class="row items-center desktop-only">
<div class="q-mr-md">
<q-btn :color="x.OrderType == 1 ? 'cyan' : 'negative'" unelevated disable size="sm"
:label="`${x.OrderType == 1 ? $t('hotelorder.orderType.guest') : $t('hotelorder.orderType.tour')}`"></q-btn>
<q-btn
:color="x.OrderType == 1 ? 'cyan' : 'negative'"
unelevated
disable
size="sm"
:label="`${
x.OrderType == 1
? $t('hotelorder.orderType.guest')
: $t('hotelorder.orderType.tour')
}`"
></q-btn>
</div>
<div class="f12 text-grey-6">
{{ $t("hotelorder.search.orderNum") }}：{{ x.OrderNo }}
</div>
<div class="f12 text-grey-6">{{ $t('hotelorder.search.orderNum') }}：{{ x.OrderNo }}</div>
<div class="q-ml-md">
<q-btn color="dark" flat size="sm" :label="$t('hotelorder.copy')" v-if="copyId != x.OrderId"
@click="setCopyHandler(x)" />
<q-btn color="cyan" icon="check" outline size="sm" :label="$t('hotelorder.copyed')" v-else></q-btn>
<q-btn
color="dark"
flat
size="sm"
:label="$t('hotelorder.copy')"
v-if="copyId != x.OrderId"
@click="setCopyHandler(x)"
/>
<q-btn
color="cyan"
icon="check"
outline
size="sm"
:label="$t('hotelorder.copyed')"
v-else
></q-btn>
</div>
<div class="col text-center f12 text-grey-6">
<span v-if="x.OrderType == 1">{{ $t('hotelorder.search.contactInfo') }}：{{ x.ContactName }}/{{
<span v-if="x.OrderType == 1"
>{{ $t("hotelorder.search.contactInfo") }}：{{ x.ContactName }}/{{
x.ContactNumber
}}</span>
<span v-else>{{ $t('hotelorder.search.tcNum') }}：{{ x.TCNum }}</span>
}}</span
>
<span v-else>{{ $t("hotelorder.search.tcNum") }}：{{ x.TCNum }}</span>
</div>
<div class="f12 text-grey-6">
{{ $t("hotelorder.createTime") }}：{{ x.CreateTime }}
</div>
<div class="f12 text-grey-6">{{ $t('hotelorder.createTime') }}：{{ x.CreateTime }}</div>
<div class="q-ml-md f12" :class="[x.typeInfo.Color]">
<q-icon :name="x.typeInfo.Icon" />
<span class="q-ml-sm">{{ x.typeInfo.StatusName }}</span>
......@@ -27,8 +60,17 @@
<div class="mobile-only">
<div class="row justify-between">
<div class="q-mr-md">
<q-btn :color="x.OrderType == 1 ? 'cyan' : 'negative'" unelevated disable size="sm"
:label="`${x.OrderType == 1 ? $t('hotelorder.orderType.guest') : $t('hotelorder.orderType.tour')}`"></q-btn>
<q-btn
:color="x.OrderType == 1 ? 'cyan' : 'negative'"
unelevated
disable
size="sm"
:label="`${
x.OrderType == 1
? $t('hotelorder.orderType.guest')
: $t('hotelorder.orderType.tour')
}`"
></q-btn>
</div>
<div class="q-ml-md f12" :class="[x.typeInfo.Color]">
<q-icon :name="x.typeInfo.Icon" />
......@@ -37,31 +79,57 @@
</div>
<div class="bg-grey-2 rounded-borders q-pa-sm q-mt-md">
<div class="row items-center justify-between">
<div class="f12 text-grey-6">{{ $t('hotelorder.search.orderNum') }}：{{ x.OrderNo }}</div>
<div class="f12 text-grey-6">
{{ $t("hotelorder.search.orderNum") }}：{{ x.OrderNo }}
</div>
<div class="q-ml-md">
<q-btn color="dark" flat size="sm" :label="$t('hotelorder.copy')" v-if="copyId != x.OrderId"
@click="setCopyHandler(x)" />
<q-btn color="cyan" outline size="sm" :label="$t('hotelorder.copyed')" v-else></q-btn>
<q-btn
color="dark"
flat
size="sm"
:label="$t('hotelorder.copy')"
v-if="copyId != x.OrderId"
@click="setCopyHandler(x)"
/>
<q-btn
color="cyan"
outline
size="sm"
:label="$t('hotelorder.copyed')"
v-else
></q-btn>
</div>
</div>
<div class="f12 text-grey-6">
<span v-if="x.OrderType == 1">{{ $t('hotelorder.search.contactInfo') }}：{{ x.ContactName }}/{{
<span v-if="x.OrderType == 1"
>{{ $t("hotelorder.search.contactInfo") }}：{{ x.ContactName }}/{{
x.ContactNumber
}}</span>
<span v-else>{{ $t('hotelorder.search.tcNum') }}：{{ x.TCNum }}</span>
}}</span
>
<span v-else>{{ $t("hotelorder.search.tcNum") }}：{{ x.TCNum }}</span>
</div>
<div class="f12 text-grey-6">
{{ $t("hotelorder.createTime") }}：{{ x.CreateTime }}
</div>
<div class="f12 text-grey-6">{{ $t('hotelorder.createTime') }}：{{ x.CreateTime }}</div>
</div>
</div>
<div class="reactive">
<div class="q-mt-md row">
<q-table separator="cell" :hide-bottom="!x.Remark||!x.isMore" :pagination="{ rowsPerPage: 100 }" dense :rows="x.NewDetailList"
bordered :columns="cols" class="sticky-rightrowspan-column-table light-border col no-shadow">
<q-table
separator="cell"
:hide-bottom="!x.Remark || !x.isMore"
:pagination="{ rowsPerPage: 100 }"
dense
:rows="x.NewDetailList"
bordered
:columns="cols"
class="sticky-rightrowspan-column-table light-border col no-shadow"
>
<template v-slot:header-cell-Room="props">
<q-th :props="props">
<div class="row items-center">
<span class="q-mr-md">{{ props.col.label }}</span>
<q-tooltip>{{ $t('hotelorder.priceTips') }}</q-tooltip>
<q-tooltip>{{ $t("hotelorder.priceTips") }}</q-tooltip>
<svg-icon icon="Code/Question-circle.svg" :size="14"></svg-icon>
</div>
</q-th>
......@@ -69,18 +137,31 @@
<template v-slot:body-cell-Room="props">
<q-td :props="props">
<div class="room-item f12 text-grey-6" v-for="x in props.row.RoomList">
<span class="q-mr-md"> {{ x.RoomInfo.TypeName }}: {{ x.Number }} {{ $t('unit.jian') }} </span>
<span class="q-mr-md"> {{ $t('hotelorder.people') }}: {{ x.PeopleNumber ?? 1 }} {{ $t('unit.ren') }}
<span class="q-mr-md">
{{ x.RoomInfo.TypeName }}: {{ x.Number }} {{ $t("unit.jian") }}
</span>
<span class="q-mr-md">
{{ $t("hotelorder.people") }}: {{ x.PeopleNumber ?? 1 }}
{{ $t("unit.ren") }}
</span>
<span class="q-mr-md">
{{ $t("hotelorder.unitPrice") }}: {{ x.Unit_Price ?? 1 }}
</span>
<span class="q-mr-md">
{{ $t("hotelorder.xj") }}: {{ x.Money ?? 1 }}
</span>
<span class="q-mr-md"> {{ $t('hotelorder.unitPrice') }}: {{ x.Unit_Price ?? 1 }} </span>
<span class="q-mr-md"> {{ $t('hotelorder.xj') }}: {{ x.Money ?? 1 }} </span>
</div>
</q-td>
</template>
<template v-slot:body-cell-RoomNo="props">
<q-td :props="props">
<n-tag :bordered="false" size="small" type="error" v-if="!props.row.ReserveRoomNo">
{{ $t('hotelorder.check.un') }}
<n-tag
:bordered="false"
size="small"
type="error"
v-if="!props.row.ReserveRoomNo"
>
{{ $t("hotelorder.check.un") }}
</n-tag>
<n-tag :bordered="false" size="small" type="success" v-else>
{{ props.row.ReserveRoomNo }}
......@@ -88,14 +169,22 @@
</q-td>
</template>
<template v-slot:body-cell-HandFittingFee="props">
<q-td :props="props" :colspan="x.DetailList.length" v-if="props.rowIndex == 0" >
<q-td
:props="props"
:colspan="x.DetailList.length"
v-if="props.rowIndex == 0"
>
{{ moneyFormat(x.HandFittingFee) }}
<div class="q-mt-sm" v-if="x.OrderStatus == 2">
<q-btn size="sm" dense outline color="primary" v-if="x.ContractUrl">
<a class="text-primary" style="text-decoration:none"
:href="x.ContractUrl">{{ $t('v101.downloadHands') }}</a>
<a
class="text-primary"
style="text-decoration: none"
:href="x.ContractUrl"
>{{ $t("v101.downloadHands") }}</a
>
</q-btn>
<span class="text-grey-500 f12">{{ $t('v101.noneHands') }}</span>
<span class="text-grey-500 f12">{{ $t("v101.noneHands") }}</span>
</div>
</q-td>
</template>
......@@ -106,110 +195,209 @@
</q-td>
</template>
<template v-slot:bottom="props">
<div v-if="x.Remark" class="msl text-negative">{{ $t('v101.hotelRemark') }}：{{ x.Remark }}</div>
<more v-if="x.isMore" @change="ViewMore(x,index)" :upIcon="x.upIcon"></more>
<div v-if="x.Remark" class="msl text-negative">
{{ $t("v101.hotelRemark") }}：{{ x.Remark }}
</div>
<more
v-if="x.isMore"
@change="ViewMore(x, index)"
:upIcon="x.upIcon"
></more>
</template>
</q-table>
</div>
</div>
<div class="q-mt-md" v-if="x.OrderStatus != 3"
:class="{ row: $q.platform.is.desktop, 'column reverse': $q.platform.is.mobile }">
<div class="pay row text-grey rounded-borders q-pa-md"
v-if="$q.platform.is.desktop || ($q.platform.is.mobile && expendsOrderId == x.OrderId)"
:class="{ 'bg-grey-2': $q.platform.is.mobile }">
<svg-icon color=" svg-red" icon="Code/Warning-1-circle.svg" :size="16"
v-if="$q.platform.is.desktop"></svg-icon>
<div
class="q-mt-md"
v-if="x.OrderStatus != 3"
:class="{ row: $q.platform.is.desktop, 'column reverse': $q.platform.is.mobile }"
>
<div
class="pay row text-grey rounded-borders q-pa-md"
v-if="
$q.platform.is.desktop ||
($q.platform.is.mobile && expendsOrderId == x.OrderId)
"
:class="{ 'bg-grey-2': $q.platform.is.mobile }"
>
<svg-icon
color=" svg-red"
icon="Code/Warning-1-circle.svg"
:size="16"
v-if="$q.platform.is.desktop"
></svg-icon>
<div class="q-ml-sm">
<div class="q-mb-sm" v-if="x.CustomerPayType == 2 || x.CustomerPayType == 3">
<div class="f12">
{{ $t('hotelorder.pay.t1') }}
{{ $t("hotelorder.pay.t1") }}
<span class="text-orange">{{ x.PaymentDate }}</span>
{{ $t('hotelorder.pay.t11') }}
{{ $t("hotelorder.pay.t11") }}
<span class="text-orange">{{ x.FinalPaymentDate }}</span>
{{ $t('hotelorder.pay.t12') }}
</div>
<q-btn dense outline color="accent" size="sm" class="q-mt-sm" :label="$t('hotelorder.payinfo')"
@click="ViewPayment"></q-btn>
{{ $t("hotelorder.pay.t12") }}
</div>
<q-btn
dense
outline
color="accent"
size="sm"
class="q-mt-sm"
:label="$t('hotelorder.payinfo')"
@click="ViewPayment"
></q-btn>
<!-- <q-btn dense unelevated color="accent" size="sm" class="q-mt-sm q-ml-sm" :label="$t('hotelorder.sendpay')"></q-btn> -->
</div>
<div v-if="x.CustomerPayType == 1 || x.CustomerPayType == 3">
<div class="f12">
{{ $t('hotelorder.pay.t2') }}
{{ $t("hotelorder.pay.t2") }}
<span class="text-negative">{{ x.UploadGuestDate }}</span>
{{ $t('hotelorder.pay.t21') }}
{{ $t("hotelorder.pay.t21") }}
</div>
<div class="row items-center f12 q-mt-sm">
<div class="text-accent q-mr-md" v-if="x.GuestFileList.length > 0">
{{ x.GuestFileList[0].split('/').at(-1) }}</div>
<q-btn dense unelevated color="primary" size="sm" class="q-mr-sm" v-if="x.GuestFileList.length > 0">
<a class="text-white" style="text-decoration:none"
:href="x.GuestFileList[0]">{{ $t('upload.down') }}</a>
{{ x.GuestFileList[0].split("/").at(-1) }}
</div>
<q-btn
dense
unelevated
color="primary"
size="sm"
class="q-mr-sm"
v-if="x.GuestFileList.length > 0"
>
<a
class="text-white"
style="text-decoration: none"
:href="x.GuestFileList[0]"
>{{ $t("upload.down") }}</a
>
</q-btn>
<n-upload class="col" :action="importFileUrl" @finish="handleFinish"
@change="uploadHandleChange(x.OrderId)" file-list-style="display:none">
<q-btn dense outline color="primary" size="sm"
:label="x.GuestFileList.length == 0 ? $t('hotelorder.uploadGuest') : $t('upload.reload')"></q-btn>
<n-upload
class="col"
:action="importFileUrl"
@finish="handleFinish"
@change="uploadHandleChange(x.OrderId)"
file-list-style="display:none"
>
<q-btn
dense
outline
color="primary"
size="sm"
:label="
x.GuestFileList.length == 0
? $t('hotelorder.uploadGuest')
: $t('upload.reload')
"
></q-btn>
</n-upload>
</div>
</div>
</div>
</div>
<div class="mobile-only row items-center justify-between" v-if="$q.platform.is.mobile">
<div
class="mobile-only row items-center justify-between"
v-if="$q.platform.is.mobile"
>
<div class="text-negative">
<svg-icon color=" svg-red" icon="Code/Warning-1-circle.svg" :size="16"></svg-icon>
<span class="q-ml-sm">{{ $t('hotelorder.warn') }}</span>
</div>
<q-btn color="grey" @click="setShowWarnHander(x.OrderId)" dense size="sm" flat
:label="expendsOrderId == x.OrderId ? $t('expends.off') : $t('expends.on')" />
<svg-icon
color=" svg-red"
icon="Code/Warning-1-circle.svg"
:size="16"
></svg-icon>
<span class="q-ml-sm">{{ $t("hotelorder.warn") }}</span>
</div>
<q-btn
color="grey"
@click="setShowWarnHander(x.OrderId)"
dense
size="sm"
flat
:label="expendsOrderId == x.OrderId ? $t('expends.off') : $t('expends.on')"
/>
</div>
<div class="col desktop-only"></div>
<div class="rounded-borders bg-grey-2 q-pa-md"
:class="{ 'q-mx-md': $q.platform.is.desktop, 'q-mt-md': $q.platform.is.mobile }">
<div class="row items-center justify-between q-mb-sm q-pb-sm" style="border-bottom: 1px dashed #ddd">
<div class="f12 text-grey">{{ $t('hotelorder.orderMoney') }}</div>
<div
class="rounded-borders bg-grey-2 q-pa-md"
:class="{ 'q-mx-md': $q.platform.is.desktop, 'q-mt-md': $q.platform.is.mobile }"
>
<div
class="row items-center justify-between q-mb-sm q-pb-sm"
style="border-bottom: 1px dashed #ddd"
>
<div class="f12 text-grey">{{ $t("hotelorder.orderMoney") }}</div>
<div class="dark q-ml-xl">
<!-- <span class="f12">{{ $t('unit.jpc') }}</span> -->
<span class="din text-subtitle1">{{ moneyFormat(x.Money) }}</span>
<span class="f12">{{ $t('unit.jp') }}</span>
<span class="f12">{{ $t("unit.jp") }}</span>
</div>
</div>
<div class="row items-center justify-between q-mb-sm q-pb-sm" style="border-bottom: 1px dashed #ddd"
v-if="x.CustomerPayType == 1 || x.CustomerPayType == 3">
<div class="f12 text-grey">{{ $t('hotelorder.payType.t1') }}</div>
<div
class="row items-center justify-between q-mb-sm q-pb-sm"
style="border-bottom: 1px dashed #ddd"
v-if="x.CustomerPayType == 1 || x.CustomerPayType == 3"
>
<div class="f12 text-grey">{{ $t("hotelorder.payType.t1") }}</div>
<div class="dark">
<span class="f12">{{ moneyFormat(x.SelfPayMoney) }}</span>
<span class="f12">{{ $t('unit.jp') }}</span>
<span class="f12">{{ $t("unit.jp") }}</span>
</div>
</div>
<div class="row items-center justify-between" v-if="x.CustomerPayType == 2 || x.CustomerPayType == 3">
<div class="f12 text-grey">{{ $t('hotelorder.payType.t2') }}</div>
<div
class="row items-center justify-between"
v-if="x.CustomerPayType == 2 || x.CustomerPayType == 3"
>
<div class="f12 text-grey">{{ $t("hotelorder.payType.t2") }}</div>
<div class="dark">
<span class="f12">{{ moneyFormat(x.BeforeMoney) }}</span>
<span class="f12">{{ $t('unit.jp') }}</span>
</div>
</div>
</div>
<div class="rounded-borders q-pa-sm justify-between"
:class="{ column: $q.platform.is.desktop, 'row items-center': $q.platform.is.mobile, 'bg-green-1': x.OrderStatus != 1, 'bg-grey-2': x.OrderStatus == 1 }">
<q-list dense v-if="x.OrderStatus == 1"
:class="{ 'row items-center justify-between full-width': $q.platform.is.mobile }">
<q-item class="text-negative" clickable v-close-popup @click="cancelConfirmHandler(x.OrderId)">
<span class="f12">{{ $t("unit.jp") }}</span>
</div>
</div>
</div>
<div
class="rounded-borders q-pa-sm justify-between"
:class="{
column: $q.platform.is.desktop,
'row items-center': $q.platform.is.mobile,
'bg-green-1': x.OrderStatus != 1,
'bg-grey-2': x.OrderStatus == 1,
}"
>
<q-list
dense
v-if="x.OrderStatus == 1"
:class="{
'row items-center justify-between full-width': $q.platform.is.mobile,
}"
>
<q-item
class="text-negative"
clickable
v-close-popup
@click="cancelConfirmHandler(x.OrderId)"
>
<q-item-section>
<q-item-label>{{ $t('hotelorder.opera.cancel') }}</q-item-label>
<q-item-label>{{ $t("hotelorder.opera.cancel") }}</q-item-label>
</q-item-section>
</q-item>
<q-item class="text-primary" clickable v-close-popup @click="modify(x.OrderId)">
<q-item
class="text-primary"
clickable
v-close-popup
@click="modify(x.OrderId)"
>
<q-item-section>
<q-item-label>{{ $t('hotelorder.opera.edit') }}</q-item-label>
<q-item-label>{{ $t("hotelorder.opera.edit") }}</q-item-label>
</q-item-section>
</q-item>
<q-item class="text-positive" clickable v-close-popup @click="goUrl(x.OrderId)">
<q-item
class="text-positive"
clickable
v-close-popup
@click="goUrl(x.OrderId)"
>
<q-item-section>
<q-item-label>{{ $t('v101.Listofquotation.baojiadan') }}</q-item-label>
<q-item-label>{{ $t("v101.Listofquotation.baojiadan") }}</q-item-label>
</q-item-section>
</q-item>
<!-- <q-item class="text-dark" clickable v-close-popup>
......@@ -219,69 +407,93 @@
</q-item> -->
</q-list>
<div v-else>
<div class="f12 text-green-4">{{ $t('hotelorder.payed') }}</div>
<div class="f12 text-green-4">{{ $t("hotelorder.payed") }}</div>
<div class="text-subtitle1 din text-green-14">
{{ x.OrderIncome.toFixed(2) }}
<span class="text-green-4 f12">{{ $t('unit.jp') }}</span>
<span class="text-green-4 f12">{{ $t("unit.jp") }}</span>
</div>
</div>
</div>
</div>
<div v-if="x.OrderStatus == 3">
<div class="q-mt-md q-pa-sm row items-center rounded-borders bg-orange-1"
style="border-width: 0 5px; border-style: solid; border-color:#ffb74d;">
<div class="text-subtitle2 text-weight-bolder text-grey-900">{{ $t('v101.cancelRemark') }}：</div>
<div class="f12 text-grey-600 q-ml-sm col">{{ x.CancelRemark ? x.CancelRemark : $t('v101.selfCancle') }}</div>
<div
class="q-mt-md q-pa-sm row items-center rounded-borders bg-orange-1"
style="border-width: 0 5px; border-style: solid; border-color: #ffb74d"
>
<div class="text-subtitle2 text-weight-bolder text-grey-900">
{{ $t("v101.cancelRemark") }}：
</div>
<div class="f12 text-grey-600 q-ml-sm col">
{{ x.CancelRemark ? x.CancelRemark : $t("v101.selfCancle") }}
</div>
<div class="f12 text-grey-900">{{ x.CancelEmpName }} {{ x.CancelTime }}</div>
</div>
</div>
</q-card>
<q-card class="light-shadow q-pa-md bg-white rounded-borders q-mb-md" v-if="pages.pageCount > 0" flat>
<q-pagination class="full-width justify-end" v-model="pages.pageIndex" color="primary" :max="pages.pageCount"
:input="true" @update:model-value="changePageHandler" />
<q-card
class="light-shadow q-pa-md bg-white rounded-borders q-mb-md"
v-if="pages.pageCount > 0"
flat
>
<q-pagination
class="full-width justify-end"
v-model="pages.pageIndex"
color="primary"
:max="pages.pageCount"
:input="true"
@update:model-value="changePageHandler"
/>
</q-card>
<q-inner-loading :showing="loading" :label="$t('loading')" label-class="text-grey-6 f12" />
<q-inner-loading
:showing="loading"
:label="$t('loading')"
label-class="text-grey-6 f12"
/>
</div>
<div class="text-center q-mt-xl" v-if="(!orders || orders.length == 0) && !loading">
<svg-icon :size="50" color="nav" icon="General/Clipboard.svg"></svg-icon>
<div class="q-mt-md f12 text-grey-6">{{ $t('noneData') }}</div>
<div class="q-mt-md f12 text-grey-6">{{ $t("noneData") }}</div>
</div>
<q-dialog v-model="showBankAccount">
<BankAccount @change="showBankAccount=false"></BankAccount>
<BankAccount @change="showBankAccount = false"></BankAccount>
</q-dialog>
</template>
<script lang="ts">
import { DirtionmaryHelper } from '../../../../config/dictionary'
import { defineComponent, inject, reactive, toRefs, watch } from 'vue'
import HotelService from '../../../../api/hotel'
import { ApiResult } from '../../../../@types/enumHelper'
import message from '../../../../utils/message'
import { RoomType, StandardStatus } from '../../../../@types'
import { getHotelOrderStatus, getHotelRoomType, moneyFormat } from '../../../../utils/tools'
import { useI18n } from 'vue-i18n'
import svgIcon from '../../../global/svg-icon.vue'
import { copyToClipboard, useQuasar } from 'quasar'
import { currentRouter } from '../../../../router'
import { UploadFileInfo, NTag, NUpload } from 'naive-ui'
import { slice } from 'lodash'
import BankAccount from '../../../BankAccount.vue'
import more from '../../../more.vue'
import { DirtionmaryHelper } from "../../../../config/dictionary";
import { defineComponent, inject, reactive, toRefs, watch } from "vue";
import HotelService from "../../../../api/hotel";
import { ApiResult } from "../../../../@types/enumHelper";
import message from "../../../../utils/message";
import { RoomType, StandardStatus } from "../../../../@types";
import {
getHotelOrderStatus,
getHotelRoomType,
moneyFormat,
} from "../../../../utils/tools";
import { useI18n } from "vue-i18n";
import svgIcon from "../../../global/svg-icon.vue";
import { copyToClipboard, useQuasar } from "quasar";
import { currentRouter } from "../../../../router";
import { UploadFileInfo, NTag, NUpload } from "naive-ui";
import { slice } from "lodash";
import BankAccount from "../../../BankAccount.vue";
import more from "../../../more.vue";
export default defineComponent({
components: { svgIcon, NTag, NUpload, BankAccount, more },
setup(props) {
const search = inject(DirtionmaryHelper.HOTEL_ORDER_SEARCH) as any
const { t } = useI18n()
const $q = useQuasar()
const search = inject(DirtionmaryHelper.HOTEL_ORDER_SEARCH) as any;
const { t } = useI18n();
const $q = useQuasar();
watch(search, (n, o) => {
if (data.loading) return
data.loading = true
data.pages.pageIndex = 1
data.orders = []
methods.initOrders()
})
if (data.loading) return;
data.loading = true;
data.pages.pageIndex = 1;
data.orders = [];
methods.initOrders();
});
const data = reactive({
PaymentDialog: false,
......@@ -293,198 +505,234 @@ export default defineComponent({
pages: {
pageIndex: 1,
pageSize: 10,
pageCount: 0
pageCount: 0,
},
loading: true,
copyId: 0,
expendsOrderId: 0,
cols: [
{ name: 'Date', label: t('hotelorder.col.d'), field: (row: any) => row.Date, align: 'left' },
{ name: 'HotelName', label: t('hotelorder.col.hn'), field: (row: any) => row.HotelName, align: 'left' },
{ name: 'Room', label: t('hotelorder.col.r'), align: 'left' },
{ name: 'RoomNo', label: t('hotelorder.col.n'), align: 'left' },
{ name: 'Tax', label: t('hotelorder.col.t'), field: (row: any) => (row.TaxesPrice ? `${(row.PeopleNum * row.TaxesPrice).toFixed(2)}` : t('hotelorder.col.noneTax')), align: 'left' },
{ name: 'Tax2', label: t('hotelorder.col.t2'), field: (row: any) => (row.PriceInTangTax ? `${(row.PeopleNum * row.PriceInTangTax).toFixed(2)}` : t('hotelorder.col.noneTax')), align: 'left' },
{ name: 'Money', label: t('hotelorder.col.m'), field: (row: any) => row.HotelMoeny.toFixed(2), align: 'left' },
{ name: 'PayType', label: t('hotelorder.col.pt'), field: (row: any) => (row.PayType == 1 ? t('hotelorder.payType.t1') : t('hotelorder.payType.t2')), align: 'left' },
{ name: 'HandFittingFee', label: t('hotelorder.hands'), align: 'left' }
{
name: "Date",
label: t("hotelorder.col.d"),
field: (row: any) => row.Date,
align: "left",
},
{
name: "HotelName",
label: t("hotelorder.col.hn"),
field: (row: any) => row.HotelName,
align: "left",
},
{ name: "Room", label: t("hotelorder.col.r"), align: "left" },
{ name: "RoomNo", label: t("hotelorder.col.n"), align: "left" },
{
name: "Tax",
label: t("hotelorder.col.t"),
field: (row: any) =>
row.TaxesPrice
? `${(row.PeopleNum * row.TaxesPrice).toFixed(2)}`
: t("hotelorder.col.noneTax"),
align: "left",
},
{
name: "Tax2",
label: t("hotelorder.col.t2"),
field: (row: any) =>
row.PriceInTangTax
? `${(row.PeopleNum * row.PriceInTangTax).toFixed(2)}`
: t("hotelorder.col.noneTax"),
align: "left",
},
{
name: "Money",
label: t("hotelorder.col.m"),
field: (row: any) => row.HotelMoeny.toFixed(2),
align: "left",
},
{
name: "PayType",
label: t("hotelorder.col.pt"),
field: (row: any) =>
row.PayType == 1 ? t("hotelorder.payType.t1") : t("hotelorder.payType.t2"),
align: "left",
},
{ name: "HandFittingFee", label: t("hotelorder.hands"), align: "left" },
] as any,
importFileUrl: 'https://mallApi.oytour.com/api/File/UploadTencent?MallBaseId=1'
})
importFileUrl: "https://mallApi.oytour.com/api/File/UploadTencent?MallBaseId=1",
});
const methods = {
ViewMore(x:any,index:Number){
x.upIcon = !x.upIcon
if(x.upIcon){
x.NewDetailList = JSON.parse(JSON.stringify(x.DetailList))
}else{
x.NewDetailList = []
x.DetailList.forEach((y:any,index:Number)=>{
if(index<2){
x.NewDetailList.push(y)
ViewMore(x: any, index: Number) {
x.upIcon = !x.upIcon;
if (x.upIcon) {
x.NewDetailList = JSON.parse(JSON.stringify(x.DetailList));
} else {
x.NewDetailList = [];
x.DetailList.forEach((y: any, index: Number) => {
if (index < 2) {
x.NewDetailList.push(y);
}
})
});
}
},
goUrl(id: number) {
currentRouter.push('/hotel/offer/' + id)
currentRouter.push("/hotel/offer/" + id);
},
ViewPayment() {
data.showBankAccount = true
data.showBankAccount = true;
},
initOrders() {
let param = Object.assign(data.pages, search)
let param = Object.assign(data.pages, search);
//data.orders = []
HotelService.GetHotelOrders(param)
.then(r => {
.then((r) => {
if (r.data.resultCode == ApiResult.SUCCESS) {
let arrList = function(arr: Array<any>){
arr.forEach(item => {
item.isMore = false
item.upIcon = false
item.NewDetailList = []
let arrList = function (arr: Array<any>) {
arr.forEach((item) => {
item.isMore = false;
item.upIcon = false;
item.NewDetailList = [];
});
}
arrList(r.data.data.pageData)
};
arrList(r.data.data.pageData);
r.data.data.pageData.forEach((x: any) => {
x.typeInfo = data.status.find(y => y.StatusId == x.OrderStatus) ?? data.status[1]
if(x.DetailList.length>2){
x.isMore = true
x.typeInfo =
data.status.find((y) => y.StatusId == x.OrderStatus) ?? data.status[1];
if (x.DetailList.length > 2) {
x.isMore = true;
}
let dataLists = []
x.DetailList.forEach((y: any,index: Number) => {
let PeopleNum = 0
let dataLists = [];
x.DetailList.forEach((y: any, index: Number) => {
let PeopleNum = 0;
y.RoomList.forEach((z: any) => {
z.RoomInfo = data.rooms.find(r => r.TypeId == z.RoomType) ?? data.rooms[0]
PeopleNum += z.PeopleNumber
})
console.log(PeopleNum)
y.PeopleNum = PeopleNum
if(index<2){
dataLists.push(y)
z.RoomInfo =
data.rooms.find((r) => r.TypeId == z.RoomType) ?? data.rooms[0];
PeopleNum += z.PeopleNumber;
});
console.log(PeopleNum);
y.PeopleNum = PeopleNum;
if (index < 2) {
dataLists.push(y);
}
})
x.NewDetailList = JSON.parse(JSON.stringify(dataLists))
})
data.orders = r.data.data.pageData
data.pages.pageCount = r.data.data.pageCount
});
x.NewDetailList = JSON.parse(JSON.stringify(dataLists));
});
data.orders = r.data.data.pageData;
data.pages.pageCount = r.data.data.pageCount;
} 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;
});
},
cancelConfirmHandler(orderId: number) {
$q.dialog({
title: t('dialog.titles.horder'),
message: t('dialog.contents.horder'),
title: t("dialog.titles.horder"),
message: t("dialog.contents.horder"),
cancel: true,
persistent: true
persistent: true,
}).onOk(() => {
methods.cancelOrderHandler(orderId)
})
methods.cancelOrderHandler(orderId);
});
},
cancelOrderHandler(orderId: number) {
if (data.loading) return
data.loading = true
if (data.loading) return;
data.loading = true;
HotelService.CancelHotelOrder(orderId)
.then(r => {
.then((r) => {
if (r.data.resultCode == ApiResult.SUCCESS) {
data.pages.pageIndex = 1
this.initOrders()
message.successMsg(`${t('success')}`)
}else{
message.errorMsg(r.data.message)
data.pages.pageIndex = 1;
this.initOrders();
message.successMsg(`${t("success")}`);
} else {
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;
});
},
setShowWarnHander(id: number) {
data.expendsOrderId = id == data.expendsOrderId ? 0 : id
data.expendsOrderId = id == data.expendsOrderId ? 0 : id;
},
changePageHandler(n: any) {
data.pages.pageIndex = n
methods.initOrders()
data.pages.pageIndex = n;
methods.initOrders();
},
uploadHandleChange(orderId: number) {
data.uploadOrderId = orderId
data.loading = true
data.uploadOrderId = orderId;
data.loading = true;
},
init() {
data.status = getHotelOrderStatus()
data.rooms = getHotelRoomType()
methods.initOrders()
data.status = getHotelOrderStatus();
data.rooms = getHotelRoomType();
methods.initOrders();
},
modify(id: number) {
currentRouter.push('/hotel/modify/' + id)
currentRouter.push("/hotel/modify/" + id);
},
handleFinish(options: { file: UploadFileInfo; event?: ProgressEvent }) {
data.loading = false
let r = (options.event?.target as XMLHttpRequest).response
data.loading = false;
let r = (options.event?.target as XMLHttpRequest).response;
if (r) {
let res = JSON.parse(r)
let res = JSON.parse(r);
if (res.resultCode == ApiResult.SUCCESS && res.data) {
methods.setGuestListHandler(res.data)
methods.setGuestListHandler(res.data);
} else {
message.errorMsg(t('upload.failed'))
data.loading = false
message.errorMsg(t("upload.failed"));
data.loading = false;
}
} else {
message.errorMsg(t('upload.failed'))
data.loading = false
message.errorMsg(t("upload.failed"));
data.loading = false;
}
},
setGuestListHandler(url: string) {
HotelService.SetGuestFile(data.uploadOrderId, url)
.then(r => {
.then((r) => {
if (r.data.resultCode == ApiResult.SUCCESS) {
message.successMsg(t('upload.success'))
let order = data.orders.find(x => x.OrderId == data.uploadOrderId)
order.GuestFileList = [url]
message.successMsg(t("upload.success"));
let order = data.orders.find((x) => x.OrderId == data.uploadOrderId);
order.GuestFileList = [url];
} else {
message.errorMsg(t('upload.failed'))
message.errorMsg(t("upload.failed"));
}
data.loading = false
})
.catch(r => {
data.loading = false
message.errorMsg(r.message)
data.loading = false;
})
.catch((r) => {
data.loading = false;
message.errorMsg(r.message);
});
},
setCopyHandler(order: any, ctx?: string) {
if (ctx) {
data.copyId = -1
copyToClipboard(ctx)
data.copyId = -1;
copyToClipboard(ctx);
} else {
data.copyId = order.OrderId
copyToClipboard(order.OrderNo)
data.copyId = order.OrderId;
copyToClipboard(order.OrderNo);
}
setTimeout(() => {
data.copyId = 0
}, 2000)
data.copyId = 0;
}, 2000);
},
}
};
methods.init()
methods.init();
return {
...toRefs(data),
...methods,
moneyFormat
}
}
})
moneyFormat,
};
},
});
</script>
<style>
......@@ -528,12 +776,12 @@ export default defineComponent({
}
.orderListDialog-bg {
background: #5098FF;
background: #5098ff;
border-radius: 10px;
}
.orderListDialog-img {
background: url('../../../../assets/images/wallet.png')no-repeat right #5098FF;
background: url("../../../../assets/images/wallet.png") no-repeat right #5098ff;
background-size: 97px 100%;
}
</style>
src/pages/vehicle/vehicleOrder.vue
View file @ 4d9426bd
......@@ -15,7 +15,9 @@
<q-tab :name="2" :label="$t('v102.vehicle.tabtitle2')"></q-tab>
<q-tab :name="3" :label="$t('v102.vehicle.tabtitle3')"></q-tab>
</q-tabs>
<template v-if="b2bUserInfo && b2bUserInfo.groupId == 2">
<teamOrder v-if="tab == 0" :OrderId="OrderId"></teamOrder>
</template>
<CharteredBusOrder :type="tab" :OrderId="OrderId" v-if="tab != 0"></CharteredBusOrder>
</div>
</template>
......@@ -33,7 +35,7 @@ import {
import useMetaModule from "../../module/meta/metaModule";
import { useI18n } from "vue-i18n";
import teamOrder from "./teamOrder.vue";
import CharteredBusOrder from "../CharteredBus//CharteredBusOrder.vue";
import CharteredBusOrder from "../CharteredBus/CharteredBusOrder.vue";
import { DirtionmaryHelper } from "../../config/dictionary";
import { currentRouter } from "src/router";
import { getStoreGetter } from "../../store/utils";
......@@ -47,7 +49,7 @@ export default defineComponent({
const b2bUserInfo = getStoreGetter<UserGetter>("user", "getUser");
setTitle(pageTitle.value);
const data = reactive({
tab: 0,
tab: 1,
OrderId: null as any,
});
if (b2bUserInfo && b2bUserInfo.groupId == 2) {
......@@ -55,6 +57,7 @@ export default defineComponent({
} else {
data.tab = 1;
}
watch(
() => data.tab,
(o, n) => {}
......@@ -63,11 +66,22 @@ export default defineComponent({
if (currentRouter.currentRoute.value.params.OrderId) {
data.OrderId = currentRouter.currentRoute.value.params.OrderId;
}
if (currentRouter.currentRoute.value.params.pages < 4) {
console.log("11", currentRouter.currentRoute.value.params.pages);
if (
b2bUserInfo &&
b2bUserInfo.groupId == 100 &&
currentRouter.currentRoute.value.params.pages == 0
) {
data.tab = 1;
} else {
data.tab = Number(currentRouter.currentRoute.value.params.pages);
}
} else {
data.tab = 0;
}
console.log("currentRouter.tab", data.tab);
}
const menu = inject(DirtionmaryHelper.MENU_KEYS) as any;
menu.value = 6;
......
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