<template>
<!-- 添加成员公共组件 -->
<div class="Check_Box_Table">
<div class="tableheader">
<div style="font-weight:bold">添加成员</div>
<div style="display:flex;align-items:center">
<div style="width:280px;height:32px;margin-right:20px">
<el-input
placeholder="请输入关键词"
v-model="keyword"
maxlength="30"
v-on:keyup.enter.native="searcht()"
style="width:100%;height:100%;"
>
<i slot="suffix" class="el-input__icon el-icon-search" @click="searcht()"></i>
</el-input>
</div>
<div style="width:22px;height:22px;cursor:pointer" @click="layershow2(false,false)">
<img src="/static/images/close.png" style="width:100%;height:100%">
</div>
</div>
</div>
<div class="tablemain">
<el-scrollbar style="height:100%;width: 100%" ref="myScrollbar">
<el-table
:data="LayerTable"
style="width: 100%"
stripe
ref="multipleTable"
tooltip-effect="dark"
@select-all="selectAll"
@select="handleSelectionChange"
v-loading="loading"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" width="70" label="序号"></el-table-column>
<el-table-column prop="userName" label="姓名" show-overflow-tooltip></el-table-column>
<el-table-column prop="userAccount" label="账号 " show-overflow-tooltip></el-table-column>
<el-table-column prop="phoneNo" label="手机号 " show-overflow-tooltip></el-table-column>
<el-table-column prop="email" label="邮箱 " show-overflow-tooltip></el-table-column>
<el-table-column label="所属公司类型" show-overflow-tooltip width="130">
<template
slot-scope="scope"
>{{scope.row.userType=='0'?'系统用户':scope.row.userType=='1'?'内部用户':'外部用户'}}</template>
</el-table-column>
<el-table-column prop="companyName" label="所属公司" show-overflow-tooltip></el-table-column>
</el-table>
</el-scrollbar>
</div>
<div class="tablefooter">
<div class="tablefootertop">
<div class="left" style="margin-top:20px; display:flex">
<div>
<img
src="/static/images/selectedcom.png"
style="width:24px;height:24px;margin-top:5px; "
>
</div>
<div style="margin-left:3px;">
<el-popover placement="top-start" width="761" trigger="click" v-model="visible">
<div v-if="newtable.length===0" class="selectedperson">
<div style="width:100%;height:6px;">
<img
src="/static/images/close.png"
style="width:10px;height:10px;float:right;margin-right:11px;cursor:pointer"
@click="visible = false"
>
</div>
<div style="text-align:center;line-height:143px">暂无数据</div>
</div>
<div class="selectedperson" v-else>
<div style="width:100%;height:11px;">
<img
src="/static/images/close.png"
style="width:11px;height:11px;float:right;margin-right:11px;cursor:pointer"
@click="visible = false"
>
</div>
<div class="selectedpersonTable">
<el-scrollbar style="height:100%;width: 100%">
<el-table :data="newtable" style="width: 100%" stripe tooltip-effect="dark">
<el-table-column type="index" width="70" label="序号"></el-table-column>
<el-table-column prop="userName" label="姓名" show-overflow-tooltip></el-table-column>
<el-table-column prop="userAccount" label="账号 " show-overflow-tooltip></el-table-column>
<el-table-column prop="phoneNo" label="手机号 " show-overflow-tooltip></el-table-column>
<el-table-column prop="email" label="邮箱 " show-overflow-tooltip></el-table-column>
<el-table-column label="所属公司类型" show-overflow-tooltip width="130">
<template
slot-scope="scope"
>{{scope.row.userType=='0'?'系统用户':scope.row.userType=='1'?'内部用户':'外部用户'}}</template>
</el-table-column>
<el-table-column prop="companyName" label="所属公司" show-overflow-tooltip></el-table-column>
<el-table-column label=" 操作 " width="70">
<template slot-scope="scope">
<span
@click="smalldeleteditem(scope.$index,scope.row)"
style="cursor:pointer;color:#2584ff;"
>删除</span>
</template>
</el-table-column>
</el-table>
</el-scrollbar>
</div>
</div>
<el-badge :value="num" slot="reference" :hidden="!num">
<el-button size="small" type="text" style="color: #687385;">已选成员</el-button>
</el-badge>
</el-popover>
</div>
</div>
<div class="right">
<div class="pagination">
<pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:currentPage="pageInfo.page"
:pagesize="pageInfo.limit"
:total="pageInfo.total"
></pagination>
</div>
</div>
</div>
<div class="tablefooterfooter">
<div style="margin-top:9px;float:right;margin-right:20px;display:flex">
<div style="margin-right:6px;">
<el-button
size="small"
@click="layershow2(false,false)"
style="width:81px;height:36px;"
>取消</el-button>
</div>
<el-button
type="primary"
size="smmall"
style="width:81px;height:36px;"
@click="layershow2(false,false,10)"
>确定</el-button>
</div>
</div>
</div>
</div>
</template>
<script>
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)
}
})
})
}
}
}
</script>
<style scoped>
.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;
}
</style>
网友评论