feat: 任务

wupengfei

5 天以前 fea063f5c7fdf79d56ada2dd2b8045a44ca2db44

 src/hooks/dic.ts

@@ -0,0 +1,252 @@
import { useQuery, useQueryClient } from '@tanstack/vue-query';
import * as dictionaryServices from '@/services/api/dictionary';
import { formatAreaListToTree } from '@/utils';
import { CascaderProps } from 'element-plus';

export function useGetDictionaryCategorySelect() {
  const { data: dictionaryCategoryList, refetch } = useQuery({
    queryKey: ['dictionaryServices/getDictionaryCategorySelect'],
    queryFn: async () => {
      let res = await dictionaryServices.getDictionaryCategorySelect({}, { showLoading: false });
      return res.map((x) => ({
        ...x,
        fieldNamesMap: x.data.fieldNames ? JSON.parse(x.data.fieldNames) : {},
      }));
    },
    placeholderData: () => [] as API.SelectOptionGuidGetDictionaryCategorySelectQueryOption[],
  });

  const queryClient = useQueryClient();

  function ensureQueryData() {
    return queryClient.ensureQueryData<
      API.SelectOptionGuidGetDictionaryCategorySelectQueryOption[]
    >({
      queryKey: ['dictionaryServices/getDictionaryCategorySelect'],
    });
  }

  function updateDictionaryCategorySelect() {
    queryClient.invalidateQueries({
      queryKey: ['dictionaryServices/getDictionaryCategorySelect'],
    });
  }

  function getDictionaryCategoryById(id: string) {
    return dictionaryCategoryList.value.find((x) => x.data?.id === id);
  }

  function getDictionaryCategoryByCode(code: string) {
    return dictionaryCategoryList.value.find((x) => x.data?.code === code);
  }

  function getDictionaryCategoryNameByCode(code: string) {
    return getDictionaryCategoryByCode(code)?.label ?? '';
  }

  return {
    dictionaryCategoryList,
    ensureQueryData,
    getDictionaryCategoryById,
    getDictionaryCategoryNameByCode,
    getDictionaryCategoryByCode,
    updateDictionaryCategorySelect,
  };
}

type UseDictionaryDataSelectOptions = {
  categoryId?: MaybeRef<string>;
  categoryCode?: MaybeRef<CategoryCode>;
  parentId?: MaybeRef<string>;
  staleTime?: number;
  /** 关键字 */
  keywords?: MaybeRef<string>;
  /** 查询所有 */
  all?: MaybeRef<boolean>;
  maxDeep?: number;
};

export function useDictionaryDataSelect({
  categoryId,
  categoryCode,
  parentId,
  staleTime,
  keywords,
  all,
  maxDeep,
}: UseDictionaryDataSelectOptions) {
  const params = computed(() => ({
    categoryId: unref(categoryId),
    categoryCode: unref(categoryCode),
    parentId: unref(parentId),
    keywords: unref(keywords),
    all: unref(all),
    maxDeep: maxDeep,
  }));
  const { data: dictionaryDataList, refetch } = useQuery({
    queryKey: ['dictionaryServices/getDictionaryDataSelect', params],
    queryFn: async () => {
      let res = await dictionaryServices.getDictionaryDataSelect(params.value, {
        showLoading: false,
      });
      return res.map((x) => ({
        ...x,
        code: x.data?.code ?? '',
      }));
    },
    placeholderData: () => [] as API.SelectOptionStringGetDictionaryDataSelectQueryResultOption[],
    staleTime,
  });

  function getDictionaryDataNameById(id: string) {
    return dictionaryDataList.value?.find((x) => x.data?.id === id)?.label;
  }

  function getDictionaryDataByCode(code: string) {
    return dictionaryDataList.value?.find((x) => x.data?.code === code);
  }

  function getDictionaryDataNameByCode(code: string) {
    return getDictionaryDataByCode(code)?.label ?? '';
  }

  const queryClient = useQueryClient();

  function ensureQueryData() {
    return queryClient.ensureQueryData<
      API.SelectOptionStringGetDictionaryDataSelectQueryResultOption[]
    >({
      queryKey: ['dictionaryServices/getDictionaryDataSelect'],
    });
  }

  function updateDictionaryDataSelect(categoryId?: string) {
    queryClient.invalidateQueries({
      queryKey: ['dictionaryServices/getDictionaryDataSelect'],
    });
  }

  return {
    dictionaryDataList,
    ensureQueryData,
    refetch,
    getDictionaryDataNameById,
    getDictionaryDataNameByCode,
    getDictionaryDataByCode,
    updateDictionaryDataSelect,
  };
}

export function useArea() {
  const queryClient = useQueryClient();

  function getAreaList(parentId = '') {
    const params = {
      categoryCode: CategoryCode.Area,
      parentId: parentId,
    };
    return queryClient.fetchQuery({
      queryKey: ['dictionaryServices/getDictionaryDataSelect', params],
      queryFn: async () => {
        let res = await dictionaryServices.getDictionaryDataSelect(params, { showLoading: false });
        return res.map(convertDictionaryToAreaTreeNode);
      },
      staleTime: Infinity,
    });
  }

  return { getAreaList };
}

function convertDictionaryToAreaTreeNode(
  item: API.SelectOptionStringGetDictionaryDataSelectQueryResultOption
) {
  return {
    children: [],
    areaCode: item.data?.code,
    parentCode: '',
    areaName: item.label,
    layer: Number(item.data?.field4),
    sort: item.data?.sort,
    id: item.data?.id,
  } as API.AreaTreeNode;
}

/**
 *
 * @description 暂时无法使用
 */
export function useAllAreaList() {
  const { dictionaryDataList } = useDictionaryDataSelect({
    categoryCode: CategoryCode.Area,
    staleTime: Infinity,
    all: true,
    maxDeep: AreaType.Area,
  });

  const areaList = computed(() => dictionaryDataList.value.map(convertDictionaryToAreaTreeNode));

  const areaTreeProps = {
    children: 'children',
    label: 'areaName',
    value: 'areaCode',
  };

  const areaTree = computed(() => formatAreaListToTree(areaList.value));

  const findAreaCodeFromName = (areaName: string) => {
    const areaItem = areaList.value.find((x) => x.areaName === areaName);
    return areaItem?.areaCode ?? '';
  };

  const findAreaNameFromCode = (areaCode: string) => {
    const areaItem = areaList.value.find((x) => x.areaCode === areaCode);
    return areaItem?.areaName ?? '';
  };

  const findAreaItemFromCode = (areaCode: string) => {
    const areaItem = areaList.value.find((x) => x.areaCode === areaCode);
    return areaItem;
  };

  return {
    areaList,
    areaTree,
    areaTreeProps,
    findAreaCodeFromName,
    findAreaNameFromCode,
    findAreaItemFromCode,
  };
}

type UseAreaByCascaderOptions = {
  layer?: AreaType;
};

/**
 * @description 联级选择中使用
 */
export function useAreaByCascader(options: UseAreaByCascaderOptions = {}) {
  const { layer = AreaType.Area } = options;

  const { getAreaList } = useArea();

  return computed(() => ({
    props: {
      label: 'areaName',
      value: 'areaCode',
      lazy: true,
      async lazyLoad(node, resolve) {
        const { level, data } = node;
        const areas = (await getAreaList((data as API.AreaTreeNode).id)) as any[];

        return resolve(
          areas.map((x) => ({
            ...x,
            leaf: x.layer >= layer,
          }))
        );
      },
    } as CascaderProps,
  }));
}