<template>
|
<BasicModal
|
@register="register"
|
:getContainer="getContainer"
|
:canFullscreen="false"
|
title="选择用户"
|
:width="600"
|
wrapClassName="j-user-select-modal2"
|
>
|
<!-- 部门下拉框 -->
|
<a-select v-model:value="selectedDepart" style="width: 100%" class="depart-select" @change="onDepartChange">
|
<a-select-option v-for="item in departOptions" :value="item.value">{{ item.label }}</a-select-option>
|
</a-select>
|
|
<div style="position: relative; min-height: 350px">
|
<!-- 用户搜索框 -->
|
<div :class="searchInputStatus ? 'my-search all-width' : 'my-search'">
|
<span :class="searchInputStatus ? 'hidden' : ''" style="margin-left: 10px"
|
><SearchOutlined style="color: #c0c0c0" @click="showSearchInput"
|
/></span>
|
<div style="width: 100%" :class="searchInputStatus ? '' : 'hidden'">
|
<a-input v-model:value="searchText" @pressEnter="onSearchUser" style="width: 100%" placeholder="请输入用户名按回车搜索">
|
<template #prefix>
|
<SearchOutlined style="color: #c0c0c0" />
|
</template>
|
<template #suffix>
|
<CloseOutlined title="退出搜索" @click="clearSearch" />
|
</template>
|
</a-input>
|
</div>
|
</div>
|
|
<!-- tabs -->
|
<div class="my-tabs">
|
<a-tabs v-model:activeKey="myActiveKey" :centered="true" @change="onChangeTab">
|
<!-- 所有用户 -->
|
<a-tab-pane key="1" tab="全部" forceRender>
|
<user-list :excludeUserIdList="excludeUserIdList" :dataList="userDataList" :selectedIdList="selectedIdList" depart @selected="onSelectUser" @unSelect="unSelectUser" />
|
</a-tab-pane>
|
|
<!-- 部门用户 -->
|
<a-tab-pane key="2" tab="按部门" forceRender>
|
<depart-user-list
|
:searchText="searchText"
|
:selectedIdList="selectedIdList"
|
:excludeUserIdList="excludeUserIdList"
|
@loaded="initDepartOptions"
|
@selected="onSelectUser"
|
@unSelect="unSelectUser"
|
/>
|
</a-tab-pane>
|
|
<!-- 角色用户 -->
|
<a-tab-pane key="3" tab="按角色" forceRender>
|
<role-user-list :excludeUserIdList="excludeUserIdList" :searchText="searchText" :selectedIdList="selectedIdList" @selected="onSelectUser" @unSelect="unSelectUser" />
|
</a-tab-pane>
|
</a-tabs>
|
</div>
|
|
<!-- 选中用户 -->
|
<div class="selected-users" style="width: 100%; overflow-x: hidden">
|
<SelectedUserItem v-for="item in selectedUserList" :info="item" @unSelect="unSelectUser" />
|
</div>
|
</div>
|
|
<template #footer>
|
<div style="display: flex; justify-content: space-between; width: 100%">
|
<div class="select-user-page-info">
|
<a-pagination
|
v-if="myActiveKey == '1'"
|
v-model:current="pageNo"
|
size="small"
|
:total="totalRecord"
|
show-quick-jumper
|
@change="onPageChange"
|
/>
|
</div>
|
<a-button type="primary" @click="handleOk">确 定</a-button>
|
</div>
|
</template>
|
</BasicModal>
|
</template>
|
|
<script lang="ts">
|
import { BasicModal, useModalInner } from '/@/components/Modal';
|
import { SearchOutlined, CloseOutlined } from '@ant-design/icons-vue';
|
import UserList from './UserList.vue';
|
import SelectedUserItem from './SelectedUserItem.vue';
|
import DepartUserList from './UserListAndDepart.vue';
|
import RoleUserList from './UserListAndRole.vue';
|
import { Pagination } from 'ant-design-vue';
|
const APagination = Pagination;
|
import { defHttp } from '/@/utils/http/axios';
|
|
import { computed, ref, toRaw } from 'vue';
|
import { useUserStore } from '/@/store/modules/user';
|
export default {
|
name: 'UserSelectModal',
|
components: {
|
BasicModal,
|
SearchOutlined,
|
CloseOutlined,
|
SelectedUserItem,
|
UserList,
|
DepartUserList,
|
RoleUserList,
|
APagination,
|
},
|
props: {
|
multi: {
|
type: Boolean,
|
default: false,
|
},
|
getContainer: {
|
type: Function,
|
default: null,
|
},
|
//是否排除我自己
|
izExcludeMy: {
|
type: Boolean,
|
default: false,
|
},
|
},
|
emits: ['selected', 'register'],
|
setup(props, { emit }) {
|
const myActiveKey = ref('1');
|
const selectedUserList = ref<any[]>([]);
|
const userStore = useUserStore();
|
const selectedIdList = computed(() => {
|
let arr = selectedUserList.value;
|
if (!arr || arr.length == 0) {
|
return [];
|
} else {
|
return arr.map((k) => k.id);
|
}
|
});
|
// QQYUN-4152【应用】已经存在的用户，添加的时候还可以重复选择
|
const excludeUserIdList = ref<any[]>([]);
|
|
// 弹窗事件
|
const [register] = useModalInner((data) => {
|
let list = data.list;
|
if (list && list.length > 0) {
|
selectedUserList.value = [...list];
|
} else {
|
selectedUserList.value = [];
|
}
|
if(data.excludeUserIdList){
|
excludeUserIdList.value = data.excludeUserIdList;
|
}else{
|
excludeUserIdList.value = [];
|
}
|
//如果排除我自己，直接excludeUserIdList.push排除即可
|
if (props.izExcludeMy) {
|
excludeUserIdList.value.push(userStore.getUserInfo.id);
|
}
|
});
|
|
// 确定事件
|
function handleOk() {
|
let arr = toRaw(selectedUserList.value);
|
emit('selected', arr);
|
}
|
|
/*--------------部门下拉框，用于筛选用户---------------*/
|
const selectedDepart = ref('');
|
const departOptions = ref<any[]>([]);
|
function initDepartOptions(options) {
|
departOptions.value = [{ value: '', label: '全部用户' }, ...options];
|
selectedDepart.value = '';
|
}
|
function onDepartChange() {
|
loadUserList();
|
}
|
/*--------------部门下拉框，用于筛选用户---------------*/
|
|
/*--------------第一页 搜索框---------------*/
|
const searchInputStatus = ref(false);
|
const searchText = ref('');
|
function showSearchInput(e) {
|
e && prevent(e);
|
searchInputStatus.value = true;
|
}
|
function onSearchUser() {
|
console.log('onSearchUser');
|
loadUserList();
|
}
|
function clearSearch(e) {
|
e && prevent(e);
|
searchText.value = '';
|
searchInputStatus.value = false;
|
loadUserList();
|
}
|
/*--------------第一页 搜索框---------------*/
|
|
/*--------------加载数据---------------*/
|
const pageNo = ref(1);
|
const totalRecord = ref(0);
|
const userDataList = ref<any[]>([]);
|
async function onPageChange() {
|
console.log('onPageChange', pageNo.value);
|
await loadUserList();
|
}
|
async function loadUserList() {
|
const url = '/sys/user/selectUserList';
|
let params = {
|
pageNo: pageNo.value,
|
pageSize: 10,
|
};
|
if (searchText.value) {
|
params['keyword'] = searchText.value;
|
}
|
if (selectedDepart.value) {
|
params['departId'] = selectedDepart.value;
|
}
|
const data = await defHttp.get({ url, params }, { isTransformResponse: false });
|
if (data.success) {
|
const { records, total } = data.result;
|
totalRecord.value = total;
|
userDataList.value = records;
|
} else {
|
console.error(data.message);
|
}
|
console.log('loadUserList', data);
|
}
|
/*--------------加载数据---------------*/
|
|
/*--------------选中/取消选中---------------*/
|
function onSelectUser(info) {
|
if (props.multi === true) {
|
let arr = selectedUserList.value;
|
let idList = selectedIdList.value;
|
if (idList.indexOf(info.id) < 0) {
|
arr.push({ ...info });
|
selectedUserList.value = arr;
|
}
|
} else {
|
selectedUserList.value = [{ ...info }];
|
}
|
}
|
function unSelectUser(id) {
|
let arr = selectedUserList.value;
|
let index = -1;
|
for (let i = 0; i < arr.length; i++) {
|
if (arr[i].id === id) {
|
index = i;
|
break;
|
}
|
}
|
if (index >= 0) {
|
arr.splice(index, 1);
|
selectedUserList.value = arr;
|
}
|
}
|
/*--------------选中/取消选中---------------*/
|
|
function onChangeTab(tab) {
|
myActiveKey.value = tab;
|
}
|
|
function prevent(e) {
|
e.preventDefault();
|
e.stopPropagation();
|
}
|
|
//加载第一页数据
|
loadUserList();
|
|
return {
|
selectedDepart,
|
departOptions,
|
initDepartOptions,
|
onDepartChange,
|
|
register,
|
handleOk,
|
|
searchText,
|
searchInputStatus,
|
showSearchInput,
|
onSearchUser,
|
clearSearch,
|
|
myActiveKey,
|
onChangeTab,
|
|
pageNo,
|
totalRecord,
|
onPageChange,
|
userDataList,
|
selectedUserList,
|
selectedIdList,
|
onSelectUser,
|
unSelectUser,
|
excludeUserIdList
|
};
|
},
|
};
|
</script>
|
|
<style lang="less">
|
.j-user-select-modal2 {
|
.depart-select {
|
.ant-select-selector {
|
color: #fff !important;
|
background-color: #409eff !important;
|
border-radius: 5px !important;
|
}
|
.ant-select-selection-item,
|
.ant-select-arrow {
|
color: #fff !important;
|
}
|
}
|
.my-search {
|
position: absolute;
|
top: 14px;
|
z-index: 1;
|
&.all-width {
|
width: 100%;
|
}
|
|
.anticon {
|
cursor: pointer;
|
&:hover {
|
color: #0a8fe9 !important;
|
}
|
}
|
.hidden {
|
display: none;
|
}
|
}
|
|
.my-tabs {
|
}
|
|
.selected-users {
|
display: flex;
|
flex-wrap: wrap;
|
flex-direction: row;
|
padding-top: 15px;
|
}
|
|
.scroll-container {
|
padding-bottom: 0 !important;
|
}
|
}
|
</style>
|
