apps/supplier-dispatch-h5
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

车辆信息，修改并且自测

Browse Source
This commit is contained in:
周林芳
2025-09-08 13:09:10 +08:00
parent 6bc55d7b89
commit 40ab15266a
2 changed files with 559 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
src/views/index/vehicleManage.vue
View File

@@ -18,6 +18,46 @@
</template>
</van-nav-bar>
</div>
<div class="filterWrap">
<!-- <div >-->
<el-input v-model="searchVal" @blur="resetHandler" placeholder="车辆名称/车牌号/车架号" :class="{'customSel':true,'customInput':true , 'has-value': searchVal }" >
<template #suffix>
<i
v-if="searchVal"
class="el-icon-circle-close el-input__icon"
@click="searchVal = ''"
></i>
</template>
</el-input>
<el-select @change="resetHandler" multiple :collapse-tags="true" v-model="inputStatusList" placeholder="录入状态" :class="{'customSel':true , 'has-value': inputStatusList }" clearable>
<el-option
v-for="item in inputStatusListOptions"
:key="item.value"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
<!-- </div>-->
<!-- <div>-->
<el-select @change="resetHandler" multiple :collapse-tags="true" v-model="authStates" placeholder="认证状态" :class="{'customSel':true , 'has-value': authStates }" clearable>
<el-option
v-for="item in authStatesOptions"
:key="item.value"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
<el-select @change="resetHandler" multiple :collapse-tags="true" v-model="liabilityInsuranceAudit" placeholder="职业责任险" :class="{'customSel':true , 'has-value': liabilityInsuranceAudit }" clearable>
<el-option
v-for="item in insuresOptions"
:key="item.value"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
<!-- </div>-->
</div>
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<van-list
v-model="loading"
@@ -29,15 +69,26 @@
<div class="carCode">
<div class="codeLeft">{{item.plateNumber}} / {{item.vehicleTypeString}}</div>
<div class="twoBtn">
<button v-if="permissonList.includes('vehicleAddBtn')" class="del" @click="deleteItem(item.vehicleId)">删除</button>
<span> {{ item.vehicleStatus == 1 ? '正常' : '停用' }} </span>
<!-- <button v-if="permissonList.includes('vehicleAddBtn')" class="del" @click="deleteItem(item.vehicleId)">删除</button>-->
<button v-if="permissonList.includes('vehicleModifyBtn')" class="revise" @click="updateVehicle(item)">修改</button>
</div>
</div>
<div class="carType">{{ item.serviceName }}</div>
<div class="juhe flex-between">
<span class="zdJuhe mr10">核验：<span :class="item.inputStatus == 1 ? 'isYes' :'isNo'">{{item.inputStatus == 1 ? '已核验' :'未核验'}}</span></span>
<span class="zdJuhe">认证：<span :class="item.authStatus == 1 ? 'isYes' :'isNo'">{{item.authStatus == 1 ? '已认证' :'未认证'}}</span></span>
</div>
<div class="juhe">
<span class="zdJuhe mr10">最近登录时间：{{item.lastLoginTime}}</span>
</div>
<div class="juhe">
<span class="zdJuhe mr10">救援职业责任险情况：<span :class="getClass(item.liabilityInsuranceAudit)?.className">{{getClass(item.liabilityInsuranceAudit)?.title}}</span></span>
</div>
<!--<div class="carType">{{ item.serviceName }}</div>
<div class="juhe">
<span class="zdJuhe">是否参与中道聚合: </span>
<span :class="item.hasPolymerization.code == 0 ? 'isYes' :'isNo'">{{item.hasPolymerization.label}}</span>
</div>
</div>-->
</div>
</van-list>
@@ -65,6 +116,49 @@ export default {
loading: false,
finished: false,
permissonList:[],
inputStatusList: [],
searchVal: '',
authStates: [],
liabilityInsuranceAudit: [],
inputStatusListOptions: [{
name: '行驶证未录入',
value: 0
},{
name: '行驶证核验通过',
value: 1
},{
name: '行驶证核验不通过',
value: 2
}],
authStatesOptions: [{
name: '车头照片未录入',
value: 1
},{
name: '车头照片认证通过',
value: 2
},{
name: '车头照片认证不通过',
value: 3
}],
insuresOptions: [{
name: '待审核',
value: 1
},{
name: '有责任险',
value: 2
},{
name: '有货物险',
value: 3
},{
name: '未通过',
value: 4
},{
name: '无',
value: 5
},{
name: '空',
value: 6
}],
}
},
mounted() {
@@ -72,6 +166,37 @@ export default {
this.getPermissions();
},
methods:{
getClass(id) {
const ids = String(id)
const steps = {
'1': {
title: '待审核',
className: 'insuranceMain'
},
'2': {
title: '有责任险',
className: 'insuranceSuccess'
},
'3': {
title: '有货物险',
className: 'insuranceTip'
},
'4': {
title: '未通过(点击显示原因)',
className: 'insuranceDanger'
},
'5': {
title: '无',
className: ''
},
'6': {
title: '空',
className: ''
}
}
return steps[ids] || { title: '', className: '' }
},
async onLoad(){
await this.getVehicleList()
this.pageNum++;
@@ -121,6 +246,12 @@ export default {
this.pageNum=1
await this.getVehicleList();
},
async resetHandler() {
// debounce(async () => {
this.pageNum=1
await this.getVehicleList();
// }, 1000)
},
updateVehicle(item){//修改
this.$router.push({
name:'vehicleAdd',
@@ -161,7 +292,7 @@ export default {
}
}
.carItem{
@include wh(100%,86px);
@include wh(100%,110px);
background: #FFFFFF;
box-shadow: 0px 2px 10px 0px rgba(216,216,216,0.5);
@include radiusSizing(6px);
@@ -175,6 +306,7 @@ export default {
}
.twoBtn{
display: flex;
align-items: center;
button{
border: none;
padding: 4px 8px;
@@ -211,4 +343,107 @@ export default {
@include fontWeightSize(400,12px);
}
}
</style>
.mr10 {
margin-right: 10px;
}
.insuranceMain {
color: #354D93;
}
.insuranceSuccess {
color: green;
}
.insuranceTip {
color: orange;
}
.insuranceDanger {
color: red;
}
.flex-between {
display: flex;
justify-content: space-between;
}
.filterWrap {
width: calc(100% - 5px);
padding-right: 5px;
display: flex;
overflow-x: auto; /* 允许横向滚动 */
white-space: nowrap; /* 防止子元素换行 */
padding-bottom: 10px;
-webkit-overflow-scrolling: touch; /* 在iOS上平滑滚动 */
scrollbar-width: none; /* Firefox */
padding-bottom: 10px;
padding: 10px;
margin-bottom: 10px;
background-color: #fff;
box-sizing: border-box;
&::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
.customSel {
flex: 0 0 auto; /* 防止子元素被压缩 */
width: 100px;
/*width: 100%;*/
height: 25px;
background: #F5F5F5;
border-radius: 4px;
font-size: 10px;
color: #323233;
margin-left: 5px;
::v-deep .el-input__inner{
padding: 0 2px;
height: 25px;
font-size: 10px;
background: #F5F5F5;
border-radius: 4px;
border: none;
}
::v-deep .el-input__icon{
line-height: 25px;
font-size: 10px;
width: 18px;
color: #2A5094;
}
::v-deep .el-input__suffix{
right: 2px;
}
}
.customInput{
/*width: 49%;*/
width: 130px;
}
.has-value ::v-deep .el-input__inner{
background: #F1F6FF ;
color: #007BE9;
font-weight: bold;
padding-left: 8px;
}
.has-value ::v-deep .el-input__icon{
color: #007BE9;
}
.priceSel{
display: flex;
justify-content: space-around;
align-items: center;
color: #C0C4CC;
.iconSpan{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 8px;
}
}
.has-price{
color: #007BE9 !important;
}
}
::v-deep .el-select .el-select__tags>span {
display: flex;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>