<template> <div> <a-modal centered :title="title" :width="1000" :visible="visible" @ok="handleOk" @cancel="handleCancel" cancelText="关闭"> <!-- 查询区域 --> <div class="table-page-search-wrapper"> <a-form layout="inline" @keyup.enter.native="searchQuery"> <a-row :gutter="24"> <a-col :span="10"> <a-form-item label="用户账号"> <a-input placeholder="请输入用户账号" v-model="queryParam.username"></a-input> </a-form-item> </a-col> <a-col :span="8"> <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> <a-button type="primary" @click="searchQuery" icon="search">查询</a-button> <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button> </span> </a-col> </a-row> </a-form> </div> <!-- table区域-begin --> <div> <a-table size="small" bordered rowKey="id" :columns="columns1" :dataSource="dataSource1" :pagination="ipagination" :loading="loading" :scroll="{ y: 240 }" :rowSelection="{selectedRowKeys: selectedRowKeys,onSelectAll:onSelectAll,onSelect:onSelect,onChange: onSelectChange}" @change="handleTableChange"> </a-table> </div> <!-- table区域-end --> </a-modal> </div> </template> <script> import {filterObj} from '@/utils/util' import {getAction} from '@/api/manage' export default { name: "SelectUserModal", data() { return { title: "添加已有用户", names: [], visible: false, placement: 'right', description: '', // 查询条件 queryParam: {}, // 表头 columns1: [ { title: '#', dataIndex: '', key: 'rowIndex', width: 50, align: "center", customRender: function (t, r, index) { return parseInt(index) + 1; } }, { title: '用户账号', align: "center", width: 100, dataIndex: 'username' }, { title: '用户名称', align: "center", width: 100, dataIndex: 'realname' }, { title: '性别', align: "center", width: 100, dataIndex: 'sex_dictText' }, { title: '电话', align: "center", width: 100, dataIndex: 'phone' }, { title: '部门', align: "center", width: 150, dataIndex: 'orgCode' } ], columns2: [ { title: '用户账号', align: "center", dataIndex: 'username', }, { title: '用户名称', align: "center", dataIndex: 'realname', }, { title: '操作', dataIndex: 'action', align: "center", width: 100, scopedSlots: {customRender: 'action'}, } ], //数据集 dataSource1: [], dataSource2: [], // 分页参数 ipagination: { current: 1, pageSize: 10, pageSizeOptions: ['10', '20', '30'], showTotal: (total, range) => { return range[0] + "-" + range[1] + " 共" + total + "条" }, showQuickJumper: true, showSizeChanger: true, total: 0 }, isorter: { column: 'createTime', order: 'desc', }, loading: false, selectedRowKeys: [], selectedRows: [], url: { list: "/sys/user/list", } } }, created() { this.loadData(); }, methods: { searchQuery() { this.loadData(1); }, searchReset() { this.queryParam = {}; this.loadData(1); }, handleCancel() { this.visible = false; }, handleOk() { this.dataSource2 = this.selectedRowKeys; console.log("data:" + this.dataSource2); this.$emit("selectFinished", this.dataSource2); this.visible = false; }, add() { this.visible = true; }, loadData(arg) { //加载数据 若传入参数1则加载第一页的内容 if (arg === 1) { this.ipagination.current = 1; } var params = this.getQueryParams();//查询条件 getAction(this.url.list, params).then((res) => { if (res.success) { this.dataSource1 = res.result.records; this.ipagination.total = res.result.total; } }) }, getQueryParams() { var param = Object.assign({}, this.queryParam, this.isorter); param.field = this.getQueryField(); param.pageNo = this.ipagination.current; param.pageSize = this.ipagination.pageSize; return filterObj(param); }, getQueryField() { //TODO 字段权限控制 }, onSelectAll(selected, selectedRows, changeRows) { if (selected === true) { for (var a = 0; a < changeRows.length; a++) { this.dataSource2.push(changeRows[a]); } } else { for (var b = 0; b < changeRows.length; b++) { this.dataSource2.splice(this.dataSource2.indexOf(changeRows[b]), 1); } } // console.log(selected, selectedRows, changeRows); }, onSelect(record, selected) { if (selected === true) { this.dataSource2.push(record); } else { var index = this.dataSource2.indexOf(record); //console.log(); if (index >= 0) { this.dataSource2.splice(this.dataSource2.indexOf(record), 1); } } }, onSelectChange(selectedRowKeys, selectedRows) { this.selectedRowKeys = selectedRowKeys; this.selectionRows = selectedRows; }, onClearSelected() { this.selectedRowKeys = []; this.selectionRows = []; }, handleDelete: function (record) { this.dataSource2.splice(this.dataSource2.indexOf(record), 1); }, handleTableChange(pagination, filters, sorter) { //分页、排序、筛选变化时触发 console.log(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(); } } } </script> <style lang="less" 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 } </style>