Merge pull request !2630 from 李鹏宇/dev
This commit is contained in:
李鹏宇
2025-05-01 08:53:57 +00:00
committed by Gitee
9 changed files with 36 additions and 425 deletions
@@ -1,14 +1,3 @@
.. image:: https://tools.huo15.com/uploads/images/system/logo-colours.png
:width: 100
:alt: logo
辉火云企业套件社区版 - 附加模块
===========================
HuihuoYun Business Suite Community addons
-----------------------------------------
.. image:: https://img.shields.io/badge/license-LGPL--3-green.svg
:target: https://www.gnu.org/licenses/lgpl-3.0-standalone.html
:alt: License: LGPL-3
@@ -37,10 +37,12 @@
'depends': ['account', 'purchase', 'hr_expense', 'web'],
'assets': {
'web.assets_backend': [
# 'list_view_sticky_header_and_column/static/src/scss/form.scss',
'list_view_sticky_header_and_column/static/src/js/list_view_sticky_header_and_column.js',
'list_view_sticky_header_and_column/static/src/xml/list_view_sticky_header_and_column.xml',
'list_view_sticky_header_and_column/static/src/scss/list_view_sticky_header_and_column.scss',
'list_view_sticky_header_and_column/static/src/js'
'/list_view_sticky_header_and_column.js',
'list_view_sticky_header_and_column/static/src/xml'
'/list_view_sticky_header_and_column.xml',
'list_view_sticky_header_and_column/static/src/scss'
'/list_view_sticky_header_and_column.scss',
],
},
'images': ['static/description/banner.jpg'],
@@ -1,173 +1,22 @@
/** @odoo-module **/
/** This file will used to stick the selected header and column in the list view **/
import {patch} from "@web/core/utils/patch";
import {ListRenderer} from "@web/views/list/list_renderer";
import {onMounted, onWillUnmount} from "@odoo/owl";
/**
* @file list_view_sticky_header_and_column.js
* @description 辉火云企业套件
* @author Job Zhao - 青岛火一五信息科技有限公司
* @contact postmaster@huo15.com | 18554898815
* @date 2025/1/28
* @copyright 青岛火一五信息科技有限公司 保留所有权利
* @see https://www.huo15.com
*/
import { patch } from "@web/core/utils/patch";
import { ListRenderer } from "@web/views/list/list_renderer";
patch(ListRenderer.prototype, {
/** super the setup function **/
setup() {
super.setup();
// >>> 青岛火一五信息科技有限公司 - JobZhao - postmaster@huo15.com - 2025/1/28
onMounted(() => {
this.root = this.__owl__.bdom.parentEl;
this._adjustColumnWidths();
const $thead = $(this.__owl__.bdom.parentEl.querySelectorAll('.o_list_table thead')[0]);
// $thead.css('z-index', '100000')
//移除现有的粘性列和选中标记
const $clickedHeader = $(this.__owl__.bdom.parentEl.querySelectorAll('.o_list_table th')[1]);
$(this.__owl__.bdom.parentEl.querySelectorAll('.sticky-column')).removeClass('sticky-column');
console.log($(this.__owl__.bdom.parentEl.querySelectorAll('.sticky-column')).removeClass('sticky-column'));
$(this.__owl__.bdom.parentEl.querySelectorAll('.clicked-header')).removeClass('clicked-header');
$clickedHeader.addClass('clicked-header');
const columnIndex = $clickedHeader.index();
//获取表头、表行和表尾的元素
const $tableHeaders = $(this.__owl__.bdom.parentEl.querySelectorAll('.o_list_table th'));
const $tableRows = $(this.__owl__.bdom.parentEl.querySelectorAll('.o_list_table tr'));
const $tfootRow = $(this.__owl__.bdom.parentEl.querySelectorAll('.o_list_table tfoot tr')[0].children);
//为选中的列和表头添加粘性效果
const $selectedFooterCells = $tfootRow.filter(`td:nth-child(-n+${columnIndex + 1})`);
$selectedFooterCells.addClass('sticky-column');
const $selectedColumns = $(this.__owl__.bdom.parentEl.querySelectorAll(`.o_data_row td:nth-child(-n+${columnIndex + 1})`));
const $selectedHeaderCells = $tableHeaders.filter(`th:nth-child(-n+${columnIndex + 1})`);
$tableHeaders.removeClass('sticky-column').css('left', '');
$(this.__owl__.bdom.parentEl.querySelectorAll('.o_data_row td')).removeClass('sticky-column').css('left', '');
$selectedColumns.addClass('sticky-column');
$selectedHeaderCells.addClass('sticky-column');
$tableHeaders.filter('.sticky-column').css('top', '0');
// 调整列的 left 位置
const $targetColumn = $selectedColumns.eq(columnIndex);
// const targetLeftPosition = $targetColumn.position().left;
const columnsToAdjust = columnIndex + 1;
$tableRows.each(function (index, row) {
const $headerCells = $(row).find('th');
const $rowCells = $(row).find('td');
for (let i = 0; i < columnsToAdjust; i++) {
if ($headerCells.eq(i).length > 0) {
$headerCells.eq(i).css('left', `${$headerCells.eq(i).position().left}px`);
}
if ($rowCells.eq(i).length > 0) {
$rowCells.eq(i).css('left', `${$rowCells.eq(i).position().left}px`);
}
}
});
// 监听窗口缩放事件
this.resizeObserver = new ResizeObserver(() => {
this._adjustColumnWidths();
});
this.resizeObserver.observe(this.root);
});
// 在组件卸载时停止监听
onWillUnmount(() => {
if (this.resizeObserver) {
this.resizeObserver.disconnect();
}
});
},
/**
* 调整列宽和换行逻辑
*/
_adjustColumnWidths() {
// >>> 青岛火一五信息科技有限公司 - JobZhao - postmaster@huo15.com - 2025/1/28
this.root = this.__owl__.bdom.parentEl;
const table = this.root.querySelector(".o_list_table"); // 获取表格元素
if (!table) return;
const columns = table.querySelectorAll("th"); // 获取所有表头
const rows = table.querySelectorAll(".o_data_row"); // 获取所有数据行
columns.forEach((column, colIndex) => {
let maxWidth = 0;
let maxContent = "";
const thContent = column.textContent.trim();
console.log('th length:', thContent.length)
// 遍历每一行,找到最长的单元格内容
rows.forEach((row) => {
const cell = row.querySelector(`td:nth-child(${colIndex + 1})`);
if (cell) {
const content = cell.textContent.trim();
let isChinese = /[\u4e00-\u9fa5]/.test(thContent); // 判断是否包含汉字
let contentLength = content.length;
let thContentLength = thContent.length;
if (thContentLength<=2){
thContentLength*=1.5;
}
if (isChinese) {
thContentLength *= 2.5;
}
if (contentLength <= thContentLength) {
contentLength = thContentLength;
}
isChinese = /[\u4e00-\u9fa5]/.test(content); // 判断是否包含汉字
if (isChinese) {
contentLength *= 2;
}
// 更新最大宽度和最长内容
if (contentLength > maxWidth) {
maxWidth = contentLength;
maxContent = content;
}
// 更新最大宽度和最长内容
if (contentLength > maxWidth) {
maxWidth = contentLength;
maxContent = content;
}
}
});
// 设置列宽
if (maxWidth > 0 && maxWidth < 30) {
const columnWidth = maxWidth * 1; // 假设每个字符占 8px
column.style.minWidth = `${columnWidth}ch`;
column.style.maxWidth = `${columnWidth}ch`;
column.style.width = `${columnWidth}ch`;
} else if (maxWidth >= 30) {
column.style.minWidth = `240px`;
column.style.maxWidth = `240px`;
column.style.width = `240px`;
}
// 如果最长内容超过 30 个字符,设置换行
if (maxWidth > 30) {
rows.forEach((row) => {
const cell = row.querySelector(`td:nth-child(${colIndex + 1})`);
if (cell) {
console.log('cell:', cell)
cell.style.whiteSpace = "normal"; // 允许换行
cell.style.wordWrap = "break-word"; // 允许长单词换行
}
});
}
});
},
/**
* function defining the button having t-on-click _onClick
*/
_onClickIcon(ev, record) {
ev.preventDefault();
ev.stopPropagation()
console.log('target current:', $(ev.currentTarget))
const $clickedHeader = $(ev.currentTarget).closest('th');
const columnIndex = $clickedHeader.index();
console.log(this.__owl__.bdom.parentEl)
$(this.__owl__.bdom.parentEl.querySelectorAll('.sticky-column')).removeClass('sticky-column');
console.log($(this.__owl__.bdom.parentEl.querySelectorAll('.sticky-column')).removeClass('sticky-column'))
$(this.__owl__.bdom.parentEl.querySelectorAll('.clicked-header')).removeClass('clicked-header');
@@ -185,7 +34,7 @@ patch(ListRenderer.prototype, {
$selectedHeaderCells.addClass('sticky-column');
$tableHeaders.filter('.sticky-column').css('top', '0');
const $targetColumn = $selectedColumns.eq(columnIndex);
// const targetLeftPosition = $targetColumn.position().left;
const targetLeftPosition = $targetColumn.position().left;
const columnsToAdjust = columnIndex + 1;
$tableRows.each(function (index, row) {
const $headerCells = $(row).find('th');
@@ -193,7 +42,6 @@ patch(ListRenderer.prototype, {
for (let i = 0; i < columnsToAdjust; i++) {
if ($headerCells.eq(i).length > 0) {
$headerCells.eq(i).css('left', `${$headerCells.eq(i).position().left}px`);
}
if ($rowCells.eq(i).length > 0) {
$rowCells.eq(i).css('left', `${$rowCells.eq(i).position().left}px`);
@@ -1,146 +0,0 @@
.o_form_view.o_xxl_form_view, {
.o_form_sheet_bg {
> .o_form_sheet {
width: 100%;
max-width: calc(100% - 100px) !important;
}
}
}
button.btn {
margin-left: 3px;
}
/*
选择o_wrap_field下具有o_required_modifier元素的标签, 在标签子元素o_wrap_label的label标签前面添加一个红色*号
*/
.o_wrap_field:has(.o_required_modifier) > .o_wrap_label {
position: relative; /* 为了使绝对定位的星号相对于标签定位 */
}
.o_wrap_field:has(.o_required_modifier) > .o_wrap_label label::before {
content: "*";
color: red;
font-weight: bold;
position: absolute;
left: 0.3rem; /* 根据需要调整位置 */
top: 50%;
transform: translateY(-50%);
font-size: 1.2rem; /* 根据需要调整字体大小 */
}
//.o_wrap_field:has(.o_required_modifier) > .o_wrap_label label::before {
// content: "*";
// color: red;
// font-weight: bold;
// display: inline-block;
// //margin-left: -0.5rem;
//}
// 修改表单内label的样式
.o_form_sheet, .o_form_nosheet {
.grid {
gap: 0 !important;
}
//.o_group {
// border-bottom: 1px solid black;
//}
> .o_inner_group:first-child {
border: 1px solid #{$gray-200};
border-bottom: none;
}
> .o_inner_group:not(:first-child) {
border-right: 1px solid #{$gray-200};
border-left: 2px solid #{$gray-200};
}
> .o_group:first-child {
border: 1px solid #{$gray-200};
border-bottom: none;
}
.o_group {
border-right: 1px solid #{$gray-200};
border-left: 1px solid #{$gray-200};
//box-shadow: inset 1px 0 0 #{$gray-200}, inset -1px 0 0 #{$gray-200};
margin-right: calc(var(--gutter-x) * .0) !important;
margin-left: calc(var(--gutter-x) * .0) !important;
.o_inner_group {
padding-right: calc(var(--gutter-x) * .0) !important;
padding-left: calc(var(--gutter-x) * .0) !important;
}
//* {
// padding-right: calc(var(--gutter-x) * .0) !important;
// padding-left: calc(var(--gutter-x) * .0) !important;
//}
}
.o_horizontal_separator:not(:empty) {
text-align: center;
border-bottom: 1px solid #FFFFFF;
box-shadow: none;
//box-shadow: inset 0 1px 0 0 #FFFFFF !important;
padding: 0.5rem 1rem;
background: #{$gray-200};
margin-bottom: 0 !important;
margin-top: 0 !important;
font-size: var(--body-font-size);
}
.o_inner_group {
--columns: 1;
gap: 0 !important;;
margin-bottom: 0 !important;
border-left: 1px solid #{$gray-200};
margin-right: 0;
//box-shadow: inset 1px 0 0 #{$gray-200}, inset -1px 0 0 #{$gray-200}, inset 0 1px 0 #{$gray-200};
//grid-template-columns: minmax(150px, auto) minmax(0, 1fr) !important;
}
.o_wrap_field {
.o_form_label {
margin-bottom: 0 !important;
}
.o_field_widget {
margin-bottom: 0 !important;
}
.o_wrap_label {
display: flex;
align-items: center;
}
.o_wrap_label:not(:last-child) {
padding: 0.8rem 1rem;
}
// 其实也是选择的label,不过防止有些样式覆盖
.o_cell.o_wrap_label {
background: #{$gray-200} !important;
border-bottom: 1px solid #FFFFFF !important;
//margin-right: -1px !important;
}
.o_wrap_input {
padding: 0 0 0 1rem;
display: flex;
align-items: center;
.o_field_x2many_list {
margin-left: -1rem !important;
width: calc(100% + 1rem) !important;
}
}
// 选择的也是o_wrap_input,不过有些字段设置nolabel后上面的选择不会被识别
.o_cell:not(.o_wrap_label) {
border: 1px solid #{$gray-200} !important;
margin-top: -1px !important;
//box-shadow: inset 0 -1px 0 #{$gray-200};
border-right: none;
display: flex;
align-items: center;
}
}
.o_form_statusbar {
border: 1px solid #{$gray-200};
border-bottom: none;
.o_form_statusbar {
button {}
}
}
}
//.o_form_editable {
// .o_wrap_input {
// box-shadow: inset 0px -15px 30px -30px #{$gray-200};
// }
//}
@@ -1,24 +1,20 @@
.o_action .o_content {
z-index: 1;
}
.sticky-column {
position: sticky !important;
background-color: white;
z-index: 2;
}
.o_list_view .o_list_table td.sticky-column {
z-index: 4;
z-index: 4 !important;
background-color: white;
}
.o_list_view .o_list_table thead {
position: sticky;
top: 0;
z-index: 6 !important;
z-index: 3;
background-color: white;
}
.o_list_view .o_list_table th.sticky-column {
z-index: 4 !important;
z-index: 4;
background-color: white;
}
.o_account_reports_page .table-responsive {
@@ -29,17 +25,7 @@
overflow: visible;
}
.o_list_view .table-responsive .table thead {
z-index: 1;
}
.o_form_view:not(.o_field_highlight) .o_field_widget:not(.o_field_invalid):not(.o_field_highlight) .o_input:not(:hover):not(:focus) {
--o-input-border-color: transparent;
//border-style: solid;
//border-color: #000;
//border-width: 0px;
//border-bottom-width: 1px;
}
body.white .table {
width: -webkit-fill-available !important;
z-index: 5;
}
.o_list_renderer .o_list_table thead {
position: sticky;
@@ -51,7 +37,7 @@ th.sticky-column::before {
position: absolute;
width: 5px;
height: 100%;
background: white !important;
background: white;
top: 0;
left: -4px;
}
@@ -63,87 +49,3 @@ th:hover .fa-thumb-tack,
th.clicked-header .fa-thumb-tack {
display: block;
}
.o_list_view .o_list_table thead th:last-child{
position: sticky !important;
top: 0 !important;
right:0 !important;
z-index: 2 !important;
background-color: white !important;
}
.o_list_view .o_list_table thead th:nth-last-child(2){
position: sticky !important;
top: 0 !important;
right:40px !important;
z-index: 2 !important;
background-color: white !important;
}
.o_list_view .o_list_table td:last-child {
position: sticky !important;
z-index: 3 !important;
right:0 !important;
background-color: white !important;
}
.o_list_view .o_list_table td:nth-last-child(2) {
position: sticky !important;
z-index: 3 !important;
right:40px !important;
background-color: white !important;
}
//.o_input:hover{background: #b3c8df!important;}
// >>> 青岛火一五信息科技有限公司 - JobZhao - postmaster@huo15.com - 2025/1/28
// 解决宽度调整
.o_list_view {
.o_list_table {
table-layout: auto !important; // 让表格宽度根据内容自动调整
width: 100% !important; // 确保表格宽度占满容器
th, td {
white-space: normal !important; // 默认不换行
overflow: visible !important;; // 超出部分不隐藏
// text-overflow: ellipsis; // 超出部分显示省略号
}
td.long-text {
white-space: normal !important; // 允许换行
word-wrap: break-word !important; // 允许长单词换行
}
}
}
.o_list_view {
.o_list_table {
.o_list_button {
// text-overflow: ellipsis;
white-space: nowrap !important; // 默认不换行
}
}
}
/* WebKit浏览器 */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: darkgrey;
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Gecko浏览器(Firefox) */
html {
scrollbar-width: thin; /* 或者使用 'auto' 让浏览器决定 */
scrollbar-color: darkgrey white; /* 设置滑块和轨道颜色 */
}
.o_list_table .o_field_x2many_list_row_add a {
float: left;
}
@@ -5,9 +5,9 @@
text-overflow: clip !important; // 移除省略号(或直接不设置)
min-width: max-content !important; // 按内容撑开列宽(可选)
}
//tr .o_data_cell {
// white-space: pre-wrap !important;
//}
tr .o_data_cell {
white-space: pre-wrap !important;
}
}
}
@@ -16,7 +16,7 @@
float: left;
}
// 字段小红点
//字段小红点
//.o_wrap_field:has(.o_required_modifier) > .o_wrap_label {
// position: relative; /* 为了使绝对定位的星号相对于标签定位 */
//}
@@ -26,3 +26,4 @@ registry.category("views").add("custom_notice_tree_button", {
Controller: CustomNoticeListController,
buttonTemplate: "yuthon_notice.ListView.Buttons",
});
@@ -19,6 +19,18 @@ export class CustomTaskListController extends ListController {
context: {},
});
}
openMeetForm() {
this.actionService.doAction({
type: 'ir.actions.act_window',
res_model: 'room.booking',
name: '日程会议',
view_mode: 'form',
view_type: 'form',
views: [[false, 'form']],
target: 'new',
context: {},
});
}
}
registry.category("views").add("custom_task_tree_button", {
@@ -3,7 +3,10 @@
<t t-name="yuthon_task.ListView.Buttons" t-inherit="web.ListView.Buttons">
<xpath expr="//div[hasclass('o_list_buttons')]" position="after">
<button type="button" class="btn btn-primary" style="margin-left: 10px;" t-on-click="openTaskForm">
新建
新建日程
</button>
<button type="button" class="btn btn-primary" style="margin-left: 10px;" t-on-click="openMeetForm">
新建会议
</button>
</xpath>
</t>