<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-submit-buttons">
|
<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 '@tievd/cube-block/lib/utils/util'
|
|
import { getUserList } from '@tievd/cube-block/lib/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 = parseInt(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>
|
