模板下载和上传

.env

+VUE_APP_OSS_TEMPLATE=https://ccccchy-test.obs.cn-east-3.myhuaweicloud.com/oa/员工导入模板.xlsx
\ No newline at end of file

src/service/base.ts

@@ -8,8 +8,8 @@ import { generateToken } from "@/util/Sign";
 import { signAuth } from "@/util/Bridge";
 
 
-const Account = {
-    entId: '166910771849072640',
+export const Account = {
+    entId: '166961152260050944',
     staffId: '1FKxgaEh5fuSm7a35BfUnKYAmradowpiTR' 
 }
 interface RouterConfig{
@@ -34,7 +34,7 @@ export default class BaseService {
             }
         )
     }
-    public async useService(routerConfig: RouterConfig,payload?:any){
+    public async useService(routerConfig: RouterConfig,payload?:any, ext?: {onUploadProgress?: (e: ProgressEvent)=>any}){
         let token;
         let headerItems:{[key:string]:string|number} ={}
         if(!routerConfig.method) routerConfig.method = 'post'
@@ -46,7 +46,8 @@ export default class BaseService {
                     headerItems[i[0]] = i[1]
                 })
                 const res = await this.service.post(routerConfig.path,payload,{
-                   headers:headerItems
+                   headers:headerItems,
+                   onUploadProgress: ext?.onUploadProgress
                 })
             return res
         }

src/service/moudles/Staff.ts

@@ -3,8 +3,16 @@ import BaseService from '../base'
 import { ChangeDepDTO, ChangeRoleDTO, GetRroupDTO, GetStaffInfoDTO, ResignDTO, UpdateStaffDTO } from './service.dto'
 
 export default class Staff extends BaseService {
+    static instance: Staff
+    static getInstance(){
+      if(!Staff.instance){
+        Staff.instance = new Staff();
+      }
+      return Staff.instance;
+    }
+  
     router = {
-      addexcel:{path:'/v1/staff/add-staffs-by-excel',crediential: true, headers:[['key','val']]},
+      addexcel:{path:'/v1/staff/add-staffs-by-excel',crediential: true, headers:[['content-type','multipart/form-data']]},
       changeDep: { path: '/v1/staff/change-dep', crediential: true },
       changeRole: { path: '/v1/staff/change-role', crediential: true },
       getGroup: { path: '/v1/staff/get-group', crediential: true },
@@ -15,6 +23,13 @@ export default class Staff extends BaseService {
     constructor() {
       super()
     }
+    
+    async addExcel(data:File, entId: string, onUploadProgress: (e: ProgressEvent)=>any) {
+      const fd = new FormData();
+      fd.append('file_data', data)
+      fd.append('entId', entId)
+      return await this.useService(this.router.addexcel, fd, {onUploadProgress})
+    }
 
     /**
      * 变更员工部门

src/util/Common/index.ts

@@ -5,3 +5,13 @@ export function trim(str: string) {
 export function generateTree(arr: Array<any>, rootId: string) {
   console.log(arr, rootId)
 }
+
+export function formatFileSize(size: number) {
+  const kb = size / 1024
+  const mb = kb / 1024
+  if (mb > 1) {
+    return mb.toFixed(3) + 'MB'
+  } else {
+    return kb.toFixed(3) + 'KB'
+  }
+}

src/views/team/import.vue

 <template>
   <!-- 加入/创建团队 -->
   <div class="team-frame">
-    <main-page
-      left-arrow
-      @click-left="$router.go(-1)"
-    >
+    <main-page left-arrow @click-left="$router.go(-1)">
       <div class="px-4 pt-14 pb-4">
-        <div class="rounded bg-indigo-100 text-indigo-500 px-2 py-2 text-sm">批量导入需要先下载下方的批量导入模版，将成员信息全部按要求完成填写后，可选择下方上传信息表，自动识别并添加所有成员。</div>
-        <div >
-          <div class="flex justify-between items-center bg-white rounded px-4 py-3 my-4" >
+        <div
+          class="rounded bg-indigo-100 text-indigo-500 px-2 py-2 text-sm"
+        >批量导入需要先下载下方的批量导入模版，将成员信息全部按要求完成填写后，可选择下方上传信息表，自动识别并添加所有成员。</div>
+        <div>
+          <div
+            class="flex justify-between items-center bg-white rounded px-4 py-3 my-4"
+            @click="clickDownload"
+          >
             <div>下载模板</div>
-            <app-icon
-              slot="right"
-              icon-name="dot"
-              class-name="w-1 h-1 flex  items-center"
-            />
+            <app-icon slot="right" icon-name="dot" class-name="w-1 h-1 flex  items-center" />
           </div>
-          <div class="flex justify-between items-center bg-white rounded px-4 py-3" @click='uploadFile'>
-            <div>上传信息表</div>
-            <input type="file" id="uploadFile" ref='uploadFile' class="hidden" @change='fileHandler'>
-            <app-icon
-              slot="right"
-              icon-name="dot"
-              class-name="w-1 h-1 flex  items-center"
-            />
+          <div class="bg-white rounded px-4 py-3" @click="!file && uploadFile()">
+            <div class="flex justify-between items-center">
+              <div>上传信息表</div>
+              <input
+                type="file"
+                id="uploadFile"
+                ref="uploadFile"
+                accept=".xlsx"
+                class="hidden"
+                @input="fileHandler"
+              />
+              <app-icon slot="right" icon-name="dot" class-name="w-1 h-1 flex  items-center" />
+            </div>
+            <div v-if="file" class="mt-3">
+              <div class="flex items-center">
+                <div
+                  class="w-10 h-10 rounded-md bg-green-600 text-white text-3xl flex items-center justify-center"
+                >X</div>
+                <div class="ml-2">
+                  <div>{{ file.name }}</div>
+                  <div class="text-gray-500 text-sm">
+                    <span class="mr-2">{{ formatDate(new Date(file.lastModified), 'YYYY/MM/DD') }}</span>
+                    <span>{{ formatFileSize(file.size) }}</span>
+                  </div>
+                </div>
+              </div>
+              <div class="flex justify-around mt-2">
+                <div class="flex flex-col items-center" @click.stop="clickUpload">
+                  <img src="@/assets/icons/upload.png" alt />
+                  <div class="text-gray-500 text-sm">上传</div>
+                </div>
+                <div class="flex flex-col items-center" @click.stop="clickDelete">
+                  <img src="@/assets/icons/delete.png" alt />
+                  <div class="text-gray-500 text-sm">删除</div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
-        <div class="absolute flex justify-center bottom-1/4 inset-x-0 " v-show="show">
+        <!-- <div class="absolute flex justify-center bottom-1/4 inset-x-0" v-show="show">
           <div class="bg-gray-700 text-white px-4 py-4 rounded w-1/3 text-center">下载已完成</div>
           <div class="bg-gray-700 text-white px-4 py-4 rounded w-1/3 ml-4 text-center">上传成功</div>
-        </div>
+        </div>-->
         <van-popup v-model="show" position="bottom" class="px-4 py-3">
-          <div v-show="show" class="w-full rounded-full py-2 px-2 text-center bg-gray-500 text-white">上传中...</div>
-          <div v-show="show" class="w-full rounded-full py-2 px-2 text-center bg-gray-500 mt-3 text-white">下载中...</div>
+          <div
+            v-show="show1"
+            class="w-full rounded-full py-2 px-2 text-center bg-gray-500 text-white"
+          >上传中{{ progress }}%</div>
+          <div
+            v-show="show2"
+            class="w-full rounded-full py-2 px-2 text-center bg-gray-500 mt-3 text-white"
+          >下载中...</div>
         </van-popup>
         <van-overlay :show="show" />
-         
       </div>
     </main-page>
   </div>
 </template>
 <script lang="ts">
 import Vue from 'vue'
-import { Overlay } from 'vant';
+import { Overlay, Toast } from 'vant';
 import { Popup } from 'vant';
+import Staff from '@/service/moudles/Staff';
+import { Account } from '@/service/base';
+import { formatDate } from '@/util/FormatDate';
+import { formatFileSize } from '@/util/Common';
+
 
 Vue.use(Popup);
 Vue.use(Overlay);
@@ -58,25 +95,60 @@ export default Vue.extend({
   },
   data() {
     return {
-      show:true,
+      show: false,
+      show1: false,
+      show2: false,
+      file: undefined as undefined | File,
+      progress: undefined as undefined | number,
     }
   },
   methods: {
-    fileHandler(item:any){
-      console.log(item);
-      
+    clickDownload() {
+      const downloadUrl = process.env.VUE_APP_OSS_TEMPLATE as string;
+      const ele = document.createElement('a');
+      ele.href = downloadUrl;
+      document.body.appendChild(ele)
+      ele.click();
+      ele.remove();
+    },
+    formatDate,
+    formatFileSize,
+    clickDelete() {
+      this.file = undefined;
+      const fileInput = this.$refs.uploadFile as HTMLInputElement
+      fileInput.value = '';
     },
-    uploadFile(){
+    onProgressChange(e: ProgressEvent) {
+      const percent = (e.loaded / e.total);
+      this.progress = Number.parseFloat((percent * 100).toFixed(1))
+    },
+    clickUpload() {
+      if (!this.file) return;
+      this.show = true;
+      this.show1 = true;
+      this.progress = 0;
+      Staff.getInstance().addExcel(this.file, Account.entId, this.onProgressChange).then(() => {
+        this.$router.push({ name: "Team" })
+      }).catch((err) => {
+        Toast.fail(err)
+      })
+    },
+    fileHandler(e: InputEvent) {
+      const target = e.target as HTMLInputElement
+      if (target.files && target.files?.length !== 0) {
+        console.log(target.files);
+        const file = target.files[0];
+        this.file = file;
+      }
+    },
+    uploadFile() {
       console.log(this.$refs);
       const fileInput = this.$refs.uploadFile as HTMLInputElement
       fileInput.click()
-      console.log(fileInput);
-      
     }
   }
 })
 </script>
 
 <style lang="less">
-
 </style>
\ No newline at end of file