修正ts类型

src/views/system/cars/addCars.vue

@@ -25,8 +25,9 @@
 
           <el-row>
             <el-col :span="11">
-              <el-form-item label="车牌号" prop="carNum">
-                <el-input v-model.trim="form.carNum" placeholder="请输入车牌号" />
+              <el-form-item label="车牌号" prop="carNum" :validate-event="false">
+                <!-- <el-input v-model.trim="form.carNum" placeholder="请输入车牌号" /> -->
+                <LicensePlateInput ref="carNumInputRef" required v-model="form.carNum" @change="() => handleValidate()" />
               </el-form-item>
             </el-col>
             <el-col :span="2"></el-col>
@@ -79,7 +80,7 @@
             <el-col :span="24">
               <el-form-item label="持有人">
                 <!-- 公共组件 持有人 -->
-                <Holder :userid="form.residentId" @change="handleChange"></Holder>
+                <Holder :userid="form.residentId ?? ''" @change="handleChange"></Holder>
               </el-form-item>
             </el-col>
           </el-row>
@@ -102,6 +103,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import LicensePlateInput from '@/components/LicensePlateInput/index.vue';
 import Holder from '@/components/Holder/index.vue';
 import PageHeader from '@/components/Pageheader/index.vue';
 import { listArea } from '@/api/system/carArea';
@@ -109,7 +111,7 @@ import { listParking } from '@/api/system/parking';
 import { UploadFiles, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus';
 import { addCar, getCar, updateCar, uploadCar } from '@/api/system/cars';
 import { useUserStore } from '@/store/modules/user';
-import { validator } from '@/utils/Reg';
+import { LicensePlateValidator, validator } from '@/utils/Reg';
 
 const uploadUrl = import.meta.env.VITE_APP_BASE_API + '/car/uploadImage';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -117,10 +119,11 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const router = useRouter();
 const route = useRoute();
 const formRef = ref();
+const carNumInputRef = ref();
 const form = ref({
   id: null,
   areaId: null, // 区域id
-  residentId: null, // 车位id
+  residentId: '', // 车位id
   parkingId: null, // 持有人id
   carNum: '', //车牌号
   carBrand: '', //车辆品牌
@@ -134,15 +137,31 @@ const rules = ref({
   areaId: [{ required: true, message: '请选择区域', trigger: 'blur' }],
   residentId: [{ required: true, message: '请选择', trigger: 'blur' }],
   carNum: [
-    { required: true, message: '请输入车牌号', trigger: 'blur' },
     {
-      validator: (_, value) => validator(value, 'PlateNumber'),
-      message: '请请输入车牌号',
-      trigger: 'blur'
+      required: true,
+      message: '请输入车牌号码',
+      trigger: ['blur']
+    },
+    {
+      validator: (rule: any, value: string, callback: any) => {
+        if (!value) {
+          callback();
+          return;
+        }
+        if (!LicensePlateValidator.isValidPlate(value)) {
+          callback(new Error('请输入正确的车牌号格式'));
+          return;
+        }
+        callback();
+      },
+      trigger: 'blur' // ✅ 只在失焦时验证
     }
   ],
   carBrand: [{ required: true, message: '请输入车辆品牌', trigger: 'blur' }]
 });
+function handleValidate() {
+  formRef.value.validateField('carNum');
+}
 function headerToken() {
   const useStore = useUserStore();
   return {
@@ -204,6 +223,12 @@ function changeArealist(val: string) {
 // !== 提交 =============================================================================
 // 提交
 const submitForm = () => {
+  const plateResult = carNumInputRef.value.validate();
+  if (!plateResult.valid) {
+    // 自动聚焦到错误字段
+    carNumInputRef.value.focus();
+    return;
+  }
   formRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       if (userid.value.trim() !== '') {