Odoo前端之在Tree视图添加自定义小标记

Odoo14前端框架之在Tree视图添加自定义小标记

---

前言

在开发Odoo时，有时候需要修改前端显示的页面内容。我现在在做的项目有个需求是在Odoo中新建一条数据时，需要在Tree视图中将其标记为新建数据，标记的时间范围是24小时内为新建数据。具体实现效果看图。

具体实现思路是，查看Odoo渲染Tree视图的JS，然后继承过来添加自己的内容进去。时间上的判断使用的是Odoo创建模型时自动创建的create_date字段，然后这个字段需要在Tree视图上写出来，可以根据需求隐藏。

---

提示：以下是本篇文章正文内容，下面案例可供参考

JS代码

console.log('list_view.js');
odoo.define('new_tag_in_tree.ListNumber', function (require) {
"use strict";
var core = require('web.core');
var ListRenderer = require('web.ListRenderer');
var _t = core._t;

ListRenderer.include({
	_getNumberOfCols: function () {
		var columns = this._super();
        console.log('_getNumberOfCols');
		columns +=1;
		return columns;
    },
    _renderFooter: function (isGrouped) {
        console.log('_renderFooter');
    	var $footer = this._super(isGrouped);
    	$footer.find("tr").prepend($('<td>'));
    	return $footer;
    },
    _renderGroupRow: function (group, groupLevel) {
        var $row =  this._super(group, groupLevel);
        console.log('_renderGroupRow');
        if (this.mode !== 'edit' || this.hasSelectors){
        	$row.find("th.o_group_name").after($('<td>'));
        }
        return $row;
    },
    _renderGroups: function (data, groupLevel) {
    	var self = this;
    	var _self = this;
        console.log('_renderGroups');
    	groupLevel = groupLevel || 0;
        var result = [];
        var $tbody = $('<tbody>');
        _.each(data, function (group) {
            console.log('tbody');
            if (!$tbody) {
                $tbody = $('<tbody>');
            }
            $tbody.append(self._renderGroupRow(group, groupLevel));
            if (group.data.length) {
                
                result.push($tbody);
                // render an opened group
                if (group.groupedBy.length) {
                    // the opened group contains subgroups
                    result = result.concat(self._renderGroups(group.data, groupLevel + 1));
                } else {
                    // the opened group contains records
                    var $records = _.map(group.data, function (record,index) {
                    	//Nilesh
                    	if (_self.mode !== 'edit' || _self.hasSelectors){
                    		return self._renderRow(record).prepend("<td class='o_list_record_selector'><img class='new_tag' src='/new_tag_in_tree/static/src/img/new.gif' /></td>");
                    	}
                    	else{
                    		return self._renderRow(record);
                    	}
                    	
                    });
                    result.push($('<tbody>').append($records));
                }
                $tbody = null;
            }
        });
        if ($tbody) {
            result.push($tbody);
        }
        return result;
    },
    _renderHeader: function (isGrouped) {
        console.log('_renderHeader');
    	var $header = this._super(isGrouped);
    	if (this.hasSelectors) {
    		$header.find("th.o_list_record_selector").before($('<th class="o_list_row_number_header o_list_row_count_sheliya">').html(' '));
    		var advance_search = $header.find("tr.advance_search_row")
    		if(advance_search.length && advance_search.find('td.o_list_row_number_header').length==0){    			
    			advance_search.prepend($('<td class="o_list_row_number_header">').html('&nbsp;'));
    		}
        }
    	else{
    		if (this.mode !== 'edit'){
    			$header.find("tr").prepend($("<th class='o_list_row_number_header o_list_row_count_sheliya'>").html(' '));
    		}
    	}
    	//$header.find("tr").prepend($('<th>').html('#'));
    	return $header;
    },
    _renderRow: function (record) {
        console.log('_renderRow');
        // console.log(record.data.create_date);
        // console.log(this.mode)
        var today = new Date();

    	var $row = this._super(record);
    	if (this.mode !== 'edit' && this.state.groupedBy.length==0){
	    	var index = this.state.data.findIndex(function(e){return record.id===e.id})
            if(record.data.create_date == undefined || today - new Date(record.data.create_date) > 86400000){
                console.log('超过一天或create_date不存在');
                if (index!==-1){
                    $row.prepend("<td class='o_list_record_selector'><img class='new_tag' src='' /></td>");
                }
            }else{
                console.log('未超过一天')
                if (index!==-1){
                    $row.prepend("<td class='o_list_record_selector'><img class='new_tag' src='/new_tag_in_tree/static/src/img/new.gif' /></td>");
                }
            }
	    	
    	}
    	return $row;
    	
    },
    
}); 

});

可以看到，大部分都是Odoo里web.ListRenderer的代码，我们主要改的是渲染行的_renderRow方法。

优化一下显示效果

.o_list_row_count_sheliya {
 	width: 20px;
    padding-left: 10px !important;
    text-align: center;    
}

.o_list_view .o_list_table .o_list_record_selector {
    width: 30px !important;
    padding-left: 0.3rem !important;
}

引入资源到Odoo

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>
    	<template id="assets_backend" name="rowno_in_tree assets" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">
            	<link rel="stylesheet" href="/new_tag_in_tree/static/src/scss/list_view.scss" />
            	<script type="text/javascript" src="/new_tag_in_tree/static/src/js/list_view.js"></script>
            </xpath> 
        </template>
    </data>
</odoo>

---

完毕