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:
xinxin.wu 2023-08-01 17:33:51 +08:00 committed by fit2-zhao
parent 1c219e998b
commit 79f1594681
7 changed files with 248 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/api/modules/setting/member.ts
View File

@ -10,7 +10,7 @@ import {
getUserList, getUserList,
getProjectListUrl, getProjectListUrl,
} from '@/api/requrls/setting/member'; } from '@/api/requrls/setting/member';
import type { MemberList, AddorUpdateMemberModel, BatchAddProjectModel } from '@/models/setting/member'; import type { MemberList, AddorUpdateMemberModel, BatchAddProjectModel, LinkItem } from '@/models/setting/member';
import type { TableQueryParams } from '@/models/common'; import type { TableQueryParams } from '@/models/common';
// 获取成员列表 // 获取成员列表
export function getMemberList(data: TableQueryParams) { export function getMemberList(data: TableQueryParams) {
@ -27,23 +27,23 @@ export function addOrUpdate(data: AddorUpdateMemberModel, type: string) {
export function batchAddProject(data: BatchAddProjectModel) { export function batchAddProject(data: BatchAddProjectModel) {
return MSR.post({ url: BatchAddProjectUrl, data }); return MSR.post({ url: BatchAddProjectUrl, data });
} }
// 添加到用户 // 添加到用户组
export function batchAddUserGroup(data: AddorUpdateMemberModel) { export function batchAddUserGroup(data: BatchAddProjectModel) {
return MSR.post({ url: BatchAddUserGroupUrl, data }); return MSR.post({ url: BatchAddUserGroupUrl, data });
} }
// 移除成员 // 移除成员
export function deleteMemberReq(organizationId: string, userId: string) { export function deleteMemberReq(organizationId: string, userId: string) {
return MSR.get({ url: DeleteMemberUrl, params: `/${organizationId}/${userId}` }); return MSR.get({ url: DeleteMemberUrl, params: `/${organizationId}/${userId}` });
} }
// 获取全局用户组下拉 // 获取用户组下拉
export function getGlobalUserGroup() { export function getGlobalUserGroup(organizationId: string) {
return MSR.get({ url: getUserGroupList }); return MSR.get({ url: getUserGroupList, params: `/${organizationId}` });
} }
// 获取用户下拉 // 获取系统用户下拉
export function getUser() { export function getUser(organizationId: string) {
return MSR.get({ url: getUserList }); return MSR.get<LinkItem[]>({ url: getUserList, params: `/${organizationId}` });
} }
// 【暂用】获取组织下边的项目 // 获取组织下边的项目
export function getProjectList(data: any) { export function getProjectList(organizationId: string) {
return MSR.post({ url: getProjectListUrl, data }); return MSR.get<LinkItem[]>({ url: getProjectListUrl, params: `/${organizationId}` });
} }

11
frontend/src/api/requrls/setting/member.ts
View File

@ -6,10 +6,9 @@ export const BatchAddProjectUrl = '/organization/project/add-member';
// 添加至用户组 // 添加至用户组
export const BatchAddUserGroupUrl = '/organization/role/update-member'; export const BatchAddUserGroupUrl = '/organization/role/update-member';
export const DeleteMemberUrl = '/organization/remove-member'; export const DeleteMemberUrl = '/organization/remove-member';
// 暂用 // 获取组织下边的用户组列表
// 用户组下拉 export const getUserGroupList = '/organization/user/role/list';
export const getUserGroupList = '/user/role/global/list'; // 获取当前组织内不存在成员
// 用户下拉 export const getUserList = '/organization/not-exist/user/list';
export const getUserList = '/system/user/list';
// 获取弹窗里边的穿梭项目列表 // 获取弹窗里边的穿梭项目列表
export const getProjectListUrl = '/system/project/page'; export const getProjectListUrl = '/organization/project/list';

71
frontend/src/components/bussiness/ms-batch-modal/index.vue
View File

@ -38,6 +38,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch } from 'vue'; import { ref, watch } from 'vue';
import { useI18n } from '@/hooks/useI18n'; import { useI18n } from '@/hooks/useI18n';
import { Message } from '@arco-design/web-vue';
import type { BatchModel } from './types';
const { t } = useI18n(); const { t } = useI18n();
@ -66,15 +68,16 @@
); );
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'update:visible', val: boolean): void; (e: 'update:visible', val: boolean): void;
(e: 'addProject', targetValue: string[]): void; (e: 'addProject', targetValue: string[], type: string): void;
(e: 'addUserGroup', targetValue: string[]): void; (e: 'addUserGroup', targetValue: string[], type: string): void;
(e: 'addOrgnization', targetValue: string[]): void; (e: 'addOrgnization', targetValue: string[], type: string): void;
}>(); }>();
const showBatchModal = ref(false); const showBatchModal = ref(false);
const batchLoading = ref(false); const batchLoading = ref(false);
const batchTitle = ref(''); const batchTitle = ref('');
const target = ref<string[]>([]); const target = ref<string[]>([]);
const treeList = ref<TreeDataItem[]>([]);
function handelTableBatch(action: string) { function handelTableBatch(action: string) {
switch (action) { switch (action) {
@ -147,41 +150,63 @@
return treeDataSource; return treeDataSource;
}; };
return travel(props.treeData); return travel(treeList.value);
}; };
const transferData = getTransferData(props.treeData, []); let transferData: TransferDataItem[] = [];
function cancelBatch() { function cancelBatch() {
showBatchModal.value = false; showBatchModal.value = false;
target.value = []; target.value = [];
} }
const batchRequestFun = async (reqFun: any, params: BatchModel) => {
const confirmBatch = () => {
batchLoading.value = true; batchLoading.value = true;
try { try {
if (target.value.length < 1) { await reqFun(params);
return; Message.success(t('organization.member.batchModalSuccess'));
}
switch (props.action) {
case 'batchAddProject':
emit('addProject', target.value);
break;
case 'batchAddUsergroup':
emit('addUserGroup', target.value);
break;
case 'batchAddOrgnization':
emit('addOrgnization', target.value);
break;
default:
break;
}
showBatchModal.value = false; showBatchModal.value = false;
target.value = [];
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} finally { } finally {
batchLoading.value = false; batchLoading.value = false;
} }
}; };
const confirmBatch = async () => {
batchLoading.value = true;
if (target.value.length < 1) {
return;
}
try {
switch (props.action) {
case 'batchAddProject':
emit('addProject', target.value, 'project');
break;
case 'batchAddUsergroup':
emit('addUserGroup', target.value, 'usergroup');
break;
case 'batchAddOrgnization':
emit('addOrgnization', target.value, 'orgnization');
break;
default:
break;
}
} catch (error) {
console.log(error);
}
};
watch(
() => props.treeData,
(newVal, oldVal) => {
treeList.value = newVal;
transferData = getTransferData(treeList.value, []);
},
{ deep: true, immediate: true }
);
defineExpose({
batchLoading,
batchRequestFun,
});
</script> </script>
<style lang="less" scoped></style> <style lang="less" scoped></style>

7
frontend/src/components/bussiness/ms-batch-modal/types.ts Normal file
View File

@ -0,0 +1,7 @@
export interface BatchModel {
id?: string;
organizationId?: string;
memberIds?: string[];
userRoleIds?: string[];
projectIds?: string[];
}

1
frontend/src/models/setting/member.ts
View File

@ -48,6 +48,7 @@ export interface BatchAddProjectModel {
organizationId?: string; organizationId?: string;
memberIds?: Array<string | number>; memberIds?: Array<string | number>;
projectIds?: string[]; projectIds?: string[];
userRoleIds?: string[];
} }
// 用户组下拉列表 // 用户组下拉列表

27
frontend/src/views/setting/organization/member/components/addMemberModal.vue
View File

@ -11,13 +11,7 @@
</template> </template>
<div class="form"> <div class="form">
<a-form ref="memberFormRef" :model="form" size="large" layout="vertical"> <a-form ref="memberFormRef" :model="form" size="large" layout="vertical">
<a-form-item <a-form-item v-if="type === 'edit'" :label="t('organization.member.proejct')" asterisk-position="end">
v-if="type === 'edit'"
field="projectIds"
:label="t('organization.member.proejct')"
asterisk-position="end"
:rules="[{ required: true, message: t('organization.member.selectProjectEmptyTip') }]"
>
<a-select <a-select
v-model="form.projectIds" v-model="form.projectIds"
multiple multiple
@ -40,7 +34,7 @@
:placeholder="t('organization.member.selectMemberScope')" :placeholder="t('organization.member.selectMemberScope')"
allow-clear allow-clear
> >
<a-option v-for="item of props.memberList" :key="item.id" :value="item.id">{{ item.name }}</a-option> <a-option v-for="item of memberList" :key="item.id" :value="item.id">{{ item.name }}</a-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item <a-form-item
@ -75,19 +69,20 @@
import { ref, watchEffect, watch } from 'vue'; import { ref, watchEffect, watch } from 'vue';
import { useI18n } from '@/hooks/useI18n'; import { useI18n } from '@/hooks/useI18n';
import { FormInstance, Message, ValidatedError } from '@arco-design/web-vue'; import { FormInstance, Message, ValidatedError } from '@arco-design/web-vue';
import { addOrUpdate } from '@/api/modules/setting/member'; import { addOrUpdate, getUser } from '@/api/modules/setting/member';
import { useUserStore } from '@/store'; import { useUserStore } from '@/store';
import type { AddorUpdateMemberModel, MemberItem, LinkList } from '@/models/setting/member'; import type { AddorUpdateMemberModel, MemberItem, LinkList } from '@/models/setting/member';
const { t } = useI18n(); const { t } = useI18n();
const userStore = useUserStore(); const userStore = useUserStore();
const lastOrganizationId = userStore.$state?.lastOrganizationId as string;
const props = defineProps<{ const props = defineProps<{
visible: boolean; visible: boolean;
memberList: LinkList;
userGroupOptions: LinkList; userGroupOptions: LinkList;
projectList: LinkList; projectList: LinkList;
}>(); }>();
const dialogVisible = ref<boolean>(false); const dialogVisible = ref<boolean>(false);
const memberList = ref<LinkList>([]);
const title = ref<string>(''); const title = ref<string>('');
const type = ref<string>(''); const type = ref<string>('');
const emits = defineEmits<{ const emits = defineEmits<{
@ -110,12 +105,11 @@
dialogVisible.value = false; dialogVisible.value = false;
}; };
const edit = (record: MemberItem) => { const edit = (record: MemberItem) => {
const { userRoleIdNameMap } = record; const { userRoleIdNameMap, projectIdNameMap } = record;
form.value.memberIds = [record.id as string]; form.value.memberIds = [record.id as string];
// form.value.userRoleIds = userRoleIdNameMap.map((item) => item.id); form.value.userRoleIds = (userRoleIdNameMap || []).map((item) => item.id);
form.value.userRoleIds = Object.keys(userRoleIdNameMap); form.value.projectIds = (projectIdNameMap || []).map((item) => item.id);
}; };
const handleOK = () => { const handleOK = () => {
memberFormRef.value?.validate(async (errors: undefined | Record<string, ValidatedError>) => { memberFormRef.value?.validate(async (errors: undefined | Record<string, ValidatedError>) => {
if (!errors) { if (!errors) {
@ -136,6 +130,7 @@
: { : {
...params, ...params,
projectIds, projectIds,
memberId: memberIds?.join(),
}; };
await addOrUpdate(params, type.value); await addOrUpdate(params, type.value);
Message.success( Message.success(
@ -155,8 +150,12 @@
} }
}); });
}; };
const getUserOptions = async () => {
memberList.value = await getUser(lastOrganizationId);
};
watchEffect(() => { watchEffect(() => {
dialogVisible.value = props.visible; dialogVisible.value = props.visible;
if (props.visible) getUserOptions();
}); });
watch( watch(
() => dialogVisible.value, () => dialogVisible.value,

314
frontend/src/views/setting/organization/member/index.vue
View File

@ -2,7 +2,9 @@
<MsCard simple> <MsCard simple>
<div class="mb-4 flex items-center justify-between"> <div class="mb-4 flex items-center justify-between">
<div> <div>
<a-button class="mr-3" type="primary" @click="addMember">{{ t('organization.member.addMember') }}</a-button> <a-button class="mr-3" type="primary" @click="addOrEditMember('add')">{{
t('organization.member.addMember')
}}</a-button>
</div> </div>
<a-input-search <a-input-search
v-model="keyword" v-model="keyword"
@ -20,67 +22,71 @@
@batch-action="handelTableBatch" @batch-action="handelTableBatch"
> >
<template #project="{ record }"> <template #project="{ record }">
<div v-if="!record.showProjectSelect"> <a-tooltip :content="(record.projectIdNameMap||[]).map((e: any) => e.name).join(',')">
<!-- <a-tag <div v-if="!record.showProjectSelect">
v-for="pro of record.projectIdNameMap" <a-tag
:key="pro.id" v-for="pro of record.projectIdNameMap"
class="mr-[4px] bg-transparent" :key="pro.id"
bordered class="mr-[4px] bg-transparent"
@click="changeUserOrProject(record, 'project')" bordered
> --> @click="changeUserOrProject(record, 'project')"
<a-tag >
v-for="pro of 3" {{ pro.name }}
:key="pro" </a-tag>
class="mr-[4px] bg-transparent" <a-tag
bordered v-if="(record.projectIdNameMap || []).length > 3"
@click="changeUserOrProject(record, 'project')" class="mr-[4px] bg-transparent"
bordered
@click="changeUserOrProject(record, 'project')"
>
+{{ (record.projectIdNameMap || []).length - 3 }}
</a-tag>
</div>
<a-select
v-else
v-model="record.selectProjectList"
multiple
:max-tag-count="2"
size="small"
@change="(value) => selectUserOrProject(value, record, 'project')"
@popup-visible-change="visibleChange($event, record, 'project')"
> >
{{ pro }} <a-option v-for="item of projectOptions" :key="item.id" :value="item.id">{{ item.name }}</a-option>
</a-tag> </a-select>
</div> </a-tooltip>
<a-select
v-else
v-model="record.selectProjectList"
multiple
:max-tag-count="2"
size="small"
@change="(value) => selectUserOrProject(value, record, 'project')"
@popup-visible-change="visibleChange($event, record, 'project')"
>
<a-option v-for="item of projectList" :key="item.id" :value="item.id">{{ item.name }}</a-option>
</a-select>
</template> </template>
<template #userRole="{ record }"> <template #userRole="{ record }">
<div v-if="!record.showUserSelect"> <a-tooltip :content="(record.userRoleIdNameMap||[]).map((e: any) => e.name).join(',')">
<a-tag <div v-if="!record.showUserSelect">
v-for="org of Object.keys(record.userRoleIdNameMap).slice(0, 3)" <a-tag
:key="org" v-for="org of (record.userRoleIdNameMap || []).slice(0, 3)"
class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]" :key="org"
bordered class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]"
@click="changeUserOrProject(record, 'user')" bordered
@click="changeUserOrProject(record, 'user')"
>
{{ org.name }}
</a-tag>
<a-tag
v-if="record.userRoleIdNameMap.length > 3"
class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]"
bordered
@click="changeUserOrProject(record, 'user')"
>
+{{ record.userRoleIdNameMap.length - 3 }}
</a-tag>
</div>
<a-select
v-else
v-model="record.selectUserList"
multiple
:max-tag-count="2"
@change="(value) => selectUserOrProject(value, record, 'user')"
@popup-visible-change="(value) => visibleChange(value, record, 'user')"
> >
{{ record.userRoleIdNameMap[org] }} <a-option v-for="item of userGroupOptions" :key="item.id" :value="item.id">{{ item.name }}</a-option>
</a-tag> </a-select>
<a-tag </a-tooltip>
v-if="Object.keys(record.userRoleIdNameMap).length > 3"
class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]"
bordered
@click="changeUserOrProject(record, 'user')"
>
+{{ Object.keys(record.userRoleIdNameMap).length - 3 }}
</a-tag>
</div>
<a-select
v-else
v-model="record.selectUserList"
multiple
:max-tag-count="2"
@change="(value) => selectUserOrProject(value, record, 'user')"
@popup-visible-change="(value) => visibleChange(value, record, 'user')"
>
<a-option v-for="item of userGroupOptions" :key="item.id" :value="item.id">{{ item.name }}</a-option>
</a-select>
</template> </template>
<template #enable="{ record }"> <template #enable="{ record }">
<div v-if="record.enable" class="flex items-center"> <div v-if="record.enable" class="flex items-center">
@ -93,7 +99,7 @@
</div> </div>
</template> </template>
<template #action="{ record }"> <template #action="{ record }">
<MsButton @click="editMember(record)">{{ t('organization.member.edit') }}</MsButton> <MsButton @click="addOrEditMember('edit', record)">{{ t('organization.member.edit') }}</MsButton>
<MsButton @click="deleteMember(record)">{{ t('organization.member.remove') }}</MsButton> <MsButton @click="deleteMember(record)">{{ t('organization.member.remove') }}</MsButton>
</template> </template>
</ms-base-table> </ms-base-table>
@ -101,24 +107,25 @@
<AddMemberModal <AddMemberModal
ref="AddMemberRef" ref="AddMemberRef"
v-model:visible="addMemberVisible" v-model:visible="addMemberVisible"
:member-list="memberList" :project-list="projectOptions"
:project-list="projectList"
:user-group-options="userGroupOptions" :user-group-options="userGroupOptions"
@success="handlerOk" @success="initData()"
/> />
<MSBatchModal <MSBatchModal
v-if="treeData.length > 0" v-if="treeData.length > 0"
ref="batchModalRef"
v-model:visible="showBatchModal" v-model:visible="showBatchModal"
:table-selected="tableSelected" :table-selected="tableSelected"
:action="batchAction" :action="batchAction"
:tree-data="treeData" :tree-data="treeData"
@add-project="addProject" :select-data="selectData"
@add-user-group="addUserGroup" @add-project="addProjectOrAddUserGroup"
@add-user-group="addProjectOrAddUserGroup"
/> />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref } from 'vue'; import { onBeforeMount, ref } from 'vue';
import { useI18n } from '@/hooks/useI18n'; import { useI18n } from '@/hooks/useI18n';
import MsBaseTable from '@/components/pure/ms-table/base-table.vue'; import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
import MsButton from '@/components/pure/ms-button/index.vue'; import MsButton from '@/components/pure/ms-button/index.vue';
@ -131,20 +138,27 @@
deleteMemberReq, deleteMemberReq,
addOrUpdate, addOrUpdate,
batchAddProject, batchAddProject,
batchAddUserGroup,
getProjectList, getProjectList,
getGlobalUserGroup, getGlobalUserGroup,
getUser,
} from '@/api/modules/setting/member'; } from '@/api/modules/setting/member';
import useModal from '@/hooks/useModal'; import useModal from '@/hooks/useModal';
import { TableKeyEnum } from '@/enums/tableEnum'; import { TableKeyEnum } from '@/enums/tableEnum';
import MSBatchModal from '@/components/bussiness/ms-batch-modal/index.vue'; import MSBatchModal from '@/components/bussiness/ms-batch-modal/index.vue';
import { useTableStore, useUserStore } from '@/store'; import { useTableStore, useUserStore } from '@/store';
import type { MsTableColumn } from '@/components/pure/ms-table/type'; import type { MsTableColumn } from '@/components/pure/ms-table/type';
import type { MemberItem, AddorUpdateMemberModel, LinkList, BatchAddProjectModel } from '@/models/setting/member'; import type {
MemberItem,
AddorUpdateMemberModel,
LinkList,
LinkItem,
BatchAddProjectModel,
} from '@/models/setting/member';
const tableStore = useTableStore(); const tableStore = useTableStore();
const { t } = useI18n(); const { t } = useI18n();
const userStore = useUserStore(); const userStore = useUserStore();
const lastOrganizationId = userStore.$state?.lastOrganizationId as string;
const columns: MsTableColumn = [ const columns: MsTableColumn = [
{ {
@ -193,7 +207,7 @@
title: 'organization.member.tableColunmActions', title: 'organization.member.tableColunmActions',
slotName: 'action', slotName: 'action',
fixed: 'right', fixed: 'right',
width: 150, width: 100,
showDrag: false, showDrag: false,
showInTable: true, showInTable: true,
}, },
@ -214,22 +228,40 @@
}; };
const { propsRes, propsEvent, loadList, setLoadListParams } = useTable(getMemberList, { const { propsRes, propsEvent, loadList, setLoadListParams } = useTable(getMemberList, {
tableKey: TableKeyEnum.ORGANNATIONMEMBER, tableKey: TableKeyEnum.ORGANNATIONMEMBER,
scroll: { y: 'auto', x: 1400 }, scroll: { x: 1200 },
selectable: true, selectable: true,
}); });
const keyword = ref(''); const keyword = ref('');
const tableSelected = ref<(string | number)[]>([]);
const selectData = ref<string[]>([]);
const { openModal } = useModal();
interface TreeDataItem {
key: string;
title: string;
children?: TreeDataItem[];
}
const batchAction = ref('');
const initData = async () => { const initData = async () => {
setLoadListParams({ keyword: keyword.value, organizationId: userStore.$state?.lastOrganizationId }); setLoadListParams({ keyword: keyword.value, organizationId: lastOrganizationId });
await loadList(); await loadList();
}; };
const searchHandler = () => { const searchHandler = () => {
initData(); initData();
}; };
const addMemberVisible = ref<boolean>(false); const addMemberVisible = ref<boolean>(false);
const AddMemberRef = ref(); const AddMemberRef = ref();
const tableSelected = ref<(string | number)[]>([]);
const { openModal } = useModal(); const addOrEditMember = (type: string, record: AddorUpdateMemberModel = {}) => {
function deleteMember(record: MemberItem) { addMemberVisible.value = true;
AddMemberRef.value.type = type;
if (type === 'edit') {
AddMemberRef.value.edit(record);
}
};
const deleteMember = (record: MemberItem) => {
openModal({ openModal({
type: 'warning', type: 'warning',
title: t('organization.member.deleteMemberTip', { name: record.name }), title: t('organization.member.deleteMemberTip', { name: record.name }),
@ -241,7 +273,7 @@
}, },
onBeforeOk: async () => { onBeforeOk: async () => {
try { try {
await deleteMemberReq(record.lastOrganizationId, record.id); await deleteMemberReq(lastOrganizationId, record.id);
Message.success(t('organization.member.deleteMemberSuccess')); Message.success(t('organization.member.deleteMemberSuccess'));
initData(); initData();
} catch (error) { } catch (error) {
@ -250,79 +282,73 @@
}, },
hideCancel: false, hideCancel: false,
}); });
} };
function editMember(record: AddorUpdateMemberModel) { const handleTableSelect = (selectArr: (string | number)[]) => {
addMemberVisible.value = true;
AddMemberRef.value.type = 'edit';
AddMemberRef.value.edit(record);
}
function handleTableSelect(selectArr: (string | number)[]) {
tableSelected.value = selectArr; tableSelected.value = selectArr;
} };
function addMember() {
addMemberVisible.value = true; const treeData = ref<TreeDataItem[]>([]);
AddMemberRef.value.type = 'add'; const getData = async (callBack: any) => {
}
function handlerOk() {
initData();
}
const showBatchModal = ref(false);
const batchAction = ref('');
const treeData = ref([]);
const getProjectTreeData = async () => {
treeData.value = [];
try { try {
const result = await getProjectList({ const links = await callBack(lastOrganizationId);
current: 1, treeData.value = links.map((item: LinkItem) => {
pageSize: 10,
organizationId: userStore.$state?.lastOrganizationId,
});
treeData.value = result.list.map((item: any) => {
return { return {
title: item.name, title: item.name,
key: item.id, key: item.id,
id: item.id,
}; };
}); });
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
}; };
const getUserTreeData = async () => {
treeData.value = []; const batchModalRef = ref();
}; const showBatchModal = ref(false);
// 添加到项目
const addProject = async (target: string[]) => { const batchList = [
try { {
const params: BatchAddProjectModel = { type: 'project',
organizationId: userStore.$state?.lastOrganizationId, request: batchAddProject,
memberIds: tableSelected.value, },
projectIds: target, {
}; type: 'usergroup',
await batchAddProject(params); request: batchAddUserGroup,
Message.success(t('organization.member.batchModalSuccess')); },
initData(); ];
} catch (error) { // 添加到项目和用户组
console.log(error); const addProjectOrAddUserGroup = (target: string[], type: string) => {
const currentType = batchList.find((item) => item.type === type);
const params: BatchAddProjectModel = {
organizationId: lastOrganizationId,
memberIds: tableSelected.value,
};
if (type === 'project') {
params.projectIds = target;
} else {
params.userRoleIds = target;
} }
if (currentType) batchModalRef.value.batchRequestFun(currentType.request, params);
}; };
// 添加到用户组 // 批量操作
function addUserGroup() {} const handelTableBatch = (actionItem: any) => {
function handelTableBatch(actionItem: any) {
showBatchModal.value = true; showBatchModal.value = true;
treeData.value = [];
batchAction.value = actionItem.eventTag; batchAction.value = actionItem.eventTag;
if (actionItem.eventTag === 'batchAddProject') getProjectTreeData(); if (actionItem.eventTag === 'batchAddProject') getData(getProjectList);
if (actionItem.eventTag === 'batchAddUsergroup') getUserTreeData(); if (actionItem.eventTag === 'batchAddUsergroup') getData(getGlobalUserGroup);
} };
// 列表编辑更新用户组和项目 // 列表编辑更新用户组和项目
const updateUserOrProject = async (record: MemberItem) => { const updateUserOrProject = async (record: MemberItem) => {
try { try {
const params = { const params = {
organizationId: record.lastOrganizationId, organizationId: lastOrganizationId,
projectIds: [...record.selectProjectList], projectIds: [...record.selectProjectList],
userRoleIds: [...record.selectUserList], userRoleIds: [...record.selectUserList],
memberId: record.id,
}; };
await addOrUpdate(params, 'edit'); await addOrUpdate(params, 'edit');
Message.success(t('organization.member.batchModalSuccess')); Message.success(t('organization.member.batchUpdateSuccess'));
initData(); initData();
} catch (error) { } catch (error) {
console.log(error); console.log(error);
@ -333,6 +359,9 @@
}; };
// 编辑模式和下拉选择切换 // 编辑模式和下拉选择切换
const changeUserOrProject = (record: MemberItem, type: string) => { const changeUserOrProject = (record: MemberItem, type: string) => {
if (!record.enable) {
return;
}
if (type === 'project') { if (type === 'project') {
record.showProjectSelect = true; record.showProjectSelect = true;
record.showUserSelect = false; record.showUserSelect = false;
@ -340,8 +369,8 @@
record.showUserSelect = true; record.showUserSelect = true;
record.showProjectSelect = false; record.showProjectSelect = false;
} }
record.selectProjectList = Object.keys(record.projectIdNameMap || {}); record.selectProjectList = (record.projectIdNameMap || []).map((item) => item.id);
record.selectUserList = Object.keys(record.userRoleIdNameMap || {}); record.selectUserList = (record.userRoleIdNameMap || []).map((item) => item.id);
}; };
// 用户和项目选择改变的回调 // 用户和项目选择改变的回调
const selectUserOrProject = (value: any, record: MemberItem, type: string) => { const selectUserOrProject = (value: any, record: MemberItem, type: string) => {
@ -358,38 +387,19 @@
Message.warning(t('organization.member.selectUserEmptyTip')); Message.warning(t('organization.member.selectUserEmptyTip'));
return; return;
} }
if (type === 'project' && record.selectProjectList.length < 1) {
Message.warning(t('organization.member.selectProjectScope'));
return;
}
updateUserOrProject(record); updateUserOrProject(record);
} }
}; };
const memberList = ref<LinkList>([]);
const userGroupOptions = ref<LinkList>([]); const userGroupOptions = ref<LinkList>([]);
const projectList = ref<LinkList>([ const projectOptions = ref<LinkList>([]);
{ const getLinkList = async () => {
id: '1', userGroupOptions.value = await getGlobalUserGroup(lastOrganizationId);
name: '项目一', projectOptions.value = await getProjectList(lastOrganizationId);
},
{
id: '2',
name: '项目二',
},
]);
const getUserAndGroupList = async () => {
try {
const userGroupData = await getGlobalUserGroup();
const userData = await getUser();
userGroupOptions.value = userGroupData.filter((item: any) => item.type === 'ORGANIZATION');
memberList.value = userData;
} catch (error) {
console.log(error);
}
}; };
onMounted(() => { onBeforeMount(() => {
getUserAndGroupList();
initData(); initData();
getLinkList();
}); });
</script> </script>