<template>
|
<span class="pr">
|
<b-button variant="primary" class="pl-6 pr-6" @click="isShowBox=!isShowBox">添加人员</b-button>
|
<div class="upload-box" v-show="isShowBox">
|
<el-upload
|
ref="elUpload"
|
class="px-4 py-4"
|
drag
|
action="addPerson/addPerson/upload"
|
multiple
|
:data="userToken"
|
name="files"
|
:show-file-list="true"
|
:on-progress="progressFn"
|
:on-success="successFn"
|
:on-error="errorFn"
|
:before-upload="beforeUploadFN"
|
|
:on-exceed="exceedFN"
|
>
|
<i class="el-icon-upload text-primary"></i>
|
<div class="el-upload__text text-light">将文件拖到此处，或<em class="text-primary">点击上传</em></div>
|
<div class="el-upload__tip text-light">{{limitTypes?`只能上传${limitTypes}文件`:''}}{{limitSize?` 文件大小不超过${limitSize}`:''}}</div>
|
</el-upload>
|
<div>
|
</div>
|
</div>
|
</span>
|
</template>
|
<script>
|
import { Upload } from 'element-ui'
|
// import axios from 'axios'
|
/* import LaddaBtn from '@/vendor/libs/ladda/Ladda'
|
import { findByIds } from '@/server/common.js' */
|
export default {
|
name: 'UploadAdd',
|
props: {
|
/* 查询已有附件ids（逗号分隔） */
|
initFileIds: {
|
default: '',
|
type: String
|
},
|
/* 是否显示附件列表 */
|
isList: {
|
default: true,
|
type: Boolean
|
},
|
/* 是否显示上传控件 */
|
isUpload: {
|
default: true,
|
type: Boolean
|
},
|
/* 上传控件列表是否删除功能 */
|
isDelFile: {
|
default: true,
|
type: Boolean
|
},
|
|
/* 类型限制（后缀名,分隔） 传入示例'.png,.jpg' 不限制为 '' */
|
limitTypes: {
|
default: '',
|
type: String
|
},
|
/* 文件大小限制 传入示例'1M' 单位支持G、M、K、B 无单位按B计算 不限制为 '' */
|
limitSize: {
|
default: '1M',
|
type: String
|
},
|
|
/* 用于刷新上传组件 value时间戳字符串 */
|
refreshTimes: {
|
default: '',
|
type: String
|
},
|
uploadInfo: {
|
default: () => ({}),
|
type: Object
|
}
|
/**
|
* @description 上传组件回值方法
|
* @return { function } addFilesBaBackFN 添加上传成功后返回 {fileIds,fileList}
|
* @return { function } delFilesBaBackFN 删除后返回 {fileIds,fileList}
|
*/
|
},
|
data() {
|
return {
|
isShowBox: false,
|
fileList: [],
|
erFileList: [],
|
userToken: {
|
Token: JSON.parse(
|
sessionStorage.getItem('loginedInfo')
|
).access_token.split(' ')[1]
|
},
|
userInfo: this.$store.getters.basicUserInfo,
|
fileIds: [],
|
upLoadLoading: false,
|
showProgress: false,
|
progressValue: 0
|
}
|
},
|
computed: {},
|
methods: {
|
islimitTypes(fileObj) {
|
if (this.limitTypes === '') {
|
return 'success'
|
}
|
if (this.limitTypes.indexOf(fileObj.name.replace(/^.+\./, '')) === -1) {
|
const msg = {
|
type: 'error',
|
message:
|
`上传类型错误！${
|
fileObj && fileObj.name ? '《' + fileObj.name + '》' : ''
|
}必须是` + this.limitTypes
|
}
|
this.$toast(msg)
|
return msg
|
}
|
return 'success'
|
},
|
islimitSize(fileObj) {
|
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', '')
|
} else {
|
size = this.limitSize
|
}
|
if (size < fileObj.size) {
|
const msg = {
|
type: 'error',
|
message:
|
`上传大小错误！${
|
fileObj && fileObj.name ? '《' + fileObj.name + '》' : ''
|
}必须小于` + this.limitSize
|
}
|
this.$toast(msg)
|
return msg
|
}
|
return 'success'
|
},
|
beforeUploadFN(file) {
|
console.log(
|
this.$refs.elUpload,
|
'this.refs.elUpload',
|
document.querySelector('.el-upload__input').files
|
)
|
const islimitTypes = this.islimitTypes(file)
|
const islimitSize = this.islimitSize(file)
|
console.log(this.fileList, 'this.fileList', this.erFileList)
|
if (islimitTypes !== 'success') {
|
file.errorMsg = islimitTypes.message
|
this.erFileList.push(file)
|
return false
|
}
|
if (islimitSize !== 'success') {
|
file.errorMsg = islimitSize.message
|
this.erFileList.push(file)
|
return false
|
}
|
},
|
errorFn(err, file, fileList) {
|
this.erFileList.push(file)
|
this.$emit('changeDialog', fileList)
|
console.log(err, fileList, 'err, file, fileList----失败')
|
},
|
successFn(response, file, fileList) {
|
// this.$toast({
|
// type: 'success',
|
// message: `${file.name} 上传成功！`
|
// })
|
// this.fileList = fileList
|
console.log(fileList, 'response, file, fileList---成功')
|
this.$emit('changeDialog', file)
|
},
|
progressFn(event, file, fileList) {
|
console.log(event, file, fileList, 'event, file, fileList---过程')
|
},
|
exceedFN(files, fileList) {
|
console.log(files, fileList, 'exceedFN')
|
}
|
},
|
created() {},
|
watch: {
|
isShowBox(val) {
|
if (!val) {
|
this.fileList = []
|
console.log('----+++++')
|
}
|
},
|
fileList(val) {
|
console.log(val, '0-0-0-0-0')
|
}
|
},
|
components: {
|
elUpload: Upload
|
}
|
}
|
</script>
|
|
<style lang="scss" >
|
.upload-box {
|
position: absolute;
|
right: 0;
|
top: 35px;
|
z-index: 5;
|
background: #f7f7f7;
|
border-radius: 5px;
|
}
|
</style>
|
