diff --git a/CHANGES.md b/CHANGES.md index 0a37421..ed5a848 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -15,6 +15,7 @@ - [优化]首页移动端控制栏样式； - [优化]文集内搜索文档； - [优化]后台文档管理文档编辑模式显示； +- [优化]后台图片管理图片预览功能； ### v0.6.8 2021-06-27 diff --git a/static/icon_img/img_bmp.svg b/static/icon_img/img_bmp.svg new file mode 100644 index 0000000..4a2dc6e --- /dev/null +++ b/static/icon_img/img_bmp.svg @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/static/icon_img/img_gif.svg b/static/icon_img/img_gif.svg new file mode 100644 index 0000000..1a1ab83 --- /dev/null +++ b/static/icon_img/img_gif.svg @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/static/icon_img/img_jpg.svg b/static/icon_img/img_jpg.svg new file mode 100644 index 0000000..988ebfe --- /dev/null +++ b/static/icon_img/img_jpg.svg @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/static/icon_img/img_others.svg b/static/icon_img/img_others.svg new file mode 100644 index 0000000..a2e8fc7 --- /dev/null +++ b/static/icon_img/img_others.svg @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/static/icon_img/img_png.svg b/static/icon_img/img_png.svg new file mode 100644 index 0000000..bda76f0 --- /dev/null +++ b/static/icon_img/img_png.svg @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/template/app_admin/admin_image.html b/template/app_admin/admin_image.html index d8ff077..7e688f6 100644 --- a/template/app_admin/admin_image.html +++ b/template/app_admin/admin_image.html @@ -48,7 +48,18 @@ @@ -69,6 +80,7 @@ @@ -120,28 +132,14 @@ toolbar: '#img-toolbar', cols: [[ {type: 'checkbox',width:20}, - {field:'file_path',width:60,title:"",templet:'#imgShow'}, - {field:'file_name',title:'图片名称',}, + {field:'file_name',title:'图片名称',templet:'#imgShow'}, {field:'file_path',title:'图片路径',}, - {field:'remark',title:'备注',}, - {field:'username',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', - done:function(){ - //查看图片 - var options = { - //inline: true, - url: 'data-original', - fullscreen:false,//全屏 - rotatable:false,//旋转 - scalable:false,//翻转 - //zoomable:false,//缩放 - button:false,//关闭按钮 - }; - var viewer = new Viewer(document.getElementById('img-div'), options); - } }); // [文集权限指定用户]渲染用户多选下拉框 var select_user = xmSelect.render({ @@ -246,11 +244,32 @@ } }); }; - // 侦听文档删除按钮 + // 侦听文档操作按钮 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 imgHtml = ""; + let img = new Image(); // Image对象 + + img.onload = function () { // 重点：要用onload加载 + let width = img.width, + height = img.height; + 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; } }); // 侦听表格工具栏