使用组件实现会员分组导出

index.html

@@ -22,5 +22,6 @@
     <script src="//web-1251519181.file.myqcloud.com/components/area-ab.2.0.00.js"></script>
     <script src="//web-1251519181.file.myqcloud.com/components/card.2.0.02.js"></script>
     <script src="//web-1251519181.file.myqcloud.com/components/selector.1.1.91.js"></script>
+    <script src="//web-1251519181.file.myqcloud.com/components/export-excel.2.0.05.js"></script>
   </body>
 </html>

src/view/memberGroup/memberGroupDetail.vue

@@ -289,28 +289,22 @@
     <vue-gic-footer></vue-gic-footer>
     <!-- 自定义字段列表 -->
     <userDefined :fieldsData="memberFields" :selectedData="selectedUserDefined" :showUserDefined="showUserDefined" @hideUserDefined="hideUserDefined" @confirmUserDefined="confirmUserDefined"> </userDefined>
-    <el-dialog :visible.sync="downMemberListPop.show" title="导出数据" width="500px">
-      <div style="display: flex;justify-content: center">
-        <div class="down-member-list-wrapper">
-          <img src="../../assets/data1.svg" alt="">
-          <p class="title">脱敏数据</p>
-          <p class="info">将敏感信息实现隐私保护</p>
-          <a href="/gic-web/#/reportCenter" v-if="downMemberListPop.toReport1">
-            <el-button type="primary">去报告中心</el-button>
-          </a>
-          <el-button v-else type="primary" class="is-plain" :loading="downMemberListPop.loading1" @click="createMemberExcel(1)">生成报告</el-button>
-        </div>
-        <div class="down-member-list-wrapper">
-          <img src="../../assets/data2.svg" alt="">
-          <p class="title">完整数据</p>
-          <p class="info">未进行敏感数据隐私保护</p>
-          <a href="/gic-web/#/reportCenter" v-if="downMemberListPop.toReport2">
-            <el-button type="warning">去报告中心</el-button>
-          </a>
-          <el-button v-else type="warning" class="is-plain" :loading="downMemberListPop.loading2" @click="createMemberExcel(2)">生成报告</el-button>
-        </div>
-      </div>
-    </el-dialog>
+    <vue-gic-export-excel
+      :dialogVisible.sync="downMemberListPop.show"
+      :excelUrl="downMemberListPop.excelUrl"
+      :params="downMemberListPop.params"
+      :dataArr="memberGroupDetailData"
+      type="2"
+      projectName="member-tag"
+    ></vue-gic-export-excel>
+    <!-- <dm-export-excel
+      :dialogVisible.sync="downMemberListPop.show"
+      :type="1"
+      :excelUrl="downMemberListPop.excelUrl"
+      :params="downMemberListPop.params"
+      projectName="member-tag"
+      :dataArr='[1, 2, 3]'
+    ></dm-export-excel> -->
   </div>
 </template>
 <script>
@@ -331,13 +325,12 @@ export default {
       selectedUserDefined: [], // 已选的自定义字段
       selectedFields: [], // 已选的自定义字段对象集合
       downMemberListPop: {
+        canDown: false,
         show: false,
-        loading1: false,
-        loading2: false,
-        // 去报告中心
-        toReport1: false,
-        toReport2: false,
-        canDown: false
+        excelUrl: '/member-tag-member/memberExportExcel',
+        params: {
+          memberTagGroupId: ''
+        }
       },
 
       groupName: '分组名称',
@@ -435,37 +428,6 @@ export default {
         }
       })
     },
-    createMemberExcel(type) {
-      let memberTagGroupId = this.$route.query.memberTagGroupId;
-      let params = {
-        memberTagGroupId,
-        dataType: type
-      }
-      if (type === 1) {
-        this.downMemberListPop.loading1 = true;
-      } else {
-        this.downMemberListPop.loading2 = true;
-      }
-      getRequest('/member-tag-member/memberExportExcel', params).then(res => {
-        if (res.data.errorCode === 1) {
-          this.$message.success('您下载的数据已为您打包好，请点击下面按钮去报告中心');
-          if (type === 1) {
-            this.downMemberListPop.loading1 = false;
-            this.downMemberListPop.toReport1 = true;
-          } else {
-            this.downMemberListPop.loading2 = false;
-            this.downMemberListPop.toReport2 = true;
-          }
-        } else {
-          this.downMemberListPop.loading1 = false;
-          this.downMemberListPop.loading2 = false;
-          this.$message.error(res.data.message);
-        }
-      }).catch(_ => {
-        this.downMemberListPop.loading1 = false;
-        this.downMemberListPop.loading2 = false;
-      })
-    },
     /**
      * 千位分隔符
      * */
@@ -704,6 +666,14 @@ export default {
     }
   },
   mounted() {
+    let local = window.location.origin;
+    let memberTagGroupId = this.$route.query.memberTagGroupId;
+    if (local.indexOf('localhost') != -1) {
+      local = 'http://gicdev.demogic.com';
+    }
+
+    this.downMemberListPop.params.memberTagGroupId = memberTagGroupId;
+    this.downMemberListPop.excelUrl = local + this.downMemberListPop.excelUrl;
     this.canDownMemberList();
     this.getTagValueDtoList();
     // 获取自定义字段