<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="sc-icon-upload" @click="open">导入(全配置)</el-button>
|
</template>
|
<template #uploader>
|
<el-icon class="el-icon--upload"><sc-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="sc-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="sc-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>
|
