本文示例代碼可查看github倉庫：odoo13_file_preview
檔案預覽效果圖展示
效果描述：
- 1.當點擊圖片或者檔案時展開圖片，
- 2.當點擊關閉按鈕時關閉圖片預覽，
- 3.當點擊下載按鈕時，下載檔案，
缺點：
- 當預覽圖片大小超過1000px的時候，不會動態變小；
- 點擊查看一個檔案，當點擊另一個檔案時，上一個檔案不會自動關閉，
圖片預覽效果圖
pdf預覽效果圖
檔案預覽實作
撰寫base.xml
base.xml檔案用來實作檔案的上傳及洗掉操作
在static/base.xml中添加如下內容
<template> <div t-name="PdcDocument.files" class="o_attachments" aria-atomic="true"> <!-- uploaded files --> <t t-foreach="widget.value.data" t-as="file"> <t t-if="!file.data.upload" t-call="PdcDocument.attachment_preview"/> </t> <!-- uploading files --> <t t-foreach="widget.uploadingFiles" t-as="file"> <t t-set="upload" t-value="true"/> <t t-call="PdcDocument.attachment_preview"/> </t> </div> <t t-name="PdcDocument.attachment_preview"> <t t-set="url" t-value="widget.metadata[file.id] ? widget.metadata[file.id].url : false"/> <t t-if="file.data" t-set="file" t-value="file.data"/> <t t-set="editable" t-value="widget.mode === 'edit'"/> <t t-if="file.mimetype" t-set="mimetype" t-value="file.mimetype"/> <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="file.name.replace(/^.*\./, '')"/> <div class="o_image_box float-left" t-att-data-id="file.id"> <div t-att-title="'Download ' + file.name" aria-label="Download"> <span class="o_image o_hover" t-att-data-id="FileId" t-att-data-mimetype="mimetype" t-att-data-ext="ext" role="img"/> </div> </div> <div class="caption"> <a class="ml4" t-att-href="url" t-att-title="'Download ' + file.name"> <t t-esc='file.name'/> </a> </div> <div class="caption small"> <div class="ml4 small text-uppercase" t-att-title="'Download ' + file.name"> <b> <t t-esc='ext'/> </b> </div> <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 t-if="editable" 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-att-data-id="file.id"> <span class="text-white" role="img" aria-label="Delete" title="Delete">×</span> </div> </div> </div> </t> </template>base.xml
撰寫js檔案
js檔案用來對資料進行處理
static/js/file_preview.js
odoo.define("Upload_skim_pdf", function (require) {
"use strict";
var AbstractField = require("web.AbstractField");
var field_registry = require("web.field_registry");
var core = require('web.core');
var qweb = core.qweb;
var Upload_skim_pdf = AbstractField.extend({
template: "FieldBinaryFileUploader",
template_files: "PdcDocument.files",
supportedFieldTypes: ['many2many'],
fieldsToFetch: {
name: { type: 'char' },
mimetype: { type: 'char' },
},
events: {
'click .o_attach': '_onAttach',
'click .o_attachment_delete': '_onDelete',
'change .o_input_file': '_onFileChanged',
'click .o_image_box': '_onFilePDF',
'click .pdc_close' : '_onclosePDF',
},
/**
* @constructor
*/
init: function () {
this._super.apply(this, arguments);
if (this.field.type !== 'many2many' || this.field.relation !== 'ir.attachment') {
var msg = _t("The type of the field '%s' must be a many2many field with a relation to 'ir.attachment' model.");
throw _.str.sprintf(msg, this.field.string);
}
this.uploadedFiles = {};
this.uploadingFiles = [];
this.fileupload_id = _.uniqueId('oe_fileupload_temp');
$(window).on(this.fileupload_id, this._onFileLoaded.bind(this));
this.metadata =https://www.cnblogs.com/yifchan/p/ {};
},
destroy: function () {
this._super();
$(window).off(this.fileupload_id);
},
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
_getFileId: function (attachment) {
return attachment.id
},
_getId: function (attachment) {
return attachment.attributes[1].value
},
_generatedMetadata: function () {
var self = this;
_.each(this.value.data, function (record) {
// tagging `allowUnlink` ascertains if the attachment was user
// uploaded or was an existing or system generated attachment
self.metadata[record.id] = {
allowUnlink: self.uploadedFiles[record.data.id] || false,
FileId: self._getFileId(record.data)
};
});
},
_render: function () {
// render the attachments ; as the attachments will changes after each
// _setValue, we put the rendering here to ensure they will be updated
console.log("test123");
this._generatedMetadata();
this.$('.oe_placeholder_files, .o_attachments')
.replaceWith($(qweb.render(this.template_files, {
widget: this,
})));
this.$('.oe_fileupload').show();
// display image thumbnail
this.$('.o_image[data-mimetype^="image"]').each(function () {
var $img = $(this);
if (/gif|jpe|jpg|png/.test($img.data('mimetype')) && $img.data('src')) {
$img.css('background-image', "url('" + $img.data('src') + "')");
}
});
},
_onAttach: function () {
// This widget uses a hidden form to upload files. Clicking on 'Attach'
// will simulate a click on the related input.
this.$('.o_input_file').click();
},
_onclosePDF: function () {
console.log(this.$el.find('.zPDF_iframe').remove());
console.log('111111');
},
_onDelete: function (ev) {
ev.preventDefault();
ev.stopPropagation();
var fileID = $(ev.currentTarget).data('id');
var record = _.findWhere(this.value.data, { res_id: fileID });
if (record) {
this._setValue({
operation: 'FORGET',
ids: [record.id],
});
var metadata = https://www.cnblogs.com/yifchan/p/this.metadata[record.id];
if (!metadata || metadata.allowUnlink) {
this._rpc({
model: 'ir.attachment',
method: 'unlink',
args: [record.res_id],
});
}
}
},
_onFileChanged: function (ev) {
var self = this;
ev.stopPropagation();
var files = ev.target.files;
var attachment_ids = this.value.res_ids;
// Don't create an attachment if the upload window is cancelled.
if (files.length === 0)
return;
_.each(files, function (file) {
var record = _.find(self.value.data, function (attachment) {
return attachment.data.name === file.name;
});
if (record) {
var metadata =https://www.cnblogs.com/yifchan/p/ self.metadata[record.id];
if (!metadata || metadata.allowUnlink) {
// there is a existing attachment with the same name so we
// replace it
attachment_ids = _.without(attachment_ids, record.res_id);
self._rpc({
model: 'ir.attachment',
method: 'unlink',
args: [record.res_id],
});
}
}
self.uploadingFiles.push(file);
});
this._setValue({
operation: 'REPLACE_WITH',
ids: attachment_ids,
});
this.$('form.o_form_binary_form').submit();
this.$('.oe_fileupload').hide();
ev.target.value = "";
},
_onFileLoaded: function () {
var self = this;
// the first argument isn't a file but the jQuery.Event
var files = Array.prototype.slice.call(arguments, 1);
// files has been uploaded, clear uploading
this.uploadingFiles = [];
var attachment_ids = this.value.res_ids;
_.each(files, function (file) {
if (file.error) {
self.do_warn(_t('Uploading Error'), file.error);
} else {
attachment_ids.push(file.id);
self.uploadedFiles[file.id] = true;
}
});
this._setValue({
operation: 'REPLACE_WITH',
ids: attachment_ids,
});
},
_onFilePDF: function (ev) {
var self = this;
var fieldId = self._getId(ev.currentTarget);
self.$el.append(`
<div >
<div >關閉</div>
<div ><a href="https://www.cnblogs.com/web/content/${fieldId}?download=true" style="text-decoration: none; color: white">下載</a></div><br>
<iframe scrolling="no" id="main" name="main" frameborder="0" style="min-height:600px;width:1000px;height:100%;" src="https://www.cnblogs.com/web/content/${fieldId}"></iframe>
</div>
`)
}
});
field_registry.add("Upload_skim_pdf", Upload_skim_pdf);
return Upload_skim_pdf
});
file_preview.js
引入js檔案
在views/import_js.xml檔案中添加如下內容
<?xml version="1.0" encoding="utf-8"?> <odoo> <template id="assets_backend" name="file_preview_tpl" inherit_id="web.assets_backend"> <xpath expr="." position="inside"> <script src="/file_preview/static/js/file_preview.js" /> </xpath> </template> </odoo>
同時，記得在__mainfest__.py檔案中引入上述檔案
'data': [ 'views/import_src.xml', ], 'qweb': [ "static/base.xml" ],
至此，即可在odoo中完成一個自定義widget，接下來只要使用定義的widget即可，
檔案預覽widget的使用
在form視圖中使用widget示例代碼
<record id="file_preview_view_form" model="ir.ui.view"> <field name="name">file.preview.form</field> <field name="model">file.preview</field> <field name="arch" type="xml"> <form string="檔案預覽"> <sheet> <group> <field name="name"/> </group> <notebook> <page string="圖片"> <field name="img_ids" widget="Upload_skim_pdf" /> </page> <page string="附件"> <field name="attachment_ids" widget="Upload_skim_pdf" /> </page> </notebook> </sheet> </form> </field> </record>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/67451.html
標籤：Python
上一篇：Python 變數