351 lines
9.4 KiB
Vue
351 lines
9.4 KiB
Vue
<template>
|
||
<el-form-item :label="label" :prop="prop" class="add-form-item form-item-disabled">
|
||
<el-input
|
||
disabled
|
||
style="display: none;"
|
||
:value="ids"
|
||
clearable
|
||
/>
|
||
<div style="display: flex;justify-content: space-between">
|
||
<div style="margin-top: 13px" :style="{width: view ? '100%' : '80%'}">
|
||
<template v-if="FileList.length > 0">
|
||
<div
|
||
v-for="file in FileList"
|
||
:key="file.id"
|
||
style="color: #409eff;cursor:pointer"
|
||
class="fileClass"
|
||
@click="onPreview(file)"
|
||
>
|
||
{{ file.name }}
|
||
<template v-if="down">
|
||
<span v-if="file.id !== ''" style="margin-left: 7px;">
|
||
<i class="el-icon-download" title="下载" @click="onPreview(file, 'down')" />
|
||
</span>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<div v-if="view" style="line-height: 22px">-</div>
|
||
</template>
|
||
</div>
|
||
<div v-if="!view" style="width: 20%;">
|
||
<el-button
|
||
:disabled="disabled"
|
||
type="primary"
|
||
class="common-button-primary"
|
||
size="mini"
|
||
style="margin-left: 10px; margin-top: 11px; float: right;"
|
||
@click="showUpload"
|
||
>
|
||
<i class="el-icon-upload" />
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
<el-dialog
|
||
v-dragDialogWidth
|
||
width="400px"
|
||
:visible.sync="fileMadel"
|
||
title="上传文件"
|
||
:close-on-click-modal="false"
|
||
>
|
||
<el-upload
|
||
ref="importfile"
|
||
multiple
|
||
drag
|
||
:file-list="fileList"
|
||
:action="fileUrl"
|
||
name="file"
|
||
:accept="accept"
|
||
:before-upload="beforeUpload"
|
||
:on-success="onSuccess"
|
||
:on-preview="onPreview"
|
||
:on-remove="removeOneFile"
|
||
:show-file-list="false"
|
||
>
|
||
<div style="padding: 20px 0">
|
||
<i class="el-icon-upload" style="color: #3399ff" />
|
||
<p>点击或拖拽上传文件</p>
|
||
</div>
|
||
</el-upload>
|
||
<ul class="el-upload-list el-upload-list--text">
|
||
<li
|
||
v-for="(file, index) in FileList"
|
||
:key="index"
|
||
class="el-upload-list__item is-success"
|
||
:title="file.name"
|
||
@click="onPreview(file)"
|
||
>
|
||
<a class="el-upload-list__item-name">
|
||
<i class="el-icon-document" />
|
||
{{ file.name }}
|
||
</a>
|
||
<label class="el-upload-list__item-status-label">
|
||
<i class="el-icon-upload-success el-icon-circle-check" />
|
||
</label>
|
||
<i class="el-icon-edit" @click.stop="handleModifyName(file)" />
|
||
<i class="el-icon-close" @click.stop="handleRemoveFile(file)" />
|
||
</li>
|
||
</ul>
|
||
</el-dialog>
|
||
<el-dialog
|
||
title="修改文件名称"
|
||
:visible.sync="openModifyFileNameDialog"
|
||
append-to-body
|
||
>
|
||
<el-input v-model="modifyFile.fileName" />
|
||
<div class="demo-drawer-footer" style="text-align: right;margin-top:30px">
|
||
<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>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'UploadFormItem',
|
||
props: {
|
||
ids: {
|
||
required: true,
|
||
type: String,
|
||
default: ''
|
||
},
|
||
names: {
|
||
required: true,
|
||
type: String
|
||
},
|
||
prop: {
|
||
type: String
|
||
},
|
||
label: {
|
||
type: String,
|
||
},
|
||
disabled: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
fileUrl: {
|
||
type: String,
|
||
default: () => 'api/att/attFile/uploadNew'
|
||
},
|
||
accept: {
|
||
type: String,
|
||
default: '.pdf, .PDF, .doc, .DOC, .docx, .DOCX, .ppt, .PPT, .pptx, .PPTX, .xls, .XLS, .xlsx, .XLSX, .pdg, .PDG'
|
||
},
|
||
size: {
|
||
type: Number,
|
||
default: 200
|
||
},
|
||
view: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
down: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
},
|
||
data () {
|
||
return {
|
||
fileMadel: false,
|
||
fileList: [], // 用于el-upload
|
||
FileList: [], // 用于回显
|
||
|
||
openModifyFileNameDialog: false,
|
||
modifyFile: {
|
||
fileName: '',
|
||
fileId: ''
|
||
},
|
||
modifyFileNameLoading: false
|
||
}
|
||
},
|
||
created () {
|
||
this.initFileList()
|
||
},
|
||
methods: {
|
||
showUpload () {
|
||
this.fileMadel = true;
|
||
},
|
||
initFileList () {
|
||
if (this.ids && this.ids !== '' && this.names && this.names !== '') {
|
||
const fileList = []
|
||
const idArr = this.ids.split(',')
|
||
const nameArr = this.names.split(',')
|
||
for (let i = 0; i < idArr.length; i++) {
|
||
fileList.push({
|
||
id: idArr[i],
|
||
name: nameArr[i]
|
||
})
|
||
}
|
||
this.fileList = fileList
|
||
this.FileList = fileList
|
||
}
|
||
},
|
||
beforeUpload (file) {
|
||
const fileName = file.name
|
||
const fileSuffix = fileName.slice(fileName.lastIndexOf('.') + 1)
|
||
// 判断上传文件格式
|
||
const acceptArr = this.accept.split(',').map(type => type.slice(type.lastIndexOf('.') + 1))
|
||
// 判断上传文件格式
|
||
if (!acceptArr.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
|
||
},
|
||
// 导入标准数据成功后执行
|
||
onSuccess (response, file, fileList) {
|
||
// 上传成功后判断是否是两条数据是的话替换掉旧数据
|
||
if (response.ok) {
|
||
const fileObj = {
|
||
id: file.response.data.id,
|
||
name: file.response.data.name
|
||
}
|
||
let ids;
|
||
let names;
|
||
if (this.ids && this.ids.length > 0) {
|
||
ids = this.ids + ',' + fileObj.id
|
||
names = this.names + ',' + fileObj.name
|
||
} else {
|
||
ids = fileObj.id
|
||
names = fileObj.name
|
||
}
|
||
|
||
this.$set(this.FileList, this.FileList.length, fileObj)
|
||
this.$emit('update:ids', ids)
|
||
this.$emit('update:names', names)
|
||
|
||
this.$message({
|
||
message: response.message,
|
||
type: 'success'
|
||
})
|
||
}
|
||
},
|
||
removeOneFile (file, fileList) {
|
||
const ids = fileList.reduce((init, file) => {
|
||
if (init === '') {
|
||
return file.id || file.response.data.id
|
||
} else {
|
||
return init + ',' + (file.id || file.response.data.id)
|
||
}
|
||
}, '')
|
||
const names = fileList.reduce((init, file) => {
|
||
if (init === '') {
|
||
return file.name
|
||
} else {
|
||
return init + ',' + file.name
|
||
}
|
||
}, '')
|
||
|
||
this.FileList = fileList.map(file => ({
|
||
id: file.id || file.response.data.id,
|
||
name: file.name
|
||
}))
|
||
this.$emit('update:ids', ids)
|
||
this.$emit('update:names', names)
|
||
},
|
||
// 文件预览及下载
|
||
onPreview (file, type) {
|
||
let attId = ''
|
||
if(file && file.id) {
|
||
attId = file.id
|
||
}else {
|
||
attId = file.response.data.id
|
||
}
|
||
if (type === 'down') {
|
||
if (attId) {
|
||
window.open('/api/att/attFile/downloadFileForSarNew?fileId=' + attId)
|
||
} else {
|
||
this.$message.warning('文件不存在,下载失败')
|
||
}
|
||
} else {
|
||
this.$preview(attId)
|
||
}
|
||
},
|
||
handleRemoveFile (file) {
|
||
const fileList = []
|
||
this.FileList.forEach(item => {
|
||
if (item.id !== file.id) {
|
||
fileList.push(item)
|
||
}
|
||
})
|
||
this.removeOneFile(file, fileList)
|
||
},
|
||
handleModifyName (file) {
|
||
this.modifyFile.fileName = file.name
|
||
this.modifyFile.fileId = file.id
|
||
this.openModifyFileNameDialog = true
|
||
},
|
||
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.FileList.forEach(item => {
|
||
if(item.id === this.modifyFile.fileId) {
|
||
item.name = this.modifyFile.fileName
|
||
}
|
||
})
|
||
const ids = this.FileList.map(item => item.id).join(',')
|
||
const names = this.FileList.map(item => item.name).join(',')
|
||
this.$emit('update:ids', ids)
|
||
this.$emit('update:names', names)
|
||
}
|
||
}, e => {
|
||
this.modifyFileNameLoading = false
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.fileClass{
|
||
line-height: 22px !important;
|
||
}
|
||
.add-form-item /deep/ .el-form-item__content .el-form-item__error {
|
||
padding: 3px;
|
||
top: 15px;
|
||
right: 45px !important;
|
||
left: auto;
|
||
background: #fff3f3;
|
||
z-index: 9;
|
||
}
|
||
.el-upload-list__item .el-icon-edit{
|
||
position: absolute;
|
||
top: 5px;
|
||
right: 25px;
|
||
cursor: pointer;
|
||
opacity: .75;
|
||
color: #606266;
|
||
}
|
||
</style>
|