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