阿里官方使用说明

前端组件使用方法

  1. <!-- excel导入弹窗 -->
  2. <NewByXlsx v-if="newByXlsxDialog.visible" @close="newByXlsxClose" @refresh="getList"
  3. :title="newByXlsxDialog.title" />
  1. import NewByXlsx from './NewByxlsx.vue'
  2. //************
  4. components: { NewByXlsx },
  5.   //************  
  7.   // 用户导入
  8.   newByXlsxDialog: {
  9.     visible: false,
  10.       title: '用户信息-导入',
  11.   },
  13.     //************
  15.     // excel导入信息
  16.     newByXlsxOpen() {
  17.       this.newByXlsxDialog.visible = true
  18.     },
  19.       newByXlsxClose() { //关闭
  20.         this.newByXlsxDialog.visible = false
  21.       },

后端接口

  1. /**
  2.      * 批量导入
  3.      *
  4.      * @param keyShops
  5.      * @return
  6.      */
  7. @PutMapping("/upload")
  8. R<String> upload(@RequestBody List<KeyShop> keyShops) {
  9.     return keyShopService.uploadByXlsx(keyShops);
  10. }
  1. /**
  2.      * 批量导入
  3.      *
  4.      * @param keyShops
  5.      * @return
  6.      */
  7. @Override
  8. public R<String> uploadByXlsx(List<KeyShop> keyShops) {
  9.     Integer successNum = 0; //成功的数量
  10.     Integer failedNum = 0;  //失败的数量
  11.     if (CollectionUtils.isNotEmpty(keyShops)) {
  12.         for (KeyShop keyShop : keyShops) {
  13.             if (save(keyShop)) {
  14.                 successNum++; //成功计数
  15.             } else {
  16.                 failedNum++;  //失败计数
  17.             }
  18.         }
  19.     }
  20.     if (failedNum > 0) {
  21.         return R.error("导入成功 " + successNum + " 条记录；失败 " + failedNum + " 条记录。");
  22.     } else {
  23.         return R.success("导入成功 " + successNum + " 条记录");
  24.     }
  25. }

附NewByXlsx组件

  1. <template>
  2.   <div>
  3.     <el-dialog v-dialogDrag :title="title" visible width="600px" 
  4.                :before-close="beforeClose">
  5.       <!-- 弹窗页面内容 -->
  6.       <!-- Excel文件转JSON数据 -->
  7.       <div>注：请使用导出用户的模板导入用户数据</div>
  8.       <ExcelToJSON @data="usersJsonData"></ExcelToJSON>
  9.       <span slot="footer" class="dialog-footer">
  10.         <el-button size="default" @click="beforeClose">取消</el-button>
  11.         <el-button size="default" type="primary" @click="onSubmit">确定</el-button>
  12.       </span>
  13.     </el-dialog>
  14.   </div>
  15. </template>
  17. <script>
  18. import ExcelToJSON from '@/pages/models/excel/ExcelToJSON.vue'
  19. export default {
  20.   components: { ExcelToJSON },
  21.   props: {
  22.     title: {
  23.       type: String,
  24.       default: ''
  25.     }
  26.   },
  27.   data() {
  28.     return {
  29.       data: [],
  30.     }
  31.   },
  32.   methods: {
  33.     usersJsonData(data) {
  34.       this.data = data.map(item => {
  35.         let { 帐号: user_accout,
  36.           姓名: user_name,
  37.           地址: address,
  38.           电话: phone,
  39.           邮箱: email,
  40.           微信: weixin,
  41.           QQ: qq } = item
  42.         return { user_accout, user_name, address, phone, email, weixin, qq }
  43.       })
  44.       console.log('接受到的json信息', this.data);
  45.     },
  46.     async onSubmit() {
  47.       //检查是否有数据
  48.       if (!this.data || this.data.length === 0) {
  49.         this.$message.warning(`没有数据`)
  50.         return
  51.       }
  52.       let res = await this.$api.setting.usersUp(this.data)
  53.       if (res.code === 1) {
  54.         this.$message.success(res.msg)
  55.       } else {
  56.         this.$message.warning(res.msg)
  57.       }
  58.       this.$emit('refresh') //触发refresh事件
  59.       this.$emit('close') //触发close事件
  60.     },
  61.     beforeClose() {
  62.       this.$emit('close')
  63.     }
  64.   }
  65. }
  66. </script>