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

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

@@ -0,0 +1,227 @@
+import { IdModel, ListModelApi, QueryWrapper } from '@oinone/kunlun-engine';
+import { Converter, OioListItem, Optional, ReturnPromise } from '@oinone/kunlun-shared';
+import { SelectMode } from '@oinone/kunlun-vue-ui-common';
+import { computed, reactive, watch } from 'vue';
+import { useListChecked } from './useListChecked';
+import { TreeInitOptions } from './useTreeState';
+
+interface ListInitContext<T> {
+  storage: Record<string, OioListItem<T>>;
+  count: number;
+  checkedKeys: string[];
+  expandedKeys: string[];
+  expandedAll: boolean;
+}
+
+export interface ListInitOptions {
+  rsql: string;
+  checkedKeys: string[];
+}
+
+export interface ListState<T> {
+  mode: SelectMode;
+  storage: Record<string, OioListItem<T>>;
+  data: OioListItem<T>[];
+  count: number;
+  loading: boolean;
+  checkedKeys: string[];
+  checkedItems: OioListItem<T>[];
+
+  lastCheckedKeys?: string[];
+  lastCheckedItems?: OioListItem<T>[];
+  submitCheckedKeys?: string[];
+  submitCheckedItems?: OioListItem<T>[];
+}
+
+export interface ListStateProps {
+  mode?: SelectMode | keyof typeof SelectMode;
+  getCheckedKeys?: () => string[] | undefined;
+  getSearchValue?: () => string | null | undefined;
+}
+
+export type ListStateLoadFunction<T> = (
+  state: ListState<T>,
+  service: ListModelApi<T>,
+  queryWrapper: QueryWrapper
+) => ReturnPromise<T[]>;
+
+export function useListState<T extends IdModel>(initOptions: {
+  service: ListModelApi<T>;
+  props?: ListStateProps;
+  initState?: Converter<ListState<T>, ListState<T>>;
+  load?: ListStateLoadFunction<T>;
+  convertListData?: (list: T[]) => OioListItem<T>[];
+  initListState?: (state: ListState<T>, options?: ListInitOptions) => void;
+  searchListState?: (state: ListState<T>, options?: ListInitOptions) => void;
+}) {
+  const { service, props, initState, convertListData } = initOptions;
+
+  const state: ListState<T> = reactive(
+    Optional.ofNullable(initState)
+      .map((fn) => fn(initDefaultState(props) as ListState<T>))
+      .orElseGet(() => initDefaultState(props) as ListState<T>)
+  ) as ListState<T>;
+
+  const filterData = computed(() => {
+    const searchValue = props?.getSearchValue?.();
+    if (searchValue) {
+      const filterList: OioListItem<T>[] = [];
+      for (const item of state.data) {
+        if (item.label.indexOf(searchValue) > -1) {
+          filterList.push(item);
+        }
+      }
+      return filterList;
+    }
+    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 = (items: OioListItem[]): boolean => {
+    for (const item of items) {
+      if (!item.checked) {
+        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 = (items: OioListItem[]): boolean => {
+    for (const item of items) {
+      if (item.checked) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  const { onChecked, $$updateChecked, onCheckedAll, onRefreshCheckedState } = useListChecked(state, {
+    isDiff: () => hasFilter.value
+  });
+
+  const init = async (options?: Partial<ListInitOptions>): Promise<ListState<T>> => {
+    state.data = await $$load(options);
+    initListState($$initOptions(options));
+    return state;
+  };
+
+  const $$load = async (options?: Partial<ListInitOptions>): Promise<OioListItem<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.queryPage({ currentPage: 1, size: -1 }, queryWrapper)).content;
+    }
+    if (convertListData) {
+      return convertListData(list);
+    }
+    return service.convertListData(list);
+  };
+
+  const $$initOptions = (options?: Partial<ListInitOptions>): ListInitOptions => {
+    return {
+      rsql: options?.rsql || '',
+      checkedKeys: options?.checkedKeys || []
+    };
+  };
+
+  const initListState = (options: ListInitOptions, isSearch?: boolean) => {
+    const context: ListInitContext<T> = {
+      storage: {},
+      count: 0,
+      checkedKeys: options.checkedKeys,
+      expandedKeys: [],
+      expandedAll: state.data.length <= 100
+    };
+    if (isSearch) {
+      state.lastCheckedKeys = state.checkedKeys;
+      state.lastCheckedItems = state.checkedItems;
+    } else {
+      state.lastCheckedKeys = [];
+      state.lastCheckedItems = [];
+    }
+    state.submitCheckedKeys = undefined;
+    state.submitCheckedItems = undefined;
+    state.checkedKeys = [];
+    state.checkedItems = [];
+    $$initListState(context, state.data);
+    state.count = context.count;
+    state.storage = context.storage;
+  };
+
+  const $$initListState = (context: ListInitContext<T>, items: OioListItem<T>[]) => {
+    for (const item of items) {
+      const { key } = item;
+      if (context.checkedKeys.indexOf(key) > -1) {
+        $$updateChecked(state, item, true);
+      }
+      context.count++;
+      context.storage[key] = item;
+    }
+  };
+
+  const search = async (options?: Partial<TreeInitOptions>) => {
+    state.data = await $$load(options);
+    if (initOptions.searchListState) {
+      initOptions.searchListState(state, $$initOptions(options));
+    } else {
+      initListState($$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,
+    onChecked,
+    onCheckedAll
+  };
+}
+
+function initDefaultState(options?: { mode?: SelectMode | keyof typeof SelectMode }) {
+  return {
+    mode: (options?.mode as SelectMode) || SelectMode.multiple,
+    storage: {},
+    data: [],
+    count: 0,
+    loading: false,
+    checkedKeys: [],
+    checkedItems: []
+  };
+}

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

@@ -0,0 +1,271 @@
+import { OioTreeNode } from '@oinone/kunlun-shared';
+import { SelectMode } from '@oinone/kunlun-vue-ui-common';
+
+type Options = {
+  isDiff?: () => boolean | undefined;
+};
+
+export function useTreeChecked(
+  state: {
+    mode: SelectMode;
+  } & InitState,
+  options?: Options
+) {
+  if (state.mode === SelectMode.single) {
+    return useSingleTreeChecked(state);
+  }
+  return useMultipleTreeChecked(state, options);
+}
+
+type InitState = {
+  storage: Record<string, OioTreeNode>;
+} & State;
+
+type State = {
+  checkedKeys: string[];
+  checkedNodes: OioTreeNode[];
+  lastCheckedKeys?: string[];
+  lastCheckedNodes?: OioTreeNode[];
+  submitCheckedKeys?: string[];
+  submitCheckedNodes?: OioTreeNode[];
+};
+
+function useMultipleTreeChecked(initState: InitState, options?: Options) {
+  const onChecked = (node: OioTreeNode, checked: boolean) => {
+    $$updateChecked(node, checked, options?.isDiff?.());
+    initState.checkedKeys = [...initState.checkedKeys];
+  };
+
+  const onCheckedStrictly = (node: OioTreeNode, checked: boolean) => {
+    $$checkedStrictly(node, checked, options?.isDiff?.());
+    initState.checkedKeys = [...initState.checkedKeys];
+  };
+
+  const $$checkedStrictly = (node: OioTreeNode, checked: boolean, usingOrigin?: boolean) => {
+    $$updateChecked(node, checked, usingOrigin);
+    $$updateChildren(node.children, checked, usingOrigin);
+    if (node.parent) {
+      $$updateParent(node.parent, usingOrigin);
+    }
+  };
+
+  const $$updateChecked = (node: OioTreeNode, checked: boolean, usingOrigin?: boolean) => {
+    if (node.checked === checked) {
+      return;
+    }
+    const { key } = node;
+    if (usingOrigin) {
+      const originNode = initState.storage[key];
+      originNode.checked = checked;
+      originNode.halfChecked = false;
+    }
+    node.checked = checked;
+    node.halfChecked = false;
+    if (checked) {
+      initState.checkedKeys.push(key);
+      initState.checkedNodes.push(node);
+    } else {
+      const index = initState.checkedKeys.indexOf(key);
+      if (index > -1) {
+        initState.checkedKeys.splice(index, 1);
+        initState.checkedNodes.splice(index, 1);
+      }
+    }
+  };
+
+  const $$updateChildren = (nodes: OioTreeNode[], checked: boolean, usingOrigin?: boolean) => {
+    for (const node of nodes) {
+      $$updateChecked(node, checked, usingOrigin);
+      $$updateChildren(node.children, checked, usingOrigin);
+    }
+  };
+
+  const $$updateParent = (node: OioTreeNode, usingOrigin?: boolean) => {
+    let checkedCount = node.children.length;
+    let halfChecked = false;
+    for (const child of node.children) {
+      if (!halfChecked) {
+        halfChecked = !!child.checked || !!child.halfChecked;
+      }
+      if (child.checked) {
+        checkedCount--;
+      }
+    }
+    if (checkedCount === 0) {
+      $$updateChecked(node, true, usingOrigin);
+    } else {
+      $$updateChecked(node, false, usingOrigin);
+      if (usingOrigin) {
+        const originNode = initState.storage[node.key];
+        originNode.halfChecked = halfChecked;
+      }
+      node.halfChecked = halfChecked;
+    }
+    if (node.parent) {
+      $$updateParent(node.parent);
+    }
+  };
+
+  const onCheckedAll = (nodes: OioTreeNode[], checked: boolean) => {
+    const isDiff = options?.isDiff?.();
+    if (isDiff) {
+      if (checked) {
+        const nextState: State = { checkedKeys: [], checkedNodes: [] };
+        $$updateCheckedAll(nodes, nextState, true);
+        for (let i = 0; i < nextState.checkedKeys.length; i++) {
+          const checkedKey = nextState.checkedKeys[i];
+          if (initState.checkedKeys.indexOf(checkedKey) <= -1) {
+            initState.checkedKeys.push(checkedKey);
+            initState.checkedNodes.push(nextState.checkedNodes[i]);
+          }
+        }
+      } else {
+        const uncheckedKeys: string[] = [];
+        $$updateUncheckedAll(nodes, uncheckedKeys, true);
+        for (const checkedKey of uncheckedKeys) {
+          const index = initState.checkedKeys.indexOf(checkedKey);
+          if (index !== -1) {
+            initState.checkedKeys.splice(index, 1);
+            initState.checkedNodes.splice(index, 1);
+          }
+        }
+      }
+      initState.checkedKeys = [...initState.checkedKeys];
+    } else {
+      $$checkedAll(nodes, checked);
+    }
+  };
+
+  const $$checkedAll = (nodes: OioTreeNode[], checked: boolean) => {
+    if (checked) {
+      const nextState = { checkedKeys: [], checkedNodes: [] };
+      $$updateCheckedAll(nodes, nextState);
+      initState.checkedKeys = nextState.checkedKeys;
+      initState.checkedNodes = nextState.checkedNodes;
+    } else {
+      $$updateUncheckedAll(nodes);
+      initState.checkedKeys = [];
+      initState.checkedNodes = [];
+    }
+  };
+
+  const $$updateCheckedAll = (nodes: OioTreeNode[], nextState: State, usingOrigin?: boolean) => {
+    for (const node of nodes) {
+      const { key } = node;
+      nextState.checkedKeys.push(key);
+      nextState.checkedNodes.push(node);
+      if (usingOrigin) {
+        const originNode = initState.storage[key];
+        originNode.checked = true;
+        originNode.halfChecked = false;
+      }
+      node.checked = true;
+      node.halfChecked = false;
+      $$updateCheckedAll(node.children, nextState);
+    }
+  };
+
+  const $$updateUncheckedAll = (nodes: OioTreeNode[], uncheckedKeys?: string[], usingOrigin?: boolean) => {
+    for (const node of nodes) {
+      const { key } = node;
+      uncheckedKeys?.push(key);
+      if (usingOrigin) {
+        const originNode = initState.storage[key];
+        originNode.checked = false;
+        originNode.halfChecked = false;
+      }
+      node.checked = false;
+      node.halfChecked = false;
+      $$updateUncheckedAll(node.children, uncheckedKeys);
+    }
+  };
+
+  const onRefreshCheckedState = (nodes: OioTreeNode[], checkedKeys: string[]) => {
+    const nextState: State = { checkedKeys: [], checkedNodes: [] };
+    $$refreshCheckedState(nodes, checkedKeys, nextState);
+    initState.checkedKeys = nextState.checkedKeys;
+    initState.checkedNodes = nextState.checkedNodes;
+  };
+
+  const $$refreshCheckedState = (nodes: OioTreeNode[], checkedKeys: string[], newState: State) => {
+    for (const node of nodes) {
+      const checked = checkedKeys.includes(node.key);
+      node.checked = checked;
+      if (checked) {
+        newState.checkedKeys.push(node.key);
+        newState.checkedNodes.push(node);
+        if (node.parent) {
+          if (!node.parent.checked) {
+            node.parent.halfChecked = true;
+          }
+        }
+      }
+      node.halfChecked = false;
+      $$refreshCheckedState(node.children, checkedKeys, newState);
+    }
+  };
+
+  return {
+    onChecked,
+    onCheckedStrictly,
+    $$checkedStrictly,
+    onCheckedAll,
+    onRefreshCheckedState
+  };
+}
+
+function useSingleTreeChecked(state: State) {
+  const onChecked = (node: OioTreeNode, checked: boolean) => {
+    $$updateChecked(node, checked);
+  };
+
+  const onCheckedStrictly = (node: OioTreeNode, checked: boolean) => {
+    onChecked(node, checked);
+  };
+
+  const $$checkedStrictly = (node: OioTreeNode, checked: boolean) => {
+    onChecked(node, checked);
+  };
+
+  const $$updateChecked = (node: OioTreeNode, checked: boolean) => {
+    if (node.key === state.checkedKeys[0]) {
+      return;
+    }
+    if (checked) {
+      state.checkedKeys = [node.key];
+      state.checkedNodes = [node];
+    }
+  };
+
+  const onCheckedAll = (nodes: OioTreeNode[], checked: boolean) => {
+    console.error('this method is unsupported. cause: mode is single.');
+  };
+
+  const onRefreshCheckedState = (nodes: OioTreeNode[], checkedKeys: string[]) => {
+    const nextState: State = { checkedKeys: [], checkedNodes: [] };
+    $$refreshCheckedState(nodes, checkedKeys?.[0], nextState);
+    state.checkedKeys = nextState.checkedKeys;
+    state.checkedNodes = nextState.checkedNodes;
+  };
+
+  const $$refreshCheckedState = (nodes: OioTreeNode[], checkedKey: string, newState: State) => {
+    for (const node of nodes) {
+      const checked = node.key === checkedKey;
+      node.checked = checked;
+      if (checked) {
+        newState.checkedKeys.push(node.key);
+        newState.checkedNodes.push(node);
+        return;
+      }
+      $$refreshCheckedState(node.children, checkedKey, newState);
+    }
+  };
+
+  return {
+    onChecked,
+    onCheckedStrictly,
+    $$checkedStrictly,
+    onCheckedAll,
+    onRefreshCheckedState
+  };
+}