<script lang="ts" setup>
|
import type { ScrollActionType, TreeActionType } from '@jnpf/ui';
|
|
import { computed, nextTick, reactive, ref, toRefs, unref, watch } from 'vue';
|
|
import { useGlobSetting, useMessage } from '@jnpf/hooks';
|
import { BasicTree, ScrollContainer } from '@jnpf/ui';
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
|
import { useUserStore } from '@vben/stores';
|
|
import { useDebounceFn } from '@vueuse/core';
|
import { Avatar, Checkbox, Input, Radio, TabPane, Tabs, Tag } from 'ant-design-vue';
|
|
import { getOrganizeSelector } from '#/api/permission/organize';
|
import { getPositionSelectorTree } from '#/api/permission/position';
|
import { getUserList } from '#/api/permission/user';
|
import { $t } from '#/locales';
|
import { useOrganizeStore } from '#/store';
|
|
interface State {
|
activeKey: string;
|
allList: any[];
|
finish: boolean;
|
innerValue: any[] | string | undefined;
|
lastList: any[];
|
lastLoading: boolean;
|
listActiveKey: string;
|
loading: boolean;
|
options: any[];
|
orgLoading: boolean;
|
orgTreeData: any[];
|
parentId: string;
|
query: any;
|
selectedData: any[];
|
selectedIds: any[];
|
treeData: any[];
|
userQuery: any;
|
}
|
|
const props = defineProps({
|
multiple: { default: true, type: Boolean },
|
required: { default: false, type: Boolean },
|
modalTitle: { default: '选择用户', type: String },
|
});
|
const emit = defineEmits(['register', 'confirm']);
|
|
const [registerModal, { changeLoading, changeOkLoading, closeModal }] = useModalInner(init);
|
const organizeStore = useOrganizeStore();
|
const globSetting = useGlobSetting();
|
const userStore = useUserStore();
|
const { createMessage } = useMessage();
|
const apiUrl = ref(globSetting.apiURL);
|
const orgTreeRef = ref<Nullable<TreeActionType>>(null);
|
const posTreeRef = ref<Nullable<TreeActionType>>(null);
|
const infiniteBody = ref<Nullable<ScrollActionType>>(null);
|
const state = reactive<State>({
|
activeKey: '',
|
allList: [],
|
finish: false,
|
innerValue: '',
|
lastList: [],
|
lastLoading: false,
|
loading: false,
|
options: [],
|
orgLoading: false,
|
orgTreeData: [],
|
parentId: '0',
|
query: {
|
currentPage: 1,
|
hasPage: 0,
|
keyword: '',
|
pageSize: 20,
|
},
|
selectedData: [],
|
selectedIds: [],
|
treeData: [],
|
userQuery: {},
|
listActiveKey: '',
|
});
|
const { activeKey, lastList, lastLoading, query, selectedData, selectedIds, treeData, listActiveKey } = toRefs(state);
|
const defaultUserQuery = {
|
enabledMark: 1,
|
groupId: '',
|
organizeId: '',
|
positionId: '',
|
roleId: '',
|
};
|
const debounceHandleSearch = useDebounceFn(handleSearch, 300);
|
|
const getCurrList: any = computed(() => {
|
const userInfo: any = userStore.getUserInfo || {};
|
const current = {
|
fullName: `${userInfo.userName}/${userInfo.userAccount}`,
|
headIcon: userInfo.headIcon,
|
id: userInfo.userId,
|
realName: userInfo.userName,
|
};
|
return [current];
|
});
|
const getOrgTreeBindValue = computed(() => {
|
const key = Date.now();
|
const data: any = {
|
key,
|
loadData: onLoadData,
|
loading: state.orgLoading,
|
onSelect: handleOrgSelect,
|
treeData: state.orgTreeData,
|
};
|
return data;
|
});
|
const getPosTreeBindValue = computed(() => {
|
const key = Date.now() + 1000;
|
const data: any = {
|
defaultExpandAll: true,
|
key,
|
loading: state.loading,
|
onSelect: handleSelect,
|
treeData: state.treeData,
|
};
|
return data;
|
});
|
|
watch(
|
() => state.selectedData,
|
(val) => {
|
state.selectedIds = val.map((o) => o.id);
|
},
|
{ deep: true },
|
);
|
|
function init() {
|
changeLoading(true);
|
state.activeKey = '1';
|
onTabChange();
|
changeLoading(false);
|
}
|
function onTabChange() {
|
state.query.hasPage = 0;
|
state.query.keyword = '';
|
initData();
|
nextTick(() => {
|
bindScroll();
|
});
|
}
|
function handleSearch(e) {
|
const value = e.target.value;
|
if (state.lastLoading) return;
|
if (state.activeKey !== '1') state.activeKey = '1';
|
state.query.keyword = value || '';
|
state.query.hasPage = state.query.keyword ? 1 : 0;
|
if (state.query.hasPage) {
|
state.userQuery = { ...defaultUserQuery };
|
nextTick(() => {
|
bindScroll();
|
});
|
}
|
initData();
|
}
|
function handleOrgSelect(keys) {
|
if (keys.length === 0) return;
|
const data = getOrgTree().getSelectedNode(keys[0]);
|
state.activeKey == 'organize' ? handleListNodeClick(data) : getPosTreeData(keys[0]);
|
}
|
// 获取岗位树
|
function getPosTreeData(id) {
|
state.loading = true;
|
getPositionSelectorTree({ organizeId: id })
|
.then((res) => {
|
state.treeData = res.data.list || [];
|
if (state.treeData.length > 0) {
|
nextTick(() => {
|
if (state.activeKey !== 'position') return;
|
const keys = [state.treeData[0].id];
|
getPosTree().setSelectedKeys(keys);
|
handleSelect(keys);
|
});
|
} else {
|
state.lastList = [];
|
}
|
state.loading = false;
|
})
|
.catch(() => {
|
state.loading = false;
|
});
|
}
|
function handleSelect(keys) {
|
if (keys.length === 0) return;
|
const data = getPosTree().getSelectedNode(keys[0]);
|
handleListNodeClick(data);
|
}
|
function handleListNodeClick(data) {
|
state.listActiveKey = data.id;
|
const key = `${state.activeKey === '1' ? 'group' : state.activeKey}Id`;
|
state.userQuery = { ...defaultUserQuery, [key]: state.listActiveKey };
|
state.lastList = [];
|
state.finish = false;
|
state.query.currentPage = 1;
|
getLastList();
|
}
|
function handleNodeClick(data) {
|
const index = state.selectedData.findIndex((o) => o.id === data.id);
|
if (index !== -1) return state.selectedData.splice(index, 1);
|
props.multiple ? state.selectedData.push(data) : (state.selectedData = [data]);
|
}
|
function removeAll() {
|
state.selectedData = [];
|
}
|
function removeData(index: number) {
|
state.selectedData.splice(index, 1);
|
}
|
function getOrgTree() {
|
const tree = unref(orgTreeRef);
|
if (!tree) {
|
throw new Error('tree is null!');
|
}
|
return tree;
|
}
|
function getPosTree() {
|
const tree = unref(posTreeRef);
|
if (!tree) {
|
throw new Error('tree is null!');
|
}
|
return tree;
|
}
|
function handleSubmit() {
|
if (props.required && !state.selectedData.length) {
|
createMessage.warning('至少选择一个用户');
|
return;
|
}
|
changeOkLoading(true);
|
emit('confirm', state.selectedData);
|
closeModal();
|
}
|
function bindScroll() {
|
const bodyRef = infiniteBody.value;
|
const vBody = bodyRef?.getScrollWrap();
|
vBody?.addEventListener('scroll', () => {
|
if (vBody.scrollTop > 0 && vBody.scrollHeight - vBody.clientHeight - vBody.scrollTop <= 200 && !state.lastLoading && !state.finish) {
|
state.query.currentPage += 1;
|
getLastList();
|
}
|
});
|
}
|
function onLoadData(node) {
|
state.parentId = node.id;
|
return new Promise((resolve: (value?: unknown) => void) => {
|
getOrganizeSelector({ parentId: state.parentId }).then((res) => {
|
const list = res.data.list;
|
getOrgTree().updateNodeByKey(node.eventKey, { isLeaf: list.length === 0, children: list });
|
resolve();
|
});
|
});
|
}
|
function getOrgList() {
|
state.orgLoading = true;
|
getOrganizeSelector({ parentId: state.parentId })
|
.then((res) => {
|
state.orgTreeData = res.data.list;
|
if (state.orgTreeData.length > 0 && state.parentId == '0') {
|
nextTick(() => {
|
const keys = [state.orgTreeData[0].id];
|
getOrgTree().setSelectedKeys(keys);
|
handleOrgSelect(keys);
|
});
|
}
|
state.orgLoading = false;
|
})
|
.catch(() => {
|
state.orgLoading = false;
|
});
|
}
|
function getLastList() {
|
const oldActiveKey = state.activeKey;
|
state.lastLoading = true;
|
const query = { ...state.query, ...state.userQuery };
|
getUserList(query)
|
.then((res) => {
|
state.lastLoading = false;
|
if (state.activeKey !== oldActiveKey) return;
|
state.finish = res.data.list.length < state.query.pageSize;
|
state.lastList = [...state.lastList, ...res.data.list];
|
})
|
.catch(() => {
|
state.lastLoading = false;
|
});
|
}
|
async function initData() {
|
state.parentId = '0';
|
state.query.currentPage = 1;
|
state.finish = false;
|
state.orgTreeData = [];
|
state.treeData = [];
|
state.lastList = [];
|
state.listActiveKey = '';
|
switch (state.activeKey) {
|
case '1': {
|
if (state.query.keyword) return getLastList();
|
const res = await organizeStore.getGroupList();
|
state.treeData = [{ fullName: '全部用户', icon: 'icon-ym icon-ym-generator-group1', id: '' }, ...res];
|
handleListNodeClick(state.treeData[0]);
|
break;
|
}
|
case 'current': {
|
state.lastList = unref(getCurrList);
|
break;
|
}
|
case 'organize':
|
case 'position': {
|
getOrgList();
|
break;
|
}
|
case 'role': {
|
state.treeData = await organizeStore.getRoleList();
|
state.treeData[0] && handleListNodeClick(state.treeData[0]);
|
break;
|
}
|
default: {
|
state.treeData = [];
|
}
|
}
|
}
|
</script>
|
<template>
|
<BasicModal v-bind="$attrs" @register="registerModal" :title="modalTitle" :width="800" @ok="handleSubmit" destroy-on-close class="common-select-modal">
|
<template #insertFooter v-if="multiple">
|
<div class="float-left">
|
<span class="mr-[10px]">{{ $t('component.jnpf.common.selected') }}({{ selectedData.length }})</span>
|
<span class="remove-all-btn" @click="removeAll">{{ $t('component.jnpf.common.clearAll') }}</span>
|
</div>
|
</template>
|
<div class="common-select-modal-main">
|
<div class="selected-pane">
|
<Tag v-for="(item, i) in selectedData" :key="item.id" :closable="true" class="selected-pane-tag" @close="removeData(i)">
|
{{ item.fullName }}
|
</Tag>
|
</div>
|
<div class="select-pane">
|
<div class="select-pane-tool">
|
<Tabs v-model:active-key="activeKey" :tab-bar-gutter="20" class="select-pane-tool-tabs" @change="onTabChange">
|
<TabPane key="1" tab="用户" />
|
<TabPane key="organize" tab="组织架构" />
|
<TabPane key="position" tab="岗位" />
|
<TabPane key="role" tab="角色" />
|
<TabPane key="current" tab="当前用户" />
|
<template #rightExtra>
|
<Input v-model:value="query.keyword" :placeholder="$t('common.enterKeyword')" allow-clear @change="debounceHandleSearch" />
|
</template>
|
</Tabs>
|
<div class="select-pane-main">
|
<template v-if="!query.hasPage">
|
<ScrollContainer class="select-pane-list select-pane-item" v-if="activeKey === '1' || activeKey === 'role'">
|
<div
|
v-for="(item, i) in treeData"
|
:key="i"
|
class="select-pane-list__item"
|
:class="{ 'select-pane-list__item-active': listActiveKey === item.id }"
|
@click="handleListNodeClick(item)">
|
<div class="select-pane-list__item-title">
|
<i :class="item.icon" v-if="item.icon" class="mr-[6px]"></i>
|
<span :title="item.fullName">{{ item.fullName }}</span>
|
</div>
|
</div>
|
<jnpf-empty v-if="treeData.length === 0" />
|
</ScrollContainer>
|
<BasicTree
|
ref="orgTreeRef"
|
class="tree-main select-pane-item"
|
v-bind="getOrgTreeBindValue"
|
v-if="activeKey === 'organize' || activeKey === 'position'" />
|
<BasicTree ref="posTreeRef" class="tree-main select-pane-item" v-bind="getPosTreeBindValue" v-if="activeKey === 'position'" />
|
</template>
|
<ScrollContainer class="select-pane-list select-pane-item" ref="infiniteBody" v-loading="lastLoading && query.currentPage === 1">
|
<div v-for="(item, i) in lastList" :key="i" class="select-pane-list__item" @click="handleNodeClick(item)">
|
<div class="select-pane-list__item-title">
|
<Avatar :size="26" :src="apiUrl + item.headIcon" class="select-pane-list__item--headIcon" v-if="item.headIcon" />
|
<i :class="item.icon" class="mr-[6px]" v-if="item.icon && !item.headIcon"></i>
|
<span :title="item.fullName">{{ item.fullName }}</span>
|
</div>
|
<div class="select-pane-list__item-action">
|
<Checkbox :checked="selectedIds.includes(item.id)" v-if="multiple" />
|
<Radio :checked="selectedIds.includes(item.id)" v-else />
|
</div>
|
</div>
|
<jnpf-empty v-if="lastList.length === 0" />
|
</ScrollContainer>
|
</div>
|
</div>
|
</div>
|
</div>
|
</BasicModal>
|
</template>
|
