修改优化问题

VSSCMP_WEB/src/pages/education/schoolBasedResources/folderManage/components/ManageCtxMenu.vue

@@ -14,7 +14,7 @@
     </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-item label="文件夹名称" prop="name">
                 <el-input placeholder="请输入..." v-model="ruleForm.name"></el-input>
@@ -37,6 +37,9 @@
                     <el-radio label="private">不公开</el-radio>
                     <el-radio label="publicToAll">对所有教师公开</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-form-item>
             <el-form-item class="limit-ctn" v-if="ruleForm.folderType === 'task'" label="每人上传数" prop="limitCount">
@@ -169,12 +172,12 @@ export default {
             },
             usualRules: {
                 name: [
-                    { required: true, message: '请输入活动名称' }
+                    { required: true, message: '请输入文件夹名称' }
                 ]
             },
             taskRules: {
                 name: [
-                    { required: true, message: '请输入活动名称' }
+                    { required: true, message: '请输入文件夹名称' }
                 ],
                 limitCount: [
                     { required: true, message: '请选择是否限制上传数量' }
@@ -245,6 +248,7 @@ export default {
 }
 
 .newfile-dialog {
+    z-index: 50;
     /deep/ .el-dialog__body {
         padding-top: 10px;
         .el-form-item {

VSSCMP_WEB/src/pages/education/schoolBasedResources/myResources/FavorShare.vue

 <template>
-    <div class="container">
-        <v-header :title="'我的资源'" :is-show-prev-page="true"></v-header>
-        <nav-menu :menus="menus"></nav-menu>
-        <div class="main">
-            <div class="headerNav">
-                <div class="leftNav">
-                    <span class="type-title">类型:</span>
-                    <el-radio-group v-model="folderType" size="small" @change="folderTypeChange">
-                        <el-radio-button label="all">全部</el-radio-button>
-                        <el-radio-button label="myFavor">我收藏的</el-radio-button>
-                        <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 class="main">
+        <div class="headerNav">
+            <div class="leftNav">
+                <span class="type-title">类型:</span>
+                <el-radio-group v-model="folderType" size="small" @change="folderTypeChange">
+                    <el-radio-button label="all">全部</el-radio-button>
+                    <el-radio-button label="myFavor">我收藏的</el-radio-button>
+                    <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 class="folderCtn">
-                <div class="smallCtn">
-                    <small-folder
-                        :file-list="currentFileList"
-                        @showMenu="showMenu"
-                        @tableIntoFile="intoFolder">
-                    </small-folder>
-                </div>
+        <div class="folderCtn">
+            <div class="smallCtn">
+                <small-folder
+                    :file-list="currentFileList"
+                    @showMenu="showMenu"
+                    @tableIntoFile="intoFolder">
+                </small-folder>
             </div>
+        </div>
 
-            <favorshare-ctx-menu
-                :menuVisible="menuVisible"
-                :rightMenuData="rightMenuData"
-                :coordinate="coordinate"
-                :menuMode="menuMode"
-                @menuOpenFile="intoFolder">
-            </favorshare-ctx-menu>
+        <favorshare-ctx-menu
+            :menuVisible="menuVisible"
+            :rightMenuData="rightMenuData"
+            :coordinate="coordinate"
+            :menuMode="menuMode"
+            @menuOpenFile="intoFolder">
+        </favorshare-ctx-menu>
 
-            <!-- 侧滑块查看普通文档 -->
-            <el-drawer
-                title="查看"
-                :visible.sync="documentDrawer"
-                :size="'60%'">
-                <span>文档内容</span>
-            </el-drawer>
-        </div>
+        <!-- 侧滑块查看普通文档 -->
+        <el-drawer
+            title="查看"
+            :visible.sync="documentDrawer"
+            :size="'60%'">
+            <span>文档内容</span>
+        </el-drawer>
     </div>
 </template>
 
@@ -60,34 +56,12 @@
 export default {
     name: 'FavorShare',
     components: {
-        VHeader: () => import('@/common/header/VHeader'),
-        NavMenu: () => import('@/common/navMenu/NavMenu'),
         Search: () => import('./components/Search'),
         SmallFolder: () => import('./components/SmallFolder'),
         FavorshareCtxMenu: () => import('./components/FavorshareCtxMenu')
     },
     data () {
         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: 分享给我的 ））
             timeSelect: 'allItem', // 学期选择框数据
             menuMode: '', // 菜单根据模式显示对于内容
@@ -194,48 +168,44 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.container {
-    height: 100%;
+.main {
     min-height: 100%;
-    .main {
-        min-height: 100%;
 
-        .headerNav {
-            display: flex;
-            justify-content: space-between;
-            height: 45px;
-            line-height: 45px;
-            background: #e7e7e7;
+    .headerNav {
+        display: flex;
+        justify-content: space-between;
+        height: 45px;
+        line-height: 45px;
+        background: #e7e7e7;
 
-            /deep/ .leftNav {
-                padding: 0 20px;
-                font-size: 18px;
+        /deep/ .leftNav {
+            padding: 0 20px;
+            font-size: 18px;
 
-                .type-title {
-                    color: rgb(48, 48, 48);
-                }
+            .type-title {
+                color: rgb(48, 48, 48);
+            }
 
-                .el-radio-group {
-                    vertical-align: middle;
-                    margin-bottom: 3px;
+            .el-radio-group {
+                vertical-align: middle;
+                margin-bottom: 3px;
 
-                    .el-radio-button {
-                        margin: 0 5px;
+                .el-radio-button {
+                    margin: 0 5px;
 
-                        .el-radio-button__inner {
-                            border-radius: 25px;
-                        }
+                    .el-radio-button__inner {
+                        border-radius: 25px;
                     }
                 }
             }
+        }
 
-            /deep/ .rightNav {
-                padding: 0 30px;
-                display: flex;
-                .timer-select{
-                    padding-top: 1px;
-                    margin-right: 15px;
-                }
+        /deep/ .rightNav {
+            padding: 0 30px;
+            display: flex;
+            .timer-select{
+                padding-top: 1px;
+                margin-right: 15px;
             }
         }
     }

VSSCMP_WEB/src/pages/education/schoolBasedResources/myResources/Index.vue

 <template>
     <div class="container">
-        <v-header :title="'我的资源'" :is-show-prev-page="true"></v-header>
+        <v-header :title="'我的资源'" :is-show-prev-page="isShowPrevPage"></v-header>
         <nav-menu :menus="menus"></nav-menu>
-        <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.name }}
-                        </el-breadcrumb-item>
-                    </el-breadcrumb>
-                </div>
-                <div class="rightNav">
-                    <search></search>
-                    <div class="feature">
-                        <div :class="{'icon-sel': bigMode}" class="icon-ctn" @click="bigMode = true">
-                            <i class="el-icon-picture"></i>
-                        </div>
-                        <div :class="{'icon-sel': !bigMode}" class="icon-ctn" @click="bigMode = false">
-                            <i class="el-icon-s-operation"></i>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="folderCtn" @contextmenu.prevent="showMenu">
-                <div class="bigCtn" v-if="bigMode">
-                    <big-folder
-                        v-for="file of currentFileList"
-                        :key="file.id" :file-data="file"
-                        @showMenu="showMenu"
-                        @intoFolder="intoFolder(file)"
-                        @uploadFile="uploadFile">
-                    </big-folder>
-                </div>
-                <div class="smallCtn" v-else>
-                    <small-folder
-                        :file-list="currentFileList"
-                        @showMenu="showMenu"
-                        @tableIntoFile="intoFolder"
-                        >
-                    </small-folder>
-                </div>
-            </div>
-
-            <!-- 右键菜单栏 -->
-            <myupload-ctx-menu
-                :menuVisible="menuVisible"
-                :uploadVisible="uploadVisible"
-                :rightMenuData="rightMenuData"
-                :rightMenuFolder="rightMenuFolder"
-                :coordinate="coordinate"
-                :menuMode="menuMode"
-                @showUploadMenu="showUploadMenu"
-                @menuOpenFile="intoFolder">
-            </myupload-ctx-menu>
-
-            <upload-file :selectFolderVisible="selectFolderVisible" @uploadSuccess="selectFolderVisible = false"></upload-file>
-
-            <!-- 侧滑块查看普通文档 -->
-            <el-drawer
-                title="查看"
-                :visible.sync="documentDrawer"
-                :size="'60%'">
-                <span>文档内容</span>
-            </el-drawer>
-
-        </div>
+        <router-view></router-view>
     </div>
 </template>
 
@@ -78,18 +12,14 @@ export default {
     name: 'Index',
     components: {
         VHeader: () => import('@/common/header/VHeader'),
-        NavMenu: () => import('@/common/navMenu/NavMenu'),
-        Search: () => import('./components/Search'),
-        BigFolder: () => import('./components/BigFolder'),
-        SmallFolder: () => import('./components/SmallFolder'),
-        MyuploadCtxMenu: () => import('./components/MyuploadCtxMenu'),
-        UploadFile: () => import('./components/UploadFile')
+        NavMenu: () => import('@/common/navMenu/NavMenu')
     },
     data () {
         return {
+            isShowPrevPage: true,
             menus: [
                 {
-                    name: '我上次的',
+                    name: '我上传的',
                     id: 'tab_1',
                     permission: true,
                     path: '/education/myResources/index'
@@ -106,197 +36,27 @@ export default {
                     permission: true,
                     path: '/education/myResources/myManage'
                 }
-            ],
-            bigMode: true, // 文件夹大小图标模式
-            menuVisible: false, // 右键菜单栏
-            menuMode: '', // 菜单根据模式显示对于内容
-            uploadVisible: false, // 上传菜单栏
-            documentDrawer: false, // 查看文档抽屉
-            rightMenuData: {}, // 右键选中文件夹或文件数据
-            rightMenuFolder: [], // 右键空白储存当前文件夹数据
-            coordinate: { // 菜单栏坐标
-                menuX: '0px',
-                menuY: '0px',
-                uploadX: '0px',
-                uploadY: '0px'
-            },
-            currentFileList: [],
-            selectFolderVisible: false, // 查看文件侧滑框
-            selectFolderList: [], // 上传文件选择文件夹列表
-            breadcrumb: [ // 面包屑
-                {
-                    name: '首页',
-                    isFolder: true,
-                    folderName: 'firstLevelData'
-                }
-            ],
-            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'
-                    }
-                ]
-            }
+            ]
         }
     },
-    mounted () {
-        this.currentFileList = this.fileListData.firstLevelData
-    },
     methods: {
-        backCrumb (index) {
-            /* 点击面包屑返回前几级 */
-            let breadcrumb = this.breadcrumb
-            if (index < breadcrumb.length - 1) {
-                let folderName = breadcrumb[index].folderName
-                this.currentFileList = this.fileListData[folderName]
-                this.breadcrumb = breadcrumb.slice(0, index + 1)
-            }
-        },
-        changeFolderMode () {
-            /* 切换文件夹大小图标模式 */
-            this.bigMode = !this.bigMode
-        },
-        intoFolder (file) {
-            /* 进入下一级文件夹 */
-            if (file.isFolder) {
-                // 双击文件夹
-                let breadcrumbData = {
-                    name: file.name,
-                    isFolder: file.isFolder,
-                    folderName: file.folderData
-                }
-                this.breadcrumb.push(breadcrumbData)
-                this.currentFileList = this.fileListData[file.folderData]
+        initDataFromRoute (route) {
+            /* 根据路由参数来显示对应数据 */
+            if (route.query.folderName) { // 有参数说明不是首页，显示返回上一页
+                this.isShowPrevPage = true
             } else {
-                // 双击文件
-                this.documentDrawer = true
+                this.isShowPrevPage = false
             }
-        },
-        uploadFile (fileData, row) {
-            /* 文件选择上传位置 */
-            this.selectFolderVisible = true
-        },
-        showMenu (MouseEvent, type, row) {
-            /* 右键文件夹或文件时触发 */
-            if (type) {
-                // 右键文件夹或者文件
-                this.menuMode = type
-                this.rightMenuData = row
-                this.rightMenuFolder = []
-            } else {
-                // 右键空白处
-                this.menuMode = 'blank'
-                this.rightMenuFolder = this.currentFileList
-                this.rightMenuData = {}
-            }
-            this.menuVisible = false
-            this.uploadVisible = false
-            this.menuVisible = true
-            let coordinate = this.coordinate
-            coordinate.menuX = MouseEvent.pageX + 5 + 'px'
-            coordinate.menuY = MouseEvent.pageY + 'px'
-            coordinate.uploadX = MouseEvent.pageX + 130 + 'px'
-            coordinate.uploadY = MouseEvent.pageY + 'px'
-            document.addEventListener('click', this.foo) // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
-        },
-        foo () {
-            /* 取消鼠标监听事件 菜单栏 */
-            this.menuVisible = false
-            this.uploadVisible = false
-            document.removeEventListener('click', this.foo) // 关掉监听
-        },
-        showUploadMenu () {
-            this.uploadVisible = !this.uploadVisible
+        }
+    },
+    mounted () {
+    },
+    created () {
+        this.initDataFromRoute(this.$route)
+    },
+    watch: {
+        $route (to, from) {
+            this.initDataFromRoute(to)
         }
     }
 }
@@ -306,95 +66,5 @@ export default {
 .container {
     height: 100%;
     min-height: 100%;
-    .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;
-                        }
-                    }
-
-                }
-            }
-
-            .rightNav {
-                padding: 0 30px;
-                display: flex;
-
-                .feature {
-                    height: 32px;
-                    margin: 7px 0 0 35px;
-                    padding-left: 35px;
-                    border-left: 1px solid #9e9e9e;
-                    display: flex;
-
-                    div {
-                        width: 27px;
-                        height: 27px;
-                        margin: 3px 5px;
-                        text-align: center;
-                        line-height: 55px;
-                        display: flex;
-                        background: #f5f5f5;
-                        cursor: pointer;
-                        &:hover {
-                            border: 1px solid #1890FF;
-                        }
-                        &:active {
-                            opacity: 0.7;
-                        }
-
-                        i {
-                            display: block;
-                            align-self: center;
-                            margin: 0 auto;
-                            font-size: 18px;
-                        }
-                    }
-                }
-            }
-        }
-
-        .folderCtn{
-            min-height: 500px;
-
-            .bigCtn {
-                padding: 15px;
-                display: flex;
-                flex-wrap: wrap;
-            }
-
-            .smallCtn {
-                width: 100%;
-            }
-        }
-
-    }
-}
-
-.icon-sel {
-    border: 1px solid #1890FF;
 }
 </style>

VSSCMP_WEB/src/pages/education/schoolBasedResources/myResources/Material.vue

+<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 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>
+            </div>
+        </div>
+        <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>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Material',
+    // props: {
+    //     taskMode: { // 是否为任务文件夹
+    //         type: Boolean,
+    //         default: false
+    //     }
+    // },
+    data () {
+        return {
+            searchData: '',
+            taskMode: false, // 是否为任务文件夹
+            menuVisible: false, // 右键菜单栏
+            breadcrumb: ['首页'], // 面包屑
+            options: [{
+                value: 'allItem',
+                label: '全部学期'
+            }],
+            deleteVisible: false, // 删除确认弹框
+            coordinate: { // 菜单栏坐标
+                menuX: '0px',
+                menuY: '0px'
+            }
+        }
+    },
+    methods: {
+        initDataFromRoute (route) {
+            /* 根据路由参数初始化数据 */
+            if (route.query.breadcrumb) {
+                this.breadcrumb = JSON.parse(route.query.breadcrumb)
+                this.taskMode = route.query.taskMode
+            }
+        },
+        backCrumb (index) {
+            /* 点击面包屑返回前几级 */
+            if (index < this.breadcrumb.length - 1) {
+                let backPageCount = index - this.breadcrumb.length + 1
+                this.$router.go(backPageCount)
+            }
+        },
+        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'
+        }
+    },
+    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;
+            }
+        }
+    }
+    .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>

VSSCMP_WEB/src/pages/education/schoolBasedResources/myResources/MyManage.vue

 <template>
-    <div class="container">
-        <v-header :title="'我的资源'" :is-show-prev-page="true"></v-header>
-        <nav-menu :menus="menus"></nav-menu>
-        <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.name }}
-                        </el-breadcrumb-item>
-                    </el-breadcrumb>
-                </div>
-                <div class="rightNav" v-show="isFileMode">
-                    <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>
-                </div>
-            </div>
-
-            <!-- 文件夹选择显示页面 -->
-            <div class="folder-mode folderCtn" v-show="!isFileMode">
-                <big-folder
-                    v-for="file of currentFileList"
-                    :key="file.id" :file-data="file"
-                    @intoFolder="intoFolder(file)">
-                </big-folder>
+    <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" v-show="isFileMode">
+                <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>
+            </div> -->
+        </div>
 
-            <!-- 资料列表显示页面 -->
-            <div class="file-mode" v-if="isFileMode">
-                <material :taskMode="taskMode"></material>
-            </div>
+        <!-- 文件夹选择显示页面 -->
+        <div class="folder-mode">
+            <big-folder
+                :file-list="currentFileList"
+                @intoFolder="intoFolder">
+            </big-folder>
         </div>
+
+        <!-- 资料列表显示页面 -->
+        <!-- <div class="file-mode" v-if="isFileMode">
+            <material :taskMode="taskMode"></material>
+        </div> -->
     </div>
 </template>
 
@@ -48,47 +43,19 @@
 export default {
     name: 'MyManage',
     components: {
-        VHeader: () => import('@/common/header/VHeader'),
-        NavMenu: () => import('@/common/navMenu/NavMenu'),
-        BigFolder: () => import('./components/BigFolder'),
-        Material: () => import('./components/Material')
+        BigFolder: () => import('./components/BigFolder')
+        // Material: () => import('./components/Material')
     },
     data () {
         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'
-                }
-            ],
-            breadcrumb: [ // 面包屑
-                {
-                    name: '首页',
-                    isFolder: true,
-                    folderName: 'firstLevelData'
-                }
-            ],
-            isFileMode: false, // 是否资料列表页面
+            breadcrumb: ['首页'], // 面包屑
+            // isFileMode: false, // 是否资料列表页面
             timeSelect: 'allItem', // 学期选择框数据
             options: [{
                 value: 'allItem',
                 label: '全部学期'
             }],
-            taskMode: false, // 是否为任务夹模式
+            // taskMode: false, // 是否为任务夹模式
             currentFileList: [],
             fileListData: {
                 firstLevelData: [
@@ -148,99 +115,121 @@ export default {
             }
         }
     },
-    mounted () {
-        this.currentFileList = this.fileListData.firstLevelData
-    },
     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) {
-            this.isFileMode = false
-            let breadcrumb = this.breadcrumb
-            if (index < breadcrumb.length - 1) {
-                let folderName = breadcrumb[index].folderName
-                this.currentFileList = this.fileListData[folderName]
-                this.breadcrumb = breadcrumb.slice(0, index + 1)
+            /* 点击面包屑返回前几级 */
+            if (index < this.breadcrumb.length - 1) {
+                let backPageCount = index - this.breadcrumb.length + 1
+                this.$router.go(backPageCount)
             }
         },
         intoFolder (file) {
             /* 进入下一级文件夹 */
             if (file.isFolder) {
-                // 双击文件夹
-                let breadcrumbData = {
-                    name: file.name,
-                    isFolder: file.isFolder,
-                    folderName: file.folderData
-                }
-                this.breadcrumb.push(breadcrumbData)
+                // 进入文件夹
+                this.breadcrumb.push(file.name)
                 if (file.ismaterial) {
-                    this.isFileMode = true
-                    if (file.taskMode) {
-                        this.taskMode = true
-                    } else {
-                        this.taskMode = false
-                    }
+                    // 该文件夹为资料列表
+                    // this.isFileMode = true
+                    // if (file.taskMode) {
+                    //     this.taskMode = true
+                    // } else {
+                    //     this.taskMode = false
+                    // }
+                    this.$router.push({
+                        path: '/education/myResources/myManage/material',
+                        query: {
+                            folderName: file.folderData,
+                            breadcrumb: JSON.stringify(this.breadcrumb),
+                            taskMode: file.taskMode
+                        }
+                    })
                 } else {
-                    this.currentFileList = this.fileListData[file.folderData]
+                    // 改文件夹不是资料列表
+                    this.$router.push({
+                        path: '/education/myResources/myManage',
+                        query: {
+                            folderName: file.folderData,
+                            breadcrumb: JSON.stringify(this.breadcrumb)
+                        }
+                    })
                 }
             }
         }
+    },
+    mounted () {
+    },
+    created () {
+        this.initDataFromRoute(this.$route)
+    },
+    watch: {
+        $route (to, from) {
+            this.initDataFromRoute(to)
+        }
     }
 
 }
 </script>
 
 <style lang="less" scoped>
-.container {
-    height: 100%;
+.main {
     min-height: 100%;
-    .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;
+    .headerNav {
+        display: flex;
+        justify-content: space-between;
+        height: 45px;
+        line-height: 45px;
+        background: #e7e7e7;
 
-                .el-breadcrumb {
-                    font-size: 18px;
-                    line-height: 45px;
-                    .el-breadcrumb__item {
-                        &:not(:last-child) .el-breadcrumb__inner{
-                            cursor: pointer;
-                            &:hover {
-                                color: #1890FF;
-                            }
-                        }
+        /deep/ .leftNav {
+            padding: 0 20px;
+            font-size: 18px;
 
-                        &:last-child .el-breadcrumb__inner{
-                            color: black;
+            .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{
-            padding: 15px;
+        /deep/ .rightNav {
+            padding: 0 30px;
             display: flex;
-            flex-wrap: wrap;
+            .timer-select{
+                padding-top: 1px;
+                margin-right: 15px;
+            }
         }
     }
+
+    .folderCtn{
+        padding: 15px;
+        display: flex;
+        flex-wrap: wrap;
+    }
 }
 
 </style>

VSSCMP_WEB/src/pages/education/schoolBasedResources/myResources/MyUpload.vue

+<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">
+                <search></search>
+                <div class="feature">
+                    <div :class="{'icon-sel': bigMode}" class="icon-ctn" @click="bigMode = true">
+                        <i class="el-icon-picture"></i>
+                    </div>
+                    <div :class="{'icon-sel': !bigMode}" class="icon-ctn" @click="bigMode = false">
+                        <i class="el-icon-s-operation"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="folderCtn" @contextmenu.prevent="showMenu">
+                <component :is="bigMode?'big-folder':'small-folder'"
+                    :file-list="currentFileList"
+                    @showMenu="showMenu"
+                    @intoFolder="intoFolder"
+                    @uploadFile="uploadFile"
+                    @tableIntoFile="intoFolder">
+                </component>
+        </div>
+
+        <!-- 右键菜单栏 -->
+        <myupload-ctx-menu
+            :menuVisible="menuVisible"
+            :uploadVisible="uploadVisible"
+            :rightMenuData="rightMenuData"
+            :rightMenuFolder="rightMenuFolder"
+            :coordinate="coordinate"
+            :menuMode="menuMode"
+            @showUploadMenu="showUploadMenu"
+            @menuOpenFile="intoFolder">
+        </myupload-ctx-menu>
+
+        <upload-file :selectFolderVisible="selectFolderVisible" @uploadSuccess="selectFolderVisible = false"></upload-file>
+
+        <!-- 侧滑块查看普通文档 -->
+        <el-drawer
+            title="查看"
+            :visible.sync="documentDrawer"
+            :size="'60%'">
+            <span>文档内容</span>
+        </el-drawer>
+
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'MyUpload',
+    components: {
+        Search: () => import('./components/Search'),
+        BigFolder: () => import('./components/BigFolder'),
+        SmallFolder: () => import('./components/SmallFolder'),
+        MyuploadCtxMenu: () => import('./components/MyuploadCtxMenu'),
+        UploadFile: () => import('./components/UploadFile')
+    },
+    data () {
+        return {
+            currentComponent: 'BigFolder', // BigFolder 大图标模式，SmallFolder 小图标模式
+            bigMode: true, // 文件夹大小图标模式
+            menuVisible: false, // 右键菜单栏
+            menuMode: '', // 菜单根据模式显示对于内容
+            uploadVisible: false, // 上传菜单栏
+            documentDrawer: false, // 查看文档抽屉
+            rightMenuData: {}, // 右键选中文件夹或文件数据
+            rightMenuFolder: [], // 右键空白储存当前文件夹数据
+            coordinate: { // 菜单栏坐标
+                menuX: '0px',
+                menuY: '0px',
+                uploadX: '0px',
+                uploadY: '0px'
+            },
+            currentFileList: [],
+            selectFolderVisible: false, // 查看文件侧滑框
+            selectFolderList: [], // 上传文件选择文件夹列表
+            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/myResources/index',
+                    query: {
+                        folderName: file.folderData,
+                        breadcrumb: JSON.stringify(this.breadcrumb)
+                    }
+                })
+            } else {
+                // 查看文件
+                this.documentDrawer = true
+            }
+        },
+        uploadFile (fileData, row) {
+            /* 文件选择上传位置 */
+            this.selectFolderVisible = true
+        },
+        showMenu (MouseEvent, type, row) {
+            /* 右键文件夹或文件时触发 */
+            if (type) {
+                // 右键文件夹或者文件
+                this.menuMode = type
+                this.rightMenuData = row
+                this.rightMenuFolder = []
+            } else {
+                // 右键空白处
+                this.menuMode = 'blank'
+                this.rightMenuFolder = this.currentFileList
+                this.rightMenuData = {}
+            }
+            this.menuVisible = false
+            this.uploadVisible = false
+            this.menuVisible = true
+            let coordinate = this.coordinate
+            coordinate.menuX = MouseEvent.pageX + 5 + 'px'
+            coordinate.menuY = MouseEvent.pageY + 'px'
+            coordinate.uploadX = MouseEvent.pageX + 130 + 'px'
+            coordinate.uploadY = MouseEvent.pageY + 'px'
+            document.addEventListener('click', this.foo) // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
+        },
+        foo () {
+            /* 取消鼠标监听事件 菜单栏 */
+            this.menuVisible = false
+            this.uploadVisible = false
+            document.removeEventListener('click', this.foo) // 关掉监听
+        },
+        showUploadMenu () {
+            this.uploadVisible = !this.uploadVisible
+        }
+    },
+    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;
+                    }
+                }
+
+            }
+        }
+
+        .rightNav {
+            padding: 0 30px;
+            display: flex;
+
+            .feature {
+                height: 32px;
+                margin: 7px 0 0 35px;
+                padding-left: 35px;
+                border-left: 1px solid #9e9e9e;
+                display: flex;
+
+                div {
+                    width: 27px;
+                    height: 27px;
+                    margin: 3px 5px;
+                    text-align: center;
+                    line-height: 55px;
+                    display: flex;
+                    background: #f5f5f5;
+                    cursor: pointer;
+                    &:hover {
+                        border: 1px solid #1890FF;
+                    }
+                    &:active {
+                        opacity: 0.7;
+                    }
+
+                    i {
+                        display: block;
+                        align-self: center;
+                        margin: 0 auto;
+                        font-size: 18px;
+                    }
+                }
+            }
+        }
+    }
+
+    .folderCtn{
+        min-height: 500px;
+    }
+
+}
+.icon-sel {
+    border: 1px solid #1890FF;
+}
+</style>

VSSCMP_WEB/src/pages/education/schoolBasedResources/myResources/components/BigFolder.vue

 <template>
-  <div
-    id="drop_area"
-    class="container">
-        <div
-            tabindex="0" hidefocus="true"
-            class="folderCtn" @contextmenu.prevent.stop="contextMenu"
-            @dblclick="intoFolder"
-            @dragenter.stop.prevent="borderHover = true"
-            @dragleave.stop.prevent="borderHover = false"
-            @dragover.stop.prevent="borderHover = true"
-            @drop.stop.prevent="fileDrop">
-                <div class="types">{{ fileData.typeName }}</div>
-                <i :class="fileData.icon" class="file-icon"></i>
-                <h4 class="folder-name">{{ fileData.name }}</h4>
-                <h6 class="descript">{{ fileData.descript }}</h6>
+  <div class="container">
+        <div id="drop_area" class="file-item" v-for="file of fileList" :key="file.id">
+            <div
+                tabindex="0" hidefocus="true"
+                class="folderCtn" @contextmenu.prevent.stop="contextMenu($event,file)"
+                @dblclick="intoFolder(file)"
+                @dragenter.stop.prevent="borderHover = true"
+                @dragleave.stop.prevent="borderHover = false"
+                @dragover.stop.prevent="borderHover = true"
+                @drop.stop.prevent="fileDrop($event,file)">
+                    <div class="types">{{ file.typeName }}</div>
+                    <i :class="file.icon" class="file-icon"></i>
+                    <h4 class="folder-name">{{ file.name }}</h4>
+                    <h6 class="descript">{{ file.descript }}</h6>
+            </div>
         </div>
   </div>
 </template>
@@ -22,10 +22,10 @@
 export default {
     name: 'BigFolder',
     props: {
-        fileData: {
-            type: Object,
+        fileList: {
+            type: Array,
             default: () => {
-                return {}
+                return []
             }
         }
     },
@@ -37,19 +37,18 @@ export default {
     mounted () {
     },
     methods: {
-        contextMenu (MouseEvent) {
-            // MouseEvent.stopPropagation()
-            let type = this.fileData.type
-            let row = this.fileData
+        contextMenu (MouseEvent, file) {
+            let type = file.type
+            let row = file
             this.$emit('showMenu', MouseEvent, type, row)
         },
-        intoFolder () {
-            this.$emit('intoFolder')
+        intoFolder (file) {
+            this.$emit('intoFolder', file)
         },
-        fileDrop (event) {
+        fileDrop (event, file) {
             this.borderHover = false
             let fileData = event.dataTransfer.files
-            let row = this.fileData
+            let row = this.file
             this.$emit('uploadFile', fileData, row)
         }
     }
@@ -58,51 +57,55 @@ export default {
 
 <style lang="less" scoped>
 .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 {
-        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;
-        }
+            .types {
+                position: absolute;
+                top: 0;
+                left: 0;
+                background: #F2F2F2;
+                color: #7F7F7F;
+                font-size: 5px;
+                padding: 2px 4px;
+            }
 
-        .types {
-            position: absolute;
-            top: 0;
-            left: 0;
-            background: #F2F2F2;
-            color: #7F7F7F;
-            font-size: 5px;
-            padding: 2px 4px;
-        }
+            .file-icon {
+                font-size: 80px;
+                margin-top: 30px;
+            }
 
-        .file-icon {
-            font-size: 80px;
-            margin-top: 30px;
-        }
+            .folder-name {
+                font-size: 17px;
+                color: #333333;
+                margin-bottom: 7px;
+            }
 
-        .folder-name {
-            font-size: 17px;
-            color: #333333;
-            margin-bottom: 7px;
+            .descript {
+                font-size: 11px;
+                color: #7F7F7F;
+            }
         }
 
-        .descript {
-            font-size: 11px;
-            color: #7F7F7F;
-        }
     }
-
 }
 </style>

VSSCMP_WEB/src/pages/education/schoolBasedResources/myResources/components/Material.vue

-<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>

VSSCMP_WEB/src/pages/education/schoolBasedResources/schoolResources/Index.vue

 <template>
     <div class="container">
-        <v-header :title="'学校资源库'" :is-show-prev-page="true"></v-header>
+        <v-header :title="'学校资源库'" :is-show-prev-page="isShowPrevPage"></v-header>
         <nav-menu :menus="menus"></nav-menu>
-        <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.name }}
-                        </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>
+        <router-view/>
     </div>
 </template>
 
@@ -54,12 +12,11 @@ export default {
     name: 'Index',
     components: {
         VHeader: () => import('@/common/header/VHeader'),
-        NavMenu: () => import('@/common/navMenu/NavMenu'),
-        Search: () => import('./../myResources/components/Search'),
-        SmallFolder: () => import('./../myResources/components/SmallFolder')
+        NavMenu: () => import('@/common/navMenu/NavMenu')
     },
     data () {
         return {
+            isShowPrevPage: true,
             menus: [
                 {
                     name: '校内资源',
@@ -67,151 +24,30 @@ export default {
                     permission: true,
                     path: '/education/schoolResources/index'
                 }
-            ],
-            timeSelect: 'allItem', // 学期选择框数据
-            options: [{
-                value: 'allItem',
-                label: '全部学期'
-            }],
-            documentDrawer: false, // 查看文档抽屉
-            currentFileList: [],
-            selectFolderVisible: false, // 查看文件侧滑框
-            breadcrumb: [ // 面包屑
-                {
-                    name: '首页',
-                    isFolder: true,
-                    folderName: 'firstLevelData'
-                }
-            ],
-            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'
-                    }
-                ]
-            }
+            ]
         }
     },
-    mounted () {
-        this.currentFileList = this.fileListData.firstLevelData
-    },
     methods: {
-        backCrumb (index) {
-            /* 点击面包屑返回前几级 */
-            let breadcrumb = this.breadcrumb
-            if (index < breadcrumb.length - 1) {
-                let folderName = breadcrumb[index].folderName
-                this.currentFileList = this.fileListData[folderName]
-                this.breadcrumb = breadcrumb.slice(0, index + 1)
-            }
-        },
-        intoFolder (file) {
-            /* 进入下一级文件夹 */
-            if (file.isFolder) {
-                // 双击文件夹
-                let breadcrumbData = {
-                    name: file.name,
-                    isFolder: file.isFolder,
-                    folderName: file.folderData
-                }
-                this.breadcrumb.push(breadcrumbData)
-                this.currentFileList = this.fileListData[file.folderData]
+        initDataFromRoute (route) {
+            /* 根据路由参数来显示对应数据 */
+            if (route.query.folderName) { // 有参数说明不是首页，显示返回上一页
+                this.isShowPrevPage = true
             } else {
-                // 双击文件
-                this.documentDrawer = true
+                this.isShowPrevPage = false
             }
         }
+    },
+    mounted () {
+    },
+    created () {
+        this.initDataFromRoute(this.$route)
+    },
+    watch: {
+        $route (to, from) {
+            this.initDataFromRoute(to)
+        }
     }
+
 }
 </script>
 
@@ -219,58 +55,5 @@ export default {
 .container {
     height: 100%;
     min-height: 100%;
-    .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>

VSSCMP_WEB/src/pages/education/schoolBasedResources/schoolResources/ResourcesInSchoold.vue

+<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>

VSSCMP_WEB/src/routers/education/schoolBasedResourcesRouter.js

@@ -3,40 +3,52 @@
  *  @date: 2020/09/02
  *  @author:zhaobingfeng
  */
-
 // 我的资源
 const MY_RESOURCES = [
     {
-        path: '/education/myResources/index',
+        path: '/education/myResources',
         name: 'myResources',
-        component: resolve => require(['pages/education/schoolBasedResources/myResources/Index'], resolve)
-    }
-]
-
-// 我的资源-收藏分享
-const MY_RESOURCES_FAVORSHARE = [
-    {
-        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',
-        component: resolve => require(['pages/education/schoolBasedResources/myResources/MyManage'], resolve)
+        component: resolve => require(['pages/education/schoolBasedResources/myResources/Index'], resolve),
+        redirect: '/education/myResources/index',
+        children: [
+            { // 我上传的
+                path: '/education/myResources/index',
+                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/myManage',
+                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 = [
     {
-        path: '/education/schoolResources/index',
+        path: '/education/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 = [
 
 export default [
     ...MY_RESOURCES,
-    ...MY_RESOURCES_FAVORSHARE,
-    ...MY_RESOURCES_MYMANAGE,
     ...SCHOOL_RESOURCES,
     ...FOLDER_MANAGE
 ]

VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/myResources/DocumentDetail.vue

@@ -18,7 +18,8 @@ export default {
     },
     data () {
         return {
-            title: '文档详情'
+            title: '文档详情',
+            scroll: ''
         }
     },
     methods: {

VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/myResources/FavorShare.vue

 <template>
   <div class="container">
-    <div class="content" ref="contentWrapper">
-        <div>
-            <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>
+    <search-fold></search-fold>
+    <file-list :mode="'favorShare'" :list="fileList" @handleClickItem="toggleShowBtn" @handleOpen="openFile"></file-list>
   </div>
 </template>
 
 <script>
-import BScroll from 'better-scroll'
 export default {
     name: 'FavorShare',
     components: {
-        Tabs: () => import('@/common/tab/Tabs'),
-        TabBar: () => import('@/common/tabBar/TabBar'),
         FileList: () => import('./components/FileList'),
         SearchFold: () => import('./components/SearchFold')
     },
     data () {
         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: [
                 {
                     name: '我收藏的.docx',
@@ -86,11 +51,6 @@ export default {
     created () {
     },
     mounted () {
-        this.$nextTick(() => {
-            this.scroll = new BScroll(this.$refs.contentWrapper, {
-                click: true
-            })
-        })
     }
 }
 </script>

VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/myResources/Index.vue

 <template>
   <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>
-            <tabs :menus="tabsMenus" :mode="'2'" :position="'bottom'"></tabs>
-            <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>
+            <router-view></router-view>
         </div>
     </div>
+    <tab-bar :menus="tabBarMenus"></tab-bar>
   </div>
 </template>
 
@@ -24,23 +18,25 @@ import BScroll from 'better-scroll'
 export default {
     name: 'Index',
     components: {
+        VHeader: () => import('@/common/header/VHeader'),
         Tabs: () => import('@/common/tab/Tabs'),
-        TabBar: () => import('@/common/tabBar/TabBar'),
-        Searchs: () => import('./components/Searchs'),
-        FolderList: () => import('./components/FolderList')
+        TabBar: () => import('@/common/tabBar/TabBar')
     },
     data () {
         return {
+            title: '标题',
+            isShowPrevPage: true,
+            showTabs: false, // 是否显示Tabs组件
             tabsMenus: [
                 {
                     label: '我上传的',
                     path: '/education/myResources/myUpload',
-                    belongTo: 'myUpload'
+                    belongTo: '/education/myResources/myUpload'
                 },
                 {
                     label: '收藏分享',
                     path: '/education/myResources/favorShare',
-                    belongTo: 'favorShare'
+                    belongTo: '/education/myResources/favorShare'
                 }
             ],
             tabBarMenus: [
@@ -57,80 +53,28 @@ export default {
                     belongTo: 'schoolResources'
                 }
             ],
-            currentList: {},
-            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'
-                            }
-                        ]
-                    }
-                ]
-            }
-
+            scroll: ''
         }
     },
     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
-                    }
-                })
+        initDataFromRoute (route) {
+            /* 根据路由参数来显示对应数据 */
+            this.tabBarMenus[0].belongTo = route.meta.belongTo
+            console.log(this.tabBarMenus[0].belongTo)
+            if (route.meta.showTabs) {
+                this.showTabs = true
+            } else {
+                this.showTabs = false
+            }
+            if (route.meta.hidePrevPage) {
+                this.isShowPrevPage = false
+            } else {
+                this.isShowPrevPage = true
+            }
+            if (route.query.title) {
+                this.title = route.query.title
+            } else {
+                this.title = route.meta.title
             }
         }
     },
@@ -140,7 +84,14 @@ export default {
                 click: true
             })
         })
-        this.currentList = this.listData.firstLevel
+    },
+    created () {
+        this.initDataFromRoute(this.$route)
+    },
+    watch: {
+        $route (to, from) {
+            this.initDataFromRoute(to)
+        }
     }
 }
 </script>
@@ -148,8 +99,5 @@ export default {
 <style lang="less" scoped>
 .content {
     background: white;
-    .search-ctn {
-        padding: 10px 15px;
-    }
 }
 </style>

VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/myResources/MyUpload.vue

+<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>

VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/myResources/MyUploadFileLevel.vue

 <template>
   <div class="container">
-    <v-header :title="title">
-      <span slot="action" class="header-slot pull-right"></span>
-    </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>
+        <search-fold></search-fold>
+        <file-list :mode="'myUpload'" :list="fileList" @handleClickItem="toggleShowBtn" @handleOpen="openFile" @handleShare="shareFile"></file-list>
   </div>
 </template>
 
 <script>
 
-import BScroll from 'better-scroll'
 export default {
     name: 'MyUploadFileLevel',
     components: {
-        VHeader: () => import('@/common/header/VHeader'),
-        TabBar: () => import('@/common/tabBar/TabBar'),
         FileList: () => import('./components/FileList'),
         SearchFold: () => import('./components/SearchFold')
     },
     data () {
         return {
-            title: '文档列表',
-            tabBarMenus: [
-                {
-                    label: '我的资源',
-                    icon: '&#xe89e;',
-                    path: '/education/myResources/myUpload',
-                    belongTo: 'myUploadFileLevel'
-                },
-                {
-                    label: '学习资源库',
-                    icon: '&#xe87d;',
-                    path: '/education/schoolResources/index',
-                    belongTo: 'schoolResources'
-                }
-            ],
             fileList: [
                 {
                     name: '德育负责人操作手册.docx',
@@ -81,20 +55,9 @@ export default {
     created () {
     },
     mounted () {
-        this.$nextTick(() => {
-            this.scroll = new BScroll(this.$refs.contentWrapper, {
-                click: true
-            })
-        })
-        if (this.$route.query) {
-            this.title = this.$route.query.title
-        }
     }
 }
 </script>
 
 <style lang="less" scoped>
-.content {
-    background: white;
-}
 </style>

VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/myResources/MyUploadFolderLevel.vue

 <template>
-  <div class="container">
-    <v-header :title="title">
-      <span slot="action" class="header-slot pull-right"></span>
-    </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 class="container">
+        <div class="search-ctn">
+            <searchs></searchs>
         </div>
+        <folder-list
+            v-for="(folderListItem, folderListIndex) of currentList"
+            :key="folderListIndex"
+            :list="folderListItem.list"
+            @folderClick="intoFolder">
+        </folder-list>
     </div>
-  </div>
 </template>
 
 <script>
-
-import BScroll from 'better-scroll'
 export default {
     name: 'MyUploadFolderLevel',
     components: {
-        VHeader: () => import('@/common/header/VHeader'),
-        TabBar: () => import('@/common/tabBar/TabBar'),
         Searchs: () => import('./components/Searchs'),
         FolderList: () => import('./components/FolderList')
     },
     data () {
         return {
-            title: '文件夹名称',
-            tabBarMenus: [
-                {
-                    label: '我的资源',
-                    icon: '&#xe89e;',
-                    path: '/education/myResources/myUpload',
-                    belongTo: 'myUploadFolderLevel'
-                },
-                {
-                    label: '学习资源库',
-                    icon: '&#xe87d;',
-                    path: '/education/schoolResources/index',
-                    belongTo: 'schoolResources'
-                }
-            ],
             currentList: {},
             listData: {
                 secondLevel: [
@@ -119,20 +92,13 @@ export default {
         }
     },
     mounted () {
-        this.$nextTick(() => {
-            this.scroll = new BScroll(this.$refs.contentWrapper, {
-                click: true
-            })
-        })
         if (this.$route.query) {
-            this.title = this.$route.query.title
             this.currentList = this.listData[this.$route.query.folder]
         }
     },
     watch: {
         $route (val) {
             if (val.query) {
-                this.title = val.query.title
                 this.currentList = this.listData[val.query.folder]
             }
         }
@@ -141,10 +107,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.content {
-    background: white;
+.container {
     .search-ctn {
-        padding: 15px;
+        padding: 20px 15px 10px 15px;
     }
 }
 </style>

VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/myResources/Share.vue

@@ -22,9 +22,9 @@
                     </div>
                 </x-button>
             </div>
+            <teacher-selector :show="teacherSelectorShow" @handleSubmit="teacherSelectorShow = false"></teacher-selector>
         </div>
     </div>
-    <teacher-selector :show="teacherSelectorShow" @handleSubmit="teacherSelectorShow = false"></teacher-selector>
   </div>
 </template>
 
@@ -42,6 +42,7 @@ export default {
     data () {
         return {
             title: '分享文档',
+            scroll: '',
             teacherSelectorShow: false
         }
     },
@@ -61,7 +62,7 @@ export default {
 
 <style lang="less" scoped>
 .content {
-    padding: 0 20px;
+    padding: 0 15px;
     background: white;
     /deep/ .add-btn {
         margin-top: 20px;
@@ -69,21 +70,21 @@ export default {
         border-style: dashed;
         color: #1890FF;
         border-color: #1890FF;
-        font-size: 18px;
+        font-size: 16px;
     }
 
     .share-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        margin-top: 25px;
+        margin-top: 20px;
         .dashed {
             flex: 1;
             border-top: 3px dashed #AAAAAA;
         }
         .person-count {
             padding: 0 10px;
-            font-size: 18px;
+            font-size: 16px;
             color: #7F7F7F;
         }
     }
@@ -95,10 +96,10 @@ export default {
     /deep/ .share-list {
         margin-top: 25px;
         .person {
-            margin: 18px 0;
-            width: 25%;
-            height: 45px;
-            margin-right: 8%;
+            margin: 16px 0;
+            width: 27%;
+            height: 40px;
+            margin-right: 6%;
             background: #F1F5F8;
             &:after{
                 border: none;
@@ -114,13 +115,12 @@ export default {
                 justify-content: space-between;
                 align-items: center;
                 .name {
-                    padding-left: 5px;
                     padding-top: 2px;
-                    font-size: 18px;
+                    font-size: 15px;
                 }
                 .iconfont {
-                    font-size: 20px;
-                    margin-right: -5px;
+                    font-size: 17px;
+                    margin-right: -10px;
                 }
             }
         }

VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/myResources/components/FileList.vue

@@ -29,7 +29,7 @@
 
     <!-- 重命名弹窗 -->
     <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="headers">
                 <span>重命名</span>
@@ -46,7 +46,7 @@
 
     <!-- 删除确认弹窗 -->
     <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="headers">
                 <span>删除确认</span>
@@ -135,15 +135,16 @@ export default {
 
 <style lang="less" scoped>
 .radio-ctn {
-    padding: 20px;
+    padding: 15px;
     display: flex;
     .radio-item {
         margin-right: 10px;
         .radio-label {
+            font-size: 14px;
             display: inline-block;
             height: 35px;
             line-height: 35px;
-            padding: 0 15px;
+            padding: 0 10px;
             border-radius: 30px;
             background: #F2F2F2;
             color: #333333;
@@ -158,14 +159,14 @@ export default {
 /deep/ .cellgroup-ctn {
     .weui-cells{
         margin-top: 0;
-        padding-left: 25px;
+        padding-left: 20px;
         &:before, &:after{
             border: none;
         }
         .weui-cell {
             align-items: flex-start;
-            padding-top: 25px;
-            padding-bottom: 20px;
+            padding-top: 18px;
+            padding-bottom: 15px;
             padding-left: 0;
             &:before {
                 border-top: none;
@@ -174,26 +175,25 @@ export default {
             .iconfont {
                 display:block;
                 margin-right: 7px;
-                margin-top: -2px;
-                font-size: 30px;
+                font-size: 22px;
             }
             .vux-cell-bd {
                 .vux-label {
-                    font-size: 18px;
+                    font-size: 16px;
                     font-weight: 500;
                 }
                 .after-title-ctn {
                     .document-descript {
-                        font-size: 14px;
+                        font-size: 15px;
                         color: rgb(128, 128, 128);
                         margin-top: 6px;
                     }
                     .btns-ctn {
-                        margin: 25px 0 -5px -20px;
+                        margin: 18px 0 -5px -20px;
                         .btn-item {
                             display: inline-block;
                             width: 18%;
-                            font-size: 14px;
+                            font-size: 13px;
                             color: #1890FF;
                             text-align: center;
                             &:not(:last-child){
@@ -208,16 +208,16 @@ export default {
 }
 
 .rename-ctn, .delete-ctn {
-    padding: 20px;
-    font-size: 18px;
+    padding: 15px;
+    font-size: 15px;
     color: black;
     .headers {
         display: flex;
         justify-content: space-between;
-        height: 30px;
-        line-height: 30px;
+        height: 28px;
+        line-height: 28px;
         .iconfont {
-            font-size: 22px;
+            font-size: 20px;
         }
     }
     /deep/ .rename-input {
@@ -232,19 +232,19 @@ export default {
     .tips {
         text-align: left;
         color: rgb(39, 39, 39);
-        font-size: 16px;
-        margin: 20px 0 35px 0;
+        font-size: 15px;
+        margin: 20px 0 30px 0;
     }
     /deep/ .btn-ctn {
         text-align: center;
-        padding: 20px 0 10px 0;
+        padding: 15px 0 10px 0;
         .weui-btn {
-            width: 120px;
-            height: 40px;
-            font-size: 18px;
+            width: 1.8rem;
+            height: 0.7rem;
+            font-size: 16px;
         }
         .reset {
-            margin-right: 30px;
+            margin-right: 0.25rem;
             border-color: #1890FF;
             color: #1890FF;
         }

VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/myResources/components/FolderList.vue

@@ -47,19 +47,19 @@ export default {
 /deep/ .cellgroup-ctn {
 
     .weui-cells__title {
-        margin-bottom: 15px;
-        font-size: 18px;
+        margin-bottom: 10px;
+        font-size: 15px;
     }
     .weui-cells{
         margin-top: 0;
-        padding-left: 25px;
+        padding-left: 20px;
         &:before, &:after{
             border: none;
         }
         .weui-cell {
             align-items: flex-start;
-            padding-top: 20px;
-            padding-bottom: 15px;
+            padding-top: 15px;
+            padding-bottom: 12px;
             padding-left: 0;
             &:before {
                 border-top: none;
@@ -69,11 +69,11 @@ export default {
                 display:block;
                 margin-right: 10px;
                 margin-top: -5px;
-                font-size: 35px;
+                font-size: 30px;
             }
             .vux-cell-bd {
                 .vux-label {
-                    font-size: 18px;
+                    font-size: 16px;
                     font-weight: bold;
                 }
                 .descript {

VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/myResources/components/SearchFold.vue

@@ -50,36 +50,36 @@ export default {
 .search-fold-ctn {
     .fold-header {
         text-align: center;
-        height: 40px;
-        line-height: 40px;
-        font-size: 18px;
+        height: 30px;
+        line-height: 30px;
+        font-size: 14px;
         background: #F2F2F2;
         .iconfont {
             color: #1890FF;
+            font-size: 16px;
         }
     }
     /deep/ .fold-ctn {
-        font-size: 18px;
+        font-size: 16px;
         &:before {
             border: none;
         }
         .timerSelect {
             border-bottom: 1px solid #D7D7D7;
-            height: 55px;
+            height: 45px;
             .vux-cell-primary {
                 -webkit-box-flex: none;
                 -ms-flex: none;
                 flex: none;
             }
             .vux-cell-bd {
-                width: 108px;
+                width: 94px;
                 p {
-                    width: 108px;
                     .vux-label {
                         color: black;
                         width: 108px;
                         padding-left: 5px;
-                        font-size: 18px;
+                        font-size: 16px;
                         padding-top: 10px;
                     }
                 }
@@ -91,7 +91,7 @@ export default {
                     display: inline-block;
                     width: 100%;
                     text-align: left;
-                    font-size: 18px;
+                    font-size: 16px;
                 }
                 .vux-cell-value {
                     color: rgb(75, 75, 75);
@@ -109,7 +109,7 @@ export default {
         }
         .vux-x-input {
             border-bottom: 1px solid #D7D7D7;
-            height: 55px;
+            height: 45px;
             &:before {
                 border: none;
             }
@@ -118,7 +118,7 @@ export default {
             }
             .iconfont {
                 line-height: 45px;
-                font-size: 18px;
+                font-size: 16px;
                 margin-right: 15px;
             }
         }
@@ -126,14 +126,14 @@ export default {
 
     /deep/ .btn-ctn {
         text-align: center;
-        padding: 20px 0 5px 0;
+        padding: 15px 0 10px 0;
         .weui-btn {
-            width: 120px;
-            height: 45px;
-            font-size: 18px;
+            width: 1.8rem;
+            height: 0.7rem;
+            font-size: 16px;
         }
         .reset {
-            margin-right: 30px;
+            margin-right: 0.25rem;
             border-color: #1890FF;
             color: #1890FF;
         }

VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/myResources/components/Searchs.vue

@@ -22,29 +22,4 @@ export default {
 </script>
 
 <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>

VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/schoolResources/Index.vue

 <template>
   <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>
-            <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>
+            <router-view></router-view>
         </div>
     </div>
+    <tab-bar :menus="tabBarMenus"></tab-bar>
   </div>
 </template>
 
@@ -23,12 +17,14 @@ import BScroll from 'better-scroll'
 export default {
     name: 'Index',
     components: {
-        TabBar: () => import('@/common/tabBar/TabBar'),
-        Searchs: () => import('./../myResources/components/Searchs'),
-        FolderList: () => import('./../myResources/components/FolderList')
+        VHeader: () => import('@/common/header/VHeader'),
+        TabBar: () => import('@/common/tabBar/TabBar')
     },
     data () {
         return {
+            title: '标题',
+            isShowPrevPage: true,
+            scroll: '',
             tabBarMenus: [
                 {
                     label: '我的资源',
@@ -42,61 +38,27 @@ export default {
                     path: '/education/schoolResources/index',
                     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: {
-        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
-                    }
-                })
+        initDataFromRoute (route) {
+            /* 根据路由参数来显示对应数据 */
+            this.tabBarMenus[1].belongTo = route.meta.belongTo
+            if (route.meta.showTabs) {
+                this.showTabs = true
+            } else {
+                this.showTabs = false
+            }
+            if (route.meta.hidePrevPage) {
+                this.isShowPrevPage = false
+            } else {
+                this.isShowPrevPage = true
+            }
+            if (route.query.title) {
+                this.title = route.query.title
+            } else {
+                this.title = route.meta.title
             }
         }
     },
@@ -106,7 +68,14 @@ export default {
                 click: true
             })
         })
-        this.currentList = this.listData.firstLevel
+    },
+    created () {
+        this.initDataFromRoute(this.$route)
+    },
+    watch: {
+        $route (to, from) {
+            this.initDataFromRoute(to)
+        }
     }
 }
 </script>
@@ -114,8 +83,5 @@ export default {
 <style lang="less" scoped>
 .content {
     background: white;
-    .search-ctn {
-        padding: 20px 15px 10px 15px;
-    }
 }
 </style>

VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/schoolResources/SchoolFileLevel.vue

 <template>
   <div class="container">
-    <v-header :title="title">
-      <span slot="action" class="header-slot pull-right"></span>
-    </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>
+    <search-fold></search-fold>
+    <file-list :mode="'schoolResources'" :list="fileList" @handleClickItem="toggleShowBtn" @handleOpen="openFile" @handleShare="shareFile"></file-list>
   </div>
 </template>
 
 <script>
 
-import BScroll from 'better-scroll'
 export default {
     name: 'SchoolFileLevel',
     components: {
-        VHeader: () => import('@/common/header/VHeader'),
-        TabBar: () => import('@/common/tabBar/TabBar'),
         FileList: () => import('./../myResources/components/FileList'),
         SearchFold: () => import('./../myResources/components/SearchFold')
     },
     data () {
         return {
-            title: '文档列表',
-            tabBarMenus: [
-                {
-                    label: '我的资源',
-                    icon: '&#xe89e;',
-                    path: '/education/myResources/myUpload',
-                    belongTo: 'myUploadFileLevel'
-                },
-                {
-                    label: '学习资源库',
-                    icon: '&#xe87d;',
-                    path: '/education/schoolResources/index',
-                    belongTo: 'schoolFileLevel'
-                }
-            ],
             fileList: [
                 {
                     name: '德育负责人操作手册.docx',
@@ -81,20 +55,9 @@ export default {
     created () {
     },
     mounted () {
-        this.$nextTick(() => {
-            this.scroll = new BScroll(this.$refs.contentWrapper, {
-                click: true
-            })
-        })
-        if (this.$route.query) {
-            this.title = this.$route.query.title
-        }
     }
 }
 </script>
 
 <style lang="less" scoped>
-.content {
-    background: white;
-}
 </style>

VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/schoolResources/SchoolFolderLevel.vue

 <template>
   <div class="container">
-    <v-header :title="title">
-      <span slot="action" class="header-slot pull-right"></span>
-    </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 class="search-ctn">
+        <searchs></searchs>
     </div>
+    <folder-list
+        v-for="(folderListItem, folderListIndex) of currentList"
+        :key="folderListIndex"
+        :list="folderListItem.list"
+        @folderClick="intoFolder">
+    </folder-list>
   </div>
 </template>
 
 <script>
 
-import BScroll from 'better-scroll'
 export default {
     name: 'SchoolFolderLevel',
     components: {
-        VHeader: () => import('@/common/header/VHeader'),
-        TabBar: () => import('@/common/tabBar/TabBar'),
         Searchs: () => import('./../myResources/components/Searchs'),
         FolderList: () => import('./../myResources/components/FolderList')
     },
     data () {
         return {
-            title: '文件夹名称',
-            tabBarMenus: [
-                {
-                    label: '我的资源',
-                    icon: '&#xe89e;',
-                    path: '/education/myResources/myUpload',
-                    belongTo: 'myUploadFolderLevel'
-                },
-                {
-                    label: '学习资源库',
-                    icon: '&#xe87d;',
-                    path: '/education/schoolResources/index',
-                    belongTo: 'schoolFolderLevel'
-                }
-            ],
             currentList: {},
             listData: {
                 secondLevel: [
@@ -119,20 +93,13 @@ export default {
         }
     },
     mounted () {
-        this.$nextTick(() => {
-            this.scroll = new BScroll(this.$refs.contentWrapper, {
-                click: true
-            })
-        })
         if (this.$route.query) {
-            this.title = this.$route.query.title
             this.currentList = this.listData[this.$route.query.folder]
         }
     },
     watch: {
         $route (val) {
             if (val.query) {
-                this.title = val.query.title
                 this.currentList = this.listData[val.query.folder]
             }
         }
@@ -141,10 +108,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.content {
-    background: white;
+.container {
     .search-ctn {
-        padding: 15px;
+        padding: 20px 15px 10px 15px;
     }
 }
 </style>

VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/schoolResources/SchoolResources.vue

+<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>

VSSCMP_WEIXIN/teacher/src/routers/education/schoolBasedResourcesRouter.js

-// 我的资源-我上传的
+// 我的资源
 const MY_RESOURCES = [
     {
-        path: '/education/myResources/myUpload',
+        path: '/education/myResources',
         name: 'myResources',
         component: resolve => require(['pages/education/schoolBasedResources/myResources/Index'], resolve),
-        meta: {
-            belongTo: 'myUpload'
-        }
-    }
-]
-
-// 我上传的-文件夹列表
-const MYUPLOAD_FOLDER_LEVEL = [
-    {
-        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',
-        component: resolve => require(['pages/education/schoolBasedResources/myResources/MyUploadFileLevel'], resolve),
-        meta: {
-            belongTo: 'myUploadFileLevel'
-        }
+        redirect: '/education/myResources/myUpload',
+        children: [
+            { // 我上传的
+                path: '/education/myResources/myUpload',
+                name: 'myUpload',
+                component: resolve => require(['pages/education/schoolBasedResources/myResources/MyUpload'], resolve),
+                meta: {
+                    belongTo: 'myUpload',
+                    showTabs: true,
+                    title: '校本资源',
+                    hidePrevPage: true
+                }
+            },
+            { // 我上传的-文件夹列表
+                path: '/education/myResources/myUpload/folderLevel',
+                name: 'myUploadFolderLevel',
+                component: resolve => require(['pages/education/schoolBasedResources/myResources/MyUploadFolderLevel'], resolve),
+                meta: {
+                    belongTo: 'myUploadFolderLevel'
+                }
+            },
+            { // 我上传的-文件列表（非文件夹）
+                path: '/education/myResources/myUpload/fileLevel',
+                name: 'myUploadFileLevel',
+                component: resolve => require(['pages/education/schoolBasedResources/myResources/MyUploadFileLevel'], resolve),
+                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',
-        name: 'favorShare',
-        component: resolve => require(['pages/education/schoolBasedResources/myResources/FavorShare'], resolve),
-        meta: {
-            belongTo: 'favorShare'
-        }
+        path: '/education/schoolResources',
+        name: 'schoolResources',
+        component: resolve => require(['pages/education/schoolBasedResources/schoolResources/Index'], resolve),
+        redirect: '/education/schoolResources/index',
+        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',
         name: 'documentDetail',
         component: resolve => require(['pages/education/schoolBasedResources/myResources/DocumentDetail'], resolve),
         meta: {
             belongTo: 'documentDetail'
         }
-    }
-]
-
-// 分享页面
-const SHARE = [
-    {
+    },
+    { // 分享页面
         path: '/education/share',
         name: 'share',
         component: resolve => require(['pages/education/schoolBasedResources/myResources/Share'], resolve),
@@ -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 [
     ...MY_RESOURCES,
-    ...MYUPLOAD_FOLDER_LEVEL,
-    ...MY_RESOURCES_FAVORSHARE,
     ...SCHOOL_RESOURCES,
-    ...MYUPLOAD_FILE_LEVEL,
-    ...SCHOOL_FOLDER_LEVEL,
-    ...SCHOOL_FILE_LEVEL,
-    ...DOCUMENT_DETAIL,
-    ...SHARE
+    ...SCHOOL_COMMON
 ]