若以框架下百万信息的导入_若依框架导入-CSDN博客

本文链接：https://blog.csdn.net/qq_74202612/article/details/145336231

1.第一步：先做前端页面的按钮

若依自带的框架是没有导入功能的，所以我们要找到相对应的页面，去添加导入功能。

我的导入功能是在药品页面呈现的，所以找到前端页面的views分类下面所要找的页面下面的index.vue页面中进行代码添加。按钮的整体框架没有改变，需要改变一下点击实现的事件，也就是@click=”handleImport”这段代码，这句代码是用来确实点击的事件，而下面这句代码是用来确保只有‘medicines:medicines:import’才能实现这个导入按钮的实现。

<el-col :span="1.5">

              <el-button

                type="info"

                plain

                icon="el-icon-upload2"

                size="mini"

                @click="handleImport"

                v-hasPermi="['medicines:medicines:import']"

              >导入</el-button>

            </el-col>

而导入按钮弹窗呈现的页面代码则是

<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>

          <el-upload

            ref="upload"

            :limit="1"

            accept=".xlsx, .xls"

            :headers="upload.headers"

            :action="upload.url + '?updateSupport=' + upload.updateSupport"

            :disabled="upload.isUploading"

            :on-progress="handleFileUploadProgress"

            :on-success="handleFileSuccess"

            :auto-upload="false"

            drag

          >

            <i class="el-icon-upload"></i>

            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

            <div class="el-upload__tip text-center" slot="tip">

              <span>仅允许导入xls、xlsx格式文件。</span>

              <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>

            </div>

          </el-upload>

          <div slot="footer" class="dialog-footer">

            <el-button type="primary" @click="submitFileForm">确 定</el-button>

            <el-button @click="upload.open = false">取 消</el-button>

          </div>

        </el-dialog>

为了实现导入功能，还需要添加import { getToken } from ‘@/utils/auth’这段代码，是为了控制权限和用户认证。

然后需要添加信息导入参数

 upload: {

                // 是否显示弹出层（用户导入）

                open: false,

                // 弹出层标题（用户导入）

                title: "",

                // 是否禁用上传

                isUploading: false,

                // 是否更新已经存在的用户数据

                updateSupport: 0,

                // 设置上传的请求头部

                headers: { Authorization: "Bearer " + getToken() },

                // 上传的地址

                url: process.env.VUE_APP_BASE_API + "/medicines/medicines/import"

              },

下面是导入操作

 /** 导入按钮操作 */

         handleImport() {

          this.upload.title = "药品导入";

          this.upload.open = true;

        },

还有相对应的页面弹出的操作对应

文件上传中，文件上传成功处理以及提交文件的操作

// 文件上传中处理

        handleFileUploadProgress(event, file, fileList) {

          this.upload.isUploading = true;

        },

        // 文件上传成功处理

        handleFileSuccess(response, file, fileList) {

          this.upload.open = false;

          this.upload.isUploading = false;

          this.$refs.upload.clearFiles();

          this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });

          this.getList();

        },

        // 提交上传文件

        submitFileForm() {

          this.$refs.upload.submit();

          },

还有模板下载的操作