hust-epi/admin-ui/yvanui/yvanui.power.xtype.js

/**
 * power.xtype 扩展组件
 * @author luoyifan
 * 2018-12-11 10:32:00
 */
"use strict";
(function ($) {

  function defaultInput($target, item, context, parent) {
    if ($.type(item.onBeforeRender) === 'function') {
      if (item.onBeforeRender.call(this, $target, item, context) === false) {
        return;
      }
    }

    var css = 'easyui-' + item.xtype;

    //宽度计算
    if (!item.width) {
      item.span = item.span || 1;
      if (item.span === 1) {
        item.width = 280;
      } else if (item.span === 2) {
        item.width = 560;
      } else if (item.span === 3) {
        item.width = 840;
      }
    }

    //生成DOM
    var $dom = $('<input class="' + css + ' ctl_' + item.name + '" name="' + item.name + '" />');
    $.yvan.fillCommonProperties($dom, item);
    $target.append($('<div class="vv"></div>').append($dom));

    if ($.inArray(item.xtype, ['textbox']) >= 0 && item.widget) {
      item.icons = [
        {
          iconCls: 'icon-clear',
          handler: widget.clear
        }, {
          iconCls: 'icon-search',
          handler: function (e) {
            widget.show(item.widget, this);
          }
        }];
    }

    if (window.hasOwnProperty('shortcut')) {
      shortcut.processInput($dom, item, context);
    }

    if (parent) {
      //代入上级给的 subLabelWidth/subControlWidth
      if (parent.hasOwnProperty('subLabelWidth') && !item.hasOwnProperty('labelWidth')) {
        item.labelWidth = parent.subLabelWidth;
      }
      if (parent.hasOwnProperty('subControlWidth') && !item.hasOwnProperty('width')) {
        item.width = parent.subControlWidth;
      }
    }

    //初始化元素
    $dom[item.xtype](item);

    if (window.hasOwnProperty('shortcut')) {
      shortcut.processInputAfter($dom, item, context);
    }

    if ($.type(item.onRender) === 'function') {
      item.onRender.call($dom[0], $target, item, context);
    }

    return $dom;
  }

  function tabRender($target, item, context) {
    var items = $.yvan.getItems(item);
    var doms = [];
    for (var i = 0; i < items.length; i++) {
      var value = items[i];
      if ($.type(value) === 'function') {
        value = value(context);
      }
      if (!value) {
        continue;
      }

      if ($.type(value.onBeforeRender) === 'function') {
        if (!value.onBeforeRender.call(this, $target, value, context)) {
          continue;
        }
      }

      var $dom = $('<div title="' + (value.title || '') + '" xtype="tab"></div>');
      $dom.attr('data-options', dataOptions(value, ['title', 'lazy']));
      $.yvan.fillCommonProperties($dom, value);
      doms.push($dom);
      $target.append($dom);

      if ($.type(value.onRender) === 'function') {
        value.onRender.call($dom[0], $target, value, context);
      }

      if (value.lazy) {
        $.data($dom, 'lazyInited', false);
      } else {
        renderEach($dom, $.yvan.getItems(value), context);
      }
    }
    $target.tabs($.extend({}, item, {
      onSelect: function (title, index) {
        if (items[index].lazy) {
          var $dom = doms[index];
          if (!$.data($dom, 'lazyInited')) {
            $.data($dom, 'lazyInited', true);
            renderEach($dom, $.yvan.getItems(items[index]), context);
          }
        }

        if ($.type(items[index].onSelected) === 'function') {
          items[index].onSelected($dom, $.data($dom, 'lazyInited'), context);
        }
        if (item.onSelect) {
          item.onSelect.apply(this, arguments);
        }
      }
    }));
  }

  function processToolbar($target, item, context) {
    if (!item.hasOwnProperty('toolbar')) {
      return;
    }

    if ($.type(item.toolbar) === 'function') {
      item.toolbar = item.toolbar(context);
    }

    if ($.type(item.toolbar) === 'string') {
      return;
    }

    var id = $.yvan.createId('tb_');
    var $dom = $('<div id="' + id + '"></div>');
    $target.append($dom);

    if ($.type(item.toolbar) === 'array') {
      $dom.renderEach(item.toolbar, context);
    }
    if ($.type(item.toolbar) === 'object') {
      $dom.renderDispatch(item.toolbar, context);
    }
    item.toolbar = '#' + id;
    return $dom;
  }

  function layoutSubRender($target, item, context, parent) {
    var functions = [];
    for (var name in opts) {
      if (!opts.hasOwnProperty(name)) continue;
      var value = opts[name];
      if ($.inArray(name, ['xtype', 'attr', 'itemId', 'id', 'html', 'class', 'css', 'title', 'onRender', 'onBeforeRender']) >= 0) {
        //忽略属性
        continue;
      }

      switch (name) {
        case 'north': //上面
        case 'center': //中间
        case 'west': //左边
        case 'east': //右边
        case 'south': //下面
          if ($.type(value.onBeforeRender) === 'function') {
            if (value.onBeforeRender.call(this, $target, value, context) === false) {
              continue;
            }
          }

          var $dom = $('<div></div>');
          $dom.attr('data-options', dataOptions(value, [], {
            region: name
          }));
          $.yvan.fillCommonProperties($dom, value);
          $target.append($dom);
          $dom.attr('tabIndex', -1);
          //继续递归
          (function ($dom, $target, items, context, value) {
            functions.push(function () {
              $dom.renderEach(items, context);
              if ($.type(value.onRender) === 'function') {
                value.onRender.call($dom[0], $target, value, context);
              }
            });
          })($dom, $target, $.yvan.getItems(value), context, value);
          break;

        default:
          console.log('layout 下面只允许出现 north,center,west,east,south 属性, 未知属性:', name);
          break;
      }
    }

    $target.layout({
      fit: true
    });

    functions.forEach(function (v) {
      v();
    });

    $target.attr('tabIndex', -1);
  }

  $.extend($.fn.power.defaults.xtype, {
    textbox: defaultInput,
    combobox: defaultInput,
    searchbox: defaultInput,
    datebox: defaultInput,
    numberbox: defaultInput,
    combotree: defaultInput,
    combotreegrid: defaultInput,
    combogrid: defaultInput,
    datetimebox: defaultInput,
    tagbox: defaultInput,
    maskedbox: defaultInput,
    passwordbox: defaultInput,
    filebox: defaultInput,
    numberspinner: defaultInput,

    layout: function ($target, item, context, parent) {
      if ($.type(item.onBeforeRender) === 'function') {
        if (item.onBeforeRender.call(this, $target, item, context) === false) {
          return;
        }
      }

      //布局
      var $dom = $('<div class="easyui-layout"></div>');
      $.yvan.fillCommonProperties($dom, item);
      $target.append($dom);
      layoutSubRender($dom, item, context, item);

      if ($.type(item.onRender) === 'function') {
        item.onRender.call($dom[0], $target, item, context);
      }
    },

    hidden: function ($target, item, context, parent) {
      if ($.type(item.onBeforeRender) === 'function') {
        if (item.onBeforeRender.call(this, $target, item, context) === false) {
          return;
        }
      }

      var $dom = $('<input type="hidden" name="' + item.name + '" />');
      $.yvan.fillCommonProperties($dom, item);
      if (item.hasOwnProperty('value')) {
        $dom.val(item.value);
      }
      $target.append($dom);

      if ($.type(item.onRender) === 'function') {
        item.onRender.call($dom[0], $target, item, context);
      }
      return $dom;
    },

    div: function ($target, item, context, parent) {
      if ($.type(item.onBeforeRender) === 'function') {
        if (item.onBeforeRender.call(this, $target, item, context) === false) {
          return;
        }
      }

      var $dom = $('<div></div>');
      $.yvan.fillCommonProperties($dom, item);
      $target.append($dom);
      $dom.renderEach($.yvan.getItems(item), context);

      if ($.type(item.onRender) === 'function') {
        item.onRender.call($dom[0], $target, item, context, item);
      }
      return $dom;
    },

    offset: function ($target, item, context, parent) {
      if ($.type(item.onBeforeRender) === 'function') {
        if (item.onBeforeRender.call(this, $target, item, context) === false) {
          return;
        }
      }

      var $dom = $('<div class="yvan-form-offset" />');
      $.yvan.fillCommonProperties($dom, item);
      $target.append($dom);

      if ($.type(item.onRender) === 'function') {
        item.onRender.call($dom[0], $target, item, context);
      }
      return $dom;
    },

    checkgroup: function ($target, item, context, parent) {
      if ($.type(item.onBeforeRender) === 'function') {
        if (item.onBeforeRender.call(this, $target, item, context) === false) {
          return;
        }
      }

      var $dom = $('<div class="vv"></div>');
      $.yvan.fillCommonProperties($dom, item);
      $target.append($dom);
      $dom.checkgroup(item);

      if ($.type(item.onRender) === 'function') {
        item.onRender.call($dom[0], $target, item, context);
      }
      return $dom;
    },

    radiogroup: function ($target, item, context, parent) {
      if ($.type(item.onBeforeRender) === 'function') {
        if (item.onBeforeRender.call(this, $target, item, context) === false) {
          return;
        }
      }

      var $dom = $('<div class="vv"></div>');
      $.yvan.fillCommonProperties($dom, item);
      $target.append($dom);
      $dom.radiogroup(item);

      if ($.type(item.onRender) === 'function') {
        item.onRender.call($dom[0], $target, item, context);
      }
      return $dom;
    },

    checkbox: function ($target, item, context, parent) {
      if ($.type(item.onBeforeRender) === 'function') {
        if (item.onBeforeRender.call(this, $target, item, context) === false) {
          return;
        }
      }

      var $dom = $('<input type="checkbox" />');
      $.yvan.fillCommonProperties($dom, item);
      if (item.hasOwnProperty('name')) {
        $dom.attr('name', item.name);
      }
      if (item.hasOwnProperty('checked')) {
        $dom.attr('checked', item.checked);
      }
      if (item.hasOwnProperty('disable')) {
        $dom.attr('disable', item.disable);
      }
      if (item.hasOwnProperty('primary')) {
        $dom.attr('primary', item.primary);
      }
      $target.append($dom);
      $dom.checkbox(item);
      if ($.type(item.onRender) === 'function') {
        item.onRender.call($dom[0], $target, item, context);
      }
      return $dom;
    },

    radiobutton: function ($target, item, context, parent) {
      if ($.type(item.onBeforeRender) === 'function') {
        if (item.onBeforeRender.call(this, $target, item, context) === false) {
          return;
        }
      }

      var $dom = $('<input type="radio" />');
      $.yvan.fillCommonProperties($dom, item);
      if (item.hasOwnProperty('name')) {
        $dom.attr('name', item.name);
      }
      if (item.hasOwnProperty('checked')) {
        $dom.attr('checked', item.checked);
      }
      if (item.hasOwnProperty('disable')) {
        $dom.attr('disable', item.disable);
      }
      $target.append($dom);
      $dom.radiobutton(item);

      if ($.type(item.onRender) === 'function') {
        item.onRender.call($dom[0], $target, item, context);
      }
      return $dom;
    },

    group: function ($target, item, context, parent) {
      if ($.type(item.onBeforeRender) === 'function') {
        if (item.onBeforeRender.call(this, $target, item, context) === false) {
          return;
        }
      }

      //表单分组
      var $dom = $('<div style="padding: 5px 10px"></div>');
      $.yvan.fillCommonProperties($dom, item);
      var $group = $('<fieldset class="yvan-form-groups"></fieldset>');
      $dom.append($group);
      if (item.title) {
        $group.append($('<legend>' + item.title + '</legend>'));
      }
      $target.append($dom);
      $group.renderEach($.yvan.getItems(item), context, item);

      if ($.type(item.onRender) === 'function') {
        item.onRender.call($dom[0], $target, item, context);
      }
      return $dom;
    },

    form: function ($target, item, context, parent) {
      if ($.type(item.onBeforeRender) === 'function') {
        if (item.onBeforeRender.call(this, $target, item, context) === false) {
          return;
        }
      }

      var $dom = $('<form></form>');
      if ($.trim(item.name)) {
        $dom.attr('name', item.name);
      }
      $.yvan.fillCommonProperties($dom, item);
      $target.append($dom);

      //枚举下级所有元素
      $dom.renderEach($.yvan.getItems(item), context, item);

      if ($.type(item.onRender) === 'function') {
        item.onRender.call($dom[0], $target, item, context);
      }
      return $dom;
    },

    formgroup: function ($target, item, context, parent) {
      if ($.type(item.onBeforeRender) === 'function') {
        if (item.onBeforeRender.call(this, $target, item, context) === false) {
          return;
        }
      }

      var $dom = $('<form style="padding: 5px 10px"></form>');
      $.yvan.fillCommonProperties($dom, item);
      if ($.trim(item.name)) {
        $dom.attr('name', item.name);
      }

      var $group = $('<fieldset class="yvan-form-groups"></fieldset>');
      $dom.append($group);
      if (item.title) {
        $group.append($('<legend>' + item.title + '</legend>'));
      }

      $target.append($dom);
      $group.renderEach($.yvan.getItems(item), context, item);

      if ($.type(item.onRender) === 'function') {
        item.onRender.call($dom[0], $target, item, context);
      }
      return $dom;
    },

    toolbar: function ($target, item, context, parent) {
      if ($.type(item.onBeforeRender) === 'function') {
        if (item.onBeforeRender.call(this, $target, item, context) === false) {
          return;
        }
      }

      var $dom = $('<div class="easyui-toolbar"></div>');
      $.yvan.fillCommonProperties($dom, item);
      $dom.toolbar(item, context);
      $target.append($dom);

      if ($.type(item.onRender) === 'function') {
        item.onRender.call($dom[0], $target, item, context);
      }
      return $dom;
    },

    grid: function ($target, item, context, parent) {
      if (!$.jgrid || !$.jgrid.yvanui) {
        return;
      }
      if ($.type(item.onBeforeRender) === 'function') {
        if (item.onBeforeRender.call(this, $target, item, context) === false) {
          return;
        }
      }

      var $dom = $.jgrid.createDom($target, item, context);
      if ($.type(item.onRender) === 'function') {
        item.onRender.call($dom[0], $target, item, context);
      }

      return $dom;
    },

    datalist: function ($target, item, context, parent) {
      if ($.type(item.onBeforeRender) === 'function') {
        if (item.onBeforeRender.call(this, $target, item, context) === false) {
          return;
        }
      }

      var $dom = $('<table class="easyui-datalist"></table>');
      $.yvan.fillCommonProperties($dom, item);
      $target.append($dom);
      $dom.datalist(item);

      if ($.type(item.onRender) === 'function') {
        item.onRender.call($dom[0], $target, item, context);
      }
      return $dom;
    },

    datagrid: function ($target, item, context, parent) {
      if ($.type(item.onBeforeRender) === 'function') {
        if (item.onBeforeRender.call(this, $target, item, context) === false) {
          return;
        }
      }

      var $dom = $('<table class="easyui-datagrid"></table>');
      $.yvan.fillCommonProperties($dom, item);
      $target.append($dom);
      processToolbar($target, item, context);
      $dom.datagrid(item);
      if (window.hasOwnProperty('shortcut')) {
        shortcut.processGrid($dom, item, context);
      }

      if ($.type(item.onRender) === 'function') {
        item.onRender.call($dom[0], $target, item, context);
      }
      return $dom;
    },

    tabs: function ($target, item, context, parent) {
      if ($.type(item.onBeforeRender) === 'function') {
        if (item.onBeforeRender.call(this, $target, item, context) === false) {
          return;
        }
      }

      var $dom = $('<div class="easyui-tabs"></div>');
      $.yvan.fillCommonProperties($dom, item);
      $target.append($dom);
      tabRender($dom, item, context, item);

      if ($.type(item.onRender) === 'function') {
        item.onRender.call($dom[0], $target, item, context);
      }
      return $dom;
    },

    tree: function ($target, item, context, parent) {
      if ($.type(item.onBeforeRender) === 'function') {
        if (item.onBeforeRender.call(this, $target, item, context) === false) {
          return;
        }
      }

      var $dom = $('<div class="easyui-tree"></div>');
      $.yvan.fillCommonProperties($dom, item);
      $target.append($dom);
      $dom.tree(item);

      if ($.type(item.onRender) === 'function') {
        item.onRender.call($dom[0], $target, item, context);
      }
      return $dom;
    },

    treegrid: function ($target, item, context, parent) {
      if ($.type(item.onBeforeRender) === 'function') {
        if (item.onBeforeRender.call(this, $target, item, context) === false) {
          return;
        }
      }

      var $dom = $('<div class="easyui-treegrid"></div>');
      $.yvan.fillCommonProperties($dom, item);
      $target.append($dom);
      $dom.treegrid(item);

      if ($.type(item.onRender) === 'function') {
        item.onRender.call($dom[0], $target, item, context);
      }
      return $dom;
    },

    propertygrid: function ($target, item, context, parent) {
      if ($.type(item.onBeforeRender) === 'function') {
        if (item.onBeforeRender.call(this, $target, item, context) === false) {
          return;
        }
      }

      var $dom = $('<table></table>');
      $.yvan.fillCommonProperties($dom, item);
      $target.append($dom);
      $dom.propertygrid(item);

      if ($.type(item.onRender) === 'function') {
        item.onRender.call($dom[0], $target, item, context);
      }
      return $dom;
    },

    button: function ($target, item, context, parent) {
      if ($.type(item.onBeforeRender) === 'function') {
        if (item.onBeforeRender.call(this, $target, item, context) === false) {
          return;
        }
      }

      var $dom = $('<a class="easyui-linkbutton"></a>');
      $.yvan.fillCommonProperties($dom, item);
      $target.append($dom);
      $dom.linkbutton(item);

      if ($.type(item.onRender) === 'function') {
        item.onRender.call($dom[0], $target, item, context);
      }
      return $dom;
    },
  });

})(jQuery);