java_project
/
hy-vue
4
0
Fork 0
Code Issues Pull Requests Activity
Browse Source

新增文件页面

dev
long 2 years ago
parent
1a0bf375e9
commit
bc210c3264
1 changed files with 484 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 484
      src/components/jeecg/FileList.vue

484
src/components/jeecg/FileList.vue
Unescape View File

@ -0,0 +1,484 @@
<template>
<div :id="containerId" style="position: relative">
<a-upload
name="file"
:multiple="multiple"
:action="uploadAction"
:headers="headers"
:data="{'biz':bizPath}"
:beforeUpload="doBeforeUpload"
@change="handleChange"
:disabled="disabled"
:returnUrl="returnUrl"
:listType="complistType"
@preview="handlePreview"
:class="{'uploadty-disabled':disabled,}">
<template>
<div v-if="isImageComp">
<a-icon type="plus"/>
<div class="ant-upload-text">{{ text }}</div>
</div>
<a-button v-else-if="buttonVisible">
<a-icon type="upload"/>
{{ text }}
</a-button>
<span class="span">支持格式：图片、office文件（限制大小100M）</span>
</template>
</a-upload>
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
<img alt="example" style="width: 100%" :src="previewImage"/>
</a-modal>
</div>
</template>
<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getFileAccessHttpUrl, deleteAction } from '@/api/manage'
import { getAction } from '../../api/manage'
const FILE_TYPE_ALL = 'all'
const FILE_TYPE_IMG = 'image'
const uidGenerator = () => {
return '-' + parseInt(Math.random() * 10000 + 1, 10)
}
const getFileName = (path) => {
if (path.lastIndexOf('\\') >= 0) {
let reg = new RegExp('\\\\', 'g')
path = path.replace(reg, '/')
}
return path.substring(path.lastIndexOf('/') + 1)
}
export default {
name: 'FileList',
data() {
return {
uploadAction: window._CONFIG['domianURL'] + '/sys/upload',
headers: {},
fileList: [],
newFileList: [],
result: '',
uploadGoOn: true,
previewVisible: false,
//---------------------------- begin 图片左右换位置 -------------------------------------
previewImage: '',
containerId: '',
top: '',
left: '',
moveDisplay: 'none',
showMoverTask: false,
moverHold: false,
currentImg: ''
//---------------------------- end 图片左右换位置 -------------------------------------
}
},
props: {
text: {
type: String,
required: false,
default: '点击上传'
},
fileType: {
type: String,
required: false,
default: FILE_TYPE_ALL
},
/*这个属性用于控制文件上传的业务路径*/
bizPath: {
type: String,
required: false,
default: 'temp'
},
value: {
type: [Array, Object, String, Number],
required: false
},
// update-begin- --- author:wangshuai ------ date:20190929 ---- for:Jupload组件增加是否能够点击
disabled: {
type: Boolean,
required: false,
default: false
},
// update-end- --- author:wangshuai ------ date:20190929 ---- for:Jupload组件增加是否能够点击
//此属性被废弃了
triggerChange: {
type: Boolean,
required: false,
default: false
},
/**
* update -- author:lvdandan -- date:20190219 -- for:Jupload组件增加是否返回url，
* true：仅返回url
* false：返回fileName filePath fileSize
*/
returnUrl: {
type: Boolean,
required: false,
default: true
},
number: {
type: Number,
required: false,
default: 0
},
buttonVisible: {
type: Boolean,
required: false,
default: true
},
multiple: {
type: Boolean,
default: true
},
beforeUpload: {
type: Function
}
},
watch: {
value: {
immediate: true,
handler() {
let val = this.value
if (val instanceof Array) {
if (this.returnUrl) {
this.initFileListArr(val)
//this.initFileList(val.join(','))
} else {
this.initFileListArr(val)
}
} else {
this.initFileList(val)
}
}
}
},
computed: {
isImageComp() {
return this.fileType === FILE_TYPE_IMG
},
complistType() {
return this.fileType === FILE_TYPE_IMG ? 'picture-card' : 'text'
}
},
created() {
const token = Vue.ls.get(ACCESS_TOKEN)
//---------------------------- begin 图片左右换位置 -------------------------------------
this.headers = { 'X-Access-Token': token }
this.containerId = 'container-ty-' + new Date().getTime()
//---------------------------- end 图片左右换位置 -------------------------------------
},
methods: {
initFileListArr(val) {
if (!val || val.length == 0) {
this.fileList = []
return
}
let fileList = []
for (var a = 0; a < val.length; a++) {
fileList.push({
uid: uidGenerator(),
name: val[a].name,
groups: val[a].groups,
id: val[a].id,
status: 'done',
url: val[a].url,
response: {
result: {
uid: uidGenerator(),
name: val[a].name,
groups: val[a].groups,
id: val[a].id,
status: 'done',
url: val[a].url
}
}
})
}
this.fileList = fileList
},
initFileList(paths) {
// if (!paths || paths.length == 0) {
// //return [];
// // update-begin- --- author:os_chengtgen ------ date:20190729 ---- for:issues:326,Jupload组件初始化bug
// this.fileList = []
// return
// // update-end- --- author:os_chengtgen ------ date:20190729 ---- for:issues:326,Jupload组件初始化bug
// }
// let fileList = []
// let path = paths
// let arr = paths.split(',')
// for (var a = 0; a < arr.length; a++) {
// let url = getFileAccessHttpUrl(arr[a])
// fileList.push({
// uid: uidGenerator(),
// name: getFileName(arr[a]),
// status: 'done',
// url: url,
// response: {
// status: 'history',
// message: arr[a]
// }
// })
// }
// this.fileList = fileList
},
handlePathChange() {
let uploadFiles = this.fileList
let path = ''
if (!uploadFiles || uploadFiles.length == 0) {
path = ''
}
let arr = []
for (var a = 0; a < uploadFiles.length; a++) {
// update-begin-author:lvdandan date:20200603 for:【TESTA-514】【开源issue】多个文件同时上传时，控制台报错
if (uploadFiles[a].status === 'done') {
arr.push(window._CONFIG['fileURL'] + uploadFiles[a].response.result.group + '/' + uploadFiles[a].response.result.url)
} else {
return
}
// update-end-author:lvdandan date:20200603 for:【TESTA-514】【开源issue】多个文件同时上传时，控制台报错
}
if (arr.length > 0) {
path = arr.join(',')
}
this.$emit('change', path)
},
doBeforeUpload(file) {
this.uploadGoOn = true
var fileType = file.type
if (this.fileType === FILE_TYPE_IMG) {
if (fileType.indexOf('image') < 0) {
this.$message.warning('请上传图片')
this.uploadGoOn = false
return false
}
}
// 扩展 beforeUpload 验证
if (typeof this.beforeUpload === 'function') {
return this.beforeUpload(file)
}
return true
},
handleChange(info) {
if (!info.file.status && this.uploadGoOn === false) {
info.fileList.pop()
}
let fileList = info.fileList
if (info.file.status === 'done') {
if (this.number > 0) {
fileList = fileList.slice(this.number)
}
if (info.file.response.success) {
fileList = fileList.map((file) => {
if (file.response) {
let reUrl
if (file.response.message == '') {
reUrl = file.response.result.url
} else {
reUrl = file.response.message
}
file.url = getFileAccessHttpUrl(reUrl)
}
return file
})
}
} else if (info.file.status === 'error') {
this.$message.error(`${info.file.name} 上传失败.`)
} else if (info.file.status === 'removed') {
this.handleDelete(info.file)
}
this.fileList = fileList
if (info.file.status === 'done' || info.file.status === 'removed') {
this.newFileList = []
for (var a = 0; a < fileList.length; a++) {
if (fileList[a].status === 'done') {
var fileJson = {
name: fileList[a].response.result.name,
url: fileList[a].response.result.url,
size: fileList[a].response.result.size,
id: fileList[a].response.result.id,
groups: fileList[a].response.result.groups,
fileType: fileList[a].type
}
this.newFileList.push(fileJson)
} else {
return
}
}
this.initFileListArr(this.newFileList)
this.$emit('change', this.newFileList)
}
//}
},
handleDelete(file) {
let deleteUrl = window._CONFIG['domianURL'] + '/sys/fastdfs/delete'
//如有需要新增 删除逻辑
var group = file.groups
var fileUrl = file.url
var fileUUid = file.id
var that = this
deleteAction(deleteUrl, { fileUrl: fileUrl, group: group, fileUUid: fileUUid }).then((res) => {
if (res.success) {
that.$message.success(res.message)
} else {
that.$message.warning('删除失败')
return
}
})
},
handlePreview(file) {
var urlPath = file.url
var group = file.groups
var that = this
let base = "http://182.92.73.21:8012/onlinePreview?url="
let url = base+encodeURIComponent(this.$Base64.encode(file.url))
window.open(url, '_blank')
},
handleCancel() {
this.previewVisible = false
},
//---------------------------- begin 图片左右换位置 -------------------------------------
moveLast() {
//console.log(ev)
//console.log(this.fileList)
//console.log(this.currentImg)
let index = this.getIndexByUrl()
if (index == 0) {
this.$message.warn('未知的操作')
} else {
let curr = this.fileList[index].url
let last = this.fileList[index - 1].url
let arr = []
for (let i = 0; i < this.fileList.length; i++) {
if (i == index - 1) {
arr.push(curr)
} else if (i == index) {
arr.push(last)
} else {
arr.push(this.fileList[i].url)
}
}
this.currentImg = last
this.$emit('change', arr.join(','))
}
},
moveNext() {
let index = this.getIndexByUrl()
if (index == this.fileList.length - 1) {
this.$message.warn('已到最后~')
} else {
let curr = this.fileList[index].url
let next = this.fileList[index + 1].url
let arr = []
for (let i = 0; i < this.fileList.length; i++) {
if (i == index + 1) {
arr.push(curr)
} else if (i == index) {
arr.push(next)
} else {
arr.push(this.fileList[i].url)
}
}
this.currentImg = next
this.$emit('change', arr.join(','))
}
},
getIndexByUrl() {
for (let i = 0; i < this.fileList.length; i++) {
if (this.fileList[i].url === this.currentImg || encodeURI(this.fileList[i].url) === this.currentImg) {
return i
}
}
return -1
}
},
mounted() {
const moverObj = document.getElementById(this.containerId + '-mover')
if (moverObj) {
moverObj.addEventListener('mouseover', () => {
this.moverHold = true
this.moveDisplay = 'block'
})
moverObj.addEventListener('mouseout', () => {
this.moverHold = false
this.moveDisplay = 'none'
})
}
let picList = document.getElementById(this.containerId) ? document.getElementById(this.containerId).getElementsByClassName('ant-upload-list-picture-card') : []
if (picList && picList.length > 0) {
picList[0].addEventListener('mouseover', (ev) => {
ev = ev || window.event
let target = ev.target || ev.srcElement
if ('ant-upload-list-item-info' == target.className) {
this.showMoverTask = false
let item = target.parentElement
this.left = item.offsetLeft
this.top = item.offsetTop + item.offsetHeight - 50
this.moveDisplay = 'block'
this.currentImg = target.getElementsByTagName('img')[0].src
}
})
picList[0].addEventListener('mouseout', (ev) => {
ev = ev || window.event
let target = ev.target || ev.srcElement
//console.log('移除',target)
if ('ant-upload-list-item-info' == target.className) {
this.showMoverTask = true
setTimeout(() => {
if (this.moverHold === false)
this.moveDisplay = 'none'
}, 100)
}
if ('ant-upload-list-item ant-upload-list-item-done' == target.className || 'ant-upload-list ant-upload-list-picture-card' == target.className) {
this.moveDisplay = 'none'
}
})
//---------------------------- end 图片左右换位置 -------------------------------------
}
},
model: {
prop: 'value',
event: 'change'
}
}
</script>
<style lang="less">
.uploadty-disabled {
.ant-upload-list-item {
.anticon-close {
display: none;
}
.anticon-delete {
display: none;
}
}
}
//---------------------------- begin 图片左右换位置 -------------------------------------
.uploadty-mover-mask {
background-color: rgba(0, 0, 0, 0.5);
opacity: .8;
color: #fff;
height: 28px;
line-height: 28px;
}
.span {
color: #db5d5d;
font-weight: bold;
margin-left: 20px;
}
//---------------------------- end 图片左右换位置 -------------------------------------
</style>
Write Preview
Loading…
Cancel
Save