fanfan
10 months ago
parent
b45d5bd5bb
commit
9c0da9844a
@ -0,0 +1,170 @@ |
||||
<template> |
||||
<a-card :bordered="false"> |
||||
<div class="card-title"> |
||||
<span>{{ $route.meta.pageTitle }}</span> |
||||
</div> |
||||
<a-spin :spinning="isLoading"> |
||||
<div class="container"> |
||||
<div class="upload-dragger"> |
||||
<a-upload-dragger |
||||
accept=".xls, .xlsx" |
||||
:multiple="false" |
||||
:fileList="fileList" |
||||
:showUploadList="false" |
||||
:beforeUpload="beforeUpload" |
||||
:remove="handleRemove" |
||||
> |
||||
<p class="ant-upload-drag-icon"> |
||||
<a-icon type="cloud-upload" /> |
||||
</p> |
||||
<div v-if="!fileList.length"> |
||||
<p class="ant-upload-text">点击选择文件，或者将文件拖拽至此区域</p> |
||||
<p class="ant-upload-hint">仅支持.xls, .xlsx 格式的excel文件，限2M以内</p> |
||||
</div> |
||||
<div v-else> |
||||
<p class="ant-upload-text"> |
||||
<span>{{ fileList[0].name }}</span> |
||||
<a class="ml-10" href="javascript:void(0);" @click.stop="handleRemove(fileList[0])">删除</a> |
||||
</p> |
||||
<a-button class="mt-20" type="primary" @click.stop="onFormSubmit">立即导入</a-button> |
||||
</div> |
||||
</a-upload-dragger> |
||||
</div> |
||||
<div class="import-explain"> |
||||
<h2 class="title">导入说明</h2> |
||||
<a-timeline class="timeline"> |
||||
<a-timeline-item class="timeline-item"> |
||||
<p class="name">使用模板</p> |
||||
<ul class="content"> |
||||
<li class="content-li"> |
||||
<span>模板中最多不能超过500个商品，如超过500个商品，请分批导入</span> |
||||
</li> |
||||
<li class="content-li"> |
||||
<span>模板中的字段含义以及填写规则，可查看模板文件中标题栏的标注</span> |
||||
</li> |
||||
</ul> |
||||
</a-timeline-item> |
||||
</a-timeline> |
||||
</div> |
||||
<!-- 文件选择器 --> |
||||
<FilesModal ref="FilesModal" :multiple="true" :maxNum="10" :actions="['delete', 'move', 'copyIds']" /> |
||||
</div> |
||||
</a-spin> |
||||
</a-card> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as GoodsApi from '@/api/goods' |
||||
import { FilesModal } from '@/components/Modal' |
||||
|
||||
export default { |
||||
components: { |
||||
FilesModal, |
||||
}, |
||||
data() { |
||||
return { |
||||
// 正在加载 |
||||
isLoading: false, |
||||
// 文件列表 |
||||
fileList: [], |
||||
// 上传文件大小限制 2m |
||||
uploadSizeLimit: '2', |
||||
} |
||||
}, |
||||
// 初始化数据 |
||||
created() {}, |
||||
methods: { |
||||
// 打开文件选择器 |
||||
handleSelectImage() { |
||||
this.$refs.FilesModal.show() |
||||
}, |
||||
|
||||
// 上传文件之前的钩子 |
||||
beforeUpload(file) { |
||||
const fileSizeMb = file.size / 1024 / 1024 |
||||
if (fileSizeMb > this.uploadSizeLimit) { |
||||
this.$message.error(`上传的文件大小不能超出${this.uploadSizeLimit}MB`) |
||||
return false |
||||
} |
||||
this.fileList = [file] |
||||
return false |
||||
}, |
||||
|
||||
// 文件移除 |
||||
handleRemove(file) { |
||||
const { fileList } = this |
||||
const index = fileList.indexOf(file) |
||||
if (index > -1) { |
||||
fileList.splice(index, 1) |
||||
} |
||||
}, |
||||
|
||||
// 提交到后端api |
||||
onFormSubmit() { |
||||
const { fileList } = this |
||||
const formData = new FormData() |
||||
formData.append('file', fileList[0]) |
||||
|
||||
this.isLoading = true |
||||
GoodsApi.exportData(formData) |
||||
.then((result) => { |
||||
this.fileList = [] |
||||
this.$message.success(result.message, 1.8) |
||||
setTimeout(() => this.$router.push('/goods/import/list'), 1500) |
||||
}) |
||||
.finally(() => (this.isLoading = false)) |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
<style lang="less" scoped> |
||||
/deep/.ant-upload.ant-upload-drag .ant-upload { |
||||
padding: 82px 0; |
||||
} |
||||
|
||||
/deep/span.ant-radio + * { |
||||
color: #7a7a7a; |
||||
} |
||||
|
||||
.card-title { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.container { |
||||
width: 1000px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.timeline { |
||||
color: #111; |
||||
} |
||||
|
||||
.import-explain { |
||||
margin-top: 40px; |
||||
|
||||
.title { |
||||
margin-bottom: 25px; |
||||
font-weight: bold; |
||||
font-size: 15px; |
||||
} |
||||
|
||||
.name { |
||||
font-size: 14px; |
||||
margin-bottom: 8px; |
||||
} |
||||
|
||||
.timeline-item { |
||||
padding-bottom: 20px; |
||||
} |
||||
|
||||
.content { |
||||
color: #7a7a7a; |
||||
padding-left: 20px; |
||||
.content-li { |
||||
list-style-type: disc; |
||||
margin-bottom: 5px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue