参数模板管理-参数列表-新增-附件控件上传附件模板的文件类型

This commit is contained in:
范强强
2023-03-27 15:02:32 +08:00
parent 32cd717501
commit 79ffc2ba35
2 changed files with 173 additions and 164 deletions
+172 -163
View File
@@ -9,7 +9,7 @@
name="file"
:file-list="myfileList"
:multiple="true"
:action="uploadAction+'?state='+2+'&cut='+cut"
:action="actionUrl"
:headers="headers"
@preview="preview"
:before-upload="beforeUpload"
@@ -26,127 +26,118 @@
</template>
<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getAction, postAction, downFile, downloadFile } from '@/api/manage'
import { Base64 } from 'js-base64'
import { mapGetters } from 'vuex'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getAction, postAction, downFile, downloadFile } from '@/api/manage'
import { Base64 } from 'js-base64'
import { mapGetters } from 'vuex'
export default {
name: 'file',
props: ['disableds', 'disabled', 'thisFileUploadUrl', 'readonly', 'thisFileType', 'isUploadFile','detailDate','accept'],
data() {
return {
visible: false,
title: this.$t('clickUpload'),
uploadAction: window._CONFIG['domianURL'] + '/sys/common/upload',
state: undefined,
myuploadAction: window._CONFIG['domianURL'] + this.thisFileUploadUrl,
upDataList: [],
downLoadFileUrl: window._CONFIG['domianPreviewURL'] + '/sys/common/download',
fileList: [],
myfileList: [],
isLoding: false,
cut: ''
}
},
created() {
const token = Vue.ls.get(ACCESS_TOKEN)
this.headers = { 'X-Access-Token': token }
this.containerId = 'container-ty-' + new Date().getTime()
},
mounted() {
// console.log(this.detailDate,'lldetailDate')
let long = localStorage.getItem('language')
this.cut = ''
if (long && long == 'zh-cn') {
this.cut = 'cn'
} else if (long && long == 'en-us') {
this.cut = 'en'
}
// console.log(this.thisFileType,this.thisFileSize,this.thisFileUploadUrl);
},
methods: {
...mapGetters(['userInfo']),
perentHandleFunc(data) {
this.myfileList = data
if (data && data.length > 0) {
this.myfileList.forEach((res) => {
res.name = res.fileName
res.uid = res.id
})
} else {
this.myfileList = []
export default {
name: 'file',
props: ['disableds', 'disabled', 'thisFileUploadUrl', 'readonly', 'thisFileType', 'isUploadFile', 'detailDate', 'accept', 'isParameter'],
data() {
return {
visible: false,
title: this.$t('clickUpload'),
uploadAction: window._CONFIG['domianURL'] + '/sys/common/upload',
state: undefined,
myuploadAction: window._CONFIG['domianURL'] + this.thisFileUploadUrl,
upDataList: [],
downLoadFileUrl: window._CONFIG['domianPreviewURL'] + '/sys/common/download',
fileList: [],
myfileList: [],
isLoding: false,
cut: ''
}
},
beforeUpload(file) {
console.log(file)
// let thisFileType = this.thisFileType.replace(/\s+/g, "");
this.fileTypeSatus = true
//TODO 客户要求不拦截文件
// if(file.type){
// if (thisFileType.indexOf(file.type) != -1) {
// this.fileTypeSatus = true;
// }else{
// this.fileTypeSatus = false;
// }
// }else{
// if(file.name.slice(file.name.length - 3 , file.name.length) == 'rar'){
// this.fileTypeSatus = true
// }else if(file.type == 'application/x-zip-compressed'){
// this.fileTypeSatus = true
// }else{
// this.fileTypeSatus = false;
// }
// }
this.$message.destroy()
},
remove() {
this.fileTypeSatus = true
},
mypreview(item) {
let url = window._CONFIG['domianPreviewURL'] + '?url=' + encodeURIComponent(this.downLoadFileUrl + '/' + item.ext1)
window.open(url, '_blank')
},
handleChange(info) {
if(info.fileList.length > 1) {
this.$message.warning(this.$t('onlyOnefileUploaded'))
return
}
let { file } = info
const status = info.file.status
info.fileList.forEach((val, index) => {
if (val.response && !val.response.result) {
this.$message.error(val.response.message)
info.fileList.splice(index, 1)
computed: {
actionUrl() {
if (this.isParameter) {
return this.uploadAction + '?state=' + 3 + '&cut=' + this.cut
} else {
return this.uploadAction + '?state=' + 2 + '&cut=' + this.cut
}
})
if (status === 'error') {
this.$emit('uploadSuccess', this.fileList)
}
},
created() {
const token = Vue.ls.get(ACCESS_TOKEN)
this.headers = { 'X-Access-Token': token }
this.containerId = 'container-ty-' + new Date().getTime()
},
mounted() {
// console.log(this.detailDate,'lldetailDate')
let long = localStorage.getItem('language')
this.cut = ''
if (long && long == 'zh-cn') {
this.cut = 'cn'
} else if (long && long == 'en-us') {
this.cut = 'en'
}
// console.log(this.thisFileType,this.thisFileSize,this.thisFileUploadUrl);
},
methods: {
...mapGetters(['userInfo']),
perentHandleFunc(data) {
this.myfileList = data
if (data && data.length > 0) {
this.myfileList.forEach((res) => {
res.name = res.fileName
res.uid = res.id
})
} else {
this.myfileList = []
}
},
beforeUpload(file) {
console.log(file)
// let thisFileType = this.thisFileType.replace(/\s+/g, "");
this.fileTypeSatus = true
//TODO 客户要求不拦截文件
// if(file.type){
// if (thisFileType.indexOf(file.type) != -1) {
// this.fileTypeSatus = true;
// }else{
// this.fileTypeSatus = false;
// }
// }else{
// if(file.name.slice(file.name.length - 3 , file.name.length) == 'rar'){
// this.fileTypeSatus = true
// }else if(file.type == 'application/x-zip-compressed'){
// this.fileTypeSatus = true
// }else{
// this.fileTypeSatus = false;
// }
// }
this.$message.destroy()
this.$message.error(`${info.file.name}` + this.$t('FileUploadFailed'))
} else if (status === 'removed') {
this.myfileList = info.fileList
this.fileList = []
this.myfileList.forEach((res) => {
if (res.response) {
this.fileList.push(res.response.result)
} else {
this.fileList.push(res)
},
remove() {
this.fileTypeSatus = true
},
mypreview(item) {
let url = window._CONFIG['domianPreviewURL'] + '?url=' + encodeURIComponent(this.downLoadFileUrl + '/' + item.ext1)
window.open(url, '_blank')
},
handleChange(info) {
if (info.fileList.length > 1) {
this.$message.warning(this.$t('onlyOnefileUploaded'))
return
}
let { file } = info
const status = info.file.status
info.fileList.forEach((val, index) => {
if (val.response && !val.response.result) {
this.$message.error(val.response.message)
info.fileList.splice(index, 1)
}
})
this.$emit('uploadSuccess', this.fileList)
if (this.myfileList.length > 0) {
if (status === 'error') {
this.$emit('uploadSuccess', this.fileList)
this.$message.destroy()
this.$message.success(`${info.file.name}` + this.$t('DeletedSuccessfully'))
}
} else if (status === 'done') {
this.fileList = []
this.myfileList = info.fileList
if (info.fileList.length > 20) {
info.fileList.splice(20)
this.$message.error(`${info.file.name}` + this.$t('FileUploadFailed'))
} else if (status === 'removed') {
this.myfileList = info.fileList
this.fileList = []
this.myfileList.forEach((res) => {
if (res.response) {
this.fileList.push(res.response.result)
@@ -155,66 +146,84 @@ export default {
}
})
this.$emit('uploadSuccess', this.fileList)
this.$message.destroy()
this.$message.error(this.$t('UploadMost'))
return
}
this.myfileList.forEach((res) => {
if (res.response) {
this.fileList.push(res.response.result)
} else {
this.fileList.push(res)
if (this.myfileList.length > 0) {
this.$message.destroy()
this.$message.success(`${info.file.name}` + this.$t('DeletedSuccessfully'))
}
})
this.$emit('uploadSuccess', this.fileList)
if (this.myfileList.length > 0) {
this.$message.destroy()
if (file.response.success) {
this.$message.success(`${info.file.name}` + this.$t('FileUploadedSuccessfully'))
} else if (status === 'done') {
this.fileList = []
this.myfileList = info.fileList
if (info.fileList.length > 20) {
info.fileList.splice(20)
this.myfileList = info.fileList
this.myfileList.forEach((res) => {
if (res.response) {
this.fileList.push(res.response.result)
} else {
this.fileList.push(res)
}
})
this.$emit('uploadSuccess', this.fileList)
this.$message.destroy()
this.$message.error(this.$t('UploadMost'))
return
}
this.myfileList.forEach((res) => {
if (res.response) {
this.fileList.push(res.response.result)
} else {
this.fileList.push(res)
}
})
this.$emit('uploadSuccess', this.fileList)
if (this.myfileList.length > 0) {
this.$message.destroy()
if (file.response.success) {
this.$message.success(`${info.file.name}` + this.$t('FileUploadedSuccessfully'))
}
}
} else if (status === 'uploading') {
this.myfileList = info.fileList
// this.$message.success(`${info.file.name} 文件上传成功。`);
}
} else if (status === 'uploading') {
this.myfileList = info.fileList
// this.$message.success(`${info.file.name} 文件上传成功。`);
}
},
resetFileList() {
this.myfileList = []
this.fileList = []
},
preview(file) {
let fileQuery = file.response ? file.response.result : file
let fileName = fileQuery.fileName
let index1 = fileName.lastIndexOf('.')
let index2 = fileName.length
let fileSuffix = fileName.substring(index1, index2)
// if (fileSuffix === '.pdf') {
// window.open('/pdf/web/viewer.html?file=' + encodeURIComponent('/jero-boot/sys/common/pdf/viewFile?id=' + fileQuery.id+'&userName='+this.userInfo().username))
// } else if (fileSuffix === '.docx') {
// let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + Base64.encode(this.downLoadFileUrl + '/' + fileQuery.id + fileSuffix)
// window.open(url, '_blank')
// } else if (fileSuffix === '.xlsx' || fileSuffix === '.xls') {
// let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + Base64.encode(this.downLoadFileUrl + '/' + fileQuery.id + fileSuffix)
// window.open(url, '_blank')
// } else {
},
resetFileList() {
this.myfileList = []
this.fileList = []
},
preview(file) {
let fileQuery = file.response ? file.response.result : file
let fileName = fileQuery.fileName
let index1 = fileName.lastIndexOf('.')
let index2 = fileName.length
let fileSuffix = fileName.substring(index1, index2)
// if (fileSuffix === '.pdf') {
// window.open('/pdf/web/viewer.html?file=' + encodeURIComponent('/jero-boot/sys/common/pdf/viewFile?id=' + fileQuery.id+'&userName='+this.userInfo().username))
// } else if (fileSuffix === '.docx') {
// let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + Base64.encode(this.downLoadFileUrl + '/' + fileQuery.id + fileSuffix)
// window.open(url, '_blank')
// } else if (fileSuffix === '.xlsx' || fileSuffix === '.xls') {
// let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + Base64.encode(this.downLoadFileUrl + '/' + fileQuery.id + fileSuffix)
// window.open(url, '_blank')
// } else {
downloadFile('/sys/common/downLoadFile', fileQuery.fileName, { id: fileQuery.id })
// }
// }
}
}
}
}
</script>
<style>
.ant-upload-list-item-name {
color: rgba(0, 0, 0, 0.65) !important;
}
.ant-upload-list-item-name {
color: rgba(0, 0, 0, 0.65) !important;
}
.action-upload {
font-size: 67px;
color: #c0c4cc;
}
.action-upload {
font-size: 67px;
color: #c0c4cc;
}
.uploadFile {
.uploadFile {
}
}
</style>
@@ -317,7 +317,7 @@
<a-button @click="handleSubmit" type="primary" :loading="confirmLoading">{{$t('submit')}}</a-button>
</div>
</a-drawer>
<uploadFileChange ref="uploadFile" @uploadSuccess="uploadSuccess"></uploadFileChange>
<uploadFileChange :isParameter="true" ref="uploadFile" @uploadSuccess="uploadSuccess"></uploadFileChange>
</div>
</template>