tfp
Version:
A Web UI framework for TaskBuilder
269 lines (250 loc) • 8.92 kB
JavaScript
import { FormInput } from "../controller.js";
/**
* 弹出列表组件
* @param {[type]} dataModel [description]
*/
export default class List extends FormInput {
constructor(__tfp, dataModel, parent) {
super(__tfp, "List", dataModel, parent);
}
get value() {
if (!this.dataModel.value) return "";
return this.dataModel.value;
}
set value(value) {
let val = value;
if (isNull(value)) {
val = "";
this.dataModel.value = null;
} else {
this.dataModel.value = val;
//this.options = this.dataModel.options;
}
if (this._jqObj) {
this.reRender();
}
if (!this._tfp.isDesigning) {
this.valueOnChange();
this.exeEventHandler("onChange", val);
}
}
get options() { return this.dataModel.options }
set options(options) {
if(this._jqObj && options && Array.isArray(options)) {
this.dataModel.options = options;
if (this._jqObj) {
this.reRender();
}
}
}
get orderType() { return this.dataModel.orderType }
set orderType(value) {
this.dataModel.orderType = value;
//this.options = this.dataModel.options;
if (this._jqObj) {
this.reRender();
}
}
get icon() { return this.dataModel.icon }
set icon(value) {
this.dataModel.icon = value;
//this.options = this.dataModel.options;
if (this._jqObj) {
this.reRender();
}
}
get color() { return this.dataModel.color }
set color(value) {
this.dataModel.color = value;
if (this._jqObj) {
this.reRender();
}
}
get bgColor() { return this.dataModel.bgColor }
set bgColor(value) {
this.dataModel.bgColor = value;
if (this._jqObj) {
this.reRender();
}
}
get loadDataListService() { return this.dataModel.loadDataListService }
set loadDataListService(value) {
this.dataModel.loadDataListService = value;
}
get dataListBindingMember() { return this.dataModel.dataListBindingMember }
set dataListBindingMember(value) {
this.dataModel.dataListBindingMember = value;
}
get dataListValueFormat() { return this.dataModel.dataListValueFormat }
set dataListValueFormat(value) {
this.dataModel.dataListValueFormat = value;
}
get dataListTextFormat() { return this.dataModel.dataListTextFormat }
set dataListTextFormat(value) {
this.dataModel.dataListTextFormat = value;
}
reRender() {
this._jqObj.empty();
this._jqObj.append(this.getBodyHtml());
if(!this._tfp.isDesigning) this.bindItemEvent();
}
getBodyHtml(getComponentsHtml) {
let indent = this.getHtmlIndent();
let html = "\r\n";
let bgColor = '#dddddd';
let color = '#666666';
if (this.dataModel.bgColor) bgColor = this.dataModel.bgColor;
if (this.dataModel.color) color = this.dataModel.color;
if(this.dataModel.options) {
for(var i=0;i<this.dataModel.options.length;i++) {
let option = this.dataModel.options[i];
html += indent+"\t<div data-value=\""+option.value+"\"";
if ((option.value + "") == (this.dataModel.value + "")) {
html += " style=\"background-color:" + bgColor + ";"
if (!option.href) {
html += "color:" + color + ";";
}
html += "\"";
}
if (!this._tfp.isDesigning && option.onClick) html += " onclick=\"" + option.onClick + "\"";
let dot = "●";
if(this.dataModel.orderType=="order") dot = (i+1)+".";
if (this.dataModel.icon) {
let imgUrl = '';
if (this.dataModel.icon[0] == '/') {
imgUrl = this._tfp.rootPath+""+this.dataModel.icon+"";
} else {
imgUrl = this.dataModel.icon;
}
dot = "<img width=\"16\" height=\"16\" align=\"absmiddle\" src=\"" + imgUrl + "\" />";
}
html += ">";
if (option.href) {
html += "<a ";
if ((option.value + "") == (this.dataModel.value + ""))
html += " style=\"color:" + color + ";\"";
if (!this._tfp.isDesigning) {
if (option.target == "self") {
html += " href=\"" + option.href + "\"";
} else {
html += " href=\"javascript:void(0)\" onclick=\"";
let title = "Tasgine - 任擎";
if (option.targetTitle) title = option.targetTitle;
if (option.target == "page") {
html += "tfp.openPage('" + title + "', '" + option.href + "')";
} else if (option.target == "dialog") {
let width = option.dialogWidth;
if (!width) width = "480px";
if ((width + "").indexOf("px") < 0) width += "px";
let height = option.dialogHeight;
if (!height) height = "480px";
if ((height + "").indexOf("px") < 0) height += "px";
html += "tfp.openDialog('" + title + "', '" + option.href + "'"
+ ", '" + width + "', '" + height + "')";
} else if (option.target == "window") {
html += "window.open('" + option.href + "', '" + title + "')";
}
html += "\"";
}
}
html += ">";
}
html += "" + dot + " " + (option.text ? option.text : option.value) + "";
if (option.href) {
html += "</a>";
}
html += "</div>\r\n";
}
}
return html+"\t";
}
bindItemEvent() {
var that = this;
this._jqObj.children("div").click(function () {
let bgColor = "#dddddd";
let color = "#666666";
if (that.dataModel.bgColor) bgColor = that.dataModel.bgColor;
if (that.dataModel.color) color = that.dataModel.color;
that._jqObj.find("div").css("color", "#666666");
that._jqObj.find("a").css("color", "#666666")
$(this).css("background-color", bgColor).siblings("div").css("background-color", "");
if ($(this).find("a").length > 0) {
$(this).find("a").css("color", color);
} else {
$(this).css("color", color);
}
var index = $(this).index();
let option = that.dataModel.options[index];
var value = option.value;
if (option.onClick) eval(option.onClick);
if (that.dataModel.onClickOption) eval(that.dataModel.onClickOption);
});
}
bindData(data) {
if(isNull(data) || !Array.isArray(data)) return;
let options = [];
for(var i=0;i<data.length;i++) {
let row = data[i];
let option = {};
try {
let valueFormat = this.dataModel.dataListValueFormat;
if(valueFormat.indexOf("{")<0 && valueFormat.indexOf("#[")<0) valueFormat = "{"+valueFormat+"}";
option.value = this._tfp.replaceDataField(row, valueFormat);
if(option.value) option.value = this._tfp.exeExpress(option.value);
} catch(e) {
console.log(e);
return;
}
if(isNull(option.value)) continue;
option.text = option.value;
if(this.dataModel.dataListTextFormat) {
try {
let textFormat = this.dataModel.dataListTextFormat;
if(textFormat.indexOf("{")<0 && textFormat.indexOf("#[")<0) textFormat = "{"+textFormat+"}";
option.text = this._tfp.replaceDataField(row, textFormat);
if(option.text) option.text = this._tfp.exeExpress(option.text);
} catch(e) {
console.log(e);
return;
}
}
if(isNull(option.text)) continue;
options.push(option);
}
this.options = options;
}
loadData() {
if(!this.dataModel.loadDataListService) {
alert("请为["+this.id+"]设置加载数据服务！");
return;
}
let serviceCpt = this._tfp.get(this.dataModel.loadDataListService);
if(!serviceCpt) {
alert("ID为["+this.dataModel.loadDataListService+"]的组件不存在！");
return;
}
if(!this.dataModel.dataListBindingMember) {
alert("请为["+this.id+"]设置数据绑定成员！");
return;
}
if(!this.dataModel.dataListValueFormat) {
alert("请为["+this.id+"]设置选项值数据格式！");
return;
}
let that = this;
//与服务组件建立绑定
if(!serviceCpt.bindCpts) serviceCpt.bindCpts = [];
if(!serviceCpt.bindCpts.contains(this.id)) serviceCpt.bindCpts.push(this.id);
serviceCpt.request(null, function(req, res) {
var data = res[that.dataModel.dataListBindingMember];
that.bindData(data);
});
}
initRuntime() {
//如果设置了加载数据列表的服务
if(this.dataModel.loadDataListService) {
this.loadData();
}
this.bindItemEvent();
}
}