363 lines
9.8 KiB
Vue
363 lines
9.8 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></u-upload>
|
|
</u-form-item>
|
|
<u-form-item borderBottom label="车牌号" labelWidth="200" @click="carInputClick();">
|
|
<u-input
|
|
v-model="car.licenseNumber"
|
|
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="brandType = true;">
|
|
<u-input
|
|
v-model="car.brandStr"
|
|
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">
|
|
<u-input
|
|
v-model="car.carModel"
|
|
border="none"
|
|
placeholder="请输入车辆型号"
|
|
></u-input>
|
|
</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.inspectionDate"
|
|
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.insuranceDate"
|
|
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>
|
|
|
|
<!-- 车辆品牌 -->
|
|
<u-action-sheet
|
|
:actions="brandList"
|
|
:show="brandType"
|
|
title="请选择车辆品牌"
|
|
@close="brandType = false"
|
|
@select="brandSelect"
|
|
>
|
|
</u-action-sheet>
|
|
<!-- 车辆型号 -->
|
|
<u-action-sheet
|
|
:actions="typeList"
|
|
:show="showType"
|
|
title="请选择车辆型号"
|
|
@close="showType = false"
|
|
@select="typeSelect"
|
|
>
|
|
</u-action-sheet>
|
|
|
|
<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 {bus} from "@/utils/eventBus";
|
|
import request from "@/utils/request";
|
|
|
|
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',
|
|
brandId:'',
|
|
|
|
showType: false,
|
|
brandType: false,
|
|
typeList: [],
|
|
brandList: [],
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
// 如果是修改
|
|
if (options.car) {
|
|
// 有数据为编辑 或 删除
|
|
this.car = JSON.parse(decodeURIComponent(options.car));
|
|
console.log('初始化页面数据', this.car)
|
|
this.bo1 = true;
|
|
this.bo2 = false;
|
|
this.pageTitle = '修改车辆信息'
|
|
} else {
|
|
// 没有数据 需要赋值一下初始化
|
|
this.bo1 = false;
|
|
this.bo2 = true;
|
|
this.pageTitle = '添加车辆信息'
|
|
}
|
|
this.car.userId = JSON.parse(decodeURIComponent(options.userInfo)).userId;
|
|
this.userInfo = JSON.parse(decodeURIComponent(options.userInfo))
|
|
console.log(this.car)
|
|
this.getBrandList()
|
|
},
|
|
methods: {
|
|
typeSelect(e) {
|
|
console.log('e', e)
|
|
},
|
|
brandSelect(e) {
|
|
console.log('e', e)
|
|
this.brandId = e.value
|
|
// this.getCarModule()
|
|
},
|
|
getBrandList() {
|
|
request({
|
|
url: '/admin-api/base/carBrand/page',
|
|
method: 'GET',
|
|
params: {
|
|
page: 1,
|
|
size: 10000
|
|
}
|
|
}).then(res => {
|
|
console.log(res);
|
|
res.data.records.forEach(item => {
|
|
item.name = item.brandName,
|
|
item.value = item.id
|
|
})
|
|
this.brandList = res.data.records
|
|
})
|
|
},
|
|
|
|
// 打开车牌选择器
|
|
carInputClick() {
|
|
this.$refs.plateNumber.open();
|
|
},
|
|
getPlateNum(e) {
|
|
|
|
},
|
|
|
|
openDatePicker(picker) {
|
|
if (picker === 'nj') {
|
|
this.pickerConfirmField = 'inspectionDate'
|
|
} else if (picker === 'bx') {
|
|
this.pickerConfirmField = 'insuranceDate'
|
|
} else if (picker === 'zcrq') {
|
|
this.pickerConfirmField = 'carRegisterDate'
|
|
}
|
|
this.datePickerShow = true
|
|
},
|
|
datePickerConfirm({value}, field, picker) {
|
|
const date = new Date(value)
|
|
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}日`
|
|
}
|
|
console.log('for value', value)
|
|
return value
|
|
},
|
|
// 新增
|
|
async submit() {
|
|
// bus.$emit('updateCarInfo', this.car)
|
|
this.car.brandAndModel = [this.brandId, this.car.carModel]
|
|
console.log("car",this.car)
|
|
if (this.car.id != null) {
|
|
request({
|
|
url: '/admin-api/base/carMain/update',
|
|
method: 'PUT',
|
|
data: this.car,
|
|
})
|
|
} 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]
|
|
console.log("执行")
|
|
request({
|
|
url: '/admin-api/base/custom/bindCustomerCar',
|
|
method: 'post',
|
|
data :{
|
|
carList: [this.car],
|
|
id: this.userInfo.id
|
|
}
|
|
}).then( res =>{
|
|
uni.navigateBack();
|
|
})
|
|
})
|
|
|
|
})
|
|
}
|
|
|
|
// let res = await request({
|
|
// url: '/userClient/base/myCar/create',
|
|
// method: 'POST',
|
|
// data: this.car,
|
|
// })
|
|
// if (res.code == 200) {
|
|
// // 新增成功返回上一个页面
|
|
// bus.$emit('updateCarInfo', res.result)
|
|
// uni.navigateBack();
|
|
// }
|
|
},
|
|
}
|
|
}
|
|
</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>
|