From bc630b555653be1cb6eff37ab2da18cd31e8ef81 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期一, 13 十二月 2021 10:44:12 +0800
Subject: [PATCH] 配置页
---
src/pages/library/components/upload.vue | 318 +++++++++++++++++++++++++++-------------------------
1 files changed, 166 insertions(+), 152 deletions(-)
diff --git a/src/pages/library/components/upload.vue b/src/pages/library/components/upload.vue
index e137709..3c3c4aa 100644
--- a/src/pages/library/components/upload.vue
+++ b/src/pages/library/components/upload.vue
@@ -1,6 +1,6 @@
<template>
<span class="upload-content pr">
- <el-button
+ <!-- <el-button
type="primary"
:loading="upLoadLoading"
:size="uploadBtnSize"
@@ -9,12 +9,17 @@
>
<i :class="uploadBtnIcon"></i>
{{uploadBtntext}}
- </el-button>
+ </el-button> -->
+ <span
+ class="iconfont iconfont-wrap iconshangchuantupian-09"
+ @click="uploadStart"
+ :loading="upLoadLoading"
+ ></span>
<div class="upload-progress" v-if="isShowProgress">
<b-progress
variant="warning"
striped
- :style="`opacity: ${isShowProgress&&showProgress?1:0}`"
+ :style="`opacity: ${isShowProgress && showProgress ? 1 : 0}`"
:value="progressValue"
height="5px"
/>
@@ -23,83 +28,93 @@
<div class="drag-area py-4 px-4" v-show="isShowBox">
<div
ref="drag_area"
- :class="['text-center files-area py-4 px-4',drag_class]"
+ :class="['text-center files-area py-4 px-4', drag_class]"
@click="uploadStart('fileInput')"
@dragover="dragover($event)"
@drop="drop($event)"
@dragenter="dragenter($event)"
@dragleave="dragleave($event)"
>
- <i class="el-icon-upload text-primary" style="color:rgb(61, 104, 225)"></i>
- <div class="el-upload__text" style="color:#babbbc!important">
+ <i
+ class="el-icon-upload text-primary"
+ style="color: rgb(61, 104, 225)"
+ ></i>
+ <div class="el-upload__text" style="color: #babbbc !important">
灏嗘枃浠舵嫋鍒版澶勶紝鎴�
<em class="text-primary cursor-pointer">鐐瑰嚮涓婁紶</em>
</div>
<div
class="el-upload__tip text-light"
- style="color:#babbbc!important"
- >{{limitTypes?`鍙兘涓婁紶${limitTypes}鏂囦欢`:''}}{{limitSize?` 鏂囦欢澶у皬涓嶈秴杩�${limitSize}`:''}}</div>
+ style="color: #babbbc !important"
+ >
+ {{ limitTypes ? `鍙兘涓婁紶${limitTypes}鏂囦欢` : ""
+ }}{{ limitSize ? ` 鏂囦欢澶у皬涓嶈秴杩�${limitSize}` : "" }}
+ </div>
</div>
</div>
- <div class="upload-model" v-show="isShowBox" @click="isShowBox=false"></div>
+ <div
+ class="upload-model"
+ v-show="isShowBox"
+ @click="isShowBox = false"
+ ></div>
</span>
</template>
<script>
-import axios from 'axios'
-import { guid } from '@/scripts/util.js'
+import axios from "axios";
+import { guid } from "@/scripts/util.js";
export default {
- name: 'upload',
+ name: "upload",
props: {
/* 涓婁紶鎺т欢鍒楄〃鏄惁鍒犻櫎鍔熻兘 */
isDelFile: {
default: true,
- type: Boolean
+ type: Boolean,
},
/* 绫诲瀷闄愬埗锛堝悗缂�鍚�,鍒嗛殧锛� 浼犲叆绀轰緥'.png,.jpg' 涓嶉檺鍒朵负 '' */
limitTypes: {
- default: '',
- type: String
+ default: "",
+ type: String,
},
/* 鏂囦欢澶у皬闄愬埗 浼犲叆绀轰緥'1M' 鍗曚綅鏀寔G銆丮銆並銆丅 鏃犲崟浣嶆寜B璁＄畻 涓嶉檺鍒朵负 '' */
limitSize: {
- default: '5M',
- type: String
+ default: "5M",
+ type: String,
},
/* 涓婁紶鎸夐挳鏂囧瓧 */
uploadBtntext: {
- default: '涓婁紶',
- type: String
+ default: "涓婁紶",
+ type: String,
},
/* 涓婁紶鎸夐挳icon */
uploadBtnIcon: {
- default: 'ion ion-md-cloud-upload',
- type: String
+ default: "ion ion-md-cloud-upload",
+ type: String,
},
uploadBtnSize: {
- default: '',
- type: String
+ default: "",
+ type: String,
},
uploadBtnStyle: {
- default: '',
- type: String
+ default: "",
+ type: String,
},
uploadBtnClass: {
- default: 'btn btn-primary',
- type: String
+ default: "btn btn-primary",
+ type: String,
},
isShowProgress: {
default: false,
- type: Boolean
+ type: Boolean,
},
isDrag: {
default: false,
- type: Boolean
+ type: Boolean,
},
idJson: {
default: null,
- type: Object
- }
+ type: Object,
+ },
/**
* 涓婁紶缁勪欢鍥炲�兼柟娉�
* @description 涓婁紶缁勪欢鍥炲�兼柟娉�
@@ -109,262 +124,261 @@
data() {
return {
isShowBox: false,
- drag_class: '',
+ drag_class: "",
fileList: [],
erFileList: [],
suFileList: [],
fileIds: [],
upLoadLoading: false,
showProgress: false,
- progressValue: 0
- }
+ progressValue: 0,
+ };
},
computed: {},
methods: {
islimitTypes(fileObj) {
- if (this.limitTypes === '') {
- return 'success'
+ if (this.limitTypes === "") {
+ return "success";
}
if (
this.limitTypes.indexOf(
- fileObj.name.toLowerCase().replace(/^.+\./, '')
+ fileObj.name.toLowerCase().replace(/^.+\./, "")
) === -1
) {
const msg = {
- type: 'error',
- errorType: '涓婁紶绫诲瀷閿欒',
+ type: "error",
+ errorType: "涓婁紶绫诲瀷閿欒",
message:
/* ${fileObj && fileObj.name ? '鈥�' + fileObj.name + '鈥�' : ''} */
- `涓婁紶鏂囦欢蹇呴』鏄�${this.limitTypes},璇锋偍鏍告煡`
- }
+ `涓婁紶鏂囦欢蹇呴』鏄�${this.limitTypes},璇锋偍鏍告煡`,
+ };
// this.$notify(msg)
- return msg
+ return msg;
}
- return 'success'
+ return "success";
},
islimitSize(fileObj) {
- if (this.limitSize === '') {
- return 'success'
+ if (this.limitSize === "") {
+ return "success";
}
- let size = 0
- if (this.limitSize.indexOf('G') !== -1) {
- size = this.limitSize.replace('G', '') * 1024 * 1024 * 1024
- } else if (this.limitSize.indexOf('M') !== -1) {
- size = this.limitSize.replace('M', '') * 1024 * 1024
- } else if (this.limitSize.indexOf('K') !== -1) {
- size = this.limitSize.replace('K', '') * 1024
- } else if (this.limitSize.indexOf('B') !== -1) {
- size = this.limitSize.replace('B', '')
+ let size = 0;
+ if (this.limitSize.indexOf("G") !== -1) {
+ size = this.limitSize.replace("G", "") * 1024 * 1024 * 1024;
+ } else if (this.limitSize.indexOf("M") !== -1) {
+ size = this.limitSize.replace("M", "") * 1024 * 1024;
+ } else if (this.limitSize.indexOf("K") !== -1) {
+ size = this.limitSize.replace("K", "") * 1024;
+ } else if (this.limitSize.indexOf("B") !== -1) {
+ size = this.limitSize.replace("B", "");
} else {
- size = this.limitSize
+ size = this.limitSize;
}
if (size < fileObj.size) {
const msg = {
- type: 'error',
- errorType: '涓婁紶澶у皬閿欒',
+ type: "error",
+ errorType: "涓婁紶澶у皬閿欒",
message:
`${
- fileObj && fileObj.name ? '鈥�' + fileObj.name + '鈥�' : ''
- }蹇呴』灏忎簬` + this.limitSize
- }
+ fileObj && fileObj.name ? "鈥�" + fileObj.name + "鈥�" : ""
+ }蹇呴』灏忎簬` + this.limitSize,
+ };
// this.$notify(msg)
- return msg
+ return msg;
}
- return 'success'
+ return "success";
},
uploadStart(type) {
- this.$refs.fileInput.value = ''
- this.fileList = []
- this.erFileList = []
- this.suFileList = []
- if (this.isDrag && type !== 'fileInput') {
- this.isShowBox = !this.isShowBox
+ this.$refs.fileInput.value = "";
+ this.fileList = [];
+ this.erFileList = [];
+ this.suFileList = [];
+ if (this.isDrag && type !== "fileInput") {
+ this.isShowBox = !this.isShowBox;
} else {
- this.$refs.fileInput.click()
+ this.$refs.fileInput.click();
}
},
/* 鐐瑰嚮涓婁紶 */
clickUpLoad(e) {
if (e.target && e.target.files) {
- this.handleUpLoad(e.target.files)
+ this.handleUpLoad(e.target.files);
}
},
// 涓婁紶闄勪欢
handleUpLoad(files) {
// 鍒ゆ柇鏄惁閫夋嫨搴曞簱
// console.log(this.idJson, 'upload this.idJson')
- if (this.idJson.tableId === undefined || this.idJson.tableId === '') {
+ if (this.idJson.tableId === undefined || this.idJson.tableId === "") {
this.$notify({
- type: 'error',
- message: '璇峰厛閫夋嫨涓�涓簳搴�!'
- })
- return
+ type: "error",
+ message: "璇峰厛閫夋嫨涓�涓簳搴�!",
+ });
+ return;
}
/* 鎷垮埌涓婁紶鏂囦欢 */
if (files.length === 0) {
- return false
+ return false;
}
- this.fileList = [...files]
+ this.fileList = [...files];
/* 閲嶇疆杩涘害鏉� */
- this.showProgress = true
- this.progressValue = 0
+ this.showProgress = true;
+ this.progressValue = 0;
/* 寮�鍚笂浼犳寜閽甽oding */
- this.upLoadLoading = true
+ this.upLoadLoading = true;
/* 鍒涘缓FormData鏂囦欢瀵硅薄 */
- const fd = new FormData()
+ const fd = new FormData();
this.fileList.map((file, index) => {
/* 鏂囦欢鏍￠獙 start */
- const islimitTypes = this.islimitTypes(file)
- const islimitSize = this.islimitSize(file)
- if (islimitTypes !== 'success') {
+ const islimitTypes = this.islimitTypes(file);
+ const islimitSize = this.islimitSize(file);
+ if (islimitTypes !== "success") {
this.erFileList.push({
uuId: guid(),
file: file,
- errorMsg: islimitTypes
- })
- return false
+ errorMsg: islimitTypes,
+ });
+ return false;
}
- if (islimitSize !== 'success') {
+ if (islimitSize !== "success") {
this.erFileList.push({
uuId: guid(),
file: file,
- errorMsg: islimitSize
- })
- return false
+ errorMsg: islimitSize,
+ });
+ return false;
}
- this.suFileList.push(file)
+ this.suFileList.push(file);
/* 鏂囦欢鏍￠獙 end */
// fd.append('files' + index, file)
- fd.append('files', file)
- })
+ fd.append("files", file);
+ });
// fd.append('files', this.suFileList)
/* 娣诲姞tableId start */
if (this.idJson && this.idJson.tableId) {
- console.log(this.idJson, 'upload this.idJson')
- fd.append('tableId', this.idJson.tableId)
+ console.log(this.idJson, "upload this.idJson");
+ fd.append("tableId", this.idJson.tableId);
}
/* 娣诲姞orgId officeId end */
// fd.append('fileSource', 'FDFS')
if (this.fileList.length > this.erFileList.length) {
- this.uploadServer(fd)
+ this.uploadServer(fd);
} else {
/* 鍥炶皟浼犲�� */
- this.$emit('addFilesBaBackFN', {
+ this.$emit("addFilesBaBackFN", {
suFileList: this.suFileList,
erFileList: this.erFileList,
fileList: this.fileList,
- result: null
- })
+ result: null,
+ });
/* 缁撴潫涓婁紶鎸夐挳loding */
- this.upLoadLoading = false
+ this.upLoadLoading = false;
/* 闅愯棌鎷栨嫿妗� */
- this.isShowBox = false
+ this.isShowBox = false;
}
},
async uploadServer(fd) {
// this.$store.commit('HANDLE_LOADING_OPEN')
- const token = JSON.parse(
- sessionStorage.getItem('loginedInfo')
- ).access_token
+ const token = JSON.parse(sessionStorage.getItem("loginedInfo"))
+ .access_token;
try {
let res = await axios({
- method: 'post',
- url: `/data/api-v/dbperson/moreFileUpload`,//?access_token=${token}
+ method: "post",
+ url: `/data/api-v/dbperson/moreFileUpload`, //?access_token=${token}
data: fd,
- name: 'files',
+ name: "files",
headers: {
- Authorization: token
+ Authorization: token,
},
- onUploadProgress: progressEvent => {
+ onUploadProgress: (progressEvent) => {
if (
this.isShowProgress &&
progressEvent.loaded &&
progressEvent.total
) {
this.progressValue =
- (progressEvent.loaded / progressEvent.total) * 100
+ (progressEvent.loaded / progressEvent.total) * 100;
}
- }
- })
+ },
+ });
if (res && res.data) {
- const result = res.data
+ const result = res.data;
// this.$notify({
// type: result && result.success ? 'success' : 'error',
// message: result.msg
// })
- this.progressValue = 0
- this.showProgress = false
- this.$emit('successFN', result)
+ this.progressValue = 0;
+ this.showProgress = false;
+ this.$emit("successFN", result);
}
} catch (error) {
- this.progressValue = 0
- this.showProgress = false
- const errorArr = this.suFileList.map(file => {
+ this.progressValue = 0;
+ this.showProgress = false;
+ const errorArr = this.suFileList.map((file) => {
return {
uuId: guid(),
file: file,
errorMsg: {
- type: 'error',
- errorType: '涓婁紶鏈嶅姟鍣ㄩ敊璇�',
- message: '涓婁紶鏈嶅姟鍣ㄩ敊璇�'
- }
- }
- })
- this.erFileList = [...this.erFileList, ...errorArr]
+ type: "error",
+ errorType: "涓婁紶鏈嶅姟鍣ㄩ敊璇�",
+ message: "涓婁紶鏈嶅姟鍣ㄩ敊璇�",
+ },
+ };
+ });
+ this.erFileList = [...this.erFileList, ...errorArr];
/* 鍥炶皟浼犲�� */
- this.$emit('addFilesBaBackFN', {
+ this.$emit("addFilesBaBackFN", {
suFileList: [],
erFileList: this.erFileList,
fileList: this.fileList,
- result: error
- })
+ result: error,
+ });
}
//this.$store.commit('HANDLE_LOADING_CLOSE')
/* 缁撴潫涓婁紶鎸夐挳loding */
- this.upLoadLoading = false
+ this.upLoadLoading = false;
/* 闅愯棌鎷栨嫿妗� */
- this.isShowBox = false
+ this.isShowBox = false;
},
/* 鎷栨嫿鍑芥暟 start */
dragleave(el) {
- this.drag_class = ''
- el.stopPropagation()
- el.preventDefault()
+ this.drag_class = "";
+ el.stopPropagation();
+ el.preventDefault();
},
dragenter(el) {
- this.drag_class = 'active'
- el.stopPropagation()
- el.preventDefault()
+ this.drag_class = "active";
+ el.stopPropagation();
+ el.preventDefault();
},
dragover(el) {
- this.drag_class = 'active'
- el.stopPropagation()
- el.preventDefault()
+ this.drag_class = "active";
+ el.stopPropagation();
+ el.preventDefault();
},
drop(el) {
- el.stopPropagation()
- el.preventDefault()
+ el.stopPropagation();
+ el.preventDefault();
if (el.dataTransfer && el.dataTransfer.files) {
- this.handleUpLoad(el.dataTransfer.files)
+ this.handleUpLoad(el.dataTransfer.files);
}
- }
+ },
/* 鎷栨嫿鍑芥暟 end */
},
- created() { },
+ created() {},
watch: {
progressValue(newVal, oldVal) {
if (newVal !== oldVal && newVal >= 100) {
setTimeout(() => {
- this.showProgress = false
- this.progressValue = 0
- }, 1500)
+ this.showProgress = false;
+ this.progressValue = 0;
+ }, 1500);
}
- }
+ },
},
components: {
//LaddaBtn
- }
-}
+ },
+};
</script>
<style lang="scss" scoped>
--
Gitblit v1.8.0