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

4
public/static/admin/css/login.css
View File

@@ -1,5 +1,7 @@
@charset "UTF-8";
@import url(../../common/css/font-awesome.min.css);
@import url(../../common/css/animate.min.css);
@import url(../../plugins/bootstrap/css/bootstrap.min.css);
/* +----------------------------------------------------------------------
// | ThinkAdmin
// +----------------------------------------------------------------------

107
public/static/admin/js/login.js Normal file
View File

@@ -0,0 +1,107 @@
// +----------------------------------------------------------------------
// | SentCMS [ WE CAN DO IT JUST THINK IT ]
// +----------------------------------------------------------------------
// | Copyright (c) 2013 http://www.tensent.cn All rights reserved.
// +----------------------------------------------------------------------
// | Author: molong <molong@tensent.cn> <http://www.tensent.cn>
// +----------------------------------------------------------------------
// 当前资源URL目录
var baseRoot = (function () {
var scripts = document.scripts, src = scripts[0].src;
return src.substring(0, src.lastIndexOf("/") - 9) + '/';
})();
// 配置参数
require.config({
waitSeconds: 60,
packages: [{
name: 'moment',
location: 'plugins/moment',
main: 'moment'
}
],
baseUrl: baseRoot,
map: {'*': {css: baseRoot + 'plugins/require/require.css.js'}},
paths: {
'sent': ['common/js/sent'],
'message': ['plugins/messager/messager'],
'layer': ['plugins/layer/layer'],
// jQuery
'jquery': ['plugins/jquery/jquery.min'],
'json': ['plugins/jquery/json2.min'],
// bootstrap
'bootstrap': ['plugins/bootstrap/js/bootstrap.min'],
},
shim: {
'message': {deps: ['jquery', 'css!'+'plugins/messager/css/style.css']},
// bootstrap
'bootstrap':{deps: ['jquery']},
'layer': {deps: ['jquery', 'css!'+baseRoot+'plugins/layer/theme/default/layer.css']},
},
deps: ['json'],
// 开启debug模式，不缓存资源
urlArgs: "ver=" + (new Date()).getTime()
});
// 注册jquery到require模块
require(['jquery', 'bootstrap', 'message', 'sent'], function ($, bootstrap, message, sent) {
$('[name="password"]').on('focus', function () {
$('#left-hander').removeClass('initial_left_hand').addClass('left_hand');
$('#right-hander').removeClass('initial_right_hand').addClass('right_hand')
}).on('blur', function () {
$('#left-hander').addClass('initial_left_hand').removeClass('left_hand');
$('#right-hander').addClass('initial_right_hand').removeClass('right_hand')
});
//表单提交
$(document).ajaxStart(function(){
$("button:submit").addClass("log-in").attr("disabled", true);
}).ajaxStop(function(){
$("button:submit").removeClass("log-in").attr("disabled", false);
});
$("form").submit(function(){
var self = $(this);
$.ajax({
data: self.serialize(),
type: 'post',
success: function(data){
if(data.code){
sent.msg(data.msg, 'success');
setTimeout(function(){
window.location.href = data.url;
}, 2000);
} else {
sent.msg(data.msg, 'error');
setTimeout(function(){
//刷新验证码
$(".reloadverify").click();
}, 2000);
}
},
error: function(res){
var data = res.responseJSON;
sent.msg(data.message, 'error');
setTimeout(function(){
//刷新验证码
$(".reloadverify").click();
}, 2000);
},
dataType: 'json'
})
return false;
});
//初始化选中用户名输入框
$("#itemBox").find("input[name=username]").focus();
//刷新验证码
var verifyimg = $(".verifyimg").attr("src");
$(".reloadverify").click(function(){
if( verifyimg.indexOf('?')>0){
$(".verifyimg").attr("src", verifyimg+'&random='+Math.random());
}else{
$(".verifyimg").attr("src", verifyimg.replace(/\?.*$/,'')+'?'+Math.random());
}
});
});

1
public/static/admin/js/main.js
View File

@@ -95,6 +95,7 @@ require.config({
'slimscroll': {deps: ['jquery'],exports: '$.fn.extend'},
'adminlte': {deps: ['bootstrap', 'slimscroll'],exports: '$.AdminLTE'},
'form': {deps: ['css!'+baseRoot+'common/css/form.css']},
'webupload': {deps: ['jquery', 'css!'+baseRoot+'plugins/webuploader/theme/webuploader.css', 'css!'+baseRoot+'/plugins/webuploader/theme/app.css']},
'layer': {deps: ['jquery', 'css!'+baseRoot+'plugins/layer/theme/default/layer.css']},

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;
}