parent
47bee63237
commit
4deb8fe39f
18 changed files with 400 additions and 115 deletions
@ -0,0 +1,32 @@ |
|||||||
|
import Vue from 'vue' |
||||||
|
import Clipboard from 'clipboard' |
||||||
|
|
||||||
|
function clipboardSuccess(message = 'Copy successfully') { |
||||||
|
Vue.prototype.$message({ |
||||||
|
message, |
||||||
|
type: 'success', |
||||||
|
duration: 1500 |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
function clipboardError() { |
||||||
|
Vue.prototype.$message({ |
||||||
|
message: 'Copy failed', |
||||||
|
type: 'error' |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export default function handleClipboard(text, event, message) { |
||||||
|
const clipboard = new Clipboard(event.target, { |
||||||
|
text: () => text |
||||||
|
}) |
||||||
|
clipboard.on('success', () => { |
||||||
|
clipboardSuccess(message) |
||||||
|
clipboard.destroy() |
||||||
|
}) |
||||||
|
clipboard.on('error', () => { |
||||||
|
clipboardError() |
||||||
|
clipboard.destroy() |
||||||
|
}) |
||||||
|
clipboard.onClick(event) |
||||||
|
} |
||||||
@ -0,0 +1,213 @@ |
|||||||
|
<template> |
||||||
|
<div class="wrap"> |
||||||
|
<div class="inner"> |
||||||
|
<div class="tool"> |
||||||
|
<el-input style="width: 250px" placeholder="请输入文件名称" v-model="keyword" suffix-icon="el-icon-search" clearable size="small"></el-input> |
||||||
|
<div class="action"> |
||||||
|
<el-upload :headers="{token}" :action="api.fileUpload" name="file" :limit="1" :show-file-list="false" :before-upload="beforeImport" :on-success="successImport"> |
||||||
|
<el-button type="primary" size="small">导入数据</el-button> |
||||||
|
</el-upload> |
||||||
|
<el-button style="margin-left: 10px;" type="danger" size="small" @click="delAll">批量删除</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<el-table :data="list" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange"> |
||||||
|
<el-table-column type="selection" width="80" align="center"></el-table-column> |
||||||
|
<el-table-column type="index" label="序号" width="55" align="center"></el-table-column> |
||||||
|
<el-table-column prop="fileName" label="文件名称" align="center"></el-table-column> |
||||||
|
<el-table-column prop="createTime" label="导入时间" align="center"></el-table-column> |
||||||
|
<el-table-column prop="fileSize" label="文件大小" width="120" align="center"></el-table-column> |
||||||
|
<el-table-column prop="fileFormat" label="格式" width="100" align="center"></el-table-column> |
||||||
|
<el-table-column label="文件路径" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{ scope.row.ossFileName }} |
||||||
|
<i class="el-icon-document-copy copy" @click="copy($event, scope.row)"></i> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column width="300" label="操作" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" @click="show(scope.row)">查看</el-button> |
||||||
|
<el-button type="text" @click="download(scope.row)">下载</el-button> |
||||||
|
<el-button type="text" @click="del(scope.row)">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="handleCurrentChange" :total="total"></el-pagination> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import util from '@/util' |
||||||
|
import clipboard from '@/util/clipboard' |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
token: util.getCookie('token'), |
||||||
|
list: [], |
||||||
|
multipleSelection: [], |
||||||
|
keyword: '', |
||||||
|
page: 1, |
||||||
|
pageSize: 10, |
||||||
|
total: 0 |
||||||
|
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
keyword: function(val) { |
||||||
|
clearTimeout(this.searchTimer) |
||||||
|
this.searchTimer = setTimeout(() => { |
||||||
|
this.initData() |
||||||
|
},500) |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 获取列表 |
||||||
|
getData() { |
||||||
|
this.$post(`${this.api.myData}?fileName=${this.keyword}&pageNum=${this.page}&pageSize=${this.pageSize}`).then(res => { |
||||||
|
const { data } = res |
||||||
|
this.list = data.records |
||||||
|
this.total = data.total |
||||||
|
}).catch(res => {}) |
||||||
|
}, |
||||||
|
// 初始化列表 |
||||||
|
initData() { |
||||||
|
this.page = 1 |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
// 导入前的钩子 |
||||||
|
beforeImport(file) { |
||||||
|
const { size, name } = file |
||||||
|
console.log(size, name) |
||||||
|
if (util.isVideo(name.substring(name.lastIndexOf('.') + 1))) { |
||||||
|
this.$message.error('不支持上传视频，请选择其他文件！') |
||||||
|
return false |
||||||
|
} |
||||||
|
if (size / 1000000 > 10) { |
||||||
|
this.$message.error('请上传10M以内的文件！') |
||||||
|
return false |
||||||
|
} |
||||||
|
}, |
||||||
|
// 导入数据成功 |
||||||
|
successImport(res) { |
||||||
|
const file = res.filesResult |
||||||
|
const name = file.originalFileName |
||||||
|
this.$post(this.api.importData, { |
||||||
|
fileFormat: file.fileType, |
||||||
|
fileName: name.substring(0, name.lastIndexOf('.')), |
||||||
|
filePath: file.fileUrl, |
||||||
|
fileSize: file.fileSize, |
||||||
|
ossFileName: file.ossFileName |
||||||
|
}).then(res => { |
||||||
|
this.$message.success('导入成功') |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}) |
||||||
|
}, |
||||||
|
// 批量删除 |
||||||
|
delAll() { |
||||||
|
if(this.multipleSelection.length){ |
||||||
|
const newArr = this.multipleSelection |
||||||
|
const delList = newArr.map(item => { |
||||||
|
return `ids=${item.id}` |
||||||
|
}) |
||||||
|
this.$confirm(`此批量删除操作不可逆，是否确认删除？`, '提示', { |
||||||
|
type: 'warning' |
||||||
|
}).then(() => { |
||||||
|
this.$post(`${this.api.batchDeletion}?${delList.join('&')}`).then(res => { |
||||||
|
this.$refs.table.clearSelection() |
||||||
|
this.$message.success('删除成功') |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}) |
||||||
|
}).catch(() => {}) |
||||||
|
}else{ |
||||||
|
this.$message.error('请先选择数据 ！') |
||||||
|
} |
||||||
|
}, |
||||||
|
// 复制 |
||||||
|
copy(e, row) { |
||||||
|
clipboard(row.filePath, e, '文件路径已复制！') |
||||||
|
}, |
||||||
|
// 查看 |
||||||
|
show(row) { |
||||||
|
window.open(row.filePath) |
||||||
|
}, |
||||||
|
// 下载 |
||||||
|
download(row) { |
||||||
|
util.downloadFile(row.fileName + '.' + row.fileFormat, row.filePath) |
||||||
|
}, |
||||||
|
// 删除 |
||||||
|
del(row) { |
||||||
|
this.$confirm('此删除操作不可逆，是否确认删除选中项？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}).then(() => { |
||||||
|
this.$post(`${this.api.batchDeletion}?ids=${row.id}`).then(res => { |
||||||
|
this.$message.success('删除成功') |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}) |
||||||
|
}).catch(() => {}) |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.page = val |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.wrap { |
||||||
|
padding: 20px; |
||||||
|
background-color: #f3f6fa; |
||||||
|
.inner { |
||||||
|
padding: 15px; |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
.tool { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
.action { |
||||||
|
display: inline-flex; |
||||||
|
} |
||||||
|
/deep/.el-table { |
||||||
|
.el-table__cell { |
||||||
|
padding: 10px 0; |
||||||
|
} |
||||||
|
th.el-table__cell { |
||||||
|
& > .cell { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.copy { |
||||||
|
margin-left: 5px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.pagination { |
||||||
|
margin: 20px 0; |
||||||
|
text-align: center; |
||||||
|
button,.number,.more,.el-input__inner{ |
||||||
|
min-width: 32px !important; |
||||||
|
height: 32px !important; |
||||||
|
line-height: 32px; |
||||||
|
color: #333 !important; |
||||||
|
background-color: transparent !important; |
||||||
|
border: 1px solid #ccc !important; |
||||||
|
border-radius: 2px !important; |
||||||
|
} |
||||||
|
button i{ |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
.active{ |
||||||
|
color: #fff !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue