|
|
@@ -7,6 +7,7 @@ |
|
|
|
{{ file.name }} |
|
|
|
</span> |
|
|
|
<div class="h-4 space-x-2"> |
|
|
|
<button class="el-icon-view color-blue" @click="hanlePreview(file)" title="点击预览"></button> |
|
|
|
<button class="el-icon-download color-blue" @click="handleDownload(file)" title="点击下载"></button> |
|
|
|
<button class="el-icon-delete color-red" v-if="!detailMode" @click="handleDelete(file)" title="点击删除"></button> |
|
|
|
</div> |
|
|
@@ -17,15 +18,8 @@ |
|
|
|
<div class="top-search"> |
|
|
|
<transition name="fade" mode="out-in"> |
|
|
|
<button v-if="!showSearchInput" class="el-icon-search search-btn" @click="handleSearchClick"></button> |
|
|
|
<el-input |
|
|
|
v-else |
|
|
|
size="mini" |
|
|
|
placeholder="请输入关键字" |
|
|
|
clearable |
|
|
|
@keydown.enter.native="showSearchInput = false" |
|
|
|
@keydown.esc.stop.native="showSearchInput = false" |
|
|
|
v-model="searchCondition" |
|
|
|
/> |
|
|
|
<el-input v-else size="mini" placeholder="请输入关键字" clearable @keydown.enter.native="showSearchInput = false" |
|
|
|
@keydown.esc.stop.native="showSearchInput = false" v-model="searchCondition" /> |
|
|
|
</transition> |
|
|
|
</div> |
|
|
|
|
|
|
@@ -77,6 +71,34 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
hanlePreview(file) { |
|
|
|
// 加载图片 |
|
|
|
this.$http |
|
|
|
.get("/pms/attachment/downloadFile", { |
|
|
|
params: { |
|
|
|
attachmentId: file.id, |
|
|
|
type: 0, // 0 预览,1 下载 |
|
|
|
}, |
|
|
|
responseType: "blob", |
|
|
|
}) |
|
|
|
.then(({ data: res }) => { |
|
|
|
console.log("preivew", res); |
|
|
|
if (/image/i.test(res.type) || /pdf/i.test(res.type)) { |
|
|
|
let a = document.createElement('a') |
|
|
|
a.setAttribute('target', '_blank') |
|
|
|
a.href = URL.createObjectURL(res) |
|
|
|
a.click() |
|
|
|
a.remove() |
|
|
|
} else { |
|
|
|
this.$message({ |
|
|
|
message: "非图片和PDF文件请下载后预览", |
|
|
|
type: "error", |
|
|
|
duration: 1500, |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
}, |
|
|
|
handleDownload(file) { |
|
|
|
console.log("[FileList] handleDownload", file); |
|
|
|
this.$http |
|
|
@@ -153,7 +175,7 @@ li { |
|
|
|
list-style: none; |
|
|
|
} |
|
|
|
|
|
|
|
.filelist > li { |
|
|
|
.filelist>li { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
@@ -178,12 +200,15 @@ li { |
|
|
|
::-webkit-scrollbar { |
|
|
|
width: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
|
width: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
::-webkit-scrollbar-button { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
|
background: rgb(175, 175, 175); |
|
|
|
border-radius: 4px; |
|
|
@@ -193,6 +218,7 @@ li { |
|
|
|
color: #0b58ff; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
.color-red { |
|
|
|
color: rgba(222, 15, 15, 0.89); |
|
|
|
cursor: pointer; |
|
|
|