处理#6973任务：
1货位编码规则简化 2货位看板直观化展示
This commit is contained in:
huziyang@jikimo.com
128
sf_warehouse/static/src/css/kanban_location_custom.scss
Normal file
128
sf_warehouse/static/src/css/kanban_location_custom.scss
Normal file
@@ -0,0 +1,128 @@
|
||||
// 定义一个 mixin 来处理重复的样式
|
||||
@mixin kanban-common-styles($record-count-each-row,
|
||||
$record-gap: 16px,
|
||||
$color-guide-width: 70px) {
|
||||
$record-gap-total-width: $record-gap * ($record-count-each-row - 1);
|
||||
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: auto !important;
|
||||
padding: 0px !important;
|
||||
gap: $record-gap !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
|
||||
// 设置卡片样式
|
||||
.o_kanban_record {
|
||||
flex: 0 0 calc((100% - #{$record-gap-total-width}) / #{$record-count-each-row}) !important;
|
||||
height: calc((100% - #{$record-gap * 6}) / 6) !important; // 平均分配高度
|
||||
margin: 0 !important;
|
||||
padding: 0px !important;
|
||||
background-color: white !important;
|
||||
border: 1px solid #dee2e6 !important;
|
||||
border-radius: 4px !important;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
|
||||
min-width: calc((100% - #{$record-gap-total-width}) / #{$record-count-each-row}) !important;
|
||||
max-width: calc((100% - #{$record-gap-total-width}) / #{$record-count-each-row}) !important;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px) !important;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.o_kanban_record_bottom {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.oe_kanban_card.kanban_color_3,
|
||||
.oe_kanban_card.kanban_color_1,
|
||||
.oe_kanban_card.kanban_color_2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.sf_kanban_custom_location_info_style {
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.sf_kanban_no {
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 使用 mixin 为不同的列数生成样式
|
||||
.o_kanban_view {
|
||||
.sf_kanban_location_style {
|
||||
// 设置卡片样式
|
||||
.o_kanban_record {
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px) !important;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.o_kanban_record_bottom {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.oe_kanban_card.kanban_color_3,
|
||||
.oe_kanban_card.kanban_color_1,
|
||||
.oe_kanban_card.kanban_color_2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.sf_kanban_custom_location_info_style {
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.sf_kanban_no {
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sf_kanban_location_style12 {
|
||||
@include kanban-common-styles(12);
|
||||
}
|
||||
|
||||
.sf_kanban_location_style19 {
|
||||
@include kanban-common-styles(19);
|
||||
}
|
||||
|
||||
.sf_kanban_location_style4 {
|
||||
@include kanban-common-styles(4);
|
||||
}
|
||||
|
||||
.sf_kanban_location_style3 {
|
||||
@include kanban-common-styles(3);
|
||||
}
|
||||
}
|
||||
@@ -1,21 +1,158 @@
|
||||
/** @odoo-module */
|
||||
|
||||
import {KanbanController} from "@web/views/kanban/kanban_controller";
|
||||
import {kanbanView} from "@web/views/kanban/kanban_view";
|
||||
import {registry} from "@web/core/registry";
|
||||
|
||||
// the controller usually contains the Layout and the renderer.
|
||||
class CustomKanbanController extends KanbanController {
|
||||
// Your logic here, override or insert new methods...
|
||||
// if you override setup(), don't forget to call super.setup()
|
||||
}
|
||||
|
||||
CustomKanbanController.template = "sf_warehouse.CustomKanbanView";
|
||||
|
||||
export const customKanbanView = {
|
||||
...kanbanView, // contains the default Renderer/Controller/Model
|
||||
Controller: CustomKanbanController,
|
||||
};
|
||||
|
||||
// Register it to the views registry
|
||||
registry.category("views").add("custom_kanban", customKanbanView);
|
||||
/** @odoo-module */
|
||||
|
||||
import { KanbanController } from "@web/views/kanban/kanban_controller";
|
||||
import { KanbanRenderer } from "@web/views/kanban/kanban_renderer";
|
||||
import { kanbanView } from "@web/views/kanban/kanban_view";
|
||||
import { registry } from "@web/core/registry";
|
||||
import { useService } from "@web/core/utils/hooks";
|
||||
import { useState, onWillStart,onWillUnmount,onMounted } from "@odoo/owl";
|
||||
|
||||
|
||||
// 自定义看板渲染器
|
||||
class CustomKanbanRenderer extends KanbanRenderer {
|
||||
|
||||
}
|
||||
|
||||
// 自定义看板控制器
|
||||
class CustomKanbanController extends KanbanController {
|
||||
setup() {
|
||||
super.setup();
|
||||
this.orm = useService("orm");
|
||||
this.searchModel = this.model.env.searchModel;
|
||||
this.defaultPagerLimit = this.getSystemDefaultLimit();
|
||||
this._onUpdate = (payload) => {
|
||||
this._handleSearchUpdate(payload);
|
||||
};
|
||||
|
||||
this.env.services.user.updateContext({
|
||||
isBaseStyle: true
|
||||
});
|
||||
let self = this;
|
||||
// 获取货架分层数据
|
||||
onWillStart(async () => {
|
||||
this.searchModel.on('update',self,self._onUpdate);
|
||||
await this.loadShelfLayersData();
|
||||
});
|
||||
|
||||
// 组件销毁时移除监听
|
||||
onWillUnmount(() => {
|
||||
this.searchModel.off('update',self,self._onUpdate);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
_handleSearchUpdate() {
|
||||
try {
|
||||
let domain = this.searchModel.domain;
|
||||
if(domain.length > 0){
|
||||
let shelfDomain = domain.find(item => item[0] === 'shelf_id');
|
||||
if(shelfDomain){
|
||||
let shelfId = shelfDomain[2];
|
||||
// 如果货架ID存在，则设置相应的样式
|
||||
if (shelfId) {
|
||||
this.onShelfChange(shelfId);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
//设置默认样式
|
||||
this.updatePagerLimit(this.defaultPagerLimit);
|
||||
this.setKanbanStyle('sf_kanban_location_style');
|
||||
} catch (error) {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 加载所有货架的层数数据
|
||||
async loadShelfLayersData() {
|
||||
this.shelfLayersMap = {};
|
||||
const shelfIds = await this.orm.search('sf.shelf', []);
|
||||
const shelves = await this.orm.read('sf.shelf', shelfIds, ['id', 'layer_capacity']);
|
||||
|
||||
shelves.forEach(shelf => {
|
||||
this.shelfLayersMap[shelf.id] = shelf.layer_capacity;
|
||||
});
|
||||
}
|
||||
|
||||
setKanbanStyle(style){
|
||||
this.env.services.user.updateContext({
|
||||
isBaseStyle: style === 'sf_kanban_location_style'
|
||||
});
|
||||
const kanbanViewEl = document.querySelector('.o_kanban_renderer');
|
||||
if (kanbanViewEl) {
|
||||
let isHave = false;
|
||||
// 移除所有现有的 sf_kanban_* 类
|
||||
Array.from(kanbanViewEl.classList).forEach(cls => {
|
||||
if (cls.startsWith('sf_kanban_location_style')) {
|
||||
kanbanViewEl.classList.remove(cls);
|
||||
isHave = true;
|
||||
}
|
||||
});
|
||||
|
||||
// 添加新类
|
||||
if(isHave)kanbanViewEl.classList.add(style);
|
||||
}
|
||||
}
|
||||
|
||||
updatePagerLimit(limit) {
|
||||
if (this.model.root.limit !== limit) {
|
||||
this.model.root.limit = limit;
|
||||
this.render(true);
|
||||
}
|
||||
}
|
||||
|
||||
// 处理货架变更事件
|
||||
async onShelfChange(shelfId) {
|
||||
let style = 'sf_kanban_location_style';
|
||||
let isBaseStyle = true;
|
||||
if (shelfId) {
|
||||
// 如果没有缓存，从服务器加载数据
|
||||
if (!(shelfId in this.shelfLayersMap)) {
|
||||
const [shelf] = await this.orm.read('sf.shelf', [shelfId], ['layer_capacity']);
|
||||
this.shelfLayersMap[shelfId] = shelf.layer_capacity;
|
||||
}
|
||||
|
||||
// 获取该货架的层数
|
||||
const layerCapacity = this.shelfLayersMap[shelfId];
|
||||
// 根据层数设置不同的样式
|
||||
if (layerCapacity >= 1) {
|
||||
style = `sf_kanban_location_style${layerCapacity}`;
|
||||
isBaseStyle = false;
|
||||
}
|
||||
}
|
||||
if(isBaseStyle){
|
||||
this.updatePagerLimit(this.defaultPagerLimit);
|
||||
}
|
||||
else{
|
||||
this.updatePagerLimit(500);
|
||||
}
|
||||
this.setKanbanStyle(style);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取系统默认分页记录数
|
||||
*/
|
||||
getSystemDefaultLimit() {
|
||||
// 方法1：从用户服务获取默认值
|
||||
const userService = this.env.services.user;
|
||||
|
||||
// 获取用户配置的默认分页大小
|
||||
if (userService && userService.user_context && userService.user_context.limit) {
|
||||
return userService.user_context.limit;
|
||||
}
|
||||
|
||||
// 方法3：使用Odoo核心默认值（通常为80）
|
||||
return 80;
|
||||
}
|
||||
}
|
||||
|
||||
// 设置自定义模板
|
||||
CustomKanbanController.template = "sf_warehouse.CustomKanbanView";
|
||||
|
||||
export const customKanbanView = {
|
||||
...kanbanView,
|
||||
Controller: CustomKanbanController,
|
||||
Renderer: CustomKanbanRenderer,
|
||||
};
|
||||
|
||||
registry.category("views").add("custom_kanban", customKanbanView);
|
||||
Reference in New Issue
Block a user