626 lines
19 KiB
Vue
626 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
|
||
v-dragDialogWidth
|
||
width='400px'
|
||
:visible.sync="importModalshowflagtemp"
|
||
:title="processModel && disabled ? '查看已上传的文件' : (title || '导入文件')"
|
||
:footer-hide="true"
|
||
append-to-body
|
||
:close-on-click-modal="false"
|
||
>
|
||
<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 () {
|
||
this.getShowFileList()
|
||
// 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({
|
||
dangerouslyUseHTMLString: true,
|
||
message: <div style="word-break: break-all;;color: #F56C6C">文件{file.name}格式不正确，请上传{this.allowType.join('、')}文件</div>,
|
||
type: 'error'
|
||
})
|
||
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>
|