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-15 00:10:59 +08:00 committed by 刘瑞斌
parent fd9f0bb3a8
commit 87e0839ad6
9 changed files with 151 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/api/modules/setting/system/organizationAndProject.ts
View File

@ -8,6 +8,16 @@ export function postOrgTable(data: TableQueryParams) {
return MSR.post({ url: orgUrl.postOrgTableUrl, data });
}
// 删除组织
export function deleteOrg(id: string) {
return MSR.get({ url: `${orgUrl.getDeleteOrgUrl}${id}` });
}
// 启用或禁用组织
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 });

16
frontend/src/components/bussiness/ms-remove-button/MsRemoveButton.vue
View File

@ -1,21 +1,18 @@
<template>
<MsPopconfirm
v-model:visible="currentVisible"
:ok-text="t('common.remove')"
:cancel-text="t('common.cancel')"
type="error"
:title="props.title"
:sub-title-tip="props.subTitleTip"
@confirm="handleOk"
@cancel="handleCancel"
>
<MsButton @click="showPopconfirm">{{ t('common.remove') }}</MsButton>
<MsButton>{{ t('common.remove') }}</MsButton>
</MsPopconfirm>
</template>
<script setup lang="ts">
import { useI18n } from '@/hooks/useI18n';
import { ref } from 'vue';
import MsButton from '@/components/pure/ms-button/index.vue';
import MsPopconfirm from '@/components/pure/ms-popconfirm/index.vue';
@ -28,19 +25,8 @@
(e: 'ok'): void;
}>();
const currentVisible = ref(false);
const handleCancel = () => {
currentVisible.value = false;
};
const showPopconfirm = () => {
currentVisible.value = true;
};
const handleOk = () => {
emit('ok');
currentVisible.value = false;
};
const { t } = useI18n();

16
frontend/src/hooks/useModal.ts
View File

@ -1,5 +1,6 @@
import { Modal } from '@arco-design/web-vue';
import type { ModalConfig } from '@arco-design/web-vue';
import { useI18n } from '@/hooks/useI18n';
export type ModalType = 'info' | 'success' | 'warning' | 'error';
@ -13,6 +14,11 @@ export interface ModalOptions extends ModalConfig {
size?: ModalSize;
}
export interface DeleteModalOptions extends ModalConfig {
title: string;
content: string;
}
const { t } = useI18n();
export default function useModal() {
return {
openModal: (options: ModalOptions) =>
@ -32,5 +38,15 @@ export default function useModal() {
options.size || 'small'
} ms-usemodal-${options.type}`,
}),
deleteModal: (options: DeleteModalOptions) =>
Modal.warning({
okText: t('common.confirmDelete'),
cancelText: t('common.cancel'),
hideCancel: false,
okButtonProps: { status: 'danger' },
titleAlign: 'start',
modalClass: `ms-usemodal ms-usemodal-warning ms-usemodal-${'small'} ms-usemodal--warning`,
...options,
}),
};
}

3
frontend/src/locale/en-US/common.ts
View File

@ -10,6 +10,8 @@ export default {
'common.search': 'Search',
'common.reset': 'Reset',
'common.retry': 'Retry',
'common.end': 'End',
'common.enable': 'Enable',
'common.all': 'All',
'common.operation': 'Operation',
'common.remove': 'Remove',
@ -27,4 +29,5 @@ export default {
'common.operationFailed': 'Operation failed',
'common.removeSuccess': 'Remove success',
'common.removeFailed': 'Remove failed',
'common.admin': 'Admin',
};

3
frontend/src/locale/zh-CN/common.ts
View File

@ -10,6 +10,8 @@ export default {
'common.search': '搜索',
'common.reset': '重置',
'common.retry': '重试',
'common.end': '结束',
'common.enable': '启用',
'common.all': '全部',
'common.operation': '操作',
'common.remove': '移除',
@ -27,4 +29,5 @@ export default {
'common.operationFailed': '操作失败',
'common.removeSuccess': '移除成功',
'common.removeFailed': '移除失败',
'common.admin': '管理员',
};

1
frontend/src/views/setting/system/organizationAndProject/components/addOrganizationModal.vue
View File

@ -38,6 +38,7 @@
const { t } = useI18n();
const props = defineProps<{
visible: boolean;
organizationId?: string;
}>();
const formRef = ref<FormInstance>();

183
frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue
View File

@ -1,5 +1,11 @@
<template>
<MsBaseTable v-bind="propsRes" v-on="propsEvent">
<template #creator="{ record }">
<span>{{ record.createUser }}</span>
<span v-if="record.orgAdmins.length > 0" class="text-[var(--color-text-4)]">{{
`&nbsp;(${t('common.admin')})`
}}</span>
</template>
<template #memberCount="{ record }">
<span class="primary-color" @click="showUserDrawer(record)">{{ record.memberCount }}</span>
</template>
@ -8,18 +14,19 @@
</template>
<template #operation="{ record }">
<template v-if="!record.enable">
<MsButton @click="handleEnable(record)">{{ t('system.organization.enable') }}</MsButton>
<MsButton @click="handleDelete(record)">{{ t('system.organization.delete') }}</MsButton>
<MsButton @click="handleEnableOrDisableOrg(record)">{{ t('common.enable') }}</MsButton>
<MsButton @click="handleDelete(record)">{{ t('common.delete') }}</MsButton>
</template>
<template v-else>
<MsButton @click="showOrganizationModal(record)">{{ t('system.organization.edit') }}</MsButton>
<MsButton @click="showOrganizationModal(record)">{{ t('common.edit') }}</MsButton>
<MsButton @click="showAddUserModal(record)">{{ t('system.organization.addMember') }}</MsButton>
<MsButton @click="handleEnd(record)">{{ t('system.organization.end') }}</MsButton>
<MsButton @click="handleEnableOrDisableOrg(record, false)">{{ t('common.end') }}</MsButton>
<MsTableMoreAction :list="tableActions" @select="handleMoreAction($event, record)"></MsTableMoreAction>
</template>
</template>
</MsBaseTable>
<AddOrganizationModal :visible="userVisible" @cancel="handleAddUserModalCancel" />
<AddOrganizationModal type="edit" :visible="orgVisible" @cancel="handleAddOrgModalCancel" />
<AddUserModal :organization-id="currentOrganizationId" :visible="userVisible" @cancel="handleAddUserModalCancel" />
<ProjectDrawer v-bind="currentProjectDrawer" @cancel="handleProjectDrawerCancel" />
<UserDrawer v-bind="currentUserDrawer" @cancel="handleUserDrawerCancel" />
</template>
@ -31,15 +38,17 @@
import { useTableStore } from '@/store';
import { ref, reactive, watch } from 'vue';
import type { ActionsItem } from '@/components/pure/ms-table-more-action/types';
import { postOrgTable } from '@/api/modules/setting/system/organizationAndProject';
import { postOrgTable, deleteOrg, enableOrDisableOrg } from '@/api/modules/setting/system/organizationAndProject';
import { TableKeyEnum } from '@/enums/tableEnum';
import { MsTableColumn } from '@/components/pure/ms-table/type';
import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue';
import MsButton from '@/components/pure/ms-button/index.vue';
import AddOrganizationModal from './addOrganizationModal.vue';
import ProjectDrawer from './projectDrawer.vue';
import { TableData } from '@arco-design/web-vue';
import { Message, TableData } from '@arco-design/web-vue';
import UserDrawer from './userDrawer.vue';
import AddUserModal from './addUserModal.vue';
import useModal from '@/hooks/useModal';
export interface SystemOrganizationProps {
keyword: string;
@ -50,76 +59,9 @@
const { t } = useI18n();
const tableStore = useTableStore();
const userVisible = ref(false);
const currentProjectDrawer = reactive({
visible: false,
organizationId: '',
currentName: '',
});
const currentUserDrawer = reactive({
visible: false,
organizationId: '',
});
const tableActions: ActionsItem[] = [
{
label: 'system.user.delete',
eventTag: 'delete',
danger: true,
},
];
const handleDelete = (record: any) => {
// eslint-disable-next-line no-console
console.log(record);
};
const handleMoreAction = (tag: string, record: any) => {
if (tag === 'delete') {
handleDelete(record);
}
};
const handleEnable = (record: any) => {
// eslint-disable-next-line no-console
console.log(record);
};
const handleEnd = (record: any) => {
// eslint-disable-next-line no-console
console.log(record);
};
const showOrganizationModal = (record: any) => {
// eslint-disable-next-line no-console
console.log(record);
};
const showAddUserModal = (record: any) => {
// eslint-disable-next-line no-console
console.log(record);
userVisible.value = true;
};
const handleProjectDrawerCancel = () => {
currentProjectDrawer.visible = false;
};
const showProjectDrawer = (record: TableData) => {
currentProjectDrawer.visible = true;
currentProjectDrawer.organizationId = record.id;
currentProjectDrawer.currentName = record.name;
};
const showUserDrawer = (record: TableData) => {
currentUserDrawer.visible = true;
currentUserDrawer.organizationId = record.id;
};
const handleUserDrawerCancel = () => {
currentUserDrawer.visible = false;
};
const orgVisible = ref(false);
const currentOrganizationId = ref('');
const { deleteModal } = useModal();
const organizationColumns: MsTableColumn = [
{
@ -150,6 +92,7 @@
},
{
title: 'system.organization.creator',
slotName: 'creator',
dataIndex: 'createUser',
},
{
@ -182,9 +125,95 @@
await loadList();
};
const currentProjectDrawer = reactive({
visible: false,
organizationId: '',
currentName: '',
});
const currentUserDrawer = reactive({
visible: false,
organizationId: '',
});
const tableActions: ActionsItem[] = [
{
label: 'system.user.delete',
eventTag: 'delete',
danger: true,
},
];
const handleDelete = (record: TableData) => {
deleteModal({
title: t('system.organization.deleteName', { name: record.name }),
content: t('system.organization.deleteTip'),
onOk: async () => {
try {
await deleteOrg(record.id);
Message.success(t('common.deleteSuccess'));
fetchData();
} catch (error) {
// eslint-disable-next-line no-console
console.log(error);
}
},
});
};
const handleMoreAction = (tag: ActionsItem, record: TableData) => {
if (tag.eventTag === 'delete') {
handleDelete(record);
}
};
const handleEnableOrDisableOrg = async (record: any, isEnable = true) => {
try {
await enableOrDisableOrg(record.id, isEnable);
Message.success(t('common.updateSuccess'));
fetchData();
} catch (error) {
// eslint-disable-next-line no-console
console.error(error);
}
};
const showOrganizationModal = (record: any) => {
currentOrganizationId.value = record.id;
orgVisible.value = true;
};
const showAddUserModal = (record: any) => {
currentOrganizationId.value = record.id;
userVisible.value = true;
};
const handleProjectDrawerCancel = () => {
currentProjectDrawer.visible = false;
};
const showProjectDrawer = (record: TableData) => {
currentProjectDrawer.visible = true;
currentProjectDrawer.organizationId = record.id;
currentProjectDrawer.currentName = record.name;
};
const showUserDrawer = (record: TableData) => {
currentUserDrawer.visible = true;
currentUserDrawer.organizationId = record.id;
};
const handleUserDrawerCancel = () => {
currentUserDrawer.visible = false;
};
const handleAddUserModalCancel = () => {
userVisible.value = false;
};
const handleAddOrgModalCancel = () => {
orgVisible.value = false;
};
watch(
() => props.keyword,
() => {

9
frontend/src/views/setting/system/organizationAndProject/components/userDrawer.vue
View File

@ -113,15 +113,14 @@
};
const handleRemove = async (record: TableData) => {
deleteUserFromOrgOrProject(props.organizationId, record.id)
.then(() => {
try {
await deleteUserFromOrgOrProject(props.organizationId, record.id);
Message.success(t('common.removeSuccess'));
fetchData();
})
.catch((error) => {
} catch (error) {
// eslint-disable-next-line no-console
console.error(error);
});
}
};
watch(

3
frontend/src/views/setting/system/organizationAndProject/locale/zh-CN.ts
View File

@ -37,4 +37,7 @@ export default {
'system.organization.userName': '姓名',
'system.organization.email': '邮箱',
'system.organization.phone': '手机',
'system.organization.addSuccess': '添加成功',
'system.organization.deleteName': '确认删除 {name} 这个组织吗',
'system.organization.deleteTip': '删除组织同时将该组织下的项目数据一起删除，请谨慎操作！',
};