264 lines
6.9 KiB
Vue
264 lines
6.9 KiB
Vue
<template>
|
|
<div class="wrap">
|
|
<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">
|
|
<cell-group label="车牌号" placeholder="请输入车牌号" v-model="carNum" />
|
|
<div class="itemContent">
|
|
<div class="titleType">
|
|
<img class="startImg" src="@/assets/start.png" />
|
|
<span>车辆类型</span>
|
|
</div>
|
|
<select id="mySelect" style="width: 70px" v-model="selectedOption">
|
|
<option v-for="(item,index) in typeList" :key="index" :value="index">{{item}}</option>
|
|
</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>
|
|
<div class="serviceType">
|
|
<div class="trailerService" v-for="(item,index) in supplierServiceList" :key="index">
|
|
<div class="serviceline">
|
|
<span class="service">{{ item.name }}:</span>
|
|
<span class="line"></span>
|
|
</div>
|
|
<van-checkbox-group v-model="serviceIds" v-for="(item2,index2) in item.children" :key="index2" class="radioWrap" @change="change">
|
|
<van-checkbox class="item" :name="item2.id">{{item2.name }}</van-checkbox>
|
|
</van-checkbox-group>
|
|
</div>
|
|
</div>
|
|
<two-common-btn class="btn" @cancelClick="cancelBtn" @submitClick="submitBtn" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {myMixins} from "@/utils/myMixins"
|
|
import {vehicleTypeList,saveVehicle,getInfoById,supplierServiceTree} from "@/api/mine"
|
|
import TwoCommonBtn from "@/components/twoBtnCommon.vue"
|
|
import CellGroup from "@/components/cellGroup.vue";
|
|
export default {
|
|
name: "vehicleAdd",
|
|
mixins:[myMixins],
|
|
data(){
|
|
return{
|
|
trailerService: '',//拖车服务
|
|
smallRepairService: '',//小修服务
|
|
isJoin:'',//是否参与
|
|
activeIcon: require('@/assets/check.png'),
|
|
inactiveIcon: require('@/assets/uncheck.png'),
|
|
// result: [],
|
|
checked: true,
|
|
carNum:"",//车牌号
|
|
typeList:[],//车辆类型列表
|
|
selectedOption:'1',//车辆类型
|
|
id:'',//车辆Id
|
|
serviceIds:[],//车辆服务种类,
|
|
supplierServiceList:[]
|
|
}
|
|
},
|
|
async mounted() {
|
|
this.id=this.$route.params?.id
|
|
const selectElement = document.getElementById('mySelect');
|
|
selectElement.addEventListener('change', function() {
|
|
this.selectedOption=selectElement.value;
|
|
});
|
|
await this.getTypeList();
|
|
if( this.id){
|
|
await this.vehicleInfo()
|
|
}
|
|
await this.getSupplierServiceTree();
|
|
},
|
|
methods:{
|
|
async getTypeList() {
|
|
let result=await vehicleTypeList();
|
|
if(result.code === 200){
|
|
this.typeList=result.data
|
|
}
|
|
},
|
|
async getSupplierServiceTree(){
|
|
let res = await supplierServiceTree();
|
|
this.supplierServiceList=res.data
|
|
},
|
|
async vehicleInfo(){
|
|
let res= await getInfoById({
|
|
vehicleId:this.id
|
|
})
|
|
let result=res.data;
|
|
this.id=result.vehicleId
|
|
this.carNum=result.plateNumber
|
|
this.isJoin=result.hasPolymerization.code
|
|
this.selectedOption=result.vehicleType;
|
|
this.serviceIds=result.serviceIds
|
|
},
|
|
change(e) {
|
|
// this.trailerService=e
|
|
console.log(" this.trailerService",e, this.result)
|
|
},
|
|
change2(e) {
|
|
this.smallRepairService=e
|
|
},
|
|
isChange(e){
|
|
this.isJoin=e
|
|
},
|
|
cancelBtn(){//取消车辆
|
|
this.$router.back()
|
|
},
|
|
async submitBtn(){
|
|
// if(this.carNum || this.selectedOption || this.isJoin){
|
|
// this.$toast('必填字段未填写')
|
|
// }else{
|
|
await saveVehicle({
|
|
vehicleId:this.id ? this.id : '',
|
|
plateNumber:this.carNum ? this.carNum :'',
|
|
vehicleType:this.selectedOption ? this.selectedOption : '',
|
|
hasPolymerization:this.isJoin ? this.isJoin : '',
|
|
serviceIds:this.serviceIds ? this.serviceIds : []
|
|
})
|
|
if(this.id){
|
|
this.$toast('修改成功')
|
|
}else{
|
|
this.$toast('添加成功')
|
|
}
|
|
setTimeout(()=>{
|
|
this.$router.back();
|
|
},2000)
|
|
}
|
|
// },
|
|
},
|
|
components:{
|
|
CellGroup,
|
|
TwoCommonBtn
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/mixin.scss";
|
|
@import "@/styles/common.scss";
|
|
.navBar{
|
|
margin-bottom: 46px;
|
|
}
|
|
.wrap{
|
|
@include wh(100%,100%);
|
|
overflow-y: auto;
|
|
}
|
|
.addContentWrap{
|
|
margin-left: 16px;
|
|
.itemContent{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
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{
|
|
opacity: .7;
|
|
color: #323643;
|
|
line-height: 18px;
|
|
}
|
|
.line{
|
|
display: inline-block;
|
|
@include wh(246px,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{
|
|
//margin-left: 8px;
|
|
width: 90%;
|
|
margin: 40px 0 30px 8px;
|
|
//position: fixed;
|
|
//bottom: 30px;
|
|
}
|
|
}
|
|
</style> |