Vue以弹窗形式实现导入功能

news2024/9/30 3:28:08

前言

由于个人工作原因，偏全栈，对于前端的总结还有些初出茅庐，后续会进行规整化的总结

对应的前端框架由：【vue】avue-crud表单属性配置（表格以及列）

最终实现的表单样式如下：

点击导入按钮

在这里插入图片描述

出现的画面如下：

在这里插入图片描述

正文

直奔主题，其vue的按钮样式：

<template>
  <basic-container>
    <el-form :inline="true" ref="formInline" :model="formInline" label-width="80px">

    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad"
               @current-row-change="handleCurrentRowChange"
               @row-click="handleRowClick"
    >
      <template slot="menuLeft">


        <el-button type="success"
                    size="small"
                    plain
                    icon="el-icon-upload2"
                    @click="handleImport">一键导入
        </el-button>

      </template>

    </avue-crud>

    <el-dialog title="导入"
                   append-to-body
                   :visible.sync="excelBox"
                   width="555px">
          <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
            <template slot="excelTemplate">
              <el-button type="primary" @click="handleTemplate">
                点击下载<i class="el-icon-download el-icon--right"></i>
              </el-button>
            </template>
          </avue-form>
        </el-dialog>

  </basic-container>
</template>

对应的样式如下：

export default {
    data() {
      return {
        form: {},
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },


		 // 导入的按钮
        excelForm: {},
        excelBox:false,
        excelOption: {
          submitBtn: false,
          emptyBtn: false,
          column: [
            {
              label: '模板上传',
              prop: 'excelFile',
              type: 'upload',
              drag: true,
              loadText: '模板上传中，请稍等',
              span: 24,
              propsHttp: {
                res: 'data'
              },
              tip: '请上传 .xls,.xlsx 标准格式文件',
              action: '/此处为api的接口下载'
            },
            {
              label: '模板下载',
              prop: 'excelTemplate',
              formslot: true,
              span: 24,
            }
          ]
        },

其主要方法如下：

 methods: {

		// 执行模板下载
      handleTemplate() {
        window.open(`http://10.197.0.67:10086/monthplan.xlsx`);
      },
      // 上传之后处理的事情
      uploadAfter(res, done, loading, column) {
        window.console.log(res);
        this.excelBox = false;
        this.onLoadChild(this.pageChild);
        done();
      },
      // 点击导入
      handleImport() {
        this.excelBox = true;
      },