Django实战1权限管理功能实现09：组织架构关联用户

实现组织架构和用户绑定，通过绑定按钮设置组织架构和用户之间一对多的关联关系。

1 关联用户

1.1 关联用户的视图实现

打开sandboxMP/apps/system/views_structure.py，添加如下内容：

from django.contrib.auth import get_user_model
User = get_user_model()

class Structure2UserView(LoginRequiredMixin, View):

    def get(self, request):
        if 'id' in request.GET and request.GET['id']:
           # 通过id获取需要绑定用户的组织架构实例
            structure = get_object_or_404(Structure, pk=int(request.GET['id']))
           # 通过外键的反向查找（_set），找到已经绑定到该组织架构的所有用户信息
            added_users = structure.userprofile_set.all()
           # 查找系统中所有用户信息，User = get_user_object()使用自定义用户模型都是通过这种模式
            all_users = User.objects.all()
           # 通集合获取差集set().difference()，得出还未绑定的用户
            un_add_users = set(all_users).difference(added_users)
           # 将这些数据返回给前端，用来渲染数据，形成一个复选框，左边是未绑定用户，右边是已经绑定的用户
            ret = dict(structure=structure, added_users=added_users, un_add_users=list(un_add_users))
        return render(request, 'system/structure/structure_user.html', ret)

    def post(self, request):
        res = dict(result=False)
        id_list = None
        # 通过id获取structure实列
        structure = get_object_or_404(Structure, pk=int(request.POST['id']))
        # 获取需要绑定到structure实例的用户id
        if 'to' in request.POST and request.POST.getlist('to', []):
            id_list = map(int, request.POST.getlist('to', []))
        # 清空组织架构原有用户绑定信息    
        structure.userprofile_set.clear()
        if id_list:
            # 绑定新的用户数据
            for user in User.objects.filter(id__in=id_list):
                structure.userprofile_set.add(user)
        res['result'] = True
        return HttpResponse(json.dumps(res), content_type='application/json')

视图实现思路：参照代码中的注释。

1.2 关联用户URL配置

打开sandboxMP/apps/system/urls.py, 新增URL配置：

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

1.3 新增用户关联的模板页

新建sandboxMP/templates/system/structure/structure_user.html，内容如下：

{% extends 'base-layer.html' %}
{% load staticfiles %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/select2/select2.min.css' %}">
{% endblock %}
{% block main %}
    <div class="box box-danger">
        <form class="form-horizontal" id="selectUsersForm" action="" method="post">
            {% csrf_token %}
            <input type="hidden" name='id' value="{{ structure.id }}"/>
            <div class="box-body">
                <div class="row">
                    <div class="col-xs-5">
                        <label class="control-label">可选用户:</label>
                        <select name="from" id="multiselect" class="form-control" size="18" multiple="multiple">
                            {% for item in un_add_users %}
                                <option value="{{ item.id }}">{{ item.name }}({{ item.username }})</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-xs-2">
                        <br><br><br><br><br><br>
                        <button type="button" id="multiselect_rightAll" class="btn btn-block"><i
                                class="glyphicon glyphicon-forward"></i></button>
                        <button type="button" id="multiselect_rightSelected" class="btn btn-block"><i
                                class="glyphicon glyphicon-chevron-right"></i></button>
                        <button type="button" id="multiselect_leftSelected" class="btn btn-block"><i
                                class="glyphicon glyphicon-chevron-left"></i></button>
                        <button type="button" id="multiselect_leftAll" class="btn btn-block"><i
                                class="glyphicon glyphicon-backward"></i></button>
                    </div>
                    <div class="col-xs-5">
                        <label class="control-label">编辑：{{structure.name}}-已绑定用户:</label>
                        <select name="to" id="multiselect_to" class="form-control" size="18" multiple="multiple">
                            {% for item in added_users %}
                                <option value="{{ item.id }}">{{ item.name }}({{ item.username }})</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 margin-top-5">
                        <p class="text-maroon">*注意：一个用户只能隶属一个部门，如果选择的用户已存在部门，用户将会从原有部门移出</p>
                    </div>
                </div>
            </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 src="{% static 'plugins/select/multiselect.min.js' %}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //初始化多选列表
            $('#multiselect').multiselect({
                search: {
                    left: '<input type="text" class="form-control" placeholder="Search..." />',
                    right: '<input type="text" class="form-control" placeholder="Search..." />',
                },
                fireSearch: function (value) {
                    return value.length > 3;
                }
            });


        });

        $("#btnSave").click(function () {
            $('#multiselect_to option').prop('selected', true);
            var data = $("#selectUsersForm").serialize();
            console.log(data);
            $.ajax({
                type: $("#selectUsersForm").attr('method'),
                url: "{% url 'system:basic-structure-add_user' %}",
                data: data,
                cache: false,
                success: function (msg) {
                    if (msg.result) {
                        layer.alert('操作成功', {icon: 1});
                    } else {
                        //alert(msg.message);
                        layer.alert('操作失败', {icon: 2});
                    }
                    return;
                }
            });
        });

        /*点取消刷新新页面*/
        $("#btnCancel").click(function () {
            window.location.reload();

        });
    </script>
{% endblock %}

组织架构关联用户模板页使用了一个jQuery多选框组建：http://crlcu.github.io/multiselect/， 具体用法可以参考官方网址，网址中也有使用案例，没有太高要求的直接参考案例里面的用法就可以了。

1.4 为关联用户的按钮添加点击事件

我们需要在组织架构管理页面点击关联按钮调用关联弹窗，完成组织架构和用户的绑定。 在sandboxMP/templates/system/structure/structure.html模板中{% block javascripts %} 标签下添加如下内容：

   //删除单个数据
    function doDelete(id) {
        '''原有内容省略'''

    }
    //新增的关联用户，放到doDelete()函数后面
    function doAddUser(id) {
        layer.open({
            type: 2,
            title: '编辑：{{structure.name}}',
            shadeClose: false,
            maxmin: true,
            area: ['800px', '600px'],
            content: ["{% url 'system:basic-structure-add_user' %}" + '?id=' + id, 'no'],
            end: function () {
                window.location.reload();
            }
        });
    }
    //关联用户的函数到这里就结束了
</script>

最终运行效果： 

有关组织架构的完整操作到这里就结束了，datatables初始化的时候已经启用了搜索功能，组织架构没有单独配置查询的功能，有兴趣可以自行完成。

完成以上配置，访问structure管理页面，可以通过头部复选框选中多条数据，然后点上面的删除按钮，进行批量删除。点击单条数据后面的删除按钮可以删除单条记录。