@opentinyvue/vue-grid-toolbar 2.21.0

package/lib/index.js

@@ -0,0 +1,4037 @@
+import { isNumber } from '@opentinyvue/vue-renderless/common/type';
+import { IconSave, IconEdit, IconDel, IconEyeopen, IconEyeclose, IconUnlock, IconLeftFrozen, IconRightFrozen, IconLock, IconMinus, IconDescending, IconAscending, IconClose, IconChevronRight, iconFullscreen, iconMinscreen } from '@opentinyvue/vue-icon';
+import { defineComponent, $props, appProperties, directive, useDefer, isVue2, $prefix, hooks, h } from '@opentinyvue/vue-common';
+import { find as find$1, toStringJSON, toJSONString, isPlainObject, isEmpty } from '@opentinyvue/vue-renderless/grid/static/';
+import { GlobalEvent, getListeners, getEventTargetNode, emitEvent, getFuncText } from '@opentinyvue/vue-renderless/grid/utils';
+import Button from '@opentinyvue/vue-button';
+import Modal from '@opentinyvue/vue-modal';
+import { t } from '@opentinyvue/vue-locale';
+import Grid, { GridTools, GridRadio, GridColumn, GridConfig, GridAdapter } from '@opentinyvue/vue-grid';
+import { find, isNull, arrayEach, mapTree, isArray } from '@opentinyvue/vue-renderless/grid/static';
+import Select from '@opentinyvue/vue-select';
+import Alert from '@opentinyvue/vue-alert';
+import Tabs from '@opentinyvue/vue-tabs';
+import TabItem from '@opentinyvue/vue-tab-item';
+import Option from '@opentinyvue/vue-option';
+import Input from '@opentinyvue/vue-input';
+import Layout from '@opentinyvue/vue-layout';
+import Row from '@opentinyvue/vue-row';
+import Col from '@opentinyvue/vue-col';
+import DialogBox from '@opentinyvue/vue-dialog-box';
+import Popover from '@opentinyvue/vue-popover';
+import Radio from '@opentinyvue/vue-radio';
+import { format } from '@opentinyvue/vue-renderless/common/date';
+import { extend } from '@opentinyvue/vue-renderless/common/object';
+import Tree from '@opentinyvue/vue-tree';
+import Split from '@opentinyvue/vue-split';
+import Checkbox from '@opentinyvue/vue-checkbox';
+import CheckboxGroup from '@opentinyvue/vue-checkbox-group';
+import RadioGroup from '@opentinyvue/vue-radio-group';
+import Search from '@opentinyvue/vue-search';
+import Dropdown from '@opentinyvue/vue-dropdown';
+import DropdownMenu from '@opentinyvue/vue-dropdown-menu';
+import DropdownItem from '@opentinyvue/vue-dropdown-item';
+import Tooltip from '@opentinyvue/vue-tooltip';
+import Clickoutside from '@opentinyvue/vue-renderless/common/deps/clickoutside';
+import '@opentinyvue/vue-theme/grid-toolbar/index.css';
+
+function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render) {
+    options.render = render;
+    options.staticRenderFns = staticRenderFns;
+    options._compiled = true;
+  }
+  var hook;
+  if (injectStyles) {
+    hook = injectStyles;
+  }
+  if (hook) {
+    if (options.functional) {
+      options._injectStyles = hook;
+      var originalRender = options.render;
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+
+var _excluded2 = ["property"], _excluded3 = ["property"];
+function _objectWithoutPropertiesLoose2(r, e) {
+  if (null == r) return {};
+  var t2 = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (e.includes(n)) continue;
+    t2[n] = r[n];
+  }
+  return t2;
+}
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t2 = arguments[e];
+      for (var r in t2) ({}).hasOwnProperty.call(t2, r) && (n[r] = t2[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function getStorage(storageKey, storageType, remoteMethod) {
+  return new Promise(function(resolve, reject) {
+    if (storageType === "local") {
+      var valueString = localStorage.getItem(storageKey);
+      var valueObj = toStringJSON(valueString);
+      resolve(valueObj);
+    } else if (storageType === "remote") {
+      remoteMethod().then(function(remoteString) {
+        var remoteObj = toStringJSON(remoteString);
+        remoteObj = remoteObj && remoteObj[storageKey] || null;
+        resolve(remoteObj);
+      }).catch(reject);
+    }
+  });
+}
+function setStorage(storageKey, valueObj, storageType, vm, eventName) {
+  if (storageType === "local") {
+    var valueString = toJSONString(valueObj);
+    localStorage.setItem(storageKey, valueString);
+  } else if (storageType === "remote") {
+    var _toJSONString;
+    var remoteString = toJSONString((_toJSONString = {}, _toJSONString[storageKey] = valueObj, _toJSONString));
+    vm.$emit(eventName, remoteString);
+  }
+}
+function generateId() {
+  var now = /* @__PURE__ */ new Date();
+  var suf = /GMT[-+]\d+/.exec(now.toString())[0].replace(/\+/, "E").replace(/-/, "W").replace(/0/g, "");
+  var name = format(now, "yyyy-MM-dd hh:mm:ss.SSS");
+  return {
+    id: now.getTime() + suf,
+    name
+  };
+}
+function createCustom(setting, userKey) {
+  var _generateId = generateId(), id = _generateId.id, name = _generateId.name;
+  return {
+    id,
+    name,
+    userKey,
+    setting: {
+      custom: setting
+    }
+  };
+}
+function mergeArray(toArr, fromArr) {
+  var result = [];
+  for (var i = 0; i < fromArr.length; i++) {
+    var fromItem = _extends({
+      order: null,
+      fixed: null,
+      visible: true,
+      sortable: false
+    }, fromArr[i]);
+    var toItem = void 0;
+    for (var j = 0; j < toArr.length; j++) {
+      if (fromItem.property === toArr[j].property) {
+        toItem = _extends({}, toArr[j]);
+        if (fromArr[i].children && toArr[j].children) {
+          fromItem.children = mergeArray(toArr[j].children, fromArr[i].children);
+        }
+        break;
+      }
+    }
+    result.push(extend(true, {}, toItem || {}, fromItem));
+  }
+  return result;
+}
+var __vue2_script$3 = defineComponent({
+  name: "TinyGridCustomSwitch",
+  components: {
+    TinyButton: Button,
+    TinySelect: Select,
+    TinyInput: Input,
+    TinyLayout: Layout,
+    TinyRow: Row,
+    TinyCol: Col,
+    TinyAlert: Alert,
+    TinyRadio: Radio,
+    TinyPopover: Popover,
+    TinyDialogBox: DialogBox
+  },
+  inject: {
+    $grid: {
+      default: null
+    }
+  },
+  emits: ["init-storage"],
+  props: _extends({}, $props, {
+    customMode: String,
+    selectedTemplateVal: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
+    historyConfig: {
+      type: Object,
+      default: function _default2() {
+        return {};
+      }
+    },
+    remote: {
+      type: Boolean,
+      default: false
+    }
+  }),
+  data: function data() {
+    return {
+      IconSave: IconSave(),
+      IconEdit: IconEdit(),
+      IconDel: IconDel(),
+      saveDisabled: true,
+      selectDisabled: true,
+      applyDisabled: true,
+      editDisabled: true,
+      delDisabled: true,
+      options: [],
+      option: null,
+      selected: null,
+      selectedName: null,
+      visible: false,
+      userKey: null,
+      status: null,
+      editName: null,
+      selectedTemplateName: "",
+      savedTemplateName: "",
+      templateVisible: false,
+      saveMethod: "save"
+    };
+  },
+  computed: {
+    dialogTitle: function dialogTitle() {
+      return this.status === "apply" ? this.t("ui.grid.individuation.switchapply") : this.status === "edit" ? this.t("ui.grid.individuation.switchedit") : this.status === "del" ? this.t("ui.grid.individuation.switchdel") : this.t("ui.grid.individuation.switchconfirm");
+    }
+  },
+  watch: {
+    templateVisible: function templateVisible(val) {
+      val && (this.savedTemplateName = "");
+    },
+    selectedTemplateVal: {
+      handler: function handler() {
+        this.selectedTemplateName = this.selectedTemplateVal.name || "";
+        this.saveMethod = this.selectedTemplateVal.id && !this.historyConfig.hideOverwrite ? "overwrite" : "save";
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  created: function created() {
+    this.setUserKey();
+    this.initStorage(true);
+  },
+  methods: {
+    t,
+    handleSave: function handleSave() {
+      this.status = "save";
+      this.visible = true;
+    },
+    initStorage: function initStorage(isInit) {
+      var _this = this;
+      var _this$$grid$getVm = this.$grid.getVm("toolbar"), _this$$grid$getVm$set = _this$$grid$getVm.settingOpts, storageType = _this$$grid$getVm$set.storage, storageKey = _this$$grid$getVm$set.storageKey, toolbarId = _this$$grid$getVm.id;
+      if (!this.doCheck({
+        storageType
+      })) return;
+      getStorage(this.historyConfig.storageKey, storageType, this.historyConfig.remoteMethod).then(function(storeObj) {
+        var optionArr = (storeObj || {})[toolbarId] || [];
+        _this.options = optionArr.filter(function(opt) {
+          return _this.userKey ? opt.userKey === _this.userKey : true;
+        });
+        _this.$emit("init-storage", _this.options);
+        if (isInit) {
+          getStorage(storageKey, storageType, _this.historyConfig.remoteSelectedMethod).then(function(storeObj2) {
+            _this.option = (storeObj2 || {})[toolbarId] || {};
+            _this.enableAll();
+            _this.setSelected();
+          });
+        }
+      });
+    },
+    handleSaveConfirm: function handleSaveConfirm(flag, hideTip) {
+      var _this2 = this;
+      if (flag === "overwrite") {
+        if (this.customMode === "saas" && !this.selectedTemplateVal.id || this.customMode !== "saas" && !this.selected) {
+          return;
+        }
+      }
+      var toolbarVm = this.$grid.getVm("toolbar");
+      var customVm = toolbarVm.$refs.custom;
+      customVm.updatedSorting = true;
+      var item = createCustom(customVm.buildSettings(), this.userKey);
+      item = JSON.parse(JSON.stringify(item));
+      var toolbarId = toolbarVm.id;
+      var business = function business2(storeObj) {
+        storeObj = storeObj || {};
+        var optionArr = storeObj[toolbarId] || [];
+        if (flag === "save" || flag === "save-apply") {
+          if (flag === "save" && _this2.savedTemplateName) {
+            item.name = _this2.savedTemplateName;
+          }
+          _this2.options.push(item);
+          !_this2.remote && _this2.$emit("init-storage", _this2.options);
+          optionArr.unshift(item);
+        } else if (flag === "overwrite") {
+          var index, customId, customName;
+          var selectedId = _this2.customMode === "saas" ? _this2.selectedTemplateVal.id : _this2.selected;
+          var selectedName = _this2.customMode === "saas" ? _this2.selectedTemplateVal.name : _this2.selectedName;
+          for (var i = 0; i < optionArr.length; i++) {
+            if (optionArr[i].id === selectedId) {
+              index = i;
+              customId = selectedId;
+              customName = selectedName;
+              break;
+            }
+          }
+          item.id = customId;
+          item.name = _this2.selectedTemplateName || customName;
+          optionArr.splice(index, 1, item);
+          if (_this2.selectedTemplateName && !_this2.remote) {
+            _this2.$emit("init-storage", optionArr);
+          }
+        }
+        storeObj[toolbarId] = optionArr;
+        return storeObj;
+      };
+      var postOperate = function postOperate2() {
+        if (flag === "save-apply" || flag === "overwrite") {
+          customVm.multipleHistoryId = item.id;
+          _this2.customMode !== "saas" && customVm.saveSettings(false);
+        }
+        _this2.visible = false;
+        _this2.status = "";
+      };
+      this.templateVisible = false;
+      this.doStorage(business, postOperate);
+      if (!this.historyConfig.hideSuccessTip && !hideTip) {
+        Modal.message({
+          message: t("ui.grid.saveSuccess"),
+          status: "success"
+        });
+      }
+    },
+    handleApply: function handleApply() {
+      if (this.historyConfig.applyDisabled || this.applyDisabled || !this.selected || this.option.id === this.selected) {
+        return;
+      }
+      this.status = "apply";
+      this.visible = true;
+    },
+    handleApplyConfirm: function handleApplyConfirm(flag) {
+      var _this3 = this;
+      if (flag === "yes") {
+        var toolbarVm = this.$grid.getVm("toolbar");
+        var toolbarId = toolbarVm.id;
+        var customVm = toolbarVm.$refs.custom;
+        var customId;
+        var noStore = true;
+        var business = function business2(storeObj) {
+          storeObj = storeObj || {};
+          var optionArr = storeObj[toolbarId] || [];
+          var selected = optionArr.find(function(opt) {
+            return opt.id === _this3.selected;
+          });
+          if (selected) {
+            delete selected.setting.custom.id;
+            customVm.columns = mergeArray(customVm.columns, selected.setting.custom.columns);
+            customVm.settings.pageSize = selected.setting.custom.pageSize;
+            customVm.settings.sortType = selected.setting.custom.sortType;
+            customId = selected.id;
+          }
+          storeObj[toolbarId] = optionArr;
+          return storeObj;
+        };
+        var postOperate = function postOperate2() {
+          customVm.multipleHistoryId = customId;
+          customVm.saveSettings();
+          _this3.visible = false;
+          _this3.status = "";
+        };
+        this.doStorage(business, postOperate, noStore);
+      }
+      this.visible = false;
+      this.status = "";
+    },
+    handleEdit: function handleEdit() {
+      if (this.historyConfig.editDisabled || this.editDisabled || !this.selected) {
+        return;
+      }
+      this.editName = this.selectedName;
+      this.status = "edit";
+      this.visible = true;
+    },
+    handleEditConfirm: function handleEditConfirm(flag) {
+      var _this4 = this;
+      if (flag === "yes") {
+        if (!this.editName) return;
+        var _this$$grid$getVm2 = this.$grid.getVm("toolbar"), toolbarId = _this$$grid$getVm2.id;
+        var business = function business2(storeObj) {
+          storeObj = storeObj || {};
+          var optionArr = storeObj[toolbarId] || [];
+          var selected = optionArr.find(function(opt) {
+            return opt.id === _this4.selected;
+          });
+          selected && (selected.name = _this4.editName);
+          storeObj[toolbarId] = optionArr;
+          return storeObj;
+        };
+        var postOperate = function postOperate2() {
+          _this4.setSelected();
+          _this4.visible = false;
+          _this4.status = "";
+          _this4.editName = null;
+        };
+        this.doStorage(business, postOperate);
+      }
+      if (flag === "no") {
+        this.visible = false;
+        this.status = "";
+        this.editName = null;
+      }
+    },
+    handleDel: function handleDel() {
+      if (this.historyConfig.delDisabled || this.delDisabled || !this.selected) {
+        return;
+      }
+      this.status = "del";
+      this.visible = true;
+    },
+    handleDelConfirm: function handleDelConfirm(flag, selected) {
+      var _this5 = this;
+      if (flag === "yes") {
+        var _this$$grid$getVm3 = this.$grid.getVm("toolbar"), toolbarId = _this$$grid$getVm3.id;
+        var business = function business2(storeObj) {
+          storeObj = storeObj || {};
+          var optionArr = storeObj[toolbarId] || [];
+          var selectedId = selected ? selected.id : _this5.selected;
+          optionArr = optionArr.filter(function(opt) {
+            return opt.id !== selectedId;
+          });
+          storeObj[toolbarId] = optionArr;
+          return storeObj;
+        };
+        var postOperate = function postOperate2() {
+          _this5.setSelected();
+          _this5.visible = false;
+          _this5.status = "";
+          if (!_this5.remote) {
+            _this5.$emit("init-storage", _this5.options);
+          }
+        };
+        this.doStorage(business, postOperate);
+      }
+      if (flag === "no") {
+        this.visible = false;
+        this.status = "";
+      }
+    },
+    doStorage: function doStorage(business, postOperate, noStore) {
+      var _this6 = this;
+      if (noStore === void 0) {
+        noStore = false;
+      }
+      var toolbarVm = this.$grid.getVm("toolbar");
+      var storageType = toolbarVm.settingOpts.storage, toolbarId = toolbarVm.id;
+      getStorage(this.historyConfig.storageKey, storageType, this.historyConfig.remoteMethod).then(function(storeObj) {
+        storeObj = business(storeObj);
+        if (!noStore) {
+          setStorage(_this6.historyConfig.storageKey, storeObj, storageType, toolbarVm, "multiple-history");
+          _this6.options = storeObj[toolbarId].filter(function(opt) {
+            return _this6.userKey ? opt.userKey === _this6.userKey : true;
+          });
+        }
+        setTimeout(postOperate);
+      });
+    },
+    handleSelectChange: function handleSelectChange() {
+      var _this7 = this;
+      if (this.selected) {
+        var item = find(this.options, function(item2) {
+          return item2.id === _this7.selected;
+        });
+        this.selectedName = item ? item.name : null;
+      } else {
+        this.selectedName = null;
+      }
+      this.fixStatus();
+    },
+    doCheck: function doCheck(_ref3) {
+      var storageType = _ref3.storageType;
+      if (storageType === "remote") {
+        if (!this.historyConfig.remoteMethod || typeof this.historyConfig.remoteMethod !== "function") {
+          GridTools.error("ui.grid.error.remoteMethod");
+          return false;
+        }
+        if (!this.historyConfig.remoteSelectedMethod || typeof this.historyConfig.remoteSelectedMethod !== "function") {
+          GridTools.error("ui.grid.error.remoteSelectedMethod");
+          return false;
+        }
+      }
+      return true;
+    },
+    setUserKey: function setUserKey() {
+      this.userKey = ~["userId", "userAccount"].indexOf(this.historyConfig.userKey) ? this.$grid.$service ? this.$grid.$service.base.getEnvInfoSync().user[this.historyConfig.userKey] : null : null;
+    },
+    setSelected: function setSelected() {
+      var _this8 = this;
+      this.selected = this.option ? this.option.id : "";
+      if (this.selected) {
+        var item = find(this.options, function(item2) {
+          return item2.id === _this8.selected;
+        });
+        this.selected = item ? this.selected : null;
+        this.selectedName = item ? item.name : null;
+        this.$emit("set-selected", this.selected);
+      }
+      this.fixStatus();
+    },
+    fixStatus: function fixStatus() {
+      this.applyDisabled = false;
+      this.editDisabled = false;
+      this.delDisabled = false;
+      if (!this.selectedName) {
+        this.editDisabled = true;
+        this.delDisabled = true;
+      }
+      if (!this.selectedName || this.option.id === this.selected) {
+        this.applyDisabled = true;
+      }
+      var toolbarVm = this.$grid.getVm("toolbar");
+      var customVm = toolbarVm.$refs.custom;
+      customVm.saveDisabled = false;
+      if (this.selected) {
+        customVm.saveDisabled = true;
+      }
+    },
+    enableAll: function enableAll() {
+      this.saveDisabled = false;
+      this.selectDisabled = false;
+      this.applyDisabled = false;
+      this.editDisabled = false;
+      this.delDisabled = false;
+    }
+  }
+});
+var render$3 = function render$32() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _vm.customMode === "saas" ? _c("tiny-popover", {
+    ref: "popover",
+    attrs: {
+      "width": "280",
+      "placement": "top",
+      "popper-class": "grid-toolbar-template-popover",
+      "trigger": "manual"
+    },
+    scopedSlots: _vm._u([{
+      key: "reference",
+      fn: function fn() {
+        return [_c("tiny-button", {
+          staticClass: "save-btn",
+          on: {
+            "click": function click($event) {
+              _vm.templateVisible = !_vm.templateVisible;
+            }
+          }
+        }, [_vm._v(_vm._s(_vm.t("ui.grid.individuation.saveTemplate")))])];
+      },
+      proxy: true
+    }], null, false, 3411578796),
+    model: {
+      value: _vm.templateVisible,
+      callback: function callback($$v) {
+        _vm.templateVisible = $$v;
+      },
+      expression: "templateVisible"
+    }
+  }, [_c("div", [_vm.selectedTemplateVal.id && !_vm.historyConfig.hideOverwrite ? _c("div", {
+    staticClass: "radio-box"
+  }, [_c("tiny-radio", {
+    attrs: {
+      "label": "overwrite"
+    },
+    model: {
+      value: _vm.saveMethod,
+      callback: function callback($$v) {
+        _vm.saveMethod = $$v;
+      },
+      expression: "saveMethod"
+    }
+  }, [_vm._v(_vm._s(_vm.t("ui.grid.individuation.overwriteSave")))]), _c("tiny-radio", {
+    attrs: {
+      "label": "save"
+    },
+    model: {
+      value: _vm.saveMethod,
+      callback: function callback($$v) {
+        _vm.saveMethod = $$v;
+      },
+      expression: "saveMethod"
+    }
+  }, [_vm._v(_vm._s(_vm.t("ui.grid.individuation.saveAs")))])], 1) : _vm._e(), _vm.saveMethod === "save" ? _c("tiny-input", {
+    attrs: {
+      "type": "text",
+      "placeholder": _vm.t("ui.grid.individuation.defaultTemplateName")
+    },
+    model: {
+      value: _vm.savedTemplateName,
+      callback: function callback($$v) {
+        _vm.savedTemplateName = $$v;
+      },
+      expression: "savedTemplateName"
+    }
+  }) : _c("tiny-input", {
+    attrs: {
+      "placeholder": _vm.t("ui.grid.individuation.reserveTemplateName"),
+      "type": "text"
+    },
+    model: {
+      value: _vm.selectedTemplateName,
+      callback: function callback($$v) {
+        _vm.selectedTemplateName = $$v;
+      },
+      expression: "selectedTemplateName"
+    }
+  }), _c("div", {
+    staticClass: "btn-box"
+  }, [_c("tiny-button", {
+    on: {
+      "click": function click($event) {
+        _vm.templateVisible = false;
+      }
+    }
+  }, [_vm._v(_vm._s(_vm.t("ui.grid.individuation.cancelBtn")))]), _c("tiny-button", {
+    attrs: {
+      "type": "primary"
+    },
+    on: {
+      "click": function click($event) {
+        return _vm.handleSaveConfirm(_vm.saveMethod);
+      }
+    }
+  }, [_vm._v(_vm._s(_vm.t("ui.grid.individuation.saveBtn")))])], 1)], 1)]) : _c("div", {
+    staticClass: "tiny-grid-custom-switch"
+  }, [_c("tiny-layout", [_c("tiny-row", {
+    attrs: {
+      "no-space": ""
+    }
+  }, [_c("tiny-col", {
+    attrs: {
+      "span": 12
+    }
+  }, [_c("div", {
+    staticClass: "tiny-grid-custom-switch__title"
+  }, [_vm.historyConfig.showTitle ? _c("tiny-alert", {
+    attrs: {
+      "description": _vm.historyConfig.title || _vm.t("ui.grid.individuation.switchtitle"),
+      "closable": false
+    }
+  }) : _vm._e()], 1)])], 1), _c("tiny-row", {
+    attrs: {
+      "no-space": ""
+    }
+  }, [_vm.historyConfig.showSave ? _c("tiny-col", {
+    attrs: {
+      "span": 2
+    }
+  }, [_c("div", [_c("tiny-button", {
+    attrs: {
+      "type": "primary",
+      "size": "mini",
+      "disabled": _vm.historyConfig.saveDisabled || _vm.saveDisabled
+    },
+    on: {
+      "click": _vm.handleSave
+    }
+  }, [_vm._v(_vm._s(_vm.historyConfig.saveText || _vm.t("ui.grid.individuation.switchsave")))])], 1)]) : _vm._e(), _c("tiny-col", {
+    attrs: {
+      "span": 2
+    }
+  }, [_c("div", {
+    staticClass: "tiny-grid-custom-switch__label"
+  }, [_vm._v(" " + _vm._s(_vm.historyConfig.labelText || _vm.t("ui.grid.individuation.switchlabel")) + " ")])]), _c("tiny-col", {
+    attrs: {
+      "span": 5
+    }
+  }, [_c("div", {
+    staticClass: "tiny-grid-custom-switch__content"
+  }, [_c("tiny-select", {
+    ref: "select",
+    attrs: {
+      "clearable": "",
+      "value-field": "id",
+      "text-field": "name",
+      "placeholder": _vm.historyConfig.selectPlaceholder || _vm.t("ui.select.placeholder"),
+      "disabled": _vm.historyConfig.selectDisabled || _vm.selectDisabled,
+      "options": _vm.options
+    },
+    on: {
+      "change": _vm.handleSelectChange
+    },
+    model: {
+      value: _vm.selected,
+      callback: function callback($$v) {
+        _vm.selected = $$v;
+      },
+      expression: "selected"
+    }
+  })], 1)]), _c("tiny-col", {
+    attrs: {
+      "span": 3
+    }
+  }, [_c("div", [_vm.historyConfig.showApply ? _c("span", {
+    staticClass: "tiny-grid-custom-switch__icon-btn",
+    class: {
+      "tiny-grid-custom-switch__icon-btn--disabled": _vm.historyConfig.applyDisabled || _vm.applyDisabled
+    },
+    attrs: {
+      "title": _vm.historyConfig.applyTitle || _vm.t("ui.grid.individuation.switchapply")
+    },
+    on: {
+      "click": _vm.handleApply
+    }
+  }, [_c(_vm.historyConfig.applyIcon || _vm.IconSave, {
+    tag: "component"
+  })], 1) : _vm._e(), _vm.historyConfig.showEdit ? _c("span", {
+    staticClass: "tiny-grid-custom-switch__icon-btn",
+    class: {
+      "tiny-grid-custom-switch__icon-btn--disabled": _vm.historyConfig.editDisabled || _vm.editDisabled
+    },
+    attrs: {
+      "title": _vm.historyConfig.editTitle || _vm.t("ui.grid.individuation.switchedit")
+    },
+    on: {
+      "click": _vm.handleEdit
+    }
+  }, [_c(_vm.historyConfig.editIcon || _vm.IconEdit, {
+    tag: "component"
+  })], 1) : _vm._e(), _vm.historyConfig.showDel ? _c("span", {
+    staticClass: "tiny-grid-custom-switch__icon-btn",
+    class: {
+      "tiny-grid-custom-switch__icon-btn--disabled": _vm.historyConfig.delDisabled || _vm.delDisabled
+    },
+    attrs: {
+      "title": _vm.historyConfig.delTitle || _vm.t("ui.grid.individuation.switchdel")
+    },
+    on: {
+      "click": _vm.handleDel
+    }
+  }, [_c(_vm.historyConfig.delIcon || _vm.IconDel, {
+    tag: "component"
+  })], 1) : _vm._e()])])], 1)], 1), _c("tiny-dialog-box", {
+    attrs: {
+      "top": "30vh",
+      "width": "420px",
+      "dialog-class": "tiny-grid-custom-switch__dialog-box",
+      "draggable": "",
+      "append-to-body": "",
+      "visible": _vm.visible,
+      "close-on-click-modal": false,
+      "title": _vm.dialogTitle
+    },
+    on: {
+      "update:visible": function updateVisible($event) {
+        _vm.visible = $event;
+      }
+    },
+    scopedSlots: _vm._u([{
+      key: "footer",
+      fn: function fn() {
+        return [~["apply", "edit", "del"].indexOf(_vm.status) ? [_vm.status === "apply" ? [_c("tiny-button", {
+          attrs: {
+            "type": "primary"
+          },
+          on: {
+            "click": function click($event) {
+              return _vm.handleApplyConfirm("yes");
+            }
+          }
+        }, [_vm._v(" " + _vm._s(_vm.t("ui.grid.individuation.switchdelyes")) + " ")]), _c("tiny-button", {
+          on: {
+            "click": function click($event) {
+              return _vm.handleApplyConfirm("no");
+            }
+          }
+        }, [_vm._v(_vm._s(_vm.t("ui.grid.individuation.switchdelno")))])] : _vm._e(), _vm.status === "edit" ? [_c("tiny-button", {
+          attrs: {
+            "type": "primary",
+            "disabled": !_vm.editName
+          },
+          on: {
+            "click": function click($event) {
+              return _vm.handleEditConfirm("yes");
+            }
+          }
+        }, [_vm._v(" " + _vm._s(_vm.t("ui.grid.individuation.switchdelyes")) + " ")]), _c("tiny-button", {
+          on: {
+            "click": function click($event) {
+              return _vm.handleEditConfirm("no");
+            }
+          }
+        }, [_vm._v(_vm._s(_vm.t("ui.grid.individuation.switchdelno")))])] : _vm._e(), _vm.status === "del" ? [_c("tiny-button", {
+          attrs: {
+            "type": "primary"
+          },
+          on: {
+            "click": function click($event) {
+              return _vm.handleDelConfirm("yes");
+            }
+          }
+        }, [_vm._v(" " + _vm._s(_vm.t("ui.grid.individuation.switchdelyes")) + " ")]), _c("tiny-button", {
+          on: {
+            "click": function click($event) {
+              return _vm.handleDelConfirm("no");
+            }
+          }
+        }, [_vm._v(_vm._s(_vm.t("ui.grid.individuation.switchdelno")))])] : _vm._e()] : _vm._e()];
+      },
+      proxy: true
+    }])
+  }, [_vm.status === "save" ? _c("div", {
+    staticClass: "tiny-grid-custom-switch__confirm-btns"
+  }, [_c("tiny-button", {
+    attrs: {
+      "type": "primary"
+    },
+    on: {
+      "click": function click($event) {
+        return _vm.handleSaveConfirm("save");
+      }
+    }
+  }, [_vm._v(" " + _vm._s(_vm.t("ui.grid.individuation.switchonlytemp")) + " ")]), _c("tiny-button", {
+    on: {
+      "click": function click($event) {
+        return _vm.handleSaveConfirm("save-apply");
+      }
+    }
+  }, [_vm._v(" " + _vm._s(_vm.t("ui.grid.individuation.switchtempapply")) + " ")]), _c("tiny-button", {
+    attrs: {
+      "disabled": !_vm.selected
+    },
+    on: {
+      "click": function click($event) {
+        return _vm.handleSaveConfirm("overwrite");
+      }
+    }
+  }, [_vm._v(" " + _vm._s(_vm.t("ui.grid.individuation.switchtempoverwrite")) + " ")])], 1) : _vm._e(), _vm.status === "apply" ? [_c("div", {
+    staticClass: "tiny-grid-custom-switch__del-tip"
+  }, [_vm._v(_vm._s(_vm.selectedName))]), _c("div", {
+    staticClass: "tiny-grid-custom-switch__del-tip"
+  }, [_vm._v(" " + _vm._s(_vm.t("ui.grid.individuation.switchapplycon")) + " ")])] : _vm._e(), _vm.status === "edit" ? [_c("tiny-input", {
+    model: {
+      value: _vm.editName,
+      callback: function callback($$v) {
+        _vm.editName = $$v;
+      },
+      expression: "editName"
+    }
+  })] : _vm._e(), _vm.status === "del" ? [_c("div", {
+    staticClass: "tiny-grid-custom-switch__del-tip"
+  }, [_vm._v(_vm._s(_vm.selectedName))]), _c("div", {
+    staticClass: "tiny-grid-custom-switch__del-tip"
+  }, [_vm._v(" " + _vm._s(_vm.t("ui.grid.individuation.switchdelcon")) + " ")])] : _vm._e()], 2)], 1);
+};
+var staticRenderFns$3 = [];
+var __cssModules$3 = {};
+var __component__$3 = /* @__PURE__ */ normalizeComponent(__vue2_script$3, render$3, staticRenderFns$3, false, __vue2_injectStyles$3);
+function __vue2_injectStyles$3(context) {
+  for (var o in __cssModules$3) {
+    this[o] = __cssModules$3[o];
+  }
+}
+var CustomSwitch = /* @__PURE__ */ function() {
+  return __component__$3.exports;
+}();
+var __vue2_script$2 = defineComponent({
+  components: {
+    TinyAlert: Alert,
+    TinyTabs: Tabs,
+    TinyTabItem: TabItem,
+    TinyModal: Modal,
+    TinyButton: Button,
+    TinyRadio: GridRadio,
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn,
+    TinySelect: Select,
+    TinyOption: Option,
+    IconEyeopen: IconEyeopen(),
+    IconEyeclose: IconEyeclose(),
+    IconUnlock: IconUnlock(),
+    IconLeftFrozen: IconLeftFrozen(),
+    IconRightFrozen: IconRightFrozen(),
+    IconLock: IconLock(),
+    IconMinus: IconMinus(),
+    IconDescending: IconDescending(),
+    IconAscending: IconAscending(),
+    TinyCustomSwitch: CustomSwitch
+  },
+  name: "TinyGridCustom",
+  inject: {
+    $grid: {
+      default: null
+    }
+  },
+  props: _extends({}, $props, {
+    data: {
+      type: Array,
+      default: function _default3() {
+        return [];
+      }
+    },
+    other: {
+      type: Boolean,
+      default: true
+    },
+    initSettings: {
+      type: Object,
+      default: function _default4() {
+        return {
+          pageSizes: [10, 15, 20, 30, 50, 100],
+          pageSize: 10,
+          sortType: "page",
+          showIndex: false
+        };
+      }
+    },
+    value: Boolean,
+    sortable: Function,
+    rowClassName: [Function, String],
+    onBeforeMove: Function,
+    filter: String,
+    refresh: Boolean,
+    keys: {
+      type: Array,
+      default: function _default5() {
+        return [];
+      }
+    },
+    numberSorting: Boolean,
+    multipleHistory: [Object, Boolean],
+    resetMethod: Function,
+    showHideAll: Boolean,
+    fixedSorting: Boolean
+  }),
+  emits: ["input", "saveSettings", "resetSettings", "cancelSettings", "showModal"],
+  data: function data2() {
+    return {
+      activeName: "base",
+      animateShow: "base",
+      constants: {
+        icon: {
+          asc: "icon-ascending",
+          desc: "icon-descending",
+          left: "icon-left-frozen",
+          right: "icon-right-frozen"
+        }
+      },
+      columns: [],
+      fullColumn: [],
+      customColumns: [{
+        field: "level"
+      }, {
+        field: "property"
+      }],
+      settings: {
+        sortType: this.initSettings.sortType || "page",
+        pageSize: this.initSettings.pageSize || this.pageSizes[0] || 10,
+        columns: []
+      },
+      sortingOptions: [],
+      multipleHistoryId: null,
+      saveDisabled: false
+    };
+  },
+  created: function created2() {
+    this.columns = this.getColumnConfigs(this.data);
+  },
+  watch: {
+    value: function value() {
+      this.columns = this.getColumnConfigs(this.data);
+    },
+    data: {
+      handler: function handler2(val) {
+        this.columns = this.getColumnConfigs(val);
+      }
+    },
+    activeName: {
+      handler: function handler3(val) {
+        var _this9 = this;
+        setTimeout(function() {
+          _this9.animateShow = val;
+        }, 0);
+      }
+    }
+  },
+  computed: {
+    visible: {
+      get: function get() {
+        return this.value;
+      },
+      set: function set() {
+      }
+    },
+    showFixed: function showFixed() {
+      return this.$grid;
+    },
+    tinyTable: function tinyTable() {
+      return this.$grid && this.$grid.$refs.tinyTable || {};
+    },
+    isGroup: function isGroup() {
+      return this.tinyTable.isGroup;
+    },
+    historyConfig: function historyConfig() {
+      var multipleHistory = isNull(this.multipleHistory) || typeof this.multipleHistory === "boolean" ? {} : this.multipleHistory;
+      return extend(true, {}, this.initSettings.multipleHistory || {}, multipleHistory);
+    },
+    TinyTheme: function TinyTheme() {
+      var ctx = appProperties();
+      return (ctx.Tiny_theme ? ctx.Tiny_theme.value : "") || "aurora";
+    },
+    dropConfig: function dropConfig() {
+      return {
+        row: true,
+        column: false,
+        plugin: !this.isGroup && this.sortable,
+        onBeforeMove: this.onBeforeMove,
+        filter: this.filter,
+        refresh: this.refresh
+      };
+    }
+  },
+  methods: {
+    t,
+    getColumnConfigs: function getColumnConfigs(configs) {
+      var _getColNodes = function getColNodes(columns2) {
+        return columns2.map(function(_ref4) {
+          var id = _ref4.id, title = _ref4.title, property = _ref4.property, fixed = _ref4.fixed, visible = _ref4.visible, order = _ref4.order, sortable = _ref4.sortable, level = _ref4.level, children = _ref4.children;
+          if (property) {
+            var column = {
+              id,
+              title,
+              property,
+              fixed,
+              visible,
+              order,
+              sortable,
+              level,
+              children
+            };
+            children && (column.children = _getColNodes(children));
+            return column;
+          }
+          return void 0;
+        }).filter(function(i) {
+          return i;
+        });
+      };
+      if (configs.length && this.$grid) {
+        var _this$$grid$getTableC = this.$grid.getTableColumn(), collectColumn = _this$$grid$getTableC.collectColumn;
+        var columns = _getColNodes(collectColumn);
+        columns = this.doFixedSorting(columns);
+        this.initNumberSorting(columns);
+        return columns;
+      }
+    },
+    doFixedSorting: function doFixedSorting(columns) {
+      if (this.isGroup || !this.fixedSorting) {
+        return columns;
+      }
+      var fixedLeft = [];
+      var normal = [];
+      var fixedRight = [];
+      columns.forEach(function(column) {
+        if (!column.fixed) {
+          normal.push(column);
+        } else if (column.fixed === "left") {
+          fixedLeft.push(column);
+        } else if (column.fixed === "right") {
+          fixedRight.push(column);
+        }
+      });
+      return [].concat(fixedLeft, normal, fixedRight);
+    },
+    initNumberSorting: function initNumberSorting(columns) {
+      var _this10 = this;
+      if (this.isGroup) return;
+      this.sortingOptions = [];
+      columns.forEach(function(column, index) {
+        column.sortingIndex = index + 1;
+        _this10.sortingOptions.push(column.sortingIndex);
+      });
+    },
+    handelNumberSorting: function handelNumberSorting(sort, row) {
+      var oldSort = this.columns.indexOf(row);
+      var newSort = sort - 1;
+      var columns = [];
+      this.columns.splice(oldSort, 1);
+      this.columns.splice(newSort, 0, row);
+      this.columns.forEach(function(column, index) {
+        column.sortingIndex = index + 1;
+        columns.push(column);
+      });
+      this.columns = columns;
+    },
+    handleRowDropEnd: function handleRowDropEnd() {
+      if (this.isGroup) return;
+      this.columns.forEach(function(column, index) {
+        column.sortingIndex = index + 1;
+      });
+    },
+    renderNumberSorting: function renderNumberSorting(h2, _ref5) {
+      var row = _ref5.row;
+      return h2("span", row.sortingIndex + "");
+    },
+    handleCustomMouseMove: function handleCustomMouseMove() {
+      this.$refs.switch && this.$refs.switch.$refs.select && this.$refs.switch.$refs.select.blur();
+    },
+    handleInput: function handleInput(val) {
+      this.$emit("input", val);
+    },
+    handleFixed: function handleFixed(column) {
+      var index = this.columns.indexOf(column);
+      var splitIndex = 0;
+      var fixed = column.fixed;
+      if (!this.isGroup) {
+        column.fixed = fixed ? fixed === "left" ? "right" : void 0 : "left";
+        if (this.fixedSorting) {
+          this.columns = this.doFixedSorting(this.columns);
+          this.initNumberSorting(this.columns);
+        }
+      } else {
+        for (var i = 0; i < this.columns.length; i++) {
+          if (this.columns[i].children) {
+            splitIndex = i;
+            break;
+          }
+        }
+        var leftColumns = this.columns.slice(0, index);
+        var rightColumns = this.columns.slice(index + 1);
+        var changeFixed = function changeFixed2(left, right, column2, type) {
+          var fixed2 = column2.fixed;
+          if (fixed2) {
+            if (!left.some(function(column3) {
+              return column3.fixed === type;
+            })) {
+              column2.fixed = void 0;
+            }
+          } else {
+            if (!right.length || !right.some(function(column3) {
+              return !column3.fixed;
+            })) {
+              column2.fixed = type;
+            }
+          }
+          if (fixed2 === column2.fixed) {
+            Modal.message({
+              id: "customSetting",
+              message: t("ui.grid.error.groupFixed"),
+              status: "warning"
+            });
+          }
+        };
+        if (index > splitIndex) {
+          changeFixed(leftColumns, rightColumns, column, "right");
+        } else {
+          changeFixed(rightColumns, leftColumns, column, "left");
+        }
+      }
+    },
+    handleOrder: function handleOrder(column) {
+      var columns = this.columns, tinyTable3 = this.tinyTable;
+      var sortOpts = tinyTable3.sortOpts;
+      var multipleColumnSort = sortOpts.multipleColumnSort;
+      column.order = tinyTable3.toggleColumnOrder(column);
+      if (column.order && !multipleColumnSort) {
+        arrayEach(columns, function(col) {
+          return col !== column && (col.order = null);
+        });
+      }
+    },
+    handleVisible: function handleVisible(column) {
+      var visibleColumnCount = this.tinyTable.visibleColumn.filter(function(item) {
+        return item.visible;
+      }).length;
+      if (column.visible && visibleColumnCount === 1) {
+        Modal.message({
+          id: "customSetting",
+          message: t("ui.grid.individuation.hideMsg"),
+          status: "warning"
+        });
+      } else {
+        column.visible = !column.visible;
+      }
+    },
+    showOrHideAllColumns: function showOrHideAllColumns(visible) {
+      this.columns.forEach(function(col) {
+        col.visible = visible;
+      });
+      this.showAll = visible;
+    },
+    handlerSetting: function handlerSetting(type, column) {
+      var invisibleCols = this.fullColumn.filter(function(item) {
+        return item.visible;
+      }).length;
+      switch (type) {
+        case "visible":
+          if (column[type] && invisibleCols === 1) {
+            Modal.message({
+              id: "customSetting",
+              message: t("ui.grid.individuation.hideMsg"),
+              status: "warning"
+            });
+          } else {
+            column[type] = !column[type];
+          }
+          break;
+        case "fixed":
+          this.handleFixed(column);
+          break;
+        case "order":
+          column[type] = column[type] ? column[type] === "asc" ? "desc" : null : "asc";
+          break;
+      }
+    },
+    buildSettings: function buildSettings() {
+      var props = ["order", "fixed", "visible", "sortable"].concat(this.keys);
+      this.settings.columns = mapTree(this.columns, function(_ref6) {
+        var property = _ref6.property, rest = _objectWithoutPropertiesLoose2(_ref6, _excluded2);
+        var node = {
+          property
+        };
+        props.forEach(function(prop) {
+          node[prop] = rest[prop];
+        });
+        return node;
+      });
+      return this.settings;
+    },
+    saveSettings: function saveSettings() {
+      this.buildSettings();
+      this.$emit("saveSettings", this.settings);
+      this.handleClose();
+    },
+    resetSettings: function resetSettings(event) {
+      var _this11 = this;
+      if (this.activeName === "base") {
+        this.columns = this.getColumnConfigs(this.data);
+        if (this.settings.columns && this.settings.columns.length) {
+          this.settings.columns.forEach(function(setting) {
+            var column = find(_this11.columns, function(item) {
+              return item.property === setting.property;
+            });
+            if (column) {
+              Object.assign(setting, column);
+            }
+          });
+        }
+      } else if (this.activeName === "other") {
+        this.settings.sortType = this.initSettings.sortType;
+        this.settings.pageSize = this.initSettings.pageSize;
+      }
+      event && this.$emit("resetSettings", this.settings);
+    },
+    cancelSettings: function cancelSettings() {
+      this.resetSettings();
+      this.$emit("cancelSettings");
+      this.$emit("input", false);
+      this.handleClose();
+    },
+    handleClose: function handleClose() {
+      this.$emit("showModal", false);
+    },
+    handleReset: function handleReset(event) {
+      var _this12 = this;
+      var equal = function equal2(cols1, cols2) {
+        var props1 = [];
+        var props2 = [];
+        cols1.forEach(function(col) {
+          return col && col.property && props1.push(col.property);
+        });
+        cols2.forEach(function(col) {
+          return col && col.property && props2.push(col.property);
+        });
+        return props1.length === props2.length && props1.sort().join(",") === props2.sort().join(",");
+      };
+      if (typeof this.resetMethod === "function") {
+        this.resetMethod().then(function(sourceSettings) {
+          _this12.buildSettings();
+          var _ref7 = sourceSettings || {}, columns = _ref7.columns, sortType = _ref7.sortType, pageSize = _ref7.pageSize;
+          if (columns && columns.length && _this12.settings.columns && _this12.settings.columns.length) {
+            _this12.settings.columns.forEach(function(setting) {
+              var source = find(columns, function(item) {
+                return item.property === setting.property;
+              });
+              var target = find(_this12.columns, function(item) {
+                return item.property === setting.property;
+              });
+              if (source) {
+                Object.assign(setting, source);
+                Object.assign(target, source);
+              }
+            });
+            if (equal(columns, _this12.settings.columns)) {
+              var settingColumns = [];
+              var gridColumns = [];
+              columns.forEach(function(source) {
+                var settingCol = find(_this12.settings.columns, function(item) {
+                  return source.property === item.property;
+                });
+                var targetCol = find(_this12.columns, function(item) {
+                  return source.property === item.property;
+                });
+                settingColumns.push(settingCol);
+                gridColumns.push(targetCol);
+              });
+              _this12.settings.columns = settingColumns;
+              _this12.columns = gridColumns;
+            }
+          }
+          sortType && (_this12.settings.sortType = sortType);
+          pageSize && (_this12.settings.pageSize = pageSize);
+        });
+      } else {
+        this.resetSettings(event);
+      }
+    },
+    visibleTitle: function visibleTitle(row) {
+      if (row.visible) {
+        return t("ui.grid.individuation.colConfigs.visible");
+      } else {
+        return t("ui.grid.individuation.colConfigs.invisible");
+      }
+    },
+    sortTitle: function sortTitle(row) {
+      if (row.sortable) {
+        if (row.order) {
+          if (row.order === "asc") {
+            return t("ui.grid.individuation.colConfigs.asc");
+          } else {
+            return t("ui.grid.individuation.colConfigs.desc");
+          }
+        } else {
+          return t("ui.grid.individuation.colConfigs.unsorted");
+        }
+      } else {
+        return "";
+      }
+    },
+    fixedTitle: function fixedTitle(row) {
+      if (row.fixed) {
+        if (row.fixed === "left") {
+          return t("ui.grid.individuation.colConfigs.frozenLeft");
+        } else {
+          return t("ui.grid.individuation.colConfigs.frozenRight");
+        }
+      } else {
+        return t("ui.grid.individuation.colConfigs.unfrozen");
+      }
+    }
+  }
+});
+var _excluded = ["row"];
+function _objectWithoutProperties(e, t2) {
+  if (null == e) return {};
+  var o, r, i = _objectWithoutPropertiesLoose(e, t2);
+  if (Object.getOwnPropertySymbols) {
+    var s = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < s.length; r++) o = s[r], t2.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t2 = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (e.includes(n)) continue;
+    t2[n] = r[n];
+  }
+  return t2;
+}
+var render$2 = function render$22() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("tiny-modal", {
+    attrs: {
+      "width": "600",
+      "title": _vm.t("ui.grid.individuation.title")
+    },
+    on: {
+      "input": _vm.handleInput,
+      "close": _vm.handleClose,
+      "custom-mousemove": _vm.handleCustomMouseMove
+    },
+    scopedSlots: _vm._u([{
+      key: "default",
+      fn: function fn() {
+        return [_vm.visible ? _c("div", {
+          staticClass: "tiny-grid-custom tiny-grid__wrapper"
+        }, [_c("tiny-tabs", {
+          staticClass: "tiny-grid-custom__tabs",
+          model: {
+            value: _vm.activeName,
+            callback: function callback($$v) {
+              _vm.activeName = $$v;
+            },
+            expression: "activeName"
+          }
+        }, [_c("div", {
+          staticClass: "tiny-grid-custom__tabs-body"
+        }, [_c("tiny-tab-item", {
+          staticClass: "tabs-body-item",
+          attrs: {
+            "title": _vm.t("ui.grid.individuation.tabs.base.title"),
+            "name": "base"
+          }
+        }, [_c("tiny-alert", {
+          staticClass: "tiny-grid-custom__alert",
+          attrs: {
+            "description": _vm.t("ui.grid.individuation.tabs.base.tips"),
+            "closable": false
+          }
+        }), _c("tiny-grid", {
+          staticClass: "tiny-grid-custom__setting",
+          attrs: {
+            "auto-resize": true,
+            "data": _vm.columns,
+            "row-class-name": _vm.rowClassName,
+            "row-key": "",
+            "drop-config": _vm.dropConfig,
+            "tree-config": {
+              children: "children"
+            },
+            "show-header": false,
+            "edit-config": {
+              trigger: "click",
+              mode: "cell",
+              showStatus: true
+            },
+            "max-height": _vm.historyConfig.tableMaxHeight
+          },
+          on: {
+            "row-drop-end": _vm.handleRowDropEnd
+          }
+        }, [_vm.initSettings.showIndex ? _c("tiny-grid-column", {
+          attrs: {
+            "type": "index",
+            "width": "60"
+          }
+        }) : _vm._e(), _c("tiny-grid-column", {
+          attrs: {
+            "field": "title",
+            "tree-node": ""
+          }
+        }), _c("tiny-grid-column", {
+          attrs: {
+            "field": "property",
+            "width": "120px",
+            "class-name": "setting-item"
+          },
+          scopedSlots: _vm._u([{
+            key: "default",
+            fn: function fn2(_ref) {
+              var row = _ref.row, data6 = _objectWithoutProperties(_ref, _excluded);
+              return [!row.children ? _c("div", {
+                staticClass: "setting-icon"
+              }, [_c("span", {
+                staticClass: "icon",
+                attrs: {
+                  "title": _vm.visibleTitle(row)
+                }
+              }, [_c(row.visible ? "icon-eyeopen" : "icon-eyeclose", {
+                tag: "component",
+                class: [{
+                  open: row.visible
+                }],
+                on: {
+                  "click": function click($event) {
+                    return _vm.handlerSetting("visible", row, data6);
+                  }
+                }
+              })], 1), _c("span", {
+                staticClass: "icon",
+                attrs: {
+                  "title": _vm.sortTitle(row)
+                }
+              }, [_c(row.order ? _vm.constants.icon[row.order] : "icon-minus", {
+                tag: "component",
+                class: {
+                  sort: row.order,
+                  "is-visible": !row.sortable
+                },
+                on: {
+                  "click": function click($event) {
+                    return _vm.handlerSetting("order", row);
+                  }
+                }
+              })], 1), _c("span", {
+                staticClass: "icon",
+                attrs: {
+                  "title": _vm.fixedTitle(row)
+                }
+              }, [row.level === 1 && _vm.showFixed ? _c(row.fixed ? _vm.constants.icon[row.fixed] : "icon-unlock", {
+                tag: "component",
+                class: {
+                  lock: row.fixed
+                },
+                on: {
+                  "click": function click($event) {
+                    return _vm.handlerSetting("fixed", row);
+                  }
+                }
+              }) : _vm._e()], 1)]) : _vm._e()];
+            }
+          }], null, false, 2200875852)
+        }), _vm.numberSorting && !_vm.isGroup ? _c("tiny-grid-column", {
+          attrs: {
+            "width": "100px",
+            "editor": {},
+            "renderer": _vm.renderNumberSorting
+          },
+          scopedSlots: _vm._u([{
+            key: "edit",
+            fn: function fn2(_ref2) {
+              var row = _ref2.row;
+              return [_c("tiny-select", {
+                on: {
+                  "change": function change($event) {
+                    return _vm.handelNumberSorting($event, row);
+                  }
+                },
+                model: {
+                  value: row.sortingIndex,
+                  callback: function callback($$v) {
+                    _vm.$set(row, "sortingIndex", $$v);
+                  },
+                  expression: "row.sortingIndex"
+                }
+              }, _vm._l(_vm.sortingOptions, function(item) {
+                return _c("tiny-option", {
+                  key: item,
+                  attrs: {
+                    "label": item,
+                    "value": item
+                  }
+                });
+              }), 1)];
+            }
+          }], null, false, 4084401751)
+        }) : _vm._e()], 1)], 1), _vm.other ? _c("tiny-tab-item", {
+          staticClass: "tabs-body-item",
+          attrs: {
+            "title": _vm.t("ui.grid.individuation.tabs.other.title"),
+            "name": "other"
+          }
+        }, [_c("tiny-alert", {
+          staticClass: "tiny-grid-custom__alert",
+          attrs: {
+            "description": _vm.t("ui.grid.individuation.tabs.other.tips"),
+            "closable": false
+          }
+        }), _c("ul", {
+          staticClass: "tiny-grid-custom__setting other-setting"
+        }, [_c("li", {
+          staticClass: "setting-item"
+        }, [_c("span", {
+          staticClass: "label"
+        }, [_vm._v(_vm._s(_vm.t("ui.grid.individuation.tabs.other.sortType")))]), _c("span", {
+          staticClass: "selection"
+        }, [_c("tiny-radio", {
+          attrs: {
+            "label": "page"
+          },
+          model: {
+            value: _vm.settings.sortType,
+            callback: function callback($$v) {
+              _vm.$set(_vm.settings, "sortType", $$v);
+            },
+            expression: "settings.sortType"
+          }
+        }, [_vm._v(_vm._s(_vm.t("ui.grid.individuation.tabs.other.currPageSort")))]), _c("tiny-radio", {
+          attrs: {
+            "label": "all"
+          },
+          model: {
+            value: _vm.settings.sortType,
+            callback: function callback($$v) {
+              _vm.$set(_vm.settings, "sortType", $$v);
+            },
+            expression: "settings.sortType"
+          }
+        }, [_vm._v(_vm._s(_vm.t("ui.grid.individuation.tabs.other.allDataSort")))])], 1)]), _c("li", {
+          staticClass: "setting-item"
+        }, [_c("span", {
+          staticClass: "label"
+        }, [_vm._v(_vm._s(_vm.t("ui.grid.individuation.tabs.other.pageSize")))]), _c("span", {
+          staticClass: "selection"
+        }, _vm._l(_vm.initSettings.pageSizes, function(item, index) {
+          return _c("tiny-radio", {
+            key: index,
+            attrs: {
+              "label": item
+            },
+            model: {
+              value: _vm.settings.pageSize,
+              callback: function callback($$v) {
+                _vm.$set(_vm.settings, "pageSize", $$v);
+              },
+              expression: "settings.pageSize"
+            }
+          }, [_vm._v(_vm._s(item))]);
+        }), 1)])])], 1) : _vm._e(), _vm.multipleHistory && _vm.activeName === "base" ? _c("tiny-custom-switch", {
+          ref: "switch",
+          attrs: {
+            "history-config": _vm.historyConfig
+          }
+        }) : _vm._e()], 1)]), !_vm.multipleHistory || _vm.multipleHistory && _vm.activeName === "base" ? _c("div", {
+          staticClass: "tiny-grid-custom__footer",
+          attrs: {
+            "dir": _vm.TinyTheme === "saas" ? "rtl" : "ltr"
+          }
+        }, [_c("tiny-button", {
+          on: {
+            "click": _vm.handleReset
+          }
+        }, [_vm._v(" " + _vm._s(_vm.t("ui.grid.individuation.resetBtn")) + " ")]), _vm.showHideAll ? _c("tiny-button", {
+          on: {
+            "click": function click($event) {
+              return _vm.showOrHideAllColumns(!_vm.showAll);
+            }
+          }
+        }, [_vm._v(_vm._s(_vm.showAll ? _vm.t("ui.grid.individuation.hideAll") : _vm.t("ui.grid.individuation.showAll")))]) : _vm._e(), _c("tiny-button", {
+          on: {
+            "click": _vm.cancelSettings
+          }
+        }, [_vm._v(" " + _vm._s(_vm.t("ui.grid.individuation.cancelBtn")) + " ")]), _c("tiny-button", {
+          attrs: {
+            "type": "primary",
+            "disabled": _vm.saveDisabled
+          },
+          on: {
+            "click": _vm.saveSettings
+          }
+        }, [_vm._v(" " + _vm._s(_vm.t("ui.grid.individuation.saveBtn")) + " ")])], 1) : _vm._e()], 1) : _vm._e()];
+      },
+      proxy: true
+    }]),
+    model: {
+      value: _vm.visible,
+      callback: function callback($$v) {
+        _vm.visible = $$v;
+      },
+      expression: "visible"
+    }
+  });
+};
+var staticRenderFns$2 = [];
+var __cssModules$2 = {};
+var __component__$2 = /* @__PURE__ */ normalizeComponent(__vue2_script$2, render$2, staticRenderFns$2, false, __vue2_injectStyles$2);
+function __vue2_injectStyles$2(context) {
+  for (var o in __cssModules$2) {
+    this[o] = __cssModules$2[o];
+  }
+}
+var GridCustom = /* @__PURE__ */ function() {
+  return __component__$2.exports;
+}();
+var __vue2_script$1 = {
+  name: "TinyGridCustomSelect",
+  components: {
+    TinySelect: Select,
+    TinyOption: Option,
+    TinyIconSetting: GridConfig.icon.custom
+  },
+  props: {
+    data: {
+      type: Array,
+      default: function _default6() {
+        return [];
+      }
+    },
+    setting: {
+      type: [Object, Boolean]
+    }
+  },
+  inject: {
+    $grid: {
+      default: null
+    }
+  },
+  data: function data3() {
+    return {
+      columns: [],
+      multivalue: []
+    };
+  },
+  created: function created3() {
+    this.columns = this.getColumnConfigs(this.data);
+  },
+  watch: {
+    data: {
+      handler: function handler4(val) {
+        this.columns = this.getColumnConfigs(val);
+        this.multivalue = this.columns.filter(function(item) {
+          return item.visible;
+        }).map(function(item) {
+          return item.property;
+        });
+      }
+    }
+  },
+  methods: {
+    columnChange: function columnChange(values) {
+      this.columns.forEach(function(column) {
+        column.visible = values.includes(column.property);
+      });
+      this.$emit("saveSettings", {
+        columns: this.columns
+      });
+    },
+    getColumnConfigs: function getColumnConfigs2(configs) {
+      var _this13 = this;
+      var _getColNodes2 = function getColNodes(columns2) {
+        return columns2.map(function(_ref8) {
+          var id = _ref8.id, title = _ref8.title, property = _ref8.property, fixed = _ref8.fixed, visible = _ref8.visible, order = _ref8.order, sortable = _ref8.sortable, level = _ref8.level, children = _ref8.children;
+          if (property) {
+            var _this13$setting;
+            var column = {
+              id,
+              title,
+              property,
+              fixed,
+              visible,
+              order,
+              sortable,
+              level,
+              children
+            };
+            column.disabled = Boolean((_this13$setting = _this13.setting) == null ? void 0 : _this13$setting.customDisable == null ? void 0 : _this13$setting.customDisable(column));
+            children && (column.children = _getColNodes2(children));
+            return column;
+          }
+        }).filter(function(i) {
+          return i;
+        });
+      };
+      if (configs.length && this.$grid) {
+        var _this$$grid$getTableC2 = this.$grid.getTableColumn(), collectColumn = _this$$grid$getTableC2.collectColumn;
+        var columns = _getColNodes2(collectColumn);
+        return columns;
+      }
+    }
+  }
+};
+var render$1 = function render$12() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("tiny-select", {
+    attrs: {
+      "placeholder": "请选择",
+      "placement": "bottom-end",
+      "searchable": true,
+      "multiple": ""
+    },
+    on: {
+      "change": _vm.columnChange
+    },
+    scopedSlots: _vm._u([{
+      key: "reference",
+      fn: function fn() {
+        return [_c("tiny-icon-setting")];
+      },
+      proxy: true
+    }]),
+    model: {
+      value: _vm.multivalue,
+      callback: function callback($$v) {
+        _vm.multivalue = $$v;
+      },
+      expression: "multivalue"
+    }
+  }, _vm._l(_vm.columns, function(item) {
+    return _c("tiny-option", {
+      key: item.property,
+      attrs: {
+        "disabled": item.disabled,
+        "label": item.title,
+        "value": item.property
+      }
+    });
+  }), 1);
+};
+var staticRenderFns$1 = [];
+var __cssModules$1 = {};
+var __component__$1 = /* @__PURE__ */ normalizeComponent(__vue2_script$1, render$1, staticRenderFns$1, false, __vue2_injectStyles$1);
+function __vue2_injectStyles$1(context) {
+  for (var o in __cssModules$1) {
+    this[o] = __cssModules$1[o];
+  }
+}
+var GridCustomSelect = /* @__PURE__ */ function() {
+  return __component__$1.exports;
+}();
+var position = ["left", "right"];
+var TitleRender = {
+  props: ["column"],
+  render: function render() {
+    var column = this.column, $parent = this.$parent;
+    var title = column.title;
+    var tinyTable3 = $parent.tinyTable;
+    return h("span", {
+      class: ["custom-saas-title-render", column.id]
+    }, [typeof title === "function" ? title(h, {
+      $table: tinyTable3,
+      column
+    }) : title]);
+  }
+};
+var __vue2_script = defineComponent({
+  components: {
+    TinyModal: Modal,
+    TinyButton: Button,
+    TinySplit: Split,
+    TinySelect: Select,
+    TinyOption: Option,
+    TinyDropdown: Dropdown,
+    TinyDropdownMenu: DropdownMenu,
+    TinyDropdownItem: DropdownItem,
+    TinyCustomSwitch: CustomSwitch,
+    IconClose: IconClose(),
+    IconLeftFrozen: IconLeftFrozen(),
+    IconRightFrozen: IconRightFrozen(),
+    IconDescending: IconDescending(),
+    IconAscending: IconAscending(),
+    IconChevronRight: IconChevronRight(),
+    TinyCheckbox: Checkbox,
+    TinyCheckboxGroup: CheckboxGroup,
+    TinyRadioGroup: RadioGroup,
+    TinyTooltip: Tooltip,
+    TinyRadio: Radio,
+    TinySearch: Search,
+    TinyTree: Tree,
+    TitleRender
+  },
+  directives: directive({
+    Clickoutside
+  }),
+  name: "TinyGridCustom",
+  inject: {
+    $grid: {
+      default: null
+    }
+  },
+  props: _extends({}, $props, {
+    data: {
+      type: Array,
+      default: function _default7() {
+        return [];
+      }
+    },
+    alwaysShowColumns: {
+      type: Array,
+      default: function _default8() {
+        return [];
+      }
+    },
+    columnsGroup: {
+      type: Array,
+      default: function _default9() {
+        return [];
+      }
+    },
+    other: {
+      type: Boolean,
+      default: true
+    },
+    search: {
+      type: Boolean,
+      default: true
+    },
+    initSettings: {
+      type: Object,
+      default: function _default10() {
+        return {
+          pageSizes: [10, 15, 20, 30, 50, 100],
+          pageSize: 10,
+          sortType: "page",
+          showIndex: false
+        };
+      }
+    },
+    customMode: String,
+    value: Boolean,
+    sortable: Function,
+    rowClassName: [Function, String],
+    onBeforeMove: Function,
+    filter: String,
+    refresh: Boolean,
+    keys: {
+      type: Array,
+      default: function _default11() {
+        return [];
+      }
+    },
+    numberSorting: Boolean,
+    multipleHistory: [Object, Boolean],
+    resetMethod: Function,
+    setting: [Object, Boolean]
+  }),
+  data: function data4() {
+    return {
+      maxFixedNum: 6,
+      tooltipContent: "",
+      tooltipVisible: false,
+      templateVisible: false,
+      activeName: "base",
+      animateShow: "base",
+      selectedTemplate: "",
+      lastSelectIndex: 0,
+      searchValue: "",
+      splitVal: 0.4,
+      columns: [],
+      searchColumns: [],
+      fullColumn: [],
+      customColumns: [{
+        field: "level"
+      }, {
+        field: "property"
+      }],
+      settings: {
+        sortType: this.initSettings.sortType || "page",
+        pageSize: this.initSettings.pageSize || this.pageSizes[0] || 10,
+        columns: []
+      },
+      originColumns: [],
+      groupedColumns: [],
+      checkedColumns: [],
+      sortingOptions: [],
+      templateOptions: [],
+      defaultcheckedkeys: [],
+      colIds: [],
+      multipleHistoryId: null,
+      saveDisabled: false,
+      updatedSorting: false,
+      columnsSorted: false,
+      opt: {},
+      allCheckedKeys: []
+    };
+  },
+  setup: function setup() {
+    var _useDefer = useDefer(80), defer = _useDefer.defer, reset = _useDefer.reset;
+    return {
+      defer,
+      reset
+    };
+  },
+  created: function created4() {
+    this.initOpt();
+    this.columns = this.getColumnConfigs(this.data);
+  },
+  watch: {
+    value: function value2(val) {
+      var _this14 = this;
+      if (val) {
+        this.initOpt();
+        this.columns = this.getColumnConfigs(this.data);
+        this.groupedColumns = this.getGroupedColumns();
+        this.checkedColumns = this.columns.filter(function(col) {
+          return col.visible;
+        }).map(function(col) {
+          return col.property;
+        });
+        this.defaultcheckedkeys = this.getDefaultcheckedkeys();
+        setTimeout(function() {
+          _this14.initDragEvent();
+          _this14.initDrag = true;
+          if (_this14.$refs.tree) {
+            _this14.allCheckedKeys = [].concat(_this14.$refs.tree.getCheckedKeys(), _this14.$refs.tree.getHalfCheckedKeys());
+          }
+        }, 100);
+        this.reset();
+      }
+    },
+    checkedColumns: {
+      handler: function handler5(val) {
+        this.columns.forEach(function(column) {
+          column.visible = !!~val.indexOf(column.property);
+        });
+        this.columnsSorted = false;
+        this.updateSortingIndex();
+      },
+      deep: !isVue2
+    },
+    data: {
+      handler: function handler6(val) {
+        this.columns = this.getColumnConfigs(val);
+        this.groupedColumns = this.getGroupedColumns();
+      }
+    },
+    activeName: {
+      handler: function handler7(val) {
+        var _this15 = this;
+        setTimeout(function() {
+          _this15.animateShow = val;
+        }, 0);
+      }
+    }
+  },
+  computed: {
+    visible: {
+      get: function get2() {
+        return this.value;
+      },
+      set: function set2() {
+      }
+    },
+    showFixed: function showFixed2() {
+      return this.$grid;
+    },
+    tinyTable: function tinyTable2() {
+      return this.$grid && this.$grid.$refs.tinyTable || {};
+    },
+    isGroup: function isGroup2() {
+      return this.tinyTable.isGroup;
+    },
+    historyConfig: function historyConfig2() {
+      var multipleHistory = isNull(this.multipleHistory) || typeof this.multipleHistory === "boolean" ? {} : this.multipleHistory;
+      return extend(true, {}, this.initSettings.multipleHistory || {}, multipleHistory);
+    },
+    tinyTheme: function tinyTheme() {
+      return this.tinyTable.tinyTheme || GridConfig.themes.AURORA;
+    },
+    visibleColumns: function visibleColumns() {
+      var _this16 = this;
+      if (this.isGroup) {
+        return this.columns.filter(function(column) {
+          return _this16.allCheckedKeys.includes(column.id);
+        });
+      } else {
+        return this.columns.filter(function(column) {
+          return column.visible;
+        });
+      }
+    },
+    selectedTemplateVal: function selectedTemplateVal() {
+      var _this17 = this;
+      return this.templateOptions.find(function(item) {
+        return item.id === _this17.selectedTemplate;
+      }) || {};
+    },
+    isIndeterminate: {
+      get: function get3() {
+        return !(this.checkedColumns.length === 0 || this.checkedColumns.length === this.columns.length);
+      }
+    },
+    isMultiIndeterminate: function isMultiIndeterminate() {
+      return this.allCheckedKeys.length !== 0 && this.allCheckedKeys.length !== this.colIds.length;
+    },
+    multiCheckAll: {
+      get: function get4() {
+        return this.allCheckedKeys.length === this.colIds.length;
+      },
+      set: function set3(val) {
+        if (val) {
+          this.allCheckedKeys = [].concat(this.colIds);
+        } else {
+          this.allCheckedKeys = [];
+        }
+      }
+    },
+    checkAll: {
+      get: function get5() {
+        return this.checkedColumns.length === this.columns.length;
+      },
+      set: function set4(val) {
+        if (val) {
+          this.checkedColumns = this.columns.map(function(item) {
+            return item.property;
+          });
+        } else {
+          this.checkedColumns = [].concat(this.alwaysShowColumns);
+        }
+      }
+    },
+    dropConfig: function dropConfig2() {
+      return {
+        row: true,
+        column: false,
+        plugin: !this.isGroup && this.sortable,
+        onBeforeMove: this.onBeforeMove,
+        filter: this.filter,
+        refresh: this.refresh
+      };
+    }
+  },
+  methods: {
+    t,
+    initOpt: function initOpt() {
+      this.opt = {
+        asc: {
+          value: "asc",
+          label: t("ui.grid.individuation.colConfigs.asc")
+        },
+        desc: {
+          value: "desc",
+          label: t("ui.grid.individuation.colConfigs.desc")
+        },
+        left: {
+          value: "left",
+          label: t("ui.grid.individuation.colConfigs.frozenLeft")
+        },
+        right: {
+          value: "right",
+          label: t("ui.grid.individuation.colConfigs.frozenRight")
+        },
+        cancelSort: {
+          value: "cancel",
+          label: t("ui.grid.individuation.colConfigs.unsort")
+        },
+        cancelFixed: {
+          value: "cancel",
+          label: t("ui.grid.individuation.colConfigs.unfreeze")
+        }
+      };
+    },
+    setSelectedTemplate: function setSelectedTemplate(val) {
+      this.selectedTemplate = val;
+    },
+    initStorage: function initStorage2(option) {
+      this.templateOptions = option;
+    },
+    updateTemplateOptions: function updateTemplateOptions(id, name) {
+      this.templateOptions.forEach(function(opt) {
+        if (opt.id === id) {
+          opt.name = name;
+        }
+      });
+    },
+    checkAllChange: function checkAllChange(val) {
+      if (val) {
+        this.$refs.tree.setCheckedKeys(this.colIds);
+        this.hideOrShowColumns(true);
+      } else {
+        this.$refs.tree.setCheckedKeys([]);
+        this.hideOrShowColumns(false);
+      }
+    },
+    checkNode: function checkNode(node, data6, checked) {
+      node.visible = checked;
+      if (node.children && Array.isArray(node.children)) {
+        node.children.forEach(function(item) {
+          item.visible = node.visible;
+        });
+      }
+      var checkedKeys = this.$refs.tree.getCheckedKeys();
+      var halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys();
+      this.allCheckedKeys = checkedKeys.concat(halfCheckedKeys);
+    },
+    hideOrShowColumns: function hideOrShowColumns(visible) {
+      setColumnsVisible(this.columns);
+      function setColumnsVisible(columns) {
+        columns.forEach(function(col) {
+          if (col.children) {
+            setColumnsVisible(col.children);
+          }
+          col.visible = visible;
+        });
+      }
+    },
+    getRowClassName: function getRowClassName(row) {
+      if (typeof this.rowClassName === "function") {
+        return this.rowClassName({
+          row
+        });
+      } else {
+        return this.rowClassName;
+      }
+    },
+    getColumnConfigs: function getColumnConfigs3(configs) {
+      var _this18 = this;
+      var alwaysShowColumns = this.alwaysShowColumns;
+      this.colIds = [];
+      var _getColNodes3 = function getColNodes(columns2) {
+        return columns2.map(function(_ref9) {
+          var id = _ref9.id, title = _ref9.title, property = _ref9.property, fixed = _ref9.fixed, visible = _ref9.visible, order = _ref9.order, sortable = _ref9.sortable, level = _ref9.level, children = _ref9.children;
+          if (property) {
+            var column = {
+              id,
+              title,
+              property,
+              alwaysShow: alwaysShowColumns.includes(property),
+              fixed,
+              visible,
+              order,
+              sortable,
+              level,
+              children,
+              numberSortVisible: false,
+              expand: true
+            };
+            children && (column.children = _getColNodes3(children));
+            _this18.colIds.push(id);
+            return column;
+          }
+          return null;
+        }).filter(function(i) {
+          return i;
+        });
+      };
+      if (configs.length && this.$grid) {
+        var _this$$grid$getTableC3 = this.$grid.getTableColumn(), collectColumn = _this$$grid$getTableC3.collectColumn;
+        var columns = _getColNodes3(collectColumn);
+        this.originColumns = [].concat(columns);
+        var sortColumns = this.initSortingColumns(columns);
+        this.initSortAndFixedOption(columns);
+        return sortColumns;
+      } else {
+        return [];
+      }
+    },
+    initSortAndFixedOption: function initSortAndFixedOption(columns) {
+      var _this19 = this;
+      columns.forEach(function(column) {
+        column.sortOption = column.order === "asc" ? [_this19.opt.desc, _this19.opt.cancelSort] : column.order === "desc" ? [_this19.opt.asc, _this19.opt.cancelSort] : [_this19.opt.asc, _this19.opt.desc];
+        column.fixedOption = column.fixed === "left" ? [_this19.opt.right, _this19.opt.cancelFixed] : column.fixed === "right" ? [_this19.opt.left, _this19.opt.cancelFixed] : [_this19.opt.left, _this19.opt.right];
+      });
+    },
+    initSortingColumns: function initSortingColumns(columns) {
+      var leftCols = [];
+      var rightCols = [];
+      var visibleCols = [];
+      columns.forEach(function(col) {
+        if (col.fixed === "left") {
+          leftCols.push(col);
+        } else if (col.fixed === "right") {
+          rightCols.push(col);
+        } else {
+          visibleCols.push(col);
+        }
+      });
+      var result = [].concat(leftCols, visibleCols, rightCols);
+      this.updateSortingIndex();
+      return result;
+    },
+    getGroupedColumns: function getGroupedColumns() {
+      var _this20 = this;
+      var result = [];
+      if (this.columnsGroup.length) {
+        this.columnsGroup.forEach(function(item) {
+          var data6 = [];
+          item.data.forEach(function(col) {
+            var column = _this20.originColumns.find(function(c) {
+              return c.property === col;
+            });
+            if (column) {
+              data6.push(column);
+            }
+          });
+          result.push({
+            label: item.label,
+            data: data6
+          });
+        });
+      } else {
+        result.push({
+          label: "",
+          data: [].concat(this.originColumns)
+        });
+      }
+      return result;
+    },
+    getDefaultcheckedkeys: function getDefaultcheckedkeys() {
+      var checkedkeys = [];
+      getCheckedkeys(this.columns);
+      function getCheckedkeys(columns) {
+        columns.forEach(function(col) {
+          if (col.children) {
+            getCheckedkeys(col.children);
+          } else {
+            col.visible && checkedkeys.push(col.id);
+          }
+        });
+      }
+      return checkedkeys;
+    },
+    deleteTemplate: function deleteTemplate(item, $event) {
+      var _this21 = this;
+      $event.stopPropagation();
+      Modal.confirm(t("ui.grid.individuation.switchdelcon"), t("ui.grid.individuation.switchdelconfirm")).then(function(res) {
+        if (res === "confirm") {
+          if (!_this21.setting.remote && item.id === _this21.selectedTemplate) {
+            _this21.selectedTemplate = "";
+            setTimeout(function() {
+              _this21.templateOptions = _this21.$refs.switch.options;
+            });
+          }
+          _this21.$refs.switch.handleDelConfirm("yes", item);
+          _this21.$emit("delete-template", item);
+        }
+      });
+    },
+    selectedTemplateChange: function selectedTemplateChange() {
+      var _this22 = this;
+      var selected = this.templateOptions.find(function(opt) {
+        return opt.id === _this22.selectedTemplate;
+      });
+      if (selected) {
+        this.columns = mergeArray(this.columns, selected.setting.custom.columns);
+        this.columns = this.initSortingColumns(this.columns);
+        this.initSortAndFixedOption(this.columns);
+        this.groupedColumns = this.getGroupedColumns();
+        this.isGroup && (this.defaultcheckedkeys = this.getDefaultcheckedkeys());
+        this.checkedColumns = this.columns.filter(function(col) {
+          return col.visible;
+        }).map(function(col) {
+          return col.property;
+        });
+        this.settings.pageSize = selected.setting.custom.pageSize;
+        this.multipleHistoryId = selected.id;
+        this.updatedSorting = true;
+        if (this.$refs.tree) {
+          setTimeout(function() {
+            _this22.allCheckedKeys = [].concat(_this22.$refs.tree.getCheckedKeys(), _this22.$refs.tree.getHalfCheckedKeys());
+          }, 100);
+        }
+      }
+    },
+    updateSelectedTemplate: function updateSelectedTemplate(val) {
+      this.selectedTemplate = val;
+      this.selectedTemplateChange();
+    },
+    sortSelectChange: function sortSelectChange(index) {
+      var newIndex = index - 1;
+      var oldIndex = this.lastSelectIndex - 1;
+      this.handleFixed("sort", 1, 1, oldIndex, newIndex);
+    },
+    selectFocus: function selectFocus(event, index) {
+      this.lastSelectIndex = index;
+    },
+    // 勿同步，search组件input事件第一个参数就是val
+    searchChange: function searchChange(val) {
+      var _this23 = this;
+      var getRenderedTitle = function getRenderedTitle2(col) {
+        var result = "";
+        if (typeof col.title === "function") {
+          var titleElm = _this23.$el.querySelector(".custom-saas-title-render." + col.id);
+          result = titleElm && titleElm.textContent || "";
+          result = result.toUpperCase();
+        } else if (col.title) {
+          result = col.title && col.title.toUpperCase();
+        }
+        return result;
+      };
+      if (this.isGroup) {
+        this.$refs.tree.filter(val);
+      } else {
+        this.searchColumns = this.columns.filter(function(col) {
+          var title = getRenderedTitle(col);
+          var upperVal = val && val.toUpperCase();
+          return title.includes(upperVal);
+        });
+      }
+    },
+    filterTreeNode: function filterTreeNode(value3, data6) {
+      if (!value3) return true;
+      var label = data6.label || "";
+      if (typeof data6.label !== "string") {
+        label = data6.label.toString();
+      }
+      return label.includes(value3);
+    },
+    handelClearAll: function handelClearAll() {
+      this.checkedColumns = [].concat(this.alwaysShowColumns);
+    },
+    hiddenColumn: function hiddenColumn(val) {
+      var index = this.checkedColumns.findIndex(function(col) {
+        return col === val;
+      });
+      this.checkedColumns.splice(index, 1);
+    },
+    handleSortItemClick: function handleSortItemClick(item) {
+      var column = this.columns.find(function(col) {
+        return col.property === item.property;
+      });
+      if (column) {
+        column.order = item.value === "cancel" ? void 0 : item.value;
+        column.sortOption = column.order === "asc" ? [this.opt.desc, this.opt.cancelSort] : column.order === "desc" ? [this.opt.asc, this.opt.cancelSort] : [this.opt.asc, this.opt.desc];
+      }
+    },
+    // TODO: 待完善具体类型  vm dropdown组件示例
+    handleFixedItemClick: function handleFixedItemClick(itemData, vm) {
+      var item;
+      if (vm) {
+        item = itemData;
+      } else {
+        item = itemData == null ? void 0 : itemData.itemData;
+      }
+      var index = this.columns.findIndex(function(col) {
+        return col.property === item.property;
+      });
+      var column = this.columns[index];
+      item.fixed = column.fixed;
+      if (column) {
+        if (position.includes(item.value) && !position.includes(column.fixed) && this.fixedNumberIsMax()) {
+          Modal.message({
+            message: t("ui.grid.individuation.maxFreezeNumMsg"),
+            status: "warning",
+            id: "drop-fixed-max-waring"
+          });
+          return;
+        }
+        this.columns.splice(index, 1);
+        this.updatedSorting = true;
+        var leftIdx = this.columns.reduce(function(result, col, index2) {
+          return col.fixed === "left" && col.visible ? index2 : result;
+        }, -1);
+        var rightIdx = this.columns.findIndex(function(col) {
+          return col.fixed === "right" && col.visible;
+        });
+        column.fixed = item.value === "cancel" ? void 0 : item.value;
+        if (item.value === "left") {
+          this.columns.splice(leftIdx >= 0 ? leftIdx + 1 : 0, 0, column);
+          column.fixedOption = [this.opt.right, this.opt.cancelFixed];
+        } else if (item.value === "right") {
+          this.columns.splice(rightIdx >= 0 ? rightIdx : this.columns.length, 0, column);
+          column.fixedOption = [this.opt.left, this.opt.cancelFixed];
+        } else {
+          if (item.fixed === "left" && leftIdx >= 0) {
+            this.columns.splice(leftIdx + 1, 0, column);
+          } else if (item.fixed === "right" && rightIdx >= 0) {
+            this.columns.splice(rightIdx, 0, column);
+          } else {
+            this.columns.splice(index, 0, column);
+          }
+          column.fixedOption = [this.opt.left, this.opt.right];
+        }
+        this.updateSortingIndex();
+      }
+    },
+    fixedNumberIsMax: function fixedNumberIsMax() {
+      return this.columns.filter(function(col) {
+        return col.visible && col.fixed;
+      }).length >= this.maxFixedNum;
+    },
+    updateSortingIndex: function updateSortingIndex() {
+      var _this24 = this;
+      this.sortingOptions = [];
+      var index = 1;
+      this.columns.forEach(function(column) {
+        if (column.visible) {
+          column.sortingIndex = index;
+          _this24.sortingOptions.push(column.sortingIndex);
+          index++;
+        } else {
+          column.sortingIndex = null;
+        }
+      });
+    },
+    handleDropdownMouseenter: function handleDropdownMouseenter($event, index) {
+      var childNode = this.$refs.list.children[index];
+      childNode && childNode.classList.add("show-dropdown");
+    },
+    handleDropdownMouseleave: function handleDropdownMouseleave($event, index) {
+      var childNode = this.$refs.list.children[index];
+      childNode && childNode.classList.remove("show-dropdown");
+    },
+    handleMouseenter: function handleMouseenter($event) {
+      var dom = $event.target;
+      var text = dom.textContent;
+      var tooltip = this.$refs.tooltip;
+      if (dom.scrollWidth > dom.offsetWidth) {
+        tooltip.state.referenceElm = dom;
+        tooltip.state.popperElm && (tooltip.state.popperElm.style.display = "none");
+        tooltip.doDestroy();
+        this.tooltipVisible = true;
+        this.tooltipContent = text;
+        setTimeout(tooltip.updatePopper, 20);
+      }
+    },
+    handleMouseleave: function handleMouseleave() {
+      this.tooltipVisible = false;
+    },
+    handleInput: function handleInput2(val) {
+      this.$emit("input", val);
+    },
+    buildSettings: function buildSettings2() {
+      var props = ["order", "fixed", "visible", "sortable"].concat(this.keys);
+      !this.updatedSorting && !this.columnsGroup.length && (this.columns = [].concat(this.groupedColumns[0].data));
+      this.settings.columns = mapTree(this.columns, function(_ref10) {
+        var property = _ref10.property, rest = _objectWithoutPropertiesLoose2(_ref10, _excluded3);
+        var node = {
+          property
+        };
+        props.forEach(function(prop) {
+          node[prop] = rest[prop];
+        });
+        return node;
+      });
+      return this.settings;
+    },
+    saveSettings: function saveSettings2(val) {
+      var _this25 = this;
+      var visible = typeof val === "boolean" ? val : false;
+      this.buildSettings();
+      this.$emit("saveSettings", this.settings, visible, this.updatedSorting);
+      if (this.multipleHistory && this.selectedTemplate) {
+        var selected = this.templateOptions.find(function(opt) {
+          return opt.id === _this25.selectedTemplate;
+        });
+        if (selected && JSON.stringify(selected.setting.custom.columns) !== JSON.stringify(this.settings.columns)) {
+          this.$refs.switch.handleSaveConfirm("overwrite", true);
+        }
+      }
+      !visible && this.handleClose();
+    },
+    resetSettings: function resetSettings2(event) {
+      var _this26 = this;
+      if (this.activeName === "base") {
+        this.columns = this.getColumnConfigs(this.data);
+        this.checkedColumns = this.columns.filter(function(col) {
+          return col.visible;
+        }).map(function(col) {
+          return col.property;
+        });
+        if (this.settings.columns && this.settings.columns.length) {
+          this.settings.columns.forEach(function(setting) {
+            var column = find(_this26.columns, function(item) {
+              return item.property === setting.property;
+            });
+            if (column) {
+              Object.assign(setting, column);
+            }
+          });
+        }
+      } else if (this.activeName === "other") {
+        this.settings.pageSize = this.initSettings.pageSize;
+      }
+      event && this.$emit("resetSettings", this.settings);
+    },
+    cancelSettings: function cancelSettings2() {
+      this.resetSettings();
+      this.$emit("cancelSettings");
+      this.$emit("input", false);
+      this.handleClose();
+    },
+    handleClose: function handleClose2() {
+      this.updatedSorting = false;
+      this.$emit("showModal", false);
+    },
+    handleReset: function handleReset2(event) {
+      var _this27 = this;
+      var equal = function equal2(cols1, cols2) {
+        var props1 = [];
+        var props2 = [];
+        cols1.forEach(function(col) {
+          return col && col.property && props1.push(col.property);
+        });
+        cols2.forEach(function(col) {
+          return col && col.property && props2.push(col.property);
+        });
+        return props1.length === props2.length && props1.sort().join(",") === props2.sort().join(",");
+      };
+      if (typeof this.resetMethod === "function") {
+        this.resetMethod().then(function(sourceSettings) {
+          _this27.updatedSorting = true;
+          _this27.buildSettings();
+          var _ref11 = sourceSettings || {}, columns = _ref11.columns, sortType = _ref11.sortType, pageSize = _ref11.pageSize;
+          if (columns && columns.length && _this27.settings.columns && _this27.settings.columns.length) {
+            _this27.settings.columns.forEach(function(setting) {
+              var source = find(columns, function(item) {
+                return item.property === setting.property;
+              });
+              var target = find(_this27.columns, function(item) {
+                return item.property === setting.property;
+              });
+              if (source) {
+                Object.assign(setting, source);
+                Object.assign(target, source);
+              }
+            });
+            if (equal(columns, _this27.settings.columns)) {
+              var settingColumns = [];
+              var gridColumns = [];
+              columns.forEach(function(source) {
+                var settingCol = find(_this27.settings.columns, function(item) {
+                  return source.property === item.property;
+                });
+                var targetCol = find(_this27.columns, function(item) {
+                  return source.property === item.property;
+                });
+                settingColumns.push(settingCol);
+                gridColumns.push(targetCol);
+              });
+              _this27.settings.columns = settingColumns;
+              _this27.columns = gridColumns;
+            }
+          }
+          sortType && (_this27.settings.sortType = sortType);
+          pageSize && (_this27.settings.pageSize = pageSize);
+          _this27.checkedColumns = _this27.columns.filter(function(col) {
+            return col.visible;
+          }).map(function(col) {
+            return col.property;
+          });
+        });
+      } else {
+        this.resetSettings(event);
+      }
+    },
+    handleFixed: function handleFixed2(type, from, to, oldIndex, newIndex) {
+      if (from === to && oldIndex !== newIndex) {
+        !this.columnsSorted && this.columnsSorting();
+        var newCol = this.visibleColumns[newIndex];
+        var oldCol = this.visibleColumns[oldIndex];
+        if (type === "sort" && position.includes(newCol.fixed) && !position.includes(oldCol.fixed) && this.fixedNumberIsMax()) {
+          this.visibleColumns[oldIndex].sortingIndex = this.lastSelectIndex;
+          Modal.message({
+            message: t("ui.grid.individuation.maxFreezeNumMsg"),
+            status: "warning",
+            id: "select-fixed-max-waring"
+          });
+          return;
+        }
+        if (newCol.fixed === "left") {
+          oldCol.fixed = "left";
+          oldCol.fixedOption = [this.opt.right, this.opt.cancelFixed];
+        } else if (newCol.fixed === "right") {
+          oldCol.fixed = "right";
+          oldCol.fixedOption = [this.opt.left, this.opt.cancelFixed];
+        } else {
+          oldCol.fixed = void 0;
+          oldCol.fixedOption = [this.opt.left, this.opt.right];
+        }
+        var curIndex = this.columns.findIndex(function(col) {
+          return col.property === oldCol.property;
+        });
+        this.columns.splice(curIndex, 1);
+        this.columns.splice(newIndex, 0, oldCol);
+        this.updateSortingIndex();
+        this.updatedSorting = true;
+      }
+    },
+    columnsSorting: function columnsSorting() {
+      var visibleColumns2 = [];
+      var hiddenColumns = [];
+      this.columns.forEach(function(col) {
+        if (col.visible) {
+          visibleColumns2.push(col);
+        } else {
+          hiddenColumns.push(col);
+        }
+      });
+      this.columns = [].concat(visibleColumns2, hiddenColumns);
+      this.columnsSorted = true;
+    },
+    initDragEvent: function initDragEvent() {
+      var _this28 = this;
+      var handleUpdate = function handleUpdate2(e) {
+        var from = e.from, to = e.to, oldIndex = e.oldIndex, newIndex = e.newIndex;
+        _this28.handleFixed("drag", from, to, oldIndex, newIndex);
+      };
+      if (!this.dropConfig.plugin) return;
+      this.dropConfig.plugin.create(this.$refs.list, {
+        animation: 200,
+        draggable: '[data-tag="tiny-grid-toolbar-item"]',
+        handle: ".toolbar-drag-item",
+        onUpdate: handleUpdate,
+        onMove: function onMove(e) {
+          if (e.related && (e.related.classList.contains("left") || e.related.classList.contains("right")) && !(e.dragged.classList.contains("left") || e.dragged.classList.contains("right")) && _this28.fixedNumberIsMax()) {
+            Modal.message({
+              message: t("ui.grid.individuation.maxFreezeNumMsg"),
+              status: "warning",
+              id: "drag-fixed-max-waring"
+            });
+            return false;
+          }
+          var rowName = e.dragged && e.dragged.getAttribute("data-row");
+          var row = _this28.columns.find(function(row2) {
+            return row2.property === rowName;
+          }) || {};
+          var cancel = typeof _this28.onBeforeMove === "function" ? _this28.onBeforeMove("row", row, e) : true;
+          return cancel === void 0 || cancel;
+        }
+      });
+    },
+    clickSortDisplay: function clickSortDisplay(column, index) {
+      var _this29 = this;
+      column.numberSortVisible = true;
+      this.columns.forEach(function(col) {
+        return col !== column && (col.numberSortVisible = false);
+      });
+      this.$nextTick(function() {
+        var selectVm = _this29.$refs["select" + index];
+        selectVm = isArray(selectVm) && selectVm[0] ? selectVm[0] : null;
+        if (selectVm) {
+          selectVm.focus();
+        }
+      });
+    },
+    clickEditorOutside: function clickEditorOutside() {
+      this.columns.forEach(function(col) {
+        return col.numberSortVisible = false;
+      });
+    }
+  }
+});
+var render2 = function render3() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("tiny-modal", {
+    staticClass: "tiny-grid-toolbar-modal",
+    attrs: {
+      "width": "800",
+      "title": " "
+    },
+    on: {
+      "input": _vm.handleInput,
+      "close": _vm.handleClose
+    },
+    scopedSlots: _vm._u([{
+      key: "default",
+      fn: function fn() {
+        return [_vm.visible ? _c("div", {
+          staticClass: "tiny-grid-custom"
+        }, [_c("div", {
+          staticClass: "tiny-grid-custom__tabs"
+        }, [_c("div", {
+          staticClass: "tiny-grid-custom__tabs-head"
+        }, [_c("ul", [_c("li", {
+          class: {
+            "tiny-grid-custom__tabs-selected": _vm.activeName === "base" && _vm.other,
+            "tiny-grid-custom__tabs-base": !_vm.other
+          },
+          on: {
+            "click": function click($event) {
+              _vm.activeName = "base";
+            }
+          }
+        }, [_c("span", [_vm._v(_vm._s(_vm.t("ui.grid.individuation.columnSet")))])]), _vm.other ? _c("li", {
+          class: {
+            "tiny-grid-custom__tabs-selected": _vm.activeName === "other"
+          },
+          on: {
+            "click": function click($event) {
+              _vm.activeName = "other";
+            }
+          }
+        }, [_c("span", [_vm._v(_vm._s(_vm.t("ui.grid.individuation.tabs.other.title")))])]) : _vm._e()])]), _c("div", {
+          staticClass: "tiny-grid-custom__tabs-body"
+        }, [_c("div", {
+          directives: [{
+            name: "show",
+            rawName: "v-show",
+            value: _vm.activeName === "base",
+            expression: "activeName === 'base'"
+          }],
+          class: ["tabs-body-item", _vm.animateShow === "base" ? "active-item" : ""]
+        }, [_c("tiny-split", {
+          attrs: {
+            "trigger-simple": "",
+            "collapse-left-top": ""
+          },
+          scopedSlots: _vm._u([{
+            key: "left",
+            fn: function fn2() {
+              return [_c("div", {
+                staticClass: "left-panel"
+              }, [_vm.multipleHistory ? _c("div", {
+                staticClass: "select-template"
+              }, [_c("tiny-select", {
+                attrs: {
+                  "shape": "filter",
+                  "label": _vm.t("ui.grid.individuation.selectTemplate"),
+                  "clearable": ""
+                },
+                on: {
+                  "change": _vm.selectedTemplateChange
+                },
+                model: {
+                  value: _vm.selectedTemplate,
+                  callback: function callback($$v) {
+                    _vm.selectedTemplate = $$v;
+                  },
+                  expression: "selectedTemplate"
+                }
+              }, _vm._l(_vm.templateOptions, function(item) {
+                return _c("tiny-option", {
+                  key: item.id,
+                  attrs: {
+                    "label": item.name,
+                    "value": item.id
+                  }
+                }, [_c("span", {
+                  staticStyle: {
+                    "float": "left",
+                    "width": "240px",
+                    "overflow": "hidden",
+                    "text-overflow": "ellipsis",
+                    "white-space": "nowrap"
+                  },
+                  attrs: {
+                    "title": item.name
+                  }
+                }, [_vm._v(_vm._s(item.name))]), _vm.historyConfig.showDel ? _c("span", {
+                  staticStyle: {
+                    "float": "right",
+                    "padding": "0 6px",
+                    "color": "#1890ff",
+                    "cursor": "pointer"
+                  },
+                  on: {
+                    "click": function click($event) {
+                      return _vm.deleteTemplate(item, $event);
+                    }
+                  }
+                }, [_vm._v(_vm._s(_vm.t("ui.grid.individuation.switchdel")))]) : _vm._e()]);
+              }), 1)], 1) : _vm._e(), _vm.search ? _c("tiny-search", {
+                attrs: {
+                  "placeholder": _vm.t("ui.grid.individuation.toolbar.search")
+                },
+                on: {
+                  "input": _vm.searchChange
+                },
+                model: {
+                  value: _vm.searchValue,
+                  callback: function callback($$v) {
+                    _vm.searchValue = $$v;
+                  },
+                  expression: "searchValue"
+                }
+              }) : _vm._e(), _vm.isGroup ? _c("div", [!_vm.searchValue ? _c("div", {
+                staticClass: "multi-check-all-btn"
+              }, [_c("tiny-checkbox", {
+                attrs: {
+                  "indeterminate": _vm.isMultiIndeterminate
+                },
+                on: {
+                  "change": _vm.checkAllChange
+                },
+                model: {
+                  value: _vm.multiCheckAll,
+                  callback: function callback($$v) {
+                    _vm.multiCheckAll = $$v;
+                  },
+                  expression: "multiCheckAll"
+                }
+              }, [_vm._v(" " + _vm._s(_vm.t("ui.grid.individuation.toolbar.all")) + " ")])], 1) : _vm._e(), _c("tiny-tree", {
+                ref: "tree",
+                attrs: {
+                  "data": _vm.columns,
+                  "default-expand-all": "",
+                  "check-on-click-node": "",
+                  "show-checkbox": "",
+                  "node-key": "id",
+                  "default-checked-keys": _vm.defaultcheckedkeys,
+                  "filter-node-method": _vm.filterTreeNode,
+                  "props": {
+                    label: "title"
+                  }
+                },
+                on: {
+                  "check": _vm.checkNode
+                },
+                scopedSlots: _vm._u([{
+                  key: "default",
+                  fn: function fn3(sourceData) {
+                    return [_c("div", {
+                      staticClass: "tiny-tree-node__label"
+                    }, [_c("title-render", {
+                      attrs: {
+                        "column": sourceData.data
+                      }
+                    })], 1)];
+                  }
+                }], null, false, 3003057265)
+              })], 1) : _c("div", [_vm.searchValue ? _c("div", [_c("tiny-checkbox-group", {
+                attrs: {
+                  "vertical": ""
+                },
+                model: {
+                  value: _vm.checkedColumns,
+                  callback: function callback($$v) {
+                    _vm.checkedColumns = $$v;
+                  },
+                  expression: "checkedColumns"
+                }
+              }, _vm._l(_vm.searchColumns, function(column) {
+                return _c("tiny-checkbox", {
+                  key: column.property,
+                  attrs: {
+                    "label": column.property,
+                    "disabled": column.alwaysShow
+                  }
+                }, [_c("title-render", {
+                  attrs: {
+                    "column": column
+                  }
+                })], 1);
+              }), 1)], 1) : _c("div", [_c("div", {
+                staticClass: "check-all-btn"
+              }, [_c("tiny-checkbox", {
+                attrs: {
+                  "indeterminate": _vm.isIndeterminate
+                },
+                model: {
+                  value: _vm.checkAll,
+                  callback: function callback($$v) {
+                    _vm.checkAll = $$v;
+                  },
+                  expression: "checkAll"
+                }
+              }, [_vm._v(" " + _vm._s(_vm.t("ui.grid.individuation.toolbar.all")) + " ")])], 1), _c("tiny-checkbox-group", {
+                attrs: {
+                  "vertical": ""
+                },
+                model: {
+                  value: _vm.checkedColumns,
+                  callback: function callback($$v) {
+                    _vm.checkedColumns = $$v;
+                  },
+                  expression: "checkedColumns"
+                }
+              }, [_vm._l(_vm.groupedColumns, function(group, index) {
+                return [_vm.defer(Math.floor(index / 5)) ? _c("div", {
+                  key: index
+                }, [group.label ? _c("p", {
+                  staticClass: "group-label",
+                  class: [index === 0 && "group-label-first"]
+                }, [_vm._v(" " + _vm._s(group.label) + " ")]) : _vm._e(), _vm._l(group.data, function(column) {
+                  return _c("tiny-checkbox", {
+                    key: column.property,
+                    attrs: {
+                      "label": column.property,
+                      "disabled": column.alwaysShow
+                    }
+                  }, [_c("title-render", {
+                    attrs: {
+                      "column": column
+                    }
+                  })], 1);
+                })], 2) : _vm._e()];
+              })], 2)], 1)])], 1)];
+            },
+            proxy: true
+          }, {
+            key: "right",
+            fn: function fn2() {
+              return [_c("div", {
+                staticClass: "right-panel"
+              }, [_c("div", {
+                staticClass: "header"
+              }, [_c("p", [_vm._v(" " + _vm._s(_vm.t("ui.grid.individuation.toolbar.selected")) + " (" + _vm._s(_vm.visibleColumns.length) + "/" + _vm._s(_vm.columns.length) + ") ")]), !_vm.setting.hideFixedColumn ? _c("span", [_vm._v(_vm._s(_vm.t("ui.grid.individuation.toolbar.freeze")))]) : _vm._e(), !_vm.setting.hideSortColumn ? _c("span", [_vm._v(_vm._s(_vm.t("ui.grid.individuation.toolbar.sort")))]) : _vm._e(), !_vm.isGroup ? _c("span", {
+                staticClass: "clear-all",
+                on: {
+                  "click": _vm.handelClearAll
+                }
+              }, [_vm._v(_vm._s(_vm.t("ui.grid.individuation.toolbar.clear")))]) : _vm._e()]), _c("ul", {
+                ref: "list",
+                staticClass: "column-list-panel"
+              }, _vm._l(_vm.visibleColumns, function(column, index) {
+                return _c("li", {
+                  key: column.property + index,
+                  class: [column.fixed, _vm.getRowClassName(column), "column-list-item", !column.expand && "item-collapse"],
+                  attrs: {
+                    "data-tag": "tiny-grid-toolbar-item",
+                    "data-row": column.property
+                  }
+                }, [_c("div", [_vm.defer(Math.floor(index / 3)) ? _c("div", {
+                  staticClass: "column-container",
+                  class: [!_vm.isGroup && "with-padding"]
+                }, [_vm.dropConfig.plugin && !_vm.isGroup ? _c("div", {
+                  staticClass: "drag-icon toolbar-drag-item"
+                }, [_c("span"), _c("span"), _c("span"), _c("span"), _c("span"), _c("span")]) : _vm._e(), _vm.isGroup && column.children ? _c("div", {
+                  staticClass: "toolbar-icon-expand",
+                  class: [column.expand && "toolbar-icon-collapse"]
+                }, [_c("icon-chevron-right", {
+                  on: {
+                    "click": function click($event) {
+                      column.expand = !column.expand;
+                    }
+                  }
+                })], 1) : _vm._e(), !_vm.isGroup ? _c("div", {
+                  staticClass: "sort-number"
+                }, [column.numberSortVisible ? _c("div", {
+                  directives: [{
+                    name: "clickoutside",
+                    rawName: "v-clickoutside",
+                    value: _vm.clickEditorOutside,
+                    expression: "clickEditorOutside"
+                  }],
+                  staticClass: "sort-number-editor"
+                }, [_c("tiny-select", {
+                  ref: "select" + index,
+                  refInFor: true,
+                  attrs: {
+                    "automatic-dropdown": ""
+                  },
+                  on: {
+                    "focus": function focus($event) {
+                      return _vm.selectFocus($event, column.sortingIndex);
+                    },
+                    "change": _vm.sortSelectChange
+                  },
+                  model: {
+                    value: column.sortingIndex,
+                    callback: function callback($$v) {
+                      _vm.$set(column, "sortingIndex", $$v);
+                    },
+                    expression: "column.sortingIndex"
+                  }
+                }, _vm._l(_vm.sortingOptions, function(item) {
+                  return _c("tiny-option", {
+                    key: item,
+                    attrs: {
+                      "label": item,
+                      "value": item
+                    }
+                  });
+                }), 1)], 1) : _c("div", {
+                  staticClass: "sort-number-display",
+                  on: {
+                    "click": function click($event) {
+                      return _vm.clickSortDisplay(column, index);
+                    }
+                  }
+                }, [_vm._v(" " + _vm._s(column.sortingIndex) + " ")])]) : _vm._e(), _c("p", {
+                  staticClass: "name toolbar-drag-item",
+                  class: [_vm.dropConfig.plugin && !_vm.isGroup && "dragable"],
+                  on: {
+                    "mouseenter": _vm.handleMouseenter,
+                    "mouseleave": _vm.handleMouseleave
+                  }
+                }, [_c("title-render", {
+                  attrs: {
+                    "column": column
+                  }
+                })], 1), !_vm.setting.hideFixedColumn && (!_vm.isGroup || !column.children) ? _c("div", {
+                  staticClass: "dropdown-column"
+                }, [_c("tiny-dropdown", {
+                  attrs: {
+                    "show-icon": false,
+                    "trigger": "hover"
+                  },
+                  on: {
+                    "item-click": _vm.handleFixedItemClick
+                  },
+                  scopedSlots: _vm._u([{
+                    key: "dropdown",
+                    fn: function fn3() {
+                      return [_c("tiny-dropdown-menu", {
+                        on: {
+                          "mouseenter": function mouseenter($event) {
+                            return _vm.handleDropdownMouseenter($event, index);
+                          },
+                          "mouseleave": function mouseleave($event) {
+                            return _vm.handleDropdownMouseleave($event, index);
+                          }
+                        }
+                      }, _vm._l(column.fixedOption, function(item) {
+                        return _c("tiny-dropdown-item", {
+                          key: item.value,
+                          attrs: {
+                            "label": item.label,
+                            "item-data": {
+                              value: item.value,
+                              property: column.property
+                            }
+                          }
+                        }, [_vm._v(_vm._s(item.label))]);
+                      }), 1)];
+                    },
+                    proxy: true
+                  }], null, true)
+                }, [_c("span", {
+                  class: ["left", "right"].includes(column.fixed) && "dropdown-btn"
+                }, [column.fixed === "left" ? _c("icon-left-frozen") : column.fixed === "right" ? _c("icon-right-frozen") : _c("span", {
+                  staticClass: "set-btn"
+                }, [_vm._v(_vm._s(_vm.t("ui.grid.individuation.toolbar.set")))])], 1)])], 1) : _vm._e(), !_vm.setting.hideSortColumn ? _c("div", {
+                  staticClass: "dropdown-column",
+                  class: [!column.sortable && "visibility-hidden"]
+                }, [_c("tiny-dropdown", {
+                  attrs: {
+                    "show-icon": false,
+                    "trigger": "hover"
+                  },
+                  on: {
+                    "item-click": _vm.handleSortItemClick
+                  },
+                  scopedSlots: _vm._u([{
+                    key: "dropdown",
+                    fn: function fn3() {
+                      return [_c("tiny-dropdown-menu", {
+                        on: {
+                          "mouseenter": function mouseenter($event) {
+                            return _vm.handleDropdownMouseenter($event, index);
+                          },
+                          "mouseleave": function mouseleave($event) {
+                            return _vm.handleDropdownMouseleave($event, index);
+                          }
+                        }
+                      }, _vm._l(column.sortOption, function(item) {
+                        return _c("tiny-dropdown-item", {
+                          key: item.value,
+                          attrs: {
+                            "label": item.label,
+                            "item-data": {
+                              value: item.value,
+                              property: column.property
+                            }
+                          }
+                        }, [_vm._v(_vm._s(item.label))]);
+                      }), 1)];
+                    },
+                    proxy: true
+                  }], null, true)
+                }, [_c("span", {
+                  class: ["asc", "desc"].includes(column.order) && "dropdown-btn"
+                }, [column.order === "asc" ? _c("icon-ascending") : column.order === "desc" ? _c("icon-descending") : _c("span", {
+                  staticClass: "set-btn",
+                  class: [!column.sortable && "visibility-hidden"]
+                }, [_vm._v(_vm._s(_vm.t("ui.grid.individuation.toolbar.set")))])], 1)])], 1) : _vm._e(), !_vm.isGroup ? _c("span", {
+                  staticClass: "close-icon",
+                  class: [column.alwaysShow && "visibility-hidden"],
+                  on: {
+                    "click": function click($event) {
+                      return _vm.hiddenColumn(column.property);
+                    }
+                  }
+                }, [_c("icon-close")], 1) : _vm._e()]) : _vm._e(), column.children ? _c("ul", _vm._l(column.children, function(column2, index2) {
+                  return _c("li", {
+                    directives: [{
+                      name: "show",
+                      rawName: "v-show",
+                      value: column2.visible,
+                      expression: "column.visible"
+                    }],
+                    key: column2.property + index2,
+                    class: [column2.fixed, _vm.getRowClassName(column2)],
+                    attrs: {
+                      "data-row": column2.property
+                    }
+                  }, [_c("div", {
+                    staticClass: "column-container"
+                  }, [_c("p", {
+                    staticClass: "name child-name",
+                    on: {
+                      "mouseenter": _vm.handleMouseenter,
+                      "mouseleave": _vm.handleMouseleave
+                    }
+                  }, [_c("title-render", {
+                    attrs: {
+                      "column": column2
+                    }
+                  })], 1)])]);
+                }), 0) : _vm._e()])]);
+              }), 0)])];
+            },
+            proxy: true
+          }], null, false, 1239171024),
+          model: {
+            value: _vm.splitVal,
+            callback: function callback($$v) {
+              _vm.splitVal = $$v;
+            },
+            expression: "splitVal"
+          }
+        })], 1), _c("div", {
+          directives: [{
+            name: "show",
+            rawName: "v-show",
+            value: _vm.activeName === "other",
+            expression: "activeName === 'other'"
+          }],
+          class: ["tabs-body-item", _vm.animateShow === "other" ? "active-item" : ""]
+        }, [_c("div", {
+          staticClass: "other-setting"
+        }, [_c("span", {
+          staticClass: "label"
+        }, [_vm._v(_vm._s(_vm.t("ui.grid.individuation.tabs.other.pageSize")))]), _c("tiny-radio-group", {
+          model: {
+            value: _vm.settings.pageSize,
+            callback: function callback($$v) {
+              _vm.$set(_vm.settings, "pageSize", $$v);
+            },
+            expression: "settings.pageSize"
+          }
+        }, _vm._l(_vm.initSettings.pageSizes, function(item, index) {
+          return _c("tiny-radio", {
+            key: index,
+            attrs: {
+              "label": item
+            }
+          }, [_vm._v(_vm._s(item))]);
+        }), 1)], 1)])])]), _c("div", {
+          staticClass: "tiny-grid-custom__footer",
+          attrs: {
+            "dir": _vm.tinyTheme === "saas" ? "rtl" : "ltr"
+          }
+        }, [_c("tiny-button", {
+          attrs: {
+            "type": "primary"
+          },
+          on: {
+            "click": _vm.saveSettings
+          }
+        }, [_vm._v(_vm._s(_vm.t("ui.grid.individuation.saveBtn")))]), _vm.multipleHistory && _vm.activeName === "base" ? _c("tiny-custom-switch", {
+          ref: "switch",
+          attrs: {
+            "remote": _vm.setting.remote,
+            "custom-mode": _vm.customMode,
+            "selectedTemplateVal": _vm.selectedTemplateVal,
+            "history-config": _vm.historyConfig
+          },
+          on: {
+            "init-storage": _vm.initStorage,
+            "set-selected": _vm.setSelectedTemplate
+          }
+        }) : _vm._e(), _c("tiny-button", {
+          on: {
+            "click": _vm.handleReset
+          }
+        }, [_vm._v(_vm._s(_vm.t("ui.grid.individuation.resetBtn")))]), _c("tiny-button", {
+          on: {
+            "click": _vm.cancelSettings
+          }
+        }, [_vm._v(_vm._s(_vm.t("ui.grid.individuation.cancelBtn")))])], 1)]) : _vm._e(), _c("tiny-tooltip", {
+          ref: "tooltip",
+          attrs: {
+            "popper-class": "absolute",
+            "manual": true,
+            "effect": "light",
+            "content": _vm.tooltipContent,
+            "placement": "top"
+          },
+          model: {
+            value: _vm.tooltipVisible,
+            callback: function callback($$v) {
+              _vm.tooltipVisible = $$v;
+            },
+            expression: "tooltipVisible"
+          }
+        })];
+      },
+      proxy: true
+    }]),
+    model: {
+      value: _vm.visible,
+      callback: function callback($$v) {
+        _vm.visible = $$v;
+      },
+      expression: "visible"
+    }
+  });
+};
+var staticRenderFns = [];
+var __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render2, staticRenderFns, false, __vue2_injectStyles);
+function __vue2_injectStyles(context) {
+  for (var o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
+}
+var GridCustomSaas = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+var classMap = {
+  isActive: "is__active"
+};
+function createMacroTask(_ref12) {
+  var _vm = _ref12._vm;
+  setTimeout(function() {
+    if (_vm.settingStore.activeBtn || _vm.settingStore.activeWrapper) return;
+    _vm.closeSetting();
+  }, 300);
+}
+function renderToolsWrapper(_ref13) {
+  var _vm = _ref13._vm, $tools = _ref13.$tools, $grid = _ref13.$grid, table = _ref13.table;
+  return h("div", {
+    class: "tiny-grid-tools__wrapper"
+  }, $tools.call(_vm, {
+    $grid,
+    $table: table
+  }, h));
+}
+function renderFullScreenWrapper(_ref14) {
+  var _vm = _ref14._vm;
+  return h("div", {
+    class: "tiny-grid-fullscreen__wrapper"
+  }, [h("div", {
+    class: "tiny-grid-fullscreen__btn",
+    on: {
+      click: _vm.fullscreenEvent
+    }
+  }, [h(_vm.isFull ? GridConfig.icon.minscreen : GridConfig.icon.fullscreen, {
+    class: "tiny-svg-size"
+  })])]);
+}
+function renderRefreshWrapper(_ref15) {
+  var _vm = _ref15._vm;
+  return h("div", {
+    class: "tiny-grid-refresh__wrapper"
+  }, [h("div", {
+    class: "tiny-grid-refresh__btn",
+    on: {
+      click: _vm.refreshEvent
+    }
+  }, [h(GridConfig.icon.refresh, {
+    class: ["tiny-svg-size", {
+      roll: _vm.isRefresh
+    }]
+  })])]);
+}
+function renderCustomWrapper(_ref16) {
+  var _ref17;
+  var _vm = _ref16._vm, settingStore = _ref16.settingStore, settingsBtnOns = _ref16.settingsBtnOns, tableFullColumn = _ref16.tableFullColumn, setting = _ref16.setting, initSettings = _ref16.initSettings;
+  return h("div", {
+    class: ["tiny-grid-custom__wrapper", (_ref17 = {}, _ref17[classMap.isActive] = settingStore.customVisible, _ref17)],
+    ref: "customWrapper"
+  }, [
+    // TODO: 此处应使用图标按钮，但saas主题图标按钮样式有问题。
+    h("div", {
+      class: "tiny-grid-custom__setting-btn",
+      on: settingsBtnOns
+    }, [setting != null && setting.simple ? h("tiny-grid-custom-select", {
+      on: {
+        saveSettings: _vm.handleSaveSettings
+      },
+      props: {
+        data: tableFullColumn,
+        setting,
+        value: settingStore.customVisible
+      }
+    }) : h(GridConfig.icon.custom, {
+      class: "tiny-svg-size"
+    })]),
+    h("div", {
+      class: "tiny-grid-custom__option-wrapper"
+    }, [h(_vm.customMode === "saas" ? "tiny-grid-custom-saas" : "tiny-grid-custom", {
+      on: {
+        showModal: function showModal(modalVisible) {
+          return settingStore.customVisible = modalVisible;
+        },
+        saveSettings: _vm.handleSaveSettings,
+        resetSettings: function resetSettings3(settings) {
+          return _vm.$emit("reset-setting", settings);
+        },
+        cancelSettings: function cancelSettings3() {
+          return _vm.$emit("cancel-setting");
+        },
+        deleteTemplate: function deleteTemplate2(template) {
+          return _vm.$emit("delete-template", template);
+        }
+      },
+      props: {
+        customMode: _vm.customMode,
+        data: tableFullColumn,
+        value: settingStore.customVisible,
+        other: setting.other,
+        search: setting.search,
+        keys: setting.keys,
+        sortable: setting.sortable,
+        filter: setting.filter,
+        onBeforeMove: setting.onBeforeMove,
+        rowClassName: setting.rowClassName,
+        refresh: setting.refresh,
+        numberSorting: setting.numberSorting,
+        multipleHistory: setting.multipleHistory,
+        initSettings,
+        resetMethod: _vm.resetMethod,
+        alwaysShowColumns: setting.alwaysShowColumns,
+        columnsGroup: setting.columnsGroup,
+        showHideAll: setting.showHideAll,
+        fixedSorting: setting.fixedSorting,
+        setting
+      },
+      ref: "custom"
+    })])
+  ]);
+}
+function getScopedSlots(_ref18) {
+  var item = _ref18.item, _vm = _ref18._vm, vSize2 = _ref18.vSize;
+  var scopedSlots = null;
+  var childHandler = function childHandler2(child) {
+    var res = [null];
+    if (child.visible !== false) {
+      res = h(Button, {
+        on: {
+          click: function click(event) {
+            return _vm.btnEvent(event, child);
+          }
+        },
+        props: {
+          disabled: child.disabled,
+          size: vSize2,
+          loading: child.loading,
+          type: child.type
+        }
+      }, getFuncText(child.name));
+    }
+    return res;
+  };
+  if (item.dropdowns && item.dropdowns.length) {
+    scopedSlots = {
+      default: function _default17() {
+        return getFuncText(item.name);
+      },
+      dropdowns: function dropdowns() {
+        return item.dropdowns.map(childHandler);
+      }
+    };
+  }
+  return scopedSlots;
+}
+function renderButtonWrapper(_ref19) {
+  var _childrenArg;
+  var _vm = _ref19._vm, $buttons = _ref19.$buttons, $grid = _ref19.$grid, table = _ref19.table, buttons = _ref19.buttons, vSize2 = _ref19.vSize;
+  var childrenArg;
+  if ($buttons) {
+    childrenArg = $buttons.call(_vm, {
+      $grid,
+      $table: table
+    }, h);
+  } else {
+    childrenArg = buttons.map(function(item) {
+      var res = [null];
+      if (item.visible !== false) {
+        var scopedSlots = getScopedSlots({
+          item,
+          _vm,
+          vSize: vSize2
+        });
+        res = h(Button, {
+          on: {
+            click: function click(event) {
+              return _vm.btnEvent(event, item);
+            }
+          },
+          props: {
+            disabled: item.disabled,
+            size: vSize2,
+            loading: item.loading,
+            type: item.type
+          },
+          scopedSlots
+        }, getFuncText(item.name));
+      }
+      return res;
+    });
+  }
+  return (_childrenArg = childrenArg) != null && _childrenArg.length ? h("div", {
+    class: "tiny-grid-button__wrapper"
+  }, childrenArg) : null;
+}
+var GridToolbar = defineComponent({
+  name: $prefix + "GridToolbar",
+  components: {
+    TinyGridCustom: GridCustom,
+    TinyGridCustomSelect: GridCustomSelect,
+    TinyGridCustomSaas: GridCustomSaas,
+    IconFullscreen: iconFullscreen(),
+    IconMinscreen: iconMinscreen()
+  },
+  props: _extends({}, $props, {
+    id: String,
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    customMode: {
+      type: String,
+      default: function _default12() {
+        var ctx = appProperties();
+        return (ctx.tiny_theme ? ctx.tiny_theme.value : "") || "aurora";
+      }
+    },
+    resizable: {
+      type: [Boolean, Object],
+      default: function _default13() {
+        return GridConfig.toolbar.resizable;
+      }
+    },
+    refresh: {
+      type: [Boolean, Object],
+      default: function _default14() {
+        return GridConfig.toolbar.refresh;
+      }
+    },
+    setting: {
+      type: [Boolean, Object],
+      default: function _default15() {
+        return GridConfig.toolbar.setting;
+      }
+    },
+    fullScreen: {
+      type: Boolean,
+      default: false
+    },
+    buttons: {
+      type: Array,
+      default: function _default16() {
+        return GridConfig.toolbar.buttons;
+      }
+    },
+    size: String,
+    data: Array,
+    customs: Array,
+    beforeOpenFullScreen: Function,
+    beforeCloseFullScreen: Function,
+    resetMethod: Function
+  }),
+  inject: {
+    $grid: {
+      default: null
+    }
+  },
+  data: function data5() {
+    return {
+      table: null,
+      isRefresh: false,
+      tableFullColumn: [],
+      initSettings: {
+        pageSizes: [],
+        pageSize: 10,
+        sortType: "page",
+        showIndex: false,
+        multipleHistory: {
+          tableMaxHeight: "",
+          showTitle: true,
+          title: "",
+          showSave: true,
+          saveDisabled: false,
+          saveText: "",
+          labelText: "",
+          selectPlaceholder: "",
+          selectDisabled: false,
+          showApply: true,
+          applyDisabled: false,
+          applyTitle: "",
+          applyIcon: null,
+          showEdit: true,
+          editDisabled: false,
+          editTitle: "",
+          editIcon: null,
+          showDel: true,
+          delDisabled: false,
+          delTitle: "",
+          delIcon: null,
+          storageKey: "TINY_TABLE_MULTI_HISTORY_SETTING",
+          remoteMethod: null,
+          userKey: "",
+          // userId or userAccount
+          remoteSelectedMethod: null
+        }
+      },
+      settingStore: {
+        visible: false,
+        customVisible: false
+      },
+      isFull: false
+    };
+  },
+  computed: {
+    vSize: function vSize() {
+      return this.size || this.$parent.size || this.$parent.vSize;
+    },
+    refreshOpts: function refreshOpts() {
+      return _extends({}, GridConfig.toolbar.refresh, this.refresh);
+    },
+    resizableOpts: function resizableOpts() {
+      return _extends({
+        storageKey: "TINY_TABLE_CUSTOM_COLUMN_WIDTH"
+      }, GridConfig.toolbar.resizable, this.resizable);
+    },
+    settingOpts: function settingOpts() {
+      return _extends({
+        storageKey: "TINY_TABLE_CUSTOM_SETTING"
+      }, GridConfig.toolbar.setting, this.setting);
+    }
+  },
+  created: function created5() {
+    var _this30 = this;
+    var settingOpts2 = this.settingOpts, id = this.id, customs = this.customs, $grid = this.$grid;
+    this.initSettings.pageSizes = $grid.pagerConfig && $grid.pagerConfig.pageSizes || [10, 15, 20, 30, 50, 100];
+    this.initSettings.pageSize = $grid.pagerConfig && $grid.pagerConfig.pageSize || 10;
+    this.initSettings.sortType = this.setting && this.setting.sortType || "page";
+    this.initSettings.showIndex = this.setting && this.setting.showIndex;
+    if (settingOpts2.storage === "local") {
+      this.initSettings = Object.assign(this.initSettings, this.getStorageMap(settingOpts2.storageKey)[id] || {});
+    }
+    if (customs) {
+      this.tableFullColumn = customs;
+    }
+    if (settingOpts2.storage && !id) {
+      return GridTools.error("ui.grid.error.toolbarId");
+    }
+    this.loadStorage();
+    GlobalEvent.on(this, "mousedown", this.handleGlobalMousedownEvent);
+    GlobalEvent.on(this, "blur", this.handleGlobalBlurEvent);
+    this.removeHandler = function() {
+      GlobalEvent.off(_this30, "mousedown");
+      GlobalEvent.off(_this30, "blur");
+    };
+    this.$grid.connect({
+      name: "toolbar",
+      vm: this
+    });
+  },
+  setup: function setup2(props, _ref20) {
+    var slots = _ref20.slots, attrs = _ref20.attrs, listeners = _ref20.listeners;
+    var instance = hooks.getCurrentInstance().proxy;
+    var tableListeners = getListeners(attrs, listeners);
+    hooks.onBeforeUnmount(function() {
+      return typeof instance.removeHandler === "function" && instance.removeHandler();
+    });
+    return {
+      slots,
+      tableListeners
+    };
+  },
+  render: function render4() {
+    var _ref21;
+    var $grid = this.$grid, $slots = this.slots, table = this.table, loading = this.loading, settingStore = this.settingStore, refresh = this.refresh, fullScreen = this.fullScreen;
+    var setting = this.setting, initSettings = this.initSettings, _this$buttons = this.buttons, buttons = _this$buttons === void 0 ? [] : _this$buttons, vSize2 = this.vSize, tableFullColumn = this.tableFullColumn;
+    var $buttons = $slots.buttons, $tools = $slots.tools;
+    var settingsBtnOns = {};
+    setting && (settingsBtnOns.click = this.settingBtnClick);
+    var map = {
+      isLoading: "is__loading"
+    };
+    var propsArg = {
+      class: ["tiny-grid-toolbar", (_ref21 = {}, _ref21["size__" + vSize2] = vSize2, _ref21[map.isLoading] = loading, _ref21)]
+    };
+    var args = {
+      _vm: this,
+      settingStore,
+      settingsBtnOns,
+      tableFullColumn,
+      setting,
+      initSettings
+    };
+    var defaultSlot = function defaultSlot2() {
+      return typeof $slots.default === "function" ? $slots.default() : $slots.default;
+    };
+    var childrenArg = [renderButtonWrapper({
+      _vm: this,
+      $buttons,
+      $grid,
+      table,
+      buttons,
+      vSize: vSize2
+    }), setting ? renderCustomWrapper(args) : null, refresh ? renderRefreshWrapper({
+      _vm: this
+    }) : null, fullScreen ? renderFullScreenWrapper({
+      _vm: this
+    }) : null, $tools ? renderToolsWrapper({
+      _vm: this,
+      $tools,
+      $grid,
+      table
+    }) : defaultSlot()];
+    return h("div", propsArg, childrenArg);
+  },
+  methods: {
+    updateTemplateList: function updateTemplateList() {
+      var custom = this.$refs.custom;
+      if (custom && custom.$refs.switch) {
+        custom.$refs.switch.initStorage(false);
+      }
+    },
+    updateSelectedTemplate: function updateSelectedTemplate2(val) {
+      var custom = this.$refs.custom;
+      custom && custom.updateSelectedTemplate(val);
+    },
+    settingBtnClick: function settingBtnClick() {
+      var _this$setting;
+      if ((_this$setting = this.setting) != null && _this$setting.simple) {
+        return;
+      }
+      return this.setting && this.setting.customSetting ? this.setting.settingBtnClickFn() : this.handleClickCustomEvent();
+    },
+    updateConf: function updateConf() {
+      var _this31 = this;
+      var data6 = this.data;
+      var $children = this.$parent.$children;
+      var findHandler = function findHandler2(childComp, childIndex) {
+        return childComp && childComp.refreshColumn && childIndex > $children.indexOf(_this31) && (data6 ? childComp.data === data6 : childComp.$vnode.componentOptions.tag === "tiny-grid-table");
+      };
+      this.table = find$1($children, findHandler);
+    },
+    closeSetting: function closeSetting() {
+      var setting = this.setting;
+      var settingStore = this.settingStore;
+      if (settingStore.visible) {
+        settingStore.visible = false;
+      }
+      if (settingStore.visible && setting && !settingStore.immediate) {
+        this.updateSetting();
+      }
+    },
+    openSetting: function openSetting() {
+      this.settingStore.visible = true;
+    },
+    showAllColumns: function showAllColumns() {
+      this.$refs.custom.showOrHideAllColumns(true);
+    },
+    hideAllColumns: function hideAllColumns() {
+      this.$refs.custom.showOrHideAllColumns(false);
+    },
+    orderSetting: function orderSetting() {
+      var id = this.id, settingOpts2 = this.settingOpts;
+      var allData = [];
+      var custumSetting = JSON.parse(localStorage.getItem(settingOpts2.storageKey));
+      if (custumSetting) {
+        var customName = custumSetting[id];
+        allData = customName && customName.columns || [];
+      }
+      var orderArg = allData.map(function(value3) {
+        return {
+          fileds: value3.property,
+          property: value3.property,
+          order: value3.order,
+          prop: value3.property
+        };
+      }).filter(function(item) {
+        return item.order !== null;
+      });
+      return orderArg;
+    },
+    loadColWidth: function loadColWidth() {
+      var id = this.id, resizableOpts2 = this.resizableOpts;
+      if (resizableOpts2.storage) {
+        var width = this.getStorageMap(resizableOpts2.storageKey)[id] || {};
+        {
+          var widthSet = {};
+          for (var key in width) {
+            if (Object.prototype.hasOwnProperty.call(width, key)) {
+              widthSet[key] = {
+                resizeWidth: width[key]
+              };
+            }
+          }
+          return widthSet;
+        }
+      }
+    },
+    loadStorage: function loadStorage() {
+      var _this32 = this;
+      var $grid = this.$grid, id = this.id, resizable = this.resizable, setting = this.setting, settingOpts2 = this.settingOpts;
+      if (!$grid) {
+        return;
+      }
+      if (resizable || setting) {
+        var customSettings = [];
+        if ($grid) {
+          $grid.connect({
+            toolbar: this
+          });
+        } else {
+          throw new Error("[tiny-grid-toolbar] Not found tiny-grid.");
+        }
+        if (settingOpts2.storage === "local") {
+          var settingsStorage = this.getStorageMap(settingOpts2.storageKey)[id];
+          customSettings = settingsStorage && settingsStorage.columns || [];
+          if (settingsStorage && settingsStorage.pageSize) {
+            var pageSize = settingsStorage.pageSize;
+            if (this.$grid.pagerConfig && this.$grid.pagerConfig.pageSize !== pageSize) {
+              this.$grid.createJob("pageSizeChangeCallback", function() {
+                _this32.$grid.pageSizeChange(pageSize, $grid.autoLoad === false);
+              });
+            }
+          }
+        }
+        this.$grid.createJob("updateCustomsCallback", function() {
+          _this32.updateCustoms(customSettings.length ? customSettings : _this32.tableFullColumn);
+        });
+      }
+    },
+    updateColumn: function updateColumn(fullColumn) {
+      this.tableFullColumn = fullColumn;
+    },
+    updateCustoms: function updateCustoms(customs) {
+      var _this33 = this;
+      var $grid = this.$grid, table = this.table, setting = this.setting;
+      var comp = $grid || table;
+      var sort = setting && !!setting.sortable;
+      if (comp) {
+        var colWidth = this.loadColWidth();
+        comp.reloadCustoms(customs, sort, colWidth).then(function(fullColumn) {
+          _this33.tableFullColumn = fullColumn;
+        });
+      }
+    },
+    getStorageMap: function getStorageMap(key) {
+      var version2 = GridConfig.version;
+      var rest = toStringJSON(localStorage.getItem(key));
+      return rest && rest._v === version2 ? rest : {
+        _v: version2
+      };
+    },
+    // 保存 'fixed', 'visible', 'order' 列的个性化配置
+    saveCustomSettings: function saveCustomSettings(columnConfigs) {
+      var id = this.id, settingOpts2 = this.settingOpts;
+      if (settingOpts2.storage === "local") {
+        var settingsStorageMap = this.getStorageMap(settingOpts2.storageKey);
+        var settingsStorage = settingsStorageMap[id] || {};
+        settingsStorage.columns = columnConfigs;
+        settingsStorageMap[id] = settingsStorage;
+        localStorage.setItem(settingOpts2.storageKey, toJSONString(settingsStorageMap));
+      }
+      return this.$nextTick();
+    },
+    // 保存分页、排序类型数据数据
+    savePagerSettings: function savePagerSettings(settingConfigs) {
+      var id = this.id, settingOpts2 = this.settingOpts;
+      if (settingOpts2.storage) {
+        var settingsStorageMap = this.getStorageMap(settingOpts2.storageKey);
+        var settingsStorage = settingsStorageMap[id];
+        if (settingsStorage) {
+          Object.assign(settingsStorage, settingConfigs);
+        } else {
+          settingsStorage = settingConfigs;
+        }
+        settingsStorageMap[id] = settingsStorage;
+        localStorage.setItem(settingOpts2.storageKey, toJSONString(settingsStorageMap));
+      }
+      return this.$nextTick();
+    },
+    // 只保存隐藏列配置
+    saveColumnHide: function saveColumnHide() {
+      var id = this.id, tableFullColumn = this.tableFullColumn, settingOpts2 = this.settingOpts;
+      if (settingOpts2.storage) {
+        var columnHideStorageMap = this.getStorageMap(settingOpts2.storageKey);
+        var colHides = tableFullColumn.filter(function(column) {
+          return column.property && !column.visible;
+        });
+        columnHideStorageMap[id] = colHides.length ? colHides.map(function(column) {
+          return column.property;
+        }).join(",") : void 0;
+        this.$refs.custom && this.$refs.custom.saveSettings();
+      }
+      return this.$nextTick();
+    },
+    saveColumnWidth: function saveColumnWidth(isReset) {
+      var id = this.id, resizableOpts2 = this.resizableOpts, tableFullColumn = this.tableFullColumn;
+      var storage = resizableOpts2.storage, storageKey = resizableOpts2.storageKey;
+      var columnWidthStorageMap;
+      if (storage) {
+        columnWidthStorageMap = this.getStorageMap(storageKey);
+      }
+      var columnWidthStorage;
+      if (storage && !isReset) {
+        columnWidthStorage = columnWidthStorageMap[id];
+        columnWidthStorage = isPlainObject(columnWidthStorage) ? columnWidthStorage : {};
+        tableFullColumn.forEach(function(_ref22) {
+          var property = _ref22.property, resizeWidth = _ref22.resizeWidth, renderWidth = _ref22.renderWidth;
+          if (property && resizeWidth) {
+            columnWidthStorage[property] = renderWidth;
+          }
+        });
+      }
+      if (storage) {
+        columnWidthStorageMap[id] = isEmpty(columnWidthStorage) ? void 0 : columnWidthStorage;
+        localStorage.setItem(storageKey, toJSONString(columnWidthStorageMap));
+      }
+      return this.$nextTick();
+    },
+    resetResizable: function resetResizable() {
+      this.updateResizable(this);
+    },
+    updateResizable: function updateResizable(isReset) {
+      var tableComp = this.$grid || this.table;
+      this.saveColumnWidth(isReset);
+      tableComp.analyColumnWidth();
+      return tableComp.recalculate();
+    },
+    updateSetting: function updateSetting() {
+      var _this34 = this;
+      var tableComp = this.$grid || this.table;
+      tableComp.refreshColumn();
+      this.tableFullColumn = this.tableFullColumn.slice(0);
+      return this.$nextTick(function() {
+        return _this34.$refs.custom && _this34.$refs.custom.saveSettings();
+      });
+    },
+    applySettings: function applySettings(_ref23) {
+      var _this35 = this;
+      var columns = _ref23.columns, pageSize = _ref23.pageSize, updatedSorting = _ref23.updatedSorting;
+      var sort = this.setting && !!this.setting.sortable || updatedSorting;
+      if (this.$grid) {
+        if (columns && columns.length) {
+          var colWidth = this.loadColWidth();
+          this.$grid.reloadCustoms(columns, sort, colWidth).then(function() {
+            _this35.$grid.handleTableData(true).then(function() {
+              _this35.$grid.recalculate();
+            });
+          });
+        }
+        if (isNumber(pageSize) && this.$grid.pagerConfig && this.$grid.pagerConfig.pageSize !== pageSize) {
+          this.$grid.pageSizeChange(pageSize);
+        }
+      }
+    },
+    handleSaveSettings: function handleSaveSettings(settingConfigs, visible, updatedSorting) {
+      var settingStore = this.settingStore, setting = this.setting, settingOpts2 = this.settingOpts;
+      var customRef = this.$refs.custom;
+      settingStore.customVisible = false;
+      var columns = settingConfigs.columns, pageSize = settingConfigs.pageSize, sortType = settingConfigs.sortType;
+      this.applySettings({
+        columns,
+        pageSize,
+        updatedSorting
+      });
+      if (setting && settingOpts2.storage === "local") {
+        var pagerSettings = {
+          pageSize,
+          sortType,
+          id: null
+        };
+        if (setting.multipleHistory && customRef.multipleHistoryId) {
+          pagerSettings.id = customRef.multipleHistoryId;
+          customRef.multipleHistoryId = null;
+        }
+        this.saveCustomSettings(columns);
+        this.savePagerSettings(pagerSettings);
+      } else if (setting && settingOpts2.storage === "remote") {
+        if (settingOpts2.remote) {
+          this.$emit("remote-setting", settingConfigs);
+          if (setting.multipleHistory) {
+            var _settingOpts$storageK, _toJSONString2;
+            this.$emit("multiple-history-option", toJSONString((_toJSONString2 = {}, _toJSONString2[settingOpts2.storageKey] = (_settingOpts$storageK = {}, _settingOpts$storageK[this.id] = _extends({}, settingConfigs, {
+              id: customRef.multipleHistoryId || null
+            }), _settingOpts$storageK), _toJSONString2)));
+            customRef.multipleHistoryId = null;
+          }
+        }
+      }
+      this.$emit("save-setting", settingConfigs);
+    },
+    handleGlobalMousedownEvent: function handleGlobalMousedownEvent(event) {
+      if (!getEventTargetNode(event, this.$refs.customWrapper).flag) {
+        this.closeSetting();
+      }
+    },
+    handleGlobalBlurEvent: function handleGlobalBlurEvent() {
+      this.closeSetting();
+    },
+    // NEXT 未用到
+    handleClickSettingEvent: function handleClickSettingEvent() {
+      var settingStore = this.settingStore;
+      settingStore.visible = !settingStore.visible;
+    },
+    handleClickCustomEvent: function handleClickCustomEvent() {
+      var settingStore = this.settingStore;
+      this.$refs.custom.settings.pageSize = this.$grid.pagerConfig && this.$grid.pagerConfig.pageSize || this.settingOpts.storage === "local" && this.$refs.custom.settings.pageSize || 10;
+      settingStore.customVisible = !settingStore.customVisible;
+    },
+    // NEXT 未用到
+    handleMouseenterSettingEvent: function handleMouseenterSettingEvent() {
+      this.settingStore.activeBtn = true;
+      this.openSetting();
+    },
+    // NEXT 未用到
+    handleMouseleaveSettingEvent: function handleMouseleaveSettingEvent() {
+      this.settingStore.activeBtn = false;
+      createMacroTask({
+        _vm: this
+      });
+    },
+    // NEXT 未用到
+    handleWrapperMouseenterEvent: function handleWrapperMouseenterEvent() {
+      this.settingStore.activeWrapper = true;
+      this.openSetting();
+    },
+    // NEXT 未用到
+    handleWrapperMouseleaveEvent: function handleWrapperMouseleaveEvent() {
+      this.settingStore.activeWrapper = false;
+      createMacroTask({
+        _vm: this
+      });
+    },
+    refreshEvent: function refreshEvent() {
+      var _this36 = this;
+      var $grid = this.$grid, isRefresh = this.isRefresh, refreshOpts2 = this.refreshOpts;
+      var catchHandler = function catchHandler2(e) {
+        return e;
+      };
+      var nextHandler = function nextHandler2() {
+        return _this36.isRefresh = false;
+      };
+      if (isRefresh) return;
+      this.isRefresh = true;
+      if (refreshOpts2.query) {
+        refreshOpts2.query().catch(catchHandler).then(nextHandler);
+        return;
+      }
+      if ($grid && $grid.fetchData) {
+        $grid.commitProxy("reload").catch(catchHandler).then(nextHandler);
+        return;
+      }
+      if ($grid) {
+        $grid.refreshData().then(nextHandler);
+      }
+    },
+    btnEvent: function btnEvent(event, item) {
+      var $grid = this.$grid, table = this.table, tableListeners = this.tableListeners;
+      var code = item.code;
+      if (code) {
+        if ($grid && !tableListeners["button-click"]) {
+          $grid.triggerToolbarBtnEvent(item, event);
+        } else {
+          var btnMethod = GridAdapter.buttons.get(code);
+          var params = {
+            code,
+            button: item,
+            $grid,
+            $table: table
+          };
+          if (btnMethod) {
+            btnMethod.call(this, params, event);
+          }
+          emitEvent(this, "button-click", [params, event]);
+        }
+      }
+    },
+    fullscreenEvent: function fullscreenEvent() {
+      var beforeOpenFullScreen;
+      var beforeCloseFullScreen;
+      var interceptFullScreen;
+      var show = !this.isFull;
+      if (this.fullScreen) {
+        beforeOpenFullScreen = this.beforeOpenFullScreen;
+        beforeCloseFullScreen = this.beforeCloseFullScreen;
+        interceptFullScreen = show && typeof beforeOpenFullScreen === "function" && !beforeOpenFullScreen() || !show && typeof beforeCloseFullScreen === "function" && !beforeCloseFullScreen();
+        if (interceptFullScreen) return;
+      }
+      if (this.$grid) {
+        this.isFull = !this.isFull;
+        this.$grid.commitProxy("fullscreen", this.isFull);
+      }
+    }
+  }
+});
+var version = "2.21.0";
+GridToolbar.install = function(Vue) {
+  Vue.component(GridToolbar.name, GridToolbar);
+};
+GridToolbar.version = version;
+
+export { GridToolbar as default };