first commit

src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './responsive';
+export * from './modal';

src/hooks/modal.ts

@@ -0,0 +1,55 @@
+/*
+ * @Author: 田鑫
+ * @Date: 2023-02-21 15:11:01
+ * @LastEditors: 田鑫
+ * @LastEditTime: 2023-02-21 15:11:02
+ * @Description:
+ */
+import type { AppContext, Component, DefineComponent } from 'vue';
+import type { ModalConfig } from '@arco-design/web-vue';
+
+import { ModalSimple } from '@/components/_base';
+
+type CompType = DefineComponent | Component;
+interface SlotsType {
+  default?: CompType;
+  header?: CompType;
+  close?: CompType;
+}
+
+export const useModal = () => {
+  const instance = getCurrentInstance();
+
+  const Modal = AModal;
+
+  Modal._context = instance?.appContext as AppContext;
+
+  Modal.simple = (config: ModalConfig, slots: SlotsType) => {
+    const { title, content, ..._config } = config || {};
+
+    const modal = Modal.open({
+      ..._config,
+      simple: false,
+      footer: false,
+      closable: false,
+      content: () =>
+        h(
+          ModalSimple,
+          {
+            title,
+            content,
+            onClose: modal.close,
+          },
+          {
+            default: slots?.default,
+            header: slots?.header,
+            close: slots?.close,
+          },
+        ),
+    });
+
+    return modal;
+  };
+
+  return { Modal };
+};

src/hooks/responsive.ts

@@ -0,0 +1,30 @@
+import { useAppStore } from '@/stores';
+import { addEventListen, removeEventListen } from '@/utils/event';
+
+const WIDTH = 992;
+
+function queryDevice() {
+  const rect = document.body.getBoundingClientRect();
+  return rect.width - 1 < WIDTH;
+}
+
+export function useResponsive(immediate?: boolean) {
+  const appStore = useAppStore();
+  function resizeHandler() {
+    if (!document.hidden) {
+      const isMobile = queryDevice();
+      appStore.toggleDevice(isMobile ? 'mobile' : 'desktop');
+      appStore.toggleMenu(isMobile);
+    }
+  }
+  const debounceFn = useDebounceFn(resizeHandler, 100);
+  onMounted(() => {
+    if (immediate) debounceFn();
+  });
+  onBeforeMount(() => {
+    addEventListen(window, 'resize', debounceFn);
+  });
+  onBeforeUnmount(() => {
+    removeEventListen(window, 'resize', debounceFn);
+  });
+}

src/hooks/table-hooks.ts

@@ -0,0 +1,172 @@
+/*
+ * @Author: 田鑫
+ * @Date: 2023-02-16 15:02:51
+ * @LastEditors: 田鑫
+ * @LastEditTime: 2023-03-09 11:20:59
+ * @Description: table-hooks
+ */
+import type { PaginationProps, TableBorder, TableColumnData, TableData, TableRowSelection } from '@arco-design/web-vue';
+type Size = 'mini' | 'small' | 'medium' | 'large';
+interface IDefaultProps {
+  /** 是否显示边框 */
+  bordered?: TableBorder;
+  /** 是否显示选中效果 */
+  hoverable?: boolean;
+  /** 表格的大小 */
+  size?: Size;
+  /** 是否允许调整列宽 */
+  'column-resizable'?: boolean;
+  /** 是否为加载中状态 */
+  loading?: boolean;
+  /** 分页参数 */
+  pagination?: PaginationProps;
+  /** table数据类型 */
+  data?: any[];
+  /** 表头参数 */
+  columns?: TableColumnData[];
+  /** 表格行 key 的取值字段 */
+  'row-key'?: string;
+  /** 表格的行选择器配置 */
+  'row-selection'?: TableRowSelection;
+  'selected-keys'?: (string | number)[];
+  [x: string]: any;
+}
+interface IPagination {
+  /** 当前页数 */
+  current?: number;
+  /** 总页数默认是0条 */
+  total?: number;
+}
+interface ITableResponse<T> {
+  current?: number;
+  records?: T[];
+  size?: number;
+  total?: number;
+  [x: string]: any;
+}
+type GetListFunc<T> = (v: object) => Promise<ITableResponse<T>>;
+export default function useTableProps<T>(loadListFunc: GetListFunc<T>) {
+  const defaultProps: IDefaultProps = {
+    bordered: { cell: true },
+    size: 'large',
+    'column-resizable': true,
+    loading: true,
+    data: [] as any[],
+    pagination: {
+      current: 1,
+      pageSize: 20,
+      total: 0,
+      showPageSize: true,
+      showTotal: true,
+    },
+    hoverable: false,
+    columns: [],
+  };
+  //* 属性组
+  const propsRes = reactive<IDefaultProps>(defaultProps);
+  //* 设置请求参数，如果出了分页参数还有搜索参数，在模板页面调用此方法，可以加入参数
+  const loadListParams = reactive<object>({
+    page: 1,
+    size: 20,
+  });
+  /**
+   * 单独设置默认属性
+   * @param params
+   */
+  const setProps = (params: IDefaultProps) => {
+    if (Object.keys(params).length > 0) {
+      Object.assign(defaultProps, params);
+    }
+  };
+  /**
+   * 设置表头数据
+   * @param columns
+   */
+  const setColumns = (columns: TableColumnData[]) => {
+    propsRes.columns = columns;
+  };
+  /**
+   * 设置loading
+   * @param status
+   */
+  const setLoading = (status: boolean) => {
+    propsRes.loading = status;
+  };
+  /**
+   * 设置分页
+   * @param param0
+   */
+  const setPagination = ({ current, total }: IPagination) => {
+    propsRes.pagination!.current = current;
+    total && (propsRes.pagination!.total = total);
+    Object.assign(loadListParams, { page: current });
+  };
+  /**
+   * 设置列表请求参数
+   * @param params
+   */
+  const setLoadListParams = <R>(params?: R) => {
+    Object.assign(loadListParams, params);
+  };
+  /**
+   * 加载列表
+   * @returns
+   */
+  const loadTableData = async (resetPageIndex = false) => {
+    if (resetPageIndex) {
+      setPagination({ current: 1 });
+    }
+    setLoading(true);
+    try {
+      const resData = await loadListFunc({
+        ...loadListParams,
+      });
+      console.log(resData);
+      const response = resData as ITableResponse<T>;
+      propsRes.data = response.records;
+      setPagination({
+        current: response.current,
+        total: response.total,
+      });
+      setLoading(false);
+      return resData;
+    } catch (error) {
+      setLoading(false);
+      return [];
+    }
+  };
+
+  // 事件触发组
+  const propsEvent = reactive({
+    // 排序触发
+    sorterChange: (dataIndex: string, direction: string) => {
+      console.log(dataIndex, direction);
+    },
+    // 分页触发
+    pageChange: (current: number) => {
+      setPagination({ current });
+      loadTableData();
+    },
+    // 修改每页显示条数
+    pageSizeChange: (size: number) => {
+      propsRes.pagination!.pageSize = size;
+      Object.assign(loadListParams, { size });
+      loadTableData();
+    },
+    selectionChange: (rowKeys: (string | number)[]) => {
+      propsRes['selected-keys'] = rowKeys;
+    },
+  });
+
+  return {
+    propsRes,
+    propsEvent,
+    loadListParams,
+    setProps,
+    setColumns,
+    setLoading,
+    setPagination,
+    loadTableData,
+    setLoadListParams,
+  };
+}

src/hooks/useEffect.ts

@@ -0,0 +1,52 @@
+/*
+ * @Author: 田鑫
+ * @Date: 2024-06-11 14:55:40
+ * @LastEditors: 田鑫
+ * @LastEditTime: 2024-06-11 14:55:41
+ * @Description: 
+ */
+
+
+/**
+ * @description 模拟的react的useEffect
+ * @param fn
+ * @param deps
+ */
+export function useEffect(fn: () => void | (() => any), deps: any[] = []) {
+  const tract = new Error();
+  const resFn = ref(() => { });
+  if (deps.length === 0) {
+    onMounted(() => {
+      const res = fn();
+      if (typeof res === 'function') {
+        resFn.value = res;
+      } else {
+        resFn.value = () => { };
+      }
+    });
+  } else {
+    watch(
+      () => deps,
+      () => {
+        resFn.value();
+        const res = (() => {
+          try {
+            return fn();
+          } catch (error) {
+            console.error(tract);
+            console.error(error);
+          }
+        })();
+        if (typeof res === 'function') {
+          resFn.value = res;
+        } else {
+          resFn.value = () => { };
+        }
+      },
+      { immediate: true, deep: true },
+    );
+  }
+  onUnmounted(() => {
+    resFn.value();
+  });
+}