dianliang/lanan-system-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

车辆品牌型号拆分为品牌和型号，型号为输入框

Browse Source
This commit is contained in:
xiaofajia 2024-11-16 12:05:12 +08:00
parent 4bb2c20bd9
commit 9a74a8414f
5 changed files with 107 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
src/layout/components/CarBrandSelector/index.vue
View File

@ -1,64 +1,89 @@
<template>
<div class="block">
<el-cascader
placeholder="车辆品牌型号"
:options="options"
v-model="selectedValues"
filterable
/>
</div>
<div class="block">
<el-select v-model="selectedValues" filterable :filter-method="getData" placeholder="车辆品牌">
<el-option v-for="item in options" :key="item.id" :value="item.id" :label="item.brandName"/>
</el-select>
<!-- <el-cascader-->
<!-- placeholder="车辆品牌型号"-->
<!-- :options="options"-->
<!-- v-model="selectedValues"-->
<!-- filterable-->
<!-- />-->
</div>
</template>
<script>
import * as CarBrandSelectorApi from '@/layout/components/CarBrandSelector/Api';
</template>
<script>
import * as CarBrandSelectorApi from '@/layout/components/CarBrandSelector/Api';
import {getCarBrandPage, getCarBrand} from '@/api/base/carbrand'
export default {
name: 'CarBrandSelector',
export default {
name: 'CarBrandSelector',
props: {
//v-model绑定的值
value: {
type: Array,
default: () => [],
},
props: {
//v-model绑定的值
value: {
type: [Array, String],
// default: () => [],
},
},
data() {
return {
//子组件赋值
selectedValues:this.value,
options: [], //选项集合
};
},
data() {
return {
//子组件赋值
selectedValues: this.value,
options: [], //选项集合
};
},
watch: {
value: {
immediate: true,
handler(newVal) {
watch: {
value: {
immediate: true,
handler(newVal) {
if (newVal instanceof Array) {
this.selectedValues = newVal[0]
} else {
this.selectedValues = newVal;
}
},
selectedValues(newVal) {
this.$emit('input', newVal);
this.getData(this.selectedValues)
}
},
selectedValues(newVal) {
this.$emit('input', newVal);
}
},
created() {
this.getData();
},
methods: {
getData(keyword) {
// this.reset()
let param = {
modelName: keyword,
}
CarBrandSelectorApi.searchBrand(param).then(res => {
this.options = res.data
});
},
created() {
this.getData();
},
methods: {
// 得到车辆品牌的分页
getData(keyword) {
const query = {
brandName: keyword
}
getCarBrandPage(query).then(res => {
this.options = res.data.records
})
// 需要的数据可能不在该页，比如修改回显的时候，那此时传入的id，那就通过ID去查了添加到options
const data = this.options.filter(item => item.id === this.selectedValues)
if (!data || data.length === 0) {
getCarBrand(this.selectedValues).then(res => {
if (res.data) {
this.options.push(res.data)
}
})
}
// // this.reset()
// let param = {
// modelName: keyword,
// }
// CarBrandSelectorApi.searchBrand(param).then(res => {
// // console.log(res.data)
// this.options = res.data
// });
},
},
};
</script>
};
</script>

16
src/views/base/carmain/CarMainForm.vue
View File

@ -27,10 +27,15 @@
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="品牌型号" prop="brandAndModel">
<el-form-item label="车辆品牌" prop="brandAndModel">
<CarBrandSelector v-model="formData.brandAndModel" ref="brandForm"/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="车辆型号" prop="carModel">
<el-input v-model="formData.carModel" placeholder="车辆型号" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="车辆类别" prop="carCategory">
<el-select v-model="formData.carCategory" placeholder="请选择车辆类别">
@ -39,6 +44,8 @@
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="车辆性质" prop="carNature">
<el-select v-model="formData.carNature" placeholder="请选择车辆性质">
@ -47,8 +54,6 @@
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="注册日期" prop="carRegisterDate" label-width="auto">
<el-date-picker clearable v-model="formData.carRegisterDate" type="date" value-format="timestamp"
@ -198,6 +203,7 @@ export default {
nextInspectionDate: undefined,
nextMaintenanceDate: undefined,
nextMaintenanceMileage: undefined,
carModel: undefined
},
buttonLoading:false,
// 表单校验
@ -209,6 +215,7 @@ export default {
carNature: [{required: true, message: '车辆性质不能为空', trigger: 'blur'}],
carRegisterDate: [{required: true, message: '车辆注册日期不能为空', trigger: 'blur'}],
brandAndModel: [{required: true, message: '品牌型号不能为空', trigger: 'blur'}],
carModel: [{required: true, message: '车辆型号不能为空', trigger: 'blur'}]
},
};
},
@ -218,7 +225,6 @@ export default {
this.buttonLoading = true
try{
const data = this.formData;
console.log(data,'adadadad')
debugger
const res = await CarMainApi.compute(data);
const result = res.data;
@ -253,6 +259,7 @@ export default {
async submitForm() {
// 校验主表
// await this.$refs["formRef"].validate();
this.formData.brandAndModel = [this.formData?.brandAndModel, this.formData?.carModel]
this.formLoading = true;
try {
const data = this.formData;
@ -290,6 +297,7 @@ export default {
carNature: undefined,
carRegisterDate: undefined,
carLicenseImg: undefined,
carModel: undefined
};
this.resetForm("formRef");
}

2
src/views/base/carmain/index.vue
View File

@ -109,7 +109,7 @@
<el-table-column label="发动机号码" align="center" prop="engineNumber" width="180" />
<el-table-column label="车架号" align="center" prop="vin" width="180" />
<el-table-column label="车辆品牌" align="center" prop="brandStr" />
<el-table-column label="车辆型号" align="center" prop="modelStr" />
<el-table-column label="车辆型号" align="center" prop="carModel" />
<el-table-column label="车辆类别" align="center" prop="carCategory">
<template v-slot="scope">
<dict-tag :type="DICT_TYPE.DICT_CAR_CATEGORY" :value="scope.row.carCategory" />

6
src/views/repair/Components/CarChoose.vue
View File

@ -28,7 +28,11 @@ export default {
watch: {
carSelected(val) {
if (val) {
const car = this.carList.find(item => item.id === val);
let car = this.carList.find(item => item.id === val);
car = {
...car,
modelStr: car?.brandStr + " " + car?.carModel
}
this.$emit('input', car);
}
},

20
src/views/repair/tickets/form/UserAndCarForm.vue
View File

@ -115,10 +115,15 @@
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="品牌型号" prop="carInfo.brandAndModel">
<el-form-item label="车辆品牌" prop="carInfo.brandAndModel">
<CarBrandSelector v-model="formData.carInfo.brandAndModel" ref="brandForm"/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="车辆型号" prop="carInfo.carModel">
<el-input type="text" v-model="formData.carInfo.carModel" placeholder="请输入车辆型号" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="车辆类别" prop="carInfo.carCategory">
<el-select v-model="formData.carInfo.carCategory" placeholder="请选择车辆类别">
@ -127,6 +132,8 @@
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="车辆性质" prop="carInfo.carNature">
<el-select v-model="formData.carInfo.carNature" placeholder="请选择车辆性质">
@ -135,8 +142,6 @@
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="注册日期" prop="carInfo.carRegisterDate">
<el-date-picker clearable v-model="formData.carInfo.carRegisterDate" type="date" value-format="timestamp"
@ -303,6 +308,7 @@ export default {
nextInspectionDate: undefined,
nextMaintenanceDate: undefined,
nextMaintenanceMileage: undefined,
carModel: undefined
}
},
formRules: {
@ -311,7 +317,8 @@ export default {
'carInfo.licenseNumber': [{required: true, message: "车牌号不能为空", trigger: 'blur'}],
'carInfo.brandAndModel': [{required: true, message: "品牌型号不能为空", trigger: 'blur'}],
'carInfo.carCategory': [{required: true, message: '车辆类别不能为空', trigger: 'blur'}],
'carInfo.carNature': [{required: true, message: '车辆性质不能为空', trigger: 'blur'}]
'carInfo.carNature': [{required: true, message: '车辆性质不能为空', trigger: 'blur'}],
'carInfo.carModel': [{required: true, message: '车辆型号不能为空', trigger: 'blur'}]
},
formLoading: false,
//折叠面板默认展开
@ -342,7 +349,8 @@ export default {
this.formData.carInfo = {
...this.formData.carInfo,
...data.carInfo,
brandAndModel: [data.carInfo?.carBrand, data.carInfo?.carModel]
brandAndModel: data.carInfo?.carBrand,
carModel: data.carInfo?.carModel
}
}
// await this.listLevel()
@ -368,6 +376,7 @@ export default {
async submitForm(){
await this.$refs["formRef"].validate();
this.formLoading = true
this.formData.carInfo.brandAndModel = [this.formData.carInfo.brandAndModel, this.formData.carInfo.carModel]
try {
await updateCustomerAndCar(this.formData)
this.$modal.msgSuccess(this.formData?.userInfo?.id ? "修改成功" : "新增成功")
@ -429,6 +438,7 @@ export default {
nextInspectionDate: undefined,
nextMaintenanceDate: undefined,
nextMaintenanceMileage: undefined,
carModel: undefined
}
}
this.resetForm("formRef")