@oinone/kunlun-vue-admin-base 6.3.9 → 6.4.0

package/src/components/quick-utils/useTreeState.ts

@@ -0,0 +1,248 @@
+import { IdModel, QueryWrapper, TreeModelApi } from '@oinone/kunlun-engine';
+import { Converter, OioTreeNode, Optional, ReturnPromise, TreeHelper } from '@oinone/kunlun-shared';
+import { SelectMode } from '@oinone/kunlun-vue-ui-common';
+import { computed, reactive, watch } from 'vue';
+import { useTreeChecked } from './useTreeChecked';
+
+export interface TreeInitContext<T = unknown> {
+  storage: Record<string, OioTreeNode<T>>;
+  count: number;
+  checkedKeys: string[];
+  checkedNodes: OioTreeNode[];
+  expandedKeys: string[];
+  expandedAll: boolean;
+}
+
+export interface TreeInitOptions {
+  rsql: string;
+  checkedKeys: string[];
+}
+
+export interface TreeState<T = unknown> {
+  mode: SelectMode;
+  storage: Record<string, OioTreeNode<T>>;
+  data: OioTreeNode<T>[];
+  count: number;
+  loading: boolean;
+  checkedKeys: string[];
+  checkedNodes: OioTreeNode<T>[];
+  expandedKeys: string[];
+  lastCheckedKeys: string[];
+}
+
+export interface TreeStateProps {
+  mode?: SelectMode | keyof typeof SelectMode;
+  getCheckedKeys?: () => string[] | undefined;
+  getSearchValue?: () => string | null | undefined;
+}
+
+export type TreeStateLoadFunction<T> = (
+  state: TreeState<T>,
+  service: TreeModelApi<T>,
+  queryWrapper: QueryWrapper
+) => ReturnPromise<T[]>;
+
+export function useTreeState<T extends IdModel>(initOptions: {
+  service: TreeModelApi<T>;
+  props?: TreeStateProps;
+  initState?: Converter<TreeState<T>, TreeState<T>>;
+  load?: TreeStateLoadFunction<T>;
+  convertTreeData?: (list: T[]) => OioTreeNode<T>[];
+  initTreeState?: (state: TreeState<T>, options: TreeInitOptions) => void;
+  searchTreeState?: (state: TreeState<T>, options: TreeInitOptions) => void;
+}) {
+  const { service, props, initState, convertTreeData } = initOptions;
+
+  const state: TreeState<T> = reactive(
+    Optional.ofNullable(initState)
+      .map((fn) => fn(initDefaultState(props) as TreeState<T>))
+      .orElseGet(() => initDefaultState(props) as TreeState<T>)
+  ) as TreeState<T>;
+
+  const filterData = computed(() => {
+    const searchValue = props?.getSearchValue?.();
+    if (searchValue) {
+      return TreeHelper.filter(state.data, (node) => {
+        if (node.title) {
+          return node.title.indexOf(searchValue) > -1;
+        }
+        return false;
+      });
+    }
+    return state.data;
+  });
+
+  const hasFilter = computed(() => {
+    return !!props?.getSearchValue?.();
+  });
+
+  const checkedAll = computed(() => {
+    if (hasFilter.value) {
+      return $$isCheckedAll(filterData.value);
+    }
+    return state.checkedKeys.length >= 1 && state.checkedKeys.length >= state.count;
+  });
+
+  const $$isCheckedAll = (nodes: OioTreeNode[]): boolean => {
+    for (const node of nodes) {
+      if (!node.checked) {
+        return false;
+      }
+      if (!$$isCheckedAll(node.children)) {
+        return false;
+      }
+    }
+    return true;
+  };
+
+  const halfCheckedAll = computed(() => {
+    if (hasFilter.value) {
+      return $$hasAnyChecked(filterData.value) && !checkedAll.value;
+    }
+    return state.checkedKeys.length >= 1 && state.checkedKeys.length < state.count;
+  });
+
+  const $$hasAnyChecked = (nodes: OioTreeNode[]): boolean => {
+    for (const node of nodes) {
+      if (node.checked) {
+        return true;
+      }
+      if ($$hasAnyChecked(node.children)) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  const { onChecked, onCheckedStrictly, $$checkedStrictly, onCheckedAll, onRefreshCheckedState } = useTreeChecked(
+    state,
+    {
+      isDiff: () => hasFilter.value
+    }
+  );
+
+  const onUpdateExpandedKeys = (keys: string[]) => {
+    state.expandedKeys = keys;
+  };
+
+  const init = async (options?: Partial<TreeInitOptions>): Promise<TreeState<T>> => {
+    state.data = await $$load(options);
+    if (initOptions.initTreeState) {
+      initOptions.initTreeState(state, $$initOptions(options));
+    } else {
+      initTreeState($$initOptions(options));
+    }
+    return state;
+  };
+
+  const $$load = async (options?: Partial<TreeInitOptions>): Promise<OioTreeNode<T>[]> => {
+    const queryWrapper: QueryWrapper = {};
+    if (options?.rsql) {
+      queryWrapper.rsql = options.rsql;
+    }
+    let list: T[];
+    if (initOptions.load) {
+      list = await initOptions.load(state, service, queryWrapper);
+    } else {
+      list = await service.queryListByWrapper(queryWrapper);
+    }
+    if (convertTreeData) {
+      return convertTreeData(list);
+    }
+    return service.convertTreeData(list);
+  };
+
+  const $$initOptions = (options?: Partial<TreeInitOptions>): TreeInitOptions => {
+    return {
+      rsql: options?.rsql || '',
+      checkedKeys: options?.checkedKeys || []
+    };
+  };
+
+  const initTreeState = (options: TreeInitOptions, isSearch?: boolean) => {
+    const context: TreeInitContext<T> = {
+      storage: {},
+      count: 0,
+      checkedKeys: options.checkedKeys,
+      checkedNodes: [],
+      expandedKeys: [],
+      expandedAll: state.data.length <= 100
+    };
+    if (isSearch) {
+      state.lastCheckedKeys = state.checkedKeys;
+    } else {
+      state.lastCheckedKeys = [];
+    }
+    state.checkedKeys = [];
+    state.checkedNodes = [];
+    $$initTreeState(context, state.data);
+    state.count = context.count;
+    state.storage = context.storage;
+    state.expandedKeys = context.expandedKeys;
+  };
+
+  const $$initTreeState = (context: TreeInitContext, nodes: OioTreeNode[]) => {
+    for (const node of nodes) {
+      const { key, children } = node;
+      if (context.checkedKeys.indexOf(key) > -1) {
+        $$checkedStrictly(node, true);
+      }
+      context.count++;
+      context.storage[key] = node;
+      if (children.length >= 1) {
+        if (context.expandedAll) {
+          context.expandedKeys.push(key);
+        }
+        $$initTreeState(context, children);
+      }
+    }
+  };
+
+  const search = async (options?: Partial<TreeInitOptions>) => {
+    state.data = await $$load(options);
+    if (initOptions.searchTreeState) {
+      initOptions.searchTreeState(state, $$initOptions(options));
+    } else {
+      initTreeState($$initOptions(options), true);
+    }
+    return state;
+  };
+
+  const getCheckedKeys = props?.getCheckedKeys;
+  if (getCheckedKeys) {
+    watch(getCheckedKeys, (val: string[] | undefined) => {
+      if (state.checkedKeys === val) {
+        return;
+      }
+      onRefreshCheckedState(state.data, val || []);
+      state.data = [...state.data];
+    });
+  }
+
+  return {
+    state,
+    filterData,
+    checkedAll,
+    halfCheckedAll,
+    init,
+    search,
+    onUpdateExpandedKeys,
+    onChecked,
+    onCheckedStrictly,
+    onCheckedAll
+  };
+}
+
+function initDefaultState(props?: { mode?: SelectMode | keyof typeof SelectMode }): TreeState {
+  return {
+    mode: (props?.mode as SelectMode) || SelectMode.multiple,
+    storage: {},
+    data: [],
+    count: 0,
+    loading: false,
+    checkedKeys: [],
+    checkedNodes: [],
+    expandedKeys: [],
+    lastCheckedKeys: []
+  };
+}

package/src/components/select/base/BaseSelect.vue

@@ -0,0 +1,476 @@
+<script lang="ts">
+import { SelectSearchArea, translateValueByKey } from '@oinone/kunlun-engine';
+import {
+  OioEmptyData,
+  OioIcon,
+  OioInput,
+  OioInputGroup,
+  OioSpin,
+  PropRecordHelper,
+  SelectMode,
+  StringHelper,
+  useInjectOioDefaultFormContext,
+  useMaxTagPlaceholder
+} from '@oinone/kunlun-vue-ui-antd';
+import { Select as ASelect } from 'ant-design-vue';
+import { debounce, delay } from 'lodash-es';
+import { computed, createVNode, defineComponent, nextTick, onBeforeUnmount, onMounted, ref, VNode } from 'vue';
+import { useMetadataProps } from '../../../basic';
+import { BaseSelectProps } from './props';
+
+interface SelectedOption {
+  key: string;
+  value: string;
+  label: string;
+  option?: object;
+}
+
+export default defineComponent({
+  name: 'BaseSelect',
+  components: {
+    ASelect
+  },
+  props: {
+    ...BaseSelectProps,
+    notFoundContent: {
+      type: [Object, Function]
+    },
+    isEnterSubmit: {
+      type: Boolean,
+      default: undefined
+    }
+  },
+  setup(props, { emit }) {
+    const origin = ref();
+    const dropdownInputRef = ref();
+    const formContext = useInjectOioDefaultFormContext();
+
+    const { readonly, disabled, placeholder } = useMetadataProps(props, true);
+    const dropdownVisible = ref(false);
+    const showLoadCompleted = ref(false);
+
+    let focusSearchInput = false;
+
+    const onChange = (selected: SelectedOption | SelectedOption[], options: object | object[]) => {
+      if (props.mode === SelectMode.multiple) {
+        const finalOptions: object[] = [];
+        if (Array.isArray(selected)) {
+          for (const item of selected) {
+            if (item.option) {
+              finalOptions.push(item.option);
+            } else {
+              finalOptions.push({
+                key: item.key,
+                value: item.value,
+                label: item.label
+              });
+            }
+          }
+        } else if (selected.option) {
+          finalOptions.push(selected.option);
+        } else {
+          finalOptions.push({
+            key: selected.key,
+            value: selected.value,
+            label: selected.label
+          });
+        }
+        props.change?.(finalOptions);
+      } else {
+        props.change?.(options);
+      }
+    };
+
+    const $$searchValue = ref();
+    const searchValue = computed({
+      get() {
+        if (props.searchValue === undefined) {
+          return $$searchValue.value;
+        }
+        return props.searchValue;
+      },
+      set(val: string) {
+        $$searchValue.value = val;
+        emit('update:search-value', val);
+      }
+    });
+
+    const onUpdateSearchValue = (keyword: string) => {
+      searchValue.value = keyword;
+      onSearch(keyword);
+    };
+
+    const onSearch = debounce(async (keyword: string) => {
+      await props.search?.(keyword);
+    }, 300);
+
+    /**
+     * 在单选状态，下拉框聚焦时，点击回车会出现调用两次 onDropdownVisibleChange 方法的现象
+     * 该计时器用于判定此时是否正处于回车事件，且需要进行数据提交的情况
+     * 如果在计时器创建后立即关闭，则认为此时正处于回车事件，需要进行数据提交
+     */
+    let t;
+
+    const onDropdownVisibleChange = (val: boolean) => {
+      if (props.allowSearch && props.searchArea === SelectSearchArea.dropdown) {
+        if (focusSearchInput) {
+          return;
+        }
+        if (!focusSearchInput && !val && props.mode !== SelectMode.multiple && dropdownVisible.value) {
+          // 按下 Enter 时，下拉单选框无法正常展开，此时进行数据提交
+          dropdownVisible.value = false;
+          searchValue.value = '';
+          origin.value.focus();
+          return;
+        }
+        if (val) {
+          t = setTimeout(() => {
+            dropdownVisible.value = true;
+            props.initLoad?.();
+            focusSearchInput = true;
+            delay(() => {
+              dropdownInputRef.value?.focus();
+            }, 200);
+            clearTimeout(t);
+            t = null;
+          });
+        } else if (t != null) {
+          clearTimeout(t);
+          t = null;
+        } else {
+          dropdownVisible.value = false;
+          searchValue.value = '';
+          if (props.mode !== SelectMode.multiple) {
+            origin.value.focus();
+          }
+        }
+      } else if (val) {
+        t = setTimeout(() => {
+          dropdownVisible.value = true;
+          props.initLoad?.();
+          clearTimeout(t);
+          t = null;
+        });
+      } else if (t != null) {
+        clearTimeout(t);
+        t = null;
+      } else {
+        nextTick(() => {
+          dropdownVisible.value = false;
+        });
+      }
+    };
+
+    const onPopupScroll = (e) => {
+      const { scrollHeight, scrollTop, clientHeight } = e.target;
+      if (scrollHeight - scrollTop - 1 <= clientHeight) {
+        if (props.loadCompleted) {
+          showLoadCompleted.value = true;
+          return;
+        }
+        nextTick(() => props.loadMore?.()).then(() => {
+          showLoadCompleted.value = !!props.loadCompleted;
+        });
+      } else {
+        showLoadCompleted.value = false;
+      }
+    };
+
+    const onKeydown = (e: KeyboardEvent) => {
+      // 当键盘数据提交快捷键与下拉框内置选中快捷键冲突时，保证行内编辑态不丢失
+      if (e.key === 'Enter' && props.isEnterSubmit && dropdownVisible.value) {
+        if (props.mode !== SelectMode.multiple) {
+          focusSearchInput = false;
+          dropdownVisible.value = false;
+          origin.value.focus();
+        }
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+
+    const onFocus = (e) => {
+      props.focus?.(e);
+    };
+
+    const onBlur = (e) => {
+      if (focusSearchInput) {
+        return;
+      }
+      props.blur?.(e);
+    };
+
+    const onSearchInputFocus = (e) => {
+      focusSearchInput = true;
+    };
+
+    const onSearchInputBlur = (e) => {
+      if (focusSearchInput) {
+        focusSearchInput = false;
+        if (props.mode !== SelectMode.multiple) {
+          onDropdownVisibleChange(false);
+        }
+      }
+    };
+
+    const onSearchInputKeydown = (e: KeyboardEvent) => {
+      if (e.key === 'Backspace') {
+        e.stopPropagation();
+      }
+    };
+
+    const onGlobalMouseDown = (e: MouseEvent) => {
+      focusSearchInput = e.target === dropdownInputRef.value?.originInput?.input;
+    };
+
+    onMounted(() => {
+      window.addEventListener('mousedown', onGlobalMouseDown, true);
+    });
+
+    onBeforeUnmount(() => {
+      window.removeEventListener('mousedown', onGlobalMouseDown);
+    });
+
+    return {
+      ...useMaxTagPlaceholder(),
+      origin,
+      dropdownInputRef,
+      readonly,
+      disabled,
+      placeholder,
+      dropdownVisible,
+      showLoadCompleted,
+      searchValue,
+      onUpdateSearchValue,
+      getTriggerContainer: props.getTriggerContainer || formContext.getTriggerContainer,
+      onChange,
+      onSearch,
+      onDropdownVisibleChange,
+      onPopupScroll,
+      onKeydown,
+      onFocus,
+      onBlur,
+      onSearchInputFocus,
+      onSearchInputBlur,
+      onSearchInputKeydown
+    };
+  },
+  render() {
+    const {
+      $slots,
+      $attrs,
+
+      mode,
+      value,
+      options,
+      readonly,
+      disabled,
+      dropdownClassName,
+      placeholder,
+      dropdownVisible,
+      loadMoreLoading,
+      showLoadCompleted,
+      searchValue,
+      onUpdateSearchValue,
+      getTriggerContainer,
+      onChange,
+      onFocus,
+      onBlur,
+      defaultMaxTagPlaceholder,
+      allowArrow,
+      allowClear,
+      allowSearch,
+      searchArea,
+      onSearch,
+      notFoundContent,
+      onDropdownVisibleChange,
+      onPopupScroll,
+      onKeydown,
+      onSearchInputFocus,
+      onSearchInputBlur,
+      onSearchInputKeydown
+    } = this;
+    const { prefix, suffix } = $slots;
+    const props: Record<string, unknown> = {
+      ref: 'origin',
+      class: 'oio-select oio-basic-select',
+      dropdownClassName: StringHelper.append(['oio-select-dropdown oio-basic-select-dropdown'], dropdownClassName).join(
+        ' '
+      ),
+      labelInValue: true,
+      filterOption: false,
+      defaultActiveFirstOption: false,
+      maxTagCount: 'responsive',
+      maxTagPlaceholder: defaultMaxTagPlaceholder,
+
+      mode,
+      options,
+      placeholder,
+      allowClear,
+      disabled,
+      open: dropdownVisible,
+      showArrow: allowArrow,
+      getPopupContainer: getTriggerContainer,
+      onChange,
+      onFocus,
+      onBlur,
+
+      onDropdownVisibleChange,
+      onPopupScroll,
+      onKeydown
+    };
+    if (mode === SelectMode.multiple) {
+      if (value == null) {
+        props.value = undefined;
+      } else if (Array.isArray(value)) {
+        if (value.length) {
+          props.value = value;
+        } else {
+          props.value = undefined;
+        }
+      } else {
+        props.value = [value];
+      }
+    } else if (value == null) {
+      props.value = undefined;
+    } else {
+      props.value = value;
+    }
+    const slotNames = [
+      {
+        origin: 'dropdownRender',
+        default: ({ menuNode: menu }) => {
+          const vNodes: VNode[] = [];
+          if (allowSearch && searchArea === SelectSearchArea.dropdown) {
+            vNodes.push(
+              createVNode(
+                OioInput,
+                {
+                  ref: 'dropdownInputRef',
+                  placeholder,
+                  value: searchValue,
+                  'onUpdate:value': onUpdateSearchValue,
+                  onFocus: onSearchInputFocus,
+                  onBlur: onSearchInputBlur,
+                  onKeydown: onSearchInputKeydown
+                },
+                {
+                  prefix: () => {
+                    return [
+                      createVNode(OioIcon, {
+                        icon: 'oinone-sousuo2',
+                        size: 16
+                      })
+                    ];
+                  }
+                }
+              )
+            );
+          }
+          vNodes.push(menu);
+          if (loadMoreLoading) {
+            vNodes.push(
+              createVNode('div', { class: 'oio-select-dropdown-spin' }, [
+                createVNode(OioSpin, {
+                  size: 'small',
+                  loading: true
+                })
+              ])
+            );
+          } else if (showLoadCompleted) {
+            vNodes.push(
+              createVNode('div', { class: 'oio-select-dropdown-load-completed' }, [
+                createVNode(
+                  'span',
+                  { class: 'oio-select-dropdown-load-completed-content' },
+                  `—— ${translateValueByKey('我是有底线的')} ——`
+                )
+              ])
+            );
+          }
+          return vNodes;
+        }
+      },
+      'suffixIcon',
+      'option'
+    ];
+    if (allowSearch && (!searchArea || searchArea === SelectSearchArea.default)) {
+      props.showSearch = true;
+      props.onSearch = onSearch;
+    } else {
+      props.showSearch = false;
+    }
+    if (readonly) {
+      props.notFoundContent = null;
+    } else if (notFoundContent === null) {
+      props.notFoundContent = null;
+    } else {
+      slotNames.push({
+        origin: 'notFoundContent',
+        default: () => {
+          if (notFoundContent) {
+            if (typeof notFoundContent === 'function') {
+              return notFoundContent();
+            }
+            return [notFoundContent];
+          }
+          if (!loadMoreLoading) {
+            return [createVNode(OioEmptyData)];
+          }
+          return [];
+        }
+      });
+    }
+    const selectVNode = createVNode(ASelect, props, PropRecordHelper.collectionSlots($slots, slotNames));
+    const classNames = ['oio-basic-select-wrapper'];
+    if (prefix || suffix) {
+      return createVNode(OioInputGroup, PropRecordHelper.collectionBasicProps($attrs, classNames), {
+        default: () => {
+          const vNodes: VNode[] = [];
+          if (prefix) {
+            vNodes.push(...prefix());
+          }
+          vNodes.push(selectVNode);
+          if (suffix) {
+            vNodes.push(...suffix());
+          }
+          return vNodes;
+        }
+      });
+    }
+    return createVNode('div', PropRecordHelper.collectionBasicProps($attrs, classNames), [selectVNode]);
+  }
+});
+</script>
+<style lang="scss">
+.oio-basic-select-wrapper {
+  &.oio-input-group {
+    .oio-basic-select {
+      flex: 1;
+    }
+  }
+}
+
+.oio-basic-select-dropdown {
+  .oio-select-dropdown-spin {
+    height: 28px;
+    padding: 5px 12px;
+    line-height: 18px;
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  .oio-select-dropdown-load-completed {
+    height: 28px;
+    padding: 5px 12px;
+    font-size: 12px;
+    line-height: 18px;
+    text-align: center;
+    vertical-align: middle;
+
+    &-content {
+      color: rgba(0, 0, 0, 0.25);
+    }
+  }
+}
+</style>