表格跨页勾选

<template>
  <div class="department">
    <bfe-dialog
      title="专家列表"
      :visible.sync="dialogVisible"
      size="small"
      @open="handleOpen"
      :before-close="handleClose"
      >
      <div class="row">
        <div class="col-xs-5" style="padding-right:15px;">
            <el-tree
              v-if="openedStatus"
              ref="orgTree"
              style="height: 600px;overflow:auto;"
              :props="defaultProps"
              node-key="orgRefno"
              :default-expanded-keys="defaultExpandedKeys"
              lazy
              :load="loadNode"
              :tooltip-options="tooltipOptions"
              tooltip
              @node-click="handleNodeClick"
              @getCheckedNodes="getCheckedNodes">
            </el-tree>
        </div>
        <div class="col-xs-7">
          <div class='form-dialog'>
            <div class="col-xs-10" style="padding-right:15px">
              <bfe-input size="small"  placeholder="请输入人员姓名" v-model="empName"></bfe-input>
            </div>
            <bfe-button type="primary" size="small" @click="getPagedListEmp">查询</bfe-button>
          </div>
          <!-- <my-table
            v-if="openedStatus"
            :data="tableData"
            @handlecurrentChange = "handlecurrenRow"
          ></my-table> -->
          <bfe-table
            :data="tableData.tableData"
            style="width: 100%"
            @select="selectOne"
            @select-all="selectAll"
            ref="table"
          >
            <bfe-table-column type="selection" width="120"></bfe-table-column>
            <bfe-table-column prop="empCode" label="人员编号" width="180"></bfe-table-column>
            <bfe-table-column prop="empName" label="人员姓名" min-width="180"></bfe-table-column>
            <bfe-table-column prop="internalInstName" label="部门" min-width="180"></bfe-table-column>
          </bfe-table>
          <!--分页-->
          <div class="page-block">
            <my-page
              :currentPage="currentPage"
              :pageSize="pageSize"
              :total="total"
              @handleSizeChange="handleSizeChange"
              @handleCurrentChange="handleCurrentChange"
            ></my-page>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <bfe-button @click="handleClose">取 消</bfe-button>
        <bfe-button type="primary" @click="confirm">确 定</bfe-button>
      </span>
    </bfe-dialog>
  </div>
</template>
<script>
import ViewMixin from "@/mixins/view-mixin.js";
import { getTree, getPagedListEmp,getBasicInfo,getPagedListEmpdetail } from "@/api/dept/index"
import {
 insertMember,
} from "@/api/supplier-change/supplier-changes.js";
export default {
  name: 'Department',
  mixins: [ViewMixin()],
  props: {
      dataObject:{
      type: Object,
      default:()=>{}
    }
  },
  data() {
    return {
      defaultExpandedKeys:[],
      nowTableData:[],
      GoXuanList:[],
      openedStatus: false,
      dialogVisible: false,
      selectedNode: '',//默认选择节点
      defaultProps: {
        orgRefno: 'orgRefno',
        children: 'subrOrgInfo',
        label: 'orgNames'
      },
      tooltipOptions: {
        effect: 'light',
        "open-delay": 500
      },
      currentPage: 1,
      pageSize: 10,
      total: 0,
      pageCount: 0,
      tableData: {
        maxHeight: 480,
        startTypeShow: '',
        startType: 'index',
        tableData: [],
        columnData: [{ type: 'text', label: '人员编号', prop: 'empCode', minWidth: 120},
          { type: 'text', label: '人员姓名', prop: 'empName', minWidth: 120},
          { type: 'text', label: '部门', prop: 'internalInstName', minWidth: 120},

        ]
      },
      rowIndex: -1,
      rowData: {},
      clickedData: {},
      empName: '',
      currenRow: {},
      callbackData: null
    }
  },
  computed: {

  },
  methods: {
    handleOpen() {
      this.openedStatus= true
      this.defaultExpandedKeys=[]
    },
    handleClose(done) {
      this.dialogVisible = false
      this.openedStatus = false
      this.defaultExpandedKeys=[]
      this.tableData.tableData=[]
      this.GoXuanList=[]
      this.currentPage=1
      this.$refs.table.clearSelection()
      this.$forceUpdate()
    },
    loadNode(node, resolve) {
      console.log(node,resolve)
      if(node.level === 0 ) {
        this.loadTreeData(resolve)
      } else if(node.level>=1){
        this.loadChildTreeData(node.data.orgRefno, resolve)
      }
    },
    loadTreeData(resolve) {
      getTree({pubParam: this.$p2Data.p2Info.instCode}).then(res => {
        let data = [
          {
            orgRefno: res.suprOrgInfo.orgRefno,
            orgName: res.suprOrgInfo.orgName,
            orgNames:res.suprOrgInfo.orgRefno+'   '+ res.suprOrgInfo.orgName,
            subrOrgInfo: res.subOrgInfo
          }
        ]
        resolve(data)
      })
    },
    loadChildTreeData(orgRefno,resolve) {
      getTree({pubParam:orgRefno}).then(res => {
        res.subOrgInfo&&res.subOrgInfo.forEach(v=>{
          v.orgNames=v.orgRefno+'   '+v.orgName
        })
        let subOrgInfo = res.subOrgInfo || []
        if(this.clickedData.orgRefno){
          this.getPagedListEmp()
        }
        resolve(subOrgInfo)
      })
    },
    getCheckedNodes(nodes) {
      console.log(nodes)
    },
    // 点击节点回调函数
    handleNodeClick(data) {
      this.clickedData = data
      this.empName=''
      // this.getPagedListEmp()
    },
    // 监听当前页
     handleCurrentChange(val){
      this.currentPage = val
      this.getPagedListEmp()

    },
    // 监听页Size
    handleSizeChange(val) {
      this.pageSize = val
      this.getPagedListEmp()
    },
    getPagedListEmp() {
      let params = {
        empName: this.empName,
        orgRefno: this.clickedData.orgRefno || '',
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }
      getPagedListEmp(params).then(res => {
        let list = res.list || []
        list.forEach(v => {
          v.internalInstCode = this.clickedData.orgRefno
          v.internalInstName = this.clickedData.orgName
        })
        this.tableData.tableData = list
        this.nowTableData=list
        this.total = res.size
        this.getNowTableData()
      })
    },
    handlecurrenRow(val) {
      this.currenRow = val

    },
    //切换页面
    getNowTableData(){
     const arr=this.nowTableData.filter(item=>this.GoXuanList.some(it=>it.empCode==item.empCode))
     this.$nextTick(()=>{
       arr.forEach(item=>{
         this.$refs.table.toggleRowSelection(item,true)
       })
     })
    },
    //单个勾选
    selectOne(selection,row){
      let checkedTrue=selection.length&&selection.indexOf(row)!==-1
      //false 取消勾选
      if(!checkedTrue){
        this.GoXuanList=this.GoXuanList.filter(item=> item.empCode!=row.empCode)
      }
      //true 勾选了
      if(checkedTrue){
        this.GoXuanList.push(row)
      }
    },
    //全选或者取消全选
    selectAll(selection){
      if(selection.length>0){
        this.GoXuanList.push(...selection)
      }else{
        this.GoXuanList=this.GoXuanList.filter(item=>this.tableData.tableData.every(it=>it.empCode!=item.empCode))
      }
    },

    // 根据员工编号获取员工基本信息
    getBasicInfo() {
      getBasicInfo({pubParam: this.currenRow.empCode || ''}).then(res => {
        this.callbackData = res
      })
    },
    confirm() {
        // this.$emit('selectExpert')
      if(this.GoXuanList.length){
        let arr=[]
        this.GoXuanList.forEach((item,i)=>{
          let obj={}
          obj.fkProject=this.dataObject.projectId
          obj.fkUserCode=item.empCode
          arr.push(obj)
        })
        insertMember({pubList:arr}).then(res => {
          this.$message.success('新增成功')
          this.$emit('selectExpert')
          this.handleClose()
        }).catch(err => console.log(err))
      } else {
        this.$message.error('未选择数据，请先选中数据！')
      }
    }
  }
}
</script>

<style scoped>
.form-dialog{
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
::v-deep .bfe-tree-node .bfe-tree-node__children{
  overflow:visible;
}
</style>