tfp/src/components/popuplist/controller.pc.js

A Web UI framework for TaskBuilder

import { FormInput } from "../controller.js";

/**
 * 弹出列表组件
 * @param {[type]} dataModel [description]
 */
export default class PopupList extends FormInput {

  constructor(__tfp, dataModel, parent) {
    super(__tfp, "PopupList", 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;
    }
    if (this._jqObj) {
      if (isNull(value)) {
        this._jqObj.find("input").val("");
      } else {
        if(this.dataModel.options) {
          for(var i=0;i<this.dataModel.options.length;i++) {
            var option = this.dataModel.options[i];
            if((option.value+"")==(val+"")) {
              this._jqObj.find("input").val(option.text);
              break;
            }
          }
        }
      }
    }
    if (!this._tfp.isDesigning) {
      this.valueOnChange();
      this.exeEventHandler("onChange", val);
    }
  }

  get options() { return this.dataModel.options }
  set options(value) {
    //if(this._tfp.isDesigning) {
      this.dataModel.options = value;
      return;
    //}
    /*if(this._jqObj && value && Array.isArray(value)) {
      this._jqObj.empty();
      this.dataModel.options = [];
      for(var i=0;i<value.length;i++) {
        this.addOption(value[i]);
      }
      //TODO 如果重置选项列表后，没有组件当前值对应的选项，应该把组件值设置为空
    }*/
  }

  get placeHolder() { return this.dataModel.placeHolder }
  set placeHolder(value) {
    this.dataModel.placeHolder = value;
    if (this._jqObj) this._jqObj.find("input").attr("placeholder", value);
  }

  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;
  }

  get dataListDivWidth() { return this.dataModel.dataListDivWidth }
  set dataListDivWidth(value) {
    this.dataModel.dataListDivWidth = value;
  }

  get dataListDivHeight() { return this.dataModel.dataListDivHeight }
  set dataListDivHeight(value) {
    this.dataModel.dataListDivHeight = value;
  }

  get enableFilter() { return this.dataModel.enableFilter }
  set enableFilter(value) {
    this.dataModel.enableFilter = value;
  }

  bindData(data) {
    if(isNull(data) || !Array.isArray(data)) return;
    this.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;
      if(!isNull(this.value) && (this.value+"")==(option.value+"") && this._jqObj) 
        this._jqObj.find("input").val(option.text);
      this.options.push(option);
    }
    if(this.options.length==0) return;
  }

  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);
    });
  }

  showOptions() {
    if(!this.options || this.options.length==0) return;
    var divDataList = $("#"+this.id+"_PopupListDiv");
    var iptVal = this._jqObj.find("input").val().trim();
    divDataList.empty();
    /*if(iptVal=="") {
      divDataList.hide();
      return;
    }*/
    if(!this.dataModel.required) {
      divDataList.append("<div data-value=\"-1\"></div>");
    }
    for(var i=0;i<this.options.length;i++) {
      var option = this.options[i];
      if(this.dataModel.enableFilter && !isNull(iptVal)) { 
        if(!isNull(option.text) && option.text.indexOf(iptVal)>=0) {
          divDataList.append("<div data-value=\""+i+"\">"
            +option.text.replace(iptVal, "<span>"+iptVal+"</span>")+"</div>");
        }
      } else {
        divDataList.append("<div data-value=\""+i+"\">"+option.text+"</div>");
      }
    }
    var that = this;
    divDataList.find("div").click(function() {
      let index = parseInt($(this).attr("data-value"));
      if(index>=0) {
        that.value = that.options[index].value;
      } else {
        that.value = null;
      }
      divDataList.empty();
      divDataList.hide();

      event.stopPropagation();
    });
    divDataList.css("left", that._jqObj.offset().left+"px");
    divDataList.css("top", (that._jqObj.offset().top+31)+"px");
    divDataList.show();

    document.addEventListener("click", function() {
      divDataList.hide();
    });
  }

  initRuntime() {
    let that = this;
    this._jqObj.blur(function () {
      let val = $(this).val().trim();
      that.dataModel.value = val;
      that.valueOnChange();
      that.exeEventHandler("onChange", val);
    });

    //如果设置了加载数据列表的服务
    if(this.dataModel.loadDataListService) {
      this.loadData();
    }

    this._jqObj.find("input").click(function() {
      that.showOptions();
      event.stopPropagation();
    });
    this._jqObj.find("img").click(function() {
      that.showOptions();
      event.stopPropagation();
    });

    if(this.enableFilter) {
      this._jqObj.find("input").bind("input", function() {
        that.showOptions();
      });

      this._jqObj.find("input").blur(function() {
        let val = $(this).val().trim();
        for(var i=0;i<that.options.length;i++) {
          if(that.options[i].text==val) return;
        }
        $(this).val("");
      });

      this._jqObj.find("input").removeAttr("readonly");
    }

    let dataListDivWidth = this._jqObj.width()+6;
    if(this.dataModel.dataListDivWidth) dataListDivWidth = this.dataModel.dataListDivWidth;
    let dataListDivHeight = 240;
    if(this.dataModel.dataListDivHeight) dataListDivHeight = this.dataModel.dataListDivHeight;
    //添加数据列表层
    $("body").append("<div id=\""+this.id+"_PopupListDiv\" "
      +"class=\"tfp-popuplist-datalist\" style=\"width:"+dataListDivWidth
      +"px; height:"+dataListDivHeight+"px;\"></div>");
  }
}