|
|
@@ -0,0 +1,156 @@
|
|
|
+<template>
|
|
|
+ <!-- 上传 -->
|
|
|
+ <el-dialog title="导入文件上传" :visible.sync="dialogVisible" width="40%">
|
|
|
+ <el-form label-width="110px" class="zw-criterion">
|
|
|
+ <el-form-item label="选择文件">
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ action="#"
|
|
|
+ :show-file-list="false"
|
|
|
+ :http-request="handlSuccess"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ >
|
|
|
+ <el-button icon="el-icon-plus" size="small" type="primary"
|
|
|
+ >文件上传</el-button
|
|
|
+ >
|
|
|
+ <div slot="tip" class="el-upload__tip">
|
|
|
+ 只能上传excel文件，点击
|
|
|
+ <el-link
|
|
|
+ type="primary"
|
|
|
+ :underline="false"
|
|
|
+ @click="downLoadTemplate()"
|
|
|
+ >
|
|
|
+ 下载模板</el-link
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="上传列表">
|
|
|
+ <div class="imgs-box">
|
|
|
+ <p v-for="(item, index) in attaments" :key="index" class="imgs-p">
|
|
|
+ <span> {{ item.name }}</span>
|
|
|
+ <el-link @click="delFileList(index)" type="primary">删除</el-link>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button size="small" @click="dialogVisible = false">关 闭</el-button>
|
|
|
+ <el-button size="small" @click="upload" type="primary">上 传</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { importBatch } from '@/api/system/file/index.js';
|
|
|
+ import { importFile, downImportTemplate } from '@/api/inspectionProject';
|
|
|
+ import { download1 } from '@/utils/file';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ // eslint-disable-next-line vue/require-prop-type-constructor
|
|
|
+ defModule: '',
|
|
|
+ fileUrl: '',
|
|
|
+ fileName: '',
|
|
|
+ apiUrl: ''
|
|
|
+ },
|
|
|
+ //注册组件
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showViewer: false, // 显示查看器
|
|
|
+ dialogVisible: false,
|
|
|
+ uploadShow: false,
|
|
|
+ module: '',
|
|
|
+ attaments: [], //上传文件
|
|
|
+ file: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ methods: {
|
|
|
+ open() {
|
|
|
+ this.attaments = [];
|
|
|
+ this.module = '';
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ //删除附件
|
|
|
+ delFileList(index) {
|
|
|
+ this.attaments.splice(index, 1);
|
|
|
+ },
|
|
|
+ //上传限制
|
|
|
+ beforeUpload(file) {
|
|
|
+ const isLt10M = file.size / 1024 / 1024 < 10;
|
|
|
+ if (!isLt10M) {
|
|
|
+ this.$message.error('导入单文件大小不能超过 10MB!');
|
|
|
+ }
|
|
|
+ return isLt10M;
|
|
|
+ },
|
|
|
+ //图片上传
|
|
|
+ handlSuccess(param) {
|
|
|
+ this.file = param.file;
|
|
|
+ this.attaments.push(param.file);
|
|
|
+ },
|
|
|
+ // 文件上传
|
|
|
+ async upload() {
|
|
|
+ if (this.attaments.length == 0) {
|
|
|
+ return this.$message.warning('文件不能为空！');
|
|
|
+ }
|
|
|
+ const formData = new FormData();
|
|
|
+ this.attaments.forEach((item, index) => {
|
|
|
+ formData.append(`importExcels`, item);
|
|
|
+ });
|
|
|
+ this.loading = true;
|
|
|
+ importFile(formData)
|
|
|
+ .then((res) => {
|
|
|
+ this.$message.success('操作成功！');
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.$emit('success');
|
|
|
+ this.loading = false;
|
|
|
+ })
|
|
|
+ .catch((data) => {
|
|
|
+ this.loading = false;
|
|
|
+ if (data.code != -1) {
|
|
|
+ // this.$message.info(data.message);
|
|
|
+ this.$alert(data.message, '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ callback: (action) => {}
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ downLoadTemplate() {
|
|
|
+ downImportTemplate();
|
|
|
+ // download1(window.location.origin + this.fileUrl, this.fileName);
|
|
|
+ // var a = document.createElement('a'); //创建一个<a></a>标签
|
|
|
+ // a.href = 'static/model.xlsx'; // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
|
|
|
+ // a.download = '质检项导入模板.xlsx'; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
|
|
|
+ // a.style.display = 'none'; // 障眼法藏起来a标签
|
|
|
+ // document.body.appendChild(a); // 将a标签追加到文档对象中
|
|
|
+ // a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
|
|
|
+ // a.remove();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .zw-table-header {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgs-box .imgs-p {
|
|
|
+ height: 30px;
|
|
|
+ background: #f0f3f3;
|
|
|
+ line-height: 30px;
|
|
|
+ width: 372px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ padding: 0 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .zw-criterion-normal {
|
|
|
+ padding: 20px 0 0 0;
|
|
|
+ }
|
|
|
+ .el-main {
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+</style>
|
695593266@qq.com