提交 3e7b3476 编写于 作者: doc_wei's avatar doc_wei

附件管理整改完成

上级 4bdd5ff8
var enclosureList = new Array();
layui.config({
base: basePath,
version: skyeyeVersion
}).extend({
window: 'js/winui.window'
}).define(['window', 'jquery', 'winui', 'fsTree'], function (exports) {
winui.renderColor();
var index = parent.layer.getFrameIndex(window.name);
var $ = layui.$,
form = layui.form,
fsTree = layui.fsTree;
var boxId = GetUrlParam('boxId');
enclosureList = [].concat(JSON.parse(parent.$("#" + boxId).attr(skyeyeEnclosure.enclosureListKey)));
matchingLanguage();
form.render();
var ztree = null;
/********* tree 处理 start *************/
fsTree.render({
id: "treeDemo",
url: reqBasePath + "queryEnclosureTree",
checkEnable: true,
loadEnable: false,//异步加载
showLine: false,
showIcon: true,
onDblClick: function(){
},
onAsyncSuccess: function(id){
},
onCheck: zTreeOnCheck //选中回调函数
}, function(id){
ztree = $.fn.zTree.getZTreeObj(id);
var zTreeChecked = ztree.getCheckedNodes(false);
for (var i = 0; i < zTreeChecked.length; i++) {
for(var j = 0; j < enclosureList.length; j++){
if(zTreeChecked[i].id == enclosureList[j].id){
ztree.checkNode(zTreeChecked[i], true, true);
}
}
}
});
//选中或取消选中的回调函数
function zTreeOnCheck(event, treeId, treeNode) {
//获取选中节点
var zTree = ztree.getCheckedNodes(true);
for (var i = 0; i < zTree.length; i++) {
if (!isNull(zTree[i].objectType) && zTree[i].objectType != "catalog"){
addToArray({
id: zTree[i].id,
name: zTree[i].name,
fileAddress: zTree[i].fileAddress
});
}
}
//获取未选中节点
zTree = ztree.getCheckedNodes(false);
for (var i = 0; i < zTree.length; i++) {
if (!isNull(zTree[i].objectType) && zTree[i].objectType != "catalog"){
removeToArray(zTree[i].id);
}
}
}
/********* tree 处理 end *************/
// 取消
$("body").on("click", "#cancle", function() {
parent.layer.close(index);
});
// 确定
$("body").on("click", "#confimChoose", function() {
var nodes = ztree.getCheckedNodes(true);
for(var i = 0; i < nodes.length; i++){
var node = nodes[i];
if (!isNull(node.objectType) && node.objectType != "catalog") {
addToArray({
id: node.id,
name: node.name,
fileAddress: node.fileAddress
});
}
}
parent.layer.close(index);
parent.$("#" + boxId).attr(skyeyeEnclosure.enclosureListKey, JSON.stringify(enclosureList));
parent.refreshCode = '0';
});
});
// 向集合中添加元素
function addToArray(data) {
var inArray = false;
$.each(enclosureList, function(i, item) {
if(item.id === data.id){
inArray = true;
return false;
}
});
if(!inArray){//如果该元素在集合中不存在
enclosureList.push({
id: data.id,
name: data.name,
fileAddress: data.fileAddress
});
}
}
// 移除集合中的元素
function removeToArray(id){
var inArray = -1;
$.each(enclosureList, function(i, item) {
if(id === item.id) {
inArray = i;
return false;
}
});
if(inArray != -1){//如果该元素在集合中存在
enclosureList.splice(inArray, 1);
}
}
/**
* 文件上传成功后的回调函数
* @param json
*/
function uploadFileCallback(json) {
var params = {
name: json.bean.name,
path: json.bean.fileAddress,
type: json.bean.fileType,
size: json.bean.size,
sizeType: json.bean.fileSizeType,
catalog: '0'
};
AjaxPostUtil.request({url: reqBasePath + "createEnclosure", params: params, type: 'json', method: 'POST', callback: function (data) {
addToArray({
id: data.bean.id,
name: json.bean.name,
fileAddress: json.bean.fileAddress
});
}});
}
layui.config({
base: basePath,
version: skyeyeVersion
}).extend({
window: 'js/winui.window'
}).define(['window', 'jquery', 'winui'], function (exports) {
winui.renderColor();
var index = parent.layer.getFrameIndex(window.name);
var $ = layui.$,
form = layui.form;
matchingLanguage();
form.render();
});
/**
* 文件上传成功后的回调函数
* @param json
*/
function uploadFileCallback(json) {
var params = {
name: json.bean.name,
path: json.bean.fileAddress,
type: json.bean.fileType,
size: json.bean.size,
sizeType: json.bean.fileSizeType,
catalog: isNull(parent.categoryId) ? '0' : parent.categoryId,
};
AjaxPostUtil.request({url: reqBasePath + "createEnclosure", params: params, type: 'json', method: 'POST', callback: function (json) {
}});
}
var rowId;
var categoryId = "";
layui.config({
base: basePath,
version: skyeyeVersion
}).extend({
window: 'js/winui.window'
}).define(['window', 'table', 'jquery', 'winui'], function (exports) {
winui.renderColor();
var $ = layui.jquery,
form = layui.form,
table = layui.table;
var serviceClassName = sysServiceMation["enclosure"]["key"];
catalogTreeUtil.init({
boxId: 'catalogBox',
className: serviceClassName,
addOrUser: true,
isRoot: 1,
chooseCallback: function (chooseId) {
categoryId = chooseId;
refreshTable();
}
});
table.render({
id: 'messageTable',
elem: '#messageTable',
method: 'post',
url: reqBasePath + 'sysenclosure004',
where: getTableParams(),
even: true,
page: true,
limits: getLimits(),
limit: getLimit(),
cols: [[
{ title: systemLanguage["com.skyeye.serialNumber"][languageType], type: 'numbers' },
{ field: 'name', title: '文件名', align: 'left', width: 400 },
{ field: 'size', title: '文件大小', align: 'center', width: 120 },
{ field: 'createTime', title: '上传时间', align: 'center', width: 150 },
{ title: systemLanguage["com.skyeye.operation"][languageType], fixed: 'right', align: 'center', width: 150, toolbar: '#tableBar' }
]],
done: function(json) {
matchingLanguage();
initTableSearchUtil.initAdvancedSearch(this, json.searchFilter, form, "请输入文件名", function () {
table.reloadData("messageTable", {page: {curr: 1}, where: getTableParams()});
});
}
});
table.on('tool(messageTable)', function (obj) {
var data = obj.data;
var layEvent = obj.event;
if (layEvent === 'download'){ //下载
download(fileBasePath + data.path, data.name);
}
});
// 上传附件
$("body").on("click", "#addSenclosureBean", function (e) {
_openNewWindows({
url: "../../tpl/sysEnclosure/enclosureUpload.html",
title: "上传附件",
pageId: "enclosureUpload",
area: ['70vw', '70vh'],
callBack: function (refreshCode) {
loadThisFolderChild();
}});
});
form.render();
$("body").on("click", "#reloadTable", function() {
loadTable();
});
function loadTable() {
table.reloadData("messageTable", {where: getTableParams()});
}
function refreshTable(){
table.reloadData("messageTable", {page: {curr: 1}, where: getTableParams()});
}
function getTableParams() {
return $.extend(true, {catelogId: categoryId}, initTableSearchUtil.getSearchValue("messageTable"));
}
exports('myEnclosureList', {});
});
layui.config({
base: basePath,
version: skyeyeVersion
}).extend({
window: 'js/winui.window'
}).define(['window', 'jquery', 'winui'], function (exports) {
winui.renderColor();
layui.use(['form'], function (form) {
var index = parent.layer.getFrameIndex(window.name);
var $ = layui.$;
var parentId = parent.folderId;
$("#parentFolderName").html(parent.folderName);
matchingLanguage();
form.render();
form.on('submit(formAddBean)', function (data) {
if (winui.verifyForm(data.elem)) {
if(parentId == 1 || parentId === '1'){
parentId = "0";
}
var params = {
typeName: $("#typeName").val(),
parentId: parentId
};
AjaxPostUtil.request({url: reqBasePath + "sysenclosure002", params: params, type: 'json', callback: function (json) {
parent.layer.close(index);
parent.refreshCode = '0';
}});
}
return false;
});
$("body").on("click", "#cancle", function() {
parent.layer.close(index);
});
});
});
\ No newline at end of file
layui.config({
base: basePath,
version: skyeyeVersion
}).extend({
window: 'js/winui.window'
}).define(['window', 'jquery', 'winui'], function (exports) {
winui.renderColor();
layui.use(['form'], function (form) {
var index = parent.layer.getFrameIndex(window.name);
var $ = layui.$;
var fileType = parent.fileType;
AjaxPostUtil.request({url: reqBasePath + "sysenclosure005", params: {rowId: parent.fileId}, type: 'json', callback: function (json) {
if(isNull(json.bean)){
winui.window.msg("该数据不存在", {icon: 5,time: 2000});
parent.layer.close(index);
parent.refreshCode = '0';
} else {
$("#parentFolderName").html(parent.folderName);
$("#typeName").val(json.bean.typeName);
}
}});
matchingLanguage();
form.render();
form.on('submit(formAddBean)', function (data) {
if (winui.verifyForm(data.elem)) {
var params = {
typeName: $("#typeName").val(),
fileType: fileType,
rowId: parent.fileId
};
AjaxPostUtil.request({url: reqBasePath + "sysenclosure006", params: params, type: 'json', callback: function (json) {
parent.layer.close(index);
parent.refreshCode = '0';
}});
}
return false;
});
$("body").on("click", "#cancle", function() {
parent.layer.close(index);
});
});
});
\ No newline at end of file
var folderId = "";
layui.config({
base: basePath,
version: skyeyeVersion
}).extend({
window: 'js/winui.window'
}).define(['window', 'jquery', 'winui', 'webuploader'], function (exports) {
winui.renderColor();
layui.use(['form'], function (form) {
var index = parent.layer.getFrameIndex(window.name);
var $ = layui.$;
//附件所属目录
folderId = parent.folderId;
if(folderId == 1 || folderId === '1'){
folderId = "0";
}
//初始化上传
loadUploadMethod();
matchingLanguage();
form.render();
form.on('submit(fileUploadStart)', function (data) {
if (winui.verifyForm(data.elem)) {
uoloadObj.upload();
}
return false;
});
});
});
function loadUploadMethod(){
$wrap = $('#uploader'),
// 文件容器
$queue = $('<ul class="filelist"></ul>').appendTo( $wrap.find('.queueList') ),
// 状态栏,包括进度和控制按钮
$statusBar = $wrap.find('.statusBar'),
// 文件总体选择信息。
$info = $statusBar.find('.info'),
// 上传按钮
$upload = $wrap.find('.uploadBtn'),
// 没选择文件之前的内容。
$placeHolder = $wrap.find('.placeholder'),
// 总体进度条
$progress = $statusBar.find('.progress').hide(),
// 添加的文件数量
fileCount = 0,
// 添加的文件总大小
fileSize = 0,
// 优化retina, 在retina下这个值是2
ratio = window.devicePixelRatio || 1,
// 缩略图大小
thumbnailWidth = 110 * ratio,
thumbnailHeight = 110 * ratio,
// 可能有pedding, ready, uploading, confirm, done.
state = 'pedding',
// 所有文件的进度信息,key为file id
percentages = {},
supportTransition = (function(){
var s = document.createElement('p').style,
r = 'transition' in s ||
'WebkitTransition' in s ||
'MozTransition' in s ||
'msTransition' in s ||
'OTransition' in s;
s = null;
return r;
})(),
// WebUploader实例
uploader;
if (!WebUploader.Uploader.support()) {
alert( 'Web Uploader 不支持您的浏览器!如果你使用的是IE浏览器,请尝试升级 flash 播放器');
throw new Error( 'WebUploader does not support the browser you are using.' );
}
var md5;
//监听分块上传过程中的三个时间点
WebUploader.Uploader.register({
"before-send-file": "beforeSendFile",
"before-send": "beforeSend",
"after-send-file": "afterSendFile"
}, {
//时间点1:所有分块进行上传之前调用此函数
beforeSendFile: function(file) {
var deferred = WebUploader.Deferred();
//1、计算文件的唯一标记,用于断点续传
(new WebUploader.Uploader()).md5File(file, 0, 10 * 1024 * 1024)
.progress(function(percentage) {
$('#' + file.id).find("p.state").text("正在读取文件信息...");
})
.then(function(val) {
md5 = val;
$('#' + file.id).find("p.state").text("成功获取文件信息...");
//获取文件信息后进入下一步
deferred.resolve();
});
return deferred.promise();
},
//时间点2:如果有分块上传,则每个分块上传之前调用此函数
beforeSend: function(block) {
var deferred = WebUploader.Deferred();
var params = {
//文件唯一标记
"md5": md5,
//当前分块下标
"chunk": block.chunk,
//当前分块大小
"chunkSize": block.end - block.start
};
AjaxPostUtil.request({url: reqBasePath + "sysenclosure009", params: params, type: 'json', callback: function (json) {
//分块存在,跳过
deferred.reject();
}, errorCallback: function () {
//分块不存在或不完整,重新发送该分块内容
deferred.resolve();
}, async: false});
this.owner.options.formData.md5 = md5;
deferred.resolve();
return deferred.promise();
},
//时间点3:所有分块上传成功后调用此函数
afterSendFile: function (data) {
//如果分块上传成功,则通知后台合并分块
AjaxPostUtil.request({url: reqBasePath + "sysenclosure008", params: {md5: md5, folderId: folderId, name: data.name, size: data.size}, type: 'json', callback: function (json) {
}});
}
});
// 实例化
uploader = WebUploader.create({
pick: {
id: '#filePicker',
label: '选择文件'
},
formData: {
folderId: folderId
},
dnd: '#uploader .queueList',
paste: document.body,
// swf文件路径
swf: fileBasePath + '/assets/images/Uploader.swf',
disableGlobalDnd: true,//是否禁掉整个页面的拖拽功能
chunked: true,//是否要分片处理大文件上传
chunkSize: 10 * 1024 * 1024,
chunkRetry: 3,//网络问题上传失败后重试次数
threads: 1, //上传并发数
fileSizeLimit: 2000 * 1024 * 1024,//最大2GB
fileSingleSizeLimit: 2000 * 1024 * 1024,
resize: false,//不压缩
server: reqBasePath + 'sysenclosure007',
fileNumLimit: 300,
});
// 添加“添加文件”的按钮,
uploader.addButton({
id: '#filePicker2',
label: '继续添加'
});
uploader.onUploadProgress = function(file, percentage) {
var $li = $('#'+file.id),
$percent = $li.find('.progress span');
$percent.css('width', percentage * 100 + '%');
percentages[file.id][1] = percentage;
updateTotalProgress();
};
uploader.onFileQueued = function(file) {
fileCount++;
fileSize += file.size;
if (fileCount === 1) {
$placeHolder.addClass( 'element-invisible' );
$statusBar.show();
}
addFile(file);
setState('ready');
updateTotalProgress();
};
uploader.onFileDequeued = function(file) {
fileCount--;
fileSize -= file.size;
if (!fileCount) {
setState( 'pedding' );
}
removeFile(file);
updateTotalProgress();
};
uploader.on( 'all', function( type ) {
var stats;
switch( type ) {
case 'uploadFinished':
setState( 'confirm' );
break;
case 'startUpload':
setState( 'uploading' );
break;
case 'stopUpload':
setState( 'paused' );
break;
}
});
uploader.on('uploadBeforeSend', function(block, data, headers) {
headers['X-Requested-With']= 'XMLHttpRequest';
$.extend(headers, getRequestHeaders());
data.folderId = folderId;
data.md5 = md5;
data.chunk = block.chunk;
data.chunkSize = block.end - block.start;
});
uploader.onError = function(code) {
alert('Eroor: ' + code);
};
$upload.on('click', function() {
if ($(this).hasClass( 'disabled')) {
return false;
}
if (state === 'ready') {
uploader.upload();
} else if (state === 'paused') {
uploader.upload();
} else if (state === 'uploading') {
uploader.stop(true);
}
});
$info.on('click', '.retry', function() {
uploader.retry();
});
$info.on('click', '.ignore', function() {
alert('todo');
});
$upload.addClass('state-' + state);
updateTotalProgress();
}
//当有文件添加进来时执行,负责view的创建
function addFile( file ) {
var $li = $( '<li id="' + file.id + '">' + '<p class="title">' + file.name + '</p>' + '<p class="imgWrap"></p>' + '<p class="progress"><span></span></p>' + '</li>' ),
$btns = $('<div class="file-panel">' + '<span class="cancel">删除</span>' + '<span class="rotateRight">向右旋转</span>' + '<span class="rotateLeft">向左旋转</span></div>').appendTo( $li ),
$prgress = $li.find('p.progress span'),
$wrap = $li.find( 'p.imgWrap' ),
$info = $('<p class="error"></p>'),
showError = function( code ) {
switch( code ) {
case 'exceed_size':
text = '文件大小超出';
break;
case 'interrupt':
text = '上传暂停';
break;
default:
text = '上传失败,请重试';
break;
}
$info.text( text ).appendTo( $li );
};
if ( file.getStatus() === 'invalid' ) {
showError( file.statusText );
} else {
$wrap.text( '预览中' );
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$wrap.text( '不能预览' );
return;
}
var img = $('<img src="'+src+'">');
$wrap.empty().append( img );
}, thumbnailWidth, thumbnailHeight );
percentages[ file.id ] = [ file.size, 0 ];
file.rotation = 0;
}
file.on('statuschange', function( cur, prev ) {
if ( prev === 'progress' ) {
$prgress.hide().width(0);
} else if ( prev === 'queued' ) {
$li.off( 'mouseenter mouseleave' );
$btns.remove();
}
// 成功
if ( cur === 'error' || cur === 'invalid' ) {
showError( file.statusText );
percentages[ file.id ][ 1 ] = 1;
} else if ( cur === 'interrupt' ) {
showError( 'interrupt' );
} else if ( cur === 'queued' ) {
percentages[ file.id ][ 1 ] = 0;
} else if ( cur === 'progress' ) {
$info.remove();
$prgress.css('display', 'block');
} else if ( cur === 'complete' ) {
$li.append( '<span class="success"></span>' );
}
$li.removeClass( 'state-' + prev ).addClass( 'state-' + cur );
});
$li.on( 'mouseenter', function() {
$btns.stop().animate({height: 30});
});
$li.on( 'mouseleave', function() {
$btns.stop().animate({height: 0});
});
$btns.on( 'click', 'span', function() {
var index = $(this).index(), deg;
switch ( index ) {
case 0:
uploader.removeFile( file );
return;
case 1:
file.rotation += 90;
break;
case 2:
file.rotation -= 90;
break;
}
if ( supportTransition ) {
deg = 'rotate(' + file.rotation + 'deg)';
$wrap.css({
'-webkit-transform': deg,
'-mos-transform': deg,
'-o-transform': deg,
'transform': deg
});
} else {
$wrap.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')');
}
});
$li.appendTo( $queue );
}
// 负责view的销毁
function removeFile(file) {
var $li = $('#' + file.id);
delete percentages[file.id];
updateTotalProgress();
$li.off().find('.file-panel').off().end().remove();
}
function updateTotalProgress() {
var loaded = 0,
total = 0,
spans = $progress.children(),
percent;
$.each(percentages, function(k, v) {
total += v[ 0 ];
loaded += v[ 0 ] * v[ 1 ];
});
percent = total ? loaded / total : 0;
spans.eq( 0 ).text( Math.round( percent * 100 ) + '%' );
spans.eq( 1 ).css( 'width', Math.round( percent * 100 ) + '%' );
updateStatus();
}
function updateStatus() {
var text = '', stats;
if (state === 'ready') {
text = '选中' + fileCount + '个文件,共' + WebUploader.formatSize(fileSize) + '';
} else if (state === 'confirm') {
stats = uploader.getStats();
if (stats.uploadFailNum) {
text = '已成功上传' + stats.successNum+ '个照片至服务器,'+ stats.uploadFailNum + '个文件上传失败,<a class="retry" href="#">重新上传</a>失败文件或<a class="ignore" href="#">忽略</a>'
}
} else {
stats = uploader.getStats();
text = '' + fileCount + '张(' + WebUploader.formatSize(fileSize) + '),已上传' + stats.successNum + '';
if (stats.uploadFailNum) {
text += ',失败' + stats.uploadFailNum + '';
}
}
$info.html(text);
}
function setState(val) {
var file, stats;
if (val === state) {
return;
}
$upload.removeClass('state-' + state);
$upload.addClass('state-' + val);
state = val;
switch (state) {
case 'pedding':
$placeHolder.removeClass('element-invisible');
$queue.parent().removeClass('filled');
$queue.hide();
$statusBar.addClass('element-invisible');
uploader.refresh();
break;
case 'ready':
$placeHolder.addClass('element-invisible');
$( '#filePicker2' ).removeClass( 'element-invisible');
$queue.parent().addClass('filled');
$queue.show();
$statusBar.removeClass('element-invisible');
uploader.refresh();
break;
case 'uploading':
$( '#filePicker2' ).addClass( 'element-invisible' );
$progress.show();
$upload.text( '暂停上传' );
break;
case 'paused':
$progress.show();
$upload.text( '继续上传' );
break;
case 'confirm':
$progress.hide();
$upload.text( '开始上传' ).addClass( 'disabled' );
stats = uploader.getStats();
if ( stats.successNum && !stats.uploadFailNum ) {
setState( 'finish' );
return;
}
break;
case 'finish':
stats = uploader.getStats();
if (stats.successNum) {
alert( '上传成功' );
} else {
// 没有成功的文件,重设
state = 'done';
location.reload();
}
break;
}
updateStatus();
}
var folderId = "1";//当前树所在文件夹目录的位置
var folderName = "";//当前树所在文件夹目录的位置名称
var fileType = "";//表格编辑时的文件类型
var fileId = "";//表格编辑时的文件id
layui.config({
base: basePath,
version: skyeyeVersion
}).extend({
window: 'js/winui.window'
}).define(['window', 'table', 'jquery', 'winui', 'fsCommon', 'fsTree', 'viewer', 'contextMenu'], function (exports) {
winui.renderColor();
var $ = layui.jquery,
fsTree = layui.fsTree,
fsCommon = layui.fsCommon,
table = layui.table;
//模板对象
var treeNorightTemplate = $('#treeNorightTemplate').html(),
treerightTemplate = $("#treerightTemplate").html();
/********* tree 处理 start *************/
var ztree = null;
fsTree.render({
id: "treeDemo",
url: reqBasePath + "sysenclosure001",
checkEnable: false,
loadEnable: true,//异步加载
showLine: false,
showIcon: true,
clickCallback: zTreeOnClick,
onDblClick: function(){
},
onAsyncSuccess: function(id){
}
}, function(id){
ztree = $.fn.zTree.getZTreeObj(id);
loadThisFolderChild();//加载子文件夹
});
/**
* 点击事件
*/
function zTreeOnClick(event, treeId, treeNode) {
if(treeNode.id != folderId){
folderId = treeNode.id;
loadThisFolderChild();
}
//展开
if(!treeNode.open){//如果节点不展开,则展开
ztree.expandNode(treeNode);
}
};
/********* tree 处理 end *************/
//默认初始化树
var initTreeSel = false;
/**
* 加载子文件夹过度动画
*/
function loadThisFolderChild(){
setTimeout(function(){
loadThisFolderChildData();
}, 200);
}
/**
* 加载子文件夹
*/
function loadThisFolderChildData(){
if(!initTreeSel){
initTreeSel = true;
ztree.expandNode(ztree.getNodeByParam("id", folderId, null));//展开指定节点-我的文档
ztree.selectNode(ztree.getNodeByParam("id", folderId, null));//选中指定节点-我的文档
table.render({
id: 'messageTable',
elem: '#messageTable',
method: 'post',
url: reqBasePath + 'sysenclosure004',
where: {parentId: folderId},
even: true,
page: false,
cols: [[
{ title: systemLanguage["com.skyeye.serialNumber"][languageType], type: 'numbers' },
{ field: 'name', title: '文件名', align: 'left', width: 400 },
{ field: 'fileSize', title: '文件大小', align: 'center', width: 120},
{ field: 'createTime', title: '上传时间', align: 'center', width: 150 },
{ title: systemLanguage["com.skyeye.operation"][languageType], fixed: 'right', align: 'center', width: 150, toolbar: '#tableBar'}
]],
done: function(json) {
matchingLanguage();
}
});
table.on('tool(messageTable)', function (obj) {
var data = obj.data;
var layEvent = obj.event;
if (layEvent === 'edit') { //编辑
edit(data);
} else if (layEvent === 'download'){ //下载
download(fileBasePath + data.fileAddress, data.name);
}
});
} else {
table.reloadData("messageTable", {where:{parentId: folderId}});
}
}
//编辑
function edit(data) {
var node = ztree.getNodeByParam("id", folderId, null);
folderName = getFilePath(node);
fileType = data.fileType;
fileId = data.id;
var _title = "";
if (data.fileType === 'folder'){
_title = "编辑文件夹";
} else {
_title = "编辑文件";
}
_openNewWindows({
url: "../../tpl/sysenclosure/editenclosure.html",
title: _title,
pageId: "editenclosurepage",
area: ['400px', '200px'],
callBack: function (refreshCode) {
winui.window.msg(systemLanguage["com.skyeye.successfulOperation"][languageType], {icon: 1, time: 2000});
refreshTreePointNode();
loadThisFolderChild();
}});
}
//刷新树指定节点
function refreshTreePointNode(){
//刷新节点
var nownode = ztree.getNodesByParam("id", folderId, null);
ztree.reAsyncChildNodes(nownode[0], "refresh");
}
//新增文件夹
$("body").on("click", "#addFolderBean", function (e) {
var node = ztree.getNodeByParam("id", folderId, null);
folderName = getFilePath(node);
if(folderName.split('/').length >= 4){
winui.window.msg("只允许添加两层级别的文件夹", {icon: 5,time: 2000});
return;
}
_openNewWindows({
url: "../../tpl/sysenclosure/addenclosure.html",
title: "新增文件夹",
pageId: "addenclosurepage",
area: ['400px', '200px'],
callBack: function (refreshCode) {
winui.window.msg(systemLanguage["com.skyeye.successfulOperation"][languageType], {icon: 1, time: 2000});
refreshTreePointNode();
loadThisFolderChild();
}});
});
//上传附件
$("body").on("click", "#addSenclosureBean", function (e) {
_openNewWindows({
url: "../../tpl/sysenclosure/enclosureupload.html",
title: "上传附件",
pageId: "enclosureuploadpage",
area: ['400px', '350px'],
callBack: function (refreshCode) {
loadThisFolderChild();
}});
});
//刷新数据
$("body").on("click", "#reloadTable", function (e) {
refreshTreePointNode();
loadThisFolderChild();
});
//获取指定节点的所有父节点的名字
function getFilePath(treeObj) {
if (treeObj == null) return "";
var filename = treeObj.name + '/';
var pNode = treeObj.getParentNode();
if (pNode != null) {
filename = getFilePath(pNode) + filename;
}
return filename;
}
exports('myNote', {});
});
......@@ -7,10 +7,14 @@ layui.config({
window: 'js/winui.window'
}).define(['window', 'jquery', 'winui', 'webuploader'], function (exports) {
winui.renderColor();
layui.use(['form'], function (form) {
var index = parent.layer.getFrameIndex(window.name);
var $ = layui.$;
var $ = layui.$,
form = layui.form;
type = GetUrlParam("type");
if (isNull(type)) {
winui.window.msg('文件类型不能为空.', {icon: 2, time: 2000});
return false;
}
// 初始化上传
loadUploadMethod();
......@@ -22,8 +26,6 @@ layui.config({
}
return false;
});
});
});
function loadUploadMethod(){
......@@ -97,9 +99,9 @@ function loadUploadMethod(){
beforeSend: function(block) {
var deferred = WebUploader.Deferred();
var params = {
"md5": md5,
"chunk": block.chunk,
"chunkSize": block.end - block.start
md5: md5,
chunk: block.chunk,
chunkSize: block.end - block.start
};
// 判断指定块是否已经上传
AjaxPostUtil.request({url: reqBasePath + "checkUploadFileChunks", params: params, type: 'json', method: 'POST', callback: function (json) {
......@@ -118,11 +120,14 @@ function loadUploadMethod(){
var params = {
md5: md5,
name: data.name,
size: data.size
size: data.size,
type: type
};
// 如果分块上传成功,则通知后台合并分块
AjaxPostUtil.request({url: reqBasePath + "uploadFileChunks", params: params, type: 'json', method: 'POST', callback: function (json) {
// todo 待处理
AjaxPostUtil.request({url: reqBasePath + "skyeyeUploadFileChunks", params: params, type: 'json', method: 'POST', callback: function (json) {
if (typeof(parent.uploadFileCallback) == "function") {
parent.uploadFileCallback(json);
}
}});
}
});
......@@ -145,7 +150,7 @@ function loadUploadMethod(){
fileSizeLimit: 2000 * 1024 * 1024,//最大2GB
fileSingleSizeLimit: 2000 * 1024 * 1024,
resize: false,//不压缩
server: reqBasePath + 'uploadFile',
server: reqBasePath + 'skyeyeUploadFile',
fileNumLimit: 300
});
// 添加“添加文件”的按钮,
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../../assets/lib/layui/css/layui.css" rel="stylesheet" />
<link href="../../assets/lib/winui/css/winui.css" rel="stylesheet" />
<link href="../../assets/lib/layui/lay/modules/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<link href="../../assets/lib/layui/lay/modules/contextMenu/jquery.contextMenu.min.css" rel="stylesheet" />
</head>
<body>
<div class="layui-tab layui-tab-brief" style="height: calc(100% - 60px);">
<ul class="layui-tab-title">
<li class="layui-this">本地上传</li>
<li>我的附件库</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show" style="height: 100%">
<iframe style="width: 100%; border: 0px; height: 100%" scrolling="no" src="../../tpl/uploadFile/uploadFile.html?type=30"></iframe>
</div>
<div class="layui-tab-item" style="height: 100%">
<ul id="treeDemo" class="ztree fsTree" method="get" isRoot="1"
treeIdKey="id" inputs="parentId" treePIdKey="parentId" clickCallbackInputs="parentId:$id" treeName="name" style="height: 240px;"></ul>
</div>
</div>
</div>
<div class="layui-col-xs12" style="margin-top: 10px;">
<div class="layui-input-block">
<button class="winui-btn" type="button" id="cancle"><language showName="com.skyeye.cancel"></language></button>
<button class="winui-btn" type="button" id="confimChoose"><language showName="com.skyeye.determine"></language></button>
</div>
</div>
<script src="../../assets/lib/layui/layui.js"></script>
<script src="../../assets/lib/layui/custom.js"></script>
<script type="text/javascript" src="../../assets/lib/layui/lay/modules/jquery-min.js"></script>
<script type="text/javascript" src="../../assets/lib/layui/lay/modules/contextMenu/jquery.contextMenu.min.js"></script>
<script type="text/javascript" src="../../assets/lib/layui/lay/modules/ztree/js/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="../../assets/lib/layui/lay/modules/ztree/js/jquery.ztree.exhide.min.js"></script>
<script type="text/javascript">
layui.config({base : '../../js/sysEnclosure/'}).use('enclosureBusinessChoose');
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../../assets/lib/layui/css/layui.css" rel="stylesheet" />
<link href="../../assets/lib/winui/css/winui.css" rel="stylesheet" />
</head>
<body>
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
<li class="layui-this">本地上传</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show" style="height: 100%">
<iframe id="showBean" style="width: 100%; border: 0px; height: 100%" scrolling="no" src="../../tpl/uploadFile/uploadFile.html?type=30"></iframe>
</div>
</div>
</div>
<script src="../../assets/lib/layui/layui.js"></script>
<script src="../../assets/lib/layui/custom.js"></script>
<script type="text/javascript">
layui.config({base : '../../js/sysEnclosure/'}).use('enclosureUpload');
</script>
</body>
</html>
\ No newline at end of file
......@@ -5,32 +5,23 @@
<title></title>
<link href="../../assets/lib/layui/css/layui.css" rel="stylesheet" />
<link href="../../assets/lib/winui/css/winui.css" rel="stylesheet" />
<link href="../../assets/lib/layui/lay/modules/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<link href="../../assets/lib/layui/css/file-tree4.css" rel="stylesheet" />
<link href="../../assets/lib/layui/lay/modules/contextMenu/jquery.contextMenu.min.css" rel="stylesheet" />
</head>
<body>
<div class="winui-toolbar">
<div class="winui-tool">
<button id="reloadTable" class="winui-toolbtn"><i class="fa fa-refresh" aria-hidden="true"></i><language showName="com.skyeye.refreshDataBtn"></language></button>
<button id="addFolderBean" class="winui-toolbtn"><i class="fa fa-folder-open-o" aria-hidden="true"></i>新建文件夹</button>
<button id="addSenclosureBean" class="winui-toolbtn"><i class="fa fa-cloud-upload" aria-hidden="true"></i>上传附件</button>
<button id="reloadTable" class="winui-toolbtn search-table-btn-right"><i class="fa fa-refresh" aria-hidden="true"></i><language showName="com.skyeye.refreshDataBtn"></language></button>
<button id="addSenclosureBean" class="winui-toolbtn search-table-btn-right"><i class="fa fa-cloud-upload" aria-hidden="true"></i>上传附件</button>
</div>
</div>
<div class="sysenclosure-console">
<div class="sysenclosure-left">
<div class="sysenclosure-left-title">
‘我的附件’属于根目录,不算在文件夹级别内,除了‘我的附件’只允许添加两层级别的文件夹
</div>
<div class="sysenclosure-left-content">
<ul id="treeDemo" class="ztree fsTree" method="get" isRoot="0"
treeIdKey="id" inputs="parentId" treePIdKey="pId" clickCallbackInputs="parentId:$id" treeName="name"></ul>
<div class="sysenclosure-left-content" id="catalogBox">
</div>
</div>
<div class="sysenclosure-right">
<table id="messageTable" lay-filter="messageTable"></table>
<script type="text/html" id="tableBar">
<a class="layui-btn layui-btn-xs" lay-event="edit"><language showName="com.skyeye.editBtn"></language></a>
{{# if(d.fileType != 'folder'){ }}
<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="download">下载</a>
{{# } }}
......@@ -40,12 +31,8 @@
<script src="../../assets/lib/layui/layui.js"></script>
<script src="../../assets/lib/layui/custom.js"></script>
<script type="text/javascript" src="../../assets/lib/layui/lay/modules/jquery-min.js"></script>
<script type="text/javascript" src="../../assets/lib/layui/lay/modules/contextMenu/jquery.contextMenu.min.js"></script>
<script type="text/javascript" src="../../assets/lib/layui/lay/modules/ztree/js/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="../../assets/lib/layui/lay/modules/ztree/js/jquery.ztree.exhide.min.js"></script>
<script type="text/javascript">
layui.config({base: '../../js/sysenclosure/'}).use('mysysenclosure');
layui.config({base: '../../js/sysEnclosure/'}).use('myEnclosureList');
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../../assets/lib/layui/css/layui.css" rel="stylesheet" />
<link href="../../assets/lib/winui/css/winui.css" rel="stylesheet" />
</head>
<body>
<div style="padding:20px; margin:0 auto;">
<form class="layui-form" action="" id="showForm">
<div class="layui-form-item">
<label class="layui-form-label">文件夹<i class="red">*</i></label>
<div class="layui-input-block">
<input type="text" id="typeName" name="typeName" win-verify="required" placeholder="请输入文件夹名称" class="layui-input" maxlength="100"/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">所属文件夹<i class="red">*</i></label>
<div class="layui-input-block ver-center" id="parentFolderName">
</div>
</div>
<div class="layui-form-item layui-col-xs12">
<div class="layui-input-block">
<button class="winui-btn" id="cancle"><language showName="com.skyeye.cancel"></language></button>
<button class="winui-btn" lay-submit lay-filter="formAddBean"><language showName="com.skyeye.save"></language></button>
</div>
</div>
</form>
</div>
<script src="../../assets/lib/layui/layui.js"></script>
<script src="../../assets/lib/layui/custom.js"></script>
<script type="text/javascript">
layui.config({base: '../../js/sysenclosure/'}).use('addenclosure');
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../../assets/lib/layui/css/layui.css" rel="stylesheet" />
<link href="../../assets/lib/winui/css/winui.css" rel="stylesheet" />
</head>
<body>
<div style="padding:20px; margin:0 auto;">
<form class="layui-form" action="" id="showForm">
<div class="layui-form-item">
<label class="layui-form-label">文件夹<i class="red">*</i></label>
<div class="layui-input-block">
<input type="text" id="typeName" name="typeName" win-verify="required" placeholder="请输入文件夹名称" class="layui-input" maxlength="100"/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">所属文件夹<i class="red">*</i></label>
<div class="layui-input-block ver-center" id="parentFolderName">
</div>
</div>
<div class="layui-form-item layui-col-xs12">
<div class="layui-input-block">
<button class="winui-btn" id="cancle"><language showName="com.skyeye.cancel"></language></button>
<button class="winui-btn" lay-submit lay-filter="formAddBean"><language showName="com.skyeye.save"></language></button>
</div>
</div>
</form>
</div>
<script src="../../assets/lib/layui/layui.js"></script>
<script src="../../assets/lib/layui/custom.js"></script>
<script type="text/javascript">
layui.config({base: '../../js/sysenclosure/'}).use('editenclosure');
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../../assets/lib/layui/css/layui.css" rel="stylesheet" />
<link href="../../assets/lib/winui/css/winui.css" rel="stylesheet" />
<style>
#filePicker div:nth-child(2){
position: absolute !important;
inset: 0px auto auto 130px !important;
width: 72px !important;
height: 30px !important;
overflow: hidden !important;
top: 0px !important;
}
</style>
</head>
<body>
<div class="txtcenter">
<div class="layui-tab layui-tab-card" style="margin: 0px">
<ul class="layui-tab-title">
<li class="layui-this">本地上传</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<form class="layui-form" action="" id="showForm" style="height: 240px;">
<div class="layui-form-item layui-col-xs12">
<div id="uploader" class="wu-example">
<div class="queueList">
<div id="dndArea" class="placeholder">
<div id="filePicker"></div>
<p>或将文件拖到这里,单次最多可选300个</p>
</div>
</div>
<div class="statusBar" style="display:none;">
<div class="progress">
<span class="text">0%</span>
<span class="percentage"></span>
</div><div class="info"></div>
<div class="btns">
<div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="layui-tab-item">2</div>
</div>
</div>
</div>
<script src="../../assets/lib/layui/layui.js"></script>
<script src="../../assets/lib/layui/custom.js"></script>
<script type="text/javascript">
layui.config({base : '../../js/sysenclosure/'}).use('enclosureupload');
</script>
</body>
</html>
\ No newline at end of file
......@@ -8,7 +8,6 @@
<style>
#filePicker div:nth-child(2){
position: absolute !important;
inset: 0px auto auto 130px !important;
width: 72px !important;
height: 30px !important;
overflow: hidden !important;
......@@ -17,9 +16,7 @@
</style>
</head>
<body>
<div class="txtcenter">
<form class="layui-form" action="" id="showForm" style="height: 240px;">
<div class="layui-form-item layui-col-xs12">
<form class="layui-form" action="" id="showForm" style="height: 100%;">
<div id="uploader" class="wu-example">
<div class="queueList">
<div id="dndArea" class="placeholder">
......@@ -27,7 +24,7 @@
<p>或将文件拖到这里,单次最多可选300个</p>
</div>
</div>
<div class="statusBar" style="display:none;">
<div class="statusBar" style="display: none;">
<div class="progress">
<span class="text">0%</span>
<span class="percentage"></span>
......@@ -37,9 +34,7 @@
</div>
</div>
</div>
</div>
</form>
</div>
<script src="../../assets/lib/layui/layui.js"></script>
<script src="../../assets/lib/layui/custom.js"></script>
<script type="text/javascript">
......
......@@ -40,6 +40,7 @@ var customerJS = {
"initTableSearchUtil": "../../assets/lib/layui/customer/tableUtil/initTableSearchUtil.js", // 表格高级查询插件
"skyeyeClassEnumUtil": "../../assets/lib/layui/customer/skyeye/skyeyeClassEnumUtil.js", // 动态枚举插件
"teamObjectPermissionUtil": "../../assets/lib/layui/customer/teamObjectPermissionUtil.js", // 团队成员权限插件
"catalogTreeUtil": "../../assets/lib/layui/customer/tree/catalogTreeUtil.js", // 目录功能的工具类
};
//系统基础信息
......
......@@ -51,10 +51,10 @@ var skyeyeEnclosure = {
initClick: function (id, btnId, callback){
$("body").on("click", "#" + btnId, function() {
_openNewWindows({
url: "../../tpl/common/enclosureupload.html?boxId=" + id,
url: "../../tpl/sysEnclosure/enclosureBusinessChoose.html?boxId=" + id,
title: "上传附件",
pageId: "enclosureuploadpage",
area: ['420px', '420px'],
pageId: "enclosureBusinessChoose",
area: ['70vw', '70vh'],
callBack: function (refreshCode) {
// 重新加载dom对象
skyeyeEnclosure.loadEnclosureHTML(id, btnId, 1);
......
// 目录功能的工具类
var catalogTreeUtil = {
config: {
boxId: '', // 展示的位置id
objectId: '', //业务对象数据的id
className: null, // 业务对象的className
addOrUser: false, // 是否根据当前登录人查询
choose: null, // 是否可以选择 null:不可以选择 radio:单选 checkBox:多选
loadType: true, // 加载的类型 true:一次性加载完 false:异步加载
auth: {}, // 权限信息 数据格式:{"add": true},代表add操作有权限
isRoot: 1, // 是否显示根目录,1:是 0:否
chooseCallback: undefined, // 选中节点后加载的事件
},
/**
* 初始化加载方式
*
* @param _config 配置信息
*/
init: function (_config) {
catalogTreeUtil.config = $.extend(true, catalogTreeUtil.config, _config);
catalogTreeUtil.loadTree();
},
/**
* 加载树
*/
loadTree: function () {
var showType = catalogTreeUtil.config.choose;
var showBoxId = catalogTreeUtil.config.boxId;
var isRoot = catalogTreeUtil.config.isRoot;
var data = catalogTreeUtil.getData();
if (showType == 'radio' || showType == 'checkBox') {
var _html = catalogTreeUtil.getShowTteeHtml(showBoxId, isRoot);
var _js = `<script>
layui.define(["jquery", 'fsTree'], function(exports) {
var jQuery = layui.jquery,
fsTree = layui.fsTree;
(function($) {
var ${showBoxId}Object;
fsTree.render({
id: "${showBoxId}Tree",
simpleData: '` + JSON.stringify(data) + `',
checkEnable: true,
loadEnable: false,
chkStyle: "radio",
showLine: false,
showIcon: true,
expandSpeed: 'fast',
onCheck: function (event, treeId, treeNode) {
$('#${showBoxId}').attr('chooseId', treeNode.id);
}
}, function(id) {
${showBoxId}Object = $.fn.zTree.getZTreeObj(id);
fuzzySearch(id, '#${showBoxId}Name', null, true);
});
if (` + !isNull(defaultId) + `) {
var zTree = ${showBoxId}Object.getCheckedNodes(false);
for (var i = 0; i < zTree.length; i++) {
if(zTree[i].id == '` + defaultId + `'){
${showBoxId}Object.checkNode(zTree[i], true, true);
$('#${showBoxId}').attr('chooseId', zTree[i].id);
}
}
}
})(jQuery);});
</script>`;
$("#" + showBoxId).append(_html + _js);
} else {
var _html = catalogTreeUtil.getShowTteeHtml(showBoxId, isRoot);
var _js = `<script>
layui.define(["jquery", 'fsTree'], function(exports) {
var jQuery = layui.jquery,
fsTree = layui.fsTree;
(function($) {
fsTree.render({
id: "${showBoxId}Tree",
simpleData: '` + JSON.stringify(data) + `',
checkEnable: false,
loadEnable: false,
showLine: false,
showIcon: true,
expandSpeed: 'fast',
clickCallback: onClickTree,
onDblClick: onClickTree
}, function(id) {
fuzzySearch(id, '#${showBoxId}Name', null, true);
});
function onClickTree(event, treeId, treeNode) {
var chooseId;
if (treeNode == undefined || treeNode.id == 0) {
chooseId = "";
} else {
chooseId = treeNode.id;
}
$('#${showBoxId}Choose').val(chooseId).change();
}
})(jQuery);});
</script>`;
$("#" + showBoxId).append(_html + _js);
$("#" + showBoxId + "Choose").on("change", function() {
if (typeof (catalogTreeUtil.config.chooseCallback) == "function") {
catalogTreeUtil.config.chooseCallback($(this).val());
}
});
}
},
getShowTteeHtml: function (showBoxId, isRoot) {
var _html = `<link href="../../assets/lib/layui/lay/modules/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<link href="../../assets/lib/layui/lay/modules/contextMenu/jquery.contextMenu.min.css" rel="stylesheet" />
<div class="layui-inline" style="width: 100%">
<div class="layui-input-inline" style="width: 100%;">
<input type="text" id="${showBoxId}Name" name="${showBoxId}Name" placeholder="请输入要搜索的节点" class="layui-input" />
<input type="hidden" id="${showBoxId}Choose" name="${showBoxId}Choose" class="layui-input" />
</div>
</div>
<div class="layui-inline" style="width: 100%;">
<ul id="${showBoxId}Tree" class="ztree fsTree" method="get" isRoot="${isRoot}" isLoad="0" treeIdKey="id" inputs="parentId" treePIdKey="parentId"
clickCallbackInputs="parentId:$id" treeName="name" style="overflow-y: auto; height: 100%;"></ul>
</div>
<script type="text/javascript" src="../../assets/lib/layui/lay/modules/jquery-min.js"></script>
<script type="text/javascript" src="../../assets/lib/layui/lay/modules/contextMenu/jquery.contextMenu.min.js"></script>
<script type="text/javascript" src="../../assets/lib/layui/lay/modules/ztree/js/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="../../assets/lib/layui/lay/modules/ztree/js/jquery.ztree.exhide.min.js"></script>
<script type="text/javascript" src="../../assets/lib/layui/lay/modules/ztree/js/fuzzysearch.js"></script>`;
return _html;
},
/**
* 一次性获取所有数据
*/
getData: function () {
var data = [];
var params = {
objectId: catalogTreeUtil.config.objectId,
objectKey: catalogTreeUtil.config.className,
addOrUser: catalogTreeUtil.config.addOrUser
};
AjaxPostUtil.request({url: reqBasePath + "queryCatalogForTree", params: params, type: 'json', method: "POST", callback: function(json) {
data = [].concat(json.rows);
}, async: false});
return data;
}
};
......@@ -4858,6 +4858,7 @@ body .layer-ext-winconfirm .layui-layer-content {
}
.wu-example {
height: calc(100% - 20px);
position: relative;
padding: 0px 15px 15px;
margin: 0;
......@@ -4884,10 +4885,10 @@ body .layer-ext-winconfirm .layui-layer-content {
}
#uploader .placeholder {
min-height: 350px;
padding-top: 178px;
min-height: 90px;
padding-top: 110px;
text-align: center;
background: url(../../../images/image.png) center 93px no-repeat;
background: url(../../../images/image.png) center 20px no-repeat;
color: #cccccc;
font-size: 18px;
position: relative;
......@@ -4976,6 +4977,7 @@ body .layer-ext-winconfirm .layui-layer-content {
}
#uploader .queueList {
max-height: calc(100% - 20px);
margin: 10px 5px;
border: 3px dashed #e6e6e6;
}
......@@ -4996,16 +4998,6 @@ body .layer-ext-winconfirm .layui-layer-content {
clip: rect(1px,1px,1px,1px);
}
#uploader .placeholder {
min-height: 90px;
padding-top: 110px;
text-align: center;
background: url(../../../images/image.png) center 20px no-repeat;
color: #cccccc;
font-size: 13px;
position: relative;
}
#uploader .placeholder .webuploader-pick {
font-size: 13px;
background: #00b7ee;
......
var folderId = "";
var enclosureList = new Array();
layui.config({
base: basePath,
version: skyeyeVersion
}).extend({
window: 'js/winui.window'
}).define(['window', 'jquery', 'winui', 'webuploader', 'fsTree'], function (exports) {
winui.renderColor();
layui.use(['form'], function (form) {
var index = parent.layer.getFrameIndex(window.name);
var $ = layui.$,
fsTree = layui.fsTree;
// 附件所属目录
folderId = "0";
var boxId = GetUrlParam('boxId');
enclosureList = [].concat(JSON.parse(parent.$("#" + boxId).attr(skyeyeEnclosure.enclosureListKey)));
// 初始化上传
loadUploadMethod();
matchingLanguage();
form.render();
form.on('submit(fileUploadStart)', function (data) {
if (winui.verifyForm(data.elem)) {
uoloadObj.upload();
}
return false;
});
var ztree = null;
/********* tree 处理 start *************/
loadMyEnclosureList();
function loadMyEnclosureList(){
fsTree.render({
id: "treeDemo",
url: reqBasePath + "sysenclosure010",
checkEnable: true,
loadEnable: false,//异步加载
showLine: false,
showIcon: true,
onDblClick: function(){
},
onAsyncSuccess: function(id){
},
onCheck: zTreeOnCheck //选中回调函数
}, function(id){
ztree = $.fn.zTree.getZTreeObj(id);
var zTreeChecked = ztree.getCheckedNodes(false);
for (var i = 0; i < zTreeChecked.length; i++) {
for(var j = 0; j < enclosureList.length; j++){
if(zTreeChecked[i].id == enclosureList[j].id){
ztree.checkNode(zTreeChecked[i], true, true);
}
}
}
loadThisFolderChild();
});
}
function loadThisFolderChild(){
ztree.expandNode(ztree.getNodeByParam("id", "1", null));//展开指定节点-我的文档
ztree.selectNode(ztree.getNodeByParam("id", "1", null));//选中指定节点-我的文档
}
//选中或取消选中的回调函数
function zTreeOnCheck(event, treeId, treeNode){
//获取选中节点
var zTree = ztree.getCheckedNodes(true);
for (var i = 0; i < zTree.length; i++) {
if (!isNull(zTree[i].fileType) && zTree[i].fileType != "folder"){
addToArray({
id: zTree[i].id,
name: zTree[i].name,
fileAddress: zTree[i].fileAddress
});
}
}
//获取未选中节点
zTree = ztree.getCheckedNodes(false);
for (var i = 0; i < zTree.length; i++) {
if (!isNull(zTree[i].fileType) && zTree[i].fileType != "folder"){
removeToArray(zTree[i].id);
}
}
}
/********* tree 处理 end *************/
// 取消
$("body").on("click", "#cancle", function() {
parent.layer.close(index);
});
//确定
$("body").on("click", "#confimChoose", function() {
var nodes = ztree.getCheckedNodes(true);
for(var i = 0; i < nodes.length; i++){
var node = nodes[i];
if (!isNull(node.fileType) && node.fileType != "folder"){
addToArray({
id: node.id,
name: node.name,
fileAddress: node.fileAddress
});
}
}
parent.layer.close(index);
parent.$("#" + boxId).attr(skyeyeEnclosure.enclosureListKey, JSON.stringify(enclosureList));
parent.refreshCode = '0';
});
});
});
//向集合中添加元素
//参数为json
function addToArray(data) {
var inArray = false;
$.each(enclosureList, function(i, item) {
if(item.id === data.id){
inArray = true;
return false;
}
});
if(!inArray){//如果该元素在集合中不存在
enclosureList.push({
id: data.id,
name: data.name,
fileAddress: data.fileAddress
});
}
}
//移除集合中的元素
function removeToArray(id){
var inArray = -1;
$.each(enclosureList, function(i, item) {
if(id === item.id) {
inArray = i;
return false;
}
});
if(inArray != -1){//如果该元素在集合中存在
enclosureList.splice(inArray, 1);
}
}
function loadUploadMethod(){
$wrap = $('#uploader'),
// 文件容器
$queue = $('<ul class="filelist"></ul>').appendTo( $wrap.find('.queueList') ),
// 状态栏,包括进度和控制按钮
$statusBar = $wrap.find('.statusBar'),
// 文件总体选择信息。
$info = $statusBar.find('.info'),
// 上传按钮
$upload = $wrap.find('.uploadBtn'),
// 没选择文件之前的内容。
$placeHolder = $wrap.find('.placeholder'),
// 总体进度条
$progress = $statusBar.find('.progress').hide(),
// 添加的文件数量
fileCount = 0,
// 添加的文件总大小
fileSize = 0,
// 优化retina, 在retina下这个值是2
ratio = window.devicePixelRatio || 1,
// 缩略图大小
thumbnailWidth = 110 * ratio,
thumbnailHeight = 110 * ratio,
// 可能有pedding, ready, uploading, confirm, done.
state = 'pedding',
// 所有文件的进度信息,key为file id
percentages = {},
supportTransition = (function(){
var s = document.createElement('p').style,
r = 'transition' in s ||
'WebkitTransition' in s ||
'MozTransition' in s ||
'msTransition' in s ||
'OTransition' in s;
s = null;
return r;
})(),
// WebUploader实例
uploader;
if (!WebUploader.Uploader.support()) {
alert( 'Web Uploader 不支持您的浏览器!如果你使用的是IE浏览器,请尝试升级 flash 播放器');
throw new Error( 'WebUploader does not support the browser you are using.' );
}
var md5;
//监听分块上传过程中的三个时间点
WebUploader.Uploader.register({
"before-send-file": "beforeSendFile",
"before-send": "beforeSend",
"after-send-file": "afterSendFile"
}, {
//时间点1:所有分块进行上传之前调用此函数
beforeSendFile: function(file) {
var deferred = WebUploader.Deferred();
//1、计算文件的唯一标记,用于断点续传
(new WebUploader.Uploader()).md5File(file, 0, 10 * 1024 * 1024)
.progress(function(percentage) {
$('#' + file.id).find("p.state").text("正在读取文件信息...");
})
.then(function(val) {
md5 = val;
$('#' + file.id).find("p.state").text("成功获取文件信息...");
//获取文件信息后进入下一步
deferred.resolve();
});
return deferred.promise();
},
//时间点2:如果有分块上传,则每个分块上传之前调用此函数
beforeSend: function(block) {
var deferred = WebUploader.Deferred();
var params = {
"md5": md5,
"chunk": block.chunk,
"chunkSize": block.end - block.start
};
AjaxPostUtil.request({url: reqBasePath + "checkUploadFileChunks", params: params, type: 'json', callback: function (json) {
//分块存在,跳过
deferred.reject();
}, errorCallback: function () {
//分块不存在或不完整,重新发送该分块内容
deferred.resolve();
},async: false});
this.owner.options.formData.md5 = md5;
deferred.resolve();
return deferred.promise();
},
//时间点3:所有分块上传成功后调用此函数
afterSendFile: function (data) {
//如果分块上传成功,则通知后台合并分块
AjaxPostUtil.request({url: reqBasePath + "uploadFileChunks", params: {md5: md5, folderId: folderId, name: data.name, size: data.size}, type: 'json', callback: function (json) {
addToArray(json.bean);
}});
}
});
// 实例化
uploader = WebUploader.create({
pick: {
id: '#filePicker',
label: '选择文件'
},
formData: {
folderId: folderId
},
dnd: '#uploader .queueList',
paste: document.body,
// swf文件路径
swf: fileBasePath + '/assets/images/Uploader.swf',
disableGlobalDnd: true,//是否禁掉整个页面的拖拽功能
chunked: true,//是否要分片处理大文件上传
chunkSize: 10 * 1024 * 1024,
chunkRetry: 3,//网络问题上传失败后重试次数
threads: 1, //上传并发数
fileSizeLimit: 2000 * 1024 * 1024,//最大2GB
fileSingleSizeLimit: 2000 * 1024 * 1024,
resize: false,//不压缩
server: reqBasePath + 'uploadFile',
fileNumLimit: 300
});
// 添加“添加文件”的按钮,
uploader.addButton({
id: '#filePicker2',
label: '继续添加'
});
uploader.onUploadProgress = function(file, percentage) {
var $li = $('#'+file.id),
$percent = $li.find('.progress span');
$percent.css('width', percentage * 100 + '%');
percentages[file.id][1] = percentage;
updateTotalProgress();
};
uploader.onFileQueued = function(file) {
fileCount++;
fileSize += file.size;
if (fileCount === 1) {
$placeHolder.addClass( 'element-invisible' );
$statusBar.show();
}
addFile(file);
setState('ready');
updateTotalProgress();
};
uploader.onFileDequeued = function(file) {
fileCount--;
fileSize -= file.size;
if (!fileCount) {
setState( 'pedding' );
}
removeFile(file);
updateTotalProgress();
};
uploader.on( 'all', function( type ) {
var stats;
switch( type ) {
case 'uploadFinished':
setState( 'confirm' );
break;
case 'startUpload':
setState( 'uploading' );
break;
case 'stopUpload':
setState( 'paused' );
break;
}
});
uploader.on('uploadBeforeSend', function(block, data, headers) {
headers['X-Requested-With']= 'XMLHttpRequest';
$.extend(headers, getRequestHeaders());
data.folderId = folderId;
data.md5 = md5;
data.chunk = block.chunk;
data.chunkSize = block.end - block.start;
});
uploader.onError = function(code) {
alert('Eroor: ' + code);
};
$upload.on('click', function() {
if ($(this).hasClass( 'disabled')) {
return false;
}
if (state === 'ready') {
uploader.upload();
} else if (state === 'paused') {
uploader.upload();
} else if (state === 'uploading') {
uploader.stop(true);
}
});
$info.on('click', '.retry', function() {
uploader.retry();
});
$info.on('click', '.ignore', function() {
alert('todo');
});
$upload.addClass('state-' + state);
updateTotalProgress();
}
//当有文件添加进来时执行,负责view的创建
function addFile( file ) {
var $li = $( '<li id="' + file.id + '">' + '<p class="title">' + file.name + '</p>' + '<p class="imgWrap"></p>' + '<p class="progress"><span></span></p>' + '</li>' ),
$btns = $('<div class="file-panel">' + '<span class="cancel">删除</span>' + '<span class="rotateRight">向右旋转</span>' + '<span class="rotateLeft">向左旋转</span></div>').appendTo( $li ),
$prgress = $li.find('p.progress span'),
$wrap = $li.find( 'p.imgWrap' ),
$info = $('<p class="error"></p>'),
showError = function( code ) {
switch( code ) {
case 'exceed_size':
text = '文件大小超出';
break;
case 'interrupt':
text = '上传暂停';
break;
default:
text = '上传失败,请重试';
break;
}
$info.text( text ).appendTo( $li );
};
if ( file.getStatus() === 'invalid' ) {
showError( file.statusText );
} else {
$wrap.text( '预览中' );
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$wrap.text( '不能预览' );
return;
}
var img = $('<img src="'+src+'">');
$wrap.empty().append( img );
}, thumbnailWidth, thumbnailHeight );
percentages[ file.id ] = [ file.size, 0 ];
file.rotation = 0;
}
file.on('statuschange', function( cur, prev ) {
if ( prev === 'progress' ) {
$prgress.hide().width(0);
} else if ( prev === 'queued' ) {
$li.off( 'mouseenter mouseleave' );
$btns.remove();
}
// 成功
if ( cur === 'error' || cur === 'invalid' ) {
showError( file.statusText );
percentages[ file.id ][ 1 ] = 1;
} else if ( cur === 'interrupt' ) {
showError( 'interrupt' );
} else if ( cur === 'queued' ) {
percentages[ file.id ][ 1 ] = 0;
} else if ( cur === 'progress' ) {
$info.remove();
$prgress.css('display', 'block');
} else if ( cur === 'complete' ) {
$li.append( '<span class="success"></span>' );
}
$li.removeClass( 'state-' + prev ).addClass( 'state-' + cur );
});
$li.on( 'mouseenter', function() {
$btns.stop().animate({height: 30});
});
$li.on( 'mouseleave', function() {
$btns.stop().animate({height: 0});
});
$btns.on( 'click', 'span', function() {
var index = $(this).index(), deg;
switch ( index ) {
case 0:
uploader.removeFile( file );
return;
case 1:
file.rotation += 90;
break;
case 2:
file.rotation -= 90;
break;
}
if ( supportTransition ) {
deg = 'rotate(' + file.rotation + 'deg)';
$wrap.css({
'-webkit-transform': deg,
'-mos-transform': deg,
'-o-transform': deg,
'transform': deg
});
} else {
$wrap.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')');
}
});
$li.appendTo( $queue );
}
// 负责view的销毁
function removeFile(file) {
var $li = $('#' + file.id);
delete percentages[file.id];
updateTotalProgress();
$li.off().find('.file-panel').off().end().remove();
}
function updateTotalProgress() {
var loaded = 0,
total = 0,
spans = $progress.children(),
percent;
$.each(percentages, function(k, v) {
total += v[ 0 ];
loaded += v[ 0 ] * v[ 1 ];
});
percent = total ? loaded / total : 0;
spans.eq( 0 ).text( Math.round( percent * 100 ) + '%' );
spans.eq( 1 ).css( 'width', Math.round( percent * 100 ) + '%' );
updateStatus();
}
function updateStatus() {
var text = '', stats;
if (state === 'ready') {
text = '选中' + fileCount + '个文件,共' + WebUploader.formatSize(fileSize) + '';
} else if (state === 'confirm') {
stats = uploader.getStats();
if (stats.uploadFailNum) {
text = '已成功上传' + stats.successNum+ '个照片至服务器,'+ stats.uploadFailNum + '个文件上传失败,<a class="retry" href="#">重新上传</a>失败文件或<a class="ignore" href="#">忽略</a>'
}
} else {
stats = uploader.getStats();
text = '' + fileCount + '张(' + WebUploader.formatSize(fileSize) + '),已上传' + stats.successNum + '';
if (stats.uploadFailNum) {
text += ',失败' + stats.uploadFailNum + '';
}
}
$info.html(text);
}
function setState(val) {
var file, stats;
if (val === state) {
return;
}
$upload.removeClass('state-' + state);
$upload.addClass('state-' + val);
state = val;
switch (state) {
case 'pedding':
$placeHolder.removeClass('element-invisible');
$queue.parent().removeClass('filled');
$queue.hide();
$statusBar.addClass('element-invisible');
uploader.refresh();
break;
case 'ready':
$placeHolder.addClass('element-invisible');
$( '#filePicker2' ).removeClass( 'element-invisible');
$queue.parent().addClass('filled');
$queue.show();
$statusBar.removeClass('element-invisible');
uploader.refresh();
break;
case 'uploading':
$( '#filePicker2' ).addClass( 'element-invisible' );
$progress.show();
$upload.text( '暂停上传' );
break;
case 'paused':
$progress.show();
$upload.text( '继续上传' );
break;
case 'confirm':
$progress.hide();
$upload.text( '开始上传' ).addClass( 'disabled' );
stats = uploader.getStats();
if ( stats.successNum && !stats.uploadFailNum ) {
setState( 'finish' );
return;
}
break;
case 'finish':
stats = uploader.getStats();
if (stats.successNum) {
alert( '上传成功' );
} else {
// 没有成功的文件,重设
state = 'done';
location.reload();
}
break;
}
updateStatus();
}
......@@ -67,5 +67,6 @@
"dictData": {"name": "数据字典", "key": "com.skyeye.eve.service.impl.SysDictDataServiceImpl"},
"contacts": {"name": "联系人", "key": "com.skyeye.contacts.service.impl.ContactsServiceImpl"}
"contacts": {"name": "联系人", "key": "com.skyeye.contacts.service.impl.ContactsServiceImpl"},
"enclosure": {"name": "附件", "key": "com.skyeye.enclosure.service.impl.SysEnclosureServiceImpl"}
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../../assets/lib/layui/css/layui.css" rel="stylesheet" />
<link href="../../assets/lib/winui/css/winui.css" rel="stylesheet" />
<link href="../../assets/lib/layui/lay/modules/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<link href="../../assets/lib/layui/css/file-tree4.css" rel="stylesheet" />
<link href="../../assets/lib/layui/lay/modules/contextMenu/jquery.contextMenu.min.css" rel="stylesheet" />
<style>
#filePicker div:nth-child(2){
position: absolute !important;
inset: 0px auto auto 130px !important;
width: 72px !important;
height: 30px !important;
overflow: hidden !important;
top: 0px !important;
}
</style>
</head>
<body>
<div class="txtcenter">
<div class="layui-tab layui-tab-card" style="margin: 0px">
<ul class="layui-tab-title">
<li class="layui-this">本地上传</li>
<li>我的附件库</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<form class="layui-form" action="" id="showForm" style="height: 240px;">
<div class="layui-form-item layui-col-xs12">
<div id="uploader" class="wu-example">
<div class="queueList">
<div id="dndArea" class="placeholder">
<div id="filePicker"></div>
<p>或将文件拖到这里,单次最多可选300个</p>
</div>
</div>
<div class="statusBar" style="display:none;">
<div class="progress">
<span class="text">0%</span>
<span class="percentage"></span>
</div><div class="info"></div>
<div class="btns">
<div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="layui-tab-item">
<ul id="treeDemo" class="ztree fsTree" method="get" isRoot="0"
treeIdKey="id" inputs="parentId" treePIdKey="pId" clickCallbackInputs="parentId:$id" treeName="name" style="height: 240px;"></ul>
</div>
</div>
</div>
<div class="layui-form-item layui-col-xs12" style="margin-top: 10px;">
<div class="layui-input-block">
<button class="winui-btn" type="button" id="cancle"><language showName="com.skyeye.cancel"></language></button>
<button class="winui-btn" type="button" id="confimChoose"><language showName="com.skyeye.determine"></language></button>
</div>
</div>
</div>
<script src="../../assets/lib/layui/layui.js"></script>
<script src="../../assets/lib/layui/custom.js"></script>
<script type="text/javascript" src="../../assets/lib/layui/lay/modules/jquery-min.js"></script>
<script type="text/javascript" src="../../assets/lib/layui/lay/modules/contextMenu/jquery.contextMenu.min.js"></script>
<script type="text/javascript" src="../../assets/lib/layui/lay/modules/ztree/js/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="../../assets/lib/layui/lay/modules/ztree/js/jquery.ztree.exhide.min.js"></script>
<script type="text/javascript">
layui.config({base : '../../js/common/'}).use('enclosureupload');
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册