Commit 6be27dcf authored by fangshupeng's avatar fangshupeng

修改优化问题

parent 1add339f
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
</div> </div>
<!-- 新建文件夹窗口 --> <!-- 新建文件夹窗口 -->
<el-dialog title="新建个人文件夹" class="newfile-dialog" :visible.sync="newFolderVisible" width="650px" :close-on-click-modal="false"> <el-dialog title="新建个人文件夹" class="newfile-dialog" :visible.sync="newFolderVisible" width="700px" :close-on-click-modal="false">
<el-form :model="ruleForm" :rules="ruleForm.folderType === 'usual'?usualRules:taskRules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form :model="ruleForm" :rules="ruleForm.folderType === 'usual'?usualRules:taskRules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="文件夹名称" prop="name"> <el-form-item label="文件夹名称" prop="name">
<el-input placeholder="请输入..." v-model="ruleForm.name"></el-input> <el-input placeholder="请输入..." v-model="ruleForm.name"></el-input>
...@@ -37,6 +37,9 @@ ...@@ -37,6 +37,9 @@
<el-radio label="private">不公开</el-radio> <el-radio label="private">不公开</el-radio>
<el-radio label="publicToAll">对所有教师公开</el-radio> <el-radio label="publicToAll">对所有教师公开</el-radio>
<el-radio label="publickToPart">对部分教师公开</el-radio> <el-radio label="publickToPart">对部分教师公开</el-radio>
<span style="display:inline-block" class="add-teacher-ctn" v-if="ruleForm.private === 'publickToPart'">
<el-button class="person-btn" icon="el-icon-plus" @click="teacherSelectorOptions.isBlock = true">添加教师</el-button>
</span>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item class="limit-ctn" v-if="ruleForm.folderType === 'task'" label="每人上传数" prop="limitCount"> <el-form-item class="limit-ctn" v-if="ruleForm.folderType === 'task'" label="每人上传数" prop="limitCount">
...@@ -169,12 +172,12 @@ export default { ...@@ -169,12 +172,12 @@ export default {
}, },
usualRules: { usualRules: {
name: [ name: [
{ required: true, message: '请输入活动名称' } { required: true, message: '请输入文件夹名称' }
] ]
}, },
taskRules: { taskRules: {
name: [ name: [
{ required: true, message: '请输入活动名称' } { required: true, message: '请输入文件夹名称' }
], ],
limitCount: [ limitCount: [
{ required: true, message: '请选择是否限制上传数量' } { required: true, message: '请选择是否限制上传数量' }
...@@ -245,6 +248,7 @@ export default { ...@@ -245,6 +248,7 @@ export default {
} }
.newfile-dialog { .newfile-dialog {
z-index: 50;
/deep/ .el-dialog__body { /deep/ .el-dialog__body {
padding-top: 10px; padding-top: 10px;
.el-form-item { .el-form-item {
......
<template> <template>
<div class="container"> <div class="main">
<v-header :title="'我的资源'" :is-show-prev-page="true"></v-header> <div class="headerNav">
<nav-menu :menus="menus"></nav-menu> <div class="leftNav">
<div class="main"> <span class="type-title">类型:</span>
<div class="headerNav"> <el-radio-group v-model="folderType" size="small" @change="folderTypeChange">
<div class="leftNav"> <el-radio-button label="all">全部</el-radio-button>
<span class="type-title">类型:</span> <el-radio-button label="myFavor">我收藏的</el-radio-button>
<el-radio-group v-model="folderType" size="small" @change="folderTypeChange"> <el-radio-button label="myShare">我分享的</el-radio-button>
<el-radio-button label="all">全部</el-radio-button> <el-radio-button label="shareMe">分享给我的</el-radio-button>
<el-radio-button label="myFavor">我收藏的</el-radio-button> </el-radio-group>
<el-radio-button label="myShare">我分享的</el-radio-button>
<el-radio-button label="shareMe">分享给我的</el-radio-button>
</el-radio-group>
</div>
<div class="rightNav">
<el-select class="timer-select" v-model="timeSelect" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<search></search>
</div>
</div> </div>
<div class="rightNav">
<el-select class="timer-select" v-model="timeSelect" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<search></search>
</div>
</div>
<div class="folderCtn"> <div class="folderCtn">
<div class="smallCtn"> <div class="smallCtn">
<small-folder <small-folder
:file-list="currentFileList" :file-list="currentFileList"
@showMenu="showMenu" @showMenu="showMenu"
@tableIntoFile="intoFolder"> @tableIntoFile="intoFolder">
</small-folder> </small-folder>
</div>
</div> </div>
</div>
<favorshare-ctx-menu <favorshare-ctx-menu
:menuVisible="menuVisible" :menuVisible="menuVisible"
:rightMenuData="rightMenuData" :rightMenuData="rightMenuData"
:coordinate="coordinate" :coordinate="coordinate"
:menuMode="menuMode" :menuMode="menuMode"
@menuOpenFile="intoFolder"> @menuOpenFile="intoFolder">
</favorshare-ctx-menu> </favorshare-ctx-menu>
<!-- 侧滑块查看普通文档 --> <!-- 侧滑块查看普通文档 -->
<el-drawer <el-drawer
title="查看" title="查看"
:visible.sync="documentDrawer" :visible.sync="documentDrawer"
:size="'60%'"> :size="'60%'">
<span>文档内容</span> <span>文档内容</span>
</el-drawer> </el-drawer>
</div>
</div> </div>
</template> </template>
...@@ -60,34 +56,12 @@ ...@@ -60,34 +56,12 @@
export default { export default {
name: 'FavorShare', name: 'FavorShare',
components: { components: {
VHeader: () => import('@/common/header/VHeader'),
NavMenu: () => import('@/common/navMenu/NavMenu'),
Search: () => import('./components/Search'), Search: () => import('./components/Search'),
SmallFolder: () => import('./components/SmallFolder'), SmallFolder: () => import('./components/SmallFolder'),
FavorshareCtxMenu: () => import('./components/FavorshareCtxMenu') FavorshareCtxMenu: () => import('./components/FavorshareCtxMenu')
}, },
data () { data () {
return { return {
menus: [
{
name: '我上次的',
id: 'tab_1',
permission: true,
path: '/education/myResources/index'
},
{
name: '收藏/分享',
id: 'tab_2',
permission: true,
path: '/education/myResources/favorShare'
},
{
name: '我管理的',
id: 'tab_3',
permission: true,
path: '/education/myResources/myManage'
}
],
folderType: 'all', // 文件类型(文件类型(all: 全部,myFavor: 我收藏的,myShare: 我分享的, shareMe: 分享给我的 )) folderType: 'all', // 文件类型(文件类型(all: 全部,myFavor: 我收藏的,myShare: 我分享的, shareMe: 分享给我的 ))
timeSelect: 'allItem', // 学期选择框数据 timeSelect: 'allItem', // 学期选择框数据
menuMode: '', // 菜单根据模式显示对于内容 menuMode: '', // 菜单根据模式显示对于内容
...@@ -194,48 +168,44 @@ export default { ...@@ -194,48 +168,44 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.container { .main {
height: 100%;
min-height: 100%; min-height: 100%;
.main {
min-height: 100%;
.headerNav { .headerNav {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 45px; height: 45px;
line-height: 45px; line-height: 45px;
background: #e7e7e7; background: #e7e7e7;
/deep/ .leftNav { /deep/ .leftNav {
padding: 0 20px; padding: 0 20px;
font-size: 18px; font-size: 18px;
.type-title { .type-title {
color: rgb(48, 48, 48); color: rgb(48, 48, 48);
} }
.el-radio-group { .el-radio-group {
vertical-align: middle; vertical-align: middle;
margin-bottom: 3px; margin-bottom: 3px;
.el-radio-button { .el-radio-button {
margin: 0 5px; margin: 0 5px;
.el-radio-button__inner { .el-radio-button__inner {
border-radius: 25px; border-radius: 25px;
}
} }
} }
} }
}
/deep/ .rightNav { /deep/ .rightNav {
padding: 0 30px; padding: 0 30px;
display: flex; display: flex;
.timer-select{ .timer-select{
padding-top: 1px; padding-top: 1px;
margin-right: 15px; margin-right: 15px;
}
} }
} }
} }
......
<template> <template>
<div <div class="container">
id="drop_area" <div id="drop_area" class="file-item" v-for="file of fileList" :key="file.id">
class="container"> <div
<div tabindex="0" hidefocus="true"
tabindex="0" hidefocus="true" class="folderCtn" @contextmenu.prevent.stop="contextMenu($event,file)"
class="folderCtn" @contextmenu.prevent.stop="contextMenu" @dblclick="intoFolder(file)"
@dblclick="intoFolder" @dragenter.stop.prevent="borderHover = true"
@dragenter.stop.prevent="borderHover = true" @dragleave.stop.prevent="borderHover = false"
@dragleave.stop.prevent="borderHover = false" @dragover.stop.prevent="borderHover = true"
@dragover.stop.prevent="borderHover = true" @drop.stop.prevent="fileDrop($event,file)">
@drop.stop.prevent="fileDrop"> <div class="types">{{ file.typeName }}</div>
<div class="types">{{ fileData.typeName }}</div> <i :class="file.icon" class="file-icon"></i>
<i :class="fileData.icon" class="file-icon"></i> <h4 class="folder-name">{{ file.name }}</h4>
<h4 class="folder-name">{{ fileData.name }}</h4> <h6 class="descript">{{ file.descript }}</h6>
<h6 class="descript">{{ fileData.descript }}</h6> </div>
</div> </div>
</div> </div>
</template> </template>
...@@ -22,10 +22,10 @@ ...@@ -22,10 +22,10 @@
export default { export default {
name: 'BigFolder', name: 'BigFolder',
props: { props: {
fileData: { fileList: {
type: Object, type: Array,
default: () => { default: () => {
return {} return []
} }
} }
}, },
...@@ -37,19 +37,18 @@ export default { ...@@ -37,19 +37,18 @@ export default {
mounted () { mounted () {
}, },
methods: { methods: {
contextMenu (MouseEvent) { contextMenu (MouseEvent, file) {
// MouseEvent.stopPropagation() let type = file.type
let type = this.fileData.type let row = file
let row = this.fileData
this.$emit('showMenu', MouseEvent, type, row) this.$emit('showMenu', MouseEvent, type, row)
}, },
intoFolder () { intoFolder (file) {
this.$emit('intoFolder') this.$emit('intoFolder', file)
}, },
fileDrop (event) { fileDrop (event, file) {
this.borderHover = false this.borderHover = false
let fileData = event.dataTransfer.files let fileData = event.dataTransfer.files
let row = this.fileData let row = this.file
this.$emit('uploadFile', fileData, row) this.$emit('uploadFile', fileData, row)
} }
} }
...@@ -58,51 +57,55 @@ export default { ...@@ -58,51 +57,55 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.container { .container {
display: flex;
flex-wrap: wrap;
padding: 15px;
.file-item {
.folderCtn {
position: relative;
text-align: center;
width: 260px;
height: 200px;
margin: 10px;
border: 1px solid #D7D7D7;
cursor: pointer;
&:hover {
border: 1px solid #1890FF;
}
&:focus {
border: 1px solid #1890FF;
}
&:active {
opacity: 0.7;
}
.folderCtn { .types {
position: relative; position: absolute;
text-align: center; top: 0;
width: 260px; left: 0;
height: 200px; background: #F2F2F2;
margin: 10px; color: #7F7F7F;
border: 1px solid #D7D7D7; font-size: 5px;
cursor: pointer; padding: 2px 4px;
&:hover { }
border: 1px solid #1890FF;
}
&:focus {
border: 1px solid #1890FF;
}
&:active {
opacity: 0.7;
}
.types { .file-icon {
position: absolute; font-size: 80px;
top: 0; margin-top: 30px;
left: 0; }
background: #F2F2F2;
color: #7F7F7F;
font-size: 5px;
padding: 2px 4px;
}
.file-icon { .folder-name {
font-size: 80px; font-size: 17px;
margin-top: 30px; color: #333333;
} margin-bottom: 7px;
}
.folder-name { .descript {
font-size: 17px; font-size: 11px;
color: #333333; color: #7F7F7F;
margin-bottom: 7px; }
} }
.descript {
font-size: 11px;
color: #7F7F7F;
}
} }
} }
</style> </style>
<template>
<div class="container">
<div class="left-menu">
<div class="menu-header">上传人员列表(30人)</div>
<div class="search-header">
<el-input v-model="searchData" placeholder="请输入..."></el-input>
<el-button class="search-btn" type="primary" plain>搜索</el-button>
</div>
<div class="upload-list">
<el-menu
default-active="1"
class="el-menu-vertical-demo">
<el-submenu
v-for="(item, index) of 11"
:key="index"
:index="String(index+1)">
<template slot="title">
<div class="menus-title">
<span>某某某</span>
<span class="upload-count" v-show="!taskMode">2</span>
<div class="progress-ctn" v-show="taskMode">
<el-progress :percentage="50" :format="format"></el-progress>
</div>
</div>
</template>
<el-menu-item-group>
<el-menu-item
v-for="(innerItem, innerIndex) of 2"
:key="innerIndex"
:index="(index+1)+'-'+(innerIndex+1)"
@contextmenu.native.prevent.stop="showMenu($event,item)">
<span v-show="taskMode" class="point"></span>这是上传资料的标题,很长很长很长很长
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</div>
</div>
<div class="right-document">
</div>
<!-- 右键菜单栏 -->
<div v-show="menuVisible" id="menu" :style="'left:'+coordinate.menuX+';top:'+coordinate.menuY">
<ul class="menu">
<li class="menu_item padding_35">下载</li>
<li class="menu_item padding_35" @click="deleteVisible = true">删除</li>
</ul>
</div>
<!-- 删除文件窗口 -->
<el-dialog title="删除确认" :visible.sync="deleteVisible" width="500px">
<h3>删除后不可恢复,确定删除吗?</h3>
<div slot="footer" class="dialog-footer">
<el-button @click="deleteVisible = false">取 消</el-button>
<el-button type="primary" @click="deleteVisible = false">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'Material',
props: {
taskMode: { // 是否为任务文件夹
type: Boolean,
default: false
}
},
data () {
return {
searchData: '',
menuVisible: false, // 右键菜单栏
deleteVisible: false, // 删除确认弹框
coordinate: { // 菜单栏坐标
menuX: '0px',
menuY: '0px'
}
}
},
methods: {
showMenu (MouseEvent, item) {
/* 右键文件夹或文件时触发 */
this.menuVisible = false
this.menuVisible = true
this.coordinate.menuX = MouseEvent.pageX + 5 + 'px'
this.coordinate.menuY = MouseEvent.pageY + 'px'
document.addEventListener('click', this.foo) // 给整个document添加监听鼠标事件,点击任何位置执行foo方法
},
foo () {
/* 取消鼠标监听事件 菜单栏 */
this.menuVisible = false
this.uploadVisible = false
document.removeEventListener('click', this.foo) // 关掉监听
},
format (percentage) {
return '3/8'
}
}
}
</script>
<style lang="less" scoped>
.container {
padding: 15px 30px;
display: flex;
.left-menu {
width: 260px;
background: #F1F5F8;
min-height: 500px;
.menu-header {
height: 50px;
line-height: 50px;
border-bottom: 1px solid #D7D7D7;
padding-left: 20px;
}
.search-header {
display: flex;
padding: 12px 10px;;
.search-btn {
margin-left: 7px;
font-size: 14px;
}
}
/deep/ .upload-list {
.el-menu {
background: none;
.el-submenu__title{
height: 45px;
line-height: 45px;
.menus-title {
display: flex;
.upload-count {
flex: 1;
text-align: right;
margin-right: 30px;
}
.progress-ctn {
width:250px;
padding:13px 10px 0 15px;
}
}
}
.el-menu-item-group__title {
height: 0;
padding: 0;
}
.el-menu-item {
overflow: hidden;
text-overflow: ellipsis;
padding: 0 5px 0 0;
height: 40px;
line-height: 40px;
&:focus, &:hover {
background: rgb(207, 233, 248);
}
.point {
display: inline-block;
width: 7px;
height: 7px;
background: #039D12;
border-radius: 14px;
margin-right: 10px;
margin-bottom: 2px
}
}
}
}
}
.right-document {
min-height: 500px;
flex: 1;
margin-left:15px;
background: #F2F2F2;
}
#menu {
position: absolute;
z-index: 999;
border-radius: 3px;
background-color: white;
border: 1px solid rgb(235, 235, 235);
width: 120px;
.menu {
.menu_item {
line-height: 35px;
border-bottom: 1px solid rgb(235, 235, 235);
font-size:13px;
cursor: pointer;
&:hover {
background-color: #1790ff;
color: white;
}
.upload_line {
padding: 0 6px 0 10px;
.upload-icon {
font-size: 22px;
vertical-align: middle;
}
}
}
.padding_35 {
padding-left: 40px;
}
}
}
/deep/ .dialog-footer {
text-align: center;
.el-button {
width: 100px;
height: 35px;
}
}
}
</style>
<template>
<div class="main">
<div class="headerNav">
<div class="leftNav">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item
v-for="(breadcrumbItem, index) of breadcrumb"
:key="index"
@click.native="backCrumb(index)">
{{ breadcrumbItem }}
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="rightNav">
<el-select v-if="!(currentFileList[0] && currentFileList[0].isFolder)" class="timer-select" v-model="timeSelect" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<search></search>
</div>
</div>
<div class="folderCtn">
<div class="smallCtn">
<small-folder
:file-list="currentFileList"
@tableIntoFile="intoFolder"
>
</small-folder>
</div>
</div>
<!-- 侧滑块查看普通文档 -->
<el-drawer
title="查看"
:visible.sync="documentDrawer"
:size="'60%'">
<span>文档内容</span>
</el-drawer>
</div>
</template>
<script>
export default {
name: 'ResourcesInSchoold',
components: {
Search: () => import('./../myResources/components/Search'),
SmallFolder: () => import('./../myResources/components/SmallFolder')
},
data () {
return {
timeSelect: 'allItem', // 学期选择框数据
options: [{
value: 'allItem',
label: '全部学期'
}],
documentDrawer: false, // 查看文档抽屉
currentFileList: [],
selectFolderVisible: false, // 查看文件侧滑框
breadcrumb: ['首页'], // 面包屑
fileListData: {
firstLevelData: [
{
id: 991,
name: '第一级文件夹',
typeName: '学校文件夹',
type: 'school',
icon: 'el-icon-folder',
descript: '我上传了10个文档',
isFocus: false,
isFolder: true,
folderData: 'secondLevelData',
nextIsFolder: true,
uploadCount: '10',
author: '张三',
updateTime: '2020-08-22 12:00'
},
{
id: 992,
name: '第一级文件夹',
typeName: '个人文件夹',
type: 'personal',
icon: 'el-icon-folder',
descript: '我上传了10个文档',
isFocus: false,
isFolder: true,
folderData: 'secondLevelData',
nextIsFolder: true,
uploadCount: '10',
author: '张三',
updateTime: '2020-08-22 12:00'
},
{
id: 993,
name: '第一级文件夹',
typeName: '个人文件夹',
type: 'personal',
icon: 'el-icon-folder',
descript: '我上传了10个文档',
isFocus: false,
isFolder: true,
folderData: 'secondLevelData',
nextIsFolder: true,
uploadCount: '10',
author: '张三',
updateTime: '2020-08-22 12:00'
}
],
secondLevelData: [
{
id: 1001,
name: '第二级文件夹',
typeName: '学校文件夹',
type: 'school',
icon: 'el-icon-folder',
descript: '我上传了10个文档',
isFocus: false,
isFolder: true,
folderData: 'thirdLevelData',
nextIsFolder: false,
uploadCount: '10',
author: '张三',
updateTime: '2020-08-22 12:00'
},
{
id: 1002,
name: '第二级文件夹',
typeName: '学校文件夹',
type: 'school',
icon: 'el-icon-folder',
descript: '我上传了10个文档',
isFocus: false,
isFolder: true,
folderData: 'thirdLevelData',
nextIsFolder: false,
uploadCount: '10',
author: '张三',
updateTime: '2020-08-22 12:00'
}
],
thirdLevelData: [
{
id: 1101,
name: '第三级文件.txt',
typeName: '文件',
type: 'file',
icon: 'el-icon-document',
descript: '我上传了10个文档',
isFocus: false,
isFolder: false,
nextIsFolder: false,
uploadCount: '10',
author: '张三',
updateTime: '2020-08-22 12:00'
}
]
}
}
},
methods: {
initDataFromRoute (route) {
/* 根据路由参数初始化数据 */
if (route.query.folderName) {
this.currentFileList = this.fileListData[route.query.folderName]
this.breadcrumb = JSON.parse(route.query.breadcrumb)
} else {
this.currentFileList = this.fileListData.firstLevelData
this.breadcrumb = ['首页']
}
},
backCrumb (index) {
/* 点击面包屑返回前几级 */
if (index < this.breadcrumb.length - 1) {
let backPageCount = index - this.breadcrumb.length + 1
this.$router.go(backPageCount)
}
},
intoFolder (file) {
/* 进入下一级文件夹 */
if (file.isFolder) {
// 进入文件夹
this.breadcrumb.push(file.name)
this.$router.push({
path: '/education/schoolResources/index',
query: {
folderName: file.folderData,
breadcrumb: JSON.stringify(this.breadcrumb)
}
})
} else {
// 查看文件
this.documentDrawer = true
}
}
},
mounted () {
},
created () {
this.initDataFromRoute(this.$route)
},
watch: {
$route (to, from) {
this.initDataFromRoute(to)
}
}
}
</script>
<style lang="less" scoped>
.main {
min-height: 100%;
.headerNav {
display: flex;
justify-content: space-between;
height: 45px;
line-height: 45px;
background: #e7e7e7;
/deep/ .leftNav {
padding: 0 20px;
font-size: 18px;
.el-breadcrumb {
font-size: 18px;
line-height: 45px;
.el-breadcrumb__item {
&:not(:last-child) .el-breadcrumb__inner{
cursor: pointer;
&:hover {
color: #1890FF;
}
}
&:last-child .el-breadcrumb__inner{
color: black;
}
}
}
}
/deep/ .rightNav {
padding: 0 30px;
display: flex;
.timer-select{
padding-top: 1px;
margin-right: 15px;
}
}
}
.folderCtn{
min-height: 500px;
.smallCtn {
width: 100%;
}
}
}
</style>
...@@ -3,40 +3,52 @@ ...@@ -3,40 +3,52 @@
* @date: 2020/09/02 * @date: 2020/09/02
* @author:zhaobingfeng * @author:zhaobingfeng
*/ */
// 我的资源 // 我的资源
const MY_RESOURCES = [ const MY_RESOURCES = [
{ {
path: '/education/myResources/index', path: '/education/myResources',
name: 'myResources', name: 'myResources',
component: resolve => require(['pages/education/schoolBasedResources/myResources/Index'], resolve) component: resolve => require(['pages/education/schoolBasedResources/myResources/Index'], resolve),
} redirect: '/education/myResources/index',
] children: [
{ // 我上传的
// 我的资源-收藏分享 path: '/education/myResources/index',
const MY_RESOURCES_FAVORSHARE = [ name: 'myUploads',
{ component: resolve => require(['pages/education/schoolBasedResources/myResources/MyUpload'], resolve)
path: '/education/myResources/favorShare', },
name: 'FavorShare', { // 收藏分享
component: resolve => require(['pages/education/schoolBasedResources/myResources/FavorShare'], resolve) path: '/education/myResources/favorShare',
} name: 'favorShare',
] component: resolve => require(['pages/education/schoolBasedResources/myResources/FavorShare'], resolve),
},
// 我的资源-我管理的 { // 我管理的
const MY_RESOURCES_MYMANAGE = [ path: '/education/myResources/myManage',
{ name: 'myManage',
path: '/education/myResources/myManage', component: resolve => require(['pages/education/schoolBasedResources/myResources/MyManage'], resolve)
name: 'MyManage', },
component: resolve => require(['pages/education/schoolBasedResources/myResources/MyManage'], resolve) { // 我管理的-资料列表
path: '/education/myResources/myManage/material',
name: 'material',
component: resolve => require(['pages/education/schoolBasedResources/myResources/Material'], resolve)
}
]
} }
] ]
// 学校资源 // 学校资源
const SCHOOL_RESOURCES = [ const SCHOOL_RESOURCES = [
{ {
path: '/education/schoolResources/index', path: '/education/schoolResources',
name: 'schoolResources', name: 'schoolResources',
component: resolve => require(['pages/education/schoolBasedResources/schoolResources/Index'], resolve) component: resolve => require(['pages/education/schoolBasedResources/schoolResources/Index'], resolve),
redirect: '/education/schoolResources/index',
children: [
{ // 校内资源
path: '/education/schoolResources/index',
name: 'myUpload',
component: resolve => require(['pages/education/schoolBasedResources/schoolResources/ResourcesInSchoold'], resolve),
}
]
} }
] ]
...@@ -51,8 +63,6 @@ const FOLDER_MANAGE = [ ...@@ -51,8 +63,6 @@ const FOLDER_MANAGE = [
export default [ export default [
...MY_RESOURCES, ...MY_RESOURCES,
...MY_RESOURCES_FAVORSHARE,
...MY_RESOURCES_MYMANAGE,
...SCHOOL_RESOURCES, ...SCHOOL_RESOURCES,
...FOLDER_MANAGE ...FOLDER_MANAGE
] ]
...@@ -18,7 +18,8 @@ export default { ...@@ -18,7 +18,8 @@ export default {
}, },
data () { data () {
return { return {
title: '文档详情' title: '文档详情',
scroll: ''
} }
}, },
methods: { methods: {
......
<template> <template>
<div class="container"> <div class="container">
<div class="content" ref="contentWrapper"> <search-fold></search-fold>
<div> <file-list :mode="'favorShare'" :list="fileList" @handleClickItem="toggleShowBtn" @handleOpen="openFile"></file-list>
<tabs :menus="tabsMenus" :mode="'2'" :position="'bottom'"></tabs>
<search-fold></search-fold>
<file-list :mode="'favorShare'" :list="fileList" @handleClickItem="toggleShowBtn" @handleOpen="openFile"></file-list>
<tab-bar :menus="tabBarMenus"></tab-bar>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import BScroll from 'better-scroll'
export default { export default {
name: 'FavorShare', name: 'FavorShare',
components: { components: {
Tabs: () => import('@/common/tab/Tabs'),
TabBar: () => import('@/common/tabBar/TabBar'),
FileList: () => import('./components/FileList'), FileList: () => import('./components/FileList'),
SearchFold: () => import('./components/SearchFold') SearchFold: () => import('./components/SearchFold')
}, },
data () { data () {
return { return {
tabsMenus: [
{
label: '我上传的',
path: '/education/myResources/myUpload',
belongTo: 'myUpload'
},
{
label: '收藏分享',
path: '/education/myResources/favorShare',
belongTo: 'favorShare'
}
],
tabBarMenus: [
{
label: '我的资源',
icon: '&#xe89e;',
path: '/education/myResources/myUpload',
belongTo: 'favorShare'
},
{
label: '学习资源库',
icon: '&#xe87d;',
path: '/education/schoolResources/index',
belongTo: 'schoolResources'
}
],
fileList: [ fileList: [
{ {
name: '我收藏的.docx', name: '我收藏的.docx',
...@@ -86,11 +51,6 @@ export default { ...@@ -86,11 +51,6 @@ export default {
created () { created () {
}, },
mounted () { mounted () {
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.contentWrapper, {
click: true
})
})
} }
} }
</script> </script>
......
<template> <template>
<div class="container"> <div class="container">
<v-header :title="title" :isShowPrevPage="isShowPrevPage">
<span slot="action" class="header-slot pull-right"></span>
</v-header>
<tabs v-show="showTabs" :menus="tabsMenus" :mode="'1'" :position="'bottom'"></tabs>
<div class="content" ref="contentWrapper"> <div class="content" ref="contentWrapper">
<div> <div>
<tabs :menus="tabsMenus" :mode="'2'" :position="'bottom'"></tabs> <router-view></router-view>
<div class="search-ctn">
<searchs></searchs>
</div>
<folder-list
v-for="(folderListItem, folderListIndex) of currentList"
:key="folderListIndex"
:list="folderListItem.list"
:list-title="folderListItem.listTitle"
@folderClick="intoFolder">
</folder-list>
<tab-bar :menus="tabBarMenus"></tab-bar>
</div> </div>
</div> </div>
<tab-bar :menus="tabBarMenus"></tab-bar>
</div> </div>
</template> </template>
...@@ -24,23 +18,25 @@ import BScroll from 'better-scroll' ...@@ -24,23 +18,25 @@ import BScroll from 'better-scroll'
export default { export default {
name: 'Index', name: 'Index',
components: { components: {
VHeader: () => import('@/common/header/VHeader'),
Tabs: () => import('@/common/tab/Tabs'), Tabs: () => import('@/common/tab/Tabs'),
TabBar: () => import('@/common/tabBar/TabBar'), TabBar: () => import('@/common/tabBar/TabBar')
Searchs: () => import('./components/Searchs'),
FolderList: () => import('./components/FolderList')
}, },
data () { data () {
return { return {
title: '标题',
isShowPrevPage: true,
showTabs: false, // 是否显示Tabs组件
tabsMenus: [ tabsMenus: [
{ {
label: '我上传的', label: '我上传的',
path: '/education/myResources/myUpload', path: '/education/myResources/myUpload',
belongTo: 'myUpload' belongTo: '/education/myResources/myUpload'
}, },
{ {
label: '收藏分享', label: '收藏分享',
path: '/education/myResources/favorShare', path: '/education/myResources/favorShare',
belongTo: 'favorShare' belongTo: '/education/myResources/favorShare'
} }
], ],
tabBarMenus: [ tabBarMenus: [
...@@ -57,80 +53,28 @@ export default { ...@@ -57,80 +53,28 @@ export default {
belongTo: 'schoolResources' belongTo: 'schoolResources'
} }
], ],
currentList: {}, scroll: ''
listData: {
firstLevel: [
{
listTitle: '个人文件夹 (2)',
list: [
{
title: '乱七八糟文件夹',
descript: '我上传了10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'secondLevel'
},
{
title: '不三不四文件夹',
descript: '我上传了10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'secondLevel'
}
]
},
{
listTitle: '学校文件夹 (20)',
list: [
{
title: '教案文件夹',
descript: '我上传了10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'secondLevel'
},
{
title: '工作计划文件夹',
descript: '我上传了10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'secondLevel'
},
{
title: '总结',
descript: '我上传了10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'secondLevel'
}
]
}
]
}
} }
}, },
methods: { methods: {
intoFolder (item) { initDataFromRoute (route) {
/* 点击文件夹进入下一级 */ /* 根据路由参数来显示对应数据 */
if (item.isFolder) { this.tabBarMenus[0].belongTo = route.meta.belongTo
let routerName console.log(this.tabBarMenus[0].belongTo)
let routerPath if (route.meta.showTabs) {
if (item.nextIsFolder) { this.showTabs = true
routerPath = '/education/myResources/myUpload/folderLevel' } else {
routerName = 'myUploadFolderLevel' this.showTabs = false
} else { }
routerPath = '/education/myResources/myUpload/fileLevel' if (route.meta.hidePrevPage) {
routerName = 'myUploadFileLevel' this.isShowPrevPage = false
} } else {
this.$router.push({ this.isShowPrevPage = true
name: routerName, }
path: routerPath, if (route.query.title) {
query: { this.title = route.query.title
folder: item.folderData, } else {
title: item.title this.title = route.meta.title
}
})
} }
} }
}, },
...@@ -140,7 +84,14 @@ export default { ...@@ -140,7 +84,14 @@ export default {
click: true click: true
}) })
}) })
this.currentList = this.listData.firstLevel },
created () {
this.initDataFromRoute(this.$route)
},
watch: {
$route (to, from) {
this.initDataFromRoute(to)
}
} }
} }
</script> </script>
...@@ -148,8 +99,5 @@ export default { ...@@ -148,8 +99,5 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.content { .content {
background: white; background: white;
.search-ctn {
padding: 10px 15px;
}
} }
</style> </style>
<template>
<div class="container">
<div class="search-ctn">
<searchs></searchs>
</div>
<folder-list
v-for="(folderListItem, folderListIndex) of currentList"
:key="folderListIndex"
:list="folderListItem.list"
:list-title="folderListItem.listTitle"
@folderClick="intoFolder">
</folder-list>
</div>
</template>
<script>
export default {
name: 'MyUpload',
components: {
Searchs: () => import('./components/Searchs'),
FolderList: () => import('./components/FolderList')
},
data () {
return {
currentList: {},
listData: {
firstLevel: [
{
listTitle: '个人文件夹 (2)',
list: [
{
title: '乱七八糟文件夹',
descript: '我上传了10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'secondLevel'
},
{
title: '不三不四文件夹',
descript: '我上传了10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'secondLevel'
},
{
title: '不三不四文件夹',
descript: '我上传了10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'secondLevel'
},
{
title: '不三不四文件夹',
descript: '我上传了10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'secondLevel'
}
]
},
{
listTitle: '学校文件夹 (20)',
list: [
{
title: '教案文件夹',
descript: '我上传了10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'secondLevel'
},
{
title: '工作计划文件夹',
descript: '我上传了10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'secondLevel'
},
{
title: '总结',
descript: '我上传了10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'secondLevel'
}
]
}
]
}
}
},
methods: {
intoFolder (item) {
/* 点击文件夹进入下一级 */
if (item.isFolder) {
let routerName
let routerPath
if (item.nextIsFolder) {
routerPath = '/education/myResources/myUpload/folderLevel'
routerName = 'myUploadFolderLevel'
} else {
routerPath = '/education/myResources/myUpload/fileLevel'
routerName = 'myUploadFileLevel'
}
this.$router.push({
name: routerName,
path: routerPath,
query: {
folder: item.folderData,
title: item.title
}
})
}
}
},
mounted () {
this.currentList = this.listData.firstLevel
}
}
</script>
<style lang="less" scoped>
.container {
.search-ctn {
padding: 20px 15px 10px 15px;
}
}
</style>
<template> <template>
<div class="container"> <div class="container">
<v-header :title="title"> <search-fold></search-fold>
<span slot="action" class="header-slot pull-right"></span> <file-list :mode="'myUpload'" :list="fileList" @handleClickItem="toggleShowBtn" @handleOpen="openFile" @handleShare="shareFile"></file-list>
</v-header>
<div class="content" ref="contentWrapper">
<div>
<search-fold></search-fold>
<file-list :mode="'myUpload'" :list="fileList" @handleClickItem="toggleShowBtn" @handleOpen="openFile" @handleShare="shareFile"></file-list>
<tab-bar :menus="tabBarMenus"></tab-bar>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import BScroll from 'better-scroll'
export default { export default {
name: 'MyUploadFileLevel', name: 'MyUploadFileLevel',
components: { components: {
VHeader: () => import('@/common/header/VHeader'),
TabBar: () => import('@/common/tabBar/TabBar'),
FileList: () => import('./components/FileList'), FileList: () => import('./components/FileList'),
SearchFold: () => import('./components/SearchFold') SearchFold: () => import('./components/SearchFold')
}, },
data () { data () {
return { return {
title: '文档列表',
tabBarMenus: [
{
label: '我的资源',
icon: '&#xe89e;',
path: '/education/myResources/myUpload',
belongTo: 'myUploadFileLevel'
},
{
label: '学习资源库',
icon: '&#xe87d;',
path: '/education/schoolResources/index',
belongTo: 'schoolResources'
}
],
fileList: [ fileList: [
{ {
name: '德育负责人操作手册.docx', name: '德育负责人操作手册.docx',
...@@ -81,20 +55,9 @@ export default { ...@@ -81,20 +55,9 @@ export default {
created () { created () {
}, },
mounted () { mounted () {
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.contentWrapper, {
click: true
})
})
if (this.$route.query) {
this.title = this.$route.query.title
}
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.content {
background: white;
}
</style> </style>
<template> <template>
<div class="container"> <div class="container">
<v-header :title="title"> <div class="search-ctn">
<span slot="action" class="header-slot pull-right"></span> <searchs></searchs>
</v-header>
<div class="content" ref="contentWrapper">
<div>
<div class="search-ctn">
<searchs></searchs>
</div>
<folder-list
v-for="(folderListItem, folderListIndex) of currentList"
:key="folderListIndex"
:list="folderListItem.list"
@folderClick="intoFolder">
</folder-list>
<tab-bar :menus="tabBarMenus"></tab-bar>
</div> </div>
<folder-list
v-for="(folderListItem, folderListIndex) of currentList"
:key="folderListIndex"
:list="folderListItem.list"
@folderClick="intoFolder">
</folder-list>
</div> </div>
</div>
</template> </template>
<script> <script>
import BScroll from 'better-scroll'
export default { export default {
name: 'MyUploadFolderLevel', name: 'MyUploadFolderLevel',
components: { components: {
VHeader: () => import('@/common/header/VHeader'),
TabBar: () => import('@/common/tabBar/TabBar'),
Searchs: () => import('./components/Searchs'), Searchs: () => import('./components/Searchs'),
FolderList: () => import('./components/FolderList') FolderList: () => import('./components/FolderList')
}, },
data () { data () {
return { return {
title: '文件夹名称',
tabBarMenus: [
{
label: '我的资源',
icon: '&#xe89e;',
path: '/education/myResources/myUpload',
belongTo: 'myUploadFolderLevel'
},
{
label: '学习资源库',
icon: '&#xe87d;',
path: '/education/schoolResources/index',
belongTo: 'schoolResources'
}
],
currentList: {}, currentList: {},
listData: { listData: {
secondLevel: [ secondLevel: [
...@@ -119,20 +92,13 @@ export default { ...@@ -119,20 +92,13 @@ export default {
} }
}, },
mounted () { mounted () {
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.contentWrapper, {
click: true
})
})
if (this.$route.query) { if (this.$route.query) {
this.title = this.$route.query.title
this.currentList = this.listData[this.$route.query.folder] this.currentList = this.listData[this.$route.query.folder]
} }
}, },
watch: { watch: {
$route (val) { $route (val) {
if (val.query) { if (val.query) {
this.title = val.query.title
this.currentList = this.listData[val.query.folder] this.currentList = this.listData[val.query.folder]
} }
} }
...@@ -141,10 +107,9 @@ export default { ...@@ -141,10 +107,9 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.content { .container {
background: white;
.search-ctn { .search-ctn {
padding: 15px; padding: 20px 15px 10px 15px;
} }
} }
</style> </style>
...@@ -22,9 +22,9 @@ ...@@ -22,9 +22,9 @@
</div> </div>
</x-button> </x-button>
</div> </div>
<teacher-selector :show="teacherSelectorShow" @handleSubmit="teacherSelectorShow = false"></teacher-selector>
</div> </div>
</div> </div>
<teacher-selector :show="teacherSelectorShow" @handleSubmit="teacherSelectorShow = false"></teacher-selector>
</div> </div>
</template> </template>
...@@ -42,6 +42,7 @@ export default { ...@@ -42,6 +42,7 @@ export default {
data () { data () {
return { return {
title: '分享文档', title: '分享文档',
scroll: '',
teacherSelectorShow: false teacherSelectorShow: false
} }
}, },
...@@ -61,7 +62,7 @@ export default { ...@@ -61,7 +62,7 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.content { .content {
padding: 0 20px; padding: 0 15px;
background: white; background: white;
/deep/ .add-btn { /deep/ .add-btn {
margin-top: 20px; margin-top: 20px;
...@@ -69,21 +70,21 @@ export default { ...@@ -69,21 +70,21 @@ export default {
border-style: dashed; border-style: dashed;
color: #1890FF; color: #1890FF;
border-color: #1890FF; border-color: #1890FF;
font-size: 18px; font-size: 16px;
} }
.share-header { .share-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: 25px; margin-top: 20px;
.dashed { .dashed {
flex: 1; flex: 1;
border-top: 3px dashed #AAAAAA; border-top: 3px dashed #AAAAAA;
} }
.person-count { .person-count {
padding: 0 10px; padding: 0 10px;
font-size: 18px; font-size: 16px;
color: #7F7F7F; color: #7F7F7F;
} }
} }
...@@ -95,10 +96,10 @@ export default { ...@@ -95,10 +96,10 @@ export default {
/deep/ .share-list { /deep/ .share-list {
margin-top: 25px; margin-top: 25px;
.person { .person {
margin: 18px 0; margin: 16px 0;
width: 25%; width: 27%;
height: 45px; height: 40px;
margin-right: 8%; margin-right: 6%;
background: #F1F5F8; background: #F1F5F8;
&:after{ &:after{
border: none; border: none;
...@@ -114,13 +115,12 @@ export default { ...@@ -114,13 +115,12 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.name { .name {
padding-left: 5px;
padding-top: 2px; padding-top: 2px;
font-size: 18px; font-size: 15px;
} }
.iconfont { .iconfont {
font-size: 20px; font-size: 17px;
margin-right: -5px; margin-right: -10px;
} }
} }
} }
......
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
<!-- 重命名弹窗 --> <!-- 重命名弹窗 -->
<div v-transfer-dom> <div v-transfer-dom>
<x-dialog v-model="renameDialog" hide-on-blur :dialog-style="{'max-width': '300px', width: '80%'}"> <x-dialog v-model="renameDialog" hide-on-blur :dialog-style="{ 'max-width': '100%',width: '90%'}">
<div class="rename-ctn"> <div class="rename-ctn">
<div class="headers"> <div class="headers">
<span>重命名</span> <span>重命名</span>
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
<!-- 删除确认弹窗 --> <!-- 删除确认弹窗 -->
<div v-transfer-dom> <div v-transfer-dom>
<x-dialog v-model="deleteDialog" hide-on-blur :dialog-style="{'max-width': '300px', width: '80%'}"> <x-dialog v-model="deleteDialog" hide-on-blur :dialog-style="{ 'max-width': '100%',width: '90%'}">
<div class="delete-ctn"> <div class="delete-ctn">
<div class="headers"> <div class="headers">
<span>删除确认</span> <span>删除确认</span>
...@@ -135,15 +135,16 @@ export default { ...@@ -135,15 +135,16 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.radio-ctn { .radio-ctn {
padding: 20px; padding: 15px;
display: flex; display: flex;
.radio-item { .radio-item {
margin-right: 10px; margin-right: 10px;
.radio-label { .radio-label {
font-size: 14px;
display: inline-block; display: inline-block;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
padding: 0 15px; padding: 0 10px;
border-radius: 30px; border-radius: 30px;
background: #F2F2F2; background: #F2F2F2;
color: #333333; color: #333333;
...@@ -158,14 +159,14 @@ export default { ...@@ -158,14 +159,14 @@ export default {
/deep/ .cellgroup-ctn { /deep/ .cellgroup-ctn {
.weui-cells{ .weui-cells{
margin-top: 0; margin-top: 0;
padding-left: 25px; padding-left: 20px;
&:before, &:after{ &:before, &:after{
border: none; border: none;
} }
.weui-cell { .weui-cell {
align-items: flex-start; align-items: flex-start;
padding-top: 25px; padding-top: 18px;
padding-bottom: 20px; padding-bottom: 15px;
padding-left: 0; padding-left: 0;
&:before { &:before {
border-top: none; border-top: none;
...@@ -174,26 +175,25 @@ export default { ...@@ -174,26 +175,25 @@ export default {
.iconfont { .iconfont {
display:block; display:block;
margin-right: 7px; margin-right: 7px;
margin-top: -2px; font-size: 22px;
font-size: 30px;
} }
.vux-cell-bd { .vux-cell-bd {
.vux-label { .vux-label {
font-size: 18px; font-size: 16px;
font-weight: 500; font-weight: 500;
} }
.after-title-ctn { .after-title-ctn {
.document-descript { .document-descript {
font-size: 14px; font-size: 15px;
color: rgb(128, 128, 128); color: rgb(128, 128, 128);
margin-top: 6px; margin-top: 6px;
} }
.btns-ctn { .btns-ctn {
margin: 25px 0 -5px -20px; margin: 18px 0 -5px -20px;
.btn-item { .btn-item {
display: inline-block; display: inline-block;
width: 18%; width: 18%;
font-size: 14px; font-size: 13px;
color: #1890FF; color: #1890FF;
text-align: center; text-align: center;
&:not(:last-child){ &:not(:last-child){
...@@ -208,16 +208,16 @@ export default { ...@@ -208,16 +208,16 @@ export default {
} }
.rename-ctn, .delete-ctn { .rename-ctn, .delete-ctn {
padding: 20px; padding: 15px;
font-size: 18px; font-size: 15px;
color: black; color: black;
.headers { .headers {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 30px; height: 28px;
line-height: 30px; line-height: 28px;
.iconfont { .iconfont {
font-size: 22px; font-size: 20px;
} }
} }
/deep/ .rename-input { /deep/ .rename-input {
...@@ -232,19 +232,19 @@ export default { ...@@ -232,19 +232,19 @@ export default {
.tips { .tips {
text-align: left; text-align: left;
color: rgb(39, 39, 39); color: rgb(39, 39, 39);
font-size: 16px; font-size: 15px;
margin: 20px 0 35px 0; margin: 20px 0 30px 0;
} }
/deep/ .btn-ctn { /deep/ .btn-ctn {
text-align: center; text-align: center;
padding: 20px 0 10px 0; padding: 15px 0 10px 0;
.weui-btn { .weui-btn {
width: 120px; width: 1.8rem;
height: 40px; height: 0.7rem;
font-size: 18px; font-size: 16px;
} }
.reset { .reset {
margin-right: 30px; margin-right: 0.25rem;
border-color: #1890FF; border-color: #1890FF;
color: #1890FF; color: #1890FF;
} }
......
...@@ -47,19 +47,19 @@ export default { ...@@ -47,19 +47,19 @@ export default {
/deep/ .cellgroup-ctn { /deep/ .cellgroup-ctn {
.weui-cells__title { .weui-cells__title {
margin-bottom: 15px; margin-bottom: 10px;
font-size: 18px; font-size: 15px;
} }
.weui-cells{ .weui-cells{
margin-top: 0; margin-top: 0;
padding-left: 25px; padding-left: 20px;
&:before, &:after{ &:before, &:after{
border: none; border: none;
} }
.weui-cell { .weui-cell {
align-items: flex-start; align-items: flex-start;
padding-top: 20px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 12px;
padding-left: 0; padding-left: 0;
&:before { &:before {
border-top: none; border-top: none;
...@@ -69,11 +69,11 @@ export default { ...@@ -69,11 +69,11 @@ export default {
display:block; display:block;
margin-right: 10px; margin-right: 10px;
margin-top: -5px; margin-top: -5px;
font-size: 35px; font-size: 30px;
} }
.vux-cell-bd { .vux-cell-bd {
.vux-label { .vux-label {
font-size: 18px; font-size: 16px;
font-weight: bold; font-weight: bold;
} }
.descript { .descript {
......
...@@ -50,36 +50,36 @@ export default { ...@@ -50,36 +50,36 @@ export default {
.search-fold-ctn { .search-fold-ctn {
.fold-header { .fold-header {
text-align: center; text-align: center;
height: 40px; height: 30px;
line-height: 40px; line-height: 30px;
font-size: 18px; font-size: 14px;
background: #F2F2F2; background: #F2F2F2;
.iconfont { .iconfont {
color: #1890FF; color: #1890FF;
font-size: 16px;
} }
} }
/deep/ .fold-ctn { /deep/ .fold-ctn {
font-size: 18px; font-size: 16px;
&:before { &:before {
border: none; border: none;
} }
.timerSelect { .timerSelect {
border-bottom: 1px solid #D7D7D7; border-bottom: 1px solid #D7D7D7;
height: 55px; height: 45px;
.vux-cell-primary { .vux-cell-primary {
-webkit-box-flex: none; -webkit-box-flex: none;
-ms-flex: none; -ms-flex: none;
flex: none; flex: none;
} }
.vux-cell-bd { .vux-cell-bd {
width: 108px; width: 94px;
p { p {
width: 108px;
.vux-label { .vux-label {
color: black; color: black;
width: 108px; width: 108px;
padding-left: 5px; padding-left: 5px;
font-size: 18px; font-size: 16px;
padding-top: 10px; padding-top: 10px;
} }
} }
...@@ -91,7 +91,7 @@ export default { ...@@ -91,7 +91,7 @@ export default {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
text-align: left; text-align: left;
font-size: 18px; font-size: 16px;
} }
.vux-cell-value { .vux-cell-value {
color: rgb(75, 75, 75); color: rgb(75, 75, 75);
...@@ -109,7 +109,7 @@ export default { ...@@ -109,7 +109,7 @@ export default {
} }
.vux-x-input { .vux-x-input {
border-bottom: 1px solid #D7D7D7; border-bottom: 1px solid #D7D7D7;
height: 55px; height: 45px;
&:before { &:before {
border: none; border: none;
} }
...@@ -118,7 +118,7 @@ export default { ...@@ -118,7 +118,7 @@ export default {
} }
.iconfont { .iconfont {
line-height: 45px; line-height: 45px;
font-size: 18px; font-size: 16px;
margin-right: 15px; margin-right: 15px;
} }
} }
...@@ -126,14 +126,14 @@ export default { ...@@ -126,14 +126,14 @@ export default {
/deep/ .btn-ctn { /deep/ .btn-ctn {
text-align: center; text-align: center;
padding: 20px 0 5px 0; padding: 15px 0 10px 0;
.weui-btn { .weui-btn {
width: 120px; width: 1.8rem;
height: 45px; height: 0.7rem;
font-size: 18px; font-size: 16px;
} }
.reset { .reset {
margin-right: 30px; margin-right: 0.25rem;
border-color: #1890FF; border-color: #1890FF;
color: #1890FF; color: #1890FF;
} }
......
...@@ -22,29 +22,4 @@ export default { ...@@ -22,29 +22,4 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
/deep/ .vux-search-box {
.weui-search-bar {
border: none;
&:before, &:after {
border:none;
}
background: #F2F2F2;
border-radius: 30px;
.weui-search-bar__form {
&:before, &:after {
border: none;
border-radius: 30px;
background: #F2F2F2;
}
.weui-search-bar__box {
border-radius: 30px;
}
.weui-search-bar__label {
background: #F2F2F2;
border-radius: 30px;
}
}
}
}
</style> </style>
<template> <template>
<div class="container"> <div class="container">
<v-header :title="title" :isShowPrevPage="isShowPrevPage">
<span slot="action" class="header-slot pull-right"></span>
</v-header>
<div class="content" ref="contentWrapper"> <div class="content" ref="contentWrapper">
<div> <div>
<div class="search-ctn"> <router-view></router-view>
<searchs></searchs>
</div>
<folder-list
v-for="(folderListItem, folderListIndex) of currentList"
:key="folderListIndex"
:list="folderListItem.list"
:list-title="folderListItem.listTitle"
@folderClick="intoFolder">
</folder-list>
<tab-bar :menus="tabBarMenus"></tab-bar>
</div> </div>
</div> </div>
<tab-bar :menus="tabBarMenus"></tab-bar>
</div> </div>
</template> </template>
...@@ -23,12 +17,14 @@ import BScroll from 'better-scroll' ...@@ -23,12 +17,14 @@ import BScroll from 'better-scroll'
export default { export default {
name: 'Index', name: 'Index',
components: { components: {
TabBar: () => import('@/common/tabBar/TabBar'), VHeader: () => import('@/common/header/VHeader'),
Searchs: () => import('./../myResources/components/Searchs'), TabBar: () => import('@/common/tabBar/TabBar')
FolderList: () => import('./../myResources/components/FolderList')
}, },
data () { data () {
return { return {
title: '标题',
isShowPrevPage: true,
scroll: '',
tabBarMenus: [ tabBarMenus: [
{ {
label: '我的资源', label: '我的资源',
...@@ -42,61 +38,27 @@ export default { ...@@ -42,61 +38,27 @@ export default {
path: '/education/schoolResources/index', path: '/education/schoolResources/index',
belongTo: 'schoolResources' belongTo: 'schoolResources'
} }
], ]
currentList: {},
listData: {
firstLevel: [
{
list: [
{
title: '教案文件夹',
descript: '常规文件夹 共10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'secondLevel'
},
{
title: '方案文件夹',
descript: '常规文件夹 共10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'secondLevel'
},
{
title: '总结',
descript: '任务文件夹 共10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'secondLevel'
}
]
}
]
}
} }
}, },
methods: { methods: {
intoFolder (item) { initDataFromRoute (route) {
/* 点击文件夹进入下一级 */ /* 根据路由参数来显示对应数据 */
if (item.isFolder) { this.tabBarMenus[1].belongTo = route.meta.belongTo
let routerName if (route.meta.showTabs) {
let routerPath this.showTabs = true
if (item.nextIsFolder) { } else {
routerPath = '/education/schoolResources/folderLevel' this.showTabs = false
routerName = 'schoolFolderLevel' }
} else { if (route.meta.hidePrevPage) {
routerPath = '/education/schoolResources/fileLevel' this.isShowPrevPage = false
routerName = 'schoolFileLevel' } else {
} this.isShowPrevPage = true
this.$router.push({ }
name: routerName, if (route.query.title) {
path: routerPath, this.title = route.query.title
query: { } else {
folder: item.folderData, this.title = route.meta.title
title: item.title
}
})
} }
} }
}, },
...@@ -106,7 +68,14 @@ export default { ...@@ -106,7 +68,14 @@ export default {
click: true click: true
}) })
}) })
this.currentList = this.listData.firstLevel },
created () {
this.initDataFromRoute(this.$route)
},
watch: {
$route (to, from) {
this.initDataFromRoute(to)
}
} }
} }
</script> </script>
...@@ -114,8 +83,5 @@ export default { ...@@ -114,8 +83,5 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.content { .content {
background: white; background: white;
.search-ctn {
padding: 20px 15px 10px 15px;
}
} }
</style> </style>
<template> <template>
<div class="container"> <div class="container">
<v-header :title="title"> <search-fold></search-fold>
<span slot="action" class="header-slot pull-right"></span> <file-list :mode="'schoolResources'" :list="fileList" @handleClickItem="toggleShowBtn" @handleOpen="openFile" @handleShare="shareFile"></file-list>
</v-header>
<div class="content" ref="contentWrapper">
<div>
<search-fold></search-fold>
<file-list :mode="'schoolResources'" :list="fileList" @handleClickItem="toggleShowBtn" @handleOpen="openFile" @handleShare="shareFile"></file-list>
<tab-bar :menus="tabBarMenus"></tab-bar>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import BScroll from 'better-scroll'
export default { export default {
name: 'SchoolFileLevel', name: 'SchoolFileLevel',
components: { components: {
VHeader: () => import('@/common/header/VHeader'),
TabBar: () => import('@/common/tabBar/TabBar'),
FileList: () => import('./../myResources/components/FileList'), FileList: () => import('./../myResources/components/FileList'),
SearchFold: () => import('./../myResources/components/SearchFold') SearchFold: () => import('./../myResources/components/SearchFold')
}, },
data () { data () {
return { return {
title: '文档列表',
tabBarMenus: [
{
label: '我的资源',
icon: '&#xe89e;',
path: '/education/myResources/myUpload',
belongTo: 'myUploadFileLevel'
},
{
label: '学习资源库',
icon: '&#xe87d;',
path: '/education/schoolResources/index',
belongTo: 'schoolFileLevel'
}
],
fileList: [ fileList: [
{ {
name: '德育负责人操作手册.docx', name: '德育负责人操作手册.docx',
...@@ -81,20 +55,9 @@ export default { ...@@ -81,20 +55,9 @@ export default {
created () { created () {
}, },
mounted () { mounted () {
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.contentWrapper, {
click: true
})
})
if (this.$route.query) {
this.title = this.$route.query.title
}
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.content {
background: white;
}
</style> </style>
<template> <template>
<div class="container"> <div class="container">
<v-header :title="title"> <div class="search-ctn">
<span slot="action" class="header-slot pull-right"></span> <searchs></searchs>
</v-header>
<div class="content" ref="contentWrapper">
<div>
<div class="search-ctn">
<searchs></searchs>
</div>
<folder-list
v-for="(folderListItem, folderListIndex) of currentList"
:key="folderListIndex"
:list="folderListItem.list"
@folderClick="intoFolder">
</folder-list>
<tab-bar :menus="tabBarMenus"></tab-bar>
</div>
</div> </div>
<folder-list
v-for="(folderListItem, folderListIndex) of currentList"
:key="folderListIndex"
:list="folderListItem.list"
@folderClick="intoFolder">
</folder-list>
</div> </div>
</template> </template>
<script> <script>
import BScroll from 'better-scroll'
export default { export default {
name: 'SchoolFolderLevel', name: 'SchoolFolderLevel',
components: { components: {
VHeader: () => import('@/common/header/VHeader'),
TabBar: () => import('@/common/tabBar/TabBar'),
Searchs: () => import('./../myResources/components/Searchs'), Searchs: () => import('./../myResources/components/Searchs'),
FolderList: () => import('./../myResources/components/FolderList') FolderList: () => import('./../myResources/components/FolderList')
}, },
data () { data () {
return { return {
title: '文件夹名称',
tabBarMenus: [
{
label: '我的资源',
icon: '&#xe89e;',
path: '/education/myResources/myUpload',
belongTo: 'myUploadFolderLevel'
},
{
label: '学习资源库',
icon: '&#xe87d;',
path: '/education/schoolResources/index',
belongTo: 'schoolFolderLevel'
}
],
currentList: {}, currentList: {},
listData: { listData: {
secondLevel: [ secondLevel: [
...@@ -119,20 +93,13 @@ export default { ...@@ -119,20 +93,13 @@ export default {
} }
}, },
mounted () { mounted () {
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.contentWrapper, {
click: true
})
})
if (this.$route.query) { if (this.$route.query) {
this.title = this.$route.query.title
this.currentList = this.listData[this.$route.query.folder] this.currentList = this.listData[this.$route.query.folder]
} }
}, },
watch: { watch: {
$route (val) { $route (val) {
if (val.query) { if (val.query) {
this.title = val.query.title
this.currentList = this.listData[val.query.folder] this.currentList = this.listData[val.query.folder]
} }
} }
...@@ -141,10 +108,9 @@ export default { ...@@ -141,10 +108,9 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.content { .container {
background: white;
.search-ctn { .search-ctn {
padding: 15px; padding: 20px 15px 10px 15px;
} }
} }
</style> </style>
<template>
<div class="container">
<div class="search-ctn">
<searchs></searchs>
</div>
<folder-list
v-for="(folderListItem, folderListIndex) of currentList"
:key="folderListIndex"
:list="folderListItem.list"
:list-title="folderListItem.listTitle"
@folderClick="intoFolder">
</folder-list>
</div>
</template>
<script>
export default {
name: 'SchoolResources',
components: {
Searchs: () => import('./../myResources/components/Searchs'),
FolderList: () => import('./../myResources/components/FolderList')
},
data () {
return {
currentList: {},
listData: {
firstLevel: [
{
list: [
{
title: '教案文件夹',
descript: '常规文件夹 共10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'secondLevel'
},
{
title: '方案文件夹',
descript: '常规文件夹 共10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'secondLevel'
},
{
title: '总结',
descript: '任务文件夹 共10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'secondLevel'
}
]
}
]
}
}
},
methods: {
intoFolder (item) {
/* 点击文件夹进入下一级 */
if (item.isFolder) {
let routerName
let routerPath
if (item.nextIsFolder) {
routerPath = '/education/schoolResources/folderLevel'
routerName = 'schoolFolderLevel'
} else {
routerPath = '/education/schoolResources/fileLevel'
routerName = 'schoolFileLevel'
}
this.$router.push({
name: routerName,
path: routerPath,
query: {
folder: item.folderData,
title: item.title
}
})
}
}
},
mounted () {
this.currentList = this.listData.firstLevel
}
}
</script>
<style lang="less" scoped>
.container {
.search-ctn {
padding: 20px 15px 10px 15px;
}
}
</style>
// 我的资源-我上传的 // 我的资源
const MY_RESOURCES = [ const MY_RESOURCES = [
{ {
path: '/education/myResources/myUpload', path: '/education/myResources',
name: 'myResources', name: 'myResources',
component: resolve => require(['pages/education/schoolBasedResources/myResources/Index'], resolve), component: resolve => require(['pages/education/schoolBasedResources/myResources/Index'], resolve),
meta: { redirect: '/education/myResources/myUpload',
belongTo: 'myUpload' children: [
} { // 我上传的
} path: '/education/myResources/myUpload',
] name: 'myUpload',
component: resolve => require(['pages/education/schoolBasedResources/myResources/MyUpload'], resolve),
// 我上传的-文件夹列表 meta: {
const MYUPLOAD_FOLDER_LEVEL = [ belongTo: 'myUpload',
{ showTabs: true,
path: '/education/myResources/myUpload/folderLevel', title: '校本资源',
name: 'myUploadFolderLevel', hidePrevPage: true
component: resolve => require(['pages/education/schoolBasedResources/myResources/MyUploadFolderLevel'], resolve), }
meta: { },
belongTo: 'myUploadFolderLevel' { // 我上传的-文件夹列表
} path: '/education/myResources/myUpload/folderLevel',
} name: 'myUploadFolderLevel',
] component: resolve => require(['pages/education/schoolBasedResources/myResources/MyUploadFolderLevel'], resolve),
meta: {
// 我上传的-文件列表(非文件夹) belongTo: 'myUploadFolderLevel'
const MYUPLOAD_FILE_LEVEL = [ }
{ },
path: '/education/myResources/myUpload/fileLevel', { // 我上传的-文件列表(非文件夹)
name: 'myUploadFileLevel', path: '/education/myResources/myUpload/fileLevel',
component: resolve => require(['pages/education/schoolBasedResources/myResources/MyUploadFileLevel'], resolve), name: 'myUploadFileLevel',
meta: { component: resolve => require(['pages/education/schoolBasedResources/myResources/MyUploadFileLevel'], resolve),
belongTo: 'myUploadFileLevel' meta: {
} belongTo: 'myUploadFileLevel'
}
},
{ // 收藏分享
path: '/education/myResources/favorShare',
name: 'favorShare',
component: resolve => require(['pages/education/schoolBasedResources/myResources/FavorShare'], resolve),
meta: {
belongTo: 'favorShare',
showTabs: true,
title: '校本资源',
hidePrevPage: true
}
}
]
} }
] ]
// 我的资源-收藏分享 // 学校资源
const MY_RESOURCES_FAVORSHARE = [ const SCHOOL_RESOURCES = [
{ {
path: '/education/myResources/favorShare', path: '/education/schoolResources',
name: 'favorShare', name: 'schoolResources',
component: resolve => require(['pages/education/schoolBasedResources/myResources/FavorShare'], resolve), component: resolve => require(['pages/education/schoolBasedResources/schoolResources/Index'], resolve),
meta: { redirect: '/education/schoolResources/index',
belongTo: 'favorShare' children: [
} { // 首页
path: '/education/schoolResources/index',
name: 'schoolResourcesIndex',
component: resolve => require(['pages/education/schoolBasedResources/schoolResources/SchoolResources'], resolve),
meta: {
belongTo: 'schoolResources',
title: '校本资源',
hidePrevPage: true
}
},
{ // 学校资源-文件夹列表
path: '/education/schoolResources/folderLevel',
name: 'schoolFolderLevel',
component: resolve => require(['pages/education/schoolBasedResources/schoolResources/SchoolFolderLevel'], resolve),
meta: {
belongTo: 'schoolFolderLevel'
}
},
{ // 学校资源-文件列表(非文件夹)
path: '/education/schoolResources/fileLevel',
name: 'schoolFileLevel',
component: resolve => require(['pages/education/schoolBasedResources/schoolResources/SchoolFileLevel'], resolve),
meta: {
belongTo: 'schoolFileLevel'
}
}
]
} }
] ]
// 文档详情 // 共用页面
const DOCUMENT_DETAIL = [ const SCHOOL_COMMON = [
{ { // 文档详情
path: '/education/documentDetail', path: '/education/documentDetail',
name: 'documentDetail', name: 'documentDetail',
component: resolve => require(['pages/education/schoolBasedResources/myResources/DocumentDetail'], resolve), component: resolve => require(['pages/education/schoolBasedResources/myResources/DocumentDetail'], resolve),
meta: { meta: {
belongTo: 'documentDetail' belongTo: 'documentDetail'
} }
} },
] { // 分享页面
// 分享页面
const SHARE = [
{
path: '/education/share', path: '/education/share',
name: 'share', name: 'share',
component: resolve => require(['pages/education/schoolBasedResources/myResources/Share'], resolve), component: resolve => require(['pages/education/schoolBasedResources/myResources/Share'], resolve),
...@@ -69,51 +105,8 @@ const SHARE = [ ...@@ -69,51 +105,8 @@ const SHARE = [
} }
} }
] ]
// 学校资源
const SCHOOL_RESOURCES = [
{
path: '/education/schoolResources/index',
name: 'schoolResources',
component: resolve => require(['pages/education/schoolBasedResources/schoolResources/Index'], resolve),
meta: {
belongTo: 'schoolResources'
}
}
]
// 学校资源-文件夹列表
const SCHOOL_FOLDER_LEVEL = [
{
path: '/education/schoolResources/folderLevel',
name: 'schoolFolderLevel',
component: resolve => require(['pages/education/schoolBasedResources/schoolResources/SchoolFolderLevel'], resolve),
meta: {
belongTo: 'schoolFolderLevel'
}
}
]
// 学校资源-文件列表(非文件夹)
const SCHOOL_FILE_LEVEL = [
{
path: '/education/schoolResources/fileLevel',
name: 'schoolFileLevel',
component: resolve => require(['pages/education/schoolBasedResources/schoolResources/SchoolFileLevel'], resolve),
meta: {
belongTo: 'schoolFileLevel'
}
}
]
export default [ export default [
...MY_RESOURCES, ...MY_RESOURCES,
...MYUPLOAD_FOLDER_LEVEL,
...MY_RESOURCES_FAVORSHARE,
...SCHOOL_RESOURCES, ...SCHOOL_RESOURCES,
...MYUPLOAD_FILE_LEVEL, ...SCHOOL_COMMON
...SCHOOL_FOLDER_LEVEL,
...SCHOOL_FILE_LEVEL,
...DOCUMENT_DETAIL,
...SHARE
] ]
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment