增加点击图片放大图片的功能

sf_plan/__manifest__.py

@@ -26,6 +26,7 @@
         'web.assets_backend': [
             'sf_plan/static/src/js/custom_many2many.js',
             'sf_plan/static/src/xml/custom_many2many.xml',
+            'sf_plan/static/src/css/img_scale.css',
             'sf_plan/static/src/scss/gannt_change.scss',
             'sf_plan/static/src/css/button_color.css'
         ],

sf_plan/static/src/css/img_scale.css

@@ -0,0 +1,6 @@
+.zoomed {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(20);
+}

sf_plan/static/src/js/custom_many2many.js

@@ -12,8 +12,14 @@ export class MyCustomWidget extends Many2ManyCheckboxesField {
     // 你自己的代码
   }
   onImageClick(event) {
-  // 放大图片逻辑
+    // 放大图片逻辑
     console.log('chongchongchong')
+    // 获取图片元素 
+    const img = event.target;
+
+    // 实现放大图片逻辑
+    // 比如使用 CSS 放大
+    img.classList.add('zoomed');
   }
 }
 MyCustomWidget.template = "sf_plan.MyCustomWidget"

sf_plan/static/src/xml/custom_many2many.xml

@@ -11,10 +11,14 @@
                         onChange="(ev) => this.onChange(item[0], ev)"
                     >
                         <t t-esc="item[1]"/>
-                        <t>
+
-                          <img t-att-src="item[3]" width="20" height="20"/>
-                        </t>
                     </CheckBox>
+
+                </div>
+                <div t-on-click="onImageClick">
+                    <t>
+                        <img t-att-src="item[3]" width="20" height="20"/>
+                    </t>
                 </div>
             </t>
         </div>