初始化项目

2026-02-08 22:38:13 +08:00
commit 334d2c6312
201 changed files with 32724 additions and 0 deletions
@@ -0,0 +1,16 @@
+import { useI18n as useVueI18n } from 'vue-i18n'
+import { useI18nStore } from '@/stores/modules/i18n'
+
+export function useI18n() {
+	const { t, locale, availableLocales } = useVueI18n()
+	const i18nStore = useI18nStore()
+
+	return {
+		t,
+		locale,
+		availableLocales,
+		setLocale: i18nStore.setLocale,
+		currentLocale: i18nStore.currentLocale,
+		localeLabel: i18nStore.localeLabel
+	}
+}
@@ -0,0 +1,248 @@
+import { ref, reactive, computed, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+
+/**
+ * 表格通用hooks
+ * @param {Object} options 配置选项
+ * @param {Function} options.api 获取列表数据的API函数，必须返回包含data和total的响应
+ * @param {Object} options.searchForm 搜索表单的初始值
+ * @param {Array} options.columns 表格列配置
+ * @param {String} options.rowKey 行的唯一标识，默认为'id'
+ * @param {Boolean} options.needPagination 是否需要分页，默认为true
+ * @param {Object} options.paginationConfig 分页配置，可选
+ * @param {Boolean} options.needSelection 是否需要行选择，默认为false
+ * @param {Boolean} options.immediateLoad 是否在组件挂载时自动加载数据，默认为true
+ * @returns {Object} 返回表格相关的状态和方法
+ */
+export function useTable(options = {}) {
+	const {
+		api,
+		searchForm: initialSearchForm = {},
+		columns = [],
+		rowKey = 'id',
+		needPagination = true,
+		paginationConfig = {},
+		needSelection = false,
+		immediateLoad = true
+	} = options
+
+	// 表格引用
+	const tableRef = ref(null)
+
+	// 搜索表单
+	const searchForm = reactive({ ...initialSearchForm })
+
+	// 表格数据
+	const tableData = ref([])
+
+	// 加载状态
+	const loading = ref(false)
+
+	// 选中的行数据
+	const selectedRows = ref([])
+
+	// 选中的行keys
+	const selectedRowKeys = computed(() => selectedRows.value.map(item => item[rowKey]))
+
+	// 分页配置
+	const defaultPaginationConfig = {
+		current: 1,
+		pageSize: 20,
+		total: 0,
+		showSizeChanger: true,
+		showTotal: (total) => `共 ${total} 条`,
+		pageSizeOptions: ['20', '50', '100', '200']
+	}
+
+	const pagination = reactive({
+		...defaultPaginationConfig,
+		...paginationConfig
+	})
+
+	// 行选择配置
+	const rowSelection = computed(() => {
+		if (!needSelection) return null
+		return {
+			selectedRowKeys: selectedRowKeys.value,
+			onChange: (keys, rows) => {
+				selectedRows.value = rows
+			}
+		}
+	})
+
+	// 行选择事件处理（用于scTable的@select事件）
+	const handleSelectChange = (record, selected, selectedRows) => {
+		if (!needSelection) return
+		if (selected) {
+			selectedRows.value.push(record)
+		} else {
+			const index = selectedRows.value.findIndex(item => item[rowKey] === record[rowKey])
+			if (index > -1) {
+				selectedRows.value.splice(index, 1)
+			}
+		}
+	}
+
+	// 全选/取消全选处理（用于scTable的@selectAll事件）
+	const handleSelectAll = (selected, selectedRows, changeRows) => {
+		if (!needSelection) return
+		if (selected) {
+			changeRows.forEach(record => {
+				if (!selectedRows.value.find(item => item[rowKey] === record[rowKey])) {
+					selectedRows.value.push(record)
+				}
+			})
+		} else {
+			changeRows.forEach(record => {
+				const index = selectedRows.value.findIndex(item => item[rowKey] === record[rowKey])
+				if (index > -1) {
+					selectedRows.value.splice(index, 1)
+				}
+			})
+		}
+	}
+
+	// 加载数据
+	const loadData = async (params = {}) => {
+		if (!api) {
+			console.warn('useTable: 未提供api函数，无法加载数据')
+			return
+		}
+
+		loading.value = true
+		try {
+			const requestParams = {
+				...searchForm,
+				...params
+			}
+
+			// 如果需要分页，添加分页参数
+			if (needPagination) {
+				requestParams.page = pagination.current
+				requestParams.limit = pagination.pageSize
+			}
+
+			// 调用API函数，确保this上下文正确
+			const res = await api(requestParams)
+
+			if (res.code === 1) {
+				// 如果是分页数据
+				if (needPagination) {
+					tableData.value = res.data?.data || []
+					pagination.total = res.data?.total || 0
+				} else {
+					// 非分页数据（如树形数据）
+					// 确保数据是数组，如果不是数组则包装成数组
+					const data = res.data
+					if (Array.isArray(data)) {
+						tableData.value = data
+					} else if (data && typeof data === 'object') {
+						// 如果返回的是对象，可能包含 list 或 items 等字段
+						tableData.value = data.list || data.items || data.data || []
+					} else {
+						tableData.value = []
+					}
+				}
+			} else {
+				message.error(res.message || '加载数据失败')
+			}
+		} catch (error) {
+			console.error('加载数据失败:', error)
+			message.error('加载数据失败')
+		} finally {
+			loading.value = false
+		}
+	}
+
+	// 分页变化处理
+	const handlePaginationChange = ({ page, pageSize }) => {
+		if (!needPagination) return
+		pagination.current = page
+		pagination.pageSize = pageSize
+		loadData()
+	}
+
+	// 搜索
+	const handleSearch = () => {
+		if (needPagination) {
+			pagination.current = 1
+		}
+		loadData()
+	}
+
+	// 重置
+	const handleReset = () => {
+		// 重置搜索表单为初始值
+		Object.keys(searchForm).forEach(key => {
+			searchForm[key] = initialSearchForm[key]
+		})
+		// 清空选择
+		selectedRows.value = []
+		// 重置分页
+		if (needPagination) {
+			pagination.current = 1
+		}
+		// 重新加载数据
+		loadData()
+	}
+
+	// 刷新表格
+	const refreshTable = () => {
+		loadData()
+	}
+
+	// 清空选择
+	const clearSelection = () => {
+		selectedRows.value = []
+	}
+
+	// 设置选中行
+	const setSelectedRows = (rows) => {
+		selectedRows.value = rows
+	}
+
+	// 更新搜索表单
+	const setSearchForm = (data) => {
+		Object.assign(searchForm, data)
+	}
+
+	// 直接设置表格数据（用于特殊场景）
+	const setTableData = (data) => {
+		tableData.value = data
+	}
+
+	// 组件挂载时自动加载数据
+	if (immediateLoad) {
+		onMounted(() => {
+			loadData()
+		})
+	}
+
+	return {
+		// ref
+		tableRef,
+		// 响应式数据
+		searchForm,
+		tableData,
+		loading,
+		pagination,
+		selectedRows,
+		selectedRowKeys,
+		// 配置
+		columns,
+		rowKey,
+		rowSelection,
+		// 方法
+		loadData,
+		handleSearch,
+		handleReset,
+		handlePaginationChange,
+		handleSelectChange,
+		handleSelectAll,
+		refreshTable,
+		clearSelection,
+		setSelectedRows,
+		setSearchForm,
+		setTableData
+	}
+}