lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改分享管理界面

Browse Source
This commit is contained in:
jmal 2020-04-27 17:53:48 +08:00
parent a491db1844
commit 7ff888d65c
1 changed files with 83 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
src/views/share/index.vue
View File

@ -10,16 +10,20 @@
</div> </div>
</el-dialog> </el-dialog>
<!--list布局--> <!--list布局-->
<el-table <div v-show="fileList.length > 0" :style="{'width':'100%','height': clientHeight+'px'}">
v-show="fileList.length > 0" <pl-table
ref="fileListTable" ref="fileListTable"
v-loading="tableLoading" v-loading="tableLoading"
:max-height="clientHeight" :max-height="clientHeight"
:default-sort="sortable" :default-sort="sortable"
style="width: 100%;margin: 20px 0 0 0;" :highlight-current-row="false"
empty-text="无文件" empty-text="无文件"
:data="fileList" :datas="fileList"
row-key="id" :use-virtual="true"
:border="false"
:excess-rows="3"
:pagination-show="false"
style="width: 100%;margin: 20px 0 0 0;"
:cell-style="rowRed" :cell-style="rowRed"
:row-class-name="tableRowClassName" :row-class-name="tableRowClassName"
element-loading-text="文件加载中" element-loading-text="文件加载中"
@ -30,19 +34,20 @@
@cell-mouse-enter="cellMouseEnter" @cell-mouse-enter="cellMouseEnter"
@cell-mouse-leave="cellMouseLeave" @cell-mouse-leave="cellMouseLeave"
@sort-change="sortChange" @sort-change="sortChange"
@table-body-scroll="tableBodyScroll"
> >
<template v-for="(item,index) in tableHead"> <template v-for="(item,index) in tableHead">
<!--索引--> <!--索引-->
<el-table-column <pl-table-column
v-if="index === 0" v-if="index === 0"
:key="index" :key="index"
:index="index" :index="index"
type="selection" type="selection"
min-width="50" min-width="50"
> >
</el-table-column> </pl-table-column>
<!--图标--> <!--图标-->
<el-table-column <pl-table-column
v-if="index === 1" v-if="index === 1"
:prop="item.name" :prop="item.name"
:label="item.label" :label="item.label"
@ -59,9 +64,9 @@
<template slot-scope="scope"> <template slot-scope="scope">
<icon-file :item="scope.row" :image-url="imageUrl"></icon-file> <icon-file :item="scope.row" :image-url="imageUrl"></icon-file>
</template> </template>
</el-table-column> </pl-table-column>
<!--名称--> <!--名称-->
<el-table-column <pl-table-column
v-if="index === 2" v-if="index === 2"
:key="index" :key="index"
:show-overflow-tooltip="true" :show-overflow-tooltip="true"
@ -82,15 +87,15 @@
<template slot-scope="scope"> <template slot-scope="scope">
<span class="table-file-name">{{ scope.row.fileName }}</span> <span class="table-file-name">{{ scope.row.fileName }}</span>
</template> </template>
</el-table-column> </pl-table-column>
<!--取消分享--> <!--取消分享-->
<el-table-column v-if="index === 4" :key="index" width="50" :index="index" align="center" header-align="center" tooltip-effect="dark"> <pl-table-column v-if="index === 4" :key="index" width="50" :index="index" align="center" header-align="center" tooltip-effect="dark">
<template slot-scope="scope"> <template slot-scope="scope">
<svg-icon title="分享" v-if="scope.row.index === cellMouseIndex" class="button-class" icon-class="cancel-share" @click="cancelShare(scope.row)"/> <svg-icon title="分享" v-if="scope.row.index === cellMouseIndex" class="button-class" icon-class="cancel-share" @click="cancelShare(scope.row)"/>
</template> </template>
</el-table-column> </pl-table-column>
<!--时间--> <!--时间-->
<el-table-column <pl-table-column
v-if="index === 5" v-if="index === 5"
:key="index" :key="index"
width="250" width="250"
@ -106,9 +111,9 @@
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.createDate}}</span> <span>{{scope.row.createDate}}</span>
</template> </template>
</el-table-column> </pl-table-column>
<!--修改时间--> <!--修改时间-->
<el-table-column <pl-table-column
v-if="index === 6" v-if="index === 6"
:key="index" :key="index"
width="250" width="250"
@ -124,20 +129,21 @@
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.expireDate?scope.row.expireDate:'永久有效'}}</span> <span>{{scope.row.expireDate?scope.row.expireDate:'永久有效'}}</span>
</template> </template>
</el-table-column> </pl-table-column>
</template> </template>
</el-table> </pl-table>
</div>
<el-pagination <!--<el-pagination-->
background <!--background-->
layout="prev, pager, next" <!--layout="prev, pager, next"-->
:hide-on-single-page="true" <!--:hide-on-single-page="true"-->
:current-page.sync="pagination.pageIndex" <!--:current-page.sync="pagination.pageIndex"-->
:page-sizes="pagination.pageSizes" <!--:page-sizes="pagination.pageSizes"-->
:page-size="pagination.pageSize" <!--:page-size="pagination.pageSize"-->
:total="pagination.total" <!--:total="pagination.total"-->
@current-change="currentChange"> <!--@current-change="currentChange">-->
</el-pagination> <!--</el-pagination>-->
<empty-file <empty-file
v-if="fileList.length < 1 && !tableLoading" v-if="fileList.length < 1 && !tableLoading"
emptyStatus="您还没有分享历史哦~" emptyStatus="您还没有分享历史哦~"
@ -154,8 +160,14 @@
import { strlen, substring10, formatTime, formatSize } from '@/utils/number' import { strlen, substring10, formatTime, formatSize } from '@/utils/number'
import api from '@/api/file-api' import api from '@/api/file-api'
import Clipboard from 'clipboard'; import Clipboard from 'clipboard';
import 'pl-table/themes/index.css';
// import 'pl-table/themes/plTableStyle.css';
import { PlTable, PlTableColumn } from 'pl-table';
export default { export default {
components: { ShowFile, EmptyFile, IconFile }, components: { ShowFile, EmptyFile, IconFile,
PlTable,
PlTableColumn,
},
props: { props: {
emptyStatus: { emptyStatus: {
'type': String, 'type': String,
@ -214,7 +226,7 @@
fileList: [], fileList: [],
pagination: { pagination: {
pageIndex: 1, pageIndex: 1,
pageSize: 25, pageSize: 20,
total: 0, total: 0,
pageSizes: [10,20,30,40,50] pageSizes: [10,20,30,40,50]
}, },
@ -244,23 +256,12 @@
name: 'expireDate', label: '过期时间', sortable: 'custom', index: 6 name: 'expireDate', label: '过期时间', sortable: 'custom', index: 6
} }
], ],
isJustHideMenus: false,
menusIsMultiple: false,
menus: [],
rowContextData: {}, rowContextData: {},
selectRowData: [], selectRowData: [],
tableLoading: false, tableLoading: false,
newFolderLoading: false, finished: false,
renameLoading: false,
menuTriangle: '', // 三角菜单
cellMouseIndex: -1, cellMouseIndex: -1,
editingIndex: -1, editingIndex: -1,
directoryTreeProps: {
label: 'name',
children: 'children',
isLeaf: 'isLeaf'
},
allChecked: false,
shareDialog: false, shareDialog: false,
shareLink: '', shareLink: '',
shareFileName: '', shareFileName: '',
@ -272,8 +273,18 @@
this.getFileList() this.getFileList()
}, },
methods: { methods: {
getFileList() { // 请求之前的准备
beforeLoadData(onLoad){
if (onLoad) {
this.pagination.pageIndex++
} else {
this.pagination.pageIndex = 1
}
this.tableLoading = true this.tableLoading = true
this.finished = false
},
getFileList(onLoad) {
this.beforeLoadData(onLoad)
api.sharelist({ api.sharelist({
userId: this.$store.state.user.userId, userId: this.$store.state.user.userId,
sortableProp: this.sortable.prop, sortableProp: this.sortable.prop,
@ -281,27 +292,36 @@
pageIndex: this.pagination.pageIndex, pageIndex: this.pagination.pageIndex,
pageSize: this.pagination.pageSize pageSize: this.pagination.pageSize
}).then(res => { }).then(res => {
this.fileList = res.data if(onLoad){
this.fileList.map((item,index) => { res.data.forEach((file,number) => {
item.index = index file['index'] = (this.pagination.pageIndex - 1) * this.pagination.pageSize + number
}) this.fileList.push(file)
this.clientHeight = document.documentElement.clientHeight - 165 });
}else{
this.fileList = res.data
this.fileList.map((item,index) => {
item.index = index
})
}
// 数据全部加载完成
if (this.fileList.length >= res.count) {
this.finished = true;
}
this.tableLoading = false
this.clientHeight = document.documentElement.clientHeight - 80
this.pagination['total'] = res.count this.pagination['total'] = res.count
this.$nextTick(()=>{ this.$nextTick(()=>{
this.tableLoading = false this.tableLoading = false
}) })
}).catch(e => {}) }).catch(e => {})
}, },
currentChange(pageIndex) { tableBodyScroll(table, e) {
this.pagination.pageIndex = pageIndex this.fileListScrollTop = e.target.scrollTop
if (this.listModeSearch) { let scrollBottom = e.target.scrollHeight-e.target.clientHeight-e.target.scrollTop;
if(this.listModeSearchOpenDir){ if(scrollBottom < 200){
this.searchFileAndOpenDir(this.listModeSearchOpenDir) if(!this.finished){
}else{ this.getFileList(true)
this.searchFile(this.searchFileName)
} }
} else {
this.getFileList()
} }
}, },
sortChange(column) { sortChange(column) {
@ -346,11 +366,6 @@
itemDate.label = '过期时间' itemDate.label = '过期时间'
itemDate.sortable = 'custom' itemDate.sortable = 'custom'
} }
if(this.indexList.length === this.fileList.length){
this.allChecked = true
}else{
this.allChecked = false
}
}, },
// 统计文件和文件夹 // 统计文件和文件夹
getShowSumFileAndFolder(fileList) { getShowSumFileAndFolder(fileList) {
@ -523,5 +538,11 @@
font-size: 16px; font-size: 16px;
visibility: hidden; visibility: hidden;
} }
/deep/.plTableBox .el-table .el-table__header th {
background-color: #FFFFFF;
}
/deep/.el-table td {
height: 50px!important;
}
</style> </style>