From 07db4702cc86f56e8da819674d717e5c0404e0ea Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期一, 20 六月 2022 17:36:48 +0800
Subject: [PATCH] get order
---
src/pages/library/components/upload.vue | 428 ++++++++++++++++++++++++----------------------------
1 files changed, 198 insertions(+), 230 deletions(-)
diff --git a/src/pages/library/components/upload.vue b/src/pages/library/components/upload.vue
index 58585ed..78a9385 100644
--- a/src/pages/library/components/upload.vue
+++ b/src/pages/library/components/upload.vue
@@ -1,20 +1,15 @@
<template>
<span class="upload-content pr">
- <el-button
- type="primary"
+ <span
+ class="iconfont iconfont-wrap iconshangchuantupian-09"
+ @click="uploadStart"
:loading="upLoadLoading"
- :size="uploadBtnSize"
- data-style="slide-down"
- @click.native="uploadStart"
- >
- <i :class="uploadBtnIcon"></i>
- {{uploadBtntext}}
- </el-button>
+ ></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 +18,90 @@
<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">
- 灏嗘枃浠舵嫋鍒版澶勶紝鎴�
- <em class="text-primary cursor-pointer">鐐瑰嚮涓婁紶</em>
+ <div class="icon-wrap">
+ <span class="iconfont iconshangchuantupian-11"></span>
</div>
- <div
- class="el-upload__tip text-light"
- style="color:#babbbc!important"
- >{{limitTypes?`鍙兘涓婁紶${limitTypes}鏂囦欢`:''}}{{limitSize?` 鏂囦欢澶у皬涓嶈秴杩�${limitSize}`:''}}</div>
+ <div class="el-upload__text" style="margin-top: 10px">
+ 灏嗘枃浠舵嫋鍒版澶勬垨<span class="text-primary cursor-pointer"
+ >鐐瑰嚮涓婁紶</span
+ >
+ </div>
+ <div class="el-upload__tip text-light">
+ {{ 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,320 +111,258 @@
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
- }
- // this.$notify(msg)
- return msg
+ fileObj && fileObj.name ? "鈥�" + fileObj.name + "鈥�" : ""
+ }蹇呴』灏忎簬` + this.limitSize,
+ };
+ 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)
+ 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
- // this.$notify({
- // type: result && result.success ? 'success' : 'error',
- // message: result.msg
- // })
- this.progressValue = 0
- this.showProgress = false
- this.$emit('successFN', result)
- // let errorArr = []
- // // 鏍规嵁涓庡悗鍙扮害瀹歞ata鏁扮粍杩斿洖鐨勯兘鏄瓨鍦ㄤ笟鍔℃剰涔夐敊璇殑瀵硅薄
- // if (result.data && result.data.length) {
- // errorArr = result.data.map(file => {
- // // 閬嶅巻鍓嶅彴鎶涚粰鍚庡彴鐨刦ileList 杩涜姣斿璧嬪�糵ile鏂囦欢鍙妋essage
- // for (var i = 0; i < this.suFileList.length; i++) {
- // const iteam = this.suFileList[i]
- // if (
- // file.upload.fileName &&
- // iteam.name === file.upload.fileName
- // ) {
- // return {
- // uuId: guid(),
- // file: iteam,
- // photos: file.upload.path,
- // baseList: file.baseList ? file.baseList : null,
- // errorMsg: {
- // type: 'error',
- // errorType: '涓婁紶寮傚父',
- // message: file.reason ? file.reason : result.msg
- // }
- // }
- // }
- // }
- // })
- // }
- /* 鍥炶皟浼犲�� */
- // 澶勭悊閿欒鏂囦欢鍒楄〃 濡傛灉涓�0璇存槑鍏ㄩ儴鎴愬姛锛岋紙閫氳繃鏍￠獙锛屽苟鍦ㄥ悗鍙版垚鍔熷畬鎴愭敞鍐屾坊鍔狅級
- // let erFileList =
- // result && result.success
- // ? this.erFileList
- // : [...this.erFileList, ...errorArr]
- // // 鍏ㄩ儴鎴愬姛鏃犻渶鎵撳紑涓氬姟寮圭獥
- // if (erFileList.length > 0) {
- // this.$emit('addFilesBaBackFN', {
- // suFileList: result && result.success ? this.suFileList : [],
- // erFileList: erFileList,
- // fileList: this.fileList,
- // result: res
- // })
- // }
- // if (erFileList.length === 0) {
- // this.$emit('successFN')
- // }
+ const result = res.data;
+ this.progressValue = 0;
+ this.showProgress = false;
+ this.$emit("successFN", result);
}
} catch (error) {
- // this.$notify({
- // type: 'error',
- // message: '鏈嶅姟鍣ㄩ敊璇紒璇疯仈绯荤鐞嗗憳' // + error.message
- // })
- this.progressValue = 0
- this.showProgress = false
- console.log('catch---', error)
- 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>
-.upload-img-icon {
- width: 60px;
- background-size: 100%;
- background-repeat: no-repeat;
- background-position: center;
-}
+
.upload-progress {
width: 96%;
position: absolute;
@@ -441,18 +381,46 @@
left: 0;
display: none;
}
+ .iconshangchuantupian-09:hover {
+ border: 1px solid var(--colorCard);
+ background: var(--colorCard);
+ color: #fff;
+ }
}
.drag-area {
position: absolute;
z-index: 100 !important;
width: 320px;
- height: 160px;
- padding: 20px;
- right: 0;
- top: 35px;
+ height: 195px;
z-index: 5;
- background: #f1f1f1;
- border-radius: 5px;
+ background: #ffffff;
+ padding: 20px 20px 20px 20px;
+ right: 0;
+ top: 45px;
+ border-radius: 8px;
+ box-sizing: border-box;
+
+ box-shadow: 0px 0px 10px rgb(0 0 0 / 12%);
+ .text-center {
+ .icon-wrap {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 72px;
+ margin-top: 20px;
+ .iconfont {
+ font-size: 72px;
+ color: #bbd2f9;
+ }
+ }
+ .el-upload__tip,
+ .el-upload__text {
+ font-size: 12px;
+ line-height: 17px;
+ color: #999999;
+ margin-top: 0;
+ }
+ }
.files-area {
width: 100%;
height: 100%;
--
Gitblit v1.8.0