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>
<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"/>
<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-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"
/>
<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-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-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-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 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 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>
<div class="self-center full-width no-outline" tabindex="0">{{ searchClone.Q_Date }}</div>
<q-field
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-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-field>
</div>
<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 />
<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
/>
</div>
<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 v-model="searchClone.Q_EPeopleNum" class="col" dense mask="#" reverse-fill-mask ftype="text" standout :label="$t('v102.CharteredBus.jiezhirenshu')" />
<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
v-model="searchClone.Q_EPeopleNum"
class="col"
dense
mask="#"
reverse-fill-mask
ftype="text"
standout
:label="$t('v102.CharteredBus.jiezhirenshu')"
/>
</div>
<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 v-model="searchClone.Q_EPrice" class="col" dense mask="#.##" reverse-fill-mask ftype="text" standout :label="$t('hotel.maxPrice')" />
<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
v-model="searchClone.Q_EPrice"
class="col"
dense
mask="#.##"
reverse-fill-mask
ftype="text"
standout
:label="$t('hotel.maxPrice')"
/>
</div>
</q-card>
</q-popup-proxy>
</q-btn>
<q-btn v-if="$q.platform.is.desktop" 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"/>
<q-btn
v-if="$q.platform.is.desktop"
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>
</template>
<script lang="ts">
import svgIcon from '../../global/svg-icon.vue'
import { date } from 'quasar'
import { useQuasar } from 'quasar'
import { computed, ref, inject, reactive, toRefs } from 'vue'
import { DirtionmaryHelper } from 'src/config/dictionary'
import CharteredBusService from 'src/api/CharteredBus'
import { CascaderOption, NCascader } from 'naive-ui'
import { ApiResult } from 'src/@types/enumHelper'
import message from 'src/utils/message'
import { useHotel } from '../../../utils/hotelRate'
import { useRouter } from 'vue-router'
import svgIcon from "../../global/svg-icon.vue";
import { date } from "quasar";
import { useQuasar } from "quasar";
import { computed, ref, inject, reactive, toRefs } from "vue";
import { DirtionmaryHelper } from "src/config/dictionary";
import CharteredBusService from "src/api/CharteredBus";
import { CascaderOption, NCascader } from "naive-ui";
import { ApiResult } from "src/@types/enumHelper";
import message from "src/utils/message";
import { useHotel } from "../../../utils/hotelRate";
import { useRouter } from "vue-router";
export default {
components: { svgIcon, NCascader },
setup(props) {
const $q = useQuasar()
const $router = useRouter()
const qDateProxy = ref(null) as any
const $q = useQuasar();
const $router = useRouter();
const qDateProxy = ref(null) as any;
const data = reactive({
CharteredBusType: useHotel.getCharteredBusType(),
provinces: [] as any,
cascader: {
addressValue: null,
AirportValue: null
AirportValue: null,
} as any,
searchClone:{} as any,
searchClone: {} as any,
canHide: false,
AirportList: [] as any
})
const search = inject(DirtionmaryHelper.TICKET_QUERY_PARAM) as any
data.searchClone = JSON.parse(JSON.stringify(search.msg))
AirportList: [] as any,
});
const search = inject(DirtionmaryHelper.TICKET_QUERY_PARAM) as any;
data.searchClone = JSON.parse(JSON.stringify(search.msg));
const methods = {
goUrl(){
$router.push({ path:`/vehicle/addEditVehicle`})
goUrl() {
$router.push({ path: `/vehicle/addEditVehicle` });
},
getCarType(e:any){
if(e){
methods.initAddress()
methods.initAirport()
}else{
data.provinces = [] as any
data.AirportList = [] as any
data.cascader.addressValue = null
data.cascader.AirportValue = null
data.searchClone.Q_Province = 0
data.searchClone.Q_City = 0
data.searchClone.Q_AirportId = 0
getCarType(e: any) {
if (e) {
methods.initAddress();
methods.initAirport();
} else {
data.provinces = [] as any;
data.AirportList = [] as any;
data.cascader.addressValue = null;
data.cascader.AirportValue = null;
data.searchClone.Q_Province = 0;
data.searchClone.Q_City = 0;
data.searchClone.Q_AirportId = 0;
}
},
// 获取城市地址
initAddress() {
CharteredBusService.GetCarSingleAllPlace({
AirportId: data.searchClone.Q_AirportId,
Type: data.searchClone.CarType })
.then(r => {
Type: data.searchClone.CarType,
})
.then((r) => {
if (r.data.resultCode == ApiResult.SUCCESS) {
let newData = []
let newData = [];
r.data.data.forEach((x: any) => {
let newobj = {
ID: x.Country,
Name: x.CountryName,
isLeaf: false,
depth: 1,
children: [] as any
}
children: [] as any,
};
x.CityList.forEach((y: any) => {
let newobj2 = {
ID: y.City,
Name: y.CityName,
isLeaf: true,
depth: 2
}
newobj.children.push(newobj2)
})
newData.push(JSON.parse(JSON.stringify(newobj)))
})
data.provinces = newData
depth: 2,
};
newobj.children.push(newobj2);
});
newData.push(JSON.parse(JSON.stringify(newobj)));
});
data.provinces = newData;
} else {
message.errorMsg(r.data.message)
message.errorMsg(r.data.message);
}
})
.catch(e => {
message.errorMsg(e.message)
})
.catch((e) => {
message.errorMsg(e.message);
});
},
// 获取机场
initAirport(){
initAirport() {
CharteredBusService.GetCarSingleAllAirport({
CountryId: data.searchClone.Q_Country,
CityId: data.searchClone.Q_City,
Type: data.searchClone.CarType })
.then(r => {
Type: data.searchClone.CarType,
})
.then((r) => {
if (r.data.resultCode == ApiResult.SUCCESS) {
let newData = []
let newData = [];
r.data.data.forEach((x: any) => {
let newobj = {
ID: x.Country,
Name: x.CountryName,
isLeaf: false,
depth: 1,
children: [] as any
}
children: [] as any,
};
x.AirportList.forEach((y: any) => {
let newobj2 = {
ID: y.AirportId,
Name: y.AirportName,
isLeaf: true,
depth: 2
}
newobj.children.push(newobj2)
})
newData.push(JSON.parse(JSON.stringify(newobj)))
})
data.AirportList = newData
depth: 2,
};
newobj.children.push(newobj2);
});
newData.push(JSON.parse(JSON.stringify(newobj)));
});
data.AirportList = newData;
} else {
message.errorMsg(r.data.message)
message.errorMsg(r.data.message);
}
})
.catch(e => {
message.errorMsg(e.message)
})
.catch((e) => {
message.errorMsg(e.message);
});
},
changearea(e: number, option: any, pathValues: Array<any>) {
data.searchClone.Q_Province = 0
data.searchClone.Q_City = 0
data.searchClone.Q_Province = 0;
data.searchClone.Q_City = 0;
if (pathValues) {
if (pathValues.length > 0) {
data.searchClone.Q_Province = pathValues[0].ID
data.searchClone.Q_Province = pathValues[0].ID;
}
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>) {
data.searchClone.Q_AirportId = 0
data.searchClone.Q_AirportId = 0;
if (pathValues) {
if (pathValues.length > 0) {
// data.searchClone.Q_Province = pathValues[0].ID
}
if (pathValues.length > 1) {
data.searchClone.Q_AirportId = pathValues[1].ID
data.searchClone.Q_AirportId = pathValues[1].ID;
}
}
},
setSearchHandler(){
search.msg = JSON.parse(JSON.stringify(data.searchClone))
setSearchHandler() {
search.msg = JSON.parse(JSON.stringify(data.searchClone));
},
changeViewHandler(t:number){
data.searchClone.ViewType = t
methods.setSearchHandler()
changeViewHandler(t: number) {
data.searchClone.ViewType = t;
methods.setSearchHandler();
},
dateRangeHandler(e: any) {
if (qDateProxy.value) qDateProxy.value.hide()
if (qDateProxy.value) qDateProxy.value.hide();
},
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(() => {
let setCnt = 0
let setCnt = 0;
if ($q.platform.is.mobile) {
if (data.searchClone.CarType > 0) setCnt++
if (data.searchClone.Q_Country > 0||data.searchClone.Q_City) setCnt++
if (data.searchClone.Q_AirportId > 0) setCnt++
if (data.searchClone.Q_Date) setCnt++
if (data.searchClone.CarType > 0) setCnt++;
if (data.searchClone.Q_Country > 0 || data.searchClone.Q_City) setCnt++;
if (data.searchClone.Q_AirportId > 0) setCnt++;
if (data.searchClone.Q_Date) setCnt++;
}
if (data.searchClone.Q_SPeopleNum>0) setCnt++
if (data.searchClone.Q_EPeopleNum>0) setCnt++
if (data.searchClone.Q_SPrice>0) setCnt++
if (data.searchClone.Q_EPrice>0) setCnt++
return setCnt
})
if (data.searchClone.Q_SPeopleNum > 0) setCnt++;
if (data.searchClone.Q_EPeopleNum > 0) setCnt++;
if (data.searchClone.Q_SPrice > 0) setCnt++;
if (data.searchClone.Q_EPrice > 0) setCnt++;
return setCnt;
});
return {
qDateProxy,
searchCnt,
...toRefs(data),
...methods
}
}
}
...methods,
};
},
};
</script>
<style></style>
src/i18n/ja-RB/index.ts
View file @ a02250e8
......@@ -1189,7 +1189,7 @@ export default {
query_arrivalTime:'到着時間',
query_stopCity:'ストップシティ',
ph_flightTime:'離陸時間',
}
},
//#endregion
//#region ending v1.0.3
v103: {
......
src/i18n/ko-HG/index.ts
View file @ a02250e8
......@@ -1189,7 +1189,7 @@ export default {
query_arrivalTime:'도착 시간',
query_stopCity:'도시를 멈추다',
ph_flightTime:'이륙 시간',
}
},
//#endregion
//#region ending v1.0.3
v103: {
......
src/pages/travel/components/OrderListHeader.vue
View file @ a02250e8
......@@ -7,116 +7,317 @@
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="q-mr-md" :class="$q.platform.is.desktop ? '' : 'q-mb-md'">
<!-- <span>订单状态</span> -->
<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 class="q-mr-md" v-if="$q.platform.is.desktop">
<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-pa-md">
<span>参团类型</span>
<q-select v-model="search.GroupType"></q-select>
<div class="q-mr-md" v-if="$q.platform.is.desktop">
<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 class=" q-pa-md">
<span>订单来源</span>
<q-select v-model="search.OrderSource"></q-select>
</div> -->
<div :class="$q.platform.is.desktop ? '' : 'q-mb-md'">
<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>
<q-field
v-if="$q.platform.is.desktop"
stack-label
:label="$t('travel.createDate')"
:clearable="true"
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>
<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-date v-model="dateRangeC" :options="optionsFn" range mask="YYYY/MM/DD" landscape
@range-end="dateRangeHandlerC"></q-date>
<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 :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>
<div class="self-center full-width no-outline" tabindex="0">{{ dateRangeFormat }}</div>
<q-field
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-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>
<q-input class="q-mr-md q-ml-md" v-model="search.TCNUM" dense standout :label="$t('travel.id')"/>
<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>
</template>
<script lang="ts">
import { DirtionmaryHelper } from '../../../config/dictionary'
import { defineComponent, inject, reactive, ref } from 'vue'
import { date } from 'quasar'
import { DirtionmaryHelper } from "../../../config/dictionary";
import { defineComponent, inject, reactive, ref } from "vue";
import { date } from "quasar";
import travelService from "../../../api/travel";
import { ApiResult } from "../../../@types/enumHelper";
import message from "../../../utils/message";
import { useI18n } from "vue-i18n";
import svgIcon from "../../../components/global/svg-icon.vue";
export default defineComponent({
components: { svgIcon },
setup(props) {
const canHide = ref(false)
const { t } = useI18n();
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 qDateProxy = ref(null) as any
const realSearch = inject(DirtionmaryHelper.TRAVEL_ORDER_OBJ) as any
const search = reactive(JSON.parse(JSON.stringify(realSearch)))
const dateRange = reactive({from: '', to: ''})
let month = new Date().getMonth() + 2
let year = new Date().getFullYear()
if(month > 12) {
month = 1
year++
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 qDateProxy = ref(null) as any;
const realSearch = inject(DirtionmaryHelper.TRAVEL_ORDER_OBJ) as any;
const search = reactive(JSON.parse(JSON.stringify(realSearch)));
const dateRange = reactive({ from: "", to: "" });
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.from = date.formatDate(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: ''})
dateRange.to = date.formatDate(
date.adjustDate(new Date(), { year, month: month, days: 1 }),
"YYYY/MM/DD"
);
dateRange.from = date.formatDate(
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.from = date.formatDate(date.adjustDate(new Date(), { days: 1 }), 'YYYY/MM/DD')
const dateRangeFormatC = ref('')
search.CStartDate = dateRangeC.from
search.CEndDate = dateRangeC.to
const dateRangeFormatC = ref("");
search.CStartDate = dateRangeC.from;
search.CEndDate = dateRangeC.to;
const methods = {
clearC() {
dateRangeFormatC.value = ''
search.CStartDate = ''
search.CEndDate = ''
dateRangeC.from = ""
dateRangeC.to = ""
dateRangeFormatC.value = "";
search.CStartDate = "";
search.CEndDate = "";
dateRangeC.from = "";
dateRangeC.to = "";
},
setQueryHandler(){
realSearch.QStartDate=search.QStartDate
realSearch.QEndDate=search.QEndDate
realSearch.CStartDate=search.CStartDate
realSearch.CEndDate=search.CEndDate
realSearch.TCNUM=search.TCNUM
realSearch.OrderState=search.OrderState ? search.OrderState.Id : ''
realSearch.PayStatus=search.PayStatus ? search.PayStatus.value : -1
setQueryHandler() {
realSearch.QStartDate = search.QStartDate;
realSearch.QEndDate = search.QEndDate;
realSearch.CStartDate = search.CStartDate;
realSearch.CEndDate = search.CEndDate;
realSearch.TCNUM = search.TCNUM;
realSearch.OrderState = search.OrderState ? search.OrderState.Id : "";
realSearch.PayStatus = search.PayStatus ? search.PayStatus.value : -1;
},
dateRangeHandler(e: any) {
search.QStartDate = `${e.from.year}/${e.from.month}/${e.from.day}`
search.QEndDate = `${e.to.year}/${e.to.month}/${e.to.day} `
dateRangeFormat.value = `${search.QStartDate} - ${search.QEndDate} `
if (qDateProxy.value) qDateProxy.value.hide()
search.QStartDate = `${e.from.year}/${e.from.month}/${e.from.day}`;
search.QEndDate = `${e.to.year}/${e.to.month}/${e.to.day} `;
dateRangeFormat.value = `${search.QStartDate} - ${search.QEndDate} `;
if (qDateProxy.value) qDateProxy.value.hide();
},
dateRangeHandlerC(e: any) {
search.CStartDate = `${e.from.year}/${e.from.month}/${e.from.day}`
search.CEndDate = `${e.to.year}/${e.to.month}/${e.to.day} `
dateRangeFormatC.value = `${search.CStartDate} - ${search.CEndDate} `
if (qDateProxy.value) qDateProxy.value.hide()
search.CStartDate = `${e.from.year}/${e.from.month}/${e.from.day}`;
search.CEndDate = `${e.to.year}/${e.to.month}/${e.to.day} `;
dateRangeFormatC.value = `${search.CStartDate} - ${search.CEndDate} `;
if (qDateProxy.value) qDateProxy.value.hide();
},
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() {
travelService
.getOrderStateList({})
.then((r) => {
if (r.data.resultCode == ApiResult.SUCCESS) {
orderStateList.value = orderStateList.value.concat(r.data.data)
orderStateList.value = orderStateList.value.concat(r.data.data);
} else {
message.errorMsg(r.data.message);
}
......@@ -125,18 +326,21 @@ export default defineComponent({
message.errorMsg(e.message);
});
},
}
methods.initOrders()
};
methods.initOrders();
return {
...methods,
search,
orderStateList,payStateList,dateRange,
dateRangeFormat,dateRangeC,
dateRangeFormatC
}
}
})
orderStateList,
payStateList,
dateRange,
dateRangeFormat,
dateRangeC,
dateRangeFormatC,
canHide,
};
},
});
</script>
<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