chore(完善baseHooks): 完善baseHooks

完善baseHooks

src/hooks/base/useBreakpoint.ts

@@ -0,0 +1,24 @@
+import { type ComputedRef, computed } from 'vue'
+import { useBreakpoints } from '@vueuse/core'
+import type { ColProps } from '@arco-design/web-vue'
+
+type ColBreakpoint = Pick<ColProps, 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'>
+type Breakpoint = keyof ColBreakpoint
+
+export default function useBreakpoint() {
+	const breakpoints = useBreakpoints({
+		xs: 576, // <576
+		sm: 576, // >= 576
+		md: 768, // >=768
+		lg: 992, // >=992
+		xl: 1200, // >=1200
+		xxl: 1600 // >=1600
+	})
+
+	const arr = breakpoints.current() as ComputedRef<Breakpoint[]>
+	const breakpoint = computed(() => {
+		return arr.value[arr.value.length - 1] || 'xs'
+	})
+
+	return { breakpoint }
+}

src/hooks/base/useBreakpointIndex.ts

@@ -0,0 +1,24 @@
+import { useBreakpoint } from '@/hooks'
+
+type BreakpointMap = {
+	xs: number
+	sm: number
+	md: number
+	lg: number
+	xl: number
+	xxl: number
+}
+
+export default function useBreakpointIndex(callback: (v: number) => void, breakpointObj?: BreakpointMap) {
+	const { breakpoint } = useBreakpoint()
+
+	watch(
+		() => breakpoint.value,
+		v => {
+			const def = { xs: 0, sm: 0, md: 0, lg: 1, xl: 1, xxl: 2 }
+			const obj = breakpointObj || def
+			callback(obj[v as keyof typeof obj])
+		},
+		{ immediate: true }
+	)
+}

src/hooks/base/useDevice.ts

@@ -6,7 +6,7 @@ import { useWindowSize } from '@vueuse/core'
  * 中屏（>=992px）
  * 小屏（>=768px）
  */
-export default function () {
+export default function useDevice() {
 	const { width } = useWindowSize()
 	const isDesktop = computed(() => width.value > 768)
 	const isMobile = computed(() => !isDesktop.value)

src/hooks/base/useForm.ts

@@ -1,4 +1,4 @@
-export default function <F extends {}>(initValue: F) {
+export default function useForm<F extends object>(initValue: F) {
 	const getInitValue = () => window.$_.cloneDeep(initValue)
 
 	const form = reactive(getInitValue())

src/hooks/base/usePagination.ts

@@ -1,16 +1,21 @@
+import { useBreakpoint } from '@/hooks'
+
 type Callback = () => void
 
 type Options = {
 	defaultPageSize: number
 }
 
 export default function usePagination(callback: Callback, options: Options = { defaultPageSize: 10 }) {
+	const { breakpoint } = useBreakpoint()
+
 	const pagination = reactive({
 		showPageSize: true,
 		showTotal: true,
 		current: 1,
 		pageSize: options.defaultPageSize,
 		total: 0,
+		simple: false,
 		onChange: (size: number) => {
 			pagination.current = size
 			callback && callback()
@@ -19,9 +24,18 @@ export default function usePagination(callback: Callback, options: Options = { d
 			pagination.current = 1
 			pagination.pageSize = size
 			callback && callback()
-		},
+		}
 	})
 
+	watch(
+		() => breakpoint.value,
+		() => {
+			pagination.simple = ['xs'].includes(breakpoint.value)
+			pagination.showTotal = !['xs'].includes(breakpoint.value)
+		},
+		{ immediate: true }
+	)
+
 	const changeCurrent = pagination.onChange
 	const changePageSize = pagination.onPageSizeChange
 
@@ -38,6 +52,6 @@ export default function usePagination(callback: Callback, options: Options = { d
 		pagination,
 		changeCurrent,
 		changePageSize,
-		setTotal,
+		setTotal
 	}
 }

src/hooks/base/useRequest.ts

@@ -1,11 +1,11 @@
 import { type UnwrapRef } from 'vue'
 import type { AxiosResponse } from 'axios'
-import useLoading from './useLoading'
+import { useLoading } from '@/hooks'
 
 export default function useRequest<T>(
 	api: () => Promise<AxiosResponse<ApiRes<T>>>,
 	defaultValue = [] as unknown as T,
-	isLoading = false
+	isLoading = true
 ) {
 	const { loading, setLoading } = useLoading(isLoading)
 	const response = ref<T>(defaultValue)

src/hooks/base/useTable.ts

@@ -1,4 +1,4 @@
-import type { TableInstance } from '@arco-design/web-vue'
+import type { TableData, TableInstance } from '@arco-design/web-vue'
 import { Modal, Message } from '@arco-design/web-vue'
 import { usePagination } from '@/hooks'
 
@@ -10,20 +10,22 @@ interface Options<T> {
 }
 
 type PaginationParams = { page: number; size: number }
-type Api<T> = (params: PaginationParams) => Promise<ApiRes<ApiListData<T[]>>>
+type Api<T> = (params: PaginationParams) => Promise<ApiRes<ApiListData<T[]>>> | Promise<ApiRes<T[]>>
 
-export default function <T>(api: Api<T>, options?: Options<T>) {
+export default function useTable<T>(api: Api<T>, options?: Options<T>) {
 	const { formatResult, onSuccess, immediate, rowKey } = options || {}
 	const { pagination, setTotal } = usePagination(() => getTableData())
 	const loading = ref(false)
-	const tableData = ref<any[]>([])
+	const tableData = ref<T[]>([])
 
 	const getTableData = async () => {
 		try {
 			loading.value = true
 			const response = await api({ page: pagination.current, size: pagination.pageSize })
-			tableData.value = formatResult ? formatResult(response.data.rows) : response.data.rows
-			setTotal(response.data.total)
+			const data = !Array.isArray(response.data) ? response.data.rows : response.data
+			tableData.value = formatResult ? formatResult(data) : data
+			const total = !Array.isArray(response.data) ? response.data.total : data.length
+			setTotal(total)
 			onSuccess && onSuccess()
 		} catch (error) {
 			console.log(error)
@@ -50,17 +52,17 @@ export default function <T>(api: Api<T>, options?: Options<T>) {
 
 	// 全选
 	const selectAll: TableInstance['onSelectAll'] = checked => {
-		const key = rowKey ?? ('id' as keyof T)
-		const arr = tableData.value.filter(i => !(i['disabled' as keyof T] ?? false))
-		selectedKeys.value = checked ? arr.map(i => i[key] as string | number) : []
+		const key = rowKey ?? 'id'
+		const arr = (tableData.value as TableData[]).filter(i => !(i?.disabled ?? false))
+		selectedKeys.value = checked ? arr.map(i => i[key as string]) : []
 	}
 
 	// 删除
 	const handleDelete = async <T>(
 		deleteApi: () => Promise<ApiRes<T>>,
 		options?: { title?: string; content?: string; successTip?: string; showModal?: boolean }
 	): Promise<boolean | undefined> => {
-		const onDetele = async () => {
+		const onDelete = async () => {
 			try {
 				const response = await deleteApi()
 				if (response.success) {
@@ -76,14 +78,14 @@ export default function <T>(api: Api<T>, options?: Options<T>) {
 		// 是否显示对话框
 		const flag = options?.showModal ?? true
 		if (!flag) {
-			return onDetele()
+			return onDelete()
 		}
 		Modal.warning({
 			title: options?.title || '提示',
 			content: options?.content || '是否确认删除？',
 			hideCancel: false,
 			maskClosable: false,
-			onBeforeOk: onDetele
+			onBeforeOk: onDelete
 		})
 	}
 

src/hooks/business/useDept.ts

@@ -1,6 +1,7 @@
 import { mapTree } from 'xe-utils'
 import type { IDeptItem } from '@/model/dept'
 
+// 部门模块
 export default function useDept(options?: { onSuccess?: () => void }) {
 	const loading = ref(false)
 	const deptList = ref<IDeptItem[]>([])

src/hooks/index.ts

@@ -1,4 +1,6 @@
 // base hooks
+import useBreakpoint from './base/useBreakpoint'
+import useBreakpointIndex from './base/useBreakpointIndex'
 import useDevice from './base/useDevice'
 import useForm from './base/useForm'
 import useLoading from './base/useLoading'
@@ -10,4 +12,15 @@ import useTable from './base/useTable'
 import useDept from './business/useDept'
 import useRole from './business/useRole'
 
-export { useDevice, useForm, useLoading, usePagination, useRequest, useTable, useDept, useRole }
+export {
+	useBreakpoint,
+	useBreakpointIndex,
+	useDevice,
+	useForm,
+	useLoading,
+	usePagination,
+	useRequest,
+	useTable,
+	useDept,
+	useRole
+}