feat(transportCapacity): 优化车辆与司机弹窗布局并新增字段支持

- 车辆新增弹窗:所有组织移至基础车辆信息区末尾,新增使用部门字段,使用部门复用部门下拉
- 车牌号三段合并为整体输入框,优化样式为flex布局,去除多余边框及阴影,统一视觉
- 长期有效勾选时清空对应日期且禁用输入,新增handleLongTermChange方法,表单校验支持长期有效跳过必填
- 司机弹窗基础身份信息新增placeholder,调整布局,基础身份三列保持不变,其他信息行按需求拆分重排为一致三列
- 后端新增use_department字段,相关mapper、service及校验同步更新,新增增量迁移脚本支持
- 车辆表单相关输入控件宽度统一调整为6列布局,保持与其它区块一致,提升整体UI协调性
- 移除车辆车牌号拆分相关字段及逻辑,车牌号统一管理为单个字段,简化处理流程
- 代码中新增校验规则validateDrivingLicenseEndDate及validateRoadTransportCertEndDate,支持长期有效逻辑
- 优化图片上传区和证件信息区表单字段排列,提升表单整体易用性与规范性
This commit is contained in:
2026-09-09 15:37:40 +08:00
parent 006dc95bf0
commit 1972115173
3 changed files with 279 additions and 186 deletions
+29
View File
@@ -83,3 +83,32 @@
3. `loadSettlementDictionaries``Promise.all` 追加 `getBizDictionary({ code: 'contractCategory' })`,映射填充后**条件覆盖** `contractCategory` 列 dicData(仅非空时)。 3. `loadSettlementDictionaries``Promise.all` 追加 `getBizDictionary({ code: 'contractCategory' })`,映射填充后**条件覆盖** `contractCategory` 列 dicData(仅非空时)。
- 列表页列显示/搜索下拉、详情页(detailValue 已有 `prop==='contractCategory'` 分支走 displayStatus)均因 column.dicData 覆盖而自动跟随业务字典。 - 列表页列显示/搜索下拉、详情页(detailValue 已有 `prop==='contractCategory'` 分支走 displayStatus)均因 column.dicData 覆盖而自动跟随业务字典。
- 注意:`config.defaultForm.contractCategory: '客户合同'`option/contract-manage.js)为硬编码中文默认值,若业务字典 dictKey 非中文需同步调整。 - 注意:`config.defaultForm.contractCategory: '客户合同'`option/contract-manage.js)为硬编码中文默认值,若业务字典 dictKey 非中文需同步调整。
## 车辆新增弹窗:所有组织移位 + 使用部门 + 长期有效清空(vehicle.vue + 后端)
- 需求(transportCapacity/vehicle):①所有组织移到「基础车辆信息」区末尾;②新增「使用部门」字段(后端 transport_vehicle 无该字段,需加);③车牌号三段(省/号码/颜色)包成整体输入框+减宽;④勾选「长期有效」清空对应日期且不可编辑。
- 用户确认:所有组织+使用部门放「基础车辆信息」区末尾;使用部门用部门下拉(复用 getDeptTree→organizationOptions,存部门名,仅部门名非级联);车牌号包成整体输入框+减宽;长期有效 4 组全部统一清空(强制报废/行驶证/道路运输证/年审)。
- 前端(vehicle.vue):
1. emptyForm 加 `useDepartment: ''`
2. 删「基础车辆信息」首行的「所有组织」(原 span24),在区末新增一行:`使用部门`(span8, el-select+organizationOptions, 存 rawLabel) + `所有组织`(span8, el-cascader)。organizationOptions 由 initDeptTree 填充。
3. `.plate-group` 由 grid(112px 1fr 112px) 改为 flex 整体输入框:外层 border+radius+focus-within 变化;内部 el-select/el-input 去 box-shadow、无边框,第一/最后 select flex 0 0 30%、中间 input flex 1,子项间用 `::before` 竖线分隔。
4. 4 组 date-picker 加 `:disabled="xxxLongTerm === 1"`(行驶证/道路运输证原缺,补上),checkbox 加 `@change="handleLongTermChange(日期prop, longterm prop)"`;新增方法 handleLongTermChange(勾选时清空日期并 validateField)。
5. formRulesdrivingLicenseEndDate / roadTransportCertEndDate 由 required 改为 validator(新增 validateDrivingLicenseEndDate / validateRoadTransportCertEndDatelongTerm===1 时跳过必填),annualReview 原 validator 已支持。
- 后端(tms-erp-api-ws,新增 use_department 列):
- `TransportVehicle.java``private String useDepartment`
- `blade_transport_vehicle.sql` 建表加 `use_department varchar(50)`
- `TransportVehicleExcel.java``使用部门` 列。
- `TransportVehicleMapper.xml` resultMap + BaseColumn + QueryCondition(useDepartment LIKE) 各加。
- `TransportVehicleServiceImpl.prepare()` trim useDepartmentvalidate() 加长度≤50 校验。
- 新增增量迁移 `doc/sql/transport/blade_transport_vehicle_use_department_patch_20260909.sql`ALTER ADD use_department AFTER organization_name)。
- 注意:VO 继承 entity 无需改;Wrapper BeanUtil 同名透传。已上线库须执行 patch SQL(建表脚本是 DROP+CREATE,勿直接跑)。
- 后续补充(vehicle.vue「车辆资质图片」区输入框对齐):第一行原 span `6/8/10` 不等宽(行驶证档案编号 6 / 行驶证有效期 8 / 道路运输证号 10)导致输入框宽度不齐,统一改为 `8/8/8`,与下方各行 span=8 一致。仅改 2 处 span,无逻辑改动。
## 司机弹窗:补 placeholder + 每行统一 3 列(transportCapacity/driver.vue
- 需求:新增/编辑司机弹窗 ①输入框无提示文案;②基础身份信息 3 列,其它 4 列 / 6 列行不统一。
- 改动(仅 1819 行 driver.vue 的 126-540 行 `<driver-dialog>` 模板,script/style 不动):
1. **基础身份信息**:行结构不动,7 个 el-form-item 控件补 placeholder(司机姓名/身份证号/出生年月/性别/民族/学历/详细地址)。住址已有「请选择省市区」、驾驶车辆已有「请输入或选择车辆」,不动。
2. **驾驶证信息**:第一行 4 列(:span=6)拆为两行 — 行 1(准驾车型 / 档案编号 / 有效期 date-range:span=8+ 行 2(长期有效,:span=8)。起/止 placeholder 保留简短「起」「止」,符合主人 1.B 偏好(保留原 date-range 二联结构,不改 daterange)。
3. **从业资格证信息**:第一行 4 列拆为两行 — 行 1(从业资格认证类型 / 资格证号 / 有效期,:span=8+ 行 2(长期有效,:span=8)。资格证号 placeholder 保留「默认身份证号」不动。
4. **司机联系信息**:一行 6 列拆为两行 — 行 1(司机类型 / 手机号 / 紧急联系人姓名,:span=8)+ 行 2(紧急联系人手机号 / 与联系人关系 / 所属组织,:span=8)。所属组织已有 placeholder,不动。
- 决策点(主人确认):1.B(保留原 date-range 二联 + 第三列留空后拆行的方案);2 保留;3.A(驾驶证主页/副页、封面页/内容页两组上传图仍 :span=12,与占整行宽的原貌一致)。
- 校验:node 脚本统计 4 个 section-card / 13 个 el-row / 31 个 el-col / 24 个 el-form-item,全平衡。改动只在 driver.vue 一文件,~25 处 Edit 调用。
+62 -22
View File
@@ -125,43 +125,50 @@
> >
<section-card title="基础身份信息"> <section-card title="基础身份信息">
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="8"> <el-col :span="6">
<el-form-item label="司机姓名" prop="driverName"> <el-form-item label="司机姓名" prop="driverName">
<el-input v-model="driverForm.driverName" maxlength="10" show-word-limit /> <el-input
v-model="driverForm.driverName"
maxlength="10"
show-word-limit
placeholder="请输入司机姓名"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="身份证号" prop="idCardNo"> <el-form-item label="身份证号" prop="idCardNo">
<el-input <el-input
v-model="driverForm.idCardNo" v-model="driverForm.idCardNo"
maxlength="18" maxlength="18"
show-word-limit show-word-limit
placeholder="请输入身份证号"
@input="driverForm.idCardNo = String(driverForm.idCardNo || '').toUpperCase()" @input="driverForm.idCardNo = String(driverForm.idCardNo || '').toUpperCase()"
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="出生年月" prop="birthday"> <el-form-item label="出生年月" prop="birthday">
<el-date-picker <el-date-picker
v-model="driverForm.birthday" v-model="driverForm.birthday"
type="date" type="date"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
placeholder="请选择出生年月"
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="8"> <el-col :span="6">
<el-form-item label="性别" prop="gender"> <el-form-item label="性别" prop="gender">
<el-select v-model="driverForm.gender" clearable> <el-select v-model="driverForm.gender" clearable placeholder="请选择性别">
<el-option label="男" value="男" /> <el-option label="男" value="男" />
<el-option label="女" value="女" /> <el-option label="女" value="女" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="民族" prop="nation"> <el-form-item label="民族" prop="nation">
<el-select v-model="driverForm.nation" clearable filterable> <el-select v-model="driverForm.nation" clearable filterable placeholder="请选择民族">
<el-option <el-option
v-for="item in nationOptions" v-for="item in nationOptions"
:key="item" :key="item"
@@ -171,9 +178,14 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="学历" prop="education"> <el-form-item label="学历" prop="education">
<el-select v-model="driverForm.education" clearable filterable> <el-select
v-model="driverForm.education"
clearable
filterable
placeholder="请选择学历"
>
<el-option <el-option
v-for="item in educationOptions" v-for="item in educationOptions"
:key="item" :key="item"
@@ -185,7 +197,7 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="8"> <el-col :span="6">
<el-form-item label="住址" prop="addressRegion"> <el-form-item label="住址" prop="addressRegion">
<el-cascader <el-cascader
ref="addressRegionCascader" ref="addressRegionCascader"
@@ -199,14 +211,19 @@
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="详细地址" prop="address"> <el-form-item label="详细地址" prop="address">
<el-input v-model="driverForm.address" maxlength="200" show-word-limit /> <el-input
v-model="driverForm.address"
maxlength="200"
show-word-limit
placeholder="请输入详细地址"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="8"> <el-col :span="6">
<el-form-item label="驾驶车辆" prop="drivingVehicle"> <el-form-item label="驾驶车辆" prop="drivingVehicle">
<el-input <el-input
v-model="driverForm.drivingVehicle" v-model="driverForm.drivingVehicle"
@@ -227,7 +244,7 @@
</el-input> </el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="岗位" prop="postList"> <el-form-item label="岗位" prop="postList">
<el-checkbox-group v-model="driverForm.postList"> <el-checkbox-group v-model="driverForm.postList">
<el-checkbox label="司机" /> <el-checkbox label="司机" />
@@ -238,7 +255,7 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="8"> <el-col :span="6">
<image-upload-field <image-upload-field
label="身份证正面照" label="身份证正面照"
prop="idCardFront" prop="idCardFront"
@@ -249,7 +266,7 @@
@success="url => handleIdCardUploadSuccess('idCardFront', url)" @success="url => handleIdCardUploadSuccess('idCardFront', url)"
/> />
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<image-upload-field <image-upload-field
label="身份证反面照" label="身份证反面照"
prop="idCardBack" prop="idCardBack"
@@ -260,7 +277,7 @@
@success="url => handleIdCardUploadSuccess('idCardBack', url)" @success="url => handleIdCardUploadSuccess('idCardBack', url)"
/> />
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<image-upload-field <image-upload-field
label="大头照" label="大头照"
prop="headPhoto" prop="headPhoto"
@@ -284,6 +301,7 @@
filterable filterable
allow-create allow-create
default-first-option default-first-option
placeholder="请选择准驾车型"
> >
<el-option <el-option
v-for="item in drivingTypeOptions" v-for="item in drivingTypeOptions"
@@ -296,7 +314,11 @@
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-form-item label="档案编号" prop="drivingLicenseNo"> <el-form-item label="档案编号" prop="drivingLicenseNo">
<el-input v-model="driverForm.drivingLicenseNo" maxlength="50" /> <el-input
v-model="driverForm.drivingLicenseNo"
maxlength="50"
placeholder="请输入档案编号"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
@@ -320,6 +342,8 @@
</div> </div>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row>
<el-row :gutter="18">
<el-col :span="6"> <el-col :span="6">
<el-form-item label="长期有效" prop="drivingLicenseLongTerm"> <el-form-item label="长期有效" prop="drivingLicenseLongTerm">
<el-checkbox <el-checkbox
@@ -371,6 +395,7 @@
v-model="driverForm.qualificationType" v-model="driverForm.qualificationType"
clearable clearable
filterable filterable
placeholder="请选择从业资格认证类型"
> >
<el-option <el-option
v-for="item in qualificationTypeOptions" v-for="item in qualificationTypeOptions"
@@ -396,11 +421,14 @@
v-model="driverForm.qualificationEndDate" v-model="driverForm.qualificationEndDate"
type="date" type="date"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
placeholder="请选择有效期"
:disabled="driverForm.qualificationLongTerm === 1" :disabled="driverForm.qualificationLongTerm === 1"
@change="validateFormField('qualificationEndDate')" @change="validateFormField('qualificationEndDate')"
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row>
<el-row :gutter="18">
<el-col :span="6"> <el-col :span="6">
<el-form-item label="长期有效" prop="qualificationLongTerm"> <el-form-item label="长期有效" prop="qualificationLongTerm">
<el-checkbox <el-checkbox
@@ -444,7 +472,7 @@
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="6"> <el-col :span="6">
<el-form-item label="司机类型" prop="driverType"> <el-form-item label="司机类型" prop="driverType">
<el-select v-model="driverForm.driverType" filterable> <el-select v-model="driverForm.driverType" filterable placeholder="请选择司机类型">
<el-option label="自有" value="自有" /> <el-option label="自有" value="自有" />
<el-option label="外协" value="外协" /> <el-option label="外协" value="外协" />
<el-option label="承运管理员" value="承运管理员" /> <el-option label="承运管理员" value="承运管理员" />
@@ -453,7 +481,11 @@
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-form-item label="手机号" prop="mobile"> <el-form-item label="手机号" prop="mobile">
<el-input v-model="driverForm.mobile" maxlength="20" /> <el-input
v-model="driverForm.mobile"
maxlength="20"
placeholder="请输入手机号"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
@@ -461,13 +493,20 @@
<el-input <el-input
v-model="driverForm.emergencyContactName" v-model="driverForm.emergencyContactName"
maxlength="20" maxlength="20"
placeholder="请输入紧急联系人姓名"
@input="driverForm.emergencyContactName = removeDigits($event)" @input="driverForm.emergencyContactName = removeDigits($event)"
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row>
<el-row :gutter="18">
<el-col :span="6"> <el-col :span="6">
<el-form-item label="紧急联系人手机号" prop="emergencyContactMobile"> <el-form-item label="紧急联系人手机号" prop="emergencyContactMobile">
<el-input v-model="driverForm.emergencyContactMobile" maxlength="20" /> <el-input
v-model="driverForm.emergencyContactMobile"
maxlength="20"
placeholder="请输入紧急联系人手机号"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
@@ -478,6 +517,7 @@
filterable filterable
allow-create allow-create
default-first-option default-first-option
placeholder="请选择与联系人关系"
> >
<el-option <el-option
v-for="item in relationOptions" v-for="item in relationOptions"
+188 -164
View File
@@ -137,34 +137,34 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="8"> <el-col :span="6">
<el-form-item label="车牌号"> <el-form-item label="车牌号">
<span class="certification-audit__value">{{ auditValue('plateNo') }}</span> <span class="certification-audit__value">{{ auditValue('plateNo') }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="车牌颜色"> <el-form-item label="车牌颜色">
<span class="certification-audit__value">{{ auditValue('plateColor') }}</span> <span class="certification-audit__value">{{ auditValue('plateColor') }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="车辆类型"> <el-form-item label="车辆类型">
<span class="certification-audit__value">{{ auditValue('vehicleType') }}</span> <span class="certification-audit__value">{{ auditValue('vehicleType') }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="8"> <el-col :span="6">
<el-form-item label="业务关系"> <el-form-item label="业务关系">
<span class="certification-audit__value">{{ auditValue('businessRelation') }}</span> <span class="certification-audit__value">{{ auditValue('businessRelation') }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="能源类型"> <el-form-item label="能源类型">
<span class="certification-audit__value">{{ auditValue('energyType') }}</span> <span class="certification-audit__value">{{ auditValue('energyType') }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="强制报废日期"> <el-form-item label="强制报废日期">
<span class="certification-audit__value"> <span class="certification-audit__value">
{{ auditValue('compulsoryScrapDate') }} {{ auditValue('compulsoryScrapDate') }}
@@ -176,29 +176,29 @@
<section-card title="尺寸重量"> <section-card title="尺寸重量">
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="8"> <el-col :span="6">
<el-form-item label="外廓长度(毫米)"> <el-form-item label="外廓长度(毫米)">
<span class="certification-audit__value">{{ auditValue('outerLength') }}</span> <span class="certification-audit__value">{{ auditValue('outerLength') }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="外廓宽度(毫米)"> <el-form-item label="外廓宽度(毫米)">
<span class="certification-audit__value">{{ auditValue('outerWidth') }}</span> <span class="certification-audit__value">{{ auditValue('outerWidth') }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="外廓高度(毫米)"> <el-form-item label="外廓高度(毫米)">
<span class="certification-audit__value">{{ auditValue('outerHeight') }}</span> <span class="certification-audit__value">{{ auditValue('outerHeight') }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="8"> <el-col :span="6">
<el-form-item label="核定载质量(KG"> <el-form-item label="核定载质量(KG">
<span class="certification-audit__value">{{ auditValue('approvedLoadKg') }}</span> <span class="certification-audit__value">{{ auditValue('approvedLoadKg') }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="准牵引总质量(KG"> <el-form-item label="准牵引总质量(KG">
<span class="certification-audit__value">{{ auditValue('tractionMassKg') }}</span> <span class="certification-audit__value">{{ auditValue('tractionMassKg') }}</span>
</el-form-item> </el-form-item>
@@ -208,17 +208,17 @@
<section-card title="证件信息"> <section-card title="证件信息">
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="8"> <el-col :span="6">
<el-form-item label="海关备案号"> <el-form-item label="海关备案号">
<span class="certification-audit__value">{{ auditValue('customsRecordNo') }}</span> <span class="certification-audit__value">{{ auditValue('customsRecordNo') }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="行驶证档案编号"> <el-form-item label="行驶证档案编号">
<span class="certification-audit__value">{{ auditValue('drivingLicenseNo') }}</span> <span class="certification-audit__value">{{ auditValue('drivingLicenseNo') }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="行驶证有效期起"> <el-form-item label="行驶证有效期起">
<span class="certification-audit__value"> <span class="certification-audit__value">
{{ auditValue('drivingLicenseStartDate') }} {{ auditValue('drivingLicenseStartDate') }}
@@ -227,21 +227,21 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="8"> <el-col :span="6">
<el-form-item label="行驶证有效期止"> <el-form-item label="行驶证有效期止">
<span class="certification-audit__value"> <span class="certification-audit__value">
{{ auditValue('drivingLicenseEndDate') }} {{ auditValue('drivingLicenseEndDate') }}
</span> </span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="道路运输证号"> <el-form-item label="道路运输证号">
<span class="certification-audit__value"> <span class="certification-audit__value">
{{ auditValue('roadTransportCertNo') }} {{ auditValue('roadTransportCertNo') }}
</span> </span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="道路运输证有效期起"> <el-form-item label="道路运输证有效期起">
<span class="certification-audit__value"> <span class="certification-audit__value">
{{ auditValue('roadTransportCertStartDate') }} {{ auditValue('roadTransportCertStartDate') }}
@@ -250,28 +250,28 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="8"> <el-col :span="6">
<el-form-item label="道路运输证有效期止"> <el-form-item label="道路运输证有效期止">
<span class="certification-audit__value"> <span class="certification-audit__value">
{{ auditValue('roadTransportCertEndDate') }} {{ auditValue('roadTransportCertEndDate') }}
</span> </span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="道路运输年审有效期"> <el-form-item label="道路运输年审有效期">
<span class="certification-audit__value"> <span class="certification-audit__value">
{{ auditValue('annualReviewEndDate') }} {{ auditValue('annualReviewEndDate') }}
</span> </span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="机动车登记编号"> <el-form-item label="机动车登记编号">
<span class="certification-audit__value">{{ auditValue('registrationNo') }}</span> <span class="certification-audit__value">{{ auditValue('registrationNo') }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="8"> <el-col :span="6">
<el-form-item label="机动车登记日期"> <el-form-item label="机动车登记日期">
<span class="certification-audit__value">{{ auditValue('registrationDate') }}</span> <span class="certification-audit__value">{{ auditValue('registrationDate') }}</span>
</el-form-item> </el-form-item>
@@ -288,7 +288,7 @@
<section-card title="证件图片"> <section-card title="证件图片">
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="8"> <el-col :span="6">
<image-upload-field <image-upload-field
label="行驶证主页正面" label="行驶证主页正面"
prop="drivingLicenseImage" prop="drivingLicenseImage"
@@ -298,7 +298,7 @@
class-prefix="vehicle" class-prefix="vehicle"
/> />
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<image-upload-field <image-upload-field
label="行驶证主页反面" label="行驶证主页反面"
prop="drivingLicenseMainBack" prop="drivingLicenseMainBack"
@@ -308,7 +308,7 @@
class-prefix="vehicle" class-prefix="vehicle"
/> />
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<image-upload-field <image-upload-field
label="行驶证副页正面" label="行驶证副页正面"
prop="drivingLicenseViceFront" prop="drivingLicenseViceFront"
@@ -320,7 +320,7 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="8"> <el-col :span="6">
<image-upload-field <image-upload-field
label="行驶证副页反面" label="行驶证副页反面"
prop="drivingLicenseViceBack" prop="drivingLicenseViceBack"
@@ -330,7 +330,7 @@
class-prefix="vehicle" class-prefix="vehicle"
/> />
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<image-upload-field <image-upload-field
label="道路运输证图片" label="道路运输证图片"
prop="roadTransportCertImage" prop="roadTransportCertImage"
@@ -340,7 +340,7 @@
class-prefix="vehicle" class-prefix="vehicle"
/> />
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<image-upload-field <image-upload-field
label="机动车登记本" label="机动车登记本"
prop="registrationImage" prop="registrationImage"
@@ -393,56 +393,17 @@
class="vehicle-form archive-form" class="vehicle-form archive-form"
> >
<section-card title="基础车辆信息"> <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-row :gutter="18">
<el-col :span="10"> <el-col :span="10">
<el-form-item label="车牌号" prop="plateNo"> <el-form-item label="车牌号" prop="plateNo">
<div class="plate-group"> <el-input
<el-select v-model="vehicleForm.plateNo"
v-model="vehicleForm.plateProvince" maxlength="8"
placeholder="请选择" show-word-limit
filterable placeholder="如:京A12345"
@change="syncPlateNo(false)" @input="handlePlateNoInput"
> @blur="validatePlateFormat"
<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-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
@@ -462,7 +423,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="外廓尺寸(毫米)"> <el-form-item label="外廓尺寸(毫米)">
<div class="dimension-group"> <div class="dimension-group">
<div class="dimension-group__item"> <div class="dimension-group__item">
@@ -494,7 +455,7 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="8"> <el-col :span="6">
<el-form-item label="核定载质量(KG" prop="approvedLoadKg"> <el-form-item label="核定载质量(KG" prop="approvedLoadKg">
<el-input <el-input
v-model="vehicleForm.approvedLoadKg" v-model="vehicleForm.approvedLoadKg"
@@ -503,7 +464,7 @@
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="准牵引总质量(KG" prop="tractionMassKg"> <el-form-item label="准牵引总质量(KG" prop="tractionMassKg">
<el-input <el-input
v-model="vehicleForm.tractionMassKg" v-model="vehicleForm.tractionMassKg"
@@ -512,7 +473,7 @@
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="业务关系" prop="businessRelation"> <el-form-item label="业务关系" prop="businessRelation">
<el-select v-model="vehicleForm.businessRelation"> <el-select v-model="vehicleForm.businessRelation">
<el-option <el-option
@@ -526,7 +487,7 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="8"> <el-col :span="6">
<el-form-item label="能源类型" prop="energyType"> <el-form-item label="能源类型" prop="energyType">
<el-select <el-select
v-model="vehicleForm.energyType" v-model="vehicleForm.energyType"
@@ -543,7 +504,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="强制报废日期" prop="compulsoryScrapDate"> <el-form-item label="强制报废日期" prop="compulsoryScrapDate">
<div class="date-with-flag"> <div class="date-with-flag">
<el-date-picker <el-date-picker
@@ -556,18 +517,50 @@
v-model="vehicleForm.compulsoryScrapLongTerm" v-model="vehicleForm.compulsoryScrapLongTerm"
:true-label="1" :true-label="1"
:false-label="0" :false-label="0"
@change="handleLongTermChange('compulsoryScrapDate', 'compulsoryScrapLongTerm')"
> >
长期有效 长期有效
</el-checkbox> </el-checkbox>
</div> </div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="海关备案号" prop="customsRecordNo"> <el-form-item label="海关备案号" prop="customsRecordNo">
<el-input v-model="vehicleForm.customsRecordNo" maxlength="50" /> <el-input v-model="vehicleForm.customsRecordNo" maxlength="50" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </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>
<section-card title="车辆资质图片"> <section-card title="车辆资质图片">
@@ -577,50 +570,54 @@
<el-input v-model="vehicleForm.drivingLicenseNo" maxlength="50" /> <el-input v-model="vehicleForm.drivingLicenseNo" maxlength="50" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="行驶证有效期" prop="drivingLicenseEndDate"> <el-form-item label="行驶证有效期" prop="drivingLicenseEndDate">
<div class="date-with-flag"> <div class="date-with-flag">
<el-date-picker <el-date-picker
v-model="vehicleForm.drivingLicenseEndDate" v-model="vehicleForm.drivingLicenseEndDate"
type="date" type="date"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
:disabled="vehicleForm.drivingLicenseLongTerm === 1"
/> />
<el-checkbox <el-checkbox
v-model="vehicleForm.drivingLicenseLongTerm" v-model="vehicleForm.drivingLicenseLongTerm"
:true-label="1" :true-label="1"
:false-label="0" :false-label="0"
@change="handleLongTermChange('drivingLicenseEndDate', 'drivingLicenseLongTerm')"
> >
长期有效 长期有效
</el-checkbox> </el-checkbox>
</div> </div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="10"> <el-col :span="6">
<el-form-item label="道路运输证号" prop="roadTransportCertNo"> <el-form-item label="道路运输证号" prop="roadTransportCertNo">
<el-input v-model="vehicleForm.roadTransportCertNo" maxlength="50" /> <el-input v-model="vehicleForm.roadTransportCertNo" maxlength="50" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="8"> <el-col :span="6">
<el-form-item label="道路运输证有效期" prop="roadTransportCertEndDate"> <el-form-item label="道路运输证有效期" prop="roadTransportCertEndDate">
<div class="date-with-flag"> <div class="date-with-flag">
<el-date-picker <el-date-picker
v-model="vehicleForm.roadTransportCertEndDate" v-model="vehicleForm.roadTransportCertEndDate"
type="date" type="date"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
:disabled="vehicleForm.roadTransportCertLongTerm === 1"
/> />
<el-checkbox <el-checkbox
v-model="vehicleForm.roadTransportCertLongTerm" v-model="vehicleForm.roadTransportCertLongTerm"
:true-label="1" :true-label="1"
:false-label="0" :false-label="0"
@change="handleLongTermChange('roadTransportCertEndDate', 'roadTransportCertLongTerm')"
> >
长期有效 长期有效
</el-checkbox> </el-checkbox>
</div> </div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="道路运输年审有效期" prop="annualReviewEndDate"> <el-form-item label="道路运输年审有效期" prop="annualReviewEndDate">
<div class="date-with-flag"> <div class="date-with-flag">
<el-date-picker <el-date-picker
@@ -633,6 +630,7 @@
v-model="vehicleForm.annualReviewLongTerm" v-model="vehicleForm.annualReviewLongTerm"
:true-label="1" :true-label="1"
:false-label="0" :false-label="0"
@change="handleLongTermChange('annualReviewEndDate', 'annualReviewLongTerm')"
> >
长期有效 长期有效
</el-checkbox> </el-checkbox>
@@ -641,12 +639,12 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="8"> <el-col :span="6">
<el-form-item label="机动车登记编号" prop="registrationNo"> <el-form-item label="机动车登记编号" prop="registrationNo">
<el-input v-model="vehicleForm.registrationNo" maxlength="50" /> <el-input v-model="vehicleForm.registrationNo" maxlength="50" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-form-item label="机动车登记日期" prop="registrationDate"> <el-form-item label="机动车登记日期" prop="registrationDate">
<el-date-picker <el-date-picker
v-model="vehicleForm.registrationDate" v-model="vehicleForm.registrationDate"
@@ -657,7 +655,7 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="8"> <el-col :span="6">
<image-upload-field <image-upload-field
label="行驶证主页正面" label="行驶证主页正面"
prop="drivingLicenseImage" prop="drivingLicenseImage"
@@ -672,7 +670,7 @@
" "
/> />
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<image-upload-field <image-upload-field
label="行驶证主页反面" label="行驶证主页反面"
prop="drivingLicenseMainBack" prop="drivingLicenseMainBack"
@@ -687,7 +685,7 @@
" "
/> />
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<image-upload-field <image-upload-field
label="行驶证副页正面" label="行驶证副页正面"
prop="drivingLicenseViceFront" prop="drivingLicenseViceFront"
@@ -704,7 +702,7 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="8"> <el-col :span="6">
<image-upload-field <image-upload-field
label="行驶证副页反面" label="行驶证副页反面"
prop="drivingLicenseViceBack" prop="drivingLicenseViceBack"
@@ -719,7 +717,7 @@
" "
/> />
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<image-upload-field <image-upload-field
label="道路运输证图片" label="道路运输证图片"
prop="roadTransportCertImage" prop="roadTransportCertImage"
@@ -731,7 +729,7 @@
@success="url => handleVehicleCertificateUploadSuccess('roadTransportCertImage', url)" @success="url => handleVehicleCertificateUploadSuccess('roadTransportCertImage', url)"
/> />
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<image-upload-field <image-upload-field
label="机动车登记本" label="机动车登记本"
prop="registrationImage" prop="registrationImage"
@@ -787,8 +785,7 @@ import VehicleLedger from './components/vehicle-ledger.vue';
const emptyForm = () => ({ const emptyForm = () => ({
id: '', id: '',
organizationName: '', organizationName: '',
plateProvince: '', useDepartment: '',
plateNoBody: '',
plateNo: '', plateNo: '',
plateColor: '', plateColor: '',
vehicleType: '', vehicleType: '',
@@ -823,44 +820,6 @@ const emptyForm = () => ({
status: 1, status: 1,
}); });
const plateProvinceOptions = [
'京',
'津',
'沪',
'渝',
'冀',
'豫',
'云',
'辽',
'黑',
'湘',
'皖',
'鲁',
'新',
'苏',
'浙',
'赣',
'鄂',
'桂',
'甘',
'晋',
'蒙',
'陕',
'吉',
'闽',
'贵',
'粤',
'青',
'藏',
'川',
'宁',
'琼',
'港',
'澳',
].map(item => ({ label: item, value: item }));
const plateColorOptions = ['黄牌', '蓝牌', '绿牌'].map(item => ({ label: item, value: item }));
export default { export default {
components: { components: {
ImageUploadField, ImageUploadField,
@@ -904,8 +863,6 @@ export default {
vehicleCertificateUploads: {}, vehicleCertificateUploads: {},
uploadHeaders: getUploadHeaders(), uploadHeaders: getUploadHeaders(),
organizationOptions: [], organizationOptions: [],
plateProvinceOptions,
plateColorOptions,
vehicleTypeOptions: [ vehicleTypeOptions: [
{ label: '高栏车', value: '高栏' }, { label: '高栏车', value: '高栏' },
{ label: '低栏车', value: '低栏' }, { label: '低栏车', value: '低栏' },
@@ -928,11 +885,11 @@ export default {
energyType: [{ required: true, message: '请选择能源类型', trigger: 'change' }], energyType: [{ required: true, message: '请选择能源类型', trigger: 'change' }],
drivingLicenseNo: [{ required: true, message: '请输入行驶证档案编号', trigger: 'blur' }], drivingLicenseNo: [{ required: true, message: '请输入行驶证档案编号', trigger: 'blur' }],
drivingLicenseEndDate: [ drivingLicenseEndDate: [
{ required: true, message: '请选择行驶证有效期', trigger: 'change' }, { validator: this.validateDrivingLicenseEndDate, trigger: 'change' },
], ],
roadTransportCertNo: [{ required: true, message: '请输入道路运输证号', trigger: 'blur' }], roadTransportCertNo: [{ required: true, message: '请输入道路运输证号', trigger: 'blur' }],
roadTransportCertEndDate: [ roadTransportCertEndDate: [
{ required: true, message: '请选择道路运输证有效期', trigger: 'change' }, { validator: this.validateRoadTransportCertEndDate, trigger: 'change' },
], ],
annualReviewEndDate: [{ validator: this.validateAnnualReviewEndDate, trigger: 'change' }], annualReviewEndDate: [{ validator: this.validateAnnualReviewEndDate, trigger: 'change' }],
registrationNo: [{ required: true, message: '请输入机动车登记编号', trigger: 'blur' }], registrationNo: [{ required: true, message: '请输入机动车登记编号', trigger: 'blur' }],
@@ -1021,19 +978,20 @@ export default {
return String(value).replace(/\D/g, ''); return String(value).replace(/\D/g, '');
}, },
validatePlateNo(rule, value, callback) { validatePlateNo(rule, value, callback) {
const plateProvince = String(this.vehicleForm.plateProvince || '').trim(); const plateNo = String(value || '')
const plateNoBody = String(this.vehicleForm.plateNoBody || '')
.trim() .trim()
.toUpperCase(); .toUpperCase();
const plateColor = String(this.vehicleForm.plateColor || '').trim(); if (!plateNo) {
if (!plateProvince || !plateNoBody || !plateColor) { callback(new Error('请输入车牌号'));
callback(new Error('请完整填写车牌号'));
return; return;
} }
if (!/^[A-Z][A-Z0-9挂学警港澳]{5,6}$/.test(plateNoBody)) { if (!/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼港澳]{1}[A-Z][A-Z0-9挂学警港澳]{5,6}$/.test(plateNo)) {
callback(new Error('请输入标准车牌号')); callback(new Error('请输入标准车牌号(如:京A12345'));
return; return;
} }
if (this.vehicleForm.plateNo !== plateNo) {
this.vehicleForm.plateNo = plateNo;
}
callback(); callback();
}, },
validateAnnualReviewEndDate(rule, value, callback) { validateAnnualReviewEndDate(rule, value, callback) {
@@ -1043,6 +1001,35 @@ export default {
} }
callback(); 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) { openVehicle(row, readonly = false) {
this.readonly = readonly; this.readonly = readonly;
if (!row?.id) { if (!row?.id) {
@@ -1420,28 +1407,16 @@ export default {
this.syncPlateNo(); this.syncPlateNo();
}, },
syncPlateNo(validate = true) { syncPlateNo(validate = true) {
const plateProvince = String(this.vehicleForm.plateProvince || '').trim(); const plateNo = String(this.vehicleForm.plateNo || '')
const plateNoBody = String(this.vehicleForm.plateNoBody || '') .replace(/\s/g, '')
.trim()
.toUpperCase(); .toUpperCase();
const plateColor = String(this.vehicleForm.plateColor || '').trim(); this.vehicleForm.plateNo = plateNo;
this.vehicleForm.plateNoBody = plateNoBody;
this.vehicleForm.plateNo =
plateProvince && plateNoBody ? `${plateProvince}${plateNoBody}` : '';
this.vehicleForm.plateColor = plateColor;
if (validate) { if (validate) {
this.$refs.vehicleForm?.validateField('plateNo'); this.$refs.vehicleForm?.validateField('plateNo');
} }
}, },
splitPlateNo() { splitPlateNo() {
const plateNo = String(this.vehicleForm.plateNo || '').trim(); // 车牌号已统一为单一 input,无需拆分
if (!plateNo) {
this.vehicleForm.plateProvince = '';
this.vehicleForm.plateNoBody = '';
return;
}
this.vehicleForm.plateProvince = plateNo.slice(0, 1);
this.vehicleForm.plateNoBody = plateNo.slice(1).toUpperCase();
}, },
handleSubmit() { handleSubmit() {
this.syncPlateNo(); this.syncPlateNo();
@@ -1681,10 +1656,60 @@ export default {
} }
.plate-group { .plate-group {
display: grid; display: flex;
grid-template-columns: 112px minmax(0, 1fr) 112px;
gap: 8px;
align-items: center; 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 { .dimension-group {
@@ -1704,7 +1729,6 @@ export default {
.dimension-group__label { .dimension-group__label {
flex-shrink: 0; flex-shrink: 0;
color: #303133; color: #303133;
font-weight: 500;
} }
.date-with-flag { .date-with-flag {