epmet-oper-gov/src/views/modules/plugins/power/kernelhouseholdForm.vue

<template>
  <div>
    <div class="dialog-h-content scroll-h">
      <div>
        <div class="div_search">
          <div class="resi-cell">
            <div class="resi-cell-label">房屋</div>
            <div class="resi-cell-value">
              <el-input v-model="keyword"
                        style="width:350px"
                        class="resi-cell-input"
                        size="small"
                        clearable
                        placeholder="请输入“小区名称，楼号，如：亿联小区，1号楼">
              </el-input>
            </div>
          </div>
          <el-button style="margin-left:10px"
                    class="diy-button--search"
                    size="small"
                    @click="handleSearch">查询</el-button>
        </div>
        <div class="div_table">
          <el-table ref="ref_table"
                    :data="tableData"
                    border
                    :height="tableHeight"
                    v-loading="tableLoading"
                    :header-cell-style="{background:'#2195FE',color:'#FFFFFF'}"
                    style="width: 100%"
                    @selection-change="selectionChange">
            <el-table-column type="selection"
                            width="55">
            </el-table-column>
            <el-table-column prop="houseName"
                            label="房屋名称">
            </el-table-column>
            <el-table-column prop="neighborHoodName"
                            label="所属小区">
            </el-table-column>
            <el-table-column prop="buildingName"
                            label="所属楼栋">
            </el-table-column>
            <el-table-column prop="ownerName"
                            label="房主姓名">
            </el-table-column>
            <el-table-column prop="ownerPhone"
                            label="房主电话">
            </el-table-column>
          </el-table>
          <div>
            <el-pagination @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page.sync="pageNo"
                          :page-sizes="[20, 50, 100, 200]"
                          :page-size="pageSize"
                          layout="sizes, prev, pager, next, total"
                          :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <div class="div_btn">
      <el-button size="small"
                 @click="handleCancle">取 消</el-button>
      <el-button size="small"
                 type="primary"
                 :disabled="btnDisable"
                 @click="handleComfirm">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { requestPost } from "@/js/dai/request";
export default {
  data () {
    return {
      btnDisable: false,
      keyword: '',
      // 列表相关
      tableData: [],
      tableLoading: false,
      selection: [],
      total: 0,
      pageSize: 20,
      pageNo: 0,
    }
  },
  props: {
    axisStructId: { // 动力主轴id
      type: String,
      default: ''
    }
  },
  computed: {
    tableHeight () {
      return this.$store.state.inIframe ? this.clientHeight - 410 + this.iframeHeight : this.clientHeight - 410
    },
    ...mapGetters(['clientHeight', 'iframeHeight'])
  },
  components: {},
  // mounted () {
  //   this.tableLoading = true
  //   this.loadTable()
  // },
  methods: {
    // 搜索
    handleSearch() {
      this.tableLoading = true
      this.loadTable()
    },
    selectionChange (selection) {
      this.selection = []
      selection.forEach(element => {
        this.selection.push(element.houseId)
      });
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.pageNo = 1
      this.loadTable()
    },
    handleCurrentChange (val) {
      this.pageNo = val
      this.loadTable()
    },
    // 确定
    async handleComfirm () {
      if (this.selection.length === 0 || !this.selection) {
          return this.$message.error('请选择房屋')
      }
      const url = "/pli/power/kernelHousehold/bind";
      let params = {
          axisStructId: this.axisStructId,
          houseIdList: this.selection
      }
      const { data, code, msg } = await requestPost(url, params);
      this.tableLoading = false
      if (code === 0) {
        this.$refs.ref_table.clearSelection();
        this.$emit('dialogOk')
      }
    },
    // 取消
    handleCancle () {
      this.$refs.ref_table.clearSelection();
      this.$emit('dialogCancle')
    },
    // 查询列表
    async loadTable () {
      const url = "/gov/org/house/search";
      let params = {
          keyword: this.keyword,
          pageSize: this.pageSize,
          pageNo: this.pageNo
      }
      const { data, code, msg } = await requestPost(url, params);
      this.tableLoading = false
      if (code === 0) {
        this.total = data.total || 0;
        this.tableData = data.list ? data.list.map((item) => { return item }) : []
      }
    }
  },
}
</script>
<style lang="scss" scoped >
@import "@/assets/scss/modules/visual/communityManage.scss";
</style>
<style  lang="scss" scoped>
.div_btn{
      display: flex;
      align-items: center;
      justify-content: center;
}
</style>