vxe-pc-ui 4.20.16 → 4.20.17

package/lib/index.umd.js

@@ -5334,7 +5334,7 @@ function checkDynamic() {
 const {
   log: log_log
 } = VxeUI;
-const uiVersion = `ui v${"4.20.16"}`;
+const uiVersion = `ui v${"4.20.17"}`;
 function createComponentLog(name) {
   const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
   const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -5352,7 +5352,7 @@ const errLog = log_log.create('error', uiVersion);
 
 
 
-const ui_version = "4.20.16";
+const ui_version = "4.20.17";
 VxeUI.uiVersion = ui_version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -5758,6 +5758,10 @@ setConfig({
   switch: {},
   tabPane: {},
   tableSelect: {
+    remoteConfig: {
+      enabled: true,
+      autoLoad: true
+    },
     gridConfig: {
       showOverflow: true,
       showHeaderOverflow: true,
@@ -5837,6 +5841,10 @@ setConfig({
       gt: 0,
       oSize: 2
     },
+    remoteConfig: {
+      enabled: true,
+      autoLoad: true
+    },
     treeConfig: {
       maxHeight: 300,
       radioConfig: {},
@@ -6215,10 +6223,14 @@ setIcon({
       allExpand: '全部展开',
       clearExpand: '全部收起',
       total: '已选 {0} 项',
+      filterCount: '共找到 {0} 条记录',
       close: '关闭',
       search: '搜索',
       emptyText: '暂无数据'
     },
+    tableSelect: {
+      filterCount: '共找到 {0} 条记录'
+    },
     pager: {
       goto: '前往',
       gotoTitle: '页数',
@@ -42901,15 +42913,18 @@ function select_createInternalData() {
         avList = fullData.filter(isOptionVisible);
       } else {
         if (filterable && frMethod) {
-          avList = fullData.filter(option => isOptionVisible(option) && frMethod({
-            $select: $xeSelect,
-            group: null,
-            option,
-            searchValue,
-            value: modelValue
-          }));
+          avList = searchValue ? fullData.filter(option => {
+            return isOptionVisible(option) && frMethod({
+              $select: $xeSelect,
+              group: null,
+              option,
+              filterValue: searchValue,
+              searchValue: searchValue,
+              value: modelValue
+            });
+          }) : fullData;
         } else if (filterable) {
-          avList = fullData.filter(option => isOptionVisible(option) && (!searchStr || `${option[labelField] || option[valueField]}`.toLowerCase().indexOf(searchStr) > -1));
+          avList = searchStr ? fullData.filter(option => isOptionVisible(option) && `${option[labelField] || option[valueField]}`.toLowerCase().indexOf(searchStr) > -1) : fullData;
         } else {
           avList = fullData.filter(isOptionVisible);
         }
@@ -50692,6 +50707,7 @@ const TabPane = VxeTabPane;
 
 
 
+
 const {
   getConfig: table_select_getConfig,
   getIcon: table_select_getIcon,
@@ -50710,8 +50726,10 @@ function getRowUniqueId() {
 function table_select_createReactData() {
   return {
     initialized: false,
+    searchValue: '',
+    searchLoading: false,
+    tableData: [],
     tableColumns: [],
-    fullOptionList: [],
     panelIndex: 0,
     panelStyle: {},
     panelPlacement: null,
@@ -50725,7 +50743,9 @@ function table_select_createInternalData() {
   return {
     // hpTimeout: undefined,
     // vpTimeout: undefined,
-    fullRowMaps: {}
+    fullData: [],
+    afterVisibleList: [],
+    fullValMaps: {}
   };
 }
 /* harmony default export */ var table_select = (defineVxeComponent({
@@ -50757,6 +50777,13 @@ function table_select_createInternalData() {
     options: Array,
     optionProps: Object,
     lazyOptions: Array,
+    filterable: {
+      type: Boolean,
+      default: () => table_select_getConfig().tableSelect.filterable
+    },
+    filterConfig: Object,
+    remote: Boolean,
+    remoteConfig: Object,
     /**
      * 已废弃，请使用 popupConfig.zIndex
      * @deprecated
@@ -50793,6 +50820,7 @@ function table_select_createInternalData() {
     const refInput = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refGridWrapper = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refOptionPanel = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refInpSearch = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refGrid = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)(table_select_createReactData());
     const internalData = table_select_createInternalData();
@@ -50887,6 +50915,12 @@ function table_select_createInternalData() {
         data: undefined
       });
     });
+    const computeRemoteOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return Object.assign({}, table_select_getConfig().tableSelect.remoteConfig, props.remoteConfig);
+    });
+    const computeFilterOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return Object.assign({}, table_select_getConfig().tableSelect.filterConfig, props.filterConfig);
+    });
     const computeSelectGridOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const gridOpts = computeGridOpts.value;
       const checkboxOpts = computeCheckboxOpts.value;
@@ -50904,10 +50938,10 @@ function table_select_createInternalData() {
             Object.assign(newProxyConfig.ajax, {
               query(params, ...args) {
                 return Promise.resolve(ajaxMethods(params, ...args)).then(rest => {
-                  let tableData = [];
+                  let currData = [];
                   if (pagerConfig) {
                     const resultProp = resConfigs.result;
-                    tableData = (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(resultProp) ? resultProp({
+                    currData = (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(resultProp) ? resultProp({
                       data: rest,
                       $table: null,
                       $grid: null,
@@ -50915,14 +50949,14 @@ function table_select_createInternalData() {
                     }) : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(rest, resultProp || 'result')) || [];
                   } else {
                     const listProp = resConfigs.list;
-                    tableData = (listProp ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(listProp) ? listProp({
+                    currData = (listProp ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(listProp) ? listProp({
                       data: rest,
                       $table: null,
                       $grid: null,
                       $gantt: null
                     }) : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(rest, listProp) : rest) || [];
                   }
-                  cacheDataMap(tableData || []);
+                  cacheDataMap(currData || []);
                   return rest;
                 });
               }
@@ -50944,18 +50978,16 @@ function table_select_createInternalData() {
         lazyOptions
       } = props;
       const {
-        fullOptionList
-      } = reactData;
-      const {
-        fullRowMaps
+        fullValMaps,
+        fullData
       } = internalData;
       const valueField = computeValueField.value;
       const labelField = computeLabelField.value;
-      if (!fullOptionList) {
+      if (!fullData) {
         return '';
       }
       return (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isArray(modelValue) ? modelValue : [modelValue]).map(val => {
-        const cacheItem = fullRowMaps[val];
+        const cacheItem = fullValMaps[val];
         if (cacheItem) {
           return cacheItem.item[labelField];
         }
@@ -51018,7 +51050,7 @@ function table_select_createInternalData() {
     };
     const getRowsByValue = modelValue => {
       const {
-        fullRowMaps
+        fullValMaps
       } = internalData;
       const checkboxOpts = computeCheckboxOpts.value;
       const rowKeyField = computeRowKeyField.value;
@@ -51028,7 +51060,7 @@ function table_select_createInternalData() {
       const vals = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(modelValue) ? [] : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isArray(modelValue) ? modelValue : [modelValue];
       if (checkboxOpts.reserve) {
         vals.forEach(val => {
-          const cacheItem = fullRowMaps[val];
+          const cacheItem = fullValMaps[val];
           rows.push(cacheItem ? cacheItem.item : {
             [rowKeyField]: val,
             [valueField]: val,
@@ -51037,7 +51069,7 @@ function table_select_createInternalData() {
         });
       } else {
         vals.forEach(val => {
-          const cacheItem = fullRowMaps[val];
+          const cacheItem = fullValMaps[val];
           if (cacheItem) {
             rows.push(cacheItem.item);
           }
@@ -51063,7 +51095,11 @@ function table_select_createInternalData() {
         }
       });
     };
-    const loadTableColumn = columns => {
+    const loadData = data => {
+      cacheDataMap(data);
+      handleData();
+    };
+    const loadColumn = columns => {
       if (!columns || !columns.length) {
         return;
       }
@@ -51112,7 +51148,7 @@ function table_select_createInternalData() {
       const rowMaps = {};
       const keyMaps = {};
       if (treeConfig) {
-        // x
+        // 暂不支持
       } else {
         external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(dataList || options || [], (item, index, items) => {
           let rowid = getRowid(item);
@@ -51130,16 +51166,62 @@ function table_select_createInternalData() {
           rowMaps[value] = {
             item,
             index,
+            _index: index,
             items,
             parent: null,
             nodes: []
           };
         });
       }
-      reactData.fullOptionList = dataList || options || [];
-      internalData.fullRowMaps = pagerConfig ? Object.assign({}, internalData.fullRowMaps, rowMaps) : rowMaps;
+      internalData.fullData = dataList || options || [];
+      internalData.fullValMaps = pagerConfig ? Object.assign({}, internalData.fullValMaps, rowMaps) : rowMaps;
+      handleOptList();
       updateModel(props.modelValue);
     };
+    const handleOptList = () => {
+      const {
+        remote,
+        modelValue,
+        filterable
+      } = props;
+      const {
+        searchValue
+      } = reactData;
+      const {
+        fullData,
+        fullValMaps
+      } = internalData;
+      const valueField = computeValueField.value;
+      const labelField = computeLabelField.value;
+      const filterOpts = computeFilterOpts.value;
+      const frMethod = filterOpts.filterMethod;
+      const searchStr = `${searchValue || ''}`.toLowerCase();
+      let avList = [];
+      if (remote) {
+        avList = fullData;
+      } else {
+        if (filterable && frMethod) {
+          avList = searchStr ? fullData.filter(row => frMethod({
+            $tableSelect: $xeTableSelect,
+            row,
+            filterValue: searchValue,
+            value: modelValue
+          })) : fullData;
+        } else if (filterable) {
+          avList = searchStr ? fullData.filter(row => `${row[labelField] || row[valueField]}`.toLowerCase().indexOf(searchStr) > -1) : fullData;
+        } else {
+          avList = fullData;
+        }
+      }
+      avList.forEach((item, index) => {
+        const cacheItem = fullValMaps[item[valueField]];
+        if (cacheItem) {
+          cacheItem._index = index;
+        }
+      });
+      internalData.afterVisibleList = avList;
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+    };
     const updateZindex = () => {
       const popupOpts = computePopupOpts.value;
       const customZIndex = popupOpts.zIndex || props.zIndex;
@@ -51178,9 +51260,15 @@ function table_select_createInternalData() {
     };
     const showOptionPanel = () => {
       const {
-        loading
+        loading,
+        remote,
+        filterable
       } = props;
+      const {
+        fullData
+      } = internalData;
       const isDisabled = computeIsDisabled.value;
+      const remoteOpts = computeRemoteOpts.value;
       if (!loading && !isDisabled) {
         if (internalData.vpTimeout) {
           clearTimeout(internalData.vpTimeout);
@@ -51191,12 +51279,18 @@ function table_select_createInternalData() {
         if (!reactData.initialized) {
           reactData.initialized = true;
         }
+        if (filterable) {
+          if (remote && remoteOpts.enabled && remoteOpts.autoLoad && !fullData.length) {
+            handleSearchEvent();
+          }
+        }
         reactData.isActivated = true;
         reactData.isAniVisible = true;
         internalData.vpTimeout = setTimeout(() => {
           reactData.visiblePanel = true;
           updateModel(props.modelValue);
           internalData.vpTimeout = undefined;
+          handleFocusSearch();
           updatePlacement();
         }, 10);
         updateZindex();
@@ -51204,7 +51298,16 @@ function table_select_createInternalData() {
       }
     };
     const hideOptionPanel = () => {
+      const {
+        filterable
+      } = props;
+      const filterOpts = computeFilterOpts.value;
       reactData.visiblePanel = false;
+      if (filterable) {
+        if (filterOpts.clearOnClose) {
+          reactData.searchValue = '';
+        }
+      }
       if (internalData.vpTimeout) {
         clearTimeout(internalData.vpTimeout);
       }
@@ -51216,6 +51319,46 @@ function table_select_createInternalData() {
         internalData.hpTimeout = undefined;
       }, 350);
     };
+    const handleData = () => {
+      const {
+        afterVisibleList
+      } = internalData;
+      reactData.tableData = afterVisibleList;
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+    };
+    const modelSearchEvent = value => {
+      reactData.searchValue = value;
+    };
+    const focusSearchEvent = () => {
+      reactData.isActivated = true;
+    };
+    const handleSearchEvent = () => {
+      const {
+        modelValue,
+        remote
+      } = props;
+      const {
+        searchValue
+      } = reactData;
+      const remoteOpts = computeRemoteOpts.value;
+      const queryMethod = remoteOpts.queryMethod;
+      if (remote && queryMethod && remoteOpts.enabled) {
+        reactData.searchLoading = true;
+        Promise.resolve(queryMethod({
+          $tableSelect: $xeTableSelect,
+          searchValue,
+          value: modelValue
+        })).then(() => (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)()).catch(() => (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)()).finally(() => {
+          reactData.searchLoading = false;
+        });
+      } else {
+        handleOptList();
+        handleData();
+      }
+    };
+    const triggerSearchEvent = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().debounce(handleSearchEvent, 350, {
+      trailing: true
+    });
     const changeEvent = (evnt, selectValue, row) => {
       emitModel(selectValue);
       if (selectValue !== props.modelValue) {
@@ -51293,6 +51436,16 @@ function table_select_createInternalData() {
         updatePlacement();
       }
     };
+    const handleFocusSearch = () => {
+      if (props.filterable) {
+        (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+          const inpSearch = refInpSearch.value;
+          if (inpSearch) {
+            inpSearch.focus();
+          }
+        });
+      }
+    };
     const focusEvent = evnt => {
       const isDisabled = computeIsDisabled.value;
       if (!isDisabled) {
@@ -51365,15 +51518,19 @@ function table_select_createInternalData() {
     const renderVN = () => {
       const {
         className,
-        options,
-        loading
+        loading,
+        filterable,
+        remote
       } = props;
       const {
         initialized,
         isActivated,
         isAniVisible,
         visiblePanel,
-        tableColumns
+        tableColumns,
+        searchValue,
+        tableData,
+        searchLoading
       } = reactData;
       const vSize = computeSize.value;
       const isDisabled = computeIsDisabled.value;
@@ -51383,6 +51540,7 @@ function table_select_createInternalData() {
       const popupOpts = computePopupOpts.value;
       const selectGridOpts = computeSelectGridOpts.value;
       const rowOpts = computeRowOpts.value;
+      const filterOpts = computeFilterOpts.value;
       const popupWrapperStyle = computePopupWrapperStyle.value;
       const {
         appendTo
@@ -51405,6 +51563,7 @@ function table_select_createInternalData() {
           $tableSelect: $xeTableSelect
         }) : className : '', {
           [`size--${vSize}`]: vSize,
+          'is--filterable': filterable,
           'is--visible': visiblePanel,
           'is--disabled': isDisabled,
           'is--loading': loading,
@@ -51444,7 +51603,22 @@ function table_select_createInternalData() {
         style: reactData.panelStyle
       }, initialized ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-table-select--panel-wrapper'
-      }, [headerSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+      }, [filterable ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-table-select--panel-search'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(input, {
+        ref: refInpSearch,
+        class: 'vxe-table-select-search--input',
+        modelValue: searchValue,
+        clearable: true,
+        disabled: false,
+        readonly: false,
+        placeholder: table_select_getI18n('vxe.treeSelect.search'),
+        prefixIcon: table_select_getIcon().INPUT_SEARCH,
+        'onUpdate:modelValue': modelSearchEvent,
+        onFocus: focusSearchEvent,
+        onChange: triggerSearchEvent,
+        onSearch: triggerSearchEvent
+      })]) : table_select_renderEmptyElement($xeTableSelect), headerSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-table-select--panel-header'
       }, headerSlot({})) : table_select_renderEmptyElement($xeTableSelect), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-table-select--panel-body'
@@ -51457,8 +51631,9 @@ function table_select_createInternalData() {
         ...gridEvents,
         class: 'vxe-table-select--grid',
         ref: refGrid,
+        loading: remote && searchLoading,
         rowConfig: rowOpts,
-        data: options,
+        data: tableData,
         columns: tableColumns.length ? tableColumns : selectGridOpts.columns,
         height: '100%',
         autoResize: true,
@@ -51469,21 +51644,23 @@ function table_select_createInternalData() {
         header: undefined,
         footer: undefined,
         prefixSlot: undefined
-      })) : table_select_renderEmptyElement($xeTableSelect)])]), footerSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+      })) : table_select_renderEmptyElement($xeTableSelect)])]), footerSlot || filterable && searchValue && !remote && filterOpts.showResultCount ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-table-select--panel-footer'
-      }, footerSlot({})) : table_select_renderEmptyElement($xeTableSelect)])] : [])])]);
+      }, footerSlot ? footerSlot({}) : [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-table-select--search-count'
+      }, searchLoading ? '' : table_select_getI18n('vxe.tableSelect.filterCount', [tableData.length]))]) : table_select_renderEmptyElement($xeTableSelect)])] : [])])]);
     };
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.options, () => {
-      cacheDataMap();
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.options, val => {
+      loadData(val || []);
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.columns, val => {
-      loadTableColumn(val);
+      loadColumn(val);
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.modelValue, val => {
       updateModel(val);
     });
-    loadTableColumn(props.columns);
-    cacheDataMap();
+    loadColumn(props.columns);
+    loadData(props.options || []);
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
       const {
         gridConfig
@@ -58474,7 +58651,7 @@ function tree_select_createInternalData() {
       default: () => getConfig().treeSelect.size || getConfig().size
     },
     remote: Boolean,
-    remoteConfig: Function,
+    remoteConfig: Object,
     showRadio: {
       type: Boolean,
       default: () => getConfig().treeSelect.showRadio