many2many图文展示及点击交互效果

jikimo_frontend/__manifest__.py

@@ -22,7 +22,7 @@
         ],
         'web.assets_backend': [
             'jikimo_frontend/static/src/fields/custom_many2many_checkboxes/*',
-            'jikimo_frontend/static/src/scss/test.scss',
+            'jikimo_frontend/static/src/scss/custom_style.scss',
         ],
 
     },

jikimo_frontend/static/src/fields/custom_many2many_checkboxes/custom_many2many_checkboxes.css

@@ -1,6 +1,41 @@
 .zoomed {
-  position: fixed;
+  position: fixed !important;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%) scale(20);
+  transform: translate(-50%, -50%) scale(10);
 }
+
+.many2many_flex {
+  display: flex;
+}
+
+.many2many_flex>div {
+  margin-right: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.many2many_flex>div>:nth-child(2) {
+  position: relative;
+}
+
+.close {
+  width: 20px;
+  height: 20px;
+  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 {
+  opacity: 1;
+  transform: scale(0.1);
+  cursor: pointer;
+}

jikimo_frontend/static/src/fields/custom_many2many_checkboxes/custom_many2many_checkboxes.js

@@ -1,25 +1,36 @@
 /** @odoo-module **/
 
-import { Many2ManyCheckboxesField } from "@web/views/fields/many2many_checkboxes/many2many_checkboxes_field";
-import { registry } from "@web/core/registry";
+import {Many2ManyCheckboxesField} from "@web/views/fields/many2many_checkboxes/many2many_checkboxes_field";
+import {registry} from "@web/core/registry";
 
 export class MyCustomWidget extends Many2ManyCheckboxesField {
-  // 你可以重写或者添加一些方法和属性
-  // 例如，你可以重写setup方法来添加一些事件监听器或者初始化一些变量
-  setup() {
-    super.setup(); // 调用父类的setup方法
-    // 你自己的代码
-  }
-  onImageClick(event) {
-    // 放大图片逻辑
-    // 获取图片元素
-    const img = event.target;
+    // 你可以重写或者添加一些方法和属性
+    // 例如，你可以重写setup方法来添加一些事件监听器或者初始化一些变量
+    setup() {
+        super.setup(); // 调用父类的setup方法
+        // 你自己的代码
+    }
 
-    // 实现放大图片逻辑
-    // 比如使用 CSS 放大
-    img.classList.add('zoomed');
-  }
+    onImageClick(event) {
+        // 放大图片逻辑
+        // 获取图片元素
+        const img = event.target;
+        const close = img.nextSibling
+
+        // 实现放大图片逻辑
+        // 比如使用 CSS 放大
+        img.parentElement.classList.add('zoomed');
+        close.classList.add('img_close')
+    }
+
+    onCloseClick(event) {
+        const close = event.target;
+        const img = close.previousSibling
+        img.parentElement.classList.remove('zoomed')
+        close.classList.remove('img_close')
+    }
 }
+
 MyCustomWidget.template = "sf_plan.MyCustomWidget"
 // MyCustomWidget.supportedTypes = ['many2many'];
 

jikimo_frontend/static/src/fields/custom_many2many_checkboxes/custom_many2many_checkboxes.xml

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