zyAdmin/node_modules/vxe-pc-ui/lib/table-select/src/table-select.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
exports.getRowUniqueId = getRowUniqueId;
var _comp = require("../../ui/src/comp");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _ui = require("../../ui");
var _dom = require("../../ui/src/dom");
var _vn = require("../../ui/src/vn");
var _utils = require("../../ui/src/utils");
var _log = require("../../ui/src/log");
var _input = _interopRequireDefault(require("../../input/src/input"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function getRowUniqueId() {
  return _xeUtils.default.uniqueId('row_');
}
function createInternalData() {
  return {
    // hpTimeout: undefined,
    // vpTimeout: undefined,
    fullRowMaps: {}
  };
}
var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
  name: 'VxeTableSelect',
  mixins: [_ui.globalMixins.sizeMixin],
  model: {
    prop: 'value',
    event: 'modelValue'
  },
  props: {
    value: [String, Number, Array],
    clearable: Boolean,
    placeholder: {
      type: String,
      default: function _default() {
        return _xeUtils.default.eqNull((0, _ui.getConfig)().tableSelect.placeholder) ? (0, _ui.getI18n)('vxe.base.pleaseSelect') : (0, _ui.getConfig)().tableSelect.placeholder;
      }
    },
    readonly: {
      type: Boolean,
      default: null
    },
    loading: Boolean,
    disabled: {
      type: Boolean,
      default: null
    },
    multiple: Boolean,
    className: [String, Function],
    prefixIcon: String,
    placement: String,
    columns: Array,
    options: Array,
    optionProps: Object,
    lazyOptions: Array,
    zIndex: Number,
    size: {
      type: String,
      default: function _default() {
        return (0, _ui.getConfig)().tableSelect.size || (0, _ui.getConfig)().size;
      }
    },
    popupConfig: Object,
    gridConfig: Object,
    transfer: {
      type: Boolean,
      default: null
    }
  },
  inject: {
    $xeModal: {
      default: null
    },
    $xeDrawer: {
      default: null
    },
    $xeTable: {
      default: null
    },
    $xeForm: {
      default: null
    },
    formItemInfo: {
      from: 'xeFormItemInfo',
      default: null
    }
  },
  provide: function provide() {
    var $xeTableSelect = this;
    return {
      $xeTableSelect: $xeTableSelect
    };
  },
  data: function data() {
    var xID = _xeUtils.default.uniqueId();
    var reactData = {
      initialized: false,
      tableColumns: [],
      fullOptionList: [],
      panelIndex: 0,
      panelStyle: {},
      panelPlacement: null,
      triggerFocusPanel: false,
      visiblePanel: false,
      isAniVisible: false,
      isActivated: false
    };
    var internalData = createInternalData();
    var gridEvents = {};
    return {
      xID: xID,
      reactData: reactData,
      internalData: internalData,
      gridEvents: gridEvents
    };
  },
  computed: Object.assign(Object.assign({}, {}), {
    computeFormReadonly: function computeFormReadonly() {
      var $xeTableSelect = this;
      var props = $xeTableSelect;
      var $xeForm = $xeTableSelect.$xeForm;
      var readonly = props.readonly;
      if (readonly === null) {
        if ($xeForm) {
          return $xeForm.readonly;
        }
        return false;
      }
      return readonly;
    },
    computeIsDisabled: function computeIsDisabled() {
      var $xeTableSelect = this;
      var props = $xeTableSelect;
      var $xeForm = $xeTableSelect.$xeForm;
      var disabled = props.disabled;
      if (disabled === null) {
        if ($xeForm) {
          return $xeForm.disabled;
        }
        return false;
      }
      return disabled;
    },
    computeBtnTransfer: function computeBtnTransfer() {
      var $xeTableSelect = this;
      var props = $xeTableSelect;
      var $xeForm = $xeTableSelect.$xeForm;
      var $xeTable = $xeTableSelect.$xeTable;
      var $xeModal = $xeTableSelect.$xeModal;
      var $xeDrawer = $xeTableSelect.$xeDrawer;
      var transfer = props.transfer;
      if (transfer === null) {
        var globalTransfer = (0, _ui.getConfig)().tableSelect.transfer;
        if (_xeUtils.default.isBoolean(globalTransfer)) {
          return globalTransfer;
        }
        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
          return true;
        }
      }
      return transfer;
    },
    computePropsOpts: function computePropsOpts() {
      var $xeTableSelect = this;
      var props = $xeTableSelect;
      return props.optionProps || {};
    },
    computeRowOpts: function computeRowOpts() {
      var $xeTableSelect = this;
      var gridOpts = $xeTableSelect.computeGridOpts;
      return Object.assign({}, gridOpts.rowConfig, {
        isCurrent: true
      });
    },
    computeRowKeyField: function computeRowKeyField() {
      var $xeTableSelect = this;
      var rowOpts = $xeTableSelect.computeRowOpts;
      return rowOpts.keyField || '_X_ROW_KEY';
    },
    computeLabelField: function computeLabelField() {
      var $xeTableSelect = this;
      var propsOpts = $xeTableSelect.computePropsOpts;
      return propsOpts.label || 'label';
    },
    computeValueField: function computeValueField() {
      var $xeTableSelect = this;
      var propsOpts = $xeTableSelect.computePropsOpts;
      return propsOpts.value || 'value';
    },
    computePopupOpts: function computePopupOpts() {
      var $xeTableSelect = this;
      var props = $xeTableSelect;
      return Object.assign({}, (0, _ui.getConfig)().tableSelect.popupConfig, props.popupConfig);
    },
    computeGridOpts: function computeGridOpts() {
      var $xeTableSelect = this;
      var props = $xeTableSelect;
      return Object.assign({}, (0, _ui.getConfig)().tableSelect.gridConfig, props.gridConfig, {
        data: undefined
      });
    },
    computeSelectGridOpts: function computeSelectGridOpts() {
      var $xeTableSelect = this;
      var gridOpts = $xeTableSelect.computeGridOpts;
      var pagerConfig = gridOpts.pagerConfig,
        proxyConfig = gridOpts.proxyConfig;
      if (proxyConfig) {
        var proxyAjax = proxyConfig.ajax;
        if (proxyAjax && proxyAjax.query) {
          var newProxyConfig = _xeUtils.default.clone(proxyConfig, true);
          var ajaxMethods = proxyAjax.query;
          if (ajaxMethods) {
            var resConfigs = proxyConfig.response || proxyConfig.props || {};
            Object.assign(newProxyConfig.ajax, {
              query: function query(params) {
                for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
                  args[_key - 1] = arguments[_key];
                }
                return Promise.resolve(ajaxMethods.apply(void 0, [params].concat(args))).then(function (rest) {
                  var tableData = [];
                  if (pagerConfig) {
                    var resultProp = resConfigs.result;
                    tableData = (_xeUtils.default.isFunction(resultProp) ? resultProp({
                      data: rest,
                      $table: null,
                      $grid: null,
                      $gantt: null
                    }) : _xeUtils.default.get(rest, resultProp || 'result')) || [];
                  } else {
                    var listProp = resConfigs.list;
                    tableData = (listProp ? _xeUtils.default.isFunction(listProp) ? listProp({
                      data: rest,
                      $table: null,
                      $grid: null,
                      $gantt: null
                    }) : _xeUtils.default.get(rest, listProp) : rest) || [];
                  }
                  $xeTableSelect.cacheDataMap(tableData || []);
                  return rest;
                });
              }
            });
          }
          return Object.assign({}, gridOpts, {
            proxyConfig: newProxyConfig
          });
        }
      }
      return gridOpts;
    },
    computeSelectLabel: function computeSelectLabel() {
      var $xeTableSelect = this;
      var props = $xeTableSelect;
      var reactData = $xeTableSelect.reactData;
      var internalData = $xeTableSelect.internalData;
      var value = props.value,
        lazyOptions = props.lazyOptions;
      var fullOptionList = reactData.fullOptionList;
      var fullRowMaps = internalData.fullRowMaps;
      var valueField = $xeTableSelect.computeValueField;
      var labelField = $xeTableSelect.computeLabelField;
      if (!fullOptionList) {
        return '';
      }
      return (_xeUtils.default.isArray(value) ? value : [value]).map(function (val) {
        var cacheItem = fullRowMaps[val];
        if (cacheItem) {
          return cacheItem.item[labelField];
        }
        if (lazyOptions) {
          var lazyItem = lazyOptions.find(function (item) {
            return item[valueField] === val;
          });
          if (lazyItem) {
            return lazyItem[labelField];
          }
        }
        return val;
      }).join(', ');
    },
    computePopupWrapperStyle: function computePopupWrapperStyle() {
      var $xeTableSelect = this;
      var popupOpts = $xeTableSelect.computePopupOpts;
      var height = popupOpts.height,
        width = popupOpts.width;
      var stys = {};
      if (width) {
        stys.width = (0, _dom.toCssUnit)(width);
      }
      if (height) {
        stys.height = (0, _dom.toCssUnit)(height);
      }
      return stys;
    }
  }),
  methods: {
    //
    // Method
    //
    dispatchEvent: function dispatchEvent(type, params, evnt) {
      var $xeTableSelect = this;
      $xeTableSelect.$emit(type, (0, _ui.createEvent)(evnt, {
        $tableSelect: $xeTableSelect
      }, params));
    },
    emitModel: function emitModel(value) {
      var $xeTableSelect = this;
      var _events = $xeTableSelect._events;
      if (_events && _events.modelValue) {
        $xeTableSelect.$emit('modelValue', value);
      } else {
        $xeTableSelect.$emit('model-value', value);
      }
    },
    getRowid: function getRowid(option) {
      var $xeTableSelect = this;
      var nodeKeyField = $xeTableSelect.computeRowKeyField;
      var rowid = option[nodeKeyField];
      return rowid ? encodeURIComponent(rowid) : '';
    },
    getRowsByValue: function getRowsByValue(modelValue) {
      var $xeTableSelect = this;
      var internalData = $xeTableSelect.internalData;
      var fullRowMaps = internalData.fullRowMaps;
      var rows = [];
      var vals = _xeUtils.default.eqNull(modelValue) ? [] : _xeUtils.default.isArray(modelValue) ? modelValue : [modelValue];
      vals.forEach(function (val) {
        var cacheItem = fullRowMaps[val];
        if (cacheItem) {
          rows.push(cacheItem.item);
        }
      });
      return rows;
    },
    updateModel: function updateModel(modelValue) {
      var $xeTableSelect = this;
      var props = $xeTableSelect;
      var multiple = props.multiple;
      $xeTableSelect.$nextTick(function () {
        var $grid = $xeTableSelect.$refs.refGrid;
        if ($grid) {
          var selectList = $xeTableSelect.getRowsByValue(modelValue);
          if (selectList.length) {
            if (multiple) {
              $grid.setCheckboxRow(selectList, true);
            } else {
              $grid.setRadioRow(selectList[0]);
            }
          }
        }
      });
    },
    loadTableColumn: function loadTableColumn(columns) {
      var $xeTableSelect = this;
      var props = $xeTableSelect;
      var reactData = $xeTableSelect.reactData;
      if (!columns || !columns.length) {
        return;
      }
      var multiple = props.multiple;
      var tableCols = [];
      var hasRadioCol = false;
      var hasCheckboxCol = false;
      columns.forEach(function (column) {
        if (!hasRadioCol && column.type === 'radio') {
          hasRadioCol = true;
        } else if (!hasCheckboxCol && column.type === 'checkbox') {
          hasCheckboxCol = true;
        }
        tableCols.push(column);
      });
      if (multiple) {
        if (!hasCheckboxCol) {
          tableCols.unshift({
            type: 'checkbox',
            width: 70
          });
        }
      } else {
        if (!hasRadioCol) {
          tableCols.unshift({
            type: 'radio',
            width: 70
          });
        }
      }
      reactData.tableColumns = tableCols;
    },
    cacheDataMap: function cacheDataMap(dataList) {
      var $xeTableSelect = this;
      var props = $xeTableSelect;
      var reactData = $xeTableSelect.reactData;
      var internalData = $xeTableSelect.internalData;
      var options = props.options;
      var rowKeyField = $xeTableSelect.computeRowKeyField;
      var valueField = $xeTableSelect.computeValueField;
      var gridOpts = $xeTableSelect.computeGridOpts;
      var treeConfig = gridOpts.treeConfig,
        pagerConfig = gridOpts.pagerConfig;
      var rowMaps = {};
      var keyMaps = {};
      if (treeConfig) {
        // x
      } else {
        _xeUtils.default.arrayEach(dataList || options || [], function (item, index, items) {
          var rowid = $xeTableSelect.getRowid(item);
          if (!rowid) {
            rowid = getRowUniqueId();
          }
          if (keyMaps[rowid]) {
            (0, _log.errLog)('vxe.error.repeatKey', ["[table-select] ".concat(rowKeyField), rowid]);
          }
          keyMaps[rowid] = true;
          var value = item[valueField];
          if (rowMaps[value]) {
            (0, _log.errLog)('vxe.error.repeatKey', ["[table-select] ".concat(valueField), value]);
          }
          rowMaps[value] = {
            item: item,
            index: index,
            items: items,
            parent: null,
            nodes: []
          };
        });
      }
      reactData.fullOptionList = dataList || options || [];
      internalData.fullRowMaps = pagerConfig ? Object.assign({}, internalData.fullRowMaps, rowMaps) : rowMaps;
      $xeTableSelect.updateModel(props.value);
    },
    updateZindex: function updateZindex() {
      var $xeTableSelect = this;
      var props = $xeTableSelect;
      var reactData = $xeTableSelect.reactData;
      var zIndex = props.zIndex;
      if (zIndex) {
        reactData.panelIndex = zIndex;
      } else if (reactData.panelIndex < (0, _utils.getLastZIndex)()) {
        reactData.panelIndex = (0, _utils.nextZIndex)();
      }
    },
    updatePlacement: function updatePlacement() {
      var $xeTableSelect = this;
      var props = $xeTableSelect;
      var reactData = $xeTableSelect.reactData;
      var placement = props.placement;
      var panelIndex = reactData.panelIndex;
      var targetElem = $xeTableSelect.$refs.refElem;
      var panelElem = $xeTableSelect.$refs.refOptionPanel;
      var btnTransfer = $xeTableSelect.computeBtnTransfer;
      var handleStyle = function handleStyle() {
        var ppObj = (0, _dom.updatePanelPlacement)(targetElem, panelElem, {
          placement: placement,
          teleportTo: btnTransfer
        });
        var panelStyle = Object.assign(ppObj.style, {
          zIndex: panelIndex
        });
        reactData.panelStyle = panelStyle;
        reactData.panelPlacement = ppObj.placement;
      };
      handleStyle();
      return $xeTableSelect.$nextTick().then(handleStyle);
    },
    showOptionPanel: function showOptionPanel() {
      var $xeTableSelect = this;
      var props = $xeTableSelect;
      var reactData = $xeTableSelect.reactData;
      var internalData = $xeTableSelect.internalData;
      var loading = props.loading;
      var isDisabled = $xeTableSelect.computeIsDisabled;
      if (!loading && !isDisabled) {
        if (internalData.vpTimeout) {
          clearTimeout(internalData.vpTimeout);
        }
        if (internalData.hpTimeout) {
          clearTimeout(internalData.hpTimeout);
        }
        if (!reactData.initialized) {
          reactData.initialized = true;
          var btnTransfer = $xeTableSelect.computeBtnTransfer;
          var panelElem = $xeTableSelect.$refs.refOptionPanel;
          if (btnTransfer) {
            if (panelElem) {
              document.body.appendChild(panelElem);
            }
          }
        }
        reactData.isActivated = true;
        reactData.isAniVisible = true;
        internalData.vpTimeout = setTimeout(function () {
          reactData.visiblePanel = true;
          $xeTableSelect.updateModel(props.value);
          internalData.vpTimeout = undefined;
        }, 10);
        $xeTableSelect.updateZindex();
        $xeTableSelect.updatePlacement();
      }
    },
    hideOptionPanel: function hideOptionPanel() {
      var $xeTableSelect = this;
      var reactData = $xeTableSelect.reactData;
      var internalData = $xeTableSelect.internalData;
      reactData.visiblePanel = false;
      internalData.hpTimeout = setTimeout(function () {
        reactData.isAniVisible = false;
      }, 350);
    },
    changeEvent: function changeEvent(evnt, selectValue, row) {
      var $xeTableSelect = this;
      var props = $xeTableSelect;
      var $xeForm = $xeTableSelect.$xeForm;
      var formItemInfo = $xeTableSelect.formItemInfo;
      $xeTableSelect.emitModel(selectValue);
      if (selectValue !== props.value) {
        $xeTableSelect.dispatchEvent('change', {
          value: selectValue,
          row: row,
          option: row
        }, evnt);
        // 自动更新校验状态
        if ($xeForm && formItemInfo) {
          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, selectValue);
        }
      }
    },
    clearValueEvent: function clearValueEvent(evnt, selectValue) {
      var $xeTableSelect = this;
      $xeTableSelect.changeEvent(evnt, selectValue, null);
      $xeTableSelect.dispatchEvent('clear', {
        value: selectValue
      }, evnt);
    },
    clearEvent: function clearEvent(params, evnt) {
      var $xeTableSelect = this;
      $xeTableSelect.clearValueEvent(evnt, null);
      $xeTableSelect.hideOptionPanel();
    },
    handleGlobalMousewheelEvent: function handleGlobalMousewheelEvent(evnt) {
      var $xeTableSelect = this;
      var reactData = $xeTableSelect.reactData;
      var visiblePanel = reactData.visiblePanel;
      var isDisabled = $xeTableSelect.computeIsDisabled;
      if (!isDisabled) {
        if (visiblePanel) {
          var panelElem = $xeTableSelect.$refs.refOptionPanel;
          if ((0, _dom.getEventTargetNode)(evnt, panelElem).flag) {
            $xeTableSelect.updatePlacement();
          } else {
            $xeTableSelect.hideOptionPanel();
          }
        }
      }
    },
    handleGlobalMousedownEvent: function handleGlobalMousedownEvent(evnt) {
      var $xeTableSelect = this;
      var reactData = $xeTableSelect.reactData;
      var visiblePanel = reactData.visiblePanel;
      var isDisabled = $xeTableSelect.computeIsDisabled;
      if (!isDisabled) {
        var el = $xeTableSelect.$refs.refElem;
        var panelElem = $xeTableSelect.$refs.refOptionPanel;
        reactData.isActivated = (0, _dom.getEventTargetNode)(evnt, el).flag || (0, _dom.getEventTargetNode)(evnt, panelElem).flag;
        if (visiblePanel && !reactData.isActivated) {
          $xeTableSelect.hideOptionPanel();
        }
      }
    },
    handleGlobalBlurEvent: function handleGlobalBlurEvent() {
      var $xeTableSelect = this;
      var reactData = $xeTableSelect.reactData;
      var visiblePanel = reactData.visiblePanel,
        isActivated = reactData.isActivated;
      if (visiblePanel) {
        $xeTableSelect.hideOptionPanel();
      }
      if (isActivated) {
        reactData.isActivated = false;
      }
      if (visiblePanel || isActivated) {
        var $input = $xeTableSelect.$refs.refInput;
        if ($input) {
          $input.blur();
        }
      }
    },
    handleGlobalResizeEvent: function handleGlobalResizeEvent() {
      var $xeTableSelect = this;
      var reactData = $xeTableSelect.reactData;
      var visiblePanel = reactData.visiblePanel;
      if (visiblePanel) {
        $xeTableSelect.updatePlacement();
      }
    },
    focusEvent: function focusEvent(evnt) {
      var $xeTableSelect = this;
      var reactData = $xeTableSelect.reactData;
      var isDisabled = $xeTableSelect.computeIsDisabled;
      if (!isDisabled) {
        if (!reactData.visiblePanel) {
          reactData.triggerFocusPanel = true;
          $xeTableSelect.showOptionPanel();
          setTimeout(function () {
            reactData.triggerFocusPanel = false;
          }, 150);
        }
      }
      $xeTableSelect.dispatchEvent('focus', {}, evnt);
    },
    clickEvent: function clickEvent(evnt) {
      var $xeTableSelect = this;
      $xeTableSelect.togglePanelEvent(evnt);
      $xeTableSelect.dispatchEvent('click', {}, evnt);
    },
    blurEvent: function blurEvent(evnt) {
      var $xeTableSelect = this;
      var reactData = $xeTableSelect.reactData;
      reactData.isActivated = false;
      $xeTableSelect.dispatchEvent('blur', {}, evnt);
    },
    togglePanelEvent: function togglePanelEvent(params) {
      var $xeTableSelect = this;
      var reactData = $xeTableSelect.reactData;
      var $event = params.$event;
      $event.preventDefault();
      if (reactData.triggerFocusPanel) {
        reactData.triggerFocusPanel = false;
      } else {
        if (reactData.visiblePanel) {
          $xeTableSelect.hideOptionPanel();
        } else {
          $xeTableSelect.showOptionPanel();
        }
      }
    },
    radioChangeEvent: function radioChangeEvent(params) {
      var $xeTableSelect = this;
      var $event = params.$event,
        row = params.row;
      var valueField = $xeTableSelect.computeValueField;
      var value = row[valueField];
      $xeTableSelect.changeEvent($event, value, row);
      $xeTableSelect.hideOptionPanel();
    },
    checkboxChangeEvent: function checkboxChangeEvent(params) {
      var $xeTableSelect = this;
      var $grid = params.$grid,
        $event = params.$event,
        row = params.row;
      var valueField = $xeTableSelect.computeValueField;
      if ($grid) {
        var checkboxRecords = $grid.getCheckboxRecords();
        var value = checkboxRecords.map(function (row) {
          return row[valueField];
        });
        $xeTableSelect.changeEvent($event, value, row);
      }
    },
    checkboxAllEvent: function checkboxAllEvent(params) {
      var $xeTableSelect = this;
      $xeTableSelect.checkboxChangeEvent(params);
    },
    //
    // Render
    //
    renderVN: function renderVN(h) {
      var VxeTableGridComponent = _ui.VxeUI.getComponent('vxe-grid');
      var $xeTableSelect = this;
      var props = $xeTableSelect;
      var slots = $xeTableSelect.$scopedSlots;
      var reactData = $xeTableSelect.reactData;
      var className = props.className,
        options = props.options,
        loading = props.loading;
      var initialized = reactData.initialized,
        isActivated = reactData.isActivated,
        isAniVisible = reactData.isAniVisible,
        visiblePanel = reactData.visiblePanel,
        tableColumns = reactData.tableColumns;
      var vSize = $xeTableSelect.computeSize;
      var isDisabled = $xeTableSelect.computeIsDisabled;
      var selectLabel = $xeTableSelect.computeSelectLabel;
      var btnTransfer = $xeTableSelect.computeBtnTransfer;
      var formReadonly = $xeTableSelect.computeFormReadonly;
      var popupOpts = $xeTableSelect.computePopupOpts;
      var popupClassName = popupOpts.className;
      var selectGridOpts = $xeTableSelect.computeSelectGridOpts;
      var rowOpts = $xeTableSelect.computeRowOpts;
      var popupWrapperStyle = $xeTableSelect.computePopupWrapperStyle;
      var headerSlot = slots.header;
      var footerSlot = slots.footer;
      var prefixSlot = slots.prefix;
      if (formReadonly) {
        return h('div', {
          ref: 'refElem',
          class: ['vxe-table-select--readonly', className]
        }, [h('span', {
          class: 'vxe-table-select-label'
        }, selectLabel)]);
      }
      return h('div', {
        ref: 'refElem',
        class: ['vxe-table-select', className ? _xeUtils.default.isFunction(className) ? className({
          $tableSelect: $xeTableSelect
        }) : className : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--visible', visiblePanel), 'is--disabled', isDisabled), 'is--loading', loading), 'is--active', isActivated)]
      }, [h(_input.default, {
        ref: 'refInput',
        props: {
          clearable: props.clearable,
          placeholder: props.placeholder,
          readonly: true,
          disabled: isDisabled,
          type: 'text',
          prefixIcon: props.prefixIcon,
          suffixIcon: loading ? (0, _ui.getIcon)().TABLE_SELECT_LOADED : visiblePanel ? (0, _ui.getIcon)().TABLE_SELECT_OPEN : (0, _ui.getIcon)().TABLE_SELECT_CLOSE,
          value: loading ? (0, _ui.getI18n)('vxe.select.loadingText') : selectLabel
        },
        on: {
          clear: $xeTableSelect.clearEvent,
          click: $xeTableSelect.clickEvent,
          focus: $xeTableSelect.focusEvent,
          blur: $xeTableSelect.blurEvent,
          'suffix-click': $xeTableSelect.togglePanelEvent
        },
        scopedSlots: prefixSlot ? {
          prefix: function prefix() {
            return prefixSlot({});
          }
        } : {}
      }), h('div', {
        ref: 'refOptionPanel',
        class: ['vxe-table--ignore-clear vxe-table-select--panel', popupClassName ? _xeUtils.default.isFunction(popupClassName) ? popupClassName({
          $tableSelect: $xeTableSelect
        }) : popupClassName : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--transfer', btnTransfer), 'ani--leave', !loading && isAniVisible), 'ani--enter', !loading && visiblePanel)],
        attrs: {
          placement: reactData.panelPlacement
        },
        style: reactData.panelStyle
      }, initialized ? [h('div', {
        class: 'vxe-table-select--panel-wrapper'
      }, [headerSlot ? h('div', {
        class: 'vxe-table-select--panel-header'
      }, headerSlot({})) : (0, _ui.renderEmptyElement)($xeTableSelect), h('div', {
        class: 'vxe-table-select--panel-body'
      }, [h('div', {
        ref: 'refGridWrapper',
        class: 'vxe-table-select-grid--wrapper',
        style: popupWrapperStyle
      }, [VxeTableGridComponent ? h(VxeTableGridComponent, {
        ref: 'refGrid',
        class: 'vxe-table-select--grid',
        props: Object.assign(Object.assign({}, selectGridOpts), {
          rowConfig: rowOpts,
          data: options,
          columns: tableColumns.length ? tableColumns : selectGridOpts.columns,
          height: '100%',
          autoResize: true
        }),
        on: Object.assign(Object.assign({}, $xeTableSelect.gridEvents), {
          'radio-change': $xeTableSelect.radioChangeEvent,
          'checkbox-change': $xeTableSelect.checkboxChangeEvent,
          'checkbox-all': $xeTableSelect.checkboxAllEvent
        }),
        scopedSlots: Object.assign({}, slots, {
          header: undefined,
          footer: undefined,
          prefixSlot: undefined
        })
      }) : (0, _ui.renderEmptyElement)($xeTableSelect)])]), footerSlot ? h('div', {
        class: 'vxe-table-select--panel-footer'
      }, footerSlot({})) : (0, _ui.renderEmptyElement)($xeTableSelect)])] : [])]);
    }
  },
  watch: {
    options: function options() {
      var $xeTableSelect = this;
      $xeTableSelect.cacheDataMap();
    },
    columns: function columns(val) {
      var $xeTableSelect = this;
      $xeTableSelect.loadTableColumn(val);
    },
    value: function value(val) {
      var $xeTableSelect = this;
      $xeTableSelect.updateModel(val);
    }
  },
  created: function created() {
    var $xeTableSelect = this;
    var props = $xeTableSelect;
    var gridEventKeys = ['form-submit', 'form-reset', 'form-collapse', 'page-change'];
    var gridEvents = $xeTableSelect.gridEvents;
    gridEventKeys.forEach(function (name) {
      gridEvents[(0, _vn.getOnName)(name)] = function (params) {
        $xeTableSelect.dispatchEvent(name, params, params.$event);
      };
    });
    $xeTableSelect.loadTableColumn(props.columns);
    $xeTableSelect.cacheDataMap();
  },
  mounted: function mounted() {
    var $xeTableSelect = this;
    var props = $xeTableSelect;
    var reactData = $xeTableSelect.reactData;
    var VxeTableGridComponent = _ui.VxeUI.getComponent('vxe-grid');
    $xeTableSelect.$nextTick(function () {
      if (!VxeTableGridComponent) {
        (0, _log.errLog)('vxe.error.reqComp', ['[table-select] vxe-grid']);
      }
    });
    var gridConfig = props.gridConfig;
    if (gridConfig && gridConfig.proxyConfig) {
      if (gridConfig.proxyConfig.autoLoad !== false) {
        reactData.initialized = true;
      }
    }
    _ui.globalEvents.on($xeTableSelect, 'mousewheel', $xeTableSelect.handleGlobalMousewheelEvent);
    _ui.globalEvents.on($xeTableSelect, 'mousedown', $xeTableSelect.handleGlobalMousedownEvent);
    _ui.globalEvents.on($xeTableSelect, 'blur', $xeTableSelect.handleGlobalBlurEvent);
    _ui.globalEvents.on($xeTableSelect, 'resize', $xeTableSelect.handleGlobalResizeEvent);
  },
  beforeDestroy: function beforeDestroy() {
    var $xeTableSelect = this;
    var panelElem = $xeTableSelect.$refs.refOptionPanel;
    if (panelElem && panelElem.parentNode) {
      panelElem.parentNode.removeChild(panelElem);
    }
    _ui.globalEvents.off($xeTableSelect, 'mousewheel');
    _ui.globalEvents.off($xeTableSelect, 'mousedown');
    _ui.globalEvents.off($xeTableSelect, 'blur');
    _ui.globalEvents.off($xeTableSelect, 'resize');
  },
  render: function render(h) {
    return this.renderVN(h);
  }
});
/* define-vxe-component end */