配件下载excel模板、导入数据

src/views/components/import/ImportCommon.vue

@@ -0,0 +1,121 @@
+<template>
+  <el-dialog :title="upload.title" :visible.sync="dialogVisible" 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">
+        <div class="el-upload__tip" slot="tip">
+          <el-checkbox v-model="upload.updateSupport"/>
+          是否更新已经存在的数据
+        </div>
+        <span>仅允许导入xls、xlsx格式文件。</span>
+        <el-link v-if="isDownload" 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" :disabled="!isUpload">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import request, {getBaseHeader} from "@/utils/request";
+
+export default {
+  name: "ImportCommon",
+  data() {
+    return {
+      // 用户导入参数
+      upload: {
+        // 弹出层标题（用户导入）
+        title: "",
+        // 设置上传的请求头部
+        headers: getBaseHeader(),
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的数据
+        updateSupport: 0,
+        // 上传的地址
+        url: "/import-data",
+        // 下载模板地址
+        getUrl: "/get-import-template",
+      },
+      dialogVisible: false,
+      baseUrl: process.env.VUE_APP_BASE_API + '/admin-api',
+      isUpload: false,
+      isDownload: false,
+    }
+  },
+  methods: {
+    open(data) {
+      if (data.url) {
+        this.isUpload = true
+      }
+      if (data.getUrl) {
+        this.isDownload = true
+      }
+      this.upload = Object.assign(this.upload, data)
+      if (this.isUpload) {
+        this.upload.url = this.baseUrl + data.url
+      }
+      if (this.isDownload) {
+        this.upload.getUrl = this.baseUrl + data.getUrl
+      }
+      this.dialogVisible = true
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+      this.upload.isUploading = true;
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+      this.dialogVisible = false
+      if (response.code !== 0) {
+        this.$modal.msgError(response.msg)
+        return;
+      }
+      this.upload.isUploading = false;
+      this.$refs.upload.clearFiles();
+      // 拼接提示语
+      let data = response.data;
+      let text = '导入成功数量：' + data.createNames.length;
+      for (const name of data.createNames) {
+        text += '<br />&nbsp;&nbsp;&nbsp;&nbsp;' + name;
+      }
+      text += '<br />更新成功数量：' + data.updateNames.length;
+      for (const name of data.updateNames) {
+        text += '<br />&nbsp;&nbsp;&nbsp;&nbsp;' + name;
+      }
+      text += '<br />更新失败数量：' + Object.keys(data.failureNames).length;
+      for (const name in data.failureNames) {
+        text += '<br />&nbsp;&nbsp;&nbsp;&nbsp;' + name + '：' + data.failureNames[name];
+      }
+      this.$alert(text, "导入结果", {dangerouslyUseHTMLString: true});
+      this.$emit('success')
+    },
+    /** 下载模板操作 */
+    importTemplate() {
+      request({
+        url: this.upload.getUrl,
+        method: 'get',
+        responseType: 'blob'
+      }).then(res => {
+        this.$download.excel(res, `${this.upload.title}模板.xls`);
+      })
+    },
+    // 提交上传文件
+    submitFileForm() {
+      this.$refs.upload.submit();
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/repair/wares/index.vue

@@ -26,6 +26,9 @@
         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openForm(undefined)"
                    >新增
         </el-button>
+        <el-button type="info" icon="el-icon-upload2" size="mini" @click="handleImport"
+                  >导入
+        </el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
@@ -77,16 +80,19 @@
                 @pagination="getList"/>
     <!-- 对话框(添加 / 修改) -->
     <WaresForm ref="formRef" @success="getList"/>
+    <ImportCommon ref="importRef" @success="getList"/>
   </div>
 </template>
 
 <script>
 import * as WaresApi from '@/api/repair/wares';
 import WaresForm from './WaresForm.vue';
+import ImportCommon from "@/views/components/import/ImportCommon.vue";
 
 export default {
   name: "Wares",
   components: {
+    ImportCommon,
     WaresForm,
   },
   data() {
@@ -134,6 +140,14 @@ export default {
     this.getList();
   },
   methods: {
+    handleImport(){
+      const data = {
+        title: "配件导入",
+        url: '/repair/wares/import-data',
+        getUrl: '/repair/wares/get-import-template'
+      }
+      this.$refs.importRef.open(data)
+    },
     /** 查询列表 */
     async getList() {
       try {