UrlList_wev8.js 11.1 KB
define(['mUtil', "Component", "wev-loading"], function (mUtil, Component, WevLoading) {
	var UrlList = function (options) {
		var _list = {}, $comp, $list;

		Component.super(this, options);

		this.type = "UrlList";
		this.tpl = this.type + "_html";
		this.keysOfSkipedVarParse = ['dataurl', 'imgfield', 'titlefield', 'otherfields'];
        this.dataload = true;
		this.components = {
			loading: new WevLoading({
				delay: 300,
				animation: 1
			}),
			moreLoading: new WevLoading({
				btn: 1,
				onclick: function (hideLoading) {
					_list.loadData(hideLoading);
				}
			})
		};

		var vm = this.viewModel = {
			pageSize: 10,
			normalview: {
				imgfield: "",
				titlefield: "",
				otherfields: []
			},
			normalSearch: {
				hide: false,
				tip: ""
			},
			btns: [],
			swipe: {},
			options: {
				readonly: false,
				selectable: false,		//数据可选
				showOnePage: false,		//显示一页
				inParams: [{
					paramName: "pageNo",
					paramValue: "{PAGE_NO}",
					isSystem: "1",
					desc: ""            //当前页
				}, {
					paramName: "pageSize",
					paramValue: "{PAGE_SIZE}",
					isSystem: "1",
					desc: ""            //每页显示数量
				}, {
					paramName: "searchKey",
					paramValue: "{SEARCH_KEY}",
					isSystem: "1",
					desc: ""             //查询参数
				}],
				outputFormat: {
					DATAS: "datas",
					TOTAL_SIZE: "totalSize"
				}
			},
			onload: function () { }
		};
		
		this.mounted = function () {
			var that = this;

			$comp = this.$comp;
			$list = $comp.find(".wev-table-view");
			
			// 初始化列表数据
            _list.refreshList(function () {
				mUtil.eval(vm.onload, that.pageid);
                mUtil.trigger('dataload', that.pageid, that.id);
            });
			// 初始化搜索功能
			_list.initSearch();
			//初始化自定义按钮,切换显示按钮
			_list.initBtns(this.pageid);

			//绑定单条数据,左滑按钮点击事件
			$comp.on("click.nav", "a.wev-navigate-right, .wev-table-checkbox, .wev-file", function (e) {
				var $this = $(this);
				var item = getDataItem($this);
				var isImg = e.target.tagName.toLowerCase() === "img";
				var isFile = $this.hasClass("wev-file");
				
				//选择数据checkbox
				if($this.hasClass("wev-table-checkbox") || (vm.options.readonly && !isImg && !isFile)){
					var $li = $this.closest(".wev-table-view-cell");
					$li.toggleClass("checked");
					var checkList = _list.state.checkList;
					if($li.hasClass("checked")){
						checkList.indexOf(item) < 0 && checkList.push(item);
					}else{
						var index = checkList.indexOf(item);
						if (index > -1) {
							checkList.splice(index, 1);
						}
					}
					//选择数据功能 阻止冒泡和默认行为
					e.stopPropagation();
					e.preventDefault();
					return;
				}
				if (vm.options.readonly) return;

				if (vm.callback && mUtil.isFunction(vm.callback.click)) {
					vm.callback.click.call(this, getDataItem($(this)));
				}
				
				if(item.dataurl){
					var dataurl = item.dataurl;
					if(item.dataurl.indexOf("javascript:") == -1){
						$u(dataurl);
					}else{
						mUtil.eval(dataurl, that.pageid);
					}
				}
			}).on("click.swipeAction", ".btnBox", function () {
				if (vm.swipe && mUtil.isFunction(vm.swipe.click)) {
					vm.swipe.click.call(this, getDataItem($(this)));
				}
			});
		};

		function getDataItem($el) {
			var index = $el.closest(".wev-table-view-cell").index();

			return _list.state.list[index];
		}

		this.reload = function (args, callback) {
		    _list.state.dynamicParam = {};
			if (mUtil.isObject(args)) {
				$.extend(_list.state.dynamicParam, args);
			}
			_list.refreshList(callback);
		};
		
		this.getCheckedData = function(callback){
			mUtil.isFunction(callback) && callback(_list.state.checkList);
		};
		
		this.toggleData = function(flag){
			if(!vm.options.selectable) return;
			var checkList = [];
			$list.find(".wev-table-view-cell").toggleClass("checked", flag);
			if(flag){
				_list.state.list.forEach(function(item){
					checkList.indexOf(item) < 0 && checkList.push(item);
				});
			}
			_list.state.checkList = checkList;
		};

		_list.state = {
			timestamp: 0,
			pageNo: 0,
			list: [],
			checkList: [],
			searchKey: "",
			dynamicParam: {}
		};
		
		_list.initBtns = function (pageid) {
			if (!vm.btns.length) return;

			$(".wev-list-btn-container", $comp).on("click", ".btn", function () {
				var $btn = $(this);
				
				var index = $(this).data("index");

				mUtil.eval(vm.btns[index].click, pageid);
			});
		};

		_list.initSearch = function () {
			var $search = $(".wev-search", $comp),
				$searchInput = $("input", $search);

			$search.on("click.active", ".wev-placeholder", function (e) {
				$search.addClass("wev-active").removeClass("wev-inactive");
				$searchInput.focus();
			}).on("click.clear", ".wev-clear-btn", function () {
				$searchInput.val("").focus().triggerHandler("input");
				_list.state.searchKey = "";
			});
			// 搜索框事件
			$searchInput.on("blur", function () {
				if (this.value) return;

				$search.removeClass("wev-active").addClass("wev-inactive");
			}).on("input", function () {
				$search.toggleClass("wev-has-value", !!this.value);
			}).on("keyup", function (e) {
				if (e.keyCode !== 13) return;

				_list.state.searchKey = this.value;
				_list.refreshList();
				this.blur();
			});
		};

		_list.refreshList = function (cb) {
            var that = this;
			var coms = this.components;
			var loading = coms.loading,
				moreLoading = coms.moreLoading;
			var state = _list.state;

			state.pageNo = 0;
			state.list = [];

			loading.setRefs(this.$comp, "wev-refreshing");
			loading.show();

			_list.loadData(function (hasMore, noData) {
				loading.hide();
				moreLoading.hide(hasMore, noData);
                cb && cb();

                // 支持上拉刷新功能
                if(mUtil.canPullToRefresh(that.id) && hasMore) {
                    require(['pullToRefreshHelper'], function (PullToRefresh) {
                        var $container = $comp.closest('.page-content');

                        // 日历+列表的情况
                        if('auto' === $comp.css('overflow-y')) {
                            $container = $comp;
                        }

                        new PullToRefresh({
                            el: $list,
                            container: $container.get(0),
                            loadData: _list.loadData,
                            loading: that.components.moreLoading
                        });
                    });
                }
			});
		};

		_list.loadData = function (callback) {
			var that = this;
			var state = _list.state;
			var timestamp = new Date().valueOf();

			state.timestamp = timestamp;
			state.pageNo++;

			var pageNo = state.pageNo;
			var pageSize = vm.pageSize;
			var requestParam = {};

			vm.options.inParams.forEach(function (p) {
				requestParam[p.paramName] = mUtil.fmtParamValue(p.paramValue, {
					pageNo: pageNo,
					pageSize: pageSize,
					searchKey: _list.state.searchKey
				});
			});

			//拓展requestParam
			$.extend(true, requestParam, mUtil.getPageParam(this.pageid), state.dynamicParam);
			mUtil.action(vm.url, requestParam, function (responseText) {
				if (timestamp != state.timestamp) return;

				var result = responseText;
				try {
					if (typeof responseText == 'string'){
						result = JSON.parse(responseText);
					}
				} catch (e) {
					mUtil.getLabel(5294, "列表数据转换成JSON时出现异常,数据如下:",function(msg){
						console.error(msg + "\n" + responseText);
	                });
					if (typeof (callback) == "function") { callback.call(this, false); }
					return;
				}

				var fmt = vm.options.outputFormat;
				var jsonDatas = result[fmt.DATAS];
				var totalSize = parseInt(result[fmt.TOTAL_SIZE]);
				var totalPageCount = totalSize % pageSize === 0 ? totalSize / pageSize : parseInt(totalSize / pageSize) + 1;
				var rd = {};

				mUtil.concat(state.list, jsonDatas);

				rd.datas = _list.getShowDatas(jsonDatas, vm.normalview);

				var templateHtml = [
					'{@each datas as d}',
					'<li class="wev-table-view-cell wev-media">',
						'<a class="wev-navigate-right {@if d.readonly}wev-data-readonly{@/if}" href="javascript:void(0);">',
							'<div class="wev-table-checkbox">'+(vm.options.selectable ? '<i class="wev-css-icon wev-multi-check"></i>' : "")+'</div>',
							'<div class="wev-media-object wev-pull-left">',
								'$${d.imgFieldValue}',
							'</div>',
							'<div class="wev-media-body">',
								'$${d.titleFieldValue}',
								'{@each d.otherFieldValue as row}',
								'<div class="wev-ellipsis">',
									'$${row}',
								'</div>',
								'{@/each}',
							'</div>',
						'</a>',
						'{@if d.swipeContent}',
						'<div class="wev-slider-handle">$${d.swipeContent}</div>',
						'{@/if}',
					'</li>',
					'{@/each}'
				].join('');

				var html = mUtil.parseTemplate(templateHtml, { datas: rd.datas});
				var $newList = $(html);
				
				if (pageNo == 1) {
					$list.html("");
				}

				$list.append($newList);
				initLazyImg();

				var hasMore = (pageNo < totalPageCount) && !vm.options.showOnePage;
				var noData = totalSize <= 0;

				callback(hasMore, noData);
				mUtil.renderVarParser(vm.needParseVar);
				initSwipe($newList, that.pageid);
			});
		};

		_list.getShowDatas = function (jsonDatas, viewset) {
			return jsonDatas.map(function (d) {
				var dataurl = "javascript:void(0);";
				
				if (!vm.options.readonly && vm.options.dataurl) {
					dataurl = mUtil.replaceValAndVarParser(vm.options.dataurl, d);
				}
				d.dataurl = dataurl;
				
				return {
					imgFieldValue: mUtil.replaceValAndVarParser(viewset.imgfield, d), // 图片
					titleFieldValue: mUtil.replaceValAndVarParser(viewset.titlefield, d), // 标题
					swipeContent: getSwipeContent(vm.swipe.content || "", d, vm.swipe.params),
					readonly: vm.options.readonly,
					otherFieldValue: viewset.otherfields.map(function (field) {
						return mUtil.replaceValAndVarParser(field, d);
					}).filter(function (v) { return v; })
				};
			});
		};

		function initLazyImg() {
			require(["lazyImgHelper"]);
		}

		function initSwipe($ele, pageid) {
			if (!vm.swipe.content) return;

			require(["swipeHelper", "css!listSwipe_css"], function (h) {
				$ele.each(function () {
					h.swipe($(this).children("a"), pageid);
				});
			});
		}

		function getSwipeContent(swipeContentTmp, jsonData, swipeParams) {
			if (!swipeContentTmp) return "";

			var swipeContent = mUtil.replaceValAndVarParser(swipeContentTmp, jsonData);

			swipeParams = swipeParams || [];
			swipeParams.forEach(function (p) {
				if (p.paramFunction !== "普通按钮") return;

				var field = p.paramField;
				var decode = mUtil.replaceValAndVarParser(field, jsonData); // 加密前的
				var encode = encodeURIComponent(decode); // 加密后的
				var start = swipeContent.indexOf(decode); // 起始位置

				if (!~start) return;

				var end = swipeContent.indexOf(decode) + decode.length;
				var prefix = swipeContent.substring(0, start); // 前面部分
				var suffix = swipeContent.substring(end); // 后面部分

				swipeContent = prefix + encode + suffix;
			});

			return swipeContent;
		}

		_list.refreshList = _list.refreshList.bind(this);
		_list.loadData = _list.loadData.bind(this);
	};

	return Component.init(UrlList);
});