# scImport 异步导入组件

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

## 基本使用

```vue
<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

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

```vue
<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>
```

## 完整示例

```vue
<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 接口