添加用户与vip导入

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

@@ -5,7 +5,9 @@ const api = {
   userCreate: '/api/clientUser/user/create',
   userUpdate: '/api/clientUser/user/update',
   userDelete: '/api/clientUser/user/delete',
-  userQuery: '/api/clientUser/user/query'
+  userQuery: '/api/clientUser/user/query',
+  imports: '/api/importandexport/handle/import',
+  progressed: '/api/importandexport/handle/progressed'
 };
 Vue.use(Vuex);
 const state = () => ({
@@ -14,6 +16,18 @@ const state = () => ({
 });
 
 const actions = {
+  async uploads({ commit }, data) {
+    const type = data.get('type');
+    const headers = {
+      'Content-Type': 'multipart/form-data'
+    };
+    const res = await $axios.post(`${api.imports}/${type}`, data, null, headers);
+    return res;
+  },
+  async progressInfo({ commit }, payload) {
+    const res = await $axios.get(api.progressed, payload);
+    return res.data;
+  },
   async userCreate ({ commit }, payload) {
     const res = await $axios.post(api.userCreate, payload);
     return res;

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

@@ -4,9 +4,10 @@
       <div slot="header" class="clearfix">
         <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>
       </div>
       <div class="main">
-        <filterList ref="filterList" :tableData="userList" :filed="filed" @bind="bindRole" @edit="filtereEdit" @delete="filterDelete" @query="filterQuery" :total="Total"></filterList>
+        <filterList ref="filterList" :tableData="userList" :filed="filed" @edit="filtereEdit" @delete="filterDelete" @query="filterQuery" :total="Total"></filterList>
       </div>
     </el-card>
     <dialogAndDrawer :width="'35%'" :title="title" :visibleSync="visibleSync" v-if="visibleSync" @close="visibleSync = false">
@@ -35,13 +36,15 @@
 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 { mapState, mapActions } from 'vuex';
 const token = sessionStorage.getItem('token');
 export default {
   components: {
     filterList,
     dialogAndDrawer,
-    formData
+    formData,
+    upload
   },
   data() {
     return {

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

@@ -10,7 +10,9 @@ const api = {
   contentsQuery: '/api/cms/contents/query',
   intactQuery: '/api/journal/intact/query',
   powerCreate: '/api/clientVip/power/create',
-  powerupdate: '/api/clientVip/power/update'
+  powerupdate: '/api/clientVip/power/update',
+  imports: '/api/importandexport/handle/import',
+  progressed: '/api/importandexport/handle/progressed'
 };
 Vue.use(Vuex);
 const state = () => ({
@@ -24,6 +26,18 @@ const state = () => ({
 });
 
 const actions = {
+  async uploads({ commit }, data) {
+    const type = data.get('type');
+    const headers = {
+      'Content-Type': 'multipart/form-data'
+    };
+    const res = await $axios.post(`${api.imports}/${type}`, data, null, headers);
+    return res;
+  },
+  async progressInfo({ commit }, payload) {
+    const res = await $axios.get(api.progressed, payload);
+    return res.data;
+  },
   async powerCreate ({ commit }, payload) {
     const res = await $axios.post(api.powerCreate, payload);
     return res;

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

@@ -4,6 +4,7 @@
       <div slot="header" class="clearfix">
         <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>
       </div>
       <div class="main">
         <filterList ref="filterList" :tableData="vipList" :filed="filed" @edit="filtereEdit" @delete="filterDelete" @query="filterQuery" :total="Total"></filterList>
@@ -62,13 +63,15 @@
 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 { mapState, mapActions } from 'vuex';
 const token = sessionStorage.getItem('token');
 export default {
   components: {
     filterList,
     dialogAndDrawer,
-    formData
+    formData,
+    upload
   },
   data() {
     return {

admin-frame/src/components/upload.vue

@@ -0,0 +1,189 @@
+<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>
+    <input type="file" @change="fileChang" class="filesName" />
+    <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="请选择数据文件" disabled>
+          <el-button slot="append" @click="selectFile">选择文件</el-button>
+        </el-input>
+        <div style="margin: 30px 0;"></div>
+        <!-- <label v-if="strategy">数据处理策略：</label>
+        <el-radio v-if="strategy" v-model="option" label="skip">跳过</el-radio>
+        <el-radio v-if="strategy" v-model="option" label="overwrite">覆盖</el-radio> -->
+      </div>
+      <el-dropdown slot="footer" class="left-footer" size="small" trigger="click" @command="templates" v-if="template">
+        <span class="el-dropdown-link"> 下载数据模板<i class="el-icon-arrow-down el-icon--right"></i> </span>
+        <el-dropdown-menu slot="dropdown">
+          <!-- <el-dropdown-item command="csv">文本文件(.csv)</el-dropdown-item> -->
+          <el-dropdown-item command="excel">Excel文件(.xls)</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <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: '' },
+    template: { type: Boolean, default: true },
+    strategy: { type: Boolean, default: true }
+  },
+  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(['uploads', 'progressInfo']),
+    // 点击上传按钮
+    upload() {
+      this.dialogVisible = true;
+    },
+    // 选择完弹出信息确定
+    selectFile() {
+      document.getElementsByClassName('filesName')[0].value = '';
+      document.getElementsByClassName('filesName')[0].click();
+    },
+    // 选择文件改变
+    async fileChang() {
+      this.file = document.getElementsByClassName('filesName')[0].files[0];
+      this.fileName = this.file.name;
+    },
+    // 文件上传
+    async uploadFile() {
+      if (this.file == null) {
+        this.$message.warning('请选择数据文件');
+        return;
+      }
+      this.dialogVisible = false;
+      this.summary = null;
+      // 上传文件获取任务id参数format  this.progress = true;弹出进度窗口成功后提示成功 切换显示成功后信息successDate = false
+      const data = new FormData();
+      data.append('file', this.file);
+      data.append('type', this.type);
+      data.append('option', this.option);
+      const res = await this.uploads(data);
+      if (res && !res.errcode) {
+        this.progress = true;
+        this.timeout(res.taskId);
+      } else {
+        document.getElementsByClassName('filesName')[0].value = '';
+        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);
+            document.getElementsByClassName('filesName')[0].value = '';
+            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/xms/task/${this.id}/log?fileName=${this.typeName}日志`);
+    },
+    // 上传模板下载
+    async templates(fileType) {
+      // type 上传类型（user,vip）、fileType文件类型（现在只有excel）、fileName文件名称
+      window.open(`/api/importandexport/handle/template?type=${this.type}&fileType=${fileType}&fileName=${this.typeName}模板`);
+    },
+    // 关闭窗口
+    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>