xadmin后台关联多对多属性ManyToManyField优化BUG完整记录

FLYING CRM实际项目中，有个需求，当我们新建一个合同的时候，由于当前合同里的定制需求相对较为复杂，而且同一合同可能会由多个同事共同参与，如果在合同进行中，每一个时段，负责的同事都会记录他所属阶段的一些事项记录，就需要对当前合同进行跟进记录，便于后续追溯，此时只要在合同管理里面增加一个多对多的字段，就能解决这个问题。

需求界面：

项目如下图所示：

按原来的操作方式大概就是，我们正常新建一个合同，保存之后。再【跟进管理】栏目里，去新建一个跟进，把这个跟进记录和这个合同进行关联，同时还要将这个跟进记录和合同的签约公司客户资料关联，方便我们后续无论是通过合同反查，或者客户反查，都能很快找到合同和客户的详细跟进记录，但是这样一来，需要填写和操作的步骤就比较多，一但定单较多，每天销售人员的工作量就会递增，十分影响工作效率。

通过和销售人员沟通，如果我们在新建这个合同的时候，同时就在里面新建一个跟进记录，这个跟进记录就直接关联当前新建的合同，和签约的客户，最后保存合同的时候，就相当于直接建立了合同与客户和跟进记录的三方关联，可谓是一步到位了。以上案例就是根据这些要求开发的，但是，问题来了！

如上面三个图，我们直接正常添加合同，添加跟进，保存合同。OK，回到合同管理，合同确实是关联了这个跟进记录， 跟进记录也可以反查到合同，但是跟进记录里，并没有关联到客户，也就是如果我从客户管理界面去反查，这个客户有哪些跟进的记录，是没有这个跟进记录的，相当于是一个空的跟进记录（只是跟进和合同之间有关联），试了多次发现一个BUG，有时候添加，是能三方关联的，多数时候是关联不了的。看下图：

如果直接从跟进管理里面新建一个跟进记录，并选择关联客户，就不会有这个问题，但是我们明明在【合同管理】里面新建跟进记录时，也是选择了关联客户的，为什么从这里添加的跟进记录，提交之后就丢失了关联客户了呢？？？带着这个大问号，经过3天的不断测试，终于找到解决的办法了！

直接从跟进记录里，选择关联客户并提交成功之后，系统会直接把关联客户里的OPTION的值，加上SELECTED，貌似在提交的时候增加上去了才提交的，所以就能关联上。但是从合同记录里通过浮窗添加的，就不会自动添加这个OPTION里的VALUE值的SELECTED，就会导致提交后识别不到这个关联的值，上面说过之前提交的时候，有时候能关联上，有时候关联不上，是因为我们提交的时候，点了一下这个OPTION选项框，就是这样点过之后，提交就有这个值了，能正常关联，直接选择，但是没有点它，就相当于没有关联上（虽然看着值已经填上去了），这就比较头疼了，因为合同管理里有很多比如关联产品颜色、工艺这些，只要选中，不需要额外去点击一下，就能成功关联。

总之，找到问题点，直接给他强行通过APPEND给他加上代码，就不用手去点它了，只要我们在这里获取到当前合同关联客户的名称、和ID号，就直接将这两个值，加到这个跟进记录的OPTION里，直接提交，就能完美解决这个关联问题了。我们不用从左边搜索，再点击搜索到的值，让它到右边的框里，再在右边的框里再点一下。。。要四步才能实现，现在我们直接通过双击下面的跟进记录这个框，就能直接完成搜索、选择中，添加到右侧，再选中这四个步骤。

这时候进行正常操作，完美解决所有问题。下面放一些相关代码参考。

model.py里的合同管理模块，合适位置添加这句：

#增加一个针对当前客户的跟进管理 2025年5月9日 11:11:55
related_genjin = models.ManyToManyField(Genjin_admin, verbose_name='跟进管理',null=True, blank=True, symmetrical=True)

adminx.py里的合同管理版块，添加这句，实现多对多的选择框：

style_fields = {'related_genjin': 'm2m_transfer','related_customer': 'm2m_transfer','related_product': 'm2m_transfer'}

还是adminx.py里的合同管理版块，往下面一点合适位置添加这句，这样会在后台合同管理的页面里，添加一个JS文件： xadmin.list.genjin.js

    def get_media(self):
            # media is the parent's return value (modified by any plugins)
            media = super(hetongguanli, self).get_media() + self.vendor('xadmin.page.list.js', 'xadmin.page.form.js')
            # if self.list_display_links_details:
            #     media += self.vendor('xadmin.plugin.details.js', 'xadmin.form.css')
     
            # xadmin.list.xxx.js是自己写的js脚本
            media += self.vendor('xadmin.list.genjin.js', 'xadmin.form.css')
            return media

xadmin.list.genjin.js文件内容如下：

//在跟进管理中,点击这个框,自动填写关联客户名称 2025年5月10日 16:14:10
//自动填写跟进编号 开始 双击自动填写跟进编号
//个位数补0，让年月日时分秒个位数时前面补个零占位 2024年1月5日, PM 02:18:42
function getZero(num){
      // 单数前面加0
      if (parseInt(num) < 10) {
        num = '0' + num;
      }
      return num;
    }
//定义时间戳 获取当前系统时间的时间戳
var timestamp = new Date().getTime() ; 
//将时间戳转化成Date对象
var date = new Date(timestamp);
//日期格式化
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
//拼接日期格式
var datetime2 = "GJ" + year + this.getZero(month) +  this.getZero(day) + this.getZero(hour) +  this.getZero(minute);
$(function(){
    $('#id_genjinmingcheng').on("dblclick", function(){
        $("#id_genjinmingcheng").val(datetime2);
        });
    })
////自动填写跟进编号 结束 双击自动填写跟进编号
//只有在合同管理里添加，这里才有效，直接添加跟进这里是没有作用的
$(document).ready(function() {
    $("#id_guanlian_kehu_name").dblclick(function() {
        //$(this).css("background-color", "yellow"); // 改变背景色
        //alert("双击事件触发1！"); // 显示一个消息
        //alert("双击事件触发2！"); // 显示一个消息
        khmc = $('#id_related_customer').text();
        khmcclear=khmc.replace(/^\s+|\s+$/g,'');
        
        $('#id_guanlian_kehu_name').val(khmcclear);
        //alert("双击事件触发3！"); // 显示一个消息    
        //$('#id_related_customer_input').val("HELLO,WORLD");
        //alert("双击事件触发4！"); // 显示一个消息            
    });
});
$(document).ready(function() {
    $("#id_guanlian_kehu_id").dblclick(function() {
        //$(this).css("background-color", "green"); // 改变背景色
        //alert("双击事件触发1！"); // 显示一个消息
        //alert("双击事件触发2！"); // 显示一个消息
        khid = $('#id_related_customer option:first').val();
        khidclear=khid.replace(/^\s+|\s+$/g,'');        
        $('#id_guanlian_kehu_id').val(khidclear);
        //alert("双击事件触发3！"); // 显示一个消息    
        //$('#id_related_customer_input').val("HELLO,WORLD");
        //alert("双击事件触发4！"); // 显示一个消息            
    });
});
$(document).ready(function() {
    $("#id_genjinfangshi").dblclick(function() {
        //$(this).css("background-color", "red"); // 改变背景色
        //alert("双击事件触发1！"); // 显示一个消息
        //客户名称
       khmc = $('#id_related_customer').text();
       khmcclear=khmc.replace(/^\s+|\s+$/g,'');

        //客户ID号
       khid = $('#id_related_customer option:first').val();
       khidclear=khid.replace(/^\s+|\s+$/g,'');        
       $('#id_guanlian_kehu').append('<option value="'+khidclear+'" selected>'+khmcclear+'</option>'); 
        //alert("自动选择客户OK！"); // 显示一个消息    
    });
});

把上面代码保存为.JS文件后缀的文件，通过FTP上传到后台对应的JS文件位置。OK，核心功能和BUG完美避开，同样的这个方法，对这种多对多的项目二次开发，如鱼得水！

我是FLYING，从事编程15年，喜欢各种开发和优化，如有相关需求，欢迎联系合作哦。