1、大量页面调整

2、完善运力模块
3、完善规范、需求卡

src/views/transportCapacity/vehicle.vue

@@ -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>