MrDoc/template/app_doc/manage/manage_project.html

{% extends 'app_doc/user/user_base.html' %}
{% load static %}
{% load i18n %}
{% block title %}{% trans "文集管理" %}{% endblock %}
{% block content %}
<div class="layui-card">
    <div class="layui-card-body">
        <table id="project-table" lay-filter="project-table"></table>
    </div>
</div>

<!-- 表格工具栏 -->
<script type="text/html" id="project-toolbar">
    <div class="layui-input-inline">
        <input type="text" name="project-search-kw" placeholder="" class="layui-input" >
    </div>
    <button class="pear-btn pear-btn-sm" lay-event="search">
        <i class="layui-icon layui-icon-search"></i>{% trans "搜索" %}
    </button>
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>{% trans "新增" %}
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="batchRemove">
        <i class="layui-icon layui-icon-delete"></i>{% trans "删除" %}
    </button>
    <button class="pear-btn pear-btn-normal pear-btn-sm" lay-event="batchReport">
        <i class="layui-icon layui-icon-util"></i>{% trans "批量导出" %}
    </button>
    
</script>

<!-- 文集名称 -->
<script type="text/html" id="project-name">
    {% verbatim %}
    <a href="/project-{{d.id}}/" target="_blank">
        {{d.name}}
        {{#if (d.role == 0) { }}
        {{# }else if(d.role == 1){ }}
        <span  tooltip="私密" placement="right"><i class="layui-icon layui-icon-password"></i></span>
        {{# }else if(d.role == 2){ }}
        <span  tooltip="指定用户" placement="right"><i class="layui-icon layui-icon-user"></i></span>
        {{# }else if(d.role == 3){ }}
        <span  tooltip="访问码" placement="right"><i class="layui-icon layui-icon-key"></i></span>
        {{# } }}
    </a>
    {% endverbatim %}
</script>

<!-- 单个文集操作 -->
<script type="text/html" id="project-bar">
    {% verbatim %}
    <a href="/manage_pro_doc_sort/{{d.id}}/" title="排序文档" class="pear-btn pear-btn-sm" lay-event="sort"><i class="layui-icon layui-icon-cols"></i></a>
    <a href="/modify_pro/?pro_id={{d.id}}" title="修改文集配置" class="pear-btn pear-btn-sm"><i class="layui-icon layui-icon-set"></i></a>
    <button class="pear-btn pear-btn-danger pear-btn-sm" title="删除文集" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
    {% endverbatim %}
</script>

<!-- 文集权限 -->
<script type="text/html" id="project-role">
    {% verbatim %}
    {{#if (d.role == 0) { }}
    <span>公开</span>
    {{# }else if(d.role == 1){ }}
    <span>私密</span>
    {{# }else if(d.role == 2){ }}
    <span>指定用户</span>
    {{# }else if(d.role == 3){ }}
    <span>访问码</span>
    {{# } }}
    {% endverbatim %}
</script>

<!-- 协作人数 -->
<script type="text/html" id="colla-cnt">
    {% verbatim %}
    <span>{{d.colla_total}}</span> <a href="/manage_project_colla/{{d.id}}/"  title="管理文集协作"><i class="layui-icon layui-icon-set"></i></a>
    {% endverbatim %}
</script>

<!-- 创建时间 -->
<script type="text/html" id="project-create-time">
    {% verbatim %}
    {{layui.util.toDateString(d.create_time,  "yyyy-MM-dd HH:mm:ss")}}
    {% endverbatim %}
</script>
{% endblock %}
{% block custom_script %}
<script>
    layui.use(['table', 'form', 'jquery', 'layer'], function() {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let layer = layui.layer;
        $.ajaxSetup({
                data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
            });
        let cols = [
            [
                {type: 'checkbox',width:20},
                {title: '{% trans "文集名称" %}',field: 'name',align: 'left',templet:"#project-name",minWidth:200},
                // {title: '简介',field: 'intro',align: 'left',templet:"#share-type"},
                // {title: '权限',field: 'role',align: 'left',templet:"#project-role"},
                {title: '{% trans "文档数" %}',field: 'doc_total',align: 'left',width:90},
                {title: '{% trans "文集成员" %}',field: 'colla_total',align: 'left',templet:"#colla-cnt",width:90},
                {title: '{% trans "创建时间" %}',field: 'create_time',align: 'left',templet:"#project-create-time"},
                {title: '{% trans "操作" %}',toolbar: '#project-bar',align: 'left',}
            ]
        ]
        // 渲染表格
        table.render({
            elem: '#project-table',
            method:'post',
            where:{
                'type':1
            },
            url: "{% url 'manage_project' %}",
            page: true,
            cols: cols,
            skin: 'line',
            toolbar: '#project-toolbar',
            defaultToolbar: ['filter']
        });
        // 侦听文集删除按钮
        table.on("tool(project-table)",function(obj){
            if (obj.event === 'remove') {
                // console.log(obj)
                delProject(obj.data.id,obj.data.name)
            }
        });
        // 侦听表格工具栏
        table.on("toolbar(project-table)",function(obj){
            if (obj.event === 'add') { // 新增文集
                createProject();
            }else if(obj.event === 'batchRemove'){ // 批量删除文集
                batchRemove(obj)
            }else if(obj.event === 'search'){ // 搜索文集
                // console.log('搜索文集')
                table.reload('project-table',{
                    where:{
                        'type':1,'kw':$('input[name="project-search-kw"]').val()
                    },
                })
            }else if(obj.event === 'batchReport'){ // 批量导出文集
                batchReport(obj)
            }
        });
        //创建文集
        createProject = function(){
            layer.open({
                type:1,
                title:'{% trans "新建文集" %}',
                area:'300px;',
                id:'createPro',//配置ID
                content:'<div style="padding: 20px;"><input class="layui-input" type="text" id="pname" style="margin-bottom:10px;" placeholder="输入文集名" required  lay-verify="required"><textarea name="desc" id="desc" placeholder="输入文集简介" class="layui-textarea"></textarea></div>',
                btn:['{% trans "确定" %}','{% trans "取消" %}'], //添加按钮
                btnAlign:'c', //按钮居中
                yes:function (index,layero) {
                    layer.load(1);
                    data = {
                        'pname':$("#pname").val(),
                        'desc':$("#desc").val(),
                    }
                    $.post("{% url 'create_project' %}",data,function(r){
                        layer.closeAll('loading'); //关闭loading
                        if(r.status){
                            //创建成功
                            window.location.reload();
                            //layer.close(index)
                        }else{
                            //创建失败，提示
                            console.log(r)

                        }
                    })
                },
            });
        };
        //修改文集
        modifyProject = function(pro_id,pro_name,pro_intro){
            layer.open({
                type:1,
                title:'{% trans "修改文集" %}',
                area:'300px;',
                id:'modifyPro',//配置ID
                content:'<div style="padding: 20px;"><input class="layui-input" type="text" id="pname" style="margin-bottom:10px;" placeholder="输入文集名" required  lay-verify="required" value="'+pro_name+'"><textarea name="desc" id="desc" placeholder="输入文集简介" class="layui-textarea">'+pro_intro+'</textarea></div>',
                btn:['{% trans "确定" %}','{% trans "取消" %}'], //添加按钮
                btnAlign:'c', //按钮居中
                yes:function (index,layero) {
                    layer.load(1);
                    data = {
                        'pro_id':pro_id,
                        'name':$("#pname").val(),
                        'desc':$("#desc").val(),
                    }
                    $.post("{% url 'modify_project' %}",data,function(r){
                        layer.closeAll('loading'); //关闭loading
                        if(r.status){
                            //修改成功
                            window.location.reload();
                            //layer.close(index)
                        }else{
                            //修改失败，提示
                            // console.log(r)
                            layer.msg(r.data)
                        }
                    })
                },
            });
        };
        //删除文集
        delProject = function(pro_id,pro_name){
            layer.open({
                type:1,
                title:'{% trans "删除文集" %}',
                area:'300px;',
                id:'delPro',//配置ID
                content:'<div style="margin-left:10px;">你正在删除：<span style="font-weight:700;color:red;">【'+pro_name+'】</span><br><br>警告！此操作将<span style="font-weight:700;color:red;">删除此文集及文集下所有文档！</span>并且<span style="font-weight:700;color:red;">不可恢复！</span><br><br>请输入“DELETE”以再次确认删除。<br><input class="layui-input" style="width:95%;" id="confirm_delete_project" placeholder="DELETE"></div>',
                btn:['{% trans "删除" %}','{% trans "取消" %}'], //添加按钮
                btnAlign:'c', //按钮居中
                yes:function (index,layero) {
                    var confirm_delete = $("#confirm_delete_project").val()
                    if(confirm_delete === 'DELETE'){
                        layer.load(1);
                        data = {
                            'pro_id':pro_id,
                        }
                        $.post("{% url 'del_project' %}",data,function(r){
                            layer.closeAll(); //关闭loading
                            if(r.status){
                                layer.msg("{% trans '删除成功' %}", {
                                    icon: 1,
                                    time: 1000
                                }, function() {
                                    table.reload('project-table');
                                });
                            }else{
                                //修改失败，提示
                                console.log(r)
                                layer.msg(r.data)
                            }
                        })
                    }else{
                        layer.msg("输入错误！")
                    }
                },
            });
        }
        // 批量删除文集
        batchRemove = function(obj) {
            let data = table.checkStatus(obj.config.id).data;
            if (data.length === 0) {
                layer.msg("{% trans '未选中任何文集' %}", {
                    icon: 3,
                    time: 1000
                });
                return false;
            }
            let pro_id = "";
            for (let i = 0; i < data.length; i++) {
                pro_id += data[i].id + ",";
            }
            pro_id = pro_id.substr(0, pro_id.length - 1);
            // console.log(pro_id)
            layer.open({
                type:1,
                title:'{% trans "删除文集" %}',
                area:'300px;',
                id:'delPro',//配置ID
                content:'<div style="margin-left:10px;">你正在批量删除文集！<br><br>警告！此操作将<span style="font-weight:700;color:red;">删除所选文集及文集下所有文档！</span>并且<span style="font-weight:700;color:red;">不可恢复！</span><br><br>请输入“DELETE”以再次确认删除。<br><input class="layui-input" style="width:95%;" id="confirm_batch_delete_project" placeholder="DELETE"></div>',
                btn:['{% trans "批量删除" %}','{% trans "取消" %}'], //添加按钮
                btnAlign:'c', //按钮居中
                yes:function (index,layero) {
                    var confirm_delete = $("#confirm_batch_delete_project").val()
                    if(confirm_delete === 'DELETE'){
                        let loading = layer.load();
                        $.ajax({
                            url: "{% url 'del_project' %}",
                            dataType: 'json',
                            type: 'post',
                            data:{'pro_id':pro_id,'range':'multi'},
                            success: function(r) {
                                layer.closeAll();
                                if (r.status) {
                                    layer.msg("{% trans '删除成功' %}", {
                                        icon: 1,
                                        time: 1000
                                    }, function() {
                                        table.reload('project-table');
                                    });
                                } else {
                                    layer.msg(r.data, {
                                        icon: 2,
                                        time: 1000
                                    });
                                }
                            }
                        })
                    }else{
                        layer.msg("输入错误！")
                    }
                }
            });
        };
        //批量导出文集
        batchReport = function(obj){
            let data = table.checkStatus(obj.config.id).data;
            if (data.length === 0) {
                layer.msg("{% trans '未选中任何文集' %}", {
                    icon: 3,
                    time: 1000
                });
                return false;
            }
            let pro_id = "";
            for (let i = 0; i < data.length; i++) {
                pro_id += data[i].id + ",";
            }
            pro_id = pro_id.substr(0, pro_id.length - 1);
            console.log(pro_id);
            layer.open({
                type:1,
                title:"{% trans '打包文集' %}",
                area:"300px",
                id:"reportMd",
                content:'<div style="margin-left:10px;">确定打包导出所选的文集？</div>',
                btn:['确定','取消'], //添加按钮
                btnAlign:'c', //按钮居中
                yes:function (index,layero) {
                    var load = layer.load()
                    data = {
                        'project_id':pro_id,'type':'multi'
                    }
                    $.post("{% url 'report_md' %}",data,function(r){
                        layer.closeAll('loading'); //关闭loading
                        if(r.status){
                            //导出成功
                            //文件下载提示
                            downloadMd(r.data)
                        }else{
                            //导出失败，提示
                            // console.log(r)
                            layer.msg(r.data)
                        }
                        layer.close(load)
                    })
                },
            });
        };
        //下载文件弹出框
        downloadMd = function(download_link){
            layer.open({
                type:1,
                title:"{% trans '下载导出文档' %}",
                area:"300px",
                id:"downloadMd",
                content:'<p style="text-align:center;color:red;">请尽快下载，避免失效！</p><br><a class="layui-btn layui-btn-fluid download-md-link" href="'+ download_link + '" download="mrdoc_report_md.zip" >点击下载文件(zip)</a>',
                //btn:['确定','取消'], //添加按钮
                //btnAlign:'c', //按钮居中
                success: function (layero, index) {
                    $(layero).find('.download-md-link').click(function () {
                        layer.closeAll();
                    })
            }
            })
        };

    })
</script>
{% endblock %}