CountPanel_wev8.js 7.36 KB
if(typeof(MEC_NS) == 'undefined'){
	MEC_NS = {};
}

MEC_NS.CountPanel = function(type, id, mecJson){
	this.type = type;
	if(!id){
		id = new UUID().toString();
	}
	this.id = id;
	if(!mecJson){
		mecJson = this.getDefaultMecJson();
	}
	this.editor = {};
	this.mecJson = mecJson;
};

/*获取id。 必需的方法*/
MEC_NS.CountPanel.prototype.getID = function(){
	return this.id;
};
/*加载数据*/
MEC_NS.CountPanel.loadData = function(callback) {
    var _u = require('utils');
    dataSetPanel = _u.use('dataSetPanel');

    dataSetPanel('loadDataSetItems', callback);
}
/*获取设计的html, 页面上怎么显示控件完全依赖于此方法。 必需的方法*/
MEC_NS.CountPanel.prototype.getDesignHtml = function(){
	return getDesignHtml(this);
};

/*获取构建属性编辑窗体的html,添加和单击控件后会调用此方法,由此方法去构建属性编辑窗体。 必需的方法*/
MEC_NS.CountPanel.prototype.getAttrDlgHtml = function(){
	var theId = this.id;
	
	var htm = "<div id=\"MADCountPanel_"+theId+"\">";
	htm += "<table class=\"table\" id=\"MADCountPanel_table_"+theId+"\">"  //名称  单击脚本  提示 图标位置
				+ "<thead>"
					+ "<tr>"
						+ "<td style=\"width:20px;\"></td>"
						+ "<td style=\"width:90px;\">"+SystemEnv.getHtmlNoteName(4141)+"</td>"
						+ "<td style=\"width:*;\">"+SystemEnv.getHtmlNoteName(5076)+"</td>"	//内容
						+ "<td style=\"width:90px;\">"+SystemEnv.getHtmlNoteName(4574) + SystemEnv.getHtmlNoteName(4634)+"</td>"
						+ "<td style=\"width:24px;\"></td>"
					+ "</tr>"
				+ "</thead>"
				+ "<tbody></tbody>"
			+"</table>" 
			+ "<div class=\"tip-control\">"+SystemEnv.getHtmlNoteName(4159)+"</div>";  //单击右上角的添加按钮以添加内容
	htm += "<div class=\"bottom\">" 
			 + "<div class=\"save-btn\" onclick=\"refreshMecDesign('"+theId+"');\">"+SystemEnv.getHtmlNoteName(3451)+"</div>"
			 + "<div class=\"col-12 tr\"><span class=\"add-before add-item\" data-autobind data-scroll=\"bottom\" onclick=\"MADCountPanel_AddItem('"+theId+"');\">"+SystemEnv.getHtmlNoteName(3518)+"</span></div>"  //添加
		  + "</div>";  //确定
	htm += "</div>";
	
	htm += "<div class=\"MAD_Alert\">"+SystemEnv.getHtmlNoteName(4115)+"</div>";  //已生成到布局
	return htm;
};


/*构建属性编辑窗体完成后调用此方法,主要用于一些必须要使用js对页面进行后置操作时,无需要此方法可至空。 不必需的方法,有此方法系统自动调用*/
MEC_NS.CountPanel.prototype.afterAttrDlgBuild = function(){
	var that = this,
		theId = this.id;
	
	var $attrContainer = $("#MADCountPanel_" + theId);
	var mecHandler = MECHandlerPool.getHandler(theId);
	
	var items = this.mecJson["items"] || [];
	if(items.length == 0){
		$(".tip-control", $attrContainer).show();
	}
	
	for(var i = 0; i < items.length; i++){
		MADCountPanel_AddItemToPage(theId, items[i]);
	}
	
	$("#MADCountPanel_table_"+theId+" > tbody").sortable({
		revert: false,
		axis: "y",
		items: "tr",
		handle: ".bemove",
		update: function(){
			mecHandler.autobind.update();
		}
	});
};

/*获取JSON*/
MEC_NS.CountPanel.prototype.getMecJson = function(){
	var theId = this.id;
	
	this.mecJson["id"] = theId;
	this.mecJson["mectype"] = this.type;
	
	var $attrContainer = $("#MADCountPanel_" + theId);
	if($attrContainer.length > 0){
		var items = [];
		$("#MADCountPanel_table_"+theId+" > tbody > tr").each(function(i){
			var $row = $(this);
			var item = {};
			item["text"] = MLanguage.getValue($("input[name='text']", $row));
			item["content"] = $("textarea[name='content']", $row).val();
			item["script"] = $("input[name='script']", $row).val();
			
			items.push(item);
		});
		this.mecJson["items"] = items;
	}
	return this.mecJson;
};

MEC_NS.CountPanel.prototype.getDefaultMecJson = function(){
	return {
		id: this.id,
		mectype: this.type,
		items: [{
			text: SystemEnv.getHtmlNoteName(4141), // 名称
			content: "1"
		}, {
			text: SystemEnv.getHtmlNoteName(4141) + "2", // 名称
			content: "2"
		}, {
			text: SystemEnv.getHtmlNoteName(4141) + "3", // 名称
			content: "3"
		}]
	};
};

function MADCountPanel_AddItem(mec_id){
	MADCountPanel_AddItemToPage(mec_id, {
		text: "",
		content: "",
		script: ""
	});
}

function MADCountPanel_DSChange(ele, mec_id){
    var mecHandler = MECHandlerPool.getHandler(mec_id);
    var $ele = $(ele).parent();
    var text = $ele.data('ds') && $ele.data('ds').entryName;
    var $entryName = $('input[name="text"]', $(ele).closest('tr'));
    $(ele).siblings('pre.hidden-textarea').find('span').text($(ele).val());
    text && MLanguage.setValue($entryName,text);
    mecHandler.autobind.update();
}

function MADCountPanel_AddItemToPage(mec_id, item){
	var $attrContainer = $("#MADCountPanel_" + mec_id);
	$(".tip-control", $attrContainer).hide();
	
	var text = item["text"];
	var content = item["content"];
	var script = item["script"] || "";
	var mecHandler = MECHandlerPool.getHandler(mec_id);
	
	var html = "<tr>"
					+ "<td class=\"bemove\" width=\"20px\" style=\"padding-top: 12px;\"></td>"
					+ "<td width=\"90px\">"
						+"<input type='text' name=\"text\" data-autobind placeholder='"+SystemEnv.getHtmlNoteName(4141)+"' class='form-control' "+MLanguage.ATTR+"/>"
					+ "</td>"
					+ "<td width=\"*\">"
                        + "<div class=\"sbHolder expandingArea\" style=\"width: 155px;\">"
		                    + "<div onclick=\"javascript:showDataSetPanel(this);\" class=\"sbToggle sbToggle-btc\"></div>"
		                    + "<pre class=\"hidden-textarea\" style=\"display: none; min-height: 48px; max-height: 120px; width: 100%;\"><span></span><br></pre>"//可变textarea占位元素
                            + "<textarea name=\"content\" onchange=\"MADCountPanel_DSChange(this, '"+mec_id+"')\" placeholder='"+SystemEnv.getHtmlNoteName(5077)+"' class=\"area-control\" style=\"border: none; width: 100%; line-height: 20px;\"></textarea>"//内容,如数据集{data.v}
                        + "</div>"
					+ "</td>"
					+ "<td width=\"90px\">"
						+ "<div class='click-control'>"
							+ "<input type=\"hidden\" name=\"script\"/>"
							+ SystemEnv.getHtmlNoteName(4574) + SystemEnv.getHtmlNoteName(4634)  //单击脚本
						+ "</div>"
					+ "</td>"
					+ "<td width=\"24px\" style=\"padding-top: 12px;\">"
						+ "<div class='del-after2'></div>"
					+ "</td>"
				+ "</tr>";
	var $row = $(html);
	$row.find('td').css('vertical-align', 'top');
	$('.sbHolder textarea', $row).on('input', function(){
		var $this = $(this);
		$this.siblings('pre.hidden-textarea').find('span').text($this.val());
	}).on('focus', function(){
		$(this).siblings('pre.hidden-textarea').show();
	}).on('blur', function(){
		$(this).siblings('pre.hidden-textarea').hide();
		$(this).scrollTop(0);
	}).perfectScrollbar();
	var $tbody = $("#MADCountPanel_table_"+mec_id+" > tbody");
	$tbody.append($row);
	
	MLanguage.setValue($("input[name='text']", $row), text);
	$("textarea[name='content']", $row).val(content).siblings('pre.hidden-textarea').find('span').text(content);
	$("input[name='script']", $row).val(script);
	
	var $clickControl = $(".click-control", $row);
	$clickControl.click(function(){
		var $this = $(this);
		var $clickScript = $("input", $this);
		SL_AddScriptToField($clickScript);
	});
	SL_ChangeStyle($clickControl, script);
	
	$(".del-after2").click(function(){
		$(this).closest("tr").remove();
		if($tbody.children("tr").length == 0){
			$(".tip-control", $attrContainer).show();
		}
		mecHandler.autobind.update();
	});
	
	$row.MLanguage();
}