MrDoc/template/app_doc/manage_project_collaborator.html

{% extends 'app_doc/manage_base.html' %}
{% load staticfiles %}
{% block title %}文集协作管理{% endblock %}
{% block content %}
    <link href="{% static 'tagsInput/tagsinput.css' %}" rel="stylesheet" type="text/css"/>
    <div class="layui-row" style="margin-bottom: 10px;padding-left:15px;">
        <span class="layui-breadcrumb" lay-separator=">">
          <a href="{% url 'manage_project' %}">文集管理</a>
          <a><cite>协作管理</cite></a>
        </span>
    </div>
    <div class="layui-card-header" style="margin-bottom: 10px;">

      <div class="layui-row">
          <span style="font-size:18px;">管理文集<strong>《{{pro.name}}》</strong>的协作者
          </span>
      </div>
  </div>
    <div class="layui-row">
        <form class="layui-form">
            {% csrf_token %}
            {% load project_filter %}
            <div class="layui-form-item">
                <label class="layui-form-label">文集名称</label>
                <div class="layui-input-block">
                  <input type="text" name="title" required value="{{pro.name}}"  disabled class="layui-input">
                    <!--<span>{{pro.name}}</span>-->
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">协作人数：</label>
                <div class="layui-input-inline">
                    <input type="text" value="{{ pro.id | project_collaborator_cnt }}人" class="layui-input" disabled>
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <button class="layui-btn layui-btn-xs layui-btn-normal" type="button" onclick="addProjectColla('{{pro.id}}')">
                        <i class="layui-icon layui-icon-addition"></i>添加
                    </button>
                </div>
            </div>
        </form>
    </div>
    {% if collaborator.count != 0 %}
    <div class="layui-row">
        <table class="layui-table">
            <thead>
                <tr>
                    <th>用户名</th>
                    <th>协作权限</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for colla in collaborator %}
                <tr>
                    <td>{{ colla.user }}</td>
                    <td>
                        {% if colla.role == 0 %}
                        新建文档，修改、删除新建的文档
                        {% else %}
                        可操作所有文档
                        {% endif %}
                    </td>
                    <td>
                        <a href="javascript:void(0);" onclick="modifyProjectColla('{{colla.user}}')" class="layui-btn layui-btn-xs layui-btn-normal">
                            <i class="layui-icon layui-icon-edit"></i>修改
                        </a>
                        <a href="javascript:void(0);" onclick="delProColla('{{colla.user}}')" class="layui-btn layui-btn-xs layui-btn-normal">
                            <i class="layui-icon layui-icon-delete"></i>删除
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}
{% endblock %}
{% block custom_script %}
<script src="{% static '/tagsInput/tagsinput.js' %}" type="text/javascript" charset="utf-8"></script>
<script>
    $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
        });
    var form = layui.form;
    //添加文集协作者
    addProjectColla = function(pid){
        layer.open({
            type:1,
            title:'添加文集协作者',
            area:'300px;',
            id:'addProColla',//配置ID
            //content:'<div style="margin:10px;"><input type="text" id="username" class="layui-input" placeholder="输入用户名" /></div>',
            content:$('#add-pro-colla-layer'),
            btn:['确定','取消'], //添加按钮
            btnAlign:'c', //按钮居中
            success : function(index, layero) { // 成功弹出后回调
                form.render('radio'); // 刷新checkbox开关渲染(否则开关按钮会不显示)
            },
            yes:function (index,layero) {
                layer.load(1);
                data = {
                    'types':0,
                    'username':$("#username").val(),
                    'role': $('input[name="add-role"]:checked').val()
                }
                $.post("{% url 'manage_pro_colla' pro.id %}",data,function(r){
                    layer.closeAll('loading'); //关闭loading
                    if(r.status){
                        //添加成功
                        window.location.reload();
                        //layer.close(index)
                    }else{
                        //添加失败，提示
                        // console.log(r)
                        layer.msg(r.data)
                    }
                })
            },
        })
    };
    // 删除文集协作者
    delProColla = function(user){
        layer.open({
            type:1,
            title:'删除文集协作者',
            area:'300px;',
            id:'delProColla',//配置ID
            content:'<div style="margin:10px;">确定将用户' + user+ '从文集协作者中删除？</div>',
            btn:['确定','取消'], //添加按钮
            btnAlign:'c', //按钮居中
            yes:function (index,layero) {
                data = {
                    'types':1,
                    'username':user,
                }
                $.post("{% url 'manage_pro_colla' pro.id %}",data,function(r){
                    if(r.status){
                        //删除成功
                        window.location.reload();
                        //layer.close(index)
                    }else{
                        //删除失败，提示
                        console.log(r)
                        layer.msg(r.data)
                    }
                })
            },
        })
    };
    // 修改文集协作者
    modifyProjectColla = function(user){
        layer.open({
            type:1,
            title:'修改'+ user + '的协作权限',
            area:'300px;',
            id:'modifyProColla',//配置ID
            content:$('#modify-pro-colla-layer'),
            btn:['确定','取消'], //添加按钮
            btnAlign:'c', //按钮居中
            success : function(index, layero) { // 成功弹出后回调
                form.render('radio'); // 刷新checkbox开关渲染(否则开关按钮会不显示)
            },
            yes:function (index,layero) {
                data = {
                    'types':2,
                    'username':user,
                    'role': $('input[name="modify-role"]:checked').val()
                }
                $.post("{% url 'manage_pro_colla' pro.id %}",data,function(r){
                    if(r.status){
                        //修改成功
                        window.location.reload();
                        //layer.close(index)
                    }else{
                        //修改失败，提示
                        console.log(r)
                        layer.msg(r.data)
                    }
                })
            },
        })
    };
</script>
<!-- 添加文集协作者layer弹出框 -->
<div id="add-pro-colla-layer" style="display:none;">
    <div style="margin:10px;" class="layui-form">
        <input type="text" id="username" class="layui-input" placeholder="输入用户名" />
        <div class="layui-form-item">
          <div class="layui-input-inline">
            <input type="radio" name="add-role" value="0" title="初级权限" checked>
            <input type="radio" name="add-role" value="1" title="高级权限" >
          </div>
        </div>
    </div>
</div>
<!-- 修改文集协作者权限layer弹出框 -->
<div id="modify-pro-colla-layer" style="display:none;">
    <div style="margin:10px;" class="layui-form">
        <div class="layui-form-item">
          <div class="layui-input-inline">
            <input type="radio" name="modify-role" value="0" title="初级权限" checked>
            <input type="radio" name="modify-role" value="1" title="高级权限" >
          </div>
        </div>
    </div>
</div>
{% endblock %}