自定义组件之crm的业务逻辑

Posted 2021-01-05 yb635238477

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自定义组件之crm的业务逻辑相关的知识，希望对你有一定的参考价值。

我们先在app01下的models中添加crm需要用的表。然后数据库迁移，要记得在app01下的stark将这几张表注册，不然不能进入访问后台。

录入数据之前，我们先来说几个知识点，

在models表中，有这样几个字段，

技术分享图片

一对多字段和多对多字段在使用modelform的时候，会在页面上渲染成select标签，而select标签会显示各自关联表下的所有数据，而 limit_choices_to={"depart_id__in":[100,101,]} 的作用就是限制选项，只显示{"depart_id__in":[100,101,]} 符合条件的选项。所以 limit_choices_to只有在使用modelform中使用。

还有一个知识点：get_gender_display()

在技术分享图片性别字段中，choices选项在数据库中存的是1，2.

但是我们需要显示的是男，女，就要用到get_gender_display()。

技术分享图片

然后录入数据，先录入department表的数据，然后录入userinfo表的数据。

然后我们访问classlist表，添加一些自定义的字段：

技术分享图片

同理在其他表中也添加一些我们想要的字段，

然后我们想在customer表中，显示性别，我们在list_display中加上gender这个字段，但是显示出来的是1 ，2，这个1，2是保存在数据库中的值，并不是我们想要的。

技术分享图片这是因为，model中的gender字段

技术分享图片，所以这就要我们通过自定义列来显示性别。

技术分享图片

然后我们想在customer表中添加一列，咨询课程，以a标签的形式显示，同样是自定义列：

技术分享图片

我们进入classstudyrecord表，现在有这样一个需求，就是在我们选中某个班时，就能够创建出这个班的学生学习相关信息。这就是一个批量操作。

技术分享图片

现在我们在classstudyrecord表中建一个自定义列，查看信息，当我们点击查看信息的时候，就跳转到相应的studentstudyrecord表中查看信息，

技术分享图片

我们进入StudentStudyRecord表，想要显示出勤和成绩的列还是要通过自定义列来显示自己想要的，

技术分享图片

这样写应该是不对的因为当我们访问这张表的时候，出勤和成绩是我们可以操作进行选择的，有两种方式，一种是批量操作，就是选中之后，批量对他们进行赋值，另一种是做成select标签的形式每一个都能进行选择。

我们先来写第一种：

技术分享图片

第二种，

技术分享图片

这就select标签就做成了，但是这样只实现了在页面中可以编辑，但是在数据库中并没有改动。接下来应该怎么做？

有两个思路：

技术分享图片

第一种是我们选中完出情况后，点击保存按钮然后保存到数据库中，另一种是当我们选中完一个就发送ajax请求将他保存到数据库中。这里发送ajax请求比较简单。

先来说发送ajax请求，我们发送ajax请求时的那个url怎么设计呢？当我们选中某个学生的出勤情况后向这个url发送请求 /stark/app01/studentstudyrecord/1/edit_record ，这是我们设计的一个新的url，我们只希望给studentstudyrecord表加这么一个url，别的表不加，应该怎么做。我们来学习一个额外创建url的方法。

我们在stark组件的sites文件中加上这么一个方法。

技术分享图片

然后我们再自定义配置类中添加extra_url方法：

技术分享图片

这样就单独给studentstudyrecord表添加了一个url。然后就是给出勤绑定ajax请求了，当我们鼠标选中的时候就在数据库中做更改操作，这是一个change事件。

那么这个ajax应该写在哪里？应该写在list.html中。

技术分享图片

在数据库的更改操作：

技术分享图片

另外一种方法我们在录入成绩的时候说。

接下来我们写录入成绩部分：

进入classstudyrecor表，我们要写一个录入成绩的自定义列，

技术分享图片

现在我们的需求是，当我们点击录入成绩，就能够进入相应的班级的学生学习记录进行录入成绩。

这就要我们有新的url了。我们想要把url设计成这样：/stark/app01/classstudyrecord/1/record_score/，所以这就又要我们创建新的url了，所以在classstudyrecord表中添加方法，

技术分享图片

接下来我们就来处理页面了，先来想一想页面中要显示哪些内容？

技术分享图片

接下来就是成绩的录入了，同样使用两种方式，一种是ajax，一种就是form进行提交。

第一种：ajax

技术分享图片

第二种：from表单，利用form表单，标签中就要有name。

当我们点击提交的时候，request.post会取nam对应的value值，

技术分享图片

但是这样会影响效率，因为每循环一次都要去数据库里面查一次，所以我们需要重新构建一下数据的结构。

技术分享图片

我们把数据构建成这样的，update数据库的时候，直接更新 {score:50,homework_note:12323} 多个字段就行了。

技术分享图片

这样就做好了。

上面说的这些都是我们管理员才有的权限，学生是没有的，但当我们学生查看成绩的时候，我们在student表中添加一个自定义列。

我们进入学生表，

技术分享图片

然后就是当我们点击查看成绩的时候，会出现这人的在这个班的每天的成绩情况，我们以柱状图的形式展现出来。这里用到了一个highcharts的工具，是专门用来作图的。

先下载，然后只需要将里面的code文件复制过来就行，然后再页面上引用。

当我们点击查看成绩的时候，发送ajax请求：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title" style="font-weight: bolder">{{ student_obj }}个人信息</h3>
                </div>
                <div class="panel-body"></div>
                        <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>班级名称</th>
                            <th>任课老师</th>
                            <th>班主任</th>
                            <th>查看成绩</th>
                        </tr>
                        </thead>
                        <tbody>
                            {% for clas in class_list %}
                                <tr>
                                    <th scope="row">{{ forloop.counter }}</th>
                                    <td>{{ clas }}</td>
                                    <td>{{ clas.tutor }}</td>
                                    {% for teacher in clas.teachers.all %}
                                        <td>{{ teacher }}</td>
                                    {% endfor %}
                                    <td><a sid=‘{{ student_obj.pk }}‘cid="{{ clas.pk }}" href="javascript:void(0)" class="score_chart">查看成绩</a></td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-md-4 col-md-offset-4" id="score_chart" style="width:600px;height:400px;"></div>
<script src="/static/code/highcharts.js"></script>
<script>
    $(‘.score_chart‘).click(function () {
        var cid = $(this).attr(‘cid‘);
        $.ajax({
            url:‘‘,
            type:‘get‘,
            data:{
                cid:cid,
            },
            success:function (data) {
                var chart = Highcharts.chart(‘score_chart‘, {
            chart: {
                type: ‘column‘
            },
            title: {
                text: ‘成绩‘
            },
            xAxis: {
                type: ‘category‘,
                labels: {
                    rotation: -45  // 设置轴标签旋转角度
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: ‘总分‘
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                pointFormat: ‘当天分数: <b>{point.y:.1f}分</b>‘
            },
            series: [{
                name: ‘总人口‘,
                data:data,
                dataLabels: {
                    enabled: true,
                    rotation: -90,
                    color: ‘#FFFFFF‘,
                    align: ‘right‘,
                    format: ‘{point.y:.1f}‘, // :.1f 为保留 1 位小数
                    y: 10
                }
            }]
        });
            }
        })

    })
</script>
</body>
</html>

技术分享图片

以上是关于自定义组件之crm的业务逻辑的主要内容，如果未能解决你的问题，请参考以下文章

SpringMvc 初体验之常用的组件与配置（四）

如何做好一个前端业务组件库