molong/sentcms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化后台UI

Browse Source 
完善表单上传组件
This commit is contained in:
tensent
2020-04-08 21:07:23 +08:00
parent f8c58b15cd
commit f42b62738d
18 changed files with 389 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/static/common/css/form.css Normal file
View File

@@ -0,0 +1,5 @@
.img-list{padding: 10px 0; display: flex; justify-content: start; flex-wrap: wrap;}
.img-list .item{width: 20%;}
.img-list .item .thumb{margin: 10px 10px 0 0 ; border: 1px solid #efefef; height: 120px; border-radius: 4px; position: relative; overflow: hidden;}
.img-list .item .thumb img{width: 100%;}
.img-list .item .close{position: absolute; right: 5px; top: 5px; opacity: 1; width: 20px; height: 20px; font-size: 10px; text-align: center; line-height: 20px; color: #ffffff; border-radius: 50%; background: #333333;}

64
public/static/common/js/require-form.js
View File

@@ -1,6 +1,17 @@
define(['jquery', 'bootstrap', 'validator'], function ($, undefined, Validator) {
var Form = {
config: {
editor: {
"full":['source', 'undo', 'redo', 'code', 'quote', 'cut',
'plainpaste', 'wordpaste', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '/',
'formatblock', 'fontname', 'fontsize', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', 'image', 'multiimage', 'media', 'insertfile', 'table', 'hr', 'baidumap',
'anchor', 'link', 'unlink','fullscreen'],
"base":['undo', 'redo', 'quote', 'formatblock', 'fontname', 'fontsize', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'image', 'media', 'table'],
},
fieldlisttpl: '<dd class="form-inline"><input type="text" name="<%=name%>[<%=index%>][key]" class="form-control" value="<%=row.key%>" size="10" /> <input type="text" name="<%=name%>[<%=index%>][value]" class="form-control" value="<%=row.value%>" /> <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span> <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span></dd>'
},
events: {
@@ -90,8 +101,10 @@ define(['jquery', 'bootstrap', 'validator'], function ($, undefined, Validator)
editor: function (form) {
//绑定编辑器元素事件
if ($(".form-editor", form).size() > 0) {
var items = $(".form-editor", form).data('items') || 'full';
require(['NKeditor'], function(){
KindEditor.create('.form-editor', {
items: Form.config.editor[items],
uploadJson: "/admin/upload/editor'",
fileManagerJson: "/admin/upload/filemanage"
})
@@ -261,12 +274,45 @@ define(['jquery', 'bootstrap', 'validator'], function ($, undefined, Validator)
var name = $(this).siblings('input[type=hidden]').attr('name');
layer.open({
type: 2,
shade: false,
area: ['60%', '440px'],
title: type == 'image' ? '图片' : '文件', //不显示标题
area: ['60%', '410px'],
title: false,
closeBtn: false,
shadeClose: true,
content: ['/'+Config.module+'/upload/index?name='+name+'&type='+type+'&limit='+limit, 'no'],
});
})
Form.events.imageDel();
Form.events.fileDel();
}
},
imageDel: function(){
//绑定图片上传删除按钮
if($('.picker-box .img-list .close').size() > 0){
$('.picker-box .img-list .close').on('click', function(){
var value = $('.picker-box input[type=hidden]').val().split(",");
value = value.filter(val => val != $(this).parents('.item').data('id'))
$(this).parents('.item').remove();
if(value.length > 0){
$('.picker-box input[type=hidden]').val(value.join(','));
}else{
$('.picker-box input[type=hidden]').val('');
}
})
}
},
fileDel: function(){
//绑定文件上传删除按钮
if($('.picker-box .file-list .close').size() > 0){
$('.picker-box .file-list .close').on('click', function(){
var value = $('.picker-box input[type=hidden]').val().split(",");
value = value.filter(val => val != $(this).parents('.item').data('id'))
$(this).parents('.item').remove();
if(value.length > 0){
$('.picker-box input[type=hidden]').val(value.join(','));
}else{
$('.picker-box input[type=hidden]').val('');
}
})
}
},
faselect: function (form) {
@@ -538,7 +584,17 @@ define(['jquery', 'bootstrap', 'validator'], function ($, undefined, Validator)
},
custom: {},
setFile: function(fileList, param){
// console.log(fileList, param);
var file = $('#fileList_'+param.name);
var field = $('#field_'+param.name);
var html = '<div class="item"><div class="thumb"><div class="close"><i class="fa fa-close"></i></div><img src="#" /></div></div>';
for(var i = 0; i < 10; i++){
file.append(html);
}
if(param.type == 'image'){
Form.events.imageDel();
}else if(param.type == 'file'){
Form.events.fileDel();
}
layer.close(layer.index);
}
},

12
public/static/common/js/require-upload.js
View File

@@ -427,13 +427,21 @@ define(['jquery', 'bootstrap', 'webupload'], function ($, undefined, WebUploader
if (res.code == 1) {
var query = sent.parseUrl(window.location.href);
Upload.config.upList.push(res.info);
parent.Form.api.setFile(Upload.config.upList, query);
if(Upload.config.upList.length > 0){
parent.Form.api.setFile(Upload.config.upList, query);
}else{
sent.msg('未上传数据或上传失败！', 'error')
}
}
},
server: function(){
$('button.btn-select').click(function(){
var query = sent.parseUrl(window.location.href);
parent.Form.api.setFile(Upload.config.upList, query);
if(Upload.config.upList.length > 0){
parent.Form.api.setFile(Upload.config.upList, query);
}else{
sent.msg('未选择数据！', 'error')
}
})
}
}

192
public/static/common/js/sent.js
View File

@@ -1,16 +1,18 @@
define(['jquery', 'layer', 'message'], function($, layer) {
define(['jquery', 'layer', 'message'], function ($, layer) {
var sent = {
config: {
keyName: 'sent_'
},
init: function(){
init: function () {
if ($("form[role=form]").length > 0) {
require(['form'], function(form){
require(['form'], function (form) {
form.api.bindevent($("form[role=form]"));
})
}
sent.api.bindGet(); //绑定get请求
sent.api.bindPost(); //绑定post请求
},
msg: function(text, type){
msg: function (text, type) {
text = (type == 'success') ? text + ' 页面即将自动跳转~' : text;
if (typeof type != 'undefined') {
var message = $.messager.show(text, {
@@ -40,8 +42,12 @@ define(['jquery', 'layer', 'message'], function($, layer) {
return obj;
},
store: {
set: function(params = {}){
var { name, content, type} = params;
set: function (params = {}) {
var {
name,
content,
type
} = params;
name = sent.config.keyName + name
var obj = {
dataType: typeof (content),
@@ -52,8 +58,11 @@ define(['jquery', 'layer', 'message'], function($, layer) {
if (type) window.sessionStorage.setItem(name, JSON.stringify(obj));
else window.localStorage.setItem(name, JSON.stringify(obj));
},
get: function(params = {}){
var { name, debug } = params;
get: function (params = {}) {
var {
name,
debug
} = params;
name = sent.config.keyName + name
var obj = {},
content;
@@ -79,8 +88,11 @@ define(['jquery', 'layer', 'message'], function($, layer) {
}
return content;
},
remove: function(params = {}){
let { name, type } = params;
remove: function (params = {}) {
let {
name,
type
} = params;
name = sent.config.keyName + name
if (type) {
window.sessionStorage.removeItem(name);
@@ -88,9 +100,11 @@ define(['jquery', 'layer', 'message'], function($, layer) {
window.localStorage.removeItem(name);
}
},
all: function(params = {}){
all: function (params = {}) {
let list = [];
let { type } = params;
let {
type
} = params;
if (type) {
for (let i = 0; i <= window.sessionStorage.length; i++) {
list.push({
@@ -109,13 +123,15 @@ define(['jquery', 'layer', 'message'], function($, layer) {
name: window.localStorage.key(i),
})
})
}
}
return list;
},
clear: function(params = {}){
let { type } = params;
clear: function (params = {}) {
let {
type
} = params;
if (type) {
window.sessionStorage.clear();
} else {
@@ -124,72 +140,92 @@ define(['jquery', 'layer', 'message'], function($, layer) {
}
},
events: {
//请求成功的回调
onAjaxSuccess: function (ret, onAjaxSuccess) {
var data = typeof ret.data !== 'undefined' ? ret.data : null;
var msg = typeof ret.msg !== 'undefined' && ret.msg ? ret.msg : __('Operation completed');
//请求成功的回调
onAjaxSuccess: function (ret, onAjaxSuccess) {
var data = typeof ret.data !== 'undefined' ? ret.data : null;
var msg = typeof ret.msg !== 'undefined' && ret.msg ? ret.msg : __('Operation completed');
if (typeof onAjaxSuccess === 'function') {
var result = onAjaxSuccess.call(this, data, ret);
if (result === false)
return;
}
sent.msg(msg, 'success');
},
//请求错误的回调
onAjaxError: function (ret, onAjaxError) {
var data = typeof ret.data !== 'undefined' ? ret.data : null;
if (typeof onAjaxError === 'function') {
var result = onAjaxError.call(this, data, ret);
if (result === false) {
return;
}
if (typeof onAjaxSuccess === 'function') {
var result = onAjaxSuccess.call(this, data, ret);
if (result === false)
return;
}
sent.msg(ret.msg, 'error');
},
//服务器响应数据后
onAjaxResponse: function (response) {
try {
var ret = typeof response === 'object' ? response : JSON.parse(response);
if (!ret.hasOwnProperty('code')) {
$.extend(ret, {code: -2, msg: response, data: null});
}
} catch (e) {
var ret = {code: -1, msg: e.message, data: null};
}
return ret;
}
},
api:{
//发送Ajax请求
ajax: function (options, success, error) {
options = typeof options === 'string' ? {url: options} : options;
var index;
if (typeof options.loading === 'undefined' || options.loading) {
index = layer.load(options.loading || 0);
}
options = $.extend({
type: "POST",
dataType: "json",
success: function (ret) {
index && layer.close(index);
ret = sent.events.onAjaxResponse(ret);
if (ret.code === 1) {
sent.events.onAjaxSuccess(ret, success);
} else {
sent.events.onAjaxError(ret, error);
}
},
error: function (xhr) {
index && layer.close(index);
var ret = {code: xhr.status, msg: xhr.statusText, data: null};
sent.events.onAjaxError(ret, error);
}
}, options);
return $.ajax(options);
},
sent.msg(msg, 'success');
},
//请求错误的回调
onAjaxError: function (ret, onAjaxError) {
var data = typeof ret.data !== 'undefined' ? ret.data : null;
if (typeof onAjaxError === 'function') {
var result = onAjaxError.call(this, data, ret);
if (result === false) {
return;
}
}
sent.msg(ret.msg, 'error');
},
//服务器响应数据后
onAjaxResponse: function (response) {
try {
var ret = typeof response === 'object' ? response : JSON.parse(response);
if (!ret.hasOwnProperty('code')) {
$.extend(ret, {
code: -2,
msg: response,
data: null
});
}
} catch (e) {
var ret = {
code: -1,
msg: e.message,
data: null
};
}
return ret;
}
},
validatenull: function(val){
api: {
//发送Ajax请求
ajax: function (options, success, error) {
options = typeof options === 'string' ? {
url: options
} : options;
var index;
if (typeof options.loading === 'undefined' || options.loading) {
index = layer.load(options.loading || 0);
}
options = $.extend({
type: "POST",
dataType: "json",
success: function (ret) {
index && layer.close(index);
ret = sent.events.onAjaxResponse(ret);
if (ret.code === 1) {
sent.events.onAjaxSuccess(ret, success);
} else {
sent.events.onAjaxError(ret, error);
}
},
error: function (xhr) {
index && layer.close(index);
var ret = {
code: xhr.status,
msg: xhr.statusText,
data: null
};
sent.events.onAjaxError(ret, error);
}
}, options);
return $.ajax(options);
},
bindGet: function(){
},
bindPost: function(){
}
},
validatenull: function (val) {
if (typeof val == 'boolean') {
return false;
}