ele-admin-plus 1.1.6-beta.2 → 1.1.6-beta.4

package/es/ele-table-select/index.js

@@ -1,6 +1,7 @@
-import { defineComponent, ref, computed, onMounted, watch, nextTick, resolveComponent, openBlock, createBlock, createSlots, withCtx, createVNode, mergeProps, renderList, renderSlot, normalizeProps, guardReactiveProps } from "vue";
+import { defineComponent, ref, computed, watch, onMounted, nextTick, resolveComponent, openBlock, createBlock, createSlots, withCtx, renderSlot, createVNode, mergeProps, renderList, normalizeProps, guardReactiveProps } from "vue";
 import { useResponsive } from "../ele-config-provider/receiver";
 import EleBasicSelect from "../ele-basic-select/index";
+import { isEmptyValue, valueIsChanged } from "../ele-basic-select/util";
 import EleProTable from "../ele-pro-table/index";
 import { tableSelectProps, tableSelectEmits } from "./props";
 const _sfc_main = defineComponent({
@@ -12,12 +13,24 @@ const _sfc_main = defineComponent({
     const isResponsive = useResponsive(props);
     const selectRef = ref(null);
     const tableRef = ref(null);
-    const visible = ref(false);
-    const selectedLabel = ref("");
-    const selectedData = ref([]);
-    const current = ref(null);
-    const selections = ref([]);
-    const innerUpdate = ref(false);
+    const selectVisible = ref(false);
+    const selectedItems = ref([]);
+    const selectedLabel = computed(() => {
+      const selected = selectedItems.value;
+      return !props.multiple && selected.length ? selected[0].label : "";
+    });
+    const currentRowKey = computed(() => {
+      if (props.multiple || isEmptyValue(props.modelValue)) {
+        return;
+      }
+      return props.modelValue;
+    });
+    const selectedRowKeys = computed(() => {
+      if (!props.multiple || isEmptyValue(props.modelValue)) {
+        return;
+      }
+      return props.modelValue;
+    });
     const selectPopperClass = computed(() => {
       const classes = ["ele-table-select-popper"];
       if (isResponsive.value) {
@@ -28,278 +41,288 @@ const _sfc_main = defineComponent({
       }
       return classes.join(" ");
     });
-    const updateVisible = (value) => {
-      if (visible.value !== value) {
-        visible.value = value;
-        emit("visibleChange", value);
+    const updatePopover = () => {
+      selectRef.value && selectRef.value.updatePopper();
+    };
+    const getItemByValue = (value) => {
+      if (isEmptyValue(value)) {
+        return;
       }
-      if (value) {
-        pageToSeleted();
+      if (props.cacheData != null) {
+        const temp = props.cacheData.find((d) => d[props.valueKey] === value);
+        if (temp != null) {
+          return temp;
+        }
       }
-    };
-    const onRemoveTag = (item) => {
-      const values = props.modelValue ?? [];
-      updateModelValue(values.filter((v) => v !== item.value));
-      emit("removeTag", item.value);
-    };
-    const onClear = () => {
-      updateModelValue(props.multiple ? [] : null);
-      updateVisible(false);
-      emit("clear");
-    };
-    const onFocus = (e) => {
-      emit("focus", e);
-    };
-    const onBlur = (e) => {
-      emit("blur", e);
-    };
-    const valueIsChanged = (value) => {
-      const isEmpty = isEmptyValue(props.modelValue);
-      if (!props.multiple) {
-        if (isEmptyValue(value) && isEmpty) {
-          return false;
+      if (!isEmptyValue(props.initValue)) {
+        if (!props.multiple) {
+          return props.initValue;
         }
-        return value !== props.modelValue;
+        return props.initValue.find(
+          (d) => d[props.valueKey] === value
+        );
       }
-      const values = value;
-      const selected = props.modelValue;
-      if (isEmpty || !selected.length) {
-        return !!values.length;
+    };
+    const getCacheItemByValue = (value, cacheKeys, cacheData, tKeys, initValue) => {
+      if (cacheData != null) {
+        const index2 = cacheKeys.indexOf(value);
+        if (index2 !== -1) {
+          return cacheData[index2];
+        }
       }
-      if (values.length !== selected.length) {
-        return true;
+      if (initValue != null) {
+        const i = tKeys.indexOf(value);
+        if (i !== -1) {
+          return initValue[i];
+        }
       }
-      return values.some((v) => !selected.includes(v));
     };
-    const updateModelValue = (value) => {
-      if (valueIsChanged(value)) {
-        emit("update:modelValue", value);
-        emit("change", value);
+    const getMultipleItems = () => {
+      const modelValue = props.modelValue;
+      if (isEmptyValue(modelValue, true)) {
+        return [];
       }
-    };
-    const onUpdateCurrent = (value) => {
-      current.value = value;
-      if (!innerUpdate.value && !props.multiple && value != null) {
-        updateModelValue(value[props.valueKey]);
-        emit("select", value);
+      const selected = [];
+      const keys = [];
+      if (tableRef.value) {
+        const data = tableRef.value.getSelectionRows() || [];
+        data.forEach((item) => {
+          if (!item._isMock) {
+            const value = item[props.valueKey];
+            const index2 = modelValue.indexOf(value);
+            if (index2 !== -1) {
+              selected.push({ value, label: item[props.labelKey], index: index2 });
+              keys.push(value);
+            }
+          }
+        });
       }
-    };
-    const onUpdateSelections = (values) => {
-      selections.value = values;
-      if (!innerUpdate.value && props.multiple && values != null) {
-        updateModelValue(values.map((d) => d[props.valueKey]));
-        if (values.length) {
-          emit("select", values);
-        }
+      if (keys.length !== modelValue.length) {
+        const { valueKey, cacheData, initValue } = props;
+        const cacheKeys = cacheData ? cacheData.map((d) => d[valueKey]) : [];
+        const tKeys = initValue ? initValue.map((d) => d[valueKey]) : [];
+        modelValue.forEach((value) => {
+          if (!keys.includes(value)) {
+            const item = getCacheItemByValue(
+              value,
+              cacheKeys,
+              cacheData,
+              tKeys,
+              initValue
+            );
+            const label = item ? item[props.labelKey] : String(value);
+            const index2 = modelValue.indexOf(value);
+            selected.push({ value, label, index: index2 });
+          }
+        });
       }
+      selected.sort((a, b) => a.index - b.index);
+      return selected;
     };
-    const onValueChange = (value) => {
-      if (props.multiple) {
-        const values = value;
-        if (values == null || !values.length) {
-          selectedData.value = [];
-          updateSelectedRows([]);
+    const updateSelectedItems = (force) => {
+      if (!props.multiple) {
+        const value = props.modelValue;
+        const d = selectedItems.value.length ? selectedItems.value[0] : null;
+        if (isEmptyValue(value)) {
+          if (d != null) {
+            selectedItems.value = [];
+          }
           return;
         }
-        const { checked, selectedRows } = getMultipleResult(values);
-        selectedData.value = checked;
-        updateSelectedRows(selectedRows);
-        return;
-      }
-      if (isEmptyValue(value)) {
-        selectedLabel.value = "";
-        updateCurrentRow(null);
+        if (force || !d || d.value !== value) {
+          const temp = tableRef.value ? tableRef.value.getCurrentRow() : null;
+          const item = temp || getItemByValue(value);
+          const label = item ? item[props.labelKey] : String(value);
+          selectedItems.value = [{ label, value }];
+        }
         return;
       }
-      const row = getRowByValue(value);
-      if (row) {
-        selectedLabel.value = row[props.labelKey] ?? "";
-        if (current.value !== row) {
-          updateCurrentRow(row);
+      if (isEmptyValue(props.modelValue, true)) {
+        if (selectedItems.value.length) {
+          selectedItems.value = [];
+          nextTick(() => {
+            updatePopover();
+          });
         }
         return;
       }
-      updateCurrentRow(null);
-      if (isEmptyValue(props.initValue)) {
-        selectedLabel.value = value;
-        return;
+      const keys = selectedItems.value.map((d) => d.value);
+      if (force || valueIsChanged(props.modelValue, keys, true)) {
+        selectedItems.value = getMultipleItems();
+        nextTick(() => {
+          updatePopover();
+        });
       }
-      const label = props.initValue[props.labelKey];
-      selectedLabel.value = label ?? "";
     };
-    const updateCurrentRow = (row) => {
-      if (tableRef.value) {
-        innerUpdate.value = true;
-        tableRef.value.setCurrentRow(row);
-        innerUpdate.value = false;
+    const focusSearchInput = () => {
+      selectRef.value && selectRef.value.focusSearchInput();
+    };
+    const onInitValueChange = (initValue) => {
+      const valueKey = props.valueKey;
+      if (!props.multiple) {
+        const key = initValue[valueKey];
+        if (key === props.modelValue) {
+          updateSelectedItems();
+        } else {
+          updateModelValue(key);
+        }
+        return;
+      }
+      const keys = initValue.map((d) => d[valueKey]);
+      if (!valueIsChanged(props.modelValue, keys, true)) {
+        updateSelectedItems();
+      } else {
+        updateModelValue(keys);
       }
     };
-    const updateSelectedRows = (rows) => {
-      if (tableRef.value) {
-        innerUpdate.value = true;
-        tableRef.value.setSelectedRows(rows);
-        innerUpdate.value = false;
+    const updateModelValue = (modelValue) => {
+      if (valueIsChanged(modelValue, props.modelValue, props.multiple)) {
+        emit("update:modelValue", modelValue);
+        emit("change", modelValue);
       }
     };
-    const getMultipleResult = (values) => {
-      const checked = [];
-      const extras = [];
-      values.forEach((value) => {
-        const item = getRowByValue(value, selections.value);
-        if (item) {
-          checked.push({ value, label: item[props.labelKey] });
-          return;
-        }
-        const row = getRowByValue(value);
-        if (row) {
-          checked.push({ value, label: row[props.labelKey] });
-          extras.push(row);
-          return;
+    const updateVisible = (visible) => {
+      var _a;
+      if (selectVisible.value !== visible) {
+        selectVisible.value = visible;
+        if (visible && ((_a = props.tableProps) == null ? void 0 : _a.virtual) && tableRef.value) {
+          const virtualTableRef = tableRef.value.getTableRef();
+          if (virtualTableRef != null && !virtualTableRef.wrapWidth) {
+            nextTick(() => {
+              virtualTableRef.updateWrapSize();
+              nextTick(() => {
+                updatePopover();
+              });
+            });
+          }
         }
-        const label = getLabelFromInit(value);
-        checked.push({ value, label });
-        extras.push({ [props.valueKey]: value, [props.labelKey]: label });
-      });
-      const selectedRows = selections.value.filter((d) => values.includes(d[props.valueKey])).concat(extras);
-      return { checked, selectedRows };
-    };
-    const getLabelFromInit = (value) => {
-      if (isEmptyValue(props.initValue)) {
-        return value;
+        emit("visibleChange", visible);
       }
-      const list = props.initValue;
-      const temp = list.find((d) => d[props.valueKey] === value);
-      return temp ? temp[props.labelKey] : value;
     };
-    const isEmptyValue = (value) => {
-      return value == null || value === "";
+    const onSelectRemove = (item) => {
+      const values = props.modelValue || [];
+      updateModelValue(values.filter((v) => v !== item.value));
+      emit("removeTag", item.value);
     };
-    const isArrayDatasource = () => {
-      const tableProps = props.tableProps;
-      return tableProps != null && Array.isArray(tableProps.datasource);
+    const onSelectClear = () => {
+      updateModelValue(props.multiple ? [] : null);
+      updateVisible(false);
+      emit("clear");
     };
-    const getTablePageData = () => {
-      return tableRef.value ? tableRef.value.getData() : [];
+    const onSelectFocus = (e) => {
+      emit("focus", e);
     };
-    const getTableData = () => {
-      if (isArrayDatasource()) {
-        return props.tableProps.datasource;
-      }
-      return getTablePageData();
+    const onSelectBlur = (e) => {
+      emit("blur", e);
     };
-    const getRowByValue = (value, data) => {
-      const list = data ?? getTableData();
-      return list.find((d) => d[props.valueKey] === value);
+    const onSelectFilter = (keywords) => {
+      emit("filterChange", keywords);
     };
-    const pageToSeleted = () => {
-      if (!tableRef.value || isEmptyValue(props.modelValue)) {
-        return;
+    const updateSelectedRowKeys = (rowKeys) => {
+      if (props.multiple) {
+        updateModelValue(rowKeys);
       }
-      const data = getTablePageData();
+    };
+    const updateCurrentRowKey = (rowKey) => {
       if (!props.multiple) {
-        if (data.some((d) => d[props.valueKey] === props.modelValue)) {
-          return;
-        }
-        tableRef.value.goPageByRowKey(props.modelValue);
-        return;
+        updateModelValue(rowKey);
       }
-      if (!Array.isArray(props.modelValue) || !props.modelValue.length) {
-        return;
+    };
+    const onTableCurrentChange = (row, old) => {
+      if (!props.multiple && row != null) {
+        updateSelectedItems(true);
+        emit("select", row);
       }
-      const selected = props.modelValue;
-      if (data.some((d) => selected.includes(d[props.valueKey]))) {
-        return;
+      if (props.tableProps != null && typeof props.tableProps.onCurrentChange === "function") {
+        props.tableProps.onCurrentChange(row, old);
       }
-      tableRef.value.goPageByRowKey(selected[selected.length - 1]);
     };
-    const onTableDone = () => {
-      nextTick(() => {
-        updatePopover();
-      });
-      if (!props.multiple) {
-        if (!isEmptyValue(props.modelValue)) {
-          const row = getRowByValue(props.modelValue);
-          if (row) {
-            selectedLabel.value = row[props.labelKey] ?? "";
-            updateCurrentRow(row);
-          }
-        }
-        return;
+    const onTableSelectionChange = (selection) => {
+      if (props.multiple) {
+        updateSelectedItems(true);
+        emit("select", selection);
       }
-      const values = props.modelValue;
-      if (values != null && values.length) {
-        const rows = [];
-        const data = getTablePageData();
-        selections.value.forEach((d) => {
-          rows.push(getRowByValue(d[props.valueKey], data) ?? d);
-        });
-        updateSelectedRows(rows);
-        const { checked } = getMultipleResult(values);
-        selectedData.value = checked;
+      if (props.tableProps != null && typeof props.tableProps.onSelectionChange === "function") {
+        props.tableProps.onSelectionChange(selection);
       }
     };
-    const onTableRowClick = () => {
+    const onTableRowClick = (row, column, e) => {
       if (!props.multiple) {
         updateVisible(false);
       }
-    };
-    const onInitValueChange = (init) => {
-      if (!isEmptyValue(init)) {
-        if (!props.multiple) {
-          updateModelValue(init[props.valueKey]);
-          return;
-        }
-        const key = props.valueKey;
-        updateModelValue(init.map((d) => d[key]));
+      if (props.tableProps != null && typeof props.tableProps.onRowClick === "function") {
+        props.tableProps.onRowClick(row, column, e);
       }
     };
-    const updatePopover = () => {
-      selectRef.value && selectRef.value.updatePopper();
-    };
-    onMounted(() => {
-      var _a;
-      if (props.multiple) {
-        if (!isEmptyValue(props.initValue)) {
-          onInitValueChange(props.initValue);
-        } else if ((_a = props.modelValue) == null ? void 0 : _a.length) {
-          onValueChange(props.modelValue);
-        }
-      } else if (!isEmptyValue(props.initValue)) {
-        onInitValueChange(props.initValue);
-      } else if (!isEmptyValue(props.modelValue)) {
-        onValueChange(props.modelValue);
+    const onTableDone = (result, parent) => {
+      nextTick(() => {
+        updatePopover();
+      });
+      if (props.tableProps != null && typeof props.tableProps.onDone === "function") {
+        props.tableProps.onDone(result, parent);
       }
-    });
+    };
     watch(
       () => props.modelValue,
-      (value) => {
-        onValueChange(value);
+      () => {
+        updateSelectedItems();
+      },
+      { deep: true }
+    );
+    watch(
+      () => props.cacheData,
+      () => {
+        updateSelectedItems(true);
       }
     );
     watch(
       () => props.initValue,
       (initValue) => {
-        onInitValueChange(initValue);
+        if (!isEmptyValue(initValue)) {
+          onInitValueChange(initValue);
+        }
+      },
+      { deep: true }
+    );
+    watch(
+      () => props.disabled,
+      (disabled) => {
+        if (disabled) {
+          updateVisible(false);
+        }
       }
     );
+    onMounted(() => {
+      if (!isEmptyValue(props.initValue, props.multiple)) {
+        onInitValueChange(props.initValue);
+      } else if (!isEmptyValue(props.modelValue, props.multiple)) {
+        updateSelectedItems();
+      }
+    });
     return {
       selectRef,
       tableRef,
-      visible,
+      selectVisible,
+      selectedItems,
       selectedLabel,
-      selectedData,
-      current,
-      selections,
+      currentRowKey,
+      selectedRowKeys,
       selectPopperClass,
+      updatePopover,
+      updateSelectedItems,
+      focusSearchInput,
       updateVisible,
-      onRemoveTag,
-      onClear,
-      onFocus,
-      onBlur,
-      onUpdateCurrent,
-      onUpdateSelections,
-      onTableDone,
-      onTableRowClick
+      onSelectRemove,
+      onSelectClear,
+      onSelectFocus,
+      onSelectBlur,
+      onSelectFilter,
+      updateSelectedRowKeys,
+      updateCurrentRowKey,
+      onTableCurrentChange,
+      onTableSelectionChange,
+      onTableRowClick,
+      onTableDone
     };
   }
 });
@@ -321,41 +344,46 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     size: _ctx.size,
     clearable: _ctx.clearable,
     placeholder: _ctx.placeholder,
-    name: _ctx.name,
-    autocomplete: _ctx.autocomplete,
     maxTagCount: _ctx.maxTagCount,
     maxTagTextLength: _ctx.maxTagTextLength,
+    tagType: _ctx.tagType,
+    automaticDropdown: _ctx.automaticDropdown,
+    filterable: _ctx.filterable,
     teleported: _ctx.teleported,
     persistent: _ctx.persistent,
-    automaticDropdown: _ctx.automaticDropdown,
-    tagType: _ctx.tagType,
     placement: _ctx.placement,
+    transition: _ctx.transition,
     popperWidth: _ctx.popperWidth,
     popperOptions: _ctx.popperOptions,
     popperClass: _ctx.selectPopperClass,
     selectedLabel: _ctx.selectedLabel,
-    selected: _ctx.selectedData,
-    visible: _ctx.visible,
+    selected: _ctx.selectedItems,
+    visible: _ctx.selectVisible,
     "onUpdate:visible": _ctx.updateVisible,
-    onRemoveTag: _ctx.onRemoveTag,
-    onClear: _ctx.onClear,
-    onFocus: _ctx.onFocus,
-    onBlur: _ctx.onBlur
+    onFilterChange: _ctx.onSelectFilter,
+    onRemoveTag: _ctx.onSelectRemove,
+    onClear: _ctx.onSelectClear,
+    onFocus: _ctx.onSelectFocus,
+    onBlur: _ctx.onSelectBlur
   }, createSlots({
     default: withCtx(() => [
-      createVNode(_component_EleProTable, mergeProps(_ctx.tableProps, {
+      renderSlot(_ctx.$slots, "topExtra"),
+      createVNode(_component_EleProTable, mergeProps(_ctx.tableProps || {}, {
         ref: "tableRef",
         rowKey: _ctx.valueKey,
-        current: _ctx.current,
-        selections: _ctx.selections,
+        reserveCurrent: true,
         highlightCurrentRow: !_ctx.multiple,
-        onDone: _ctx.onTableDone,
+        currentRowKey: _ctx.currentRowKey,
+        selectedRowKeys: _ctx.selectedRowKeys,
+        "onUpdate:selectedRowKeys": _ctx.updateSelectedRowKeys,
+        "onUpdate:currentRowKey": _ctx.updateCurrentRowKey,
+        onSelectionChange: _ctx.onTableSelectionChange,
+        onCurrentChange: _ctx.onTableCurrentChange,
         onRowClick: _ctx.onTableRowClick,
-        "onUpdate:current": _ctx.onUpdateCurrent,
-        "onUpdate:selections": _ctx.onUpdateSelections
+        onDone: _ctx.onTableDone
       }), createSlots({ _: 2 }, [
         renderList(Object.keys(_ctx.$slots).filter(
-          (k) => "maxTagPlaceholder" !== k
+          (k) => !["topExtra", "bottomExtra", "maxTagPlaceholder"].includes(k)
         ), (name) => {
           return {
             name,
@@ -364,7 +392,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             ])
           };
         })
-      ]), 1040, ["rowKey", "current", "selections", "highlightCurrentRow", "onDone", "onRowClick", "onUpdate:current", "onUpdate:selections"])
+      ]), 1040, ["rowKey", "highlightCurrentRow", "currentRowKey", "selectedRowKeys", "onUpdate:selectedRowKeys", "onUpdate:currentRowKey", "onSelectionChange", "onCurrentChange", "onRowClick", "onDone"]),
+      renderSlot(_ctx.$slots, "bottomExtra")
     ]),
     _: 2
   }, [
@@ -375,7 +404,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       key: "0"
     } : void 0
-  ]), 1032, ["value", "multiple", "disabled", "size", "clearable", "placeholder", "name", "autocomplete", "maxTagCount", "maxTagTextLength", "teleported", "persistent", "automaticDropdown", "tagType", "placement", "popperWidth", "popperOptions", "popperClass", "selectedLabel", "selected", "visible", "onUpdate:visible", "onRemoveTag", "onClear", "onFocus", "onBlur"]);
+  ]), 1032, ["value", "multiple", "disabled", "size", "clearable", "placeholder", "maxTagCount", "maxTagTextLength", "tagType", "automaticDropdown", "filterable", "teleported", "persistent", "placement", "transition", "popperWidth", "popperOptions", "popperClass", "selectedLabel", "selected", "visible", "onUpdate:visible", "onFilterChange", "onRemoveTag", "onClear", "onFocus", "onBlur"]);
 }
 const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {