9 changed files with 498 additions and 398 deletions
-
16src/views/archivesManage/archivesList/module/archivesInfo/index.vue
-
682src/views/archivesManage/archivesList/module/uploadFile/index.vue
-
115src/views/archivesManage/archivesSearch/index.vue
-
9src/views/archivesManage/fileImport/dataImport/index.vue
-
4src/views/archivesManage/fileImport/importLog/index.vue
-
51src/views/archivesManage/fileImport/module/detail.vue
-
7src/views/components/WarehouseWarning.vue
-
10src/views/system/logManage/warnLog/index.vue
-
2src/views/system/user/index.vue
@ -1,341 +1,341 @@ |
|||||
<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" 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"> |
|
||||
<template slot-scope="scope"> |
|
||||
{{ (scope.row.file_size / 1024).toFixed(2) + 'kB' }} |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<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.file_type === 'jpg' || scope.row.file_type === 'jpeg' || scope.row.file_type === 'png' || scope.row.file_type === 'bmp'|| scope.row.file_type === 'gif'"> |
|
||||
<img width="60px" height="32px" class="screenshot" :src="baseApi+ '/downloadFile' +scope.row.file_path" :onerror="defaultImg" @click="showCoverPreview(scope.row)"> |
|
||||
</div> |
|
||||
<div v-else> |
|
||||
<svg-icon icon-class="fujian" class-name="svg-style" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="create_time" label="创建时间" min-width="110" align="center" /> |
|
||||
<el-table-column v-if="!isUploadDetail && !recycleMain.isRecycle" 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> |
|
||||
|
|
||||
<!-- 点击缩略图看大图 --> |
|
||||
<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 { archivesUpload } from '@/utils/upload' |
|
||||
import { downloadFile, getCurrentTime } from '@/utils/index' |
|
||||
import { mapGetters } from 'vuex' |
|
||||
import { form } from '@crud/crud' |
|
||||
import Sortable from 'sortablejs' |
|
||||
export default { |
|
||||
name: 'UploadFile', |
|
||||
components: {}, |
|
||||
mixins: [ |
|
||||
form({}) |
|
||||
], |
|
||||
inject: ['recycleMain'], |
|
||||
props: { |
|
||||
isUploadDetail: { |
|
||||
type: Boolean, |
|
||||
default: true |
|
||||
}, |
|
||||
categoryId: { |
|
||||
type: String, |
|
||||
default: function() { |
|
||||
return '' |
|
||||
} |
|
||||
}, |
|
||||
arcId: { |
|
||||
type: String, |
|
||||
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 |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
...mapGetters([ |
|
||||
'baseApi' |
|
||||
]) |
|
||||
}, |
|
||||
watch: { |
|
||||
arcId: function(newValue, oldValue) { |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
// 选择附件 |
|
||||
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) |
|
||||
} |
|
||||
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, |
|
||||
'archiveId': this.arcId |
|
||||
} |
|
||||
FetchInitArchiveFilesView(params).then(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 |
|
||||
} |
|
||||
// 删除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 |
|
||||
} |
|
||||
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> |
|
||||
@import "~@/assets/styles/archives-manage.scss"; |
|
||||
.svg-style{ |
|
||||
width: 60px; |
|
||||
height: 32px; |
|
||||
} |
|
||||
</style> |
|
||||
|
<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" 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"> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ (scope.row.file_size / 1024).toFixed(2) + 'kB' }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<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.file_type === 'jpg' || scope.row.file_type === 'jpeg' || scope.row.file_type === 'png' || scope.row.file_type === 'bmp'|| scope.row.file_type === 'gif'"> |
||||
|
<img width="60px" height="32px" class="screenshot" :src="baseApi+ '/downloadFile' +scope.row.file_path" :onerror="defaultImg" @click="showCoverPreview(scope.row)"> |
||||
|
</div> |
||||
|
<div v-else> |
||||
|
<svg-icon icon-class="fujian" class-name="svg-style" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="create_time" label="创建时间" min-width="110" align="center" /> |
||||
|
<el-table-column v-if="!isUploadDetail && !recycleMain.isRecycle" 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> |
||||
|
|
||||
|
<!-- 点击缩略图看大图 --> |
||||
|
<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 { archivesUpload } from '@/utils/upload' |
||||
|
import { downloadFile, getCurrentTime } from '@/utils/index' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
// import { form } from '@crud/crud' |
||||
|
import Sortable from 'sortablejs' |
||||
|
export default { |
||||
|
name: 'UploadFile', |
||||
|
components: {}, |
||||
|
mixins: [ |
||||
|
// form({}) |
||||
|
], |
||||
|
inject: ['recycleMain'], |
||||
|
props: { |
||||
|
isUploadDetail: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
categoryId: { |
||||
|
type: String, |
||||
|
default: function() { |
||||
|
return '' |
||||
|
} |
||||
|
}, |
||||
|
arcId: { |
||||
|
type: String, |
||||
|
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 |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'baseApi' |
||||
|
]) |
||||
|
}, |
||||
|
watch: { |
||||
|
arcId: function(newValue, oldValue) { |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 选择附件 |
||||
|
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) |
||||
|
} |
||||
|
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, |
||||
|
'archiveId': this.arcId |
||||
|
} |
||||
|
FetchInitArchiveFilesView(params).then(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 |
||||
|
} |
||||
|
// 删除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 |
||||
|
} |
||||
|
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> |
||||
|
@import "~@/assets/styles/archives-manage.scss"; |
||||
|
.svg-style{ |
||||
|
width: 60px; |
||||
|
height: 32px; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue