Skip to content

O
OKR
Commit 094f6ce6 authored by chenqikuai's avatar chenqikuai
Browse files
Options

模板下载和上传

parent e5e94480
Show whitespace changes
Inline Side-by-side
Showing with 137 additions and 38 deletions
.env 0 → 100644
View file @ 094f6ce6
VUE_APP_OSS_TEMPLATE=https://ccccchy-test.obs.cn-east-3.myhuaweicloud.com/oa/员工导入模板.xlsx
\ No newline at end of file
package-lock.json
View file @ 094f6ce6
This source diff could not be displayed because it is too large. You can view the blob instead.
src/service/base.ts
View file @ 094f6ce6
......@@ -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
View file @ 094f6ce6
......@@ -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 },
......@@ -16,6 +24,13 @@ export default class Staff extends BaseService {
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})
}
/**
* 变更员工部门
* @param {ChangeDepDTO} data {ChangeDepDTO}
......
src/util/Common/index.ts
View file @ 094f6ce6
......@@ -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
View file @ 094f6ce6
<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 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' class="hidden" @change='fileHandler'>
<app-icon
slot="right"
icon-name="dot"
class-name="w-1 h-1 flex items-center"
<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="absolute flex justify-center bottom-1/4 inset-x-0 " v-show="show">
<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="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 = '';
},
onProgressChange(e: ProgressEvent) {
const percent = (e.loaded / e.total);
this.progress = Number.parseFloat((percent * 100).toFixed(1))
},
uploadFile(){
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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment