@blueking/vxe-table/lib/table/module/custom/hook.js

一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟树、列拖拽，懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...

"use strict";

var _vue = require("vue");
var _ui = require("../../../ui");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const tableCustomMethodKeys = ['openCustom', 'closeCustom', 'saveCustom', 'cancelCustom', 'resetCustom', 'toggleCustomAllCheckbox', 'setCustomAllCheckbox'];
_ui.VxeUI.hooks.add('tableCustomModule', {
  setupTable($xeTable) {
    const {
      reactData,
      internalData
    } = $xeTable;
    const {
      computeCustomOpts
    } = $xeTable.getComputeMaps();
    const {
      refElem
    } = $xeTable.getRefMaps();
    const $xeGrid = $xeTable.xegrid;
    const calcMaxHeight = () => {
      const {
        customStore
      } = reactData;
      const el = refElem.value;
      // 判断面板不能大于表格高度
      let tableHeight = 0;
      if (el) {
        tableHeight = el.clientHeight - 28;
      }
      customStore.maxHeight = Math.max(88, tableHeight);
    };
    const openCustom = () => {
      const {
        initStore,
        customStore
      } = reactData;
      customStore.visible = true;
      initStore.custom = true;
      handleUpdateCustomColumn();
      checkCustomStatus();
      calcMaxHeight();
      return (0, _vue.nextTick)().then(() => calcMaxHeight());
    };
    const handleUpdateCustomColumn = () => {
      const {
        customStore
      } = reactData;
      const {
        collectColumn
      } = internalData;
      if (customStore.visible) {
        const sortMaps = {};
        const fixedMaps = {};
        const visibleMaps = {};
        _xeUtils.default.eachTree(collectColumn, column => {
          const colid = column.getKey();
          column.renderFixed = column.fixed;
          column.renderVisible = column.visible;
          column.renderResizeWidth = column.renderWidth;
          sortMaps[colid] = column.renderSortNumber;
          fixedMaps[colid] = column.fixed;
          visibleMaps[colid] = column.visible;
        });
        customStore.oldSortMaps = sortMaps;
        customStore.oldFixedMaps = fixedMaps;
        customStore.oldVisibleMaps = visibleMaps;
        reactData.customColumnList = collectColumn.slice(0);
      }
    };
    const closeCustom = () => {
      const {
        customStore
      } = reactData;
      const customOpts = computeCustomOpts.value;
      if (customStore.visible) {
        customStore.visible = false;
        if (!customOpts.immediate) {
          $xeTable.handleCustom();
        }
      }
      return (0, _vue.nextTick)();
    };
    const saveCustom = () => {
      const {
        customColumnList
      } = reactData;
      const customOpts = computeCustomOpts.value;
      const {
        allowVisible,
        allowSort,
        allowFixed,
        allowResizable
      } = customOpts;
      _xeUtils.default.eachTree(customColumnList, (column, index, items, path, parentColumn) => {
        if (parentColumn) {
          // 更新子列信息
          column.fixed = parentColumn.fixed;
        } else {
          if (allowSort) {
            const sortIndex = index + 1;
            column.renderSortNumber = sortIndex;
          }
          if (allowFixed) {
            column.fixed = column.renderFixed;
          }
        }
        if (allowResizable) {
          if (column.renderVisible && (!column.children || column.children.length)) {
            if (column.renderResizeWidth !== column.renderWidth) {
              column.resizeWidth = column.renderResizeWidth;
              column.renderWidth = column.renderResizeWidth;
            }
          }
        }
        if (allowVisible) {
          column.visible = column.renderVisible;
        }
      });
      reactData.isCustomStatus = true;
      reactData.isDragColMove = true;
      setTimeout(() => {
        reactData.isDragColMove = false;
      }, 1000);
      return $xeTable.saveCustomStore('confirm');
    };
    const cancelCustom = () => {
      const {
        customColumnList,
        customStore
      } = reactData;
      const {
        oldSortMaps,
        oldFixedMaps,
        oldVisibleMaps
      } = customStore;
      const customOpts = computeCustomOpts.value;
      const {
        allowVisible,
        allowSort,
        allowFixed,
        allowResizable
      } = customOpts;
      _xeUtils.default.eachTree(customColumnList, column => {
        const colid = column.getKey();
        const visible = !!oldVisibleMaps[colid];
        const fixed = oldFixedMaps[colid] || '';
        if (allowVisible) {
          column.renderVisible = visible;
          column.visible = visible;
        }
        if (allowFixed) {
          column.renderFixed = fixed;
          column.fixed = fixed;
        }
        if (allowSort) {
          column.renderSortNumber = oldSortMaps[colid] || 0;
        }
        if (allowResizable) {
          column.renderResizeWidth = column.renderWidth;
        }
      }, {
        children: 'children'
      });
      return (0, _vue.nextTick)();
    };
    const setCustomAllCheckbox = checked => {
      const {
        customStore
      } = reactData;
      const {
        customColumnList
      } = reactData;
      const customOpts = computeCustomOpts.value;
      const {
        checkMethod,
        visibleMethod
      } = customOpts;
      const isAll = !!checked;
      if (customOpts.immediate) {
        _xeUtils.default.eachTree(customColumnList, column => {
          if (visibleMethod && !visibleMethod({
            column
          })) {
            return;
          }
          if (checkMethod && !checkMethod({
            column
          })) {
            return;
          }
          column.visible = isAll;
          column.renderVisible = isAll;
          column.halfVisible = false;
        });
        customStore.isAll = isAll;
        reactData.isCustomStatus = true;
        $xeTable.handleCustom();
        $xeTable.saveCustomStore('update:visible');
      } else {
        _xeUtils.default.eachTree(customColumnList, column => {
          if (visibleMethod && !visibleMethod({
            column
          })) {
            return;
          }
          if (checkMethod && !checkMethod({
            column
          })) {
            return;
          }
          column.renderVisible = isAll;
          column.halfVisible = false;
        });
        customStore.isAll = isAll;
      }
      $xeTable.checkCustomStatus();
      return (0, _vue.nextTick)();
    };
    const customMethods = {
      openCustom,
      closeCustom,
      saveCustom,
      cancelCustom,
      resetCustom(options) {
        const {
          collectColumn
        } = internalData;
        const customOpts = computeCustomOpts.value;
        const {
          checkMethod
        } = customOpts;
        const opts = Object.assign({
          visible: true,
          resizable: options === true,
          fixed: options === true,
          sort: options === true
        }, options);
        _xeUtils.default.eachTree(collectColumn, column => {
          if (opts.resizable) {
            column.resizeWidth = 0;
          }
          if (opts.fixed) {
            column.fixed = column.defaultFixed;
          }
          if (opts.sort) {
            column.renderSortNumber = column.sortNumber;
          }
          if (!checkMethod || checkMethod({
            column
          })) {
            column.visible = column.defaultVisible;
          }
          column.renderResizeWidth = column.renderWidth;
        });
        reactData.isCustomStatus = false;
        $xeTable.saveCustomStore('reset');
        return $xeTable.handleCustom();
      },
      toggleCustomAllCheckbox() {
        const {
          customStore
        } = reactData;
        const isAll = !customStore.isAll;
        return setCustomAllCheckbox(isAll);
      },
      setCustomAllCheckbox
    };
    const checkCustomStatus = () => {
      const {
        customStore
      } = reactData;
      const {
        collectColumn
      } = internalData;
      const customOpts = computeCustomOpts.value;
      const {
        checkMethod
      } = customOpts;
      customStore.isAll = collectColumn.every(column => (checkMethod ? !checkMethod({
        column
      }) : false) || column.renderVisible);
      customStore.isIndeterminate = !customStore.isAll && collectColumn.some(column => (!checkMethod || checkMethod({
        column
      })) && (column.renderVisible || column.halfVisible));
    };
    const emitCustomEvent = (type, evnt) => {
      const comp = $xeGrid || $xeTable;
      comp.dispatchEvent('custom', {
        type
      }, evnt);
    };
    const customPrivateMethods = {
      checkCustomStatus,
      emitCustomEvent,
      triggerCustomEvent(evnt) {
        const {
          customStore
        } = $xeTable.reactData;
        if (customStore.visible) {
          closeCustom();
          emitCustomEvent('close', evnt);
        } else {
          customStore.btnEl = evnt.target;
          openCustom();
          emitCustomEvent('open', evnt);
        }
      },
      customOpenEvent(evnt) {
        const {
          customStore
        } = reactData;
        if (!customStore.visible) {
          customStore.activeBtn = true;
          customStore.btnEl = evnt.target;
          $xeTable.openCustom();
          $xeTable.emitCustomEvent('open', evnt);
        }
      },
      customCloseEvent(evnt) {
        const {
          customStore
        } = reactData;
        if (customStore.visible) {
          customStore.activeBtn = false;
          $xeTable.closeCustom();
          $xeTable.emitCustomEvent('close', evnt);
        }
      },
      handleUpdateCustomColumn
    };
    return Object.assign(Object.assign({}, customMethods), customPrivateMethods);
  },
  setupGrid($xeGrid) {
    return $xeGrid.extendTableMethods(tableCustomMethodKeys);
  }
});