500 lines
12 KiB
Vue
500 lines
12 KiB
Vue
<template>
|
|
<view class="carManageFormContent">
|
|
<v-navigation-bar title="新增车辆"></v-navigation-bar>
|
|
<view class="body">
|
|
<view class="ail">
|
|
<view class="dis_">
|
|
<view class="">车辆类型</view>
|
|
<view class="right_" @click="show= true">{{carInfo.rescueCarTypeStr||'请选择'}}</view>
|
|
</view>
|
|
<view class="dis_">
|
|
<view class="">车牌号</view>
|
|
<view class="right_"> <input placeholder-class="inputPlaceholder" type="text" placeholder="请输入"
|
|
v-model="carInfo.rescueCarNum" /> </view>
|
|
</view>
|
|
<view class="dis_">
|
|
<view class="">品牌型号</view>
|
|
<view class="right_"> <input placeholder-class="inputPlaceholder" placeholder="请输入" type="text"
|
|
v-model="carInfo.rescueCarBrand" /> </view>
|
|
</view>
|
|
<view class="dis_">
|
|
<view class="">车辆图片</view>
|
|
<view class="rightImg">
|
|
<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic1" name="1" :maxCount="1">
|
|
<view class="uploadBtn">
|
|
<image class="uploadBtnIcon" src="/static/icons/carManage/image.png" mode="aspectFit"></image>
|
|
</view>
|
|
</u-upload>
|
|
</view>
|
|
</view>
|
|
<view class="dis_">
|
|
<view class="">行驶证</view>
|
|
<view class="rightImg">
|
|
<u-upload :fileList="fileList2" @afterRead="afterRead2" @delete="deletePic2" name="2" :maxCount="1">
|
|
<view class="uploadBtn">
|
|
<image class="uploadBtnIcon" src="/static/icons/carManage/image.png" mode="aspectFit"></image>
|
|
</view>
|
|
</u-upload>
|
|
</view>
|
|
</view>
|
|
<view class="dis_">
|
|
<view class="">购买时间</view>
|
|
<view class="right_" @click="seletTime('buy')">{{carInfo.carBuyTime||'请选择'}}
|
|
</view>
|
|
</view>
|
|
<view class="dis_">
|
|
<view class="">保养到期时间</view>
|
|
<view class="right_" @click="seletTime('by')"> {{carInfo.carKeepTime||'请选择'}}
|
|
</view>
|
|
</view>
|
|
<view class="dis_">
|
|
<view class="">保险到期时间</view>
|
|
<view class="right_" @click="seletTime('bx')"> {{carInfo.carInsuranceTime||'请选择'}}
|
|
</view>
|
|
</view>
|
|
<view class="dis_">
|
|
<view class="">年检到期时间</view>
|
|
<view class="right_" @click="seletTime('nj')">{{carInfo.carCheckTime||'请选择'}}
|
|
</view>
|
|
</view>
|
|
<view class="dis_">
|
|
<view class="">车牌颜色</view>
|
|
<view class="right_" @click="carColorShow = true">{{carInfo.carLicenseColorStr||'请选择'}}
|
|
</view>
|
|
</view>
|
|
<view class="dis_">
|
|
<view class="">车架号</view>
|
|
<view class="right_"> <input placeholder-class="inputPlaceholder" placeholder="请输入" type="text"
|
|
v-model="carInfo.frameNumber" />
|
|
</view>
|
|
</view>
|
|
<view class="bo_dis">
|
|
<!-- <u-button type="error" v-if="carId" @click="delItem()" text="删除"></u-button> -->
|
|
<view class="deleteBtn" v-if="carId" @click="delItem()">删除</view>
|
|
<view class="saveBtn" @click="saveOrUpdate" >保存</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<tab-bar-vue msg="1"></tab-bar-vue>
|
|
<view>
|
|
<u-picker :show="show" :columns="jycType" keyName="dictLabel" @confirm="confirm" @cancel="cancel"></u-picker>
|
|
<u-picker :show="carColorShow" :columns="licenseColor" keyName="dictLabel" @confirm="confirmClor"
|
|
@cancel="cancel"></u-picker>
|
|
<u-datetime-picker :show="showtime" mode="date" @confirm="confirmtime"
|
|
@cancel="showtime = false"></u-datetime-picker>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import request from '../../utils/request';
|
|
import upload from '@/utils/upload.js'
|
|
import VNavigationBar from '@/components/VNavigationBar.vue'
|
|
import tabBarVue from '../../components/tabBar/tabBar.vue'
|
|
export default {
|
|
components: {
|
|
VNavigationBar,
|
|
tabBarVue
|
|
},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
carColorShow: false,
|
|
showtime: false,
|
|
carId: null,
|
|
timeType: 'buy',
|
|
fileList1: [],
|
|
fileList2: [],
|
|
imageList1: [],
|
|
imageList2: [],
|
|
carInfo: {
|
|
rescueCarType: "", //车辆类型
|
|
rescueCarNum: "", //车牌号
|
|
rescueCarBrand: "", //品牌型号
|
|
carImage: "", //车辆图片
|
|
driveLicenseImage: "", //行驶证
|
|
carBuyTime: "", //购买时间
|
|
carKeepTime: "", //保养到期时间
|
|
carInsuranceTime: "", //保险到期时间
|
|
carCheckTime: "", //年检到期时间
|
|
carLicenseColor: "", //车牌颜色
|
|
carUseNature: "", //使用性质
|
|
frameNumber: "" //车架号
|
|
},
|
|
carUseNature: [], //使用性质列表
|
|
jycType: [], //救援车类型
|
|
licenseColor: [] //车牌颜色
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.carId = option.id
|
|
this.getDictList()
|
|
if (this.carId) {
|
|
this.getCarInfo()
|
|
}
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
methods: {
|
|
delItem() {
|
|
request({
|
|
url: "/system/rescueCar/" + this.carId,
|
|
method: 'delete',
|
|
}).then(res => {
|
|
|
|
uni.showToast({
|
|
title: "删除成功"
|
|
})
|
|
|
|
setTimeout(function() {
|
|
uni.navigateBack()
|
|
}.bind(this), 1000); // 2000毫秒后执行
|
|
})
|
|
},
|
|
// 删除图片
|
|
deletePic1(event) {
|
|
this.imageList1.splice(event.index, 1)
|
|
this.fileList1.splice(event.index, 1)
|
|
console.log(this.fileList1, this.fileList2);
|
|
},
|
|
// 删除图片
|
|
deletePic2(event) {
|
|
this.imageList2.splice(event.index, 1)
|
|
this.fileList2.splice(event.index, 1)
|
|
console.log(this.fileList1, this.fileList2);
|
|
},
|
|
// 新增图片
|
|
async afterRead2(event) {
|
|
console.log('执行了', event);
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|
let lists = [].concat(event.file)
|
|
let fileListLen = this.fileList2.length
|
|
lists.map((item) => {
|
|
this.fileList2.push({
|
|
...item,
|
|
|
|
})
|
|
})
|
|
for (let i = 0; i < lists.length; i++) {
|
|
console.log('路径', lists[i].url);
|
|
const result = await this.uploadFilePromise2(lists[i].url)
|
|
let item = this.fileList2[fileListLen]
|
|
this.fileList2.splice(fileListLen, 1, Object.assign(item, {
|
|
status: 'success',
|
|
message: '',
|
|
url: result
|
|
}))
|
|
fileListLen++
|
|
}
|
|
},
|
|
|
|
// 新增图片
|
|
async afterRead(event) {
|
|
console.log('执行了', event);
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|
let lists = [].concat(event.file)
|
|
let fileListLen = this.fileList1.length
|
|
lists.map((item) => {
|
|
this.fileList1.push({
|
|
...item,
|
|
|
|
})
|
|
})
|
|
for (let i = 0; i < lists.length; i++) {
|
|
console.log('路径', lists[i].url);
|
|
|
|
|
|
const result = await this.uploadFilePromise1(lists[i].url)
|
|
}
|
|
console.log('当前list', this.fileList1);
|
|
},
|
|
uploadFilePromise1(url) {
|
|
|
|
uni.compressImage({
|
|
src: url,
|
|
|
|
success: res => {
|
|
upload({
|
|
url: '/common/upload',
|
|
filePath: res.tempFilePath,
|
|
}).then((res) => {
|
|
this.imageList1.push(res.fileName)
|
|
console.log(res);
|
|
})
|
|
|
|
}
|
|
})
|
|
|
|
|
|
},
|
|
uploadFilePromise2(url) {
|
|
|
|
uni.compressImage({
|
|
src: url,
|
|
|
|
success: res => {
|
|
upload({
|
|
url: '/common/upload',
|
|
filePath: res.tempFilePath,
|
|
}).then((res) => {
|
|
this.imageList2.push(res.fileName)
|
|
console.log(res);
|
|
})
|
|
|
|
}
|
|
})
|
|
|
|
|
|
},
|
|
seletTime(type) {
|
|
this.timeType = type
|
|
this.showtime = true
|
|
},
|
|
getback() {
|
|
uni.navigateBack()
|
|
},
|
|
confirmClor(e) {
|
|
this.carColorShow = false
|
|
this.carInfo.carLicenseColor = e.value[0].dictValue
|
|
this.carInfo.carLicenseColorStr = e.value[0].dictLabel
|
|
},
|
|
confirm(e) {
|
|
|
|
this.show = false
|
|
this.carInfo.rescueCarType = e.value[0].dictValue
|
|
this.carInfo.rescueCarTypeStr = e.value[0].dictLabel
|
|
},
|
|
cancel() {
|
|
this.show = false
|
|
},
|
|
confirmtime(e) {
|
|
this.showtime = false
|
|
const timestamp = e.value
|
|
const date = new Date(timestamp);
|
|
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
|
|
|
|
let timeTemp = `${year}-${month}-${day}`
|
|
console.log(this.rescueTime);
|
|
if (this.timeType == 'buy') {
|
|
this.carInfo.carBuyTime = timeTemp
|
|
}
|
|
if (this.timeType == 'bx') {
|
|
this.carInfo.carInsuranceTime = timeTemp
|
|
}
|
|
if (this.timeType == 'by') {
|
|
this.carInfo.carKeepTime = timeTemp
|
|
}
|
|
if (this.timeType == 'nj') {
|
|
this.carInfo.carCheckTime = timeTemp
|
|
}
|
|
},
|
|
canceltiem(e) {
|
|
console.log(e);
|
|
this.showtime = false
|
|
},
|
|
|
|
async saveOrUpdate() {
|
|
if (this.imageList1.length > 0) {
|
|
this.carInfo.carImage = this.imageList1[0]
|
|
}
|
|
if (this.imageList2.length > 0) {
|
|
this.carInfo.driveLicenseImage = this.imageList2[0]
|
|
}
|
|
if (!this.carId) {
|
|
request({
|
|
url: "/system/rescueCar",
|
|
method: 'post',
|
|
data: this.carInfo
|
|
}).then(res => {
|
|
|
|
uni.showToast({
|
|
title: "保存成功"
|
|
})
|
|
|
|
setTimeout(function() {
|
|
uni.navigateBack()
|
|
}.bind(this), 1000); // 2000毫秒后执行
|
|
})
|
|
} else {
|
|
console.log(this.carInfo, 'update');
|
|
request({
|
|
url: "/system/rescueCar",
|
|
method: 'put',
|
|
data: this.carInfo
|
|
}).then(res => {
|
|
console.log('res: ',res);
|
|
|
|
uni.showToast({
|
|
title: "保存成功"
|
|
})
|
|
setTimeout(function() {
|
|
uni.navigateBack()
|
|
}.bind(this), 1000); // 2000毫秒后执行
|
|
|
|
})
|
|
}
|
|
|
|
},
|
|
async getCarInfo() {
|
|
this.fileList1 = []
|
|
this.fileList2 = []
|
|
request({
|
|
url: "/system/rescueCar/" + this.carId,
|
|
method: 'get',
|
|
}).then(res => {
|
|
this.carInfo = res.data
|
|
if (this.carInfo.carImage) {
|
|
this.fileList1.push({
|
|
url: this.$baseUrl + this.carInfo.carImage
|
|
})
|
|
this.imageList1.push(this.carInfo.carImage)
|
|
console.log(this.fileList1);
|
|
}
|
|
if (this.carInfo.driveLicenseImage) {
|
|
this.fileList2.push({
|
|
url: this.$baseUrl + this.carInfo.driveLicenseImage
|
|
})
|
|
this.imageList2.push(this.carInfo.driveLicenseImage)
|
|
}
|
|
})
|
|
},
|
|
async getDictList() {
|
|
request({
|
|
url: "/system/dict/data/type/car_use_nature",
|
|
method: 'get',
|
|
}).then(res => {
|
|
|
|
this.carUseNature.push(res.data)
|
|
})
|
|
|
|
request({
|
|
url: "/system/dict/data/type/jyc_type",
|
|
method: 'get',
|
|
}).then(res => {
|
|
this.jycType.push(res.data)
|
|
|
|
})
|
|
|
|
request({
|
|
url: "/system/dict/data/type/car_license_color",
|
|
method: 'get',
|
|
}).then(res => {
|
|
this.licenseColor.push(res.data)
|
|
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.carManageFormContent {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #F7F8FC;
|
|
}
|
|
|
|
.body {
|
|
flex: 1;
|
|
height: 0;
|
|
padding-bottom: 100rpx;
|
|
overflow: auto;
|
|
}
|
|
|
|
.ail {
|
|
box-sizing: border-box;
|
|
padding: 32rpx;
|
|
}
|
|
|
|
.dis_ {
|
|
width: 100%;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
border: 2rpx solid rgba(0, 0, 0, 0.05);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 10px auto;
|
|
box-sizing: border-box;
|
|
padding: 32rpx 38rpx;
|
|
|
|
color: #000;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
|
|
}
|
|
|
|
.right_ {
|
|
font-weight: normal;
|
|
color: #929292;
|
|
font-size: 24rpx;
|
|
width: 55%;
|
|
text-align: right;
|
|
|
|
input {
|
|
width: 100%;
|
|
}
|
|
|
|
/deep/ .inputPlaceholder {
|
|
color: #929292;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.uploadBtn {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
background: #F7F8FC;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.uploadBtnIcon {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
|
|
.rightImg {
|
|
color: #666;
|
|
// width: 25%;
|
|
text-align: right;
|
|
}
|
|
|
|
.bo_dis {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
box-sizing: border-box;
|
|
column-gap: 20rpx;
|
|
}
|
|
.deleteBtn {
|
|
background: rgb(245,108,108);
|
|
width: 686rpx;
|
|
height: 88rpx;
|
|
border-radius: 12rpx;
|
|
color: #FFF;
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.saveBtn {
|
|
width: 686rpx;
|
|
height: 88rpx;
|
|
background: #327DFB;
|
|
border-radius: 12rpx;
|
|
color: #FFF;
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style> |