619 lines
19 KiB
Vue
619 lines
19 KiB
Vue
<template>
|
|
<!-- <div>-->
|
|
<el-col :span="span">
|
|
<el-form-item
|
|
:label="config.attrName"
|
|
:prop="config.attrField"
|
|
:rules="rules"
|
|
:label-width="labelWidth"
|
|
class="add-form-item"
|
|
:class="{'form-item-disabled': disabled}"
|
|
>
|
|
<ul class="file-file__wrap" v-if="showFileModel">
|
|
<li class="file-item"
|
|
v-for="(file, index) in showFileList"
|
|
:key="index"
|
|
:title="file.name"
|
|
@click="handlePreview(file)">{{ file.name }}</li>
|
|
<el-button
|
|
size="small"
|
|
@click="clickButtonToUpload('opinionFileList')"
|
|
icon="el-icon-upload"
|
|
class="form-upload-btn"
|
|
v-if="reUpload || showUploadBtn">{{ uploadText || '重新上传' }}</el-button>
|
|
</ul>
|
|
<template style="margin-left: 105px;" v-else>
|
|
<ul class="file-file__wrap">
|
|
<li class="file-item"
|
|
v-for="(file, index) in showFileList"
|
|
:key="index"
|
|
:title="file.name"
|
|
@click="handlePreview(file)">
|
|
{{ file.name }}
|
|
</li>
|
|
</ul>
|
|
<el-button
|
|
size="small"
|
|
@click="clickButtonToUpload('opinionFileList')"
|
|
icon="el-icon-upload"
|
|
class="form-upload-btn"
|
|
>
|
|
<!-- {{ (value === 'null' || value === '' || value == null) && (!processModel || (processModel && !disabled)) ? '点击上传' : '查看已上传的文件' }}-->
|
|
</el-button>
|
|
</template>
|
|
<el-dialog
|
|
width='400px'
|
|
:visible.sync="importModalshowflagtemp"
|
|
:title="processModel && disabled ? '查看已上传的文件' : (title || '导入文件')"
|
|
:footer-hide="true"
|
|
append-to-body
|
|
>
|
|
<el-upload
|
|
class="customer-upload"
|
|
:class="{'disabled': disabled}"
|
|
multiple
|
|
drag
|
|
|
|
:show-file-list="!showModifyName && showUploadlist"
|
|
:on-success="uploadSuccess"
|
|
:before-upload="beforeUpload"
|
|
:on-remove="removeOneFile"
|
|
:action="uploadPath"
|
|
:limit="limit"
|
|
:on-exceed="handleExceed"
|
|
:on-preview="handlePreview"
|
|
name="file"
|
|
:file-list="defaultFileList"
|
|
:disabled="disabled"
|
|
ref="importFileAboutStand">
|
|
<i :class="iconClass"></i>
|
|
<div class="el-upload__text">{{ tips }}</div>
|
|
</el-upload>
|
|
<ul class="el-upload-list el-upload-list--text" v-if="showModifyName">
|
|
<li class="el-upload-list__item is-success"
|
|
v-for="(file, index) in showFileList"
|
|
:key="index"
|
|
:title="file.name"
|
|
@click="handlePreview(file)">
|
|
<a class="el-upload-list__item-name">
|
|
<i class="el-icon-document"></i>
|
|
{{ file.name }}
|
|
</a>
|
|
<label class="el-upload-list__item-status-label">
|
|
<i class="el-icon-upload-success el-icon-circle-check"></i>
|
|
</label>
|
|
<i class="el-icon-edit" @click.stop="handleModifyName(file)"></i>
|
|
<i class="el-icon-close" @click.stop="handleRemoveFile(file)"></i>
|
|
</li>
|
|
<el-button
|
|
size="small"
|
|
@click="clickButtonToUpload('opinionFileList')"
|
|
icon="el-icon-upload"
|
|
class="form-upload-btn"
|
|
v-if="reUpload || showUploadBtn">{{ uploadText || '重新上传' }}</el-button>
|
|
</ul>
|
|
</el-dialog>
|
|
<el-dialog title="修改文件名称"
|
|
:visible.sync="openModifyFileNameDialog"
|
|
append-to-body
|
|
>
|
|
<el-form-item>
|
|
<el-input v-model="modifyFile.fileName"></el-input>
|
|
</el-form-item>
|
|
<div class="demo-drawer-footer" style="text-align: right;">
|
|
<el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" :loading="modifyFileNameLoading"
|
|
@click="handleModifyNameSubmite">提交</el-button>
|
|
<el-button class="common-button-default" size="mini" icon="el-icon-close"
|
|
@click="openModifyFileNameDialog = false">取消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</el-form-item>
|
|
</el-col>
|
|
<!-- </div>-->
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { onlyOfficeUrl } from '@/sysConfig'
|
|
import { getConvertFileByAttId,getBusStandFileByAttId } from 'api/process'
|
|
let Base64 = require('js-base64').Base64;
|
|
export default {
|
|
name: 'CustomFile',
|
|
data() {
|
|
return {
|
|
showUploadlist: true, // 导入过程中新增数据时，如果数据错误，不出现导入列表
|
|
uploadPath: 'api/att/attFile/uploadNew',
|
|
defaultFileList: [], // 默认显示
|
|
showFileList: [],
|
|
importModalshowflagtemp: false,
|
|
modifyFile: {
|
|
fileName: '',
|
|
fileId: ''
|
|
},
|
|
openModifyFileNameDialog: false,
|
|
modifyFileNameLoading: false
|
|
}
|
|
},
|
|
props: {
|
|
config: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
value: {
|
|
required: true
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 指定允许上传的类型
|
|
allowType: {
|
|
type: Array,
|
|
default: () => {
|
|
return ['.pdf', '.PDF', '.doc','.DOC', '.docx','.DOCX', '.pptx', '.PPTX', '.ppt', '.PPT', '.xls','.XLS', '.xlsx','.XLSX', '.pdg', '.PDG']
|
|
}
|
|
},
|
|
// 栅格比例
|
|
span: {
|
|
type: Number,
|
|
default: 24
|
|
},
|
|
// 是否为流程使用
|
|
processModel: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
labelWidth: {
|
|
type: String,
|
|
default: '150px'
|
|
},
|
|
// 点击文件在线预览
|
|
preview: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 是否可重新上传
|
|
reUpload: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
limit: {
|
|
type: Number,
|
|
default: 8
|
|
},
|
|
exceed: {
|
|
type: String
|
|
},
|
|
// 只展示上传的文件,不展示查看已上传的文件按钮
|
|
showFileModel: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
uploadText: {
|
|
type: String
|
|
},
|
|
showUploadBtn: {
|
|
type: Boolean
|
|
},
|
|
showModifyName: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
rules: {
|
|
type: Array
|
|
},
|
|
// 单位 M
|
|
size: {
|
|
type: Number,
|
|
default: 200
|
|
}
|
|
},
|
|
watch: {
|
|
value: {
|
|
handler(val) {
|
|
if (this.showFileModel) {
|
|
this.getShowFileList()
|
|
}
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getShowFileList()
|
|
if (this.showFileModel) {
|
|
this.getShowFileList()
|
|
}
|
|
},
|
|
computed: {
|
|
placeholder() {
|
|
return `请输入${this.config.attrName}`
|
|
},
|
|
showMessage() {
|
|
return `${this.config.attrName}不能为空`
|
|
},
|
|
isRequired() {
|
|
return !!this.config.isMust
|
|
},
|
|
title() {
|
|
return this.config.title
|
|
},
|
|
tips() {
|
|
if (this.processModel && this.reUpload) {
|
|
return '点击重新上传附件'
|
|
} else if (this.processModel && this.disabled && this.preview) {
|
|
return '点击名称在线查看'
|
|
} else if (this.processModel && this.disabled) {
|
|
return '点击名称下载附件'
|
|
} else {
|
|
return '点击或拖拽上传文件'
|
|
}
|
|
},
|
|
iconClass() {
|
|
if (this.processModel && this.reUpload) {
|
|
return 'el-icon-upload'
|
|
} else if (this.processModel && this.disabled && this.preview) {
|
|
return 'el-icon-view'
|
|
} else if (this.processModel && this.disabled) {
|
|
return 'el-icon-download'
|
|
} else {
|
|
return 'el-icon-upload'
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
// 删除
|
|
handleRemoveFile(file){
|
|
const index = this.$refs.importFileAboutStand.uploadFiles.findIndex(e => e.response.data.id === file.response.data.id);
|
|
this.$refs.importFileAboutStand.uploadFiles.splice(index, 1);
|
|
this.showFileList.splice(index, 1)
|
|
const value = this.value
|
|
let ids = value.split(',')
|
|
if (file.response) {
|
|
let fileIds = file.response.data.id
|
|
let newIdList = this.removeArray(ids, fileIds)
|
|
let newStr = ''
|
|
if (newIdList != null && newIdList.length > 0) {
|
|
for (let i = 0; i < newIdList.length; i++) {
|
|
if (newIdList[i] !== '') {
|
|
newStr += newIdList[i] + ','
|
|
}
|
|
}
|
|
this.$emit('input', newStr)
|
|
} else {
|
|
this.$emit('input', '')
|
|
}
|
|
}
|
|
},
|
|
// 修改
|
|
handleModifyName(file) {
|
|
this.modifyFile.fileName = file.name
|
|
this.modifyFile.fileId = file.response.data.id
|
|
this.openModifyFileNameDialog = true
|
|
},
|
|
// 修改dialog-确认
|
|
handleModifyNameSubmite(){
|
|
this.modifyFileNameLoading = true
|
|
this.$http.get('att/attFile/updateFileName', this.modifyFile, {
|
|
_this: this
|
|
}, res => {
|
|
if(res.ok){
|
|
this.modifyFileNameLoading = false
|
|
this.openModifyFileNameDialog = false
|
|
this.showFileList.forEach(item=>{
|
|
if(item.response.data.id === this.modifyFile.fileId){
|
|
item.name = this.modifyFile.fileName
|
|
}
|
|
})
|
|
}
|
|
}, e => {
|
|
this.modifyFileNameLoading = false
|
|
})
|
|
},
|
|
handleExceed(files, fileList) {
|
|
if (this.exceed) {
|
|
this.$message.warning(this.exceed)
|
|
} else {
|
|
this.$message.warning(`当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
|
|
}
|
|
},
|
|
beforeUpload(file) {
|
|
var filename = file.name
|
|
var index1 = filename.lastIndexOf('.')
|
|
var index2 = filename.length
|
|
var fileSuffix = filename.substring(index1, index2)
|
|
fileSuffix = fileSuffix.toLocaleLowerCase()
|
|
// 判断上传文件格式
|
|
if (!this.allowType.includes(fileSuffix)) {
|
|
this.$message.error(`文件${file.name}格式不正确，请上传${this.allowType.join('、')}文件`)
|
|
return false
|
|
}
|
|
// 判断文件上传大小
|
|
if (file.size / 1024 / 1024 > this.size) {// eslint-disable-line
|
|
this.$message.error('文件' + file.name + `大小不超过${ this.size }M`)
|
|
return false
|
|
}
|
|
return true
|
|
},
|
|
handleChange(event) {
|
|
const value = event.target.value
|
|
this.$emit('input', value)
|
|
},
|
|
clickButtonToUpload(current) {
|
|
this.importModalshowflagtemp = true
|
|
this.$refs.importFileAboutStand && this.$refs.importFileAboutStand.clearFiles()
|
|
this.defaultFileList = []
|
|
if (this.value === 'null' || this.value == null) {
|
|
// this.value = ''
|
|
this.$emit('input', '')
|
|
}
|
|
let fileList
|
|
if (this.value != null && this.value !== '') {
|
|
let paramefile = this.value
|
|
if (paramefile.charAt(paramefile.length - 1) === ',') {
|
|
paramefile = paramefile.substring(0, paramefile.length - 1).replaceAll(",,",",")
|
|
}
|
|
this.$http.get('att/attFile/getMultiFileInfos', {
|
|
fileIds: paramefile
|
|
}, {
|
|
_this: this
|
|
}, res => {
|
|
fileList = res.data
|
|
if (fileList != null && fileList.length > 0) {
|
|
for (let i = 0; i < fileList.length; i++) {
|
|
let obj = {name: '', response: {}}
|
|
obj.name = fileList[i].oldFileName
|
|
obj.response.data = fileList[i]
|
|
this.defaultFileList.push(obj)
|
|
}
|
|
}
|
|
}, e => {
|
|
})
|
|
}
|
|
},
|
|
uploadSuccess(res, file, fileList) {
|
|
if (res.ok) {
|
|
let obj = {name: '', response: {}}
|
|
obj.name = file.response.data.oldFileName
|
|
obj.response.data = file.response.data
|
|
this.showFileList.push(obj)
|
|
let attrIds=""
|
|
if(this.value != null && this.value !== ''){
|
|
let attrArray= this.value.split(',')
|
|
// 方法二：filter方法 [推荐写法]
|
|
let attrIdsArray = attrArray.filter((s) => {
|
|
return s && s.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
|
|
});
|
|
attrIdsArray.push(res.data.id);
|
|
console.log(attrIdsArray)
|
|
attrIds = attrIdsArray.join(',')+","
|
|
}else{
|
|
attrIds =res.data.id+","
|
|
}
|
|
this.$emit('input', attrIds)
|
|
this.$emit('success')
|
|
this.$message({
|
|
message: '文件上传成功',
|
|
type: 'success'
|
|
})
|
|
switch (this.config.attrField) {
|
|
case 'recordsAttr':
|
|
this.$emit('recordsAttrTime', res.data.uploadTime)
|
|
break
|
|
case 'signAttr':
|
|
this.$emit('signAttrTime', res.data.uploadTime)
|
|
break
|
|
case 'otherAttr':
|
|
this.$emit('otherAttrTime', res.data.uploadTime)
|
|
break
|
|
}
|
|
// 国内外标准法规返回文件上传成功状态
|
|
this.$emit('fileSuccess', true)
|
|
// this.importModalshowflagtemp = false
|
|
} else {
|
|
this.$message({
|
|
message: res.message,
|
|
type: 'error'
|
|
})
|
|
fileList.pop()
|
|
}
|
|
},
|
|
removeOneFile(file, fileList) {
|
|
const value = this.value
|
|
let ids = value.split(',')
|
|
if (file.response) {
|
|
let fileIds = file.response.data.id
|
|
let newIdList = this.removeArray(ids, fileIds)
|
|
let newStr = ''
|
|
if (newIdList != null && newIdList.length > 0) {
|
|
for (let i = 0; i < newIdList.length; i++) {
|
|
if (newIdList[i] !== '') {
|
|
newStr += newIdList[i] + ','
|
|
}
|
|
}
|
|
this.$emit('input', newStr)
|
|
} else {
|
|
this.$emit('input', '')
|
|
}
|
|
}
|
|
const showFileList = []
|
|
fileList.map(item => {
|
|
let obj = {name: '', response: {}}
|
|
obj.name = item.response.data.oldFileName
|
|
obj.response.data = item.response.data
|
|
showFileList.push(obj)
|
|
})
|
|
this.showFileList = showFileList
|
|
},
|
|
// 删除数组中的某个对象
|
|
removeArray(_arr, _obj) {
|
|
var length = _arr.length
|
|
for (var i = 0; i < length; i++) {
|
|
if (_arr[i] === _obj) {
|
|
if (i === 0) {
|
|
_arr.shift() // 删除并返回数组的第一个元素
|
|
return _arr
|
|
} else if (i === length - 1) {
|
|
_arr.pop() // 删除并返回数组的最后一个元素
|
|
return _arr
|
|
} else {
|
|
_arr.splice(i, 1) // 删除下标为i的元素
|
|
return _arr
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// 文件预览
|
|
handlePreview(file) {
|
|
const attId = file.response.data.id
|
|
if (this.preview) {
|
|
if (attId) {
|
|
window.location.href = '/api/att/attFile/downloadFileForSarNew?fileId=' + attId
|
|
} else {
|
|
this.$message.warning('文件不存在,下载失败')
|
|
}
|
|
} else {
|
|
this.$preview(attId)
|
|
// this.getBusStandFileByAttId(attId)
|
|
// .then(res => {
|
|
// console.log(res)
|
|
// if(res){
|
|
// const editFileInfo = res
|
|
// console.log(editFileInfo)
|
|
// if(editFileInfo.fileSuffix === 'pdg' || editFileInfo.fileSuffix === 'PDG'){
|
|
// window.open('book://ssreader/e0?url='+editFileInfo.downLoadUrl)
|
|
// }else if(editFileInfo.fileSuffix === 'pdf' || editFileInfo.fileSuffix === 'PDF'){
|
|
// window.open('/static/pdf/web/viewer.html?file=' + encodeURIComponent('/api/att/attFile/getFileInfo?fileId=' + editFileInfo.id))
|
|
// }else {
|
|
// const nowTime = new Date().getTime()
|
|
// window.open(onlyOfficeUrl+'/onlyOffice?oldFileName=' + editFileInfo.oldFileName + '&fileType=' + editFileInfo.fileSuffix + '&attId=' + editFileInfo.id + '&fileUrl=' + editFileInfo.downLoadUrl + '&key=' + editFileInfo.id + nowTime+'&filePath='+editFileInfo.filePath+'&fileName='+editFileInfo.fileName)
|
|
// }
|
|
// }
|
|
// }).catch(e => {
|
|
// console.log(e)
|
|
// this.$message.warning('文件不存在,预览失败')
|
|
// })
|
|
}
|
|
},
|
|
|
|
// 读取文档转换后的文件
|
|
getConvertFileByAttId(attId) {
|
|
return new Promise((resolve, reject) => {
|
|
getConvertFileByAttId({
|
|
attId
|
|
}).then(res => {
|
|
if (res.ok && res.data.convertState) {
|
|
resolve(res.data)
|
|
} else {
|
|
reject()
|
|
}
|
|
}).catch(e => {
|
|
reject(e)
|
|
})
|
|
})
|
|
},
|
|
getBusStandFileByAttId(attId) {
|
|
return new Promise((resolve, reject) => {
|
|
getBusStandFileByAttId({
|
|
attId
|
|
}).then(res => {
|
|
if (res.ok) {
|
|
resolve(res.data)
|
|
} else {
|
|
reject()
|
|
}
|
|
}).catch(e => {
|
|
reject(e)
|
|
})
|
|
})
|
|
},
|
|
|
|
/**
|
|
* @description: 获取展示的文件
|
|
* @author: chenxiaoxi
|
|
* @time: 2021-03-30 17:03:36
|
|
*/
|
|
getShowFileList() {
|
|
return new Promise((resolve, reject) => {
|
|
if (this.value && this.value !== '') {
|
|
let paramefile = this.value
|
|
if (paramefile.charAt(paramefile.length - 1) === ',') {
|
|
paramefile = paramefile.substring(0, paramefile.length - 1)
|
|
}
|
|
this.$http.get('att/attFile/getMultiFileInfos', {
|
|
fileIds: paramefile
|
|
}, {
|
|
_this: this
|
|
}, res => {
|
|
const fileList = res.data, showFileList = []
|
|
if (fileList && fileList.length) {
|
|
fileList.map(file => {
|
|
let obj = {name: '', response: {}}
|
|
obj.name = file.oldFileName
|
|
obj.response.data = file
|
|
showFileList.push(obj)
|
|
})
|
|
}
|
|
this.showFileList = showFileList
|
|
resolve()
|
|
}, e => {
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.customer-upload {
|
|
&.disabled {
|
|
/deep/ .el-upload-dragger {
|
|
.el-upload__text {
|
|
color: #ccc;
|
|
}
|
|
&:hover {
|
|
cursor: not-allowed;
|
|
border-color: #d9d9d9;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/deep/ .el-form-item__error {
|
|
right: 150px !important;
|
|
}
|
|
/deep/ .el-upload-dragger {
|
|
[class^="el-icon-"] {
|
|
font-size: 67px;
|
|
color: #C0C4CC;
|
|
margin: 40px 0 16px;
|
|
line-height: 50px;
|
|
}
|
|
}
|
|
.file-file__wrap {
|
|
position: relative;
|
|
& > li{
|
|
width: calc(~'100% - 100px');
|
|
}
|
|
}
|
|
.file-item {
|
|
color: rgba(64, 158, 255, 0.8);
|
|
height: 50px;
|
|
line-height: 50px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
&:hover {
|
|
cursor: pointer;
|
|
color: rgba(64, 158, 255, 1);
|
|
}
|
|
}
|
|
.el-upload-list__item .el-icon-edit{
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 25px;
|
|
cursor: pointer;
|
|
opacity: .75;
|
|
color: #606266;
|
|
}
|
|
</style>
|