vxe-table 4.16.17 → 4.16.19

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

@@ -0,0 +1,458 @@
+"use strict";
+
+var _vue = require("vue");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _ui = require("../../../ui");
+var _util = require("../../src/util");
+var _dom = require("../../../ui/src/dom");
+var _utils = require("../../../ui/src/utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  renderer,
+  hooks
+} = _ui.VxeUI;
+const tableFilterMethodKeys = ['openFilter', 'setFilter', 'clearFilter', 'saveFilterPanel', 'saveFilterPanelByEvent', 'resetFilterPanel', 'resetFilterPanelByEvent', 'getCheckedFilters', 'updateFilterOptionStatus'];
+hooks.add('tableFilterModule', {
+  setupTable($xeTable) {
+    const $xeGrid = $xeTable.xeGrid;
+    const $xeGantt = $xeTable.xeGantt;
+    const $xeGGWrapper = $xeGrid || $xeGantt;
+    const {
+      props,
+      reactData,
+      internalData
+    } = $xeTable;
+    const {
+      refElem,
+      refTableFilter
+    } = $xeTable.getRefMaps();
+    const {
+      computeFilterOpts,
+      computeMouseOpts
+    } = $xeTable.getComputeMaps();
+    // 确认筛选
+    const handleFilterConfirmFilter = evnt => {
+      const {
+        filterStore
+      } = reactData;
+      filterStore.options.forEach(option => {
+        option.checked = option._checked;
+      });
+      $xeTable.confirmFilterEvent(evnt);
+    };
+    // （单选）筛选发生改变
+    const changeRadioOption = (evnt, checked, item) => {
+      const {
+        filterStore
+      } = reactData;
+      filterStore.options.forEach(option => {
+        option._checked = false;
+      });
+      item._checked = checked;
+      $xeTable.checkFilterOptions();
+      handleFilterConfirmFilter(evnt);
+    };
+    // （多选）筛选发生改变
+    const changeMultipleOption = (evnt, checked, item) => {
+      item._checked = checked;
+      $xeTable.checkFilterOptions();
+    };
+    /**
+     * 重置筛选
+     * 当筛选面板中的重置按钮被按下时触发
+     * @param {Event} evnt 事件
+     */
+    const handleFilterResetFilter = evnt => {
+      const {
+        filterStore
+      } = reactData;
+      $xeTable.handleClearFilter(filterStore.column);
+      $xeTable.confirmFilterEvent(evnt);
+      if (evnt) {
+        $xeTable.dispatchEvent('clear-filter', {
+          filterList: []
+        }, evnt);
+      }
+    };
+    const filterPrivateMethods = {
+      checkFilterOptions() {
+        const {
+          filterStore
+        } = reactData;
+        filterStore.isAllSelected = filterStore.options.every(item => item._checked);
+        filterStore.isIndeterminate = !filterStore.isAllSelected && filterStore.options.some(item => item._checked);
+      },
+      /**
+       * 点击筛选事件
+       * 当筛选图标被点击时触发
+       * 更新选项是否全部状态
+       * 打开筛选面板
+       * @param {Event} evnt 事件
+       * @param {ColumnInfo} column 列配置
+       * @param {Object} params 参数
+       */
+      triggerFilterEvent(evnt, column, params) {
+        const {
+          initStore,
+          filterStore
+        } = reactData;
+        const {
+          elemStore
+        } = internalData;
+        if (filterStore.column === column && filterStore.visible) {
+          filterStore.visible = false;
+        } else {
+          const tableEl = refElem.value;
+          const {
+            scrollTop,
+            scrollLeft,
+            visibleHeight,
+            visibleWidth
+          } = (0, _dom.getDomNode)();
+          const filterOpts = computeFilterOpts.value;
+          const {
+            transfer
+          } = filterOpts;
+          const tableRect = tableEl.getBoundingClientRect();
+          const btnElem = evnt.currentTarget;
+          const filterRender = column ? column.filterRender : null;
+          const compConf = filterRender && (0, _utils.isEnableConf)(filterRender) ? renderer.get(filterRender.name) : null;
+          $xeTable.handleFilterOptions(column);
+          internalData._currFilterParams = params;
+          filterStore.style = null;
+          filterStore.visible = true;
+          initStore.filter = true;
+          (0, _vue.nextTick)(() => {
+            const headerScrollElem = (0, _util.getRefElem)(elemStore['main-header-scroll']);
+            if (!headerScrollElem) {
+              return;
+            }
+            const tableFilter = refTableFilter.value;
+            const filterWrapperElem = tableFilter ? tableFilter.getRefMaps().refElem.value : null;
+            if (!filterWrapperElem) {
+              return;
+            }
+            const btnRect = btnElem.getBoundingClientRect();
+            const filterHeadElem = filterWrapperElem.querySelector('.vxe-table--filter-header');
+            const filterFootElem = filterWrapperElem.querySelector('.vxe-table--filter-footer');
+            const filterWidth = filterWrapperElem.offsetWidth;
+            const centerWidth = filterWidth / 2;
+            let left = 0;
+            let top = 0;
+            let maxHeight = 0;
+            if (transfer) {
+              left = btnRect.left - centerWidth + scrollLeft;
+              top = btnRect.top + btnElem.clientHeight + scrollTop;
+              maxHeight = Math.min(Math.max(tableRect.height, Math.floor(visibleHeight / 2)), Math.max(80, visibleHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 28));
+              if (left < 16) {
+                left = 16;
+              } else if (left > visibleWidth - filterWidth - 16) {
+                left = visibleWidth - filterWidth - 16;
+              }
+            } else {
+              left = btnRect.left - tableRect.left - centerWidth;
+              top = btnRect.top - tableRect.top + btnElem.clientHeight;
+              maxHeight = Math.max(40, tableEl.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14);
+              if (left < 1) {
+                left = 1;
+              } else if (left > tableEl.clientWidth - filterWidth - 1) {
+                left = tableEl.clientWidth - filterWidth - 1;
+              }
+              if ($xeGGWrapper) {
+                const wrapperEl = $xeGGWrapper.getRefMaps().refElem.value;
+                if (wrapperEl) {
+                  const wrapperRect = wrapperEl.getBoundingClientRect();
+                  top += tableRect.top - wrapperRect.top;
+                }
+              }
+            }
+            filterStore.style = {
+              top: (0, _dom.toCssUnit)(top),
+              left: (0, _dom.toCssUnit)(left)
+            };
+            // 筛选面板是自适应表格高度
+            if (compConf ? !compConf.tableFilterAutoHeight : false) {
+              maxHeight = 0;
+            }
+            // 判断面板不能大于表格高度
+            filterStore.maxHeight = maxHeight;
+          });
+        }
+        $xeTable.dispatchEvent('filter-visible', {
+          column,
+          field: column.field,
+          property: column.field,
+          filterList: $xeTable.getCheckedFilters(),
+          visible: filterStore.visible
+        }, evnt);
+      },
+      handleClearFilter(column) {
+        if (column) {
+          const {
+            filters,
+            filterRender
+          } = column;
+          if (filters) {
+            const compConf = (0, _utils.isEnableConf)(filterRender) ? renderer.get(filterRender.name) : null;
+            const frMethod = column.filterResetMethod || (compConf ? compConf.tableFilterResetMethod || compConf.filterResetMethod : null);
+            filters.forEach(item => {
+              item._checked = false;
+              item.checked = false;
+              if (!frMethod) {
+                item.data = _xeUtils.default.clone(item.resetValue, true);
+              }
+            });
+            if (frMethod) {
+              frMethod({
+                options: filters,
+                column,
+                $table: $xeTable
+              });
+            }
+          }
+        }
+      },
+      handleColumnConfirmFilter(column, evnt) {
+        const {
+          mouseConfig
+        } = props;
+        const {
+          scrollXLoad: oldScrollXLoad,
+          scrollYLoad: oldScrollYLoad
+        } = reactData;
+        const filterOpts = computeFilterOpts.value;
+        const mouseOpts = computeMouseOpts.value;
+        const {
+          field
+        } = column;
+        const values = [];
+        const datas = [];
+        column.filters.forEach(item => {
+          if (item.checked) {
+            values.push(item.value);
+            datas.push(item.data);
+          }
+        });
+        const filterList = $xeTable.getCheckedFilters();
+        const params = {
+          $table: $xeTable,
+          $event: evnt,
+          column,
+          field,
+          property: field,
+          values,
+          datas,
+          filters: filterList,
+          filterList
+        };
+        // 如果是服务端筛选，则跳过本地筛选处理
+        if (!filterOpts.remote) {
+          $xeTable.handleTableData(true);
+          $xeTable.checkSelectionStatus();
+        }
+        if (mouseConfig && mouseOpts.area && $xeTable.handleFilterEvent) {
+          $xeTable.handleFilterEvent(evnt, params);
+        }
+        if (evnt) {
+          $xeTable.dispatchEvent('filter-change', params, evnt);
+        }
+        $xeTable.closeFilter();
+        return $xeTable.updateFooter().then(() => {
+          const {
+            scrollXLoad,
+            scrollYLoad
+          } = reactData;
+          if (oldScrollXLoad || scrollXLoad || oldScrollYLoad || scrollYLoad) {
+            if (oldScrollXLoad || scrollXLoad) {
+              $xeTable.updateScrollXSpace();
+            }
+            if (oldScrollYLoad || scrollYLoad) {
+              $xeTable.updateScrollYSpace();
+            }
+            return $xeTable.refreshScroll();
+          }
+        }).then(() => {
+          $xeTable.updateCellAreas();
+          return $xeTable.recalculate(true);
+        }).then(() => {
+          // 存在滚动行为未结束情况
+          setTimeout(() => $xeTable.recalculate(), 50);
+        });
+      },
+      /**
+       * 确认筛选
+       * 当筛选面板中的确定按钮被按下时触发
+       * @param {Event} evnt 事件
+       */
+      confirmFilterEvent(evnt) {
+        const {
+          filterStore
+        } = reactData;
+        const {
+          column
+        } = filterStore;
+        $xeTable.handleColumnConfirmFilter(column, evnt);
+      },
+      handleFilterChangeRadioOption: changeRadioOption,
+      handleFilterChangeMultipleOption: changeMultipleOption,
+      // 筛选发生改变
+      handleFilterChangeOption(evnt, checked, item) {
+        const {
+          filterStore
+        } = reactData;
+        if (filterStore.multiple) {
+          changeMultipleOption(evnt, checked, item);
+        } else {
+          changeRadioOption(evnt, checked, item);
+        }
+      },
+      handleFilterConfirmFilter,
+      handleFilterResetFilter
+    };
+    const filterMethods = {
+      /**
+       * 手动弹出筛选面板
+       * @param column
+       */
+      openFilter(fieldOrColumn) {
+        const column = (0, _util.handleFieldOrColumn)($xeTable, fieldOrColumn);
+        if (column && column.filters) {
+          const {
+            elemStore
+          } = internalData;
+          const {
+            fixed
+          } = column;
+          return $xeTable.scrollToColumn(column).then(() => {
+            const headerWrapperElem = (0, _util.getRefElem)(elemStore[`${fixed || 'main'}-header-wrapper`] || elemStore['main-header-wrapper']);
+            if (headerWrapperElem) {
+              const filterBtnElem = headerWrapperElem.querySelector(`.vxe-header--column.${column.id} .vxe-cell--filter`);
+              (0, _dom.triggerEvent)(filterBtnElem, 'click');
+            }
+          });
+        }
+        return (0, _vue.nextTick)();
+      },
+      /**
+       * 修改筛选条件列表
+       * @param {ColumnInfo} fieldOrColumn 列或字段名
+       * @param {Array} options 选项
+       */
+      setFilter(fieldOrColumn, options, isUpdate) {
+        const {
+          filterStore
+        } = reactData;
+        const column = (0, _util.handleFieldOrColumn)($xeTable, fieldOrColumn);
+        if (column && column.filters) {
+          column.filters = (0, _util.toFilters)(options || []);
+          if (isUpdate) {
+            return $xeTable.handleColumnConfirmFilter(column, null);
+          } else {
+            if (filterStore.visible) {
+              $xeTable.handleFilterOptions(column);
+            }
+          }
+        }
+        return (0, _vue.nextTick)();
+      },
+      /**
+       * 清空指定列的筛选条件
+       * 如果为空则清空所有列的筛选条件
+       * @param {String} fieldOrColumn 列或字段名
+       */
+      clearFilter(fieldOrColumn) {
+        const {
+          filterStore
+        } = reactData;
+        const {
+          tableFullColumn
+        } = internalData;
+        const filterOpts = computeFilterOpts.value;
+        let column;
+        if (fieldOrColumn) {
+          column = (0, _util.handleFieldOrColumn)($xeTable, fieldOrColumn);
+          if (column) {
+            $xeTable.handleClearFilter(column);
+          }
+        } else {
+          tableFullColumn.forEach($xeTable.handleClearFilter);
+        }
+        if (!fieldOrColumn || column !== filterStore.column) {
+          Object.assign(filterStore, {
+            isAllSelected: false,
+            isIndeterminate: false,
+            style: null,
+            options: [],
+            column: null,
+            multiple: false,
+            visible: false
+          });
+        }
+        if (!filterOpts.remote) {
+          return $xeTable.updateData();
+        }
+        return (0, _vue.nextTick)();
+      },
+      saveFilterPanel() {
+        handleFilterConfirmFilter(null);
+        return (0, _vue.nextTick)();
+      },
+      saveFilterPanelByEvent(evnt) {
+        handleFilterConfirmFilter(evnt);
+        return (0, _vue.nextTick)();
+      },
+      resetFilterPanel() {
+        handleFilterResetFilter(null);
+        return (0, _vue.nextTick)();
+      },
+      resetFilterPanelByEvent(evnt) {
+        handleFilterResetFilter(evnt);
+        return (0, _vue.nextTick)();
+      },
+      getCheckedFilters() {
+        const {
+          tableFullColumn
+        } = internalData;
+        const filterList = [];
+        tableFullColumn.forEach(column => {
+          const {
+            field,
+            filters
+          } = column;
+          const valueList = [];
+          const dataList = [];
+          if (filters && filters.length) {
+            filters.forEach(item => {
+              if (item.checked) {
+                valueList.push(item.value);
+                dataList.push(item.data);
+              }
+            });
+            if (valueList.length) {
+              filterList.push({
+                column,
+                field,
+                property: field,
+                values: valueList,
+                datas: dataList
+              });
+            }
+          }
+        });
+        return filterList;
+      },
+      updateFilterOptionStatus(item, checked) {
+        item._checked = checked;
+        item.checked = checked;
+        return (0, _vue.nextTick)();
+      }
+    };
+    return Object.assign(Object.assign({}, filterMethods), filterPrivateMethods);
+  },
+  setupGrid($xeGrid) {
+    return $xeGrid.extendTableMethods(tableFilterMethodKeys);
+  },
+  setupGantt($xeGantt) {
+    return $xeGantt.extendTableMethods(tableFilterMethodKeys);
+  }
+});

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

@@ -0,0 +1 @@
+var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../../ui"),_util=require("../../src/util"),_dom=require("../../../ui/src/dom"),_utils=require("../../../ui/src/utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{renderer,hooks}=_ui.VxeUI,tableFilterMethodKeys=["openFilter","setFilter","clearFilter","saveFilterPanel","saveFilterPanelByEvent","resetFilterPanel","resetFilterPanelByEvent","getCheckedFilters","updateFilterOptionStatus"];hooks.add("tableFilterModule",{setupTable(_){let C=_.xeGrid||_.xeGantt,{props:d,reactData:h,internalData:a}=_,{refElem:n,refTableFilter:k}=_.getRefMaps(),{computeFilterOpts:b,computeMouseOpts:f}=_.getComputeMaps(),i=e=>{var t=h.filterStore;t.options.forEach(e=>{e.checked=e._checked}),_.confirmFilterEvent(e)},o=(e,t,l)=>{var r=h.filterStore;r.options.forEach(e=>{e._checked=!1}),l._checked=t,_.checkFilterOptions(),i(e)},u=(e,t,l)=>{l._checked=t,_.checkFilterOptions()},t=e=>{var t=h.filterStore;_.handleClearFilter(t.column),_.confirmFilterEvent(e),e&&_.dispatchEvent("clear-filter",{filterList:[]},e)};var e={checkFilterOptions(){var e=h.filterStore;e.isAllSelected=e.options.every(e=>e._checked),e.isIndeterminate=!e.isAllSelected&&e.options.some(e=>e._checked)},triggerFilterEvent(e,t,l){let{initStore:r,filterStore:F}=h,g=a.elemStore;if(F.column===t&&F.visible)F.visible=!1;else{let u=n.value,{scrollTop:s,scrollLeft:c,visibleHeight:d,visibleWidth:h}=(0,_dom.getDomNode)();let f=b.value.transfer,v=u.getBoundingClientRect(),p=e.currentTarget;var i=t?t.filterRender:null;let m=i&&(0,_utils.isEnableConf)(i)?renderer.get(i.name):null;_.handleFilterOptions(t),a._currFilterParams=l,F.style=null,F.visible=!0,r.filter=!0,(0,_vue.nextTick)(()=>{if((0,_util.getRefElem)(g["main-header-scroll"])){var r=k.value,r=r?r.getRefMaps().refElem.value:null;if(r){var i=p.getBoundingClientRect(),n=r.querySelector(".vxe-table--filter-header"),a=r.querySelector(".vxe-table--filter-footer"),r=r.offsetWidth,o=r/2;let e=0,t=0,l=0;f?(e=i.left-o+c,t=i.top+p.clientHeight+s,l=Math.min(Math.max(v.height,Math.floor(d/2)),Math.max(80,d-t-(n?n.clientHeight:0)-(a?a.clientHeight:0)-28)),e<16?e=16:e>h-r-16&&(e=h-r-16)):(e=i.left-v.left-o,t=i.top-v.top+p.clientHeight,l=Math.max(40,u.clientHeight-t-(n?n.clientHeight:0)-(a?a.clientHeight:0)-14),e<1?e=1:e>u.clientWidth-r-1&&(e=u.clientWidth-r-1),C&&(o=C.getRefMaps().refElem.value)&&(i=o.getBoundingClientRect(),t+=v.top-i.top)),F.style={top:(0,_dom.toCssUnit)(t),left:(0,_dom.toCssUnit)(e)},m&&!m.tableFilterAutoHeight&&(l=0),F.maxHeight=l}}})}_.dispatchEvent("filter-visible",{column:t,field:t.field,property:t.field,filterList:_.getCheckedFilters(),visible:F.visible},e)},handleClearFilter(e){if(e){var{filters:l,filterRender:r}=e;if(l){r=(0,_utils.isEnableConf)(r)?renderer.get(r.name):null;let t=e.filterResetMethod||(r?r.tableFilterResetMethod||r.filterResetMethod:null);l.forEach(e=>{e._checked=!1,e.checked=!1,t||(e.data=_xeUtils.default.clone(e.resetValue,!0))}),t&&t({options:l,column:e,$table:_})}}},handleColumnConfirmFilter(e,t){var l=d.mouseConfig;let{scrollXLoad:r,scrollYLoad:i}=h;var n=b.value,a=f.value,o=e.field;let u=[],s=[];e.filters.forEach(e=>{e.checked&&(u.push(e.value),s.push(e.data))});var c=_.getCheckedFilters(),e={$table:_,$event:t,column:e,field:o,property:o,values:u,datas:s,filters:c,filterList:c};return n.remote||(_.handleTableData(!0),_.checkSelectionStatus()),l&&a.area&&_.handleFilterEvent&&_.handleFilterEvent(t,e),t&&_.dispatchEvent("filter-change",e,t),_.closeFilter(),_.updateFooter().then(()=>{var{scrollXLoad:e,scrollYLoad:t}=h;if(r||e||i||t)return(r||e)&&_.updateScrollXSpace(),(i||t)&&_.updateScrollYSpace(),_.refreshScroll()}).then(()=>(_.updateCellAreas(),_.recalculate(!0))).then(()=>{setTimeout(()=>_.recalculate(),50)})},confirmFilterEvent(e){var t=h.filterStore,t=t.column;_.handleColumnConfirmFilter(t,e)},handleFilterChangeRadioOption:o,handleFilterChangeMultipleOption:u,handleFilterChangeOption(e,t,l){var r=h.filterStore;r.multiple?u(0,t,l):o(e,t,l)},handleFilterConfirmFilter:i,handleFilterResetFilter:t};return Object.assign(Object.assign({},{openFilter(e){let r=(0,_util.handleFieldOrColumn)(_,e);if(r&&r.filters){let t=a.elemStore,l=r.fixed;return _.scrollToColumn(r).then(()=>{var e=(0,_util.getRefElem)(t[`${l||"main"}-header-wrapper`]||t["main-header-wrapper"]);e&&(e=e.querySelector(`.vxe-header--column.${r.id} .vxe-cell--filter`),(0,_dom.triggerEvent)(e,"click"))})}return(0,_vue.nextTick)()},setFilter(e,t,l){var r=h.filterStore,e=(0,_util.handleFieldOrColumn)(_,e);if(e&&e.filters){if(e.filters=(0,_util.toFilters)(t||[]),l)return _.handleColumnConfirmFilter(e,null);r.visible&&_.handleFilterOptions(e)}return(0,_vue.nextTick)()},clearFilter(e){var t=h.filterStore,l=a.tableFullColumn,r=b.value;let i;return e?(i=(0,_util.handleFieldOrColumn)(_,e))&&_.handleClearFilter(i):l.forEach(_.handleClearFilter),e&&i===t.column||Object.assign(t,{isAllSelected:!1,isIndeterminate:!1,style:null,options:[],column:null,multiple:!1,visible:!1}),r.remote?(0,_vue.nextTick)():_.updateData()},saveFilterPanel(){return i(null),(0,_vue.nextTick)()},saveFilterPanelByEvent(e){return i(e),(0,_vue.nextTick)()},resetFilterPanel(){return t(null),(0,_vue.nextTick)()},resetFilterPanelByEvent(e){return t(e),(0,_vue.nextTick)()},getCheckedFilters(){var e=a.tableFullColumn;let n=[];return e.forEach(e=>{var{field:t,filters:l}=e;let r=[],i=[];l&&l.length&&(l.forEach(e=>{e.checked&&(r.push(e.value),i.push(e.data))}),r.length)&&n.push({column:e,field:t,property:t,values:r,datas:i})}),n},updateFilterOptionStatus(e,t){return e._checked=t,e.checked=t,(0,_vue.nextTick)()}}),e)},setupGrid(e){return e.extendTableMethods(tableFilterMethodKeys)},setupGantt(e){return e.extendTableMethods(tableFilterMethodKeys)}});