laravel_swoole/resources/admin/src/components/scImport/README.md

scImport 异步导入组件

异步导入组件，支持文件上传、表单参数配置、模板下载等功能。

基本使用

<template>
	<a-button type="primary" @click="showImport = true">
		<import-outlined /> 导入数据
	</a-button>

	<sc-import
		v-model:open="showImport"
		:api="authApi.users.import.post"
		:template-api="authApi.users.downloadTemplate.get"
		title="导入用户"
		filename="用户数据"
		@success="handleImportSuccess"
		@error="handleImportError"
	/>
</template>

<script setup>
import { ref } from "vue";
import authApi from "@/api/auth";

const showImport = ref(false);

const handleImportSuccess = (data) => {
	console.log("导入成功", data);
	// 刷新列表等操作
};

const handleImportError = (message) => {
	console.log("导入失败", message);
};
</script>

Props

参数	说明	类型	默认值
open	是否显示弹窗	Boolean	false
title	弹窗标题	String	'导入数据'
api	导入API接口	Function	必填
templateApi	下载模板API接口	Function	null
accept	接受的文件类型	String	'.xlsx,.xls,.csv'
maxSize	文件大小限制（MB）	Number	10
showTemplate	是否显示下载模板	Boolean	true
tip	提示信息	String	''
filename	文件名（用于下载）	String	'导入数据'

Events

事件名	说明	回调参数
update:open	弹窗显示状态变化	(visible: Boolean)
success	导入成功	(data, response)
error	导出失败	(message, error)
change	文件列表变化	(fileList)

Slots

formParams

自定义表单参数插槽，可用于添加额外的表单字段。

<template>
	<sc-import
		v-model:open="showImport"
		:api="importApi"
		@success="handleSuccess"
	>
		<template #formParams="{ formData }">
			<a-form layout="vertical">
				<a-form-item label="部门">
					<a-select
						v-model:value="formData.department_id"
						placeholder="请选择部门"
						:options="departmentOptions"
					/>
				</a-form-item>
				<a-form-item label="覆盖已有数据">
					<a-switch v-model:checked="formData.overwrite" />
				</a-form-item>
			</a-form>
		</template>
	</sc-import>
</template>

完整示例

<template>
	<a-button type="primary" @click="handleImport">
		<import-outlined /> 导入用户
	</a-button>

	<sc-import
		v-model:open="importVisible"
		:api="authApi.users.import.post"
		:template-api="authApi.users.downloadTemplate.get"
		title="导入用户数据"
		accept=".xlsx,.xls"
		:max-size="20"
		:show-template="true"
		tip="请按照模板格式填写数据，每次最多导入 1000 条数据"
		filename="用户数据"
		@success="handleImportSuccess"
		@error="handleImportError"
		@change="handleFileChange"
	>
		<template #formParams="{ formData }">
			<a-form layout="vertical">
				<a-form-item label="所属部门" required>
					<a-select
						v-model:value="formData.department_id"
						placeholder="请选择部门"
						:options="departmentOptions"
						:field-names="{ label: 'name', value: 'id' }"
					/>
				</a-form-item>
				<a-form-item label="用户角色">
					<a-select
						v-model:value="formData.role_ids"
						mode="multiple"
						placeholder="请选择角色"
						:options="roleOptions"
						:field-names="{ label: 'name', value: 'id' }"
					/>
				</a-form-item>
				<a-form-item label="是否激活">
					<a-switch
						v-model:checked="formData.is_active"
						checked-children="是"
						un-checked-children="否"
					/>
				</a-form-item>
			</a-form>
		</template>
	</sc-import>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { message } from "ant-design-vue";
import { ImportOutlined } from "@ant-design/icons-vue";
import authApi from "@/api/auth";

const importVisible = ref(false);
const departmentOptions = ref([]);
const roleOptions = ref([]);

// 加载选项数据
onMounted(async () => {
	try {
		const [deptRes, roleRes] = await Promise.all([
			authApi.departments.all.get(),
			authApi.roles.all.get(),
		]);
		departmentOptions.value = deptRes.data || [];
		roleOptions.value = roleRes.data || [];
	} catch (error) {
		console.error("加载选项失败", error);
	}
});

const handleImport = () => {
	importVisible.value = true;
};

const handleImportSuccess = (data) => {
	message.success("导入成功");
	// 刷新列表或执行其他操作
};

const handleImportError = (errorMessage) => {
	message.error("导入失败：" + errorMessage);
};

const handleFileChange = (fileList) => {
	console.log("文件列表变化", fileList);
};
</script>

注意事项

1. 组件会自动处理文件上传、表单参数合并等逻辑
2. 表单参数会通过 FormData 发送到后端
3. 数组和对象类型的参数会被转换为 JSON 字符串
4. 下载模板功能需要后端提供对应的 API 接口