code init
This commit is contained in:
chenxiaoxi
@@ -0,0 +1,460 @@
|
||||
<template>
|
||||
<!-- <div>-->
|
||||
<el-col :span="span">
|
||||
<el-form-item
|
||||
:label="config.attrName"
|
||||
:prop="config.attrField"
|
||||
: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>
|
||||
<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="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>
|
||||
</el-dialog>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- </div>-->
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getConvertFileByAttId } from 'api/process'
|
||||
export default {
|
||||
name: 'CustomFile',
|
||||
data() {
|
||||
return {
|
||||
showUploadlist: true, // 导入过程中新增数据时，如果数据错误，不出现导入列表
|
||||
uploadPath: 'api/att/attFile/upload',
|
||||
defaultFileList: [], // 默认显示
|
||||
showFileList: [],
|
||||
importModalshowflagtemp: 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', '.jpg','.JPG','.jpeg','.JPEG', '.PNG', '.png', '.xls','.XLS', '.xlsx','.XLSX']
|
||||
}
|
||||
},
|
||||
// 栅格比例
|
||||
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
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
if (this.showFileModel) {
|
||||
this.getShowFileList()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
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: {
|
||||
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 > 200) {// eslint-disable-line
|
||||
this.$message.error('文件' + file.name + '大小不超过200M')
|
||||
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)
|
||||
}
|
||||
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) {
|
||||
// this.value += res.data.id + ','
|
||||
this.$emit('input', this.value + res.data.id + ',')
|
||||
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) {
|
||||
this.getConvertFileByAttId(attId)
|
||||
.then(res => {
|
||||
switch (res.convertState) {
|
||||
case 'ERROR':
|
||||
this.$message.warning('文档转换失败')
|
||||
break
|
||||
case 'LODING':
|
||||
this.$message.info('文档转换中，请稍后查看')
|
||||
break
|
||||
case 'SUCCESS':
|
||||
const { convertFileInfo } = res
|
||||
window.open('/static/pdf/web/viewer.html?file=' + encodeURIComponent('/api/att/attFile/getFileInfo?fileId=' + convertFileInfo.id))
|
||||
break
|
||||
}
|
||||
}).catch(e => {
|
||||
this.$message.warning('文档转换失败')
|
||||
})
|
||||
} else {
|
||||
if (attId) {
|
||||
window.location.href = '/api/att/attFile/downloadFileForSar?fileId=' + attId
|
||||
} else {
|
||||
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)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* @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);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user