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

338
src/views/index/vehicleAdd.vue
View File

@ -72,7 +72,7 @@
<div class="itemContent">
<div class="titleType">
<img class="startImg" src="@/assets/start.png" />
<span>车辆类型</span>
<span>车辆类别</span>
</div>
<!--
<select
@ -111,6 +111,29 @@
</el-select>
</div>
<div class="itemContent">
<div class="titleType">
<img class="startImg" src="@/assets/start.png" />
<span>车辆属性</span>
</div>
<el-select
v-model="virtualVehicle"
value-key="name"
class="elSelect"
collapse-tags="collapse-tags"
placeholder="请选择" style="width: 55%"
>
<el-option
v-for="item in virtualVehicleOptions"
:key="item.name"
:label="item.name"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="lineBot"></div>
<div class="itemContent">
<div class="titleType">
<span>牌照</span>
@ -134,7 +157,7 @@
</div>
<div class="lineBot"></div>
<div class="itemContent">
<!--<div class="itemContent">
<div class="titleType">
<img class="startImg" src="@/assets/start.png" />
<span>是否参与聚合</span>
@ -160,7 +183,115 @@
</van-radio-group>
</div>
</div>
<div class="lineBot"></div>-->
<div class="itemContent">
<div class="titleType">
<img class="startImg" src="@/assets/start.png" />
<span>车辆状态</span>
</div>
<div class="isJoin">
<van-radio-group v-model="vehicleStatus" @change="isVehicleChange" class="joinWrap">
<van-radio :name="1" style="margin-right: 26px">
启用
<img
slot="icon"
slot-scope="props"
:src="props.checked ? activeIcon : inactiveIcon"
>
</van-radio>
<van-radio :name="2">
停用
<img
slot="icon"
slot-scope="props"
:src="props.checked ? activeIcon : inactiveIcon"
>
</van-radio>
</van-radio-group>
</div>
</div>
<div class="itemContent">
<div class="titleType">
<img class="startImg" src="@/assets/start.png" />
<span>救援职业责任险</span>
</div>
<div class="isJoin">
<van-radio-group v-model="hasLiabilityInsurance" @change="isChange" class="joinWrap">
<van-radio :name="1" style="margin-right: 26px">
有
<img
slot="icon"
slot-scope="props"
:src="props.checked ? activeIcon : inactiveIcon"
>
</van-radio>
<van-radio :name="0">
无
<img
slot="icon"
slot-scope="props"
:src="props.checked ? activeIcon : inactiveIcon"
>
</van-radio>
</van-radio-group>
</div>
</div>
<div class="lineBot"></div>
<template v-if="hasLiabilityInsurance == 1">
<div class="itemContent">
<div class="titleType">
<img class="startImg" src="@/assets/start.png" />
<span>保单</span>
</div>
<van-uploader
v-model="insurancePictureFiles"
:after-read="insurancePictureFilesHandler"
max-count="1"
:preview-size="54"
accept="image "
/>
</div>
<div class="lineBot"></div>
<div class="itemContent">
<div class="titleType">
<img class="startImg" src="@/assets/start.png" />
<span>承保保司</span>
</div>
<el-select
v-model="insuranceCorp"
value-key="name"
class="elSelect"
collapse-tags="collapse-tags"
placeholder="请选择" style="width: 55%"
>
<el-option
v-for="item in insuranceOptions"
:key="item.name"
:label="item.name"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="lineBot"></div>
<div class="itemContent">
<div class="titleType">
<img class="startImg" src="@/assets/start.png" />
<span>保险有效期</span>
</div>
<el-input style="width: 55%" readonly @focus="showDatePicker = true" v-model="dateVal" placeholder="请选择发布日期" :class="{'customSel':true,'customInput':true , 'has-value': dateVal }" >
<template #suffix>
<i
v-if="dateVal"
class="el-icon-circle-close el-input__icon"
@click="dateVal = ''"
></i>
</template>
</el-input>
</div>
</template>
<div class="itemContent">
<div class="titleType">
<img class="startImg" src="@/assets/start.png" />
@ -168,28 +299,39 @@
</div>
</div>
<div class="serviceType">
<div class="trailerService" v-for="(item,index) in supplierServiceList" :key="index">
<div class="serviceline" @click="loadAll(index)">
<img :ref="'serviceline' + index" :src="imageUrl" style="width: 20px;height: 15px" >
<span class="service">{{ item.name }}:</span>
<span class="line"></span>
</div>
<div :ref="'checkboxGroup' + index" class="checkbox-group">
<van-checkbox-group v-model="serviceIds" v-for="(item2,index2) in item.children" :key="index2" class="radioWrap">
<van-checkbox class="item" :name="item2.id">{{item2.name }}</van-checkbox>
</van-checkbox-group>
</div>
</div>
<el-tree
show-checkbox
node-key="id"
ref="tree"
:highlight-current="true"
:expand-on-click-node="false"
:data="supplierServiceList"
:props="defaultProps">
</el-tree>
<!--<div class="trailerService" v-for="(item,index) in supplierServiceList" :key="index">
<div class="serviceline" @click="loadAll(index)">
<img :ref="'serviceline' + index" :src="imageUrl" style="width: 20px;height: 15px" >
<span class="service">{{ item.name }}:</span>
<span class="line"></span>
</div>
<div :ref="'checkboxGroup' + index" class="checkbox-group">
<van-checkbox-group v-model="serviceIds" v-for="(item2,index2) in item.children" :key="index2" class="radioWrap">
<van-checkbox class="item" :name="item2.id">{{item2.name }}</van-checkbox>
</van-checkbox-group>
</div>
</div>-->
</div>
<two-common-btn class="btn" @cancelClick="h5GoBack" @submitClick="submitBtn" />
<van-calendar v-model="showDatePicker" :min-date="minDate"
:max-date="maxDate" type="range" @confirm="onConfirm" />
</div>
</div>
</template>
<script>
// uploadImage
import {Dialog} from "vant";
import {formatDate1} from "@/utils/common"
import {myMixins} from "@/utils/myMixins"
import {vehicleTypeList,saveVehicle,getInfoById,supplierServiceTree, uploadImage, ocrHandler} from "@/api/mine"
import TwoCommonBtn from "@/components/twoBtnCommon.vue"
@ -199,8 +341,20 @@ export default {
mixins:[myMixins],
data(){
return{
defaultProps: {
children: 'children',
label: 'name'
},
minDate: new Date(1970, 0, 1), // 设置最小可选日期（1970年1月1日）
maxDate: new Date(2099, 11, 31), // 设置最大可选日期（2099年12月31日）
checkList: [],
virtualVehicle: '',
vehicleStatus: '',
showDatePicker: false,
dateVal: '',
trailerService: '',//拖车服务
isJoin:'',//是否参与
hasLiabilityInsurance: '', // 有无责任险
activeIcon: require('@/assets/check.png'),
inactiveIcon: require('@/assets/uncheck.png'),
// result: [],
@ -218,15 +372,18 @@ export default {
vehicleLicenseBackList: [],
vehicleLicenseCarPhotoList: [],
vehicleFrontPhotoList: [],
insurancePictureFiles: [],
vehicleLicenseFront: '', // 行驶证首页
vehicleLicenseBack: '', // 行驶证副页
vehicleLicenseCarPhoto: '', // 行驶证车辆照片
vehicleFrontPhoto: '', // 车头照
insurancePicturePhoto: '', // 保单照片
vehicleLicenseInfo: {},
vehicleLicenseBackOcrFlag: false, // 行驶证副页 修改时默认不需要 ocr识别
isMultiple: false, // 是否支持多选
vehicleLicense:'',//牌照
vehicleFrontLicensePlate:'',//车头照车牌号码
insuranceCorp: '',
vehicleTypes:[{
name: '小修车',
value: 1
@ -275,6 +432,62 @@ export default {
}, {
name: '其他',
value: 5
}],
virtualVehicleOptions: [{
name: '自有车辆',
value: 1
}, {
name: '挂靠车辆',
value: 2
}, {
name: '虚拟车辆',
value: 3
}, {
name: '借入车辆',
value: 4
}],
insuranceOptions: [{
name: '太平洋',
value: 1
}, {
name: '人保',
value: 2
}, {
name: '平安',
value: 3
}, {
name: '中华联合',
value: 4
}, {
name: '大地',
value: 5
}, {
name: '阳光',
value: 6
}, {
name: '太平',
value: 7
}, {
name: '人寿',
value: 8
}, {
name: '永安',
value: 9
}, {
name: '华安',
value: 10
}, {
name: '申能',
value: 11
}, {
name: '大家',
value: 12
}, {
name: '富德',
value: 13
}, {
name: '其他',
value: 14
}]
}
},
@ -321,6 +534,25 @@ export default {
}
},
methods:{
formatDate(date) {
return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
},
onConfirm(date) {
const [start, end] = date;
this.showDatePicker = false;
this.dateVal = `${this.formatDate(start)} - ${this.formatDate(end)}`;
},
formatDateTimeRange(str) {
const [startStr, endStr] = str.split(' - ').map(s => s.trim());
const startDate = new Date(startStr);
const startTime = `${startDate.getFullYear()}-${(startDate.getMonth() + 1).toString().padStart(2, '0')}-${startDate.getDate().toString().padStart(2, '0')} 00:00:00`;
const endDate = new Date(endStr);
const endTime = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padStart(2, '0')}-${endDate.getDate().toString().padStart(2, '0')} 23:59:59`;
return {
startTime,
endTime
};
},
setDefault() {
if( this.vehicleLicenseInfo?.vehicleType?.includes('小型') || this.vehicleLicenseInfo?.vehicleType?.includes('微型') || this.vehicleLicenseInfo?.vehicleType?.includes('普通') || this.vehicleLicenseInfo?.vehicleType?.includes('摩托') ) {
this.vehicleTypes.map(item => {
@ -379,6 +611,12 @@ export default {
this.vehicleFrontPhoto = res.data;
await this.ocrCarFrontHandler()
},
async insurancePictureFilesHandler(file) {
const formData = new FormData();
formData.append("file" , file.file);
let res = await uploadImage(formData);
this.insurancePicturePhoto = res.data;
},
async ocrCarFrontHandler() { // 车辆正面 orc 识别
let res = await ocrHandler({
ocrType: 10,
@ -493,14 +731,22 @@ export default {
this.selectedOption=result.vehicleType?.split(',').map((item)=>{
return Number(item);
});
this.serviceIds=result.serviceIds
this.virtualVehicle = result.virtualVehicle;
this.$refs.tree.setCheckedKeys(result.serviceIds)
this.vehicleStatus = result.vehicleStatus
this.vehicleLicenseFront = result.vehicleLicenseFront;
this.vehicleLicenseBack = result.vehicleLicenseBack;
this.vehicleFrontPhoto = result.vehicleFrontPhoto;
this.insurancePicturePhoto = result.insurancePicturePhoto;
this.vehicleLicenseInfo = result.vehicleLicenseInfo;
this.vehicleLicenseCarPhoto = result.vehicleLicenseCarPhoto;
this.vehicleLicense = result.vehicleLicense;
this.vehicleFrontLicensePlate = result.vehicleFrontLicensePlate;
this.hasLiabilityInsurance = result.hasLiabilityInsurance
this.vehicleStatus = result.vehicleStatus
if(this.insurancePicturePhoto) {
this.insurancePictureFiles = [{url: this.insurancePicturePhoto}]
}
if( this.vehicleLicenseFront ) {
this.vehicleLicenseFrontList = [{ url : this.vehicleLicenseFront }];
}
@ -513,9 +759,28 @@ export default {
if(this.vehicleLicenseCarPhoto) {
this.vehicleLicenseCarPhotoList = [{ url : this.vehicleLicenseCarPhoto }];
}
if(this.vehicleLicenseCarPhoto) {
this.vehicleLicenseCarPhotoList = [{ url : this.vehicleLicenseCarPhoto }];
}
if( result.liabilityInsuranceEndTime && result.liabilityInsuranceStartTime ) {
this.dateVal = formatDate1(result.liabilityInsuranceStartTime) + ' - ' + formatDate1(result.liabilityInsuranceEndTime)
}
},
isChange(e){
this.isJoin=e
this.hasLiabilityInsurance=e
if (e === 0) {
Dialog.confirm({
title: '提醒',
message: '有救援职业责任险车辆会提升案件聚合能力和接单能力。',
confirmButtonText: '我已知晓', // 确认按钮文字，默认为“确认”
showCancelButton: false // 是否显示取消按钮，默认为 true。如果不需要取消按钮，可以设置为 false。
})
.then(() => { /* 确认后的操作 */ })
.catch(() => { /* 取消后的操作 */ });
}
},
isVehicleChange(e) {
this.vehicleStatus=e
},
async submitBtn(){
if( !this.vehicleLicenseFront ) {
@ -543,13 +808,42 @@ export default {
return
}
if(!(this.selectedOption.length > 0)){
this.$toast('车辆类型不能为空')
this.$toast('车辆类别不能为空')
return
}
if( !this.virtualVehicle ) {
this.$toast('车辆属性不能为空')
return
}
if( !this.vehicleStatus ) {
this.$toast('车辆状态不能为空')
return
}
if(this.hasLiabilityInsurance === null || this.hasLiabilityInsurance === undefined) { // 有职业责任险，就需要有保单照片
this.$toast('救援职业责任险不能为空')
return
}
if(!this.insurancePicturePhoto && this.hasLiabilityInsurance == 1) { // 有职业责任险，就需要有保单照片
this.$toast('保单照片不能为空')
return
}
if(this.selectedOption?.length==1 && this.selectedOption.includes(1)){//选择小修车时需清除原本的拖车服务类型
let data=this.oldSupplierServiceList.filter(item => item.name ==='拖车服务')
this.serviceIds = this.serviceIds.filter(item => !data[0].children.some(obj => obj.id === item));
}
if(!this.insuranceCorp && this.hasLiabilityInsurance == 1) { // 有职业责任险，就需要有保单照片
this.$toast('承保保司不能为空')
return
}
if(!this.dateVal && this.hasLiabilityInsurance == 1) { // 有职业责任险，就需要有保单照片
this.$toast('保单有效期不能为空')
return
}
let timeObj;
if(this.dateVal) {
timeObj = this.formatDateTimeRange(this.dateVal)
}
this.serviceIds = this.$refs.tree.getCheckedKeys(true)
await saveVehicle({
vehicleId:this.id ? this.id : '',
plateNumber:this.carNum ? this.carNum :'',
@ -563,6 +857,12 @@ export default {
vehicleLicenseCarPhoto: this.vehicleLicenseCarPhoto,
vehicleLicense: this.vehicleLicense,
vehicleFrontLicensePlate:this.vehicleFrontLicensePlate,
hasLiabilityInsurance: this.hasLiabilityInsurance,
insurancePicturePhoto: this.hasLiabilityInsurance == 1 ? this.insurancePicturePhoto : '',
insuranceCorp: this.hasLiabilityInsurance == 1 ? this.insuranceCorp : '',
liabilityInsuranceStartTime: this.hasLiabilityInsurance == 1 ? (timeObj?.startTime || '' ) : '',
liabilityInsuranceEndTime: this.hasLiabilityInsurance == 1 ? (timeObj?.endTime || '') : '',
virtualVehicle: this.virtualVehicle,
})
if(this.id){
this.$toast('修改成功')

243
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);
}
}
.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>