sunProduct/src/views/system/house/AddBuilding.vue

<template>
  <div class="AddBuildingBox">
    <PageHeader title="新建楼栋">
      <template #operate>
        <div class="BackBox" @click="goBack">返回</div>
      </template>
    </PageHeader>
    <div class="AddBuildingBody">
      <div class="title">基本信息</div>
      <div class="addBuildingFormBody">
        <el-form class="formBody" ref="formRef" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="楼栋名称" prop="buildingName">
            <el-input v-model.trim="form.buildingName" placeholder="请输入楼栋名称" />
          </el-form-item>
          <el-form-item label="楼栋类型" prop="buildingUse">
            <el-select v-model="form.buildingUse" placeholder="选择楼栋类型">
              <el-option v-for="(item, index) in com_build_use" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="楼栋朝向" prop="buildToward">
            <el-input v-model.trim="form.buildToward" placeholder="请输入楼栋朝向" />
          </el-form-item>
          <el-form-item label="楼高(m)" prop="buildTail">
            <el-input v-model.trim="form.buildTall" placeholder="请输入楼高(m)" />
          </el-form-item>
          <el-form-item label="楼栋结构" prop="buildStructure">
            <el-input v-model.trim="form.buildStructure" placeholder="请输入楼栋结构" />
          </el-form-item>
          <el-form-item label="单元数" prop="unitCount">
            <el-input-number :min="1" v-model.trim="form.unitCount" placeholder="单元数" />
          </el-form-item>
          <el-form-item label="楼层" prop="floorCount">
            <el-input-number :min="1" v-model.trim="form.floorCount" placeholder="楼层数" />
          </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 { addBuildingApi, editBuildingApi } from '@/api/system/house';
import { useRouter } from 'vue-router';
import { useHouseStore } from '@/store/modules/house';

const houseStore = useHouseStore();
const { currentVilageInfo } = storeToRefs(houseStore);

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_build_use } = toRefs<any>(proxy?.useDict('com_build_use'));

const route = useRoute();
const router = useRouter();
const formRef = ref();
const form = ref({
  buildingName: '',
  buildToward: '',
  buildTall: '',
  buildingUse: '0',
  buildStructure: '',
  unitCount: null,
  floorCount: null
});
const rules = ref({
  buildingName: [{ required: true, message: '请输入楼栋名称', trigger: 'blur' }],
  buildingUse: [{ required: true, message: '请选择楼栋类型', trigger: 'blur' }],
  unitCount: [{ required: true, message: '请输入单元数', trigger: 'blur' }],
  floorCount: [{ required: true, message: '请输入楼层数', trigger: 'blur' }]
});
// 判断新增还是编辑
const buildingId = route.query.buildingId as string;
if (buildingId) {
  getBuildingById();
} else {
}

/** 编辑楼栋 */
function getBuildingById() {
  houseStore.currentBuildingInfoList.forEach((item) => {
    if (item.id == buildingId) {
      form.value.buildingName = item.buildingName;
      form.value.buildToward = item.buildToward;
      form.value.buildingUse = item.buildingUse;
      form.value.buildTall = item.buildTall;
      form.value.buildStructure = item.buildStructure;
      form.value.unitCount = item.unitCount;
      form.value.floorCount = item.floorCount;
    }
  });
}
const submitForm = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      if (buildingId) {
        editBuildingApi({
          ...form.value,
          villageId: currentVilageInfo.value.villageId,
          id: buildingId
        })
          .then((res) => {
            ElMessage.success('修改成功');
            houseStore.updateHouse();
            cancelForm();
          })
          .catch((err) => {
            ElMessage.error('修改失败');
          });
      } else {
        addBuildingApi({
          ...form.value,
          villageId: currentVilageInfo.value.villageId
        })
          .then((res) => {
            ElMessage.success('添加成功');
            houseStore.updateHouse();
            cancelForm();
          })
          .catch((err) => {
            ElMessage.error('添加失败');
          });
      }
    }
  });
};
const cancelForm = () => {
  formRef.value?.resetFields();
  goBack();
};

function goBack() {
  router.push({
    path: '/house/houselist'
  });
}
</script>

<style scoped lang="scss">
.BackBox {
  width: 100px;
  height: 45px;
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
  color: rgba(16, 16, 16, 1);
  border: 1px solid rgba(187, 187, 187, 1);
  cursor: pointer;
  font-size: 14px;
  &:hover {
    box-shadow: 0px 2px 6px 0px rgba(26, 117, 255, 0.1);
  }
}
.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;
  }
  .addBuildingFormBody {
    .formBody {
      width: 550px;
      margin: 0 auto;
      .el-form-item {
        margin-bottom: 20px;
      }
      .el-button {
        width: 80px;
        height: 35px;
        margin-right: 20px;
      }
    }
    padding-bottom: 40px;
  }
}
</style>