jikimo/test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化序号导致字段label变形的问题

Browse Source
This commit is contained in:
mgw
2023-11-01 12:15:26 +08:00
parent 869b389420
commit fc35ef687b
1 changed files with 13 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
jikimo_frontend/static/src/list/custom_width.js
View File

@@ -10,14 +10,13 @@ patch(ListRenderer.prototype, 'jikimo_frontend.ListRenderer', {
// The following code manipulates the DOM directly to avoid having to wait for a
// render + patch which would occur on the next frame and cause flickering.
freezeColumnWidths() {
console.log('ccccccccccccccccccccccccccc')
if (!this.keepColumnWidths) {
this.columnWidths = null;
}
const table = this.tableRef.el;
const headers = [...table.querySelectorAll("thead th:not(.o_list_actions_header)")];
// 列数+1
const columnsLength = headers.length + 1;
if (!this.columnWidths || !this.columnWidths.length) {
// no column widths to restore
@@ -29,7 +28,7 @@ patch(ListRenderer.prototype, 'jikimo_frontend.ListRenderer', {
th.style.maxWidth = null;
});
this.setDefaultColumnWidths(columnsLength);
this.setDefaultColumnWidths();
// Squeeze the table by applying a max-width on largest columns to
// ensure that it doesn't overflow
@@ -43,60 +42,25 @@ patch(ListRenderer.prototype, 'jikimo_frontend.ListRenderer', {
});
},
setDefaultColumnWidths(columnsLength) {
setDefaultColumnWidths() {
const widths = this.state.columns.map((col) => this.calculateColumnWidth(col));
const sumOfRelativeWidths = widths
const sumOfRelativeWidths = (widths
.filter(({ type }) => type === "relative")
.reduce((sum, { value }) => sum + value, 0);
.reduce((sum, { value }) => sum + value, 0)) + 1;
// // 计算新增列的权重
// const newColumnWeight = 0.1;
//
// // 新增列后的总权重
// const totalWeights = sumOfRelativeWidths + newColumnWeight;
// 获取数组的最后一项
const lastItem = widths[widths.length - 1];
// 复制最后一项
const newItem = { ...lastItem };
// 将新的对象添加到数组的末尾
widths.push(newItem);
// 1 because nth-child selectors are 1-indexed, 2 when the first column contains
// the checkboxes to select records.
const columnOffset = this.hasSelectors ? 2 : 1;
// widths.forEach(({ type, value }, i) => {
// const headerEl = this.tableRef.el.querySelector(`th:nth-child(${i + columnOffset})`);
// if (type === "absolute") {
// if (this.isEmpty) {
// headerEl.style.width = value;
// } else {
// headerEl.style.minWidth = value;
// }
// } else if (type === "relative" && this.isEmpty) {
// // headerEl.style.width = `${((value / sumOfRelativeWidths) * 100).toFixed(2)}%`;
// headerEl.style.width = `${100 / columnsLength}%`;
// }
// });
// widths.forEach(({ type, value }, i) => {
// const headerEl = this.tableRef.el.querySelector(`th:nth-child(${i + columnOffset})`);
// if (type === "absolute") {
// if (this.isEmpty) {
// headerEl.style.width = value;
// } else {
// headerEl.style.minWidth = value;
// }
// } else if (type === "relative" && this.isEmpty) {
//
// if (i === 0) {
// // 第一列
// headerEl.style.width = `3.2%`;
//
// } else {
// headerEl.style.width = `${100 / columnsLength}%`;
// }
//
// }
//
// });
widths.forEach(({ type, value }, i) => {
const headerEl = this.tableRef.el.querySelector(`th:nth-child(${i + columnOffset})`);
const column = this.state.columns[i]; // 获取当前列的对象
if (type === "absolute") {
if (this.isEmpty) {
headerEl.style.width = value;
@@ -104,69 +68,9 @@ patch(ListRenderer.prototype, 'jikimo_frontend.ListRenderer', {
headerEl.style.minWidth = value;
}
} else if (type === "relative" && this.isEmpty) {
if (i === 0) {
// 第一列
headerEl.style.width = `${1}%`;
} else if (column.name === "sequence") {
// sequence列
headerEl.style.width = `${1}%`;
} else if (column.name === "name") {
// name列
headerEl.style.width = `${20}%`;
} else {
headerEl.style.width = `${100 / columnsLength}%`;
}
} else {
headerEl.style.width = `${100 / columnsLength}%`;
headerEl.style.width = `${((value / sumOfRelativeWidths) * 100).toFixed(2)}%`;
}
});
// widths.forEach(({type, value}, i) => {
//
// const headerEl = this.tableRef.el.querySelector(`th:nth-child(${i + columnOffset})`);
//
// if (type === 'absolute') {
// // 原有绝对宽度逻辑
// } else if (type === 'relative' && this.isEmpty) {
//
// if (i === columnsLength - 1) {
// // 新增列按权重分配
// headerEl.style.width = `${(newColumnWeight/totalWeights) * 100}%`;
//
// } else {
// // 原相对列按权重分配
// headerEl.style.width = `${(value/totalWeights) * 100}%`;
// }
//
// }
//
// });
},
// calculateColumnWidth(column) {
// if (column.options && column.rawAttrs.width) {
// return { type: "absolute", value: column.rawAttrs.width };
// }
//
// if (column.type !== "field") {
// return { type: "relative", value: 1 };
// }
//
// const type = column.widget || this.props.list.fields[column.name].type;
// if (type in FIXED_FIELD_COLUMN_WIDTHS) {
// return { type: "absolute", value: FIXED_FIELD_COLUMN_WIDTHS[type] };
// }
//
// return { type: "relative", value: 1 };
// }
}
);