tfp/src/components/datacard/controller.js

A Web UI framework for TaskBuilder

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

/**
 * 数据卡片组件
 * @param {[type]} dataModel [description]
 */
export default class DataCard extends ContainerComponent {

  constructor(__tfp, dataModel, parent) {
    super(__tfp, "DataCard", dataModel, parent);

    this.dataList = [];
  }

  //属性
  get loadDataService() { return this.dataModel.loadDataService }
  set loadDataService(value) {this.dataModel.loadDataService = value}

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

  get containerEl() { 
    return this._jqObj.get(0);
  }

  setCptDataFormat(cdm) {
    //let cpt = this._tfp.get(cdm.id);
    if(cdm.dataBindingFormat) {
      cdm.value = cdm.dataBindingFormat;
    }
    if(cdm.components && cdm.components.length>0) {
      for(var i=0;i<cdm.components.length;i++) {
        this.setCptDataFormat(cdm.components[i]);
      }
    }
  }

  /**
   * 动态创建子组件
   * @param  {[type]} cdm [description]
   * @return {[type]}     [description]
   */
  createChildCpt(parent, cdm, cardIndex, data) {
    let newId = this.id+"_"+cdm.id + "_" + cardIndex;
    $("#" + cdm.id).attr("id", newId);
    cdm.id = newId;
    var cptClass = this._tfp.controllers[cdm.type];

    if (!cptClass) {
      console.log("未找到名为[" + cdm.type + "]的组件控制器！");
      return;
    }

    var cpt = new cptClass(this._tfp, cdm, parent);
    window[cpt.id] = cpt;
    cpt._jqObj = $("#" + cpt.id);
    if (cpt._jqObj.length > 0) cpt.el = cpt._jqObj[0];
    
    this._tfp.bindCptData(cpt, data);
    this._tfp.initCptRuntime(cpt);

    if (!cdm.components || cdm.components.length == 0) return;

    for (var i = 0; i < cdm.components.length; i++) {
      this.createChildCpt(cpt, cdm.components[i], cardIndex, data);
    }
  }
 
  bindData(data) {
    if(!data || !Array.isArray(data)) return;
    this.dataList = data;

    if(this.dataModel.onBeforeBindData) {
      try {
        eval(this.dataModel.onBeforeBindData);
      } catch(err) {
        console.log(err);
      }
    }

    this._jqObj.remove();

    for(var i=0;i<data.length;i++) {
      let cardData = data[i];
      let cardIndex = i;
      if(this.dataModel.onBeforeAddCard) {
        try {
          let ret = eval(this.dataModel.onBeforeAddCard);
          if(ret) cardData = ret;
        } catch(err) {
          console.log(err);
        }
      }

      var dataCardHtml = this.templateHtml+"";
      dataCardHtml = dataCardHtml.replace(" id=\""+this.id+"\"", "");
      try {
        dataCardHtml = this._tfp.replaceDataField(cardData, dataCardHtml);
        dataCardHtml = this._tfp.exeExpress(dataCardHtml);
      } catch (e) {
        console.log(e);
        return;
      }
      this.parentEl.append(dataCardHtml);

      let cdmNew = JSON.parse(JSON.stringify(this.templateCdm));
      for (var j = 0; j < cdmNew.components.length; j++) {
        let cdmChild = cdmNew.components[j];
        this.createChildCpt(this, cdmChild, cardIndex, cardData);
      }
      
      var newCard = this.parentEl.find(".tfp-datacard").last();
      newCard.show();

      var that = this;

      if(this.templateCdm.onClick) {
        newCard.click(function() {
          let cardIndex = $(this).index();
          let cardData = that.dataList[cardIndex];
          try {
            eval(that.templateCdm.onClick);
          } catch(err) {
            console.log(err);
          }
        });
      }

      if(this.templateCdm.onMouseOver) {
        newCard.mouseover(function() {
          let cardIndex = $(this).index();
          let cardData = that.dataList[cardIndex];
          try {
            eval(that.templateCdm.onMouseOver);
          } catch(err) {
            console.log(err);
          }
        });
      }

      if(this.templateCdm.onMouseOut) {
        newCard.mouseout(function() {
          let cardIndex = $(this).index();
          let cardData = that.dataList[cardIndex];
          try {
            eval(that.templateCdm.onMouseOut);
          } catch(err) {
            console.log(err);
          }
        });
      }
      
      if(this.templateCdm.onAfterAddCard) {
        try {
          eval(this.templateCdm.onAfterAddCard);
        } catch(err) {
          console.log(err);
        }
      }
    }
    
    if(this.dataModel.onAfterBindData) {
      try {
        eval(this.dataModel.onAfterBindData);
      } catch(err) {
        console.log(err);
      }
    }
  }

  loadData() {
    if(!this.dataModel.loadDataService) {
      alert("请为["+this.id+"]设置加载数据服务！");
      return;
    }
    let serviceCpt = this._tfp.get(this.dataModel.loadDataService);
    if(!serviceCpt) {
      alert("ID为["+this.dataModel.loadDataService+"]的组件不存在！");
      return;
    }
    if(!this.dataModel.dataBindingMember) {
      alert("请为["+this.id+"]设置数据绑定成员！");
      return;
    }

    var args = {};

    if(this.dataModel.onBeforeLoadData) {
      try {
        eval(this.dataModel.onBeforeLoadData);
      } catch(err) {
        console.log(err);
      }
    }

    let that = this;
    serviceCpt.status = 0;
    serviceCpt.request(args, function(req, res) {
      if(that.dataModel.onAfterLoadData) {
        try {
          eval(that.dataModel.onAfterLoadData);
        } catch(err) {
          console.log(err);
        }
      }

      var data = res[that.dataModel.dataBindingMember];
      if(!data) return;
      if (data.rows) {
        that.bindData(data.rows);
      } else {
        if(!Array.isArray(data)) data = [data];
        that.bindData(data);
      }
    });
  }

  initRuntime() {
    let that = this;
    this.parentEl = this._jqObj.parent();
    this.templateHtml = this._jqObj.get(0).outerHTML;
    this.templateCdm = JSON.parse(JSON.stringify(this.dataModel));
    this.dataModel.components = [];
    this.loadData();
  }
}