989 lines
31 KiB
Vue
989 lines
31 KiB
Vue
<template>
|
||
<div class="wrap vehicleAdd">
|
||
<div class="navBar">
|
||
<van-nav-bar
|
||
:title="id ? '修改车辆信息' : '添加车辆'"
|
||
left-arrow
|
||
left-arrow-color="#FFFFFF"
|
||
:border="false"
|
||
:fixed="true"
|
||
:safe-area-inset-top="true"
|
||
@click-left="h5GoBack"
|
||
/>
|
||
</div>
|
||
<div class="addContentWrap">
|
||
<div class="itemContent">
|
||
<div class="titleType">
|
||
<img class="startImg" src="@/assets/start.png" />
|
||
<span>行驶证首页</span>
|
||
</div>
|
||
<van-uploader
|
||
v-model="vehicleLicenseFrontList"
|
||
:after-read="vehicleLicenseFrontHandler"
|
||
:max-size="5 * 1024 * 1024"
|
||
max-count="1"
|
||
:preview-size="54"
|
||
accept="image "
|
||
/>
|
||
</div>
|
||
<div class="itemContent">
|
||
<div class="titleType">
|
||
<img class="startImg" src="@/assets/start.png" />
|
||
<span>行驶证副页</span>
|
||
</div>
|
||
<van-uploader
|
||
v-model="vehicleLicenseBackList"
|
||
:after-read="vehicleLicenseBackHandler"
|
||
:max-size="5 * 1024 * 1024"
|
||
max-count="1"
|
||
:preview-size="54"
|
||
accept="image "
|
||
/>
|
||
</div>
|
||
<div class="itemContent">
|
||
<div class="titleType">
|
||
<img class="startImg" src="@/assets/start.png" />
|
||
<span>行驶证车辆照片页</span>
|
||
</div>
|
||
<van-uploader
|
||
v-model="vehicleLicenseCarPhotoList"
|
||
:after-read="vehicleLicenseCarHandler"
|
||
:max-size="5 * 1024 * 1024"
|
||
max-count="1"
|
||
:preview-size="54"
|
||
accept="image "
|
||
/>
|
||
</div>
|
||
<div class="itemContent">
|
||
<div class="titleType">
|
||
<img class="startImg" src="@/assets/start.png" />
|
||
<span>车头照</span>
|
||
</div>
|
||
<van-uploader
|
||
v-model="vehicleFrontPhotoList"
|
||
:after-read="vehicleFrontPhotoHandler"
|
||
max-count="1"
|
||
:preview-size="54"
|
||
accept="image "
|
||
/>
|
||
</div>
|
||
|
||
<cell-group label="车牌号" placeholder="车牌号" disabled v-model="carNum" />
|
||
<div class="itemContent">
|
||
<div class="titleType">
|
||
<img class="startImg" src="@/assets/start.png" />
|
||
<span>车辆类别</span>
|
||
</div>
|
||
<!--
|
||
<select
|
||
id="mySelect"
|
||
class="mySelect"
|
||
v-model="selectedOption"
|
||
multiple
|
||
>
|
||
<option
|
||
v-for="item in typeList"
|
||
:key="item"
|
||
:value="item"
|
||
:disabled="isOptionDisabled(item)"
|
||
>
|
||
{{ item }}
|
||
</option>
|
||
</select>
|
||
-->
|
||
<el-select
|
||
multiple
|
||
:multiple-limit="isMultiple ? 2 : 1"
|
||
v-model="selectedOption"
|
||
value-key="name"
|
||
class="elSelect"
|
||
collapse-tags="collapse-tags"
|
||
placeholder="请选择" style="width: 55%"
|
||
>
|
||
<el-option
|
||
v-for="item in vehicleTypes"
|
||
:key="item.name"
|
||
:label="item.name"
|
||
:value="item.value"
|
||
:disabled="!item.disabled ? false : true"
|
||
>
|
||
</el-option>
|
||
</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>
|
||
</div>
|
||
<el-select
|
||
v-model="vehicleLicense"
|
||
disabled
|
||
value-key="name"
|
||
class="elSelect"
|
||
collapse-tags="collapse-tags"
|
||
placeholder="请选择" style="width: 55%"
|
||
>
|
||
<el-option
|
||
v-for="item in vehicleLicenseOptions"
|
||
: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>
|
||
<div class="isJoin">
|
||
<van-radio-group v-model="isJoin" @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>-->
|
||
<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" />
|
||
<span>选择服务种类</span>
|
||
</div>
|
||
</div>
|
||
<div class="serviceType">
|
||
<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"
|
||
import CellGroup from "@/components/cellGroup.vue";
|
||
export default {
|
||
name: "vehicleAdd",
|
||
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: [],
|
||
checked: true,
|
||
carNum:"",//车牌号
|
||
typeList:[],//车辆类型列表
|
||
selectedOption:[],//车辆类型
|
||
id:'',//车辆Id
|
||
serviceIds:[],//车辆服务种类,
|
||
supplierServiceList:[],
|
||
oldSupplierServiceList:[],
|
||
show:false,
|
||
imageUrl: require('@/assets/arr_right.png'),
|
||
vehicleLicenseFrontList: [],
|
||
vehicleLicenseBackList: [],
|
||
vehicleLicenseCarPhotoList: [],
|
||
vehicleFrontPhotoList: [],
|
||
insurancePictureFiles: [],
|
||
vehicleLicenseFront: '', // 行驶证首页
|
||
vehicleLicenseBack: '', // 行驶证副页
|
||
vehicleLicenseCarPhoto: '', // 行驶证车辆照片
|
||
vehicleFrontPhoto: '', // 车头照
|
||
insurancePicturePhoto: '', // 保单照片
|
||
vehicleLicenseInfo: {},
|
||
vehicleLicenseBackOcrFlag: false, // 行驶证副页 修改时默认不需要 ocr识别
|
||
isMultiple: false, // 是否支持多选
|
||
vehicleLicense:'',//牌照
|
||
vehicleFrontLicensePlate:'',//车头照车牌号码
|
||
insuranceCorp: '',
|
||
vehicleTypes:[{
|
||
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 },
|
||
|
||
],
|
||
vehicleLicenseOptions: [{
|
||
name: '蓝牌',
|
||
value: 1
|
||
}, {
|
||
name: '黄牌',
|
||
value: 2
|
||
}, {
|
||
name: '新能源',
|
||
value: 3
|
||
}, {
|
||
name: '临牌',
|
||
value: 4
|
||
}, {
|
||
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
|
||
}]
|
||
}
|
||
},
|
||
watch:{
|
||
selectedOption(newVal){
|
||
if(newVal == 4){
|
||
this.isMultiple = true
|
||
this.vehicleTypes[2].disabled=true
|
||
this.vehicleTypes[5].disabled=true
|
||
this.vehicleTypes[6].disabled=true
|
||
this.vehicleTypes[7].disabled=true
|
||
this.vehicleTypes[8].disabled=true
|
||
this.vehicleTypes[9].disabled=true
|
||
}else{
|
||
this.isMultiple = false
|
||
this.vehicleTypes[2].disabled=false
|
||
this.vehicleTypes[5].disabled=false
|
||
this.vehicleTypes[6].disabled=false
|
||
this.vehicleTypes[7].disabled=false
|
||
this.vehicleTypes[8].disabled=false
|
||
this.vehicleTypes[9].disabled=false
|
||
}
|
||
if (newVal == 1 || newVal == 7 || newVal == 9){
|
||
let arr = []
|
||
this.supplierServiceList.forEach((item)=>{
|
||
if(!(item.name == '拖车服务' || item.name == '大型车救援')){
|
||
arr.push(item)
|
||
}
|
||
})
|
||
this.supplierServiceList = arr
|
||
}else{
|
||
this.supplierServiceList = this.oldSupplierServiceList
|
||
}
|
||
this.setDefault();
|
||
},
|
||
},
|
||
|
||
async mounted() {
|
||
this.id=this.$route.params?.id
|
||
await this.getSupplierServiceTree();
|
||
await this.getTypeList();
|
||
if( this.id){
|
||
await this.vehicleInfo()
|
||
}
|
||
},
|
||
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 => {
|
||
if( item.value == 1 || item.value == 9 ) {
|
||
item.disabled = false;
|
||
} else {
|
||
item.disabled = true;
|
||
}
|
||
})
|
||
this.$forceUpdate();
|
||
} else {
|
||
this.vehicleTypes.map(item => {
|
||
item.disabled = false;
|
||
})
|
||
this.$forceUpdate();
|
||
}
|
||
},
|
||
getVehicleLicense(color) {
|
||
if( color == '蓝' ) {
|
||
this.vehicleLicense = 1
|
||
} else if(color == '黄') {
|
||
this.vehicleLicense = 2
|
||
} else if(color == '临牌') {
|
||
this.vehicleLicense = 4
|
||
} else if(color.includes('绿')) {
|
||
this.vehicleLicense = 3
|
||
} else {
|
||
this.vehicleLicense = 5
|
||
}
|
||
},
|
||
async vehicleLicenseFrontHandler(file) { // 上传 行驶证首页
|
||
const formData = new FormData();
|
||
formData.append("file" , file.file);
|
||
let res = await uploadImage(formData)
|
||
this.vehicleLicenseFront = res.data;
|
||
await this.vehicleOcrHandler();
|
||
},
|
||
async vehicleLicenseBackHandler(file) { // 上传 行驶证副页
|
||
this.vehicleLicenseBackOcrFlag = true;
|
||
const formData = new FormData();
|
||
formData.append("file" , file.file);
|
||
let res = await uploadImage(formData);
|
||
this.vehicleLicenseBack = res.data;
|
||
await this.vehicleBackOcrHandler();
|
||
},
|
||
async vehicleLicenseCarHandler(file) { // 上传 行驶证车辆照片
|
||
const formData = new FormData();
|
||
formData.append("file" , file.file);
|
||
let res = await uploadImage(formData);
|
||
this.vehicleLicenseCarPhoto = res.data;
|
||
},
|
||
async vehicleFrontPhotoHandler(file) { // 上传 车头照
|
||
const formData = new FormData();
|
||
formData.append("file" , file.file);
|
||
let res = await uploadImage(formData);
|
||
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,
|
||
imageUrl: this.vehicleFrontPhoto,
|
||
cardSide: 'FRONT'
|
||
});
|
||
this.vehicleFrontLicensePlate=res.data?.number
|
||
this.getVehicleLicense(res.data.color)
|
||
},
|
||
async vehicleOcrHandler() { // 行驶证首页 ocr 识别
|
||
this.vehicleLicenseInfo.licensePlateNumber = '';
|
||
this.vehicleLicenseInfo.vehicleType = '';
|
||
this.vehicleLicenseInfo.owner = '';
|
||
this.vehicleLicenseInfo.address = '';
|
||
this.vehicleLicenseInfo.useNature = '';
|
||
this.vehicleLicenseInfo.model = '';
|
||
this.vehicleLicenseInfo.vinCode = '';
|
||
this.vehicleLicenseInfo.engineNumber = '';
|
||
this.vehicleLicenseInfo.registrationDate = '';
|
||
this.vehicleLicenseInfo.issueDate = '';
|
||
this.vehicleLicenseInfo.issueAuthority = '';
|
||
let res = await ocrHandler({
|
||
ocrType: 3,
|
||
imageUrl: this.vehicleLicenseFront,
|
||
cardSide: 'FRONT'
|
||
})
|
||
if ( res?.data?.frontInfo ) {
|
||
let frontInfo = res?.data?.frontInfo;
|
||
this.carNum = frontInfo?.plateNo;
|
||
this.vehicleLicenseInfo.licensePlateNumber = frontInfo?.plateNo;
|
||
this.vehicleLicenseInfo.vehicleType = frontInfo?.vehicleType;
|
||
this.vehicleLicenseInfo.owner = frontInfo?.owner;
|
||
this.vehicleLicenseInfo.address = frontInfo?.address;
|
||
this.vehicleLicenseInfo.useNature = frontInfo?.useCharacter;
|
||
this.vehicleLicenseInfo.model = frontInfo?.model;
|
||
this.vehicleLicenseInfo.vinCode = frontInfo?.vin;
|
||
this.vehicleLicenseInfo.engineNumber = frontInfo?.engineNo;
|
||
this.vehicleLicenseInfo.registrationDate = frontInfo?.registerDate;
|
||
this.vehicleLicenseInfo.issueDate = frontInfo?.issueDate;
|
||
this.vehicleLicenseInfo.issueAuthority = frontInfo?.seal;
|
||
this.setDefault();
|
||
}
|
||
},
|
||
async vehicleBackOcrHandler() { // 行驶证副页 ocr 识别
|
||
this.vehicleLicenseInfo.recordNumber = '';
|
||
this.vehicleLicenseInfo.passengerCapacity = '';
|
||
this.vehicleLicenseInfo.totalWeight = '';
|
||
this.vehicleLicenseInfo.curbWeight = '';
|
||
this.vehicleLicenseInfo.permittedWeight = '';
|
||
this.vehicleLicenseInfo.overallDimension = '';
|
||
this.vehicleLicenseInfo.tractionWeight = '';
|
||
this.vehicleLicenseInfo.backPlateNo = ''; // 行驶证副页 车牌号，仅用来判断 ocr 识别是否成功
|
||
let res = await ocrHandler({
|
||
ocrType: 3,
|
||
imageUrl: this.vehicleLicenseBack,
|
||
cardSide: 'BACK'
|
||
})
|
||
if(res?.data?.backInfo) {
|
||
let backInfo = res?.data?.backInfo;
|
||
this.vehicleLicenseInfo.recordNumber = backInfo?.fileNo;
|
||
this.vehicleLicenseInfo.passengerCapacity = backInfo?.allowNum;
|
||
this.vehicleLicenseInfo.totalWeight = backInfo?.totalMass;
|
||
this.vehicleLicenseInfo.curbWeight = backInfo?.curbWeight;
|
||
this.vehicleLicenseInfo.permittedWeight = backInfo?.loadQuality;
|
||
this.vehicleLicenseInfo.overallDimension = backInfo?.externalSize;
|
||
this.vehicleLicenseInfo.tractionWeight = backInfo?.TotalQuasiMass;
|
||
this.vehicleLicenseInfo.backPlateNo = backInfo?.plateNo;
|
||
}
|
||
console.log('this.vehicle', this.vehicleLicenseInfo)
|
||
},
|
||
loadAll(i){
|
||
// console.log(i)
|
||
this.show = !this.show
|
||
const refName='checkboxGroup' + i;
|
||
const element1 = this.$refs[refName]; // 通过动态属性名访问引用this.$refs.checkboxGroup.style.display = 'block';
|
||
const refName1='serviceline' + i;
|
||
const element = this.$refs[refName1];
|
||
if(this.show){
|
||
element1[0].style.display = 'block'
|
||
element[0].src= require('@/assets/arr_bot.png')
|
||
}else {
|
||
element1[0].style.display = 'none'
|
||
element[0].src= require('@/assets/arr_right.png')
|
||
}
|
||
},
|
||
async getTypeList() {
|
||
let result=await vehicleTypeList();
|
||
this.typeList=[]
|
||
if(result.code === 200){
|
||
for (const key in result.data){
|
||
// console.log("keys",result.data[key])
|
||
this.typeList.push({name:result.data[key],disabled:false,value:(key+1)})
|
||
// this.typeList.push(result.data[key])
|
||
|
||
}
|
||
}
|
||
},
|
||
async getSupplierServiceTree(){
|
||
let res = await supplierServiceTree();
|
||
this.supplierServiceList=res.data
|
||
this.oldSupplierServiceList=this.supplierServiceList
|
||
},
|
||
async vehicleInfo(){
|
||
let res= await getInfoById({
|
||
vehicleId:this.id
|
||
})
|
||
let result=res.data;
|
||
console.log("result",result)
|
||
this.id=result.vehicleId
|
||
this.carNum=result.plateNumber
|
||
this.isJoin=result.hasPolymerization.code
|
||
this.selectedOption=result.vehicleType?.split(',').map((item)=>{
|
||
return Number(item);
|
||
});
|
||
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.insuranceCorp = result.insuranceCorp;
|
||
if(this.insurancePicturePhoto) {
|
||
this.insurancePictureFiles = [{url: this.insurancePicturePhoto}]
|
||
}
|
||
if( this.vehicleLicenseFront ) {
|
||
this.vehicleLicenseFrontList = [{ url : this.vehicleLicenseFront }];
|
||
}
|
||
if(this.vehicleLicenseBack) {
|
||
this.vehicleLicenseBackList = [{ url : this.vehicleLicenseBack }];
|
||
}
|
||
if(this.vehicleFrontPhoto) {
|
||
this.vehicleFrontPhotoList = [{ url : this.vehicleFrontPhoto }];
|
||
}
|
||
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.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 ) {
|
||
this.$toast('行驶证主页照片不能为空')
|
||
return
|
||
}
|
||
if( !this.vehicleLicenseBack ) {
|
||
this.$toast('行驶证副页照片不能为空')
|
||
return
|
||
}
|
||
if( !this.vehicleLicenseCarPhoto ) {
|
||
this.$toast('行驶证车辆照片页不能为空')
|
||
return
|
||
}
|
||
if( !this.vehicleFrontPhoto ) {
|
||
this.$toast('车头照片不能为空')
|
||
return
|
||
}
|
||
if( !this.vehicleLicenseInfo.licensePlateNumber ) {
|
||
this.$toast('行驶证主页识别失败')
|
||
return
|
||
}
|
||
if(this.vehicleLicenseBackOcrFlag && !this.vehicleLicenseInfo.backPlateNo ) {
|
||
this.$toast('行驶证副页识别失败')
|
||
return
|
||
}
|
||
if(!(this.selectedOption.length > 0)){
|
||
this.$toast('车辆类别不能为空')
|
||
return
|
||
}
|
||
if( !this.virtualVehicle ) {
|
||
this.$toast('车辆属性不能为空')
|
||
return
|
||
}
|
||
if( !this.vehicleStatus ) {
|
||
this.$toast('车辆状态不能为空')
|
||
return
|
||
}
|
||
if(this.hasLiabilityInsurance === null || this.hasLiabilityInsurance === undefined || this.hasLiabilityInsurance === '') { // 有职业责任险，就需要有保单照片
|
||
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 :'',
|
||
vehicleType:this.selectedOption?.length>0 ? this.selectedOption.join(',') : '',
|
||
// hasPolymerization:this.isJoin,
|
||
serviceIds:this.serviceIds ? this.serviceIds : [],
|
||
vehicleLicenseFront: this.vehicleLicenseFront,
|
||
vehicleLicenseBack: this.vehicleLicenseBack,
|
||
vehicleFrontPhoto: this.vehicleFrontPhoto,
|
||
vehicleLicenseInfo: this.vehicleLicenseInfo,
|
||
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('修改成功')
|
||
}else{
|
||
this.$toast('添加成功')
|
||
}
|
||
setTimeout(()=>{
|
||
this.$router.back();
|
||
},2000)
|
||
}
|
||
},
|
||
components:{
|
||
CellGroup,
|
||
TwoCommonBtn
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.vehicleAdd .van-field__control:disabled {
|
||
color: #323643 !important;
|
||
-webkit-text-fill-color: #323643 !important;
|
||
}
|
||
</style>
|
||
<style scoped lang="scss">
|
||
@import "@/styles/mixin.scss";
|
||
@import "@/styles/common.scss";
|
||
.mySelect{
|
||
@include fontWeightSize(bold,13px);
|
||
color: #323643;
|
||
appearance: none;
|
||
padding-right: 16px;
|
||
background: url('@/assets/arrow_bot.png') no-repeat right center / 15px 14px;
|
||
}
|
||
.checkbox-group {
|
||
display: none;
|
||
}
|
||
.navBar{
|
||
margin-bottom: 46px;
|
||
}
|
||
.wrap{
|
||
@include wh(100%,100%);
|
||
overflow-y: auto;
|
||
}
|
||
.addContentWrap{
|
||
margin-left: 16px;
|
||
.itemContent{
|
||
@include flexColBet;
|
||
line-height: 56px;
|
||
box-sizing: border-box;
|
||
padding-right: 25px;
|
||
.titleType{
|
||
@include fontWeightSize(bold,14px);
|
||
color: #323643;
|
||
}
|
||
.isJoin{
|
||
display: flex;
|
||
.joinWrap{
|
||
display: flex;
|
||
}
|
||
img{
|
||
@include widHeiMar(16px,16px,6px)
|
||
}
|
||
}
|
||
.startImg{
|
||
@include widHeiMar(6px,6px,3px);
|
||
vertical-align: super;
|
||
}
|
||
input{
|
||
border: none;
|
||
text-align: right;
|
||
@include fontWeightSize(bold,13px);
|
||
opacity: .5;
|
||
}
|
||
}
|
||
.lineBot{
|
||
@include wh(100%,1px);
|
||
background: #E9E9EA;
|
||
opacity: 0.6;
|
||
}
|
||
.serviceType{
|
||
@include fontWeightSize(bold,13px);
|
||
margin-left: 15px;
|
||
.trailerService{
|
||
margin-bottom: 10px;
|
||
}
|
||
.serviceline{
|
||
@include flexCenter;
|
||
margin-bottom: 10px;
|
||
}
|
||
.item{
|
||
margin: 20px 0;
|
||
@include flexCenter;
|
||
}
|
||
.radioWrap{
|
||
margin-left: 10px;
|
||
}
|
||
.service{
|
||
@include colorOpa(#323643,0.7);
|
||
line-height: 18px;
|
||
white-space: nowrap;
|
||
}
|
||
.line{
|
||
display: inline-block;
|
||
@include wh(240px,2px);
|
||
opacity: 0.16;
|
||
border-bottom: 1px solid;
|
||
border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
|
||
}
|
||
img{
|
||
@include widHeiMar(16px,16px,12px)
|
||
}
|
||
}
|
||
.btn{
|
||
width: 90%;
|
||
margin: 40px 0 30px 8px;
|
||
}
|
||
}
|
||
.elSelect ::v-deep .el-input__inner{
|
||
border: none !important;
|
||
text-align: right !important;
|
||
}
|
||
</style>
|