367 lines
8.1 KiB
Vue
367 lines
8.1 KiB
Vue
|
<template>
|
|||
|
|
<view class="car-class">
|
|||
|
|
<view class="page-top" :style='{ justifyContent: "center" }'>
|
|||
|
|
|
|||
|
|
<!-- 返回上一级页面信息 -->
|
|||
|
|
<view class='go-back-page' @click='pageBack'>返回</view>
|
|||
|
|
|
|||
|
|
<!-- 人员/车辆/我的组件显示的表头信息 -->
|
|||
|
|
<view class="other-title-class">
|
|||
|
|
车辆管理
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view @click="goadd('add')"
|
|||
|
|
style="width: 100%; display: flex;color: white;background: #327dfb; justify-content: center; margin: 10px 0px; box-sizing: border-box; padding: 10px;font-weight: bold;border-radius: 8px;">
|
|||
|
|
<text> + 新增车辆</text>
|
|||
|
|
</view> -->
|
|||
|
|
|
|||
|
|
<!-- 搜索框-tab切换代码信息 -->
|
|||
|
|
<view class="search-input-tab-class">
|
|||
|
|
|
|||
|
|
<!-- 搜索框代码信息 -->
|
|||
|
|
<view class="input-class">
|
|||
|
|
|
|||
|
|
<!-- 搜索 icon -->
|
|||
|
|
<view class="search-icon">
|
|||
|
|
<image src="../../indexCom/img/sousuo.svg" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 搜索框 -->
|
|||
|
|
<view class="search-input">
|
|||
|
|
<input type="text" placeholder="请输入车牌号" v-model='searchValue' />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- tab 信息 -->
|
|||
|
|
<view class="tab-choose-class">
|
|||
|
|
|
|||
|
|
<view class="tab-content" @click="tabChoose(item, index)" v-for='(item, index) in tabList' :key='index'>
|
|||
|
|
|
|||
|
|
<!-- tab 名称信息 -->
|
|||
|
|
<view class='tab-name-class' :style='{ color: index + 1 == tabValue ? "#101A3E" : "#8D90A6" }'>
|
|||
|
|
{{ item }}
|
|||
|
|
|
|||
|
|
<view class="icon-tab" v-if='index == 1'>
|
|||
|
|
<image src="../../indexCom/img/xialajiantou.svg" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 名称下 icon -->
|
|||
|
|
<view class="tab-icon"
|
|||
|
|
:style='{ background: index + 1 == tabValue ? "linear-gradient( 180deg, #054DF3 0%, #55A3FF 100%)" : "" }'>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- list 列表信息（车辆列表） -->
|
|||
|
|
<view class='car-list-class'>
|
|||
|
|
|
|||
|
|
<!-- 滚动 view -->
|
|||
|
|
<scroll-view :refresher-triggered="trigger" @scrolltolower="loadMore" @refresherrefresh="refreshList"
|
|||
|
|
:scroll-top="scrollTop" refresher-enabled="true" refresher-background="transparent" scroll-y="true"
|
|||
|
|
class="scroll-view-class">
|
|||
|
|
|
|||
|
|
<!-- 列表信息 -->
|
|||
|
|
<car-info-com v-if="listData.length>0" @goCarDetails='goCarDetails' :buttonTabValue='buttonTabValue'
|
|||
|
|
:listData="listData" ref='carInfoCom'></car-info-com>
|
|||
|
|
<view style="text-align: center" v-if="listData.length==0">
|
|||
|
|
<image class="" src="../../../static/images/nothing.png"></image>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// 车辆信息卡片组件
|
|||
|
|
import carInfoCom from './carInfoCard.vue';
|
|||
|
|
import request from '@/utils/request'
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
// 车辆信息卡片组件
|
|||
|
|
carInfoCom
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
//是否是从首页数据统计跳过来的
|
|||
|
|
fromIndex: false,
|
|||
|
|
// 距离顶部的位置信息
|
|||
|
|
scrollTop: 0,
|
|||
|
|
// 输入框搜索内容信息
|
|||
|
|
searchValue: '',
|
|||
|
|
// tab 当前值
|
|||
|
|
tabValue: 1,
|
|||
|
|
// 按钮类型 tab 值
|
|||
|
|
buttonTabValue: 1,
|
|||
|
|
// 控制刷新启动
|
|||
|
|
trigger: false,
|
|||
|
|
//车辆所属课程类型
|
|||
|
|
courseType: null,
|
|||
|
|
tabList: ["全部", "类型"],
|
|||
|
|
queryParams: {
|
|||
|
|
pageNum: 1,
|
|||
|
|
pageSize: 10,
|
|||
|
|
},
|
|||
|
|
courseList: ["C1", "C2"],
|
|||
|
|
total: 0,
|
|||
|
|
listData: [],
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
searchValue(newval) {
|
|||
|
|
this.refreshList()
|
|||
|
|
},
|
|||
|
|
courseType(newval) {
|
|||
|
|
this.refreshList()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(data) {
|
|||
|
|
if (data.fromIndex) {
|
|||
|
|
this.fromIndex = data.fromIndex
|
|||
|
|
this.queryParams.type = "car"
|
|||
|
|
this.queryParams.timeType = data.timeType
|
|||
|
|
if (data.coachId) {
|
|||
|
|
this.queryParams.coachId = data.coachId
|
|||
|
|
}
|
|||
|
|
if (data.startTime) {
|
|||
|
|
this.queryParams.startTime = data.startTime
|
|||
|
|
this.queryParams.endTime = data.endTime
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.getCarList()
|
|||
|
|
},
|
|||
|
|
created() {},
|
|||
|
|
methods: {
|
|||
|
|
/**
|
|||
|
|
* @description 跳转车辆详情页面信息
|
|||
|
|
*/
|
|||
|
|
goCarDetails(record, index) {
|
|||
|
|
// 跳转
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/internalManagement/carManagement/carDetails?id=' + record.id
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @description 获取车辆列表
|
|||
|
|
*/
|
|||
|
|
getCarList() {
|
|||
|
|
let url = "/admin-api/drivingSchool/system/car/list"
|
|||
|
|
this.queryParams.courseType = this.courseType
|
|||
|
|
if (this.fromIndex) {
|
|||
|
|
//来源首页
|
|||
|
|
url = "/admin-api/train/indexGetTrainList"
|
|||
|
|
this.queryParams.searchValue = this.searchValue
|
|||
|
|
} else {
|
|||
|
|
this.queryParams.carNo = this.searchValue
|
|||
|
|
}
|
|||
|
|
request({
|
|||
|
|
url: url,
|
|||
|
|
method: 'get',
|
|||
|
|
params: this.queryParams
|
|||
|
|
}).then((res) => {
|
|||
|
|
this.trigger = false
|
|||
|
|
this.total = res.data.total
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
res.data.records.map(item => {
|
|||
|
|
item.showMore = false
|
|||
|
|
})
|
|||
|
|
if (this.queryParams.pageNum != 1) {
|
|||
|
|
this.listData = this.listData.concat(res.data.records)
|
|||
|
|
} else {
|
|||
|
|
this.listData = res.data.records
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @description 触底触发刷新事件
|
|||
|
|
*/
|
|||
|
|
loadMore() {
|
|||
|
|
//判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
|
|||
|
|
if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) {
|
|||
|
|
uni.$u.toast('没有更多数据了')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
//页码+1,调用获取数据的方法获取第二页数据
|
|||
|
|
this.queryParams.pageNum++
|
|||
|
|
this.getCarList()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @description 刷新list列表信息
|
|||
|
|
*/
|
|||
|
|
refreshList() {
|
|||
|
|
this.trigger = true
|
|||
|
|
this.queryParams.pageNum = 1
|
|||
|
|
this.total = 0
|
|||
|
|
this.getCarList()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @description 点击 tab 进行切换页面信息
|
|||
|
|
* @param {String, Number}
|
|||
|
|
*/
|
|||
|
|
tabChoose(item, index) {
|
|||
|
|
this.tabValue = index + 1
|
|||
|
|
if (2 == this.tabValue) {
|
|||
|
|
//弹出选择课程科目
|
|||
|
|
uni.showActionSheet({
|
|||
|
|
itemList: this.courseList,
|
|||
|
|
success: ({
|
|||
|
|
tapIndex
|
|||
|
|
}) => {
|
|||
|
|
this.courseType = this.courseList[tapIndex]
|
|||
|
|
this.tabList[1] = this.courseType
|
|||
|
|
this.$forceUpdate()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
this.courseType = ""
|
|||
|
|
this.tabList[1] = "类型"
|
|||
|
|
this.$forceUpdate()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getback() {
|
|||
|
|
uni.navigateBack({
|
|||
|
|
delta: 1,
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
goadd(type, id) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/internalManagement/carManagement/informationAdd?type=' + type + '&id=' + id
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
pageBack() {
|
|||
|
|
uni.navigateBack({
|
|||
|
|
delta: 1 // delta值为1时表示返回的页面层数
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.car-class {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
background: #F1F3F6;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.car-list-class {
|
|||
|
|
width: 96%;
|
|||
|
|
flex-grow: 1;
|
|||
|
|
padding: 20rpx 0 0 0;
|
|||
|
|
overflow-y: scroll;
|
|||
|
|
|
|||
|
|
.scroll-view-class {
|
|||
|
|
height: 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-input-tab-class {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 194rpx;
|
|||
|
|
background: white;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
|
|||
|
|
.tab-choose-class {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
padding: 12rpx 20rpx 0 20rpx;
|
|||
|
|
border-top: 1rpx solid #F5F5F5;
|
|||
|
|
|
|||
|
|
.tab-content {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.tab-name-class {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.icon-tab {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 32rpx;
|
|||
|
|
height: 32rpx;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-icon {
|
|||
|
|
width: 66rpx;
|
|||
|
|
height: 8rpx;
|
|||
|
|
margin-top: 8rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-class {
|
|||
|
|
width: 86%;
|
|||
|
|
margin: 24rpx 0 12rpx 7%;
|
|||
|
|
height: 66rpx;
|
|||
|
|
background: #F5F6F9;
|
|||
|
|
border: 2rpx solid #F0F0F0;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.search-icon {
|
|||
|
|
margin: 0 18rpx 0 30rpx;
|
|||
|
|
height: 28rpx;
|
|||
|
|
width: 28rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-input {
|
|||
|
|
height: 100%;
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
input {
|
|||
|
|
width: 98%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-top {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 160rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
color: white;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
background: linear-gradient(180deg, #054DF3 0%, #55A3FF 100%);
|
|||
|
|
|
|||
|
|
.go-back-page {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|