添加用户、vip、导出

admin-client-user/src/store/index.js

@@ -7,7 +7,8 @@ const api = {
   userDelete: '/api/clientUser/user/delete',
   userQuery: '/api/clientUser/user/query',
   imports: '/api/importandexport/handle/import',
-  progressed: '/api/importandexport/handle/progressed'
+  progressed: '/api/importandexport/handle/progressed',
+  exports: '/api/importandexport/handle/exports'
 };
 Vue.use(Vuex);
 const state = () => ({
@@ -16,6 +17,10 @@ const state = () => ({
 });
 
 const actions = {
+  async exports({ commit }, payload) {
+    const res = await $axios.post(api.exports, payload);
+    return res;
+  },
   async uploads({ commit }, data) {
     const type = data.get('type');
     const headers = {

admin-client-user/src/views/home.vue

@@ -5,6 +5,7 @@
         <span>用户管理</span>
         <el-button style="float: right; padding: 3px 0" type="text" @click="addUser">添加用户</el-button>
         <upload style="float: right; padding: 3px 0; margin-right: 5px;" typeName="用户导入" type="user" @closes="filterQuery"></upload>
+        <exports style="float: right; padding: 3px 0; margin-right: 5px;" type="user" typeName="导出用户"></exports>
       </div>
       <div class="main">
         <filterList ref="filterList" :tableData="userList" :filed="filed" @edit="filtereEdit" @delete="filterDelete" @query="filterQuery" :total="Total"></filterList>
@@ -37,6 +38,7 @@ import filterList from '@components/filterList/index.vue';
 import dialogAndDrawer from '@components/dialogAndDrawer.vue';
 import formData from '@components/formData/index.vue';
 import upload from '@components/upload.vue';
+import exports from '@components/exports.vue';
 import { mapState, mapActions } from 'vuex';
 const token = sessionStorage.getItem('token');
 export default {
@@ -44,7 +46,8 @@ export default {
     filterList,
     dialogAndDrawer,
     formData,
-    upload
+    upload,
+    exports
   },
   data() {
     return {

admin-client-vip/src/store/index.js

@@ -13,7 +13,8 @@ const api = {
   powerupdate: '/api/clientVip/power/update',
   powerquery: '/api/clientVip/power/query',
   imports: '/api/importandexport/handle/import',
-  progressed: '/api/importandexport/handle/progressed'
+  progressed: '/api/importandexport/handle/progressed',
+  exports: '/api/importandexport/handle/exports'
 };
 Vue.use(Vuex);
 const state = () => ({
@@ -27,6 +28,10 @@ const state = () => ({
 });
 
 const actions = {
+  async exports({ commit }, payload) {
+    const res = await $axios.post(api.exports, payload);
+    return res;
+  },
   async uploads({ commit }, data) {
     const type = data.get('type');
     const headers = {

admin-client-vip/src/views/home.vue

@@ -5,7 +5,7 @@
         <span>vip管理</span>
         <el-button style="float: right; padding: 3px 0" type="text" @click="addvip">添加VIP</el-button>
         <upload style="float: right; padding: 3px 0; margin-right: 5px;" typeName="VIP导入" type="vip" @closes="filterQuery"></upload>
-        <el-button style="float: right; padding: 3px 0; margin-right: 5px;" type="text" @click="exportvip">导出VIP</el-button>
+        <exports style="float: right; padding: 3px 0; margin-right: 5px;" type="vip" typeName="导出VIP"></exports>
       </div>
       <div class="main">
         <filterList ref="filterList" :tableData="vipList" :filed="filed" @edit="filtereEdit" @delete="filterDelete" @query="filterQuery" :total="Total"></filterList>
@@ -65,6 +65,7 @@ import filterList from '@components/filterList/index.vue';
 import dialogAndDrawer from '@components/dialogAndDrawer.vue';
 import formData from '@components/formData/index.vue';
 import upload from '@components/upload.vue';
+import exports from '@components/exports.vue';
 import { mapState, mapActions } from 'vuex';
 const token = sessionStorage.getItem('token');
 export default {
@@ -72,7 +73,8 @@ export default {
     filterList,
     dialogAndDrawer,
     formData,
-    upload
+    upload,
+    exports
   },
   data() {
     return {

admin-frame/src/components/exports.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="upload_box">
+    <el-button :disabled="existence" type="text" @click="upload"><i class="el-dropdown-link el-icon-download"></i>{{ typeName || '文件导出' }}</el-button>
+    <el-dialog :close-on-click-modal="false" :title="typeName" :visible.sync="dialogVisible" width="400px" @close="closes">
+      <div>
+        <el-input size="small" v-model="fileName" placeholder="请选输入导出文件名"></el-input>
+        <div style="margin: 30px 0;"></div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="uploadFile">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog :close-on-click-modal="false" :title="successDate ? '数据导出进度' : '数据导出结果'" :visible.sync="progress" width="400px">
+      <!-- 显示进度 -->
+      <div v-if="successDate">
+        <h3>{{ typeName }}</h3>
+        <div style="margin: 30px 0;"></div>
+        <el-progress :percentage="percentage"></el-progress>
+        <div style="margin: 30px 0;"></div>
+      </div>
+      <!-- 显示成功后信息下载日志 -->
+      <div v-else>
+        <h3 class="success">{{ summary }}</h3>
+        <div style="margin: 30px 0;"></div>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="text" @click="btn">导出文件下载</el-button>
+        </span>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { mapActions } from 'vuex';
+export default {
+  props: {
+    // 数据导入类型 (user,vip)
+    type: String,
+    // 业务名称
+    typeName: { type: String, default: '' }
+  },
+  data() {
+    return {
+      // 下载文件类型
+      fileType: 'excel',
+      // 选择信息弹出
+      dialogVisible: false,
+      // 按钮禁用
+      existence: false,
+      // 进度
+      percentage: 0,
+      // 上传前选择
+      option: 'overwrite',
+      // 进度弹出
+      progress: false,
+      // 成功后切换
+      successDate: true,
+      // 成功后文字
+      summary: null,
+      // 任务id
+      id: null,
+      // 导入模板命名
+      fileName: null,
+      // 文件流
+      file: null
+    };
+  },
+  methods: {
+    ...mapActions(['exports', 'progressInfo']),
+    // 点击上传按钮
+    upload() {
+      this.dialogVisible = true;
+    },
+    // 确定
+    async uploadFile() {
+      this.dialogVisible = false;
+      this.summary = null;
+      const res = await this.exports({ type: this.type, fileType: this.fileType });
+      if (res && !res.errcode) {
+        this.progress = true;
+        this.timeout(res.taskId);
+      } else {
+        this.$message.error(res.errmsg);
+      }
+    },
+    timeout(res) {
+      const Interval = setTimeout(async () => {
+        const info = await this.progressInfo({ taskId: res });
+        console.log(info);
+        if (info && info.status !== 'error') {
+          this.percentage = info.progress || 0;
+          if (info.progress == 100) {
+            this.id = info.taskId;
+            this.successDate = false;
+            this.summary = '导出成功';
+            clearInterval(Interval);
+            this.$emit('refreshData');
+            this.percentage = 0;
+          } else {
+            this.timeout(info.taskId);
+          }
+        } else {
+          clearInterval(Interval);
+          this.$message.error(info?.errmsg || '错误');
+        }
+      }, 1000);
+    },
+    // 详情下载
+    async btn() {
+      window.open(`/api/importandexport/handle/exportsDownload?fileName=${this.typeName}&taskId=${this.id}`);
+    },
+    // 关闭窗口
+    closes() {
+      this.successDate = true;
+      this.file = null;
+      this.fileName = null;
+      this.$emit('closes');
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+input {
+  display: none;
+}
+.el-button--text {
+  padding: 0;
+}
+.upload_box {
+  line-height: 0;
+}
+.success {
+  width: 100%;
+  color: #67c23a;
+}
+.error {
+  width: 100%;
+  color: #f56c6c;
+}
+.jump {
+  width: 100%;
+  color: #e6a23c;
+}
+.left-footer {
+  float: left;
+  margin-top: 10px;
+}
+</style>