Layui自定义插件分享

/**
 * 自定义Layui自定义插件
 * version: 1.2
 * 基于layui-v2.5.7编写，整理常用方法，减少layui开发页面代码编写工作量
 * 实现：1、自定义弹窗
 * 	2、自定义对话框弹出，按钮响应函数定义
 * 	3、自定义分页表格
 * 	4、自定义不分页表格
 */

const topDistance = 30;

const createDialog = function (url, title, size, scale) {

	let closeBtn = 1;
	if (!title || '' === title) {
		title = false;
		closeBtn = 0;
	}

	if (!scale || '' === scale) {

		scale = [0.6, 0.8];
	}

	if (!size || '' === size) {
		const h = $(window).height();
		const w = $(window).width();

		size = [(w * scale[0]) + 'px', ((h - topDistance) * scale[1]) + 'px'];

	}

	const _dialog = ({
		_index: null,
		open: function () {
			this._index = layer.open({
				_p: this,
				title: title,
				type: 2,
				area: size,
				resize: true,
				content: url,
				closeBtn: closeBtn,
				offset: topDistance + 'px',
				cancel: this.closed
			});
		},
		closed: function () {

			var _e = !this._p ? this : this._p;
			layer.close(_e._index);
			return false;
		}
	});

	return _dialog;
};

const Zyq = ({
	_index: null,
	alert: function (title, context, icon, yes) {
		var h = $(document).height();

		this._index = layer.open({
			_p: this,
			btn: ['确定'],
			resize: false,
			title: false,
			content: context,
			icon: icon,
			closeBtn: 0,
			shadeClose: true,
			zIndex: 19950602,
			offset: (h * 0.1) + 'px',
			yes: this.closed.before(yes),
			cancel: this.closed.before(yes)
		});

		return this._index;
	},
	alertWarning: function (title, context, yes) {

		return this.alert("<font color='#df8a06'>" + title + "</font>", "<font color='#f39b12'>" + context + "</font>", 0, yes);
	},
	alertMsg: function (title, context, yes) {

		return this.alert(title, context, 1, yes);
	},
	alertError: function (title, context, yes) {

		return this.alert("<font color='#FF0000'>" + title + "</font>", "<font color='#f08d84'>" + context + "</font>", 2, yes);
	},
	closed: function () {

		const _e = undefined === this._p ? this : this._p;
		layer.close(_e._index);
	},
	inq: function (title, context, icon, yes, no) {
		var h = $(document).height();

		this._index = layer.open({
			_p: this,
			btn: ['确定', '关闭'],
			resize: false,
			title: title,
			content: context,
			icon: icon,
			closeBtn: 1,
			zIndex: 19950602,
			offset: (h * 0.1) + 'px',
			yes: this.closed.before(yes),
			btn2: this.closed.before(no),
			cancel: this.closed
		});

		return this._index;
	},
	inqWarning: function (title, context, yes, no) {

		return this.inq("<font color='#df8a06'>" + title + "</font>", "<font color='#f39b12'>" + context + "</font>", 0, yes, no);
	},
	inqMsg: function (title, context, yes, no) {

		return this.inq(title, context, 1, yes, no);
	},
	inqError: function (title, context, yes, no) {

		return this.inq("<font color='#FF0000'>" + title + "</font>", "<font color='#f08d84'>" + context + "</font>", 2, yes, no);
	}
});

const pageTable = function (_url, _config) {

	let _method = _config.method;
	if (!_method || '' === _method) {
		_method = 'get';
	}

	let _param = _config.param;
	if (!_param || '' === _param) {
		_param = {};
	}

	let _title = _config.title;
	if (!_title || '' === _title) {
		_title = false;
	}

	let _pageSize = _config.pageSize;
	if (!_pageSize || '' === _pageSize) {
		_pageSize = 20;
	}

	let _totalRow = _config.totalRow;
	if (!_totalRow || '' === _totalRow) {
		_totalRow = false;
	}

	let _id = _config.id;
	if (undefined === _id || null === _id || '' === _id) {
		_id = _config.elem;
	}

	return ({
		dataTable: null,
		loadBefore: _param,
		pk: _config.pk,
		_table: null,
		load: function () {
			let _that = this;
			layui.use(['table', 'element'], function () {
				_that._table = layui.table;
				const element = layui.element

				_that.dataTable = _that._table.render({
					id: _id,
					elem: '#' + _config.elem,
					url: _url,
					where: _that.loadBefore,
					method: _method,
					toolbar: _config.toolbar,
					height: 'full-20',
					title: _title,
					page: true,
					totalRow: _totalRow,
					limit: _pageSize,
					limits: [10, 20, 30, 40, 50],
					defaultToolbar: ['print', 'exports'],
					done: function () {
						if (undefined !== _config.onload) {
							_config.onload(element);
						}
					},
					cols: [_config.cols]
				});

				//头工具栏事件
				_that._table.on('toolbar(' + _config.filter + ')', function (obj) {
					var checkStatus = _that._table.checkStatus(_id);

					if (undefined !== _config.listener) {
						_config.listener(checkStatus.data, obj.event, obj);
					}
				});

				//单击事件
				_that._table.on('row(' + _config.filter + ')', function (obj) {

					if (undefined !== _config.click) {
						_config.click(obj.data, obj.tr, obj);
					}
				});

				//双击事件
				_that._table.on('rowDouble(' + _config.filter + ')', function (obj) {

					if (undefined !== _config.dbClick) {
						_config.dbClick(obj.data, obj.tr, obj);
					}
				});

				//行操作栏事件
				_that._table.on('tool(' + _config.filter + ')', function (obj) {
					var data = obj.data;
					if (undefined !== _config.rowTool) {
						_config.rowTool(data, obj.event, obj);
					}
				});

				//复选框事件
				_that._table.on('checkbox(' + _config.filter + ')', function (obj) {

					if (obj.type === 'one') {
						return;
					}

					if (_config.checkbox) {
						_config.checkbox(obj.data, obj.tr, obj);
					}

				});

				//单选框事件
				_that._table.on('radio(' + _config.filter + ')', function (obj) {

					if (_config.radio) {
						_config.radio(obj.data, obj.tr, obj);
					}
				});
			});
		},
		clearLoadBeforeParam: function () {

			this.loadBefore = {};
		},
		/**
		 * 下个版本废弃，替换为addLoadBeforeParam
		 * @param _name
		 * @param _value
		 */
		setLoadBeforeParam: function (_name, _value) {

			this.loadBefore[_name] = _value;

		},
		resetLoadBeforeParam: function (param) {

			if (!param || '' === param) {
				param = {};
			}

			this.loadBefore = param;

		},
		addLoadBeforeParam: function (_name, _value) {

			this.loadBefore[_name] = _value;

		},
		reload: function (curPage) {

			if (undefined === curPage || null == curPage || '' === curPage) {
				curPage = 1;
			}

			this.dataTable.reload({
				where: this.loadBefore,
				page: {
					curr: curPage //重新从第 1 页开始
				}
			});
		},
		selected: function () {

			return this._table.checkStatus(_id).data;
		}

	});
};

const normalTable = function (_url, _config) {

	let _method = _config.method;
	if (undefined === _method || null == _method || '' === _method) {
		_method = 'get';
	}

	let _param = _config.param;
	if (undefined === _param || null == _param || '' === _param) {
		_param = {};
	}

	let _title = _config.title;
	if (undefined === _title || null == _title || '' === _title) {
		_title = false;
	}

	let _id = _config.id;
	if (undefined === _id || null == _id || '' === _id) {
		_id = _config.elem;
	}

	return ({
		dataTable: null,
		loadBefore: _param,
		pk: _config.pk,
		_table: null,
		load: function () {
			let _that = this;

			layui.use('table', function () {
				_that._table = layui.table;

				_that.dataTable = _that._table.render({
					id: _id,
					elem: '#' + _config.elem,
					url: _url,
					where: _that.loadBefore,
					method: _method,
					toolbar: _config.toolbar,
					title: _title,
					defaultToolbar: ['print', 'exports'],
					done: function () {
						if (undefined !== _config.onload) {
							_config.onload();
						}
					},
					cols: [_config.cols]
				});

				//头工具栏事件
				_that._table.on('toolbar(' + _config.filter + ')', function (obj) {
					var checkStatus = _that._table.checkStatus(_id);

					if (undefined !== _config.listener) {
						_config.listener(checkStatus.data, obj.event, obj);
					}
				});

				//单击事件
				_that._table.on('row(' + _config.filter + ')', function (obj) {

					if (undefined !== _config.click) {
						_config.click(obj.data, obj.tr, obj);
					}
				});

				//双击事件
				_that._table.on('rowDouble(' + _config.filter + ')', function (obj) {

					if (undefined !== _config.dbClick) {
						_config.dbClick(obj.data, obj.tr, obj);
					}
				});

				//行操作栏事件
				_that._table.on('tool(' + _config.filter + ')', function (obj) {
					var data = obj.data;
					if (undefined !== _config.rowTool) {
						_config.rowTool(data, obj.event, obj);
					}
//				    obj.event.preventDefault();
				});

				//复选框事件
				_that._table.on('checkbox(' + _config.filter + ')', function (obj) {

					if (obj.type === 'one') {
						return;
					}

					if (_config.checkbox) {
						_config.checkbox(obj.data, obj.tr, obj);
					}

				});

				//单选框事件
				_that._table.on('radio(' + _config.filter + ')', function (obj) {

					if (_config.radio) {
						_config.radio(obj.data, obj.tr, obj);
					}
				});
			});
		},
		setLoadBeforeParam: function (_name, _value) {

			this.loadBefore[_name] = _value;
		},
		reload: function () {

			this.dataTable.reload({
				where: this.loadBefore
			});
		},
		selected: function () {

			return this._table.checkStatus(_id).data;
		}

	});
};

Function.prototype.before = function(fn) {
	const _this = this;
	return function() {
		const ret = undefined !== fn ? fn.apply(this, arguments) : undefined;
		_this.apply(this, arguments);
		return ret;
	}
},

	Function.prototype.after = function(fn) {
		const _this = this;
		return function() {
			_this.apply(this, arguments);
			return undefined !== fn ? fn.fn(this, arguments) : undefined;
		}
	}

const structure = {
	_key: '',
	_value: null,
	getKey: function() {
		return this._key;
	},
	setKey: function(_key) {
		this._key = _key;
	},
	getValue: function() {
		return this._value;
	},
	setValue: function(_value) {
		this._value = _value;
	}
};
const defaultMap = {
	_map: [],
	put: function (_key, _value) {
		if (null != this.get(_key)) {
			return true;
		}

		const item = Object.create(structure);
		item.setKey(_key);
		item.setValue(_value);

		this._map.push(item);
	},
	remove: function (_key) {
		const _value = this.get(_key);
		if (null == _value) {
			return;
		}

		let _index = -1;
		$.each(this._map, function (index, item) {
			if (_key === item.getKey()) {
				_index = index;
				return false;
			}
		});

		if (_index !== -1) {
			this._map.splice(_index, 1);
		}
	},
	removeAll: function () {
		this._map = null;
		this._map = [];
	},
	get: function (_key) {
		let _value = null;
		$.each(this._map, function (index, item) {
			if (_key === item.getKey()) {
				_value = item.getValue();
				return false;
			}
		});

		return _value;
	},
	keys: function () {
		const _keys = [];
		$.each(this._map, function (index, item) {
			_keys.push(item.getKey());
		});

		return _keys;
	},
	values: function () {
		const _valueArr = [];
		$.each(this._map, function (index, item) {
			if (null != item.getValue()) {
				_valueArr.push(item.getValue());
			}
		});
		return _valueArr;
	},
	size: function () {

		return this._map.length;
	}
};