实现组织架构和用户绑定，通过绑定按钮设置组织架构和用户之间一对多的关联关系。
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管理页面，可以通过头部复选框选中多条数据，然后点上面的删除按钮，进行批量删除。点击单条数据后面的删除按钮可以删除单条记录。
原文地址：https://www.cnblogs.com/jameslove/p/11043775.html
时间： 2024-11-05 19:05:23