vxe-table 4.16.17 → 4.16.19

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

@@ -0,0 +1,430 @@
+"use strict";
+
+var _vue = require("vue");
+var _ui = require("../../../ui");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _util = require("../../src/util");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const tableCustomMethodKeys = ['openCustom', 'closeCustom', 'toggleCustom', 'saveCustom', 'cancelCustom', 'resetCustom', 'toggleCustomAllCheckbox', 'setCustomAllCheckbox'];
+_ui.VxeUI.hooks.add('tableCustomModule', {
+  setupTable($xeTable) {
+    const {
+      reactData,
+      internalData
+    } = $xeTable;
+    const {
+      computeCustomOpts,
+      computeRowGroupFields
+    } = $xeTable.getComputeMaps();
+    const {
+      refElem
+    } = $xeTable.getRefMaps();
+    const $xeGrid = $xeTable.xeGrid;
+    const $xeGantt = $xeTable.xeGantt;
+    const calcMaxHeight = () => {
+      const {
+        customStore
+      } = reactData;
+      let wrapperEl = refElem.value;
+      // 判断面板不能大于表格高度
+      let tableHeight = 0;
+      if ($xeGantt) {
+        const {
+          refGanttContainerElem
+        } = $xeGantt.getRefMaps();
+        const ganttContainerElem = refGanttContainerElem.value;
+        if (ganttContainerElem) {
+          wrapperEl = ganttContainerElem;
+        }
+      }
+      if (wrapperEl) {
+        tableHeight = wrapperEl.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 toggleCustom = () => {
+      const {
+        customStore
+      } = reactData;
+      if (customStore.visible) {
+        return closeCustom();
+      }
+      return openCustom();
+    };
+    const saveCustom = () => {
+      const {
+        customColumnList,
+        aggHandleFields,
+        rowGroupList
+      } = reactData;
+      const customOpts = computeCustomOpts.value;
+      const {
+        allowVisible,
+        allowSort,
+        allowFixed,
+        allowResizable,
+        allowGroup,
+        allowValues
+      } = 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;
+        }
+        if (allowGroup && allowValues) {
+          column.aggFunc = column.renderAggFn;
+        }
+      });
+      reactData.isCustomStatus = true;
+      if (allowGroup && !!$xeTable.handlePivotTableAggregateData) {
+        if (rowGroupList.length !== aggHandleFields.length || rowGroupList.some((conf, i) => conf.field !== aggHandleFields[i])) {
+          // 更新数据分组
+          if (aggHandleFields.length) {
+            $xeTable.setRowGroups(aggHandleFields);
+          } else {
+            $xeTable.clearRowGroups();
+          }
+        } else if (allowValues) {
+          // 更新聚合函数
+          $xeTable.handleUpdateAggData();
+        }
+      }
+      if (allowSort) {
+        internalData.collectColumn = customColumnList;
+      }
+      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({
+            $table: $xeTable,
+            column
+          })) {
+            return;
+          }
+          if (checkMethod && !checkMethod({
+            $table: $xeTable,
+            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({
+            $table: $xeTable,
+            column
+          })) {
+            return;
+          }
+          if (checkMethod && !checkMethod({
+            $table: $xeTable,
+            column
+          })) {
+            return;
+          }
+          column.renderVisible = isAll;
+          column.halfVisible = false;
+        });
+        customStore.isAll = isAll;
+      }
+      $xeTable.checkCustomStatus();
+      return (0, _vue.nextTick)();
+    };
+    const customMethods = {
+      getCustomVisible() {
+        const {
+          customStore
+        } = reactData;
+        return customStore.visible;
+      },
+      openCustom,
+      closeCustom,
+      toggleCustom,
+      saveCustom,
+      cancelCustom,
+      resetCustom(options) {
+        const {
+          rowGroupList
+        } = reactData;
+        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,
+          aggFunc: options === true
+        }, options);
+        const allCols = [];
+        _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;
+            column.parentId = column.defaultParentId;
+          }
+          if (!checkMethod || checkMethod({
+            $table: $xeTable,
+            column
+          })) {
+            column.visible = column.defaultVisible;
+          }
+          if (opts.aggFunc) {
+            column.aggFunc = column.defaultAggFunc;
+            column.renderAggFn = column.defaultAggFunc;
+          }
+          column.renderResizeWidth = column.renderWidth;
+          allCols.push(column);
+        });
+        if (opts.sort) {
+          const newCollectCols = _xeUtils.default.toArrayTree(_xeUtils.default.orderBy(allCols, 'renderSortNumber'), {
+            key: 'id',
+            parentKey: 'parentId',
+            children: 'children'
+          });
+          internalData.collectColumn = newCollectCols;
+          internalData.tableFullColumn = (0, _util.getColumnList)(newCollectCols);
+        }
+        reactData.isCustomStatus = false;
+        return $xeTable.handleCustom().then(() => {
+          if (opts.aggFunc && $xeTable.handlePivotTableAggregateData) {
+            const rowGroupFields = computeRowGroupFields.value;
+            if (rowGroupFields ? rowGroupFields.length : rowGroupList.length) {
+              if (rowGroupFields && rowGroupFields.length) {
+                $xeTable.setRowGroups(rowGroupFields);
+              } else {
+                $xeTable.clearRowGroups();
+              }
+            } else {
+              $xeTable.handleUpdateAggData();
+            }
+          }
+          $xeTable.saveCustomStore('reset');
+        });
+      },
+      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({
+        $table: $xeTable,
+        column
+      }) : false) || column.renderVisible);
+      customStore.isIndeterminate = !customStore.isAll && collectColumn.some(column => (!checkMethod || checkMethod({
+        $table: $xeTable,
+        column
+      })) && (column.renderVisible || column.halfVisible));
+    };
+    const emitCustomEvent = (type, evnt) => {
+      const comp = $xeGrid || $xeGantt || $xeTable;
+      comp.dispatchEvent('custom', {
+        type
+      }, evnt);
+    };
+    const customPrivateMethods = {
+      checkCustomStatus,
+      emitCustomEvent,
+      triggerCustomEvent(evnt) {
+        const reactData = $xeTable.reactData;
+        const {
+          customStore
+        } = reactData;
+        if (customStore.visible) {
+          closeCustom();
+          emitCustomEvent('close', evnt);
+        } else {
+          customStore.btnEl = evnt.target;
+          openCustom();
+          emitCustomEvent('open', evnt);
+        }
+      },
+      customOpenEvent(evnt) {
+        const reactData = $xeTable.reactData;
+        const {
+          customStore
+        } = reactData;
+        if (!customStore.visible) {
+          customStore.activeBtn = true;
+          customStore.btnEl = evnt.target;
+          $xeTable.openCustom();
+          $xeTable.emitCustomEvent('open', evnt);
+        }
+      },
+      customCloseEvent(evnt) {
+        const reactData = $xeTable.reactData;
+        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);
+  },
+  setupGantt($xeGantt) {
+    return $xeGantt.extendTableMethods(tableCustomMethodKeys);
+  }
+});

package/lib/table/module/custom/hook.min.js

@@ -0,0 +1 @@
+var _vue=require("vue"),_ui=require("../../../ui"),_xeUtils=_interopRequireDefault(require("xe-utils")),_util=require("../../src/util");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let tableCustomMethodKeys=["openCustom","closeCustom","toggleCustom","saveCustom","cancelCustom","resetCustom","toggleCustomAllCheckbox","setCustomAllCheckbox"];_ui.VxeUI.hooks.add("tableCustomModule",{setupTable(m){let{reactData:c,internalData:b}=m,{computeCustomOpts:v,computeRowGroupFields:o}=m.getComputeMaps(),s=m.getRefMaps().refElem,l=m.xeGrid,i=m.xeGantt,r=()=>{var e,t=c.customStore;let l=s.value,r=0;(l=i&&(e=i.getRefMaps().refGanttContainerElem,e=e.value)?e:l)&&(r=l.clientHeight-28),t.maxHeight=Math.max(88,r)},a=()=>{var{initStore:e,customStore:t}=c;return t.visible=!0,e.custom=!0,u(),d(),r(),(0,_vue.nextTick)().then(()=>r())},u=()=>{var e=c.customStore,t=b.collectColumn;if(e.visible){let l={},r={},s={};_xeUtils.default.eachTree(t,e=>{var t=e.getKey();e.renderFixed=e.fixed,e.renderVisible=e.visible,e.renderResizeWidth=e.renderWidth,l[t]=e.renderSortNumber,r[t]=e.fixed,s[t]=e.visible}),e.oldSortMaps=l,e.oldFixedMaps=r,e.oldVisibleMaps=s,c.customColumnList=t.slice(0)}},n=()=>{var e=c.customStore,t=v.value;return e.visible&&(e.visible=!1,t.immediate||m.handleCustom()),(0,_vue.nextTick)()};let t=e=>{var t=c.customStore,l=c.customColumnList,r=v.value;let{checkMethod:s,visibleMethod:i}=r,o=!!e;return r.immediate?(_xeUtils.default.eachTree(l,e=>{i&&!i({$table:m,column:e})||s&&!s({$table:m,column:e})||(e.visible=o,e.renderVisible=o,e.halfVisible=!1)}),t.isAll=o,c.isCustomStatus=!0,m.handleCustom(),m.saveCustomStore("update:visible")):(_xeUtils.default.eachTree(l,e=>{i&&!i({$table:m,column:e})||s&&!s({$table:m,column:e})||(e.renderVisible=o,e.halfVisible=!1)}),t.isAll=o),m.checkCustomStatus(),(0,_vue.nextTick)()};var e={getCustomVisible(){var e=c.customStore;return e.visible},openCustom:a,closeCustom:n,toggleCustom:()=>{var e=c.customStore;return(e.visible?n:a)()},saveCustom:()=>{let{customColumnList:e,aggHandleFields:l,rowGroupList:t}=c;let{allowVisible:i,allowSort:o,allowFixed:a,allowResizable:u,allowGroup:n,allowValues:d}=v.value;return _xeUtils.default.eachTree(e,(e,t,l,r,s)=>{s?e.fixed=s.fixed:(o&&(e.renderSortNumber=t+1),a&&(e.fixed=e.renderFixed)),u&&e.renderVisible&&(!e.children||e.children.length)&&e.renderResizeWidth!==e.renderWidth&&(e.resizeWidth=e.renderResizeWidth,e.renderWidth=e.renderResizeWidth),i&&(e.visible=e.renderVisible),n&&d&&(e.aggFunc=e.renderAggFn)}),c.isCustomStatus=!0,n&&m.handlePivotTableAggregateData&&(t.length!==l.length||t.some((e,t)=>e.field!==l[t])?l.length?m.setRowGroups(l):m.clearRowGroups():d&&m.handleUpdateAggData()),o&&(b.collectColumn=e),m.saveCustomStore("confirm")},cancelCustom:()=>{var{customColumnList:e,customStore:t}=c;let{oldSortMaps:s,oldFixedMaps:i,oldVisibleMaps:o}=t,{allowVisible:a,allowSort:u,allowFixed:n,allowResizable:d}=v.value;return _xeUtils.default.eachTree(e,e=>{var t=e.getKey(),l=!!o[t],r=i[t]||"";a&&(e.renderVisible=l,e.visible=l),n&&(e.renderFixed=r,e.fixed=r),u&&(e.renderSortNumber=s[t]||0),d&&(e.renderResizeWidth=e.renderWidth)},{children:"children"}),(0,_vue.nextTick)()},resetCustom(e){let t=c.rowGroupList;var l=b.collectColumn;let r=v.value.checkMethod,s=Object.assign({visible:!0,resizable:!0===e,fixed:!0===e,sort:!0===e,aggFunc:!0===e},e),i=[];return _xeUtils.default.eachTree(l,e=>{s.resizable&&(e.resizeWidth=0),s.fixed&&(e.fixed=e.defaultFixed),s.sort&&(e.renderSortNumber=e.sortNumber,e.parentId=e.defaultParentId),r&&!r({$table:m,column:e})||(e.visible=e.defaultVisible),s.aggFunc&&(e.aggFunc=e.defaultAggFunc,e.renderAggFn=e.defaultAggFunc),e.renderResizeWidth=e.renderWidth,i.push(e)}),s.sort&&(e=_xeUtils.default.toArrayTree(_xeUtils.default.orderBy(i,"renderSortNumber"),{key:"id",parentKey:"parentId",children:"children"}),b.collectColumn=e,b.tableFullColumn=(0,_util.getColumnList)(e)),c.isCustomStatus=!1,m.handleCustom().then(()=>{var e;s.aggFunc&&m.handlePivotTableAggregateData&&(((e=o.value)||t).length?e&&e.length?m.setRowGroups(e):m.clearRowGroups():m.handleUpdateAggData()),m.saveCustomStore("reset")})},toggleCustomAllCheckbox(){var e=c.customStore,e=!e.isAll;return t(e)},setCustomAllCheckbox:t};let d=()=>{var e=c.customStore,t=b.collectColumn;let l=v.value.checkMethod;e.isAll=t.every(e=>!!l&&!l({$table:m,column:e})||e.renderVisible),e.isIndeterminate=!e.isAll&&t.some(e=>(!l||l({$table:m,column:e}))&&(e.renderVisible||e.halfVisible))},h=(e,t)=>{(l||i||m).dispatchEvent("custom",{type:e},t)};var g={checkCustomStatus:d,emitCustomEvent:h,triggerCustomEvent(e){var t=m.reactData.customStore;t.visible?(n(),h("close",e)):(t.btnEl=e.target,a(),h("open",e))},customOpenEvent(e){var t=m.reactData.customStore;t.visible||(t.activeBtn=!0,t.btnEl=e.target,m.openCustom(),m.emitCustomEvent("open",e))},customCloseEvent(e){var t=m.reactData.customStore;t.visible&&(t.activeBtn=!1,m.closeCustom(),m.emitCustomEvent("close",e))},handleUpdateCustomColumn:u};return Object.assign(Object.assign({},e),g)},setupGrid(e){return e.extendTableMethods(tableCustomMethodKeys)},setupGantt(e){return e.extendTableMethods(tableCustomMethodKeys)}});