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

Accept Merge Request #1385: (feature/临时分支 -> develop)

Browse Source 
Merge Request: 修改custom_many2many_checkboxes组件，优化图片展示方式，及点击图片放大的预览样式

Created By: @胡嘉莹
Reviewed By: @胡尧
Approved By: @胡尧 
Accepted By: @胡嘉莹
URL: https://jikimo-hn.coding.net/p/jikimo_sfs/d/jikimo_sf/git/merge/1385
This commit is contained in:
胡嘉莹
2024-10-09 16:28:52 +08:00
committed by Coding
parent 3f0fda7aac a1b9f2dd3b
commit b1fbf4344e
5 changed files with 215 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
jikimo_frontend/static/src/fields/custom_many2many_checkboxes/custom_many2many_checkboxes.css
View File

@@ -1,41 +1,99 @@
.zoomed {
position: fixed !important; .processing-capabilities-grid {
top: 50%; display: grid;
left: 50%; grid-template-columns: repeat(6, 1fr);
transform: translate(-50%, -50%) scale(10); gap: 10px;
width: 100%;
} }
.many2many_flex { .grid-item {
display: flex; display: flex;
align-items: center;
} }
.many2many_flex>div { .item-content {
margin-right: 15px; display: flex;
display: flex; flex-direction: column;
flex-direction: column; align-items: center;
align-items: center; text-align: center;
}
/*控制图片大小*/
.item-icon {
width: 50px;
height: 50px;
margin-bottom: 5px;
} }
.many2many_flex>div>:nth-child(2) { .item-label {
position: relative; font-size: 12px;
word-break: break-word;
} }
.close { @media (max-width: 1200px) {
width: 20px; .processing-capabilities-grid {
height: 20px; grid-template-columns: repeat(4, 1fr);
position: absolute; }
top: -8.8px;
right: -8.8px;
color: #fff;
background-color: #000;
opacity: 0;
text-align: center;
line-height: 20px;
font-size: 18px;
} }
.img_close { @media (max-width: 768px) {
opacity: 1; .processing-capabilities-grid {
transform: scale(0.1); grid-template-columns: repeat(3, 1fr);
cursor: pointer; }
}
@media (max-width: 480px) {
.processing-capabilities-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.image-preview-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
transition: opacity 0.3s ease;
}
.image-preview-container.show {
opacity: 1;
}
.image-preview {
max-width: 90%;
max-height: 90%;
object-fit: contain;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
border-radius: 5px;
transform: scale(0.9);
transition: transform 0.3s ease;
}
.image-preview-container.show .image-preview {
transform: scale(1);
}
.image-preview-close {
position: absolute;
top: 20px;
right: 30px;
color: #fff;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
cursor: pointer;
opacity: 0.7;
}
.image-preview-close:hover,
.image-preview-close:focus {
opacity: 1;
text-decoration: none;
cursor: pointer;
} }

64
jikimo_frontend/static/src/fields/custom_many2many_checkboxes/custom_many2many_checkboxes.js
View File

@@ -4,35 +4,57 @@ import {Many2ManyCheckboxesField} from "@web/views/fields/many2many_checkboxes/m
import {registry} from "@web/core/registry"; import {registry} from "@web/core/registry";
export class MyCustomWidget extends Many2ManyCheckboxesField { export class MyCustomWidget extends Many2ManyCheckboxesField {
// 你可以重写或者添加一些方法和属性
// 例如，你可以重写setup方法来添加一些事件监听器或者初始化一些变量
setup() { setup() {
super.setup(); // 调用父类的setup方法 super.setup();
// 你自己的代码
} }
onImageClick(event) { onImageClick(event, src) {
// 放大图片逻辑 event.preventDefault();
// 获取图片元素 event.stopPropagation();
const img = event.target;
const close = img.nextSibling;
// 实现放大图片逻辑 // 创建预览框
// 比如使用 CSS 放大 const previewContainer = document.createElement('div');
img.parentElement.classList.add('zoomed'); previewContainer.className = 'image-preview-container';
close.classList.add('img_close');
}
onCloseClick(event) { const previewImg = document.createElement('img');
const close = event.target; previewImg.src = src;
const img = close.previousSibling; previewImg.className = 'image-preview';
img.parentElement.classList.remove('zoomed'); // 设置放大的预览图片大小
close.classList.remove('img_close'); previewImg.style.width = '600px';
previewImg.style.height = 'auto'; // 保持宽高比
const closeButton = document.createElement('span');
closeButton.innerHTML = '×';
closeButton.className = 'image-preview-close';
previewContainer.appendChild(previewImg);
previewContainer.appendChild(closeButton);
document.body.appendChild(previewContainer);
// 添加关闭预览的事件监听器
const closePreview = () => {
previewContainer.classList.remove('show');
setTimeout(() => {
document.body.removeChild(previewContainer);
}, 300);
};
closeButton.addEventListener('click', closePreview);
// 点击预览框外部也可以关闭
previewContainer.addEventListener('click', (e) => {
if (e.target === previewContainer) {
closePreview();
}
});
// 使用 setTimeout 来触发过渡效果
setTimeout(() => {
previewContainer.classList.add('show');
}, 10);
} }
} }
MyCustomWidget.template = "jikimo_frontend.MyCustomWidget"; MyCustomWidget.template = "jikimo_frontend.MyCustomWidget";
// MyCustomWidget.supportedTypes = ['many2many'];
registry.category("fields").add("custom_many2many_checkboxes", MyCustomWidget); registry.category("fields").add("custom_many2many_checkboxes", MyCustomWidget);

17
jikimo_frontend/static/src/fields/custom_many2many_checkboxes/custom_many2many_checkboxes.xml
View File

@@ -2,25 +2,20 @@
<templates xml:space="preserve"> <templates xml:space="preserve">
<t t-name="jikimo_frontend.MyCustomWidget" owl="1"> <t t-name="jikimo_frontend.MyCustomWidget" owl="1">
<div aria-atomic="true" class="many2many_flex"> <div aria-atomic="true" class="many2many_flex processing-capabilities-grid">
<t t-foreach="items" t-as="item" t-key="item[0]"> <t t-foreach="items" t-as="item" t-key="item[0]">
<div> <div class="grid-item">
<CheckBox <CheckBox
value="isSelected(item)" value="isSelected(item)"
disabled="props.readonly" disabled="props.readonly"
onChange="(ev) => this.onChange(item[0], ev)" onChange="(ev) => this.onChange(item[0], ev)"
> >
<t t-esc="item[1]"/> <div class="item-content">
<img t-att-src="item[2]" class="item-icon" t-on-click="(ev) => this.onImageClick(ev, item[2])"/>
<span class="item-label"><t t-esc="item[1]"/></span>
</div>
</CheckBox> </CheckBox>
<div t-on-dblclick="onImageClick">
<t>
<img t-att-src="item[2]" width="50" height="50"/>
<div class="close" t-on-click="onCloseClick">×</div>
</t>
</div> </div>
</div>
</t> </t>
</div> </div>
</t> </t>

133
sf_base/views/base_view.xml
View File

@@ -109,7 +109,7 @@
<field name="name">form.sf.machine_tool.type</field> <field name="name">form.sf.machine_tool.type</field>
<field name="model">sf.machine_tool.type</field> <field name="model">sf.machine_tool.type</field>
<field name="arch" type="xml"> <field name="arch" type="xml">
<form string="机床型号" delete="0"> <form string="机床型号" delete="0">
<sheet> <sheet>
<div class="oe_title"> <div class="oe_title">
<h1> <h1>
@@ -129,31 +129,28 @@
<field name="machine_tool_picture" widget="image" nolabel="1"/> <field name="machine_tool_picture" widget="image" nolabel="1"/>
</group> </group>
</group> </group>
<group string="加工能力"> <group string="加工能力">
<div> <div>
<field name='jg_image_id' widget="custom_many2many_checkboxes"> <field name='jg_image_id' widget="custom_many2many_checkboxes">
<tree>
<field name="name"/>
<field name="image" widget="image"/>
<tree> </tree>
<field name="name"/> </field>
<field name="image" widget="image"
options="{'size': [100, 100], 'click enlarge': True}"/>
</tree>
</field>
</div> </div>
</group> </group>
<group string="冷却方式"> <group string="冷却方式">
<div> <div>
<field name='lq_image_id' widget="custom_many2many_checkboxes"> <field name='lq_image_id' widget="custom_many2many_checkboxes">
<tree> <tree>
<field name="name"/> <field name="name"/>
<field name="image" widget="image" <field name="image" widget="image"/>
options="{'size': [100, 100], 'click enlarge': True}"/>
</tree> </tree>
</field> </field>
</div> </div>
</group> </group>
@@ -178,7 +175,7 @@
<field name="workbench_H" class="o_address_zip" required="1" <field name="workbench_H" class="o_address_zip" required="1"
options="{'format': false}"/> options="{'format': false}"/>
</div> </div>
<field name="workpiece_load"/> <field name="workpiece_load"/>
<label for="machine_tool_L" string="机床尺寸(mm)"/> <label for="machine_tool_L" string="机床尺寸(mm)"/>
<div class="test_model"> <div class="test_model">
<label for="machine_tool_L" string="长"/> <label for="machine_tool_L" string="长"/>
@@ -192,7 +189,7 @@
<field name="machine_tool_H" class="o_address_zip" <field name="machine_tool_H" class="o_address_zip"
options="{'format': false}"/> options="{'format': false}"/>
</div> </div>
<label for="T_trough_num" string="T型槽尺寸:"/> <label for="T_trough_num" string="T型槽尺寸:"/>
<div class="test_model"> <div class="test_model">
<label for="T_trough_num" string="槽数"/> <label for="T_trough_num" string="槽数"/>
<field name="T_trough_num" class="o_address_zip" <field name="T_trough_num" class="o_address_zip"
@@ -205,20 +202,20 @@
<field name="T_trough_distance" class="o_address_zip" <field name="T_trough_distance" class="o_address_zip"
options="{'format': false}"/> options="{'format': false}"/>
</div> </div>
<!-- <field name="feed_speed" required="1"/>--> <!-- <field name="feed_speed" required="1"/>-->
<!-- <label for="precision_min" string="X轴定位精度(mm)"/>--> <!-- <label for="precision_min" string="X轴定位精度(mm)"/>-->
<!-- <div class="test_model">--> <!-- <div class="test_model">-->
<!-- <label for="precision_min" string="最小(min)"/>--> <!-- <label for="precision_min" string="最小(min)"/>-->
<!-- <field name="precision_min" class="o_address_zip" required="1"--> <!-- <field name="precision_min" class="o_address_zip" required="1"-->
<!-- options="{'format': false}"/>--> <!-- options="{'format': false}"/>-->
<!-- <span>&amp;nbsp;</span>--> <!-- <span>&amp;nbsp;</span>-->
<!-- <label for="precision_max" string="最大(max)"/>--> <!-- <label for="precision_max" string="最大(max)"/>-->
<!-- <field name="precision_max" class="o_address_zip" required="1"--> <!-- <field name="precision_max" class="o_address_zip" required="1"-->
<!-- options="{'format': false}"/>--> <!-- options="{'format': false}"/>-->
<!-- </div>--> <!-- </div>-->
<!-- <field name="lead_screw" required="1"/>--> <!-- <field name="lead_screw" required="1"/>-->
<!-- <field name="guide_rail" required="1"/>--> <!-- <field name="guide_rail" required="1"/>-->
<field name="number_of_axles" required="1" widget="radio" <field name="number_of_axles" required="1" widget="radio"
options="{'horizontal': true}"/> options="{'horizontal': true}"/>
<label for="x_axis" string="加工行程(mm)" <label for="x_axis" string="加工行程(mm)"
@@ -258,7 +255,7 @@
</group> </group>
<group string="主轴"> <group string="主轴">
<field name="taper_type_id" required="1"/> <field name="taper_type_id" required="1"/>
<label for="distance_min" string="主轴端面-工作台距离(mm)"/> <label for="distance_min" string="主轴端面-工作台距离(mm)"/>
<div class="test_model"> <div class="test_model">
<label for="distance_min" string="最小(min)"/> <label for="distance_min" string="最小(min)"/>
<field name="distance_min" class="o_address_zip" <field name="distance_min" class="o_address_zip"
@@ -268,7 +265,7 @@
<field name="distance_max" class="o_address_zip" <field name="distance_max" class="o_address_zip"
options="{'format': false}"/> options="{'format': false}"/>
</div> </div>
<field name="rotate_speed" string="主轴最高转速(r/min)" <field name="rotate_speed" string="主轴最高转速(r/min)"
options="{'format': false}"/> options="{'format': false}"/>
<field name="spindle_center_distance"/> <field name="spindle_center_distance"/>
<field name="spindle_continuous_power"/> <field name="spindle_continuous_power"/>
@@ -286,50 +283,50 @@
<page string="进给/精度参数"> <page string="进给/精度参数">
<group> <group>
<group string="进给参数"> <group string="进给参数">
<field name="X_axis_rapid_traverse_speed"/> <field name="X_axis_rapid_traverse_speed"/>
<field name="Y_axis_rapid_traverse_speed"/> <field name="Y_axis_rapid_traverse_speed"/>
<field name="Z_axis_rapid_traverse_speed"/> <field name="Z_axis_rapid_traverse_speed"/>
<field name="a_axis_rapid_traverse_speed"/> <field name="a_axis_rapid_traverse_speed"/>
<field name="b_axis_rapid_traverse_speed"/> <field name="b_axis_rapid_traverse_speed"/>
<field name="c_axis_rapid_traverse_speed"/> <field name="c_axis_rapid_traverse_speed"/>
<field name="straight_cutting_feed_rate"/> <field name="straight_cutting_feed_rate"/>
<field name="rotary_cutting_feed_rate"/> <field name="rotary_cutting_feed_rate"/>
</group> </group>
<group string="精度参数"> <group string="精度参数">
<field name="X_precision"/> <field name="X_precision"/>
<field name="X_precision_repeat"/> <field name="X_precision_repeat"/>
<field name="Y_precision"/> <field name="Y_precision"/>
<field name="Y_precision_repeat"/> <field name="Y_precision_repeat"/>
<field name="Z_precision"/> <field name="Z_precision"/>
<field name="Z_precision_repeat"/> <field name="Z_precision_repeat"/>
<field name="a_precision"/> <field name="a_precision"/>
<field name="a_precision_repeat"/> <field name="a_precision_repeat"/>
<field name="b_precision"/> <field name="b_precision"/>
<field name="b_precision_repeat"/> <field name="b_precision_repeat"/>
<field name="c_precision"/> <field name="c_precision"/>
<field name="c_precision_repeat"/> <field name="c_precision_repeat"/>
</group> </group>
</group> </group>
</page> </page>
<page string="刀库参数"> <page string="刀库参数">
<group> <group>
<group string="刀具"> <group string="刀具">
<!-- <field name="knife_type" required="1"/>--> <!-- <field name="knife_type" required="1"/>-->
<field name="number_of_knife_library" required="1" options="{'format': false}"/> <field name="number_of_knife_library" required="1" options="{'format': false}"/>
<!-- <field name="tool_speed" required="1"/>--> <!-- <field name="tool_speed" required="1"/>-->
<field name="tool_full_diameter_max"/> <field name="tool_full_diameter_max"/>
<field name="tool_perimeter_diameter_max"/> <field name="tool_perimeter_diameter_max"/>
<field name="tool_long_max"/> <field name="tool_long_max"/>
<!-- <label for="tool_diameter_min" string="刀具刀径(mm)"/>--> <!-- <label for="tool_diameter_min" string="刀具刀径(mm)"/>-->
<!-- <div class="test_model">--> <!-- <div class="test_model">-->
<!-- <label for="tool_diameter_min" string="最小(min)"/>--> <!-- <label for="tool_diameter_min" string="最小(min)"/>-->
<!-- <field name="tool_diameter_min" class="o_address_zip" required="1"--> <!-- <field name="tool_diameter_min" class="o_address_zip" required="1"-->
<!-- options="{'format': false}"/>--> <!-- options="{'format': false}"/>-->
<!-- <span>&amp;nbsp;</span>--> <!-- <span>&amp;nbsp;</span>-->
<!-- <label for="tool_diameter_max" string="最大(max)"/>--> <!-- <label for="tool_diameter_max" string="最大(max)"/>-->
<!-- <field name="tool_diameter_max" class="o_address_zip" required="1"--> <!-- <field name="tool_diameter_max" class="o_address_zip" required="1"-->
<!-- options="{'format': false}"/>--> <!-- options="{'format': false}"/>-->
<!-- </div>--> <!-- </div>-->
<field name="tool_quality_max"/> <field name="tool_quality_max"/>
<field name="T_tool_time"/> <field name="T_tool_time"/>
<field name="C_tool_time"/> <field name="C_tool_time"/>

14
sf_manufacturing/views/mrp_production_addional_change.xml
View File

@@ -296,8 +296,11 @@
</attribute> </attribute>
</xpath> </xpath>
<xpath expr="//sheet//notebook//page[@name='operations']//field[@name='workorder_ids']" position="replace"> <xpath expr="//sheet//notebook//page[@name='operations']//field[@name='workorder_ids']"
<field name="workorder_ids" attrs="{'readonly': ['|', ('state', '!=', 'test_value'), '&amp;', ('state', '=', 'done'), ('is_locked', '=', True)]}" context="{'tree_view_ref': 'mrp.mrp_production_workorder_tree_editable_view', 'default_product_uom_id': product_uom_id, 'from_manufacturing_order': True}"/> position="replace">
<field name="workorder_ids"
attrs="{'readonly': ['|', ('state', '!=', 'test_value'), '&amp;', ('state', '=', 'done'), ('is_locked', '=', True)]}"
context="{'tree_view_ref': 'mrp.mrp_production_workorder_tree_editable_view', 'default_product_uom_id': product_uom_id, 'from_manufacturing_order': True}"/>
</xpath> </xpath>
<xpath expr="//sheet//notebook//page[@name='operations']" position="after"> <xpath expr="//sheet//notebook//page[@name='operations']" position="after">
@@ -556,7 +559,12 @@
</div> </div>
<field name="priority" widget="priority"/> <field name="priority" widget="priority"/>
</div> </div>
<t t-if="record.brand_id.raw_value">
<div class="mt-1">
品牌:
<field name="brand_id"></field>
</div>
</t>
<div name="product_specification_id" class="mt-1"> <div name="product_specification_id" class="mt-1">
规格: 规格:
<field name="specification_id"/> <field name="specification_id"/>