vxe-table 3.8.23 → 3.9.0-rc.0

package/lib/table/module/custom/panel.js

@@ -0,0 +1,910 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ui = require("../../../ui");
+var _utils = require("../../../ui/src/utils");
+var _dom = require("../../../ui/src/dom");
+var _log = require("../../../ui/src/log");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var getI18n = _ui.VxeUI.getI18n,
+  getIcon = _ui.VxeUI.getIcon;
+function updateDropHint(_vm, evnt) {
+  var $refs = _vm.$refs;
+  var dragHintEl = $refs.dragHintElemRef;
+  var bodyEl = $refs.bodyElemRef;
+  if (!bodyEl) {
+    return;
+  }
+  if (dragHintEl) {
+    var wrapperEl = bodyEl.parentNode;
+    var wrapperRect = wrapperEl.getBoundingClientRect();
+    dragHintEl.style.display = 'block';
+    dragHintEl.style.top = "".concat(Math.min(wrapperEl.clientHeight - wrapperEl.scrollTop - dragHintEl.clientHeight, evnt.clientY - wrapperRect.y), "px");
+    dragHintEl.style.left = "".concat(Math.min(wrapperEl.clientWidth - wrapperEl.scrollLeft - dragHintEl.clientWidth - 16, evnt.clientX - wrapperRect.x), "px");
+  }
+}
+var renderSimplePanel = function renderSimplePanel(h, _vm) {
+  var VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
+  var _e = _vm._e,
+    $xetable = _vm.$xetable,
+    customStore = _vm.customStore,
+    dragColumn = _vm.dragColumn;
+  var customColumnList = $xetable.customColumnList,
+    customOpts = $xetable.customOpts,
+    isMaxFixedColumn = $xetable.isMaxFixedColumn;
+  var maxHeight = customStore.maxHeight;
+  var checkMethod = customOpts.checkMethod,
+    visibleMethod = customOpts.visibleMethod,
+    allowVisible = customOpts.allowVisible,
+    allowSort = customOpts.allowSort,
+    allowFixed = customOpts.allowFixed,
+    trigger = customOpts.trigger,
+    placement = customOpts.placement;
+  var colVNs = [];
+  var customWrapperOns = {};
+  // hover 触发
+  if (trigger === 'hover') {
+    customWrapperOns.mouseenter = _vm.handleWrapperMouseenterEvent;
+    customWrapperOns.mouseleave = _vm.handleWrapperMouseleaveEvent;
+  }
+  _xeUtils.default.eachTree(customColumnList, function (column, index, items, path, parent) {
+    var isVisible = visibleMethod ? visibleMethod({
+      column: column
+    }) : true;
+    if (isVisible) {
+      var isChecked = column.renderVisible;
+      var isIndeterminate = column.halfVisible;
+      var isColGroup = column.children && column.children.length;
+      var colTitle = (0, _utils.formatText)(column.getTitle(), 1);
+      var isDisabled = checkMethod ? !checkMethod({
+        column: column
+      }) : false;
+      var isHidden = !isChecked;
+      colVNs.push(h('li', {
+        key: column.id,
+        attrs: {
+          colid: column.id
+        },
+        class: ['vxe-table-custom--option', "level--".concat(column.level), {
+          'is--hidden': isHidden,
+          'is--group': isColGroup
+        }],
+        on: {
+          dragstart: _vm.sortDragstartEvent,
+          dragend: _vm.sortDragendEvent,
+          dragover: _vm.sortDragoverEvent
+        }
+      }, [allowVisible ? h('div', {
+        class: ['vxe-table-custom--checkbox-option', {
+          'is--checked': isChecked,
+          'is--indeterminate': isIndeterminate,
+          'is--disabled': isDisabled
+        }],
+        attrs: {
+          title: getI18n('vxe.custom.setting.colVisible')
+        },
+        on: {
+          click: function click() {
+            if (!isDisabled) {
+              _vm.changeCheckboxOption(column);
+            }
+          }
+        }
+      }, [h('span', {
+        class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
+      })]) : _e(), allowSort && column.level === 1 ? h('div', {
+        class: 'vxe-table-custom--sort-option'
+      }, [h('span', {
+        class: ['vxe-table-custom--sort-btn', {
+          'is--disabled': isHidden
+        }],
+        attrs: {
+          title: getI18n('vxe.custom.setting.sortHelpTip')
+        },
+        on: isHidden ? {} : {
+          mousedown: _vm.sortMousedownEvent,
+          mouseup: _vm.sortMouseupEvent
+        }
+      }, [h('i', {
+        class: getIcon().TABLE_CUSTOM_SORT
+      })])]) : _e(), column.type === 'html' ? h('div', {
+        key: '1',
+        class: 'vxe-table-custom--checkbox-label',
+        domProps: {
+          innerHTML: colTitle
+        }
+      }) : h('div', {
+        key: '0',
+        class: 'vxe-table-custom--checkbox-label',
+        attrs: {
+          title: colTitle
+        }
+      }, colTitle), !parent && allowFixed ? h('div', {
+        class: 'vxe-table-custom--fixed-option'
+      }, [h(VxeUIButtonComponent, {
+        props: {
+          mode: 'text',
+          icon: column.renderFixed === 'left' ? getIcon().TOOLBAR_TOOLS_FIXED_LEFT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_LEFT,
+          status: column.renderFixed === 'left' ? 'primary' : '',
+          disabled: isHidden || isMaxFixedColumn && !column.renderFixed,
+          title: getI18n(column.renderFixed === 'left' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedLeft')
+        },
+        on: {
+          click: function click() {
+            _vm.changeFixedOption(column, 'left');
+          }
+        }
+      }), h(VxeUIButtonComponent, {
+        props: {
+          mode: 'text',
+          icon: column.renderFixed === 'right' ? getIcon().TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_RIGHT,
+          status: column.renderFixed === 'right' ? 'primary' : '',
+          disabled: isHidden || isMaxFixedColumn && !column.renderFixed,
+          title: getI18n(column.renderFixed === 'right' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedRight')
+        },
+        on: {
+          click: function click() {
+            _vm.changeFixedOption(column, 'right');
+          }
+        }
+      })]) : _e()]));
+    }
+  });
+  var isAllChecked = customStore.isAll;
+  var isAllIndeterminate = customStore.isIndeterminate;
+  return h('div', {
+    key: 'simple',
+    class: ['vxe-table-custom-wrapper', "placement--".concat(placement), {
+      'is--active': customStore.visible
+    }],
+    style: maxHeight && !['left', 'right'].includes(placement) ? {
+      maxHeight: "".concat(maxHeight, "px")
+    } : {}
+  }, customStore.visible ? [h('ul', {
+    class: 'vxe-table-custom--header'
+  }, [h('li', {
+    class: 'vxe-table-custom--option'
+  }, [allowVisible ? h('div', {
+    class: ['vxe-table-custom--checkbox-option', {
+      'is--checked': isAllChecked,
+      'is--indeterminate': isAllIndeterminate
+    }],
+    attrs: {
+      title: getI18n('vxe.table.allTitle')
+    },
+    on: {
+      click: _vm.allOptionEvent
+    }
+  }, [h('span', {
+    class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
+  }), h('span', {
+    class: 'vxe-checkbox--label'
+  }, getI18n('vxe.toolbar.customAll'))]) : h('span', {
+    class: 'vxe-checkbox--label'
+  }, getI18n('vxe.table.customTitle'))])]), h('div', {
+    ref: 'bodyElemRef',
+    class: 'vxe-table-custom--list-wrapper'
+  }, [h('transition-group', {
+    class: 'vxe-table-custom--body',
+    props: {
+      name: 'vxe-table-custom--list',
+      tag: 'ul'
+    },
+    on: customWrapperOns
+  }, colVNs), h('div', {
+    ref: 'dragHintElemRef',
+    class: 'vxe-table-custom-popup--drag-hint'
+  }, getI18n('vxe.custom.cstmDragTarget', [dragColumn && dragColumn.type !== 'html' ? dragColumn.getTitle() : '']))]), customOpts.showFooter ? h('div', {
+    class: 'vxe-table-custom--footer'
+  }, [h(VxeUIButtonComponent, {
+    props: {
+      mode: 'text',
+      content: customOpts.resetButtonText || getI18n('vxe.table.customRestore')
+    },
+    on: {
+      click: _vm.resetCustomEvent
+    }
+  }), customOpts.immediate ? h(VxeUIButtonComponent, {
+    props: {
+      mode: 'text',
+      content: customOpts.closeButtonText || getI18n('vxe.table.customClose')
+    },
+    on: {
+      click: _vm.cancelCloseEvent
+    }
+  }) : h(VxeUIButtonComponent, {
+    props: {
+      mode: 'text',
+      content: customOpts.resetButtonText || getI18n('vxe.table.customCancel')
+    },
+    on: {
+      click: _vm.cancelCustomEvent
+    }
+  }), customOpts.immediate ? _e() : h(VxeUIButtonComponent, {
+    props: {
+      mode: 'text',
+      status: 'primary',
+      content: customOpts.confirmButtonText || getI18n('vxe.table.customConfirm')
+    },
+    on: {
+      click: _vm.confirmCustomEvent
+    }
+  })]) : null] : []);
+};
+var renderPopupPanel = function renderPopupPanel(h, _vm) {
+  var VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
+  var _e = _vm._e,
+    $xetable = _vm.$xetable,
+    customStore = _vm.customStore;
+  var customOpts = $xetable.customOpts,
+    customColumnList = $xetable.customColumnList,
+    columnOpts = $xetable.columnOpts,
+    isMaxFixedColumn = $xetable.isMaxFixedColumn;
+  var modalOptions = customOpts.modalOptions,
+    allowVisible = customOpts.allowVisible,
+    allowSort = customOpts.allowSort,
+    allowFixed = customOpts.allowFixed,
+    allowResizable = customOpts.allowResizable,
+    checkMethod = customOpts.checkMethod,
+    visibleMethod = customOpts.visibleMethod;
+  var maxFixedSize = columnOpts.maxFixedSize;
+  var modalOpts = Object.assign({}, modalOptions);
+  var trVNs = [];
+  _xeUtils.default.eachTree(customColumnList, function (column, index, items, path, parent) {
+    var isVisible = visibleMethod ? visibleMethod({
+      column: column
+    }) : true;
+    if (isVisible) {
+      var isChecked = column.renderVisible;
+      var isIndeterminate = column.halfVisible;
+      var colTitle = (0, _utils.formatText)(column.getTitle(), 1);
+      var isColGroup = column.children && column.children.length;
+      var isDisabled = checkMethod ? !checkMethod({
+        column: column
+      }) : false;
+      var isHidden = !isChecked;
+      trVNs.push(h('tr', {
+        key: column.id,
+        attrs: {
+          colid: column.id
+        },
+        class: ["vxe-table-custom-popup--row level--".concat(column.level), {
+          'is--group': isColGroup
+        }],
+        on: {
+          dragstart: _vm.sortDragstartEvent,
+          dragend: _vm.sortDragendEvent,
+          dragover: _vm.sortDragoverEvent
+        }
+      }, [allowVisible ? h('td', {
+        class: 'vxe-table-custom-popup--column-item col--visible'
+      }, [h('div', {
+        class: ['vxe-table-custom--checkbox-option', {
+          'is--checked': isChecked,
+          'is--indeterminate': isIndeterminate,
+          'is--disabled': isDisabled
+        }],
+        attrs: {
+          title: getI18n('vxe.custom.setting.colVisible')
+        },
+        on: {
+          click: function click() {
+            if (!isDisabled) {
+              _vm.changeCheckboxOption(column);
+            }
+          }
+        }
+      }, [h('span', {
+        class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
+      })])]) : _e(), allowSort ? h('td', {
+        class: 'vxe-table-custom-popup--column-item col--sort'
+      }, [column.level === 1 ? h('span', {
+        class: ['vxe-table-custom-popup--column-sort-btn', {
+          'is--disabled': isHidden
+        }],
+        attrs: {
+          title: getI18n('vxe.custom.setting.sortHelpTip')
+        },
+        on: isHidden ? {} : {
+          mousedown: _vm.sortMousedownEvent,
+          mouseup: _vm.sortMouseupEvent
+        }
+      }, [h('i', {
+        class: getIcon().TABLE_CUSTOM_SORT
+      })]) : h('span', '-')]) : _e(), h('td', {
+        class: 'vxe-table-custom-popup--column-item col--name'
+      }, [column.type === 'html' ? h('div', {
+        key: '1',
+        class: 'vxe-table-custom-popup--name',
+        domProps: {
+          innerHTML: colTitle
+        }
+      }) : h('div', {
+        key: '0',
+        class: 'vxe-table-custom-popup--name',
+        attrs: {
+          title: colTitle
+        }
+      }, colTitle)]), allowResizable ? h('td', {
+        class: 'vxe-table-custom-popup--column-item col--resizable'
+      }, [column.children && column.children.length ? h('span', '-') : h('vxe-input', {
+        props: {
+          type: 'integer',
+          disabled: isHidden,
+          value: column.renderResizeWidth
+        },
+        on: {
+          modelValue: function modelValue(value) {
+            column.renderResizeWidth = Math.max(0, Number(value));
+          }
+        }
+      })]) : _e(), allowFixed ? h('td', {
+        class: 'vxe-table-custom-popup--column-item col--fixed'
+      }, [parent ? h('span', '-') : h('vxe-radio-group', {
+        props: {
+          value: column.renderFixed || '',
+          type: 'button',
+          size: 'mini',
+          disabled: isHidden,
+          options: [{
+            label: getI18n('vxe.custom.setting.fixedLeft'),
+            value: 'left',
+            disabled: isHidden || isMaxFixedColumn
+          }, {
+            label: getI18n('vxe.custom.setting.fixedUnset'),
+            value: '',
+            disabled: isHidden
+          }, {
+            label: getI18n('vxe.custom.setting.fixedRight'),
+            value: 'right',
+            disabled: isHidden || isMaxFixedColumn
+          }]
+        },
+        on: {
+          input: function input(value) {
+            column.renderFixed = value;
+          }
+        }
+      })]) : _e()]));
+    }
+  });
+  var isAllChecked = customStore.isAll;
+  var isAllIndeterminate = customStore.isIndeterminate;
+  return h('vxe-modal', {
+    key: 'modal',
+    props: {
+      className: ['vxe-table-custom-popup-wrapper', 'vxe-table--ignore-clear', modalOpts.className || ''].join(' '),
+      value: customStore.visible,
+      title: modalOpts.title || getI18n('vxe.custom.cstmTitle'),
+      width: modalOpts.width || Math.min(880, document.documentElement.clientWidth),
+      minWidth: modalOpts.minWidth || 700,
+      height: modalOpts.height || Math.min(680, document.documentElement.clientHeight),
+      minHeight: modalOpts.minHeight || 400,
+      showZoom: !!modalOpts.showZoom,
+      mask: !!modalOpts.mask,
+      lockView: !!modalOpts.lockView,
+      resize: !!modalOpts.resize,
+      escClosable: !!modalOpts.escClosable,
+      destroyOnClose: true,
+      showFooter: true
+    },
+    on: {
+      input: function input(value) {
+        customStore.visible = value;
+      }
+    },
+    scopedSlots: {
+      default: function _default() {
+        return h('div', {
+          ref: 'bodyElemRef',
+          class: 'vxe-table-custom-popup--body'
+        }, [h('div', {
+          class: 'vxe-table-custom-popup--table-wrapper'
+        }, [h('table', {}, [h('colgroup', {}, [allowVisible ? h('col', {
+          style: {
+            width: '80px'
+          }
+        }) : _e(), allowSort ? h('col', {
+          style: {
+            width: '80px'
+          }
+        }) : _e(), h('col', {
+          style: {
+            minWidth: '120px'
+          }
+        }), allowResizable ? h('col', {
+          style: {
+            width: '140px'
+          }
+        }) : _e(), allowFixed ? h('col', {
+          style: {
+            width: '200px'
+          }
+        }) : _e()]), h('thead', {}, [h('tr', {}, [allowVisible ? h('th', {}, [h('div', {
+          class: ['vxe-table-custom--checkbox-option', {
+            'is--checked': isAllChecked,
+            'is--indeterminate': isAllIndeterminate
+          }],
+          attrs: {
+            title: getI18n('vxe.table.allTitle')
+          },
+          on: {
+            click: _vm.allOptionEvent
+          }
+        }, [h('span', {
+          class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
+        }), h('span', {
+          class: 'vxe-checkbox--label'
+        }, getI18n('vxe.toolbar.customAll'))])]) : _e(), allowSort ? h('th', {}, [h('span', {
+          class: 'vxe-table-custom-popup--table-sort-help-title'
+        }, getI18n('vxe.custom.setting.colSort')), h('vxe-tooltip', {
+          props: {
+            enterable: true,
+            content: getI18n('vxe.custom.setting.sortHelpTip'),
+            popupClassName: 'vxe-table--ignore-clear'
+          },
+          scopedSlots: {
+            default: function _default() {
+              return h('i', {
+                class: 'vxe-table-custom-popup--table-sort-help-icon vxe-icon-question-circle-fill'
+              });
+            }
+          }
+        })]) : _e(), h('th', {}, getI18n('vxe.custom.setting.colTitle')), allowResizable ? h('th', {}, getI18n('vxe.custom.setting.colResizable')) : _e(), allowFixed ? h('th', {}, getI18n("vxe.custom.setting.".concat(maxFixedSize ? 'colFixedMax' : 'colFixed'), [maxFixedSize])) : _e()])]), h('transition-group', {
+          class: 'vxe-table-custom--body',
+          props: {
+            tag: 'tbody',
+            name: 'vxe-table-custom--list'
+          }
+        }, trVNs)])]), h('div', {
+          ref: 'dragHintElemRef',
+          class: 'vxe-table-custom-popup--drag-hint'
+        }, getI18n('vxe.custom.cstmDragTarget', [_vm.dragColumn ? _vm.dragColumn.getTitle() : '']))]);
+      },
+      footer: function footer() {
+        return h('div', {
+          class: 'vxe-table-custom-popup--footer'
+        }, [h(VxeUIButtonComponent, {
+          props: {
+            content: customOpts.resetButtonText || getI18n('vxe.custom.cstmRestore')
+          },
+          on: {
+            click: _vm.resetCustomEvent
+          }
+        }), h(VxeUIButtonComponent, {
+          props: {
+            content: customOpts.resetButtonText || getI18n('vxe.custom.cstmCancel')
+          },
+          on: {
+            click: _vm.cancelCustomEvent
+          }
+        }), h(VxeUIButtonComponent, {
+          props: {
+            status: 'primary',
+            content: customOpts.confirmButtonText || getI18n('vxe.custom.cstmConfirm')
+          },
+          on: {
+            click: _vm.confirmCustomEvent
+          }
+        })]);
+      }
+    }
+  });
+};
+var _default2 = exports.default = {
+  name: 'VxeTableCustomPanel',
+  props: {
+    customStore: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    }
+  },
+  inject: {
+    $xetable: {
+      default: null
+    }
+  },
+  data: function data() {
+    return {
+      dragColumn: null
+    };
+  },
+  computed: {},
+  created: function created() {
+    var _this = this;
+    if (process.env.NODE_ENV === 'development') {
+      var VxeUIModalComponent = _ui.VxeUI.getComponent('VxeModal');
+      var VxeUIDrawerComponent = _ui.VxeUI.getComponent('VxeDrawer');
+      var VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
+      var VxeUIInputComponent = _ui.VxeUI.getComponent('VxeInput');
+      var VxeUITooltipComponent = _ui.VxeUI.getComponent('VxeTooltip');
+      var VxeUIRadioGroupComponent = _ui.VxeUI.getComponent('VxeRadioGroup');
+      this.$nextTick(function () {
+        var $xetable = _this.$xetable;
+        var customOpts = $xetable.customOpts;
+        var mode = customOpts.mode;
+        if (!VxeUIModalComponent) {
+          (0, _log.errLog)('vxe.error.reqComp', ['vxe-modal']);
+        }
+        if (!VxeUIDrawerComponent && mode === 'drawer') {
+          (0, _log.errLog)('vxe.error.reqComp', ['vxe-drawer']);
+        }
+        if (!VxeUIButtonComponent) {
+          (0, _log.errLog)('vxe.error.reqComp', ['vxe-button']);
+        }
+        if (!VxeUIInputComponent) {
+          (0, _log.errLog)('vxe.error.reqComp', ['vxe-input']);
+        }
+        if (!VxeUITooltipComponent) {
+          (0, _log.errLog)('vxe.error.reqComp', ['vxe-tooltip']);
+        }
+        if (!VxeUIRadioGroupComponent) {
+          (0, _log.errLog)('vxe.error.reqComp', ['vxe-radio-group']);
+        }
+      });
+    }
+  },
+  render: function render(h) {
+    var $xetable = this.$xetable;
+    var customOpts = $xetable.customOpts;
+    if (['modal', 'popup'].includes("".concat(customOpts.mode))) {
+      return renderPopupPanel(h, this);
+    }
+    return renderSimplePanel(h, this);
+  },
+  methods: {
+    handleWrapperMouseenterEvent: function handleWrapperMouseenterEvent(evnt) {
+      var $xetable = this.$xetable,
+        customStore = this.customStore;
+      customStore.activeWrapper = true;
+      $xetable.customOpenEvent(evnt);
+    },
+    handleWrapperMouseleaveEvent: function handleWrapperMouseleaveEvent(evnt) {
+      var $xetable = this.$xetable,
+        customStore = this.customStore;
+      customStore.activeWrapper = false;
+      setTimeout(function () {
+        if (!customStore.activeBtn && !customStore.activeWrapper) {
+          $xetable.customColseEvent(evnt);
+        }
+      }, 300);
+    },
+    getStoreData: function getStoreData() {
+      return {};
+    },
+    confirmCustomEvent: function confirmCustomEvent(evnt) {
+      var $xetable = this.$xetable;
+      var customOpts = $xetable.customOpts,
+        customColumnList = $xetable.customColumnList;
+      var allowVisible = customOpts.allowVisible,
+        allowSort = customOpts.allowSort,
+        allowFixed = customOpts.allowFixed,
+        allowResizable = customOpts.allowResizable;
+      _xeUtils.default.eachTree(customColumnList, function (column, index, items, path, parent) {
+        if (parent) {
+          // 更新子列信息
+          column.fixed = parent.fixed;
+        } else {
+          if (allowSort) {
+            var sortIndex = index + 1;
+            column.renderSortNumber = sortIndex;
+          }
+          if (allowFixed) {
+            column.fixed = column.renderFixed;
+          }
+        }
+        if (allowResizable) {
+          if (column.renderVisible && (!column.children || column.children.length)) {
+            if (column.renderResizeWidth !== column.renderWidth) {
+              column.resizeWidth = column.renderResizeWidth;
+              column.renderWidth = column.renderResizeWidth;
+            }
+          }
+        }
+        if (allowVisible) {
+          column.visible = column.renderVisible;
+        }
+      });
+      $xetable.closeCustom();
+      $xetable.emitCustomEvent('confirm', evnt);
+      $xetable.saveCustomStore('confirm');
+    },
+    cancelCloseEvent: function cancelCloseEvent(_ref) {
+      var $event = _ref.$event;
+      var $xetable = this.$xetable;
+      $xetable.closeCustom();
+      $xetable.emitCustomEvent('cancel', $event);
+    },
+    cancelCustomEvent: function cancelCustomEvent(evnt) {
+      var $xetable = this.$xetable;
+      var customStore = $xetable.customStore,
+        customOpts = $xetable.customOpts,
+        customColumnList = $xetable.customColumnList;
+      var oldSortMaps = customStore.oldSortMaps,
+        oldFixedMaps = customStore.oldFixedMaps,
+        oldVisibleMaps = customStore.oldVisibleMaps;
+      var allowVisible = customOpts.allowVisible,
+        allowSort = customOpts.allowSort,
+        allowFixed = customOpts.allowFixed,
+        allowResizable = customOpts.allowResizable;
+      _xeUtils.default.eachTree(customColumnList, function (column) {
+        var colid = column.getKey();
+        var visible = !!oldVisibleMaps[colid];
+        var fixed = oldFixedMaps[colid] || '';
+        if (allowVisible) {
+          column.renderVisible = visible;
+          column.visible = visible;
+        }
+        if (allowFixed) {
+          column.renderFixed = fixed;
+          column.fixed = fixed;
+        }
+        if (allowSort) {
+          column.renderSortNumber = oldSortMaps[colid] || 0;
+        }
+        if (allowResizable) {
+          column.renderResizeWidth = column.renderWidth;
+        }
+      }, {
+        children: 'children'
+      });
+      $xetable.closeCustom();
+      $xetable.emitCustomEvent('cancel', evnt);
+    },
+    handleResetCustomEvent: function handleResetCustomEvent(evnt) {
+      var $xetable = this.$xetable;
+      $xetable.resetColumn(true);
+      $xetable.closeCustom();
+      $xetable.emitCustomEvent('reset', evnt);
+    },
+    resetCustomEvent: function resetCustomEvent(evnt) {
+      var _this2 = this;
+      if (_ui.VxeUI.modal) {
+        _ui.VxeUI.modal.confirm({
+          content: getI18n('vxe.custom.cstmConfirmRestore'),
+          className: 'vxe-table--ignore-clear',
+          escClosable: true
+        }).then(function (type) {
+          if (type === 'confirm') {
+            _this2.handleResetCustomEvent(evnt);
+          }
+        });
+      } else {
+        this.handleResetCustomEvent(evnt);
+      }
+    },
+    resetPopupCustomEvent: function resetPopupCustomEvent(evnt) {
+      var _this3 = this;
+      if (_ui.VxeUI.modal) {
+        _ui.VxeUI.modal.confirm({
+          content: getI18n('vxe.custom.cstmConfirmRestore'),
+          className: 'vxe-table--ignore-clear',
+          escClosable: true
+        }).then(function (type) {
+          if (type === 'confirm') {
+            _this3.resetCustomEvent(evnt);
+          }
+        });
+      } else {
+        this.resetCustomEvent(evnt);
+      }
+    },
+    handleOptionCheck: function handleOptionCheck(column) {
+      var $xetable = this.$xetable;
+      var customColumnList = $xetable.customColumnList;
+      var matchObj = _xeUtils.default.findTree(customColumnList, function (item) {
+        return item === column;
+      });
+      if (matchObj && matchObj.parent) {
+        var parent = matchObj.parent;
+        if (parent.children && parent.children.length) {
+          parent.visible = parent.children.every(function (column) {
+            return column.visible;
+          });
+          parent.halfVisible = !parent.visible && parent.children.some(function (column) {
+            return column.visible || column.halfVisible;
+          });
+          this.handleOptionCheck(parent);
+        }
+      }
+    },
+    changeCheckboxOption: function changeCheckboxOption(column) {
+      var $xetable = this.$xetable;
+      var customOpts = $xetable.customOpts;
+      var isChecked = !column.renderVisible;
+      if (customOpts.immediate) {
+        _xeUtils.default.eachTree([column], function (item) {
+          item.visible = isChecked;
+          item.renderVisible = isChecked;
+          item.halfVisible = false;
+        });
+        $xetable.handleCustom();
+        $xetable.saveCustomStore('update:visible');
+      } else {
+        _xeUtils.default.eachTree([column], function (item) {
+          item.renderVisible = isChecked;
+          item.halfVisible = false;
+        });
+      }
+      this.handleOptionCheck(column);
+      $xetable.checkCustomStatus();
+    },
+    changeFixedOption: function changeFixedOption(column, colFixed) {
+      var $xetable = this.$xetable;
+      var isMaxFixedColumn = $xetable.isMaxFixedColumn,
+        customOpts = $xetable.customOpts;
+      if (customOpts.immediate) {
+        if (column.renderFixed === colFixed) {
+          _xeUtils.default.eachTree([column], function (col) {
+            col.fixed = '';
+            col.renderFixed = '';
+          });
+        } else {
+          if (!isMaxFixedColumn || column.renderFixed) {
+            _xeUtils.default.eachTree([column], function (col) {
+              col.fixed = colFixed;
+              col.renderFixed = colFixed;
+            });
+          }
+        }
+        $xetable.handleCustom();
+        $xetable.saveCustomStore('update:fixed');
+      } else {
+        if (column.renderFixed === colFixed) {
+          _xeUtils.default.eachTree([column], function (col) {
+            col.renderFixed = '';
+          });
+        } else {
+          if (!isMaxFixedColumn || column.renderFixed) {
+            _xeUtils.default.eachTree([column], function (col) {
+              col.renderFixed = colFixed;
+            });
+          }
+        }
+      }
+    },
+    allOptionEvent: function allOptionEvent() {
+      var $xetable = this.$xetable,
+        customStore = this.customStore;
+      var customColumnList = $xetable.customColumnList,
+        customOpts = $xetable.customOpts;
+      var checkMethod = customOpts.checkMethod;
+      var isAll = !customStore.isAll;
+      if (customOpts.immediate) {
+        _xeUtils.default.eachTree(customColumnList, function (column) {
+          if (!checkMethod || checkMethod({
+            column: column
+          })) {
+            column.visible = isAll;
+            column.renderVisible = isAll;
+            column.halfVisible = false;
+          }
+        });
+        customStore.isAll = isAll;
+        $xetable.handleCustom();
+        $xetable.saveCustomStore('update:visible');
+      } else {
+        _xeUtils.default.eachTree(customColumnList, function (column) {
+          if (!checkMethod || checkMethod({
+            column: column
+          })) {
+            column.renderVisible = isAll;
+            column.halfVisible = false;
+          }
+        });
+        customStore.isAll = isAll;
+      }
+      $xetable.checkCustomStatus();
+    },
+    sortMousedownEvent: function sortMousedownEvent(evnt) {
+      var $xetable = this.$xetable;
+      var btnEl = evnt.currentTarget;
+      var tdEl = btnEl.parentNode;
+      var trEl = tdEl.parentNode;
+      var colid = trEl.getAttribute('colid');
+      var column = $xetable.getColumnById(colid);
+      trEl.draggable = true;
+      this.dragColumn = column;
+      (0, _dom.addClass)(trEl, 'active--drag-origin');
+    },
+    sortMouseupEvent: function sortMouseupEvent(evnt) {
+      var btnEl = evnt.currentTarget;
+      var tdEl = btnEl.parentNode;
+      var trEl = tdEl.parentNode;
+      var dragHintEl = this.$refs.dragHintElemRef;
+      trEl.draggable = false;
+      this.dragColumn = null;
+      (0, _dom.removeClass)(trEl, 'active--drag-origin');
+      if (dragHintEl) {
+        dragHintEl.style.display = '';
+      }
+    },
+    sortDragstartEvent: function sortDragstartEvent(evnt) {
+      var img = new Image();
+      if (evnt.dataTransfer) {
+        evnt.dataTransfer.setDragImage(img, 0, 0);
+      }
+    },
+    sortDragendEvent: function sortDragendEvent(evnt) {
+      var $xetable = this.$xetable,
+        prevDropTrEl = this.prevDropTrEl;
+      var customColumnList = $xetable.customColumnList,
+        customOpts = $xetable.customOpts;
+      var trEl = evnt.currentTarget;
+      var dragHintEl = this.$refs.dragHintElemRef;
+      if (prevDropTrEl) {
+        // 判断是否有拖动
+        if (prevDropTrEl !== trEl) {
+          var dragOffset = prevDropTrEl.getAttribute('drag-pos');
+          var colid = trEl.getAttribute('colid');
+          var column = $xetable.getColumnById(colid);
+          if (!column) {
+            return;
+          }
+          var cIndex = _xeUtils.default.findIndexOf(customColumnList, function (item) {
+            return item.id === column.id;
+          });
+          var targetColid = prevDropTrEl.getAttribute('colid');
+          var targetColumn = $xetable.getColumnById(targetColid);
+          if (!targetColumn) {
+            return;
+          }
+          // 移出源位置
+          customColumnList.splice(cIndex, 1);
+          var tcIndex = _xeUtils.default.findIndexOf(customColumnList, function (item) {
+            return item.id === targetColumn.id;
+          });
+          // 插新位置
+          customColumnList.splice(tcIndex + (dragOffset === 'bottom' ? 1 : 0), 0, column);
+        }
+        prevDropTrEl.draggable = false;
+        prevDropTrEl.removeAttribute('drag-pos');
+        (0, _dom.removeClass)(prevDropTrEl, 'active--drag-target');
+      }
+      this.dragColumn = null;
+      trEl.draggable = false;
+      trEl.removeAttribute('drag-pos');
+      if (dragHintEl) {
+        dragHintEl.style.display = '';
+      }
+      (0, _dom.removeClass)(trEl, 'active--drag-target');
+      (0, _dom.removeClass)(trEl, 'active--drag-origin');
+      if (customOpts.immediate) {
+        _xeUtils.default.eachTree(customColumnList, function (column, index, items, path, parent) {
+          if (!parent) {
+            var sortIndex = index + 1;
+            column.renderSortNumber = sortIndex;
+          }
+        });
+        $xetable.handleCustom();
+        $xetable.saveCustomStore('update:sort');
+      }
+    },
+    sortDragoverEvent: function sortDragoverEvent(evnt) {
+      var $xetable = this.$xetable,
+        prevDropTrEl = this.prevDropTrEl;
+      var trEl = evnt.currentTarget;
+      if (prevDropTrEl !== trEl) {
+        (0, _dom.removeClass)(prevDropTrEl, 'active--drag-target');
+      }
+      var colid = trEl.getAttribute('colid');
+      var column = $xetable.getColumnById(colid);
+      // 是否移入有效元行
+      if (column && column.level === 1) {
+        evnt.preventDefault();
+        var offsetY = evnt.clientY - trEl.getBoundingClientRect().y;
+        var dragOffset = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom';
+        (0, _dom.addClass)(trEl, 'active--drag-target');
+        trEl.setAttribute('drag-pos', dragOffset);
+        this.prevDropTrEl = trEl;
+      }
+      updateDropHint(this, evnt);
+    }
+  }
+};