MrDoc/template/app_doc/manage_project_collaborator.html

{% extends 'app_doc/manage_base.html' %}
{% load static %}
{% 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 style="text-decoration:underline;"><a href="{% url 'pro_index' pro.id %}" target="_blank">《{{pro.name}}》</a></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-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
          <li class="layui-this">协作用户</li>
          <li>协作文档</li>
        </ul>
        <div class="layui-tab-content">
            <!-- 协作用户 -->
            <div class="layui-tab-item layui-show">
                <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>
            </div>
            <div class="layui-tab-item">
                <!-- 协作文档 -->
                <div class="layui-row">
                    <table class="layui-table">
                        <thead>
                            <tr>
                                <th>文档名称</th>
                                <th>创建用户</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for doc in colla_docs %}
                            <tr>
                                <td><a href="{% url 'doc' doc.top_doc doc.id %}" target="_blank">{{ doc.name }}</a></td>
                                <td>{{ doc.create_user }}</td>
                                <th>{{ doc.create_time }}</th>
                                <td>
                                    <a href="{% url 'modify_doc' doc.id %}" target="_blank" class="layui-btn layui-btn-xs layui-btn-normal">
                                        <i class="layui-icon layui-icon-edit"></i>修改
                                    </a>
                                    <a href="javascript:void(0);" onclick="delDoc('{{doc.id}}');" class="layui-btn layui-btn-xs layui-btn-normal">
                                        <i class="layui-icon layui-icon-delete"></i>删除
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
      </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)
                    }
                })
            },
        })
    };
    // 删除文档
    delDoc = function(doc_id){
        layer.open({
            type:1,
            title:'删除文档',
            area:'300px;',
            id:'delPro',//配置ID
            content:'<div style="margin-left:10px;">警告：此操作将删除此文档！</div>',
            btn:['确定','取消'], //添加按钮
            btnAlign:'c', //按钮居中
            yes:function (index,layero) {
                layer.load(1);
                data = {
                    'doc_id':doc_id,
                }
                $.post("{% url 'del_doc' %}",data,function(r){
                    layer.closeAll('loading')
                    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 %}