添加grid布局
This commit is contained in:
jmal
parent
99703156f9
commit
fe9673dc1c
@ -33,6 +33,7 @@
|
||||
"vant": "^2.5.0",
|
||||
"vonic": "^1.1.3",
|
||||
"vue": "2.6.10",
|
||||
"vue-grid-layout": "^2.3.7",
|
||||
"vue-router": "3.0.6",
|
||||
"vue-simple-uploader": "^0.7.4",
|
||||
"vue-touch": "^2.0.0-beta.4",
|
||||
|
||||
@ -1,17 +1,36 @@
|
||||
<template>
|
||||
<span>
|
||||
<svg-icon v-if="pc && item.isFavorite" icon-class="menu-favorite-hover" style="font-size: 1rem;float: right;margin-left: 1rem;position: absolute;" />
|
||||
<svg-icon v-if="!pc && item.isFavorite" icon-class="menu-favorite-hover" style="font-size: 0.5rem;float: right;margin-left: 2rem;position: absolute;" />
|
||||
<svg-icon v-if="item.isFolder" icon-class="folder" />
|
||||
<svg-icon v-else-if="item.contentType.indexOf('video') > -1" icon-class="video" />
|
||||
<svg-icon v-else-if="item.contentType.indexOf('audio') > -1" icon-class="audio" />
|
||||
<svg-icon v-else-if="item.contentType.indexOf('text') > -1" icon-class="file-txt" />
|
||||
<el-avatar v-else-if="item.contentType.indexOf('image') > -1" shape="square" :src="imageUrl+item.id"></el-avatar>
|
||||
<svg-icon v-else-if="item.contentType.indexOf('application/pdf') > -1" icon-class="file-pdf" />
|
||||
<svg-icon v-else-if="item.contentType.indexOf('word') > -1" icon-class="file-word" />
|
||||
<svg-icon v-else-if="item.contentType.indexOf('zip') > -1" icon-class="zip" />
|
||||
<svg-icon v-else-if="item.contentType.indexOf('excel') > -1" icon-class="file-excel" />
|
||||
<svg-icon v-else icon-class="file" />
|
||||
<div v-if="item.isFavorite">
|
||||
<div v-if="pc">
|
||||
<svg-icon v-if="!grid" icon-class="menu-favorite-hover"
|
||||
style="font-size: 1rem;float: right;margin-left: 1rem;position: absolute;"/>
|
||||
<svg-icon v-if="grid" icon-class="menu-favorite-hover"
|
||||
style="font-size: 1.5rem;right: 0;top: -1rem;position: absolute;z-index: 1;"/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<svg-icon v-if="!grid" icon-class="menu-favorite-hover"
|
||||
style="font-size: 0.5rem;float: right;margin-left: 2rem;position: absolute;"/>
|
||||
<svg-icon v-if="grid" icon-class="menu-favorite-hover"
|
||||
style="font-size: 1rem;right: 0;top: -1rem;position: absolute;z-index: 1;"/>
|
||||
</div>
|
||||
</div>
|
||||
<svg-icon v-if="item.isFolder" icon-class="folder"/>
|
||||
<svg-icon v-else-if="item.contentType.indexOf('video') > -1" icon-class="video"/>
|
||||
<svg-icon v-else-if="item.contentType.indexOf('audio') > -1" icon-class="audio"/>
|
||||
<svg-icon v-else-if="item.contentType.indexOf('text') > -1" icon-class="file-txt"/>
|
||||
<div v-else-if="item.contentType.indexOf('image') > -1">
|
||||
<el-image v-if="grid" style="width: 80px;height: 80px;" fit="contain" :src="imageUrl+item.id">
|
||||
<div slot="error" class="image-slot">
|
||||
<svg-icon icon-class="loading-image-error"/>
|
||||
</div>
|
||||
</el-image>
|
||||
<el-avatar v-if="!grid" shape="square" :src="imageUrl+item.id"></el-avatar>
|
||||
</div>
|
||||
<svg-icon v-else-if="item.contentType.indexOf('application/pdf') > -1" icon-class="file-pdf"/>
|
||||
<svg-icon v-else-if="item.contentType.indexOf('word') > -1" icon-class="file-word"/>
|
||||
<svg-icon v-else-if="item.contentType.indexOf('zip') > -1" icon-class="zip"/>
|
||||
<svg-icon v-else-if="item.contentType.indexOf('excel') > -1" icon-class="file-excel"/>
|
||||
<svg-icon v-else icon-class="file"/>
|
||||
</span>
|
||||
</template>
|
||||
<script>
|
||||
@ -22,9 +41,13 @@
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
grid: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
default: function () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
@ -36,8 +59,7 @@
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
1
src/icons/svg/loading-image-error.svg
Normal file
1
src/icons/svg/loading-image-error.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1584339268975" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1230" width="32" height="32"><path d="M797.6 96h-584c-13.6 0-24 10.4-24 24v464c0 12.8 11.2 24 24 24h372.8c-4.8-3.2-8.8-7.2-12.8-11.2-3.2-2.4-5.6-5.6-8.8-8.8l-3.2-3.2c-3.2-3.2-5.6-6.4-8.8-10.4l-1.6-1.6c-20-27.2-32-60.8-32-96.8 0-83.2 63.2-152 144.8-163.2-20-27.2-43.2-45.6-72.8-45.6-80.8 0-67.2 96-139.2 103.2-72 8-83.2-140.8-136-153.6-36.8-8.8-73.6 36.8-92 64.8V130.4h561.6V344c13.6 9.6 24.8 20.8 35.2 33.6V120c0.8-13.6-9.6-24-23.2-24z m-92.8 402.4c0 10.4-7.2 19.2-17.6 19.2-10.4 0-17.6-8.8-17.6-19.2l-4.8-95.2c0-10.4 12-19.2 22.4-19.2s22.4 8.8 22.4 19.2l-4.8 95.2zM688 568.8c-10.4 0-19.2-8.8-19.2-18.4 0-10.4 8.8-19.2 19.2-19.2s19.2 8.8 19.2 19.2c0 9.6-8.8 18.4-19.2 18.4z m0-224c-74.4 0-134.4 59.2-134.4 131.2 0 73.6 60 132 134.4 132s134.4-59.2 134.4-131.2c-0.8-72.8-60.8-132-134.4-132z" fill="#CCCCCC" p-id="1231"></path><path d="M54.4 783.2l11.2 1.6c-1.6 3.2-2.4 6.4-4.8 9.6h45.6v8.8c-4.8 9.6-12 17.6-22.4 24 12 5.6 24.8 10.4 40 13.6l-6.4 9.6c-16.8-4.8-31.2-10.4-43.2-16.8-13.6 7.2-29.6 12.8-49.6 17.6l-5.6-10.4c17.6-3.2 32.8-8 45.6-13.6-6.4-4.8-12.8-9.6-17.6-14.4-5.6 4.8-11.2 9.6-17.6 13.6l-7.2-8.8c15.2-9.6 26.4-20.8 32-34.4z m20 39.2c8.8-5.6 15.2-11.2 20-18.4h-40c-0.8 0.8-1.6 1.6-1.6 2.4 6.4 5.6 13.6 10.4 21.6 16zM40 868.8c23.2 4 45.6 10.4 66.4 18.4l-4 10.4c-21.6-8-44-14.4-67.2-19.2l4.8-9.6z m18.4-24c13.6 4.8 26.4 10.4 37.6 16l-5.6 8.8c-12-7.2-24-12.8-37.6-16.8l5.6-8z m83.2-76v152h-12v-7.2H12v7.2H0v-152h141.6zM12 902.4h117.6V780H12v122.4z m200-83.2v10.4c0 6.4-0.8 12.8-0.8 18.4H292v72.8h-12.8V860h-69.6c-4 26.4-13.6 46.4-28.8 60l-9.6-8c18.4-17.6 27.2-44.8 28-82.4v-64H212v41.6h51.2v-46.4h12v46.4h39.2v12H212z m278.4-32.8v131.2h-12v-12h-32.8v12h-12V786.4h56.8z m-44.8 108h32.8v-96h-32.8v96z m-76-132.8h12.8v35.2h35.2c0 54.4-0.8 88-2.4 100.8-1.6 14.4-10.4 21.6-25.6 21.6-2.4 0-7.2 0-13.6-0.8l-3.2-11.2c5.6 0 10.4 0.8 14.4 0.8 8.8 0 14.4-4.8 15.2-15.2 0.8-8.8 1.6-36.8 2.4-84h-23.2c-0.8 51.2-12 88.8-34.4 112l-9.6-8c20-21.6 30.4-56.8 31.2-104h-28v-12h28v-35.2h0.8z m155.2 13.6h33.6V760h12v14.4h31.2v11.2h-31.2v16H612c-0.8-12.8-0.8-27.2-0.8-42.4H624c0 16 0 29.6 0.8 42.4h44v11.2h-43.2c0.8 15.2 2.4 28 4 37.6 0.8 4.8 2.4 9.6 3.2 14.4 6.4-12.8 11.2-27.2 15.2-43.2l11.2 4.8c-5.6 21.6-12.8 40-21.6 54.4 1.6 4 3.2 7.2 4.8 10.4 4.8 8.8 8 12.8 11.2 12.8 2.4 0 5.6-9.6 7.2-28l10.4 5.6c-4 23.2-9.6 34.4-16.8 34.4-5.6 0-12-5.6-19.2-16-1.6-3.2-4-6.4-4.8-9.6-8.8 12-19.2 20.8-30.4 27.2l-6.4-10.4c12.8-7.2 23.2-16.8 32-30.4-2.4-8-4.8-16-6.4-25.6-2.4-11.2-4-24.8-5.6-40.8H516v-11.2h43.2v-16h-33.6v-8h-0.8z m116.8-12.8c8.8 9.6 15.2 18.4 20 25.6l-9.6 6.4c-4.8-8-12-16.8-20-26.4l9.6-5.6z m-39.2 122.4V896c-8.8 0.8-17.6 2.4-27.2 3.2V920h-12v-19.2c-12.8 1.6-25.6 2.4-40 3.2l-1.6-12c14.4-0.8 28-1.6 41.6-3.2v-15.2h-33.6l-2.4-10.4c4.8-5.6 9.6-12.8 13.6-21.6h-19.2v-11.2h24c1.6-4 3.2-8.8 4.8-13.6l12 2.4c-1.6 4-2.4 7.2-4 11.2H604v11.2h-50.4c-4 8-8 15.2-12 21.6H564v-13.6h12v13.6h26.4v10.4H576V888c8.8-0.8 18.4-2.4 26.4-3.2z m120-120l12 4.8c-2.4 8-5.6 15.2-9.6 22.4H760v-30.4h12.8V792h58.4v12h-58.4v11.2c0 8-0.8 16-2.4 23.2h72v12h-64.8c8.8 24.8 31.2 44.8 67.2 58.4l-7.2 11.2c-37.6-16-61.6-38.4-71.2-66.4-3.2 11.2-8 21.6-14.4 29.6-12 16-32 28-59.2 36.8l-6.4-10.4c27.2-8.8 46.4-20.8 56.8-35.2 4.8-7.2 8-15.2 10.4-24h-64.8v-12H756c1.6-7.2 2.4-15.2 2.4-23.2V804h-41.6c-6.4 10.4-12.8 19.2-20.8 25.6l-10.4-9.6c17.6-13.6 28.8-32 36.8-55.2zM963.2 800c-0.8 1.6-1.6 4-1.6 5.6 2.4 23.2 8.8 43.2 18.4 60.8 8.8-18.4 14.4-40.8 14.4-66.4h-31.2z m-9.6 24c-3.2 6.4-7.2 12-11.2 16.8l-7.2-9.6c12.8-16.8 20.8-40.8 24-71.2l12 1.6c-1.6 9.6-3.2 18.4-4.8 26.4h51.2v12h-11.2c-0.8 30.4-7.2 56-19.2 77.6 8.8 12 20 22.4 33.6 31.2l-6.4 12c-13.6-8.8-24-19.2-33.6-32-8.8 12.8-20 23.2-32.8 32l-6.4-11.2c13.6-8 24-19.2 32-31.2-9.6-16-16.8-34.4-20-54.4zM932 768v108.8h-12v-97.6h-41.6V876h-11.2V768H932z m-20 113.6c9.6 9.6 18.4 19.2 24.8 28.8l-9.6 8.8c-5.6-9.6-13.6-19.2-24-29.6l8.8-8z m-17.6-88.8h11.2v52.8c0 20-3.2 36-8.8 48-5.6 11.2-15.2 20-28 26.4l-6.4-10.4c12-5.6 20.8-13.6 25.6-24s7.2-24 7.2-40v-52.8h-0.8z" fill="#9B9B9B" p-id="1232"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
1
src/icons/svg/menu-grid.svg
Normal file
1
src/icons/svg/menu-grid.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1584183590713" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="848" width="32" height="32"><path d="M384 128h-170.666667a85.333333 85.333333 0 0 0-85.333333 85.333333v170.666667a85.333333 85.333333 0 0 0 85.333333 85.333333h170.666667a85.333333 85.333333 0 0 0 85.333333-85.333333v-170.666667a85.333333 85.333333 0 0 0-85.333333-85.333333z m-170.666667 256v-170.666667h170.666667v170.666667z" p-id="849"></path><path d="M810.666667 128h-170.666667a85.333333 85.333333 0 0 0-85.333333 85.333333v170.666667a85.333333 85.333333 0 0 0 85.333333 85.333333h170.666667a85.333333 85.333333 0 0 0 85.333333-85.333333v-170.666667a85.333333 85.333333 0 0 0-85.333333-85.333333z m-170.666667 256v-170.666667h170.666667v170.666667z" p-id="850"></path><path d="M384 554.666667h-170.666667a85.333333 85.333333 0 0 0-85.333333 85.333333v170.666667a85.333333 85.333333 0 0 0 85.333333 85.333333h170.666667a85.333333 85.333333 0 0 0 85.333333-85.333333v-170.666667a85.333333 85.333333 0 0 0-85.333333-85.333333z m-170.666667 256v-170.666667h170.666667v170.666667z" p-id="851"></path><path d="M810.666667 554.666667h-170.666667a85.333333 85.333333 0 0 0-85.333333 85.333333v170.666667a85.333333 85.333333 0 0 0 85.333333 85.333333h170.666667a85.333333 85.333333 0 0 0 85.333333-85.333333v-170.666667a85.333333 85.333333 0 0 0-85.333333-85.333333z m-170.666667 256v-170.666667h170.666667v170.666667z" p-id="852"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
1
src/icons/svg/menu-list.svg
Normal file
1
src/icons/svg/menu-list.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1584183645708" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="990" width="32" height="32"><path d="M287.957333 192.426667h-64C206.314667 192.426667 192 206.72 192 224.341333v63.914667c0 17.621333 14.293333 31.914667 31.957333 31.914667h64c17.642667 0 31.957333-14.293333 31.957334-31.914667v-63.914667c0-17.621333-14.293333-31.914667-31.957334-31.914666z m0 255.573333h-64C206.314667 448 192 462.293333 192 479.914667v63.914666c0 17.621333 14.293333 31.914667 31.957333 31.914667h64c17.642667 0 31.957333-14.293333 31.957334-31.914667v-63.914666c0-17.621333-14.293333-31.914667-31.957334-31.914667z m0 255.573333h-64c-17.642667 0-31.957333 14.293333-31.957333 31.914667v63.914667c0 17.621333 14.293333 31.914667 31.957333 31.914666h64c17.642667 0 31.957333-14.293333 31.957334-31.914666v-63.914667c0-17.621333-14.293333-31.914667-31.957334-31.914667z m127.914667-415.317333h383.829333a31.936 31.936 0 1 0 0-63.829333H415.872a31.936 31.936 0 1 0 0 63.829333z m383.829333 191.658667H415.872a31.936 31.936 0 1 0 0 63.829333h383.829333a31.936 31.936 0 1 0 0-63.829333z m0 255.573333H415.872a31.936 31.936 0 1 0 0 63.829333h383.829333a31.936 31.936 0 1 0 0-63.829333z" p-id="991"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -15,7 +15,7 @@ import router from './router'
|
||||
import VueWechatTitle from 'vue-wechat-title'
|
||||
// import WeVue from 'we-vue'
|
||||
// import 'we-vue/lib/style.css'
|
||||
import { Button, Cell, CellGroup, Image, List, PullRefresh, SwipeCell, Col, Row, Divider, Sticky, NavBar, Icon, Tabbar, TabbarItem, ActionSheet, Field, Overlay, Checkbox, CheckboxGroup} from 'vant';
|
||||
import { Button, Cell, CellGroup, Image, List, PullRefresh, SwipeCell, Col, Row, Divider, Sticky, NavBar, Icon, Tabbar, TabbarItem, ActionSheet, Field, Overlay, Checkbox, CheckboxGroup, Grid, GridItem} from 'vant';
|
||||
|
||||
// mavonEditor
|
||||
import mavonEditor from 'mavon-editor'
|
||||
@ -70,6 +70,8 @@ Vue.use(Field);
|
||||
Vue.use(Overlay);
|
||||
Vue.use(Checkbox);
|
||||
Vue.use(CheckboxGroup);
|
||||
Vue.use(Grid);
|
||||
Vue.use(GridItem);
|
||||
|
||||
Vue.use(mavonEditor);
|
||||
|
||||
|
||||
322
src/styles/home-index.scss
Normal file
322
src/styles/home-index.scss
Normal file
@ -0,0 +1,322 @@
|
||||
.dashboard {
|
||||
&-container {
|
||||
min-width: 500px;
|
||||
margin: 10px 10px 10px 15px;
|
||||
}
|
||||
&-text {
|
||||
font-size: 30px;
|
||||
line-height: 46px;
|
||||
}
|
||||
}
|
||||
|
||||
.redirect {
|
||||
color: #97a8be;
|
||||
}
|
||||
.no-redirect {
|
||||
color: #000000;
|
||||
cursor: text;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/deep/ .el-breadcrumb__separator {
|
||||
margin: 0 0;
|
||||
font-weight: 700;
|
||||
color: #C0C4CC;
|
||||
}
|
||||
|
||||
.el-breadcrumb {
|
||||
font-size: 1rem;
|
||||
line-height: 46px;
|
||||
}
|
||||
|
||||
.button-class {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button-class:hover {
|
||||
border-radius: 5px;
|
||||
background-color: #409eff14;
|
||||
}
|
||||
|
||||
.newFileMenu ul {
|
||||
list-style: none;
|
||||
padding-inline-start: 0px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.newFileMenu li {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
min-width: 136px;
|
||||
}
|
||||
.newFileMenu li:hover {
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
/*background-color: #409eff14;*/
|
||||
background-color: #409eff30;
|
||||
}
|
||||
.newFileMenu li > .menuitem {
|
||||
cursor: pointer;
|
||||
line-height: 38px;
|
||||
margin-left: 10%;
|
||||
}
|
||||
.newFileMenu li > .menuitem > .text {
|
||||
cursor: pointer;
|
||||
margin-left: 8%;font-weight: normal;
|
||||
}
|
||||
.newFileMenu li > .menuitem > .svg-icon {
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
}
|
||||
/deep/ .el-input-group__append /deep/ .el-loading-spinner {
|
||||
top: 0;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
/deep/ .cell /deep/ .el-loading-spinner {
|
||||
top: 0;
|
||||
margin-top: 0.54rem;
|
||||
}
|
||||
/deep/ .cell /deep/ .el-button {
|
||||
padding: 8px 16px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
/deep/ .el-checkbox {
|
||||
cursor: default;
|
||||
}
|
||||
/deep/ .el-checkbox__input {
|
||||
cursor: default;
|
||||
}
|
||||
.el-button.is-circle {
|
||||
border-radius: 50%;
|
||||
padding: 9px;
|
||||
}
|
||||
/deep/.svg-icon {
|
||||
font-size: 28px;
|
||||
}
|
||||
/deep/.el-table thead {
|
||||
color: #4f4f50;
|
||||
}
|
||||
/deep/ .el-table thead .el-table-column--selection .cell {
|
||||
padding-left: 15px;
|
||||
}
|
||||
/deep/.el-table .cell {
|
||||
padding-right: 5px;
|
||||
}
|
||||
/deep/.el-table th {
|
||||
padding: 0 0;
|
||||
}
|
||||
/deep/.el-table td{
|
||||
padding: 1px 0;
|
||||
height: 50px;
|
||||
}
|
||||
/deep/.el-table__header tr, .el-table__header th {
|
||||
height: 40px;
|
||||
}
|
||||
/deep/.el-avatar>img {
|
||||
display: inherit;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
/deep/.el-avatar {
|
||||
background: #ffffff;
|
||||
margin: 7px 0 0 0;
|
||||
}
|
||||
/deep/.el-avatar {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
/deep/ .ctx-menu-container {
|
||||
border: 0 solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.menu-triangle-bottom {
|
||||
border: 0 solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.menu-triangle-bottom::after {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: '';
|
||||
bottom: -6px;
|
||||
left: 74px;
|
||||
border-style: solid;
|
||||
border-width: 6px;
|
||||
border-color: #fff #fff transparent transparent;
|
||||
-webkit-transform: rotate(135deg);
|
||||
transform: rotate(135deg);
|
||||
-webkit-box-shadow: 1px -1px 1px #cccccc73;
|
||||
box-shadow: 1px -1px 1px #cccccc73;
|
||||
}
|
||||
|
||||
.menu-triangle-top {
|
||||
border: 0 solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.menu-triangle-top::after {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: '';
|
||||
top: -6px;
|
||||
left: 74px;
|
||||
border-style: solid;
|
||||
border-width: 6px;
|
||||
border-color: #fff #fff #e0000000 white;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
-webkit-box-shadow: 1px -1px 1px #cccccc73;
|
||||
box-shadow: -1px -1px 1px #cccccc73;
|
||||
}
|
||||
/*解决合计不显示的问题*/
|
||||
/deep/
|
||||
.el-table__footer-wrapper{
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
/deep/ .el-table__row /deep/.table-file-name:hover {
|
||||
cursor: 'pointer';
|
||||
color: "#19ACF9"
|
||||
}
|
||||
|
||||
.searchClass{
|
||||
float: right;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
//.grid {
|
||||
// border-left: 1px solid #0c7cd5;
|
||||
//}
|
||||
|
||||
.el-pagination {
|
||||
float: right;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
/deep/ .el-dialog__header {
|
||||
padding: 20px 20px 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/deep/ .el-dialog__title {
|
||||
font-size: 16px;
|
||||
}
|
||||
/deep/ .el-dialog__body {
|
||||
padding: 0 20px 0 20px;
|
||||
}
|
||||
/deep/ .el-tree-node__content {
|
||||
height: 35px;
|
||||
/*border-bottom: 1px solid #ccc;*/
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/deep/ .custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
/deep/ .el-tree-node.is-expanded>.el-tree-node__children {
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/deep/ .drag-parent-class {
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
margin: 0;
|
||||
display: none;
|
||||
/*-webkit-transition: all .1s ease-in-out 0s;*/
|
||||
/*transition: all .1s ease-in-out 0s;*/
|
||||
}
|
||||
|
||||
/deep/ .drag-parent-class .el-table {
|
||||
background-color: #66cc66;
|
||||
}
|
||||
|
||||
/deep/ .drag-parent-class .el-table tr {
|
||||
background-color: #66cc66;
|
||||
}
|
||||
|
||||
/deep/.van-grid-item__text {
|
||||
text-align: center;
|
||||
color: #646566;
|
||||
font-size: 12px;
|
||||
word-wrap: break-word;
|
||||
width: -webkit-fill-available;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/deep/ .van-grid {
|
||||
padding: 20px 0 0 20px;
|
||||
}
|
||||
|
||||
/deep/ .van-grid-item__content .svg-icon{
|
||||
font-size: 4rem;
|
||||
}
|
||||
/deep/ .grid-item-text {
|
||||
text-align: center;
|
||||
color: #606266;
|
||||
font-size: smaller;
|
||||
word-wrap: break-word;
|
||||
width: -webkit-fill-available;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/deep/ .grid-time {
|
||||
border-radius: 10px;
|
||||
padding: 14px 8px;
|
||||
.grid-item-checkbox {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 1;
|
||||
}
|
||||
.grid-item-icon{
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin: 9px auto 0;
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
}
|
||||
.grid-item-checkbox-select {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
background: rgba(255, 19, 93, 0.25);
|
||||
}
|
||||
}
|
||||
/deep/ .grid-time:hover {
|
||||
background: #baebff40;
|
||||
}
|
||||
.checkbox-group-header {
|
||||
margin: 10px 0 0;
|
||||
.grid-all-checkbox {
|
||||
height: 50px;
|
||||
width: fit-content;
|
||||
margin-left: 25px;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
}
|
||||
.el-divider--horizontal {
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<div class="dashboard-container" v-resize="containerResize">
|
||||
<el-breadcrumb class="app-breadcrumb" separator="">
|
||||
<transition-group name="breadcrumb">
|
||||
<el-breadcrumb-item v-for="(item,index) in pathList" :key="item.index">
|
||||
@ -52,11 +52,16 @@
|
||||
</el-breadcrumb-item>
|
||||
</transition-group>
|
||||
<div class="search-content">
|
||||
<el-input placeholder="搜索您的文件" class="searchClass" v-model="searchFileName" :clearable="true" @keyup.enter.native="searchFile(searchFileName)">
|
||||
<el-button slot="append" @click="searchFile(searchFileName)">
|
||||
<svg-icon icon-class="search" />
|
||||
</el-button>
|
||||
</el-input>
|
||||
<div class="searchClass">
|
||||
<el-input placeholder="搜索您的文件" v-model="searchFileName" :clearable="true" @keyup.enter.native="searchFile(searchFileName)">
|
||||
<el-button slot="prepend" @click="searchFile(searchFileName)">
|
||||
<svg-icon icon-class="search" />
|
||||
</el-button>
|
||||
<el-button slot="append" @click="changeVmode">
|
||||
<svg-icon :icon-class="grid ? 'menu-list' : 'menu-grid'" />
|
||||
</el-button>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
</el-breadcrumb>
|
||||
|
||||
@ -114,7 +119,9 @@
|
||||
|
||||
<!--<div class="dashboard-text">path: {{ path }}</div>-->
|
||||
|
||||
<!--list布局-->
|
||||
<el-table
|
||||
v-show="!grid"
|
||||
ref="fileListTable"
|
||||
v-loading="tableLoading"
|
||||
:max-height="clientHeight"
|
||||
@ -231,6 +238,36 @@
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!--grid布局-->
|
||||
<div v-show="grid" v-loading="tableLoading"
|
||||
element-loading-text="文件加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="#f6f7fa88">
|
||||
<div class="checkbox-group-header">
|
||||
<van-checkbox class="grid-all-checkbox" @click="clickGridAllCheckBox()" v-model="allChecked">{{indexList.length>0 ? '已选择 '+this.tableHead[2].label : "选择"}}</van-checkbox>
|
||||
<el-divider></el-divider>
|
||||
</div>
|
||||
|
||||
<van-checkbox-group v-model="selectRowData" @change="handleSelectionChange" ref="checkboxGroup">
|
||||
<van-grid square :column-num="gridColumnNum" :gutter="20" :border="false">
|
||||
<van-grid-item v-for="(item,index) in fileList" ref="gridItem" :key="item.id"
|
||||
>
|
||||
<div class="grid-time van-grid-item__content van-grid-item__content--center van-grid-item__content--square"
|
||||
:style="{'background': indexList.includes(index)?'#baebff91':'','cursor':indexList.length>0?'default':'pointer'}"
|
||||
@mouseover="gridItemHover(item,index)"
|
||||
@mouseout="gridItemOut(item,index)"
|
||||
@click="gridItemClick(item)"
|
||||
@contextmenu.prevent="rowContextmenu(item)"
|
||||
>
|
||||
<van-checkbox v-show="gridHoverItemIndex === index || indexList.includes(index)" class="grid-item-checkbox" :name="item" @click.stop="clickGridItemCheckBox(item,index)"/>
|
||||
<div class="grid-item-icon"><icon-file :item="item" :image-url="imageUrl" :grid="true"></icon-file></div>
|
||||
<span class="grid-item-text">{{item.name}}</span>
|
||||
</div>
|
||||
</van-grid-item>
|
||||
</van-grid>
|
||||
</van-checkbox-group>
|
||||
</div>
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
@ -261,6 +298,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'vant/lib/grid/style';
|
||||
import 'vant/lib/grid-item/style';
|
||||
import 'vant/lib/checkbox/style';
|
||||
import 'vant/lib/checkbox-group/style';
|
||||
/* eslint-disable */
|
||||
import { mapGetters } from 'vuex'
|
||||
// import defaultSettings from '@/settings'
|
||||
@ -270,10 +311,10 @@ import Bus from '@/assets/js/bus'
|
||||
import api from '@/api/upload-api'
|
||||
import BreadcrumbFilePath from "../../components/Breadcrumb/BreadcrumbFilePath";
|
||||
import IconFile from "../../components/Icon/IconFile";
|
||||
import vuedraggable from 'vuedraggable';
|
||||
|
||||
export default {
|
||||
components: { IconFile, BreadcrumbFilePath, vuedraggable},
|
||||
components: { IconFile, BreadcrumbFilePath,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
imageUrl: process.env.VUE_APP_BASE_API + '/view/thumbnail?jmal-token=' + this.$store.state.user.token + '&id=',
|
||||
@ -376,6 +417,12 @@ export default {
|
||||
dragLoop: null,
|
||||
positionX:0,
|
||||
positionY:0,
|
||||
grid: true,
|
||||
vmode: 'list',
|
||||
gridColumnNum: -1,
|
||||
gridHoverItemIndex: -1,
|
||||
gridHoverIntermediate: -1,
|
||||
allChecked: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -396,27 +443,57 @@ export default {
|
||||
})
|
||||
|
||||
// 加载路径
|
||||
const pathList = getPathList()
|
||||
if (pathList && pathList !== 'undefined') {
|
||||
const res = JSON.parse(pathList)
|
||||
const list = []
|
||||
res.forEach(function(element) {
|
||||
const item0 = {}
|
||||
item0['folder'] = element.folder + ''
|
||||
item0['index'] = element.index
|
||||
list.push(item0)
|
||||
})
|
||||
this.pathList = list
|
||||
}
|
||||
// const pathList = getPathList()
|
||||
// if (pathList && pathList !== 'undefined') {
|
||||
// const res = JSON.parse(pathList)
|
||||
// const list = []
|
||||
// res.forEach(function(element) {
|
||||
// const item0 = {}
|
||||
// item0['folder'] = element.folder + ''
|
||||
// item0['index'] = element.index
|
||||
// list.push(item0)
|
||||
// })
|
||||
// this.pathList = list
|
||||
// }
|
||||
|
||||
if (window.history && window.history.pushState) {
|
||||
history.pushState(null, null, document.URL);
|
||||
window.addEventListener('popstate', this.goBack, false);
|
||||
}
|
||||
|
||||
|
||||
const that = this
|
||||
window.onresize = function temp() {
|
||||
that.clientHeight = document.documentElement.clientHeight - 165
|
||||
}
|
||||
|
||||
// 加载布局
|
||||
if(this.$route.query.vmode){
|
||||
this.vmode = this.$route.query.vmode
|
||||
if(this.vmode === 'list'){
|
||||
this.grid = false
|
||||
}else{
|
||||
this.grid = true
|
||||
}
|
||||
}
|
||||
|
||||
// 加载url上的path
|
||||
if(this.$route.query.path){
|
||||
const path = decodeURI(this.$route.query.path)
|
||||
this.pathList.splice(1,1)
|
||||
path.split('/').forEach((pathName,index)=>{
|
||||
if(index > 0){
|
||||
const item = {}
|
||||
item['folder'] = pathName
|
||||
item['index'] = index
|
||||
this.pathList.push(item)
|
||||
}
|
||||
})
|
||||
const item = {}
|
||||
item['folder'] = '+'
|
||||
item['index'] = this.pathList.length
|
||||
this.pathList.push(item)
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
removePath()
|
||||
@ -430,9 +507,71 @@ export default {
|
||||
// 聚焦元素
|
||||
el.querySelector('input').focus()
|
||||
}
|
||||
},
|
||||
resize: { // 指令的名称
|
||||
bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
|
||||
let width = '', height = '';
|
||||
function isReize() {
|
||||
const style = document.defaultView.getComputedStyle(el);
|
||||
if (width !== style.width || height !== style.height) {
|
||||
binding.value(); // 关键
|
||||
}
|
||||
width = style.width;
|
||||
height = style.height;
|
||||
}
|
||||
el.__vueSetInterval__ = setInterval(isReize, 300);
|
||||
},
|
||||
unbind(el) {
|
||||
clearInterval(el.__vueSetInterval__);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
gridItemHover(item,index) {
|
||||
this.gridHoverItemIndex = index;
|
||||
this.gridHoverIntermediate = index;
|
||||
},
|
||||
gridItemOut(item,index) {
|
||||
this.gridHoverIntermediate = -1
|
||||
const _this = this
|
||||
setTimeout(function () {
|
||||
if(_this.gridHoverIntermediate !== _this.gridHoverItemIndex){
|
||||
_this.gridHoverItemIndex = -1;
|
||||
}
|
||||
},10)
|
||||
},
|
||||
clickGridItemCheckBox(item,index) {
|
||||
// 同步列表的checkbox
|
||||
if(this.indexList.includes(index)){
|
||||
this.$refs.fileListTable.toggleRowSelection(item,false)
|
||||
}
|
||||
},
|
||||
clickGridAllCheckBox() {
|
||||
if(this.indexList.length !== this.fileList.length){
|
||||
this.$refs.checkboxGroup.toggleAll(true);
|
||||
}else{
|
||||
this.$refs.checkboxGroup.toggleAll();
|
||||
this.$refs.fileListTable.clearSelection();
|
||||
}
|
||||
},
|
||||
gridItemClick(row) {
|
||||
if (this.indexList.length < 1) {
|
||||
if (row.index !== this.editingIndex) {
|
||||
this.fileClick(row)
|
||||
this.editingIndex = -1
|
||||
}
|
||||
} else {
|
||||
if(this.indexList.includes(row.index)){
|
||||
this.$refs.fileListTable.toggleRowSelection(row,false)
|
||||
}else{
|
||||
this.$refs.fileListTable.toggleRowSelection(row,true)
|
||||
}
|
||||
}
|
||||
},
|
||||
containerResize(f) {
|
||||
let clientWidth = document.querySelector(".dashboard-container").clientWidth
|
||||
this.gridColumnNum = clientWidth/120 -2
|
||||
},
|
||||
// 行拖拽
|
||||
rowDrop() {
|
||||
const _this = this
|
||||
@ -443,11 +582,21 @@ export default {
|
||||
|
||||
// 目标元素
|
||||
let target = document.querySelector('.el-table__body-wrapper tbody');
|
||||
|
||||
if(this.grid){
|
||||
target = document.querySelector('.van-checkbox-group .van-grid')
|
||||
}
|
||||
|
||||
let rows = 0;//行数
|
||||
setTimeout(function () {
|
||||
rows = target.childElementCount
|
||||
for (let i = 0; i < target.childElementCount; i++) {
|
||||
const child = target.children[i]
|
||||
let child = target.children[i]
|
||||
// 设置索引,表格自带rowIndex,这里我们设置grid的
|
||||
if(_this.grid){
|
||||
child.children[0].children[0].rowIndex = i
|
||||
child = child.children[0].children[0]
|
||||
}
|
||||
child.draggable = true
|
||||
// child.style.cursor = 'copy'
|
||||
child.ondragstart = function(e){
|
||||
@ -466,35 +615,60 @@ export default {
|
||||
// 被拖动的元素正在那个容器里
|
||||
let dragIndex = -1
|
||||
|
||||
// 判断经过了那个元素
|
||||
let judgThroughDom = function (e) {
|
||||
let throughRow = null
|
||||
// van-grid-item van-grid-item--square
|
||||
// grid-time van-grid-item__content van-grid-item__content--center van-grid-item__content--square
|
||||
if(_this.grid){
|
||||
if(e.relatedTarget && e.relatedTarget.rowIndex) {
|
||||
return e.relatedTarget
|
||||
}
|
||||
} else {
|
||||
if(e.target.className === 'grid-time van-grid-item__content van-grid-item__content--center van-grid-item__content--square'){
|
||||
throughRow = e.target
|
||||
} else {
|
||||
if(e.path[0].tagName === 'TD' || e.path[0].tagName === 'DIV'){
|
||||
// throughRow 表示被拖动的元素正在哪一行上
|
||||
throughRow = e.path.find(path => {
|
||||
// console.log(path.rowIndex,path,e,'path.className',path.className)
|
||||
if(path.className === 'el-table__row' || path.className === 'grid-time van-grid-item__content van-grid-item__content--center van-grid-item__content--square'){
|
||||
return path
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
return throughRow
|
||||
}
|
||||
}
|
||||
|
||||
target.ondragenter = function(e){
|
||||
clearTimeout(loop)
|
||||
|
||||
// 由于被拖动的元素 经过tbody中的每一元素都会触发该事件, 但是我们只需要它正在那一行上就行了
|
||||
if(e.path[0].tagName === 'TD'){
|
||||
// throughRow 表示被拖动的元素正在哪一行上
|
||||
const throughRow = e.path.find(path => {
|
||||
if(path.className === 'el-table__row'){
|
||||
return path
|
||||
}
|
||||
})
|
||||
let throughRow = judgThroughDom(e)
|
||||
if(throughRow){
|
||||
// console.log('throughRow',throughRow)
|
||||
if(dragIndex !== throughRow.rowIndex){
|
||||
if(dragIndex > -1){
|
||||
// 清除上次进入的容器的状态
|
||||
const last = target.children[dragIndex];
|
||||
clearClass(last)
|
||||
}
|
||||
// console.log('拖动进入目标元素'+selectRow.rowIndex);
|
||||
console.log('拖动进入目标元素'+throughRow.rowIndex);
|
||||
// 不是自己或未文件夹时才改变状态
|
||||
if(draggedIndex !== throughRow.rowIndex && _this.fileList[throughRow.rowIndex].isFolder){
|
||||
// 改变本次进入的容器的状态
|
||||
dragged.style.cursor = 'copy'
|
||||
throughRow.style.height = 60+'px'
|
||||
throughRow.style.backgroundColor = '#e9fdcf'
|
||||
if(_this.grid){
|
||||
throughRow.style.height = 120+'px'
|
||||
}
|
||||
}
|
||||
dragIndex = throughRow.rowIndex
|
||||
}
|
||||
leaveIndex = -1
|
||||
}
|
||||
leaveIndex = -1
|
||||
}
|
||||
|
||||
target.ondragover = function(e){
|
||||
@ -508,19 +682,15 @@ export default {
|
||||
|
||||
target.ondragleave = function(e){
|
||||
clearTimeout(loop)
|
||||
if(e.path[0].tagName === 'TD'){
|
||||
const throughRow = e.path.find(path => {
|
||||
if(path.className === 'el-table__row'){
|
||||
return path
|
||||
}
|
||||
})
|
||||
let throughRow = judgThroughDom(e)
|
||||
if(throughRow){
|
||||
if(dragIndex !== throughRow.rowIndex){
|
||||
// console.log('拖动离开目标元素'+selectRow.rowIndex);
|
||||
console.log('拖动离开目标元素'+throughRow.rowIndex);
|
||||
// selectRow.style.height = 'unset'
|
||||
// selectRow.style.backgroundColor = '#fff'
|
||||
// dragIndex = selectRow.rowIndex
|
||||
}
|
||||
if(throughRow.rowIndex === 0 || throughRow.rowIndex === rows-1){
|
||||
if(_this.grid){
|
||||
// 离开第一行或最后一行
|
||||
leaveIndex = throughRow.rowIndex
|
||||
loop = setTimeout(function () {
|
||||
@ -531,7 +701,19 @@ export default {
|
||||
dragIndex = -1
|
||||
}
|
||||
},100)
|
||||
}``
|
||||
}
|
||||
// if(throughRow.rowIndex === 0 || throughRow.rowIndex === rows-1){
|
||||
// // 离开第一行或最后一行
|
||||
// leaveIndex = throughRow.rowIndex
|
||||
// loop = setTimeout(function () {
|
||||
// if(leaveIndex > -1){
|
||||
// console.log("离开了",leaveIndex)
|
||||
// const leave = target.children[leaveIndex];
|
||||
// clearClass(leave)
|
||||
// dragIndex = -1
|
||||
// }
|
||||
// },100)
|
||||
// }
|
||||
}
|
||||
}
|
||||
target.ondrop = function(){
|
||||
@ -631,7 +813,8 @@ export default {
|
||||
if (!this.$route.query.path){
|
||||
this.$router.push(`/_m`)
|
||||
} else {
|
||||
this.$router.push(`?path=${encodeURIComponent(this.path)}`)
|
||||
// this.$router.push(`?path=${encodeURIComponent(this.path)}`)
|
||||
this.$router.push(`?vmode=${this.vmode}&path=${encodeURIComponent(this.path)}`)
|
||||
}
|
||||
}
|
||||
setPath(this.path, this.pathList)
|
||||
@ -670,8 +853,15 @@ export default {
|
||||
// 新建文件夹
|
||||
newFolderNameClick() {
|
||||
console.log('user', this.$store.state.user);
|
||||
this.newFolderLoading = true
|
||||
if(this.newFolderName){
|
||||
if(/[\/\\"<>\?\*]/gi.test(this.newFolderName)){
|
||||
this.$message({
|
||||
message: '文件名不能包含以下字字符:<,>,|,*,?,,/',
|
||||
type: 'warning'
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.newFolderLoading = true
|
||||
api.uploadFolder({
|
||||
isFolder: true,
|
||||
filename: this.newFolderName,
|
||||
@ -712,6 +902,18 @@ export default {
|
||||
searchFileByKeyWord(key) {
|
||||
this.searchFile(key)
|
||||
},
|
||||
// 切换布局
|
||||
changeVmode(){
|
||||
this.grid = !this.grid
|
||||
console.log(this.$route.fullPath)
|
||||
this.vmode = 'list'
|
||||
if(this.grid){
|
||||
this.vmode = 'grid'
|
||||
}
|
||||
this.$router.push(`?vmode=${this.vmode}&path=${this.path}`)
|
||||
// 改变拖拽目标
|
||||
this.rowDrop()
|
||||
},
|
||||
searchFile(key) {
|
||||
if(key){
|
||||
this.pathList = [{ 'folder': '', index: 0 }]
|
||||
@ -725,7 +927,8 @@ export default {
|
||||
item2['index'] = 2
|
||||
this.pathList.push(item1)
|
||||
this.pathList.push(item2)
|
||||
this.$router.push(`?search-file=${key}`)
|
||||
// this.$router.push(`?search-file=${key}`)
|
||||
this.$router.push(`?vmode=${this.vmode}&search-file=${key}`)
|
||||
this.tableLoading = true
|
||||
api.searchFile({
|
||||
userId: this.$store.state.user.userId,
|
||||
@ -756,10 +959,12 @@ export default {
|
||||
pageSize: this.pagination.pageSize
|
||||
}).then(res => {
|
||||
this.fileList = res.data
|
||||
this.tableLoading = false
|
||||
this.clientHeight = document.documentElement.clientHeight - 165
|
||||
this.listModeSearch = true
|
||||
this.pagination['total'] = res.count
|
||||
this.$nextTick(()=>{
|
||||
this.tableLoading = false
|
||||
})
|
||||
}).catch(e => {})
|
||||
this.path = row.path + row.name
|
||||
},
|
||||
@ -773,11 +978,17 @@ export default {
|
||||
pageSize: this.pagination.pageSize
|
||||
}).then(res => {
|
||||
this.fileList = res.data
|
||||
this.tableLoading = false
|
||||
this.fileList.map((item,index) => {
|
||||
item.index = index
|
||||
})
|
||||
this.clientHeight = document.documentElement.clientHeight - 165
|
||||
this.listModeSearch = false
|
||||
this.pagination['total'] = res.count
|
||||
// 是列表可拖拽
|
||||
this.$nextTick(()=>{
|
||||
this.containerResize()
|
||||
this.tableLoading = false
|
||||
})
|
||||
// 使列表可拖拽
|
||||
this.rowDrop()
|
||||
}).catch(e => {})
|
||||
},
|
||||
@ -790,10 +1001,12 @@ export default {
|
||||
pageSize: 30
|
||||
}).then(res => {
|
||||
this.fileList = res.data
|
||||
this.tableLoading = false
|
||||
this.clientHeight = document.documentElement.clientHeight - 165
|
||||
this.listModeSearch = true
|
||||
this.pagination['total'] = res.count
|
||||
this.$nextTick(()=>{
|
||||
this.tableLoading = false
|
||||
})
|
||||
}).catch(e => {})
|
||||
},
|
||||
currentChange(pageIndex) {
|
||||
@ -874,6 +1087,11 @@ export default {
|
||||
selectTotalSize += item.size
|
||||
this.indexList.push(item.index)
|
||||
}
|
||||
|
||||
row.forEach(r => {
|
||||
this.$refs.fileListTable.toggleRowSelection(r,true)
|
||||
});
|
||||
|
||||
const item_name = this.tableHead[2]
|
||||
const item_more = this.tableHead[4]
|
||||
const item_size = this.tableHead[5]
|
||||
@ -897,11 +1115,11 @@ export default {
|
||||
item_date.label = '修改日期'
|
||||
item_date.sortable = true
|
||||
}
|
||||
// this.$set(this.tableHead, 2, item_name)
|
||||
// this.$set(this.tableHead, 2, item_more)
|
||||
// this.$set(this.tableHead, 5, item_size)
|
||||
console.log('selectRowData', this.selectRowData)
|
||||
console.log('rowContextData', this.rowContextData)
|
||||
if(this.indexList.length == this.fileList.length){
|
||||
this.allChecked = true
|
||||
}else{
|
||||
this.allChecked = false
|
||||
}
|
||||
},
|
||||
// cell-style 通过返回值可以实现样式变换利用传递过来的数组index循环改变样式
|
||||
rowRed({ row, column, rowIndex, columnIndex }) {
|
||||
@ -966,16 +1184,20 @@ export default {
|
||||
// 重命名
|
||||
rowRename(newFileName, row) {
|
||||
if (newFileName) {
|
||||
|
||||
console.log('newFileName', newFileName)
|
||||
if(/[\/\\"<>\?\*]/gi.test(newFileName)){
|
||||
this.$message({
|
||||
message: '文件名不能包含以下字字符:<,>,|,*,?,,/',
|
||||
type: 'warning'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!row.isFolder) {
|
||||
const ext = '.' + row.suffix
|
||||
if (!newFileName.endsWith(ext)) {
|
||||
newFileName += ext
|
||||
}
|
||||
}
|
||||
|
||||
console.log('newFileName', newFileName)
|
||||
|
||||
this.renameLoading = true
|
||||
const findIndex = this.fileList.findIndex(item => {
|
||||
if(newFileName === item.name){
|
||||
@ -1031,7 +1253,7 @@ export default {
|
||||
this.showOperationMenus(event)
|
||||
},
|
||||
// 鼠标右击
|
||||
rowContextmenu(row, column, event) {
|
||||
rowContextmenu(row) {
|
||||
if (this.indexList.includes(row.index)) {
|
||||
this.menusIsMultiple = true
|
||||
this.menus = this.multipleRightMenus
|
||||
@ -1396,7 +1618,8 @@ export default {
|
||||
this.pathList[this.pathList.length - 1] = item1
|
||||
this.pathList.push(item2)
|
||||
this.pagination.pageIndex = 1
|
||||
this.$router.push(`?search-file=${row.id}`)
|
||||
// this.$router.push(`?search-file=${row.id}`)
|
||||
this.$router.push(`?vmode=${this.vmode}&search-file=${row.id}`)
|
||||
this.searchFileAndOpenDir(row)
|
||||
} else {
|
||||
if(this.path){
|
||||
@ -1415,7 +1638,8 @@ export default {
|
||||
setPath(this.path, this.pathList)
|
||||
this.pagination.pageIndex = 1
|
||||
const path = encodeURIComponent(this.path);
|
||||
this.$router.push(`?path=${path}`)
|
||||
console.log(this.vmode)
|
||||
this.$router.push(`?vmode=${this.vmode}&path=${path}`)
|
||||
this.getFileList()
|
||||
}
|
||||
} else {
|
||||
@ -1436,252 +1660,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard {
|
||||
&-container {
|
||||
min-width: 500px;
|
||||
margin: 10px 10px 10px 15px;
|
||||
}
|
||||
&-text {
|
||||
font-size: 30px;
|
||||
line-height: 46px;
|
||||
}
|
||||
}
|
||||
|
||||
.redirect {
|
||||
color: #97a8be;
|
||||
}
|
||||
.no-redirect {
|
||||
color: #000000;
|
||||
cursor: text;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/deep/ .el-breadcrumb__separator {
|
||||
margin: 0 0;
|
||||
font-weight: 700;
|
||||
color: #C0C4CC;
|
||||
}
|
||||
|
||||
.el-breadcrumb {
|
||||
font-size: 1rem;
|
||||
line-height: 46px;
|
||||
}
|
||||
|
||||
.button-class {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button-class:hover {
|
||||
border-radius: 5px;
|
||||
background-color: #409eff14;
|
||||
}
|
||||
|
||||
.newFileMenu ul {
|
||||
list-style: none;
|
||||
padding-inline-start: 0px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.newFileMenu li {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
min-width: 136px;
|
||||
}
|
||||
.newFileMenu li:hover {
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
/*background-color: #409eff14;*/
|
||||
background-color: #409eff30;
|
||||
}
|
||||
.newFileMenu li > .menuitem {
|
||||
cursor: pointer;
|
||||
line-height: 38px;
|
||||
margin-left: 10%;
|
||||
}
|
||||
.newFileMenu li > .menuitem > .text {
|
||||
cursor: pointer;
|
||||
margin-left: 8%;font-weight: normal;
|
||||
}
|
||||
.newFileMenu li > .menuitem > .svg-icon {
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
}
|
||||
/deep/ .el-input-group__append /deep/ .el-loading-spinner {
|
||||
top: 0;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
/deep/ .cell /deep/ .el-loading-spinner {
|
||||
top: 0;
|
||||
margin-top: 0.54rem;
|
||||
}
|
||||
/deep/ .cell /deep/ .el-button {
|
||||
padding: 8px 16px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
/deep/ .el-checkbox {
|
||||
cursor: default;
|
||||
}
|
||||
/deep/ .el-checkbox__input {
|
||||
cursor: default;
|
||||
}
|
||||
.el-button.is-circle {
|
||||
border-radius: 50%;
|
||||
padding: 9px;
|
||||
}
|
||||
/deep/.svg-icon {
|
||||
font-size: 28px;
|
||||
}
|
||||
/deep/.el-table thead {
|
||||
color: #4f4f50;
|
||||
}
|
||||
/deep/ .el-table thead .el-table-column--selection .cell {
|
||||
padding-left: 15px;
|
||||
}
|
||||
/deep/.el-table .cell {
|
||||
padding-right: 5px;
|
||||
}
|
||||
/deep/.el-table th {
|
||||
padding: 0 0;
|
||||
}
|
||||
/deep/.el-table td{
|
||||
padding: 1px 0;
|
||||
height: 50px;
|
||||
}
|
||||
/deep/.el-table__header tr, .el-table__header th {
|
||||
height: 40px;
|
||||
}
|
||||
/deep/.el-avatar>img {
|
||||
display: inherit;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
/deep/.el-avatar {
|
||||
background: #ffffff;
|
||||
margin: 7px 0 0 0;
|
||||
}
|
||||
/deep/.el-avatar {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
/deep/ .ctx-menu-container {
|
||||
border: 0 solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.menu-triangle-bottom {
|
||||
border: 0 solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.menu-triangle-bottom::after {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: '';
|
||||
bottom: -6px;
|
||||
left: 74px;
|
||||
border-style: solid;
|
||||
border-width: 6px;
|
||||
border-color: #fff #fff transparent transparent;
|
||||
-webkit-transform: rotate(135deg);
|
||||
transform: rotate(135deg);
|
||||
-webkit-box-shadow: 1px -1px 1px #cccccc73;
|
||||
box-shadow: 1px -1px 1px #cccccc73;
|
||||
}
|
||||
|
||||
.menu-triangle-top {
|
||||
border: 0 solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.menu-triangle-top::after {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: '';
|
||||
top: -6px;
|
||||
left: 74px;
|
||||
border-style: solid;
|
||||
border-width: 6px;
|
||||
border-color: #fff #fff #e0000000 white;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
-webkit-box-shadow: 1px -1px 1px #cccccc73;
|
||||
box-shadow: -1px -1px 1px #cccccc73;
|
||||
}
|
||||
/*解决合计不显示的问题*/
|
||||
/deep/
|
||||
.el-table__footer-wrapper{
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
/deep/ .el-table__row /deep/.table-file-name:hover {
|
||||
cursor: 'pointer';
|
||||
color: "#19ACF9"
|
||||
}
|
||||
|
||||
.searchClass{
|
||||
float: right;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.el-pagination {
|
||||
float: right;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
/deep/ .el-dialog__header {
|
||||
padding: 20px 20px 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/deep/ .el-dialog__title {
|
||||
font-size: 16px;
|
||||
}
|
||||
/deep/ .el-dialog__body {
|
||||
padding: 0 20px 0 20px;
|
||||
}
|
||||
/deep/ .el-tree-node__content {
|
||||
height: 35px;
|
||||
/*border-bottom: 1px solid #ccc;*/
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/deep/ .custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
/deep/ .el-tree-node.is-expanded>.el-tree-node__children {
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/deep/ .drag-parent-class {
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
margin: 0;
|
||||
display: none;
|
||||
/*-webkit-transition: all .1s ease-in-out 0s;*/
|
||||
/*transition: all .1s ease-in-out 0s;*/
|
||||
}
|
||||
|
||||
/deep/ .drag-parent-class .el-table {
|
||||
background-color: #66cc66;
|
||||
}
|
||||
|
||||
/deep/ .drag-parent-class .el-table tr {
|
||||
background-color: #66cc66;
|
||||
}
|
||||
@import "src/styles/home-index";
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user