同步6/16

src/views/system/cars/addCars.vue

@@ -5,7 +5,7 @@
       <div class="title">基本信息</div>
       <div class="addBuildingFormBody">
         <el-form class="formBody" label-position="left" ref="formRef" :model="form" :rules="rules" label-width="130px">
-          <el-row>
+          <!-- <el-row>
             <el-col :span="11">
               <el-form-item label="车辆区域" prop="areaId">
                 <el-select @change="changeArealist" v-model="form.areaId" placeholder="请选择车辆区域">
@@ -15,13 +15,13 @@
             </el-col>
             <el-col :span="2"></el-col>
             <el-col :span="11">
-              <el-form-item label="车位号" prop="parkingId">
-                <el-select v-model="form.parkingId" placeholder="请选择车位号">
+              <el-form-item label="车位编号" prop="parkingId">
+                <el-select v-model="form.parkingId" placeholder="请选择车位编号">
                   <el-option v-for="item in parkinglist" :key="item.id" :label="item.parkingCode" :value="item.id" />
                 </el-select>
               </el-form-item>
             </el-col>
-          </el-row>
+          </el-row> -->
 
           <el-row>
             <el-col :span="11">
@@ -79,11 +79,23 @@
           <el-row>
             <el-col :span="24">
               <el-form-item label="持有人">
-                <!-- 公共组件 持有人 -->
-                <Holder :userid="form.residentId ?? ''" @change="handleChange"></Holder>
+                <AppUser :isMultiple="false" ref="HolderRef" @change="handleChange">
+                  <template #default>
+                    <div class="residentBox" @click="choiceResidentFun">
+                      <div class="defaultbox" v-if="form.residentId === ''">
+                        <span>请选择</span>
+                        <el-icon><Search /></el-icon>
+                      </div>
+                      <div v-else class="overflow-auto overflow-hidden w-full text-ellipsis text-nowrap">
+                        <span>姓名：{{ form?.residentName }}</span>
+                      </div>
+                    </div>
+                  </template>
+                </AppUser>
               </el-form-item>
             </el-col>
           </el-row>
+
           <el-row>
             <el-col :span="24">
               <el-form-item label="备注" prop="remark">
@@ -111,7 +123,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 { LicensePlateValidator, validator } from '@/utils/Reg';
+import AppUser from '@/components/Holder/appUser.vue';
 
 const uploadUrl = import.meta.env.VITE_APP_BASE_API + '/car/uploadImage';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -124,6 +136,7 @@ const form = ref({
   id: null,
   areaId: null, // 区域id
   residentId: '', // 车位id
+  residentName: '', // 持有人姓名
   parkingId: null, // 持有人id
   carNum: '', //车牌号
   carBrand: '', //车辆品牌
@@ -141,20 +154,6 @@ const rules = ref({
       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' }]
@@ -171,7 +170,9 @@ function headerToken() {
 const userid = ref('');
 const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
   const type = rawFile.type.split('/').pop();
-  if (['png', 'jpg'].includes(type)) {
+  console.log('type', type);
+  console.log('rawFile', rawFile);
+  if (['png', 'jpg', 'jpeg'].includes(type)) {
     if (rawFile.size / 1024 / 1024 <= 10) {
       return true;
     } else {
@@ -179,7 +180,7 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile)
       return false;
     }
   } else {
-    ElMessage.warning('图片格式不是 png/jpg 格式, 请重新上传');
+    ElMessage.warning('图片格式不是 png/jpg/jpeg 格式, 请重新上传');
     return false;
   }
 };
@@ -207,6 +208,7 @@ if (route.query.id) {
       ...form.value,
       ...res.data
     };
+    changeArealist(res.data.areaId);
   });
 }
 
@@ -250,10 +252,26 @@ const submitForm = () => {
 const cancelForm = () => {
   router.back();
 };
-
+const holderInfo = ref(null);
+const HolderRef = ref<typeof Holder>(null);
+function choiceResidentFun() {
+  if (form.value.residentId) {
+    HolderRef.value.open([...form.value.residentId]);
+  } else {
+    HolderRef.value.open([]);
+  }
+}
 // 选择住户
 function handleChange(pop) {
-  form.value.residentId = pop;
+  holderInfo.value = null;
+  holderInfo.value = pop;
+  form.value.residentId = '';
+  form.value.residentName = '';
+  console.log(pop);
+  if (pop !== null) {
+    form.value.residentId = pop.user_id;
+    form.value.residentName = pop.user_name;
+  }
 }
 </script>
 <style scoped>
@@ -328,4 +346,22 @@ function handleChange(pop) {
     }
   }
 }
+
+.residentBox {
+  width: 385px;
+  height: 35px;
+  line-height: 35px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 0 10px;
+  .defaultbox {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  cursor: pointer;
+  &:hover {
+    background-color: #f4f8ff;
+  }
+}
 </style>