完成前端上传页面设计
This commit is contained in:
F嘉阳
@@ -26,7 +26,7 @@ public class WebAppConfig implements WebMvcConfigurer {
|
|||||||
public void addResourceHandlers(ResourceHandlerRegistry registry) {
|
public void addResourceHandlers(ResourceHandlerRegistry registry) {
|
||||||
registry.addResourceHandler("/cms/js/**").addResourceLocations("classpath:/js/");
|
registry.addResourceHandler("/cms/js/**").addResourceLocations("classpath:/js/");
|
||||||
registry.addResourceHandler("/cms/css/**").addResourceLocations("classpath:/css/");
|
registry.addResourceHandler("/cms/css/**").addResourceLocations("classpath:/css/");
|
||||||
registry.addResourceHandler("/css/**").addResourceLocations("classpath:/css/");
|
//registry.addResourceHandler("/css/**").addResourceLocations("classpath:/css/");
|
||||||
registry.addResourceHandler("/cms/fonts/**").addResourceLocations("classpath:/fonts/");
|
registry.addResourceHandler("/cms/fonts/**").addResourceLocations("classpath:/fonts/");
|
||||||
registry.addResourceHandler("/cms/images/**").addResourceLocations("classpath:/images/");
|
registry.addResourceHandler("/cms/images/**").addResourceLocations("classpath:/images/");
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
@charset "utf-8";
|
@charset "utf-8";
|
||||||
/* CSS Document */
|
/* CSS Document */
|
||||||
|
@import url("https://unpkg.com/element-ui@2.1.0/lib/theme-chalk/display.css");
|
||||||
@font-face {
|
@font-face {
|
||||||
/* font-properties */
|
/* font-properties */
|
||||||
font-family: element-icons;
|
font-family: element-icons;
|
||||||
@@ -9,3 +10,51 @@
|
|||||||
.loginTitle{
|
.loginTitle{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
.el-row {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.row-bg {
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearfix:before,
|
||||||
|
.clearfix:after {
|
||||||
|
display: table;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
.clearfix:after {
|
||||||
|
clear: both
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-card {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.demo-table-expand {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
.demo-table-expand label {
|
||||||
|
width: 90px;
|
||||||
|
color: #99a9bf;
|
||||||
|
}
|
||||||
|
.demo-table-expand .el-form-item {
|
||||||
|
margin-right: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.footer{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,12 +1,3 @@
|
|||||||
/*var data = "";
|
|
||||||
axios.get('http://localhost:8080/cms/download/findall')
|
|
||||||
.then(function (response) {
|
|
||||||
console.log(response.data);
|
|
||||||
data = response.data;
|
|
||||||
})
|
|
||||||
.catch(function (error) {
|
|
||||||
console.log(error);
|
|
||||||
});*/
|
|
||||||
var Main = {
|
var Main = {
|
||||||
data() {
|
data() {
|
||||||
var checkName = (rule, value, callback) => {
|
var checkName = (rule, value, callback) => {
|
||||||
@@ -44,6 +35,8 @@ var Main = {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
return {
|
return {
|
||||||
|
activeIndex: '1',
|
||||||
|
dialogVisible: false,
|
||||||
ruleForm2: {
|
ruleForm2: {
|
||||||
colname: '',
|
colname: '',
|
||||||
colpassword: '',
|
colpassword: '',
|
||||||
@@ -78,14 +71,59 @@ var Main = {
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
activeName:'login',
|
activeName:'login',
|
||||||
fileList: [{
|
fileList: [],
|
||||||
name: 'food.jpeg',
|
DownloadList: [],
|
||||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
|
tableHomeworkData: [{
|
||||||
|
subject: '信息安全',
|
||||||
|
date: '2018-05-02',
|
||||||
|
name: '实验报告',
|
||||||
|
content: '实验报告',
|
||||||
|
remark:'3000字以上',
|
||||||
|
tempfile:'15251101238.docx'
|
||||||
}, {
|
}, {
|
||||||
name: 'food2.jpeg',
|
subject: '信息安全',
|
||||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
|
date: '2018-05-02',
|
||||||
|
name: '实验报告',
|
||||||
|
content: '实验报告',
|
||||||
|
remark:'3000字以上',
|
||||||
|
tempfile:'15251101238.docx'
|
||||||
|
}, {
|
||||||
|
subject: '信息安全',
|
||||||
|
date: '2018-05-02',
|
||||||
|
name: '实验报告',
|
||||||
|
content: '实验报告',
|
||||||
|
remark:'3000字以上',
|
||||||
|
tempfile:'15251101238.docx'
|
||||||
|
}, {
|
||||||
|
subject: '信息安全',
|
||||||
|
date: '2018-05-02',
|
||||||
|
name: '实验报告',
|
||||||
|
content: '实验报告',
|
||||||
|
remark:'3000字以上',
|
||||||
|
tempfile:'15251101238.docx'
|
||||||
}],
|
}],
|
||||||
DownloadList: []
|
tableData2: [{
|
||||||
|
date: '2016-05-02',
|
||||||
|
}, {
|
||||||
|
date: '2016-05-04',
|
||||||
|
}, {
|
||||||
|
date: '2016-05-01',
|
||||||
|
}, {
|
||||||
|
date: '2016-05-03',
|
||||||
|
}],
|
||||||
|
tableData3: [{
|
||||||
|
date: '2016-05-02',
|
||||||
|
name: '王小虎'
|
||||||
|
}, {
|
||||||
|
date: '2016-05-04',
|
||||||
|
name: '王小虎'
|
||||||
|
}, {
|
||||||
|
date: '2016-05-01',
|
||||||
|
name: '王小虎'
|
||||||
|
}, {
|
||||||
|
date: '2016-05-03',
|
||||||
|
name: '王小虎'
|
||||||
|
}]
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@@ -125,6 +163,9 @@ var Main = {
|
|||||||
handleRemove(file, fileList) {
|
handleRemove(file, fileList) {
|
||||||
console.log(file, fileList);
|
console.log(file, fileList);
|
||||||
},
|
},
|
||||||
|
ClickToJump(targe){
|
||||||
|
window.open("http://localhost:8080/cms/" + targe);
|
||||||
|
},
|
||||||
handleDownload(row) {
|
handleDownload(row) {
|
||||||
/*var url = window.location.protocol+"://"+window.location.host+":"+window.location.port+"/"*/
|
/*var url = window.location.protocol+"://"+window.location.host+":"+window.location.port+"/"*/
|
||||||
window.open("http://localhost:8080/cms/download/dodownload?fileId=" + row.colfileid);
|
window.open("http://localhost:8080/cms/download/dodownload?fileId=" + row.colfileid);
|
||||||
@@ -147,6 +188,13 @@ var Main = {
|
|||||||
handleClose(key, keyPath) {
|
handleClose(key, keyPath) {
|
||||||
console.log(key, keyPath);
|
console.log(key, keyPath);
|
||||||
},
|
},
|
||||||
|
dialogClose(done) {
|
||||||
|
this.$confirm('确认关闭？')
|
||||||
|
.then(_ => {
|
||||||
|
done();
|
||||||
|
})
|
||||||
|
.catch(_ => {});
|
||||||
|
},
|
||||||
showMsg(msg) {
|
showMsg(msg) {
|
||||||
this.$message({
|
this.$message({
|
||||||
message: msg,
|
message: msg,
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
<body>
|
<body>
|
||||||
<div th:insert="~{dist/thymeleaf/common_head :: #body_js}"></div>
|
<div th:insert="~{dist/thymeleaf/common_head :: #body_js}"></div>
|
||||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||||||
<div id="app">
|
<!--<div id="app">
|
||||||
<el-container>
|
<el-container>
|
||||||
<el-aside th:include="dist/thymeleaf/layout :: asider"></el-aside>
|
<el-aside th:include="dist/thymeleaf/layout :: asider"></el-aside>
|
||||||
<el-container>
|
<el-container>
|
||||||
@@ -54,8 +54,267 @@
|
|||||||
</el-main>
|
</el-main>
|
||||||
</el-container>
|
</el-container>
|
||||||
</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>
|
||||||
<!--<div th:include="/dist/thymeleaf/footer :: copyright"></div>-->
|
|
||||||
<script th:src="@{js/homePage.js}"></script>
|
<script th:src="@{js/homePage.js}"></script>
|
||||||
<script th:src="@{js/msg.js}"></script>
|
<script th:src="@{js/msg.js}"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -7,6 +7,7 @@
|
|||||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
<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/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">
|
<link rel="stylesheet" href="../../static/css/style.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@@ -17,7 +18,7 @@
|
|||||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<el-container>
|
<el-container>
|
||||||
<el-aside width="200px">
|
<!--<el-aside width="200px">
|
||||||
<el-row class="tac">
|
<el-row class="tac">
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
<h5>默认颜色</h5>
|
<h5>默认颜色</h5>
|
||||||
@@ -51,28 +52,121 @@
|
|||||||
</el-menu>
|
</el-menu>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-aside>
|
</el-aside>-->
|
||||||
|
|
||||||
<el-container>
|
<el-container>
|
||||||
<el-header>
|
<el-header>
|
||||||
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
<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">
|
<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-1">选项1</el-menu-item>
|
||||||
<el-menu-item index="2-2">选项2</el-menu-item>
|
<el-menu-item index="2-2">选项2</el-menu-item>
|
||||||
<el-menu-item index="2-3">选项3</el-menu-item>
|
<el-menu-item index="2-3">选项3</el-menu-item>
|
||||||
</el-submenu>
|
</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-menu>
|
||||||
</el-header>
|
</el-header>
|
||||||
<el-main>
|
<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-row>
|
||||||
<el-col :md="12" :lg="12" :xl="12">
|
<el-col :span="23">
|
||||||
<div class="grid-content bg-purple-dark">
|
<div class="grid-content bg-purple-dark">
|
||||||
<el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
|
<template>
|
||||||
:on-remove="handleRemove" :file-list="fileList" :auto-upload="false" name="imageFile">
|
<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 slot="trigger" size="small" type="primary">选取文件</el-button>
|
||||||
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">
|
<el-button style="margin-left: 10px;" size="small" type="success"
|
||||||
|
@click="submitUpload">
|
||||||
上传到服务器
|
上传到服务器
|
||||||
</el-button>
|
</el-button>
|
||||||
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
|
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||||
@@ -80,10 +174,37 @@
|
|||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row>
|
<span slot="footer" class="dialog-footer">
|
||||||
<el-col :md="24" :lg="12" :xl="12">
|
<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">
|
<div class="grid-content bg-purple-dark">
|
||||||
<el-table :data="DownloadList" height="250" border style="width: 100%">
|
<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 prop="colfilename" label="文件名" width="180">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="colfilesize" label="大小" width="80">
|
<el-table-column prop="colfilesize" label="大小" width="80">
|
||||||
@@ -92,17 +213,66 @@
|
|||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column fixed="right" label="操作" width="150">
|
<el-table-column fixed="right" label="操作" width="150">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-button @click="handleClick(scope.row)" type="success" plain size="small">
|
<el-button @click="handleClick(scope.row)" type="success" plain
|
||||||
|
size="small">
|
||||||
下载
|
下载
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button type="danger" plain size="small">删除</el-button>
|
<el-button type="danger" plain size="small">删除</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</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-main>
|
||||||
|
<el-footer>
|
||||||
|
<div class="footer">
|
||||||
|
© 2018 作业提交系统
|
||||||
|
</div></el-footer>
|
||||||
</el-container>
|
</el-container>
|
||||||
</el-container>
|
</el-container>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user