Files
base/jero-web/src/views/system/modules/SelectUserListModal.vue
T

290 lines
8.7 KiB
Java

<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 {
const 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
}
const params = this.getQueryParams()// 查询条件
getUserList(params).then((res) => {
if (res.success) {
this.dataSource = res.result.records
this.ipagination.total = res.result.total
}
})
},
getQueryParams () {
const 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 () {
const 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 = sorter.order === 'ascend' ? '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>