zoukankan      html  css  js  c++  java
  • Django实战1-权限管理功能实现-05:组织架构的添加

     

     

    组织架构主要是权限管理模块中人员的层级架构,可以是公司的组织结构、部分、小组等。

    1 新建组织架构功能实现

    1.1 组织架构模板页

    组织架构模板页,是管理组织架构,对组织架构进行增、改、删、查操作时用户所访问的页面。
    1、新建文件夹sandboxMP/templates/system/structure用来存放组织架构相关的所有模板
    2、复制sandboxMP/templates/index.html到刚创建的structure目录,重命名为structure.html
    3、打开刚复制的structure.html文件,添加代码中的汉字内容:

    {% block content %}
    
        <!-- Main content -->
      <section class="content">
    
        组织架构页:文字部分是新增内容,这里是组织架构的基础页面,有关组织架构的操作查询都是在这里完成的。
      </section>
    
        <!-- /.content -->
    
    {% endblock %}

    1.2 组织架构基础视图

    1、新建文件sandboxMP/apps/system/views_structure.py,有关组织架构的所有操作视图都在views_structure.py中定义。
    2、在刚创建的views_structure.py文件中定义组织架构基础视图:

    from django.views.generic.base import TemplateView
    
    from .mixin import LoginRequiredMixin
    
    
    class StructureView(LoginRequiredMixin, TemplateView):
    
        template_name = 'system/structure/structure.html'
    

    1.3 组织架构访问URL

    修改sandboxMP/apps/system/urls.py , 添加下面内容:

    from . import views_structure
    
    app_name = 'system'
    
    urlpatterns = [
        '''原有内容省略'
        path('basic/structure/', views_structure.StructureView.as_view(), name='basic-structure'),
    ]
    

    运行项目,就可以访问组织架构页面了 http://127.0.0.1:8000/system/basic/structure/

    2 添加组织架构功能实现

    2.1 组织架构的添加视图

    添加视图实现的功能有:渲染一个添加页面,接收添加页面提交的数据并保存到数据库
    1、修改sandboxMP/apps/system/forms.py,添加如下内容:

    from .models import Structure
    
    class StructureForm(forms.ModelForm):
        class Meta:
            model = Structure
            fields = ['type', 'name', 'parent']
    

    2、修改sandboxMP/apps/system/views_structure.py,新增如下内容:

    import json
    
    from django.views.generic.base import View
    from django.shortcuts import render
    from django.shortcuts import HttpResponse
    
    from .models import Structure
    from .forms import StructureForm
    
    
    class StructureCreateView(LoginRequiredMixin, View):
    
        def get(self, request):
            ret = dict(structure_all=Structure.objects.all())
            return render(request, 'system/structure/structure_create.html', ret)
    
        def post(self, request):
            res = dict(result=False)
            structure = Structure()
            structure_form = StructureForm(request.POST, instance=structure)
            if structure_form.is_valid():
                structure_form.save()
                res['result'] = True
            return HttpResponse(json.dumps(res), content_type='application/json')
    

    2.2 组织架构添加功能的URL配置:

    修改sandboxMP/apps/system/urls.py, 在urlpatterns中添加新的内容:

    urlpatterns = [
        '''原有内容省略'''
        path('basic/structure/create/', views_structure.StructureCreateView.as_view(), name='basic-structure-create'),
    ]
    

    2.3 组织架构的添加页模板

    组织架构的添加页,是一个弹窗页面,继承了sandboxMP/templates/base_layer.html,页面效果:

    1、在sandboxMP/templates/system/structure目录中新建组织架构的添加模板:structure_create.html
    2、删除structure_create.html原有内容,添加下面内容:

    {% extends 'base-layer.html' %}
    {% load staticfiles %}
    
    {% block css %}
        <link rel="stylesheet" href="{% static 'js/plugins/layer/skin/layer.css' %}">
    {% endblock %}
    
    {% block main %}
        <div class="box box-danger">
            <form class="form-horizontal" id="addForm" method="post">
                {% csrf_token %}
                <div class="box-body">
                    <fieldset>
                        <legend>
                            <h4>组织架构信息</h4>
                        </legend>
                        <div class="form-group has-feedback">
                            <label class="col-sm-2 control-label">名称</label>
                            <div class="col-sm-3">
                                <input class="form-control" name="name" type="text" />
                            </div>
                            <label class="col-sm-2 control-label">类别</label>
                            <div class="col-sm-3">
                                <select class="form-control" name="type">
                                    <option value="unit">单位</option>
                                    <option value="department">部门</option>
                                </select>
                            </div>
    
                        </div>
    
                        <div class="form-group has-feedback">
                            <label class="col-sm-2 control-label">所属</label>
                            <div class="col-sm-3">
                                <select class="form-control" name="parent">
                                    <option></option>
                                    {% for stru in structure_all %}
                                        <option value={{ stru.id }}> {{ stru.name }} </option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </fieldset>
    
                </div>
                <div class="box-footer ">
                    <div class="row span7 text-center ">
                        <button type="button" id="btnCancel" class="btn btn-default margin-right ">重置</button>
                        <button type="button" id="btnSave" class="btn btn-info margin-right ">保存</button>
                    </div>
                </div>
    
            </form>
        </div>
    
    {% endblock %}
    
    {% block javascripts %}
        <script type="text/javascript">
    
            $("#btnSave").click(function () {
                var data = $("#addForm").serialize();
                $.ajax({
                    type: $("#addForm").attr('method'),
                    url: "{% url 'system:basic-structure-create' %}",
                    data: data,
                    cache: false,
                    success: function (msg) {
                        if (msg.result) {
                            layer.alert('数据保存成功!', {icon: 1}, function (index) {
                                parent.layer.closeAll(); //关闭所有弹窗
                            });
                        } else {
                            layer.alert('数据保存失败', {icon: 5});
                            //$('errorMessage').html(msg.message)
                        }
                        return;
                    }
                });
            });
    
    
            /*点取消刷新新页面*/
            $("#btnCancel").click(function () {
                window.location.reload();
    
            });
    
        </script>
    
    {% endblock %}

    完成上面配置,运行项目,就可以访问组织架构的添加页面了:http://127.0.0.1:8000/system/basic/structure/create/

    2.4 创建添加按钮

    接下来我们需要在组织架构的管理页面添加一个按钮,通过按钮来调用添加页面,完成数据的添加操作。
    1、修改sandboxMP/templates/system/structure.html,删除section标签中原来写的临时文字,添加新的内容:

    <!-- 以下内容添加到<section class="content">标签下 -->
    <div id="devlist">
        <div class="box box-primary" id="liebiao">
            <div class="box-header">
                <div class="btn-group pull-left">
                    <button type="button" id="btnCreate" class="btn btn-default">
                        <i class="glyphicon glyphicon-plus"></i>新增
                    </button>
    
                </div>
                <div class="btn-group pull-left">&nbsp</div>
                <div class="btn-group pull-left">
                    <button type="button" id="btnDelete" class="btn btn-default">
                        <i class="glyphicon glyphicon-trash"></i>删除
                    </button>
                </div>
            </div>
            <div class="box-body">
                <table id="dtbList" class="display" cellspacing="0" width="100%">
                    <thead>
                    <tr valign="middle">
                        <th><input type="checkbox" id="checkAll"></th>
                        <th>ID</th>
                        <th>名称</th>
                        <th>类别</th>
                        <th>所属</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <br> <br>
            </div>
        </div>
    </div>
    

    访问:http://127.0.0.1:8000/system/basic/structure/ 就可以看到组织架构管理页面上多出了两个按钮和表头。 

    2.5 为按钮绑定事件

    实现效果:点击【新增】按钮,弹出组织架构添加窗口,输入信息后保存数据,返回保存结果。这里使用了一个jQuery弹窗插件:layer (https://layer.layui.com/)
    1、修改sandboxMP/templates/system/structure.html,在{% load staticfiles %}标签后面添加下面内容:

    <!-- 引用layer样式文件 -->
    {% block css %}
        <link rel="stylesheet" href="{% static 'js/plugins/layer/skin/layer.css' %}">
    {% endblock %}

    2、修改sandboxMP/templates/system/structure.html,在{% block javascripts %}{% endblock %}标签中添加下面内容:

    <script src="{% static 'js/plugins/layer/layer.js' %}"></script>
    
    <script type="text/javascript">
        $("#btnCreate").click(function () {
            layer.open({
                type: 2,
                title: '新增',
                shadeClose: false,
                maxmin: true,
                area: ['800px', '400px'],
                content: "{% url 'system:basic-structure-create' %}",
                end: function () {
    
                }
            });
        });
    </script>
    

    通过上面操作,我们引用了layer的css文件和js文件,并通过按钮id (btnCreate)为按钮绑定了弹窗事件,调用添加页面,访问:http://127.0.0.1:8000/system/basic/structure/ , 点击【新增】按钮,效果如下:

    输入组织架构数据,点击保存,数据将被保存到数据库中。

    2.6 安装Navicat

    本节开始需要多数据库操作了,为了方便查看数据库中的数据可以安装一个Navicat客户端,安装文件下载地址

    链接:https://pan.baidu.com/s/1fvUBE9d8C-0lv9ClZmM0_Q 
    提取码:g35w
    

    1、安装完成后,打开 Navicat软件,依次选择【文件】→ 【新建连接】→ 【SQLite】,在弹出窗口输入连接名称,类型选择【现有的数据库文件】, 数据库文

    件路径选择项目中的db.sqlite3,点击【确定】

    2、在Navicat客户端窗口左侧双击刚刚添加的数据库【sandboxMP】,双击【main】后在右侧窗口就可以看到项目的数据表,打开system_structure表,就可以看到我们添加的数据:

    作者:james

    -------------------------------------------

    个性签名:独学而无友,则孤陋而寡闻。做一个灵魂有趣的人!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,博主在此感谢!

  • 相关阅读:
    use imagination
    tar
    简单抓取安居客房产数据,并保存到Oracle数据库
    svn的安装(整合apache、ldap)包括错误解决post commit FS processing had error
    SVN安装中遇到的问题
    Linux环境源码编译安装SVN
    [转]SVN安装问题The Apache Portable Runtime (APR) library cannot be found
    深入浅出数据分析-脑图
    Python3.5在Windows 7下连接ORACLE数据库
    Python3.5之TuShare
  • 原文地址:https://www.cnblogs.com/jameslove/p/10988311.html
Copyright © 2011-2022 走看看