基于Vue和Quasar的前端SPA項(xiàng)目實(shí)戰(zhàn)之?dāng)?shù)據(jù)導(dǎo)入（九）

回顧

通過(guò)之前一篇文章 基于Vue和Quasar的前端SPA項(xiàng)目實(shí)戰(zhàn)之業(yè)務(wù)數(shù)據(jù)（七）的介紹，實(shí)現(xiàn)了業(yè)務(wù)數(shù)據(jù)基本crud功能，本文主要介紹業(yè)務(wù)數(shù)據(jù)批量導(dǎo)入相關(guān)內(nèi)容。

簡(jiǎn)介

當(dāng)數(shù)據(jù)量比較大的時(shí)候，如果手工錄入數(shù)據(jù)就會(huì)比較慢，所以通過(guò)批量導(dǎo)入的方式錄入數(shù)據(jù)，以提高效率。這里采用的文件格式為EXCEL，針對(duì)每個(gè)業(yè)務(wù)表，可以自動(dòng)生成EXCEL模板文件，下載模板之后，直接編輯EXCEL表格，然后上傳EXCEL文件進(jìn)行批量導(dǎo)入數(shù)據(jù)。

UI界面

產(chǎn)品導(dǎo)入

產(chǎn)品導(dǎo)入

API

業(yè)務(wù)數(shù)據(jù)導(dǎo)入API

業(yè)務(wù)數(shù)據(jù)導(dǎo)入相關(guān)API，包括獲取模板和導(dǎo)入兩個(gè)功能，具體的通過(guò)swagger文檔可以查看。通過(guò)axios封裝api，名稱為table

import { axiosInstance } from "boot/axios";

const table = {
  import: async function(tableName, data, progressCallback) {
    return axiosInstance.post("/api/business/" + tableName + "/import", data,
      {
        headers: HEADERS,
        onUploadProgress:  (progressEvent) => {
          if (progressCallback) {
            progressCallback(progressEvent)
          }
        }
    });
  },
  getImportTemplate: function(tableName) {
    return axiosInstance.get("/api/business/" + tableName + "/import/template",
      {
        params: {
        }
      }
    );
  }
};

export { table };

核心代碼

代碼結(jié)構(gòu)

代碼結(jié)構(gòu)

代碼結(jié)構(gòu)

QFile組件

<q-file v-model="localFile" label="請(qǐng)上傳EXCEL文件">
  <template v-slot:prepend>
    <q-icon name="attach_file" />
  </template>
</q-file>

用到了q-file組件，用于上傳EXCEL。

產(chǎn)品為例

模板

product

小結(jié)

本文主要介紹了介紹業(yè)務(wù)數(shù)據(jù)批量導(dǎo)入功能，不同的業(yè)務(wù)表單都可以自動(dòng)生成模板文件，通過(guò)配置的方式可以零代碼實(shí)現(xiàn)業(yè)務(wù)數(shù)據(jù)的批量導(dǎo)入功能。后續(xù)會(huì)繼續(xù)介紹一些高級(jí)功能。

demo演示

官網(wǎng)地址：https://crudapi.cn
測(cè)試地址：https://demo.crudapi.cn/crudapi/login

附源碼地址

GitHub地址

https://github.com/crudapi/crudapi-admin-web

Gitee地址

https://gitee.com/crudapi/crudapi-admin-web

由于網(wǎng)絡(luò)原因，GitHub可能速度慢，改成訪問(wèn)Gitee即可，代碼同步更新。