MrDoc/template/app_admin/admin_image.html

{% extends 'app_admin/admin_base.html' %}
{% load static %}
{% load i18n %}
{% block title %}图片管理{% endblock %}
{% block custom_element %}
<link href="{% static 'viewerjs/viewer.css' %}?version={{mrdoc_version}}" rel="stylesheet">
{% endblock %}
{% block content %}
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-card-header" style="margin-bottom: 10px;">
            <div class="layui-row">
                <span style="font-size:18px;">图片管理
                </span>
            </div>
        </div>

        <div class="layui-form">
            <div class="layui-form-item">
              <label class="layui-form-label">关键词</label>
              <div class="layui-input-inline">
                <input type="text" name="kw"  placeholder="请输入图片名称" autocomplete="off" class="layui-input">
              </div>
              <button class="pear-btn pear-btn-primary pear-btn-sm" id="search">搜索</button>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">用户</label>
              <div class="layui-input-inline">
                <div id="select-user"></div>
              </div>
              <button class="pear-btn pear-btn-primary pear-btn-sm" id="searchUser">筛选</button>
            </div>
        </div>

        <div class="layui-row" id="img-div">
            <table class="layui-table"  id="img-list" lay-filter="img-table"></table>
        </div>
    </div>
</div>

<!-- 表格工具栏 -->
<script type="text/html" id="img-toolbar">
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="batchRemove">
        <i class="layui-icon layui-icon-delete"></i> 批量删除
    </button>
</script>

<!-- 图片缩略图模板 -->
<script type="text/html" id="imgShow">
    {% verbatim %}
    {{#if (d.file_name.endsWith('png')) { }}
        <img src="/static/icon_img/img_png.svg" style="width:20px;height:20px" />
    {{# }else if(d.file_name.endsWith('jpg')){ }}
        <img src="/static/icon_img/img_jpg.svg" style="width:20px;height:20px" />
    {{# }else if(d.file_name.endsWith('gif')){ }}
        <img src="/static/icon_img/img_gif.svg" style="width:20px;height:20px" />
    {{# }else if(d.file_name.endsWith('bmp')){ }}
        <img src="/static/icon_img/img_bmp.svg" style="width:20px;height:20px" />
    {{# }else{ }}
        <img src="/static/icon_img/img_others.svg" style="width:20px;height:20px" />
    {{# } }}
    {{d.file_name}}
    {% endverbatim %}
</script>

<!-- 上传时间 -->
<script type="text/html" id="registerTime">
    {% verbatim %}
    {{layui.util.toDateString(d.create_time,  "yyyy-MM-dd HH:mm:ss")}}
    {% endverbatim %}
</script>

<!-- 最后登录时间 -->
<script type="text/html" id="lastLoginTime">
    {% verbatim %}
    {{layui.util.toDateString(d.last_login,  "yyyy-MM-dd HH:mm:ss")}}
    {% endverbatim %}
</script>

<!-- 用户操作模板 -->
<script type="text/html" id="userOpera">
    {% verbatim %}
    <button class="pear-btn pear-btn-normal pear-btn-sm" lay-event="preview" title="预览图片"><i class="pear-icon pear-icon-browse"></i></button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
    {% endverbatim %}
</script>
{% endblock %}

{% block custom_script %}

<script src="{% static 'viewerjs/viewer.min.js' %}"></script>
<script>
    layui.use(['table','jquery','form','layer','element','table'], function() {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let layer = layui.layer;
        let element = layui.element;
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
            headers: {"X-CSRFToken":'{{ csrf_token }}'},
        });
        // 获取用户列表
        getUserList = function(usergroup_list){
            $.ajax({
                url:"{% url 'api_usergroups_userlist' %}",
                type:'get',
                success:function(r){
                    if(r.code === 0){
                        select_user.update({
                            data:r.data,
                            autoRow: true,
                        })
                    }else{
                        layer.msg("用户列表获取出错")
                    }
                },
                error:function(){
                    layer.msg("用户列表获取异常")
                }
            })
        };
        //获取图片列表，执行表格渲染
        table.render({
            elem: '#img-list',
            url: "{% url 'api_admin_imgs' %}",
            method:'get',
            where:{
                'username':$("#username").val(),
            },
            page:true,
            toolbar: '#img-toolbar',
            cols: [[
                {type: 'checkbox',width:20},
                {field:'file_name',title:'图片名称',templet:'#imgShow'},
                {field:'file_path',title:'图片路径',},
                {field:'remark',title:'备注',width:100,},
                {field:'username',title:'用户',width:140,},
                {field:'create_time',title:'上传时间',width:160,templet:'#registerTime'},
                {field:'oprate',title:'操作',width:180,templet:'#userOpera'},
            ]],
            skin: 'line',
        });
        // [文集权限指定用户]渲染用户多选下拉框
        var select_user = xmSelect.render({
            el:'#select-user',
            filterable: true,
            radio: true,
            paging: true,
            pageSize: 20,
            theme: {
                color: '#333333',
            },
            data:[]
        });
        getUserList();
        // 删除图片
        delImg = function(id){
            layer.open({
                type:1,
                title:'删除文档',
                area:'300px;',
                id:'delPro',//配置ID
                content:'<div style="margin-left:10px;">警告：操作将<span style="font-weight:700;color:red;">删除此图片且不可恢复！</span></div>',
                btn:['确定','取消'], //添加按钮
                btnAlign:'c', //按钮居中
                yes:function (index,layero) {
                    $.ajax({
                        url:'/admin/api/img/'+id + '/',
                        type:'delete',
                        success:function(r){
                            layer.closeAll()
                            if(r.code == 0){
                                layer.msg("删除成功",{icon:1},function(){
                                    table.reload('img-list',{page:{curr:1}});
                                })
                                
                            }else{
                                layer.msg(r.data,{icon:2})
                            }
                        },
                        error:function(){
                            layer.closeAll()
                            layer.mag("删除异常",{icon:2,})
                        }
                    })
                },
            })

        };
        // 批量删除图片
        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 'api_admin_imgs' %}",
                            dataType: 'json',
                            type: 'delete',
                            data:{'id':pro_id},
                            success: function(r) {
                                layer.closeAll();
                                if (r.code == 0) {
                                    layer.msg("{% trans '删除成功' %}", {
                                        icon: 1,
                                        time: 1000
                                    }, function() {
                                        table.reload('img-list',{page:{curr:1}});
                                    });
                                } else {
                                    layer.msg(r.data, {
                                        icon: 2,
                                        time: 1000
                                    });
                                }
                            }
                        })
                    }else{
                        layer.msg("输入错误！")
                    }
                }
            });
        };
        // 侦听文档操作按钮
        table.on("tool(img-table)",function(obj){
            if (obj.event === 'remove') {
                // console.log(obj)
                delImg(obj.data.id)
            }else if(obj.event === 'preview'){
                let realpath = obj.data.file_path; // url地址
                let img = new Image(); // Image对象

                img.onload = function () { // 重点：要用onload加载
                    let width = img.width > 600?600:img.width,
                        height = img.height > 600?600:img.height;
                    let imgHtml = "<img src='"+ realpath +"' style='width:" + width +"px;height:auto;' />";
                    layer.open({
                        type:1, // 类型是1
                        shade:0.2,
                        offset:'auto',
                        area:[width + 'px', height + 'px'],
                        shadeClose:true,
                        scrollbar: false,
                        title: '', // 这里不要写文字
                        content:imgHtml,
                    });
                };

                img.src = realpath;
            }
        });
        // 侦听表格工具栏
        table.on("toolbar(img-table)",function(obj){
            if(obj.event === 'batchRemove'){ // 批量删除图片
                batchRemove(obj)
            }else if(obj.event === 'search'){ // 搜索图片
                table.reload('img-list',{
                    where:{'kw':$('input[name="project-search-kw"]').val()
                },
                })
            } 
        });
        // 监听搜索按钮
        $("#search").click(function(){
            table.reload('img-list',{
                where:{
                    'kw':$("input[name=kw]").val(),
                },
            })
        });
        // 监听用户筛选按钮
        $("#searchUser").click(function(){
            table.reload('img-list',{
                where:{
                    'username':select_user.getValue('valueStr'),
                },
            })
        });

    })
</script>
{% endblock %}