1、大量页面调整
2、完善运力模块 3、完善规范、需求卡
This commit is contained in:
@@ -1,7 +1,22 @@
|
||||
<template>
|
||||
<basic-container class="driver-page">
|
||||
<div class="driver-toolbar">
|
||||
<div class="driver-toolbar__actions">
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
:permission="permissionList"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@@ -26,30 +41,20 @@
|
||||
@click="handleDelete"
|
||||
>批量删除
|
||||
</el-button>
|
||||
</div>
|
||||
<el-radio-group v-model="query.expireStatus" class="driver-stat" @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="expired">已到期（{{ expiryStat.expired }}）</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
:permission="permissionList"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
</template>
|
||||
<template #menu-right>
|
||||
<el-radio-group
|
||||
v-model="query.expireStatus"
|
||||
class="driver-stat"
|
||||
@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="expired">已到期（{{ expiryStat.expired }}）</el-radio-button>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
<template #driverName="{ row }">
|
||||
<el-button type="primary" link @click="openDriver(row, true)">
|
||||
{{ row.driverName }}
|
||||
@@ -61,12 +66,28 @@
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #drivingLicenseEndDate="{ row }">
|
||||
<span :class="getDateClass(row, 'drivingLicenseEndDate', 'drivingLicenseLongTerm')">
|
||||
<span
|
||||
:class="{
|
||||
'driver-page__date-expiring': isDateExpiring(
|
||||
row,
|
||||
'drivingLicenseEndDate',
|
||||
'drivingLicenseLongTerm'
|
||||
),
|
||||
}"
|
||||
>
|
||||
{{ formatEndDate(row.drivingLicenseEndDate, row.drivingLicenseLongTerm) }}
|
||||
</span>
|
||||
</template>
|
||||
<template #qualificationEndDate="{ row }">
|
||||
<span :class="getDateClass(row, 'qualificationEndDate', 'qualificationLongTerm')">
|
||||
<span
|
||||
:class="{
|
||||
'driver-page__date-expiring': isDateExpiring(
|
||||
row,
|
||||
'qualificationEndDate',
|
||||
'qualificationLongTerm'
|
||||
),
|
||||
}"
|
||||
>
|
||||
{{ formatEndDate(row.qualificationEndDate, row.qualificationLongTerm) }}
|
||||
</span>
|
||||
</template>
|
||||
@@ -120,12 +141,12 @@
|
||||
>
|
||||
<div class="section-title">基础身份信息</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="6">
|
||||
<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="6">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="身份证号" prop="idCardNo">
|
||||
<el-input
|
||||
v-model="driverForm.idCardNo"
|
||||
@@ -135,12 +156,14 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<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-col :span="4">
|
||||
</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="男" />
|
||||
@@ -148,12 +171,14 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="民族" prop="nation">
|
||||
<el-input v-model="driverForm.nation" maxlength="20" />
|
||||
<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="4">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="学历" prop="education">
|
||||
<el-select v-model="driverForm.education" clearable filterable>
|
||||
<el-option
|
||||
@@ -165,6 +190,8 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="住址" prop="addressRegion">
|
||||
<el-input
|
||||
@@ -179,15 +206,7 @@
|
||||
<el-input v-model="driverForm.address" maxlength="200" show-word-limit />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="driverForm.status">
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="岗位" prop="postList">
|
||||
<el-checkbox-group v-model="driverForm.postList">
|
||||
<el-checkbox label="司机" />
|
||||
@@ -196,6 +215,8 @@
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<image-upload-field
|
||||
label="身份证正面照"
|
||||
@@ -203,6 +224,7 @@
|
||||
:value="driverForm.idCardFront"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
@success="url => setImage('idCardFront', url)"
|
||||
/>
|
||||
</el-col>
|
||||
@@ -213,6 +235,7 @@
|
||||
:value="driverForm.idCardBack"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
@success="url => setImage('idCardBack', url)"
|
||||
/>
|
||||
</el-col>
|
||||
@@ -223,6 +246,7 @@
|
||||
:value="driverForm.headPhoto"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
@success="url => setImage('headPhoto', url)"
|
||||
/>
|
||||
</el-col>
|
||||
@@ -253,7 +277,7 @@
|
||||
<el-input v-model="driverForm.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-range">
|
||||
<el-date-picker
|
||||
@@ -261,6 +285,7 @@
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="起"
|
||||
@change="validateFormField('drivingLicenseEndDate')"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-model="driverForm.drivingLicenseEndDate"
|
||||
@@ -268,21 +293,25 @@
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="止"
|
||||
:disabled="driverForm.drivingLicenseLongTerm === 1"
|
||||
@change="validateFormField('drivingLicenseEndDate')"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<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="驾驶证主页"
|
||||
@@ -310,7 +339,7 @@
|
||||
<div class="section-title">从业资格证信息</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="从业资格证类型" prop="qualificationType">
|
||||
<el-form-item label="从业资格认证类型" prop="qualificationType">
|
||||
<el-select
|
||||
v-model="driverForm.qualificationType"
|
||||
clearable
|
||||
@@ -318,8 +347,12 @@
|
||||
allow-create
|
||||
default-first-option
|
||||
>
|
||||
<el-option label="道路运输从业资格证" value="道路运输从业资格证" />
|
||||
<el-option label="危险货物运输从业资格证" value="危险货物运输从业资格证" />
|
||||
<el-option
|
||||
v-for="item in qualificationTypeOptions"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@@ -339,20 +372,24 @@
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
:disabled="driverForm.qualificationLongTerm === 1"
|
||||
@change="validateFormField('qualificationEndDate')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<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="封面页"
|
||||
@@ -379,30 +416,32 @@
|
||||
|
||||
<div class="section-title">司机联系信息</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="6">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="司机类型" prop="driverType">
|
||||
<el-select v-model="driverForm.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="6">
|
||||
<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="6">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="紧急联系人姓名" prop="emergencyContactName">
|
||||
<el-input v-model="driverForm.emergencyContactName" maxlength="20" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
</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="6">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="与联系人关系" prop="contactRelation">
|
||||
<el-select
|
||||
v-model="driverForm.contactRelation"
|
||||
@@ -420,26 +459,16 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="所属组织" prop="organizationName">
|
||||
<el-cascader
|
||||
v-model="driverForm.organizationName"
|
||||
:options="deptCascaderOptions"
|
||||
:props="deptCascaderProps"
|
||||
clearable
|
||||
filterable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
v-model="driverForm.remark"
|
||||
type="textarea"
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
/>
|
||||
<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>
|
||||
@@ -470,6 +499,7 @@ import { getDeptTree } from '@/api/system/dept';
|
||||
import { exportBlob } from '@/api/common';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { downloadXls } from '@/utils/util';
|
||||
import ImageUploadField from '@/components/image-upload-field/main.vue';
|
||||
|
||||
const emptyForm = () => ({
|
||||
id: '',
|
||||
@@ -505,64 +535,12 @@ const emptyForm = () => ({
|
||||
organizationName: '',
|
||||
emergencyContactName: '',
|
||||
emergencyContactMobile: '',
|
||||
remark: '',
|
||||
status: 1,
|
||||
});
|
||||
|
||||
const imageUploadField = {
|
||||
name: 'ImageUploadField',
|
||||
props: {
|
||||
label: String,
|
||||
prop: String,
|
||||
value: String,
|
||||
readonly: Boolean,
|
||||
headers: Object,
|
||||
large: Boolean,
|
||||
},
|
||||
emits: ['success'],
|
||||
methods: {
|
||||
handleSuccess(res) {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.$emit('success', res.data.link || res.data.url || res.data.domain || '');
|
||||
} else {
|
||||
this.$message.error(res.msg || '上传失败');
|
||||
}
|
||||
},
|
||||
beforeUpload(file) {
|
||||
const validType = ['image/jpeg', 'image/png', 'image/jpg', 'image/bmp'].includes(file.type);
|
||||
const validSize = file.size / 1024 / 1024 < 5;
|
||||
if (!validType) {
|
||||
this.$message.error('仅支持 JPG、PNG、BMP 图片');
|
||||
}
|
||||
if (!validSize) {
|
||||
this.$message.error('图片大小不能超过 5MB');
|
||||
}
|
||||
return validType && validSize;
|
||||
},
|
||||
},
|
||||
template: `
|
||||
<el-form-item :label="label" :prop="prop">
|
||||
<el-upload
|
||||
class="driver-uploader"
|
||||
:class="{ 'driver-uploader--large': large }"
|
||||
action="/api/blade-resource/oss/endpoint/put-file"
|
||||
name="file"
|
||||
:headers="headers"
|
||||
:show-file-list="false"
|
||||
:disabled="readonly"
|
||||
:before-upload="beforeUpload"
|
||||
:on-success="handleSuccess"
|
||||
>
|
||||
<img v-if="value" :src="value" class="driver-uploader__image" />
|
||||
<div v-else class="driver-uploader__empty">上传证件图片</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
`,
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ImageUploadField: imageUploadField,
|
||||
ImageUploadField,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -594,24 +572,108 @@ export default {
|
||||
'Blade-Auth': `bearer ${getToken()}`,
|
||||
'Blade-Requested-With': 'BladeHttpRequest',
|
||||
},
|
||||
nationOptions: [
|
||||
'汉族',
|
||||
'蒙古族',
|
||||
'回族',
|
||||
'藏族',
|
||||
'维吾尔族',
|
||||
'苗族',
|
||||
'彝族',
|
||||
'壮族',
|
||||
'布依族',
|
||||
'朝鲜族',
|
||||
'满族',
|
||||
'侗族',
|
||||
'瑶族',
|
||||
'白族',
|
||||
'土家族',
|
||||
'哈尼族',
|
||||
'哈萨克族',
|
||||
'傣族',
|
||||
'黎族',
|
||||
'傈僳族',
|
||||
'佤族',
|
||||
'畲族',
|
||||
'高山族',
|
||||
'拉祜族',
|
||||
'水族',
|
||||
'东乡族',
|
||||
'纳西族',
|
||||
'景颇族',
|
||||
'柯尔克孜族',
|
||||
'土族',
|
||||
'达斡尔族',
|
||||
'仫佬族',
|
||||
'羌族',
|
||||
'布朗族',
|
||||
'撒拉族',
|
||||
'毛南族',
|
||||
'仡佬族',
|
||||
'锡伯族',
|
||||
'阿昌族',
|
||||
'普米族',
|
||||
'塔吉克族',
|
||||
'怒族',
|
||||
'乌孜别克族',
|
||||
'俄罗斯族',
|
||||
'鄂温克族',
|
||||
'德昂族',
|
||||
'保安族',
|
||||
'裕固族',
|
||||
'京族',
|
||||
'塔塔尔族',
|
||||
'独龙族',
|
||||
'鄂伦春族',
|
||||
'赫哲族',
|
||||
'门巴族',
|
||||
'珞巴族',
|
||||
'基诺族',
|
||||
],
|
||||
educationOptions: ['初中', '高中', '中专', '大专', '本科', '硕士及以上'],
|
||||
drivingTypeOptions: ['A1', 'A2', 'A3', 'B1', 'B2', 'C1', 'C2'],
|
||||
qualificationTypeOptions: [
|
||||
'放射品押运员',
|
||||
'道路运输从业资格证',
|
||||
'危险货物运输从业资格证',
|
||||
'A1',
|
||||
'A2',
|
||||
'B1',
|
||||
'B2',
|
||||
'C1',
|
||||
'C2',
|
||||
],
|
||||
relationOptions: ['父母', '配偶', '子女', '兄弟姐妹', '朋友', '同事'],
|
||||
deptCascaderOptions: [],
|
||||
deptCascaderProps: {
|
||||
label: 'label',
|
||||
value: 'value',
|
||||
children: 'children',
|
||||
checkStrictly: true,
|
||||
emitPath: false,
|
||||
},
|
||||
organizationOptions: [],
|
||||
formRules: {
|
||||
driverName: [{ required: true, message: '请输入司机姓名', trigger: 'blur' }],
|
||||
idCardNo: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
|
||||
gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
|
||||
postList: [
|
||||
{
|
||||
type: 'array',
|
||||
required: true,
|
||||
min: 1,
|
||||
message: '请至少选择一个岗位',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
drivingType: [{ required: true, message: '请选择准驾车型', trigger: 'change' }],
|
||||
drivingLicenseNo: [{ required: true, message: '请输入档案编号', trigger: 'blur' }],
|
||||
drivingLicenseEndDate: [
|
||||
{ validator: this.validateDrivingLicenseEndDate, trigger: 'change' },
|
||||
],
|
||||
drivingLicenseLongTerm: [
|
||||
{ required: true, message: '请选择驾驶证是否长期有效', trigger: 'change' },
|
||||
],
|
||||
qualificationType: [
|
||||
{ required: true, message: '请选择从业资格认证类型', trigger: 'change' },
|
||||
],
|
||||
qualificationNo: [{ required: true, message: '请输入资格证号', trigger: 'blur' }],
|
||||
qualificationEndDate: [{ validator: this.validateQualificationEndDate, trigger: 'change' }],
|
||||
qualificationLongTerm: [
|
||||
{ required: true, message: '请选择从业资格证是否长期有效', trigger: 'change' },
|
||||
],
|
||||
driverType: [{ required: true, message: '请选择司机类型', trigger: 'change' }],
|
||||
mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
|
||||
emergencyContactName: [
|
||||
@@ -625,7 +687,6 @@ export default {
|
||||
idCardBack: [{ required: true, message: '请上传身份证反面照', trigger: 'change' }],
|
||||
drivingLicenseFront: [{ required: true, message: '请上传驾驶证主页', trigger: 'change' }],
|
||||
drivingLicenseBack: [{ required: true, message: '请上传驾驶证副页', trigger: 'change' }],
|
||||
remark: [{ max: 200, message: '备注最多200字', trigger: 'blur' }],
|
||||
},
|
||||
};
|
||||
},
|
||||
@@ -659,31 +720,43 @@ export default {
|
||||
},
|
||||
initDeptTree() {
|
||||
getDeptTree(this.userInfo.tenantId).then(res => {
|
||||
this.deptCascaderOptions = this.formatDeptCascaderOptions(res.data.data || []);
|
||||
this.organizationOptions = this.formatDeptOptions(res.data.data || []);
|
||||
const column = this.findColumn(this.option.column, 'organizationName');
|
||||
column.dicData = this.deptCascaderOptions;
|
||||
column.dicData = this.organizationOptions;
|
||||
});
|
||||
},
|
||||
formatDeptCascaderOptions(tree = []) {
|
||||
return tree.map(item => {
|
||||
formatDeptOptions(tree = [], level = 0) {
|
||||
const result = [];
|
||||
tree.forEach(item => {
|
||||
const label = item.title || item.deptName || item.name;
|
||||
const option = {
|
||||
label,
|
||||
result.push({
|
||||
label: `${' '.repeat(level)}${label}`,
|
||||
value: label,
|
||||
};
|
||||
});
|
||||
if (item.children && item.children.length) {
|
||||
option.children = this.formatDeptCascaderOptions(item.children);
|
||||
result.push(...this.formatDeptOptions(item.children, level + 1));
|
||||
}
|
||||
return option;
|
||||
});
|
||||
return result;
|
||||
},
|
||||
validateDrivingLicenseEndDate(rule, value, callback) {
|
||||
if (!this.driverForm.drivingLicenseStartDate) {
|
||||
callback(new Error('请选择驾驶证有效期起'));
|
||||
return;
|
||||
}
|
||||
if (this.driverForm.drivingLicenseLongTerm !== 1 && !value) {
|
||||
callback(new Error('请选择驾驶证有效期止'));
|
||||
return;
|
||||
}
|
||||
callback();
|
||||
},
|
||||
validateQualificationEndDate(rule, value, callback) {
|
||||
if (this.driverForm.qualificationLongTerm !== 1 && !value) {
|
||||
callback(new Error('请选择从业资格证有效期'));
|
||||
return;
|
||||
}
|
||||
callback();
|
||||
},
|
||||
openDriver(row, readonly = false) {
|
||||
this.readonly = readonly;
|
||||
if (!row?.id) {
|
||||
@@ -711,6 +784,9 @@ export default {
|
||||
this.driverForm[prop] = url;
|
||||
this.$refs.driverForm?.validateField(prop);
|
||||
},
|
||||
validateFormField(prop) {
|
||||
this.$refs.driverForm?.validateField(prop);
|
||||
},
|
||||
handleSubmit() {
|
||||
this.$refs.driverForm.validate(valid => {
|
||||
if (!valid) {
|
||||
@@ -863,19 +939,13 @@ export default {
|
||||
}
|
||||
return date || '-';
|
||||
},
|
||||
getDateClass(row, dateProp, longTermProp) {
|
||||
isDateExpiring(row, dateProp, longTermProp) {
|
||||
if (row[longTermProp] === 1 || !row[dateProp]) {
|
||||
return '';
|
||||
return false;
|
||||
}
|
||||
const today = this.$dayjs();
|
||||
const endDate = this.$dayjs(row[dateProp]);
|
||||
if (endDate.isBefore(today, 'day')) {
|
||||
return 'date-danger';
|
||||
}
|
||||
if (endDate.diff(today, 'day') <= 30) {
|
||||
return 'date-warning';
|
||||
}
|
||||
return '';
|
||||
return endDate.isValid() && endDate.diff(today, 'day') <= 30;
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -883,24 +953,22 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.driver-page {
|
||||
.driver-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.driver-toolbar__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.driver-stat {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
:deep(.avue-crud__search .avue-form__menu),
|
||||
:deep(.avue-crud__search .avue-form__menu--right) {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
:deep(.avue-crud__search .avue-form__menu--right) {
|
||||
margin-left: 12px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
:deep(.el-table th .cell),
|
||||
:deep(.el-table td .cell) {
|
||||
white-space: nowrap;
|
||||
@@ -935,7 +1003,16 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.driver-uploader .el-upload) {
|
||||
:deep(.driver-uploader) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.driver-uploader .el-upload),
|
||||
:deep(.driver-uploader.el-upload) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
border: 1px dashed #c0c4cc;
|
||||
@@ -943,7 +1020,8 @@ export default {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.driver-uploader--large .el-upload) {
|
||||
:deep(.driver-uploader--large .el-upload),
|
||||
:deep(.driver-uploader--large.el-upload) {
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
@@ -963,21 +1041,23 @@ export default {
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.date-warning {
|
||||
color: #f56c6c;
|
||||
font-weight: 600;
|
||||
.driver-dialog {
|
||||
:deep(.el-dialog__body) {
|
||||
max-height: 72vh;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.date-danger {
|
||||
.driver-page__date-expiring {
|
||||
color: #d40000;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.driver-page {
|
||||
.driver-toolbar {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
.driver-stat {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,7 +1,22 @@
|
||||
<template>
|
||||
<basic-container class="transport-vehicle-page">
|
||||
<div class="vehicle-toolbar">
|
||||
<div class="vehicle-toolbar__actions">
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
:permission="permissionList"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@@ -26,34 +41,18 @@
|
||||
@click="handleDelete"
|
||||
>批量删除
|
||||
</el-button>
|
||||
</div>
|
||||
<el-radio-group
|
||||
v-model="query.expireStatus"
|
||||
class="vehicle-stat"
|
||||
@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="expired">已到期（{{ expiryStat.expired }}）</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
:permission="permissionList"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
</template>
|
||||
<template #menu-right>
|
||||
<el-radio-group
|
||||
v-model="query.expireStatus"
|
||||
class="vehicle-stat"
|
||||
@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="expired">已到期（{{ expiryStat.expired }}）</el-radio-button>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
<template #plateNo="{ row }">
|
||||
<el-button type="primary" link @click="openVehicle(row, true)">
|
||||
{{ row.plateNo }}
|
||||
@@ -129,19 +128,60 @@
|
||||
>
|
||||
<div class="section-title">基础车辆信息</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="所属组织" prop="organizationName">
|
||||
<el-input v-model="vehicleForm.organizationName" maxlength="50" />
|
||||
<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-col :span="6">
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="10">
|
||||
<el-form-item label="车牌号" prop="plateNo">
|
||||
<el-input
|
||||
v-model="vehicleForm.plateNo"
|
||||
maxlength="16"
|
||||
show-word-limit
|
||||
@input="vehicleForm.plateNo = String(vehicleForm.plateNo || '').toUpperCase()"
|
||||
/>
|
||||
<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-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
@@ -154,14 +194,69 @@
|
||||
>
|
||||
<el-option
|
||||
v-for="item in vehicleTypeOptions"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<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
|
||||
@@ -173,7 +268,9 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="能源类型" prop="energyType">
|
||||
<el-select
|
||||
v-model="vehicleForm.energyType"
|
||||
@@ -190,221 +287,109 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="核定载质量(KG)" prop="approvedLoadKg">
|
||||
<el-input-number
|
||||
v-model="vehicleForm.approvedLoadKg"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
<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="6">
|
||||
<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="6">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="vehicleForm.status">
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="外廓长度(mm)" prop="outerLength">
|
||||
<el-input-number
|
||||
v-model="vehicleForm.outerLength"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="外廓宽度(mm)" prop="outerWidth">
|
||||
<el-input-number
|
||||
v-model="vehicleForm.outerWidth"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="外廓高度(mm)" prop="outerHeight">
|
||||
<el-input-number
|
||||
v-model="vehicleForm.outerHeight"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="海关备案号" prop="customsRecordNo">
|
||||
<el-input v-model="vehicleForm.customsRecordNo" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="强制报废日期" prop="compulsoryScrapDate">
|
||||
<el-date-picker
|
||||
v-model="vehicleForm.compulsoryScrapDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
:disabled="vehicleForm.compulsoryScrapLongTerm === 1"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="长期有效" prop="compulsoryScrapLongTerm">
|
||||
<el-checkbox
|
||||
v-model="vehicleForm.compulsoryScrapLongTerm"
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
>
|
||||
是
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="section-title">行驶证信息</div>
|
||||
<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="10">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="行驶证有效期" prop="drivingLicenseEndDate">
|
||||
<div class="date-range">
|
||||
<el-date-picker
|
||||
v-model="vehicleForm.drivingLicenseStartDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="起"
|
||||
/>
|
||||
<div class="date-with-flag">
|
||||
<el-date-picker
|
||||
v-model="vehicleForm.drivingLicenseEndDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="止"
|
||||
:disabled="vehicleForm.drivingLicenseLongTerm === 1"
|
||||
/>
|
||||
<el-checkbox
|
||||
v-model="vehicleForm.drivingLicenseLongTerm"
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
>
|
||||
长期有效
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="长期有效" prop="drivingLicenseLongTerm">
|
||||
<el-checkbox
|
||||
v-model="vehicleForm.drivingLicenseLongTerm"
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
>
|
||||
是
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<image-upload-field
|
||||
label="行驶证图片"
|
||||
prop="drivingLicenseImage"
|
||||
:value="vehicleForm.drivingLicenseImage"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
@success="url => setImage('drivingLicenseImage', url)"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="section-title">道路运输证信息</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="6">
|
||||
<el-col :span="10">
|
||||
<el-form-item label="道路运输证号" prop="roadTransportCertNo">
|
||||
<el-input v-model="vehicleForm.roadTransportCertNo" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="道路运输证有效期" prop="roadTransportCertEndDate">
|
||||
<div class="date-range">
|
||||
<el-date-picker
|
||||
v-model="vehicleForm.roadTransportCertStartDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="起"
|
||||
/>
|
||||
<div class="date-with-flag">
|
||||
<el-date-picker
|
||||
v-model="vehicleForm.roadTransportCertEndDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="止"
|
||||
:disabled="vehicleForm.roadTransportCertLongTerm === 1"
|
||||
/>
|
||||
<el-checkbox
|
||||
v-model="vehicleForm.roadTransportCertLongTerm"
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
>
|
||||
长期有效
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="长期有效" prop="roadTransportCertLongTerm">
|
||||
<el-checkbox
|
||||
v-model="vehicleForm.roadTransportCertLongTerm"
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
>
|
||||
是
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="道路运输年审有效期" prop="annualReviewEndDate">
|
||||
<el-date-picker
|
||||
v-model="vehicleForm.annualReviewEndDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
:disabled="vehicleForm.annualReviewLongTerm === 1"
|
||||
/>
|
||||
<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-col :span="4">
|
||||
<el-form-item label="年审长期有效" prop="annualReviewLongTerm">
|
||||
<el-checkbox
|
||||
v-model="vehicleForm.annualReviewLongTerm"
|
||||
:true-label="1"
|
||||
:false-label="0"
|
||||
>
|
||||
是
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<image-upload-field
|
||||
label="道路运输证图片"
|
||||
prop="roadTransportCertImage"
|
||||
:value="vehicleForm.roadTransportCertImage"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
@success="url => setImage('roadTransportCertImage', url)"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="section-title">机动车登记本信息</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="6">
|
||||
<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="6">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="机动车登记日期" prop="registrationDate">
|
||||
<el-date-picker
|
||||
v-model="vehicleForm.registrationDate"
|
||||
@@ -413,24 +398,79 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
v-model="vehicleForm.remark"
|
||||
type="textarea"
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
</el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<image-upload-field
|
||||
label="机动车登记本图片"
|
||||
label="行驶证主页正面"
|
||||
prop="drivingLicenseImage"
|
||||
:value="vehicleForm.drivingLicenseImage"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
class-prefix="vehicle"
|
||||
@success="url => setImage('drivingLicenseImage', url)"
|
||||
/>
|
||||
</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 => setImage('drivingLicenseMainBack', url)"
|
||||
/>
|
||||
</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 => setImage('drivingLicenseViceFront', url)"
|
||||
/>
|
||||
</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 => setImage('drivingLicenseViceBack', url)"
|
||||
/>
|
||||
</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 => setImage('registrationImage', url)"
|
||||
/>
|
||||
</el-col>
|
||||
@@ -458,14 +498,19 @@ import {
|
||||
changeStatus,
|
||||
getExpiryStat,
|
||||
} from '@/api/transportCapacity/transport-vehicle';
|
||||
import { getDeptTree } from '@/api/system/dept';
|
||||
import { exportBlob } from '@/api/common';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { downloadXls } from '@/utils/util';
|
||||
import ImageUploadField from '@/components/image-upload-field/main.vue';
|
||||
|
||||
const emptyForm = () => ({
|
||||
id: '',
|
||||
organizationName: '',
|
||||
plateProvince: '',
|
||||
plateNoBody: '',
|
||||
plateNo: '',
|
||||
plateColor: '',
|
||||
vehicleType: '',
|
||||
outerLength: undefined,
|
||||
outerWidth: undefined,
|
||||
@@ -482,6 +527,9 @@ const emptyForm = () => ({
|
||||
drivingLicenseEndDate: '',
|
||||
drivingLicenseLongTerm: 0,
|
||||
drivingLicenseImage: '',
|
||||
drivingLicenseMainBack: '',
|
||||
drivingLicenseViceFront: '',
|
||||
drivingLicenseViceBack: '',
|
||||
roadTransportCertNo: '',
|
||||
roadTransportCertStartDate: '',
|
||||
roadTransportCertEndDate: '',
|
||||
@@ -492,64 +540,50 @@ const emptyForm = () => ({
|
||||
registrationNo: '',
|
||||
registrationDate: '',
|
||||
registrationImage: '',
|
||||
remark: '',
|
||||
status: 1,
|
||||
});
|
||||
|
||||
const imageUploadField = {
|
||||
name: 'ImageUploadField',
|
||||
props: {
|
||||
label: String,
|
||||
prop: String,
|
||||
value: String,
|
||||
readonly: Boolean,
|
||||
headers: Object,
|
||||
large: Boolean,
|
||||
},
|
||||
emits: ['success'],
|
||||
methods: {
|
||||
handleSuccess(res) {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.$emit('success', res.data.link || res.data.url || res.data.domain || '');
|
||||
} else {
|
||||
this.$message.error(res.msg || '上传失败');
|
||||
}
|
||||
},
|
||||
beforeUpload(file) {
|
||||
const validType = ['image/jpeg', 'image/png', 'image/jpg', 'image/bmp'].includes(file.type);
|
||||
const validSize = file.size / 1024 / 1024 < 5;
|
||||
if (!validType) {
|
||||
this.$message.error('仅支持 JPG、PNG、BMP 图片');
|
||||
}
|
||||
if (!validSize) {
|
||||
this.$message.error('图片大小不能超过 5MB');
|
||||
}
|
||||
return validType && validSize;
|
||||
},
|
||||
},
|
||||
template: `
|
||||
<el-form-item :label="label" :prop="prop">
|
||||
<el-upload
|
||||
class="vehicle-uploader"
|
||||
:class="{ 'vehicle-uploader--large': large }"
|
||||
action="/api/blade-resource/oss/endpoint/put-file"
|
||||
name="file"
|
||||
:headers="headers"
|
||||
:show-file-list="false"
|
||||
:disabled="readonly"
|
||||
:before-upload="beforeUpload"
|
||||
:on-success="handleSuccess"
|
||||
>
|
||||
<img v-if="value" :src="value" class="vehicle-uploader__image" />
|
||||
<div v-else class="vehicle-uploader__empty">上传证件图片</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
`,
|
||||
};
|
||||
const plateProvinceOptions = [
|
||||
'京',
|
||||
'津',
|
||||
'沪',
|
||||
'渝',
|
||||
'冀',
|
||||
'豫',
|
||||
'云',
|
||||
'辽',
|
||||
'黑',
|
||||
'湘',
|
||||
'皖',
|
||||
'鲁',
|
||||
'新',
|
||||
'苏',
|
||||
'浙',
|
||||
'赣',
|
||||
'鄂',
|
||||
'桂',
|
||||
'甘',
|
||||
'晋',
|
||||
'蒙',
|
||||
'陕',
|
||||
'吉',
|
||||
'闽',
|
||||
'贵',
|
||||
'粤',
|
||||
'青',
|
||||
'藏',
|
||||
'川',
|
||||
'宁',
|
||||
'琼',
|
||||
'港',
|
||||
'澳',
|
||||
].map(item => ({ label: item, value: item }));
|
||||
|
||||
const plateColorOptions = ['黄牌', '蓝牌', '绿牌'].map(item => ({ label: item, value: item }));
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ImageUploadField: imageUploadField,
|
||||
ImageUploadField,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -581,34 +615,34 @@ export default {
|
||||
'Blade-Auth': `bearer ${getToken()}`,
|
||||
'Blade-Requested-With': 'BladeHttpRequest',
|
||||
},
|
||||
vehicleTypeOptions: ['厢式', '高栏', '平板', '仓栅', '牵引车', '冷藏车'],
|
||||
businessRelationOptions: ['自有', '业务合作', '管理挂靠'],
|
||||
organizationOptions: [],
|
||||
plateProvinceOptions,
|
||||
plateColorOptions,
|
||||
vehicleTypeOptions: [
|
||||
{ label: '高栏车', value: '高栏' },
|
||||
{ label: '低栏车', value: '低栏' },
|
||||
{ label: '平板车', value: '平板' },
|
||||
{ label: '厢式车', value: '厢式' },
|
||||
{ label: '拖挂车', value: '拖挂' },
|
||||
{ label: '半挂车', value: '半挂' },
|
||||
],
|
||||
businessRelationOptions: ['自有', '管理挂靠', '业务合作'],
|
||||
energyTypeOptions: ['柴油', '汽油', '新能源', '天然气'],
|
||||
formRules: {
|
||||
organizationName: [{ required: true, message: '请输入所属组织', trigger: 'blur' }],
|
||||
plateNo: [
|
||||
{ required: true, message: '请输入车牌号', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^[\u4e00-\u9fa5][A-Z][A-Z0-9挂学警港澳]{5,6}$/,
|
||||
message: '请输入标准车牌号',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
organizationName: [{ required: true, message: '请选择所属组织', trigger: 'change' }],
|
||||
plateNo: [{ validator: this.validatePlateNo, trigger: 'change' }],
|
||||
vehicleType: [{ required: true, message: '请选择车辆类型', trigger: 'change' }],
|
||||
approvedLoadKg: [{ required: true, message: '请输入核定载质量', trigger: 'blur' }],
|
||||
businessRelation: [{ required: true, message: '请选择业务关系', trigger: 'change' }],
|
||||
energyType: [{ required: true, message: '请选择能源类型', trigger: 'change' }],
|
||||
drivingLicenseNo: [{ required: true, message: '请输入行驶证档案编号', trigger: 'blur' }],
|
||||
drivingLicenseEndDate: [
|
||||
{ validator: this.validateDrivingLicenseEndDate, trigger: 'change' },
|
||||
],
|
||||
drivingLicenseEndDate: [{ required: true, message: '请选择行驶证有效期', trigger: 'change' }],
|
||||
roadTransportCertNo: [{ required: true, message: '请输入道路运输证号', trigger: 'blur' }],
|
||||
roadTransportCertEndDate: [
|
||||
{ validator: this.validateRoadTransportCertEndDate, trigger: 'change' },
|
||||
{ required: true, message: '请选择道路运输证有效期', trigger: 'change' },
|
||||
],
|
||||
annualReviewEndDate: [{ validator: this.validateAnnualReviewEndDate, trigger: 'change' }],
|
||||
registrationNo: [{ required: true, message: '请输入机动车登记编号', trigger: 'blur' }],
|
||||
remark: [{ max: 200, message: '备注最多200字', trigger: 'blur' }],
|
||||
},
|
||||
};
|
||||
},
|
||||
@@ -633,20 +667,44 @@ export default {
|
||||
return this.vehicleForm.id ? '修改车辆' : '新增车辆';
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.initDeptTree();
|
||||
},
|
||||
methods: {
|
||||
hasPermission(code) {
|
||||
return this.isAdmin || this.permission?.[code] === true;
|
||||
},
|
||||
validateDrivingLicenseEndDate(rule, value, callback) {
|
||||
if (this.vehicleForm.drivingLicenseLongTerm !== 1 && !value) {
|
||||
callback(new Error('请选择行驶证有效期止'));
|
||||
initDeptTree() {
|
||||
getDeptTree(this.userInfo.tenantId).then(res => {
|
||||
this.organizationOptions = this.flattenDeptOptions(res.data.data || []);
|
||||
const column = this.findColumn(this.option.column, 'organizationName');
|
||||
column.dicData = this.organizationOptions;
|
||||
});
|
||||
},
|
||||
flattenDeptOptions(tree = [], level = 0) {
|
||||
const result = [];
|
||||
tree.forEach(item => {
|
||||
const label = item.title || item.deptName || item.name;
|
||||
result.push({
|
||||
label: `${' '.repeat(level)}${label}`,
|
||||
value: label,
|
||||
});
|
||||
if (item.children && item.children.length) {
|
||||
result.push(...this.flattenDeptOptions(item.children, level + 1));
|
||||
}
|
||||
});
|
||||
return result;
|
||||
},
|
||||
validatePlateNo(rule, value, callback) {
|
||||
const plateProvince = String(this.vehicleForm.plateProvince || '').trim();
|
||||
const plateNoBody = String(this.vehicleForm.plateNoBody || '').trim().toUpperCase();
|
||||
const plateColor = String(this.vehicleForm.plateColor || '').trim();
|
||||
if (!plateProvince || !plateNoBody || !plateColor) {
|
||||
callback(new Error('请完整填写车牌号'));
|
||||
return;
|
||||
}
|
||||
callback();
|
||||
},
|
||||
validateRoadTransportCertEndDate(rule, value, callback) {
|
||||
if (this.vehicleForm.roadTransportCertLongTerm !== 1 && !value) {
|
||||
callback(new Error('请选择道路运输证有效期止'));
|
||||
if (!/^[A-Z][A-Z0-9挂学警港澳]{5,6}$/.test(plateNoBody)) {
|
||||
callback(new Error('请输入标准车牌号'));
|
||||
return;
|
||||
}
|
||||
callback();
|
||||
@@ -662,6 +720,7 @@ export default {
|
||||
this.readonly = readonly;
|
||||
if (!row?.id) {
|
||||
this.vehicleForm = emptyForm();
|
||||
this.syncPlateNo(false);
|
||||
this.vehicleBox = true;
|
||||
return;
|
||||
}
|
||||
@@ -670,6 +729,8 @@ export default {
|
||||
...emptyForm(),
|
||||
...(res.data.data || {}),
|
||||
};
|
||||
this.splitPlateNo();
|
||||
this.syncPlateNo(false);
|
||||
this.vehicleBox = true;
|
||||
});
|
||||
},
|
||||
@@ -683,7 +744,33 @@ export default {
|
||||
this.vehicleForm[prop] = url;
|
||||
this.$refs.vehicleForm?.validateField(prop);
|
||||
},
|
||||
handlePlateBodyInput(value) {
|
||||
this.vehicleForm.plateNoBody = String(value || '').toUpperCase();
|
||||
this.syncPlateNo();
|
||||
},
|
||||
syncPlateNo(validate = true) {
|
||||
const plateProvince = String(this.vehicleForm.plateProvince || '').trim();
|
||||
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.plateColor = plateColor;
|
||||
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();
|
||||
},
|
||||
handleSubmit() {
|
||||
this.syncPlateNo();
|
||||
this.$refs.vehicleForm.validate(valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
@@ -850,20 +937,6 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.transport-vehicle-page {
|
||||
.vehicle-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.vehicle-toolbar__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.vehicle-stat {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -896,14 +969,74 @@ export default {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.plate-group {
|
||||
display: grid;
|
||||
grid-template-columns: 112px minmax(0, 1fr) 112px;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dimension-group {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dimension-group__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dimension-group__label {
|
||||
flex-shrink: 0;
|
||||
color: #303133;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.date-with-flag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.date-with-flag :deep(.el-date-editor) {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.date-with-flag :deep(.el-checkbox) {
|
||||
flex-shrink: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.date-with-flag :deep(.el-checkbox__label) {
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.date-range {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.vehicle-uploader .el-upload) {
|
||||
:deep(.vehicle-uploader) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.vehicle-uploader .el-upload),
|
||||
:deep(.vehicle-uploader.el-upload) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
border: 1px dashed #c0c4cc;
|
||||
@@ -911,7 +1044,8 @@ export default {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.vehicle-uploader--large .el-upload) {
|
||||
:deep(.vehicle-uploader--large .el-upload),
|
||||
:deep(.vehicle-uploader--large.el-upload) {
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
@@ -940,13 +1074,4 @@ export default {
|
||||
color: #d40000;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.transport-vehicle-page {
|
||||
.vehicle-toolbar {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user