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

表格优化提交

main
likunming 10 months ago
parent
bb1d326402
commit
1941c90f2b
2 changed files with 60 additions and 128 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      io.sc.platform.core.frontend/src/platform/components/dialog/WDialog.vue
  2. 177
      io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue

11
io.sc.platform.core.frontend/src/platform/components/dialog/WDialog.vue
View File

@ -22,7 +22,16 @@
<div class="flex justify-end gap-4"> <div class="flex justify-end gap-4">
<template v-if="buttons && buttons.length > 0"> <template v-if="buttons && buttons.length > 0">
<template v-for="(btn, index) in buttons as any" :key="index"> <template v-for="(btn, index) in buttons as any" :key="index">
<q-btn v-if="typeof btn === 'object'" :loading="false" :color="'primary'" v-bind="btn" @click="btn.click ? btn.click() : () => {}"> </q-btn> <q-btn
v-if="typeof btn === 'object'"
:loading="false"
:color="'primary'"
no-wrap
no-caps
v-bind="btn"
@click="btn.click ? btn.click() : () => {}"
>
</q-btn>
</template> </template>
</template> </template>
<slot name="buttons"></slot> <slot name="buttons"></slot>

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

@ -1,5 +1,5 @@
<template> <template>
<div style="height: 100%"> <div class="w-grid" style="height: 100%">
<q-resize-observer debounce="500" @resize="onResize" /> <q-resize-observer debounce="500" @resize="onResize" />
<q-table <q-table
ref="tableRef" ref="tableRef"
@ -57,6 +57,11 @@
> >
<q-checkbox v-model="table.allTicked" flat :dense="denseHeaderComputed" @update:model-value="allTickedUpdateFun" /> <q-checkbox v-model="table.allTicked" flat :dense="denseHeaderComputed" @update:model-value="allTickedUpdateFun" />
</q-th> </q-th>
<q-th
v-else-if="rIndex === 0 && table.checkboxSelection && !props.tree"
:rowspan="columnTitleState.columnTitleRowNum"
:style="moreColumnTitleTableSelectionStyle"
></q-th>
<q-th v-if="rIndex === 0 && table.sortNo && !props.tree" :rowspan="columnTitleState.columnTitleRowNum" :style="moreColumnTitleTableSortNoStyle"> <q-th v-if="rIndex === 0 && table.sortNo && !props.tree" :rowspan="columnTitleState.columnTitleRowNum" :style="moreColumnTitleTableSortNoStyle">
{{ $t('rownum') }} {{ $t('rownum') }}
</q-th> </q-th>
@ -69,8 +74,9 @@
:class="c.classes" :class="c.classes"
:props="titleScopeHandler(c, scope)" :props="titleScopeHandler(c, scope)"
style="font-weight: bold" style="font-weight: bold"
:title="c.title"
> >
{{ c.label }} <span v-dompurify-html="Tools.isUndefinedOrNull(c.label) ? '' : c.label"></span>
</q-th> </q-th>
</q-tr> </q-tr>
<q-tr v-if="table.rows.length === 0" :style="noDataTrHeightComputed" class="noDataTr"> <q-tr v-if="table.rows.length === 0" :style="noDataTrHeightComputed" class="noDataTr">
@ -93,8 +99,9 @@
:style="col.style + (col.name === '_sortNo_' ? 'padding: 0; width: 50px;' : '')" :style="col.style + (col.name === '_sortNo_' ? 'padding: 0; width: 50px;' : '')"
:class="col.classes" :class="col.classes"
style="font-weight: bold" style="font-weight: bold"
:title="col.title"
> >
{{ col.label }} <span v-dompurify-html="Tools.isUndefinedOrNull(col.label) ? '' : col.label"></span>
</q-th> </q-th>
</template> </template>
</q-tr> </q-tr>
@ -459,7 +466,7 @@ const columnChildrenHandler = (item: any, gridColumns: any) => {
const extractTableColumnsProps = () => { const extractTableColumnsProps = () => {
const gridColumns = <any>[]; const gridColumns = <any>[];
if (tableColumns.value && tableColumns.value.length > 0) { if (tableColumns.value && tableColumns.value.length > 0) {
gridColumns.push({ name: '_sortNo_', align: 'center', label: '序号', field: '_sortNo_', hidden: props.sortNo ? false : true }); gridColumns.push({ name: '_sortNo_', align: 'center', label: t('rownum'), field: '_sortNo_', hidden: props.sortNo ? false : true });
tableColumns.value.forEach((item: any) => { tableColumns.value.forEach((item: any) => {
columnChildrenHandler(item, gridColumns); columnChildrenHandler(item, gridColumns);
}); });
@ -491,6 +498,7 @@ eventBus.on('onLocaleChanged', (local) => {
handleToolbarActions(); handleToolbarActions();
// 重构内置新增编辑窗口中的按钮 label // 重构内置新增编辑窗口中的按钮 label
dialog.dialogButtons[0].label = t(dialog.dialogButtons[0].labelI18nKey); dialog.dialogButtons[0].label = t(dialog.dialogButtons[0].labelI18nKey);
stickyHeaderColumn();
}); });
}); });
// onUpdated(() => { // onUpdated(() => {
@ -1030,6 +1038,7 @@ const columnTitleState = reactive({
// 多行列标题的处理类型 // 多行列标题的处理类型
type MoreColumnTitleType = { type MoreColumnTitleType = {
name: string; // 列模型的name name: string; // 列模型的name
title: string; // 列模型的title(鼠标移动上去显示内容)
label: string; // 列模型的label label: string; // 列模型的label
parentLevel: number; // 父层级数 parentLevel: number; // 父层级数
childrenLevel: number; // 子层级数 childrenLevel: number; // 子层级数
@ -1051,6 +1060,7 @@ const columnToMap = (column: any) => {
moreColumnTitleMap.set(column.name, { moreColumnTitleMap.set(column.name, {
name: column.name, name: column.name,
label: column.label, label: column.label,
title: column.title,
parentLevel: 0, parentLevel: 0,
childrenLevel: 0, childrenLevel: 0,
rowspan: 0, rowspan: 0,
@ -1068,6 +1078,7 @@ const columnToMap = (column: any) => {
moreColumnTitleMap.set(column.name, { moreColumnTitleMap.set(column.name, {
name: column.name, name: column.name,
label: column.label, label: column.label,
title: column.title,
parentLevel: 0, parentLevel: 0,
childrenLevel: 0, childrenLevel: 0,
rowspan: 0, rowspan: 0,
@ -1772,27 +1783,27 @@ const stickyHeaderColumn = (time = 500) => {
titleTotalHeight = titleTotalHeight - noDataTrHeight; titleTotalHeight = titleTotalHeight - noDataTrHeight;
} }
state.refHeightWidth.titleTotalHeight = titleTotalHeight; state.refHeightWidth.titleTotalHeight = titleTotalHeight;
const titleRowHeight = titleTotalHeight / columnTitleState.columnTitleRowNum; // const titleRowHeight = titleTotalHeight / columnTitleState.columnTitleRowNum;
if (columnTitleState.columnTitleRowNum) { // if (columnTitleState.columnTitleRowNum) {
const row1Height = titleRowHeight * 1; // const row1Height = titleRowHeight * 1;
const row2Height = titleRowHeight * 2; // const row2Height = titleRowHeight * 2;
const row3Height = titleRowHeight * 3; // const row3Height = titleRowHeight * 3;
const row4Height = titleRowHeight * 4; // const row4Height = titleRowHeight * 4;
const row5Height = titleRowHeight * 5; // const row5Height = titleRowHeight * 5;
const row6Height = titleRowHeight * 6; // const row6Height = titleRowHeight * 6;
const row7Height = titleRowHeight * 7; // const row7Height = titleRowHeight * 7;
const row8Height = titleRowHeight * 8; // const row8Height = titleRowHeight * 8;
const row9Height = titleRowHeight * 9; // const row9Height = titleRowHeight * 9;
tableDom.style.setProperty('--row1Height', row1Height + 'px'); // tableDom.style.setProperty('--row1Height', row1Height + 'px');
tableDom.style.setProperty('--row2Height', row2Height + 'px'); // tableDom.style.setProperty('--row2Height', row2Height + 'px');
tableDom.style.setProperty('--row3Height', row3Height + 'px'); // tableDom.style.setProperty('--row3Height', row3Height + 'px');
tableDom.style.setProperty('--row4Height', row4Height + 'px'); // tableDom.style.setProperty('--row4Height', row4Height + 'px');
tableDom.style.setProperty('--row5Height', row5Height + 'px'); // tableDom.style.setProperty('--row5Height', row5Height + 'px');
tableDom.style.setProperty('--row6Height', row6Height + 'px'); // tableDom.style.setProperty('--row6Height', row6Height + 'px');
tableDom.style.setProperty('--row7Height', row7Height + 'px'); // tableDom.style.setProperty('--row7Height', row7Height + 'px');
tableDom.style.setProperty('--row8Height', row8Height + 'px'); // tableDom.style.setProperty('--row8Height', row8Height + 'px');
tableDom.style.setProperty('--row9Height', row9Height + 'px'); // tableDom.style.setProperty('--row9Height', row9Height + 'px');
} // }
} }
}, time); }, time);
@ -2357,25 +2368,18 @@ const instance = getCurrentInstance();
VueTools.expose2Instance(instance); VueTools.expose2Instance(instance);
</script> </script>
<style scoped lang="css"> <style lang="css">
:deep(.q-table__top) { .w-grid .q-table__top {
padding: var(--tableTopPadding) var(--tableTopPadding); padding: var(--tableTopPadding) var(--tableTopPadding);
} }
.w-grid .q-table__middle .q-table th {
/* :deep(.q-table tr:first-child th:first-child) {
border-left: 1px solid var(--tableBorderColor);
} */
/* :deep(.q-table tr td:first-child) {
border-left: 1px solid var(--tableBorderColor);
} */
:deep(.q-table__middle .q-table th) {
padding: var(--tableHeaderPadding) 8px; padding: var(--tableHeaderPadding) 8px;
border-left-width: 0px; border-left-width: 0px;
border-right-width: 1px; border-right-width: 1px;
border-top-width: 0px; border-top-width: 0px;
border-bottom-width: 1px; border-bottom-width: 1px;
} }
:deep(.q-table__middle .q-table td) { .w-grid .q-table__middle .q-table td {
height: var(--tableBodyHeight); height: var(--tableBodyHeight);
padding: var(--tableBodyPadding) 8px; padding: var(--tableBodyPadding) 8px;
border-left-width: 0px; border-left-width: 0px;
@ -2383,11 +2387,7 @@ VueTools.expose2Instance(instance);
border-top-width: 0px; border-top-width: 0px;
border-bottom-width: 1px; border-bottom-width: 1px;
} }
/* :deep(.q-table__middle .q-table tr:last-child td) { .w-grid .q-table__bottom {
border-bottom-width: 0px;
} */
:deep(.q-table__bottom) {
min-height: var(--tableBottomHeight); min-height: var(--tableBottomHeight);
border-color: rgba(0, 0, 0, 0.12); border-color: rgba(0, 0, 0, 0.12);
border-style: solid; border-style: solid;
@ -2396,25 +2396,20 @@ VueTools.expose2Instance(instance);
border-right-width: 1px; border-right-width: 1px;
border-bottom-width: 1px; border-bottom-width: 1px;
} }
.w-grid .q-table__control .q-field__control {
:deep(.q-table__control .q-field__control) {
min-height: var(--tableBottomButtonHeight); min-height: var(--tableBottomButtonHeight);
} }
.w-grid .q-table__control .q-field__control q-field__append {
:deep(.q-table__control .q-field__control q-field__append) {
height: var(--tableBottomButtonHeight); height: var(--tableBottomButtonHeight);
} }
.w-grid .q-table__control .q-field__control-container .q-field__native {
:deep(.q-table__control .q-field__control-container .q-field__native) {
min-height: var(--tableBottomButtonHeight); min-height: var(--tableBottomButtonHeight);
padding: 0; padding: 0;
} }
.w-grid .q-table__control .q-field__control .q-field__marginal {
:deep(.q-table__control .q-field__control .q-field__marginal) {
height: var(--tableBottomButtonHeight); height: var(--tableBottomButtonHeight);
} }
.w-grid .q-table__card .q-table__middle {
:deep(.q-table__card .q-table__middle) {
border-color: rgba(0, 0, 0, 0.12); border-color: rgba(0, 0, 0, 0.12);
border-style: solid; border-style: solid;
border-left-width: 1px; border-left-width: 1px;
@ -2422,53 +2417,6 @@ VueTools.expose2Instance(instance);
border-bottom-width: 1px; border-bottom-width: 1px;
} }
/* .q-table__top {
padding: var(--tableTopPadding) var(--tableTopPadding);
}
.q-table tr:first-child th:first-child {
border-left: 1px solid var(--tableBorderColor);
}
.q-table tr td:first-child {
border-left: 1px solid var(--tableBorderColor);
}
.q-table__middle .q-table th {
padding: var(--tableHeaderPadding) 8px;
border-left-width: 0px;
border-right-width: 1px;
border-top-width: 0px;
border-bottom-width: 1px;
}
.q-table__middle .q-table td {
height: var(--tableBodyHeight);
padding: var(--tableBodyPadding) 8px;
border-left-width: 0px;
border-right-width: 1px;
border-top-width: 0px;
border-bottom-width: 1px;
}
.q-table__bottom {
min-height: var(--tableBottomHeight);
}
.q-table__control .q-field__control {
min-height: var(--tableBottomButtonHeight);
}
.q-field__control q-field__append {
height: var(--tableBottomButtonHeight);
}
.q-field__control-container .q-field__native {
min-height: var(--tableBottomButtonHeight);
padding: 0;
}
.q-field__control .q-field__marginal {
height: var(--tableBottomButtonHeight);
} */
.sticky-header-column-table thead tr { .sticky-header-column-table thead tr {
height: var(--tableColumnTitleHeight); height: var(--tableColumnTitleHeight);
} }
@ -2480,37 +2428,12 @@ VueTools.expose2Instance(instance);
background: var(--tableHeadBgColor); background: var(--tableHeadBgColor);
} }
/** 固定表头后，修改top距离，第一行top为0，从第二行开始，每增加一行，top增加相应高度，由于紧凑模式与常规模式列头高度不一致，需要计算得出 */ /** 固定表头后，修改top距离 */
.sticky-header-column-table thead tr:first-child th { .sticky-header-column-table thead {
position: sticky;
z-index: 2;
top: 0; top: 0;
} }
.sticky-header-column-table thead tr:nth-child(2) th {
top: var(--row1Height);
}
.sticky-header-column-table thead tr:nth-child(3) th {
top: var(--row2Height);
}
.sticky-header-column-table thead tr:nth-child(4) th {
top: var(--row3Height);
}
.sticky-header-column-table thead tr:nth-child(5) th {
top: var(--row4Height);
}
.sticky-header-column-table thead tr:nth-child(6) th {
top: var(--row5Height);
}
.sticky-header-column-table thead tr:nth-child(7) th {
top: var(--row6Height);
}
.sticky-header-column-table thead tr:nth-child(8) th {
top: var(--row7Height);
}
.sticky-header-column-table thead tr:nth-child(9) th {
top: var(--row8Height);
}
.sticky-header-column-table thead tr:nth-child(10) th {
top: var(--row9Height);
}
.sticky-header-column-table-tr-1-1 tr:first-child th:first-child { .sticky-header-column-table-tr-1-1 tr:first-child th:first-child {
z-index: 3; z-index: 3;

Write Preview
Loading…
Cancel
Save