附件预览模块，点击可预览

ccs_base/views/cc_bl_view.xml

@@ -165,7 +165,7 @@
                         <!--                        </page>-->
                         <page string="Attachments">
                             <group>
-                                <field name="bl_attachment_ids" string="B/L Attachments" widget="many2many_binary"
+                                <field name="bl_attachment_ids" string="B/L Attachments" widget="many2many_attachment_preview"
                                        readonly="1"/>
                                 <field name="cc_attachment_ids" string="CC Attachments"/>
                             </group>

ccs_base/views/cc_history_ship_package_view.xml

@@ -146,7 +146,7 @@
                         </page>
                         <page string="Invoice Attachments">
                             <field name="invoice_attachment_ids" string="Invoice Attachments"
-                                   widget="many2many_binary"/>
+                                   widget="many2many_attachment_preview"/>
                         </page>
                         <page string="Sender Info">
                             <group>

ccs_base/views/cc_ship_package_view.xml

@@ -149,7 +149,7 @@
                         </page>
                         <page string="Invoice Attachments">
                             <field name="invoice_attachment_ids" string="Invoice Attachments"
-                                   widget="many2many_binary"/>
+                                   widget="many2many_attachment_preview"/>
                         </page>
                         <page string="Sender Info">
                             <group>

ccs_base/wizard/batch_update_transfer_bl_no_wizard_view.xml

@@ -8,10 +8,10 @@
             <field name="arch" type="xml">
                 <form string="Batch Link Transfer B/L No"> <!-- 批量关联转单号 -->
                     <group>
-                        <field name="report_file_ids" widget="many2many_binary"/>
+                        <field name="report_file_ids" widget="many2many_attachment_preview"/>
                         <label for="error_file_ids" attrs="{'invisible': [('error_file_ids', '=', [])]}"/>
                         <div attrs="{'invisible': [('error_file_ids', '=', [])]}">
-                            <field name="error_file_ids" widget="many2many_binary" readonly="1"
+                            <field name="error_file_ids" widget="many2many_attachment_preview" readonly="1"
                                    attrs="{'invisible': [('error_file_ids', '=', [])]}"/>
                             <br/>
                             <!-- 有异常数据时,请下载异常数据文件，根据提示处理好数据,再导入! -->

many2many_attachment_preview/README.rst

+.. image:: https://img.shields.io/badge/license-AGPL--3-blue.svg
+    :target: https://www.gnu.org/licenses/agpl-3.0-standalone.html
+    :alt: License: AGPL-3
+
+Many2Many Attachment Preview
+============================
+This Module will help to preview the attachments in Many2Many fields.
+
+Configuration
+=============
+* No additional configurations needed
+Company
+-------
+* `Cybrosys Techno Solutions <https://cybrosys.com/>`__
+
+License
+=======
+GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3)
+(https://www.gnu.org/licenses/agpl-3.0-standalone.html)
+
+Credits
+-------
+* Developer: (V16) Ajith V,
+             (V15) Shonima, Contact: odoo@cybrosys.com
+
+Contacts
+--------
+* Mail Contact : odoo@cybrosys.com
+* Website : https://cybrosys.com
+
+Bug Tracker
+-----------
+Bugs are tracked on GitHub Issues. In case of trouble, please check there if your
+issue has already been reported.
+
+Maintainer
+==========
+.. image:: https://cybrosys.com/images/logo.png
+   :target: https://cybrosys.com
+
+This module is maintained by Cybrosys Technologies.
+
+For support and more information, please visit `Our Website <https://cybrosys.com/>`__
+
+Further information
+===================
+HTML Description: `<static/description/index.html>`__
+
+

many2many_attachment_preview/__init__.py

+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Ajith(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from . import models

many2many_attachment_preview/__manifest__.py

+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Ajith(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+{
+    'name': "Many2Many Attachment Preview",
+    'version': '16.0.1.0.0',
+    'summary': """Preview the attachment in Many2Many field""",
+    'description': """"This module helps you to preview the attachments in
+     Many2Many fields.""",
+    'category': 'Uncategorized',
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'website': "http://www.cybrosys.com",
+    'depends': ['base', 'sale_management'],
+    'data': ['views/sale_order_views.xml'],
+    'assets': {
+        'web.assets_backend': [
+            'many2many_attachment_preview/static/src/js/attachment_preview.js',
+            'many2many_attachment_preview/static/src/xml/attachment_preview.xml',
+            'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css',
+            'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js'
+        ],
+    },
+    'license': 'AGPL-3',
+    'images': ['static/description/banner.png'],
+    'installable': True,
+    'auto_install': False,
+    'application': False,
+}

many2many_attachment_preview/doc/RELEASE_NOTES.md

+## Module <many2many_attachment_preview>
+
+#### 29.08.2024
+#### Version 16.0.1.0.0
+#### ADD
+- Initial Commit for Many2Many Attachment Preview

many2many_attachment_preview/models/__init__.py

+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Ajith(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from . import sale_order

many2many_attachment_preview/models/sale_order.py

+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Ajith(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from odoo import fields, models
+
+
+class SaleOrder(models.Model):
+    """Inherited sale. order class to add a new field for attachments"""
+    _inherit = 'sale.order'
+
+    attachment_ids = fields.Many2many(
+        comodel_name='ir.attachment',
+        string="Attachments", help="Add Multiple attachment file")

many2many_attachment_preview/static/src/js/attachment_preview.js

+/** @odoo-module **/
+import {registry} from "@web/core/registry";
+import {Component, useState} from "@odoo/owl";
+import {FileInput} from "@web/core/file_input/file_input";
+import {standardFieldProps} from "@web/views/fields/standard_field_props";
+import {useService} from "@web/core/utils/hooks";
+import {useX2ManyCrud} from "@web/views/fields/relational_utils";
+
+/**
+ * The Many2ManyAttachmentPreview component is designed to manage the preview and handling
+ * of many2many fields that contain file attachments. It allows users to upload, preview,
+ * and remove files associated with a record.
+ *
+ * @class
+ * @extends Component
+ *
+ * @prop {Object} props - The props object includes all the standard field properties,
+ *                        as well as additional properties such as acceptedFileExtensions,
+ *                        className, and numberOfFiles.
+ * @prop {String} props.acceptedFileExtensions - (Optional) A string defining the accepted file
+ *                                               extensions for uploads.
+ * @prop {String} props.className - (Optional) A string defining any additional CSS classes
+ *                                  to be applied.
+ * @prop {Number} props.numberOfFiles - (Optional) A number representing the maximum number of
+ *                                      files allowed.
+ *
+ * @setup
+ * @method setup - Initializes services and state for the component, including ORM service,
+ *                 notification service, and operations for managing many2many CRUD.
+ *
+ * @state {Object} state - Contains component state, including a flag for internal logic handling.
+ *
+ * @getter uploadText - Retrieves the label for the upload button, typically the field's label.
+ *
+ * @getter files - Returns a list of files associated with the record, including their IDs
+ *                 and other relevant data.
+ *
+ * @method getUrl(id) - Constructs the URL to access a file attachment by its ID.
+ * @param {Number} id - The ID of the file attachment.
+ * @returns {String} - The URL for the file attachment.
+ *
+ * @method getExtension(file) - Extracts the file extension from a file's name.
+ * @param {Object} file - The file object.
+ * @returns {String} - The file extension.
+ *
+ * @method onFileUploaded(files) - Handles the logic after files are uploaded,
+ *                                 including error handling and saving the records.
+ * @param {Array} files - An array of uploaded files.
+ * @returns {Promise<void>}
+ *
+ * @method onFileRemove(deleteId) - Handles the logic for removing a file by its ID,
+ *                                  including updating the records.
+ * @param {Number} deleteId - The ID of the file to be removed.
+ * @returns {Promise<void>}
+ *
+ * @supportedTypes - Specifies that this component supports "many2many" fields.
+ *
+ * @fieldsToFetch - Defines the fields to be fetched from the related records, such as
+ *                  'name' and 'mimetype'.
+ *
+ * @registry.category("fields").add("many2many_attachment_preview", Many2ManyAttachmentPreview)
+ *                             - Registers the component in the Odoo registry.
+ */
+
+export class Many2ManyAttachmentPreview extends Component {
+    static template = 'many2many_attachment_preview.Many2ManyImageField'
+    static components = {
+        FileInput,
+    };
+    static props = {
+        ...standardFieldProps,
+        acceptedFileExtensions: {type: String, optional: true},
+        className: {type: String, optional: true},
+        numberOfFiles: {type: Number, optional: true},
+    };
+
+    setup() {
+        this.orm = useService("orm");
+        this.notification = useService("notification");
+        this.operations = useX2ManyCrud(() => this.props.value, true);
+        this.state = useState({
+            flag: false,
+        });
+    }
+
+    get uploadText() {
+        return this.props.record.fields[this.props.name].string;
+    }
+
+    get files() {
+        return this.props.record.data[this.props.name].records.map((record) => {
+            return {
+                ...record.data,
+                id: record.resId,
+            };
+        });
+    }
+
+    getUrl(id) {
+        return "/web/content/ir.attachment/" + id + "/datas";
+    }
+
+    getExtension(file) {
+        return file.name.replace(/^.*\./, "");
+    }
+
+    async onFileUploaded(files) {
+        for (const file of files) {
+            if (file.error) {
+                return this.notification.add(file.error, {
+                    title: this.env._t("Uploading error"),
+                    type: "danger",
+                });
+            }
+            await this.operations.saveRecord([file.id]);
+        }
+    }
+
+    async onFileRemove(deleteId) {
+        const record = this.props.value.records.find((record) => record.data.id === deleteId);
+        this.operations.removeRecord(record);
+    }
+}
+
+Many2ManyAttachmentPreview.supportedTypes = ["many2many"];
+Many2ManyAttachmentPreview.fieldsToFetch = {
+    name: {
+        type: 'char'
+    },
+    mimetype: {
+        type: 'char'
+    },
+}
+registry.category("fields").add("many2many_attachment_preview", Many2ManyAttachmentPreview)

many2many_attachment_preview/static/src/xml/attachment_preview.xml

+<template>
+    <!--
+   This template defines a Many2ManyImageField component used to display a list of image attachments
+   with an option to upload additional files. The component utilizes the Odoo Owl framework.
+
+   Structure:
+   - The outermost `div` has a dynamic class that includes `oe_fileupload` and optionally
+     a custom class if provided in `props.className`.
+   - Inside this `div`, there's a container `div` with the class `o_attachments o_attachments_widget`
+     which holds the list of attached files.
+   - The files are iterated over using `t-foreach`, where each `file` is rendered using the
+     `many2many_attachment_preview.image_preview` template.
+   - If the `readonly` property is not set, an upload section is rendered, allowing the user to
+     attach more files. The upload button triggers the `FileInput` component with the following attributes:
+       - `acceptedFileExtensions`: Defines the types of files allowed for upload.
+       - `multiUpload`: Enables multiple file uploads at once.
+       - `onUpload.bind`: Binds the `onFileUploaded` method for handling the upload process.
+       - `resModel`: Specifies the model associated with the uploaded files.
+       - `resId`: Specifies the record ID. If no ID is provided, it defaults to 0.
+   - The upload button has a tooltip "Attach" and displays a paperclip icon with a label and upload text.
+   -->
+    <t t-name="many2many_attachment_preview.Many2ManyImageField" owl="1">
+        <div t-attf-class="oe_fileupload {{ props.className ? props.className : ''}}"
+             aria-atomic="true">
+            <div class="o_attachments o_attachments_widget">
+                <t t-foreach="files" t-as="file" t-key="file_index">
+                    <t t-call="many2many_attachment_preview.image_preview"/>
+                </t>
+            </div>
+            <div t-if="!props.readonly" class="oe_add">
+                <FileInput
+                        acceptedFileExtensions="props.acceptedFileExtensions"
+                        multiUpload="true"
+                        onUpload.bind="onFileUploaded"
+                        resModel="props.record.resModel"
+                        resId="props.record.data.id or 0">
+                    <button class="btn btn-secondary o_attach o_attach_wiget"
+                            data-tooltip="Attach">
+                        <span class="fa fa-paperclip" aria-label="Attach"/>
+                        <t t-esc="uploadText"/>
+                    </button>
+                </FileInput>
+            </div>
+        </div>
+    </t>
+    <!--
+   This template defines the `image_preview` component used to display individual file attachments
+   in a many-to-many relationship field within Odoo. It handles various file types such as images,
+   PDFs, and videos, and provides functionalities for viewing, downloading, and deleting files.
+
+   Structure:
+   - A variable `editable` is set based on the `readonly` property from `props`, determining whether the file is editable.
+   - The outer `div` uses dynamic classes based on the `editable` state and upload status to provide appropriate styling.
+   - The inner `div` wraps the file attachment and displays the content based on the file extension:
+       - For image files (`png`, `jpg`, `jpeg`), an image preview is displayed. The image is wrapped in a link that uses Fancybox to allow zooming.
+       - For PDF files, the link is set to open in an iframe using Fancybox.
+       - For video files (`mkv`), the link is configured to play the video in an HTML5 video player using Fancybox.
+   - The `caption` section displays the file name and extension. Clicking the file name triggers a download.
+   - If the file is editable, a progress bar is shown during the upload process, and a delete button is provided to remove the file.
+   - Once the file is uploaded, a checkmark icon indicates successful upload.
+   - The delete button allows the user to remove the file, triggering the `onFileRemove` function with the file's ID.
+   -->
+    <t t-name="many2many_attachment_preview.image_preview" owl="1">
+        <t t-set="editable" t-value="!props.readonly"/>
+        <div t-attf-class="o_attachment_widget o_attachment_many2many #{ editable ? 'o_attachment_editable' : '' } #{upload ? 'o_attachment_uploading' : ''}"
+             t-att-title="file.name">
+            <div t-attf-class="o_attachment o_attachment_many2many #{ editable ? 'o_attachment_editable' : '' } #{upload ? 'o_attachment_uploading' : ''}"
+                 t-att-title="file.name">
+                <div class="o_attachment_wrap">
+                    <t t-set="ext" t-value="getExtension(file)"/>
+                    <t t-if="ext=='png' or ext=='jpg' or ext=='jpeg'">
+                        <div class="o_image_box float-start"
+                             t-att-data-tooltip="'Download ' + file.name">
+                            <a t-att-href="getUrl(file.id)"
+                               aria-label="Download"
+                               style="cursor: zoom-in;" data-fancybox="gallery"
+                               data-options="Toolbar">
+                                <span class="o_image o_hover"
+                                      t-att-data-mimetype="file.mimetype"
+                                      t-att-data-ext="ext" role="img"
+                                      t-attf-data-src="/web/content/{{file.id}}"/>
+                            </a>
+                        </div>
+                    </t>
+                    <t t-if="ext=='pdf'">
+                        <div class="o_image_box float-start"
+                             t-att-data-tooltip="'Download ' + file.name">
+                            <a t-att-href="getUrl(file.id)"
+                               aria-label="Download"
+                               style="cursor: zoom-in;" data-fancybox=""
+                               data-type="iframe">
+                                <span class="o_image o_hover"
+                                      t-att-data-mimetype="file.mimetype"
+                                      t-att-data-ext="ext" role="img"
+                                      t-attf-data-src="/web/content/{{file.id}}"/>
+                            </a>
+                        </div>
+                    </t>
+                    <t t-if="ext=='mkv'">
+                        <div class="o_image_box float-start"
+                             t-att-data-tooltip="'Download ' + file.name">
+                            <a t-att-href="getUrl(file.id)"
+                               aria-label="Download"
+                               style="cursor: zoom-in;" data-fancybox=""
+                               data-type="html5video" data-width="640"
+                               data-height="360">
+                                <span class="o_image o_hover"
+                                      t-att-data-mimetype="file.mimetype"
+                                      t-att-data-ext="ext" role="img"
+                                      t-attf-data-src="/web/content/{{file.id}}"/>
+                            </a>
+                        </div>
+                    </t>
+
+                    <div class="caption">
+                        <a class="ml4"
+                           t-att-data-tooltip="'Download ' + file.name"
+                           t-att-href="getUrl(file.id)">
+                            <t t-esc='file.name'/>
+                        </a>
+                    </div>
+                    <div class="caption small">
+                        <a class="ml4 small text-uppercase"
+                           t-att-href="getUrl(file.id)">
+                            <b>
+                                <t t-esc='ext'/>
+                            </b>
+                        </a>
+                        <div t-if="editable"
+                             class="progress o_attachment_progress_bar">
+                            <div class="progress-bar progress-bar-striped active"
+                                 style="width: 100%">Uploading
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="o_attachment_uploaded">
+                        <i class="text-success fa fa-check" role="img"
+                           aria-label="Uploaded" title="Uploaded"/>
+                    </div>
+                    <div t-if="editable" class="o_attachment_delete"
+                         t-on-click.stop="() => this.onFileRemove(file.id)">
+                        <span class="text-white" role="img" aria-label="Delete"
+                              title="Delete">×
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </t>
+</template>

many2many_attachment_preview/views/sale_order_views.xml

+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!--
+    This XML file inherits the sale order form view to add a new field,
+    `attachment_ids`, which uses the `many2many_attachment_preview` widget.
+    The new field is placed right after the `payment_term_id` field.
+    This customization allows users to preview attachments directly in the
+    sale order form.
+    -->
+    <record id="view_order_form" model="ir.ui.view">
+        <field name="name">
+            sale.order.view.form.inherit.many2many.attachment.preview
+        </field>
+        <field name="inherit_id" ref="sale.view_order_form"/>
+        <field name="model">sale.order</field>
+        <field name="arch" type="xml">
+            <field name="payment_term_id" position="after">
+                <field name="attachment_ids" widget="many2many_attachment_preview"/>
+            </field>
+        </field>
+    </record>
+</odoo>