refactor(transportCapacity): 使用 section-card 重构司机管理弹窗布局
- 将司机管理页面新增/编辑弹窗中四个分组改为使用标准 section-card 组件包裹 - 删除手写的扁平样式和红色竖条，统一使用全局 element-ui 样式维护弹窗视觉风格 - 调整司机证件上传区尺寸为 240x151 px，保持身份证比例并左对齐显示 - 优化弹窗中各表单项布局，提高视觉层次与一致性 - 更新 scoped 样式，移除无用的 section-title 样式，保持代码清洁
This commit is contained in:
@@ -1,28 +1,57 @@
|
||||
<template>
|
||||
<el-form-item v-if="mode === 'form'" :label="label" :prop="prop">
|
||||
<el-upload
|
||||
:class="[`${classPrefix}-uploader`, { [`${classPrefix}-uploader--large`]: large }]"
|
||||
action="/api/blade-resource/oss/endpoint/put-file"
|
||||
name="file"
|
||||
:headers="uploadHeaders"
|
||||
:show-file-list="false"
|
||||
:disabled="readonly"
|
||||
:before-upload="beforeUpload"
|
||||
:on-progress="handleProgress"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
>
|
||||
<img v-if="value" :src="value" :class="`${classPrefix}-uploader__image`" />
|
||||
<div v-else :class="`${classPrefix}-uploader__empty`">{{ emptyText }}</div>
|
||||
</el-upload>
|
||||
<div :class="[`${classPrefix}-uploader`, { [`${classPrefix}-uploader--large`]: large }]">
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
class="upload-inner"
|
||||
action="/api/blade-resource/oss/endpoint/put-file"
|
||||
name="file"
|
||||
:headers="uploadHeaders"
|
||||
:show-file-list="false"
|
||||
:disabled="readonly"
|
||||
:before-upload="beforeUpload"
|
||||
:on-progress="handleProgress"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
>
|
||||
<el-image
|
||||
v-if="value"
|
||||
:src="value"
|
||||
:class="`${classPrefix}-uploader__image`"
|
||||
:preview-src-list="[value]"
|
||||
fit="contain"
|
||||
preview-teleported
|
||||
:z-index="3000"
|
||||
@click.stop
|
||||
/>
|
||||
<div v-else :class="`${classPrefix}-uploader__empty`">{{ emptyText }}</div>
|
||||
</el-upload>
|
||||
<el-link
|
||||
v-if="value && !readonly"
|
||||
type="primary"
|
||||
class="upload-replace-link"
|
||||
@click.stop="triggerUpload"
|
||||
>
|
||||
更换
|
||||
</el-link>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item v-else :prop="prop" :class="`${classPrefix}-upload-item`">
|
||||
<div :class="[`${classPrefix}-upload-card`, { [`${classPrefix}-upload-card--large`]: large }]">
|
||||
<div v-if="label" :class="`${classPrefix}-upload-card__head`">
|
||||
<span :class="`${classPrefix}-upload-card__label`">{{ label }}</span>
|
||||
<span :class="`${classPrefix}-upload-card__action`">{{ actionText }}</span>
|
||||
<el-link
|
||||
v-if="!readonly"
|
||||
type="primary"
|
||||
:class="`${classPrefix}-upload-card__action`"
|
||||
@click.stop="triggerUpload"
|
||||
>
|
||||
{{ actionText }}
|
||||
</el-link>
|
||||
<span v-else :class="`${classPrefix}-upload-card__action`">{{ actionText }}</span>
|
||||
</div>
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
:class="`${classPrefix}-upload-card__uploader`"
|
||||
action="/api/blade-resource/oss/endpoint/put-file"
|
||||
name="file"
|
||||
@@ -34,7 +63,16 @@
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
>
|
||||
<img v-if="value" :src="value" :class="`${classPrefix}-upload-card__image`" />
|
||||
<el-image
|
||||
v-if="value"
|
||||
:src="value"
|
||||
:class="`${classPrefix}-upload-card__image`"
|
||||
:preview-src-list="[value]"
|
||||
fit="contain"
|
||||
preview-teleported
|
||||
:z-index="3000"
|
||||
@click.stop
|
||||
/>
|
||||
<div v-else :class="`${classPrefix}-upload-card__empty`">{{ emptyText }}</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
@@ -86,6 +124,11 @@ export default {
|
||||
this.closeUploadLoading();
|
||||
},
|
||||
methods: {
|
||||
triggerUpload() {
|
||||
const uploadEl = this.$refs.uploadRef && this.$refs.uploadRef.$el;
|
||||
const input = uploadEl && uploadEl.querySelector('.el-upload__input');
|
||||
if (input) input.click();
|
||||
},
|
||||
showUploadLoading() {
|
||||
if (this.uploadLoading) {
|
||||
return;
|
||||
|
||||
@@ -77,7 +77,8 @@ export const option = applyTableMenuWidth({
|
||||
rules: textRule('项目', 1000, true),
|
||||
},
|
||||
{
|
||||
label: '包含过程节点',
|
||||
label: '',
|
||||
searchLabel: '包含过程节点',
|
||||
prop: 'includedNodes',
|
||||
search: true,
|
||||
searchOrder: 3,
|
||||
@@ -85,6 +86,10 @@ export const option = applyTableMenuWidth({
|
||||
multiple: true,
|
||||
dicData: nodeOptions,
|
||||
minWidth: 180,
|
||||
formslot: true,
|
||||
span: 24,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
rules: selectRule('包含过程节点'),
|
||||
},
|
||||
{
|
||||
@@ -144,5 +149,6 @@ export const option = applyTableMenuWidth({
|
||||
]),
|
||||
dialogTop: '10px',
|
||||
dialogWidth: '96%',
|
||||
dialogCustomClass: 'process-config-dialog',
|
||||
searchSpan: 8,
|
||||
}, 5);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -92,21 +92,13 @@
|
||||
</span>
|
||||
</template>
|
||||
<template #menu="{ row }">
|
||||
<el-link
|
||||
type="primary"
|
||||
v-if="hasPermission('driver_view')"
|
||||
@click="openDriver(row, true)"
|
||||
>
|
||||
<el-link type="primary" v-if="hasPermission('driver_view')" @click="openDriver(row, true)">
|
||||
查看
|
||||
</el-link>
|
||||
<el-link type="primary" v-if="hasPermission('driver_edit')" @click="openDriver(row)">
|
||||
修改
|
||||
</el-link>
|
||||
<el-link
|
||||
type="primary"
|
||||
v-if="hasPermission('driver_status')"
|
||||
@click="handleStatus(row)"
|
||||
>
|
||||
<el-link type="primary" v-if="hasPermission('driver_status')" @click="handleStatus(row)">
|
||||
{{ row.status === 1 ? '停用' : '启用' }}
|
||||
</el-link>
|
||||
</template>
|
||||
@@ -129,349 +121,361 @@
|
||||
:disabled="readonly"
|
||||
class="driver-form"
|
||||
>
|
||||
<div class="section-title">基础身份信息</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="司机姓名" prop="driverName">
|
||||
<el-input v-model="driverForm.driverName" maxlength="20" show-word-limit />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="身份证号" prop="idCardNo">
|
||||
<el-input
|
||||
v-model="driverForm.idCardNo"
|
||||
maxlength="18"
|
||||
show-word-limit
|
||||
@input="driverForm.idCardNo = String(driverForm.idCardNo || '').toUpperCase()"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="出生年月" prop="birthday">
|
||||
<el-date-picker v-model="driverForm.birthday" type="date" value-format="YYYY-MM-DD" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="性别" prop="gender">
|
||||
<el-select v-model="driverForm.gender" clearable>
|
||||
<el-option label="男" value="男" />
|
||||
<el-option label="女" value="女" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="民族" prop="nation">
|
||||
<el-select v-model="driverForm.nation" clearable filterable>
|
||||
<el-option v-for="item in nationOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="学历" prop="education">
|
||||
<el-select v-model="driverForm.education" clearable filterable>
|
||||
<el-option
|
||||
v-for="item in educationOptions"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
<section-card title="基础身份信息">
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="司机姓名" prop="driverName">
|
||||
<el-input v-model="driverForm.driverName" maxlength="20" show-word-limit />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="身份证号" prop="idCardNo">
|
||||
<el-input
|
||||
v-model="driverForm.idCardNo"
|
||||
maxlength="18"
|
||||
show-word-limit
|
||||
@input="driverForm.idCardNo = String(driverForm.idCardNo || '').toUpperCase()"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="住址" prop="addressRegion">
|
||||
<el-cascader
|
||||
ref="addressRegionCascader"
|
||||
v-model="driverForm.addressRegionPath"
|
||||
:options="regionOptions"
|
||||
:props="regionCascaderProps"
|
||||
:placeholder="driverForm.addressRegion || '请选择省市区'"
|
||||
clearable
|
||||
filterable
|
||||
@change="handleAddressRegionChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="详细地址" prop="address">
|
||||
<el-input v-model="driverForm.address" maxlength="200" show-word-limit />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="岗位" prop="postList">
|
||||
<el-checkbox-group v-model="driverForm.postList">
|
||||
<el-checkbox label="司机" />
|
||||
<el-checkbox label="押运员" />
|
||||
<el-checkbox label="装卸管理员" />
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<image-upload-field
|
||||
label="身份证正面照"
|
||||
prop="idCardFront"
|
||||
:value="driverForm.idCardFront"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
@success="url => handleIdCardUploadSuccess('idCardFront', url)"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<image-upload-field
|
||||
label="身份证反面照"
|
||||
prop="idCardBack"
|
||||
:value="driverForm.idCardBack"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
@success="url => handleIdCardUploadSuccess('idCardBack', url)"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<image-upload-field
|
||||
label="大头照"
|
||||
prop="headPhoto"
|
||||
:value="driverForm.headPhoto"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
@success="url => setImage('headPhoto', url)"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="section-title">驾驶证信息</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="准驾车型" prop="drivingType">
|
||||
<el-select
|
||||
v-model="driverForm.drivingType"
|
||||
clearable
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
>
|
||||
<el-option
|
||||
v-for="item in drivingTypeOptions"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="档案编号" prop="drivingLicenseNo">
|
||||
<el-input v-model="driverForm.drivingLicenseNo" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="有效期" prop="drivingLicenseEndDate">
|
||||
<div class="date-range">
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="出生年月" prop="birthday">
|
||||
<el-date-picker
|
||||
v-model="driverForm.drivingLicenseStartDate"
|
||||
v-model="driverForm.birthday"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="起"
|
||||
@change="validateFormField('drivingLicenseEndDate')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="性别" prop="gender">
|
||||
<el-select v-model="driverForm.gender" clearable>
|
||||
<el-option label="男" value="男" />
|
||||
<el-option label="女" value="女" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="民族" prop="nation">
|
||||
<el-select v-model="driverForm.nation" clearable filterable>
|
||||
<el-option
|
||||
v-for="item in nationOptions"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="学历" prop="education">
|
||||
<el-select v-model="driverForm.education" clearable filterable>
|
||||
<el-option
|
||||
v-for="item in educationOptions"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="住址" prop="addressRegion">
|
||||
<el-cascader
|
||||
ref="addressRegionCascader"
|
||||
v-model="driverForm.addressRegionPath"
|
||||
:options="regionOptions"
|
||||
:props="regionCascaderProps"
|
||||
:placeholder="driverForm.addressRegion || '请选择省市区'"
|
||||
clearable
|
||||
filterable
|
||||
@change="handleAddressRegionChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="详细地址" prop="address">
|
||||
<el-input v-model="driverForm.address" maxlength="200" show-word-limit />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="岗位" prop="postList">
|
||||
<el-checkbox-group v-model="driverForm.postList">
|
||||
<el-checkbox label="司机" />
|
||||
<el-checkbox label="押运员" />
|
||||
<el-checkbox label="装卸管理员" />
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<image-upload-field
|
||||
label="身份证正面照"
|
||||
prop="idCardFront"
|
||||
:value="driverForm.idCardFront"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
@success="url => handleIdCardUploadSuccess('idCardFront', url)"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<image-upload-field
|
||||
label="身份证反面照"
|
||||
prop="idCardBack"
|
||||
:value="driverForm.idCardBack"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
@success="url => handleIdCardUploadSuccess('idCardBack', url)"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<image-upload-field
|
||||
label="大头照"
|
||||
prop="headPhoto"
|
||||
:value="driverForm.headPhoto"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
@success="url => setImage('headPhoto', url)"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</section-card>
|
||||
|
||||
<section-card title="驾驶证信息">
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="准驾车型" prop="drivingType">
|
||||
<el-select
|
||||
v-model="driverForm.drivingType"
|
||||
clearable
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
>
|
||||
<el-option
|
||||
v-for="item in drivingTypeOptions"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="档案编号" prop="drivingLicenseNo">
|
||||
<el-input v-model="driverForm.drivingLicenseNo" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="有效期" prop="drivingLicenseEndDate">
|
||||
<div class="date-range">
|
||||
<el-date-picker
|
||||
v-model="driverForm.drivingLicenseStartDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="起"
|
||||
@change="validateFormField('drivingLicenseEndDate')"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-model="driverForm.drivingLicenseEndDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="止"
|
||||
:disabled="driverForm.drivingLicenseLongTerm === 1"
|
||||
@change="validateFormField('drivingLicenseEndDate')"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="长期有效" prop="drivingLicenseLongTerm">
|
||||
<el-checkbox
|
||||
v-model="driverForm.drivingLicenseLongTerm"
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
@change="validateFormField('drivingLicenseEndDate')"
|
||||
>
|
||||
是
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="12">
|
||||
<image-upload-field
|
||||
label="驾驶证主页"
|
||||
prop="drivingLicenseFront"
|
||||
:value="driverForm.drivingLicenseFront"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
@success="
|
||||
(url, file) => handleDrivingLicenseUploadSuccess('drivingLicenseFront', url, file)
|
||||
"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<image-upload-field
|
||||
label="驾驶证副页"
|
||||
prop="drivingLicenseBack"
|
||||
:value="driverForm.drivingLicenseBack"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
@success="
|
||||
(url, file) => handleDrivingLicenseUploadSuccess('drivingLicenseBack', url, file)
|
||||
"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</section-card>
|
||||
|
||||
<section-card title="从业资格证信息">
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="从业资格认证类型" prop="qualificationType">
|
||||
<el-select
|
||||
v-model="driverForm.qualificationType"
|
||||
clearable
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
>
|
||||
<el-option
|
||||
v-for="item in qualificationTypeOptions"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="资格证号" prop="qualificationNo">
|
||||
<el-input
|
||||
v-model="driverForm.qualificationNo"
|
||||
maxlength="50"
|
||||
placeholder="默认身份证号"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="有效期" prop="qualificationEndDate">
|
||||
<el-date-picker
|
||||
v-model="driverForm.drivingLicenseEndDate"
|
||||
v-model="driverForm.qualificationEndDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="止"
|
||||
:disabled="driverForm.drivingLicenseLongTerm === 1"
|
||||
@change="validateFormField('drivingLicenseEndDate')"
|
||||
:disabled="driverForm.qualificationLongTerm === 1"
|
||||
@change="validateFormField('qualificationEndDate')"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="长期有效" prop="drivingLicenseLongTerm">
|
||||
<el-checkbox
|
||||
v-model="driverForm.drivingLicenseLongTerm"
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
@change="validateFormField('drivingLicenseEndDate')"
|
||||
>
|
||||
是
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="12">
|
||||
<image-upload-field
|
||||
label="驾驶证主页"
|
||||
prop="drivingLicenseFront"
|
||||
:value="driverForm.drivingLicenseFront"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
@success="
|
||||
(url, file) =>
|
||||
handleDrivingLicenseUploadSuccess('drivingLicenseFront', url, file)
|
||||
"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<image-upload-field
|
||||
label="驾驶证副页"
|
||||
prop="drivingLicenseBack"
|
||||
:value="driverForm.drivingLicenseBack"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
@success="
|
||||
(url, file) => handleDrivingLicenseUploadSuccess('drivingLicenseBack', url, file)
|
||||
"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="section-title">从业资格证信息</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="从业资格认证类型" prop="qualificationType">
|
||||
<el-select
|
||||
v-model="driverForm.qualificationType"
|
||||
clearable
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
>
|
||||
<el-option
|
||||
v-for="item in qualificationTypeOptions"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="资格证号" prop="qualificationNo">
|
||||
<el-input
|
||||
v-model="driverForm.qualificationNo"
|
||||
maxlength="50"
|
||||
placeholder="默认身份证号"
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="长期有效" prop="qualificationLongTerm">
|
||||
<el-checkbox
|
||||
v-model="driverForm.qualificationLongTerm"
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
@change="validateFormField('qualificationEndDate')"
|
||||
>
|
||||
是
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="12">
|
||||
<image-upload-field
|
||||
label="封面页"
|
||||
prop="qualificationFront"
|
||||
:value="driverForm.qualificationFront"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
@success="url => setImage('qualificationFront', url)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="有效期" prop="qualificationEndDate">
|
||||
<el-date-picker
|
||||
v-model="driverForm.qualificationEndDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
:disabled="driverForm.qualificationLongTerm === 1"
|
||||
@change="validateFormField('qualificationEndDate')"
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<image-upload-field
|
||||
label="内容页"
|
||||
prop="qualificationBack"
|
||||
:value="driverForm.qualificationBack"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
@success="url => setImage('qualificationBack', url)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="长期有效" prop="qualificationLongTerm">
|
||||
<el-checkbox
|
||||
v-model="driverForm.qualificationLongTerm"
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
@change="validateFormField('qualificationEndDate')"
|
||||
>
|
||||
是
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="12">
|
||||
<image-upload-field
|
||||
label="封面页"
|
||||
prop="qualificationFront"
|
||||
:value="driverForm.qualificationFront"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
@success="url => setImage('qualificationFront', url)"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<image-upload-field
|
||||
label="内容页"
|
||||
prop="qualificationBack"
|
||||
:value="driverForm.qualificationBack"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
@success="url => setImage('qualificationBack', url)"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</section-card>
|
||||
|
||||
<div class="section-title">司机联系信息</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="司机类型" prop="driverType">
|
||||
<el-select v-model="driverForm.driverType" filterable>
|
||||
<el-option label="自有" value="自有" />
|
||||
<el-option label="外协" value="外协" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="手机号" prop="mobile">
|
||||
<el-input v-model="driverForm.mobile" maxlength="20" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="紧急联系人姓名" prop="emergencyContactName">
|
||||
<el-input v-model="driverForm.emergencyContactName" maxlength="20" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="紧急联系人手机号" prop="emergencyContactMobile">
|
||||
<el-input v-model="driverForm.emergencyContactMobile" maxlength="20" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="与联系人关系" prop="contactRelation">
|
||||
<el-select
|
||||
v-model="driverForm.contactRelation"
|
||||
clearable
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
>
|
||||
<el-option
|
||||
v-for="item in relationOptions"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="所属组织" prop="organizationName">
|
||||
<el-select v-model="driverForm.organizationName" clearable filterable>
|
||||
<el-option
|
||||
v-for="item in organizationOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<section-card title="司机联系信息">
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="司机类型" prop="driverType">
|
||||
<el-select v-model="driverForm.driverType" filterable>
|
||||
<el-option label="自有" value="自有" />
|
||||
<el-option label="外协" value="外协" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="手机号" prop="mobile">
|
||||
<el-input v-model="driverForm.mobile" maxlength="20" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="紧急联系人姓名" prop="emergencyContactName">
|
||||
<el-input v-model="driverForm.emergencyContactName" maxlength="20" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="紧急联系人手机号" prop="emergencyContactMobile">
|
||||
<el-input v-model="driverForm.emergencyContactMobile" maxlength="20" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="与联系人关系" prop="contactRelation">
|
||||
<el-select
|
||||
v-model="driverForm.contactRelation"
|
||||
clearable
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
>
|
||||
<el-option
|
||||
v-for="item in relationOptions"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="所属组织" prop="organizationName">
|
||||
<el-select v-model="driverForm.organizationName" clearable filterable>
|
||||
<el-option
|
||||
v-for="item in organizationOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</section-card>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="driverBox = false">取消</el-button>
|
||||
@@ -1330,19 +1334,6 @@ export default {
|
||||
}
|
||||
|
||||
.driver-form {
|
||||
.section-title {
|
||||
margin: 18px 0 14px;
|
||||
padding-left: 10px;
|
||||
border-left: 3px solid #e74b5f;
|
||||
color: #303133;
|
||||
font-weight: 600;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.section-title:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
:deep(.el-date-editor.el-input),
|
||||
:deep(.el-date-editor.el-input__wrapper),
|
||||
:deep(.el-cascader),
|
||||
@@ -1358,9 +1349,9 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
// 大尺寸证件照：按身份证 1.586:1 比例缩放（约真实尺寸 75%，240×151），左对齐显示
|
||||
:deep(.driver-uploader) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.driver-uploader .el-upload),
|
||||
@@ -1375,9 +1366,17 @@ export default {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 大尺寸模式：缩成 1.586:1 比例，左对齐（不再 100% 占栏）
|
||||
:deep(.driver-uploader--large) {
|
||||
display: block;
|
||||
width: 240px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.driver-uploader--large .el-upload),
|
||||
:deep(.driver-uploader--large.el-upload) {
|
||||
height: 260px;
|
||||
width: 100%;
|
||||
height: 151px;
|
||||
}
|
||||
|
||||
:deep(.driver-uploader__image) {
|
||||
@@ -1396,6 +1395,7 @@ export default {
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
// 弹窗内可滚动（弹窗 body 灰底已由全局 .el-dialog__body 规则生效）
|
||||
.driver-dialog {
|
||||
:deep(.el-dialog__body) {
|
||||
max-height: 72vh;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -49,7 +49,9 @@
|
||||
@change="handleExpireChange"
|
||||
>
|
||||
<el-radio-button label="">全部（{{ expiryStat.total }}）</el-radio-button>
|
||||
<el-radio-button label="within30">30天内到期（{{ expiryStat.within30 }}）</el-radio-button>
|
||||
<el-radio-button label="within30"
|
||||
>30天内到期（{{ expiryStat.within30 }}）</el-radio-button
|
||||
>
|
||||
<el-radio-button label="expired">已到期（{{ expiryStat.expired }}）</el-radio-button>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
@@ -120,370 +122,372 @@
|
||||
:disabled="readonly"
|
||||
class="vehicle-form"
|
||||
>
|
||||
<div class="section-title">基础车辆信息</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="所有组织" prop="organizationName">
|
||||
<el-select
|
||||
v-model="vehicleForm.organizationName"
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in organizationOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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">
|
||||
<section-card title="基础车辆信息">
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="所有组织" prop="organizationName">
|
||||
<el-select
|
||||
v-model="vehicleForm.plateProvince"
|
||||
placeholder="请选择"
|
||||
v-model="vehicleForm.organizationName"
|
||||
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"
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
@change="syncPlateNo(false)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in plateColorOptions"
|
||||
v-for="item in organizationOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="车辆类型" prop="vehicleType">
|
||||
<el-select
|
||||
v-model="vehicleForm.vehicleType"
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
>
|
||||
<el-option
|
||||
v-for="item in vehicleTypeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="外廓尺寸(毫米)">
|
||||
<div class="dimension-group">
|
||||
<div class="dimension-group__item">
|
||||
<span class="dimension-group__label">长</span>
|
||||
<el-input-number
|
||||
v-model="vehicleForm.outerLength"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
</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>
|
||||
<div class="dimension-group__item">
|
||||
<span class="dimension-group__label">宽</span>
|
||||
<el-input-number
|
||||
v-model="vehicleForm.outerWidth"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
</div>
|
||||
<div class="dimension-group__item">
|
||||
<span class="dimension-group__label">高</span>
|
||||
<el-input-number
|
||||
v-model="vehicleForm.outerHeight"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="核定载质量(KG)" prop="approvedLoadKg">
|
||||
<el-input-number
|
||||
v-model="vehicleForm.approvedLoadKg"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="准牵引总质量(KG)" prop="tractionMassKg">
|
||||
<el-input-number
|
||||
v-model="vehicleForm.tractionMassKg"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="业务关系" prop="businessRelation">
|
||||
<el-select v-model="vehicleForm.businessRelation">
|
||||
<el-option
|
||||
v-for="item in businessRelationOptions"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="能源类型" prop="energyType">
|
||||
<el-select
|
||||
v-model="vehicleForm.energyType"
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
>
|
||||
<el-option
|
||||
v-for="item in energyTypeOptions"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="强制报废日期" prop="compulsoryScrapDate">
|
||||
<div class="date-with-flag">
|
||||
<el-date-picker
|
||||
v-model="vehicleForm.compulsoryScrapDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
:disabled="vehicleForm.compulsoryScrapLongTerm === 1"
|
||||
/>
|
||||
<el-checkbox
|
||||
v-model="vehicleForm.compulsoryScrapLongTerm"
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="车辆类型" prop="vehicleType">
|
||||
<el-select
|
||||
v-model="vehicleForm.vehicleType"
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
>
|
||||
长期有效
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="海关备案号" prop="customsRecordNo">
|
||||
<el-input v-model="vehicleForm.customsRecordNo" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-option
|
||||
v-for="item in vehicleTypeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="外廓尺寸(毫米)">
|
||||
<div class="dimension-group">
|
||||
<div class="dimension-group__item">
|
||||
<span class="dimension-group__label">长</span>
|
||||
<el-input-number
|
||||
v-model="vehicleForm.outerLength"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
</div>
|
||||
<div class="dimension-group__item">
|
||||
<span class="dimension-group__label">宽</span>
|
||||
<el-input-number
|
||||
v-model="vehicleForm.outerWidth"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
</div>
|
||||
<div class="dimension-group__item">
|
||||
<span class="dimension-group__label">高</span>
|
||||
<el-input-number
|
||||
v-model="vehicleForm.outerHeight"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="核定载质量(KG)" prop="approvedLoadKg">
|
||||
<el-input-number
|
||||
v-model="vehicleForm.approvedLoadKg"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="准牵引总质量(KG)" prop="tractionMassKg">
|
||||
<el-input-number
|
||||
v-model="vehicleForm.tractionMassKg"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="业务关系" prop="businessRelation">
|
||||
<el-select v-model="vehicleForm.businessRelation">
|
||||
<el-option
|
||||
v-for="item in businessRelationOptions"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="能源类型" prop="energyType">
|
||||
<el-select
|
||||
v-model="vehicleForm.energyType"
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
>
|
||||
<el-option
|
||||
v-for="item in energyTypeOptions"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="强制报废日期" prop="compulsoryScrapDate">
|
||||
<div class="date-with-flag">
|
||||
<el-date-picker
|
||||
v-model="vehicleForm.compulsoryScrapDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
:disabled="vehicleForm.compulsoryScrapLongTerm === 1"
|
||||
/>
|
||||
<el-checkbox
|
||||
v-model="vehicleForm.compulsoryScrapLongTerm"
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
>
|
||||
长期有效
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="海关备案号" prop="customsRecordNo">
|
||||
<el-input v-model="vehicleForm.customsRecordNo" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</section-card>
|
||||
|
||||
<div class="section-title">车辆资质图片</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="行驶证档案编号" prop="drivingLicenseNo">
|
||||
<el-input v-model="vehicleForm.drivingLicenseNo" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="行驶证有效期" prop="drivingLicenseEndDate">
|
||||
<div class="date-with-flag">
|
||||
<section-card title="车辆资质图片">
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="行驶证档案编号" prop="drivingLicenseNo">
|
||||
<el-input v-model="vehicleForm.drivingLicenseNo" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<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"
|
||||
/>
|
||||
<el-checkbox
|
||||
v-model="vehicleForm.drivingLicenseLongTerm"
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
>
|
||||
长期有效
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<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-form-item label="道路运输证有效期" prop="roadTransportCertEndDate">
|
||||
<div class="date-with-flag">
|
||||
<el-date-picker
|
||||
v-model="vehicleForm.roadTransportCertEndDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
<el-checkbox
|
||||
v-model="vehicleForm.roadTransportCertLongTerm"
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
>
|
||||
长期有效
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="道路运输年审有效期" prop="annualReviewEndDate">
|
||||
<div class="date-with-flag">
|
||||
<el-date-picker
|
||||
v-model="vehicleForm.annualReviewEndDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
:disabled="vehicleForm.annualReviewLongTerm === 1"
|
||||
/>
|
||||
<el-checkbox
|
||||
v-model="vehicleForm.annualReviewLongTerm"
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
>
|
||||
长期有效
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="机动车登记编号" prop="registrationNo">
|
||||
<el-input v-model="vehicleForm.registrationNo" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="机动车登记日期" prop="registrationDate">
|
||||
<el-date-picker
|
||||
v-model="vehicleForm.drivingLicenseEndDate"
|
||||
v-model="vehicleForm.registrationDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
<el-checkbox
|
||||
v-model="vehicleForm.drivingLicenseLongTerm"
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
>
|
||||
长期有效
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<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-form-item label="道路运输证有效期" prop="roadTransportCertEndDate">
|
||||
<div class="date-with-flag">
|
||||
<el-date-picker
|
||||
v-model="vehicleForm.roadTransportCertEndDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
<el-checkbox
|
||||
v-model="vehicleForm.roadTransportCertLongTerm"
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
>
|
||||
长期有效
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="道路运输年审有效期" prop="annualReviewEndDate">
|
||||
<div class="date-with-flag">
|
||||
<el-date-picker
|
||||
v-model="vehicleForm.annualReviewEndDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
:disabled="vehicleForm.annualReviewLongTerm === 1"
|
||||
/>
|
||||
<el-checkbox
|
||||
v-model="vehicleForm.annualReviewLongTerm"
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
>
|
||||
长期有效
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="机动车登记编号" prop="registrationNo">
|
||||
<el-input v-model="vehicleForm.registrationNo" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="机动车登记日期" prop="registrationDate">
|
||||
<el-date-picker
|
||||
v-model="vehicleForm.registrationDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<image-upload-field
|
||||
label="行驶证主页正面"
|
||||
prop="drivingLicenseImage"
|
||||
:value="vehicleForm.drivingLicenseImage"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
class-prefix="vehicle"
|
||||
@success="
|
||||
(url, file) =>
|
||||
handleVehicleCertificateUploadSuccess('drivingLicenseImage', url, file)
|
||||
"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<image-upload-field
|
||||
label="行驶证主页正面"
|
||||
prop="drivingLicenseImage"
|
||||
:value="vehicleForm.drivingLicenseImage"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
class-prefix="vehicle"
|
||||
@success="
|
||||
(url, file) =>
|
||||
handleVehicleCertificateUploadSuccess('drivingLicenseImage', url, file)
|
||||
"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<image-upload-field
|
||||
label="行驶证主页反面"
|
||||
prop="drivingLicenseMainBack"
|
||||
:value="vehicleForm.drivingLicenseMainBack"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
class-prefix="vehicle"
|
||||
@success="
|
||||
(url, file) =>
|
||||
handleVehicleCertificateUploadSuccess('drivingLicenseMainBack', url, file)
|
||||
"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<image-upload-field
|
||||
label="行驶证副页正面"
|
||||
prop="drivingLicenseViceFront"
|
||||
:value="vehicleForm.drivingLicenseViceFront"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
class-prefix="vehicle"
|
||||
@success="
|
||||
(url, file) =>
|
||||
handleVehicleCertificateUploadSuccess('drivingLicenseViceFront', url, file)
|
||||
"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<image-upload-field
|
||||
label="行驶证副页反面"
|
||||
prop="drivingLicenseViceBack"
|
||||
:value="vehicleForm.drivingLicenseViceBack"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
class-prefix="vehicle"
|
||||
@success="
|
||||
(url, file) =>
|
||||
handleVehicleCertificateUploadSuccess('drivingLicenseViceBack', url, file)
|
||||
"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<image-upload-field
|
||||
label="道路运输证图片"
|
||||
prop="roadTransportCertImage"
|
||||
:value="vehicleForm.roadTransportCertImage"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
class-prefix="vehicle"
|
||||
@success="url => setImage('roadTransportCertImage', url)"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<image-upload-field
|
||||
label="机动车登记本"
|
||||
prop="registrationImage"
|
||||
:value="vehicleForm.registrationImage"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
class-prefix="vehicle"
|
||||
@success="
|
||||
(url, file) =>
|
||||
handleVehicleCertificateUploadSuccess('registrationImage', url, file)
|
||||
"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<image-upload-field
|
||||
label="行驶证主页反面"
|
||||
prop="drivingLicenseMainBack"
|
||||
:value="vehicleForm.drivingLicenseMainBack"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
class-prefix="vehicle"
|
||||
@success="
|
||||
(url, file) =>
|
||||
handleVehicleCertificateUploadSuccess('drivingLicenseMainBack', url, file)
|
||||
"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<image-upload-field
|
||||
label="行驶证副页正面"
|
||||
prop="drivingLicenseViceFront"
|
||||
:value="vehicleForm.drivingLicenseViceFront"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
class-prefix="vehicle"
|
||||
@success="
|
||||
(url, file) =>
|
||||
handleVehicleCertificateUploadSuccess('drivingLicenseViceFront', url, file)
|
||||
"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<image-upload-field
|
||||
label="行驶证副页反面"
|
||||
prop="drivingLicenseViceBack"
|
||||
:value="vehicleForm.drivingLicenseViceBack"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
class-prefix="vehicle"
|
||||
@success="
|
||||
(url, file) =>
|
||||
handleVehicleCertificateUploadSuccess('drivingLicenseViceBack', url, file)
|
||||
"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<image-upload-field
|
||||
label="道路运输证图片"
|
||||
prop="roadTransportCertImage"
|
||||
:value="vehicleForm.roadTransportCertImage"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
class-prefix="vehicle"
|
||||
@success="url => setImage('roadTransportCertImage', url)"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<image-upload-field
|
||||
label="机动车登记本"
|
||||
prop="registrationImage"
|
||||
:value="vehicleForm.registrationImage"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
class-prefix="vehicle"
|
||||
@success="
|
||||
(url, file) =>
|
||||
handleVehicleCertificateUploadSuccess('registrationImage', url, file)
|
||||
"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</section-card>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="vehicleBox = false">取消</el-button>
|
||||
@@ -646,7 +650,9 @@ export default {
|
||||
businessRelation: [{ required: true, message: '请选择业务关系', trigger: 'change' }],
|
||||
energyType: [{ required: true, message: '请选择能源类型', trigger: 'change' }],
|
||||
drivingLicenseNo: [{ required: true, message: '请输入行驶证档案编号', trigger: 'blur' }],
|
||||
drivingLicenseEndDate: [{ required: true, message: '请选择行驶证有效期', trigger: 'change' }],
|
||||
drivingLicenseEndDate: [
|
||||
{ required: true, message: '请选择行驶证有效期', trigger: 'change' },
|
||||
],
|
||||
roadTransportCertNo: [{ required: true, message: '请输入道路运输证号', trigger: 'blur' }],
|
||||
roadTransportCertEndDate: [
|
||||
{ required: true, message: '请选择道路运输证有效期', trigger: 'change' },
|
||||
@@ -707,7 +713,9 @@ export default {
|
||||
},
|
||||
validatePlateNo(rule, value, callback) {
|
||||
const plateProvince = String(this.vehicleForm.plateProvince || '').trim();
|
||||
const plateNoBody = String(this.vehicleForm.plateNoBody || '').trim().toUpperCase();
|
||||
const plateNoBody = String(this.vehicleForm.plateNoBody || '')
|
||||
.trim()
|
||||
.toUpperCase();
|
||||
const plateColor = String(this.vehicleForm.plateColor || '').trim();
|
||||
if (!plateProvince || !plateNoBody || !plateColor) {
|
||||
callback(new Error('请完整填写车牌号'));
|
||||
@@ -871,10 +879,13 @@ export default {
|
||||
},
|
||||
syncPlateNo(validate = true) {
|
||||
const plateProvince = String(this.vehicleForm.plateProvince || '').trim();
|
||||
const plateNoBody = String(this.vehicleForm.plateNoBody || '').trim().toUpperCase();
|
||||
const plateNoBody = String(this.vehicleForm.plateNoBody || '')
|
||||
.trim()
|
||||
.toUpperCase();
|
||||
const plateColor = String(this.vehicleForm.plateColor || '').trim();
|
||||
this.vehicleForm.plateNoBody = plateNoBody;
|
||||
this.vehicleForm.plateNo = plateProvince && plateNoBody ? `${plateProvince}${plateNoBody}` : '';
|
||||
this.vehicleForm.plateNo =
|
||||
plateProvince && plateNoBody ? `${plateProvince}${plateNoBody}` : '';
|
||||
this.vehicleForm.plateColor = plateColor;
|
||||
if (validate) {
|
||||
this.$refs.vehicleForm?.validateField('plateNo');
|
||||
@@ -1070,19 +1081,6 @@ export default {
|
||||
}
|
||||
|
||||
.vehicle-form {
|
||||
.section-title {
|
||||
margin: 18px 0 14px;
|
||||
padding-left: 10px;
|
||||
border-left: 3px solid #e74b5f;
|
||||
color: #303133;
|
||||
font-weight: 600;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.section-title:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
:deep(.el-date-editor.el-input),
|
||||
:deep(.el-date-editor.el-input__wrapper),
|
||||
:deep(.el-select),
|
||||
@@ -1149,9 +1147,9 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
// 大尺寸证件照：按身份证 1.586:1 比例缩放（约真实尺寸 75%，240×151），左对齐显示
|
||||
:deep(.vehicle-uploader) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.vehicle-uploader .el-upload),
|
||||
@@ -1166,9 +1164,17 @@ export default {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 大尺寸模式：缩成 1.586:1 比例，左对齐（不再 100% 占栏）
|
||||
:deep(.vehicle-uploader--large) {
|
||||
display: block;
|
||||
width: 240px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.vehicle-uploader--large .el-upload),
|
||||
:deep(.vehicle-uploader--large.el-upload) {
|
||||
height: 260px;
|
||||
width: 100%;
|
||||
height: 151px;
|
||||
}
|
||||
|
||||
:deep(.vehicle-uploader__image) {
|
||||
|
||||
@@ -503,7 +503,7 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 88px;
|
||||
//min-height: 88px;
|
||||
padding: 16px 28px 16px 22px;
|
||||
border: 1px dashed #8b8b8b;
|
||||
border-radius: 8px;
|
||||
@@ -600,7 +600,6 @@ export default {
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
color: #303133;
|
||||
font-size: 16px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
@@ -622,14 +621,6 @@ export default {
|
||||
display: block;
|
||||
}
|
||||
|
||||
:global(.insurance-record-page__upload-button) {
|
||||
min-width: 112px;
|
||||
height: 40px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
:global(.insurance-record-page__upload) {
|
||||
align-items: stretch;
|
||||
|
||||
Reference in New Issue
Block a user