同步

src/views/system/parking/addParking.vue

@@ -55,7 +55,19 @@
             <el-col :span="24">
               <el-form-item label="持有人" prop="residentId">
                 <!-- 公共组件 持有人 -->
-                <Holder :userid="form.residentId" @change="handleChange"></Holder>
+                <Holder :isMultiple="false" :userid="form.residentId" 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>
+                </Holder>
               </el-form-item>
             </el-col>
           </el-row>
@@ -98,6 +110,7 @@ const form = ref({
   parkingFloor: null, // 车位楼层
   type: '0', // 车位类型
   residentId: '', // 住户id
+  residentName: '', // 住户名
   parkingStatus: '', // 车位状态
   remark: '', // 备注
   parkingCode: '' // 车位编码
@@ -109,6 +122,7 @@ const rules = ref({
 });
 
 const userid = ref(null);
+const HolderRef = ref<typeof Holder>(null);
 
 if (route.query.id) {
   userid.value = route.query.id;
@@ -131,8 +145,19 @@ const getAreaList = async () => {
 getAreaList();
 
 const holderInfo = ref(null);
+function choiceResidentFun() {
+  HolderRef.value.open([...form.value.residentId]);
+}
 function handleChange(pop) {
+  holderInfo.value = null;
   holderInfo.value = pop;
+  console.log(pop);
+  form.value.residentId = '';
+  form.value.residentName = '';
+  if (pop !== null) {
+    form.value.residentId = holderInfo.value.id;
+    form.value.residentName = holderInfo.value.name;
+  }
 }
 
 // !== 提交 =============================================================================
@@ -140,7 +165,7 @@ function handleChange(pop) {
 const submitForm = () => {
   formRef.value?.validate(async (valid: boolean) => {
     if (valid) {
-      form.value.residentId = holderInfo.value;
+      form.value.residentId = holderInfo.value.id;
       if (userid.value) {
         updateParking(form.value).then((res) => {
           ElMessage.success('编辑成功');
@@ -206,4 +231,21 @@ const cancelForm = () => {
     }
   }
 }
+.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>