788 lines
22 KiB
Vue
788 lines
22 KiB
Vue
<script setup lang="tsx">
|
|
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
|
|
import type { TableInstance } from 'element-plus';
|
|
import { ElButton, ElPopconfirm, ElSwitch, ElTag } from 'element-plus';
|
|
import dayjs from 'dayjs';
|
|
import type { FlatResponseData } from '@sa/axios';
|
|
import { userGenderRecord } from '@/constants/business';
|
|
import {
|
|
fetchBatchDeleteUser,
|
|
fetchDeleteDept,
|
|
fetchDeleteUser,
|
|
fetchGetDeptList,
|
|
fetchGetDictDataByCode,
|
|
fetchGetPostSimpleList,
|
|
fetchGetRoleSimpleList,
|
|
fetchGetUser,
|
|
fetchGetUserPage,
|
|
fetchUpdateUser,
|
|
fetchUpdateUserStatus
|
|
} from '@/service/api';
|
|
import { useUIPaginatedTable } from '@/hooks/common/table';
|
|
import BusinessTableActionCell from '@/components/custom/business-table-action-cell';
|
|
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
|
|
import { $t } from '@/locales';
|
|
import { buildMenuTree } from '@/views/system/shared/menu-tree';
|
|
import UserManagementRelation from '@/views/system/user-management-relation/index.vue';
|
|
import UserOperateDialog from './modules/user-operate-dialog.vue';
|
|
import UserOrgLeaderDialog from './modules/user-org-leader-dialog.vue';
|
|
import UserOrgOperateDialog from './modules/user-org-operate-dialog.vue';
|
|
import UserOrgPanel from './modules/user-org-panel.vue';
|
|
import UserResignedDialog from './modules/user-resigned-dialog.vue';
|
|
import UserResetPasswordDialog from './modules/user-reset-password-dialog.vue';
|
|
import UserSearch from './modules/user-search.vue';
|
|
|
|
defineOptions({ name: 'UserManage' });
|
|
|
|
function getInitSearchParams(): Api.SystemManage.UserSearchParams {
|
|
return {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
nickname: undefined,
|
|
mobile: undefined,
|
|
status: undefined,
|
|
deptId: undefined,
|
|
roleId: undefined,
|
|
company: undefined
|
|
};
|
|
}
|
|
|
|
function createEmptyUserPageResult(): Promise<FlatResponseData<any, Api.SystemManage.UserList>> {
|
|
return Promise.resolve({
|
|
data: {
|
|
list: [],
|
|
total: 0
|
|
},
|
|
error: null,
|
|
response: undefined
|
|
} as unknown as FlatResponseData<any, Api.SystemManage.UserList>);
|
|
}
|
|
|
|
function transformUserPage(
|
|
response: FlatResponseData<any, Api.SystemManage.UserList>,
|
|
pageNo: number,
|
|
pageSize: number
|
|
) {
|
|
if (!response.error) {
|
|
return {
|
|
data: response.data.list,
|
|
pageNum: pageNo,
|
|
pageSize,
|
|
total: response.data.total
|
|
};
|
|
}
|
|
|
|
return {
|
|
data: [],
|
|
pageNum: pageNo,
|
|
pageSize,
|
|
total: 0
|
|
};
|
|
}
|
|
|
|
function formatTime(value?: number | null) {
|
|
if (!value) {
|
|
return '--';
|
|
}
|
|
|
|
return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
|
|
}
|
|
|
|
function getNullableLabel(value?: string | null) {
|
|
return value?.trim() || '--';
|
|
}
|
|
|
|
type UserResignedState = 'active' | 'pending' | 'resigned';
|
|
|
|
function getUserResignedState(row: Api.SystemManage.User): UserResignedState {
|
|
if (!row.resignedAt) {
|
|
return 'active';
|
|
}
|
|
|
|
return row.resignedAt > Date.now() ? 'pending' : 'resigned';
|
|
}
|
|
|
|
function getResignedActionConfig(row: Api.SystemManage.User) {
|
|
const state = getUserResignedState(row);
|
|
|
|
if (state === 'active') {
|
|
return {
|
|
label: $t('page.system.user.resignUser'),
|
|
buttonType: 'warning' as const
|
|
};
|
|
}
|
|
|
|
if (state === 'pending') {
|
|
return {
|
|
label: $t('page.system.user.adjustResignUser'),
|
|
buttonType: 'warning' as const
|
|
};
|
|
}
|
|
|
|
return {
|
|
label: $t('page.system.user.restoreUser'),
|
|
buttonType: 'success' as const
|
|
};
|
|
}
|
|
|
|
const searchParams = reactive(getInitSearchParams());
|
|
const deptLoading = ref(false);
|
|
const userTableRef = ref<TableInstance>();
|
|
const userCheckedRowKeys = ref<number[]>([]);
|
|
const statusLoadingIds = ref<number[]>([]);
|
|
const deptList = ref<Api.SystemManage.Dept[]>([]);
|
|
const currentDeptId = ref<number | null>(null);
|
|
const operateVisible = ref(false);
|
|
const operateType = ref<UI.TableOperateType>('add');
|
|
const editingUserId = ref<number | null>(null);
|
|
const postOptions = ref<Api.SystemManage.PostSimple[]>([]);
|
|
const roleOptions = ref<Api.SystemManage.RoleSimple[]>([]);
|
|
const companyOptions = ref<any>([]);
|
|
const orgCodeOptions = ref<any>([]);
|
|
const resetPasswordVisible = ref(false);
|
|
const resetPasswordUserId = ref<number | null>(null);
|
|
const resetPasswordUsername = ref<string | null>(null);
|
|
const resignedVisible = ref(false);
|
|
const resignedUserId = ref<number | null>(null);
|
|
const resignedUsername = ref<string | null>(null);
|
|
const resignedAt = ref<number | null>(null);
|
|
const orgOperateVisible = ref(false);
|
|
const orgOperateType = ref<UI.TableOperateType>('add');
|
|
const editingDeptData = ref<Api.SystemManage.Dept | null>(null);
|
|
const orgParentId = ref<number | null>(0);
|
|
const orgLeaderVisible = ref(false);
|
|
const leaderDeptData = ref<Api.SystemManage.Dept | null>(null);
|
|
const userManagementRelationVisible = ref(false);
|
|
|
|
const deptTree = computed(() => buildMenuTree(deptList.value));
|
|
const currentDept = computed(() => deptList.value.find(item => item.id === currentDeptId.value) ?? null);
|
|
const deptCount = computed(() => deptList.value.length);
|
|
|
|
const { columns, columnChecks, data, loading, getDataByPage, mobilePagination } = useUIPaginatedTable<
|
|
FlatResponseData<any, Api.SystemManage.UserList>,
|
|
Api.SystemManage.User
|
|
>({
|
|
paginationProps: {
|
|
currentPage: searchParams.pageNo,
|
|
pageSize: searchParams.pageSize
|
|
},
|
|
api: () => {
|
|
if (!currentDeptId.value) {
|
|
return createEmptyUserPageResult();
|
|
}
|
|
|
|
return fetchGetUserPage({
|
|
...searchParams,
|
|
deptId: currentDeptId.value
|
|
});
|
|
},
|
|
transform: response => transformUserPage(response, searchParams.pageNo ?? 1, searchParams.pageSize ?? 10),
|
|
onPaginationParamsChange: params => {
|
|
searchParams.pageNo = params.currentPage ?? 1;
|
|
searchParams.pageSize = params.pageSize ?? 10;
|
|
},
|
|
columns: () => [
|
|
{ prop: 'selection', type: 'selection', width: 48 },
|
|
{ prop: 'index', type: 'index', label: $t('common.index'), width: 64 },
|
|
{ prop: 'username', label: $t('page.system.user.userName'), minWidth: 140, showOverflowTooltip: true },
|
|
{
|
|
prop: 'nickname',
|
|
label: $t('page.system.user.nickName'),
|
|
minWidth: 120,
|
|
formatter: row => getNullableLabel(row.nickname)
|
|
},
|
|
{
|
|
prop: 'deptName',
|
|
label: $t('page.system.user.deptName'),
|
|
minWidth: 180,
|
|
showOverflowTooltip: true,
|
|
formatter: row => getNullableLabel(row.deptName)
|
|
},
|
|
{
|
|
prop: 'company',
|
|
label: '所属公司',
|
|
minWidth: 140,
|
|
showOverflowTooltip: true,
|
|
formatter: row => {
|
|
const companyItem = companyOptions.value.find((item: any) => item.value === row.company);
|
|
return companyItem?.label || '--';
|
|
}
|
|
},
|
|
{
|
|
prop: 'positionName',
|
|
label: $t('page.system.user.positionName'),
|
|
minWidth: 200,
|
|
showOverflowTooltip: true,
|
|
formatter: row => getNullableLabel(row.positionName)
|
|
},
|
|
{
|
|
prop: 'mobile',
|
|
label: $t('page.system.user.userPhone'),
|
|
width: 140,
|
|
formatter: row => getNullableLabel(row.mobile)
|
|
},
|
|
{
|
|
prop: 'email',
|
|
label: $t('page.system.user.userEmail'),
|
|
minWidth: 180,
|
|
showOverflowTooltip: true,
|
|
formatter: row => getNullableLabel(row.email)
|
|
},
|
|
{
|
|
prop: 'sex',
|
|
label: $t('page.system.user.userGender'),
|
|
width: 100,
|
|
align: 'center',
|
|
formatter: row => {
|
|
const value = row.sex ?? 0;
|
|
const tagMap: Record<Api.SystemManage.UserGender, UI.ThemeColor> = {
|
|
0: 'info',
|
|
1: 'primary',
|
|
2: 'danger'
|
|
};
|
|
|
|
return <ElTag type={tagMap[value]}>{$t(userGenderRecord[value])}</ElTag>;
|
|
}
|
|
},
|
|
{
|
|
prop: 'status',
|
|
label: $t('page.system.user.userStatus'),
|
|
width: 110,
|
|
align: 'center',
|
|
formatter: row => (
|
|
<ElSwitch
|
|
modelValue={row.status === 0}
|
|
loading={statusLoadingIds.value.includes(row.id)}
|
|
inlinePrompt
|
|
activeText={$t('page.system.common.status.enable')}
|
|
inactiveText={$t('page.system.common.status.disable')}
|
|
onChange={value => handleToggleStatus(row, Boolean(value))}
|
|
/>
|
|
)
|
|
},
|
|
{
|
|
prop: 'resignedAt',
|
|
label: $t('page.system.user.resignedAt'),
|
|
minWidth: 170,
|
|
formatter: row => formatTime(row.resignedAt)
|
|
},
|
|
{
|
|
prop: 'resignedState',
|
|
label: $t('page.system.user.resignedState'),
|
|
width: 110,
|
|
align: 'center',
|
|
formatter: row => {
|
|
const state = getUserResignedState(row);
|
|
const stateMap: Record<UserResignedState, { type: UI.ThemeColor; label: App.I18n.I18nKey }> = {
|
|
active: { type: 'success', label: 'page.system.user.resignedStateEnum.active' },
|
|
pending: { type: 'warning', label: 'page.system.user.resignedStateEnum.pending' },
|
|
resigned: { type: 'info', label: 'page.system.user.resignedStateEnum.resigned' }
|
|
};
|
|
|
|
return <ElTag type={stateMap[state].type}>{$t(stateMap[state].label)}</ElTag>;
|
|
}
|
|
},
|
|
{
|
|
prop: 'loginDate',
|
|
label: $t('page.system.user.loginDate'),
|
|
minWidth: 170,
|
|
formatter: row => formatTime(row.loginDate)
|
|
},
|
|
{
|
|
prop: 'createTime',
|
|
label: $t('page.system.user.createTime'),
|
|
minWidth: 170,
|
|
formatter: row => formatTime(row.createTime)
|
|
},
|
|
{
|
|
prop: 'operate',
|
|
label: $t('common.operate'),
|
|
width: 210,
|
|
align: 'center',
|
|
fixed: 'right',
|
|
formatter: row => (
|
|
<BusinessTableActionCell
|
|
actions={[
|
|
{
|
|
key: 'edit',
|
|
label: $t('common.edit'),
|
|
buttonType: 'primary',
|
|
onClick: () => openEdit(row.id)
|
|
},
|
|
{
|
|
key: 'reset-password',
|
|
label: $t('page.system.user.resetPassword'),
|
|
buttonType: 'warning',
|
|
onClick: () => openResetPassword(row)
|
|
},
|
|
{
|
|
key: 'resigned',
|
|
label: getResignedActionConfig(row).label,
|
|
buttonType: getResignedActionConfig(row).buttonType,
|
|
onClick: () => handleResignedAction(row)
|
|
},
|
|
{
|
|
key: 'delete',
|
|
label: $t('common.delete'),
|
|
buttonType: 'danger',
|
|
onClick: () => handleDeleteAction(row)
|
|
}
|
|
]}
|
|
/>
|
|
)
|
|
}
|
|
]
|
|
});
|
|
|
|
async function loadDeptTree() {
|
|
deptLoading.value = true;
|
|
|
|
const { error, data: deptItems } = await fetchGetDeptList({
|
|
status: 0
|
|
});
|
|
|
|
deptLoading.value = false;
|
|
|
|
if (error) {
|
|
deptList.value = [];
|
|
currentDeptId.value = null;
|
|
return;
|
|
}
|
|
|
|
deptList.value = deptItems;
|
|
|
|
if (!deptItems.length) {
|
|
currentDeptId.value = null;
|
|
return;
|
|
}
|
|
|
|
const matched = deptItems.find(item => item.id === currentDeptId.value);
|
|
currentDeptId.value = matched?.id ?? deptItems[0].id;
|
|
}
|
|
|
|
async function loadFormOptions() {
|
|
const [postResult, roleResult, companyResult, orgCodeResult] = await Promise.all([
|
|
fetchGetPostSimpleList(),
|
|
fetchGetRoleSimpleList(),
|
|
fetchGetDictDataByCode('system_user_company'),
|
|
fetchGetDictDataByCode('rdms_object_direction')
|
|
]);
|
|
|
|
if (!postResult.error) {
|
|
postOptions.value = postResult.data;
|
|
}
|
|
|
|
if (!roleResult.error) {
|
|
roleOptions.value = roleResult.data.filter(item => item.status === 0);
|
|
}
|
|
|
|
if (!companyResult.error) {
|
|
companyOptions.value = companyResult.data;
|
|
}
|
|
|
|
if (!orgCodeResult.error) {
|
|
orgCodeOptions.value = orgCodeResult.data;
|
|
}
|
|
}
|
|
|
|
async function reloadUserTable(page = searchParams.pageNo) {
|
|
userCheckedRowKeys.value = [];
|
|
await getDataByPage(page);
|
|
await nextTick();
|
|
userTableRef.value?.clearSelection();
|
|
}
|
|
|
|
function handleDeptSelect(nodeData: Api.SystemManage.Dept) {
|
|
currentDeptId.value = nodeData.id;
|
|
}
|
|
|
|
function handleUserSelectionChange(rows: Api.SystemManage.User[]) {
|
|
userCheckedRowKeys.value = rows.map(item => item.id);
|
|
}
|
|
|
|
function openAdd() {
|
|
operateType.value = 'add';
|
|
editingUserId.value = null;
|
|
operateVisible.value = true;
|
|
}
|
|
|
|
function openEdit(id: number) {
|
|
operateType.value = 'edit';
|
|
editingUserId.value = id;
|
|
operateVisible.value = true;
|
|
}
|
|
|
|
function openResetPassword(row: Api.SystemManage.User) {
|
|
resetPasswordUserId.value = row.id;
|
|
resetPasswordUsername.value = row.username;
|
|
resetPasswordVisible.value = true;
|
|
}
|
|
|
|
function openResignedDialog(row: Api.SystemManage.User) {
|
|
resignedUserId.value = row.id;
|
|
resignedUsername.value = row.username;
|
|
resignedAt.value = row.resignedAt ?? null;
|
|
resignedVisible.value = true;
|
|
}
|
|
|
|
function openAddRootOrg() {
|
|
orgOperateType.value = 'add';
|
|
editingDeptData.value = null;
|
|
orgParentId.value = 0;
|
|
orgOperateVisible.value = true;
|
|
}
|
|
|
|
function openAddChildOrg(row: Api.SystemManage.Dept) {
|
|
orgOperateType.value = 'add';
|
|
editingDeptData.value = null;
|
|
orgParentId.value = row.id;
|
|
orgOperateVisible.value = true;
|
|
}
|
|
|
|
function openEditOrg(row: Api.SystemManage.Dept) {
|
|
orgOperateType.value = 'edit';
|
|
editingDeptData.value = row;
|
|
orgParentId.value = row.parentId;
|
|
orgOperateVisible.value = true;
|
|
}
|
|
|
|
function openOrgLeader(row: Api.SystemManage.Dept) {
|
|
leaderDeptData.value = row;
|
|
orgLeaderVisible.value = true;
|
|
}
|
|
|
|
async function handleDeleteDeptAction(row: Api.SystemManage.Dept) {
|
|
const { error } = await fetchDeleteDept(row.id);
|
|
|
|
if (error) {
|
|
return;
|
|
}
|
|
|
|
if (currentDeptId.value === row.id) {
|
|
currentDeptId.value = null;
|
|
}
|
|
|
|
window.$message?.success($t('common.deleteSuccess'));
|
|
await loadDeptTree();
|
|
}
|
|
|
|
async function handleDeleteAction(row: Api.SystemManage.User) {
|
|
try {
|
|
await window.$messageBox?.confirm($t('common.confirmDelete'), $t('common.warning'), {
|
|
confirmButtonText: $t('common.confirm'),
|
|
cancelButtonText: $t('common.cancel'),
|
|
type: 'warning'
|
|
});
|
|
} catch {
|
|
return;
|
|
}
|
|
|
|
const { error } = await fetchDeleteUser(row.id);
|
|
|
|
if (error) {
|
|
return;
|
|
}
|
|
|
|
window.$message?.success($t('common.deleteSuccess'));
|
|
await reloadUserTable();
|
|
}
|
|
|
|
async function updateUserResignedAt(userId: number, value: number | null) {
|
|
const detailResult = await fetchGetUser(userId);
|
|
|
|
if (detailResult.error) {
|
|
return false;
|
|
}
|
|
|
|
const user = detailResult.data;
|
|
|
|
const { error } = await fetchUpdateUser({
|
|
id: userId,
|
|
username: user.username,
|
|
nickname: user.nickname ?? null,
|
|
remark: user.remark ?? null,
|
|
deptId: user.deptId,
|
|
positionId: user.positionId ?? null,
|
|
resignedAt: value,
|
|
email: user.email ?? null,
|
|
mobile: user.mobile ?? null,
|
|
sex: user.sex ?? 0,
|
|
avatar: user.avatar ?? null
|
|
});
|
|
|
|
return !error;
|
|
}
|
|
|
|
async function handleRestoreUser(row: Api.SystemManage.User) {
|
|
try {
|
|
await window.$messageBox?.confirm($t('common.confirmDelete'), $t('page.system.user.restoreUser'), {
|
|
confirmButtonText: $t('common.confirm'),
|
|
cancelButtonText: $t('common.cancel'),
|
|
type: 'warning'
|
|
});
|
|
} catch {
|
|
return;
|
|
}
|
|
|
|
const success = await updateUserResignedAt(row.id, null);
|
|
|
|
if (!success) {
|
|
return;
|
|
}
|
|
|
|
window.$message?.success($t('common.updateSuccess'));
|
|
await reloadUserTable();
|
|
}
|
|
|
|
async function handleResignedAction(row: Api.SystemManage.User) {
|
|
if (getUserResignedState(row) === 'resigned') {
|
|
await handleRestoreUser(row);
|
|
return;
|
|
}
|
|
|
|
openResignedDialog(row);
|
|
}
|
|
|
|
async function handleBatchDelete() {
|
|
if (!userCheckedRowKeys.value.length) {
|
|
return;
|
|
}
|
|
|
|
const { error } = await fetchBatchDeleteUser(userCheckedRowKeys.value);
|
|
|
|
if (error) {
|
|
return;
|
|
}
|
|
|
|
window.$message?.success($t('common.deleteSuccess'));
|
|
await reloadUserTable();
|
|
}
|
|
|
|
async function handleToggleStatus(row: Api.SystemManage.User, enabled: boolean) {
|
|
statusLoadingIds.value = [...statusLoadingIds.value, row.id];
|
|
|
|
const { error } = await fetchUpdateUserStatus({
|
|
id: row.id,
|
|
status: enabled ? 0 : 1
|
|
});
|
|
|
|
statusLoadingIds.value = statusLoadingIds.value.filter(item => item !== row.id);
|
|
|
|
if (error) {
|
|
return;
|
|
}
|
|
|
|
row.status = enabled ? 0 : 1;
|
|
window.$message?.success($t('common.updateSuccess'));
|
|
}
|
|
|
|
async function handleSearch() {
|
|
await reloadUserTable(1);
|
|
}
|
|
|
|
async function handleResetSearch() {
|
|
const pageSize = searchParams.pageSize;
|
|
|
|
Object.assign(searchParams, getInitSearchParams(), {
|
|
pageSize,
|
|
deptId: currentDeptId.value ?? undefined
|
|
});
|
|
|
|
await reloadUserTable(1);
|
|
}
|
|
|
|
async function handleSubmitted() {
|
|
operateVisible.value = false;
|
|
await reloadUserTable();
|
|
}
|
|
|
|
async function handleResignedSubmitted() {
|
|
resignedVisible.value = false;
|
|
await reloadUserTable();
|
|
}
|
|
|
|
async function handleDeptSubmitted(deptId: number) {
|
|
orgOperateVisible.value = false;
|
|
await loadDeptTree();
|
|
currentDeptId.value = deptId;
|
|
}
|
|
|
|
watch(currentDeptId, async (value, oldValue) => {
|
|
if (!value || value === oldValue) {
|
|
return;
|
|
}
|
|
|
|
const pageSize = searchParams.pageSize;
|
|
|
|
Object.assign(searchParams, getInitSearchParams(), {
|
|
pageSize,
|
|
deptId: value
|
|
});
|
|
|
|
await reloadUserTable(1);
|
|
});
|
|
|
|
onMounted(async () => {
|
|
await Promise.all([loadDeptTree(), loadFormOptions()]);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="min-h-560px gap-16px overflow-hidden xl:grid xl:grid-cols-[320px_minmax(0,1fr)] lt-xl:flex lt-xl:flex-col lt-xl:overflow-auto"
|
|
>
|
|
<div class="flex-col-stretch gap-16px xl:min-h-0">
|
|
<UserOrgPanel
|
|
:loading="deptLoading"
|
|
:tree-data="deptTree"
|
|
:current-dept-id="currentDeptId"
|
|
:total="deptCount"
|
|
@add-root="openAddRootOrg"
|
|
@add-child="openAddChildOrg"
|
|
@leader="openOrgLeader"
|
|
@edit="openEditOrg"
|
|
@delete="handleDeleteDeptAction"
|
|
@refresh="loadDeptTree"
|
|
@select="handleDeptSelect"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex-col-stretch gap-16px xl:min-h-0">
|
|
<UserSearch
|
|
v-model:model="searchParams"
|
|
:role-options="roleOptions"
|
|
:company-options="companyOptions"
|
|
:disabled="!currentDept"
|
|
@reset="handleResetSearch"
|
|
@search="handleSearch"
|
|
/>
|
|
|
|
<ElCard class="card-wrapper xl:flex-1-hidden" body-class="user-table-card-body">
|
|
<template #header>
|
|
<div class="flex items-center justify-between gap-12px">
|
|
<div class="flex flex-wrap items-center gap-8px">
|
|
<p>{{ $t('page.system.user.title') }}</p>
|
|
<ElTag v-if="currentDept" type="primary" effect="light">
|
|
{{ currentDept.name }}
|
|
</ElTag>
|
|
<ElTag effect="plain">{{ mobilePagination.total || data.length }}</ElTag>
|
|
</div>
|
|
<TableHeaderOperation v-model:columns="columnChecks" :loading="loading" @refresh="reloadUserTable">
|
|
<template #default>
|
|
<ElButton plain type="primary" :disabled="!currentDept" @click="openAdd">
|
|
<template #icon>
|
|
<icon-ic-round-plus class="text-icon" />
|
|
</template>
|
|
{{ $t('common.add') }}
|
|
</ElButton>
|
|
<ElButton plain type="primary" :disabled="!currentDept" @click="userManagementRelationVisible = true">
|
|
<template #icon>
|
|
<icon-ic-round-plus class="text-icon" />
|
|
</template>
|
|
管理链路
|
|
</ElButton>
|
|
<ElPopconfirm :title="$t('common.confirmDelete')" @confirm="handleBatchDelete">
|
|
<template #reference>
|
|
<ElButton type="danger" plain :disabled="userCheckedRowKeys.length === 0">
|
|
<template #icon>
|
|
<icon-ic-round-delete class="text-icon" />
|
|
</template>
|
|
{{ $t('common.batchDelete') }}
|
|
</ElButton>
|
|
</template>
|
|
</ElPopconfirm>
|
|
</template>
|
|
</TableHeaderOperation>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-if="currentDept">
|
|
<div class="flex-1">
|
|
<ElTable
|
|
ref="userTableRef"
|
|
v-loading="loading"
|
|
height="100%"
|
|
border
|
|
row-key="id"
|
|
:data="data"
|
|
@selection-change="handleUserSelectionChange"
|
|
>
|
|
<ElTableColumn v-for="col in columns" :key="String(col.prop)" v-bind="col" />
|
|
</ElTable>
|
|
</div>
|
|
<div class="mt-20px flex justify-end">
|
|
<ElPagination
|
|
v-if="mobilePagination.total"
|
|
layout="total,prev,pager,next,sizes"
|
|
v-bind="mobilePagination"
|
|
@current-change="mobilePagination['current-change']"
|
|
@size-change="mobilePagination['size-change']"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<div v-else class="h-full flex items-center justify-center">
|
|
<ElEmpty :description="$t('page.system.user.emptyOrg')" />
|
|
</div>
|
|
</ElCard>
|
|
</div>
|
|
|
|
<UserOperateDialog
|
|
v-model:visible="operateVisible"
|
|
:operate-type="operateType"
|
|
:user-id="editingUserId"
|
|
:current-dept-id="currentDeptId"
|
|
:dept-tree="deptTree"
|
|
:post-options="postOptions"
|
|
:role-options="roleOptions"
|
|
:company-options="companyOptions"
|
|
@submitted="handleSubmitted"
|
|
/>
|
|
|
|
<UserResetPasswordDialog
|
|
v-model:visible="resetPasswordVisible"
|
|
:user-id="resetPasswordUserId"
|
|
:username="resetPasswordUsername"
|
|
/>
|
|
|
|
<UserResignedDialog
|
|
v-model:visible="resignedVisible"
|
|
:user-id="resignedUserId"
|
|
:username="resignedUsername"
|
|
:resigned-at="resignedAt"
|
|
@submitted="handleResignedSubmitted"
|
|
/>
|
|
|
|
<UserOrgOperateDialog
|
|
v-model:visible="orgOperateVisible"
|
|
:operate-type="orgOperateType"
|
|
:row-data="editingDeptData"
|
|
:parent-id="orgParentId"
|
|
:dept-tree="deptTree"
|
|
:org-code-options="orgCodeOptions"
|
|
@submitted="handleDeptSubmitted"
|
|
/>
|
|
|
|
<UserOrgLeaderDialog v-model:visible="orgLeaderVisible" :dept="leaderDeptData" />
|
|
|
|
<BusinessFormDialog
|
|
v-model="userManagementRelationVisible"
|
|
title="用户管理链路"
|
|
preset="lg"
|
|
:show-footer="false"
|
|
max-body-height="70vh"
|
|
style="width: 800px"
|
|
>
|
|
<UserManagementRelation :from-user-index="true" :dept-id="currentDeptId" :org-type="currentDept?.orgType" />
|
|
</BusinessFormDialog>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(.user-table-card-body) {
|
|
height: calc(100% - 56px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
</style>
|