|
|
@@ -10,26 +10,46 @@
|
|
|
<i class="el-icon-refresh" style="margin-left:16px" @click="queryAttachment(params.content.where.condition = '')"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div ref="ele" style="height:calc(100vh - 405px);overflow-y:scroll" class="container normal-panel">
|
|
|
- <el-row :gutter="10" class="folder-list">
|
|
|
- <el-col :span="3" v-for="folder in list" :key="folder.id">
|
|
|
- <div class="folder-item" :class="folder.ischeck?'checked':''">
|
|
|
- <el-checkbox v-show="folder.postfix !== 'FOLDER'" class="folder-checkbox" v-model="folder.ischeck" @change="onChange(folder)"></el-checkbox>
|
|
|
- <div @click.stop="folderDetails(folder)" class="img-panel">
|
|
|
- <img v-if="folder.postfix === 'DOC' || folder.postfix === 'DOCX'" src="../../../assets/file_icons/word.png" alt="">
|
|
|
- <img v-else-if="folder.postfix === 'PDF'" src="../../../assets/file_icons/PDF.png" alt="">
|
|
|
- <img v-else-if="folder.postfix === 'MP4' || folder.postfix === 'AVI'" src="../../../assets/file_icons/video.png" alt="">
|
|
|
- <img v-else-if="folder.postfix === 'XLS' || folder.postfix === 'XLSX'" src="../../../assets/file_icons/excel.png" alt="">
|
|
|
- <img v-else-if="folder.postfix === 'PNG' || folder.postfix === 'JPG'|| folder.postfix === 'JPEG'" src="../../../assets/file_icons/image.png" alt="">
|
|
|
- <img v-else-if="folder.postfix === 'PPT' || folder.postfix === 'PPTX'" src="../../../assets/file_icons/PPT.png" alt="">
|
|
|
- <img v-else-if="folder.postfix === 'FOLDER'" src="../../../assets/file_icons/folder.png" alt="">
|
|
|
- <img v-else src="../../../assets/file_icons/unknow.png" alt="">
|
|
|
+ <div ref="ele" style="height:calc(100vh - 255px);overflow-y:scroll" class="container normal-panel">
|
|
|
+ <div class="flex-align-center normal-margin">
|
|
|
+ <el-button v-if="fileRouter.length > 1" type="text" size="mini" class="inline-16" @click="toPreFile">返回上一级</el-button>
|
|
|
+ <div class="fileRouter__history" v-for="(route,index) in fileRouter" :key="route.index" @click="folderDetails(route,index)">{{route.document}} <span v-show="fileRouter.length - 1 !== index"> > </span> </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex-align-stretch flex-warp">
|
|
|
+ <div v-for="(folder) in list" :key="folder.id" class="folder-item" :class="folder.ischeck?'checked':''">
|
|
|
+ <el-checkbox class="folder-checkbox" v-model="folder.ischeck" @change="onChange(folder)"></el-checkbox>
|
|
|
+ <div @click.stop="folderDetails(folder)" class="img-panel">
|
|
|
+ <div class="image__item__panel" v-if="folder.postfix === 'DOC' || folder.postfix === 'DOCX'">
|
|
|
+ <img src="@/assets/file_icons/word.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="image__item__panel" v-else-if="folder.postfix === 'PDF'">
|
|
|
+ <img src="@/assets/file_icons/PDF.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="image__item__panel" v-else-if="folder.postfix === 'MP4' || folder.postfix === 'AVI'" >
|
|
|
+ <img src="@/assets/file_icons/video.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="image__item__panel" v-else-if="folder.postfix === 'XLS' || folder.postfix === 'XLSX'">
|
|
|
+ <img src="@/assets/file_icons/excel.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="image__item__panel" v-else-if="folder.postfix === 'PNG' || folder.postfix === 'JPG'|| folder.postfix === 'JPEG'" >
|
|
|
+ <img :src="folder.url" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="image__item__panel" v-else-if="folder.postfix === 'SVG'" >
|
|
|
+ <img src="@/assets/file_icons/image.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="image__item__panel" v-else-if="folder.postfix === 'PPT' || folder.postfix === 'PPTX'">
|
|
|
+ <img src="@/assets/file_icons/PPT.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="image__item__panel" v-else-if="folder.postfix === 'FOLDER'">
|
|
|
+ <img src="@/assets/file_icons/folder.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="image__item__panel" v-else >
|
|
|
+ <img src="@/assets/file_icons/unknow.png" alt="">
|
|
|
</div>
|
|
|
- <input v-if="folder.newfolder" type="text" v-model="folder.document" autofocus size="mini" @blur="changeFolderName(folder)">
|
|
|
- <p v-else>{{folder.document}}</p>
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ <p>{{folder.document}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div v-if="list.length === 0" class="flex-align-center" style="height:calc(100vh - 200px);justify-content:space-around">
|
|
|
<el-empty description="暂无文件,请点击左上角的“上传”按钮添加"></el-empty>
|
|
|
</div>
|
|
|
@@ -70,6 +90,10 @@ export default {
|
|
|
sort:[],
|
|
|
total:0,
|
|
|
currentPage:0,
|
|
|
+ fileRouter:[{
|
|
|
+ postfix:'FOLDER',
|
|
|
+ document:'全部文件'
|
|
|
+ }]
|
|
|
}
|
|
|
},
|
|
|
methods:{
|
|
|
@@ -101,9 +125,6 @@ export default {
|
|
|
this.params.content.pageNumber = val
|
|
|
this.queryAttachment(this.params.content.where.parentid)
|
|
|
},
|
|
|
- changeFolderName (folder) {
|
|
|
- this.$emit('onNameChange',folder)
|
|
|
- },
|
|
|
onChange (folder) {
|
|
|
let checkArray = []
|
|
|
this.list.forEach((e,index)=>{
|
|
|
@@ -113,16 +134,26 @@ export default {
|
|
|
})
|
|
|
this.$emit('folderChecked',checkArray)
|
|
|
},
|
|
|
- async folderDetails (folder) {
|
|
|
- event.stopPropagation();
|
|
|
+ async folderDetails (folder,index) {
|
|
|
+ console.log(folder,index)
|
|
|
if (folder.postfix === 'FOLDER') {
|
|
|
- this.$emit('toFolderDetail',folder.attachmentid)
|
|
|
+ if (index === undefined) {
|
|
|
+ let _isSame = this.fileRouter.some(m=>folder.attachmentid === m.attachmentid)
|
|
|
+ _isSame?'':this.fileRouter.push(folder)
|
|
|
+ } else {
|
|
|
+ this.fileRouter = this.fileRouter.slice(0,index + 1)
|
|
|
+ }
|
|
|
}
|
|
|
+ this.$emit('toFolderDetail',folder.attachmentid)
|
|
|
},
|
|
|
restChecked () {
|
|
|
this.list.forEach((e,index)=>{
|
|
|
e.ischeck = false
|
|
|
})
|
|
|
+ },
|
|
|
+ toPreFile () {
|
|
|
+ this.fileRouter.pop()
|
|
|
+ this.$emit('toFolderDetail',this.fileRouter.at(-1).attachmentid)
|
|
|
}
|
|
|
},
|
|
|
mounted () {
|
|
|
@@ -177,7 +208,7 @@ export default {
|
|
|
}
|
|
|
.img-panel {
|
|
|
width: 64px;
|
|
|
- /* height: 64px; */
|
|
|
+ height: 64px;
|
|
|
margin:0 auto;
|
|
|
text-align: center;
|
|
|
}
|
|
|
@@ -206,7 +237,70 @@ export default {
|
|
|
}
|
|
|
</style>
|
|
|
<style scoped>
|
|
|
+.folder-item {
|
|
|
+ position: relative;
|
|
|
+ width: 120px;
|
|
|
+ padding:10px 5px;
|
|
|
+ text-align: center;
|
|
|
+ color:#333;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ margin-left:30px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.flex-warp {
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+.folder-item p{
|
|
|
+ width: 100px;
|
|
|
+ margin:0 auto;
|
|
|
+ padding: 0 10px;
|
|
|
+ line-height: 25px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ /* margin-top:10px; */
|
|
|
+ word-break: break-all;
|
|
|
+
|
|
|
+ text-overflow: ellipsis;
|
|
|
+
|
|
|
+ display: -webkit-box;
|
|
|
+
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+
|
|
|
+ -webkit-line-clamp: 2; /* 这里是超出几行省略 */
|
|
|
+
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
.border-bottom{
|
|
|
border-bottom: 1px solid #f1f2f3;
|
|
|
}
|
|
|
+.image__item__panel{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ height: 64px;
|
|
|
+ width: 64px;
|
|
|
+ margin: 0 auto;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.image__item__panel img{
|
|
|
+ height: 70%;
|
|
|
+ max-width: 64px;
|
|
|
+}
|
|
|
+.op__panel{
|
|
|
+ display: none;
|
|
|
+ position: absolute;
|
|
|
+ right:0px;
|
|
|
+ top:0px;
|
|
|
+ padding: 0px 5px;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+.folder-item:hover .op__panel{
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+.fileRouter__history {
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 30px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
</style>
|