hust-epi/admin-ui/yvanui/yvanui.widget.js

/**
 * widget searchbox 查找框
 * @author luoyifan
 * 2018-12-01 14:00:00
 */
"use strict";
(function ($) {

  //默认 searchbox
  $.extend($.fn.searchbox.defaults, {
    prompt: '回车搜索',
    icons: [{
      iconCls: 'icon-clear',
      handler: function (e) {
        var $me = $(e.data.target);
        $me.textbox('clear').textbox('textbox').focus();
        if ($me.textbox('options').widget) {
          widget.clear(e);
        }
      }
    }],
    searcher: function () {
      var opts = $(this).searchbox('options');
      var option = opts.dialog || opts.widget;
      if (option) {
        widget.show(option, this);
      }
    }
  });

})(jQuery);

var widget = {
  show: function (option, sender) {
    var $sender = $(sender);
    var $power = $(sender).up('power');
    $power.progress();
    //恢复 $sender, 设置为焦点离开之前输入的值
    // var query = $sender.data().widgetTmpValue != null ? $sender.data().widgetTmpValue : $sender.searchbox('options').value;
    var query = $sender.searchbox('options').value != null ? $sender.searchbox('options').value : $sender.data().widgetTmpValue;
    $sender.textbox('setValue', query);

    seajs.use([option.url], function (widgetWindowOption) {

      //为二级弹出初始化查询数据
      var onLoadData1 = option['onWidgetLoadData'] || option.bind;
      var onLoadData2 = option['onWidgetLoadData'] || option.other;
      var d = {};
      var onLoadData = Object.assign(d, onLoadData1, onLoadData2);
      var data;
      if ($.type(onLoadData) === 'function') {
        data = onLoadData.call($sender, option);
      } else {
        var vs = onLoadData;

        var $grid = $sender.up('grid');
        var row;
        if ($grid.length > 0) {
          //表格带回值
          row = $grid.getEditRow();
        } else {
          //窗体带回值
          row = $sender.findForm().formGet();
          $sender.data().widgetValue = $sender.searchbox('getValue');
        }
        if ($.type(vs) === "string") {
          vs = [vs];
        }

        data = {};
        if ($.type(vs) === 'array') {
          //数组，直接读取
          $.each(vs, function (index, name) {
            data[name] = row[name];
          });

        } else {
          //对象调用, 建立映射关系
          for (var prop in vs) {
            if (!vs.hasOwnProperty(prop)) continue;
            if (!row.hasOwnProperty(prop)) {
              console.log('searchbox没有属性' + prop, row);
              continue;
            }
            data[vs[prop]] = row[prop];
          }
        }
      }
      if (widgetWindowOption.hasOwnProperty('onWidgetLoadData')) {
        widgetWindowOption.onWidgetLoadData(sender, data);
      }

      //获取到 xtype:widget 的窗口
      if ($.type(widgetWindowOption) === 'function') {
        widgetWindowOption = widgetWindowOption($.extend(data, {
          sender: $sender,
          query: query
        }));
      }

      $power.progress('close');
      var filterMethod = function (val) {
        var rows = $grid.find('tr[role="row"][id]');
        if (val.length <= 0) {
          //显示所有行
          rows.show();
          return;
        }

        rows.each(function (rowIndex, row) {
          var finded = false;
          $(row).find('td').each(function (colIndex, col) {
            if (colIndex < 2 || finded) return;
            if ($.trim(col.innerText).toLowerCase().indexOf(val) >= 0) {
              finded = true;
            }
          });
          // searchbox在可编辑列表中列表的显示和隐藏
          // if (finded) {
          //   $(row).show();
          // } else {
          //   $(row).hide();
          // }
        });
      };

      var qp = option.queryParams;
      if ($.type(qp) === 'function') {
        qp = option.queryParams.apply($sender);
      }

      //============ 展示出界面
      var $dlg;
      var $ff;
      var $dId = $.yvan.createId('widgetDialog');
      var $tId = $.yvan.createId('textbox');
      var dlgOpt = {
        xtype: 'dialog',
        id: 'efrwrt_id',
        dialogId: $dId,
        title: widgetWindowOption.title || '匿名对话框',
        width: widgetWindowOption.width || 900,
        height: widgetWindowOption.height || 400,
        center: {
          items: $.extend(true,
            {
              xtype: 'grid',
              queryParams: qp,
              onRender: function () {
                //默认1秒后 grid 获取焦点
                $ff = $(this);
                setTimeout(function () {
                  $sender.data().isWidgetOpen = true;
                  if ($ff.length > 0) {
                    $ff.focus();
                  }
                  $sender.data().isWidgetOpen = false;
                }, 500);
                $('#' + $tId).textbox('setValue',query);
              },
              onKeyDown: function (e) {
                if (e.key === 'Control' || e.key === 'Shift' || e.key === 'Alt') {
                  return false;
                }
                if (e.keyCode === 13) {
                  //如果按下回车键，就发出确认
                  var $grid = $dlg.down('grid');
                  var row = $grid.rowData();
                  if (row) {
                    $dlg.data('confirm')(row);
                  }
                }
              },
              onDblClickRow: function (rowid, iRow, iCol, e) {
                //双击表格的行，发出确认
                var $grid = $dlg.down('grid');
                $dlg.data('confirm')($grid.rowData(rowid));
              },
              loadComplete: function () {
                var $grid = $(this);
                var data = $grid.getRowData();
                if (data.length <= 0) {
                  $.yvan.msg('没有符合要求的数据');
                  //还原
                  $sender.data().widgetTmpValue = $sender.data().widgetValue;
                  $sender.textbox('setValue', $sender.data().widgetValue);
                  //没有数据行
                  if (option.hasOwnProperty('autoClose') && option.autoClose) {
                    setTimeout(function () { $dlg.window('close'); }, 0);
                  }

                } else if (data.length === 1) {
                  //唯一数据行
                  if (option.hasOwnProperty('autoClose') && option.autoClose) {
                    $dlg.data('confirm')(data[0]);
                  }

                }

                var val = $dlg.parent().item('dlgSearch').val() || '';
                filterMethod($.trim(val).toLowerCase());
              }
            },
            widgetWindowOption.grid)
        },
        onClose: function () {
          $sender.textbox('setValue', $sender.data().widgetValue);
          $sender.textbox('textbox').focus();
        },
        toolbar: [{
          text: '确认', iconCls: 'fa fa-save', onClick: function () {
            //发出确认
            var $grid = $dlg.down('grid');
            var row = $grid.rowData();
            if (row) {
              $dlg.data('confirm')(row);
            }
          }
        }, {
          text: '取消', iconCls: 'fa fa-times', onClick: function () {
            $dlg.window('close');
          }
        }, {
          id: $tId, xtype: 'textbox', name: 'dlgSearch', prompt:option.widgetPrompt,
          onRender: function () {
            $(this).textbox('textbox').bind('input propertychange', function () {
              //取值过滤行
              var val = $(this).val() || '';
              filterMethod($.trim(val).toLowerCase());
            });
          }
        }, {
          text: '搜索', iconCls: 'fa fa-search', onClick: function () {
            var t = $('#' + $tId).textbox('getValue');
            // $sender.data().widgetValue = t;
            // $sender.searchbox('setValue',t);
            var $grid = $dlg.down('grid');
            $grid.reload({
              queryParams: { query: t }
            });
          }
        }]
      };
      $dlg = $.yvan.showDialog(sender, dlgOpt);

      // 关闭当前窗口
      // $dlg.dialog({
      //   onClose:function(){
      //     alert("123");
      //   }
      // });

      $dlg.data({
        confirm: function (row) {
          var successOpt = option['success'] || option.bind;

          if (!successOpt) {
            //没有配置，只写自己
            if ($sender.name && row.hasOwnProperty($sender.name)) {
              $sender.searchbox('setValue', row[$sender.name]);
              $sender.data().widgetValue = row[$sender.name];
              // $dlg.dialog('close');
              $dlg.window('close');
              return true;
            }
          }

          if ($.type(successOpt) === "function") {
            //是函数，调函数
            var ret = successOpt.apply(this, arguments);
            $sender.data().widgetValue = $sender.searchbox('getValue');
            // $dlg.dialog('close');
            $dlg.window('close');
            return ret;
          }

          //字符串或数组，直接调用数组
          if ($.type(successOpt) === "string") {
            successOpt = [successOpt];
          }

          var obj = {};
          if ($.type(successOpt) === 'array') {
            //数组，根据名字逐个写入
            $.each(successOpt, function (index, name) {
              obj[name] = row[name];
            });

          } else if ($.type(successOpt) === 'object') {
            //对象，根据映射关系写入
            var vs = successOpt;
            for (var prop in vs) {
              if (!vs.hasOwnProperty(prop)) continue;
              if (!row.hasOwnProperty(vs[prop])) {
                console.error('弹出框没有属性' + vs[prop], row);
                continue;
              }
              obj[prop] = row[vs[prop]];
            }
          }

          var $grid = $sender.up('grid');
          if ($grid.length > 0) {
            //表格内编辑
            $grid.setEditRow(obj);
          } else {
            //窗体编辑
            $sender.findForm().form('load', obj);
          }

          $sender.data().widgetValue = $sender.searchbox('getValue');
          if ($.type(option['afterConfirm']) === 'function') {
            option['afterConfirm'](obj);
          }

          //确认关闭
          // $dlg.dialog('close');
          $dlg.window('close');
        }
      });
    });
  },
  clear: function (e) {
    var $me = $(e.data.target);
    $me.textbox('clear').textbox('textbox').focus();

    if (!$me.textbox('options').widget)
      return;

    var widget = $me.textbox('options').widget;
    var clear = widget.clear || widget.bind;
    if ($.type(clear) === "function") {
      widget.clear();
    }

    if ($.type(clear) === "string") {
      clear = [clear];
    }

    var obj = {};
    var vs = clear;
    if ($.type(vs) === 'array') {
      //数组清空
      $.each(vs, function (index, name) {
        obj[name] = '';
      });
    } else {
      //对象，按名字清空
      for (var prop in vs) {
        if (!vs.hasOwnProperty(prop)) continue;
        obj[prop] = '';
      }
    }

    $me.data().widgetValue = $me.searchbox('getValue');

    var $grid = $me.up('grid');
    if ($grid.length > 0) {
      //表格内编辑
      $grid.setEditRow(obj);
    } else {
      //窗体编辑
      $me.findForm().form('load', obj);
    }
  }
};