初始化项目
This commit is contained in:
@@ -0,0 +1,192 @@
|
||||
# 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 接口
|
||||
Reference in New Issue
Block a user