parent
d91e2b4d57
commit
ab8a6d5adb
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div class="office-car-data-serach-dom">
|
||||
<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>
|
||||
</template>
|
||||
<script>
|
||||
/*
|
||||
* 搜索条件组件
|
||||
* */
|
||||
import {Input, DatePicker, Icon, Spin, Empty, Modal, Checkbox} from 'ant-design-vue';
|
||||
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
|
||||
import moment from 'moment';
|
||||
export default{
|
||||
data(){
|
||||
return {
|
||||
locale,
|
||||
carInfo: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
startTime: "",
|
||||
endTime: ""
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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)
|
||||
},
|
||||
search:function () {
|
||||
this.$emit("toSearch",{
|
||||
carInfo:this.carInfo,
|
||||
startDate:this.startDate,
|
||||
endDate:this.endDate,
|
||||
startTime:this.startTime,
|
||||
endTime:this.endTime,
|
||||
})
|
||||
}
|
||||
},
|
||||
components: {
|
||||
AInput: Input,
|
||||
ADatePicker: DatePicker,
|
||||
ARangePicker: DatePicker.RangePicker,
|
||||
AIcon: Icon,
|
||||
ASpin: Spin,
|
||||
AEmpty: Empty,
|
||||
AModal: Modal,
|
||||
ACheckbox: Checkbox
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.office-car-data-serach-dom {
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div class="status-search-style">
|
||||
<span>审批状态</span>
|
||||
<a-select :value="checkStatus" style="width: 100px"
|
||||
@change="checkChange">
|
||||
<a-select-option v-for="item in checkStatusArr" :key="item.id">
|
||||
{{ item.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<span style="margin-left: 0.5rem">用车状态</span>
|
||||
<a-select :value="useStatus" style="width: 100px" @change="useChange">
|
||||
<a-select-option v-for="item in useStatusArr" :key="item.id">
|
||||
{{ item.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
/*
|
||||
* 审批状态 用车状态搜索组件
|
||||
* */
|
||||
import {Select} from 'ant-design-vue';
|
||||
export default{
|
||||
data(){
|
||||
return {
|
||||
checkStatusArr: [
|
||||
{id: "", name: "全部"},
|
||||
{id: 0, name: "待审批"},
|
||||
{id: 1, name: "已通过"},
|
||||
{id: -1, name: "未通过"},
|
||||
{id: 11, name: "已撤回"},
|
||||
],
|
||||
checkStatus: "",
|
||||
useStatusArr: [
|
||||
{id: "", name: "全部"},
|
||||
{id: 0, name: "待领车"},
|
||||
{id: 1, name: "待还车"},
|
||||
{id: 2, name: "还车待审批"},
|
||||
{id: 3, name: "已还车"},
|
||||
{id: -1, name: "已取消"},
|
||||
],
|
||||
useStatus: "",
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//审批状态改变
|
||||
checkChange: function (value) {
|
||||
this.checkStatus = value;
|
||||
this.$emit("statusChange",{checkStatus:this.checkStatus,useStatus:this.useStatus})
|
||||
},
|
||||
//用车状态改变
|
||||
useChange: function (value) {
|
||||
this.useStatus = value;
|
||||
this.$emit("statusChange",{checkStatus:this.checkStatus,useStatus:this.useStatus})
|
||||
},
|
||||
},
|
||||
components: {
|
||||
ASelect: Select,
|
||||
ASelectOption: Select.Option,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.status-search-style {
|
||||
width: auto;
|
||||
display: flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.ant-select {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="office-car-history-style">
|
||||
<DateChoose @flushDate="flushDate" :begin_date="begin_date" :end_date="end_date" :callInter="true"></DateChoose>
|
||||
<div class="status-search-box">
|
||||
<StatusSearch @statusChange="statusChange"/>
|
||||
</div>
|
||||
<div class="data-list-content-style">
|
||||
<a-spin :spinning="isLoading">
|
||||
<vue-scroll :ops="listScroll" style="height:25rem">
|
||||
<div v-if="!isLoading && dataList.length > 0" class="data-list-style">
|
||||
<InfoRow v-for="item,index in dataList" :key="'info-'+ index" :info="item"/>
|
||||
</div>
|
||||
<div v-if="!isLoading && dataList.length === 0" class="data-list-style">
|
||||
<a-empty></a-empty>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
</a-spin>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import InterConfig from '../officeCar/interConfig';
|
||||
import DateChoose from '../common/dateChoose.vue';
|
||||
import StatusSearch from './carStatusSearch.vue';
|
||||
import moment from 'moment';
|
||||
import InfoRow from '../carUseReturn/infoRow.vue';
|
||||
import {Empty, Spin} from 'ant-design-vue';
|
||||
export default{
|
||||
data(){
|
||||
return {
|
||||
listScroll: this.StaticParams.scrollOption,
|
||||
isLoading: false,
|
||||
begin_date: null,
|
||||
end_date: null,
|
||||
checkStatus: "",
|
||||
useStatus: "",
|
||||
pageNumber: 1,
|
||||
pageSize: 100000,
|
||||
totalPage: 0,
|
||||
totolNum: 0,
|
||||
dataList: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
flushDate: function (param) {
|
||||
this.begin_date = moment(param.beginDate).format("YYYY-MM-DD");
|
||||
this.end_date = moment(param.endDate).format("YYYY-MM-DD");
|
||||
this.getDataList();
|
||||
},
|
||||
//状态改变
|
||||
statusChange: function (param) {
|
||||
this.checkStatus = param.checkStatus;
|
||||
this.useStatus = param.useStatus;
|
||||
this.getDataList();
|
||||
},
|
||||
//获取数据列表
|
||||
getDataList: 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,
|
||||
apply_begin_time: this.begin_date,
|
||||
apply_end_time: this.end_date,
|
||||
apply_check_flag: this.checkStatus,
|
||||
apply_car_status: this.useStatus,
|
||||
}
|
||||
this.isLoading = true;
|
||||
this.InterfaceConfig.callInterface([{
|
||||
url: InterConfig.listAllApplyCar.url,
|
||||
params: param,
|
||||
method: InterConfig.listAllApplyCar.method,
|
||||
isTestLogin: InterConfig.listAllApplyCar.isTestLogin,
|
||||
}], (result) => {
|
||||
this.isLoading = false;
|
||||
let resData = result[0].data;
|
||||
if (resData.code === 2000) {
|
||||
this.dataList = resData.data.list;
|
||||
this.totalPage = resData.data.total_page;
|
||||
this.totolNum = resData.data.total_row;
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
components: {
|
||||
DateChoose,
|
||||
StatusSearch,
|
||||
InfoRow,
|
||||
AEmpty: Empty,
|
||||
ASpin: Spin
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.office-car-history-style {
|
||||
width: 100%;
|
||||
min-height: 20rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 0.5rem;
|
||||
.status-search-box {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.data-list-content-style {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
.data-list-style {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,314 @@
|
||||
<template>
|
||||
<div class="office-car-history-large-style">
|
||||
<SearchDom @toSearch="toSearch"/>
|
||||
<div class="status-search-box-style">
|
||||
<StatusSearch @statusChange="statusChange"/>
|
||||
</div>
|
||||
<div class="apply-content-div">
|
||||
<a-spin :spinning="isLoading">
|
||||
<vue-scroll :ops="listScroll" style="height:25rem" v-if="!isLoading && dataList.length > 0">
|
||||
<div class="data-list-div">
|
||||
<div class="data-row-div" v-for="item,index in dataList" :key="'info-'+ index">
|
||||
<InfoRow :info="item"/>
|
||||
</div>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
<div class="no-data-div" v-if="!isLoading && dataList.length == 0">
|
||||
<a-empty></a-empty>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
<div class="page-dom-div">
|
||||
<a-icon type="left-circle" title="上一页"
|
||||
:class="'page-icon-dom '+ (pageNumber == 1?'cannot-click':'can-click')"
|
||||
v-on:click="changePage('previous')"/>
|
||||
<span class="total-num-span">共{{totolNum}}条</span>
|
||||
<a-icon type="right-circle" title="下一页"
|
||||
:class="'page-icon-dom '+ (pageNumber == totalPage?'cannot-click':'can-click')"
|
||||
v-on:click="changePage('next')"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import SearchDom from '../carUseReturn/searchDom.vue';
|
||||
import StatusSearch from './carStatusSearch.vue';
|
||||
import InterConfig from '../officeCar/interConfig';
|
||||
import InfoRow from '../carUseReturn/infoRow.vue';
|
||||
import {Spin, Empty, Icon} from 'ant-design-vue';
|
||||
export default{
|
||||
data(){
|
||||
return {
|
||||
pageNumber: 1,
|
||||
pageSize: 8,
|
||||
totalPage: 0,
|
||||
totolNum: 0,
|
||||
listScroll: this.StaticParams.scrollOption,
|
||||
isLoading: false,
|
||||
carInfo: "",
|
||||
//申请起止日期
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
//用车时间
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
checkStatus: "",//审核状态
|
||||
useStatus: "",//使用状态
|
||||
dataList:[],
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getDataList();
|
||||
},
|
||||
methods: {
|
||||
toSearch: function (param) {
|
||||
this.carInfo = param.carInfo;
|
||||
this.startDate = param.startDate;
|
||||
this.endDate = param.endDate;
|
||||
this.startTime = param.startTime;
|
||||
this.endTime = param.endTime;
|
||||
this.getDataList();
|
||||
},
|
||||
statusChange: function (param) {
|
||||
this.checkStatus = param.checkStatus;
|
||||
this.useStatus = param.useStatus;
|
||||
},
|
||||
getDataList: 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,
|
||||
car_info: this.carInfo,
|
||||
apply_begin_time: this.startDate,
|
||||
apply_end_time: this.endDate,
|
||||
use_begin_time: this.startTime,
|
||||
use_end_time: this.endTime,
|
||||
apply_check_flag: this.checkStatus,
|
||||
apply_car_status: this.useStatus,
|
||||
}
|
||||
this.isLoading = true;
|
||||
this.InterfaceConfig.callInterface([{
|
||||
url: InterConfig.listAllApplyCar.url,
|
||||
params: param,
|
||||
method: InterConfig.listAllApplyCar.method,
|
||||
isTestLogin: InterConfig.listAllApplyCar.isTestLogin,
|
||||
}], (result) => {
|
||||
this.isLoading = false;
|
||||
let resData = result[0].data;
|
||||
if (resData.code === 2000) {
|
||||
this.dataList = resData.data.list;
|
||||
this.totalPage = resData.data.total_page;
|
||||
this.totolNum = resData.data.total_row;
|
||||
}
|
||||
})
|
||||
},
|
||||
changePage:function (type) {
|
||||
if (type == 'previous') {
|
||||
if (this.pageNumber == 1) {
|
||||
return;
|
||||
}
|
||||
this.pageNumber--;
|
||||
} else if (type == 'next') {
|
||||
if (this.pageNumber == this.totalPage) {
|
||||
return;
|
||||
}
|
||||
this.pageNumber++;
|
||||
}
|
||||
this.getDataList();
|
||||
}
|
||||
},
|
||||
components: {
|
||||
SearchDom,
|
||||
StatusSearch,
|
||||
ASpin: Spin,
|
||||
AEmpty: Empty,
|
||||
AIcon: Icon,
|
||||
InfoRow
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.office-car-history-large-style {
|
||||
width: 100%;
|
||||
min-height: 20rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.status-search-box-style {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.apply-content-div {
|
||||
width: 100%;
|
||||
min-height: 15rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.ant-spin-nested-loading {
|
||||
width: 100% !important;
|
||||
}
|
||||
.data-list-div {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
.data-row-div {
|
||||
width: 50%;
|
||||
min-height: 5rem;
|
||||
display: flex;
|
||||
/* flex-direction: column;*/
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
position: relative;
|
||||
background-color: #f2f2f2;
|
||||
margin-top: 0.5rem;
|
||||
color: #7F7F7F;
|
||||
padding: 0.5rem;
|
||||
.user-image-box {
|
||||
width: 80px;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.apply-info-box {
|
||||
width: calc(100% - 80px);
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
.time-row-style {
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
.meeting-info-style {
|
||||
width: 100%;
|
||||
height: 6rem;
|
||||
background-color: white;
|
||||
margin-top: 0.2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.2rem;
|
||||
.top-info-row-div {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-bottom: 0.2rem;
|
||||
.room-type-div {
|
||||
border: 1px solid #31a8fa;
|
||||
color: #31a8fa;
|
||||
padding: 0 0.2rem;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.default-span-div {
|
||||
width: calc(100% - 10rem);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
.info-row-div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
margin-top: 0.5rem;
|
||||
overflow-y: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
.room-other-info-div {
|
||||
padding: 0 0.5rem;
|
||||
/*background-color: #f59a23;*/
|
||||
border-radius: 10px;
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.no-data-tips {
|
||||
background-color: #f2f2f2;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.meeting-status-flag-style {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
border: 1px solid #cccccc;
|
||||
padding: 5px 10px;
|
||||
transform: rotate(7deg);
|
||||
-ms-transform: rotate(7deg); /* IE 9 */
|
||||
-moz-transform: rotate(7deg); /* Firefox */
|
||||
-webkit-transform: rotate(7deg); /* Safari 和 Chrome */
|
||||
-o-transform: rotate(7deg); /* Opera */
|
||||
}
|
||||
.not-start {
|
||||
border: 1px solid #ec8692;
|
||||
color: #ec8692;
|
||||
}
|
||||
.is-meeting {
|
||||
border: 1px solid #f3d7b1;
|
||||
color: #f3d7b1;
|
||||
}
|
||||
.is-delayed {
|
||||
border: 1px solid #a64bfb;
|
||||
color: #a64bfb;
|
||||
}
|
||||
.button-div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -0.5rem;
|
||||
bottom: 0;
|
||||
/* padding: 1rem 0.5rem;*/
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0.8;
|
||||
flex-wrap: nowrap;
|
||||
.button-span {
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
margin-left: 2px;
|
||||
background-color: #31a8fa;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-dom-div {
|
||||
height: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
text-align: right;
|
||||
padding-right: 0.5rem;
|
||||
.page-icon-dom {
|
||||
font-size: 1.2rem;
|
||||
border: none;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.cannot-click {
|
||||
background-color: #a3b0c0;
|
||||
color: white;
|
||||
}
|
||||
.can-click {
|
||||
background-color: #31a8fa;
|
||||
color: white;
|
||||
}
|
||||
.total-num-span {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue