forked from mirror/MrDoc
243 lines
9.8 KiB
HTML
243 lines
9.8 KiB
HTML
{% extends 'app_doc/manage_base.html' %}
|
||
{% load staticfiles %}
|
||
{% block title %}图片素材管理{% endblock %}
|
||
|
||
{% block custom_link %}
|
||
<link href="{% static 'viewerjs/viewer.css' %}?version={{mrdoc_version}}" rel="stylesheet">
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="layui-card-header" style="margin-bottom: 10px;">
|
||
<div class="layui-row">
|
||
<span style="font-size:18px;">图片素材管理
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="layui-row">
|
||
<form action="" method="get">
|
||
<div class="layui-form-item">
|
||
<!--<div class="layui-input-inline">-->
|
||
<!--<input type="text" name="kw" id="kw" placeholder="搜索图片" autocomplete="off" class="layui-input">-->
|
||
<!--</div>-->
|
||
<!--<button class="layui-btn" type="submit">搜索</button>-->
|
||
<button class="layui-btn layui-btn-normal layui-btn-sm" type="button" id="upload_img"><i class="layui-icon layui-icon-upload"></i>上传图片</button>
|
||
<button class="layui-btn layui-btn-normal layui-btn-sm" type="button" onclick="createImgGroup()"><i class="layui-icon layui-icon-addition"></i>新建分组</button>
|
||
<a class="layui-btn layui-btn-normal layui-btn-sm" href="{% url 'manage_img_group' %}">分组管理</a>
|
||
</div>
|
||
</form>
|
||
|
||
</div>
|
||
<div class="layui-row">
|
||
<!--<span style="font-size:16px;"><b>分组: </b></span>-->
|
||
<span class="layui-breadcrumb doc_status_condition" lay-separator="|">
|
||
{% load project_filter %}
|
||
<a href="{% url 'manage_image' %}?group=0" class="{% if g_id == 0 %}current{% endif %}">全部图片({{all_img_cnt}})</a>
|
||
<a href="{% url 'manage_image' %}?group=-1" class="{% if g_id == -1 %}current{% endif %}">未分组({{no_group_cnt}})</a>
|
||
{% for group in groups %}
|
||
<a href="{% url 'manage_image' %}?group={{group.id}}" class="{% if g_id == group.id %}current{% endif %}">{{group.group_name}}({{group.id | img_group_cnt}})</a>
|
||
{% endfor %}
|
||
</span>
|
||
</div>
|
||
<div class="layui-row" lay-skin="line">
|
||
<ul style="padding: 20px;" id="images">
|
||
{% for img in images %}
|
||
<li class="image-list">
|
||
<!--<i class="image-list-i" style="background-image: url('{{img.file_path}}');"></i>-->
|
||
<img class="image-list-i" src="{{img.file_path}}" title="{{img.file_name}}">
|
||
<!--<span class="img-file-name" title="{{img.file_name}}">{{img.file_name}}</span>-->
|
||
<!--<input type="checkbox" />-->
|
||
<div class="opera-img-btn">
|
||
<a href="javascript:void(0);" class="move-img" title="移动分组" data-src="{{img.file_path}}" data-id="{{img.id}}"><i class="layui-icon layui-icon-transfer"></i></a>
|
||
<a href="javascript:void(0);" class="del-img" title="删除图片" data-src="{{img.file_path}}" data-id="{{img.id}}"><i class="layui-icon layui-icon-delete"></i></a>
|
||
</div>
|
||
</li>
|
||
|
||
{% endfor %}
|
||
</ul>
|
||
</div>
|
||
<hr>
|
||
<!-- 分页 -->
|
||
<div class="layui-row">
|
||
<div class="layui-box layui-laypage layui-laypage-default">
|
||
<!-- 上一页 -->
|
||
{% if images.has_previous %}
|
||
<a href="?page={{ images.previous_page_number }}&group={{images.group}}" class="layui-btn layui-btn-xs layui-btn-normal">上一页</a>
|
||
{% else %}
|
||
<a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-disabled">上一页</a>
|
||
{% endif %}
|
||
<!-- 当前页 -->
|
||
<span class="layui-laypage-curr">
|
||
<em class="layui-laypage-em"></em>
|
||
<em>{{ images.number }}/{{ images.paginator.num_pages }}</em>
|
||
</span>
|
||
<!-- 下一页 -->
|
||
{% if images.has_next %}
|
||
<a href="?page={{ images.next_page_number }}&group={{images.group}}" class="layui-btn layui-btn-xs layui-btn-normal">下一页</a>
|
||
{% else %}
|
||
<a class="layui-btn layui-btn-xs layui-btn-disabled">下一页</a>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
{% block custom_script %}
|
||
<script src="{% static 'viewerjs/viewer.js' %}"></script>
|
||
<script>
|
||
var form = layui.form;
|
||
var flow = layui.flow;
|
||
// 懒加载图片
|
||
flow.lazyimg({elem:'img.image-list-i'});
|
||
//悬浮显示图片按钮
|
||
$(".image-list").mouseover(function(){
|
||
$(this).find(".opera-img-btn").show();
|
||
});
|
||
$(".image-list").mouseleave(function(){
|
||
$(this).find(".opera-img-btn").hide();
|
||
});
|
||
//删除图片
|
||
$(".del-img").click(function(){
|
||
var img_id = $(this).data("id");
|
||
var img_src = $(this).data("src");
|
||
layer.open({
|
||
type:1,
|
||
title:'删除图片',
|
||
area:'300px;',
|
||
id:'delImg',//配置ID
|
||
content:'<div style="margin:10px;"><img src="'+ img_src +'" style="width:50px;height:50px;margin:10px;"/><span>删除此图片后，文档中添加的该图片将不再显示！</span></div>',
|
||
btn:['确定','取消'], //添加按钮
|
||
btnAlign:'c', //按钮居中
|
||
yes:function (index,layero) {
|
||
layer.load(1);
|
||
data = {
|
||
'img_id':img_id,
|
||
'types':0
|
||
}
|
||
$.post("{% url 'manage_image' %}",data,function(r){
|
||
layer.closeAll('loading')
|
||
if(r.status){
|
||
//删除成功
|
||
window.location.reload();
|
||
//layer.close(index)
|
||
}else{
|
||
//删除失败，提示
|
||
// console.log(r)
|
||
layer.msg(r.data)
|
||
}
|
||
})
|
||
},
|
||
|
||
})
|
||
});
|
||
//移动分组
|
||
$(".move-img").click(function(){
|
||
var img_id = $(this).data("id");
|
||
var img_src = $(this).data("src");
|
||
layer.open({
|
||
type:1,
|
||
title:'移动图片分组',
|
||
area:['300px','300px'],
|
||
id:'moveImg',//配置ID
|
||
content:$("#move-group-layer"),
|
||
btn:['确定','取消'], //添加按钮
|
||
btnAlign:'c', //按钮居中
|
||
yes:function (index,layero) {
|
||
layer.load(1);
|
||
data = {
|
||
'types':1,
|
||
'img_id':img_id,
|
||
'group_id':$("#group_id").val()
|
||
}
|
||
console.log(data)
|
||
$.post("{% url 'manage_image' %}",data,function(r){
|
||
layer.closeAll('loading')
|
||
if(r.status){
|
||
//移动成功
|
||
window.location.reload();
|
||
//layer.close(index)
|
||
}else{
|
||
//移动失败，提示
|
||
// console.log(r)
|
||
layer.msg(r.data)
|
||
}
|
||
})
|
||
},
|
||
success:function(){
|
||
form.render();
|
||
}
|
||
})
|
||
});
|
||
//查看图片
|
||
var options = {
|
||
//inline: true,
|
||
url: 'data-original',
|
||
fullscreen:false,//全屏
|
||
rotatable:false,//旋转
|
||
scalable:false,//翻转
|
||
//zoomable:false,//缩放
|
||
button:false,//关闭按钮
|
||
};
|
||
var viewer = new Viewer(document.getElementById('images'), options);
|
||
//创建图片分组
|
||
createImgGroup = function(){
|
||
layer.open({
|
||
type:1,
|
||
title:'新建图片分组',
|
||
area:'300px;',
|
||
id:'createImgGroup',//配置ID
|
||
content:'<div style="margin:10px;"><input type="text" id="img_group_name" class="layui-input" /></div>',
|
||
btn:['确定','取消'], //添加按钮
|
||
btnAlign:'c', //按钮居中
|
||
yes:function (index,layero) {
|
||
layer.load(1); //上传loading
|
||
data = {
|
||
'types':0,
|
||
'group_name':$("#img_group_name").val(),
|
||
}
|
||
$.post("{% url 'manage_img_group' %}",data,function(r){
|
||
layer.closeAll('loading');
|
||
if(r.status){
|
||
//新建成功
|
||
window.location.reload();
|
||
}else{
|
||
//新建失败，提示
|
||
// console.log(r)
|
||
layer.msg(r.data)
|
||
}
|
||
})
|
||
},
|
||
})
|
||
};
|
||
//上传图片
|
||
var upload = layui.upload;
|
||
upload.render({
|
||
elem: '#upload_img',
|
||
url: '{% url "upload_doc_img" %}',
|
||
before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
|
||
layer.load(); //上传loading
|
||
},
|
||
done: function(res, index, upload){ //上传后的回调
|
||
layer.closeAll('loading'); //关闭loading
|
||
//上传成功，刷新页面
|
||
if(res.success == 1){
|
||
window.location.reload();
|
||
}else{
|
||
layer.msg("上传出错，请重试！")
|
||
}
|
||
},
|
||
accept: 'images', //允许上传的文件类型
|
||
acceptMime:'image/*',
|
||
field:'manage_upload',
|
||
size: 5000, //最大允许上传的文件大小
|
||
|
||
})
|
||
</script>
|
||
<!--移动图片分组DIV块-->
|
||
<div style="margin:10px;display:none;" class="layui-form" id="move-group-layer">
|
||
<div class="layui-form-item">
|
||
<select id="group_id">
|
||
{% for group in groups %}
|
||
<option value="{{group.id}}">{{group.group_name}}</option>
|
||
{% endfor %}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
{% endblock %} |