|
|
|
@ -3,14 +3,18 @@ |
|
|
|
<!-- 上传附件curd --> |
|
|
|
<div v-if="isUploadDetail" class="upload-curd"> |
|
|
|
<!-- <el-button icon="el-icon-plus">新增</el-button> --> |
|
|
|
<el-upload |
|
|
|
<!-- <el-upload |
|
|
|
class="upload-demo" |
|
|
|
action="#" |
|
|
|
:on-preview="handlePreview" |
|
|
|
:file-list="fileList" |
|
|
|
> |
|
|
|
<el-button icon="el-icon-plus" size="small" type="primary">新增</el-button> |
|
|
|
</el-upload> |
|
|
|
</el-upload> --> |
|
|
|
<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="sortVisible = true">排序</el-button> |
|
|
|
</div> |
|
|
|
@ -26,21 +30,22 @@ |
|
|
|
> |
|
|
|
<el-table-column type="selection" width="55" align="center" /> |
|
|
|
<el-table-column type="index" label="序号" width="55" align="center" /> |
|
|
|
<el-table-column prop="fileName" label="文件名称" min-width="140" align="center" /> |
|
|
|
<el-table-column prop="fileFormat" label="格式" min-width="60" align="center" /> |
|
|
|
<el-table-column prop="fileSize" label="大小" min-width="85" align="center" /> |
|
|
|
<el-table-column prop="fileDpi" label="分辨率" min-width="85" align="center" /> |
|
|
|
<el-table-column prop="fileCover" label="缩览图" min-width="60" align="center"> |
|
|
|
<el-table-column prop="file_name" label="文件名称" min-width="140" align="center" /> |
|
|
|
<el-table-column prop="file_type" label="格式" min-width="60" align="center" /> |
|
|
|
<el-table-column prop="file_size" label="大小" min-width="85" align="center" /> |
|
|
|
<el-table-column prop="file_dpi" label="分辨率" min-width="85" align="center" /> |
|
|
|
<el-table-column prop="file_thumbnail" label="缩览图" min-width="60" align="center"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div v-if="scope.row.fileCover"> |
|
|
|
<img width="60px" height="32px" class="screenshot" :src="scope.row.fileCover" @click="showCoverVisible=true"> |
|
|
|
<div v-if="scope.row.file_thumbnail"> |
|
|
|
<img width="60px" height="32px" class="screenshot" :src="scope.row.file_thumbnail" @click="showCoverVisible=true"> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="create_date" label="创建时间" min-width="100" align="center" /> |
|
|
|
<el-table-column v-if="!isUploadDetail" label="操作" min-width="100" align="center"> |
|
|
|
<template> |
|
|
|
<el-button class="file-down iconfont icon-weibiaoti-2">下载</el-button> |
|
|
|
<el-table-column prop="create_time" label="创建时间" min-width="100" align="center" /> |
|
|
|
<!-- v-if="!isUploadDetail" --> |
|
|
|
<el-table-column label="操作" min-width="100" align="center"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-button class="file-down iconfont icon-weibiaoti-2" @click="downloadFile(scope.row)">下载</el-button> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
@ -87,9 +92,13 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { FetchInitArchiveFilesView, FetchEditFile, FetchDeleteFile } from '@/api/archivesManage/archivesList' |
|
|
|
import { archivesUpload } from '@/utils/upload' |
|
|
|
import { getCurrentTime } from '@/utils/index' |
|
|
|
import { mapGetters } from 'vuex' |
|
|
|
import { form } from '@crud/crud' |
|
|
|
import Sortable from 'sortablejs' |
|
|
|
import data from '../data.json' |
|
|
|
// import data from '../data.json' |
|
|
|
export default { |
|
|
|
name: 'UploadFile', |
|
|
|
components: {}, |
|
|
|
@ -100,31 +109,156 @@ export default { |
|
|
|
isUploadDetail: { |
|
|
|
type: Boolean, |
|
|
|
default: true |
|
|
|
}, |
|
|
|
categoryId: { |
|
|
|
type: String, |
|
|
|
default: function() { |
|
|
|
return '' |
|
|
|
} |
|
|
|
}, |
|
|
|
arcId: { |
|
|
|
type: String, |
|
|
|
default: function() { |
|
|
|
return '' |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
tableData: [], |
|
|
|
tableData: [], // 附件list |
|
|
|
selections: [], |
|
|
|
showCoverVisible: false, |
|
|
|
fileList: [], // 上传list |
|
|
|
sortVisible: false, // 排序 |
|
|
|
sortTableData: [], |
|
|
|
deleteVisible: false, |
|
|
|
deleteData: [] |
|
|
|
showCoverVisible: false, // 查看大图dialog |
|
|
|
sortVisible: false, // 排序dialog |
|
|
|
sortTableData: [], // 排序table |
|
|
|
deleteVisible: false, // 删除附件 dialog |
|
|
|
deleteData: [], // 删除选中的data |
|
|
|
file: null, // 附件 change |
|
|
|
fileNames: '', // 附件 - name |
|
|
|
formatType: '', // 附件 - type |
|
|
|
postfix: '', // 附件 - 文件后缀 |
|
|
|
fileSize: '', |
|
|
|
filePath: '', |
|
|
|
px: '', |
|
|
|
fileBase64: '', |
|
|
|
nowDate: '' |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.tableData = data.data |
|
|
|
computed: { |
|
|
|
...mapGetters([ |
|
|
|
'baseApi' |
|
|
|
]) |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
arcId: function(newValue, oldValue) { |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 新增 |
|
|
|
handlePreview(file) { |
|
|
|
console.log(file) |
|
|
|
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 |
|
|
|
) |
|
|
|
console.log(this.postfix) |
|
|
|
// this.fileSize = (this.file.size / 1024).toFixed(2) + 'kB' |
|
|
|
|
|
|
|
if (this.formatType === 'image') { |
|
|
|
this.fileBase64 = await this.getBase64(this.file) |
|
|
|
const res = await this.getImgPx(this.fileBase64) |
|
|
|
this.px = res.width + 'px*' + res.height + 'px' |
|
|
|
} else { |
|
|
|
this.px = '' |
|
|
|
} |
|
|
|
// 上传附件 |
|
|
|
archivesUpload(this.baseApi + '/api/archives/uploadFile', this.file, this.categoryId).then(res => { |
|
|
|
console.log(res.data) |
|
|
|
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 |
|
|
|
} |
|
|
|
console.log(json) |
|
|
|
const arrayUpload = [] |
|
|
|
arrayUpload.push(json) |
|
|
|
const params = { |
|
|
|
'categoryId': this.categoryId, |
|
|
|
'jsonString': JSON.stringify(arrayUpload) |
|
|
|
} |
|
|
|
FetchEditFile(params).then(data => { |
|
|
|
this.$notify({ |
|
|
|
title: '上传附件成功', |
|
|
|
type: 'success', |
|
|
|
duration: 2500 |
|
|
|
}) |
|
|
|
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, |
|
|
|
'archiveId': this.arcId |
|
|
|
} |
|
|
|
FetchInitArchiveFilesView(params).then(data => { |
|
|
|
this.tableData = data.returnlist |
|
|
|
}) |
|
|
|
}, |
|
|
|
downloadFile(row) { |
|
|
|
console.log(row.file_path) |
|
|
|
const url = this.baseApi + '/downloadFile' + row.file_path |
|
|
|
const link = document.createElement('a') |
|
|
|
link.style.display = 'none' |
|
|
|
link.href = url |
|
|
|
link.setAttribute('target', '_blank') |
|
|
|
link.setAttribute('download', 'testFile') |
|
|
|
document.body.appendChild(link) |
|
|
|
link.click() |
|
|
|
document.body.removeChild(link) |
|
|
|
}, |
|
|
|
// 选择删除 |
|
|
|
toDelete(data) { |
|
|
|
console.log(data) |
|
|
|
this.deleteData = data |
|
|
|
this.deleteVisible = true |
|
|
|
}, |
|
|
|
@ -135,20 +269,21 @@ export default { |
|
|
|
this.deleteData.forEach(val => { |
|
|
|
ids.push(val.id) |
|
|
|
}) |
|
|
|
// const params = { |
|
|
|
// 'ids': ids, |
|
|
|
// 'categoryId': this.selectedCategory.id |
|
|
|
// } |
|
|
|
const params = { |
|
|
|
'ids': ids, |
|
|
|
'categoryId': this.categoryId |
|
|
|
} |
|
|
|
// 删除fetch |
|
|
|
// del(params).then(res => { |
|
|
|
// this.crud.delAllLoading = false |
|
|
|
// this.$notify({ |
|
|
|
// title: '删除成功', |
|
|
|
// type: 'success', |
|
|
|
// duration: 2500 |
|
|
|
// }) |
|
|
|
// this.crud.refresh() |
|
|
|
// }) |
|
|
|
FetchDeleteFile(params).then(res => { |
|
|
|
this.crud.delAllLoading = false |
|
|
|
this.$notify({ |
|
|
|
title: '删除成功', |
|
|
|
type: 'success', |
|
|
|
duration: 2500 |
|
|
|
}) |
|
|
|
this.crud.refresh() |
|
|
|
this.getFileList() |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 排序 - 行拖拽 |
|
|
|
rowDrop(className, targetName) { |
|
|
|
|
