同步6/16

src/views/system/parking/addParking.vue

@@ -37,9 +37,9 @@
           <el-row>
             <el-col :span="11">
               <el-form-item label="车位类型" prop="type">
-                <el-radio-group v-model="form.type">
-                  <el-radio v-for="dict in com_parking_type" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
-                </el-radio-group>
+                <el-select v-model="form.type">
+                  <el-option v-for="dict in com_parking_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+                </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="2"></el-col>
@@ -52,10 +52,44 @@
             </el-col>
           </el-row>
           <el-row>
+            <el-col :span="24">
+              <el-form-item label="持有人类型" prop="contactType">
+                <el-radio-group v-model="form.contactType">
+                  <el-radio :value="1">业主</el-radio>
+                  <el-radio :value="0">非业主</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-if="form.contactType === 0">
+            <el-col :span="10">
+              <el-form-item label="联系人名称" prop="contactName">
+                <el-input v-model.trim="form.contactName"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="2"></el-col>
+            <el-col :span="10">
+              <el-form-item label="联系人电话" prop="contactPhone">
+                <el-input v-model.trim="form.contactPhone"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-else>
             <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 == null || 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>
@@ -82,6 +116,7 @@ import { ref } from 'vue';
 import PageHeader from '@/components/Pageheader/index.vue';
 import { addParking, getParking, updateParking } from '@/api/system/parking';
 import { listArea } from '@/api/system/carArea';
+import { validator } from '@/utils/Reg';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { com_parking_type } = toRefs<any>(proxy?.useDict('com_parking_type'));
@@ -98,17 +133,37 @@ const form = ref({
   parkingFloor: null, // 车位楼层
   type: '0', // 车位类型
   residentId: '', // 住户id
+  residentName: '', // 住户名
   parkingStatus: '', // 车位状态
   remark: '', // 备注
-  parkingCode: '' // 车位编码
+  parkingCode: '', // 车位编码
+
+  contactName: '', // 联系人名称
+  contactPhone: '', // 联系人手机
+  contactType: 1 //  联系人类型 0 非业主 1 业主
 });
 const rules = ref({
   areaId: [{ required: true, message: '请选择车位区域', trigger: 'blur' }],
   type: [{ required: true, message: '请选择车位类型', trigger: 'blur' }],
-  parkingCode: [{ required: true, message: '请输入车位编号', trigger: 'blur' }]
+  parkingCode: [{ required: true, message: '请输入车位编号', trigger: 'blur' }],
+  residentId: [{ required: true, message: '请选择持有人', trigger: 'blur' }],
+  contactPhone: [
+    { required: true, message: '请输入联系人电话', trigger: 'blur' },
+    {
+      validator: (rule, value, callback) => {
+        if (!validator(value, 'phone')) {
+          callback(new Error('请输入正确的手机号码'));
+        } else {
+          callback();
+        }
+      }
+    }
+  ],
+  contactName: [{ required: true, message: '请输入联系人名称', trigger: 'blur' }]
 });
 
 const userid = ref(null);
+const HolderRef = ref<typeof Holder>(null);
 
 if (route.query.id) {
   userid.value = route.query.id;
@@ -131,23 +186,39 @@ const getAreaList = async () => {
 getAreaList();
 
 const holderInfo = ref(null);
+function choiceResidentFun() {
+  if (form.value.residentId) {
+    HolderRef.value.open([...form.value.residentId]);
+  } else {
+    HolderRef.value.open([]);
+  }
+}
 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;
+  }
 }
 
 // !== 提交 =============================================================================
 // 提交
 const submitForm = () => {
+  console.log(form.value);
   formRef.value?.validate(async (valid: boolean) => {
+    console.log(valid);
     if (valid) {
-      form.value.residentId = holderInfo.value;
       if (userid.value) {
-        updateParking(form.value).then((res) => {
+        updateParking(form.value).then(() => {
           ElMessage.success('编辑成功');
           cancelForm();
         });
       } else {
-        addParking(form.value).then((res) => {
+        addParking(form.value).then(() => {
           ElMessage.success('添加成功');
           cancelForm();
         });
@@ -206,4 +277,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>