yos_web/src/template/multiplePeople/index.vue

<template>
  <div>
    <el-dialog
      title="添加人员"
      :visible.sync="drawer"
      append-to-body
      direction="rtl"
      width="60%">
      <div class="flex-align-center flex-between " style="margin-top:-10px;margin-bottom: 10px">
        <div class="flex-align-center">
          <el-input size="small"  suffix-icon="el-icon-search" v-model="param.content.where.condition" placeholder="人员名称" @keyup.enter.native="listData(param.content.pageNumber = 1)" @clear="listData(param.content.pageNumber = 1)" clearable></el-input>&nbsp;
        </div>
        <el-button type="primary" size="mini" @click="onSbmit" :disabled="selectRowId.length == 0">批量添加</el-button>
      </div>
      <div class="produtMag-panel" style="margin-top: 10px">
        <el-table
            @select="selectionChange"
            @select-all="selectAll"
            border
            ref="tables"
            :data="list"
            style="width: 100%">
          <el-table-column
              type="selection"
              width="42"
              fixed>
          </el-table-column>
          <el-table-column
              prop="accountno"
              label="账号">
          </el-table-column>
          <el-table-column
              prop="name"
              label="账号名称">
          </el-table-column>
          <el-table-column
              prop="phonenumber"
              label="联系电话">
          </el-table-column>
          <el-table-column
              prop="usertypename"
              label="用户类型"
              width="160">
          </el-table-column>
        </el-table>
        <div>
          <div style="float: left">已选:{{selectRowId.length}}个人员</div>
          <div style="margin-top:16px;text-align:right">
            <el-pagination
                background
                small
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="param.content.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </el-dialog>
    <slot name="input"></slot>
  </div>
</template>

<script>
export default {
  props:['data','idName'],
  components:{
  },
  data () {
    return {
      drawer:false,
      param:{
        "id": 20221031141102,
        "content": {
          "pageSize":20,
          "pageNumber":1,
          "where": {
            "condition": "",
          }
        }
      },
      list:[],
      currentPage:0,
      total:0,
      selectRowId:[],
      selectAllData:[]
    }
  },
  watch: {
    list (val) {
      this.list.forEach((row) => {
        this.selectRowId.forEach(item => {
          if (row.userid == item) {
            this.$nextTick(() => {
              this.$refs["tables"].toggleRowSelection(row, true);
            })
          }
        })
      });    
    },
  },
  methods:{
    async listData () {
      this.param.content.sa_salesforecastbillid = this.$route.query.id
      const res = await this.$api.requested(this.param)
      console.log(res.data,"人员列表")
      this.list = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
    },
    selectionChange (arrs,arr) {
      let index = this.selectRowId.findIndex(item => item == arr.userid)
      if (index != -1) {
        this.selectAllData.splice(index,1)
        this.selectRowId.splice(index,1)
      } else {
        this.selectRowId.push(arr.userid)
        this.selectAllData.push(arr)
      }
    },
    normalSetId () {
      this.listData()
      this.selectAllData = this.data.userids.map(item => {
        return {
          userid: item,
          name: this.data.usermsg[item]
        }
      })
      console.log(this.selectAllData);
      
      this.selectRowId = this.data.userids
    },
    selectAll (val) {
      if (val.length == 0) {
        this.data.forEach((item,index) => {
          this.selectAllData.splice(item,1)
          this.selectRowId.splice(index,1)
        })
      } else {
        val.forEach(item => {
          let res = this.selectAllData.every(item2 => item[this.idName] != item2[this.idName])
          console.log(res);
          res ? this.selectAllData.push(item) : ''
        })
      }
    },
    onSbmit () {
      this.$emit('onResult',this.selectAllData)
      this.$refs.tables.clearSelection()
      console.log(this.$refs.tables.clearSelection);
      this.selectAllData = []
      this.selectRowId = []
      this.drawer = false
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.listData()
    },
  },
  mounted () {
  }
}

</script>
<style>
</style>