You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
452 lines
16 KiB
452 lines
16 KiB
<template>
|
|
<div class="upload-file">
|
|
<!-- 上传附件curd -->
|
|
<div v-if="isUploadDetail" class="upload-curd">
|
|
<div class="upload-btn">
|
|
<el-button icon="el-icon-plus" size="small" type="primary">添加</el-button>
|
|
<input id="upFile" type="file" name="upFile" @change="changeFile($event)">
|
|
</div>
|
|
<el-button icon="el-icon-delete" :disabled="selections.length === 0" @click="toDelete(selections)">删除</el-button>
|
|
<el-button icon="el-icon-sort" @click="showSort">排序</el-button>
|
|
</div>
|
|
|
|
<!--表格渲染-->
|
|
<el-table
|
|
ref="table"
|
|
:data="tableData"
|
|
style="min-width: 100%"
|
|
height="calc(100vh - 382px)"
|
|
@row-click="clickRowHandler"
|
|
@selection-change="selectionChangeHandler"
|
|
>
|
|
<el-table-column v-if="isUploadDetail" type="selection" width="55" align="center" />
|
|
<el-table-column type="index" label="序号" width="55" align="center" />
|
|
<el-table-column prop="file_name" label="文件名称" show-overflow-tooltip min-width="140" />
|
|
<el-table-column prop="file_type" label="格式" min-width="60" align="center" />
|
|
<el-table-column prop="file_size" label="大小" min-width="85" align="right">
|
|
<template slot-scope="scope">
|
|
{{ getFileSize(scope.row.file_size) }}
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column prop="file_dpi" label="分辨率" min-width="120" align="center">
|
|
<template slot-scope="scope">
|
|
<div v-if="!scope.row.file_dpi || scope.row.file_dpi === 'null'"> - </div>
|
|
<div v-else> {{ scope.row.file_dpi }} </div>
|
|
</template>
|
|
</el-table-column> -->
|
|
<el-table-column prop="file_thumbnail" label="缩略图" min-width="60" align="center">
|
|
<template slot-scope="scope">
|
|
<div v-if="scope.row.file_type === 'jpg' || scope.row.file_type === 'jpeg' || scope.row.file_type === 'png' || scope.row.file_type === 'bmp'|| scope.row.file_type === 'gif'">
|
|
<i class="fileIcon icon-image" />
|
|
</div>
|
|
<div v-else-if="scope.row.file_type === 'xlsx' || scope.row.file_type === 'xls'">
|
|
<i class="fileIcon icon-excel" />
|
|
</div>
|
|
<div v-else-if="scope.row.file_type === 'docx' || scope.row.file_type === 'doc'">
|
|
<i class="fileIcon icon-word" />
|
|
</div>
|
|
<div v-else-if="scope.row.file_type === 'pdf'">
|
|
<i class="fileIcon icon-pdf" />
|
|
</div>
|
|
<div v-else-if="scope.row.file_type === 'ppt' || scope.row.file_type === 'pptx'">
|
|
<i class="fileIcon icon-ppt" />
|
|
</div>
|
|
<div v-else-if="scope.row.file_type === 'zip' || scope.row.file_type === 'rar'">
|
|
<i class="fileIcon icon-zip" />
|
|
</div>
|
|
<div v-else-if="scope.row.file_type === 'txt'">
|
|
<i class="fileIcon icon-txt" />
|
|
</div>
|
|
<div v-else-if="scope.row.file_type === 'ofd'">
|
|
<i class="fileIcon icon-ofd" />
|
|
</div>
|
|
<div v-else>
|
|
<i class="fileIcon icon-other" />
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="create_time" label="创建时间" min-width="130" align="center" />
|
|
<el-table-column v-if="isShowUtilizeHandleBtn" label="操作" min-width="80" align="center">
|
|
<template slot-scope="scope">
|
|
<div class="handle-btn">
|
|
<el-button v-if="authUtilize.look" class="iconfont icon-sulan" @click="toPreview(scope.row)" />
|
|
<el-button v-if="authUtilize.download" class="iconfont icon-xiazai" @click="downloadFile(scope.row)" />
|
|
<el-button v-if="authUtilize.print" class="iconfont icon-dayin" />
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 点击缩略图看大图 -->
|
|
<!-- <el-dialog class="preview-dialog" :append-to-body="true" :close-on-click-modal="false" :before-close="handleClose" :visible="showCoverVisible" title="查看大图">
|
|
<span class="dialog-right-top" />
|
|
<span class="dialog-left-bottom" />
|
|
<div class="setting-dialog" style="max-height:calc(100vh - 230px); overflow:auto;">
|
|
<img style="max-width:100%; object-fit: contain;" :src="previewSrc" :onerror="defaultImg">
|
|
</div>
|
|
</el-dialog> -->
|
|
|
|
<!-- 排序 -->
|
|
<!-- <el-dialog :close-on-click-modal="false" :append-to-body="true" title="排序" :visible.sync="sortVisible" @opened="opened">
|
|
<span class="dialog-right-top" />
|
|
<span class="dialog-left-bottom" />
|
|
<div class="setting-dialog">
|
|
<i class="drag-tip">提示：请通过拖动鼠标来调整当前顺序</i>
|
|
<el-table :data="sortTableData" class="file-sort" style="width: 100%;max-height: 70vh;" row-key="id">
|
|
<el-table-column type="index" label="序号" width="100" align="center" />
|
|
<el-table-column prop="file_name" label="文件名称" />
|
|
</el-table>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click.native="handleSort">保存</el-button>
|
|
</div>
|
|
</div>
|
|
</el-dialog> -->
|
|
|
|
<!-- 删除附件 -->
|
|
<!-- <el-dialog title="删除附件" :append-to-body="true" :close-on-click-modal="false" :visible.sync="deleteVisible" :before-close="handleClose">
|
|
<span class="dialog-right-top" />
|
|
<span class="dialog-left-bottom" />
|
|
<div class="setting-dialog">
|
|
<div class="dialog-delt">
|
|
<p><span>确定删除已选择的附件吗？</span></p>
|
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click.native="handleDeltConfirm">确定</el-button>
|
|
</div>
|
|
</div>
|
|
</el-dialog> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import { FetchInitArchiveFilesView, FetchEditFile, FetchDeleteFile, FetchFileSort } from '@/api/archivesManage/archivesList'
|
|
import { FetchInitFileCategoryView } from '@/api/collect/collect'
|
|
import { archivesUpload } from '@/utils/upload'
|
|
import { downloadFile, getCurrentTime } from '@/utils/index'
|
|
import { mapGetters } from 'vuex'
|
|
import { FetchIsAuthByLookType } from '@/api/archivesManage/library'
|
|
// import Sortable from 'sortablejs'
|
|
export default {
|
|
name: 'UploadFile',
|
|
components: {},
|
|
mixins: [],
|
|
props: {
|
|
isUploadDetail: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
selectedCategory: {
|
|
type: Object,
|
|
default: function() {
|
|
return {}
|
|
}
|
|
},
|
|
arcId: {
|
|
type: String,
|
|
default: function() {
|
|
return ''
|
|
}
|
|
},
|
|
categoryId: {
|
|
type: String,
|
|
default: function() {
|
|
return ''
|
|
}
|
|
},
|
|
isShowUtilizeHandleBtn: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
archivesDetailsData: {
|
|
type: Array,
|
|
default: function() {
|
|
return []
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
// defaultImg: 'this.src="' + require('@/assets/images/cover-bg.png') + '"',
|
|
tableData: [], // 附件list
|
|
selections: [], // table - 选中的
|
|
// showCoverVisible: false, // 查看大图dialog
|
|
// sortTableData: [], // 排序data
|
|
// sortVisible: false, // 排序dialog
|
|
// deleteVisible: false, // 删除附件 dialog
|
|
// deleteData: [], // 删除选中的data
|
|
file: null, // 附件 change
|
|
fileNames: '', // 附件 - name
|
|
formatType: '', // 附件 - type
|
|
postfix: '', // 附件 - 文件后缀
|
|
fileSize: '', // 附件 - 大小
|
|
filePath: '', // 附件 - path
|
|
px: '', // 附件 - 分辨率
|
|
nowDate: '', // 当前时间
|
|
previewSrc: '', // 查看大图src
|
|
authUtilize: {
|
|
'look': false,
|
|
'download': false,
|
|
'print': false,
|
|
'endTime': null,
|
|
'startTime': null
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'baseApi'
|
|
])
|
|
},
|
|
watch: {
|
|
arcId: function(newValue, oldValue) {
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getIsAuthByLookType()
|
|
console.log('archivesDetailsData', this.archivesDetailsData)
|
|
},
|
|
methods: {
|
|
getIsAuthByLookType() {
|
|
const params = {
|
|
'archivesId': this.arcId
|
|
}
|
|
FetchIsAuthByLookType(params).then(res => {
|
|
this.authUtilize = res
|
|
})
|
|
},
|
|
toPreview(row) {
|
|
const routeData = this.$router.resolve({
|
|
path: '/preview',
|
|
query: {
|
|
'archiveNo': this.archivesDetailsData.find(item => item.fieldName === 'archive_no').context
|
|
}})
|
|
window.open(routeData.href, '_blank')
|
|
if (localStorage.getItem('documentId')) {
|
|
localStorage.removeItem('documentId')
|
|
}
|
|
// localStorage.setItem('fileParentInfo', JSON.stringify(this.archivesDetailsData))
|
|
localStorage.setItem('fileTables', JSON.stringify(this.tableData))
|
|
localStorage.setItem('fileCurrent', JSON.stringify(row))
|
|
},
|
|
getFileSize(fileSize) {
|
|
// 1. 先将接口返回的KB值转为数字，处理非数字/空值情况
|
|
const sizeInKB = Number(fileSize)
|
|
if (isNaN(sizeInKB) || sizeInKB < 0) {
|
|
return '0 KB' // 异常值默认显示0 KB
|
|
}
|
|
|
|
// 2. 定义单位换算关系（1 MB = 1024 KB，1 GB = 1024 MB）
|
|
const KB = 1
|
|
const MB = 1024 * KB
|
|
const GB = 1024 * MB
|
|
|
|
// 3. 根据大小自动选择单位并格式化
|
|
if (sizeInKB >= GB) {
|
|
// 大于等于1GB，显示GB（保留2位小数）
|
|
return (sizeInKB / GB).toFixed(2) + ' GB'
|
|
} else if (sizeInKB >= MB) {
|
|
// 大于等于1MB且小于1GB，显示MB（保留2位小数）
|
|
return (sizeInKB / MB).toFixed(2) + ' MB'
|
|
} else if (sizeInKB < 1) {
|
|
// 不足1KB，统一显示1 KB（保持你之前的需求）
|
|
return '1 KB'
|
|
} else {
|
|
// 1KB到1MB之间，显示KB（保留2位小数）
|
|
return sizeInKB + ' KB'
|
|
}
|
|
},
|
|
// 选择附件
|
|
async changeFile(e) {
|
|
this.file = e.target.files[0]
|
|
this.fileSize = this.file.size
|
|
this.formatType = this.file.type.substring(0, this.file.type.indexOf('/'))
|
|
this.fileNames = this.file.name
|
|
this.postfix = this.file.name.substring(
|
|
this.fileNames.lastIndexOf('.') + 1,
|
|
this.fileNames.length
|
|
)
|
|
if (this.formatType === 'image') {
|
|
const fileBase64 = await this.getBase64(this.file)
|
|
const res = await this.getImgPx(fileBase64)
|
|
this.px = res.width + 'px*' + res.height + 'px'
|
|
} else {
|
|
this.px = ''
|
|
}
|
|
// 上传附件
|
|
archivesUpload(this.baseApi + '/api/archives/uploadFile', this.file, this.categoryId).then(res => {
|
|
if (res.data.code === 200) {
|
|
this.filePath = res.data.data
|
|
this.uploadSave()
|
|
}
|
|
})
|
|
},
|
|
// 上传附件 - 选择上传即保存
|
|
uploadSave() {
|
|
this.nowDate = getCurrentTime()
|
|
const json = {
|
|
'file_name': this.fileNames,
|
|
'file_size': this.fileSize,
|
|
'file_type': this.postfix,
|
|
'file_path': this.filePath,
|
|
'sequence': null,
|
|
'archive_id': this.arcId,
|
|
'file_dpi': this.px,
|
|
'file_thumbnail': '',
|
|
'create_time': this.nowDate,
|
|
'id': null
|
|
}
|
|
const arrayUpload = []
|
|
arrayUpload.push(json)
|
|
const params = {
|
|
'categoryId': this.categoryId,
|
|
'jsonString': JSON.stringify(arrayUpload)
|
|
}
|
|
console.log(params)
|
|
// FetchEditFile(params).then(data => {
|
|
// this.$message.success('上传附件成功!')
|
|
// this.crud.refresh()
|
|
// this.getFileList()
|
|
// })
|
|
},
|
|
// 将上传的图片转为base64
|
|
getBase64(file) {
|
|
const reader = new FileReader()
|
|
reader.readAsDataURL(file)
|
|
return new Promise((resolve) => {
|
|
reader.onload = () => {
|
|
resolve(reader.result)
|
|
}
|
|
})
|
|
},
|
|
// 获取图片的分辨率
|
|
getImgPx(img) {
|
|
const image = new Image()
|
|
image.src = img
|
|
return new Promise((resolve) => {
|
|
image.onload = () => {
|
|
const width = image.width
|
|
const height = image.height
|
|
resolve({ width, height })
|
|
}
|
|
})
|
|
},
|
|
// 上传list
|
|
getFileList() {
|
|
const params = {
|
|
'categoryId': this.categoryId !== '' ? this.categoryId : this.selectedCategory.id,
|
|
'archivesId': this.arcId,
|
|
'page': 0,
|
|
'size': 10
|
|
}
|
|
console.log(params)
|
|
FetchInitFileCategoryView(params).then(data => {
|
|
console.log('darta', data)
|
|
this.tableData = data.returnlist
|
|
})
|
|
},
|
|
// 下载附件
|
|
downloadFile(row) {
|
|
const url = this.baseApi + '/downloadFile' + row.file_path
|
|
fetch(url).then(res => res.blob()).then(blob => {
|
|
downloadFile(blob, row.file_name.split('.')[0], row.file_type)
|
|
}).catch(() => {
|
|
this.$message.error('下载文件失败!')
|
|
})
|
|
},
|
|
// 选择删除
|
|
toDelete(data) {
|
|
this.deleteData = data
|
|
this.deleteVisible = true
|
|
},
|
|
// 确认删除
|
|
handleDeltConfirm() {
|
|
this.deleteVisible = false
|
|
const ids = []
|
|
this.deleteData.forEach(val => {
|
|
ids.push(val.id)
|
|
})
|
|
const params = {
|
|
'ids': ids,
|
|
'categoryId': this.categoryId
|
|
}
|
|
console.log(params)
|
|
// 删除fetch
|
|
// FetchDeleteFile(params).then(res => {
|
|
// this.crud.delAllLoading = false
|
|
// this.$message.success('删除成功!')
|
|
// this.crud.refresh()
|
|
// this.getFileList()
|
|
// })
|
|
},
|
|
// 排序 - 行拖拽
|
|
// rowDrop(className, targetName) {
|
|
// // 此时找到的元素是要拖拽元素的父容器
|
|
// const tbody = document.querySelector('.' + className + ' .el-table__body-wrapper tbody')
|
|
// const that = this
|
|
// Sortable.create(tbody, {
|
|
// // 指定父元素下可被拖拽的子元素
|
|
// draggable: '.el-table__row',
|
|
// onEnd({ newIndex, oldIndex }) {
|
|
// if (newIndex === oldIndex) return
|
|
// that[targetName].splice(newIndex, 0, that[targetName].splice(oldIndex, 1)[0])
|
|
// }
|
|
// })
|
|
// },
|
|
// 排序
|
|
// opened() {
|
|
// this.rowDrop('file-sort', 'sortTableData')
|
|
// },
|
|
// showSort() {
|
|
// this.sortVisible = true
|
|
// this.sortTableData = JSON.parse(JSON.stringify(this.tableData))
|
|
// },
|
|
// // 排序 - 保存
|
|
// handleSort() {
|
|
// const ids = []
|
|
// const sequences = []
|
|
// this.sortTableData.map((value, index) => {
|
|
// ids.push(value.id)
|
|
// sequences.push(index + 1)
|
|
// })
|
|
// const params = {
|
|
// 'categoryId': this.categoryId,
|
|
// 'ids': ids,
|
|
// 'sequences': sequences
|
|
// }
|
|
// console.log(params)
|
|
// // FetchFileSort(params).then((res) => {
|
|
// // this.sortVisible = false
|
|
// // this.$message.success('附件排序成功!')
|
|
// // this.crud.refresh()
|
|
// // this.getFileList()
|
|
// // })
|
|
// },
|
|
// table
|
|
clickRowHandler(row) {
|
|
this.$refs.table.toggleRowSelection(row)
|
|
},
|
|
// table
|
|
selectionChangeHandler(val) {
|
|
this.selections = val
|
|
},
|
|
// dialog - close
|
|
handleClose(done) {
|
|
this.showCoverVisible = false
|
|
done()
|
|
}
|
|
// 查看大图
|
|
// showCoverPreview(row) {
|
|
// this.showCoverVisible = true
|
|
// this.previewSrc = this.baseApi + '/downloadFile' + row.file_path
|
|
// }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.svg-style{
|
|
width: 60px;
|
|
height: 32px;
|
|
}
|
|
|
|
</style>
|