560 lines
17 KiB
Vue
560 lines
17 KiB
Vue
<template>
|
|
<a-modal
|
|
:title="$t('userOrOrganSelect.selectUserOrOrgan')"
|
|
:maskClosable="false"
|
|
:width="1000"
|
|
:closable="true"
|
|
@ok="handleOk"
|
|
@cancel="handleCancel"
|
|
:visible="visible">
|
|
<div class="modal-search-wrapper table-page-search-wrapper">
|
|
<a-form v-if="switchValue === 'organ'" layout="inline" @keyup.enter.native="searchQueryOrgan">
|
|
<a-row :gutter="24">
|
|
<a-col :sm="6">
|
|
<a-form-item :label="$t('organization')">
|
|
<a-tree-select
|
|
tree-node-filter-prop="title"
|
|
v-model="queryParamOrgan.departId"
|
|
:maxTagCount="1"
|
|
:show-search="true"
|
|
:getPopupContainer="triggerNode=> triggerNode.parentNode"
|
|
style="width: 100%"
|
|
:tree-data="categoryTreeList"
|
|
:placeholder="$t('pleaseSelect')"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<span style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
|
|
<a-button style="margin-left: 8px" @click="searchResetOrgan">{{$t('reset')}}</a-button>
|
|
<a-button style="margin-left: 8px" type="primary" @click="searchQueryOrgan">{{$t('query')}}</a-button>
|
|
</span>
|
|
</a-row>
|
|
</a-form>
|
|
<a-form v-if="switchValue === 'user'" layout="inline" @keyup.enter.native="searchQueryUser">
|
|
<a-row :gutter="24">
|
|
<a-col :sm="6">
|
|
<a-form-item :label="$t('user.workNo')">
|
|
<a-input :placeholder="$t('pleaseEnter')"
|
|
v-model="queryParamUser.username"></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :sm="6">
|
|
<a-form-item :label="$t('userOrOrganSelect.name')">
|
|
<a-input :placeholder="$t('pleaseEnter')"
|
|
v-model="queryParamUser.realname"></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<span style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
|
|
<a-button style="margin-left: 8px" @click="searchResetUser">{{$t('reset')}}</a-button>
|
|
<a-button style="margin-left: 8px" type="primary" @click="searchQueryUser">{{$t('query')}}</a-button>
|
|
</span>
|
|
</a-row>
|
|
</a-form>
|
|
</div>
|
|
<div class="modal-content">
|
|
<div class="modal-content-left">
|
|
<div class="modal-content-title-div">
|
|
<p class="modal-content-title">选择</p>
|
|
<div class="table-operator-tab">
|
|
<a v-if="selectType === 'all' || selectType === 'organ'" class="switch-item" :class="switchValue === 'organ' ? 'table-operator-tab-active' : ''"
|
|
@click="switchChange('organ')">组织机构
|
|
</a>
|
|
<a v-if="selectType === 'all' || selectType === 'user'" class="switch-item" :class="switchValue === 'user' ? 'table-operator-tab-active' : ''"
|
|
@click="switchChange('user')">用户列表
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<a-table
|
|
v-if="switchValue === 'organ'"
|
|
:columns="columnsOrgan"
|
|
rowKey="key"
|
|
bordered
|
|
:scroll="{x: 500}"
|
|
:data-source="dataSourceOrgan"
|
|
:pagination="ipaginationOrgan"
|
|
:row-selection="{ selectedRowKeys: selectedRowKeysOrgan, onChange: onSelectChangeOrgan, type: type }"
|
|
:loading="loadingLeft"
|
|
@change="organLeftTableChange">
|
|
</a-table>
|
|
<a-table
|
|
v-else-if="switchValue === 'user'"
|
|
:columns="columnsUser"
|
|
rowKey="id"
|
|
bordered
|
|
:scroll="{x: 500}"
|
|
:data-source="dataSourceUser"
|
|
:pagination="ipaginationUser"
|
|
:row-selection="{ selectedRowKeys: selectedRowKeysUser, onChange: onSelectChangeUser, type: type }"
|
|
:loading="loadingLeft"
|
|
@change="userLeftTableChange">
|
|
</a-table>
|
|
</div>
|
|
<div class="modal-content-right">
|
|
<div class="modal-content-title-div">
|
|
<p class="modal-content-title">选择</p>
|
|
</div>
|
|
<a-table
|
|
v-if="switchValue === 'organ'"
|
|
:columns="columnsOrganRight"
|
|
rowKey="key"
|
|
:pagination="false"
|
|
bordered
|
|
:scroll="{x: 300}"
|
|
:loading="loadingRight"
|
|
:data-source="dataSourceOrganRight">
|
|
<template slot="action" slot-scope="text, record, index">
|
|
<a @click="handleDeleteOrgan(record, index)" >{{ $t('delete') }}</a>
|
|
</template>
|
|
</a-table>
|
|
<a-table
|
|
v-else-if="switchValue === 'user'"
|
|
:columns="columnsOrganRight"
|
|
rowKey="id"
|
|
:pagination="false"
|
|
bordered
|
|
:scroll="{x: 300}"
|
|
:loading="loadingRight"
|
|
:data-source="dataSourceOrganRight">
|
|
<template slot="action" slot-scope="text, record, index">
|
|
<a @click="handleDeleteOrgan(record, index)" >{{ $t('delete') }}</a>
|
|
</template>
|
|
</a-table>
|
|
</div>
|
|
</div>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script>
|
|
import '@assets/less/common.less'
|
|
import { getAction } from '@/api/manage'
|
|
|
|
export default {
|
|
name: 'UserOrganSelectModal',
|
|
props: {
|
|
selectType: {
|
|
type: String,
|
|
default: 'all'
|
|
},
|
|
type: { // 是单选还是多选
|
|
type: String,
|
|
default: 'radio'
|
|
},
|
|
value: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
organ: '',
|
|
user: ''
|
|
}
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
value: {
|
|
immediate: true,
|
|
handler (val) {
|
|
if (this.selectType === 'all') {
|
|
if (val.organ && val.organ.length > 0) {
|
|
this.dataSourceOrganRight = val.organ
|
|
this.selectedRowKeysOrgan = val.organ.map(item => item.id)
|
|
}
|
|
if (val.user && val.user.length > 0) {
|
|
this.dataSourceUserRight = val.user
|
|
this.selectedRowKeysUser = val.user.map(item => item.id)
|
|
}
|
|
} else if (this.selectType === 'organ' && val.organ && val.organ.length > 0) {
|
|
this.dataSourceOrganRight = val.organ
|
|
this.selectedRowKeysOrgan = val.organ.map(item => item.id)
|
|
} else if (this.selectType === 'user' && val.user && val.user.length > 0) {
|
|
this.dataSourceUserRight = val.user
|
|
this.selectedRowKeysUser = val.user.map(item => item.id)
|
|
}
|
|
// if (val.organ) {
|
|
// this.loadOrganRight(val.organ, () => {
|
|
// if (val.user) {
|
|
// this.loadUserRight(val.user, () => {
|
|
// this.$emit('change', this.dataSourceOrganRight, this.dataSourceUserRight)
|
|
// })
|
|
// } else {
|
|
// this.$emit('change', this.dataSourceOrganRight, [])
|
|
// }
|
|
// })
|
|
// } else {
|
|
// this.loadUserRight(val.user, () => {
|
|
// this.$emit('change', [], this.dataSourceUserRight)
|
|
// })
|
|
// }
|
|
// } else if (this.selectType === 'organ') {
|
|
// this.loadOrganRight(val.organ, () => {
|
|
// this.$emit('change', this.dataSourceOrganRight)
|
|
// })
|
|
// } else if (this.selectType === 'user') {
|
|
// this.loadUserRight(val.user, () => {
|
|
// this.$emit('change', this.dataSourceUserRight)
|
|
// })
|
|
// }
|
|
}
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
visible: false,
|
|
labelCol: {
|
|
sm: 4
|
|
},
|
|
wrapperCol: {
|
|
sm: 20
|
|
},
|
|
categoryTreeList: [], // 组织机构查询的组织机构树数据
|
|
switchValue: 'organ',
|
|
loadingLeft: false, // 左侧表的加载状态
|
|
loadingRight: false, // 右侧表的加载
|
|
// 组织机构左侧表相关数据
|
|
queryParamOrgan: {},
|
|
columnsOrgan: [
|
|
{
|
|
title: this.$t('organization'),
|
|
dataIndex: 'title',
|
|
align: 'center'
|
|
},
|
|
{
|
|
title: this.$t('userOrOrganSelect.secondLevel'),
|
|
dataIndex: 'secondLevel',
|
|
align: 'center'
|
|
},
|
|
{
|
|
title: this.$t('userOrOrganSelect.threeLevel'),
|
|
dataIndex: 'threeLevel',
|
|
align: 'center'
|
|
}
|
|
],
|
|
dataSourceOrgan: [],
|
|
selectedRowKeysOrgan: [],
|
|
selectedRowsOrgan: [],
|
|
ipaginationOrgan: {
|
|
current: 1,
|
|
pageSize: 5,
|
|
pageSizeOptions: ['5', '10', '20', '30'],
|
|
showTotal: (total, range) => {
|
|
return range[0] + '-' + range[1] + ' ' + this.$t('total') + ' ' + total + ' ' + this.$t('strip')
|
|
},
|
|
showQuickJumper: true,
|
|
showSizeChanger: true,
|
|
total: 0
|
|
},
|
|
columnsOrganRight: [
|
|
{
|
|
title: this.$t('organization'),
|
|
dataIndex: 'title',
|
|
align: 'center'
|
|
},
|
|
{
|
|
title: this.$t('operation'),
|
|
dataIndex: 'action',
|
|
scopedSlots: { customRender: 'action' },
|
|
align: 'center'
|
|
}
|
|
],
|
|
dataSourceOrganRight: [],
|
|
// 用户相关数据
|
|
queryParamUser: {},
|
|
columnsUser: [
|
|
{
|
|
title: this.$t('user.workNo'),
|
|
dataIndex: 'username',
|
|
align: 'center'
|
|
},
|
|
{
|
|
title: this.$t('userOrOrganSelect.name'),
|
|
dataIndex: 'name',
|
|
align: 'center'
|
|
},
|
|
{
|
|
title: this.$t('role'),
|
|
dataIndex: 'role',
|
|
align: 'center'
|
|
},
|
|
{
|
|
title: this.$t('organization'),
|
|
dataIndex: 'organization',
|
|
align: 'center'
|
|
}
|
|
],
|
|
dataSourceUser: [],
|
|
selectedRowKeysUser: [],
|
|
selectedRowsUser: [],
|
|
ipaginationUser: {
|
|
current: 1,
|
|
pageSize: 5,
|
|
pageSizeOptions: ['5', '10', '20', '30'],
|
|
showTotal: (total, range) => {
|
|
return range[0] + '-' + range[1] + ' ' + this.$t('total') + ' ' + total + ' ' + this.$t('strip')
|
|
},
|
|
showQuickJumper: true,
|
|
showSizeChanger: true,
|
|
total: 0
|
|
},
|
|
columnsUserRight: [
|
|
{
|
|
title: this.$t('userOrOrganSelect.name'),
|
|
dataIndex: 'title',
|
|
align: 'center'
|
|
},
|
|
{
|
|
title: this.$t('operation'),
|
|
dataIndex: 'action',
|
|
scopedSlots: { customRender: 'action' },
|
|
align: 'center'
|
|
}
|
|
],
|
|
dataSourceUserRight: [],
|
|
url: {
|
|
organList: '/sys/sysDepart/queryTreeList',
|
|
userList: '/sys/user/page'
|
|
}
|
|
}
|
|
},
|
|
mounted () {
|
|
if (this.selectType === 'all' || this.selectType === 'organ') {
|
|
this.switchValue = 'organ'
|
|
this.loadDataOrgan()
|
|
} else {
|
|
this.switchValue = 'user'
|
|
this.loadDataUser()
|
|
}
|
|
},
|
|
methods: {
|
|
open () {
|
|
this.visible = true
|
|
},
|
|
// switch改变
|
|
switchChange (value) {
|
|
this.switchValue = value
|
|
if (value === 'organ') {
|
|
this.loadDataOrgan()
|
|
} else {
|
|
this.loadDataUser()
|
|
}
|
|
},
|
|
/**
|
|
* 组织机构相关方法
|
|
*/
|
|
// 获取组织机构树
|
|
getSysCategoryTree () {
|
|
getAction(this.url.getSysCategoryTree, {}).then((res) => {
|
|
if (res.success) {
|
|
this.categoryTreeList = res.result
|
|
} else {
|
|
this.categoryTreeList = []
|
|
}
|
|
})
|
|
},
|
|
searchResetOrgan () {
|
|
this.queryParamOrgan = {}
|
|
this.loadDataOrgan()
|
|
},
|
|
searchQueryOrgan () {
|
|
this.loadDataOrgan()
|
|
},
|
|
// 获取组织机构左侧树列表
|
|
loadDataOrgan () {
|
|
const params = Object.assign({}, this.queryParamOrgan)
|
|
params.pageNo = this.ipaginationOrgan.current
|
|
params.pageSize = this.ipaginationOrgan.pageSize
|
|
this.loadingLeft = true
|
|
getAction(this.url.organList, params).then((res) => {
|
|
if (res.success) {
|
|
if (res.result.current > 1 && res.result.length === 0) {
|
|
this.ipaginationOrgan.current = res.result.current - 1
|
|
this.loadDataOrgan()
|
|
return
|
|
}
|
|
this.dataSourceOrgan = res.result.map(item => {
|
|
return {
|
|
key: item.key,
|
|
parentId: item.parentId,
|
|
title: item.title
|
|
}
|
|
}) || []
|
|
this.ipaginationOrgan.total = res.result.total
|
|
} else {
|
|
this.$message.warn(res.message)
|
|
}
|
|
}).finally(() => {
|
|
this.loadingLeft = false
|
|
})
|
|
},
|
|
// 组织机构左侧树的选择
|
|
onSelectChangeOrgan (selectedRowKeys, selectedRows) {
|
|
this.selectedRowKeysOrgan = selectedRowKeys
|
|
this.selectedRowsOrgan = selectedRows
|
|
if (this.type === 'checkbox') {
|
|
for (const rowIndex in selectedRows) {
|
|
if (!this.dataSourceOrganRight.find(item => item.key === selectedRows[rowIndex].key)) {
|
|
// 右侧不存在，追加到右侧表格
|
|
this.dataSourceOrganRight.push(selectedRows[rowIndex])
|
|
}
|
|
}
|
|
} else {
|
|
this.dataSourceOrganRight = selectedRows
|
|
}
|
|
},
|
|
// 组织结构左侧树的复选框状态
|
|
getCheckboxPropsOrgan (record) {
|
|
return {
|
|
disabled: this.selectedRowKeysOrgan.includes(record.id)
|
|
}
|
|
},
|
|
// 组织机构左侧表格改变
|
|
organLeftTableChange (pagination) {
|
|
this.ipaginationOrganLeft = pagination
|
|
this.loadDataOrgan()
|
|
},
|
|
// 组织机构右侧表的删除
|
|
handleDeleteOrgan (record, index) {
|
|
this.dataSourceOrganRight.splice(index, 1)
|
|
this.selectedRowKeysOrgan = this.selectedRowKeysOrgan.filter(item => item === record.id)
|
|
},
|
|
// 组织机构初始化右侧树列表
|
|
// loadOrganRight (ids, callback) {
|
|
// this.loadingRight = true
|
|
// getAction(this.url.organList, { ids: ids }).then((res) => {
|
|
// if (res.success) {
|
|
// this.dataSourceOrganRight = res.result.records || []
|
|
// callback && callback()
|
|
// } else {
|
|
// this.$message.warn(res.message)
|
|
// }
|
|
// }).finally(() => {
|
|
// this.loadingRight = false
|
|
// })
|
|
// },
|
|
/**
|
|
* 用户相关方法
|
|
*/
|
|
searchResetUser () {
|
|
this.queryParamUser = {}
|
|
this.loadDataUser()
|
|
},
|
|
searchQueryUser () {
|
|
this.loadDataUser()
|
|
},
|
|
// 获取用户左侧树列表
|
|
loadDataUser () {
|
|
const params = Object.assign({}, this.queryParamUser)
|
|
params.pageNo = this.ipaginationUser.current
|
|
params.pageSize = this.ipaginationUser.pageSize
|
|
this.loadingLeft = true
|
|
getAction(this.url.userList, params).then((res) => {
|
|
if (res.success) {
|
|
if (res.result.current > 1 && res.result.records.length === 0) {
|
|
this.ipaginationOrgan.current = res.result.current - 1
|
|
this.loadDataUser()
|
|
return
|
|
}
|
|
this.dataSourceUser = res.result.records || []
|
|
this.ipaginationUser.total = res.result.total
|
|
} else {
|
|
this.$message.warn(res.message)
|
|
}
|
|
}).finally(() => {
|
|
this.loadingLeft = false
|
|
})
|
|
},
|
|
// 用户左侧表的选择
|
|
onSelectChangeUser (selectedRowKeys, selectedRows) {
|
|
this.selectedRowKeysUser = selectedRowKeys
|
|
this.selectedRowsUser = selectedRows
|
|
if (this.type === 'checkbox') {
|
|
for (const rowIndex in selectedRows) {
|
|
if (!this.dataSourceUserRight.find(item => item.id === selectedRows[rowIndex].id)) {
|
|
// 右侧不存在，追加到右侧表格
|
|
this.dataSourceUserRight.push(selectedRows[rowIndex])
|
|
}
|
|
}
|
|
} else {
|
|
this.dataSourceUserRight = selectedRows
|
|
}
|
|
},
|
|
// 用户左侧表的复选框状态
|
|
getCheckboxPropsUser (record) {
|
|
return {
|
|
disabled: this.selectedRowKeysUser.includes(record.id)
|
|
}
|
|
},
|
|
// 用户左侧表格改变
|
|
userLeftTableChange (pagination) {
|
|
this.ipaginationUserLeft = pagination
|
|
this.loadDataUser()
|
|
},
|
|
// 用户右侧表的删除
|
|
handleDeleteUser (record, index) {
|
|
this.dataSourceUserRight.splice(index, 1)
|
|
this.selectedRowKeysUser = this.selectedRowKeysUser.filter(item => item === record.id)
|
|
},
|
|
// 用户初始化右侧树列表
|
|
// loadUserRight (ids, callback) {
|
|
// this.loadingRight = true
|
|
// getAction(this.url.userList, { ids: ids }).then((res) => {
|
|
// if (res.success) {
|
|
// this.dataSourceUserRight = res.result.records || []
|
|
// callback && callback()
|
|
// } else {
|
|
// this.$message.warn(res.message)
|
|
// }
|
|
// }).finally(() => {
|
|
// this.loadingRight = false
|
|
// })
|
|
// },
|
|
handleOk () {
|
|
if (this.selectType === 'all') {
|
|
this.$emit('change', this.dataSourceOrganRight, this.dataSourceUserRight)
|
|
} else if (this.selectType === 'organ') {
|
|
this.$emit('change', this.dataSourceOrganRight)
|
|
} else {
|
|
this.$emit('change', this.dataSourceUserRight)
|
|
}
|
|
this.visible = false
|
|
},
|
|
handleCancel () {
|
|
this.close()
|
|
},
|
|
close () {
|
|
this.visible = false
|
|
// this.dataSourceOrgan = []
|
|
// this.dataSourceUser = []
|
|
this.dataSourceOrganRight = []
|
|
this.dataSourceUserRight = []
|
|
this.selectedRowKeysOrgan = []
|
|
this.selectedRowKeysUser = []
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.modal-content {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
&-left {
|
|
width: 58%;
|
|
}
|
|
&-right {
|
|
width: 40%;
|
|
}
|
|
&-title-div {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 28px;
|
|
margin: 20px 0;
|
|
.modal-content-title {
|
|
color: #1D2129;
|
|
font-weight: 500;
|
|
margin-right: 12px;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|