|
|
|
|
@ -33,30 +33,37 @@
|
|
|
|
|
placeholder="请输入账号" |
|
|
|
|
v-model="queryParam.username" |
|
|
|
|
@search="onSearch" |
|
|
|
|
></a-input-search> |
|
|
|
|
<a-button @click="searchReset(1)" style="margin-left: 20px" icon="redo">重置</a-button> |
|
|
|
|
<!--用户列表--> |
|
|
|
|
<a-table |
|
|
|
|
ref="table" |
|
|
|
|
:scroll="scrollTrigger" |
|
|
|
|
size="middle" |
|
|
|
|
rowKey="id" |
|
|
|
|
:columns="columns" |
|
|
|
|
:dataSource="dataSource" |
|
|
|
|
:pagination="ipagination" |
|
|
|
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type: getType}" |
|
|
|
|
:loading="loading" |
|
|
|
|
@change="handleTableChange"> |
|
|
|
|
</a-table> |
|
|
|
|
</a-card> |
|
|
|
|
></a-input-search> |
|
|
|
|
用户名: |
|
|
|
|
<a-input-search |
|
|
|
|
:style="{width:'150px',marginBottom:'15px'}" |
|
|
|
|
placeholder="请输入用户名" |
|
|
|
|
v-model="queryParam.realname" |
|
|
|
|
@search="onSearch" |
|
|
|
|
></a-input-search> |
|
|
|
|
<a-button @click="searchReset(1)" style="margin-left: 20px" icon="redo">重置</a-button> |
|
|
|
|
<!--用户列表--> |
|
|
|
|
<a-table |
|
|
|
|
ref="table" |
|
|
|
|
:scroll="scrollTrigger" |
|
|
|
|
size="middle" |
|
|
|
|
rowKey="id" |
|
|
|
|
:columns="columns" |
|
|
|
|
:dataSource="dataSource" |
|
|
|
|
:pagination="ipagination" |
|
|
|
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type: getType}" |
|
|
|
|
:loading="loading" |
|
|
|
|
@change="handleTableChange"> |
|
|
|
|
</a-table> |
|
|
|
|
</a-card> |
|
|
|
|
</a-col> |
|
|
|
|
</a-row> |
|
|
|
|
</j-modal> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import {filterObj} from '@/utils/util' |
|
|
|
|
import {queryDepartTreeList, getUserList, queryUserByDepId} from '@/api/api' |
|
|
|
|
import { filterObj } from '@/utils/util' |
|
|
|
|
import { queryDepartTreeList, getUserList, queryUserByDepId } from '@/api/api' |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
name: 'JSelectUserByDepModal', |
|
|
|
|
@ -65,7 +72,8 @@
|
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
queryParam: { |
|
|
|
|
username: "", |
|
|
|
|
username: '', |
|
|
|
|
realname: '' |
|
|
|
|
}, |
|
|
|
|
columns: [ |
|
|
|
|
{ |
|
|
|
|
@ -82,7 +90,7 @@
|
|
|
|
|
title: '性别', |
|
|
|
|
align: 'center', |
|
|
|
|
dataIndex: 'sex', |
|
|
|
|
customRender: function (text) { |
|
|
|
|
customRender: function(text) { |
|
|
|
|
if (text === 1) { |
|
|
|
|
return '男' |
|
|
|
|
} else if (text === 2) { |
|
|
|
|
@ -129,13 +137,13 @@
|
|
|
|
|
visible: false, |
|
|
|
|
form: this.$form.createForm(this), |
|
|
|
|
loading: false, |
|
|
|
|
expandedKeys: [], |
|
|
|
|
expandedKeys: [] |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
// 计算属性的 getter |
|
|
|
|
getType: function () { |
|
|
|
|
return this.multi == true ? 'checkbox' : 'radio'; |
|
|
|
|
getType: function() { |
|
|
|
|
return this.multi == true ? 'checkbox' : 'radio' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
@ -144,11 +152,11 @@
|
|
|
|
|
handler() { |
|
|
|
|
this.initUserNames() |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
created() { |
|
|
|
|
// 该方法触发屏幕自适应 |
|
|
|
|
this.resetScreenSize(); |
|
|
|
|
this.resetScreenSize() |
|
|
|
|
this.loadData() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
@ -179,7 +187,7 @@
|
|
|
|
|
}, |
|
|
|
|
async loadData(arg) { |
|
|
|
|
if (arg === 1) { |
|
|
|
|
this.ipagination.current = 1; |
|
|
|
|
this.ipagination.current = 1 |
|
|
|
|
} |
|
|
|
|
if (this.selectedDepIds && this.selectedDepIds.length > 0) { |
|
|
|
|
await this.initQueryUserByDepId(this.selectedDepIds) |
|
|
|
|
@ -200,100 +208,100 @@
|
|
|
|
|
}, |
|
|
|
|
// 触发屏幕自适应 |
|
|
|
|
resetScreenSize() { |
|
|
|
|
let screenWidth = document.body.clientWidth; |
|
|
|
|
let screenWidth = document.body.clientWidth |
|
|
|
|
if (screenWidth < 500) { |
|
|
|
|
this.scrollTrigger = {x: 800}; |
|
|
|
|
this.scrollTrigger = { x: 800 } |
|
|
|
|
} else { |
|
|
|
|
this.scrollTrigger = {}; |
|
|
|
|
this.scrollTrigger = {} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
showModal() { |
|
|
|
|
this.visible = true; |
|
|
|
|
this.queryDepartTree(); |
|
|
|
|
this.visible = true |
|
|
|
|
this.queryDepartTree() |
|
|
|
|
this.initUserNames() |
|
|
|
|
this.loadData(); |
|
|
|
|
this.form.resetFields(); |
|
|
|
|
this.loadData() |
|
|
|
|
this.form.resetFields() |
|
|
|
|
}, |
|
|
|
|
getQueryParams() { |
|
|
|
|
let param = Object.assign({}, this.queryParam, this.isorter); |
|
|
|
|
param.field = this.getQueryField(); |
|
|
|
|
param.pageNo = this.ipagination.current; |
|
|
|
|
param.pageSize = this.ipagination.pageSize; |
|
|
|
|
return filterObj(param); |
|
|
|
|
let 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() { |
|
|
|
|
let str = 'id,'; |
|
|
|
|
let str = 'id,' |
|
|
|
|
for (let a = 0; a < this.columns.length; a++) { |
|
|
|
|
str += ',' + this.columns[a].dataIndex; |
|
|
|
|
str += ',' + this.columns[a].dataIndex |
|
|
|
|
} |
|
|
|
|
return str; |
|
|
|
|
return str |
|
|
|
|
}, |
|
|
|
|
searchReset(num) { |
|
|
|
|
let that = this; |
|
|
|
|
let that = this |
|
|
|
|
if (num !== 0) { |
|
|
|
|
that.queryParam = {}; |
|
|
|
|
that.loadData(1); |
|
|
|
|
that.queryParam = {} |
|
|
|
|
that.loadData(1) |
|
|
|
|
} |
|
|
|
|
that.selectedRowKeys = []; |
|
|
|
|
that.selectUserIds = []; |
|
|
|
|
that.selectedDepIds = []; |
|
|
|
|
that.selectedRowKeys = [] |
|
|
|
|
that.selectUserIds = [] |
|
|
|
|
that.selectedDepIds = [] |
|
|
|
|
}, |
|
|
|
|
close() { |
|
|
|
|
this.searchReset(0); |
|
|
|
|
this.visible = false; |
|
|
|
|
this.searchReset(0) |
|
|
|
|
this.visible = false |
|
|
|
|
}, |
|
|
|
|
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.isorter.column = sorter.field |
|
|
|
|
this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc' |
|
|
|
|
} |
|
|
|
|
this.ipagination = pagination; |
|
|
|
|
this.loadData(); |
|
|
|
|
this.ipagination = pagination |
|
|
|
|
this.loadData() |
|
|
|
|
}, |
|
|
|
|
handleSubmit() { |
|
|
|
|
let that = this; |
|
|
|
|
this.getSelectUserRows(); |
|
|
|
|
that.$emit('ok', that.selectUserRows, that.selectUserIds); |
|
|
|
|
let that = this |
|
|
|
|
this.getSelectUserRows() |
|
|
|
|
that.$emit('ok', that.selectUserRows, that.selectUserIds) |
|
|
|
|
that.searchReset(0) |
|
|
|
|
that.close(); |
|
|
|
|
that.close() |
|
|
|
|
}, |
|
|
|
|
//获取选择用户信息 |
|
|
|
|
getSelectUserRows(rowId) { |
|
|
|
|
let dataSource = this.dataSource; |
|
|
|
|
let userIds = ""; |
|
|
|
|
this.selectUserRows = []; |
|
|
|
|
let dataSource = this.dataSource |
|
|
|
|
let userIds = '' |
|
|
|
|
this.selectUserRows = [] |
|
|
|
|
for (let i = 0, len = dataSource.length; i < len; i++) { |
|
|
|
|
if (this.selectedRowKeys.includes(dataSource[i].id)) { |
|
|
|
|
this.selectUserRows.push(dataSource[i]); |
|
|
|
|
userIds = userIds + "," + dataSource[i].username |
|
|
|
|
this.selectUserRows.push(dataSource[i]) |
|
|
|
|
userIds = userIds + ',' + dataSource[i].username |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
this.selectUserIds = userIds.substring(1); |
|
|
|
|
this.selectUserIds = userIds.substring(1) |
|
|
|
|
}, |
|
|
|
|
// 点击树节点,筛选出对应的用户 |
|
|
|
|
onDepSelect(selectedDepIds) { |
|
|
|
|
if (selectedDepIds[0] != null) { |
|
|
|
|
this.initQueryUserByDepId(selectedDepIds); // 调用方法根据选选择的id查询用户信息 |
|
|
|
|
this.initQueryUserByDepId(selectedDepIds) // 调用方法根据选选择的id查询用户信息 |
|
|
|
|
if (this.selectedDepIds[0] !== selectedDepIds[0]) { |
|
|
|
|
this.selectedDepIds = [selectedDepIds[0]]; |
|
|
|
|
this.selectedDepIds = [selectedDepIds[0]] |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
onSelectChange(selectedRowKeys, selectionRows) { |
|
|
|
|
this.selectedRowKeys = selectedRowKeys; |
|
|
|
|
this.selectionRows = selectionRows; |
|
|
|
|
this.selectedRowKeys = selectedRowKeys |
|
|
|
|
this.selectionRows = selectionRows |
|
|
|
|
}, |
|
|
|
|
onSearch() { |
|
|
|
|
this.loadData(1); |
|
|
|
|
this.loadData(1) |
|
|
|
|
}, |
|
|
|
|
// 根据选择的id来查询用户信息 |
|
|
|
|
initQueryUserByDepId(selectedDepIds) { |
|
|
|
|
this.loading = true |
|
|
|
|
return queryUserByDepId({id: selectedDepIds.toString()}).then((res) => { |
|
|
|
|
return queryUserByDepId({ id: selectedDepIds.toString() }).then((res) => { |
|
|
|
|
if (res.success) { |
|
|
|
|
this.dataSource = res.result; |
|
|
|
|
this.ipagination.total = res.result.length; |
|
|
|
|
this.dataSource = res.result |
|
|
|
|
this.ipagination.total = res.result.length |
|
|
|
|
} |
|
|
|
|
}).finally(() => { |
|
|
|
|
this.loading = false |
|
|
|
|
@ -302,14 +310,14 @@
|
|
|
|
|
queryDepartTree() { |
|
|
|
|
queryDepartTreeList().then((res) => { |
|
|
|
|
if (res.success) { |
|
|
|
|
this.departTree = res.result; |
|
|
|
|
this.departTree = res.result |
|
|
|
|
// 默认展开父节点 |
|
|
|
|
this.expandedKeys = this.departTree.map(item => item.id) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
modalFormOk() { |
|
|
|
|
this.loadData(); |
|
|
|
|
this.loadData() |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
