ShibeiWorkPlatform_Frontend/src/views/modules/shequ/cpts/fangwu-info.vue

<template>
  <div>
    <div>
      <el-form
        ref="ref_form"
        :inline="false"
        :model="dataForm"
        :disabled="formType === 'detail'"
        class="form"
      >
        <el-form-item
          label="所属小区"
          label-width="150px"
          style="display: block"
        >
          <span>{{ dataForm.neighborHoodName }}</span>
        </el-form-item>

        <el-form-item
          label="所属楼栋"
          label-width="150px"
          style="display: block"
        >
          <span>{{ dataForm.buildingName }}</span>
        </el-form-item>

        <el-form-item
          label="单元号"
          prop="buildingUnitId"
          label-width="150px"
          style="display: block"
        >
          <span>{{ dataForm.unitNum }}</span>
        </el-form-item>

        <el-form-item
          label="门牌号"
          prop="doorName"
          label-width="150px"
          style="display: block"
        >
          <span>{{ dataForm.doorName }}</span>
        </el-form-item>

        <el-form-item
          label="房屋类型"
          prop="houseType"
          label-width="150px"
          style="display: block"
        >
          <span>{{ dataForm.houseType }}</span>
        </el-form-item>

        <el-form-item
          label="房屋用途"
          prop="purpose"
          label-width="150px"
          style="display: block"
        >
          <span>{{ dataForm.purpose }}</span>
        </el-form-item>

        <el-form-item
          label="是否出租"
          prop="rentFlag"
          label-width="150px"
          style="display: block"
        >
          <span>{{ dataForm.rentFlag }}</span>
        </el-form-item>

        <el-form-item
          label="房主姓名"
          prop="ownerName"
          label-width="150px"
          style="display: block"
        >
          <span>{{ dataForm.ownerName }}</span>
        </el-form-item>
        <el-form-item
          label="房主电话"
          prop="ownerPhone"
          label-width="150px"
          style="display: block"
        >
          <span>{{ dataForm.ownerPhone }}</span>
        </el-form-item>
        <el-form-item
          label="房主身份证"
          prop="ownerIdCard"
          label-width="150px"
          style="display: block"
        >
          <span>{{ dataForm.ownerIdCard }}</span>
        </el-form-item>
      </el-form>
    </div>
    <div class="div_btn">
      <el-button @click="handleCancle">关闭</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { Loading } from "element-ui"; // 引入Loading服务
import { requestPost } from "@/js/dai/request";

let loading; // 加载动画
export default {
  data() {
    return {
      formType: "detail", //表单操作类型 add新增，edit编辑，detail详情
      dataForm: {
        neighborHoodId: "", // 所属小区ID
        buildingId: "", //所属楼栋ID
        buildingUnitId: "", //所属单元ID
        doorName: "", //门牌号
        houseType: "", //房屋类型【楼房，平房，别墅】
        purpose: "", //房屋用途【住宅，商业，办公，工业，仓储，商住混用，其他】
        rentFlag: 1, //是否出租【是：1，否：0】
        ownerPhone: "", //房主电话
        ownerName: "", //房主名字
        ownerIdCard: "", //房主身份证
      },
    };
  },
  components: {},
  mounted() {},

  methods: {
    async initForm(type, row) {
      this.$refs.ref_form.resetFields();

      this.formType = type;
      if (row) {
        this.dataForm = JSON.parse(JSON.stringify(row));
      }
    },

    handleCancle() {
      this.$emit("dialogCancle");
      this.resetData();
    },

    resetData() {
      this.dataForm = {
        neighborHoodId: "", // 所属小区ID
        buildingId: "", //所属楼栋ID
        buildingUnitId: "", //所属单元ID
        doorName: "", //门牌号
        houseType: "1", //房屋类型【楼房，平房，别墅】
        purpose: "1", //房屋用途【住宅，商业，办公，工业，仓储，商住混用，其他】
        rentFlag: 1, //是否出租【是：1，否：0】
        ownerPhone: "", //房主电话
        ownerName: "", //房主名字
        ownerIdCard: "", //房主身份证
      };
    },
    // 开启加载动画
    startLoading() {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: "正在加载……", // 加载中需要显示的文字
        background: "rgba(0,0,0,.7)", // 背景颜色
      });
    },
    // 结束加载动画
    endLoading() {
      // clearTimeout(timer);
      if (loading) {
        loading.close();
      }
    },
  },
  computed: {},
  props: {},
};
</script>
<style lang="scss" scoped>
.item_width_1 {
  width: 500px;
}
.item_width_2 {
  width: 400px;
}
.item_width_3 {
  margin-left: 10px;
  width: 200px;
}

.div_btn {
  display: flex;
  justify-content: flex-end;
}
.el-tabs {
  margin: 0 20px;
}
.el-upload__tip {
  color: rgb(155, 155, 155);
  margin: 0;
}
.form {
  margin-top: 30px;
  height: 60vh;
  overflow-y: auto;
}
</style>
<style>
.el-dialog__body {
  padding: 0 10px 20px !important;
}
</style>