Initial commit
This commit is contained in:
danshihao
@@ -0,0 +1,559 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user