# 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 接口
