Django combat 1- rights management features -05: add organizational structure

 

 

The main organization is the hierarchy of rights management module, staff, it may be the company's organizational structure, division, team, and so on.

1 new organizational structure functions to achieve

1.1 Organizational Structure template page

Organizational structure template page, is to manage the organizational structure, organizational structure to add, change, delete, search operation when the page accessed by the user.
1, the new folder sandboxMP / templates / system / structure used to store all the templates organizational structure related
2, copy sandboxMP / templates / index.html to the directory structure just created, rename structure.html
3, open just copied structure.html file, add the contents of the code characters:

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

1.2 Organization view basis

1, the new document sandboxMP / apps / system / views_structure.py, view all operations related to the organizational structure are defined in views_structure.py in.
2. Define the organizational structure in the base view views_structure.py file you just created:

from django.views.generic.base import TemplateView

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

1.3 Organizational Structure Access URL

Modify sandboxMP / apps / system / urls.py, add the following elements:

from . import views_structure

app_name = 'system'

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

Run the project, you can access the organizational structure of the page http://127.0.0.1:8000/system/basic/structure/

2 add functions to achieve organizational structure

Add View 2.1 organizational structure

Adding functional view are implemented: adding a rendered page, the page is submitted to add data received and stored in the database
1, modified sandboxMP / apps / system / forms.py, add the following:

from .models import Structure

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

2, modify sandboxMP / apps / system / views_structure.py, add the following:

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 organizational structure to add functionality configuration:

Modify sandboxMP / apps / system / urls.py, add new content in urlpatterns in:

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

2.3 Organizational Structure of the Add Page Templates

Add Page organization, is a pop page, inherited sandboxMP / templates / base_layer.html, the results page:

1, the new organizational structure in sandboxMP / templates / system / structure Contents Add template: structure_create.html
2, delete structure_create.html original content, add the following content:

{% 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 %}

Completion of the above configuration, run the project, you can access the organizational structure of the page to add: http://127.0.0.1:8000/system/basic/structure/create/

2.4 Creating the Add button

Next we need to add a button to the organization's management page, add pages to call a button, the process of adding data.
1, modify sandboxMP / templates / system / structure.html, delete the temporary label text section originally wrote, adding new content:

<!-- 以下内容添加到<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> 

Access: http://127.0.0.1:8000/system/basic/structure/ you can see on the Organization Management page more out of two buttons and a header. 

2.5 binding events for a button

Achieve results: Click [Add] button, pop-up window to add the organizational structure, save data input information, return to save the results. Here a pop jQuery plugin: Layer ( https://layer.layui.com/ )
. 1, modified sandboxMP / templates / system / structure.html, the {% load staticfiles%} behind the label and add the following contents:

<!-- 引用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表,就可以看到我们添加的数据:

 

Guess you like

Origin www.cnblogs.com/jameslove/p/10988311.html