Skip to content

B
bigwood
Commit a02250e8 authored by 沈良进's avatar 沈良进
Browse files
Options

save

parent e89bd127
Show whitespace changes
Inline Side-by-side
Showing with 626 additions and 235 deletions
src/components/CharteredBus/list/ListHeader.vue
View file @ a02250e8
<template> <template>
<div class="rounded-borders bg-white row items-center q-pa-md"> <div class="rounded-borders bg-white row items-center q-pa-md">
<q-select v-if="$q.platform.is.desktop" style="min-width: 190px;" unelevated v-model="searchClone.CarType" dense :options="CharteredBusType" emit-value option-label="name" option-value="id" map-options :label="$t('v102.CharteredBus.baochetype')" standout @update:model-value="getCarType"/> <q-select
<n-cascader v-if="$q.platform.is.desktop" class="col-2 no-border q-ml-lg" @update:value="changearea" v-model:value="cascader.addressValue" size="large" :placeholder="$t('hotel.area')" clearable check-strategy="all" :options="provinces" value-field="ID" label-field="Name" remote cascade /> v-if="$q.platform.is.desktop"
<n-cascader v-if="$q.platform.is.desktop&&searchClone.CarType!=3" class="col-2 no-border q-ml-lg" @update:value="changeareaAirport" v-model:value="cascader.AirportValue" size="large" :placeholder="$t('v102.CharteredBus.jiansuojichang')" clearable check-strategy="all" :options="AirportList" value-field="ID" label-field="Name" remote cascade /> style="min-width: 190px"
<q-field v-if="$q.platform.is.desktop" stack-label :label="$t('daterange')" standout class="q-ml-lg col-2" style="min-width: 190px" dense> unelevated
<div class="self-center full-width no-outline" tabindex="0">{{ searchClone.Q_Date }}</div> v-model="searchClone.CarType"
dense
:options="CharteredBusType"
emit-value
option-label="name"
option-value="id"
map-options
:label="$t('v102.CharteredBus.baochetype')"
standout
@update:model-value="getCarType"
/>
<n-cascader
v-if="$q.platform.is.desktop"
class="col-2 no-border q-ml-lg"
@update:value="changearea"
v-model:value="cascader.addressValue"
size="large"
:placeholder="$t('hotel.area')"
clearable
check-strategy="all"
:options="provinces"
value-field="ID"
label-field="Name"
remote
cascade
/>
<n-cascader
v-if="$q.platform.is.desktop && searchClone.CarType != 3"
class="col-2 no-border q-ml-lg"
@update:value="changeareaAirport"
v-model:value="cascader.AirportValue"
size="large"
:placeholder="$t('v102.CharteredBus.jiansuojichang')"
clearable
check-strategy="all"
:options="AirportList"
value-field="ID"
label-field="Name"
remote
cascade
/>
<q-field
v-if="$q.platform.is.desktop"
stack-label
:label="$t('daterange')"
standout
class="q-ml-lg col-2"
style="min-width: 190px"
dense
>
<div class="self-center full-width no-outline" tabindex="0">
{{ searchClone.Q_Date }}
</div>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy"> <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
<q-date v-model="searchClone.Q_Date" :options="optionsFn" mask="YYYY/MM/DD" @update:model-value="dateRangeHandler"></q-date> <q-date
v-model="searchClone.Q_Date"
:options="optionsFn"
mask="YYYY/MM/DD"
@update:model-value="dateRangeHandler"
></q-date>
</q-popup-proxy> </q-popup-proxy>
</q-field> </q-field>
<div class="col"></div> <div class="col"></div>
<q-btn unelevated class="bg-grey-3 hover q-mr-md" :title="$t('morequery')"> <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" /> <q-badge
<svg-icon color="dark" icon="Text/Filter.svg" :tips="$t('morequery')" :size="20"></svg-icon> rounded
<q-tooltip>{{ $t('morequery') }}</q-tooltip> class="din bg-red-2 text-red-14 text-weight-bold"
<q-popup-proxy class="no-shadow" style="box-shadow: 0 0 50px #ddd !important" :offset="[0, 20]" :model-value="canHide"> 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"> <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-my-md" v-if="$q.platform.is.mobile"> <div class="q-my-md" v-if="$q.platform.is.mobile">
<q-select v-if="$q.platform.is.desktop" style="min-width: 190px;" unelevated v-model="searchClone.CarType" dense :options="CharteredBusType" emit-value option-label="name" option-value="id" map-options :label="$t('v102.CharteredBus.baochetype')" standout /> <q-select
v-if="$q.platform.is.desktop"
style="min-width: 190px"
unelevated
v-model="searchClone.CarType"
dense
:options="CharteredBusType"
emit-value
option-label="name"
option-value="id"
map-options
:label="$t('v102.CharteredBus.baochetype')"
standout
/>
</div> </div>
<div class="q-my-md" v-if="$q.platform.is.mobile"> <div class="q-my-md" v-if="$q.platform.is.mobile">
<n-cascader class="col-2 no-border" @update:value="changearea" v-model:value="cascader.addressValue" size="large" :placeholder="$t('hotel.area')" clearable check-strategy="all" :options="provinces" value-field="ID" label-field="Name" remote cascade /> <n-cascader
class="col-2 no-border"
@update:value="changearea"
v-model:value="cascader.addressValue"
size="large"
:placeholder="$t('hotel.area')"
clearable
check-strategy="all"
:options="provinces"
value-field="ID"
label-field="Name"
remote
cascade
/>
</div> </div>
<div class="q-my-md" v-if="$q.platform.is.mobile"> <div class="q-my-md" v-if="$q.platform.is.mobile">
<q-field stack-label :label="$t('daterange')" standout class="col-2" style="min-width: 190px" dense> <q-field
<div class="self-center full-width no-outline" tabindex="0">{{ searchClone.Q_Date }}</div> stack-label
:label="$t('daterange')"
standout
class="col-2"
style="min-width: 190px"
dense
>
<div class="self-center full-width no-outline" tabindex="0">
{{ searchClone.Q_Date }}
</div>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy"> <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
<q-date v-model="searchClone.Q_Date" :options="optionsFn" mask="YYYY/MM/DD" @update:model-value="dateRangeHandler"></q-date> <q-date
v-model="searchClone.Q_Date"
:options="optionsFn"
mask="YYYY/MM/DD"
@update:model-value="dateRangeHandler"
></q-date>
</q-popup-proxy> </q-popup-proxy>
</q-field> </q-field>
</div> </div>
<div class="q-my-md" v-if="$q.platform.is.mobile&&searchClone.CarType!=3"> <div class="q-my-md" v-if="$q.platform.is.mobile && searchClone.CarType != 3">
<n-cascader class="no-border" @update:value="changeareaAirport" v-model:value="cascader.AirportValue" size="large" :placeholder="$t('hotel.area')" clearable check-strategy="all" :options="AirportList" value-field="ID" label-field="Name" remote cascade /> <n-cascader
class="no-border"
@update:value="changeareaAirport"
v-model:value="cascader.AirportValue"
size="large"
:placeholder="$t('hotel.area')"
clearable
check-strategy="all"
:options="AirportList"
value-field="ID"
label-field="Name"
remote
cascade
/>
</div> </div>
<div class="q-my-md row items-center "> <div class="q-my-md row items-center">
<q-input v-model="searchClone.Q_SPeopleNum" class="col q-mr-md" mask="#" reverse-fill-mask dense type="text" standout :label="$t('v102.CharteredBus.qishirenshu')" /> <q-input
<q-input v-model="searchClone.Q_EPeopleNum" class="col" dense mask="#" reverse-fill-mask ftype="text" standout :label="$t('v102.CharteredBus.jiezhirenshu')" /> v-model="searchClone.Q_SPeopleNum"
class="col q-mr-md"
mask="#"
reverse-fill-mask
dense
type="text"
standout
:label="$t('v102.CharteredBus.qishirenshu')"
/>
<q-input
v-model="searchClone.Q_EPeopleNum"
class="col"
dense
mask="#"
reverse-fill-mask
ftype="text"
standout
:label="$t('v102.CharteredBus.jiezhirenshu')"
/>
</div> </div>
<div class="row items-center"> <div class="row items-center">
<q-input v-model="searchClone.Q_SPrice" class="col q-mr-md" mask="#.##" reverse-fill-mask dense type="text" standout :label="$t('hotel.minPrice')" /> <q-input
<q-input v-model="searchClone.Q_EPrice" class="col" dense mask="#.##" reverse-fill-mask ftype="text" standout :label="$t('hotel.maxPrice')" /> v-model="searchClone.Q_SPrice"
class="col q-mr-md"
mask="#.##"
reverse-fill-mask
dense
type="text"
standout
:label="$t('hotel.minPrice')"
/>
<q-input
v-model="searchClone.Q_EPrice"
class="col"
dense
mask="#.##"
reverse-fill-mask
ftype="text"
standout
:label="$t('hotel.maxPrice')"
/>
</div> </div>
</q-card> </q-card>
</q-popup-proxy> </q-popup-proxy>
</q-btn> </q-btn>
<q-btn v-if="$q.platform.is.desktop" color="primary" unelevated :label="$t('query')" @click="setSearchHandler"/> <q-btn
<q-btn v-else color="primary" :round="$q.platform.is.mobile" :dense="$q.platform.is.mobile" :icon="$q.platform.is.mobile?'search':''" unelevated :label="$q.platform.is.mobile?'':$t('query')" @click="setSearchHandler"/> v-if="$q.platform.is.desktop"
<q-btn class="q-ml-sm" color="primary" unelevated :label="$t('v102.CharteredBus.td')" @click="goUrl"/> color="primary"
unelevated
:label="$t('query')"
@click="setSearchHandler"
/>
<q-btn
v-else
color="primary"
:round="$q.platform.is.mobile"
:dense="$q.platform.is.mobile"
:icon="$q.platform.is.mobile ? 'search' : ''"
unelevated
:label="$q.platform.is.mobile ? '' : $t('query')"
@click="setSearchHandler"
/>
<q-btn
class="q-ml-sm"
color="primary"
unelevated
:label="$t('v102.CharteredBus.td')"
@click="goUrl"
/>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import svgIcon from '../../global/svg-icon.vue' import svgIcon from "../../global/svg-icon.vue";
import { date } from 'quasar' import { date } from "quasar";
import { useQuasar } from 'quasar' import { useQuasar } from "quasar";
import { computed, ref, inject, reactive, toRefs } from 'vue' import { computed, ref, inject, reactive, toRefs } from "vue";
import { DirtionmaryHelper } from 'src/config/dictionary' import { DirtionmaryHelper } from "src/config/dictionary";
import CharteredBusService from 'src/api/CharteredBus' import CharteredBusService from "src/api/CharteredBus";
import { CascaderOption, NCascader } from 'naive-ui' import { CascaderOption, NCascader } from "naive-ui";
import { ApiResult } from 'src/@types/enumHelper' import { ApiResult } from "src/@types/enumHelper";
import message from 'src/utils/message' import message from "src/utils/message";
import { useHotel } from '../../../utils/hotelRate' import { useHotel } from "../../../utils/hotelRate";
import { useRouter } from 'vue-router' import { useRouter } from "vue-router";
export default { export default {
components: { svgIcon, NCascader }, components: { svgIcon, NCascader },
setup(props) { setup(props) {
const $q = useQuasar() const $q = useQuasar();
const $router = useRouter() const $router = useRouter();
const qDateProxy = ref(null) as any const qDateProxy = ref(null) as any;
const data = reactive({ const data = reactive({
CharteredBusType: useHotel.getCharteredBusType(), CharteredBusType: useHotel.getCharteredBusType(),
provinces: [] as any, provinces: [] as any,
cascader: { cascader: {
addressValue: null, addressValue: null,
AirportValue: null AirportValue: null,
} as any, } as any,
searchClone:{} as any, searchClone: {} as any,
canHide: false, canHide: false,
AirportList: [] as any AirportList: [] as any,
}) });
const search = inject(DirtionmaryHelper.TICKET_QUERY_PARAM) as any const search = inject(DirtionmaryHelper.TICKET_QUERY_PARAM) as any;
data.searchClone = JSON.parse(JSON.stringify(search.msg)) data.searchClone = JSON.parse(JSON.stringify(search.msg));
const methods = { const methods = {
goUrl(){ goUrl() {
$router.push({ path:`/vehicle/addEditVehicle`}) $router.push({ path: `/vehicle/addEditVehicle` });
}, },
getCarType(e:any){ getCarType(e: any) {
if(e){ if (e) {
methods.initAddress() methods.initAddress();
methods.initAirport() methods.initAirport();
}else{ } else {
data.provinces = [] as any data.provinces = [] as any;
data.AirportList = [] as any data.AirportList = [] as any;
data.cascader.addressValue = null data.cascader.addressValue = null;
data.cascader.AirportValue = null data.cascader.AirportValue = null;
data.searchClone.Q_Province = 0 data.searchClone.Q_Province = 0;
data.searchClone.Q_City = 0 data.searchClone.Q_City = 0;
data.searchClone.Q_AirportId = 0 data.searchClone.Q_AirportId = 0;
} }
}, },
// 获取城市地址 // 获取城市地址
initAddress() { initAddress() {
CharteredBusService.GetCarSingleAllPlace({ CharteredBusService.GetCarSingleAllPlace({
AirportId: data.searchClone.Q_AirportId, AirportId: data.searchClone.Q_AirportId,
Type: data.searchClone.CarType }) Type: data.searchClone.CarType,
.then(r => { })
.then((r) => {
if (r.data.resultCode == ApiResult.SUCCESS) { if (r.data.resultCode == ApiResult.SUCCESS) {
let newData = [] let newData = [];
r.data.data.forEach((x: any) => { r.data.data.forEach((x: any) => {
let newobj = { let newobj = {
ID: x.Country, ID: x.Country,
Name: x.CountryName, Name: x.CountryName,
isLeaf: false, isLeaf: false,
depth: 1, depth: 1,
children: [] as any children: [] as any,
} };
x.CityList.forEach((y: any) => { x.CityList.forEach((y: any) => {
let newobj2 = { let newobj2 = {
ID: y.City, ID: y.City,
Name: y.CityName, Name: y.CityName,
isLeaf: true, isLeaf: true,
depth: 2 depth: 2,
} };
newobj.children.push(newobj2) newobj.children.push(newobj2);
}) });
newData.push(JSON.parse(JSON.stringify(newobj))) newData.push(JSON.parse(JSON.stringify(newobj)));
}) });
data.provinces = newData data.provinces = newData;
} else { } else {
message.errorMsg(r.data.message) message.errorMsg(r.data.message);
} }
}) })
.catch(e => { .catch((e) => {
message.errorMsg(e.message) message.errorMsg(e.message);
}) });
}, },
// 获取机场 // 获取机场
initAirport(){ initAirport() {
CharteredBusService.GetCarSingleAllAirport({ CharteredBusService.GetCarSingleAllAirport({
CountryId: data.searchClone.Q_Country, CountryId: data.searchClone.Q_Country,
CityId: data.searchClone.Q_City, CityId: data.searchClone.Q_City,
Type: data.searchClone.CarType }) Type: data.searchClone.CarType,
.then(r => { })
.then((r) => {
if (r.data.resultCode == ApiResult.SUCCESS) { if (r.data.resultCode == ApiResult.SUCCESS) {
let newData = [] let newData = [];
r.data.data.forEach((x: any) => { r.data.data.forEach((x: any) => {
let newobj = { let newobj = {
ID: x.Country, ID: x.Country,
Name: x.CountryName, Name: x.CountryName,
isLeaf: false, isLeaf: false,
depth: 1, depth: 1,
children: [] as any children: [] as any,
} };
x.AirportList.forEach((y: any) => { x.AirportList.forEach((y: any) => {
let newobj2 = { let newobj2 = {
ID: y.AirportId, ID: y.AirportId,
Name: y.AirportName, Name: y.AirportName,
isLeaf: true, isLeaf: true,
depth: 2 depth: 2,
} };
newobj.children.push(newobj2) newobj.children.push(newobj2);
}) });
newData.push(JSON.parse(JSON.stringify(newobj))) newData.push(JSON.parse(JSON.stringify(newobj)));
}) });
data.AirportList = newData data.AirportList = newData;
} else { } else {
message.errorMsg(r.data.message) message.errorMsg(r.data.message);
} }
}) })
.catch(e => { .catch((e) => {
message.errorMsg(e.message) message.errorMsg(e.message);
}) });
}, },
changearea(e: number, option: any, pathValues: Array<any>) { changearea(e: number, option: any, pathValues: Array<any>) {
data.searchClone.Q_Province = 0 data.searchClone.Q_Province = 0;
data.searchClone.Q_City = 0 data.searchClone.Q_City = 0;
if (pathValues) { if (pathValues) {
if (pathValues.length > 0) { if (pathValues.length > 0) {
data.searchClone.Q_Province = pathValues[0].ID data.searchClone.Q_Province = pathValues[0].ID;
} }
if (pathValues.length > 1) { if (pathValues.length > 1) {
data.searchClone.Q_City = pathValues[1].ID data.searchClone.Q_City = pathValues[1].ID;
} }
} }
methods.initAirport() methods.initAirport();
}, },
changeareaAirport(e: number, option: any, pathValues: Array<any>) { changeareaAirport(e: number, option: any, pathValues: Array<any>) {
data.searchClone.Q_AirportId = 0 data.searchClone.Q_AirportId = 0;
if (pathValues) { if (pathValues) {
if (pathValues.length > 0) { if (pathValues.length > 0) {
// data.searchClone.Q_Province = pathValues[0].ID // data.searchClone.Q_Province = pathValues[0].ID
} }
if (pathValues.length > 1) { if (pathValues.length > 1) {
data.searchClone.Q_AirportId = pathValues[1].ID data.searchClone.Q_AirportId = pathValues[1].ID;
} }
} }
}, },
setSearchHandler(){ setSearchHandler() {
search.msg = JSON.parse(JSON.stringify(data.searchClone)) search.msg = JSON.parse(JSON.stringify(data.searchClone));
}, },
changeViewHandler(t:number){ changeViewHandler(t: number) {
data.searchClone.ViewType = t data.searchClone.ViewType = t;
methods.setSearchHandler() methods.setSearchHandler();
}, },
dateRangeHandler(e: any) { dateRangeHandler(e: any) {
if (qDateProxy.value) qDateProxy.value.hide() if (qDateProxy.value) qDateProxy.value.hide();
}, },
optionsFn(cd: any) { 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")
);
}, },
} };
const searchCnt = computed(() => { const searchCnt = computed(() => {
let setCnt = 0 let setCnt = 0;
if ($q.platform.is.mobile) { if ($q.platform.is.mobile) {
if (data.searchClone.CarType > 0) setCnt++ if (data.searchClone.CarType > 0) setCnt++;
if (data.searchClone.Q_Country > 0||data.searchClone.Q_City) setCnt++ if (data.searchClone.Q_Country > 0 || data.searchClone.Q_City) setCnt++;
if (data.searchClone.Q_AirportId > 0) setCnt++ if (data.searchClone.Q_AirportId > 0) setCnt++;
if (data.searchClone.Q_Date) setCnt++ if (data.searchClone.Q_Date) setCnt++;
} }
if (data.searchClone.Q_SPeopleNum>0) setCnt++ if (data.searchClone.Q_SPeopleNum > 0) setCnt++;
if (data.searchClone.Q_EPeopleNum>0) setCnt++ if (data.searchClone.Q_EPeopleNum > 0) setCnt++;
if (data.searchClone.Q_SPrice>0) setCnt++ if (data.searchClone.Q_SPrice > 0) setCnt++;
if (data.searchClone.Q_EPrice>0) setCnt++ if (data.searchClone.Q_EPrice > 0) setCnt++;
return setCnt return setCnt;
}) });
return { return {
qDateProxy, qDateProxy,
searchCnt, searchCnt,
...toRefs(data), ...toRefs(data),
...methods ...methods,
} };
} },
} };
</script> </script>
<style></style> <style></style>
src/i18n/ja-RB/index.ts
View file @ a02250e8
...@@ -1189,7 +1189,7 @@ export default { ...@@ -1189,7 +1189,7 @@ export default {
query_arrivalTime:'到着時間', query_arrivalTime:'到着時間',
query_stopCity:'ストップシティ', query_stopCity:'ストップシティ',
ph_flightTime:'離陸時間', ph_flightTime:'離陸時間',
} },
//#endregion //#endregion
//#region ending v1.0.3 //#region ending v1.0.3
v103: { v103: {
......
src/i18n/ko-HG/index.ts
View file @ a02250e8
...@@ -1189,7 +1189,7 @@ export default { ...@@ -1189,7 +1189,7 @@ export default {
query_arrivalTime:'도착 시간', query_arrivalTime:'도착 시간',
query_stopCity:'도시를 멈추다', query_stopCity:'도시를 멈추다',
ph_flightTime:'이륙 시간', ph_flightTime:'이륙 시간',
} },
//#endregion //#endregion
//#region ending v1.0.3 //#region ending v1.0.3
v103: { v103: {
......
src/pages/travel/components/OrderListHeader.vue
View file @ a02250e8
...@@ -7,116 +7,317 @@ ...@@ -7,116 +7,317 @@
http://dev.api.oytour.com/#/home/project/inside/api/detail?groupID=157&childGroupID=170&apiID=1010&projectName=REBORN&projectID=2 http://dev.api.oytour.com/#/home/project/inside/api/detail?groupID=157&childGroupID=170&apiID=1010&projectName=REBORN&projectID=2
--> -->
<div>
<div class="rounded-borders bg-white row items-center q-pa-md"> <div class="rounded-borders bg-white row items-center q-pa-md">
<div class="q-mr-md" :class="$q.platform.is.desktop ? '' : 'q-mb-md'"> <div class="q-mr-md" v-if="$q.platform.is.desktop">
<!-- <span>订单状态</span> --> <q-select
<q-select style="min-width: 190px;" unelevated dense :label="$t('travel.orderStatus')" standout v-model="search.OrderState" :options="orderStateList" option-value="Id" option-label="Name"></q-select> style="min-width: 190px"
unelevated
dense
:label="$t('travel.orderStatus')"
standout
v-model="search.OrderState"
:options="orderStateList"
option-value="Id"
option-label="Name"
></q-select>
</div> </div>
<!-- <div class=" q-pa-md"> <div class="q-mr-md" v-if="$q.platform.is.desktop">
<span>参团类型</span> <q-select
<q-select v-model="search.GroupType"></q-select> style="min-width: 190px"
unelevated
dense
:label="$t('travel.payStatus')"
standout
v-model="search.PayStatus"
:options="payStateList"
option-value="value"
option-label="label"
></q-select>
</div> </div>
<div class=" q-pa-md"> <q-field
<span>订单来源</span> v-if="$q.platform.is.desktop"
<q-select v-model="search.OrderSource"></q-select> stack-label
</div> --> :label="$t('travel.createDate')"
<div :class="$q.platform.is.desktop ? '' : 'q-mb-md'"> :clearable="true"
<q-select style="min-width: 190px;" unelevated dense :label="$t('travel.payStatus')" standout v-model="search.PayStatus" :options="payStateList" option-value="value" option-label="label"></q-select> standout
class="q-mr-md"
style="min-width: 190px"
dense
>
<div class="self-center full-width no-outline row justify-between" tabindex="0">
{{ dateRangeFormatC }}
<span @click="clearC" v-if="dateRangeFormatC"
><q-icon
name="close"
size="20px"
color="primary"
class="cursor-pointer"
v-ripple
v-close-popup
/></span>
</div> </div>
<q-field :class="$q.platform.is.desktop ? 'q-ml-lg' : 'q-mb-md'" stack-label :label="$t('travel.createDate')" :clearable="true" standout class=" col-2" style="min-width: 190px" dense>
<div class="self-center full-width no-outline row justify-between
" tabindex="0">{{ dateRangeFormatC }} <span @click="clearC" v-if="dateRangeFormatC"><q-icon name="close" size="20px" color="primary" class="cursor-pointer" v-ripple v-close-popup/></span></div>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy"> <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
<q-date v-model="dateRangeC" :options="optionsFn" range mask="YYYY/MM/DD" landscape <q-date
@range-end="dateRangeHandlerC"></q-date> v-model="dateRangeC"
:options="optionsFn"
range
mask="YYYY/MM/DD"
landscape
@range-end="dateRangeHandlerC"
></q-date>
</q-popup-proxy> </q-popup-proxy>
</q-field> </q-field>
<q-field :class="$q.platform.is.desktop ? 'q-ml-lg' : 'q-mb-md'" stack-label :label="$t('travel.startDate')" standout class=" col-2" style="min-width: 190px" dense> <q-field
<div class="self-center full-width no-outline" tabindex="0">{{ dateRangeFormat }}</div> v-if="$q.platform.is.desktop"
stack-label
:label="$t('travel.startDate')"
standout
class="col-2"
style="min-width: 190px"
dense
>
<div class="self-center full-width no-outline" tabindex="0">
{{ dateRangeFormat }}
</div>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy"> <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
<q-date v-model="dateRange" :options="optionsFn" range mask="YYYY/MM/DD" landscape <q-date
@range-end="dateRangeHandler"></q-date> v-model="dateRange"
:options="optionsFn"
range
mask="YYYY/MM/DD"
landscape
@range-end="dateRangeHandler"
></q-date>
</q-popup-proxy> </q-popup-proxy>
</q-field> </q-field>
<q-input class="q-mr-md q-ml-md" v-model="search.TCNUM" dense standout :label="$t('travel.id')"/>
<div class="col"></div> <div class="col"></div>
<q-btn color="primary" unelevated :label="$t('query')" @click="setQueryHandler"/> <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="$q.platform.is.mobile ? '5' : '1'"
/>
<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" v-if="$q.platform.is.mobile">
<q-select
style="min-width: 190px"
unelevated
dense
:label="$t('travel.orderStatus')"
standout
v-model="search.OrderState"
:options="orderStateList"
option-value="Id"
option-label="Name"
></q-select>
</div>
<div class="q-mb-md" v-if="$q.platform.is.mobile">
<q-select
style="min-width: 190px"
unelevated
dense
:label="$t('travel.payStatus')"
standout
v-model="search.PayStatus"
:options="payStateList"
option-value="value"
option-label="label"
></q-select>
</div>
<q-field
v-if="$q.platform.is.mobile"
stack-label
:label="$t('travel.createDate')"
:clearable="true"
standout
class="col-2 q-mb-md"
style="min-width: 190px"
dense
>
<div class="self-center full-width no-outline row justify-between" tabindex="0">
{{ dateRangeFormatC }}
<span @click="clearC" v-if="dateRangeFormatC"
><q-icon
name="close"
size="20px"
color="primary"
class="cursor-pointer"
v-ripple
v-close-popup
/></span>
</div>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
<q-date
v-model="dateRangeC"
:options="optionsFn"
range
mask="YYYY/MM/DD"
landscape
@range-end="dateRangeHandlerC"
></q-date>
</q-popup-proxy>
</q-field>
<q-field
v-if="$q.platform.is.mobile"
stack-label
:label="$t('travel.startDate')"
standout
class="col-2 q-mb-md"
style="min-width: 190px"
dense
>
<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-popup-proxy>
</q-field>
<q-input
v-model="search.TCNUM"
dense
standout
:label="$t('travel.id')"
/>
</q-card>
</q-popup-proxy>
</q-btn>
<q-btn
v-if="$q.platform.is.desktop"
color="primary"
unelevated
:label="$t('query')"
@click="setQueryHandler"
/>
<q-btn
v-else
color="primary"
:round="$q.platform.is.mobile"
:dense="$q.platform.is.mobile"
:icon="$q.platform.is.mobile ? 'search' : ''"
unelevated
:label="$q.platform.is.mobile ? '' : $t('query')"
@click="setQueryHandler"
/>
</div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { DirtionmaryHelper } from '../../../config/dictionary' import { DirtionmaryHelper } from "../../../config/dictionary";
import { defineComponent, inject, reactive, ref } from 'vue' import { defineComponent, inject, reactive, ref } from "vue";
import { date } from 'quasar' import { date } from "quasar";
import travelService from "../../../api/travel"; import travelService from "../../../api/travel";
import { ApiResult } from "../../../@types/enumHelper"; import { ApiResult } from "../../../@types/enumHelper";
import message from "../../../utils/message"; import message from "../../../utils/message";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import svgIcon from "../../../components/global/svg-icon.vue";
export default defineComponent({ export default defineComponent({
components: { svgIcon },
setup(props) { setup(props) {
const canHide = ref(false)
const { t } = useI18n(); const { t } = useI18n();
const orderStateList = ref([{Name: t("travel.all"), Id: 0}]) const orderStateList = ref([{ Name: t("travel.all"), Id: 0 }]);
const payStateList = reactive([{label: t("travel.all"), value: -1},{label: t("travel.notPay"), value: 1},{label: t("travel.payed"), value: 2},]) const payStateList = reactive([
const qDateProxy = ref(null) as any { label: t("travel.all"), value: -1 },
const realSearch = inject(DirtionmaryHelper.TRAVEL_ORDER_OBJ) as any { label: t("travel.notPay"), value: 1 },
const search = reactive(JSON.parse(JSON.stringify(realSearch))) { label: t("travel.payed"), value: 2 },
const dateRange = reactive({from: '', to: ''}) ]);
let month = new Date().getMonth() + 2 const qDateProxy = ref(null) as any;
let year = new Date().getFullYear() const realSearch = inject(DirtionmaryHelper.TRAVEL_ORDER_OBJ) as any;
if(month > 12) { const search = reactive(JSON.parse(JSON.stringify(realSearch)));
month = 1 const dateRange = reactive({ from: "", to: "" });
year++ let month = new Date().getMonth() + 2;
let year = new Date().getFullYear();
if (month > 12) {
month = 1;
year++;
} }
dateRange.to = date.formatDate(date.adjustDate(new Date(), { year,month: month,days: 1 }), 'YYYY/MM/DD') dateRange.to = date.formatDate(
dateRange.from = date.formatDate(date.adjustDate(new Date(), { days: 1 }), 'YYYY/MM/DD') date.adjustDate(new Date(), { year, month: month, days: 1 }),
const dateRangeFormat = ref(`${dateRange.from} - ${dateRange.to}`) "YYYY/MM/DD"
search.QStartDate = dateRange.from );
search.QEndDate = dateRange.to dateRange.from = date.formatDate(
const dateRangeC = reactive({from: '', to: ''}) date.adjustDate(new Date(), { days: 1 }),
"YYYY/MM/DD"
);
const dateRangeFormat = ref(`${dateRange.from} - ${dateRange.to}`);
search.QStartDate = dateRange.from;
search.QEndDate = dateRange.to;
const dateRangeC = reactive({ from: "", to: "" });
// dateRangeC.to = date.formatDate(date.adjustDate(new Date(), { year,month: month,days: 1}), 'YYYY/MM/DD') // dateRangeC.to = date.formatDate(date.adjustDate(new Date(), { year,month: month,days: 1}), 'YYYY/MM/DD')
// dateRangeC.from = date.formatDate(date.adjustDate(new Date(), { days: 1 }), 'YYYY/MM/DD') // dateRangeC.from = date.formatDate(date.adjustDate(new Date(), { days: 1 }), 'YYYY/MM/DD')
const dateRangeFormatC = ref('') const dateRangeFormatC = ref("");
search.CStartDate = dateRangeC.from search.CStartDate = dateRangeC.from;
search.CEndDate = dateRangeC.to search.CEndDate = dateRangeC.to;
const methods = { const methods = {
clearC() { clearC() {
dateRangeFormatC.value = '' dateRangeFormatC.value = "";
search.CStartDate = '' search.CStartDate = "";
search.CEndDate = '' search.CEndDate = "";
dateRangeC.from = "" dateRangeC.from = "";
dateRangeC.to = "" dateRangeC.to = "";
}, },
setQueryHandler(){ setQueryHandler() {
realSearch.QStartDate=search.QStartDate realSearch.QStartDate = search.QStartDate;
realSearch.QEndDate=search.QEndDate realSearch.QEndDate = search.QEndDate;
realSearch.CStartDate=search.CStartDate realSearch.CStartDate = search.CStartDate;
realSearch.CEndDate=search.CEndDate realSearch.CEndDate = search.CEndDate;
realSearch.TCNUM=search.TCNUM realSearch.TCNUM = search.TCNUM;
realSearch.OrderState=search.OrderState ? search.OrderState.Id : '' realSearch.OrderState = search.OrderState ? search.OrderState.Id : "";
realSearch.PayStatus=search.PayStatus ? search.PayStatus.value : -1 realSearch.PayStatus = search.PayStatus ? search.PayStatus.value : -1;
}, },
dateRangeHandler(e: any) { dateRangeHandler(e: any) {
search.QStartDate = `${e.from.year}/${e.from.month}/${e.from.day}` search.QStartDate = `${e.from.year}/${e.from.month}/${e.from.day}`;
search.QEndDate = `${e.to.year}/${e.to.month}/${e.to.day} ` search.QEndDate = `${e.to.year}/${e.to.month}/${e.to.day} `;
dateRangeFormat.value = `${search.QStartDate} - ${search.QEndDate} ` dateRangeFormat.value = `${search.QStartDate} - ${search.QEndDate} `;
if (qDateProxy.value) qDateProxy.value.hide() if (qDateProxy.value) qDateProxy.value.hide();
}, },
dateRangeHandlerC(e: any) { dateRangeHandlerC(e: any) {
search.CStartDate = `${e.from.year}/${e.from.month}/${e.from.day}` search.CStartDate = `${e.from.year}/${e.from.month}/${e.from.day}`;
search.CEndDate = `${e.to.year}/${e.to.month}/${e.to.day} ` search.CEndDate = `${e.to.year}/${e.to.month}/${e.to.day} `;
dateRangeFormatC.value = `${search.CStartDate} - ${search.CEndDate} ` dateRangeFormatC.value = `${search.CStartDate} - ${search.CEndDate} `;
if (qDateProxy.value) qDateProxy.value.hide() if (qDateProxy.value) qDateProxy.value.hide();
}, },
optionsFn(cd: any) { optionsFn(cd: any) {
return cd >= date.formatDate(date.adjustDate(new Date(), { year: 1970,month:1, days: 1 }), 'YYYY/MM/DD') return (
cd >=
date.formatDate(
date.adjustDate(new Date(), { year: 1970, month: 1, days: 1 }),
"YYYY/MM/DD"
)
);
}, },
initOrders() { initOrders() {
travelService travelService
.getOrderStateList({}) .getOrderStateList({})
.then((r) => { .then((r) => {
if (r.data.resultCode == ApiResult.SUCCESS) { if (r.data.resultCode == ApiResult.SUCCESS) {
orderStateList.value = orderStateList.value.concat(r.data.data) orderStateList.value = orderStateList.value.concat(r.data.data);
} else { } else {
message.errorMsg(r.data.message); message.errorMsg(r.data.message);
} }
...@@ -125,18 +326,21 @@ export default defineComponent({ ...@@ -125,18 +326,21 @@ export default defineComponent({
message.errorMsg(e.message); message.errorMsg(e.message);
}); });
}, },
} };
methods.initOrders() methods.initOrders();
return { return {
...methods, ...methods,
search, search,
orderStateList,payStateList,dateRange, orderStateList,
dateRangeFormat,dateRangeC, payStateList,
dateRangeFormatC dateRange,
dateRangeFormat,
} dateRangeC,
} dateRangeFormatC,
}) canHide,
};
},
});
</script> </script>
<style></style> <style></style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment