薪资接口
This commit is contained in:
pengyuthon
@@ -0,0 +1,54 @@
|
||||
# k_ry_mobile_form - 科瑞移动端表单优化模块
|
||||
|
||||
## 功能说明
|
||||
|
||||
此模块为 Odoo 17 的 form 视图添加移动端优化功能：
|
||||
- 在手机浏览器中，form 视图 header 的工具按钮栏会悬浮在屏幕底部
|
||||
- 提供类似正常 APP 的底部按钮栏体验
|
||||
- 桌面端不受影响，保持原有显示方式
|
||||
|
||||
## 依赖
|
||||
|
||||
- `base`
|
||||
- `web`
|
||||
|
||||
## 安装
|
||||
|
||||
1. 将模块放置在 Odoo 的 addons 目录下
|
||||
2. 更新应用列表
|
||||
3. 安装 `k_ry_mobile_form` 模块
|
||||
|
||||
## 技术实现
|
||||
|
||||
### 文件结构
|
||||
|
||||
```
|
||||
k_ry_mobile_form/
|
||||
├── __init__.py
|
||||
├── __manifest__.py
|
||||
├── README.md
|
||||
└── static/
|
||||
└── src/
|
||||
├── js/
|
||||
│ └── status_bar_buttons.js # 覆盖 StatusBarButtons 组件模板
|
||||
├── xml/
|
||||
│ └── status_bar_buttons.xml # 新的模板定义
|
||||
└── scss/
|
||||
└── status_bar_buttons.scss # 移动端底部悬浮栏样式
|
||||
```
|
||||
|
||||
### 实现原理
|
||||
|
||||
1. **JavaScript 覆盖**：使用 `patch` 方法覆盖 `StatusBarButtons` 组件的模板
|
||||
2. **模板替换**：提供新的模板，根据 `env.isSmall` 判断显示方式
|
||||
3. **样式隔离**：使用媒体查询确保移动端和桌面端样式互不影响
|
||||
|
||||
## 使用说明
|
||||
|
||||
安装模块后，无需额外配置。在手机浏览器中打开任何包含 header 的 form 视图时，工具按钮栏会自动显示在底部。
|
||||
|
||||
## 注意事项
|
||||
|
||||
- 此模块只影响 form 视图的 header 按钮栏
|
||||
- 桌面端完全不受影响
|
||||
- 支持 iOS 设备的底部安全区域（safe area）
|
||||
@@ -0,0 +1 @@
|
||||
# -*- coding: utf-8 -*-
|
||||
@@ -0,0 +1,33 @@
|
||||
# -*- coding: utf-8 -*-
|
||||
{
|
||||
'name': "k_ry_mobile_form",
|
||||
|
||||
'summary': "移动端表单优化",
|
||||
|
||||
'description': """
|
||||
移动端表单优化模块
|
||||
""",
|
||||
'author': "josh.feng",
|
||||
'website': "",
|
||||
'category': '界面优化',
|
||||
'version': '17.0.0.1',
|
||||
|
||||
# any module necessary for this one to work correctly
|
||||
'depends': ['base', 'web'],
|
||||
|
||||
# always loaded
|
||||
'data': [
|
||||
],
|
||||
'assets': {
|
||||
'web.assets_backend': [
|
||||
'k_ry_mobile_form/static/src/js/status_bar_buttons.js',
|
||||
'k_ry_mobile_form/static/src/xml/status_bar_buttons.xml',
|
||||
'k_ry_mobile_form/static/src/scss/status_bar_buttons.scss',
|
||||
],
|
||||
},
|
||||
'application': False,
|
||||
'installable': True,
|
||||
'auto_install': False,
|
||||
'license': 'LGPL-3',
|
||||
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
/** @odoo-module **/
|
||||
|
||||
import { StatusBarButtons } from "@web/views/form/status_bar_buttons/status_bar_buttons";
|
||||
import { patch } from "@web/core/utils/patch";
|
||||
|
||||
// 覆盖 StatusBarButtons 组件的模板
|
||||
patch(StatusBarButtons, {
|
||||
template: "k_ry_mobile_form.StatusBarButtons",
|
||||
});
|
||||
@@ -0,0 +1,55 @@
|
||||
// Mobile: 底部悬浮栏样式
|
||||
.o_statusbar_buttons_mobile_fixed {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1050; // 确保在其他元素之上，但低于模态框
|
||||
background-color: $o-view-background-color;
|
||||
border-top: 1px solid $border-color;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
|
||||
padding: map-get($spacers, 2) map-get($spacers, 3);
|
||||
// 为底部悬浮栏预留空间，避免内容被遮挡（支持 iOS safe area）
|
||||
padding-bottom: calc(#{map-get($spacers, 2)} + env(safe-area-inset-bottom, 0px));
|
||||
|
||||
.o_statusbar_buttons {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
|
||||
> * {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
> button {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
// 确保按钮有足够的点击区域
|
||||
min-height: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 桌面端隐藏移动端悬浮栏
|
||||
@include media-breakpoint-up(md) {
|
||||
.o_statusbar_buttons_mobile_fixed {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端隐藏原始状态栏中的按钮（避免重复显示）
|
||||
@include media-breakpoint-down(md) {
|
||||
.o_form_statusbar {
|
||||
// 隐藏状态栏中的按钮容器，但保留字段等其他内容
|
||||
> .o_statusbar_buttons:not(.o_statusbar_buttons_mobile_fixed .o_statusbar_buttons) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 为 form view 添加底部 padding，避免内容被底部悬浮栏遮挡
|
||||
.o_form_view {
|
||||
padding-bottom: 80px; // 为底部悬浮栏预留空间
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<!-- 覆盖 web.StatusBarButtons 模板，实现移动端底部悬浮栏 -->
|
||||
<t t-name="k_ry_mobile_form.StatusBarButtons">
|
||||
<t t-set="slots" t-value="visibleSlotNames" />
|
||||
<t t-if="env.isSmall">
|
||||
<!-- Mobile: 底部悬浮栏 -->
|
||||
<div class="o_statusbar_buttons_mobile_fixed">
|
||||
<div class="o_statusbar_buttons d-flex align-items-center justify-content-center gap-2">
|
||||
<t t-foreach="slots" t-as="slot" t-key="slot">
|
||||
<t t-slot="{{ slot }}" />
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<!-- Desktop: 正常显示 -->
|
||||
<div class="o_statusbar_buttons d-flex align-items-center align-content-around flex-wrap gap-1">
|
||||
<t t-foreach="slots" t-as="slot" t-key="slot">
|
||||
<t t-slot="{{ slot }}" />
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
</templates>
|
||||
Reference in New Issue
Block a user