x-php-Admin/src/views/vab/importexport.vue

<template>
	<el-main>
		<el-row :gutter="15">
			<el-col :lg="12">
				<el-card shadow="never" header="导入(使用mock,有50%几率导入失败)">
					<sc-file-import :apiObj="$api.common.importFile" templateUrl="http://www.scuiadmin/file.xlsx" @success="success"></sc-file-import>
					<sc-file-import :apiObj="$api.common.importFile" :data="{otherData:'demo'}" templateUrl="http://www.scuiadmin/file.xlsx" accept=".xls, .xlsx" :maxSize="30" tip="请上传小于或等于 30M 的 .xls, .xlsx 格式文件(自定义TIP)" @success="success">
						<template #default="{open}">
							<el-button type="primary" icon="x-icon-upload" @click="open">导入(全配置)</el-button>
						</template>
						<template #uploader>
							<el-icon class="el-icon--upload"><x-icon-file-excel /></el-icon>
							<div class="el-upload__text">
								将文件拖到此处或 <em>点击选择文件上传</em>
							</div>
						</template>
						<template #form="{formData}">
							<el-form-item label="覆盖已有数据">
								<el-switch v-model="formData.coverage" />
							</el-form-item>
							<el-form-item label="跳过错误数据">
								<el-switch v-model="formData.skipError" />
							</el-form-item>
						</template>
					</sc-file-import>
					<el-descriptions :column="1" border size="small" style="margin-top: 15px;">
						<el-descriptions-item label="apiObj" :width="200">Object 文件上传接口对象</el-descriptions-item>
						<el-descriptions-item label="data">Object 上传时附带的额外参数</el-descriptions-item>
						<el-descriptions-item label="accept">String 可选择文件类型，默认为".xls, .xlsx"</el-descriptions-item>
						<el-descriptions-item label="maxSize">Number 可选择文件大小，单位为M，默认为10</el-descriptions-item>
						<el-descriptions-item label="tip">String 上传框底下的提示语句，默认为"请上传小于或等于 {maxSize}M 的 {accept} 格式文件"</el-descriptions-item>
						<el-descriptions-item label="templateUrl">String 模板的下载URL</el-descriptions-item>
						<el-descriptions-item label="@success">事件 上传接口返回的事件，返回function(res, close)，执行close()将关闭窗口</el-descriptions-item>
						<el-descriptions-item label='#default="{open}"'>插糟 默认触发按钮插糟，返回open()打开窗口函数，可以绑定元素@click事件</el-descriptions-item>
						<el-descriptions-item label='#uploader'>插糟 自定义上传框插槽</el-descriptions-item>
						<el-descriptions-item label='#form="{formData}"'>插糟 自定义表单组件，插槽formData都将作为上传时附带的额外参数</el-descriptions-item>
					</el-descriptions>
				</el-card>
			</el-col>
			<el-col :lg="12">
				<el-card shadow="never" header="导出">
					<sc-file-export :apiObj="$api.common.exportFile"></sc-file-export>
					<sc-file-export :apiObj="$api.common.exportFile" fileName="人员列表(异步)" async>
						<template #default="{open}">
							<el-button type="primary" icon="x-icon-download" @click="open">导出(异步)</el-button>
						</template>
					</sc-file-export>
					<sc-file-export :apiObj="$api.common.exportFile" blob fileName="人员列表" :data="{otherData:'demo'}" showData :column="column" :fileTypes="['xlsx','docx','pdf']">
						<template #default="{open}">
							<el-button type="primary" icon="x-icon-download" @click="open">导出(blob文件流)</el-button>
						</template>
						<template #form="{formData}">
							<el-form-item label="导出条数">
								<el-select v-model="formData.limit" placeholder="Select">
									<el-option label="100条" value="100" />
									<el-option label="500条" value="500" />
									<el-option label="1000条" value="1000" />
									<el-option label="5000条" value="5000" />
									<el-option label="10000条" value="10000" />
								</el-select>
							</el-form-item>
						</template>
					</sc-file-export>
					<el-descriptions :column="1" border size="small" style="margin-top: 15px;">
						<el-descriptions-item label="apiObj" :width="200">Object 文件导出接口对象，通过apiObj.url请求文件</el-descriptions-item>
						<el-descriptions-item label="data">Object 上传时附带的额外参数(可为数据表格的过滤项)</el-descriptions-item>
						<el-descriptions-item label="showData">Boolean 是否显示附带的额外参数</el-descriptions-item>
						<el-descriptions-item label="async">Boolean 是否异步导出文件</el-descriptions-item>
						<el-descriptions-item label="fileName">String 下载文件名称，默认为当前时间戳</el-descriptions-item>
						<el-descriptions-item label="fileTypes">Array 可选择文件类型，默认为['xlsx']，组件将数组第一项当做已选项</el-descriptions-item>
						<el-descriptions-item label="column">Array 列配置，请求文件时将添加column为key的参数，值为prop逗号","分割的字符串</el-descriptions-item>
						<el-descriptions-item label="blob">Boolean 是否由游览器请求文件返回blob后提供下载</el-descriptions-item>
						<el-descriptions-item label="progress">Boolean blob开启后是否显示下载文件进度条，当服务器启用Gzip时，建议关闭，因为获取到的文件总数和下载总数不匹配。</el-descriptions-item>

						<el-descriptions-item label='#default="{open}"'>插糟 默认触发按钮插糟，返回open()打开窗口函数，可以绑定元素@click事件</el-descriptions-item>
						<el-descriptions-item label='#form="{formData}"'>插糟 自定义表单组件，插槽formData都将作为请求时附带的额外参数</el-descriptions-item>
					</el-descriptions>
				</el-card>
			</el-col>
		</el-row>
	</el-main>

	<el-dialog v-model="importErrDialogVisible" title="导入失败" :width="680" destroy-on-close @closed="()=>{importErrData={}}">
		<el-alert :title="`总条目数 ${importErrData.ok} ,其中有 ${importErrData.fail} 条格式不满足导入要求，请修改后再次操作。`" type="error" show-icon :closable="false"/>
		<div style="margin-top: 15px;">
			<el-table :data="importErrData.failList" border stripe max-height="270" style="width: 100%">
				<el-table-column prop="keyName" label="主键名" width="180" />
				<el-table-column prop="" label="状态" width="100" >
					<el-tag type="danger"><el-icon><el-icon-circle-close-filled/></el-icon> 失败</el-tag>
				</el-table-column>
				<el-table-column prop="reason" label="原因" />
			</el-table>
		</div>
		<template #footer>
			<el-button type="primary" @click="importErrDialogVisible=false">我知道了</el-button>
		</template>
	</el-dialog>

</template>

<script>
	import scFileImport from '@/components/scFileImport'
	import scFileExport from '@/components/scFileExport'

	export default {
		name: 'importexport',
		components: {
			scFileImport,
			scFileExport
		},
		data() {
			return {
				importErrDialogVisible: false,
				importErrData: {},
				column: [
					{
						label: "姓名",
						prop: "name"
					},
					{
						label: "性别",
						prop: "sex"
					},
					{
						label: "评分",
						prop: "num"
					},
					{
						label: "邮箱",
						prop: "email",
						hide: true
					},
					{
						label: "进度",
						prop: "progress"
					},
					{
						label: "注册时间",
						prop: "datetime"
					}
				]
			}
		},
		mounted() {

		},
		methods: {
			success(res, close){
				if(res.code==200){
					this.$alert("导入返回成功后，可后续操作，比如刷新表格等。执行回调函数close()可关闭上传窗口。", "导入成功", {
						type: "success",
						showClose: false,
						center: true
					})
					close()
				}else{
					//返回失败后的自定义操作，这里演示显示错误的条目
					this.importErrDialogVisible = true
					this.importErrData = res.data
				}

			}
		}
	}
</script>

<style>

</style>