351 lines
8.8 KiB
Vue
351 lines
8.8 KiB
Vue
<template>
|
|
<view class="fullHeight">
|
|
<headers :showBack="true">
|
|
<view class="headerName">
|
|
{{pageTitle}}
|
|
</view>
|
|
</headers>
|
|
<view class="formBox">
|
|
<form @submit="formSubmit">
|
|
<view class="uni-form-item">
|
|
<view class="uni-form-label">
|
|
<text class="star">*</text>车牌号
|
|
</view>
|
|
<view class="uni-form-input">
|
|
<input class="uni-input" placeholder-class="cl" name="carNumber" :value="form.carNumber" placeholder="请输入" />
|
|
</view>
|
|
</view>
|
|
<view class="uni-form-item">
|
|
<view class="uni-form-label">
|
|
车牌照片
|
|
</view>
|
|
<view class="uni-form-input" style="display: inline-flex;">
|
|
<view class="imgBox" v-show="form.carPhotosUrl">
|
|
<image :src="url_config+'image/'+form.carPhotosUrl" class="img"></image>
|
|
<uni-icons @click="deleteImg" class="deleteImg" type="clear" size="24"></uni-icons>
|
|
</view>
|
|
<view class="addImgBox" @click="selectImg">
|
|
<image src="/static/icon-add.png" class="icon-add"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="uni-form-item">
|
|
<view class="uni-form-label">
|
|
<text class="star">*</text>车辆颜色
|
|
</view>
|
|
<view class="uni-form-input">
|
|
<picker @change="bindPickerChange" :value="selectIndex" :range="colorList" range-key="locationName">
|
|
<view class="uni-input uni-select cl" v-if="selectIndex==null">
|
|
请选择 <image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
|
|
</view>
|
|
<view class="uni-input uni-select" v-else>{{colorList[selectIndex]}}
|
|
<image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
<view class="uni-form-item">
|
|
<view class="uni-form-label">
|
|
<text class="star">*</text>车辆类型
|
|
</view>
|
|
<view class="uni-form-input">
|
|
<picker @change="bindPickerChange2" :value="carTypeIndex" :range="carTypeList" range-key="carTypeName">
|
|
<view class="uni-input uni-select cl" v-if="carTypeIndex==null">
|
|
请选择 <image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
|
|
</view>
|
|
<view class="uni-input uni-select" v-else>{{carTypeList[carTypeIndex].carTypeName}}
|
|
<image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="uni-form-item">
|
|
<view class="uni-form-label">
|
|
司机姓名
|
|
</view>
|
|
<view class="uni-form-input">
|
|
<input class="uni-input" placeholder-class="cl" name="driverName" :value="form.driverName" placeholder="请输入" />
|
|
</view>
|
|
</view>
|
|
<view class="uni-form-item">
|
|
<view class="uni-form-label">
|
|
<text class="star">*</text>司机电话
|
|
</view>
|
|
<view class="uni-form-input">
|
|
<input class="uni-input" placeholder-class="cl" name="driverTelephone" :value="form.driverTelephone" placeholder="请输入" />
|
|
</view>
|
|
</view>
|
|
<view class="uni-form-item">
|
|
<view class="uni-form-label">
|
|
<text class="star">*</text>是否黑名单
|
|
</view>
|
|
<view class="uni-form-input">
|
|
<radio-group @change="radioChange" name="isBlack">
|
|
<label style="margin-right: 15px;" class="radio"><radio value="0" :checked="form.isBlack==0" />白名单</label>
|
|
<label class="radio"><radio value="1" :checked="form.isBlack==1" />黑名单</label>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
<button form-type="submit" type="primary" class="btn submitBtn big">保存</button>
|
|
<button class="btn deleteBtn" v-show="!isAdd" @click="deleteFn">删除</button>
|
|
</form>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
pageTitle: '新增车辆',
|
|
selectIndex: null,
|
|
colorList: ['蓝色', '绿色', '黄色', '白色','黑色'],
|
|
carTypeList:[],
|
|
carTypeIndex:null,
|
|
form: {
|
|
carColor: "",
|
|
carNumber: "",
|
|
carPhotosUrl: "",
|
|
carType: "",
|
|
driverName: "",
|
|
driverTelephone: "",
|
|
isBlack: '',
|
|
projectSn: ''
|
|
},
|
|
personList: [],
|
|
projectDetail: {},
|
|
isAdd: true
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
onLoad(options) {
|
|
this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
|
|
|
|
if (options.id) {
|
|
this.isAdd = false
|
|
this.pageTitle='编辑车辆'
|
|
this.getDetails(options.id)
|
|
}else{
|
|
this.getCarTypeList()
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
deleteFn(){
|
|
var that = this
|
|
uni.showModal({
|
|
title:'提示',
|
|
content:'确定删除该车辆吗？',
|
|
success(res) {
|
|
if(res.confirm){
|
|
that.sendRequest({
|
|
url: 'xmgl/carInfo/delete',
|
|
data: {
|
|
id: that.form.id
|
|
},
|
|
method: "POST",
|
|
success(res) {
|
|
uni.showToast({
|
|
title:'删除成功！'
|
|
})
|
|
setTimeout(()=>{
|
|
uni.navigateBack({})
|
|
},1000)
|
|
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
selectImg(){
|
|
var that =this
|
|
uni.chooseImage({
|
|
count:1,
|
|
success(res) {
|
|
const tempFilePaths = res.tempFilePaths;
|
|
uni.uploadFile({
|
|
url: that.url_config+'upload/image', //仅为示例，非真实的接口地址
|
|
filePath: tempFilePaths[0],
|
|
name: 'files',
|
|
success: (uploadFileRes) => {
|
|
console.log(uploadFileRes.data);
|
|
that.form.carPhotosUrl=JSON.parse(uploadFileRes.data).data[0].imageUrl
|
|
}
|
|
});
|
|
}
|
|
})
|
|
},
|
|
deleteImg(){
|
|
this.form.carPhotosUrl=''
|
|
},
|
|
radioChange(e){
|
|
this.form.isBlack=e.target.value
|
|
},
|
|
//获取车种
|
|
getCarTypeList() {
|
|
var that = this
|
|
this.sendRequest({
|
|
url: 'xmgl/carType/list',
|
|
data: {
|
|
projectSn: this.projectDetail.projectSn
|
|
},
|
|
method: "POST",
|
|
success(res) {
|
|
that.carTypeList = res.result
|
|
if(!that.isAdd){
|
|
for (var i = 0; i < res.result.length; i++) {
|
|
if(that.form.carType==res.result[i].id){
|
|
that.carTypeIndex=i;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
getDetails(id) {
|
|
var that = this
|
|
this.sendRequest({
|
|
url: 'xmgl/carInfo/queryById',
|
|
data: {
|
|
id: id
|
|
},
|
|
method: "POST",
|
|
success(res) {
|
|
that.form = res.result
|
|
that.selectIndex = that.colorList.indexOf(that.form.carColor)
|
|
if(that.form.carPhotosUrl){
|
|
var arr = JSON.parse(that.form.carPhotosUrl)
|
|
if(arr.length>0){
|
|
that.form.carPhotosUrl=arr[0].url
|
|
}else{
|
|
that.form.carPhotosUrl=''
|
|
}
|
|
}else{
|
|
that.form.carPhotosUrl=''
|
|
}
|
|
that.getCarTypeList()
|
|
}
|
|
})
|
|
},
|
|
bindPickerChange: function(e) {
|
|
this.selectIndex = e.target.value
|
|
},
|
|
bindPickerChange2: function(e) {
|
|
this.carTypeIndex = e.target.value
|
|
},
|
|
bindDateChange: function(e) {
|
|
this.form.eduTime = e.target.value
|
|
},
|
|
formSubmit(e) {
|
|
var that = this
|
|
console.log(e)
|
|
var params = e.detail.value
|
|
params.projectSn = this.projectDetail.projectSn
|
|
if (this.selectIndex == null) {
|
|
uni.showToast({
|
|
title: '请选择车辆颜色',
|
|
icon: 'none'
|
|
})
|
|
return false;
|
|
}
|
|
if (this.carTypeIndex == null) {
|
|
uni.showToast({
|
|
title: '请选择车辆类型',
|
|
icon: 'none'
|
|
})
|
|
return false;
|
|
}
|
|
if (params.carNumber == '') {
|
|
uni.showToast({
|
|
title: '请输入车牌号',
|
|
icon: 'none'
|
|
})
|
|
return false;
|
|
}
|
|
if (params.driverTelephone == '') {
|
|
uni.showToast({
|
|
title: '请输入司机电话',
|
|
icon: 'none'
|
|
})
|
|
return false;
|
|
}
|
|
if (params.isBlack == '') {
|
|
uni.showToast({
|
|
title: '请选择是否黑名单',
|
|
icon: 'none'
|
|
})
|
|
return false;
|
|
}
|
|
if(this.form.carPhotosUrl){
|
|
params.carPhotosUrl=JSON.stringify([{name:'',url:this.form.carPhotosUrl}])
|
|
}
|
|
params.carColor=this.colorList[this.selectIndex]
|
|
params.carType=this.carTypeList[this.carTypeIndex].id
|
|
|
|
var url = 'xmgl/carInfo/edit'
|
|
if (this.isAdd) {
|
|
url = 'xmgl/carInfo/add'
|
|
|
|
} else {
|
|
params.id = this.form.id
|
|
}
|
|
this.sendRequest({
|
|
url: url,
|
|
data: params,
|
|
method: "POST",
|
|
success(res) {
|
|
uni.showToast({
|
|
title: '保存成功！'
|
|
})
|
|
uni.navigateBack({
|
|
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.addImgBox{
|
|
border: 1px solid rgba(42, 43, 91, 0.1);
|
|
background-color: #f6f5f8;
|
|
width: 60px;
|
|
height: 60px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 10px;
|
|
font-size: 12px;
|
|
|
|
.icon-add{
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
}
|
|
.imgBox{
|
|
width: 60px;
|
|
height: 60px;
|
|
display: inline-flex;
|
|
position: relative;
|
|
margin-right: 15px;
|
|
.img{
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 10px;
|
|
}
|
|
.deleteImg{
|
|
position: absolute;
|
|
right: -10px;
|
|
top: -10px;
|
|
}
|
|
}
|
|
</style>
|