From 8eff378710b7074fe7241c73f3975345ffe8959b Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期四, 19 九月 2024 12:56:58 +0800
Subject: [PATCH] 上传添加遮挡
---
src/components/drag-upload.vue | 153 ++++++++++++++++++++++++++------------------------
1 files changed, 80 insertions(+), 73 deletions(-)
diff --git a/src/components/drag-upload.vue b/src/components/drag-upload.vue
index cbc2a45..48950fe 100644
--- a/src/components/drag-upload.vue
+++ b/src/components/drag-upload.vue
@@ -1,90 +1,97 @@
<template>
- <div class="center">
- <el-upload
- class="upload-demo"
- :action="action"
- :headers="headers"
- :data="{ staffId: staffId, orgId: orgId }"
- :on-exceed="handleExceed"
- :on-success="fileSuccess"
- :on-error="fileSuccess"
- :file-list="fileList"
- :show-file-list="true"
- multiple
- :limit="limit"
- accept=".xls,.xlsx"
- :before-upload="beforeAvatarUpload"
- >
- <slot></slot>
- <slot name="tip"></slot>
- </el-upload>
- </div>
+ <div class="center" v-loading.fullscreen="successLoading">
+ <el-upload
+ class="upload-demo"
+ :action="action"
+ :headers="headers"
+ :data="{ staffId: staffId, orgId: orgId }"
+ :on-exceed="handleExceed"
+ :on-success="fileSuccess"
+ :on-error="fileSuccess"
+ :file-list="fileList"
+ :show-file-list="true"
+ multiple
+ :limit="limit"
+ accept=".xls,.xlsx"
+ :before-upload="beforeAvatarUpload"
+ >
+ <slot></slot>
+ <slot name="tip"></slot>
+ </el-upload>
+ </div>
</template>
<script>
export default {
- data() {
- return {
- msg: "鎷栧姩涓婁紶",
- fileList: [],
- headers: {
- token: localStorage.getItem("token"),
- },
- };
- },
- props: {
- limit: {
- type: Number,
+ data() {
+ return {
+ msg: "鎷栧姩涓婁紶",
+ successLoading: false,
+ fileList: [],
+ headers: {
+ token: localStorage.getItem("token"),
+ },
+ };
},
- action: {
- type: String,
+ props: {
+ limit: {
+ type: Number,
+ },
+ action: {
+ type: String,
+ },
+ type: {
+ type: String,
+ },
+ orgId: {
+ type: Number,
+ },
+ staffId: {
+ type: Number,
+ },
},
- type: {
- type: String,
+ created() {
+
},
- orgId: {
- type: Number,
+ methods: {
+ // 瓒呭嚭鏂囦欢涓婁紶涓暟鍥炶皟
+ handleExceed(files, fileList) {
+ this.$message.warning(`褰撳墠闄愬埗閫夋嫨 1 涓枃浠禶);
+ },
+ // 绉婚櫎鏂囦欢寮瑰嚭灞�
+ beforeRemove(file, fileList) {
+ return this.$confirm(`纭畾绉婚櫎 ${file.name}锛焋);
+ },
+ // 涓婁紶鎴愬姛鍥炶皟
+ fileSuccess(res, f, fl) {
+ this.successLoading = false
+ this.$emit("fileSuccess", res, this.type);
+ },
+
+ // 杩囨护鏂囦欢
+ beforeAvatarUpload(file) {
+ this.successLoading = true
+ let fileName = file.name.substring(file.name.lastIndexOf(".") + 1);
+ const extension = fileName === "xls";
+ const extension2 = fileName === "xlsx";
+ if (!extension && !extension2) {
+
+ this.successLoading = false
+ this.$message({
+ message: "涓婁紶鏂囦欢鍙兘鏄� xls銆亁lsx鏍煎紡!",
+ type: "warning",
+ });
+ return false;
+ }
+ },
},
- staffId: {
- type: Number,
- },
- },
- methods: {
- // 瓒呭嚭鏂囦欢涓婁紶涓暟鍥炶皟
- handleExceed(files, fileList) {
- this.$message.warning(`褰撳墠闄愬埗閫夋嫨 1 涓枃浠禶);
- },
- // 绉婚櫎鏂囦欢寮瑰嚭灞�
- beforeRemove(file, fileList) {
- return this.$confirm(`纭畾绉婚櫎 ${file.name}锛焋);
- },
- // 涓婁紶鎴愬姛鍥炶皟
- fileSuccess(res, f, fl) {
- this.$emit("fileSuccess", res, this.type);
- },
-
- // 杩囨护鏂囦欢
- beforeAvatarUpload(file) {
- let fileName = file.name.substring(file.name.lastIndexOf(".") + 1);
- const extension = fileName === "xls";
- const extension2 = fileName === "xlsx";
- if (!extension && !extension2) {
- this.$message({
- message: "涓婁紶鏂囦欢鍙兘鏄� xls銆亁lsx鏍煎紡!",
- type: "warning",
- });
- return false;
- }
- },
- },
- mounted() {},
+ mounted() { },
};
</script>
<style lang="scss" scoped>
.center {
- float: left;
+ float: left;
}
-
</style>
--
Gitblit v1.8.0