epmet-oper-gov/src/views/modules/visual/basicinfo/houseStatic/houseList.vue

<template>
  <div class="div_people_search">

    <div class="list_box">
      <div class="info_tip">
        <img src="@/assets/img/shuju/title-tip.png"
             alt />
        <div class="tip_title">{{tableTitle}}</div>
      </div>
      <div class="warning-table">
        <div class="table">
          <div class="table-header">
            <div class="td td1">序号</div>
            <div class="td td2">所属小区</div>
            <div class="td td2">所属楼栋</div>
            <div class="td td1">单元号</div>
            <div class="td td1">门牌号</div>
            <div class="td td1">房屋类型</div>
            <div class="td td1">房屋用途</div>
            <div class="td td1">房屋状态</div>
            <div class="td td1">房主姓名</div>
            <div class="td td2">房主电话</div>
            <div class="td td2">证件号</div>
            <div class="td td1">操作</div>

          </div>
          <div v-if="!loading && tableData.length> 0"
               class="table-body">
            <div class="table-body-tr"
                 v-for="(item,index) in tableData"
                 :key='index'>
              <div class="td td1">{{index+1}} </div>
              <div class="td td2">{{item.neighborHoodName}} </div>
              <div class="td td2">{{item.buildingName}} </div>
              <div class="td td1">{{item.unitNum}} </div>
              <!-- <div class="td td1">{{item.buildNum}} </div> -->
              <div class="td td1">{{item.doorName}} </div>
              <div class="td td1">{{item.houseType==='1'?'楼房':item.houseType==='2'?'平方':'别墅'}} </div>
              <div class="td td1">{{item.purpose}} </div>
              <div class="td td1">{{item.rentFlag}} </div>
              <div class="td td1">{{item.ownerName}} </div>
              <div class="td td2">{{item.ownerPhone}} </div>
              <div class="td td2">{{item.ownerIdCard}} </div>
              <div @click="handleToHouse(item)"
                   class="td td1 btn_detail">{{'查看'}} </div>

            </div>
          </div>

          <div class="table-status"
               v-if="loading">
            <screen-loading>加载中</screen-loading>
          </div>

          <div class="table-status"
               v-if="tableData.length == 0 && !loading">
            <div class="no-data">
              <img src="@/assets/img/modules/visual/noData.png"
                   class="no-data-img" />
            </div>
          </div>

        </div>

      </div>
      <div class="pagination">
        <el-pagination hide-on-single-page
                       background
                       layout="prev, pager, next, total"
                       :current-page="pageNo"
                       :page-size="pageSize"
                       :total="total"
                       @current-change="pageCurrentChangeHandle">
        </el-pagination>
      </div>
    </div>

    <house-more v-show="showedMoreInfo"
                :info="info"
                @close="showedMoreInfo = false" />
  </div>

</template>

<script>
import { requestPost } from "@/js/dai/request";

import ScreenLoading from "@/views/modules/visual/cpts/loading";
import houseMore from "./houseMore";

export default {
  name: "people-list",
  components: {
    ScreenLoading, houseMore
  },
  data () {
    return {
      showedMoreInfo: false,
      tableTitle: '房屋列表',
      loading: false,

      tableData: [],

      pageSize: 10,
      pageNo: 1,
      total: 0,
      info: {}
    };
  },
  mounted () {

    this.tableData = []

    this.loadList()

  },
  deactivated () {

  },

  methods: {

    async loadList () {
      this.loading = true
      const url = "/gov/org/house/housestatislistdetail"
      let params = {
        orgId: this.orgId,
        orgType: this.orgType,
        rentType: this.rentType,
        pageSize: this.pageSize,
        pageNo: this.pageNo
      }

      const { data, code, msg } = await requestPost(url, params)
      this.loading = false
      if (code === 0) {
        this.total = data.total
        this.tableData = data.list
      } else {
        this.$message.error(msg)
      }
    },

    //点击查看
    handleToHouse (item) {

      // this.toSubAgency('people', this.tableData[index].userId)
      this.info = { ...item }
      this.showedMoreInfo = true
    },

    pageCurrentChangeHandle (val) {
      this.pageNo = val
      this.loadList()
    },


  },
  destroyed () {
    console.log("我已经离开了！");

  },

  props: {
    orgId: {
      type: String,
      default: "",
    },
    orgType: {
      type: String,
      default: "",
    },
    rentType: {
      type: String,
      default: "",
    },
  },

};
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/basicInfoMain.scss"
  scoped
></style>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/searchPerson.scss"
  scoped
></style>



<style lang="scss" scoped>
.div_search_list {
  .el-input__inner[WarningColor="warning"] {
    border-radius: 8px 0 0 8px;
    height: 53px;
    background-color: #01106800;
    border: 2px solid #0082fb;
    padding-left: 70px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
}
.list_box {
  width: 100%;
  height: 780px;
  margin: 0 auto;
}
.warning-table {
  height: 640px;
}
.pagination {
  padding-right: 0;
  margin-top: 0;
  text-align: right;
}
.g-bread {
  padding: 10px 10px 15px;
  ::v-deep .el-breadcrumb__item {
    font-size: 16px;
    .el-breadcrumb__inner {
      color: #fff;
    }
  }
  ::v-deep .el-breadcrumb__item:first-child {
    .el-breadcrumb__inner {
      color: #a0c3d9;
    }
  }
}
</style>