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

feat: 表格组件展示tooltip和状态字段支持传入国际化参数

This commit is contained in:
RubyLiu 2023-08-22 18:50:40 +08:00 committed by f2c-ci-robot[bot]
parent affd770918
commit 0d76b11adf
2 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -47,19 +47,26 @@
<div v-else class="title">{{ t(item.title as string) }}</div> <div v-else class="title">{{ t(item.title as string) }}</div>
</template> </template>
<template #cell="{ column, record, rowIndex }"> <template #cell="{ column, record, rowIndex }">
<div class="flex flex-row items-center"> <div class="flex flex-row flex-nowrap items-center" :class="item.isTag ? 'max-w-[360px]' : 'max-w-[300px]'">
<template v-if="item.dataIndex === SpecialColumnEnum.ENABLE"> <template v-if="item.dataIndex === SpecialColumnEnum.ENABLE">
<slot name="enable" v-bind="{ record }"> <slot name="enable" v-bind="{ record }">
<div v-if="record.enable" class="flex items-center"> <div v-if="record.enable" class="flex items-center">
<icon-check-circle-fill class="mr-[2px] text-[rgb(var(--success-6))]" /> <icon-check-circle-fill class="mr-[2px] text-[rgb(var(--success-6))]" />
{{ t('msTable.enable') }} {{ item.enableTitle ? t(item.enableTitle) : t('msTable.enable') }}
</div> </div>
<div v-else class="flex items-center text-[var(--color-text-4)]"> <div v-else class="flex items-center text-[var(--color-text-4)]">
<MsIcon type="icon-icon_disable" class="mr-[2px]" /> <MsIcon type="icon-icon_disable" class="mr-[2px]" />
{{ t('msTable.disable') }} {{ item.disableTitle ? t(item.disableTitle) : t('msTable.disable') }}
</div> </div>
</slot> </slot>
</template> </template>
<template v-else-if="item.showTooltip">
<a-tooltip placement="top" :content="record[item.dataIndex as string]">
<slot :name="item.slotName" v-bind="{ record, rowIndex, column }">
<span>{{ record[item.dataIndex as string] }}</span>
</slot>
</a-tooltip>
</template>
<template v-else> <template v-else>
<a-input <a-input
v-if="editActiveKey === rowIndex && item.dataIndex === editKey" v-if="editActiveKey === rowIndex && item.dataIndex === editKey"
@ -83,6 +90,7 @@
</template> </template>
</a-table-column> </a-table-column>
</template> </template>
<template #empty> <template #empty>
<div class="flex h-[20px] flex-col items-center justify-center"> <div class="flex h-[20px] flex-col items-center justify-center">
<span class="text-[14px] text-[var(--color-text-4)]">{{ t('msTable.empty') }}</span> <span class="text-[14px] text-[var(--color-text-4)]">{{ t('msTable.empty') }}</span>

8
frontend/src/components/pure/ms-table/type.ts
View File

@ -18,6 +18,14 @@ export interface MsTableColumnData extends TableColumnData {
showInTable?: boolean; showInTable?: boolean;
// 是否可编辑 // 是否可编辑
editable?: boolean; editable?: boolean;
// 是否展示tooltip
showTooltip?: boolean;
// 启用Title 默认为启用
enableTitle?: string;
// 禁用Title 默认为禁用
disableTitle?: string;
// 当展示tooltip时，是否是Tag
isTag?: boolean;
} }
export type MsTableErrorStatus = boolean | 'error' | 'empty'; export type MsTableErrorStatus = boolean | 'error' | 'empty';