wangshaoping
/
platform
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

表格优化提交

main
likunming 11 months ago
parent
8e17538139
commit
b3bf5e4e78
2 changed files with 62 additions and 26 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      io.sc.platform.core.frontend/package.json
  2. 80
      io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue

2
io.sc.platform.core.frontend/package.json
View File

@ -1,6 +1,6 @@
{
"name": "platform-core",
"version": "8.1.145",
"version": "8.1.146",
"description": "前端核心包,用于快速构建前端的脚手架",
"//main": "库的主文件",
"main": "dist/platform-core.js",

80
io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
View File

@ -6,6 +6,7 @@
flat
binary-state-sort
:no-data-label="state.noDataLabel"
:hide-no-data="true"
:loading-label="state.loadingLabel"
v-bind="attrs"
:selection="selectionComputed"
@ -70,6 +71,9 @@
{{ c.label }}
</q-th>
</q-tr>
<q-tr v-if="table.rows.length === 0" :style="noDataTrHeightComputed" class="noDataTr">
<q-td :colspan="noDataTrColspanComputed" align="center" valian="middle"><q-icon size="2em" :name="IconEnum.提示" />{{ state.noDataLabel }}</q-td>
</q-tr>
</template>
<template v-else>
<q-tr :props="scope">
@ -92,6 +96,9 @@
</q-th>
</template>
</q-tr>
<q-tr v-if="table.rows.length === 0" :style="noDataTrHeightComputed" class="noDataTr">
<q-td :colspan="noDataTrColspanComputed" align="center" valian="middle"><q-icon size="2em" :name="IconEnum.提示" />{{ state.noDataLabel }}</q-td>
</q-tr>
</template>
</template>
<template #body="scope">
@ -158,6 +165,11 @@
</template>
</q-tr>
</template>
<!-- <template v-if="table.rows.length === 0" #top-row>
<q-tr>
<q-td >{{ state.noDataLabel }}</q-td>
</q-tr>
</template> -->
<template #loading>
<q-inner-loading :showing="state.loading" style="z-index: 999">
<q-spinner-gears size="50px" color="primary" />
@ -197,6 +209,7 @@
</template>
<template v-else> 共 {{ state.pagination.rowsNumber }} 条记录 </template>
</template>
<!--
<template v-if="!attrs['hide-bottom']" #no-data="{ message }">
<div class="full-width row flex-center text-dark q-gutter-sm" :style="`height:` + noDataBottomHeightComputed">
<q-icon size="2em" :name="IconEnum.提示" />
@ -204,7 +217,7 @@
{{ message }}
</span>
</div>
</template>
</template> -->
</q-table>
<w-dialog ref="dialogRef" v-bind="editor.dialog" :title="dialog.dialogTitle" :buttons="dialog.dialogButtons">
<w-form ref="dialogFormRef" v-bind="editor.form" class="pt-1.5 px-1.5"></w-form>
@ -892,6 +905,7 @@ const state = reactive({
// 表格响应式高宽
refHeightWidth: {
yLocation: 0, // 表格当前所在Y轴位置
noDataTrYLocation: 0, // 无数据提示行所在Y轴位置
topHeight: 0, // 表格当前top区域高度（表格列头上方区域）
bottomHeight: 0, // 表格当前bottom区域高度（无可用数据、分页那块区域）
middleWidth: 0, // 表格当前middle区域宽度（表格列头及数据行区域）
@ -1145,53 +1159,61 @@ const tableHeightComputed = computed(() => {
mainPaddingBottom -
mainContainerPaddingBottom -
otherHeight;
if ((table.rows && table.rows.length > 0) || attrs['hide-bottom']) {
return {
height: props.height > 0 ? props.height + 'px' : resultHeight + 'px',
};
} else {
return {
height: state.refHeightWidth.middleHeight + 'px',
};
}
// if ((table.rows && table.rows.length > 0) || attrs['hide-bottom']) {
// } else {
// return {
// height: state.refHeightWidth.middleHeight + 'px',
// };
// }
});
const noDataBottomHeightComputed = computed(() => {
const noDataTrHeightComputed = computed(() => {
// 浏览器可视区域高度
const screenHeight = $q.screen.height;
// 系统底部高度（一般用来显示XX版权所有那一层）
const footerHeight = gc.theme.footer.show ? gc.theme.footer.height : 0;
// 其他高度，边框，用户自定义留白等，默认 4px
const otherHeight = table.spaceHeight || 4;
// 主面板下边距
const mainPaddingBottom = gc.theme.main.paddingBottom || 0;
// 主面板容器下边距
const mainContainerPaddingBottom = gc.theme.main.containerPaddingBottom || 0;
// 其他高度，边框，用户自定义留白等，默认 4px
const otherHeight = table.spaceHeight || 4;
const resultHeight =
screenHeight -
state.refHeightWidth.yLocation -
state.refHeightWidth.topHeight -
state.refHeightWidth.middleHeight -
state.refHeightWidth.noDataTrYLocation -
(state.refHeightWidth.bottomHeight || 0) -
footerHeight -
mainPaddingBottom -
mainContainerPaddingBottom -
footerHeight -
(state.refHeightWidth.middleScrollWidth - state.refHeightWidth.middleWidth > 0 ? 15 : 0) -
otherHeight;
if (table.rows && table.rows.length > 0) {
return '0px';
} else {
return table.inFullscreen ? resultHeight + 'px' : props.height > 0 ? props.height + 'px' : resultHeight + 'px';
}
return {
height: props.height > 0 ? props.height + 'px' : resultHeight + 'px',
};
});
const noDataTrColspanComputed = computed(() => {
let colspan = excludeColumnNum.value;
colspan += visibleColumnsComputed.value.length;
return colspan;
});
// 表格进入全屏模式时所在Y轴会变成0，退出时也无法准确获得，最终导致出现滚动条，需要在进入全屏时记录Y轴位置。
let tableY = 0;
let noDataTrY = 0;
const tableFullscreenFun = (value) => {
table.inFullscreen = !table.inFullscreen;
if (value) {
tableY = state.refHeightWidth.yLocation;
noDataTrY = state.refHeightWidth.noDataTrYLocation;
} else {
state.refHeightWidth.yLocation = tableY;
state.refHeightWidth.noDataTrYLocation = noDataTrY;
tableY = 0;
noDataTrY = 0;
}
};
@ -1227,6 +1249,9 @@ const onResize = () => {
handlerQueryFormShowField();
if (tableRef.value) {
state.refHeightWidth.yLocation = tableRef.value.$el.getBoundingClientRect().y;
if (tableRef.value.$el.getElementsByClassName('noDataTr').length > 0) {
state.refHeightWidth.noDataTrYLocation = tableRef.value.$el.getElementsByClassName('noDataTr')[0].getBoundingClientRect().y;
}
state.refHeightWidth.topHeight = tableRef.value.$el.getElementsByClassName('q-table__top')[0]?.clientHeight;
state.refHeightWidth.middleWidth = tableRef.value.$el.getElementsByClassName('q-table__middle')[0]?.clientWidth;
state.refHeightWidth.middleScrollWidth = tableRef.value.$el.getElementsByClassName('q-table__middle')[0]?.scrollWidth;
@ -1614,6 +1639,9 @@ const stickyHeaderColumn = (time = 500) => {
// 延迟处理锁定列及表格宽高的获取
if (tableRef.value) {
state.refHeightWidth.yLocation = tableRef.value.$el.getBoundingClientRect()?.y;
if (tableRef.value.$el.getElementsByClassName('noDataTr').length > 0) {
state.refHeightWidth.noDataTrYLocation = tableRef.value.$el.getElementsByClassName('noDataTr')[0].getBoundingClientRect().y;
}
state.refHeightWidth.topHeight = tableRef.value.$el.getElementsByClassName('q-table__top')[0]?.clientHeight;
state.refHeightWidth.bottomHeight = tableRef.value.$el.getElementsByClassName('q-table__bottom')[0]?.clientHeight;
state.refHeightWidth.middleWidth = tableRef.value.$el.getElementsByClassName('q-table__middle')[0]?.clientWidth;
@ -1674,9 +1702,14 @@ const stickyHeaderColumn = (time = 500) => {
column1Width + column2Width + column3Width + column4Width + column5Width + column6Width + column7Width + column8Width + column9Width + 'px',
);
}
const titleTotalHeight = tableDom.getElementsByTagName('thead')[0].offsetHeight;
let titleTotalHeight = tableDom.getElementsByTagName('thead')[0].offsetHeight;
// 无数据时列头会增加一行，多表头的top距离计算会出错，需减掉多出来的提示行。
if (table.rows.length === 0) {
const noDataTrHeight = tableRef.value.$el.getElementsByClassName('noDataTr')[0].offsetHeight;
titleTotalHeight = titleTotalHeight - noDataTrHeight;
}
const titleRowHeight = titleTotalHeight / columnTitleState.columnTitleRowNum;
if (columnTitleState.columnTitleRowNum > 1) {
if (columnTitleState.columnTitleRowNum) {
const row1Height = titleRowHeight * 1;
const row2Height = titleRowHeight * 2;
const row3Height = titleRowHeight * 3;
@ -1717,7 +1750,10 @@ const stickyHeaderColumn = (time = 500) => {
if (denseBottomComputed.value && (!attrs.hasOwnProperty('hide-bottom') || attrs['hide-bottom'] === false)) {
tableRef.value.$el.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomHeight', 33 + 'px');
tableRef.value.$el.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomButtonHeight', 24 + 'px');
} else if (!attrs.hasOwnProperty('hide-bottom') || attrs['hide-bottom'] === false) {
} else if (
(!attrs.hasOwnProperty('hide-bottom') || attrs['hide-bottom'] === false) &&
tableRef.value.$el.getElementsByClassName('q-table__bottom').length > 0
) {
tableRef.value.$el.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomHeight', 50 + 'px');
tableRef.value.$el.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomButtonHeight', 40 + 'px');
}

Write Preview
Loading…
Cancel
Save