XinYu_YTG_Client/static/js/common.js

/**
 * Created by onlyang on 2017/7/2.
 * es5
 */
var Steer = {};
(function ($, window, document) {
  Steer.utils = {
    // 参数Split
    paramsSplit: function (sparam, ssplit) {
      var sp = '', spd = '';
      if (sparam && sparam.length > 0) {
        if (!ssplit) { ssplit = ';;'; }
        var atp = sparam.split(ssplit);
        sp = atp[0];
        if (atp.length > 1) { spd = atp[1]; }
      }
      return [sp, spd];
    }
  };

  var STTable = {
    /*
    * 初始化表格
    * tid: 表格ID
    * data: 需要展示的数据
    * */
    init: function (tid, data) {
      mini.parse();
      let grid = mini.get(tid);
      let $table = $('#' + tid);
      if (!data) { data = []; }
      grid.setData(data);
      // 绑定所有数据
      $table.data('mini_all_data', data);
      // 过滤关闭按钮
      let clase = $('<span>', { class: 'el-icon-circle-close-outline' });
      $table.find('.mini-grid-filter').append(clase);
      $table.on('click', '.el-icon-circle-close-outline', function () {
        $(this).closest('.mini-textbox').find('.mini-textbox-input').val('');
        $.STTable.filterData(tid);
      });
      // 过滤事件
      $table.on('keyup', 'input.mini-textbox-input', function (event) {
        $.STTable.filterData(tid);
      });
      // 合计信息
      let smInfo = $('<div>', {
        class: 'mini-table-sum',
        id: tid + '_sum'
      });
      $table.after(smInfo);
      $.STTable.setSumInfo(tid, data.length, data.length);
    },
    setSumInfo: function (tid, current, all) {
      $('#' + tid + '_sum').text(current + ' / ' + all);
    },
    /*
    * 设置表格数据
    * tid: 表格ID
    * data: 需要展示的数据
    * bFilter：不重置过滤条件（默认重置）
    * */
    setData: function (tid, data, bFilter) {
      let grid = mini.get(tid);
      if (!data) { data = []; }
      grid.setData(data);
      grid.scrollIntoView(0);
      $.STTable.setSumInfo(tid, data.length, data.length);
      // 绑定所有数据
      $('#' + tid).data('mini_all_data', data);
      if (!bFilter) {
        $('#' + tid).find('.mini-grid-filter').find('input.mini-textbox-input').val('');
      }
    },
    filterData: function (tid) {
      let $table = $('#' + tid);
      let data = $table.data('mini_all_data');
      // if (event && event.keyCode === 13) {
      let inps = $table.find('input.mini-textbox-input');
      let fobjs = {};
      $.each(inps, function (i, n) {
        let $in = $(n);
        let val = $in.val();
        if (val && val.length > 0) {
          let _name = $in.attr('name');
          fobjs[_name] = val;
        }
      });
      let cData = [];
      cData = data.filter(function (v) {
        let flag = true;
        $.each(fobjs, function (ci, cn) {
          if ((v[ci] + '').indexOf(cn) < 0) {
            flag = false;
            return false;
          }
        });
        return flag;
      });
      let grid = mini.get(tid);
      grid.setData(cData);
      grid.scrollIntoView(0);
      $.STTable.setSumInfo(tid, cData.length, data.length);
    }
  };
  $.STTable = STTable;
  /*
   * SSlider 模拟Slider
   * @param {string} sActive 'show'显示，'hide'隐藏
   * @oInit
   *    title: 标题
   *    level: 2
   *    width: 200
   *    closeCallback: fn
   * @example $('#').slider('show');
   */
  var SSlider = function (sAction, oInit) {
    // 执行体
    var $thats = this;
    if (!$thats || $thats.length <= 0) {
      return;
    }
    var $that = $thats.first();
    if (sAction === 'show') {
      var iZIndex = 1900;
      if (oInit) {
        if (oInit.title) {
          $that.children('.sui-slider-main').children('.sui-slider-title').find('.sui-slider-title-text').text(oInit.title);
        }
        if (oInit.level > 1) {
          iZIndex += 10 * oInit.level;
          var ih = 800;
          if (oInit.width > 0) {
            ih = oInit.width;
          } else {
            ih = 800 - 100 * (oInit.level - 1);
            if (ih < 200) { ih = 200; }
          }
          $that.children('.sui-slider-main').css({'width': ih + 'px', 'z-index': iZIndex + 2});
          $that.children('.sui-slider-cover').css({'z-index': iZIndex + 1});
        }
      }
      $that.css('z-index', iZIndex);
      SSlider.prototype._showSlider($that, oInit);
    } else {
      SSlider.prototype._hideSlider($that, oInit);
    }
  };
  // 隐藏Slider
  SSlider.prototype._hideSlider = function ($slider, oInit) {
    $slider.children('.sui-slider-main').removeClass('sui-slider-in').removeClass('sui-slider-active').addClass('sui-slider-out');
    setTimeout(function () {
      $slider.hide();
      // $c.remove(); //移除遮盖层
      var sliderActives = $('.sui-slider-active');
      if (!sliderActives || sliderActives.length <= 0) {
        $('body').removeClass('sui-slider-body');
      }
      if (oInit && oInit.closeCallback) {
        oInit.closeCallback.call(null);
      }
    }, 300);
  };
  // 显示Slider
  SSlider.prototype._showSlider = function ($slider, oInit) {
    $('body').addClass('sui-slider-body');// body不再滚动
    // 显示遮盖层及绑定事件
    $slider.children('.sui-slider-cover').not('.sui-slider-evented').on('click', function () {
      SSlider.prototype._hideSlider($slider, oInit);
    }).addClass('sui-slider-evented');
    $slider.children('.sui-slider-main').removeClass('sui-slider-out').addClass('sui-slider-in').addClass('sui-slider-active');
    $slider.children('.sui-slider-main').children('.sui-slider-title').find('.sui-slider-title-x').not('.sui-slider-evented').on('click', function () {
      SSlider.prototype._hideSlider($slider, oInit);
    }).addClass('sui-slider-evented');
    $slider.show();
  };
  // jquery aliases 别名
  $.fn.slider = SSlider;
}(jQuery, window, document));

/*
* 验证码
* */
(function () {
  var randstr = function (length) {
    var key = {
      str: [
        // 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',
        // 'o', 'p', 'q', 'r', 's', 't', 'x', 'u', 'v', 'y', 'z', 'w', 'n',
        '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'
      ],
      randint: function (n, m) {
        var c = m - n + 1;
        var num = Math.random() * c + n;
        return Math.floor(num);
      },
      randStr: function () {
        var _this = this;
        var leng = _this.str.length - 1;
        var randkey = _this.randint(0, leng);
        return _this.str[randkey];
      },
      create: function (len) {
        var _this = this;
        var l = len || 10;
        var str = '';
        for (var i = 0; i < l; i++) {
          str += _this.randStr();
        }
        return str;
      }
    };
    length = length > 0 ? length : 10;
    return key.create(length);
  };
  var randint = function (n, m) {
    var c = m - n + 1;
    var num = Math.random() * c + n;
    return Math.floor(num);
  };
  var VCode = function (dom, options) {
    this.codeDoms = [];
    this.lineDoms = [];
    this.initOptions(options);
    this.dom = dom;
    this.init();
    this.addEvent();
    this.update();
    this.mask();
  };
  VCode.prototype.init = function () {
    this.dom.style.position = 'relative';
    this.dom.style.overflow = 'hidden';
    this.dom.style.cursor = 'pointer';
    this.dom.title = '点击更换验证码';
    this.dom.style.background = this.options.bgColor;
    /*
      alert(this.options.width);
      alert(this.dom.clientWidth>0?this.dom.clientWidth:40); clientHeight
    */
    this.w = this.options.width > 0 ? this.options.width : (this.dom.clientWidth > 0 ? this.dom.clientWidth > 0 : 100);
    this.h = this.options.height > 0 ? this.options.height : (this.dom.clientHeight > 0 ? this.dom.clientHeight > 0 : 40);
    this.uW = this.w / this.options.len;
  };
  VCode.prototype.mask = function () {
    var dom = document.createElement('div');
    dom.style.cssText = [
      'width: 100%',
      'height: 100%',
      'left: 0',
      'top: 0',
      'position: absolute',
      'cursor: pointer',
      'z-index: 9999999'
    ].join(';');
    dom.title = '点击更换验证码';
    this.dom.appendChild(dom);
  };
  VCode.prototype.addEvent = function () {
    var _this = this;
    _this.dom.addEventListener('click', function () {
      // _this.update.call(_this);
      _this.update();
    });
  };
  VCode.prototype.initOptions = function (options) {
    var FunctionOptons = function () {
      this.len = 4;
      this.fontSizeMin = 24;
      this.fontSizeMax = 28;
      this.colors = [
        'green',
        'red',
        'blue',
        '#53da33',
        '#AA0000',
        '#FFBB00'
      ];
      this.bgColor = '#f6f6f6';
      this.fonts = [
        'Times New Roman',
        'Georgia',
        'Serif',
        'sans-serif',
        'arial',
        'tahoma',
        'Hiragino Sans GB'
      ];
      this.lines = 8;
      this.lineColors = [
        '#888888',
        '#FF7744',
        '#888800',
        '#008888'
      ];
      this.lineHeightMin = 1;
      this.lineHeightMax = 2;
      this.lineWidthMin = 1;
      this.lineWidthMax = 30;
    };
    this.options = new FunctionOptons();
    if (typeof options === 'object') {
      for (var i in options) {
        this.options[i] = options[i];
      }
    }
  };
  VCode.prototype.update = function () {
    for (var i = 0; i < this.codeDoms.length; i++) {
      this.dom.removeChild(this.codeDoms[i]);
    }
    for (var j = 0; j < this.lineDoms.length; j++) {
      this.dom.removeChild(this.lineDoms[j]);
    }
    this.createCode();
    this.draw();
  };
  VCode.prototype.createCode = function () {
    this.code = randstr(this.options.len);
  };
  VCode.prototype.verify = function (code) {
    return this.code === (code ? code.toLowerCase() : code);
  };
  VCode.prototype.draw = function () {
    this.codeDoms = [];
    for (var i = 0; i < this.code.length; i++) {
      this.codeDoms.push(this.drawCode(this.code[i], i));
    }
    this.drawLines();
  };
  VCode.prototype.drawCode = function (code, index) {
    var dom = document.createElement('span');
    dom.style.cssText = [
      'font-size:' + randint(this.options.fontSizeMin, this.options.fontSizeMax) + 'px',
      'color:' + this.options.colors[randint(0, this.options.colors.length - 1)],
      'position: absolute',
      'left:' + randint(this.uW * index, this.uW * index + this.uW - 15) + 'px',
      'top:' + randint(0, 5) + 'px',
      'transform:rotate(' + randint(-20, 20) + 'deg)',
      '-ms-transform:rotate(' + randint(-20, 20) + 'deg)',
      '-moz-transform:rotate(' + randint(-20, 20) + 'deg)',
      '-webkit-transform:rotate(' + randint(-20, 20) + 'deg)',
      '-o-transform:rotate(' + randint(-20, 20) + 'deg)',
      'font-family:' + this.options.fonts[randint(0, this.options.fonts.length - 1)],
      'font-weight:' + randint(500, 900)
    ].join(';');
    dom.innerHTML = code;
    this.dom.appendChild(dom);
    return dom;
  };
  VCode.prototype.drawLines = function () {
    this.lineDoms = [];
    for (var i = 0; i < this.options.lines; i++) {
      var dom = document.createElement('div');
      dom.style.cssText = [
        'position: absolute',
        'opacity: ' + randint(3, 5) / 10,
        'width:' + randint(this.options.lineWidthMin, this.options.lineWidthMax) + 'px',
        'height:' + randint(this.options.lineHeightMin, this.options.lineHeightMax) + 'px',
        'background: ' + this.options.lineColors[randint(0, this.options.lineColors.length - 1)],
        'left:' + randint(0, this.w - 20) + 'px',
        'top:' + randint(0, this.h) + 'px',
        'transform:rotate(' + randint(-30, 30) + 'deg)',
        '-ms-transform:rotate(' + randint(-30, 30) + 'deg)',
        '-moz-transform:rotate(' + randint(-30, 30) + 'deg)',
        '-webkit-transform:rotate(' + randint(-30, 30) + 'deg)',
        '-o-transform:rotate(' + randint(-30, 30) + 'deg)',
        'font-family:' + this.options.fonts[randint(0, this.options.fonts.length - 1)],
        'font-weight:' + randint(400, 900)
      ].join(';');
      this.dom.appendChild(dom);
      this.lineDoms.push(dom);
    }
  };
  this.VCode = VCode;
}).call(this);

/**
 * 组织结构图
 * @Author: ouyang
 */
(function ($) {
  $.fn.jOrgChart = function (options) {
    var opts = $.extend({}, $.fn.jOrgChart.defaults, options);
    var $this = $(this);
    if (!$this || $this.length <= 0) { return false; }
    $this.empty();

    var $showlist = $("<ul id='org' style='display:none'></ul>");
    _showall(options.data, $showlist, opts);
    $this.append($showlist);

    // build the tree
    var $org = $('#org');
    var $container = $('<div class="' + opts.chartClass + '"/>');
    if ($org.is('ul')) {
      buildNode($org.find('li:first'), $container, 0, opts);
    } else if ($org.is('li')) {
      buildNode($org, $container, 0, opts);
    }
    $this.append($container);
  };

  // Option defaults
  $.fn.jOrgChart.defaults = {
    depth: -1,
    chartClass: 'jOrgChart', // CLASS
    expandAble: true, // 是否展开/收缩
    module: { // 数据模型
      id: 'id',
      pid: 'pid',
      name: 'name',
      children: 'children'
    }
  };

  function _showall (oList, $parent, opts) {
    $.each(oList, function (index, val) {
      var aChildren = val[opts.module.children];
      var $a = $('<a title="' + val[opts.module.name] + '" href="javascript:void(0)">' + val[opts.module.name] + '</a>').data('node_data', val);
      if (aChildren && aChildren.length > 0) {
        var $li = $('<li></li>');
        $li.append($a).append('<ul></ul>').appendTo($parent);
        // 递归显示
        _showall(aChildren, $li.children('ul'), opts);
      } else {
        $('<li></li>').append($a).appendTo($parent);
      }
    });
  }

  var nodeCount = 0;
  // Method that recursively builds the tree
  function buildNode ($node, $appendTo, level, opts) {
    var $table = $('<table cellpadding="0" cellspacing="0" border="0"/>');
    var $tbody = $('<tbody/>');

    // Construct the node container(s)
    var $nodeRow = $('<tr/>').addClass('node-cells');
    var $nodeCell = $('<td/>').addClass('node-cell').attr('colspan', 2);
    var $childNodes = $node.children('ul:first').children('li');
    var $nodeDiv;

    if ($childNodes.length > 1) {
      $nodeCell.attr('colspan', $childNodes.length * 2);
    }
    // Draw the node
    // Get the contents - any markup except li and ul allowed
    var $nodeContent = $node.clone()
      .children('ul,li')
      .remove()
      .end()
      .html();
    // Increaments the node count which is used to link the source list and the org chart
    nodeCount++;
    $node.data('tree-node', nodeCount);
    $nodeDiv = $('<div>').addClass('node')
      .data('tree-node', nodeCount)
      .append($nodeContent);
    if (opts.clickCallback && typeof opts.clickCallback === 'function') {
      $nodeDiv.on('click', function () {
        $('.jOrgChart').find('div').css('border-color', 'black')
        $('.jOrgChart').find('div a').css('color', 'black')
        $nodeDiv.css('border-color', 'red')
        $nodeDiv.find('a').css('color', 'red')
        opts.clickCallback($node.children('a').data('node_data'));
      });
    }

    // Expand and contract nodes
    if (opts.expandAble && $childNodes.length > 0) {
      $nodeDiv.on('click', function () {
        var $this = $(this);
        var $tr = $this.closest('tr');

        if ($tr.hasClass('contracted')) {
          $this.css('cursor', 'n-resize');
          $tr.removeClass('contracted').addClass('expanded');
          $tr.nextAll('tr').css('visibility', '');

          // Update the <li> appropriately so that if the tree redraws collapsed/non-collapsed nodes
          // maintain their appearance
          $node.removeClass('collapsed');
        } else {
          $this.css('cursor', 's-resize');
          $tr.removeClass('expanded').addClass('contracted');
          $tr.nextAll('tr').css('visibility', 'hidden');
          $node.addClass('collapsed');
        }
      });
    }

    $nodeCell.append($nodeDiv);
    $nodeRow.append($nodeCell);
    $tbody.append($nodeRow);

    if ($childNodes.length > 0) {
      // if it can be expanded then change the cursor
      $nodeDiv.css('cursor', 'n-resize');

      // recurse until leaves found (-1) or to the level specified
      if (opts.depth === -1 || (level + 1 < opts.depth)) {
        var $downLineRow = $('<tr/>');
        var $downLineCell = $('<td/>').attr('colspan', $childNodes.length * 2);
        $downLineRow.append($downLineCell);

        // draw the connecting line from the parent node to the horizontal line
        var $downLine = $('<div></div>').addClass('line down');
        $downLineCell.append($downLine);
        $tbody.append($downLineRow);

        // Draw the horizontal lines
        var $linesRow = $('<tr/>');
        $childNodes.each(function () {
          var $left = $('<td>&nbsp;</td>').addClass('line left top');
          var $right = $('<td>&nbsp;</td>').addClass('line right top');
          $linesRow.append($left).append($right);
        });

        // horizontal line shouldn't extend beyond the first and last child branches
        $linesRow.find('td:first')
          .removeClass('top')
          .end()
          .find('td:last')
          .removeClass('top');

        $tbody.append($linesRow);
        var $childNodesRow = $('<tr/>');
        $childNodes.each(function () {
          var $td = $('<td class="node-container"/>');
          $td.attr('colspan', 2);
          // recurse through children lists and items
          buildNode($(this), $td, level + 1, opts);
          $childNodesRow.append($td);
        });
      }
      $tbody.append($childNodesRow);
    }

    // any classes on the LI element get copied to the relevant node in the tree
    // apart from the special 'collapsed' class, which collapses the sub-tree at this point
    if ($node.attr('class') !== undefined) {
      var classList = $node.attr('class').split(/\s+/);
      $.each(classList, function (index, item) {
        if (item === 'collapsed') {
          // console.log($node);
          $nodeRow.nextAll('tr').css('visibility', 'hidden');
          $nodeRow.removeClass('expanded');
          $nodeRow.addClass('contracted');
          $nodeDiv.css('cursor', 's-resize');
        } else {
          $nodeDiv.addClass(item);
        }
      });
    }

    $table.append($tbody);
    $appendTo.append($table);

    /* Prevent trees collapsing if a link inside a node is clicked */
    // $nodeDiv.children('a').click(function(e){
    //     console.log(e);
    //     e.stopPropagation();
    // });
  };
})(jQuery);
/**
 * 物料进程图-竖版 : 支持点击展示弹出框
*/

(function ($) {
  $.fn.jProcessChartCol = function (options) {
    var opts = $.extend({}, $.fn.jProcessChartCol.defaults, options);
    var $this = $(this);
    if (!$this || $this.length <= 0) { return false; }
    $this.empty();

    var $showlist = $("<ul id='org' style='display:none'></ul>");
    _showall(options.data, $showlist, opts);
    $this.append($showlist);

    // build the tree
    var $org = $('#org');
    var $container = $('<div class="' + opts.chartClass + '"/>');
    if ($org.is('ul')) {
      buildNode($org.find('li:first'), $container, 0, opts);
    } else if ($org.is('li')) {
      buildNode($org, $container, 0, opts);
    }
    $this.append($container);
  };

  // Option defaults
  $.fn.jProcessChartCol.defaults = {
    depth: -1,
    chartClass: 'jOrgChart jProcessChartCol', // CLASS
    expandAble: true, // 是否展开/收缩
    module: { // 数据模型
      id: 'id',
      pid: 'pid',
      current: 'current',
      name: 'name',
      children: 'children'
    }
  };

  function _showall (oList, $parent, opts) {
    $.each(oList, function (index, val) {
      var aChildren = val[opts.module.children];
      var aSelf = val[opts.module.name];
      var aHighLight = val[opts.module.current];
      if (aChildren && aChildren.length > 0) {
        var $li = $('<li></li>');
        var $lidiv = $('<div></div>');
        for (let i = 0; i < aSelf.length; i++) {
          aSelf[i].remark = aSelf[i].remark ? aSelf[i].remark : '';
          aSelf[i].create_time = aSelf[i].create_time ? aSelf[i].create_time : '';
          aSelf[i].name = aSelf[i].name ? aSelf[i].name : '';
          aSelf[i].object_no = aSelf[i].object_no ? aSelf[i].object_no : '';
          aSelf[i].create_man_name = aSelf[i].create_man_name ? aSelf[i].create_man_name : '';
          var $a = $('<a title="' + aSelf[i].prc_code_desc + ':' + aSelf[i].create_man_name + '" href="javascript:void(0)"><div class="jProcessChartColDetail" style="display: none">' +
            '操作人：' + aSelf[i].create_man_name +
            '</br>' + '备注：' + aSelf[i].remark +
            '</div></br>' + aSelf[i].prc_code_desc + ':' + aSelf[i].create_man_name + '</br>' + aSelf[i].create_time + '</a>').data('node_data', aSelf[i]);
          if (i === 0) { // 每个节点的第一项才显示编号
            $a = $('<a title="' + aSelf[i].prc_code_desc + ':' + aSelf[i].create_man_name + '" href="javascript:void(0)"><div class="jProcessChartColDetail" style="display: none"><span>' +
              '操作人：' + aSelf[i].create_man_name +
              '</span></br><span>' + '备注：' + aSelf[i].remark +
              '</span></div>' + aSelf[i].object_no + '</br>' + aSelf[i].prc_code_desc + ':' + aSelf[i].create_man_name + '</br>' + aSelf[i].create_time + '</a>').data('node_data', aSelf[i]);
          }
          var $lidivchild = $('<div class="jProcessChartColDiv"></div>');
          if (aHighLight) { // 高亮
            $lidivchild.addClass('jProcessChartColDivCurrent')
          }
          $lidivchild.append($a).appendTo($lidiv);
          $lidivchild.appendTo($lidiv);
        }
        $lidiv.appendTo($li);
        $li.append('<ul></ul>').appendTo($parent);
        // 递归显示
        _showall(aChildren, $li.children(':eq(1)'), opts);
      } else { // 叶子结点
        $li = $('<li></li>');
        $lidiv = $('<div></div>');
        for (let i = 0; i < aSelf.length; i++) {
          aSelf[i].remark = aSelf[i].remark ? aSelf[i].remark : '';
          aSelf[i].create_time = aSelf[i].create_time ? aSelf[i].create_time : '';
          aSelf[i].name = aSelf[i].name ? aSelf[i].name : '';
          aSelf[i].object_no = aSelf[i].object_no ? aSelf[i].object_no : '';
          aSelf[i].create_man_name = aSelf[i].create_man_name ? aSelf[i].create_man_name : '';
          $a = $('<a title="' + aSelf[i].prc_code_desc + ':' + aSelf[i].create_man_name + '" href="javascript:void(0)"><div class="jProcessChartColDetail" style="display: none">' +
            '操作人：' + aSelf[i].create_man_name +
            '</br>' + '备注：' + aSelf[i].remark +
            '</div></br>' + aSelf[i].prc_code_desc + ':' + aSelf[i].create_man_name + '</br>' + aSelf[i].create_time + '</a>').data('node_data', aSelf[i]);
          if (i === 0) {
            $a = $('<a title="' + aSelf[i].prc_code_desc + ':' + aSelf[i].create_man_name + '" href="javascript:void(0)"><div class="jProcessChartColDetail" style="display: none">' +
              '操作人：' + aSelf[i].create_man_name +
              '</br>' + '备注：' + aSelf[i].remark +
              '</div>' + aSelf[i].object_no + '</br>' + aSelf[i].prc_code_desc + ':' + aSelf[i].create_man_name + '</br>' + aSelf[i].create_time + '</a>').data('node_data', aSelf[i]);
          }
          $lidivchild = $('<div class="jProcessChartColDiv"></div>');
          if (aHighLight) {
            $lidivchild.addClass('jProcessChartColDivCurrent')
          }
          $lidivchild.append($a).appendTo($lidiv);
          // $('<li></li>').append($a).appendTo($parent);
        }
        $lidiv.appendTo($li);
        $li.append('<ul></ul>').appendTo($parent);
      }
    });
  }

  var nodeCount = 0;
  // Method that recursively builds the tree
  function buildNode ($node, $appendTo, level, opts) {
    var $table = $('<table cellpadding="0" cellspacing="0" border="0"/>');
    var $tbody = $('<tbody/>');

    // Construct the node container(s)
    var $nodeRow = $('<tr/>').addClass('node-cells');
    var $nodeCell = $('<td/>').addClass('node-cell').attr('colspan', 2);
    var $childNodes = $node.children('ul:first').children('li');
    var $nodeDiv;

    if ($childNodes.length > 1) {
      $nodeCell.attr('colspan', $childNodes.length * 2);
    }
    // Draw the node
    // Get the contents - any markup except li and ul allowed
    var $nodeContent = $node.clone()
      .children('ul,li')
      .remove()
      .end()
      .html();
    // console.log('$nodeContent', $nodeContent);
    // Increaments the node count which is used to link the source list and the org chart
    nodeCount++;
    $node.data('tree-node', nodeCount);
    $nodeDiv = $('<div>').addClass('node')
      .data('tree-node', nodeCount)
      .append($nodeContent);
    $nodeDiv.find('.jProcessChartColDiv').on('click', function (e) { // 点击展示弹出框
      if ($(e.target).children(':first').css('display') === 'block') {
        $(e.target).children(':first').css('display', 'none');
        $('.jProcessChartCol').find('.jProcessChartColDetail').hide(); // 关闭其他弹出框
      } else {
        $('.jProcessChartCol').find('.jProcessChartColDetail').hide(); // 关闭其他弹出框
        $(e.target).children(':first').css('display', 'block');
      }
    });
    if (opts.clickCallback && typeof opts.clickCallback === 'function') {
      $nodeDiv.on('click', function () {
        // $('.jProcessChart').find('div').css('border-color', 'black')
        // $('.jProcessChart').find('div a').css('color', 'black')
        // $nodeDiv.css('border-color', 'red')
        // $nodeDiv.find('a').css('color', 'red')
        // opts.clickCallback($node.children('a').data('node_data'));
      });
    }

    // Expand and contract nodes
    if (opts.expandAble && $childNodes.length > 0) {
      $nodeDiv.on('click', function () {
        var $this = $(this);
        var $tr = $this.closest('tr');

        if ($tr.hasClass('contracted')) {
          $this.css('cursor', 'n-resize');
          $tr.removeClass('contracted').addClass('expanded');
          $tr.nextAll('tr').css('visibility', '');

          // Update the <li> appropriately so that if the tree redraws collapsed/non-collapsed nodes
          // maintain their appearance
          $node.removeClass('collapsed');
        } else {
          $this.css('cursor', 's-resize');
          $tr.removeClass('expanded').addClass('contracted');
          $tr.nextAll('tr').css('visibility', 'hidden');
          $node.addClass('collapsed');
        }
      });
    }

    $nodeCell.append($nodeDiv);
    $nodeRow.append($nodeCell);
    $tbody.append($nodeRow);

    if ($childNodes.length > 0) {
      // if it can be expanded then change the cursor
      $nodeDiv.css('cursor', 'n-resize');

      // recurse until leaves found (-1) or to the level specified
      if (opts.depth === -1 || (level + 1 < opts.depth)) {
        var $downLineRow = $('<tr/>');
        var $downLineCell = $('<td/>').attr('colspan', $childNodes.length * 2);
        $downLineRow.append($downLineCell);

        // draw the connecting line from the parent node to the horizontal line
        var $downLine = $('<div></div>').addClass('line down');
        $downLineCell.append($downLine);
        $tbody.append($downLineRow);

        // Draw the horizontal lines
        var $linesRow = $('<tr/>');
        $childNodes.each(function () {
          var $left = $('<td>&nbsp;</td>').addClass('line left top');
          var $right = $('<td>&nbsp;</td>').addClass('line right top');
          $linesRow.append($left).append($right);
        });

        // horizontal line shouldn't extend beyond the first and last child branches
        $linesRow.find('td:first')
          .removeClass('top')
          .end()
          .find('td:last')
          .removeClass('top');

        $tbody.append($linesRow);
        var $childNodesRow = $('<tr/>');
        $childNodes.each(function () {
          var $td = $('<td class="node-container"/>');
          $td.attr('colspan', 2);
          // recurse through children lists and items
          buildNode($(this), $td, level + 1, opts);
          $childNodesRow.append($td);
        });
      }
      $tbody.append($childNodesRow);
    }

    // any classes on the LI element get copied to the relevant node in the tree
    // apart from the special 'collapsed' class, which collapses the sub-tree at this point
    if ($node.attr('class') !== undefined) {
      var classList = $node.attr('class').split(/\s+/);
      $.each(classList, function (index, item) {
        if (item === 'collapsed') {
          // console.log($node);
          $nodeRow.nextAll('tr').css('visibility', 'hidden');
          $nodeRow.removeClass('expanded');
          $nodeRow.addClass('contracted');
          $nodeDiv.css('cursor', 's-resize');
        } else {
          $nodeDiv.addClass(item);
        }
      });
    }

    $table.append($tbody);
    $appendTo.append($table);

    /* Prevent trees collapsing if a link inside a node is clicked */
    // $nodeDiv.children('a').click(function(e){
    //     console.log(e);
    //     e.stopPropagation();
    // });
  };
})(jQuery);
/**
 * 物料进程图-横版 : 支持点击展示弹出框
 */
// (function ($) {
//   $.fn.jProcessChartRow = function (options) {
//     var opts = $.extend({}, $.fn.jProcessChartRow.defaults, options);
//     var $this = $(this);
//     if (!$this || $this.length <= 0) { return false; }
//     $this.empty();
//
//     var $showlist = $("<ul id='org' style='display:none'></ul>");
//     _showall(options.data, $showlist, opts);
//     $this.append($showlist);
//
//     // build the tree
//     var $org = $('#org');
//     var $container = $('<div class="' + opts.chartClass + '"/>');
//     if ($org.is('ul')) {
//       buildNode($org.find('li:first'), $container, 0, opts);
//     } else if ($org.is('li')) {
//       buildNode($org, $container, 0, opts);
//     }
//     $this.append($container);
//   };
//
//   // Option defaults
//   $.fn.jProcessChartRow.defaults = {
//     depth: -1,
//     chartClass: 'jOrgChart jProcessChartRow', // CLASS
//     expandAble: true, // 是否展开/收缩
//     module: { // 数据模型
//       id: 'id',
//       pid: 'pid',
//       name: 'name',
//       children: 'children'
//     }
//   };
//
//   function _showall (oList, $parent, opts) {
//     $.each(oList, function (index, val) {
//       var aChildren = val[opts.module.children];
//       var aSelf = val[opts.module.name];
//       if (aChildren && aChildren.length > 0) {
//         var $li = $('<li></li>');
//         var $lidiv = $('<div></div>');
//         for (let i = 0; i < aSelf.length; i++) {
//           var $a = $('<a title="' + aSelf[i].name + '" href="javascript:void(0)"><div class="jProcessChartRowDetail" style="display: none">xx</div></br>' + aSelf[i].name + '</br>' + aSelf[i].date + '</a>').data('node_data', aSelf[i]);
//           if (i === 0) {
//             $a = $('<a title="' + aSelf[i].name + '" href="javascript:void(0)"><div class="jProcessChartRowDetail" style="display: none">xx</div>' + aSelf[i].id + '</br>' + aSelf[i].name + '</br>' + aSelf[i].date + '</a>').data('node_data', aSelf[i]);
//           }
//           var $lidivchild = $('<div class="jProcessChartRowDiv"></div>');
//           if (aSelf[i].current) {
//             $lidivchild.addClass('jProcessChartRowDivCurrent')
//           }
//           $lidivchild.append($a).appendTo($lidiv);
//           $lidivchild.appendTo($lidiv);
//         }
//         $lidiv.appendTo($li);
//         $li.append('<ul></ul>').appendTo($parent);
//         // 递归显示
//         _showall(aChildren, $li.children(':eq(1)'), opts);
//       } else {
//         $li = $('<li></li>');
//         $lidiv = $('<div></div>');
//         for (let i = 0; i < aSelf.length; i++) {
//           $a = $('<a title="' + aSelf[i].name + '" href="javascript:void(0)"><div class="jProcessChartRowDetail" style="display: none">xx</div></br>' + aSelf[i].name + '</br>' + aSelf[i].date + '</a>').data('node_data', aSelf[i]);
//           if (i === 0) {
//             $a = $('<a title="' + aSelf[i].name + '" href="javascript:void(0)"><div class="jProcessChartRowDetail" style="display: none">xx</div>' + aSelf[i].id + '</br>' + aSelf[i].name + '</br>' + aSelf[i].date + '</a>').data('node_data', aSelf[i]);
//           }
//           $lidivchild = $('<div class="jProcessChartRowDiv"></div>');
//           if (aSelf[i].current) {
//             $lidivchild.addClass('jProcessChartRowDivCurrent')
//           }
//           $lidivchild.append($a).appendTo($lidiv);
//           // $('<li></li>').append($a).appendTo($parent);
//         }
//         $lidiv.appendTo($li);
//         $li.append('<ul></ul>').appendTo($parent);
//       }
//     });
//   }
//
//   var nodeCount = 0;
//   // Method that recursively builds the tree
//   function buildNode ($node, $appendTo, level, opts) {
//     var $table = $('<table cellpadding="0" cellspacing="0" border="0"/>');
//     var $tbody = $('<tbody/>');
//
//     // Construct the node container(s)
//     var $nodeRow = $('<tr/>').addClass('node-cells');
//     var $nodeCell = $('<td/>').addClass('node-cell').attr('colspan', 2);
//     var $childNodes = $node.children('ul:first').children('li');
//     var $nodeDiv;
//
//     if ($childNodes.length > 1) {
//       $nodeCell.attr('colspan', $childNodes.length * 2);
//     }
//     // Draw the node
//     // Get the contents - any markup except li and ul allowed
//     var $nodeContent = $node.clone()
//       .children('ul,li')
//       .remove()
//       .end()
//       .html();
//     // console.log('$nodeContent', $nodeContent);
//     // Increaments the node count which is used to link the source list and the org chart
//     nodeCount++;
//     $node.data('tree-node', nodeCount);
//     $nodeDiv = $('<div>').addClass('node')
//       .data('tree-node', nodeCount)
//       .append($nodeContent);
//     $nodeDiv.find('.jProcessChartRowDiv').on('click', function (e) {
//       if ($(e.target).children(':first').css('display') === 'block') {
//         $(e.target).children(':first').css('display', 'none');
//       } else {
//         $(e.target).children(':first').css('display', 'block');
//       }
//     })
//     if (opts.clickCallback && typeof opts.clickCallback === 'function') {
//       $nodeDiv.on('click', function () {
//         // $('.jProcessChart').find('div').css('border-color', 'black')
//         // $('.jProcessChart').find('div a').css('color', 'black')
//         // $nodeDiv.css('border-color', 'red')
//         // $nodeDiv.find('a').css('color', 'red')
//         // opts.clickCallback($node.children('a').data('node_data'));
//       });
//     }
//
//     // Expand and contract nodes
//     if (opts.expandAble && $childNodes.length > 0) {
//       $nodeDiv.on('click', function () {
//         var $this = $(this);
//         var $tr = $this.closest('tr');
//
//         if ($tr.hasClass('contracted')) {
//           $this.css('cursor', 'n-resize');
//           $tr.removeClass('contracted').addClass('expanded');
//           $tr.nextAll('tr').css('visibility', '');
//
//           // Update the <li> appropriately so that if the tree redraws collapsed/non-collapsed nodes
//           // maintain their appearance
//           $node.removeClass('collapsed');
//         } else {
//           $this.css('cursor', 's-resize');
//           $tr.removeClass('expanded').addClass('contracted');
//           $tr.nextAll('tr').css('visibility', 'hidden');
//           $node.addClass('collapsed');
//         }
//       });
//     }
//
//     $nodeCell.append($nodeDiv);
//     $nodeRow.append($nodeCell);
//     $tbody.append($nodeRow);
//
//     if ($childNodes.length > 0) {
//       // if it can be expanded then change the cursor
//       $nodeDiv.css('cursor', 'n-resize');
//
//       // recurse until leaves found (-1) or to the level specified
//       if (opts.depth === -1 || (level + 1 < opts.depth)) {
//         var $downLineRow = $('<tr/>');
//         var $downLineCell = $('<td/>').attr('colspan', $childNodes.length * 2);
//         $downLineRow.append($downLineCell);
//
//         // draw the connecting line from the parent node to the horizontal line
//         var $downLine = $('<div></div>').addClass('line down');
//         $downLineCell.append($downLine);
//         $tbody.append($downLineRow);
//
//         // Draw the horizontal lines
//         var $linesRow = $('<tr/>');
//         $childNodes.each(function () {
//           var $left = $('<td>&nbsp;</td>').addClass('line left top');
//           var $right = $('<td>&nbsp;</td>').addClass('line right top');
//           $linesRow.append($left).append($right);
//         });
//
//         // horizontal line shouldn't extend beyond the first and last child branches
//         $linesRow.find('td:first')
//           .removeClass('top')
//           .end()
//           .find('td:last')
//           .removeClass('top');
//
//         $tbody.append($linesRow);
//         var $childNodesRow = $('<tr/>');
//         $childNodes.each(function () {
//           var $td = $('<td class="node-container"/>');
//           $td.attr('colspan', 2);
//           // recurse through children lists and items
//           buildNode($(this), $td, level + 1, opts);
//           $childNodesRow.append($td);
//         });
//       }
//       $tbody.append($childNodesRow);
//     }
//
//     // any classes on the LI element get copied to the relevant node in the tree
//     // apart from the special 'collapsed' class, which collapses the sub-tree at this point
//     if ($node.attr('class') !== undefined) {
//       var classList = $node.attr('class').split(/\s+/);
//       $.each(classList, function (index, item) {
//         if (item === 'collapsed') {
//           // console.log($node);
//           $nodeRow.nextAll('tr').css('visibility', 'hidden');
//           $nodeRow.removeClass('expanded');
//           $nodeRow.addClass('contracted');
//           $nodeDiv.css('cursor', 's-resize');
//         } else {
//           $nodeDiv.addClass(item);
//         }
//       });
//     }
//
//     $table.append($tbody);
//     $appendTo.append($table);
//
//     /* Prevent trees collapsing if a link inside a node is clicked */
//     // $nodeDiv.children('a').click(function(e){
//     //     console.log(e);
//     //     e.stopPropagation();
//     // });
//   };
// })(jQuery);
/**
 *  未名所以然
 */
(function ($, window, document) {
  $.fn.easySlider = function (options) {
    alert('1234');
  }
}(jQuery, window, document));