feat(transportCapacity): 优化车辆与司机弹窗布局并新增字段支持
- 车辆新增弹窗：所有组织移至基础车辆信息区末尾，新增使用部门字段，使用部门复用部门下拉 - 车牌号三段合并为整体输入框，优化样式为flex布局，去除多余边框及阴影，统一视觉 - 长期有效勾选时清空对应日期且禁用输入，新增handleLongTermChange方法，表单校验支持长期有效跳过必填 - 司机弹窗基础身份信息新增placeholder，调整布局，基础身份三列保持不变，其他信息行按需求拆分重排为一致三列 - 后端新增use_department字段，相关mapper、service及校验同步更新，新增增量迁移脚本支持 - 车辆表单相关输入控件宽度统一调整为6列布局，保持与其它区块一致，提升整体UI协调性 - 移除车辆车牌号拆分相关字段及逻辑，车牌号统一管理为单个字段，简化处理流程 - 代码中新增校验规则validateDrivingLicenseEndDate及validateRoadTransportCertEndDate，支持长期有效逻辑 - 优化图片上传区和证件信息区表单字段排列，提升表单整体易用性与规范性
This commit is contained in:
@@ -137,34 +137,34 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="车牌号">
|
||||
<span class="certification-audit__value">{{ auditValue('plateNo') }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="车牌颜色">
|
||||
<span class="certification-audit__value">{{ auditValue('plateColor') }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="车辆类型">
|
||||
<span class="certification-audit__value">{{ auditValue('vehicleType') }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="业务关系">
|
||||
<span class="certification-audit__value">{{ auditValue('businessRelation') }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="能源类型">
|
||||
<span class="certification-audit__value">{{ auditValue('energyType') }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="强制报废日期">
|
||||
<span class="certification-audit__value">
|
||||
{{ auditValue('compulsoryScrapDate') }}
|
||||
@@ -176,29 +176,29 @@
|
||||
|
||||
<section-card title="尺寸重量">
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="外廓长度（毫米）">
|
||||
<span class="certification-audit__value">{{ auditValue('outerLength') }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="外廓宽度（毫米）">
|
||||
<span class="certification-audit__value">{{ auditValue('outerWidth') }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="外廓高度（毫米）">
|
||||
<span class="certification-audit__value">{{ auditValue('outerHeight') }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="核定载质量（KG）">
|
||||
<span class="certification-audit__value">{{ auditValue('approvedLoadKg') }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="准牵引总质量（KG）">
|
||||
<span class="certification-audit__value">{{ auditValue('tractionMassKg') }}</span>
|
||||
</el-form-item>
|
||||
@@ -208,17 +208,17 @@
|
||||
|
||||
<section-card title="证件信息">
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="海关备案号">
|
||||
<span class="certification-audit__value">{{ auditValue('customsRecordNo') }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="行驶证档案编号">
|
||||
<span class="certification-audit__value">{{ auditValue('drivingLicenseNo') }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="行驶证有效期起">
|
||||
<span class="certification-audit__value">
|
||||
{{ auditValue('drivingLicenseStartDate') }}
|
||||
@@ -227,21 +227,21 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="行驶证有效期止">
|
||||
<span class="certification-audit__value">
|
||||
{{ auditValue('drivingLicenseEndDate') }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="道路运输证号">
|
||||
<span class="certification-audit__value">
|
||||
{{ auditValue('roadTransportCertNo') }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="道路运输证有效期起">
|
||||
<span class="certification-audit__value">
|
||||
{{ auditValue('roadTransportCertStartDate') }}
|
||||
@@ -250,28 +250,28 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="道路运输证有效期止">
|
||||
<span class="certification-audit__value">
|
||||
{{ auditValue('roadTransportCertEndDate') }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="道路运输年审有效期">
|
||||
<span class="certification-audit__value">
|
||||
{{ auditValue('annualReviewEndDate') }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="机动车登记编号">
|
||||
<span class="certification-audit__value">{{ auditValue('registrationNo') }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="机动车登记日期">
|
||||
<span class="certification-audit__value">{{ auditValue('registrationDate') }}</span>
|
||||
</el-form-item>
|
||||
@@ -288,7 +288,7 @@
|
||||
|
||||
<section-card title="证件图片">
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<image-upload-field
|
||||
label="行驶证主页正面"
|
||||
prop="drivingLicenseImage"
|
||||
@@ -298,7 +298,7 @@
|
||||
class-prefix="vehicle"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<image-upload-field
|
||||
label="行驶证主页反面"
|
||||
prop="drivingLicenseMainBack"
|
||||
@@ -308,7 +308,7 @@
|
||||
class-prefix="vehicle"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<image-upload-field
|
||||
label="行驶证副页正面"
|
||||
prop="drivingLicenseViceFront"
|
||||
@@ -320,7 +320,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<image-upload-field
|
||||
label="行驶证副页反面"
|
||||
prop="drivingLicenseViceBack"
|
||||
@@ -330,7 +330,7 @@
|
||||
class-prefix="vehicle"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<image-upload-field
|
||||
label="道路运输证图片"
|
||||
prop="roadTransportCertImage"
|
||||
@@ -340,7 +340,7 @@
|
||||
class-prefix="vehicle"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<image-upload-field
|
||||
label="机动车登记本"
|
||||
prop="registrationImage"
|
||||
@@ -393,56 +393,17 @@
|
||||
class="vehicle-form archive-form"
|
||||
>
|
||||
<section-card title="基础车辆信息">
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="所有组织" prop="organizationName">
|
||||
<el-cascader
|
||||
v-model="organizationCascaderValue"
|
||||
:options="organizationTreeOptions"
|
||||
:props="organizationCascaderProps"
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择 所属组织"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="10">
|
||||
<el-form-item label="车牌号" prop="plateNo">
|
||||
<div class="plate-group">
|
||||
<el-select
|
||||
v-model="vehicleForm.plateProvince"
|
||||
placeholder="请选择"
|
||||
filterable
|
||||
@change="syncPlateNo(false)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in plateProvinceOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-input
|
||||
v-model="vehicleForm.plateNoBody"
|
||||
maxlength="7"
|
||||
show-word-limit
|
||||
@input="handlePlateBodyInput"
|
||||
/>
|
||||
<el-select
|
||||
v-model="vehicleForm.plateColor"
|
||||
placeholder="请选择"
|
||||
@change="syncPlateNo(false)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in plateColorOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<el-input
|
||||
v-model="vehicleForm.plateNo"
|
||||
maxlength="8"
|
||||
show-word-limit
|
||||
placeholder="如：京A12345"
|
||||
@input="handlePlateNoInput"
|
||||
@blur="validatePlateFormat"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
@@ -462,7 +423,7 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="外廓尺寸（毫米）">
|
||||
<div class="dimension-group">
|
||||
<div class="dimension-group__item">
|
||||
@@ -494,7 +455,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="核定载质量（KG）" prop="approvedLoadKg">
|
||||
<el-input
|
||||
v-model="vehicleForm.approvedLoadKg"
|
||||
@@ -503,7 +464,7 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="准牵引总质量（KG）" prop="tractionMassKg">
|
||||
<el-input
|
||||
v-model="vehicleForm.tractionMassKg"
|
||||
@@ -512,7 +473,7 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="业务关系" prop="businessRelation">
|
||||
<el-select v-model="vehicleForm.businessRelation">
|
||||
<el-option
|
||||
@@ -526,7 +487,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="能源类型" prop="energyType">
|
||||
<el-select
|
||||
v-model="vehicleForm.energyType"
|
||||
@@ -543,7 +504,7 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="强制报废日期" prop="compulsoryScrapDate">
|
||||
<div class="date-with-flag">
|
||||
<el-date-picker
|
||||
@@ -556,18 +517,50 @@
|
||||
v-model="vehicleForm.compulsoryScrapLongTerm"
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
@change="handleLongTermChange('compulsoryScrapDate', 'compulsoryScrapLongTerm')"
|
||||
>
|
||||
长期有效
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="海关备案号" prop="customsRecordNo">
|
||||
<el-input v-model="vehicleForm.customsRecordNo" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="所有组织" prop="organizationName">
|
||||
<el-cascader
|
||||
v-model="organizationCascaderValue"
|
||||
:options="organizationTreeOptions"
|
||||
:props="organizationCascaderProps"
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="使用部门" prop="useDepartment">
|
||||
<el-select
|
||||
v-model="vehicleForm.useDepartment"
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in organizationOptions"
|
||||
:key="item.id"
|
||||
:label="item.rawLabel"
|
||||
:value="item.rawLabel"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</section-card>
|
||||
|
||||
<section-card title="车辆资质图片">
|
||||
@@ -577,50 +570,54 @@
|
||||
<el-input v-model="vehicleForm.drivingLicenseNo" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="行驶证有效期" prop="drivingLicenseEndDate">
|
||||
<div class="date-with-flag">
|
||||
<el-date-picker
|
||||
v-model="vehicleForm.drivingLicenseEndDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
:disabled="vehicleForm.drivingLicenseLongTerm === 1"
|
||||
/>
|
||||
<el-checkbox
|
||||
v-model="vehicleForm.drivingLicenseLongTerm"
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
@change="handleLongTermChange('drivingLicenseEndDate', 'drivingLicenseLongTerm')"
|
||||
>
|
||||
长期有效
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="道路运输证号" prop="roadTransportCertNo">
|
||||
<el-input v-model="vehicleForm.roadTransportCertNo" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="道路运输证有效期" prop="roadTransportCertEndDate">
|
||||
<div class="date-with-flag">
|
||||
<el-date-picker
|
||||
v-model="vehicleForm.roadTransportCertEndDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
:disabled="vehicleForm.roadTransportCertLongTerm === 1"
|
||||
/>
|
||||
<el-checkbox
|
||||
v-model="vehicleForm.roadTransportCertLongTerm"
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
@change="handleLongTermChange('roadTransportCertEndDate', 'roadTransportCertLongTerm')"
|
||||
>
|
||||
长期有效
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="道路运输年审有效期" prop="annualReviewEndDate">
|
||||
<div class="date-with-flag">
|
||||
<el-date-picker
|
||||
@@ -633,6 +630,7 @@
|
||||
v-model="vehicleForm.annualReviewLongTerm"
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
@change="handleLongTermChange('annualReviewEndDate', 'annualReviewLongTerm')"
|
||||
>
|
||||
长期有效
|
||||
</el-checkbox>
|
||||
@@ -641,12 +639,12 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="机动车登记编号" prop="registrationNo">
|
||||
<el-input v-model="vehicleForm.registrationNo" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="机动车登记日期" prop="registrationDate">
|
||||
<el-date-picker
|
||||
v-model="vehicleForm.registrationDate"
|
||||
@@ -657,7 +655,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<image-upload-field
|
||||
label="行驶证主页正面"
|
||||
prop="drivingLicenseImage"
|
||||
@@ -672,7 +670,7 @@
|
||||
"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<image-upload-field
|
||||
label="行驶证主页反面"
|
||||
prop="drivingLicenseMainBack"
|
||||
@@ -687,7 +685,7 @@
|
||||
"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<image-upload-field
|
||||
label="行驶证副页正面"
|
||||
prop="drivingLicenseViceFront"
|
||||
@@ -704,7 +702,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<image-upload-field
|
||||
label="行驶证副页反面"
|
||||
prop="drivingLicenseViceBack"
|
||||
@@ -719,7 +717,7 @@
|
||||
"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<image-upload-field
|
||||
label="道路运输证图片"
|
||||
prop="roadTransportCertImage"
|
||||
@@ -731,7 +729,7 @@
|
||||
@success="url => handleVehicleCertificateUploadSuccess('roadTransportCertImage', url)"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<image-upload-field
|
||||
label="机动车登记本"
|
||||
prop="registrationImage"
|
||||
@@ -787,8 +785,7 @@ import VehicleLedger from './components/vehicle-ledger.vue';
|
||||
const emptyForm = () => ({
|
||||
id: '',
|
||||
organizationName: '',
|
||||
plateProvince: '',
|
||||
plateNoBody: '',
|
||||
useDepartment: '',
|
||||
plateNo: '',
|
||||
plateColor: '',
|
||||
vehicleType: '',
|
||||
@@ -823,44 +820,6 @@ const emptyForm = () => ({
|
||||
status: 1,
|
||||
});
|
||||
|
||||
const plateProvinceOptions = [
|
||||
'京',
|
||||
'津',
|
||||
'沪',
|
||||
'渝',
|
||||
'冀',
|
||||
'豫',
|
||||
'云',
|
||||
'辽',
|
||||
'黑',
|
||||
'湘',
|
||||
'皖',
|
||||
'鲁',
|
||||
'新',
|
||||
'苏',
|
||||
'浙',
|
||||
'赣',
|
||||
'鄂',
|
||||
'桂',
|
||||
'甘',
|
||||
'晋',
|
||||
'蒙',
|
||||
'陕',
|
||||
'吉',
|
||||
'闽',
|
||||
'贵',
|
||||
'粤',
|
||||
'青',
|
||||
'藏',
|
||||
'川',
|
||||
'宁',
|
||||
'琼',
|
||||
'港',
|
||||
'澳',
|
||||
].map(item => ({ label: item, value: item }));
|
||||
|
||||
const plateColorOptions = ['黄牌', '蓝牌', '绿牌'].map(item => ({ label: item, value: item }));
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ImageUploadField,
|
||||
@@ -904,8 +863,6 @@ export default {
|
||||
vehicleCertificateUploads: {},
|
||||
uploadHeaders: getUploadHeaders(),
|
||||
organizationOptions: [],
|
||||
plateProvinceOptions,
|
||||
plateColorOptions,
|
||||
vehicleTypeOptions: [
|
||||
{ label: '高栏车', value: '高栏' },
|
||||
{ label: '低栏车', value: '低栏' },
|
||||
@@ -928,11 +885,11 @@ export default {
|
||||
energyType: [{ required: true, message: '请选择能源类型', trigger: 'change' }],
|
||||
drivingLicenseNo: [{ required: true, message: '请输入行驶证档案编号', trigger: 'blur' }],
|
||||
drivingLicenseEndDate: [
|
||||
{ required: true, message: '请选择行驶证有效期', trigger: 'change' },
|
||||
{ validator: this.validateDrivingLicenseEndDate, trigger: 'change' },
|
||||
],
|
||||
roadTransportCertNo: [{ required: true, message: '请输入道路运输证号', trigger: 'blur' }],
|
||||
roadTransportCertEndDate: [
|
||||
{ required: true, message: '请选择道路运输证有效期', trigger: 'change' },
|
||||
{ validator: this.validateRoadTransportCertEndDate, trigger: 'change' },
|
||||
],
|
||||
annualReviewEndDate: [{ validator: this.validateAnnualReviewEndDate, trigger: 'change' }],
|
||||
registrationNo: [{ required: true, message: '请输入机动车登记编号', trigger: 'blur' }],
|
||||
@@ -1021,19 +978,20 @@ export default {
|
||||
return String(value).replace(/\D/g, '');
|
||||
},
|
||||
validatePlateNo(rule, value, callback) {
|
||||
const plateProvince = String(this.vehicleForm.plateProvince || '').trim();
|
||||
const plateNoBody = String(this.vehicleForm.plateNoBody || '')
|
||||
const plateNo = String(value || '')
|
||||
.trim()
|
||||
.toUpperCase();
|
||||
const plateColor = String(this.vehicleForm.plateColor || '').trim();
|
||||
if (!plateProvince || !plateNoBody || !plateColor) {
|
||||
callback(new Error('请完整填写车牌号'));
|
||||
if (!plateNo) {
|
||||
callback(new Error('请输入车牌号'));
|
||||
return;
|
||||
}
|
||||
if (!/^[A-Z][A-Z0-9挂学警港澳]{5,6}$/.test(plateNoBody)) {
|
||||
callback(new Error('请输入标准车牌号'));
|
||||
if (!/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼港澳]{1}[A-Z][A-Z0-9挂学警港澳]{5,6}$/.test(plateNo)) {
|
||||
callback(new Error('请输入标准车牌号（如：京A12345）'));
|
||||
return;
|
||||
}
|
||||
if (this.vehicleForm.plateNo !== plateNo) {
|
||||
this.vehicleForm.plateNo = plateNo;
|
||||
}
|
||||
callback();
|
||||
},
|
||||
validateAnnualReviewEndDate(rule, value, callback) {
|
||||
@@ -1043,6 +1001,35 @@ export default {
|
||||
}
|
||||
callback();
|
||||
},
|
||||
// 长期有效勾选：勾选时清空对应日期（不可编辑由 date-picker :disabled 控制），取消勾选后可重新填报
|
||||
handleLongTermChange(dateProp, longTermProp) {
|
||||
if (this.vehicleForm[longTermProp] === 1) {
|
||||
this.vehicleForm[dateProp] = '';
|
||||
}
|
||||
this.$refs.vehicleForm?.validateField(dateProp);
|
||||
},
|
||||
validateDrivingLicenseEndDate(rule, value, callback) {
|
||||
if (this.vehicleForm.drivingLicenseLongTerm === 1 && !value) {
|
||||
callback();
|
||||
return;
|
||||
}
|
||||
if (!value) {
|
||||
callback(new Error('请选择行驶证有效期'));
|
||||
return;
|
||||
}
|
||||
callback();
|
||||
},
|
||||
validateRoadTransportCertEndDate(rule, value, callback) {
|
||||
if (this.vehicleForm.roadTransportCertLongTerm === 1 && !value) {
|
||||
callback();
|
||||
return;
|
||||
}
|
||||
if (!value) {
|
||||
callback(new Error('请选择道路运输证有效期'));
|
||||
return;
|
||||
}
|
||||
callback();
|
||||
},
|
||||
openVehicle(row, readonly = false) {
|
||||
this.readonly = readonly;
|
||||
if (!row?.id) {
|
||||
@@ -1420,28 +1407,16 @@ export default {
|
||||
this.syncPlateNo();
|
||||
},
|
||||
syncPlateNo(validate = true) {
|
||||
const plateProvince = String(this.vehicleForm.plateProvince || '').trim();
|
||||
const plateNoBody = String(this.vehicleForm.plateNoBody || '')
|
||||
.trim()
|
||||
const plateNo = String(this.vehicleForm.plateNo || '')
|
||||
.replace(/\s/g, '')
|
||||
.toUpperCase();
|
||||
const plateColor = String(this.vehicleForm.plateColor || '').trim();
|
||||
this.vehicleForm.plateNoBody = plateNoBody;
|
||||
this.vehicleForm.plateNo =
|
||||
plateProvince && plateNoBody ? `${plateProvince}${plateNoBody}` : '';
|
||||
this.vehicleForm.plateColor = plateColor;
|
||||
this.vehicleForm.plateNo = plateNo;
|
||||
if (validate) {
|
||||
this.$refs.vehicleForm?.validateField('plateNo');
|
||||
}
|
||||
},
|
||||
splitPlateNo() {
|
||||
const plateNo = String(this.vehicleForm.plateNo || '').trim();
|
||||
if (!plateNo) {
|
||||
this.vehicleForm.plateProvince = '';
|
||||
this.vehicleForm.plateNoBody = '';
|
||||
return;
|
||||
}
|
||||
this.vehicleForm.plateProvince = plateNo.slice(0, 1);
|
||||
this.vehicleForm.plateNoBody = plateNo.slice(1).toUpperCase();
|
||||
// 车牌号已统一为单一 input，无需拆分
|
||||
},
|
||||
handleSubmit() {
|
||||
this.syncPlateNo();
|
||||
@@ -1681,10 +1656,60 @@ export default {
|
||||
}
|
||||
|
||||
.plate-group {
|
||||
display: grid;
|
||||
grid-template-columns: 112px minmax(0, 1fr) 112px;
|
||||
gap: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
transition: border-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: #c0c4cc;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
// 三个子控件：去掉各自边框，整体形成一个输入框
|
||||
:deep(.el-select),
|
||||
:deep(.el-input) {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
:deep(.el-select:first-child) {
|
||||
flex: 0 0 12%;
|
||||
}
|
||||
|
||||
:deep(.el-select:last-child) {
|
||||
flex: 0 0 18%;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper),
|
||||
:deep(.el-select__wrapper) {
|
||||
box-shadow: none !important;
|
||||
border-radius: 0;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
// 子项之间用竖线分隔，视觉上是一个整体
|
||||
:deep(.el-select + .el-select),
|
||||
:deep(.el-select + .el-input),
|
||||
:deep(.el-input + .el-select) {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 6px;
|
||||
bottom: 6px;
|
||||
width: 1px;
|
||||
background: #e4e7ed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dimension-group {
|
||||
@@ -1704,7 +1729,6 @@ export default {
|
||||
.dimension-group__label {
|
||||
flex-shrink: 0;
|
||||
color: #303133;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.date-with-flag {
|
||||
|
||||
Reference in New Issue
Block a user