完成前端上传页面设计

This commit is contained in:
F嘉阳
2018-02-06 19:56:07 +08:00
parent af1eca10bb
commit a3a0a32a0c
5 changed files with 580 additions and 54 deletions

View File

@@ -6,7 +6,7 @@
<body>
<div th:insert="~{dist/thymeleaf/common_head :: #body_js}"></div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
<!--<div id="app">
<el-container>
<el-aside th:include="dist/thymeleaf/layout :: asider"></el-aside>
<el-container>
@@ -54,8 +54,267 @@
</el-main>
</el-container>
</el-container>
</div>-->
<div id="app">
<el-container>
<!--<el-aside width="200px">
<el-row class="tac">
<el-col :span="24">
<h5>默认颜色</h5>
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-setting"></i>
<span slot="title">导航三</span>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
</el-aside>-->
<el-container>
<el-header>
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">首页</el-menu-item>
<el-submenu index="2">
<template slot="title">个人中心</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
<el-menu-item index="3" @click="ClickToJump('about')">关于</el-menu-item>
<el-menu-item index="4" @click="ClickToJump('feedback')">意见反馈</el-menu-item>
<el-menu-item index="5"><a href="login.jsp">登出</a></el-menu-item>
</el-menu>
</el-header>
<el-main>
<el-col :md="4" :lg="4" :xl="4" class="hidden-sm-and-down">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>用户名</span><br>
<span>学号</span>
</div>
<div class="item">
<el-button type="text" @click="ClickToJump('home')">首页</el-button><br>
<el-button type="text" @click="ClickToJump('user')">个人中心</el-button><br>
<el-button type="text" @click="ClickToJump('about')">关于</el-button><br>
<el-button type="text" @click="ClickToJump('feedback')">意见反馈</el-button>
</div>
</el-card>
</el-col>
<el-col :md="14" :lg="14" :xl="14" :sm="18" :xs="23" offset="1">
<el-row>
<el-col :span="23">
<div class="grid-content bg-purple-dark">
<template>
<el-table :data="tableHomeworkData" style="width: 100%">
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="科目">
<span>{{ props.row.subject }}</span>
</el-form-item>
<el-form-item label="作业名称">
<span>{{ props.row.name }}</span>
</el-form-item>
<el-form-item label="内容">
<span>{{ props.row.name }}</span>
</el-form-item>
<el-form-item label="提交时间">
<span>{{ props.row.date }}</span>
</el-form-item>
<el-form-item label="特殊要求">
<span>{{ props.row.remark }}</span>
</el-form-item>
<el-form-item label="模板下载">
<span>{{ props.row.tempfile }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="科目" prop="subject">
</el-table-column>
<el-table-column label="作业名称" prop="name">
</el-table-column>
<el-table-column label="内容" prop="content">
</el-table-column>
<el-table-column fixed="right" label="操作">
<template slot-scope="scope">
<el-button @click="dialogVisible = true" type="success" plain
size="small">
上传作业
</el-button>
</template>
</el-table-column>
</el-table>
<!--<el-table :data="tableData1" style="width: 100%">
<el-table-column prop="subject" label="科目">
</el-table-column>
<el-table-column prop="name" label="作业名称">
</el-table-column>
<el-table-column prop="content" label="内容">
</el-table-column>
<el-table-column prop="date" label="提交时间">
</el-table-column>
<el-table-column fixed="right" label="操作">
<template slot-scope="scope">
<el-button @click="dialogVisible = true" type="success" plain
size="small">
查看详情
</el-button>
</template>
</el-table-column>
</el-table>-->
</template>
<el-dialog title="上传作业" :visible.sync="dialogVisible" width="50%"
:before-close="dialogClose">
<el-row>
<el-col :span="23">
<span>上传文件</span>
</el-col>
</el-row>
<el-row>
<el-col :span="23">
<div class="grid-content bg-purple-dark">
<el-upload class="upload-demo" ref="upload"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove" :file-list="fileList" :auto-upload="false"
name="imageFile">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success"
@click="submitUpload">
上传到服务器
</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件且不超过500kb</div>
</el-upload>
</div>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</el-col>
</el-row>
<!--<el-row>
<el-col :md="12" :lg="12" :xl="12">
<div class="grid-content bg-purple-dark">
<el-upload class="upload-demo" ref="upload"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove" :file-list="fileList" :auto-upload="false"
name="imageFile">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success"
@click="submitUpload">
上传到服务器
</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件且不超过500kb</div>
</el-upload>
</div>
</el-col>
</el-row>-->
<el-row>
<el-col :span="23">
<div class="grid-content bg-purple-dark">
<el-table :data="DownloadList" height="350" border style="width: 100%">
<el-table-column label="已提交的文件">
<el-table-column prop="colfilename" label="文件名" width="180">
</el-table-column>
<el-table-column prop="colfilesize" label="大小" width="80">
</el-table-column>
<el-table-column prop="colip" label="地址">
</el-table-column>
<el-table-column fixed="right" label="操作" width="150">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="success" plain
size="small">
下载
</el-button>
<el-button type="danger" plain size="small">删除</el-button>
</template>
</el-table-column>
</el-table-column>
</el-table>
</div>
</el-col>
</el-row>
</el-col>
<el-col :md="5" :lg="5" :sm="5" :xl="5" class="hidden-xs-only">
<el-row>
<el-col :span="24">
<div class="grid-content">
<el-card class="box-card hidden-xs-only">
<div slot="header" class="clearfix">
<span>作业提交倒计时</span>
</div>
<div v-for="o in 4" :key="o" class="text item">
{{'倒计时 ' + o }}
</div>
</el-card>
<!--<template>
<el-table :data="tableData2" style="width: 100%">
<el-table-column prop="date" label="作业提交倒计时">
</el-table-column>
</el-table>
</template>-->
</div>
</el-col>
</el-row>
<el-row>
<el-card class="box-card hidden-xs-only">
<div slot="header" class="clearfix">
<span>公告</span>
</div>
<div v-for="o in 4" :key="o" class="text item">
{{'公告内容 ' + o }}
</div>
</el-card>
<!--<template>
<el-table :data="tableData3" style="width: 100%">
<el-table-column label="公告">
<el-table-column prop="date" label="公告内容">
</el-table-column>
<el-table-column prop="name" label="公告内容时间">
</el-table-column>
</el-table-column>
</el-table>
</template>-->
</el-row>
</el-col>
</el-main>
<el-footer>
<div class="footer">
© 2018 作业提交系统
</div></el-footer>
</el-container>
</el-container>
</div>
<!--<div th:include="/dist/thymeleaf/footer :: copyright"></div>-->
<script th:src="@{js/homePage.js}"></script>
<script th:src="@{js/msg.js}"></script>
</body>

View File

@@ -7,6 +7,7 @@
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!--<link rel="stylesheet" href="https://unpkg.com/element-ui@2.1.0/lib/theme-chalk/display.css">-->
<link rel="stylesheet" href="../../static/css/style.css">
</head>
@@ -17,7 +18,7 @@
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<el-container>
<el-aside width="200px">
<!--<el-aside width="200px">
<el-row class="tac">
<el-col :span="24">
<h5>默认颜色</h5>
@@ -51,58 +52,227 @@
</el-menu>
</el-col>
</el-row>
</el-aside>
</el-aside>-->
<el-container>
<el-header>
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">处理中心</el-menu-item>
<el-menu-item index="1">首页</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<template slot="title">个人中心</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
<el-menu-item index="3"><a href="login.jsp">登出</a></el-menu-item>
<el-menu-item index="3" @click="ClickToJump('about')">关于</el-menu-item>
<el-menu-item index="4" @click="ClickToJump('feedback')">意见反馈</el-menu-item>
<el-menu-item index="5"><a href="login.jsp">登出</a></el-menu-item>
</el-menu>
</el-header>
<el-main>
<el-row>
<el-col :md="12" :lg="12" :xl="12">
<div class="grid-content bg-purple-dark">
<el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
:on-remove="handleRemove" :file-list="fileList" :auto-upload="false" name="imageFile">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">
上传到服务器
</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件且不超过500kb</div>
</el-upload>
<el-col :md="4" :lg="4" :xl="4" class="hidden-sm-and-down">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>用户名</span><br>
<span>学号</span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :md="24" :lg="12" :xl="12">
<div class="grid-content bg-purple-dark">
<el-table :data="DownloadList" height="250" border style="width: 100%">
<el-table-column prop="colfilename" label="文件名" width="180">
<div class="item">
<el-button type="text" @click="ClickToJump('home')">首页</el-button><br>
<el-button type="text" @click="ClickToJump('user')">个人中心</el-button><br>
<el-button type="text" @click="ClickToJump('about')">关于</el-button><br>
<el-button type="text" @click="ClickToJump('feedback')">意见反馈</el-button>
</div>
</el-card>
</el-col>
<el-col :md="14" :lg="14" :xl="14" :sm="18" :xs="23" offset="1">
<el-row>
<el-col :span="23">
<div class="grid-content bg-purple-dark">
<template>
<el-table :data="tableHomeworkData" style="width: 100%">
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="科目">
<span>{{ props.row.subject }}</span>
</el-form-item>
<el-form-item label="作业名称">
<span>{{ props.row.name }}</span>
</el-form-item>
<el-form-item label="内容">
<span>{{ props.row.name }}</span>
</el-form-item>
<el-form-item label="提交时间">
<span>{{ props.row.date }}</span>
</el-form-item>
<el-form-item label="特殊要求">
<span>{{ props.row.remark }}</span>
</el-form-item>
<el-form-item label="模板下载">
<span>{{ props.row.tempfile }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="科目" prop="subject">
</el-table-column>
<el-table-column label="作业名称" prop="name">
</el-table-column>
<el-table-column label="内容" prop="content">
</el-table-column>
<el-table-column fixed="right" label="操作">
<template slot-scope="scope">
<el-button @click="dialogVisible = true" type="success" plain
size="small">
上传作业
</el-button>
</template>
</el-table-column>
</el-table>
<!--<el-table :data="tableData1" style="width: 100%">
<el-table-column prop="subject" label="科目">
</el-table-column>
<el-table-column prop="name" label="作业名称">
</el-table-column>
<el-table-column prop="content" label="内容">
</el-table-column>
<el-table-column prop="date" label="提交时间">
</el-table-column>
<el-table-column fixed="right" label="操作">
<template slot-scope="scope">
<el-button @click="dialogVisible = true" type="success" plain
size="small">
查看详情
</el-button>
</template>
</el-table-column>
</el-table>-->
</template>
<el-dialog title="上传作业" :visible.sync="dialogVisible" width="50%"
:before-close="dialogClose">
<el-row>
<el-col :span="23">
<span>上传文件</span>
</el-col>
</el-row>
<el-row>
<el-col :span="23">
<div class="grid-content bg-purple-dark">
<el-upload class="upload-demo" ref="upload"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove" :file-list="fileList" :auto-upload="false"
name="imageFile">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success"
@click="submitUpload">
上传到服务器
</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件且不超过500kb</div>
</el-upload>
</div>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</el-col>
</el-row>
<!--<el-row>
<el-col :md="12" :lg="12" :xl="12">
<div class="grid-content bg-purple-dark">
<el-upload class="upload-demo" ref="upload"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove" :file-list="fileList" :auto-upload="false"
name="imageFile">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success"
@click="submitUpload">
上传到服务器
</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件且不超过500kb</div>
</el-upload>
</div>
</el-col>
</el-row>-->
<el-row>
<el-col :span="23">
<div class="grid-content bg-purple-dark">
<el-table :data="DownloadList" height="350" border style="width: 100%">
<el-table-column label="已提交的文件">
<el-table-column prop="colfilename" label="文件名" width="180">
</el-table-column>
<el-table-column prop="colfilesize" label="大小" width="80">
</el-table-column>
<el-table-column prop="colip" label="地址">
</el-table-column>
<el-table-column fixed="right" label="操作" width="150">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="success" plain
size="small">
下载
</el-button>
<el-button type="danger" plain size="small">删除</el-button>
</template>
</el-table-column>
</el-table-column>
</el-table>
</div>
</el-col>
</el-row>
</el-col>
<el-col :md="5" :lg="5" :sm="5" :xl="5" class="hidden-xs-only">
<el-row>
<el-col :span="24">
<div class="grid-content">
<el-card class="box-card hidden-xs-only">
<div slot="header" class="clearfix">
<span>作业提交倒计时</span>
</div>
<div v-for="o in 4" :key="o" class="text item">
{{'倒计时 ' + o }}
</div>
</el-card>
<!--<template>
<el-table :data="tableData2" style="width: 100%">
<el-table-column prop="date" label="作业提交倒计时">
</el-table-column>
</el-table>
</template>-->
</div>
</el-col>
</el-row>
<el-row>
<el-card class="box-card hidden-xs-only">
<div slot="header" class="clearfix">
<span>公告</span>
</div>
<div v-for="o in 4" :key="o" class="text item">
{{'公告内容 ' + o }}
</div>
</el-card>
<!--<template>
<el-table :data="tableData3" style="width: 100%">
<el-table-column label="公告">
<el-table-column prop="date" label="公告内容">
</el-table-column>
<el-table-column prop="colfilesize" label="大小" width="80">
<el-table-column prop="name" label="公告内容时间">
</el-table-column>
<el-table-column prop="colip" label="地址">
</el-table-column>
<el-table-column fixed="right" label="操作" width="150">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="success" plain size="small">
下载
</el-button>
<el-button type="danger" plain size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
</el-row>
</template>-->
</el-row>
</el-col>
</el-main>
<el-footer>
<div class="footer">
© 2018 作业提交系统
</div></el-footer>
</el-container>
</el-container>
</div>