parent
e1ce3493ff
commit
96effa7338
@ -0,0 +1,255 @@
|
|||||||
|
<template>
|
||||||
|
<div class="car-use-return-large-style">
|
||||||
|
<div class="search-div">
|
||||||
|
<a-input placeholder="请输入车辆名称或车牌号搜索" v-model="carInfo" style="width: 210px"/>
|
||||||
|
<span style="margin-left: 0.5rem">申请日期</span>
|
||||||
|
<a-range-picker :locale="locale"
|
||||||
|
:getCalendarContainer="getCalendarContainer()"
|
||||||
|
@change="onDateChange"></a-range-picker>
|
||||||
|
<span style="margin-left: 0.5rem">用车时间</span>
|
||||||
|
<a-range-picker class="time-picker-style"
|
||||||
|
:getCalendarContainer="getCalendarContainer()"
|
||||||
|
:show-time="{ format: 'HH:mm' }"
|
||||||
|
format="YYYY-MM-DD HH:mm"
|
||||||
|
:placeholder="['开始时间', '结束时间']"
|
||||||
|
@change="onTimeChange"
|
||||||
|
@ok="onTimeOk"
|
||||||
|
></a-range-picker>
|
||||||
|
<a-icon type="search" :style="{ fontSize: '16px', color: '#31A8FA',marginLeft:'0.5rem' }" @click="search"/>
|
||||||
|
</div>
|
||||||
|
<div class="content-box-style">
|
||||||
|
<div class="change-page-type-style">
|
||||||
|
<div class="button-style use-style" @click="changePageType(1)">
|
||||||
|
<span>待领用</span>
|
||||||
|
<span style="margin-top: 0.5rem">{{useNum}}</span>
|
||||||
|
<div v-if="pageType === 1" class="use-button-icon-style"></div>
|
||||||
|
</div>
|
||||||
|
<div class="button-style return-style" @click="changePageType(2)">
|
||||||
|
<span>待归还</span>
|
||||||
|
<span style="margin-top: 0.5rem">{{returnNum}}</span>
|
||||||
|
<div v-if="pageType === 2" class="return-button-icon-style"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="data-list-box">
|
||||||
|
<a-spin :spinning="isLoading">
|
||||||
|
<vue-scroll :ops="listScroll" style="height:16rem">
|
||||||
|
<div class="data-list-style">
|
||||||
|
<InfoRow v-for="item,index in dataList" :key="index"
|
||||||
|
:pageType="pageType"
|
||||||
|
:info="item"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</vue-scroll>
|
||||||
|
</a-spin>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
/*
|
||||||
|
* 车辆领用归还
|
||||||
|
* */
|
||||||
|
import {Input, DatePicker, Icon, Spin} from 'ant-design-vue';
|
||||||
|
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
|
||||||
|
import moment from 'moment';
|
||||||
|
import InterConfig from '../officeCar/interConfig';
|
||||||
|
import InfoRow from './infoRow.vue';
|
||||||
|
export default{
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
isLoading:false,
|
||||||
|
listScroll: this.StaticParams.scrollOption,
|
||||||
|
locale,
|
||||||
|
pageType: 1,//1 待领用 2 待归还
|
||||||
|
carInfo: "",
|
||||||
|
//申请起止日期
|
||||||
|
startDate: "",
|
||||||
|
endDate: "",
|
||||||
|
//用车时间
|
||||||
|
startTime: "",
|
||||||
|
endTime: "",
|
||||||
|
useNum: 0,//待领用数量
|
||||||
|
returnNum: 0,//待归还数量
|
||||||
|
dataList: [],
|
||||||
|
pageNumber: 1,
|
||||||
|
pageSize: 10000,
|
||||||
|
totalPage: 0,
|
||||||
|
totolNum: 0,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created(){
|
||||||
|
this.getUseDataList();
|
||||||
|
this.getReturnDataList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changePageType: function (type) {
|
||||||
|
this.pageType = type;
|
||||||
|
this.getUseDataList();
|
||||||
|
this.getReturnDataList();
|
||||||
|
},
|
||||||
|
search: function () {
|
||||||
|
console.log("search")
|
||||||
|
console.log("carInfo:", this.carInfo)
|
||||||
|
console.log("起止日期:", this.startDate + '--' + this.endDate)
|
||||||
|
console.log("起止时间:", this.startTime + '--' + this.endTime)
|
||||||
|
},
|
||||||
|
getCalendarContainer: function () {
|
||||||
|
return triggerNode => triggerNode.parentNode;
|
||||||
|
},
|
||||||
|
onDateChange(value, dateString) {
|
||||||
|
this.startDate = dateString[0];
|
||||||
|
this.endDate = dateString[1];
|
||||||
|
},
|
||||||
|
onTimeChange: function (value, dateString) {
|
||||||
|
this.startTime = dateString[0];
|
||||||
|
this.endTime = dateString[1];
|
||||||
|
},
|
||||||
|
onTimeOk: function (value) {
|
||||||
|
console.log(value)
|
||||||
|
},
|
||||||
|
getUseDataList: function () {
|
||||||
|
let param = {
|
||||||
|
org_id: this.BaseConfig.person_info_my.bureau_id,
|
||||||
|
person_id: this.BaseConfig.userInfo.person_id,
|
||||||
|
page_number: this.pageNumber,
|
||||||
|
page_size: this.pageSize,
|
||||||
|
data_type: 1
|
||||||
|
}
|
||||||
|
this.isLoading = true;
|
||||||
|
this.InterfaceConfig.callInterface([{
|
||||||
|
url: InterConfig.listSuccessApplyCar.url,
|
||||||
|
params: param,
|
||||||
|
method: InterConfig.listSuccessApplyCar.method,
|
||||||
|
isTestLogin: InterConfig.listSuccessApplyCar.isTestLogin,
|
||||||
|
}], (result) => {
|
||||||
|
this.isLoading = false;
|
||||||
|
let resData = result[0].data;
|
||||||
|
if (resData.code === 2000) {
|
||||||
|
this.useNum = resData.data.list.length;
|
||||||
|
if (this.pageType === 1) {
|
||||||
|
this.dataList = resData.data.list;
|
||||||
|
this.totolNum = resData.data.total_row;
|
||||||
|
this.totalPage = resData.data.total_page;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getReturnDataList: function () {
|
||||||
|
let param = {
|
||||||
|
org_id: this.BaseConfig.person_info_my.bureau_id,
|
||||||
|
person_id: this.BaseConfig.userInfo.person_id,
|
||||||
|
page_number: this.pageNumber,
|
||||||
|
page_size: this.pageSize,
|
||||||
|
data_type: 2
|
||||||
|
}
|
||||||
|
this.isLoading = true;
|
||||||
|
this.InterfaceConfig.callInterface([{
|
||||||
|
url: InterConfig.listSuccessApplyCar.url,
|
||||||
|
params: param,
|
||||||
|
method: InterConfig.listSuccessApplyCar.method,
|
||||||
|
isTestLogin: InterConfig.listSuccessApplyCar.isTestLogin,
|
||||||
|
}], (result) => {
|
||||||
|
this.isLoading = false;
|
||||||
|
let resData = result[0].data;
|
||||||
|
if (resData.code === 2000) {
|
||||||
|
this.returnNum = resData.data.list.length;
|
||||||
|
if (this.pageType === 2) {
|
||||||
|
this.dataList = resData.data.list;
|
||||||
|
this.totolNum = resData.data.total_row;
|
||||||
|
this.totalPage = resData.data.total_page;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
AInput: Input,
|
||||||
|
ADatePicker: DatePicker,
|
||||||
|
ARangePicker: DatePicker.RangePicker,
|
||||||
|
AIcon: Icon,
|
||||||
|
InfoRow,
|
||||||
|
ASpin: Spin
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.car-use-return-large-style {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 20rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.search-div {
|
||||||
|
width: 100%;
|
||||||
|
height: 3rem;
|
||||||
|
line-height: 3rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.5rem;
|
||||||
|
.ant-calendar-picker {
|
||||||
|
width: 12rem !important;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
.time-picker-style {
|
||||||
|
width: 18rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content-box-style {
|
||||||
|
width: 100%;
|
||||||
|
height: 16rem;
|
||||||
|
display: flex;
|
||||||
|
.change-page-type-style {
|
||||||
|
width: 6rem;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
.button-style {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(50% - 10px);
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 20px;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
.use-button-icon-style {
|
||||||
|
position: absolute;
|
||||||
|
left: calc(100% + 5px);
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-top: 10px solid transparent;
|
||||||
|
border-left: 15px solid #ffd54f;
|
||||||
|
border-bottom: 10px solid transparent;
|
||||||
|
}
|
||||||
|
.return-button-icon-style {
|
||||||
|
position: absolute;
|
||||||
|
left: calc(100% + 5px);
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-top: 10px solid transparent;
|
||||||
|
border-left: 15px solid #9fa8da;
|
||||||
|
border-bottom: 10px solid transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.use-style {
|
||||||
|
background-color: #ffd54f;
|
||||||
|
}
|
||||||
|
.return-style {
|
||||||
|
background-color: #9fa8da;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.data-list-box {
|
||||||
|
width: calc(100% - 6rem);
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
.data-list-style {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,169 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="'car-use-return-row-info-style ' + (pageType === 1?'use-car-back':'return-car-back')"
|
||||||
|
@mouseenter="showButton" @mouseleave="hiddenButton"
|
||||||
|
>
|
||||||
|
<div class="user-image-box">
|
||||||
|
<Portrait :personId="info.user_person_id"/>
|
||||||
|
<span style="margin-top: 0.5rem">{{userName}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="apply-info-box">
|
||||||
|
<div class="time-row-style">{{info.send_apply_time}}</div>
|
||||||
|
<div class="car-info-style">
|
||||||
|
<div class="row-info-style">
|
||||||
|
{{info.car_name}}
|
||||||
|
<span style="margin-left: 0.5rem;padding: 0.2rem;background-color: #31a8fa;color: white">{{info.car_no}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="row-info-style">
|
||||||
|
<a-icon type="history"/>
|
||||||
|
{{info.begin_datetime + '--' + info.end_datetime}}
|
||||||
|
</div>
|
||||||
|
<div class="row-info-style">
|
||||||
|
<a-icon type="environment" />
|
||||||
|
{{info.departure_place}}
|
||||||
|
</div>
|
||||||
|
<div class="row-info-style">
|
||||||
|
<a-icon type="environment" />
|
||||||
|
{{info.destination_place}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="button-div" v-if="showButtonFlag">
|
||||||
|
<div v-if="pageType === 1" style="width: 100%;height: 100%">
|
||||||
|
<div class="button-span" style="background-color: #31a8fa;color: white">
|
||||||
|
领用
|
||||||
|
</div>
|
||||||
|
<div class="button-span" style="background-color: red;color: white">
|
||||||
|
取消
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="pageType === 2" style="width: 100%;height: 100%">
|
||||||
|
<div class="button-span button-row-span" style="background-color: #ff9800;color: white">
|
||||||
|
还车
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import Portrait from '../common/portrait.vue';
|
||||||
|
import {Icon} from 'ant-design-vue';
|
||||||
|
export default{
|
||||||
|
props: {
|
||||||
|
pageType: {
|
||||||
|
type: Number
|
||||||
|
},
|
||||||
|
info: {
|
||||||
|
type: Object
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
userName: "",
|
||||||
|
showButtonFlag: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created(){
|
||||||
|
let userName = this.$props.info.user_person_name;
|
||||||
|
if (userName && userName.length > 3) {
|
||||||
|
userName = userName.substring(userName.length - 3);
|
||||||
|
}
|
||||||
|
this.userName = userName;
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
showButton:function () {
|
||||||
|
this.showButtonFlag = true;
|
||||||
|
},
|
||||||
|
hiddenButton:function () {
|
||||||
|
this.showButtonFlag = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
Portrait,
|
||||||
|
AIcon: Icon
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.car-use-return-row-info-style {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
color: #7F7F7F;
|
||||||
|
padding: 0.5rem;
|
||||||
|
position: relative;
|
||||||
|
.user-image-box {
|
||||||
|
width: 80px;
|
||||||
|
height: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.apply-info-box {
|
||||||
|
width: calc(100% - 50px);
|
||||||
|
height: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
.time-row-style {
|
||||||
|
width: 100%;
|
||||||
|
height: 2rem;
|
||||||
|
line-height: 2rem;
|
||||||
|
}
|
||||||
|
.car-info-style {
|
||||||
|
width: 100%;
|
||||||
|
height: 6rem;
|
||||||
|
background-color: white;
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0.2rem;
|
||||||
|
.row-info-style {
|
||||||
|
width: 100%;
|
||||||
|
height: 1.5rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.button-div {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
/* padding: 1rem 0.5rem;*/
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
opacity: 0.8;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
.button-span {
|
||||||
|
width: 100%;
|
||||||
|
height: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: 2px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
.button-row-span{
|
||||||
|
height: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.use-car-back {
|
||||||
|
background-color: #fff8e1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.return-car-back {
|
||||||
|
background-color: #e8eaf6;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue