<template> <div class="eibs-tab"> <c-col :span="24"> <c-col :span="24" style="text-align: center"> <el-button type="primary" plain icon="el-icon-plus" size="mini" ref="boprulInsertBtn" @click="dialog = true">申报规则导入 </el-button> </c-col> </c-col> <c-col> <el-dialog title="申报规则导入" :visible.sync="dialog" :close-on-click-modal="false" @close="cancel" center> <c-col :span="24"> <c-col :span="24"> <div class="upload-file"> <el-upload action="/webapi/manager/boprul/batchinsert" :accept="accept" :limit="1" :before-upload="handleBeforeUpload" :file-list="fileList" :on-exceed="handleExceed" :auto-upload="false" ref="uploadff"> <!--上传按钮--> <el-button slot="trigger" size="mini" 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">只能上传xlxs/xls文件,且不超过10M</div> </el-upload> <!-- 文件列表 --> <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul"> <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList"> <el-link :href="file.url" :underline="false" target="_blank"> <span class="el-icon-document"> {{ getFileName(file.name) }} </span> </el-link> <div class="ele-upload-list__item-content-action"> <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link> </div> </li> </transition-group> </div> </c-col> </c-col> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="cancel">取 消</el-button> </span> </el-dialog> </c-col> </div> </template> <script> export default { props: ["model"], inject: ["root"], mixins: [], data() { return { dialog: false, fileList: [], accept: '.xls,.xlsx', } }, methods: { getFileName(name) { if (name.lastIndexOf("/") > -1) { return name.slice(name.lastIndexOf("/") + 1).toLowerCase(); } else { return ""; } }, handleBeforeUpload(file) { // 校检文件大小 const isLt = file.size / 1024 / 1024 < 10; if (!isLt) { this.$notify.error(`上传文件大小不能超过 10 MB!`); return false; } return true; }, handleDelete(index) { this.fileList.splice(index, 1); }, cancel() { this.fileList = []; this.dialog = false; this.onSearch(); }, handleExceed() { this.$notify.error(`只允许上传1个文件`); }, submitUpload() { this.$refs.uploadff.submit() this.cancel() }, } } </script>