<template>
<a-modal
:title="title"
:width="1200"
:visible="visible"
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<div class="table-page-search-wrapper">
<a-form layout="inline">
<a-row :gutter="24">
<a-col :span="6">
<a-form-item label="账号">
<a-input placeholder="请输入账号" v-model="queryParam.username"></a-input>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="性别">
<a-select v-model="queryParam.sex" placeholder="请选择性别">
<a-select-option value="">请选择性别查询</a-select-option>
<a-select-option value="1">男性</a-select-option>
<a-select-option value="2">女性</a-select-option>
</a-select>
</a-form-item>
</a-col>
<template v-if="toggleSearchStatus">
<a-col :span="6">
<a-form-item label="邮箱">
<a-input placeholder="请输入邮箱" v-model="queryParam.email"></a-input>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="手机号码">
<a-input placeholder="请输入手机号码" v-model="queryParam.phone"></a-input>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="状态">
<a-select v-model="queryParam.status" placeholder="请选择状态">
<a-select-option value="">请选择状态</a-select-option>
<a-select-option value="1">正常</a-select-option>
<a-select-option value="2">解冻</a-select-option>
</a-select>
</a-form-item>
</a-col>
</template>
<a-col :span="6" >
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchByquery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
<a @click="handleToggleSearch" style="margin-left: 8px">
{{ toggleSearchStatus ? '收起' : '展开' }}
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
</a>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- update-begin author:kangxiaolin date:20190921 for:系统发送通知 用户多选失败 #513 -->
<a-table
ref="table"
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,onSelect:onSelect}"
@change="handleTableChange"
>
<!-- update-end author:kangxiaolin date:20190921 for:系统发送通知 用户多选失败 #513 -->
</a-table>
</a-modal>
</template>
<script>
import { filterObj } from '@/utils/util';
import { getUserList } from '@/api/api'
export default {
name: "SelectUserListModal",
components: {
},
data () {
return {
title:"选择用户",
queryParam: {},
columns: [{
title: '用户账号',
align:"center",
dataIndex: 'username',
fixed:'left',
width:200
},{
title: '用户名称',
align:"center",
dataIndex: 'realname',
},{
title: '性别',
align:"center",
dataIndex: 'sex',
customRender:function (text) {
if(text==1){
return "男";
}else if(text==2){
return "女";
}else{
return text;
}
}
},{
title: '手机号码',
align:"center",
dataIndex: 'phone'
},{
title: '邮箱',
align:"center",
dataIndex: 'email'
},{
title: '状态',
align:"center",
dataIndex: 'status',
customRender:function (text) {
if(text==1){
return "正常";
}else if(text==2){
return "冻结";
}else{
return text;
}
}
}],
dataSource:[],
ipagination:{
current: 1,
pageSize: 5,
pageSizeOptions: ['5', '10', '20'],
showTotal: (total, range) => {
return range[0] + "-" + range[1] + " 共" + total + "条"
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
},
isorter:{
column: 'createTime',
order: 'desc',
},
selectedRowKeys: [],
selectionRows: [],
visible:false,
toggleSearchStatus:false,
}
},
created() {
this.loadData();
},
methods: {
add (selectUser,userIds) {
this.visible = true;
this.edit(selectUser,userIds);
},
edit(selectUser,userIds){
//控制台报错
if(userIds&&userIds.length>0){
this.selectedRowKeys = userIds.split(',');
}else{
this.selectedRowKeys = []
}
if(!selectUser){
this.selectionRows=[]
}else{
var that=this;
that.selectionRows=[];
selectUser.forEach(function(record,index){
console.log(record)
that.selectionRows.push({id: that.selectedRowKeys[index],realname:record.label})
})
// this.selectionRows = selectUser;
}
},
loadData (arg){
if(arg===1){
this.ipagination.current = 1;
}
let params = this.getQueryParams();//查询条件
getUserList(params).then((res)=>{
if(res.success){
this.dataSource = res.result.records;
this.ipagination.total = res.result.total;
}
})
},
getQueryParams(){
let param = Object.assign({}, this.queryParam,this.isorter);
param.field = this.getQueryField();
//--update-begin----author:scott---date:20190818------for:新建公告时指定特定用户翻页错误SelectUserListModal #379----
// param.current = this.ipagination.current;
// param.pageSize = this.ipagination.pageSize;
param.pageNo = this.ipagination.current;
param.pageSize = this.ipagination.pageSize;
//--update-end----author:scott---date:20190818------for:新建公告时指定特定用户翻页错误SelectUserListModal #379---
return filterObj(param);
},
getQueryField(){
let str = "id,";
for(let a = 0;a<this.columns.length;a++){
str+=","+this.columns[a].dataIndex;
}
return str;
},
//--update-begin----author:kangxiaolin---date:20190921------for:系统发送通知 用户多选失败 #513----
onSelectChange (selectedRowKeys) {
this.selectedRowKeys = selectedRowKeys;
},
onSelect(record, selected){
if(selected == true ){
this.selectionRows.push(record);
}else {
this.selectionRows.forEach(function(item,index,arr){
if(item.id == record.id) {
arr.splice(index, 1);
}
})
}
//--update-end----author:kangxiaolin---date:20190921------for:系统发送通知 用户多选失败 #513----
},
searchReset(){
let that = this;
Object.keys(that.queryParam).forEach(function(key){
that.queryParam[key] = '';
});
that.loadData(1);
},
handleTableChange(pagination, filters, sorter){
//TODO 筛选
if (Object.keys(sorter).length>0){
this.isorter.column = sorter.field;
this.isorter.order = "ascend"==sorter.order?"asc":"desc"
}
this.ipagination = pagination;
this.loadData();
},
handleCancel () {
this.selectionRows = [];
this.selectedRowKeys = [];
this.visible = false;
},
handleOk () {
this.$emit("choseUser",this.selectionRows);
this.handleCancel();
},
searchByquery(){
this.loadData(1);
},
handleToggleSearch(){
this.toggleSearchStatus = !this.toggleSearchStatus;
},
}
}
</script>
<style scoped>
.ant-card-body .table-operator{
margin-bottom: 18px;
}
.ant-table-tbody .ant-table-row td{
padding-top:15px;
padding-bottom:15px;
}
.anty-row-operator button{margin: 0 5px}
.ant-btn-danger{background-color: #ffffff}
.ant-modal-cust-warp{height: 100%}
.ant-modal-cust-warp .ant-modal-body{height:calc(100% - 110px) !important;overflow-y: auto}
.ant-modal-cust-warp .ant-modal-content{height:90% !important;overflow-y: hidden}
.anty-img-wrap{height:25px;position: relative;}
.anty-img-wrap > img{max-height:100%;}
</style>