dz_farming_map_back/src/view/areaData/modal/ImportMobiel.vue

<template>
	<el-dialog 
		:title="modalTitle" 
		:visible.sync="modalVisible" 
		:width="formLabelWidth" 
		top="2vh"
		@close="handleCancel">
		<div class="userMobile">
			<el-steps :active="3" simple>
			  <el-step title="下载模板文件" icon="el-icon-edit"></el-step>
			  <el-step title="按格式填写数据" icon="el-icon-upload"></el-step>
			  <el-step title="上传模版" icon="el-icon-picture"></el-step>
			</el-steps>
			<div class="uploadfile">
				<div class="downloadFile">
					模版文件: <a href="/htdata/areaData/downloadTemplate">点击下载</a>
				</div>
				<div class="upload">
					<span class="title">文件上传：</span>
					<el-upload
					  class="upload-ele"
					  ref="upload"
					  :action="importFileUrl"
					  :on-remove="handleRemove"
					  :on-change="handleChange"
					  :on-success="handleSuccess"
					  :file-list="fileList"
					  accept=".xlsx,.xls"
					  :headers = "headers"
					  :on-exceed="onExceed"
					  :limit="1"
					  :multiple="false"
					  :auto-upload="false">
					  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
					  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">开始上传</el-button>
					  <div slot="tip" class="el-upload__tip">注意: <span style="color:red">只能上传xlsx/xks文件</span></div>
					</el-upload>
				</div>
			</div>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="handleCancel">取 消</el-button>
		</div>
	</el-dialog>
</template>

<script>
import {globalReg,uploadFileAreaUrl} from '@/api/CONST'
export default {
	name: 'userMobiel',
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: 'title'
		},
	},
	watch: {
		visible(newVal, oldVal) {
			this.modalVisible = newVal;
		},
		title(newVal, oldVal) {
			this.modalTitle = newVal;
		},
	},
	data() {
		return {
			modalTitle: this.title,
			modalVisible: this.visible,
			modalAction: this.action,
			modalSelectRow:this.selectRow,
			formLabelWidth: '920px',
			importFileUrl:uploadFileAreaUrl,
			headers: {
			        accessToken:'' 
			},
			fileList: []
		};
	},
	created() {
		this.headers.accessToken = this.getAccessToken
	},
	methods: {
		submitUpload() {
			this.$refs.upload.submit();
		},
		handleRemove(file, fileList) {
		},
		handleChange(file){
		},
		onExceed(){
			this.$message({
			  message: '当前限制选择 1 个文件，请删除后继续上传!',
			  type: 'warning'
			});
		},
		handleSuccess(response, file, fileList){
			console.log(response,file,fileList)
			console.log(response.retHead.errCode)
			if(response.retHead.errCode === 0){
				this.$message({
				  message: '文件上传成功!',
				  type: 'success'
				});
				this.handleCancel()
				this.$emit('closeModal',true)
			}else{
				this.$message.error('数据上传出错，请检查环境！');
			}
		},
		handleCancel() {
			this.$emit('closeModal', false);
		}
	},
	computed:{
		getAccessToken(){
			return this.$store.state.accessToken
		}
	}
	
};
</script>

<style scoped lang="less">
.uploadfile{
	padding:15px 0;
}
.downloadFile,
.upload{
	border-bottom:1px solid #EBEEF5;
}
.downloadFile{
	height:40px;
	line-height:40px;
	font-weight:bold;
}
.downloadFile a{
	margin-left:10px;
}
.upload{
	padding:20px 0;
	overflow:hidden;
}
.upload .title{
	display:block;
	font-weight:bold;
	margin-top:5px;
	margin-bottom:15px;
	float:left;
}
.upload-ele{
	padding-left:70px;
}
</style>