/**
|
* 自定义图片展示
|
* @author wangting
|
* @date 2021-3-11
|
*/
|
layui.define(['layer','element','flow'],function(exports){
|
var webUtil = $webUtil;
|
var Class = function() {
|
this.MODELNAME = "ImageView";
|
this.moduleKey = "ImageView";
|
this.backPath = configData.compatibility?path:configData.objectServicePath;
|
this.url = {
|
imgview: 'imageViewerController/downloadImage'
|
};
|
this.sourceData = {
|
imgWidth:600,
|
imgHeight:300
|
};
|
this.getContent = function (id,options) {
|
var that = this;
|
that.id=id;
|
var html = [
|
'<div class="lazyimgs" id="lazyimgs_',id,'" lay-filter="lazyimgs_',id,'" style="display:block; text-align: center"></div>'
|
].join("");
|
return html;
|
};
|
this.init = function (id, options) {
|
var that = this;
|
webUtil.copyConfig(that, that.moduleKey);
|
that.id=id;
|
|
$.extend(that.sourceData,options);
|
};
|
|
this.loadForUI=function (sourceData){
|
if(!sourceData){
|
return;
|
}
|
var that =this;
|
$("#lazyimgs_"+that.id).empty();
|
//参数有调整
|
// /**
|
// * 业务类型
|
// */
|
// private String btmType;
|
//
|
// /**
|
// * 图片显示的方式
|
// */
|
// private String imageType;
|
//
|
// /**
|
// * 文件的主键
|
// */
|
// private String fileOid;
|
//
|
// /**
|
// * 文件的路径
|
// */
|
// private String filePath;
|
|
//fileOid 是在imageType等于“fileobject”时，利用propertyname在选择的这条数据中获取，也就是propertyname实际就是选择数据中的某个属性（注意属性不区分大小写）
|
//filePath 是在imageType等于“filepath”时，利用propertyname在选择的这条数据中获取，
|
var url = $webUtil.isNull(that.sourceData.url) ? that.url.imgview : that.sourceData.url;
|
if(that.sourceData.urlParams.imageType=='fileobject'){
|
that.sourceData.urlParams['fileOid']=sourceData[that.sourceData.urlParams.propertyname]
|
}else if(that.sourceData.urlParams.imageType=='filepath'){
|
that.sourceData.urlParams['filePath']=sourceData[that.sourceData.urlParams.propertyname]
|
}
|
|
if(that.sourceData.urlParams['fileOid']==''||that.sourceData.urlParams['filePath']==''){
|
return;
|
}
|
var img = $('<img class="fullScreen" lay-src="' + that.backPath + url +
|
'?fileOid=' + (that.sourceData.urlParams['fileOid']||'')
|
+ '&filePath=' + (that.sourceData.urlParams['filePath'].replace(/\\/g, '/')||'')
|
+ '&imageType=' + that.sourceData.urlParams.imageType
|
+ '&' + TOKEN_KEY + '=' + $webUtil.getToken() + '"> ');
|
img.width(that.sourceData.imgWidth).height(that.sourceData.imgHeight).on('dblclick', function () {
|
var div = $('<div style="position:absolute;width:100%;height: 100%;left:0;top:0;z-index: 99999"><i class="layui-icon layui-icon-close-fill" style="font-size:40px;position:absolute;right:0;top:0;z-index: 100000"></i></div>');
|
$('.layui-body').append(div)
|
var fullImg = new Image();
|
fullImg.onerror = function () {
|
};
|
fullImg.src = this.src;
|
fullImg.style.position = "absolute";
|
fullImg.style.width = "98%";
|
fullImg.style.height = "auto";
|
fullImg.style.left = '1%';
|
fullImg.style.top = '20px';
|
div.append(fullImg);
|
$('.layui-icon-close-fill', div).on('click', function () {
|
$(this).parent().remove()
|
})
|
})
|
$("#lazyimgs_"+that.id).html(img);
|
var flow = layui.flow;
|
flow.lazyimg({
|
elem: '.lazyimgs img'
|
});
|
// $webUtil.get(url , that.sourceData.urlParams, function (result) {
|
// if (result.success) {
|
// var img = $('<img class="fullScreen" lay-src="'+result+'"> ')
|
// img.width(that.sourceData.imgWidth).height(that.sourceData.imgHeight).on('dblclick', function () {
|
// var div = $('<div style="position:absolute;width:100%;height: 100%;left:0;top:0;z-index: 99999"><i class="layui-icon layui-icon-close-fill" style="font-size:40px;position:absolute;right:0;top:0;z-index: 100000"></i></div>');
|
// $('.layui-body').append(div)
|
// var fullImg = new Image();
|
// fullImg.onerror = function () {
|
// };
|
// fullImg.src = this.src;
|
// fullImg.style.position = "absolute";
|
// fullImg.style.width = "98%";
|
// fullImg.style.height = "auto";
|
// fullImg.style.left = '1%';
|
// fullImg.style.top = '20px';
|
// div.append(fullImg);
|
// $('.layui-icon-close-fill', div).on('click', function () {
|
// $(this).parent().remove()
|
// })
|
// })
|
// $("#lazyimgs_"+that.id).html(img);
|
// var flow = layui.flow;
|
// flow.lazyimg({
|
// elem: '.lazyimgs img'
|
// });
|
// } else {
|
// $webUtil.showErrorMsg(result.msg);
|
// }
|
// }, function (xhr, error) {
|
// $webUtil.showErrorMsg("获取图片出现了错误，可能是文件服务没有启动");
|
// }, that.backPath);
|
}
|
|
this.refresh = function(){
|
var that = this;
|
|
};
|
|
this.destory = function(){
|
var that = this;
|
var filter = "lazyimgs_" + that.id;
|
$('#'+filter).remove()
|
};
|
};
|
var cs = new Class();
|
exports(cs.MODELNAME,cs);
|
});
|
