物业之前，新工作台

src/views/system/HouseFacilities/addHouseFacilities.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="AddBuildingBox">
+    <PageHeader :title="userid ? '编辑房屋设施' : '添加房屋设施'"></PageHeader>
+    <div class="AddBuildingBody">
+      <div class="title">基本信息</div>
+      <div class="addBuildingFormBody">
+        <el-form class="formBody" label-position="right" ref="formRef" :model="form" :rules="rules" label-width="130px">
+          <el-form-item label="房屋设施名称" prop="name">
+            <el-input v-model.trim="form.name" placeholder="请输入房屋设施名称" />
+          </el-form-item>
+          <el-form-item label="房屋设置状态" prop="status">
+            <el-radio-group v-model="form.status">
+              <el-radio v-for="dict in com_repair_project_status" :value="dict.value" :key="dict.value" :label="dict.label"></el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <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 { addHouseFacilities, getHouseFacilities, updateHouseFacilities } from '@/api/system/HouseFacilities';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { com_repair_project_status } = toRefs<any>(proxy?.useDict('com_repair_project_status'));
+
+const router = useRouter();
+const route = useRoute();
+
+const formRef = ref();
+const form = ref({
+  id: null,
+  status: '0', // 状态 0启用 1停用
+  name: null // 设施名称
+});
+const rules = ref({
+  name: [{ required: true, message: '请输入设施名称', trigger: 'blur' }],
+  status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
+});
+const userid = ref(null);
+
+if (route.query.id) {
+  userid.value = route.query.id;
+  getHouseFacilities(userid.value).then((res) => {
+    form.value = {
+      ...form.value,
+      ...res.data
+    };
+  });
+}
+// !== 提交 =============================================================================
+// 提交
+const submitForm = () => {
+  formRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      if (userid.value) {
+        updateHouseFacilities(form.value).then((res) => {
+          ElMessage.success('编辑成功');
+          cancelForm();
+        });
+      } else {
+        addHouseFacilities(form.value).then((res) => {
+          ElMessage.success('添加成功');
+
+          cancelForm();
+        });
+      }
+    }
+  });
+};
+// 推出
+const cancelForm = () => {
+  router.push({
+    path: '/system/HouseFacilities'
+  });
+};
+</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: 500px;
+    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>