【党员管理】完成上传+导出

src/views/modules/communityParty/members/memberList.vue

@@ -87,14 +87,29 @@
         <el-button type="primary"
                    @click="handleCreateBtnClick">新增
         </el-button>
+        <el-upload
+            :headers="$getElUploadHeaders()"
+            ref="upload"
+            class="upload-btn"
+            action="uploadUlr"
+            :limit="1"
+            :accept="'.xls,.xlsx'"
+            :with-credentials="true"
+            :show-file-list="false"
+            :auto-upload="true"
+            :on-success="handleExcelSuccess"
+            :before-upload="beforeExcelUpload"
+            :http-request="uploadHttpRequest"
+            style="display: inline-block;margin:0px 10px"
+        >
+          <el-button type="primary" :loading="importLoading">导入</el-button>
+        </el-upload>
         <el-button type="primary"
-                   @click="handleCreateBtnClick">导入
+                   :loading="exportBtnLoading"
+                   @click="handleExportBtnClick">导出
         </el-button>
         <el-button type="primary"
-                   @click="handleCreateBtnClick">导出
-        </el-button>
-        <el-button type="primary"
-                   @click="handleCreateBtnClick">下载模板
+                   @click="handleDownloadTemplateBtnClick">下载模板
         </el-button>
         <el-button type="primary"
                    @click="handleDeleteBatchBtnClick">批量删除
@@ -236,11 +251,14 @@ export default {
 
   data () {
     return {
+      exportBtnLoading: false,
+      importLoading: false,
       loading: false,
       epmetResultResolver: null,
       createDlgShow: false,
       detailDlgShow: false,
       updateDlgShow: false,
+      uploadDlgShow: false,
       total: 0, // 总数
       multiSelectedRows: [], //多选选项
       pageSizes: [20, 50, 100], // 页码可选
@@ -289,6 +307,86 @@ export default {
     handleMultiSelect(selectedRows) {
       this.multiSelectedRows = selectedRows;
     },
+
+    // 导出
+    async handleExportBtnClick() {
+      this.exportBtnLoading = true;
+      
+      let url = "/actual/base/party/member/export";
+      await this.$http({
+        method: "POST",
+        url,
+        responseType: "blob",
+        data: this.searchForm,
+      })
+      .then((res) => {
+        // this.download(res.data, title + '.xls')
+        if (res.headers["content-disposition"]) {
+          let fileName = window.decodeURI(
+              res.headers["content-disposition"].split(";")[1].split("=")[1]
+          );
+          console.log("filename", fileName);
+          let blob = new Blob([res.data], {
+            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+          });
+          var url = window.URL.createObjectURL(blob);
+          var aLink = document.createElement("a");
+          aLink.style.display = "none";
+          aLink.href = url;
+          aLink.setAttribute("download", fileName);
+          document.body.appendChild(aLink);
+          aLink.click();
+          document.body.removeChild(aLink); //下载完成移除元素
+          window.URL.revokeObjectURL(url); //释放掉blob对象
+        } else this.$message.error("下载失败");
+      })
+      .catch((err) => {
+        console.log("err", err);
+        return this.$message.error("网络错误");
+      });
+
+      this.exportBtnLoading = false;
+    },
+    
+    /**
+     * 导出按钮点击
+     */
+    async handleDownloadTemplateBtnClick() {
+      let url = "/actual/base/party/member/downloadTemplate";
+
+      let params = {};
+      await this.$http({
+        method: "GET",
+        url,
+        responseType: "blob",
+        data: params,
+      })
+          .then((res) => {
+            // this.download(res.data, title + '.xls')
+            if (res.headers["content-disposition"]) {
+              let fileName = window.decodeURI(
+                  res.headers["content-disposition"].split(";")[1].split("=")[1]
+              );
+              console.log("filename", fileName);
+              let blob = new Blob([res.data], {
+                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+              });
+              var url = window.URL.createObjectURL(blob);
+              var aLink = document.createElement("a");
+              aLink.style.display = "none";
+              aLink.href = url;
+              aLink.setAttribute("download", fileName);
+              document.body.appendChild(aLink);
+              aLink.click();
+              document.body.removeChild(aLink); //下载完成移除元素
+              window.URL.revokeObjectURL(url); //释放掉blob对象
+            } else this.$message.error("下载失败");
+          })
+          .catch((err) => {
+            console.log("err", err);
+            return this.$message.error("网络错误");
+          });
+    },
     
     /**
      * 新增按钮点击
@@ -298,6 +396,20 @@ export default {
       this.$refs['create'].init()
     },
 
+    /**
+     * 导入按钮点击
+     */
+    handleImportBtnClick() {
+      this.uploadDlgShow = true;
+    },
+
+    /**
+     * 上传对话框关闭
+     */
+    handleUploadDlgClose() {
+      this.uploadDlgShow = false;
+    },
+    
     /**
      * 查看详情
      */
@@ -310,9 +422,70 @@ export default {
      * 更新按钮点击
      * @param row
      */
-    handleUpdateBtnClick(row) {
-      this.detailDlgShow = true;
-      this.$refs['update'].init(row.id);
+    handleExcelSuccess(res) {
+      this.epmetResultResolver.success((data) => {
+        this.$message.success('上传完成，正在导入，请到导入记录中查看导入情况。');
+      }).fail(() => {
+        this.$message.error('导入失败');
+      }).parse(res);
+    },
+
+    /**
+     * 文件上传前的处理
+     * @param file
+     * @returns {boolean}
+     */
+    beforeExcelUpload(file) {
+      // console.log('file', file);
+      const isXlsx = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+      const isLt1M = file.size / 1024 / 1024 < 10;
+      if (!isXlsx) {
+        this.$message.error('上传文件只能是xlsx格式！');
+      }
+
+      if (!isLt1M) {
+        this.$message.error('上传文件大小不能超过 10MB!');
+      }
+      return isXlsx && isLt1M;
+    },
+
+    /**
+     * 执行上传
+     * @param file
+     * @returns {Promise<void>}
+     */
+    async uploadHttpRequest(file) {
+      this.importLoading = true;
+      this.importBtnTitle = '正在上传中...';
+      // this.$message({
+      //   showClose: true,
+      //   dangerouslyUseHTMLString: true,
+      //   message: "导入中，请到系统管理-<a id='clickA' style='cursor: pointer;'>导入记录</a>中查看进度",
+      //   duration: 3000
+      // });
+      // let than = this;
+      // document.getElementById('clickA').addEventListener('click', function() {
+      //   than.$router.replace('/main/importRecord-index');
+      // });
+      const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
+      formData.append('file', file.file); //添加文件对象
+      // formData.append('code', ''); //添加文件对象
+      await this.$http
+          .post('/actual/base/party/member/import', formData)
+          .then(res => {
+            debugger
+            this.epmetResultResolver.success((data) => {
+              this.$message.success('上传成功，正在导入，请到"系统管理-导入记录"中查看导入情况。');
+            }).parse(res.data);
+          })
+          .catch(err => {
+            console.log('失败', err);
+            file.onError(); //上传失败的文件会从文件列表中删除
+            // this.$message.error('导入失败')
+          });
+      this.importLoading = false;
+      this.importBtnTitle = '导入';
+      this.$refs.upload.clearFiles();
     },
 
     /**

src/views/modules/communityParty/partyOrg/orgTree.vue

@@ -31,7 +31,6 @@
         :data="partyOrgTree"
         style="width: 100%"
         row-key="id"
-        fit
         border
         lazy
         :load="handleTreeNodeExpand"
@@ -62,8 +61,7 @@
       </el-table-column>
       
       <el-table-column
-          label="操作"
-          width="180">
+          label="操作">
         <template slot-scope="scope">
           <el-button type="text"
                      @click="handlePrincipalBtnClick(scope.row)"