placeholder="请输入关键词" v-model="keyword" maxlength="30" v-on:keyup.enter.native="searcht()" style="width:100%;height:100%;" >
:data="LayerTable" style="width: 100%" stripe ref="multipleTable" tooltip-effect="dark" @select-all="selectAll" @select="handleSelectionChange" v-loading="loading" >
slot-scope="scope" >{{scope.row.userType=='0'?'系统用户':scope.row.userType=='1'?'内部用户':'外部用户'}}
import Pagination from '@/components/Pagination.vue'
export default {
props: ['chosed'],
data () {
return {
// 搜索框绑定的值
keyword: '',
loading: true,
visible: false,
newtable: this.chosed || [],
LayerTable: [],
/* 分页 */
pageInfo: {
// 页码
page: 1,
// 每页显示的条数
limit: 20,
// 总共的条数
total: 100
},
}
},
components: {
Pagination
},
computed: {
num () {
return this.newtable.length
}
},
watch: {
keyword: function (val, oldval) {
console.log('keyword', val)
if (oldval !== val) {
this.searcht()
}
}
},
mounted () {
this.LayerTableMethod()
},
methods: {
layershow2 (boleen, num, item) {
this.$emit('layershow2', boleen, num, item, this.newtable)
this.visible = false
},
// 添加人员弹出框表格
LayerTableMethod () {
const params = {
queryCondition: this.keyword,
page: this.pageInfo.page,
limit: this.pageInfo.limit,
}
this.$http('/page/user/getList', params, 'POST').then(res => {
if (res.data.resultCode === '0000') {
if (this.$refs['myScrollbar']) {
this.$refs['myScrollbar'].wrap.scrollTop = 0
}
this.pageInfo.total = res.data.data.total
this.LayerTable = res.data.data.userList
this.loading = false
this.LayerTable.forEach((item, index) => {
item.visible = false
})
this.$nextTick(function () {
this.selectMemoriedDataFn()
})
}
})
},
// 添加人员搜索框搜索内容接口
searcht () {
const params = {
queryCondition: this.keyword,
page: 1,
limit: this.pageInfo.limit,
}
this.$http('/page/user/getList', params, 'POST').then(res => {
if (res.data.resultCode === '0000') {
this.pageInfo.total = res.data.data.total
this.LayerTable = res.data.data.userList
this.pageInfo.page = 1
this.LayerTable.forEach((item, index) => {
item.visible = false
})
console.log('LayerTable', this.LayerTable)
this.$nextTick(function () {
this.selectMemoriedDataFn()
})
}
})
},
handleSizeChange (val) {
this.pageInfo.limit = val
this.pageInfo.page = 1
this.LayerTableMethod()
},
handleCurrentChange (val) {
this.pageInfo.page = val
this.LayerTableMethod()
},
// 添加人员复选框方法
handleSelectionChange (row, index) {
let flag = true
for (const i of this.newtable) {
if (i.id === index.id) {
flag = false
}
// flag = i.id === index.id ? false : true
}
if (flag) {
this.newtable.push(index)
} else {
this.newtable.splice(this.newtable.findIndex(v => v.id === index.id), 1)
}
},
selectAll (selection) {
if (selection.length) {
selection.forEach(item => {
let flag = true
for (const i of this.newtable) {
console.log(i)
if (item.id === i.id) {
flag = false
}
}
if (flag) {
this.newtable.push(item)
}
})
} else {
if (this.LayerTable.length === this.newtable.length) {
this.newtable = []
return true
}
this.LayerTable.forEach(item => {
this.newtable.splice(this.newtable.findIndex(v => v.id === item.id), 1)
})
}
},
toggleSelection (index, flag) {
this.$refs.multipleTable.toggleRowSelection(this.LayerTable[index], flag)
},
selectMemoriedDataFn () {
this.newtable.forEach(row => {
this.LayerTable.forEach((item, index) => {
if (row.id === item.id) {
this.toggleSelection(index, true)
}
})
})
},
// 已选人数删除
smalldeleteditem (index, rowdata) {
this.newtable.splice(index, 1)
this.$nextTick(function () {
this.LayerTable.forEach((item, ind) => {
if (rowdata.id === item.id) {
this.toggleSelection(ind, false)
}
})
})
}
}
}
.Check_Box_Table {
width: 100%;
height: 100%;
}
.tableheader {
width: 100%;
height: 48px;
border-bottom: 2px solid #f7f8fc;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 26px;
font-size: 14px;
color: #414656;
}
.tablemain {
width: calc(100% - 40px);
height: 400px;
margin: 20px 20px 0px 20px;
}
/*添加人员样式 */
.tablefooter {
width: 100%;
height: calc(100% - 470px);
border-radius: 6px;
}
.tablefootertop {
width: 100%;
height: 73px;
display: flex;
border-bottom: 2px solid #f7f8fc;
justify-content: space-between;
padding: 0px 10px 0px 44px;
}
.selectedperson {
width: 761px;
height: 246px;
background: #ffffff;
padding-top: 11px;
padding-left: 18px;
}
.selectedpersonTable {
width: calc(100% - 18px);
height: 200px;
margin-top: 11px;
margin-right: 18px;
}
.pagination {
padding-right: 5px;
}