508 lines
15 KiB
Vue
508 lines
15 KiB
Vue
<template>
|
|
<view class="container">
|
|
<VNavigationBar :title="pageTitle" background-color="#fff" title-color="#333"></VNavigationBar>
|
|
<view class="body">
|
|
<u-form labelPosition="top">
|
|
<view class="card">
|
|
<u-form-item borderBottom label="上传图片" labelWidth="200">
|
|
<u-upload
|
|
:fileList="fileList1"
|
|
@afterRead="afterRead"
|
|
@delete="deletePic"
|
|
name="1"
|
|
:maxCount="1"
|
|
multiple
|
|
></u-upload>
|
|
</u-form-item>
|
|
<u-form-item borderBottom label="车牌号" labelWidth="200" @click="carInputClick();">
|
|
<u-input
|
|
@click="carInputClick();"
|
|
v-model="car.licenseNumber"
|
|
border="none"
|
|
disabled
|
|
disabledColor="#ffffff"
|
|
placeholder="请输入车牌号"
|
|
></u-input>
|
|
<u-icon
|
|
slot="right"
|
|
name="arrow-right"
|
|
></u-icon>
|
|
</u-form-item>
|
|
<!-- @click="brandType = true;"-->
|
|
<u-form-item label="车辆品牌" labelWidth="200">
|
|
<song-data-picker
|
|
ref="songpicker"
|
|
style=" width: 100%;"
|
|
:localdata="brandList"
|
|
popup-title="请选择品牌"
|
|
:openSearch="true"
|
|
@change="onchange"
|
|
@nodeclick="onnodeclick"
|
|
></song-data-picker>
|
|
<!-- <picker @change="picker($event)" :value="arrayIndex" :range="brandList" range-key="brandName" v-if="brandList">-->
|
|
<!-- <view class="uni-input">{{ brandList && brandList[arrayIndex] ? brandList[arrayIndex].brandName : '' }}</view>-->
|
|
<!-- </picker>-->
|
|
</u-form-item>
|
|
<u-form-item label="车辆型号" labelWidth="200">
|
|
<u-input
|
|
v-model="car.carModel"
|
|
border="none"
|
|
placeholder="请输入车辆型号"
|
|
></u-input>
|
|
</u-form-item>
|
|
<u-form-item class="formItem" label="车辆性质" labelWidth="200">
|
|
<picker @change="natureChange" :value="natureIndex" :range="natureList" range-key="value" v-if="natureList">
|
|
<view class="uni-input">{{ natureList[natureIndex].value}}</view>
|
|
</picker>
|
|
</u-form-item>
|
|
</view>
|
|
|
|
<view class="card">
|
|
<u-form-item borderBottom label="车架号" labelWidth="200">
|
|
<u-input v-model="car.vin" border="none" placeholder="请输入车架号"></u-input>
|
|
</u-form-item>
|
|
<u-form-item borderBottom label="发动机号" labelWidth="200">
|
|
<u-input v-model="car.engineNumber" border="none" placeholder="请输入发动机号"></u-input>
|
|
</u-form-item>
|
|
<u-form-item borderBottom label="年检到期时间" labelWidth="200" @click="openDatePicker('nj'); ">
|
|
<u-input
|
|
v-model="car.nextInspectionDate"
|
|
border="none"
|
|
disabled
|
|
disabledColor="#ffffff"
|
|
placeholder="请选择年检到期时间"
|
|
></u-input>
|
|
<u-icon
|
|
slot="right"
|
|
name="arrow-right"
|
|
></u-icon>
|
|
</u-form-item>
|
|
<u-form-item borderBottom label="保险到期时间" labelWidth="200" @click="openDatePicker('bx'); hideKeyboard()">
|
|
<u-input
|
|
v-model="car.insuranceExpiryDate"
|
|
border="none"
|
|
disabled
|
|
disabledColor="#ffffff"
|
|
placeholder="请选择保险到期时间"
|
|
></u-input>
|
|
<u-icon
|
|
slot="right"
|
|
name="arrow-right"
|
|
></u-icon>
|
|
</u-form-item>
|
|
<u-form-item label="注册日期时间" labelWidth="200" @click="openDatePicker('zcrq'); hideKeyboard()">
|
|
<u-input
|
|
v-model="car.carRegisterDate"
|
|
border="none"
|
|
disabled
|
|
disabledColor="#ffffff"
|
|
placeholder="请选择注册日期时间"
|
|
></u-input>
|
|
<u-icon
|
|
slot="right"
|
|
name="arrow-right"
|
|
></u-icon>
|
|
</u-form-item>
|
|
</view>
|
|
</u-form>
|
|
|
|
|
|
<keyboard-plate ref="plateNumber" :plateNum.sync='car.licenseNumber' isShow
|
|
@change="getPlateNum"></keyboard-plate>
|
|
<u-datetime-picker
|
|
v-model="datePickerValue"
|
|
:formatter="formatter"
|
|
:show="datePickerShow"
|
|
mode="date"
|
|
@cancel="datePickerCancel"
|
|
@confirm="datePickerConfirm"
|
|
></u-datetime-picker>
|
|
</view>
|
|
<view class="footer">
|
|
<view class="btnItem edit" @click="submit">
|
|
确定
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import VNavigationBar from '@/components/VNavigationBar.vue';
|
|
import request from "@/utils/request";
|
|
import config from '@/config'
|
|
import upload from "@/utils/upload";
|
|
import {getDictByCode} from "@/utils/utils";
|
|
|
|
export default {
|
|
components: {
|
|
VNavigationBar
|
|
},
|
|
data() {
|
|
return {
|
|
pageTitle: '',
|
|
car: {
|
|
// 车牌号
|
|
licenseNumber: '',
|
|
// 型号
|
|
carModelInput: '',
|
|
// 品牌id
|
|
carBrand: '',
|
|
// 车辆类别 字典字段
|
|
carCategory: '',
|
|
// 车辆性质 字典字段
|
|
carNature: '',
|
|
// 注册日期
|
|
carRegisterDate: '',
|
|
// 车辆品牌型号数组
|
|
brandAndModel: [],
|
|
},
|
|
userInfo: {},
|
|
bo1: false,
|
|
bo2: true,
|
|
|
|
datePickerShow: false,
|
|
datePickerValue: new Date().getTime(),
|
|
pickerConfirmField: 'njDate',
|
|
showType: false,
|
|
brandType: false,
|
|
typeList: [],
|
|
//所有可选车辆品牌
|
|
brandList: [],
|
|
//选中的车辆品牌id
|
|
brandId: '',
|
|
//选中的车辆品牌名称
|
|
brandName: 0,
|
|
fileList1: [],
|
|
imageUrl: '',
|
|
//可选车辆性质范围
|
|
natureList: [],
|
|
natureIndex: 0,
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
// 如果是修改
|
|
if (options.car) {
|
|
// 有数据为编辑 或 删除
|
|
this.car = JSON.parse(decodeURIComponent(options.car));
|
|
this.brandId = this.car.carBrand
|
|
console.log('初始化页面数据', this.car)
|
|
this.bo1 = true;
|
|
this.bo2 = false;
|
|
this.pageTitle = '修改车辆信息'
|
|
if (this.car.carLicenseImg) {
|
|
this.fileList1.push({
|
|
url: config.baseImageUrl + this.car.carLicenseImg
|
|
})
|
|
}
|
|
} else {
|
|
// 没有数据 需要赋值一下初始化
|
|
this.bo1 = false;
|
|
this.bo2 = true;
|
|
this.pageTitle = '添加车辆信息'
|
|
}
|
|
this.getBrandList()
|
|
this.getNatureList()
|
|
this.car.userId = JSON.parse(decodeURIComponent(options.userInfo)).userId;
|
|
this.userInfo = JSON.parse(decodeURIComponent(options.userInfo))
|
|
console.log(this.car)
|
|
},
|
|
methods: {
|
|
onchange(e) {
|
|
this.brandId = e.detail.value[0].id
|
|
this.brandName = e.detail.value[0].brandName
|
|
},
|
|
onnodeclick(node) {
|
|
console.log(node,"node")
|
|
},
|
|
typeSelect(e) {
|
|
},
|
|
// 车辆性质选择事件
|
|
natureChange(event) {
|
|
const newIndex = event.detail.value;
|
|
this.natureIndex = newIndex;
|
|
//
|
|
this.car.carNature = this.natureList[newIndex].value;
|
|
},
|
|
getBrandList() {
|
|
request({
|
|
url: '/admin-api/base/carBrand/page',
|
|
method: 'GET',
|
|
params: {
|
|
pageNo: 1,
|
|
pageSize: 10000
|
|
}
|
|
}).then(res => {
|
|
res.data.records.forEach(item => {
|
|
item.text = item.brandName,
|
|
item.value = item.id
|
|
})
|
|
this.brandList = res.data.records
|
|
if (this.car) {
|
|
for (let i = 0; i < this.brandList.length; i++) {
|
|
if (this.car.carBrand == this.brandList[i].id) {
|
|
this.setCarBrand(this.brandList[i].id,this.brandList[i].brandName)
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
// 打开车牌选择器
|
|
carInputClick() {
|
|
this.$refs.plateNumber.open();
|
|
},
|
|
getPlateNum(e) {
|
|
|
|
},
|
|
|
|
openDatePicker(picker) {
|
|
if (picker === 'nj') {
|
|
this.pickerConfirmField = 'nextInspectionDate'
|
|
} else if (picker === 'bx') {
|
|
this.pickerConfirmField = 'insuranceExpiryDate'
|
|
} else if (picker === 'zcrq') {
|
|
this.pickerConfirmField = 'carRegisterDate'
|
|
}
|
|
this.datePickerShow = true
|
|
},
|
|
datePickerConfirm({value}, field, picker) {
|
|
let date;
|
|
|
|
// 检查 value 是否为时间戳
|
|
if (typeof value === 'number') {
|
|
// 如果是时间戳，确保是毫秒单位
|
|
date = new Date(value);
|
|
} else if (typeof value === 'string') {
|
|
// 如果是日期字符串，尝试解析
|
|
date = new Date(value);
|
|
}
|
|
|
|
// 检查日期是否有效
|
|
if (isNaN(date.getTime())) {
|
|
console.error('Invalid date:', value);
|
|
return;
|
|
}
|
|
this.car[this.pickerConfirmField] = date.getFullYear() + '-' + (Number(date.getMonth()) + 1 + '').padStart(2, '0') + '-' + (date.getDate() + '').padStart(2, '0')
|
|
this.datePickerCancel(picker)
|
|
},
|
|
datePickerCancel(picker) {
|
|
this.datePickerValue = new Date().getTime()
|
|
this.datePickerShow = false
|
|
},
|
|
formatter(type, value) {
|
|
if (type === 'year') {
|
|
return `${value}年`
|
|
}
|
|
if (type === 'month') {
|
|
return `${value}月`
|
|
}
|
|
if (type === 'day') {
|
|
return `${value}日`
|
|
}
|
|
return value
|
|
},
|
|
// 新增
|
|
async submit() {
|
|
|
|
// bus.$emit('updateCarInfo', this.car)
|
|
this.car.brandAndModel = [this.brandId, this.car.carModel]
|
|
//将日期转为时间戳
|
|
if (this.car.nextInspectionDate) {
|
|
this.car.nextInspectionDate = new Date(this.car.nextInspectionDate).getTime()
|
|
}else {
|
|
this.car.nextInspectionDate = undefined
|
|
}
|
|
if (this.car.insuranceExpiryDate) {
|
|
this.car.insuranceExpiryDate = new Date(this.car.insuranceExpiryDate).getTime()
|
|
}else {
|
|
this.car.insuranceExpiryDate = undefined
|
|
}
|
|
if (this.car.carRegisterDate) {
|
|
this.car.carRegisterDate = new Date(this.car.carRegisterDate).getTime()
|
|
}else {
|
|
this.car.carRegisterDate = undefined
|
|
}
|
|
console.log(this.car,"car")
|
|
if (this.car.id != null) {
|
|
request({
|
|
url: '/admin-api/base/carMain/update',
|
|
method: 'PUT',
|
|
data: this.car,
|
|
}).then(res => {
|
|
uni.navigateBack();
|
|
})
|
|
} else {
|
|
request({
|
|
url: '/admin-api/base/carMain/create',
|
|
method: 'POST',
|
|
data: this.car,
|
|
}).then(res => {
|
|
request({
|
|
url: '/admin-api/base/carMain/page',
|
|
method: 'GET',
|
|
params: {
|
|
licenseNumber: this.car.licenseNumber
|
|
}
|
|
}).then(res => {
|
|
this.car = res.data.records[0]
|
|
request({
|
|
url: '/admin-api/base/custom/bindCustomerCar',
|
|
method: 'post',
|
|
data: {
|
|
carList: [this.car],
|
|
id: this.userInfo.id
|
|
}
|
|
}).then(res => {
|
|
uni.navigateBack();
|
|
})
|
|
})
|
|
|
|
})
|
|
}
|
|
},
|
|
// 查询下拉 车辆性质
|
|
async getNatureList() {
|
|
this.natureList= getDictByCode('car_nature')
|
|
if (this.bo2 == true) {
|
|
// setTimeout(() => {
|
|
// this.car.carNature = this.natureList[0].value;
|
|
// }, 15000)
|
|
} else {
|
|
// 如果是修改 遍历当前集合 将index 同步
|
|
this.natureList.forEach((item, index) => {
|
|
if (item.value == this.car.carNature) {
|
|
this.natureIndex = index;
|
|
}
|
|
})
|
|
}
|
|
|
|
},
|
|
// 删除图片
|
|
deletePic(event) {
|
|
this[`fileList${event.name}`].splice(event.index, 1)
|
|
},
|
|
// 新增图片
|
|
async afterRead(event) {
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|
let lists = [].concat(event.file)
|
|
let fileListLen = this[`fileList${event.name}`].length
|
|
lists.map((item) => {
|
|
this[`fileList${event.name}`].push({
|
|
...item,
|
|
status: 'uploading',
|
|
message: '上传中'
|
|
})
|
|
})
|
|
uni.showLoading({
|
|
title: '正在识别中...'
|
|
});
|
|
for (let i = 0; i < lists.length; i++) {
|
|
const result = await this.uploadFilePromise(lists[i].url)
|
|
let item = this[`fileList${event.name}`][fileListLen]
|
|
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
|
status: 'success',
|
|
message: '',
|
|
url: result
|
|
}))
|
|
fileListLen++
|
|
}
|
|
},
|
|
uploadFilePromise(url) {
|
|
return new Promise((resolve, reject) => {
|
|
upload({
|
|
url: '/admin-api/infra/file/upload',
|
|
filePath: url
|
|
}).then(res => {
|
|
resolve(config.baseImageUrl +res.data)
|
|
this.car.carLicenseImg = res.data
|
|
this.imageUrl = config.baseImageUrl + res.data
|
|
request({
|
|
url: '/admin-api/base/carMain/vehicleLicenseOCR',
|
|
method: 'POST',
|
|
data: this.imageUrl,
|
|
tenantIdFlag: false
|
|
}).then((res) => {
|
|
this.car.vin = res.data.vin
|
|
this.car.licenseNumber = res.data.plateNo
|
|
this.car.carRegisterDate = res.data.issueDate
|
|
this.car.engineNumber = res.data.engineNo
|
|
//车辆品牌自动定位
|
|
this.brandList.forEach((item, index) => {
|
|
if (item.brandName == res.data.brand) {
|
|
this.setCarBrand(item.id,item.brandName)
|
|
}
|
|
})
|
|
//车辆性质自动定位
|
|
this.natureList.forEach((item, index) => {
|
|
if (item.label == res.data.useCharacter) {
|
|
this.natureIndex = index;
|
|
this.car.carNature = this.natureList[index].value;
|
|
}
|
|
})
|
|
uni.hideLoading()
|
|
})
|
|
})
|
|
})
|
|
},
|
|
/**
|
|
* 设置选中的车辆品牌
|
|
* @param id
|
|
* @param name
|
|
*/
|
|
setCarBrand(id,name){
|
|
this.$nextTick(()=>{
|
|
this.brandId = id
|
|
this.brandName = name
|
|
this.$refs.songpicker.inputSelected=[{text:name,value:id}]
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
|
.container {
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
background-color: #f3f5f7;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.body {
|
|
flex: 1;
|
|
height: 0;
|
|
overflow: auto;
|
|
|
|
.card {
|
|
margin: 20rpx 30rpx;
|
|
padding: 0 30rpx;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
background: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
padding: 30rpx 0;
|
|
|
|
.btnItem {
|
|
width: 510rpx;
|
|
height: 76rpx;
|
|
background: #0174F6;
|
|
border-radius: 38rpx 38rpx 38rpx 38rpx;
|
|
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
|
|
line-height: 76rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|