ShibeiWorkPlatform_Frontend/src/views/modules/plugins/power/kernelhouseholdAddMember.vue

<template>
  <div>
    <div class="dialog-h-content scroll-h">
      <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%"
                    highlight-current-row
                    @selection-change="selectionChange">
            <el-table-column type="selection"
                            width="55">
            </el-table-column>
            <el-table-column prop="name"
                            label="姓名">
            </el-table-column>
            <el-table-column prop="mobile"
                            label="联系方式">
            </el-table-column>
            <el-table-column prop="idCard"
                            label="身份证号">
            </el-table-column>
          </el-table>
        </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,
      // 列表相关
      tableData: [],
      tableLoading: false,
      selection: [],
      houseId: '',
      ownerName: ''
    }
  },
  props: {
  },
  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: {
    initForm (id, ownerName) {
      this.houseId = id
      this.ownerName = ownerName
      this.tableLoading = true
      this.loadTable()
    },
    selectionChange (selection) {
      // console.log(selection)
      this.selection = []
      selection.forEach(element => {
        this.selection.push({
          kernelMemberId: element.id,
          kernelMemberName: element.name
        })
      });
    },


    // 确定
    async handleComfirm () {
      if (this.selection.length === 0 || !this.selection) {
          return this.$message.error('请选择党员')
      }
      const url = "/pli/power/kernelMember/bind";
      let params = {
          houseId: this.houseId,
          ownerName: this.ownerName,
          kernelMemberList: this.selection
      }
      const { data, code, msg } = await requestPost(url, params);
      this.tableLoading = false
      if (code === 0) {
        this.$refs.ref_table.clearSelection();
        this.$emit('addMemberOk')
      }
    },
    // 取消
    handleCancle () {
      this.$refs.ref_table.clearSelection();
      this.$emit('addMemberCancle')
    },
    // 查询列表
    async loadTable () {
      const url = `/epmetuser/icresiuser/listhomeuserbrief/${this.houseId}`
      const { data, code, msg } = await requestPost(url)
      this.tableLoading = false
      if (code === 0) {
        this.tableData = data ? data.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>