PC同步一个用户绑定多个车辆
This commit is contained in:
xuyuncong
parent
3ff0c88484
commit
ffbfa499dd
190
src/views/repair/Components/AddCarForm.vue
Normal file
190
src/views/repair/Components/AddCarForm.vue
Normal file
@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<el-dialog title="添加车辆信息" :visible.sync="dialogVisible" width="800px" @close="handleClose">
|
||||
<el-form ref="carForm" :model="car" :rules="rules" label-width="120px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="车牌号" prop="licenseNumber">
|
||||
<el-input v-model="car.licenseNumber" placeholder="请输入车牌号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="发动机号码" prop="engineNumber">
|
||||
<el-input v-model="car.engineNumber" placeholder="请输入发动机号码" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="车架号" prop="vin">
|
||||
<el-input v-model="car.vin" placeholder="请输入车架号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="车辆品牌" prop="carBrand">
|
||||
<CarBrandSelector v-model="car.carBrand" ref="brandSelector" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="车辆型号" prop="carModel">
|
||||
<el-input v-model="car.carModel" placeholder="请输入车辆型号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="车辆类别" prop="carCategory">
|
||||
<el-select v-model="car.carCategory" placeholder="请选择车辆类别">
|
||||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CAR_CATEGORY)" :key="dict.value"
|
||||
:label="dict.label" :value="dict.value" />
|
||||
</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="car.carNature" placeholder="请选择车辆性质">
|
||||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CAR_NATURE)" :key="dict.value"
|
||||
:label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="注册日期" prop="carRegisterDate">
|
||||
<el-date-picker clearable v-model="car.carRegisterDate" type="date" value-format="timestamp"
|
||||
placeholder="选择车辆注册日期" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="车辆颜色" prop="carColor">
|
||||
<el-input v-model="car.carColor" placeholder="请输入车辆颜色" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="下次年检日期" prop="nextInspectionDate">
|
||||
<el-date-picker clearable v-model="car.nextInspectionDate" type="date" value-format="timestamp"
|
||||
placeholder="选择下次年检日期" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="保险到期日期" prop="insuranceExpiryDate">
|
||||
<el-date-picker clearable v-model="car.insuranceExpiryDate" type="date" value-format="timestamp"
|
||||
placeholder="选择保险到期日期" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request';
|
||||
import { Message } from 'element-ui';
|
||||
import CarBrandSelector from '@/layout/components/CarBrandSelector/index.vue';
|
||||
import { DICT_TYPE, getDictDatas } from '@/utils/dict';
|
||||
import { getCarBrand } from '@/api/base/carbrand';
|
||||
|
||||
export default {
|
||||
name: "AddCarForm",
|
||||
components: {
|
||||
CarBrandSelector
|
||||
},
|
||||
props: {
|
||||
customerInfo: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
car: {
|
||||
licenseNumber: '',
|
||||
engineNumber: '',
|
||||
vin: '',
|
||||
brandAndModel: [],
|
||||
carModel: '',
|
||||
carCategory: '',
|
||||
carNature: '',
|
||||
carRegisterDate: '',
|
||||
carColor: '',
|
||||
nextInspectionDate: '',
|
||||
insuranceExpiryDate: ''
|
||||
},
|
||||
rules: {
|
||||
licenseNumber: [
|
||||
{ required: true, message: '请输入车牌号', trigger: 'blur' }
|
||||
],
|
||||
carBrand: [
|
||||
{ required: true, message: '请选择车辆品牌', trigger: 'change' }
|
||||
],
|
||||
carModel: [
|
||||
{ required: false, message: '请输入车辆型号', trigger: 'blur' }
|
||||
],
|
||||
carCategory: [
|
||||
{ required: true, message: '车辆类别不能为空', trigger: 'blur' }
|
||||
],
|
||||
carNature: [
|
||||
{ required: true, message: '车辆性质不能为空', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
handleClose() {
|
||||
this.$refs.carForm.resetFields();
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
async submitForm() {
|
||||
try {
|
||||
// 使用Promise包装validate方法确保正确处理
|
||||
await new Promise((resolve, reject) => {
|
||||
this.$refs.carForm.validate((valid) => {
|
||||
if (valid) {
|
||||
resolve();
|
||||
} else {
|
||||
reject(new Error('表单验证失败'));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
this.customerInfo.car=this.car;
|
||||
|
||||
|
||||
const createResult = await request({
|
||||
url: '/base/custom/saveCustomerAndCar',
|
||||
method: 'post',
|
||||
data: this.customerInfo
|
||||
});
|
||||
|
||||
// 弹窗绑定成功
|
||||
Message.success('添加车辆成功');
|
||||
this.$emit('success', {
|
||||
id: createResult.carId,
|
||||
...this.car,
|
||||
frameNumber: this.car.vin // 保持与原接口一致
|
||||
});
|
||||
this.handleClose();
|
||||
} catch (error) {
|
||||
// 不显示表单验证失败的错误提示，因为Element UI已经处理
|
||||
if (error.message !== '表单验证失败') {
|
||||
console.error('添加车辆失败:', error);
|
||||
Message.error('添加车辆失败，请重试！');
|
||||
}
|
||||
}
|
||||
},
|
||||
getDictDatas(type) {
|
||||
return getDictDatas(type);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,17 +1,27 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-select v-model="carSelected" clearable>
|
||||
<el-option v-for="car in carList" :key="car.id" :label="car.licenseNumber" :value="car.id"/>
|
||||
</el-select>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<el-select v-model="carSelected" clearable style="width: 200px;">
|
||||
<el-option v-for="car in carList" :key="car.id" :label="car.licenseNumber" :value="car.id"/>
|
||||
</el-select>
|
||||
<el-button type="primary" size="small" @click="addNewCar" style="margin-left: 8px;">
|
||||
新增车辆
|
||||
</el-button>
|
||||
</div>
|
||||
<AddCarForm ref="addCarForm" :customer-info="customerInfo" @success="handleCarAddSuccess" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {remindCarMainPage} from "@/api/base/carmain";
|
||||
import AddCarForm from "./AddCarForm.vue";
|
||||
|
||||
export default {
|
||||
name: "CarChoose",
|
||||
components: {
|
||||
AddCarForm
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
@ -19,6 +29,10 @@ export default {
|
||||
cusName: {
|
||||
type: String,
|
||||
},
|
||||
customerInfo: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
inList:{
|
||||
type: Object,
|
||||
default: null,
|
||||
@ -79,6 +93,16 @@ export default {
|
||||
}
|
||||
} catch {
|
||||
}
|
||||
},
|
||||
addNewCar() {
|
||||
// 打开新增车辆表单
|
||||
this.$refs.addCarForm.open();
|
||||
},
|
||||
handleCarAddSuccess(carInfo) {
|
||||
// 新增成功后刷新车辆列表
|
||||
this.getCarList();
|
||||
// 自动选中新添加的车辆
|
||||
this.carSelected = carInfo.id;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -62,8 +62,10 @@ export default {
|
||||
}
|
||||
},
|
||||
getWorkType(val){
|
||||
if (!val) return ''
|
||||
const data = this.getDictDatas(DICT_TYPE.REPAIR_WORK_TYPE)
|
||||
return data.find(item => item.value === val).label
|
||||
const item = data.find(item => item.value === val)
|
||||
return item ? item.label : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -269,16 +269,24 @@ export default {
|
||||
if (!row.id || property !== 'goods') {
|
||||
// 保存cell
|
||||
this.saveCellClick(row, cell)
|
||||
cell.querySelector('.item__txt').style.display = 'none'
|
||||
cell.querySelector('.item__input').style.display = 'inline'
|
||||
cell.querySelector('input').focus()
|
||||
// 添加空值检查，确保DOM元素存在
|
||||
const itemTxt = cell.querySelector('.item__txt')
|
||||
const itemInput = cell.querySelector('.item__input')
|
||||
const inputElement = cell.querySelector('input')
|
||||
|
||||
if (itemTxt) itemTxt.style.display = 'none'
|
||||
if (itemInput) itemInput.style.display = 'inline'
|
||||
if (inputElement) inputElement.focus()
|
||||
}
|
||||
}
|
||||
},
|
||||
/** 取消编辑状态 */
|
||||
cancelEditable(cell) {
|
||||
cell.querySelector('.item__txt').style.display = 'inline'
|
||||
cell.querySelector('.item__input').style.display = 'none'
|
||||
const itemTxt = cell.querySelector('.item__txt')
|
||||
const itemInput = cell.querySelector('.item__input')
|
||||
|
||||
if (itemTxt) itemTxt.style.display = 'inline'
|
||||
if (itemInput) itemInput.style.display = 'none'
|
||||
},
|
||||
/** 保存进入编辑的cell */
|
||||
saveCellClick(row, cell) {
|
||||
|
||||
@ -24,7 +24,8 @@
|
||||
<template slot="label">
|
||||
车辆选择
|
||||
</template>
|
||||
<CarChoose v-model="selectCar" :cus-name="selectUser.cusName" :in-list="carInData"/>
|
||||
<CarChoose v-if="selectUser && selectUser.id" v-model="selectCar" :cus-name="selectUser.cusName" :customer-info="selectUser" :in-list="carInData"/>
|
||||
<span v-else>请先选择客户</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user