修改:文件界面顶部加上排序下拉框

This commit is contained in:
jmal 2021-01-15 22:43:55 +08:00
parent 6ce4437911
commit eb2eb04fe8
9 changed files with 67 additions and 15 deletions

View File

@ -1,6 +1,6 @@
{
"name": "jmal-cloud-view",
"version": "2.0.0",
"version": "2.0.1",
"description": "jmal cloud",
"author": "Jmal <zhushilun084@163.com>",
"license": "MIT",

View File

@ -5,7 +5,7 @@
import { Icon } from 'ant-design-vue'
const IconFont = Icon.createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_2024484_3jr9049cc2f.js'
scriptUrl: '//at.alicdn.com/t/font_2024484_enjqo8y5nla.js'
})
export default {

View File

@ -43,7 +43,7 @@
</el-breadcrumb-item>
</transition-group>
<div class="search-content">
<div class="searchClass">
<div class="search-class">
<el-popover
v-show="showUploadButton"
v-model="isShowNewFolder"
@ -69,7 +69,7 @@
<li v-if="singleFileType === ''" @click.prevent="newDocument">
<a href="#" class="menuitem">
<svg-icon icon-class="md"/>
<span class="menuitem text">新建文档</span>
<span class="menuitem text">写文章</span>
</a>
</li>
<li v-if="singleFileType === ''" @click.prevent="newFolder">
@ -105,8 +105,33 @@
<svg-icon icon-class="search" style="font-size: 22px"/>
</el-button>
</el-input>
<el-button class="vmode" @click="changeVmode">
<svg-icon :icon-class="grid ? 'menu-list' : 'menu-grid'"/>
<el-dropdown size="medium" style="height: 40px;" @command="contextmenuClick">
<el-button type="text" class="sort">
<svg-icon icon-class="sort"/>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="orderName">
<span :class="{'al-file-sort-item': true, 'active': sortable.prop === 'name'}">
<i :class="{'al-file-sort-item-icon': true, 'el-icon-top': sortable.order === 'ascending', 'el-icon-bottom': sortable.order === 'descending'}"></i>
<span>名称</span>
</span>
</el-dropdown-item>
<el-dropdown-item command="orderSize">
<span :class="{'al-file-sort-item': true, 'active': sortable.prop === 'size'}">
<i :class="{'al-file-sort-item-icon': true, 'el-icon-top': sortable.order === 'ascending', 'el-icon-bottom': sortable.order === 'descending'}"></i>
<span>大小</span>
</span>
</el-dropdown-item>
<el-dropdown-item command="orderUpdateDate">
<span :class="{'al-file-sort-item': true, 'active': sortable.prop === 'updateDate'}">
<i :class="{'al-file-sort-item-icon': true, 'el-icon-top': sortable.order === 'ascending', 'el-icon-bottom': sortable.order === 'descending'}"></i>
<span>日期</span>
</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-button type="text" class="vmode" @click="changeVmode">
<svg-icon :icon-class="grid ? 'list' : 'grid'"/>
</el-button>
</div>
</div>
@ -1670,7 +1695,7 @@ export default {
that.newTextFileDialog = false
}, 200)
}).catch(() => {
this.createTextFileLoading = false
})
}
@ -1736,6 +1761,8 @@ export default {
}
})
}
// 加载顶部的排序下拉框
},
// 请求之前的准备
beforeLoadData(onLoad) {
@ -1948,8 +1975,10 @@ export default {
}
},
addClass(el, className) {
const str = el.className
el.className = el.className + " " + className
if(el){
const str = el.className
el.className = el.className + " " + className
}
},
getSummaries(param) {
// 合计
@ -2358,7 +2387,7 @@ export default {
this.sortChangeOfMenu('size', 5)
break
case 'orderUpdateDate':
this.sortChangeOfMenu('update', 6)
this.sortChangeOfMenu('updateDate', 6)
break
case 'refresh':
this.getFileList()

View File

@ -104,6 +104,13 @@ new Vue({
store,
render: h => h(App),
})
import config from '../package.json'
console.log(
`%c jmal-cloud-view %c v${config.version} %c`,
'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px; color: #fff',
'background:#409eff ; padding: 1px; border-radius: 0 3px 3px 0; color: #fff',
'background:transparent'
)
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
Vue.prototype.$pc = false

View File

@ -191,7 +191,7 @@
color: "#19ACF9"
}
.searchClass{
.search-class{
float: right;
width: 40%;
display: flex;
@ -199,10 +199,14 @@
.el-input {
width: 235px;
}
.vmode{
.sort{
padding: 5px 10px;
margin-left: 5px;
}
.vmode{
padding: 5px 10px;
margin-left: -5px;
}
}
//.grid {

View File

@ -159,3 +159,16 @@ div:focus {
width: 6px!important;
}
}
.al-file-sort-item {
.al-file-sort-item-icon {
font-weight: 600;
}
}
.al-file-sort-item.active {
color: #40a9ff;
}
.al-file-sort-item:not(.active) .al-file-sort-item-icon {
visibility: hidden;
}

View File

@ -33,8 +33,8 @@ export default {
},
{ label: '刷新', operation: 'refresh'},
{ divider: true, operation: 'divider' },
{ label: '写文章', operation: 'createMarkdownFile'},
{ label: '新建文件', operation: 'createTextFile'},
{ label: '新建文档', operation: 'createMarkdownFile'},
]
}
},

View File

@ -39,7 +39,7 @@ export default {
return {
title: '网盘管理',
syncLoading: false,
webpEnabled: false
webpEnabled: true
}
},
mounted() {

View File

@ -245,7 +245,6 @@ export default {
// 分配权限
authorization(roleId) {
const req = require.context('@/icons/svg', false, /\.svg$/)
console.log(req)
this.dialogAuthVisible = true
const findIndex = this.dataList.findIndex(data => data.id === roleId)
const role = this.dataList[findIndex]