车位区域管理完成

src/views/system/carArea/addCarArea.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="AddBuildingBox">
+    <PageHeader :title="userid ? '编辑房屋租赁' : '添加房屋租赁'"></PageHeader>
+    <div class="AddBuildingBody">
+      <div class="title">基本信息</div>
+      <div class="addBuildingFormBody">
+        <el-form label-position="right" class="formBody" ref="formRef" :model="form" :rules="rules" label-width="130px">
+          <el-row>
+            <el-col :span="11">
+              <el-form-item label="区域名称" prop="houseId">
+                <el-input v-model.trim="form.areaName" placeholder="请输入住户姓名" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="2"></el-col>
+            <el-col :span="11">
+              <el-form-item label="区域编号" prop="rentalName">
+                <el-input v-model.trim="form.areaCode" placeholder="请输入住户姓名" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="11">
+              <el-form-item label="区域面积" prop="remark">
+                <el-input v-model.number="form.area" placeholder="请输入补充房屋信息">
+                  <template #suffix>㎡</template>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="2"></el-col>
+            <el-col :span="11">
+              <el-form-item label="车位数量" prop="phone">
+                <el-input v-model.number="form.parkingCount" placeholder="请输入手机号码" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="备注" prop="email">
+                <el-input type="textarea" :rows="5" v-model.trim="form.remark" placeholder="请输入" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-form-item style="margin-top: 30px">
+            <el-button type="primary" @click="submitForm">提交</el-button>
+            <el-button @click="cancelForm">返回</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import PageHeader from '@/components/Pageheader/index.vue';
+import { addArea, getArea, updateArea } from '@/api/system/carArea/index';
+
+const router = useRouter();
+const route = useRoute();
+
+const formRef = ref();
+const form = ref({
+  id: null,
+  villageId: null,
+  areaName: null,
+  areaCode: null,
+  area: null,
+  parkingCount: null,
+  remark: null
+});
+const rules = ref({
+  areaName: [{ required: true, message: '请输入区域名称', trigger: 'blur' }],
+  areaCode: [{ required: true, message: '请输入区域编号', trigger: 'blur' }]
+});
+const parkingid = ref(null);
+
+if (route.query.id) {
+  parkingid.value = route.query.id;
+  getArea(parkingid.value).then((res) => {
+    console.log(res);
+    form.value = {
+      ...form.value,
+      ...res.data
+    };
+  });
+}
+
+// !== 提交 =============================================================================
+// 提交
+const submitForm = () => {
+  formRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      if (parkingid.value) {
+        updateArea(form.value).then(() => {
+          ElMessage.success('编辑成功');
+          cancelForm();
+        });
+      } else {
+        addArea(form.value).then(() => {
+          ElMessage.success('添加成功');
+          cancelForm();
+        });
+      }
+    }
+  });
+};
+// 推出
+const cancelForm = () => {
+  router.push({
+    path: '/carArea/carAreaList'
+  });
+};
+</script>
+
+<style scoped lang="scss">
+.AddBuildingBox {
+  padding: 15px;
+  height: 100%;
+  width: 100%;
+}
+.AddBuildingBody {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: white;
+  padding: 15px;
+  .title {
+    height: 40px;
+    line-height: 40px;
+    padding-left: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    color: rgba(16, 16, 16, 1);
+    border-bottom: 1px solid #bbbbbb;
+    margin-bottom: 60px;
+  }
+
+  .formBody {
+    width: 1050px;
+    margin: 0 auto;
+    &:deep(.el-form-item__content, .el-select, .el-input) {
+      width: 350px !important;
+      margin-right: 10px;
+      .el-cascader {
+        width: 100%;
+      }
+    }
+    .el-form-item {
+      margin-bottom: 20px;
+      align-items: center;
+    }
+    .el-button {
+      width: 80px;
+      height: 35px;
+      margin-right: 20px;
+    }
+  }
+}
+</style>