优化后台UI

完善表单上传组件
This commit is contained in:
2020-04-08 21:07:23 +08:00
parent f8c58b15cd
commit f42b62738d
18 changed files with 389 additions and 247 deletions
+60 -4
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);
}
},