优化后台UI

完善表单上传组件
2020-04-08 21:07:23 +08:00
parent f8c58b15cd
commit f42b62738d
18 changed files with 389 additions and 247 deletions
--- a/public/static/common/js/require-form.js
+++ b/public/static/common/js/require-form.js
@@ -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);
 			}
 		},
--- a/public/static/common/js/require-upload.js
+++ b/public/static/common/js/require-upload.js
@@ -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')
+				}
 			})
 		}
 	}
--- a/public/static/common/js/sent.js
+++ b/public/static/common/js/sent.js
@@ -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;
 			}