test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(系统设置): 组织的用户组与项目接口对接&表格空数据展示-

This commit is contained in:
RubyLiu 2023-08-25 18:47:24 +08:00 committed by rubylliu
parent 2405478616
commit 896c12ee46
15 changed files with 207 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/src/api/modules/setting/organizationAndProject.ts
View File

@ -8,6 +8,14 @@ import {
SystemGetUserByOrgOrProjectIdParams,
} from '@/models/setting/system/orgAndProject';
// 组织与项目-公共
// 系统-组织及项目，获取管理员下拉选项
export function getAdminByOrgOrProject() {
return MSR.get({ url: orgUrl.getAdminByOrgOrProjectUrl });
}
// 系统-组织
// 获取组织列表
export function postOrgTable(data: TableQueryParams) {
return MSR.post({ url: orgUrl.postOrgTableUrl, data });
@ -43,7 +51,9 @@ export function enableOrDisableOrg(id: string, isEnable = true) {
return MSR.get({ url: `${isEnable ? orgUrl.getEnableOrgUrl : orgUrl.getDisableOrgUrl}${id}` });
}
// 获取项目列表
// 系统-项目
// 系统-获取项目列表
export function postProjectTable(data: TableQueryParams) {
return MSR.post({ url: orgUrl.postProjectTableUrl, data });
}
@ -96,3 +106,44 @@ export function getAllUser() {
export function getOrgAndProjectCount() {
return MSR.get({ url: orgUrl.getOrgAndProjectCountUrl });
}
// 组织-项目
// 组织-获取项目列表
export function postProjectTableByOrg(data: TableQueryParams) {
return MSR.post({ url: orgUrl.postProjectTableByOrgIdUrl, data });
}
// 组织-启用或禁用项目
export function enableOrDisableProjectByOrg(id: string, isEnable = true) {
return MSR.get({ url: `${isEnable ? orgUrl.getEnableProjectByOrgUrl : orgUrl.getDisableProjectByOrgUrl}${id}` });
}
// 组织-删除项目
export function deleteProjectByOrg(id: string) {
return MSR.get({ url: `${orgUrl.getDeleteProjectByOrgUrl}${id}` });
}
// 组织-撤销删除项目
export function revokeDeleteProjectByOrg(id: string) {
return MSR.get({ url: `${orgUrl.getRecoverProjectByOrgUrl}${id}` });
}
// 组织-创建或更新项目
export function createOrUpdateProjectByOrg(data: CreateOrUpdateSystemProjectParams) {
return MSR.post({ url: data.id ? orgUrl.postModifyProjectByOrgUrl : orgUrl.postAddProjectByOrgUrl, data });
}
// 组织-获取项目下的成员列表
export function postProjectMemberByProjectId(data: TableQueryParams) {
return MSR.post({ url: orgUrl.postProjectMemberByOrgIdUrl, data });
}
// 组织-移除项目成员
export function deleteProjectMemberByOrg(projectId: string, userId: string) {
return MSR.get({ url: `${orgUrl.getDeleteProjectMemberByOrgUrl}${projectId}/${userId}` });
}
// 组织-添加项目成员
export function addProjectMemberByOrg(data: AddUserToOrgOrProjectParams) {
return MSR.post({ url: orgUrl.postAddProjectMemberByOrgUrl, data });
}

16
frontend/src/api/modules/setting/usergroup.ts
View File

@ -72,14 +72,28 @@ export function saveOrgUSetting(data: SaveGlobalUSettingData) {
return MSR.post<UserGroupAuthSetting[]>({ url: ugUrl.editOrgUSettingUrl, data });
}
// 系统-获取用户组对应的用户列表
export function postUserByUserGroup(data: TableQueryParams) {
return MSR.post<CommonList<UserTableItem[]>>({ url: ugUrl.postUserByUserGroupUrl, data });
}
// 组织-获取用户组对应的用户列表
export function postOrgUserByUserGroup(data: TableQueryParams) {
return MSR.post<CommonList<UserTableItem[]>>({ url: ugUrl.postOrgUserByUserGroupUrl, data });
}
// 系统-删除用户组对应的用户
export function deleteUserFromUserGroup(id: string) {
return MSR.get<string>({ url: `${ugUrl.deleteUserFromUserGroupUrl}${id}` });
}
// 组织-删除用户组对应的用户
export function deleteOrgUserFromUserGroup(id: string) {
return MSR.get<string>({ url: `${ugUrl.deleteOrgUserFromUserGroupUrl}${id}` });
}
// 系统-添加用户到用户组
export function addUserToUserGroup(data: { roleId: string; userIds: string[] }) {
return MSR.post<string>({ url: ugUrl.addUserToUserGroupUrl, data });
}
// 组织-添加用户到用户组
export function addOrgUserToUserGroup(data: { userRoleId: string; userIds: string[]; organizationId: string }) {
return MSR.post<string>({ url: ugUrl.addOrgUserToUserGroupUrl, data });
}

29
frontend/src/api/requrls/setting/organizationAndProject.ts
View File

@ -1,3 +1,4 @@
// 系统-组织
// 修改组织
export const postModifyOrgUrl = '/system/organization/update';
// 获取系统下所有组织-下拉选项
@ -25,7 +26,7 @@ export const getDeleteOrgUrl = '/system/organization/delete/';
// 获取系统默认组织
export const getOrgDefaultUrl = '/system/organization/default';
// 项目
// 系统-项目
// 更新项目信息
export const postModifyProjectUrl = '/system/project/update';
// 获取项目列表
@ -46,6 +47,8 @@ export const getProjectInfoUrl = '/system/project/get/';
export const getDeleteProjectUrl = '/system/project/delete/';
// 系统-组织及项目，获取用户下拉选项
export const getUserByOrgOrProjectUrl = '/system/organization/get-option/';
// 系统-组织及项目，获取管理员下拉选项
export const getAdminByOrgOrProjectUrl = '/system/organization/get-admin-option/';
// 启用项目
export const getEnableProjectUrl = '/system/project/enable/';
// 禁用项目
@ -55,3 +58,27 @@ export const getOrgOrProjectAdminUrl = '/system/project/user-list';
// 获取项目和组织的总数
export const getOrgAndProjectCountUrl = '/system/organization/total';
// 组织-项目
// 修改项目
export const postModifyProjectByOrgUrl = '/organization/project/update';
// 获取项目列表
export const postProjectTableByOrgIdUrl = '/organization/project/page';
// 获取项目下的成员列表
export const postProjectMemberByOrgIdUrl = '/organization/project/member-list';
// 添加项目
export const postAddProjectByOrgUrl = '/organization/project/add';
// 添加项目成员
export const postAddProjectMemberByOrgUrl = '/organization/project/add-members';
// 获取用户列表
export const getUserTableByOrgIdOrProjectIdUrl = '/organization/project/user-list/';
// 恢复项目
export const getRecoverProjectByOrgUrl = '/organization/project/revoke/';
// 移除项目成员
export const getDeleteProjectMemberByOrgUrl = '/organization/project/remove-member/';
// 启用项目
export const getEnableProjectByOrgUrl = '/organization/project/enable/';
// 禁用项目
export const getDisableProjectByOrgUrl = '/organization/project/disable/';
// 删除项目
export const getDeleteProjectByOrgUrl = '/organization/project/delete/';

28
frontend/src/api/requrls/setting/usergroup.ts
View File

@ -1,3 +1,4 @@
/** 系统 */
/** 修改用户组 */
export const updateUserGroupU = `/user/role/global/update`;
/** 编辑用户组对应的权限配置 */
@ -20,25 +21,24 @@ export const addUserToUserGroupUrl = `/user/role/relation/global/add`;
/** 删除用户组用户 */
export const deleteUserFromUserGroupUrl = `/user/role/relation/global/delete/`;
// 组织下的用户组
/** 组织 */
// 组织-修改用户组
export const updateOrgUserGroupU = `/user/role/organization/update`;
/** 编辑用户组对应的权限配置 */
/** 组织-编辑用户组对应的权限配置 */
export const editOrgUSettingUrl = `/user/role/organization/permission/update`;
/** 添加用户组 */
/** 组织-创建用户组 */
export const addOrgUserGroupU = `/user/role/organization/add`;
/** 获取用户组对应的权限配置 */
/** 组织-获取用户组对应的权限配置 */
export const getOrgUSettingUrl = `/user/role/organization/permission/setting/`;
/** 获取用户组 */
/** 组织-获取用户组 */
export const getOrgUserGroupU = `/user/role/organization/list/`;
/** 获取单个用户组信息 */
export const getOrgUsergroupInfoU = `/user/role/organization/get/`;
/** 删除用户组 */
/** 组织-删除用户组 */
export const deleteOrgUserGroupU = `/user/role/organization/delete/`;
/** 根据用户组获取用户列表 */
export const postOrgUserByUserGroupUrl = `/user/role/relation/organization/list`;
/** 创建用户组添加用户 */
export const addOrgUserToUserGroupUrl = `/user/role/relation/organization/add`;
/** 删除用户组用户 */
export const deleteOrgUserFromUserGroupUrl = `/user/role/relation/organization/delete/`;
/** 组织-根据用户组获取用户列表 */
export const postOrgUserByUserGroupUrl = `/user/role/organization/list-member`;
/** 组织-用户组添加用户 */
export const addOrgUserToUserGroupUrl = `/user/role/organization/add-member`;
/** 组织-删除用户组用户 */
export const deleteOrgUserFromUserGroupUrl = `/user/role/organization/delete/`;

2
frontend/src/components/pure/ms-table/base-table.vue
View File

@ -76,7 +76,7 @@
@press-enter="handleEditInputEnter(record)"
/>
<slot v-else :name="item.slotName" v-bind="{ record, rowIndex, column }">
<span>{{ record[item.dataIndex as string] }}</span>
<span>{{ record[item.dataIndex as string] || '-' }}</span>
</slot>
<MsIcon
v-if="item.editable && item.dataIndex === editKey"

19
frontend/src/views/setting/organization/project/components/addProjectModal.vue
View File

@ -26,15 +26,10 @@
>
<a-input v-model="form.name" :placeholder="t('system.project.projectNamePlaceholder')" />
</a-form-item>
<a-form-item
required
field="organizationId"
:label="t('system.project.affiliatedOrg')"
:rules="[{ required: true, message: t('system.project.affiliatedOrgRequired') }]"
>
<a-form-item field="organizationId" :label="t('system.project.affiliatedOrg')">
<a-select
v-model="form.organizationId"
:disabled="!isXpack"
disabled
allow-search
:options="affiliatedOrgOption"
:default-value="isXpack ? '' : 'default_organization'"
@ -85,11 +80,12 @@
import { reactive, ref, watchEffect, computed } from 'vue';
import type { FormInstance, ValidatedError } from '@arco-design/web-vue';
import MsUserSelector from '@/components/business/ms-user-selector/index.vue';
import { createOrUpdateProject, getSystemOrgOption } from '@/api/modules/setting/organizationAndProject';
import { createOrUpdateProjectByOrg, getSystemOrgOption } from '@/api/modules/setting/organizationAndProject';
import { Message } from '@arco-design/web-vue';
import MsIcon from '@/components/pure/ms-icon-font/index.vue';
import { CreateOrUpdateSystemProjectParams, SystemOrgOption } from '@/models/setting/system/orgAndProject';
import useLicenseStore from '@/store/modules/setting/license';
import { useAppStore } from '@/store';
const { t } = useI18n();
const props = defineProps<{
@ -102,6 +98,8 @@
const loading = ref(false);
const isEdit = computed(() => !!props.currentProject?.id);
const affiliatedOrgOption = ref<SystemOrgOption[]>([]);
const appStore = useAppStore();
const currentOrgId = computed(() => appStore.currentOrgId);
const licenseStore = useLicenseStore();
const moduleOption = [
{ label: 'menu.workbench', value: 'workstation' },
@ -120,7 +118,7 @@
const form = reactive<CreateOrUpdateSystemProjectParams>({
name: '',
userIds: [],
organizationId: '',
organizationId: currentOrgId.value,
description: '',
enable: true,
moduleIds: [],
@ -147,7 +145,7 @@
}
try {
loading.value = true;
await createOrUpdateProject({ id: props.currentProject?.id, ...form });
await createOrUpdateProjectByOrg({ id: props.currentProject?.id, ...form });
Message.success(
isEdit.value
? t('system.organization.updateOrganizationSuccess')
@ -184,4 +182,3 @@
}
});
</script>
@/api/modules/setting/organizationAndProject

10
frontend/src/views/setting/organization/project/components/addUserModal.vue
View File

@ -15,7 +15,7 @@
:label="t('system.organization.member')"
:rules="[{ required: true, message: t('system.organization.addMemberRequired') }]"
>
<MsUserSelector v-model:value="form.name" type="organization" :source-id="organizationId || projectId" />
<MsUserSelector v-model:value="form.name" type="organization" :source-id="projectId" />
</a-form-item>
</a-form>
</div>
@ -33,14 +33,13 @@
<script lang="ts" setup>
import { useI18n } from '@/hooks/useI18n';
import { reactive, ref, watchEffect, onUnmounted } from 'vue';
import { addUserToOrgOrProject } from '@/api/modules/setting/organizationAndProject';
import { addProjectMemberByOrg } from '@/api/modules/setting/organizationAndProject';
import { Message, type FormInstance, type ValidatedError } from '@arco-design/web-vue';
import MsUserSelector from '@/components/business/ms-user-selector/index.vue';
const { t } = useI18n();
const props = defineProps<{
visible: boolean;
organizationId?: string;
projectId?: string;
}>();
@ -72,10 +71,10 @@
if (errors) {
loading.value = false;
}
const { organizationId, projectId } = props;
const { projectId } = props;
try {
loading.value = true;
await addUserToOrgOrProject({ userIds: form.name, organizationId, projectId });
await addProjectMemberByOrg({ userIds: form.name, projectId });
Message.success(t('system.organization.addSuccess'));
handleCancel();
} catch (error) {
@ -101,4 +100,3 @@
color: var(--color-text-4);
}
</style>
@/api/modules/setting/organizationAndProject

22
frontend/src/views/setting/organization/project/components/userDrawer.vue
View File

@ -47,10 +47,7 @@
</template>
<script lang="ts" setup>
import {
postUserTableByOrgIdOrProjectId,
deleteUserFromOrgOrProject,
} from '@/api/modules/setting/organizationAndProject';
import { postProjectMemberByProjectId, deleteProjectMemberByOrg } from '@/api/modules/setting/organizationAndProject';
import { MsTableColumn } from '@/components/pure/ms-table/type';
import useTable from '@/components/pure/ms-table/useTable';
import { useI18n } from '@/hooks/useI18n';
@ -95,7 +92,7 @@
{ title: 'system.organization.operation', slotName: 'operation' },
];
const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(postUserTableByOrgIdOrProjectId, {
const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(postProjectMemberByProjectId, {
columns: projectColumn,
showSetting: false,
scroll: { y: 'auto', x: '600px' },
@ -114,7 +111,6 @@
};
const fetchData = async () => {
setLoadListParams({ organizationId: props.organizationId });
await loadList();
};
@ -128,11 +124,8 @@
const handleRemove = async (record: TableData) => {
try {
if (props.organizationId) {
await deleteUserFromOrgOrProject(props.organizationId, record.id);
}
if (props.projectId) {
await deleteUserFromOrgOrProject(props.projectId, record.id, true);
await deleteProjectMemberByOrg(props.projectId, record.id);
}
Message.success(t('common.removeSuccess'));
fetchData();
@ -141,16 +134,10 @@
console.error(error);
}
};
watch(
() => props.organizationId,
() => {
fetchData();
}
);
watch(
() => props.projectId,
() => {
setLoadListParams({ projectId: props.projectId });
fetchData();
}
);
@ -161,4 +148,3 @@
}
);
</script>
@/api/modules/setting/organizationAndProject

36
frontend/src/views/setting/organization/project/orgProject.vue
View File

@ -15,7 +15,7 @@
<span>{{ record.name }}</span>
<a-tooltip background-color="#FFFFFF">
<template #content>
<span class="text-[var(--color-text-1)]">{{ t('system.organization.revokeDeleteToolTip') }}</span>
<span class="text-[var(--color-text-1)]">{{ t('system.project.revokeDeleteToolTip') }}</span>
<MsButton class="ml-[8px]" @click="handleRevokeDelete(record)">{{ t('common.revokeDelete') }}</MsButton>
</template>
<MsIcon v-if="record.deleted" type="icon-icon_alarm_clock" class="ml-[4px] text-[rgb(var(--danger-6))]" />
@ -52,7 +52,7 @@
@cancel="handleAddProjectModalCancel"
/>
<AddUserModal :project-id="currentProjectId" :visible="userVisible" @cancel="handleAddUserModalCancel" />
<UserDrawer :project-id="currentProjectId" v-bind="currentUserDrawer" @cancel="handleUserDrawerCancel" />
<UserDrawer v-bind="currentUserDrawer" @cancel="handleUserDrawerCancel" />
</MsCard>
</template>
@ -60,14 +60,14 @@
import { useI18n } from '@/hooks/useI18n';
import useTable from '@/components/pure/ms-table/useTable';
import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
import { useTableStore } from '@/store';
import { ref, reactive } from 'vue';
import { useTableStore, useAppStore } from '@/store';
import { ref, reactive, onMounted, computed } from 'vue';
import type { ActionsItem } from '@/components/pure/ms-table-more-action/types';
import {
postProjectTable,
deleteProject,
enableOrDisableProject,
revokeDeleteProject,
postProjectTableByOrg,
deleteProjectByOrg,
enableOrDisableProjectByOrg,
revokeDeleteProjectByOrg,
} from '@/api/modules/setting/organizationAndProject';
import { TableKeyEnum } from '@/enums/tableEnum';
import { MsTableColumn } from '@/components/pure/ms-table/type';
@ -89,6 +89,8 @@
const currentProjectId = ref('');
const currentUpdateProject = ref<CreateOrUpdateSystemProjectParams>();
const { openDeleteModal, openModal } = useModal();
const appStore = useAppStore();
const currentOrgId = computed(() => appStore.currentOrgId);
const keyword = ref('');
@ -144,7 +146,7 @@
tableStore.initColumn(TableKeyEnum.SYSTEM_PROJECT, organizationColumns, 'drawer');
const { propsRes, propsEvent, loadList, setKeyword } = useTable(postProjectTable, {
const { propsRes, propsEvent, loadList, setKeyword, setLoadListParams } = useTable(postProjectTableByOrg, {
tableKey: TableKeyEnum.SYSTEM_PROJECT,
scroll: { y: 'auto', x: '1300px' },
selectable: false,
@ -160,7 +162,7 @@
const currentUserDrawer = reactive({
visible: false,
organizationId: '',
projectId: '',
});
const tableActions: ActionsItem[] = [
@ -181,7 +183,7 @@
content: t('system.organization.deleteTip'),
onBeforeOk: async () => {
try {
await deleteProject(record.id);
await deleteProjectByOrg(record.id);
Message.success(t('common.deleteSuccess'));
fetchData();
} catch (error) {
@ -210,7 +212,7 @@
okText,
onBeforeOk: async () => {
try {
await enableOrDisableProject(record.id, isEnable);
await enableOrDisableProjectByOrg(record.id, isEnable);
Message.success(isEnable ? t('common.enableSuccess') : t('common.closeSuccess'));
fetchData();
} catch (error) {
@ -243,7 +245,7 @@
const showUserDrawer = (record: TableData) => {
currentUserDrawer.visible = true;
currentUserDrawer.organizationId = record.id;
currentUserDrawer.projectId = record.id;
};
const handleUserDrawerCancel = () => {
@ -265,11 +267,11 @@
type: 'error',
cancelText: t('common.cancel'),
title: t('system.project.revokeDeleteTitle', { name: record.name }),
content: t('system.organization.enableContent'),
content: t('system.project.enableContent'),
okText: t('common.revokeDelete'),
onBeforeOk: async () => {
try {
await revokeDeleteProject(record.id);
await revokeDeleteProjectByOrg(record.id);
Message.success(t('common.revokeDeleteSuccess'));
fetchData();
} catch (error) {
@ -280,6 +282,10 @@
hideCancel: false,
});
};
onMounted(() => {
setLoadListParams({ organizationId: currentOrgId.value });
fetchData();
});
</script>
<style lang="scss" scoped>

16
frontend/src/views/setting/organization/usergroup/components/addUserModal.vue
View File

@ -33,10 +33,11 @@
<script lang="ts" setup>
import { useI18n } from '@/hooks/useI18n';
import { reactive, ref, watchEffect } from 'vue';
import { reactive, ref, watchEffect, computed } from 'vue';
import useUserGroupStore from '@/store/modules/setting/organization/usergroup';
import { addUserToUserGroup } from '@/api/modules/setting/usergroup';
import type { FormInstance, ValidatedError } from '@arco-design/web-vue';
import { useAppStore } from '@/store';
import { addOrgUserToUserGroup } from '@/api/modules/setting/usergroup';
import { Message, type FormInstance, type ValidatedError } from '@arco-design/web-vue';
import MsUserSelector from '@/components/business/ms-user-selector/index.vue';
const { t } = useI18n();
@ -45,6 +46,8 @@
}>();
const store = useUserGroupStore();
const appStore = useAppStore();
const currentOrgId = computed(() => appStore.currentOrgId);
const emit = defineEmits<{
(e: 'cancel'): void;
@ -79,8 +82,13 @@
}
try {
loading.value = true;
await addUserToUserGroup({ roleId: store.currentId, userIds: form.name });
await addOrgUserToUserGroup({
userRoleId: store.currentId,
userIds: form.name,
organizationId: currentOrgId.value,
});
handleCancel();
Message.success(t('common.addSuccess'));
} catch (e) {
// eslint-disable-next-line no-console
console.log(e);

4
frontend/src/views/setting/organization/usergroup/components/index.vue
View File

@ -79,7 +79,7 @@
<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';
import { useI18n } from '@/hooks/useI18n';
import { CustomMoreActionItem, PopVisibleItem, RenameType, UserGroupItem } from '@/models/setting/usergroup';
import { PopVisibleItem, RenameType, UserGroupItem } from '@/models/setting/usergroup';
import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue';
import { ActionsItem } from '@/components/pure/ms-table-more-action/types';
import AddUserModal from './addUserModal.vue';
@ -88,7 +88,7 @@
import { Message } from '@arco-design/web-vue';
import useUserGroupStore from '@/store/modules/setting/organization/usergroup';
import { useAppStore } from '@/store';
import { getOrgUserGroupList, updateOrAddOrgUserGroup, deleteOrgUserGroup } from '@/api/modules/setting/usergroup';
import { getOrgUserGroupList, deleteOrgUserGroup } from '@/api/modules/setting/usergroup';
import { characterLimit } from '@/utils';
const { t } = useI18n();

25
frontend/src/views/setting/organization/usergroup/components/userTable.vue
View File

@ -16,10 +16,10 @@
import { useI18n } from '@/hooks/useI18n';
import useTable from '@/components/pure/ms-table/useTable';
import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
import { useTableStore } from '@/store';
import { useTableStore, useAppStore } from '@/store';
import useUserGroupStore from '@/store/modules/setting/organization/usergroup';
import { watchEffect, ref, watch } from 'vue';
import { postUserByUserGroup, deleteUserFromUserGroup } from '@/api/modules/setting/usergroup';
import { watchEffect, ref, watch, computed } from 'vue';
import { postOrgUserByUserGroup, deleteOrgUserFromUserGroup } from '@/api/modules/setting/usergroup';
import { UserTableItem } from '@/models/setting/usergroup';
import { TableKeyEnum } from '@/enums/tableEnum';
import { MsTableColumn } from '@/components/pure/ms-table/type';
@ -29,6 +29,8 @@
const { t } = useI18n();
const store = useUserGroupStore();
const tableStore = useTableStore();
const appStore = useAppStore();
const currentOrgId = computed(() => appStore.currentOrgId);
const userVisible = ref(false);
const props = defineProps<{
keyword: string;
@ -57,7 +59,7 @@
tableStore.initColumn(TableKeyEnum.USERGROUPUSER, userGroupUsercolumns, 'drawer');
const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(postUserByUserGroup, {
const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(postOrgUserByUserGroup, {
tableKey: TableKeyEnum.USERGROUPUSER,
scroll: { x: '600px' },
selectable: true,
@ -70,7 +72,7 @@
};
const handleRemove = async (record: UserTableItem) => {
try {
await deleteUserFromUserGroup(record.id);
await deleteOrgUserFromUserGroup(record.id);
await fetchData();
} catch (error) {
// eslint-disable-next-line no-console
@ -85,15 +87,12 @@
userVisible.value = false;
};
watchEffect(() => {
if (store.currentId) {
setLoadListParams({ roleId: store.currentId });
if (store.currentId && currentOrgId.value) {
setLoadListParams({ userRoleId: store.currentId, organizationId: currentOrgId.value });
fetchData();
}
});
watch(
() => props.keyword,
() => {
fetchData();
}
);
defineExpose({
fetchData,
});
</script>

17
frontend/src/views/setting/organization/usergroup/orgUserGroup.vue
View File

@ -26,7 +26,7 @@
</div>
</div>
<div class="mt-[16px]">
<user-table v-if="currentTable === 'user' && couldShowUser" :keyword="currentKeyword" />
<user-table v-if="currentTable === 'user' && couldShowUser" ref="userRef" :keyword="currentKeyword" />
<auth-table v-if="currentTable === 'auth' && couldShowAuth" ref="authRef" />
</div>
</div>
@ -45,7 +45,7 @@
</template>
<script lang="ts" setup>
import { ref, computed, watchEffect } from 'vue';
import { ref, computed, watchEffect, nextTick } from 'vue';
import { useI18n } from '@/hooks/useI18n';
import MsCard from '@/components/pure/ms-card/index.vue';
import useUserGroupStore from '@/store/modules/setting/organization/usergroup';
@ -65,13 +65,26 @@
handleSave: () => void;
canSave: boolean;
}>();
const userRef = ref();
const appStore = useAppStore();
const tableSearch = () => {
if (currentTable.value === 'user' && userRef.value) {
userRef.value.fetchData();
} else if (!userRef.value) {
nextTick(() => {
userRef.value?.fetchData();
});
}
};
const handleSearch = (value: string) => {
currentKeyword.value = value;
tableSearch();
};
const handleEnter = (eve: Event) => {
currentKeyword.value = (eve.target as HTMLInputElement).value;
tableSearch();
};
const store = useUserGroupStore();

11
frontend/src/views/setting/system/usergroup/components/userTable.vue
View File

@ -18,7 +18,7 @@
import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
import { useTableStore } from '@/store';
import useUserGroupStore from '@/store/modules/setting/system/usergroup';
import { watchEffect, ref, watch } from 'vue';
import { watchEffect, ref } from 'vue';
import { postUserByUserGroup, deleteUserFromUserGroup } from '@/api/modules/setting/usergroup';
import { UserTableItem } from '@/models/setting/usergroup';
import { TableKeyEnum } from '@/enums/tableEnum';
@ -90,10 +90,7 @@
fetchData();
}
});
watch(
() => props.keyword,
() => {
fetchData();
}
);
defineExpose({
fetchData,
});
</script>

17
frontend/src/views/setting/system/usergroup/index.vue
View File

@ -26,7 +26,7 @@
</div>
</div>
<div class="mt-[16px]">
<user-table v-if="currentTable === 'user' && couldShowUser" :keyword="currentKeyword" />
<user-table v-if="currentTable === 'user' && couldShowUser" ref="userRef" :keyword="currentKeyword" />
<auth-table v-if="currentTable === 'auth' && couldShowAuth" ref="authRef" />
</div>
</div>
@ -45,7 +45,7 @@
</template>
<script lang="ts" setup>
import { ref, computed, watchEffect } from 'vue';
import { ref, computed, watchEffect, nextTick } from 'vue';
import { useI18n } from '@/hooks/useI18n';
import MsCard from '@/components/pure/ms-card/index.vue';
import useUserGroupStore from '@/store/modules/setting/system/usergroup';
@ -65,13 +65,26 @@
handleSave: () => void;
canSave: boolean;
}>();
const userRef = ref();
const appStore = useAppStore();
const tableSearch = () => {
if (currentTable.value === 'user' && userRef.value) {
userRef.value.fetchData();
} else if (!userRef.value) {
nextTick(() => {
userRef.value.fetchData();
});
}
};
const handleSearch = (value: string) => {
currentKeyword.value = value;
tableSearch();
};
const handleEnter = (eve: Event) => {
currentKeyword.value = (eve.target as HTMLInputElement).value;
tableSearch();
};
const store = useUserGroupStore();