forestProduct-UI/js/layuiPlugins/cascade.js

/**
 * 请求接口格式
 * {
 }
 */
layui.define(['jquery', 'form', 'layer'], function (exports) {
	var $ = layui.jquery,
		form = layui.form,
		layer = layui.layer;
	var Class = function (obj) {
		var _this = this;
		_this.elem = obj.elem || 'body'; //级联容器
		_this.url = obj.url || {}; //级联接口
		_this.formParm = []; //表单参数名
		typeof obj.url == 'object' && ($.each(obj.url, function (key, value) {
			_this.formParm.push(key);
		}));
		_this.listParamName = obj.listParamName || {
			valueName: 'id',
			name: 'name'
		};
		_this.width = {};
		_this.placeholder = {};
		_this.box = $('body'); //子集容器
		_this.boxs = []; //所有子集
		_this.title = obj.title || null; //标题
		_this.hostParm = { //默认请求参数名
			idName: 'id',
			rowsName: 'limit'
		};
		_this.valObj = {}; //初始值对象
		_this[_this.hostParm['rowsName']] = obj[_this.hostParm['rowsName']] || 10000; //请求条数
		for (var i in obj.hostParm) { //自定义请求参数名
			_this.hostParm[i] = obj.hostParm[i];
		}
		_this.data = {}; //默认请求参数
		_this.data[_this.hostParm['rowsName']] = _this[_this.hostParm['rowsName']]; //赋值参数
		_this.verify = obj.verify || {};

		$.extend(this, obj);
		_this.init(); //初始化
	};
	/**
	 *返回当前元素在数组中的下标 
	 * @param {Object} val
	 */
	Class.prototype.indexOf = function (arr, val) {
		for (var i = 0; i < arr.length; i++) {
			if (arr[i] == val) return i;
		}
		return -1;
	};
	/**
	 * 初始化父下拉列表
	 */
	Class.prototype.init = function () {
		var _this = this;
		//select 容器
		_this.box = $('<div class="layui-input-inline"></div>');
		//初始化值
		if(JSON.stringify(_this.valObj) != '{}'){
			_this.val();
		}
		//渲染首下拉框
		_this.element(_this.formParm[0]);
	};
	Class.prototype.element = function (name, code, callback) {
		var _this = this;
		//验证子接口配置
		if (!_this.url[name]) {
			// layer.msg("没有配置下级接口",{icon:2,time:600});
			return _this;
		}
		//获取设置默认子集请求参数(子集合父id)
		_this.data[_this.hostParm['idName']] = code || null;
		//设置默认请求页码
		_this.data['page'] = _this.data['page'] || 1;
		$.ajax({
			url: _this.url[name],
			data: _this.data,
			success: function (res) {
				//指定select唯一ID
				let select_id = "select_"+_this.___id;
				//获取当前级联字段下标
				let subscript = _this.indexOf(_this.formParm, name);
				// _this.thanName(name);
				//保存当前select对象
				_this.boxs[subscript] = $(_this.selectHtml(select_id, name, res));
				//往select容器添加包装好的select对象
				$(_this.elem).append(_this.boxs[subscript]);
				//绑定select点击事件
				_this.event(name,select_id);
				//执行赋值回调函数
				!!callback && callback(name, select_id);
				typeof _this.valObj[name] != 'undefined' && ($("#" + select_id+name).val(_this.valObj[name]));
				form.render();
			}
		});
	};
	/**
	 * 包装Html
	 */
	Class.prototype.selectHtml = function (select_id, name, res) {
		var _this = this;
		var html = '<div class="layui-input-inline" style="width:'+(this.width[name] || "auto")+';"><select name="' + name + '" lay-verify="' + this.verify[name] +
			'" lay-filter="' + select_id+name + '" id="' +
			select_id+name + '"><option value="">'+(this.placeholder[name] || '请选择')+'</option>';
		for (let xyz = 0; xyz < res.data.length; xyz++) {
			html += '<option value="' + res.data[xyz][_this.listParamName['valueName']] + '">' + res.data[xyz][_this.listParamName[
				'name']] + '</option>';
		}
		return (html + '</select></div>');
	};
	Class.prototype.event = function (name,select_id) {
		var _this = this;
		var x = _this.indexOf(_this.formParm, name);
		form.on("select(" + select_id+name + ")", function (obj) {
			_this.removeBox(x);
			if(!obj.value){
				return false;
			};
			_this.element(_this.formParm[x - 0 + 1], obj.value);
			_this.click(obj);
			return false;
		});
	};
	Class.prototype.click = function (obj) {

	};
	Class.prototype.removeBox = function (i) {
		var _this = this;
		for (var x = i + 1; x < _this.boxs.length; x++) {
			_this.boxs[x].remove();
		}
	};
	Class.prototype.thanName = function (name) {
		for (let i = 0; i < this.boxs.length; i++) {
			if (this.boxs[i][0].firstChild && this.boxs[i][0].firstChild.name == name) {
				this.boxs[i].remove();
			}
		}
	};
	/**
	 * 初始值
	 */
	Class.prototype.val = function (obj) {
		var _this = this;
		$.extend(_this.valObj, obj);
		(function temp(i) {
			if (_this.valObj[_this.formParm[i + 1]]) {
				_this.element(_this.formParm[i - 0 + 1], _this.valObj[_this.formParm[i]], function (name, select_id) {
					if (i == -1) {
						_this.removeBox(i);
					}
					temp(++i);
				});
			}
		})(-1);
		return _this;
	};
	var cascade = {};
	cascade.render = function (e) {
		e.___id = this.id = (this.id || 0) - 0 + 1;
		var i = new Class(e = e || {});
		t = $(e.elem);

		return t[0] ? i : layui.hint().error("layui.cascade 没有找到" + e.elem + "元素");
	};
	exports('cascade', cascade);
});