父:
<!-- 选择员工 -->
<employee-dialog
:showDialog.sync="showDialog"
:employees="employees"
@submit="submitDialog"
></employee-dialog>
submitDialog(data){
this.employees = data
},
子弹框:
<el-dialog
:visible.sync="open"
title="员工列表"
width="50%"
>
<div class="myDialogBox gy-table-multiple gy-table-sort">
<el-table
ref="multipleTable"
v-loading="loading"
:data="tableData"
border
class="mt20"
:row-key="getRowKeys"
tooltip-effect="dark"
:row-style="rowClass"
@select="handleSelectionChange"
>
<el-table-column type="selection" align="center" :reserve-selection="true" />
<el-table-column label="序号" width="60" align="center">
<template slot-scope="scope">
{{ (pageIndex - 1) * pageSize + +scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="nickName" label="姓名" min-width="100" />
<el-table-column prop="phone" label="联系方式" min-width="120" />
</el-table>
<el-pagination
v-if="total > 0"
background
layout="total, sizes, prev, pager, next"
:page-sizes="pageSizes"
:page-size.sync="pageSize"
:current-page.sync="pageIndex"
:total="total"
class="pagination tr mt10 mb20"
@size-change="loadData"
@current-change="loadData"
/>
<div class="tc">
<el-button @click="open=!open">取消</el-button>
<el-button type="primary" @click="submit()">确认</el-button>
</div>
</div>
</el-dialog>
props:{
showDialog: {
type: Boolean,
default: false
},
employees: {
type: Array,
default: ()=>[]
},
},
total: 0,
pageIndex: 1,
pageSize: 5,
pageSizes: [5, 10],
loading: true,
tableData: [],
selectRow: [], // 选中行
selectData: [], // 选中数据
allSelect: false, // 列表全选与否
computed: {
...mapGetters(['userId', 'tenantId', 'housingEstate_id', 'privileges', 'isSuper']),
open: {
get() {
return this.showDialog
},
set(val) {
if(val){
this.loadData()
}
this.$emit('update:showDialog', val)
}
},
},
watch: {
open(val){
if(val){
this.selectData = []
this.loadData()
}
},
// selectData(data) {
// this.selectRow = []
// if (data.length > 0) {
// data.forEach((item) => {
// this.selectRow.push(this.tableData.indexOf(item))
// })
// }
// }
},
// 方法
// 加载员工列表
loadData() {
this.loading = true
const { pageIndex, pageSize } = this
UsersGetListByPage({
pageIndex,
pageSize,
filter_fieldone: this.tenantId,
...this.schData
}).then(res => {
this.tableData = res.response.data
this.total = res.response.dataCount
if(this.employees.length>0){
this.selectData = this.employees
const selectDataId = this.employees.map(obj => obj.id)
this.$refs.multipleTable.clearSelection();
this.$nextTick(()=>{
let list = [...this.employees,...this.selectData]
this.selectData= [...new Set(list.map(item=>JSON.stringify(item)))].map(i=>JSON.parse(i))
this.tableData.forEach(row => {
if(selectDataId.includes(row.id)){
this.$refs.multipleTable.toggleRowSelection(row);
this.loading = false
}
});
})
}else{
this.loading = false
if(this.selectData.length==0) return this.$refs.multipleTable.clearSelection();
}
})
},
// 批量选取
handleSelectionChange(row, val) {
const v = row.find(v => val.id == v.id)
if (v) {
this.selectData.push(v)
} else {
let selectDataId = this.selectData.map(obj => obj.id)
const obj = selectDataId.indexOf(val.id)
if (obj != -1) {
this.selectData.splice(obj, 1)
}
}
},
rowClass({ rowIndex }) {
if (this.selectRow.includes(rowIndex)) {
return { 'background': '#fafafa' }
}
},
getRowKeys(row) {
return row.id
},
submit() {
if(this.selectData.length===0) return this.$message.error('请选择指派员工')
this.$emit('update:showDialog', false)
this.$emit('submit', this.selectData)
},