车辆管理界面搭建

src/views/system/parking/addParking.vue

@@ -9,7 +9,7 @@
             <el-col :span="11">
               <el-form-item label="区域" prop="areaId">
                 <el-select v-model="form.areaId" placeholder="请选择" clearable>
-                  <el-option v-for="dict in com_review" :key="dict.value" :label="dict.label" :value="dict.value" />
+                  <el-option v-for="dict in areaList" :key="dict.value" :label="`${dict.areaName}(${dict.areaCode})`" :value="dict.id" />
                 </el-select>
               </el-form-item>
             </el-col>
@@ -38,8 +38,7 @@
             <el-col :span="11">
               <el-form-item label="车位类型" prop="type">
                 <el-radio-group v-model="form.type">
-                  <el-radio :value="1">男</el-radio>
-                  <el-radio :value="0">女</el-radio>
+                  <el-radio v-for="dict in com_parking_type" :key="dict.value" :value="parseInt(dict.value)">{{ dict.label }}</el-radio>
                 </el-radio-group>
               </el-form-item>
             </el-col>
@@ -54,7 +53,10 @@
           </el-row>
           <el-row>
             <el-col :span="24">
-              <el-form-item label="持有人" prop="remark">持有人 </el-form-item>
+              <el-form-item label="持有人" prop="residentId">
+                <!-- 公共组件 持有人 -->
+                <Holder :isedit="userid === null" @change="handleChange"></Holder>
+              </el-form-item>
             </el-col>
           </el-row>
           <el-row>
@@ -75,46 +77,91 @@
 </template>
 
 <script setup lang="ts">
+import Holder from '@/components/Holder/index.vue';
 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';
+
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { com_review } = toRefs<any>(proxy?.useDict('com_review'));
+const { com_parking_type } = toRefs<any>(proxy?.useDict('com_parking_type'));
 const { com_parking_status } = toRefs<any>(proxy?.useDict('com_parking_status'));
 
 const router = useRouter();
 const route = useRoute();
 
 const formRef = ref();
-const houseformat = ['东', '西', '南', '北'];
 const form = ref({
   id: null,
-  areaId: null,
-  parkingArea: null,
-  parkingFloor: null,
-  type: null,
-  parkingStatus: null,
-  remark: null,
-  parkingCode: '' // 租户姓名
+  areaId: null, // 区域id
+  parkingArea: null, // 车位面积
+  parkingFloor: null, // 车位楼层
+  type: 0, // 车位类型
+  resident_id: null, // 住户id
+  parkingStatus: null, // 车位状态
+  remark: '', // 备注
+  parkingCode: '' // 车位编码
 });
 const rules = ref({
   areaId: [{ required: true, message: '请选择车位区域', trigger: 'blur' }],
   type: [{ required: true, message: '请选择车位类型', trigger: 'blur' }],
   parkingCode: [{ required: true, message: '请输入车位编号', trigger: 'blur' }]
 });
+
 const userid = ref(null);
 
+if (route.query.id) {
+  userid.value = route.query.id;
+  getParking(userid.value).then((res) => {
+    console.log(res);
+    form.value = {
+      ...form.value,
+      ...res.data
+    };
+  });
+}
+// ! 获取区域==================================================================================
+const areaList = ref([]);
+const getAreaList = async () => {
+  const res = await listArea({
+    pageSize: 99999,
+    pageNum: 1
+  });
+  areaList.value = res.rows;
+};
+getAreaList();
+
+const holderInfo = ref();
+function handleChange(pop) {
+  console.log('获得数据');
+  console.log(pop);
+  holderInfo.value = pop;
+}
+
 // !== 提交 =============================================================================
 // 提交
 const submitForm = () => {
   formRef.value?.validate(async (valid: boolean) => {
     if (valid) {
+      form.value.resident_id = holderInfo.value.id;
+      if (userid.value) {
+        updateParking(form.value).then((res) => {
+          ElMessage.success('编辑成功');
+          cancelForm();
+        });
+      } else {
+        addParking(form.value).then((res) => {
+          ElMessage.success('添加成功');
+          cancelForm();
+        });
+      }
     }
   });
 };
 // 推出
 const cancelForm = () => {
   router.push({
-    path: '/carArea/parkingList'
+    path: '/carArea/parking'
   });
 };
 </script>
@@ -145,6 +192,7 @@ const cancelForm = () => {
   .formBody {
     width: 1050px;
     margin: 0 auto;
+
     &:deep(.el-form-item__content, .el-select, .el-input) {
       width: 350px !important;
       margin-right: 10px;