console-front/js/select.js

$.use(["jQuery", "form", "doc", "util", "dropdown", "dict"], function($, form, doc, util, dd, dict) {
	var m_rd="必选的",readOnly = "readOnly",
		showOnly = "showOnly",
		modelName = 'select',
		mModelName = "mselect",
		tInt = "int",
		tBool = "bool",
		tString = "string",
		def = "defVal",
		placeholder = "placeholder",
		required = "required",
		tree = "tree",
		queried = "queried",
		handCode = { an: "code", av: "" },
		spanCode = { an: "code", av: "" },
		spanDictCode = { an: "dictCode", av: "" },
		pa = [""],
		jhref = { an: "href", av: "javascript:;" },
		dd_hand = { an: "class", av: "dd-hand" },
		icon_drop = { tn: "i", attrs: [{ an: "class", av: "icon icon-drop" }] },
		icon_close = { tn: "i", attrs: [{ an: "class", av: "icon icon-close" }] },
		a_placeHolder = { tn: "a", attrs: [jhref, { an: "class", av: placeholder }], chs: pa },
		hand = {
			tn: "a",
			attrs: [
				dd_hand,
				jhref,
				handCode,
			],
			chs: [
				icon_drop,
				{ tn: "span", attrs: [spanCode, spanDictCode] },
				icon_close,
				a_placeHolder,
			]
		},
		seim = { an: "class", av: "select-item" },
		sebi = { an: "class", av: "branch-item" },
		buildTreeDrop = function(isQueried, items, pa) {
			items.forEach(function(item) {
				if(isQueried || item.enabled) {
					var li = {
						tn: "li",
						attrs: [{ an: "code", av: item.code }, { an: "caption", av: item.caption }],
						chs: []
					};
					if(item.children && item.children.length) {
						var bhand = {
							tn: "a",
							attrs: [{ an: "code", av: item.code }],
							chs: [{ tn: "span", chs: [item.caption] }]
						};
						li.attrs.push(sebi);
						li.chs.push(bhand);
						var ul={tn:"ul",chs:[]};
						li.chs.push(ul);
						buildTreeDrop(isQueried, item.children, ul.chs);
					} else {
						li.attrs.push(seim);
						li.chs.push(item.caption);
					}
					pa.push(li);
				}
			});
		},
		buildShown = function($e, dictCode, clss) {
			return clss[tree] ? function(evt) {
				var items = dict.get(dictCode);
				var drop = { tn: "div", attrs: [{ an: "class", av: "dd-drop" }], chs: [] };
				if(items) {
					var ul = { tn: "ul", chs: [] };
					buildTreeDrop(clss[queried], items, ul.chs);
					drop.chs.push(ul);
				} else {
					drop.chs.push("loading.........");
				}
				util.appendChild($e[0], drop);
			} : function(evt) {
				var items = dict.get(dictCode);
				var drop = { tn: "div", attrs: [{ an: "class", av: "dd-drop" }], chs: [] };
				if(items) {
					var ul = { tn: "ul", chs: [] };
					items.forEach(function(item) {
						if(clss[queried] || item.enabled) {
							this.push({
								tn: "li",
								attrs: [seim, { an: "code", av: item.code }, { an: "caption", av: item.caption }],
								chs: [item.caption]
							});
						}
					}, ul.chs);
					drop.chs.push(ul);
				} else {
					drop.chs.push("loading.........");
				}
				util.appendChild($e[0], drop);
			};
		};

	form.register(function($e) {
		var cls = util.classCheck($e[0], [readOnly, showOnly, modelName, tInt, tBool, required, tree, queried]),
			rv;
		if(cls[modelName]) {
			var n = $e.attr("name") || $e.attr("id"),
				ve, rules = [];
			if(!n) {
				throw "Attribute[name] is invalid";
			}
			var dv = $e.attr(def) || "",
				dictCode = $e.attr("dictCode") || "";
			rv = dv;
			if(!dictCode) { throw "Attribute[dictCode] is invalid"; }
			$e.empty().addClass("dd-ctn").addClass("dd-clean");
			handCode.av = spanCode.av = dv;
			spanDictCode.av = dictCode;
			pa[0] = $e.attr(placeholder) || "请选择......";
			util.appendChild($e[0], hand);
			var $h = $e.children("a");
			var $span = $h.children("span");
			var select_change = function(nv, cap, evt) {
				if(rv != nv) {
					rv = nv;
					$h.attr("code", rv);
					$span.attr("code", rv).text(cap).removeClass("invalid-dict");
					if(evt) {
						$e.addClass("dd-hold-once");
					}
				}
			};
			if(!(cls[readOnly] || cls[showOnly])) {
				$e.on("shown.dropdown", buildShown($e, dictCode, cls));
				$e.find(".icon-close").on("click", function(evt) {
					select_change("", "", evt);
				});
				$e.on("click", "div .select-item", function() {
					select_change(this.getAttribute("code"), this.getAttribute("caption"));
				});
				if(cls[tree]) {
					$e.on("click", "div .branch-item>a", function(evt) {
						$(this).toggleClass("open");
						$e.addClass("dd-hold-once");
					});
				}
			}
			if(rv) {
				dict.transfer($span, dictCode, rv);
			} else {
				dict.apply(dictCode, util.noop);
			}
			return {
				name: n,
				get: function() {
					if((!cls[showOnly]) && rv) {
						return cls[tBool] ? '1' === rv : cls[tInt] ? parseInt(rv) : rv;
					}
				},
				set: function(data) {
					if(data) {
						var cc = data === true ? "1" : ("" + data);
						select_change(cc, "");
						dict.transfer($span, dictCode, cc);
					} else if(data === false || data === 0) {
						select_change("0", "");
						dict.transfer($span, dictCode, cc);
					} else {
						select_change("", "");
					}
				},
				validate: function() {
					if(cls[required]) {
						if(!rv) {
							this.invalid(m_rd);
							return m_rd;
						}
					}
					return util.validate(rules, this);
				},
				addRules: function(rule) {
					util.addRules(rules, rule);
				},
				reset: function() {
					this.set(dv);
				},
				valid: function() { util.valid($e); },
				invalid: function(reson) {
					util.invalid($e);
					util.error(reson);
				}
			};
		}

	});
	var selCap={an:"class",av:"select-caption"}, mhand = {
		tn: "a",
		attrs: [dd_hand],
		chs: [icon_drop, { tn: "ul" }, a_placeHolder]
	};
	form.register(function($e) {
		var cls = util.classCheck($e[0], [readOnly, showOnly, mModelName, tInt, required, tree, queried]);
		if(cls[mModelName]) {
			var n = $e.attr("name") || $e.attr("id"),
				rules = [];
			if(!n) {
				throw "Attribute[name] is invalid";
			}
			var dv = [],
				rv = [],
				tmp = ($e.attr(def) || "").split(","),
				dictCode = $e.attr("dictCode") || "";
			if(!dictCode) { throw "Attribute[dictCode] is invalid"; }
			tmp.forEach(function(item) {
				if(item) {
					item = item.trim();
					if(item) {
						dv.push(item);
						rv.push(item);
					}
				}
			});
			$e.empty().addClass("dd-ctn").addClass("dd-clean");
			pa[0] = $e.attr(placeholder) || "请选择......";
			var lis = mhand.chs[1].chs = [];
			dv.forEach(function(item) {
				lis.push({
					tn: "li",
					attrs: [{ an: "code", av: item }],
					chs: [icon_close, { tn: "span", attrs: [{ an: "code", av: item},selCap] }]
				});
			});
			util.appendChild($e[0], mhand);

			var $ul = $e.find("ul");
			var mselect_add = function(nv, cp) {
				if(rv.indexOf(nv) > -1) {
					return false;
				}
				rv.push(nv);
				var li = {
					tn: "li",
					attrs: [{ an: "code", av: nv }],
					chs: [icon_close,
						{
							tn: "span",
							attrs: [{ an: "code", av: nv },selCap],
							chs: [cp]
						}
					]
				};
				util.appendChild($ul[0], li);
				return true;
			};
			var mselect_change = function(na) {
				rv = [], nlis = [];
				$ul.empty();
				na.forEach(function(item) {
					rv.push("" + item);
				});
				if(rv.length) {
					rv.forEach(function(item) {
						nlis.push({
							tn: "li",
							attrs: [{ an: "code", av: nv },selCap],
							chs: [icon_close, {
								tn: "span",
								attrs: [{ an: "code", av: item.code }, { an: "dict", av: dictCode }, { an: "class", av: "hand-dict" }]
							}]
						});
					});
					util.appendChild($ul[0], nlis);
					dict.doTransfer();
				}
			};
			if(lis.length) {
				$ul.find("span").each(function() {
					dict.transfer($(this), dictCode);
				});
			} else {
				dict.apply(dictCode, util.noop);
			}

			if(!(cls[readOnly] || cls[showOnly])) {
				$e.on("shown.dropdown", buildShown($e, dictCode, cls));
				$ul.on("click", "li>i", function(e) {
					$e.addClass("dd-hold-one");
					var idx = rv.indexOf(this.parentNode.getAttribute("code"));
					if(idx > -1) {
						rv.splice(idx, 1);
					}
					$(this).parent().remove();
				});
				$e.on("click", "div .select-item", function() {
					if(!mselect_add(this.getAttribute("code"), this.getAttribute("caption"))) {
						$e.addClass("dd-hold-once");
					}
				});
				if(cls[tree]) {
					$e.on("click", "div .branch-item>a", function(evt) {
						$(this).toggleClass("open");
						$e.addClass("dd-hold-once");
					});
				}
			}

			return {
				name: n,
				get: function() {
					if((!cls[showOnly]) && rv.length) {
						var ret = [];
						rv.forEach(function(item) {
							ret.push(cls[tInt] ? parseInt(item) : item);
						});
						return ret;
					}
				},
				set: function(data) {
					mselect_change(data ? (data.length ? data : []) : []);
				},
				validate: function() {
					if(cls[required]) {
						if(!rv.length) {
							this.invalid(m_rd);
							return m_rd;
						}
					}
					return util.validate(rules, this);
				},
				addRules: function(rule) {
					util.addRules(rules, rule);
				},
				reset: function(data) {
					this.set(dv);
				},
				valid: function() { util.valid($e); },
				invalid: function(reson) {
					util.invalid($e);
					util.error(reson);
				}
			};
		}
	});
});