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-11-08 19:13:42 +08:00 committed by rubylliu
parent c322f69f2c
commit 3d0d242515
5 changed files with 193 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/package.json
View File

@ -58,6 +58,7 @@
"pinia": "^2.1.6",
"pinia-plugin-persistedstate": "^3.2.0",
"query-string": "^8.1.0",
"resize-observer-polyfill": "^1.5.1",
"sortablejs": "^1.15.0",
"vue": "^3.3.4",
"vue-echarts": "^6.6.1",

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

@ -164,25 +164,30 @@
</a-table>
<div
v-if="showBatchAction || attrs.showPagination"
class="mt-[16px] flex h-[32px] w-[100%] flex-row flex-nowrap items-center justify-end px-0"
:class="{ 'justify-between': showBatchAction, 'min-w-[934px]': attrs.selectable }"
class="mt-[16px] flex h-[32px] min-w-[1000px] flex-row flex-nowrap items-center"
:class="{ 'justify-between': showBatchAction }"
>
<batch-action
v-if="showBatchAction"
:select-row-count="selectCurrent"
:action-config="props.actionConfig"
@batch-action="handleBatchAction"
@clear="emit('clearSelector')"
/>
<ms-pagination
v-if="attrs.showPagination"
v-show="props.selectorStatus !== SelectAllEnum.CURRENT"
size="small"
v-bind="(attrs.msPagination as MsPaginationI)"
hide-on-single-page
@change="pageChange"
@page-size-change="pageSizeChange"
/>
<div class="flex flex-grow">
<batch-action
v-if="showBatchAction"
class="flex-1"
:select-row-count="selectCurrent"
:action-config="props.actionConfig"
@batch-action="handleBatchAction"
@clear="emit('clearSelector')"
/>
</div>
<div class="min-w-[500px]">
<ms-pagination
v-if="attrs.showPagination"
v-show="props.selectorStatus !== SelectAllEnum.CURRENT"
size="small"
v-bind="(attrs.msPagination as MsPaginationI)"
hide-on-single-page
@change="pageChange"
@page-size-change="pageSizeChange"
/>
</div>
</div>
<ColumnSelector
v-model:visible="columnSelectorVisible"

124
frontend/src/components/pure/ms-table/batchAction.vue
View File

@ -1,8 +1,8 @@
<template>
<div v-if="props.actionConfig" class="ms-table__patch-action">
<span class="title">{{ t('msTable.batch.selected', { count: props.selectRowCount }) }}</span>
<template v-for="(element, idx) in props.actionConfig.baseAction" :key="element.label">
<a-divider v-if="element.isDivider" class="mx-0 my-[6px]" />
<div v-if="props.actionConfig" ref="refWrapper" class="flex flex-row flex-nowrap">
<div class="title">{{ t('msTable.batch.selected', { count: props.selectRowCount }) }}</div>
<template v-for="(element, idx) in baseAction" :key="element.label">
<a-divider v-if="element.isDivider" class="divider mx-0 my-[6px]" />
<a-button
v-else
class="ml-[12px]"
@ -15,11 +15,11 @@
>{{ t(element.label as string) }}</a-button
>
</template>
<div v-if="props.actionConfig.moreAction" class="relative top-[2px] ml-[16px] inline-block">
<div v-if="props.actionConfig.moreAction" class="drop-down relative ml-[16px] inline-block">
<a-dropdown position="tr" @select="handleSelect">
<a-button type="outline"><MsIcon type="icon-icon_more_outlined" /></a-button>
<template #content>
<template v-for="element in props.actionConfig.moreAction" :key="element.label">
<template v-for="element in moreAction" :key="element.label">
<a-divider v-if="element.isDivider" margin="4px" />
<a-doption v-else :value="element" :class="{ delete: element.danger }">
{{ t(element.label as string) }}
@ -28,7 +28,7 @@
</template>
</a-dropdown>
</div>
<a-button class="ml-[16px]" type="text" @click="emit('clear')">{{ t('msTable.batch.clear') }}</a-button>
<a-button class="clear-btn ml-[16px]" type="text" @click="emit('clear')">{{ t('msTable.batch.clear') }}</a-button>
</div>
</template>
@ -36,10 +36,15 @@
import MsIcon from '../ms-icon-font/index.vue';
import { useI18n } from '@/hooks/useI18n';
import { getNodeWidth } from '@/utils/dom';
import { BatchActionConfig, BatchActionParams } from './type';
import ResizeObserver from 'resize-observer-polyfill';
const { t } = useI18n();
const refWrapper = ref<HTMLElement>();
const props = defineProps<{
selectRowCount?: number;
actionConfig?: BatchActionConfig;
@ -48,16 +53,113 @@
(e: 'batchAction', value: BatchActionParams): void;
(e: 'clear'): void;
}>();
const baseAction = ref<BatchActionConfig['baseAction']>([]);
const moreAction = ref<BatchActionConfig['moreAction']>([]);
// 存储所有的action
const allAction = ref<BatchActionConfig['baseAction']>([]);
const lastVisibleIndex = ref<number | null>(null);
const refResizeObserver = ref<ResizeObserver>();
const titleClass = 'title';
const dividerClass = 'divider';
const dropDownClass = 'drop-down';
const clearBtnClass = 'clear-btn';
const handleSelect = (item: string | number | Record<string, any> | undefined | BatchActionParams) => {
emit('batchAction', item as BatchActionParams);
};
const computedLastVisibleIndex = () => {
if (!refWrapper.value) {
return;
}
const wrapperWidth = getNodeWidth(refWrapper.value);
const childNodeList = [].slice.call(refWrapper.value.children) as HTMLElement[];
let totalWidth = 0;
let menuItemIndex = 0;
for (let i = 0; i < childNodeList.length; i++) {
const node = childNodeList[i];
const classNames = node.className.split(' ');
const isTitle = classNames.includes(titleClass);
const isDivider = classNames.includes(dividerClass);
const isDropDown = classNames.includes(dropDownClass);
const isClearBtn = classNames.includes(clearBtnClass);
if (isDivider) {
totalWidth += 16;
} else if (isTitle) {
// title宽度为固定值100px
totalWidth += 100;
} else if (isDropDown) {
// dropDown宽度为固定值48px + MarginLeft 16px
totalWidth += 64;
} else if (isClearBtn) {
// 清空选择按钮 60px + MarginLeft 16px
totalWidth += 76;
} else {
// 普通按钮宽度为内容宽度 + marginLeft 16px
totalWidth += getNodeWidth(node) + 16;
menuItemIndex++;
}
if (totalWidth > wrapperWidth) {
lastVisibleIndex.value = menuItemIndex - 1;
return;
}
}
lastVisibleIndex.value = null;
setTimeout(() => {
baseAction.value = props.actionConfig?.baseAction || [];
moreAction.value = props.actionConfig?.moreAction || [];
}, 0);
};
watch(
() => props.actionConfig,
(value) => {
if (value) {
allAction.value = [...value.baseAction];
baseAction.value = [...value.baseAction];
if (value.moreAction) {
allAction.value = [...allAction.value, ...value.moreAction];
moreAction.value = [...value.moreAction];
}
}
},
{ immediate: true }
);
watch(
() => lastVisibleIndex.value,
(value) => {
if (value !== null) {
baseAction.value = allAction.value.slice(0, value);
moreAction.value = allAction.value.slice(value);
}
}
);
onMounted(() => {
refResizeObserver.value = new ResizeObserver((entries: ResizeObserverEntry[]) => {
entries.forEach(computedLastVisibleIndex);
});
if (refWrapper.value) {
refResizeObserver.value.observe(refWrapper.value);
}
});
onUnmounted(() => {
refResizeObserver.value?.disconnect();
});
</script>
<style lang="less" scoped>
.ms-table__patch-action {
.title {
color: var(--color-text-2);
}
.title {
display: flex;
align-items: center;
width: 100px;
color: var(--color-text-2);
}
.delete {
border-color: rgb(var(--danger-6)) !important;

9
frontend/src/utils/css.ts
View File

@ -3,4 +3,13 @@ export function addPixelValues(...values: string[]) {
const totalValue = pixelValues.reduce((acc, val) => acc + val, 0);
return `${totalValue}px`;
}
/**
* px 转 number
* @param str size 字符串
* @returns number
*/
export function translatePxToNumber(str: string): number {
const result = Number(str.replace('px', ''));
return Number.isNaN(result) ? 0 : result;
}
export default {};

50
frontend/src/utils/dom.ts
View File

@ -1,3 +1,6 @@
/**
* 滚动到指定元素
*/
export interface ScrollToViewOptions {
behavior?: 'auto' | 'smooth';
block?: 'start' | 'center' | 'end' | 'nearest';
@ -19,11 +22,16 @@ export function scrollIntoView(targetRef: HTMLElement | Element | null, options:
targetRef?.scrollIntoView(scrollOptions);
}
/**
* 无操作函数
*/
export const NOOP = () => {
return undefined;
};
// 判断是否为服务端渲染
/**
* 判断是否为服务端渲染
*/
export const isServerRendering = (() => {
try {
return !(typeof window !== 'undefined' && document !== undefined);
@ -32,7 +40,9 @@ export const isServerRendering = (() => {
}
})();
// 监听事件
/**
* 监听事件
*/
export const on = (() => {
if (isServerRendering) {
return NOOP;
@ -47,7 +57,9 @@ export const on = (() => {
};
})();
// 移除监听事件
/**
* 移除监听事件
*/
export const off = (() => {
if (isServerRendering) {
return NOOP;
@ -61,3 +73,35 @@ export const off = (() => {
element.removeEventListener(type, handler as EventListenerOrEventListenerObject, options);
};
})();
/**
* 获取元素宽度
* @param el 当前元素
* @returns number
*/
export function getNodeWidth(el: HTMLElement) {
return el && +el.getBoundingClientRect().width.toFixed(2);
}
/**
* 获取元素样式
* @param element 当前元素
* @param prop 样式属性
* @returns string
*/
export function getStyle(element: HTMLElement | null, prop: string | null) {
if (!element || !prop) return null;
let styleName = prop as keyof CSSStyleDeclaration;
if (styleName === 'float') {
styleName = 'cssFloat';
}
try {
if (document.defaultView) {
const computed = document.defaultView.getComputedStyle(element, '');
return element.style[styleName] || computed ? computed[styleName] : '';
}
} catch (e) {
return element.style[styleName];
}
return null;
}