feat(系统设置): 系统_组织_成员_页面&联调
This commit is contained in:
xinxin.wu
刘瑞斌
parent
4809d95320
commit
cd691e377f
|
|
@ -1,12 +1,49 @@
|
|||
import MSR from '@/api/http/index';
|
||||
import { GetMemberListUrl, AddMemberUrl } from '@/api/requrls/setting/member';
|
||||
import type { UserListItem, CreateUserParams } from '@/models/setting/user';
|
||||
import {
|
||||
GetMemberListUrl,
|
||||
AddMemberUrl,
|
||||
UpdateMemberUrl,
|
||||
BatchAddProjectUrl,
|
||||
BatchAddUserGroupUrl,
|
||||
DeleteMemberUrl,
|
||||
getUserGroupList,
|
||||
getUserList,
|
||||
getProjectListUrl,
|
||||
} from '@/api/requrls/setting/member';
|
||||
import type { MemberList, AddorUpdateMemberModel, BatchAddProjectModel } from '@/models/setting/member';
|
||||
import type { TableQueryParams } from '@/models/common';
|
||||
|
||||
// 获取成员列表
|
||||
export function getMemberList(data: TableQueryParams) {
|
||||
return MSR.post<UserListItem[]>({ url: GetMemberListUrl, data });
|
||||
return MSR.post<MemberList>({ url: GetMemberListUrl, data });
|
||||
}
|
||||
|
||||
export function batchCreateUser(data: CreateUserParams) {
|
||||
// 添加成员
|
||||
export function addOrUpdate(data: AddorUpdateMemberModel, type: string) {
|
||||
if (type === 'add') {
|
||||
return MSR.post({ url: AddMemberUrl, data });
|
||||
}
|
||||
return MSR.post({ url: UpdateMemberUrl, data });
|
||||
}
|
||||
// 添加到项目
|
||||
export function batchAddProject(data: BatchAddProjectModel) {
|
||||
return MSR.post({ url: BatchAddProjectUrl, data });
|
||||
}
|
||||
// 添加到用户
|
||||
export function batchAddUserGroup(data: AddorUpdateMemberModel) {
|
||||
return MSR.post({ url: BatchAddUserGroupUrl, data });
|
||||
}
|
||||
// 移除成员
|
||||
export function deleteMemberReq(organizationId: string, userId: string) {
|
||||
return MSR.get({ url: DeleteMemberUrl, params: `/${organizationId}/${userId}` });
|
||||
}
|
||||
// 获取全局用户组下拉
|
||||
export function getGlobalUserGroup() {
|
||||
return MSR.get({ url: getUserGroupList });
|
||||
}
|
||||
// 获取用户下拉
|
||||
export function getUser() {
|
||||
return MSR.get({ url: getUserList });
|
||||
}
|
||||
// 【暂用】获取组织下边的项目
|
||||
export function getProjectList(data: any) {
|
||||
return MSR.post({ url: getProjectListUrl, data });
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,15 @@
|
|||
export const GetMemberListUrl = '/member/page';
|
||||
export const AddMemberUrl = '/member/add';
|
||||
export const GetMemberListUrl = '/organization/member/list';
|
||||
export const AddMemberUrl = '/organization/add-member';
|
||||
export const UpdateMemberUrl = '/organization/update-member';
|
||||
// 添加至项目
|
||||
export const BatchAddProjectUrl = '/organization/project/add-member';
|
||||
// 添加至用户组
|
||||
export const BatchAddUserGroupUrl = '/organization/role/update-member';
|
||||
export const DeleteMemberUrl = '/organization/remove-member';
|
||||
// 暂用
|
||||
// 用户组下拉
|
||||
export const getUserGroupList = '/user/role/global/list';
|
||||
// 用户下拉
|
||||
export const getUserList = '/system/user/list';
|
||||
// 获取弹窗里边的穿梭项目列表
|
||||
export const getProjectListUrl = '/system/project/page';
|
||||
|
|
|
|||
|
|
@ -64,12 +64,11 @@
|
|||
visible: false,
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', val: boolean): void;
|
||||
(e: 'addProject'): void;
|
||||
(e: 'addUserGroup'): void;
|
||||
(e: 'addOrgnization'): void;
|
||||
(e: 'addProject', targetValue: string[]): void;
|
||||
(e: 'addUserGroup', targetValue: string[]): void;
|
||||
(e: 'addOrgnization', targetValue: string[]): void;
|
||||
}>();
|
||||
|
||||
const showBatchModal = ref(false);
|
||||
|
|
@ -150,7 +149,6 @@
|
|||
|
||||
return travel(props.treeData);
|
||||
};
|
||||
|
||||
const transferData = getTransferData(props.treeData, []);
|
||||
|
||||
function cancelBatch() {
|
||||
|
|
@ -158,18 +156,21 @@
|
|||
target.value = [];
|
||||
}
|
||||
|
||||
async function confirmBatch() {
|
||||
const confirmBatch = () => {
|
||||
batchLoading.value = true;
|
||||
try {
|
||||
if (target.value.length < 1) {
|
||||
return;
|
||||
}
|
||||
switch (props.action) {
|
||||
case 'batchAddProject':
|
||||
emit('addProject');
|
||||
emit('addProject', target.value);
|
||||
break;
|
||||
case 'batchAddUsergroup':
|
||||
emit('addUserGroup');
|
||||
emit('addUserGroup', target.value);
|
||||
break;
|
||||
case 'batchAddOrgnization':
|
||||
emit('addOrgnization');
|
||||
emit('addOrgnization', target.value);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
|
|
@ -180,7 +181,7 @@
|
|||
} finally {
|
||||
batchLoading.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
|
|||
|
|
@ -11,4 +11,5 @@ export enum TableKeyEnum {
|
|||
USERGROUPUSER = 'userGroupUser',
|
||||
SYSTEM_USER = 'systemUser',
|
||||
SYSTEM_RESOURCEPOOL = 'systemResourcePool',
|
||||
ORGANNATIONMEMBER = 'member',
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,5 @@ import './api-test';
|
|||
import './system/user';
|
||||
import './system/project';
|
||||
import './system/resourcePool';
|
||||
import './system/member';
|
||||
|
||||
MOCK.onAny().passThrough();
|
||||
|
|
|
|||
|
|
@ -1,253 +0,0 @@
|
|||
import { mock } from '@/utils/setup-mock';
|
||||
import { RequestEnum } from '@/enums/httpEnum';
|
||||
|
||||
const getMemberList = () => {
|
||||
return [
|
||||
{
|
||||
id: '103423',
|
||||
name: '成员1',
|
||||
email: 'dehihu@kds.sd',
|
||||
enable: true,
|
||||
createTime: 1686905750716,
|
||||
updateTime: 0,
|
||||
lastOrganizationId: 'string',
|
||||
phone: '18473647583',
|
||||
source: 'string',
|
||||
lastProjectId: 'string',
|
||||
createUser: 'string',
|
||||
updateUser: 'string',
|
||||
projectList: [
|
||||
{
|
||||
id: 'string',
|
||||
num: 0,
|
||||
name: '项目 1',
|
||||
description: 'blabla',
|
||||
createTime: 0,
|
||||
updateTime: 0,
|
||||
createUser: 'string',
|
||||
updateUser: 'string',
|
||||
deleted: true,
|
||||
deleteUser: 'string',
|
||||
deleteTime: 0,
|
||||
enable: true,
|
||||
},
|
||||
{
|
||||
id: 'string',
|
||||
num: 0,
|
||||
name: '项目 2',
|
||||
description: 'blabla',
|
||||
createTime: 0,
|
||||
updateTime: 0,
|
||||
createUser: 'string',
|
||||
updateUser: 'string',
|
||||
deleted: true,
|
||||
deleteUser: 'string',
|
||||
deleteTime: 0,
|
||||
enable: true,
|
||||
},
|
||||
{
|
||||
id: 'string',
|
||||
num: 0,
|
||||
name: '项目 3',
|
||||
description: 'blabla',
|
||||
createTime: 0,
|
||||
updateTime: 0,
|
||||
createUser: 'string',
|
||||
updateUser: 'string',
|
||||
deleted: true,
|
||||
deleteUser: 'string',
|
||||
deleteTime: 0,
|
||||
enable: true,
|
||||
},
|
||||
{
|
||||
id: 'string',
|
||||
num: 0,
|
||||
name: '项目 4',
|
||||
description: 'blabla',
|
||||
createTime: 0,
|
||||
updateTime: 0,
|
||||
createUser: 'string',
|
||||
updateUser: 'string',
|
||||
deleted: true,
|
||||
deleteUser: 'string',
|
||||
deleteTime: 0,
|
||||
enable: true,
|
||||
},
|
||||
],
|
||||
userRoleList: [
|
||||
{
|
||||
id: 'string',
|
||||
name: '角色 1',
|
||||
description: 'sdadasd',
|
||||
internal: true,
|
||||
type: 'string',
|
||||
createTime: 0,
|
||||
updateTime: 0,
|
||||
createUser: 'string',
|
||||
scopeId: 'string',
|
||||
pos: 0,
|
||||
},
|
||||
{
|
||||
id: 'string',
|
||||
name: '角色 2',
|
||||
description: 'sdadasd',
|
||||
internal: true,
|
||||
type: 'string',
|
||||
createTime: 0,
|
||||
updateTime: 0,
|
||||
createUser: 'string',
|
||||
scopeId: 'string',
|
||||
pos: 0,
|
||||
},
|
||||
{
|
||||
id: 'string',
|
||||
name: '角色 3',
|
||||
description: 'sdadasd',
|
||||
internal: true,
|
||||
type: 'string',
|
||||
createTime: 0,
|
||||
updateTime: 0,
|
||||
createUser: 'string',
|
||||
scopeId: 'string',
|
||||
pos: 0,
|
||||
},
|
||||
{
|
||||
id: 'string',
|
||||
name: '角色 4',
|
||||
description: 'sdadasd',
|
||||
internal: true,
|
||||
type: 'string',
|
||||
createTime: 0,
|
||||
updateTime: 0,
|
||||
createUser: 'string',
|
||||
scopeId: 'string',
|
||||
pos: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '103233',
|
||||
name: '成员2',
|
||||
email: 'dehihu@kds.sd',
|
||||
enable: true,
|
||||
createTime: 1686905750716,
|
||||
updateTime: 0,
|
||||
lastOrganizationId: 'string',
|
||||
phone: '18473647583',
|
||||
source: 'string',
|
||||
lastProjectId: 'string',
|
||||
createUser: 'string',
|
||||
updateUser: 'string',
|
||||
projectList: [
|
||||
{
|
||||
id: 'string',
|
||||
num: 0,
|
||||
name: '项目 1',
|
||||
description: 'blabla',
|
||||
createTime: 0,
|
||||
updateTime: 0,
|
||||
createUser: 'string',
|
||||
updateUser: 'string',
|
||||
deleted: true,
|
||||
deleteUser: 'string',
|
||||
deleteTime: 0,
|
||||
enable: true,
|
||||
},
|
||||
{
|
||||
id: 'string',
|
||||
num: 0,
|
||||
name: '项目 2',
|
||||
description: 'blabla',
|
||||
createTime: 0,
|
||||
updateTime: 0,
|
||||
createUser: 'string',
|
||||
updateUser: 'string',
|
||||
deleted: true,
|
||||
deleteUser: 'string',
|
||||
deleteTime: 0,
|
||||
enable: true,
|
||||
},
|
||||
{
|
||||
id: 'string',
|
||||
num: 0,
|
||||
name: '组织 3',
|
||||
description: 'blabla',
|
||||
createTime: 0,
|
||||
updateTime: 0,
|
||||
createUser: 'string',
|
||||
updateUser: 'string',
|
||||
deleted: true,
|
||||
deleteUser: 'string',
|
||||
deleteTime: 0,
|
||||
enable: true,
|
||||
},
|
||||
{
|
||||
id: 'string',
|
||||
num: 0,
|
||||
name: '项目 4',
|
||||
description: 'blabla',
|
||||
createTime: 0,
|
||||
updateTime: 0,
|
||||
createUser: 'string',
|
||||
updateUser: 'string',
|
||||
deleted: true,
|
||||
deleteUser: 'string',
|
||||
deleteTime: 0,
|
||||
enable: true,
|
||||
},
|
||||
],
|
||||
userRoleList: [
|
||||
{
|
||||
id: 'string',
|
||||
name: '角色 1',
|
||||
description: 'sdadasd',
|
||||
internal: true,
|
||||
type: 'string',
|
||||
createTime: 0,
|
||||
updateTime: 0,
|
||||
createUser: 'string',
|
||||
scopeId: 'string',
|
||||
pos: 0,
|
||||
},
|
||||
{
|
||||
id: 'string',
|
||||
name: '角色 2',
|
||||
description: 'sdadasd',
|
||||
internal: true,
|
||||
type: 'string',
|
||||
createTime: 0,
|
||||
updateTime: 0,
|
||||
createUser: 'string',
|
||||
scopeId: 'string',
|
||||
pos: 0,
|
||||
},
|
||||
{
|
||||
id: 'string',
|
||||
name: '角色 3',
|
||||
description: 'sdadasd',
|
||||
internal: true,
|
||||
type: 'string',
|
||||
createTime: 0,
|
||||
updateTime: 0,
|
||||
createUser: 'string',
|
||||
scopeId: 'string',
|
||||
pos: 0,
|
||||
},
|
||||
{
|
||||
id: 'string',
|
||||
name: '角色 4',
|
||||
description: 'sdadasd',
|
||||
internal: true,
|
||||
type: 'string',
|
||||
createTime: 0,
|
||||
updateTime: 0,
|
||||
createUser: 'string',
|
||||
scopeId: 'string',
|
||||
pos: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
mock(RequestEnum.POST, '/member/page', getMemberList(), 200, true);
|
||||
|
|
@ -1,4 +1,58 @@
|
|||
export interface AddMemberForm {
|
||||
members: string[];
|
||||
userGroups: string;
|
||||
// 项目下拉列表
|
||||
export type ItemMap = {
|
||||
name: string;
|
||||
id: string;
|
||||
};
|
||||
// 成员项
|
||||
export interface MemberItem {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
password: string;
|
||||
enable: boolean; // 状态
|
||||
createTime: string | number;
|
||||
updateTime: string | number;
|
||||
language: string;
|
||||
lastOrganizationId: string; // 选中组织
|
||||
phone: string;
|
||||
source: string;
|
||||
lastProjectId: string[]; // 选中项目
|
||||
createUser: string;
|
||||
updateUser: string;
|
||||
deleted: boolean;
|
||||
// 项目
|
||||
projectIdNameMap: ItemMap[];
|
||||
// 用户组
|
||||
userRoleIdNameMap: ItemMap[];
|
||||
// 编辑模式用户组
|
||||
showUserSelect?: boolean;
|
||||
// 编辑模式项目
|
||||
showProjectSelect?: boolean;
|
||||
// 添加到用户组下拉收集的用户组id 列表
|
||||
selectUserList: string[];
|
||||
// 添加到用户组下拉收集的项目id 列表
|
||||
selectProjectList: string[];
|
||||
}
|
||||
// 成员列表
|
||||
export type MemberList = MemberItem[];
|
||||
// 添加成员
|
||||
export interface AddorUpdateMemberModel {
|
||||
id?: string;
|
||||
organizationId?: string;
|
||||
memberIds?: string[];
|
||||
userRoleIds?: string[];
|
||||
projectIds?: string[];
|
||||
}
|
||||
// 添加组织成员到项目
|
||||
export interface BatchAddProjectModel {
|
||||
organizationId?: string;
|
||||
memberIds?: Array<string | number>;
|
||||
projectIds?: string[];
|
||||
}
|
||||
// 用户组下拉列表
|
||||
|
||||
export interface LinkItem {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
export type LinkList = LinkItem[];
|
||||
|
|
|
|||
|
|
@ -16,4 +16,5 @@ export interface UserState {
|
|||
accountId?: string;
|
||||
certification?: number;
|
||||
role: RoleType;
|
||||
lastOrganizationId?: string;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export const successTableResponseWrap = (data: unknown) => {
|
|||
data: { list: data },
|
||||
status: 'ok',
|
||||
message: '请求成功',
|
||||
code: 0,
|
||||
code: 100200,
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -3,103 +3,172 @@
|
|||
v-model:visible="dialogVisible"
|
||||
title-align="start"
|
||||
class="ms-modal-form ms-modal-medium"
|
||||
:ok-text="t('organization.member.Save')"
|
||||
@ok="handleOK"
|
||||
@cancel="handleCancel"
|
||||
:ok-text="t('organization.member.Confirm')"
|
||||
:cancel-text="t('organization.member.Cancel')"
|
||||
>
|
||||
<template #title> {{ t('organization.member.addMember') }} </template>
|
||||
<template #title>
|
||||
{{ type === 'add' ? t('organization.member.addMember') : t('organization.member.updateMember') }}
|
||||
</template>
|
||||
<div class="form">
|
||||
<a-form :model="form" size="large" layout="vertical">
|
||||
<a-form ref="memberFormRef" :model="form" size="large" layout="vertical">
|
||||
<a-form-item
|
||||
v-model="form.members"
|
||||
field="members"
|
||||
:label="t('organization.member.member')"
|
||||
v-if="type === 'edit'"
|
||||
field="projectIds"
|
||||
:label="t('organization.member.proejct')"
|
||||
asterisk-position="end"
|
||||
:rules="[{ required: true, message: t('organization.member.pleaseSelectMember') }]"
|
||||
:rules="[{ required: true, message: t('organization.member.selectProjectEmptyTip') }]"
|
||||
>
|
||||
<a-select
|
||||
v-model="form.members"
|
||||
v-model="form.projectIds"
|
||||
multiple
|
||||
:placeholder="t('organization.member.selectProjectScope')"
|
||||
allow-clear
|
||||
>
|
||||
<a-option v-for="item of props.projectList" :key="item.id" :value="item.id">{{ item.name }}</a-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-else
|
||||
field="memberIds"
|
||||
:label="t('organization.member.member')"
|
||||
asterisk-position="end"
|
||||
:rules="[{ required: true, message: t('organization.member.selectMemberEmptyTip') }]"
|
||||
>
|
||||
<a-select
|
||||
v-model="form.memberIds"
|
||||
multiple
|
||||
:placeholder="t('organization.member.selectMemberScope')"
|
||||
allow-clear
|
||||
>
|
||||
<a-option v-for="item of memberList" :key="item.value">{{ item.label }}</a-option>
|
||||
<a-option v-for="item of props.memberList" :key="item.id" :value="item.id">{{ item.name }}</a-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-model="form.userGroups"
|
||||
field="userGroups"
|
||||
field="userRoleIds"
|
||||
:label="t('organization.member.tableColunmUsergroup')"
|
||||
asterisk-position="end"
|
||||
:rules="[{ required: true }]"
|
||||
:rules="[{ required: true, message: t('organization.member.selectUserEmptyTip') }]"
|
||||
>
|
||||
<a-select v-model="form.userGroups">
|
||||
<a-option v-for="item of userGroupOptions" :key="item.value">{{ item.label }}</a-option>
|
||||
<a-select
|
||||
v-model="form.userRoleIds"
|
||||
multiple
|
||||
allow-clear
|
||||
:placeholder="t('organization.member.selectUserScope')"
|
||||
>
|
||||
<a-option v-for="item of props.userGroupOptions" :key="item.id" :value="item.id">{{ item.name }}</a-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<template #footer>
|
||||
<a-space>
|
||||
<a-button type="secondary" @click="handleCancel">{{ t('organization.member.Cancel') }}</a-button>
|
||||
<a-button type="primary" :loading="confirmLoading" @click="handleOK">
|
||||
{{ t('organization.member.Confirm') }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue';
|
||||
import { ref, watchEffect, watch } from 'vue';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import type { AddMemberForm } from '@/models/setting/member';
|
||||
import { useDialog } from '@/hooks/useDialog';
|
||||
import { FormInstance, Message, ValidatedError } from '@arco-design/web-vue';
|
||||
import { addOrUpdate } from '@/api/modules/setting/member';
|
||||
import { useUserStore } from '@/store';
|
||||
import type { AddorUpdateMemberModel, MemberItem, LinkList } from '@/models/setting/member';
|
||||
|
||||
const { t } = useI18n();
|
||||
const userStore = useUserStore();
|
||||
const props = defineProps<{
|
||||
visible: boolean;
|
||||
title?: string;
|
||||
memberList: LinkList;
|
||||
userGroupOptions: LinkList;
|
||||
projectList: LinkList;
|
||||
}>();
|
||||
const dialogVisible = ref<boolean>(false);
|
||||
const title = ref<string>('');
|
||||
const type = ref<string>('');
|
||||
const emits = defineEmits<{
|
||||
(event: 'update:visible', visible: boolean): void;
|
||||
(event: 'close'): void;
|
||||
(event: 'success'): void;
|
||||
}>();
|
||||
const { dialogVisible } = useDialog(props, emits);
|
||||
const userGroupOptions = ref([
|
||||
{
|
||||
label: 'Beijing',
|
||||
value: 'Beijing',
|
||||
},
|
||||
{
|
||||
label: 'Shanghai',
|
||||
value: 'Shanghai',
|
||||
},
|
||||
{
|
||||
label: 'Guangzhou',
|
||||
value: 'Guangzhou',
|
||||
},
|
||||
]);
|
||||
|
||||
const memberList = ref([
|
||||
{
|
||||
label: 'Beijing',
|
||||
value: 'Beijing',
|
||||
},
|
||||
{
|
||||
label: 'Shanghai',
|
||||
value: 'Shanghai',
|
||||
},
|
||||
{
|
||||
label: 'Guangzhou',
|
||||
value: 'Guangzhou',
|
||||
},
|
||||
]);
|
||||
|
||||
const form = reactive<AddMemberForm>({
|
||||
userGroups: '',
|
||||
members: [],
|
||||
});
|
||||
const confirmLoading = ref<boolean>(false);
|
||||
const memberFormRef = ref<FormInstance | null>(null);
|
||||
const initFormValue = {
|
||||
organizationId: userStore.$state?.lastOrganizationId,
|
||||
userRoleIds: [],
|
||||
memberIds: [],
|
||||
projectIds: [],
|
||||
};
|
||||
const form = ref<AddorUpdateMemberModel>({ ...initFormValue });
|
||||
const handleCancel = () => {
|
||||
emits('close');
|
||||
memberFormRef.value?.resetFields();
|
||||
form.value = { ...initFormValue };
|
||||
dialogVisible.value = false;
|
||||
};
|
||||
const edit = (record: MemberItem) => {
|
||||
const { userRoleIdNameMap } = record;
|
||||
form.value.memberIds = [record.id as string];
|
||||
// form.value.userRoleIds = userRoleIdNameMap.map((item) => item.id);
|
||||
form.value.userRoleIds = Object.keys(userRoleIdNameMap);
|
||||
};
|
||||
|
||||
const handleOK = () => {
|
||||
handleCancel();
|
||||
memberFormRef.value?.validate(async (errors: undefined | Record<string, ValidatedError>) => {
|
||||
if (!errors) {
|
||||
try {
|
||||
confirmLoading.value = true;
|
||||
let params = {};
|
||||
const { organizationId, memberIds, userRoleIds, projectIds } = form.value;
|
||||
params = Object.assign(params, {
|
||||
organizationId,
|
||||
userRoleIds,
|
||||
});
|
||||
params =
|
||||
type.value === 'add'
|
||||
? {
|
||||
...params,
|
||||
memberIds,
|
||||
}
|
||||
: {
|
||||
...params,
|
||||
projectIds,
|
||||
};
|
||||
await addOrUpdate(params, type.value);
|
||||
Message.success(
|
||||
type.value === 'add'
|
||||
? t('organization.member.batchModalSuccess')
|
||||
: t('organization.member.batchUpdateSuccess')
|
||||
);
|
||||
handleCancel();
|
||||
emits('success');
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
confirmLoading.value = false;
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
watchEffect(() => {
|
||||
dialogVisible.value = props.visible;
|
||||
});
|
||||
watch(
|
||||
() => dialogVisible.value,
|
||||
(val) => {
|
||||
emits('update:visible', val);
|
||||
}
|
||||
);
|
||||
defineExpose({
|
||||
title,
|
||||
type,
|
||||
edit,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@/models/setting/member
|
||||
|
|
|
|||
|
|
@ -1,31 +1,86 @@
|
|||
<template>
|
||||
<div>
|
||||
<MsCard simple>
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<div>
|
||||
<a-button class="mr-3" type="primary" @click="AddMember">{{ t('organization.member.addMember') }}</a-button>
|
||||
<a-button class="mr-3" type="primary" @click="addMember">{{ t('organization.member.addMember') }}</a-button>
|
||||
</div>
|
||||
<a-input-search :placeholder="t('organization.member.searchMember')" class="w-[230px]"></a-input-search>
|
||||
<a-input-search
|
||||
v-model="keyword"
|
||||
:placeholder="t('organization.member.searchMember')"
|
||||
class="w-[230px]"
|
||||
@search="searchHandler"
|
||||
@press-enter="searchHandler"
|
||||
></a-input-search>
|
||||
</div>
|
||||
<ms-base-table
|
||||
v-bind="propsRes"
|
||||
:action-config="tableBatchActions"
|
||||
@selected-change="handleTableSelect"
|
||||
v-on="propsEvent"
|
||||
@batch-action="handelTableBatch"
|
||||
>
|
||||
<template #project="{ record }">
|
||||
<a-tag v-for="pro of record.projectList.slice(0, 2)" :key="pro.id" class="mr-[4px] bg-transparent" bordered>
|
||||
{{ pro.name }}
|
||||
<div v-if="!record.showProjectSelect">
|
||||
<!-- <a-tag
|
||||
v-for="pro of record.projectIdNameMap"
|
||||
:key="pro.id"
|
||||
class="mr-[4px] bg-transparent"
|
||||
bordered
|
||||
@click="changeUserOrProject(record, 'project')"
|
||||
> -->
|
||||
<a-tag
|
||||
v-for="pro of 3"
|
||||
:key="pro"
|
||||
class="mr-[4px] bg-transparent"
|
||||
bordered
|
||||
@click="changeUserOrProject(record, 'project')"
|
||||
>
|
||||
{{ pro }}
|
||||
</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')"
|
||||
>
|
||||
<a-option v-for="item of projectList" :key="item.id" :value="item.id">{{ item.name }}</a-option>
|
||||
</a-select>
|
||||
</template>
|
||||
<template #userRole="{ record }">
|
||||
<div v-if="!record.showUserSelect">
|
||||
<a-tag
|
||||
v-for="org of record.userRoleList.slice(0, 2)"
|
||||
:key="org.id"
|
||||
v-for="org of Object.keys(record.userRoleIdNameMap).slice(0, 3)"
|
||||
:key="org"
|
||||
class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]"
|
||||
bordered
|
||||
@click="changeUserOrProject(record, 'user')"
|
||||
>
|
||||
{{ org.name }}
|
||||
{{ record.userRoleIdNameMap[org] }}
|
||||
</a-tag>
|
||||
<a-tag
|
||||
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 #enable="{ record }">
|
||||
<div v-if="record.enable" class="flex items-center">
|
||||
|
|
@ -37,67 +92,113 @@
|
|||
{{ t('organization.member.tableDisable') }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #action="{ record }">
|
||||
<MsButton @click="editMember(record)">{{ t('organization.member.edit') }}</MsButton>
|
||||
<MsButton @click="deleteMember(record)">{{ t('organization.member.remove') }}</MsButton>
|
||||
</template>
|
||||
</ms-base-table>
|
||||
<!-- <add-member-modal :visible="addMemberVisible" @cancel="addMemberVisible = false" /> -->
|
||||
</div>
|
||||
</MsCard>
|
||||
<AddMemberModal
|
||||
ref="AddMemberRef"
|
||||
v-model:visible="addMemberVisible"
|
||||
:member-list="memberList"
|
||||
:project-list="projectList"
|
||||
:user-group-options="userGroupOptions"
|
||||
@success="handlerOk"
|
||||
/>
|
||||
<MSBatchModal
|
||||
v-if="treeData.length > 0"
|
||||
v-model:visible="showBatchModal"
|
||||
:table-selected="tableSelected"
|
||||
:action="batchAction"
|
||||
:tree-data="treeData"
|
||||
@add-project="addProject"
|
||||
@add-user-group="addUserGroup"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, reactive } from 'vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
|
||||
import MsButton from '@/components/pure/ms-button/index.vue';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import useTable from '@/components/pure/ms-table/useTable';
|
||||
import addMemberModal from './components/addMemberModal.vue';
|
||||
import { getMemberList } from '@/api/modules/setting/member';
|
||||
import type { MsTableColumn } from '@/components/pure/ms-table/type';
|
||||
import AddMemberModal from './components/addMemberModal.vue';
|
||||
import MsCard from '@/components/pure/ms-card/index.vue';
|
||||
import {
|
||||
getMemberList,
|
||||
deleteMemberReq,
|
||||
addOrUpdate,
|
||||
batchAddProject,
|
||||
getProjectList,
|
||||
getGlobalUserGroup,
|
||||
getUser,
|
||||
} from '@/api/modules/setting/member';
|
||||
import useModal from '@/hooks/useModal';
|
||||
import { useCommandComponent } from '@/hooks/useCommandComponent';
|
||||
import { TableKeyEnum } from '@/enums/tableEnum';
|
||||
import MSBatchModal from '@/components/bussiness/ms-batch-modal/index.vue';
|
||||
import { useTableStore, useUserStore } from '@/store';
|
||||
import type { MsTableColumn } from '@/components/pure/ms-table/type';
|
||||
import type { MemberItem, AddorUpdateMemberModel, LinkList, BatchAddProjectModel } from '@/models/setting/member';
|
||||
|
||||
const tableStore = useTableStore();
|
||||
const { t } = useI18n();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const columns: MsTableColumn = [
|
||||
{
|
||||
title: 'organization.member.tableColunmEmail',
|
||||
dataIndex: 'email',
|
||||
width: 200,
|
||||
showDrag: false,
|
||||
showInTable: true,
|
||||
},
|
||||
{
|
||||
title: 'organization.member.tableColunmName',
|
||||
dataIndex: 'name',
|
||||
showDrag: false,
|
||||
showInTable: true,
|
||||
},
|
||||
{
|
||||
title: 'organization.member.tableColunmPhone',
|
||||
dataIndex: 'phone',
|
||||
showDrag: false,
|
||||
showInTable: true,
|
||||
},
|
||||
{
|
||||
title: 'organization.member.tableColunmPro',
|
||||
slotName: 'project',
|
||||
dataIndex: 'projectList',
|
||||
width: 250,
|
||||
dataIndex: 'projectIdNameMap',
|
||||
width: 280,
|
||||
showDrag: false,
|
||||
showInTable: true,
|
||||
},
|
||||
{
|
||||
title: 'organization.member.tableColunmUsergroup',
|
||||
slotName: 'userRole',
|
||||
dataIndex: 'userRoleList',
|
||||
dataIndex: 'userRoleIdNameMap',
|
||||
width: 250,
|
||||
showDrag: false,
|
||||
showInTable: true,
|
||||
},
|
||||
{
|
||||
title: 'organization.member.tableColunmStatus',
|
||||
slotName: 'enable',
|
||||
dataIndex: 'enable',
|
||||
showDrag: false,
|
||||
showInTable: true,
|
||||
},
|
||||
{
|
||||
title: 'organization.member.tableColunmActions',
|
||||
slotName: 'action',
|
||||
fixed: 'right',
|
||||
width: 110,
|
||||
width: 150,
|
||||
showDrag: false,
|
||||
showInTable: true,
|
||||
},
|
||||
];
|
||||
tableStore.initColumn(TableKeyEnum.ORGANNATIONMEMBER, columns, 'drawer');
|
||||
|
||||
const tableBatchActions = {
|
||||
baseAction: [
|
||||
|
|
@ -111,32 +212,24 @@
|
|||
},
|
||||
],
|
||||
};
|
||||
|
||||
const { propsRes, propsEvent, loadList, setKeyword } = useTable(getMemberList, {
|
||||
columns,
|
||||
scroll: { y: 'auto', x: 1200 },
|
||||
const { propsRes, propsEvent, loadList, setLoadListParams } = useTable(getMemberList, {
|
||||
tableKey: TableKeyEnum.ORGANNATIONMEMBER,
|
||||
scroll: { y: 'auto', x: 1400 },
|
||||
selectable: true,
|
||||
});
|
||||
|
||||
const keyword = ref('');
|
||||
const addMemberDialog = useCommandComponent(addMemberModal);
|
||||
const addMembersOptions = reactive({
|
||||
title: '添加成员',
|
||||
visible: false,
|
||||
onClose: () => {
|
||||
addMemberDialog.close();
|
||||
},
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
setKeyword(keyword.value);
|
||||
const initData = async () => {
|
||||
setLoadListParams({ keyword: keyword.value, organizationId: userStore.$state?.lastOrganizationId });
|
||||
await loadList();
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
};
|
||||
const searchHandler = () => {
|
||||
initData();
|
||||
};
|
||||
const addMemberVisible = ref<boolean>(false);
|
||||
const AddMemberRef = ref();
|
||||
const tableSelected = ref<(string | number)[]>([]);
|
||||
const { openModal } = useModal();
|
||||
|
||||
function deleteMember(record: any) {
|
||||
function deleteMember(record: MemberItem) {
|
||||
openModal({
|
||||
type: 'warning',
|
||||
title: t('organization.member.deleteMemberTip', { name: record.name }),
|
||||
|
|
@ -148,26 +241,156 @@
|
|||
},
|
||||
onBeforeOk: async () => {
|
||||
try {
|
||||
await deleteMemberReq(record.lastOrganizationId, record.id);
|
||||
Message.success(t('organization.member.deleteMemberSuccess'));
|
||||
return true;
|
||||
initData();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
return false;
|
||||
}
|
||||
},
|
||||
hideCancel: false,
|
||||
});
|
||||
}
|
||||
function editMember(record: any) {}
|
||||
const tableSelected = ref<(string | number)[]>([]);
|
||||
function editMember(record: AddorUpdateMemberModel) {
|
||||
addMemberVisible.value = true;
|
||||
AddMemberRef.value.type = 'edit';
|
||||
AddMemberRef.value.edit(record);
|
||||
}
|
||||
function handleTableSelect(selectArr: (string | number)[]) {
|
||||
tableSelected.value = selectArr;
|
||||
}
|
||||
function AddMember() {
|
||||
addMembersOptions.visible = true;
|
||||
addMemberDialog(addMembersOptions);
|
||||
function addMember() {
|
||||
addMemberVisible.value = true;
|
||||
AddMemberRef.value.type = 'add';
|
||||
}
|
||||
function handlerOk() {
|
||||
initData();
|
||||
}
|
||||
const showBatchModal = ref(false);
|
||||
const batchAction = ref('');
|
||||
const treeData = ref([]);
|
||||
const getProjectTreeData = async () => {
|
||||
treeData.value = [];
|
||||
try {
|
||||
const result = await getProjectList({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
organizationId: userStore.$state?.lastOrganizationId,
|
||||
});
|
||||
treeData.value = result.list.map((item: any) => {
|
||||
return {
|
||||
title: item.name,
|
||||
key: item.id,
|
||||
};
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
const getUserTreeData = async () => {
|
||||
treeData.value = [];
|
||||
};
|
||||
// 添加到项目
|
||||
const addProject = async (target: string[]) => {
|
||||
try {
|
||||
const params: BatchAddProjectModel = {
|
||||
organizationId: userStore.$state?.lastOrganizationId,
|
||||
memberIds: tableSelected.value,
|
||||
projectIds: target,
|
||||
};
|
||||
await batchAddProject(params);
|
||||
Message.success(t('organization.member.batchModalSuccess'));
|
||||
initData();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
// 添加到用户组
|
||||
function addUserGroup() {}
|
||||
function handelTableBatch(actionItem: any) {
|
||||
showBatchModal.value = true;
|
||||
batchAction.value = actionItem.eventTag;
|
||||
if (actionItem.eventTag === 'batchAddProject') getProjectTreeData();
|
||||
if (actionItem.eventTag === 'batchAddUsergroup') getUserTreeData();
|
||||
}
|
||||
// 列表编辑更新用户组和项目
|
||||
const updateUserOrProject = async (record: MemberItem) => {
|
||||
try {
|
||||
const params = {
|
||||
organizationId: record.lastOrganizationId,
|
||||
projectIds: [...record.selectProjectList],
|
||||
userRoleIds: [...record.selectUserList],
|
||||
};
|
||||
await addOrUpdate(params, 'edit');
|
||||
Message.success(t('organization.member.batchModalSuccess'));
|
||||
initData();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
record.showUserSelect = false;
|
||||
record.showProjectSelect = false;
|
||||
}
|
||||
};
|
||||
// 编辑模式和下拉选择切换
|
||||
const changeUserOrProject = (record: MemberItem, type: string) => {
|
||||
if (type === 'project') {
|
||||
record.showProjectSelect = true;
|
||||
record.showUserSelect = false;
|
||||
} else {
|
||||
record.showUserSelect = true;
|
||||
record.showProjectSelect = false;
|
||||
}
|
||||
record.selectProjectList = Object.keys(record.projectIdNameMap || {});
|
||||
record.selectUserList = Object.keys(record.userRoleIdNameMap || {});
|
||||
};
|
||||
// 用户和项目选择改变的回调
|
||||
const selectUserOrProject = (value: any, record: MemberItem, type: string) => {
|
||||
if (type === 'project') {
|
||||
record.selectProjectList = value;
|
||||
} else {
|
||||
record.selectUserList = value;
|
||||
}
|
||||
};
|
||||
// 面板切换的回调
|
||||
const visibleChange = (visible: boolean, record: MemberItem, type: string) => {
|
||||
if (!visible) {
|
||||
if (type === 'user' && record.selectUserList.length < 1) {
|
||||
Message.warning(t('organization.member.selectUserEmptyTip'));
|
||||
return;
|
||||
}
|
||||
if (type === 'project' && record.selectProjectList.length < 1) {
|
||||
Message.warning(t('organization.member.selectProjectScope'));
|
||||
return;
|
||||
}
|
||||
updateUserOrProject(record);
|
||||
}
|
||||
};
|
||||
const memberList = ref<LinkList>([]);
|
||||
const userGroupOptions = ref<LinkList>([]);
|
||||
const projectList = ref<LinkList>([
|
||||
{
|
||||
id: '1',
|
||||
name: '项目一',
|
||||
},
|
||||
{
|
||||
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(() => {
|
||||
getUserAndGroupList();
|
||||
initData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@/api/modules/setting/member
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
export default {
|
||||
'organization.member.addMember': 'Add Member',
|
||||
'organization.member.updateMember': 'Update Member',
|
||||
'organization.member.searchMember': 'Search by name or email address',
|
||||
'organization.member.remove': 'Remove',
|
||||
'organization.member.edit': 'Edit',
|
||||
|
|
@ -16,12 +17,19 @@ export default {
|
|||
'organization.member.tableColunmActions': 'Actions',
|
||||
'organization.member.member': 'Member',
|
||||
'organization.member.selectMemberScope': 'Select the member you want to add. Multiple selection is supported',
|
||||
'organization.member.pleaseSelectMember': 'Please select user',
|
||||
'organization.member.Save': 'Save',
|
||||
'organization.member.deleteMemberTip': 'Are you sure to delete the user `{name}` ?',
|
||||
'organization.member.selectProjectScope': 'Select the project you want to add. Multiple selection is supported',
|
||||
'organization.member.selectMemberEmptyTip': 'The member can not be empty',
|
||||
'organization.member.selectProjectEmptyTip': 'The project can not be empty',
|
||||
'organization.member.selectUserEmptyTip': 'The user group can not be empty',
|
||||
'organization.member.Confirm': 'Confirm',
|
||||
'organization.member.Cancel': 'Cancel',
|
||||
'organization.member.deleteMemberTip': 'Are you sure to remove the user `{name}` ?',
|
||||
'system.user.deleteUserTip': 'Are you sure to delete the user `{name}` ?',
|
||||
'organization.member.deleteMemberConfirm': 'Delete',
|
||||
'organization.member.deleteMemberCancel': 'Cancel',
|
||||
'organization.member.deleteMemberSuccess': 'Delete successful',
|
||||
'organization.member.batchModalSuccess': 'Successfully added',
|
||||
'organization.member.batchUpdateSuccess': 'Successfully updated',
|
||||
'organization.member.proejct': 'Project',
|
||||
'organization.member.selectUserScope': 'Please select a user group for the above members',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
export default {
|
||||
'organization.member.addMember': '添加成员',
|
||||
'organization.member.updateMember': '更新成员',
|
||||
'organization.member.searchMember': '通过名称或邮箱搜索搜索',
|
||||
'organization.member.remove': '移除',
|
||||
'organization.member.edit': '编辑',
|
||||
|
|
@ -16,11 +17,18 @@ export default {
|
|||
'organization.member.tableColunmActions': '操作',
|
||||
'organization.member.member': '成员',
|
||||
'organization.member.selectMemberScope': '请选择需要添加的成员支持多选',
|
||||
'organization.member.pleaseSelectMember': '请选择成员',
|
||||
'organization.member.Save': '保存',
|
||||
'organization.member.deleteMemberTip': '确认删除 `{name}` 这个成员吗？',
|
||||
'organization.member.selectProjectScope': '请选择需要添加的项目支持多选',
|
||||
'organization.member.selectMemberEmptyTip': '成员不能为空',
|
||||
'organization.member.selectProjectEmptyTip': '项目不能为空',
|
||||
'organization.member.selectUserEmptyTip': '用户组不能为空',
|
||||
'organization.member.Confirm': '确定',
|
||||
'organization.member.Cancel': '取消',
|
||||
'organization.member.deleteMemberTip': '确认移除 `{name}` 这个成员吗？',
|
||||
'organization.member.deleteMemberConfirm': '确认删除',
|
||||
'organization.member.deleteMemberCancel': '取消',
|
||||
'organization.member.deleteMemberSuccess': '删除成功',
|
||||
'organization.member.batchModalSuccess': '添加成功',
|
||||
'organization.member.batchUpdateSuccess': '更新成功',
|
||||
'organization.member.proejct': '项目',
|
||||
'organization.member.selectUserScope': '请为以上成员选择用户组',
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue