<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}" @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, selectionRows) { this.selectedRowKeys = selectedRowKeys; //update-begin---author:wangshuai ---date:20211227 for:全选不好用------------ this.selectionRows = selectionRows; //update-end---author:wangshuai ---date:20211227 for:全选不好用------------ }, 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>