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

refactor: 表格单行显示&MsTagGroup增加name参数

This commit is contained in:
RubyLiu 2023-09-05 12:57:48 +08:00 committed by 刘瑞斌
parent 8c7ab91265
commit ba70f598ea
9 changed files with 60 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,24 +55,30 @@
</slot>
</template>
<template #cell="{ column, record, rowIndex }">
<div class="flex flex-row flex-nowrap items-center" :class="item.isTag ? 'max-w-[360px]' : 'max-w-[300px]'">
<div class="flex flex-row flex-nowrap items-center">
<template v-if="item.dataIndex === SpecialColumnEnum.ENABLE">
<slot name="enable" v-bind="{ record }">
<div v-if="record.enable" class="flex items-center">
<template v-if="record.enable">
<icon-check-circle-fill class="mr-[2px] text-[rgb(var(--success-6))]" />
{{ item.enableTitle ? t(item.enableTitle) : t('msTable.enable') }}
</div>
<div v-else class="flex items-center text-[var(--color-text-4)]">
<MsIcon type="icon-icon_disable" class="mr-[2px]" />
</template>
<template v-else>
<MsIcon type="icon-icon_disable" class="mr-[2px] text-[var(--color-text-4)]" />
<span class="text-[var(--color-text-1)]">
{{ item.disableTitle ? t(item.disableTitle) : t('msTable.disable') }}
</span>
</div>
</template>
</slot>
</template>
<template v-else-if="item.isTag">
<div class="one-line-text max-w-[456px]">
<slot :name="item.slotName" v-bind="{ record, rowIndex, column }">
{{ record[item.dataIndex as string] || '-' }}
</slot>
</div>
</template>
<template v-else-if="item.showTooltip">
<a-tooltip placement="top" :content="record[item.dataIndex as string]">
<div class="flex flex-row flex-nowrap items-center">
<a-input
v-if="editActiveKey === rowIndex && item.dataIndex === editKey"
ref="currentInputRef"
@ -81,9 +87,11 @@
@press-enter="handleEditInputEnter(record)"
/>
<template v-else>
<div class="one-line-text max-w-[300px]">
<slot :name="item.slotName" v-bind="{ record, rowIndex, column }">
<div class="one-line-text">{{ record[item.dataIndex as string] || '-' }}</div>
{{ record[item.dataIndex as string] || '-' }}
</slot>
</div>
<MsIcon
v-if="item.editable && item.dataIndex === editKey && !record.deleted"
class="ml-2 cursor-pointer"
@ -92,11 +100,9 @@
@click="handleEdit(rowIndex)"
/>
</template>
</div>
</a-tooltip>
</template>
<template v-else>
<div class="flex flex-row flex-nowrap items-center">
<a-input
v-if="editActiveKey === rowIndex && item.dataIndex === editKey"
ref="currentInputRef"
@ -106,7 +112,7 @@
/>
<template v-else>
<slot :name="item.slotName" v-bind="{ record, rowIndex, column }">
<div class="one-line-text max-w-[300px]">{{ record[item.dataIndex as string] || '-' }}</div>
{{ record[item.dataIndex as string] || '-' }}
</slot>
<MsIcon
v-if="item.editable && item.dataIndex === editKey && !record.deleted"
@ -116,7 +122,6 @@
@click="handleEdit(rowIndex)"
/>
</template>
</div>
</template>
</div>
</template>

8
frontend/src/components/pure/ms-tag/ms-tag-group.vue
View File

@ -1,8 +1,8 @@
<template>
<a-tooltip :content="(props.tagList||[]).map((e: any) => e.name).join('，')">
<div class="float-left flex min-h-[22px] max-w-[456px]">
<a-tooltip :content="(props.tagList||[]).map((e: any) => e[nameKey]).join('，')">
<div class="flex min-h-[22px] max-w-[456px] flex-row">
<MsTag v-for="tag of props.tagList.slice(0, props.showNum)" :key="tag.id" v-bind="attrs">
<slot :tag="tag"> </slot>
{{ tag[props.nameKey] }}
</MsTag>
<MsTag v-if="props.tagList.length > props.showNum" v-bind="attrs">
+{{ props.tagList.length - props.showNum }}</MsTag
@ -19,9 +19,11 @@
defineProps<{
tagList: any;
showNum?: number;
nameKey?: string;
}>(),
{
showNum: 2,
nameKey: 'name',
}
);

4
frontend/src/enums/tableEnum.ts
View File

@ -26,6 +26,10 @@ export enum SpecialColumnEnum {
NAME = 'name',
// 状态列
ENABLE = 'enable',
// 操作列
ACTION = 'action',
// 操作列
OPERATION = 'operation',
}
export enum SelectAllEnum {

4
frontend/src/views/project-management/projectAndPermission/member/index.vue
View File

@ -33,14 +33,10 @@
<MsTagGroup
v-if="!record.showUserSelect"
:tag-list="record.userRoles || []"
:show-num="2"
type="primary"
theme="outline"
@click="changeUser(record)"
>
<template #default="{ tag }">
{{ tag.name }}
</template>
</MsTagGroup>
<a-select
v-else

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

@ -27,13 +27,9 @@
<MsTagGroup
v-if="!record.showProjectSelect"
:tag-list="record.projectIdNameMap || []"
:show-num="2"
theme="outline"
@click="changeUserOrProject(record, 'project')"
>
<template #default="{ tag }">
{{ tag.name }}
</template>
</MsTagGroup>
<a-select
v-else
@ -51,14 +47,10 @@
<MsTagGroup
v-if="!record.showUserSelect"
:tag-list="record.userRoleIdNameMap || []"
:show-num="2"
type="primary"
theme="outline"
@click="changeUserOrProject(record, 'user')"
>
<template #default="{ tag }">
{{ tag.name }}
</template>
</MsTagGroup>
<a-select
v-else

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

@ -96,6 +96,7 @@
title: 'system.organization.ID',
dataIndex: 'num',
width: 100,
showTooltip: true,
},
{
title: 'system.organization.name',

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

@ -92,7 +92,7 @@
{
title: 'system.organization.ID',
dataIndex: 'num',
width: 100,
showTooltip: true,
},
{
title: 'system.organization.name',

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

@ -87,11 +87,7 @@
</a-tag>
</span>
</a-tooltip> -->
<MsTagGroup :tag-list="record.organizations || []" :show-num="2" type="primary" theme="outline">
<template #default="{ tag }">
{{ tag.name }}
</template>
</MsTagGroup>
<MsTagGroup :tag-list="record.organizations || []" type="primary" theme="outline"> </MsTagGroup>
</template>
</a-table-column>
<a-table-column

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

@ -27,42 +27,10 @@
@batch-action="handleTableBatch"
>
<template #organization="{ record }">
<a-tooltip :content="record.organizationList.map((e: any) => e.name).join(',')">
<div>
<a-tag
v-for="org of record.organizationList.slice(0, 2)"
:key="org.id"
class="mr-[4px] bg-transparent"
bordered
>
{{ org.name }}
</a-tag>
<a-tag v-show="record.organizationList.length > 2" class="mr-[4px] bg-transparent" bordered>
+{{ record.organizationList.length - 2 }}
</a-tag>
</div>
</a-tooltip>
<MsTagGroup :tag-list="record.organizationList"> </MsTagGroup>
</template>
<template #userRole="{ record }">
<a-tooltip :content="record.userRoleList.map((e: any) => e.name).join(',')">
<div>
<a-tag
v-for="role of record.userRoleList.slice(0, 2)"
:key="role.id"
:class="['mr-[4px]', 'bg-transparent', record.enable ? 'enableTag' : 'disableTag']"
bordered
>
{{ role.name }}
</a-tag>
<a-tag
v-show="record.userRoleList.length > 2"
:class="['mr-[4px]', 'bg-transparent', record.enable ? 'enableTag' : 'disableTag']"
bordered
>
+{{ record.userRoleList.length - 2 }}
</a-tag>
</div>
</a-tooltip>
<MsTagGroup :tag-list="record.userRoleList" type="primary" theme="outline"> </MsTagGroup>
</template>
<template #action="{ record }">
<template v-if="!record.enable">
@ -244,6 +212,7 @@
import type { ActionsItem } from '@/components/pure/ms-table-more-action/types';
import type { SimpleUserInfo, SystemRole, UserListItem } from '@/models/setting/user';
import type { FormItemModel, MsBatchFormInstance } from '@/components/business/ms-batch-form/types';
import MsTagGroup from '@/components/pure/ms-tag/ms-tag-group.vue';
const { t } = useI18n();
const route = useRoute();
@ -252,44 +221,37 @@
{
title: 'system.user.tableColumnEmail',
dataIndex: 'email',
showInTable: true,
showTooltip: true,
},
{
title: 'system.user.tableColumnName',
dataIndex: 'name',
showInTable: true,
showTooltip: true,
},
{
title: 'system.user.tableColumnPhone',
dataIndex: 'phone',
showInTable: true,
},
{
title: 'system.user.tableColumnOrg',
slotName: 'organization',
dataIndex: 'organizationList',
showTooltip: true,
showInTable: true,
isTag: true,
},
{
title: 'system.user.tableColumnUserGroup',
slotName: 'userRole',
dataIndex: 'userRoleList',
showTooltip: true,
showInTable: true,
isTag: true,
},
{
title: 'system.user.tableColumnStatus',
slotName: 'enable',
dataIndex: 'enable',
showInTable: true,
},
{
title: 'system.user.tableColumnActions',
slotName: 'action',
fixed: 'right',
width: 90,
showInTable: true,
},
];
const tableStore = useTableStore();
@ -299,6 +261,7 @@
{
tableKey: TableKeyEnum.SYSTEM_USER,
columns,
scroll: { x: 1200 },
selectable: true,
},
(record) => ({