Skip to content

V
VS_OUTSOURCE
Commit 6be27dcf authored by fangshupeng's avatar fangshupeng
Browse files
Options

修改优化问题

parent 1add339f
Show whitespace changes
Inline Side-by-side
Showing with 1763 additions and 1691 deletions
VSSCMP_WEB/src/pages/education/schoolBasedResources/folderManage/components/ManageCtxMenu.vue
View file @ 6be27dcf
......@@ -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
View file @ 6be27dcf
<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">
......@@ -52,7 +49,6 @@
<span>文档内容</span>
</el-drawer>
</div>
</div>
</template>
<script>
......@@ -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,10 +168,7 @@ export default {
</script>
<style lang="less" scoped>
.container {
height: 100%;
min-height: 100%;
.main {
.main {
min-height: 100%;
.headerNav {
......@@ -238,7 +209,6 @@ export default {
}
}
}
}
}
</style>
VSSCMP_WEB/src/pages/education/schoolBasedResources/myResources/Index.vue
View file @ 6be27dcf
<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) // 关掉监听
mounted () {
},
showUploadMenu () {
this.uploadVisible = !this.uploadVisible
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 0 → 100644
View file @ 6be27dcf
<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
View file @ 6be27dcf
<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">
......@@ -10,11 +7,11 @@
v-for="(breadcrumbItem, index) of breadcrumb"
:key="index"
@click.native="backCrumb(index)">
{{ breadcrumbItem.name }}
{{ breadcrumbItem }}
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="rightNav" v-show="isFileMode">
<!-- <div class="rightNav" v-show="isFileMode">
<el-select class="timer-select" v-model="timeSelect" placeholder="请选择">
<el-option
v-for="item in options"
......@@ -23,23 +20,21 @@
:value="item.value">
</el-option>
</el-select>
</div>
</div> -->
</div>
<!-- 文件夹选择显示页面 -->
<div class="folder-mode folderCtn" v-show="!isFileMode">
<div class="folder-mode">
<big-folder
v-for="file of currentFileList"
:key="file.id" :file-data="file"
@intoFolder="intoFolder(file)">
:file-list="currentFileList"
@intoFolder="intoFolder">
</big-folder>
</div>
<!-- 资料列表显示页面 -->
<div class="file-mode" v-if="isFileMode">
<!-- <div class="file-mode" v-if="isFileMode">
<material :taskMode="taskMode"></material>
</div>
</div>
</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,51 +115,74 @@ export default {
}
}
},
mounted () {
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 = ['首页']
}
},
methods: {
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
// 该文件夹为资料列表
// 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.taskMode = false
// 改文件夹不是资料列表
this.$router.push({
path: '/education/myResources/myManage',
query: {
folderName: file.folderData,
breadcrumb: JSON.stringify(this.breadcrumb)
}
} else {
this.currentFileList = this.fileListData[file.folderData]
})
}
}
}
},
mounted () {
},
created () {
this.initDataFromRoute(this.$route)
},
watch: {
$route (to, from) {
this.initDataFromRoute(to)
}
}
}
</script>
<style lang="less" scoped>
.container {
height: 100%;
min-height: 100%;
.main {
.main {
min-height: 100%;
.headerNav {
......@@ -240,7 +230,6 @@ export default {
display: flex;
flex-wrap: wrap;
}
}
}
</style>
VSSCMP_WEB/src/pages/education/schoolBasedResources/myResources/MyUpload.vue 0 → 100644
View file @ 6be27dcf
<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
View file @ 6be27dcf
<template>
<div
id="drop_area"
class="container">
<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"
@dblclick="intoFolder"
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">
<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>
@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,7 +57,10 @@ export default {
<style lang="less" scoped>
.container {
display: flex;
flex-wrap: wrap;
padding: 15px;
.file-item {
.folderCtn {
position: relative;
text-align: center;
......@@ -104,5 +106,6 @@ export default {
}
}
}
}
</style>
VSSCMP_WEB/src/pages/education/schoolBasedResources/myResources/components/Material.vue deleted 100644 → 0
View file @ 1add339f
<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
View file @ 6be27dcf
<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'
}
]
methods: {
initDataFromRoute (route) {
/* 根据路由参数来显示对应数据 */
if (route.query.folderName) { // 有参数说明不是首页，显示返回上一页
this.isShowPrevPage = true
} else {
this.isShowPrevPage = false
}
}
},
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)
}
created () {
this.initDataFromRoute(this.$route)
},
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]
} else {
// 双击文件
this.documentDrawer = true
}
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 0 → 100644
View file @ 6be27dcf
<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
View file @ 6be27dcf
......@@ -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 = [
{
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)
}
]
// 我的资源-我管理的
const MY_RESOURCES_MYMANAGE = [
{
name: 'favorShare',
component: resolve => require(['pages/education/schoolBasedResources/myResources/FavorShare'], resolve),
},
{ // 我管理的
path: '/education/myResources/myManage',
name: '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
View file @ 6be27dcf
......@@ -18,7 +18,8 @@ export default {
},
data () {
return {
title: '文档详情'
title: '文档详情',
scroll: ''
}
},
methods: {
......
VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/myResources/FavorShare.vue
View file @ 6be27dcf
<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>
</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
View file @ 6be27dcf
<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'
initDataFromRoute (route) {
/* 根据路由参数来显示对应数据 */
this.tabBarMenus[0].belongTo = route.meta.belongTo
console.log(this.tabBarMenus[0].belongTo)
if (route.meta.showTabs) {
this.showTabs = true
} else {
routerPath = '/education/myResources/myUpload/fileLevel'
routerName = 'myUploadFileLevel'
this.showTabs = false
}
this.$router.push({
name: routerName,
path: routerPath,
query: {
folder: item.folderData,
title: item.title
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 0 → 100644
View file @ 6be27dcf
<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
View file @ 6be27dcf
<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>
</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
View file @ 6be27dcf
<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>
......@@ -14,40 +9,18 @@
:list="folderListItem.list"
@folderClick="intoFolder">
</folder-list>
<tab-bar :menus="tabBarMenus"></tab-bar>
</div>
</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
View file @ 6be27dcf
......@@ -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
View file @ 6be27dcf
......@@ -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
View file @ 6be27dcf
......@@ -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
View file @ 6be27dcf
......@@ -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
View file @ 6be27dcf
......@@ -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
View file @ 6be27dcf
<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'
initDataFromRoute (route) {
/* 根据路由参数来显示对应数据 */
this.tabBarMenus[1].belongTo = route.meta.belongTo
if (route.meta.showTabs) {
this.showTabs = true
} else {
routerPath = '/education/schoolResources/fileLevel'
routerName = 'schoolFileLevel'
this.showTabs = false
}
this.$router.push({
name: routerName,
path: routerPath,
query: {
folder: item.folderData,
title: item.title
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
View file @ 6be27dcf
<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>
</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
View file @ 6be27dcf
<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>
......@@ -14,40 +9,19 @@
:list="folderListItem.list"
@folderClick="intoFolder">
</folder-list>
<tab-bar :menus="tabBarMenus"></tab-bar>
</div>
</div>
</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 0 → 100644
View file @ 6be27dcf
<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
View file @ 6be27dcf
// 我的资源-我上传的
// 我的资源
const MY_RESOURCES = [
{
path: '/education/myResources/myUpload',
path: '/education/myResources',
name: 'myResources',
component: resolve => require(['pages/education/schoolBasedResources/myResources/Index'], resolve),
redirect: '/education/myResources/myUpload',
children: [
{ // 我上传的
path: '/education/myResources/myUpload',
name: 'myUpload',
component: resolve => require(['pages/education/schoolBasedResources/myResources/MyUpload'], resolve),
meta: {
belongTo: 'myUpload'
belongTo: 'myUpload',
showTabs: true,
title: '校本资源',
hidePrevPage: true
}
}
]
// 我上传的-文件夹列表
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'
}
}
]
// 我的资源-收藏分享
const MY_RESOURCES_FAVORSHARE = [
{
},
{ // 收藏分享
path: '/education/myResources/favorShare',
name: 'favorShare',
component: resolve => require(['pages/education/schoolBasedResources/myResources/FavorShare'], resolve),
meta: {
belongTo: 'favorShare'
}
belongTo: 'favorShare',
showTabs: true,
title: '校本资源',
hidePrevPage: true
}
]
// 文档详情
const DOCUMENT_DETAIL = [
{
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),
meta: {
belongTo: 'share'
}
]
}
]
// 学校资源
const SCHOOL_RESOURCES = [
{
path: '/education/schoolResources/index',
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'
belongTo: 'schoolResources',
title: '校本资源',
hidePrevPage: true
}
}
]
// 学校资源-文件夹列表
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),
......@@ -104,16 +82,31 @@ const SCHOOL_FILE_LEVEL = [
belongTo: 'schoolFileLevel'
}
}
]
}
]
// 共用页面
const SCHOOL_COMMON = [
{ // 文档详情
path: '/education/documentDetail',
name: 'documentDetail',
component: resolve => require(['pages/education/schoolBasedResources/myResources/DocumentDetail'], resolve),
meta: {
belongTo: 'documentDetail'
}
},
{ // 分享页面
path: '/education/share',
name: 'share',
component: resolve => require(['pages/education/schoolBasedResources/myResources/Share'], resolve),
meta: {
belongTo: 'share'
}
}
]
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
]
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment