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 2024-07-29 10:51:52 +08:00 committed by 刘瑞斌
parent 467be9b526
commit 57f46a8815
12 changed files with 188 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -129,16 +129,12 @@
<div :class="{ 'flex w-full flex-row items-center': !item.isTag && !item.align }">
<template v-if="item.dataIndex === SpecialColumnEnum.ENABLE">
<slot name="enable" v-bind="{ record }">
<div v-if="record.enable" class="flex flex-row flex-nowrap items-center gap-[2px]">
<icon-check-circle-fill class="text-[rgb(var(--success-6))]" />
<div>{{ item.enableTitle ? t(item.enableTitle) : t('msTable.enable') }}</div>
</div>
<div v-else class="flex flex-row flex-nowrap items-center gap-[2px]">
<MsIcon type="icon-icon_disable" class="text-[var(--color-text-4)]" />
<div class="text-[var(--color-text-1)]">
{{ item.disableTitle ? t(item.disableTitle) : t('msTable.disable') }}
</div>
</div>
<a-switch
v-model:model-value="record.enable"
size="small"
:disabled="!hasAnyPermission(item.permission)"
:before-change="(val) => handleChangeEnable(val, record)"
/>
</slot>
</template>
<template v-else-if="item.isTag || item.isStringTag">
@ -312,6 +308,7 @@
import { useI18n } from '@/hooks/useI18n';
import { useAppStore, useTableStore } from '@/store';
import { hasAnyPermission } from '@/utils/permission';
import { DragSortParams } from '@/models/common';
import { ColumnEditTypeEnum, SelectAllEnum, SpecialColumnEnum, TableKeyEnum } from '@/enums/tableEnum';
@ -374,6 +371,7 @@
(e: 'expand', record: TableData): void | Promise<any>;
(e: 'cell-click', record: TableData, column: TableColumnData, ev: Event): void | Promise<any>;
(e: 'clearSelector'): void;
(e: 'enableChange', record: any, newValue: string | number | boolean): void;
(
e: 'filterChange',
dataIndex: string,
@ -697,6 +695,11 @@
}
};
function handleChangeEnable(newValue: string | number | boolean, record: TableData) {
emit('enableChange', record, newValue);
return false;
}
// 根据参数获取全选按钮的位置
const getBatchLeft = () => {
if (attrs.enableDrag) {

4
frontend/src/models/setting/system/orgAndProject.ts
View File

@ -1,4 +1,5 @@
import { TableQueryParams } from '@/models/common';
import type { ResourcePoolItem } from '@/models/setting/resourcePool';
import { UserItem } from '../log';
@ -59,4 +60,7 @@ export interface OrgProjectTableItem {
memberCount: number;
userIds: string[];
resourcePoolIds: string[];
orgAdmins: Record<string, any>;
moduleIds: string[];
resourcePoolList: ResourcePoolItem[];
}

105
frontend/src/views/project-management/fileManagement/components/rightBox.vue
View File

@ -76,9 +76,43 @@
<span>{{ formatFileSize(record.size) }}</span>
</template>
<template #action="{ record }">
<MsButton type="text" class="mr-[8px]" @click="handleDownload(record)">
<a-switch
v-if="record.fileType === 'jar' && hasAnyPermission(['PROJECT_FILE_MANAGEMENT:READ+UPDATE'])"
v-model:model-value="record.enable"
size="small"
:before-change="(val) => handleChangeEnable(val, record)"
/>
<a-divider
v-if="record.fileType === 'jar' && hasAnyPermission(['PROJECT_FILE_MANAGEMENT:READ+UPDATE'])"
direction="vertical"
:margin="8"
/>
<MsButton
v-if="record.fileType !== 'jar' && hasAnyPermission(['PROJECT_FILE_MANAGEMENT:READ+UPDATE'])"
type="text"
class="!mr-0"
@click="handleMove(record)"
>
{{ t('project.fileManagement.move') }}
</MsButton>
<a-divider
v-if="record.fileType !== 'jar' && hasAnyPermission(['PROJECT_FILE_MANAGEMENT:READ+UPDATE'])"
direction="vertical"
:margin="8"
/>
<MsButton
v-if="hasAnyPermission(['PROJECT_FILE_MANAGEMENT:READ+DOWNLOAD'])"
type="text"
class="!mr-0"
@click="handleDownload(record)"
>
{{ t('project.fileManagement.download') }}
</MsButton>
<a-divider
v-if="hasAnyPermission(['PROJECT_FILE_MANAGEMENT:READ+DOWNLOAD'])"
direction="vertical"
:margin="8"
/>
<MsTableMoreAction
:list="record.fileType === 'jar' ? getJarFileActions(record) : normalFileActions"
@select="handleMoreActionSelect($event, record)"
@ -462,7 +496,7 @@
},
];
}
const normalActions = [
const moveActions = [
{
label: 'project.fileManagement.move',
eventTag: 'move',
@ -470,6 +504,9 @@
{
isDivider: true,
},
];
const normalActions = [
{
label: 'project.fileManagement.delete',
eventTag: 'delete',
@ -482,6 +519,7 @@
label: 'project.fileManagement.download',
eventTag: 'download',
},
...moveActions,
...normalActions,
];
}
@ -489,11 +527,7 @@
});
function getJarFileActions(record: FileItem) {
let jarFileActions: ActionsItem[] = [
{
label: 'project.fileManagement.move',
eventTag: 'move',
},
let enableActions: ActionsItem[] = [
{
label: 'common.enable',
eventTag: 'toggle',
@ -502,33 +536,49 @@
label: 'common.disable',
eventTag: 'toggle',
},
{
isDivider: true,
},
];
if (record.enable) {
enableActions = enableActions.filter((e) => e.label !== 'common.enable');
} else if (record.enable === false) {
enableActions = enableActions.filter((e) => e.label !== 'common.disable');
}
const deleteActions = [
{
label: 'project.fileManagement.delete',
eventTag: 'delete',
danger: true,
},
];
const jarFileActions: ActionsItem[] = [
{
label: 'project.fileManagement.move',
eventTag: 'move',
},
{
isDivider: true,
},
];
if (showType.value === 'card') {
jarFileActions = [
return [
{
label: 'project.fileManagement.download',
eventTag: 'download',
},
...jarFileActions,
...enableActions,
...deleteActions,
];
}
if (record.storage === 'GIT') {
jarFileActions = jarFileActions.filter((e) => e.eventTag !== 'move');
return jarFileActions.filter((e) => e.eventTag !== 'move');
}
if (record.enable) {
jarFileActions = jarFileActions.filter((e) => e.label !== 'common.enable');
} else if (record.enable === false) {
jarFileActions = jarFileActions.filter((e) => e.label !== 'common.disable');
}
return jarFileActions;
return [...jarFileActions, ...deleteActions];
}
const hasOperationPermission = computed(() =>
hasAnyPermission([
@ -594,7 +644,7 @@
slotName: 'action',
dataIndex: 'operation',
fixed: 'right',
width: hasOperationPermission.value ? 120 : 50,
width: hasOperationPermission.value ? 180 : 50,
},
];
const tableStore = useTableStore();
@ -993,6 +1043,13 @@
}
}
// 移动
function handleMove(record: FileItem) {
isBatchMove.value = false;
activeFile.value = record;
moveModalVisible.value = true;
}
/**
* 处理表格更多按钮事件
* @param item
@ -1000,9 +1057,7 @@
function handleMoreActionSelect(item: ActionsItem, record: FileItem) {
switch (item.eventTag) {
case 'move':
isBatchMove.value = false;
activeFile.value = record;
moveModalVisible.value = true;
handleMove(record);
break;
case 'delete':
delFile(record, false);
@ -1276,6 +1331,12 @@
});
}
// 开启|禁用
function handleChangeEnable(newValue: string | number | boolean, record: FileItem) {
toggleJarFile(record);
return false;
}
await tableStore.initColumn(TableKeyEnum.FILE_MANAGEMENT_FILE, columns, 'drawer');
</script>

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

@ -17,7 +17,7 @@
@clear="fetchData"
></a-input-search>
</div>
<MsBaseTable v-bind="propsRes" v-on="propsEvent">
<MsBaseTable v-bind="propsRes" v-on="propsEvent" @enable-change="enableChange">
<template #revokeDelete="{ record }">
<a-tooltip class="ms-tooltip-white">
<template #content>
@ -57,9 +57,6 @@
</MsButton>
</template>
<template v-else-if="!record.enable">
<MsButton v-permission="['ORGANIZATION_PROJECT:READ+UPDATE']" @click="handleEnableOrDisableProject(record)">
{{ t('common.enable') }}
</MsButton>
<MsButton v-permission="['ORGANIZATION_PROJECT:READ+DELETE']" @click="handleDelete(record)">
{{ t('common.delete') }}
</MsButton>
@ -185,6 +182,7 @@
dataIndex: 'enable',
disableTitle: 'common.end',
showDrag: true,
permission: ['ORGANIZATION_PROJECT:READ+UPDATE'],
},
{
title: 'common.desc',
@ -261,11 +259,6 @@
});
const tableActions: ActionsItem[] = [
{
label: 'common.end',
eventTag: 'end',
permission: ['ORGANIZATION_PROJECT:READ+UPDATE'],
},
{
label: 'system.user.delete',
eventTag: 'delete',
@ -302,7 +295,11 @@
});
};
const showAddProjectModal = (record: any) => {
function enableChange(record: OrgProjectTableItem, newValue: string | number | boolean) {
handleEnableOrDisableProject(record, newValue as boolean);
}
const showAddProjectModal = (record: OrgProjectTableItem) => {
const { id, name, description, enable, adminList, organizationId, moduleIds, resourcePoolList } = record;
currentUpdateProject.value = {
id,
@ -317,7 +314,7 @@
addProjectVisible.value = true;
};
const showAddUserModal = (record: any) => {
const showAddUserModal = (record: OrgProjectTableItem) => {
currentProjectId.value = record.id;
userVisible.value = true;
};
@ -406,9 +403,6 @@
const handleMoreAction = (tag: ActionsItem, record: TableData) => {
const { eventTag } = tag;
switch (eventTag) {
case 'end':
handleEnableOrDisableProject(record, false);
break;
case 'delete':
handleDelete(record);
break;

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

@ -1,5 +1,5 @@
<template>
<MsBaseTable v-bind="propsRes" v-on="propsEvent">
<MsBaseTable v-bind="propsRes" v-on="propsEvent" @enable-change="enableChange">
<template #revokeDelete="{ record }">
<a-tooltip class="ms-tooltip-white">
<template #content>
@ -46,11 +46,6 @@
}}</MsButton>
</template>
<template v-else-if="!record.enable">
<MsButton
v-permission="['SYSTEM_ORGANIZATION_PROJECT:READ+UPDATE']"
@click="handleEnableOrDisableOrg(record)"
>{{ t('common.enable') }}</MsButton
>
<MsButton v-permission="['SYSTEM_ORGANIZATION_PROJECT:READ+DELETE']" @click="handleDelete(record)">{{
t('common.delete')
}}</MsButton>
@ -62,11 +57,10 @@
<MsButton v-permission="['SYSTEM_ORGANIZATION_PROJECT:READ+ADD_MEMBER']" @click="showAddUserModal(record)">{{
t('system.organization.addMember')
}}</MsButton>
<MsButton
v-permission="['SYSTEM_ORGANIZATION_PROJECT:READ+UPDATE']"
@click="handleEnableOrDisableOrg(record, false)"
>{{ t('common.end') }}</MsButton
>
<!-- TODO 后台缺少字段控制 -->
<MsButton v-xpack :disabled="appStore.currentOrgId === record.id" @click="enterOrganization(record.id)">{{
t('system.project.enterOrganization')
}}</MsButton>
<MsTableMoreAction
v-permission="['SYSTEM_ORGANIZATION_PROJECT:READ+DELETE']"
:list="tableActions"
@ -118,12 +112,17 @@
import { useI18n } from '@/hooks/useI18n';
import useModal from '@/hooks/useModal';
import { useTableStore } from '@/store';
import useAppStore from '@/store/modules/app';
import { characterLimit } from '@/utils';
import { hasAnyPermission } from '@/utils/permission';
import { CreateOrUpdateSystemOrgParams, OrgProjectTableItem } from '@/models/setting/system/orgAndProject';
import { ColumnEditTypeEnum, TableKeyEnum } from '@/enums/tableEnum';
import { enterOrganization } from '@/views/setting/utils';
const appStore = useAppStore();
export interface SystemOrganizationProps {
keyword: string;
}
@ -173,6 +172,7 @@
title: 'system.organization.status',
dataIndex: 'enable',
disableTitle: 'common.end',
permission: ['SYSTEM_ORGANIZATION_PROJECT:READ+UPDATE'],
},
{
title: 'common.desc',
@ -200,7 +200,7 @@
slotName: 'operation',
dataIndex: 'operation',
fixed: 'right',
width: hasOperationPermission.value ? 230 : 50,
width: hasOperationPermission.value ? 250 : 50,
},
];
@ -252,7 +252,7 @@
},
];
const handleEnableOrDisableOrg = async (record: any, isEnable = true) => {
const handleEnableOrDisableOrg = async (record: OrgProjectTableItem, isEnable = true) => {
const title = isEnable ? t('system.organization.enableTitle') : t('system.organization.endTitle');
const content = isEnable ? t('system.organization.enableContent') : t('system.organization.endContent');
const okText = isEnable ? t('common.confirmStart') : t('common.confirmEnd');
@ -276,7 +276,11 @@
});
};
const showOrganizationModal = (record: any) => {
function enableChange(record: OrgProjectTableItem, newValue: string | number | boolean) {
handleEnableOrDisableOrg(record, newValue as boolean);
}
const showOrganizationModal = (record: OrgProjectTableItem) => {
currentOrganizationId.value = record.id;
orgVisible.value = true;
currentUpdateOrganization.value = {
@ -287,7 +291,7 @@
};
};
const showAddUserModal = (record: any) => {
const showAddUserModal = (record: OrgProjectTableItem) => {
currentOrganizationId.value = record.id;
userVisible.value = true;
};

26
frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue
View File

@ -1,5 +1,5 @@
<template>
<MsBaseTable v-bind="propsRes" v-on="propsEvent">
<MsBaseTable v-bind="propsRes" v-on="propsEvent" @enable-change="enableChange">
<template #revokeDelete="{ record }">
<a-tooltip class="ms-tooltip-white">
<template #content>
@ -37,11 +37,6 @@
}}</MsButton>
</template>
<template v-else-if="!record.enable">
<MsButton
v-permission="['SYSTEM_ORGANIZATION_PROJECT:READ+UPDATE']"
@click="handleEnableOrDisableProject(record)"
>{{ t('common.enable') }}</MsButton
>
<MsButton v-permission="['SYSTEM_ORGANIZATION_PROJECT:READ+DELETE']" @click="handleDelete(record)">{{
t('common.delete')
}}</MsButton>
@ -164,6 +159,7 @@
title: 'system.organization.status',
dataIndex: 'enable',
disableTitle: 'common.end',
permission: ['SYSTEM_ORGANIZATION_PROJECT:READ+UPDATE'],
},
{
title: 'common.desc',
@ -238,11 +234,6 @@
});
const tableActions: ActionsItem[] = [
{
label: 'common.end',
eventTag: 'end',
permission: ['SYSTEM_ORGANIZATION_PROJECT:READ+UPDATE'],
},
{
label: 'system.user.delete',
eventTag: 'delete',
@ -250,7 +241,7 @@
},
];
const handleEnableOrDisableProject = async (record: any, isEnable = true) => {
const handleEnableOrDisableProject = async (record: OrgProjectTableItem, isEnable = true) => {
const title = isEnable ? t('system.project.enableTitle') : t('system.project.endTitle');
const content = isEnable ? t('system.project.enableContent') : t('system.project.endContent');
const okText = isEnable ? t('common.confirmStart') : t('common.confirmEnd');
@ -274,7 +265,11 @@
});
};
const showAddProjectModal = (record: any) => {
function enableChange(record: OrgProjectTableItem, newValue: string | number | boolean) {
handleEnableOrDisableProject(record, newValue as boolean);
}
const showAddProjectModal = (record: OrgProjectTableItem) => {
const { id, name, description, enable, adminList, organizationId, moduleIds, resourcePoolList } = record;
addProjectVisible.value = true;
currentUpdateProject.value = {
@ -289,7 +284,7 @@
};
};
const showAddUserModal = (record: any) => {
const showAddUserModal = (record: OrgProjectTableItem) => {
currentProjectId.value = record.id;
userVisible.value = true;
};
@ -376,9 +371,6 @@
const handleMoreAction = (tag: ActionsItem, record: TableData) => {
const { eventTag } = tag;
switch (eventTag) {
case 'end':
handleEnableOrDisableProject(record, false);
break;
case 'delete':
handleDelete(record);
break;

1
frontend/src/views/setting/system/organizationAndProject/locale/en-US.ts
View File

@ -82,4 +82,5 @@ export default {
'system.project.projectAdminIsNotNull': 'Project administrator cannot be empty',
'system.project.pleaseSelectAdmin': 'Please select project administrator',
'system.project.poolIsNotNull': 'Resource pool cannot be empty',
'system.project.enterOrganization': 'Enter the organization',
};

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

@ -78,4 +78,5 @@ export default {
'system.project.projectAdminIsNotNull': '项目管理员不能为空',
'system.project.pleaseSelectAdmin': '请选择项目管理员',
'system.project.poolIsNotNull': '资源池不能为空',
'system.project.enterOrganization': '进入组织',
};

35
frontend/src/views/setting/system/pluginManager/components/pluginTable.vue
View File

@ -60,14 +60,12 @@
</a-table-column>
<a-table-column :title="t('system.plugin.tableColumnsStatus')">
<template #cell="{ record }">
<div v-if="record.enable" class="flex items-center">
<icon-check-circle-fill class="mr-[2px] text-[rgb(var(--success-6))]" />
{{ t('system.user.tableEnable') }}
</div>
<div v-else class="flex items-center text-[var(--color-text-4)]">
<MsIcon type="icon-icon_disable" class="mr-[2px] text-[var(--color-text-4)]" />
{{ t('system.user.tableDisable') }}
</div>
<a-switch
v-model:model-value="record.enable"
size="small"
:disabled="!hasAnyPermission(['SYSTEM_PLUGIN:READ+UPDATE'])"
:before-change="(val: string | number | boolean) => handleChangeEnable(val, record)"
/>
</template>
</a-table-column>
<a-table-column :title="t('system.plugin.tableColumnsApplicationScene')" data-index="scenario">
@ -115,7 +113,7 @@
<span>{{ getTime(record.updateTime) }}</span>
</template>
</a-table-column>
<a-table-column v-if="hasOperationPluginPermission" :width="180" fixed="right" :bordered="false">
<a-table-column v-if="hasOperationPluginPermission" :width="150" fixed="right" :bordered="false">
<template #title>
{{ t('system.plugin.tableColumnsActions') }}
</template>
@ -124,15 +122,6 @@
<MsButton v-permission="['SYSTEM_PLUGIN:READ+UPDATE']" @click="update(record)">{{
t('system.plugin.edit')
}}</MsButton>
<MsButton
v-if="record.enable"
v-permission="['SYSTEM_PLUGIN:READ+UPDATE']"
@click="disableHandler(record)"
>{{ t('system.plugin.tableDisable') }}</MsButton
>
<MsButton v-else v-permission="['SYSTEM_PLUGIN:READ+UPDATE']" @click="enableHandler(record)">{{
t('system.plugin.tableEnable')
}}</MsButton>
<MsTableMoreAction
v-permission="['SYSTEM_PLUGIN:READ+DELETE']"
:list="tableActions"
@ -393,6 +382,16 @@
console.log(error);
}
};
function handleChangeEnable(value: string | number | boolean, record: PluginItem) {
if (value) {
enableHandler(record);
} else {
disableHandler(record);
}
return false;
}
const detailScript = async (record: PluginItem, item: PluginForms) => {
showDrawer.value = true;
config.value = {

1
frontend/src/views/setting/system/pluginManager/components/uploadModel.vue
View File

@ -120,6 +120,7 @@
import { computed, ref, watch, watchEffect } from 'vue';
import { Message } from '@arco-design/web-vue';
import MsButton from '@/components/pure/ms-button/index.vue';
import MsUpload from '@/components/pure/ms-upload/index.vue';
import { addPlugin } from '@/api/modules/setting/pluginManger';

21
frontend/src/views/setting/system/user/index.vue
View File

@ -37,6 +37,7 @@
:action-config="tableBatchActions"
v-on="propsEvent"
@batch-action="handleTableBatch"
@enable-change="enableChange"
>
<template #userGroup="{ record }">
<MsTagGroup
@ -71,9 +72,6 @@
</template>
<template #action="{ record }">
<template v-if="!record.enable">
<MsButton v-permission="['SYSTEM_USER:READ+UPDATE']" @click="enableUser(record)">
{{ t('system.user.enable') }}
</MsButton>
<MsButton v-permission="['SYSTEM_USER:READ+DELETE']" @click="deleteUser(record)">
{{ t('system.user.delete') }}
</MsButton>
@ -387,6 +385,7 @@
slotName: 'enable',
dataIndex: 'enable',
showDrag: true,
permission: ['SYSTEM_USER:READ+UPDATE'],
},
{
title: hasOperationSysUserPermission.value ? 'system.user.tableColumnActions' : '',
@ -543,6 +542,14 @@
});
}
function enableChange(record: UserListItem, newValue: string | number | boolean) {
if (newValue) {
enableUser(record);
} else {
disabledUser(record);
}
}
/**
* 删除用户
*/
@ -589,11 +596,6 @@
eventTag: 'resetPassword',
permission: ['SYSTEM_USER:READ+UPDATE'],
},
{
label: 'system.user.disable',
eventTag: 'disabled',
permission: ['SYSTEM_USER:READ+UPDATE'],
},
{
isDivider: true,
},
@ -705,9 +707,6 @@
case 'resetPassword':
resetPassword(record);
break;
case 'disabled':
disabledUser(record);
break;
case 'delete':
deleteUser(record);
break;

22
frontend/src/views/setting/utils.ts
View File

@ -17,6 +17,28 @@ const userStore = useUserStore();
const appStore = useAppStore();
const licenseStore = useLicenseStore();
// 进入组织
export async function enterOrganization(organizationId: string) {
try {
appStore.showLoading();
if (appStore.currentOrgId !== organizationId) {
if (!licenseStore.hasLicense()) {
router.push({
name: NO_PROJECT_ROUTE_NAME,
});
return;
}
await switchUserOrg(organizationId, userStore.id || '');
await userStore.isLogin();
await userStore.checkIsLogin(true);
}
} catch (error) {
console.log(error);
} finally {
appStore.hideLoading();
}
}
export async function enterProject(projectId: string, organizationId?: string) {
try {
appStore.showLoading();