commit
a4df06e56a
108 changed files with 30216 additions and 0 deletions
@ -0,0 +1,3 @@ |
|||||||
|
> 1% |
||||||
|
last 2 versions |
||||||
|
not ie <= 8 |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
.DS_Store |
||||||
|
node_modules |
||||||
|
/dist |
||||||
|
example.html |
||||||
|
favicon.ico |
||||||
|
# local env files |
||||||
|
.env.local |
||||||
|
.env.*.local |
||||||
|
|
||||||
|
# Log files |
||||||
|
npm-debug.log* |
||||||
|
yarn-debug.log* |
||||||
|
yarn-error.log* |
||||||
|
|
||||||
|
# Editor directories and files |
||||||
|
.idea |
||||||
|
.vscode |
||||||
|
*.suo |
||||||
|
*.ntvs* |
||||||
|
*.njsproj |
||||||
|
*.sln |
||||||
|
*.sw* |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
{ |
||||||
|
"tabWidth": 4, |
||||||
|
"singleQuote": true, |
||||||
|
"trailingComma": "none", |
||||||
|
"printWidth": 140 |
||||||
|
} |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
MIT License |
||||||
|
|
||||||
|
Copyright (c) 2016-2019 vue-manage-system |
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||||
|
of this software and associated documentation files (the "Software"), to deal |
||||||
|
in the Software without restriction, including without limitation the rights |
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||||
|
copies of the Software, and to permit persons to whom the Software is |
||||||
|
furnished to do so, subject to the following conditions: |
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all |
||||||
|
copies or substantial portions of the Software. |
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||||
|
SOFTWARE. |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
module.exports = { |
||||||
|
presets: [ |
||||||
|
'@vue/app' |
||||||
|
] |
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,37 @@ |
|||||||
|
{ |
||||||
|
"name": "vue-manage-system", |
||||||
|
"version": "4.2.0", |
||||||
|
"private": true, |
||||||
|
"scripts": { |
||||||
|
"dev": "npm run serve", |
||||||
|
"serve": "vue-cli-service serve", |
||||||
|
"build": "vue-cli-service build" |
||||||
|
}, |
||||||
|
"dependencies": { |
||||||
|
"axios": "^0.18.0", |
||||||
|
"babel-polyfill": "^6.26.0", |
||||||
|
"echarts": "^4.9.0", |
||||||
|
"element-theme": "^2.0.1", |
||||||
|
"element-ui": "^2.13.0", |
||||||
|
"lodash": "^4.17.20", |
||||||
|
"mavon-editor": "^2.6.17", |
||||||
|
"postcss-px2rem": "^0.3.0", |
||||||
|
"px2rem-loader": "^0.1.9", |
||||||
|
"vue": "^2.6.10", |
||||||
|
"vue-cropperjs": "^3.0.0", |
||||||
|
"vue-i18n": "^8.10.0", |
||||||
|
"vue-quill-editor": "^3.0.6", |
||||||
|
"vue-router": "^3.0.3", |
||||||
|
"vue-schart": "^2.0.0", |
||||||
|
"vuedraggable": "^2.17.0", |
||||||
|
"vuex": "^3.1.2" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@vue/cli-plugin-babel": "^3.9.0", |
||||||
|
"@vue/cli-service": "^3.9.0", |
||||||
|
"element-theme-chalk": "^2.13.0", |
||||||
|
"node-sass": "^4.14.1", |
||||||
|
"sass-loader": "^8.0.0", |
||||||
|
"vue-template-compiler": "^2.6.10" |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
module.exports = { |
||||||
|
plugins: { |
||||||
|
autoprefixer: {} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8"> |
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> |
||||||
|
<link rel="stylesheet" href="//at.alicdn.com/t/font_830376_qzecyukz0s.css"> |
||||||
|
<title>电子科大虚拟仿真系统</title> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<noscript> |
||||||
|
<strong>We're sorry but vms doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||||
|
</noscript> |
||||||
|
<div id="app"></div> |
||||||
|
<!-- built files will be auto injected --> |
||||||
|
</body> |
||||||
|
</html> |
||||||
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 81 KiB |
|
After Width: | Height: | Size: 112 KiB |
@ -0,0 +1,30 @@ |
|||||||
|
<template> |
||||||
|
<div id="app"> |
||||||
|
<router-view></router-view> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'App', |
||||||
|
created () { |
||||||
|
//在页面加载时读取sessionStorage里的状态信息 |
||||||
|
if (sessionStorage.getItem("kd_server_store") ) { |
||||||
|
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("kd_server_store")))) |
||||||
|
} |
||||||
|
|
||||||
|
//在页面刷新时将vuex里的信息保存到sessionStorage里 |
||||||
|
window.addEventListener("beforeunload",()=>{ |
||||||
|
sessionStorage.setItem("kd_server_store",JSON.stringify(this.$store.state)) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
@import "./assets/css/main.css"; |
||||||
|
/* @import "./assets/css/color-dark.css"; */ |
||||||
|
/*深色主题*/ |
||||||
|
@import "./assets/css/theme-green/color-green.css"; |
||||||
|
/* 浅绿色主题 */ |
||||||
|
</style> |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
.header{ |
||||||
|
background-color: #242f42; |
||||||
|
} |
||||||
|
.login-wrap{ |
||||||
|
background: #324157; |
||||||
|
} |
||||||
|
.plugins-tips{ |
||||||
|
background: #eef1f6; |
||||||
|
} |
||||||
|
.plugins-tips a{ |
||||||
|
color: #20a0ff; |
||||||
|
} |
||||||
|
.el-upload--text em { |
||||||
|
color: #20a0ff; |
||||||
|
} |
||||||
|
.pure-button{ |
||||||
|
background: #20a0ff; |
||||||
|
} |
||||||
|
.tags-li.active { |
||||||
|
border: 1px solid #409EFF; |
||||||
|
background-color: #409EFF; |
||||||
|
} |
||||||
|
.message-title{ |
||||||
|
color: #20a0ff; |
||||||
|
} |
||||||
|
.collapse-btn:hover{ |
||||||
|
background: rgb(40,52,70); |
||||||
|
} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
|
||||||
|
[class*=" icon-"], [class^=icon-] { |
||||||
|
font-family: iconfont!important; |
||||||
|
} |
||||||
@ -0,0 +1,325 @@ |
|||||||
|
* { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
html, |
||||||
|
body, |
||||||
|
#app, |
||||||
|
.wrapper { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
text-decoration: none |
||||||
|
} |
||||||
|
i{ |
||||||
|
font-style: normal; |
||||||
|
} |
||||||
|
li { |
||||||
|
list-style-type:none; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.content-box { |
||||||
|
padding-bottom: 30px; |
||||||
|
-webkit-transition: left .3s ease-in-out; |
||||||
|
transition: left .3s ease-in-out; |
||||||
|
background: #f0f0f0; |
||||||
|
} |
||||||
|
|
||||||
|
.content { |
||||||
|
width: auto; |
||||||
|
height: 100%; |
||||||
|
padding: 20px; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
.content-collapse { |
||||||
|
left: 65px; |
||||||
|
} |
||||||
|
|
||||||
|
.container { |
||||||
|
padding: 30px; |
||||||
|
background: #fff; |
||||||
|
border: 1px solid #ddd; |
||||||
|
border-radius: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.crumbs { |
||||||
|
margin: 10px 0; |
||||||
|
} |
||||||
|
|
||||||
|
.el-table th { |
||||||
|
background-color: #f5f7fa !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pagination { |
||||||
|
margin: 20px 0; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
|
||||||
|
.plugins-tips { |
||||||
|
padding: 20px 10px; |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.el-button+.el-tooltip { |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.el-table tr:hover { |
||||||
|
background: #f6faff; |
||||||
|
} |
||||||
|
|
||||||
|
.orderTable td .el-input{ |
||||||
|
width: 60%; |
||||||
|
} |
||||||
|
|
||||||
|
.orderTable .el-select>.el-input{ |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
.mgb20 { |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.move-enter-active, |
||||||
|
.move-leave-active { |
||||||
|
transition: opacity .5s; |
||||||
|
} |
||||||
|
|
||||||
|
.move-enter, |
||||||
|
.move-leave { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
/*BaseForm*/ |
||||||
|
|
||||||
|
.form-box { |
||||||
|
width: 600px; |
||||||
|
} |
||||||
|
|
||||||
|
.form-box .line { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.el-time-panel__content::after, |
||||||
|
.el-time-panel__content::before { |
||||||
|
margin-top: -7px; |
||||||
|
} |
||||||
|
|
||||||
|
.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) { |
||||||
|
padding-bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
/*Upload*/ |
||||||
|
|
||||||
|
.pure-button { |
||||||
|
width: 150px; |
||||||
|
height: 40px; |
||||||
|
line-height: 40px; |
||||||
|
text-align: center; |
||||||
|
color: #fff; |
||||||
|
border-radius: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
.g-core-image-corp-container .info-aside { |
||||||
|
height: 45px; |
||||||
|
} |
||||||
|
|
||||||
|
.avatar-uploader .el-upload--text { |
||||||
|
background-color: #fff; |
||||||
|
border: 1px dashed #d9d9d9; |
||||||
|
border-radius: 6px; |
||||||
|
box-sizing: border-box; |
||||||
|
width: 360px; |
||||||
|
height: 180px; |
||||||
|
text-align: center; |
||||||
|
cursor: pointer; |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.avatar-uploader .el-upload--text .el-icon-upload { |
||||||
|
font-size: 67px; |
||||||
|
color: #97a8be; |
||||||
|
margin: 40px 0 16px; |
||||||
|
line-height: 50px; |
||||||
|
} |
||||||
|
|
||||||
|
.avatar-uploader .el-upload--text { |
||||||
|
color: #97a8be; |
||||||
|
font-size: 14px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.avatar-uploader .el-upload--text em { |
||||||
|
font-style: normal; |
||||||
|
} |
||||||
|
|
||||||
|
/* .link_upload .el-upload-list{ |
||||||
|
width: 30%; |
||||||
|
} */ |
||||||
|
|
||||||
|
/*VueEditor*/ |
||||||
|
|
||||||
|
.ql-container { |
||||||
|
min-height: 400px; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-tooltip { |
||||||
|
transform: translateX(117.5px) translateY(10px) !important; |
||||||
|
} |
||||||
|
|
||||||
|
.editor-btn { |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
/*markdown*/ |
||||||
|
|
||||||
|
.v-note-wrapper .v-note-panel { |
||||||
|
min-height: 500px; |
||||||
|
} |
||||||
|
|
||||||
|
.ms-login .el-tabs__nav-wrap::after{ |
||||||
|
background-color: #fff; |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
.ms-login .el-tabs__item{ |
||||||
|
padding: 0 90px; |
||||||
|
color: #999; |
||||||
|
} |
||||||
|
.ms-login .el-tabs__item:hover{ |
||||||
|
color: #000; |
||||||
|
} |
||||||
|
.ms-login .el-tabs__item.is-active{ |
||||||
|
color: #333; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
.ms-login .el-tabs__active-bar{ |
||||||
|
background-color: #000; |
||||||
|
border-radius:2px; |
||||||
|
} |
||||||
|
.ms-login .el-tabs__nav-scroll{ |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.ms-login .el-input__inner{ |
||||||
|
height: 80px; |
||||||
|
line-height: 80px; |
||||||
|
border:1px solid rgba(220,220,220,1); |
||||||
|
border-radius:2px; |
||||||
|
} |
||||||
|
|
||||||
|
.el-row { |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.mgb20 { |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
#app .el-table thead{ |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
#app .el-table th{ |
||||||
|
background-color: #9278FF!important; |
||||||
|
font-size: 16px; |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
#app .el-select{ |
||||||
|
display: unset; |
||||||
|
} |
||||||
|
|
||||||
|
/*flex*/ |
||||||
|
.flex-center{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.flex-between{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.flex-around{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-around; |
||||||
|
} |
||||||
|
.flex-start-around{ |
||||||
|
display: flex; |
||||||
|
align-items: flex-start; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
.flex-end-around{ |
||||||
|
display: flex; |
||||||
|
align-items: flex-end; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
.flex-column{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
.flex-start{ |
||||||
|
display: flex; |
||||||
|
align-items: flex-start; |
||||||
|
} |
||||||
|
.flex-end{ |
||||||
|
display: flex; |
||||||
|
align-items: flex-end; |
||||||
|
} |
||||||
|
|
||||||
|
.hr_tag{ |
||||||
|
background-color: #9278FF; |
||||||
|
width: 3px; |
||||||
|
height: 15px; |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.user_header{ |
||||||
|
padding: 20px 0; |
||||||
|
border-bottom: 1px dashed #eee; |
||||||
|
} |
||||||
|
.addhr_tag{ |
||||||
|
background-color: #666; |
||||||
|
width: 6px; |
||||||
|
height: 17px; |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.per_title span{ |
||||||
|
font-size: 16px; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
.per_back{ |
||||||
|
margin-left: 5px; |
||||||
|
} |
||||||
|
.per_school{ |
||||||
|
margin-left: 30px; |
||||||
|
} |
||||||
|
.per_title:hover{ |
||||||
|
cursor:pointer; |
||||||
|
} |
||||||
|
|
||||||
|
/* 溢出省略号 */ |
||||||
|
.ellipsis{ |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
|
||||||
|
.userRadio .el-radio{ |
||||||
|
margin-right: 10px!important; |
||||||
|
} |
||||||
|
.userRadio .el-radio__input{ |
||||||
|
display: none!important; |
||||||
|
} |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
.header{ |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
.login-wrap{ |
||||||
|
background: rgba(56, 157, 170, 0.82);; |
||||||
|
} |
||||||
|
.plugins-tips{ |
||||||
|
background: #f2f2f2; |
||||||
|
} |
||||||
|
.plugins-tips a{ |
||||||
|
color: #00d1b2; |
||||||
|
} |
||||||
|
.el-upload--text em { |
||||||
|
color: #00d1b2; |
||||||
|
} |
||||||
|
.pure-button{ |
||||||
|
background: #00d1b2; |
||||||
|
} |
||||||
|
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus { |
||||||
|
background-color: #00d1b2 !important; |
||||||
|
border-color: #00d1b2 !important; |
||||||
|
} |
||||||
|
.tags-li.active { |
||||||
|
border: 1px solid #9278FF; |
||||||
|
background-color: #9278FF; |
||||||
|
} |
||||||
|
.collapse-btn:hover{ |
||||||
|
background: #00d1b2; |
||||||
|
} |
||||||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -0,0 +1,539 @@ |
|||||||
|
/* Logo 字体 */ |
||||||
|
@font-face { |
||||||
|
font-family: "iconfont logo"; |
||||||
|
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); |
||||||
|
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), |
||||||
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), |
||||||
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), |
||||||
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); |
||||||
|
} |
||||||
|
|
||||||
|
.logo { |
||||||
|
font-family: "iconfont logo"; |
||||||
|
font-size: 160px; |
||||||
|
font-style: normal; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
} |
||||||
|
|
||||||
|
/* tabs */ |
||||||
|
.nav-tabs { |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.nav-tabs .nav-more { |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
height: 42px; |
||||||
|
line-height: 42px; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
|
||||||
|
#tabs { |
||||||
|
border-bottom: 1px solid #eee; |
||||||
|
} |
||||||
|
|
||||||
|
#tabs li { |
||||||
|
cursor: pointer; |
||||||
|
width: 100px; |
||||||
|
height: 40px; |
||||||
|
line-height: 40px; |
||||||
|
text-align: center; |
||||||
|
font-size: 16px; |
||||||
|
border-bottom: 2px solid transparent; |
||||||
|
position: relative; |
||||||
|
z-index: 1; |
||||||
|
margin-bottom: -1px; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
#tabs .active { |
||||||
|
border-bottom-color: #f00; |
||||||
|
color: #222; |
||||||
|
} |
||||||
|
|
||||||
|
.tab-container .content { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
/* 页面布局 */ |
||||||
|
.main { |
||||||
|
padding: 30px 100px; |
||||||
|
width: 960px; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
.main .logo { |
||||||
|
color: #333; |
||||||
|
text-align: left; |
||||||
|
margin-bottom: 30px; |
||||||
|
line-height: 1; |
||||||
|
height: 110px; |
||||||
|
margin-top: -50px; |
||||||
|
overflow: hidden; |
||||||
|
*zoom: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.main .logo a { |
||||||
|
font-size: 160px; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
|
||||||
|
.helps { |
||||||
|
margin-top: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
.helps pre { |
||||||
|
padding: 20px; |
||||||
|
margin: 10px 0; |
||||||
|
border: solid 1px #e7e1cd; |
||||||
|
background-color: #fffdef; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.icon_lists { |
||||||
|
width: 100% !important; |
||||||
|
overflow: hidden; |
||||||
|
*zoom: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.icon_lists li { |
||||||
|
width: 100px; |
||||||
|
margin-bottom: 10px; |
||||||
|
margin-right: 20px; |
||||||
|
text-align: center; |
||||||
|
list-style: none !important; |
||||||
|
cursor: default; |
||||||
|
} |
||||||
|
|
||||||
|
.icon_lists li .code-name { |
||||||
|
line-height: 1.2; |
||||||
|
} |
||||||
|
|
||||||
|
.icon_lists .icon { |
||||||
|
display: block; |
||||||
|
height: 100px; |
||||||
|
line-height: 100px; |
||||||
|
font-size: 42px; |
||||||
|
margin: 10px auto; |
||||||
|
color: #333; |
||||||
|
-webkit-transition: font-size 0.25s linear, width 0.25s linear; |
||||||
|
-moz-transition: font-size 0.25s linear, width 0.25s linear; |
||||||
|
transition: font-size 0.25s linear, width 0.25s linear; |
||||||
|
} |
||||||
|
|
||||||
|
.icon_lists .icon:hover { |
||||||
|
font-size: 100px; |
||||||
|
} |
||||||
|
|
||||||
|
.icon_lists .svg-icon { |
||||||
|
/* 通过设置 font-size 来改变图标大小 */ |
||||||
|
width: 1em; |
||||||
|
/* 图标和文字相邻时，垂直对齐 */ |
||||||
|
vertical-align: -0.15em; |
||||||
|
/* 通过设置 color 来改变 SVG 的颜色/fill */ |
||||||
|
fill: currentColor; |
||||||
|
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 |
||||||
|
normalize.css 中也包含这行 */ |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.icon_lists li .name, |
||||||
|
.icon_lists li .code-name { |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
|
||||||
|
/* markdown 样式 */ |
||||||
|
.markdown { |
||||||
|
color: #666; |
||||||
|
font-size: 14px; |
||||||
|
line-height: 1.8; |
||||||
|
} |
||||||
|
|
||||||
|
.highlight { |
||||||
|
line-height: 1.5; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown img { |
||||||
|
vertical-align: middle; |
||||||
|
max-width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h1 { |
||||||
|
color: #404040; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 40px; |
||||||
|
margin-bottom: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h2, |
||||||
|
.markdown h3, |
||||||
|
.markdown h4, |
||||||
|
.markdown h5, |
||||||
|
.markdown h6 { |
||||||
|
color: #404040; |
||||||
|
margin: 1.6em 0 0.6em 0; |
||||||
|
font-weight: 500; |
||||||
|
clear: both; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h1 { |
||||||
|
font-size: 28px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h2 { |
||||||
|
font-size: 22px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h3 { |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h4 { |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h5 { |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h6 { |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown hr { |
||||||
|
height: 1px; |
||||||
|
border: 0; |
||||||
|
background: #e9e9e9; |
||||||
|
margin: 16px 0; |
||||||
|
clear: both; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown p { |
||||||
|
margin: 1em 0; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown>p, |
||||||
|
.markdown>blockquote, |
||||||
|
.markdown>.highlight, |
||||||
|
.markdown>ol, |
||||||
|
.markdown>ul { |
||||||
|
width: 80%; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown ul>li { |
||||||
|
list-style: circle; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown>ul li, |
||||||
|
.markdown blockquote ul>li { |
||||||
|
margin-left: 20px; |
||||||
|
padding-left: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown>ul li p, |
||||||
|
.markdown>ol li p { |
||||||
|
margin: 0.6em 0; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown ol>li { |
||||||
|
list-style: decimal; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown>ol li, |
||||||
|
.markdown blockquote ol>li { |
||||||
|
margin-left: 20px; |
||||||
|
padding-left: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown code { |
||||||
|
margin: 0 3px; |
||||||
|
padding: 0 5px; |
||||||
|
background: #eee; |
||||||
|
border-radius: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown strong, |
||||||
|
.markdown b { |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown>table { |
||||||
|
border-collapse: collapse; |
||||||
|
border-spacing: 0px; |
||||||
|
empty-cells: show; |
||||||
|
border: 1px solid #e9e9e9; |
||||||
|
width: 95%; |
||||||
|
margin-bottom: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown>table th { |
||||||
|
white-space: nowrap; |
||||||
|
color: #333; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown>table th, |
||||||
|
.markdown>table td { |
||||||
|
border: 1px solid #e9e9e9; |
||||||
|
padding: 8px 16px; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown>table th { |
||||||
|
background: #F7F7F7; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown blockquote { |
||||||
|
font-size: 90%; |
||||||
|
color: #999; |
||||||
|
border-left: 4px solid #e9e9e9; |
||||||
|
padding-left: 0.8em; |
||||||
|
margin: 1em 0; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown blockquote p { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown .anchor { |
||||||
|
opacity: 0; |
||||||
|
transition: opacity 0.3s ease; |
||||||
|
margin-left: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown .waiting { |
||||||
|
color: #ccc; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h1:hover .anchor, |
||||||
|
.markdown h2:hover .anchor, |
||||||
|
.markdown h3:hover .anchor, |
||||||
|
.markdown h4:hover .anchor, |
||||||
|
.markdown h5:hover .anchor, |
||||||
|
.markdown h6:hover .anchor { |
||||||
|
opacity: 1; |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown>br, |
||||||
|
.markdown>p>br { |
||||||
|
clear: both; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.hljs { |
||||||
|
display: block; |
||||||
|
background: white; |
||||||
|
padding: 0.5em; |
||||||
|
color: #333333; |
||||||
|
overflow-x: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-comment, |
||||||
|
.hljs-meta { |
||||||
|
color: #969896; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-string, |
||||||
|
.hljs-variable, |
||||||
|
.hljs-template-variable, |
||||||
|
.hljs-strong, |
||||||
|
.hljs-emphasis, |
||||||
|
.hljs-quote { |
||||||
|
color: #df5000; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-keyword, |
||||||
|
.hljs-selector-tag, |
||||||
|
.hljs-type { |
||||||
|
color: #a71d5d; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-literal, |
||||||
|
.hljs-symbol, |
||||||
|
.hljs-bullet, |
||||||
|
.hljs-attribute { |
||||||
|
color: #0086b3; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-section, |
||||||
|
.hljs-name { |
||||||
|
color: #63a35c; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-tag { |
||||||
|
color: #333333; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-title, |
||||||
|
.hljs-attr, |
||||||
|
.hljs-selector-id, |
||||||
|
.hljs-selector-class, |
||||||
|
.hljs-selector-attr, |
||||||
|
.hljs-selector-pseudo { |
||||||
|
color: #795da3; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-addition { |
||||||
|
color: #55a532; |
||||||
|
background-color: #eaffea; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-deletion { |
||||||
|
color: #bd2c00; |
||||||
|
background-color: #ffecec; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-link { |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
|
||||||
|
/* 代码高亮 */ |
||||||
|
/* PrismJS 1.15.0 |
||||||
|
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ |
||||||
|
/** |
||||||
|
* prism.js default theme for JavaScript, CSS and HTML |
||||||
|
* Based on dabblet (http://dabblet.com) |
||||||
|
* @author Lea Verou |
||||||
|
*/ |
||||||
|
code[class*="language-"], |
||||||
|
pre[class*="language-"] { |
||||||
|
color: black; |
||||||
|
background: none; |
||||||
|
text-shadow: 0 1px white; |
||||||
|
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; |
||||||
|
text-align: left; |
||||||
|
white-space: pre; |
||||||
|
word-spacing: normal; |
||||||
|
word-break: normal; |
||||||
|
word-wrap: normal; |
||||||
|
line-height: 1.5; |
||||||
|
|
||||||
|
-moz-tab-size: 4; |
||||||
|
-o-tab-size: 4; |
||||||
|
tab-size: 4; |
||||||
|
|
||||||
|
-webkit-hyphens: none; |
||||||
|
-moz-hyphens: none; |
||||||
|
-ms-hyphens: none; |
||||||
|
hyphens: none; |
||||||
|
} |
||||||
|
|
||||||
|
pre[class*="language-"]::-moz-selection, |
||||||
|
pre[class*="language-"] ::-moz-selection, |
||||||
|
code[class*="language-"]::-moz-selection, |
||||||
|
code[class*="language-"] ::-moz-selection { |
||||||
|
text-shadow: none; |
||||||
|
background: #b3d4fc; |
||||||
|
} |
||||||
|
|
||||||
|
pre[class*="language-"]::selection, |
||||||
|
pre[class*="language-"] ::selection, |
||||||
|
code[class*="language-"]::selection, |
||||||
|
code[class*="language-"] ::selection { |
||||||
|
text-shadow: none; |
||||||
|
background: #b3d4fc; |
||||||
|
} |
||||||
|
|
||||||
|
@media print { |
||||||
|
|
||||||
|
code[class*="language-"], |
||||||
|
pre[class*="language-"] { |
||||||
|
text-shadow: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* Code blocks */ |
||||||
|
pre[class*="language-"] { |
||||||
|
padding: 1em; |
||||||
|
margin: .5em 0; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
|
||||||
|
:not(pre)>code[class*="language-"], |
||||||
|
pre[class*="language-"] { |
||||||
|
background: #f5f2f0; |
||||||
|
} |
||||||
|
|
||||||
|
/* Inline code */ |
||||||
|
:not(pre)>code[class*="language-"] { |
||||||
|
padding: .1em; |
||||||
|
border-radius: .3em; |
||||||
|
white-space: normal; |
||||||
|
} |
||||||
|
|
||||||
|
.token.comment, |
||||||
|
.token.prolog, |
||||||
|
.token.doctype, |
||||||
|
.token.cdata { |
||||||
|
color: slategray; |
||||||
|
} |
||||||
|
|
||||||
|
.token.punctuation { |
||||||
|
color: #999; |
||||||
|
} |
||||||
|
|
||||||
|
.namespace { |
||||||
|
opacity: .7; |
||||||
|
} |
||||||
|
|
||||||
|
.token.property, |
||||||
|
.token.tag, |
||||||
|
.token.boolean, |
||||||
|
.token.number, |
||||||
|
.token.constant, |
||||||
|
.token.symbol, |
||||||
|
.token.deleted { |
||||||
|
color: #905; |
||||||
|
} |
||||||
|
|
||||||
|
.token.selector, |
||||||
|
.token.attr-name, |
||||||
|
.token.string, |
||||||
|
.token.char, |
||||||
|
.token.builtin, |
||||||
|
.token.inserted { |
||||||
|
color: #690; |
||||||
|
} |
||||||
|
|
||||||
|
.token.operator, |
||||||
|
.token.entity, |
||||||
|
.token.url, |
||||||
|
.language-css .token.string, |
||||||
|
.style .token.string { |
||||||
|
color: #9a6e3a; |
||||||
|
background: hsla(0, 0%, 100%, .5); |
||||||
|
} |
||||||
|
|
||||||
|
.token.atrule, |
||||||
|
.token.attr-value, |
||||||
|
.token.keyword { |
||||||
|
color: #07a; |
||||||
|
} |
||||||
|
|
||||||
|
.token.function, |
||||||
|
.token.class-name { |
||||||
|
color: #DD4A68; |
||||||
|
} |
||||||
|
|
||||||
|
.token.regex, |
||||||
|
.token.important, |
||||||
|
.token.variable { |
||||||
|
color: #e90; |
||||||
|
} |
||||||
|
|
||||||
|
.token.important, |
||||||
|
.token.bold { |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
.token.italic { |
||||||
|
font-style: italic; |
||||||
|
} |
||||||
|
|
||||||
|
.token.entity { |
||||||
|
cursor: help; |
||||||
|
} |
||||||
@ -0,0 +1,446 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8"/> |
||||||
|
<title>IconFont Demo</title> |
||||||
|
<link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/> |
||||||
|
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> |
||||||
|
<link rel="stylesheet" href="demo.css"> |
||||||
|
<link rel="stylesheet" href="iconfont.css"> |
||||||
|
<script src="iconfont.js"></script> |
||||||
|
<!-- jQuery --> |
||||||
|
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script> |
||||||
|
<!-- 代码高亮 --> |
||||||
|
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div class="main"> |
||||||
|
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"></a></h1> |
||||||
|
<div class="nav-tabs"> |
||||||
|
<ul id="tabs" class="dib-box"> |
||||||
|
<li class="dib active"><span>Unicode</span></li> |
||||||
|
<li class="dib"><span>Font class</span></li> |
||||||
|
<li class="dib"><span>Symbol</span></li> |
||||||
|
</ul> |
||||||
|
|
||||||
|
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1540265" target="_blank" class="nav-more">查看项目</a> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="tab-container"> |
||||||
|
<div class="content unicode" style="display: block;"> |
||||||
|
<ul class="icon_lists dib-box"> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">已勾选32</div> |
||||||
|
<div class="code-name">&#xe63d;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">未勾选32</div> |
||||||
|
<div class="code-name">&#xe63e;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">未勾选40</div> |
||||||
|
<div class="code-name">&#xe64a;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">已勾选40</div> |
||||||
|
<div class="code-name">&#xe64b;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">实 向右箭头-01</div> |
||||||
|
<div class="code-name">&#xe626;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">实 向下箭头-01</div> |
||||||
|
<div class="code-name">&#xe625;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">加号-填充</div> |
||||||
|
<div class="code-name">&#xe72d;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">42指向上、上箭头</div> |
||||||
|
<div class="code-name">&#xe769;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">44指向下、下箭头</div> |
||||||
|
<div class="code-name">&#xe76b;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">群蜂删除-充</div> |
||||||
|
<div class="code-name">&#xe6e9;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">qq</div> |
||||||
|
<div class="code-name">&#xe614;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">微信-36</div> |
||||||
|
<div class="code-name">&#xe68a;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
</ul> |
||||||
|
<div class="article markdown"> |
||||||
|
<h2 id="unicode-">Unicode 引用</h2> |
||||||
|
<hr> |
||||||
|
|
||||||
|
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p> |
||||||
|
<ul> |
||||||
|
<li>兼容性最好，支持 IE6+，及所有现代浏览器。</li> |
||||||
|
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li> |
||||||
|
<li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li> |
||||||
|
</ul> |
||||||
|
<blockquote> |
||||||
|
<p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p> |
||||||
|
</blockquote> |
||||||
|
<p>Unicode 使用步骤如下：</p> |
||||||
|
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3> |
||||||
|
<pre><code class="language-css" |
||||||
|
>@font-face { |
||||||
|
font-family: 'iconfont'; |
||||||
|
src: url('iconfont.eot'); |
||||||
|
src: url('iconfont.eot?#iefix') format('embedded-opentype'), |
||||||
|
url('iconfont.woff2') format('woff2'), |
||||||
|
url('iconfont.woff') format('woff'), |
||||||
|
url('iconfont.ttf') format('truetype'), |
||||||
|
url('iconfont.svg#iconfont') format('svg'); |
||||||
|
} |
||||||
|
</code></pre> |
||||||
|
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> |
||||||
|
<pre><code class="language-css" |
||||||
|
>.iconfont { |
||||||
|
font-family: "iconfont" !important; |
||||||
|
font-size: 16px; |
||||||
|
font-style: normal; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
} |
||||||
|
</code></pre> |
||||||
|
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3> |
||||||
|
<pre> |
||||||
|
<code class="language-html" |
||||||
|
><span class="iconfont">&#x33;</span> |
||||||
|
</code></pre> |
||||||
|
<blockquote> |
||||||
|
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> |
||||||
|
</blockquote> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="content font-class"> |
||||||
|
<ul class="icon_lists dib-box"> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-yigouxuan"></span> |
||||||
|
<div class="name"> |
||||||
|
已勾选32 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-yigouxuan |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-weigouxuan"></span> |
||||||
|
<div class="name"> |
||||||
|
未勾选32 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-weigouxuan |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-weigouxuan1"></span> |
||||||
|
<div class="name"> |
||||||
|
未勾选40 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-weigouxuan1 |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-yigouxuan1"></span> |
||||||
|
<div class="name"> |
||||||
|
已勾选40 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-yigouxuan1 |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-shixiangyoujiantou-"></span> |
||||||
|
<div class="name"> |
||||||
|
实 向右箭头-01 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-shixiangyoujiantou- |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-shixiangxiajiantou-"></span> |
||||||
|
<div class="name"> |
||||||
|
实 向下箭头-01 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-shixiangxiajiantou- |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-jiahao"></span> |
||||||
|
<div class="name"> |
||||||
|
加号-填充 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-jiahao |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-up"></span> |
||||||
|
<div class="name"> |
||||||
|
42指向上、上箭头 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-up |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-down"></span> |
||||||
|
<div class="name"> |
||||||
|
44指向下、下箭头 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-down |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-delete"></span> |
||||||
|
<div class="name"> |
||||||
|
群蜂删除-充 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-delete |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-qq"></span> |
||||||
|
<div class="name"> |
||||||
|
qq |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-qq |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-weixin"></span> |
||||||
|
<div class="name"> |
||||||
|
微信-36 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-weixin |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
</ul> |
||||||
|
<div class="article markdown"> |
||||||
|
<h2 id="font-class-">font-class 引用</h2> |
||||||
|
<hr> |
||||||
|
|
||||||
|
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p> |
||||||
|
<p>与 Unicode 使用方式相比，具有如下特点：</p> |
||||||
|
<ul> |
||||||
|
<li>兼容性良好，支持 IE8+，及所有现代浏览器。</li> |
||||||
|
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li> |
||||||
|
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li> |
||||||
|
<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li> |
||||||
|
</ul> |
||||||
|
<p>使用步骤如下：</p> |
||||||
|
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3> |
||||||
|
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css"> |
||||||
|
</code></pre> |
||||||
|
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3> |
||||||
|
<pre><code class="language-html"><span class="iconfont icon-xxx"></span> |
||||||
|
</code></pre> |
||||||
|
<blockquote> |
||||||
|
<p>" |
||||||
|
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> |
||||||
|
</blockquote> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="content symbol"> |
||||||
|
<ul class="icon_lists dib-box"> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-yigouxuan"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">已勾选32</div> |
||||||
|
<div class="code-name">#icon-yigouxuan</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-weigouxuan"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">未勾选32</div> |
||||||
|
<div class="code-name">#icon-weigouxuan</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-weigouxuan1"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">未勾选40</div> |
||||||
|
<div class="code-name">#icon-weigouxuan1</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-yigouxuan1"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">已勾选40</div> |
||||||
|
<div class="code-name">#icon-yigouxuan1</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-shixiangyoujiantou-"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">实 向右箭头-01</div> |
||||||
|
<div class="code-name">#icon-shixiangyoujiantou-</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-shixiangxiajiantou-"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">实 向下箭头-01</div> |
||||||
|
<div class="code-name">#icon-shixiangxiajiantou-</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-jiahao"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">加号-填充</div> |
||||||
|
<div class="code-name">#icon-jiahao</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-up"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">42指向上、上箭头</div> |
||||||
|
<div class="code-name">#icon-up</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-down"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">44指向下、下箭头</div> |
||||||
|
<div class="code-name">#icon-down</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-delete"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">群蜂删除-充</div> |
||||||
|
<div class="code-name">#icon-delete</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-qq"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">qq</div> |
||||||
|
<div class="code-name">#icon-qq</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-weixin"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">微信-36</div> |
||||||
|
<div class="code-name">#icon-weixin</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
</ul> |
||||||
|
<div class="article markdown"> |
||||||
|
<h2 id="symbol-">Symbol 引用</h2> |
||||||
|
<hr> |
||||||
|
|
||||||
|
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> |
||||||
|
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p> |
||||||
|
<ul> |
||||||
|
<li>支持多色图标了，不再受单色限制。</li> |
||||||
|
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li> |
||||||
|
<li>兼容性较差，支持 IE9+，及现代浏览器。</li> |
||||||
|
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li> |
||||||
|
</ul> |
||||||
|
<p>使用步骤如下：</p> |
||||||
|
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3> |
||||||
|
<pre><code class="language-html"><script src="./iconfont.js"></script> |
||||||
|
</code></pre> |
||||||
|
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3> |
||||||
|
<pre><code class="language-html"><style> |
||||||
|
.icon { |
||||||
|
width: 1em; |
||||||
|
height: 1em; |
||||||
|
vertical-align: -0.15em; |
||||||
|
fill: currentColor; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
</style> |
||||||
|
</code></pre> |
||||||
|
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3> |
||||||
|
<pre><code class="language-html"><svg class="icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-xxx"></use> |
||||||
|
</svg> |
||||||
|
</code></pre> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<script> |
||||||
|
$(document).ready(function () { |
||||||
|
$('.tab-container .content:first').show() |
||||||
|
|
||||||
|
$('#tabs li').click(function (e) { |
||||||
|
var tabContent = $('.tab-container .content') |
||||||
|
var index = $(this).index() |
||||||
|
|
||||||
|
if ($(this).hasClass('active')) { |
||||||
|
return |
||||||
|
} else { |
||||||
|
$('#tabs li').removeClass('active') |
||||||
|
$(this).addClass('active') |
||||||
|
|
||||||
|
tabContent.hide().eq(index).fadeIn() |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
</script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,71 @@ |
|||||||
|
@font-face {font-family: "iconfont"; |
||||||
|
src: url('iconfont.eot?t=1589437921018'); /* IE9 */ |
||||||
|
src: url('iconfont.eot?t=1589437921018#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
||||||
|
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAdgAAsAAAAADwwAAAcTAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCESgqOeIt2ATYCJAM0CxwABCAFhG0HgTMbpQxRlHBSFNlX2JThXqSJ4cz0aLyxzNkVgYOP2N97wQhUeQbPDZA1QByDeHha+9+5M7PrD1FpdI8mCSqJLulDJPFDxCQTvUQS6Qtka3ukU0/kuK8wfBBwMr1kmeTIb8hUohVh6lTeCHDCrRPPf5v6f+sQfS+QqgmpiZLNw+ZI6zMXZGL3nXY47elJFnjALaE4zjzyjJN773yuzM/7H4oZ9NV+v/q1g1ddvP1QmE5JlPRM7uAv5klMk0vWTBWTLpoJEUIja6hWSkNhOklN/ds4n0BvhyLMuZ6hKdArLC1Q4a4iG0Gfi1JaHEMbXtfsW8S8SpsepzuAJ+HLx28hoSepMmvby3e6LdC2EN2eV0ykW36MR/MlQFiJjGNAEej7WvtLgB6aM6evXtwH1glnTloW1snRYnBhky+LxyuL9glaGNmaDbRsJYR1tl+seImrgUGtEtLc//GMeo1WR9QYfUSrp7nohWgXDRrJBqpBcoAqkGagAGkBSiADQBlkEKiAbAI/N/mCYHoWi1HDEgWoBbGjlg7M/OpbgEMgnUf0fxab8kjK0tvq8cZ6/dpKwk4bNsXFx4bHR4RHcty4LVnR4xp/2TFxDN42tgefhUpEMeeqppXCU50JyT/gkVCD+EiEgl56LOkMN+6cAfyKs3dvomHU7fvnq96Uc/duIXMMqWmhNRoax1m8jNWfPorp2jlqumvHrolfe/2TcuIPCt3K589dhUNiT5OSEh4KoM9Jp1vK2GMnFjDdyaeFMrd06ki1gn9CmEz3OErpebmp+GzyAN+lMLw6dwkKh6Ve5dOnzp4W0+Y25TTfhHB10isXpxIB5GHDKcggnof+NCpCD+okAFyTPNGuRVgahmhLjZo1rnqnMlpD0ORJSluuY6jT+gPWHtaIeDKOaoradNDPruOQzulPGcBtz0C2YdbLrSFPIMGTrcNRDGC3YnJOm1JLceYK2sCWY5lqxICXIEU0gki2nkPFUteBwoqLMyTdKE7ZlOzE3yHfdSyOU2shl8RoxPJlx1bQ6C0Li3DLg+Sdi+c5evEkhtF3rBdfXpe0IiNcfW27+x6u5U4vs8zZZdu1R7Gblyc6AV9OB4Xp65HRDqcvw0Pi1DGbddntOKzYgkbhXJq+Y4bRVqszl746KdRPFV5FxSUb6XmKomd1yCb0nJbpz+aOIZskx0phXx8sHfNKyRjPsM8LGU/xJ9Qrv2JugdVBkBg/ZpUIDvpN0jfHD550XPKNDgkKEZ46l4dwq0sOxIecJlX2pxxA8GTwkCGMFqxVFf5PRZplCky9uCIQL/s/RFabTYZNkhtkQXFR28vKXwKUP5rZbFg+s3VAFTu5dBZG4G07t5tHuM2cFirh2BisrHKYoE8lzO1h/LkwjSD+VZF0qs1hQVK+d0xHOLN80q4B/P9utxQDmGt4DaEKE6Lc5lnI6VxDf/35owQHCAuKw95VG6l1bvXPY3J1slpepPBXdCx8EM+ubbd2tV48b2UtWLtYb89PZhvg2jsq5+zkBdIVVTFHfhEwNv0CxNiT02LKVxGSus1dt9VsXDZulogOJB1AkGQVg4e833uzaWatx7bPrLKyhBeBqlC3xGqNoe3MVQHmDmBs4jm+xFjW/sjcAgOiPOFawwe3bUeTa20vGNZgbV6tCtL/qEL/fmiFLjqCCDpZdQpkdKgx6tSuzlCdqnrMFsLMhWn9sKH4ezmjmvpp9Selw9oCS0Vtcbox4f967yYpc1lNwUzPAUT3N0R32yz0bof5Wblw2jzkuw4VkWFptzoKckHRUwszvHJS8IgkAfys2IvKr/LtZBa1LzvfHBmFD6/V9enLD7LLJD2tz7n3E8BkFcwVyA/DL8P0fCpXAdLntBfy9tQCpuUP2QBAWkwyYccYGYFWWc/HS8Of6pVNf1r8p8n48bn+wPLzm5gyWoneAh3ivzATiiRKljoz8hQTN3S0itSojpnbgvjFod7uBf2Rtsa7dej63gKVRdenkDS2Q9baZyzWY1AZnIBa6yT0juo9eLCWhhOlwxFrCYRVjkKywhfIVrlrLNa3UNngB9RWBQe9mxF1zMGBUFCnRoyUWLBpCStm1SU5sRRFFSeI7HUYtawUeswQzaNk4PKSsmJBL3ERbY4dPD65glIJS5rqxD3kYsThULFbU23ETEuslLobSkuluh1LzKoTkLM0hBH1A1pgJku2CjOVizQ+hUrPP4GQeTkYaS0tarYzCI2HMnusXImyHsZe3dWrxb1U9/CRVaBMggS79TUqJ6yHSSAcdq4Kc9evZUOYUSWsI7LdGpQy7Ul99ZL1qfObT4CedX+zSJGjRBV1NNFGF30MMcYsVugeKLLqDXiNLuQnSQjRvRwtrRzlsSoBxeiSl1SvLVQoF1FcZj0Jqi46odWosl43b1H9Lp2FOAgl7OKibs6cgOICAA==') format('woff2'), |
||||||
|
url('iconfont.woff?t=1589437921018') format('woff'), |
||||||
|
url('iconfont.ttf?t=1589437921018') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ |
||||||
|
url('iconfont.svg?t=1589437921018#iconfont') format('svg'); /* iOS 4.1- */ |
||||||
|
} |
||||||
|
|
||||||
|
.iconfont { |
||||||
|
font-family: "iconfont" !important; |
||||||
|
font-size: 16px; |
||||||
|
font-style: normal; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-yigouxuan:before { |
||||||
|
content: "\e63d"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-weigouxuan:before { |
||||||
|
content: "\e63e"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-weigouxuan1:before { |
||||||
|
content: "\e64a"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-yigouxuan1:before { |
||||||
|
content: "\e64b"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-shixiangyoujiantou-:before { |
||||||
|
content: "\e626"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-shixiangxiajiantou-:before { |
||||||
|
content: "\e625"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-jiahao:before { |
||||||
|
content: "\e72d"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-up:before { |
||||||
|
content: "\e769"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-down:before { |
||||||
|
content: "\e76b"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-delete:before { |
||||||
|
content: "\e6e9"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-qq:before { |
||||||
|
content: "\e614"; |
||||||
|
font-size: 60px; |
||||||
|
color: #22aaf8; |
||||||
|
margin-left: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-weixin:before { |
||||||
|
content: "\e68a"; |
||||||
|
font-size: 60px; |
||||||
|
color: #10b747; |
||||||
|
margin-right: 32px; |
||||||
|
} |
||||||
|
|
||||||
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -0,0 +1,93 @@ |
|||||||
|
{ |
||||||
|
"id": "1540265", |
||||||
|
"name": "education", |
||||||
|
"font_family": "iconfont", |
||||||
|
"css_prefix_text": "icon-", |
||||||
|
"description": "", |
||||||
|
"glyphs": [ |
||||||
|
{ |
||||||
|
"icon_id": "2716513", |
||||||
|
"name": "已勾选32", |
||||||
|
"font_class": "yigouxuan", |
||||||
|
"unicode": "e63d", |
||||||
|
"unicode_decimal": 58941 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "2716516", |
||||||
|
"name": "未勾选32", |
||||||
|
"font_class": "weigouxuan", |
||||||
|
"unicode": "e63e", |
||||||
|
"unicode_decimal": 58942 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "2892929", |
||||||
|
"name": "未勾选40", |
||||||
|
"font_class": "weigouxuan1", |
||||||
|
"unicode": "e64a", |
||||||
|
"unicode_decimal": 58954 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "2892954", |
||||||
|
"name": "已勾选40", |
||||||
|
"font_class": "yigouxuan1", |
||||||
|
"unicode": "e64b", |
||||||
|
"unicode_decimal": 58955 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "5979965", |
||||||
|
"name": "实 向右箭头-01", |
||||||
|
"font_class": "shixiangyoujiantou-", |
||||||
|
"unicode": "e626", |
||||||
|
"unicode_decimal": 58918 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "5979966", |
||||||
|
"name": "实 向下箭头-01", |
||||||
|
"font_class": "shixiangxiajiantou-", |
||||||
|
"unicode": "e625", |
||||||
|
"unicode_decimal": 58917 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "8349103", |
||||||
|
"name": "加号-填充", |
||||||
|
"font_class": "jiahao", |
||||||
|
"unicode": "e72d", |
||||||
|
"unicode_decimal": 59181 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "6129078", |
||||||
|
"name": "42指向上、上箭头", |
||||||
|
"font_class": "up", |
||||||
|
"unicode": "e769", |
||||||
|
"unicode_decimal": 59241 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "6129081", |
||||||
|
"name": "44指向下、下箭头", |
||||||
|
"font_class": "down", |
||||||
|
"unicode": "e76b", |
||||||
|
"unicode_decimal": 59243 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "410692", |
||||||
|
"name": "群蜂删除-充", |
||||||
|
"font_class": "delete", |
||||||
|
"unicode": "e6e9", |
||||||
|
"unicode_decimal": 59113 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "468193", |
||||||
|
"name": "qq", |
||||||
|
"font_class": "qq", |
||||||
|
"unicode": "e614", |
||||||
|
"unicode_decimal": 58900 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "7009153", |
||||||
|
"name": "微信-36", |
||||||
|
"font_class": "weixin", |
||||||
|
"unicode": "e68a", |
||||||
|
"unicode_decimal": 59018 |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 499 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 829 B |
|
After Width: | Height: | Size: 683 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 106 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 8.8 KiB |
@ -0,0 +1,105 @@ |
|||||||
|
<template> |
||||||
|
<div class="header flex-between"> |
||||||
|
<div class="logo"> |
||||||
|
<img src="../../assets/img/logo.png"> |
||||||
|
</div> |
||||||
|
<div class="header-right"> |
||||||
|
<div class="header-user-con"> |
||||||
|
<div class="user" @click="toPersonalCenter"> |
||||||
|
<el-avatar :size="40" :src="avatar"></el-avatar> |
||||||
|
<span class="user-avator">{{userName}}</span> |
||||||
|
</div> |
||||||
|
<el-divider class="ml20" direction="vertical"></el-divider> |
||||||
|
<el-button type="text" class="ml20" @click="loginout">退出</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import bus from '../common/bus'; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
collapse: false, |
||||||
|
fullscreen: false, |
||||||
|
message: 2, |
||||||
|
avatar: this.$store.state.avatar, |
||||||
|
userName: this.$store.state.userName |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
bus.$on('updateAvatar',avatar => { |
||||||
|
this.avatar = avatar |
||||||
|
}) |
||||||
|
bus.$on('updateAccount',userName => { |
||||||
|
this.userName = userName |
||||||
|
}) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
toPersonalCenter(){ |
||||||
|
this.$router.push('/personalcenter') |
||||||
|
}, |
||||||
|
loginout() { |
||||||
|
sessionStorage.removeItem('kd_server_username'); |
||||||
|
location.reload() |
||||||
|
} |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style scoped lang="scss"> |
||||||
|
.header { |
||||||
|
position: relative; |
||||||
|
box-sizing: border-box; |
||||||
|
width: 100%; |
||||||
|
height: 60px; |
||||||
|
font-size: 16px; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
.header .logo { |
||||||
|
float: left; |
||||||
|
width: 170px; |
||||||
|
height: 40px; |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
.header .logo img{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.header-right { |
||||||
|
float: right; |
||||||
|
padding-right: 50px; |
||||||
|
} |
||||||
|
.header-user-con { |
||||||
|
display: flex; |
||||||
|
height: 70px; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.user{ |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
.user-avator { |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
.ml20{ |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
.user-avator img { |
||||||
|
display: block; |
||||||
|
width: 40px; |
||||||
|
height: 40px; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
.header-right .el-button--text{ |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
.header-right .el-divider--vertical{ |
||||||
|
width: 2px; |
||||||
|
height: 15px; |
||||||
|
} |
||||||
|
.header-right .el-divider{ |
||||||
|
background-color: #333; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,70 @@ |
|||||||
|
<template> |
||||||
|
<div class="wrapper"> |
||||||
|
<div class="placeholder"></div> |
||||||
|
<div class="fixed"> |
||||||
|
<v-head></v-head> |
||||||
|
<v-sidebar></v-sidebar> |
||||||
|
</div> |
||||||
|
<div class="content-box" :class="{'content-collapse':collapse}"> |
||||||
|
<!-- <v-tags></v-tags> --> |
||||||
|
<div class="content"> |
||||||
|
<transition name="move" mode="out-in"> |
||||||
|
<keep-alive :include="tagsList"> |
||||||
|
<router-view></router-view> |
||||||
|
</keep-alive> |
||||||
|
</transition> |
||||||
|
<el-backtop target=".content"></el-backtop> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import vHead from './Header.vue'; |
||||||
|
import vSidebar from './Sidebar.vue'; |
||||||
|
import vTags from './Tags.vue'; |
||||||
|
import bus from './bus'; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
tagsList: [], |
||||||
|
collapse: false |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
vHead, |
||||||
|
vSidebar, |
||||||
|
vTags |
||||||
|
}, |
||||||
|
created() { |
||||||
|
bus.$on('collapse-content', msg => { |
||||||
|
this.collapse = msg; |
||||||
|
}); |
||||||
|
|
||||||
|
// 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。 |
||||||
|
bus.$on('tags', msg => { |
||||||
|
let arr = []; |
||||||
|
for (let i = 0, len = msg.length; i < len; i++) { |
||||||
|
msg[i].name && arr.push(msg[i].name); |
||||||
|
} |
||||||
|
this.tagsList = arr; |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.fixed{ |
||||||
|
z-index: 10; |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
width: 100%; |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
.placeholder{ |
||||||
|
height: 120px; |
||||||
|
&.mini{ |
||||||
|
height: 60px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,151 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
|
||||||
|
<el-menu |
||||||
|
class="sidebar-el-menu" |
||||||
|
:default-active="onRoutes" |
||||||
|
:collapse="collapse" |
||||||
|
background-color="#324157" |
||||||
|
text-color="#bfcbd9" |
||||||
|
active-text-color="#9278FF" |
||||||
|
unique-opened |
||||||
|
mode="horizontal" |
||||||
|
router |
||||||
|
> |
||||||
|
<template v-for="item in menus"> |
||||||
|
<template v-if="item.subs"> |
||||||
|
<el-submenu :index="item.index" :key="item.index"> |
||||||
|
<template slot="title"> |
||||||
|
<i :class="item.icon"></i> |
||||||
|
<span slot="title">{{ item.title }}</span> |
||||||
|
</template> |
||||||
|
<template v-for="subItem in item.subs"> |
||||||
|
<el-submenu |
||||||
|
v-if="subItem.subs" |
||||||
|
:index="subItem.index" |
||||||
|
:key="subItem.index" |
||||||
|
> |
||||||
|
<template slot="title">{{ subItem.title }}</template> |
||||||
|
<el-menu-item |
||||||
|
v-for="(threeItem,i) in subItem.subs" |
||||||
|
:key="i" |
||||||
|
:index="threeItem.index" |
||||||
|
>{{ threeItem.title }}</el-menu-item> |
||||||
|
</el-submenu> |
||||||
|
<el-menu-item |
||||||
|
v-else |
||||||
|
:index="subItem.index" |
||||||
|
:key="subItem.index" |
||||||
|
>{{ subItem.title }}</el-menu-item> |
||||||
|
</template> |
||||||
|
</el-submenu> |
||||||
|
</template> |
||||||
|
<template v-else> |
||||||
|
<el-menu-item :index="item.index" :key="item.index"> |
||||||
|
<i :class="item.icon"></i> |
||||||
|
<span slot="title">{{ item.title }}</span> |
||||||
|
</el-menu-item> |
||||||
|
</template> |
||||||
|
</template> |
||||||
|
</el-menu> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import bus from '../common/bus'; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
collapse: false, |
||||||
|
defaultMenus: [ |
||||||
|
{ |
||||||
|
icon: 'el-icon-takeaway-box', |
||||||
|
index: 'dashboard', |
||||||
|
title: '班级教学' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: 'el-icon-collection', |
||||||
|
index: 'achievement', |
||||||
|
title: '成绩管理' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: 'el-icon-receiving', |
||||||
|
index: 'evaluation', |
||||||
|
title: '测评管理' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: 'el-icon-postcard', |
||||||
|
index: 'project', |
||||||
|
title: '实验项目管理' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: 'el-icon-user', |
||||||
|
index: 'student', |
||||||
|
title: '学生管理' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: 'el-icon-office-building', |
||||||
|
index: 'backstage', |
||||||
|
title: '业务后台' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: 'el-icon-setting', |
||||||
|
index: 'system', |
||||||
|
title: '系统设置' |
||||||
|
} |
||||||
|
], |
||||||
|
menus: [], |
||||||
|
actives: { |
||||||
|
dashboard: ['addclass'], |
||||||
|
achievement: ['experiment','experimentVir','experimentTeach','addexperiment','showExperiment'], |
||||||
|
project: ['addproject','program','programOptions'], |
||||||
|
backstage: ['report'] |
||||||
|
} |
||||||
|
}; |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
onRoutes() { |
||||||
|
let actives = this.actives |
||||||
|
let path = this.$route.path.replace('/', '') |
||||||
|
for(let i in this.actives){ |
||||||
|
if(actives[i].includes(path)) return i |
||||||
|
} |
||||||
|
return path |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.initMenu() |
||||||
|
// 通过 Event Bus 进行组件间通信，来折叠侧边栏 |
||||||
|
bus.$on('collapse', msg => { |
||||||
|
this.collapse = msg; |
||||||
|
bus.$emit('collapse-content', msg); |
||||||
|
}); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
initMenu(){ |
||||||
|
if(this.$config.dynamicRoute){ |
||||||
|
let routes = this.$store.state.routes[1].children |
||||||
|
let menus = [] |
||||||
|
this.defaultMenus.map(e => { |
||||||
|
routes.find(n => n.path == e.index) && menus.push(e) |
||||||
|
}) |
||||||
|
this.menus = menus |
||||||
|
}else{ |
||||||
|
this.menus = this.defaultMenus |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.sidebar::-webkit-scrollbar { |
||||||
|
width: 0; |
||||||
|
} |
||||||
|
.sidebar-el-menu:not(.el-menu--collapse) { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.sidebar > ul { |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,186 @@ |
|||||||
|
<template> |
||||||
|
<div class="tags" v-if="showTags"> |
||||||
|
<ul> |
||||||
|
<li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index"> |
||||||
|
<router-link :to="item.path" class="tags-li-title"> |
||||||
|
{{item.title}} |
||||||
|
</router-link> |
||||||
|
<span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<div class="tags-close-box"> |
||||||
|
<el-dropdown @command="handleTags"> |
||||||
|
<el-button size="mini" type="primary"> |
||||||
|
标签选项<i class="el-icon-arrow-down el-icon--right"></i> |
||||||
|
</el-button> |
||||||
|
<el-dropdown-menu size="small" slot="dropdown"> |
||||||
|
<el-dropdown-item command="other">关闭其他</el-dropdown-item> |
||||||
|
<el-dropdown-item command="all">关闭所有</el-dropdown-item> |
||||||
|
</el-dropdown-menu> |
||||||
|
</el-dropdown> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import bus from './bus'; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
tagsList: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
isActive(path) { |
||||||
|
return path === this.$route.fullPath; |
||||||
|
}, |
||||||
|
// 关闭单个标签 |
||||||
|
closeTags(index) { |
||||||
|
const delItem = this.tagsList.splice(index, 1)[0]; |
||||||
|
const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1]; |
||||||
|
if (item) { |
||||||
|
delItem.path === this.$route.fullPath && this.$router.push(item.path); |
||||||
|
}else{ |
||||||
|
this.$router.push('/dashboard'); |
||||||
|
} |
||||||
|
}, |
||||||
|
// 关闭全部标签 |
||||||
|
closeAll(){ |
||||||
|
this.tagsList = []; |
||||||
|
this.$router.push('/dashboard'); |
||||||
|
}, |
||||||
|
// 关闭其他标签 |
||||||
|
closeOther(){ |
||||||
|
const curItem = this.tagsList.filter(item => { |
||||||
|
return item.path === this.$route.fullPath; |
||||||
|
}) |
||||||
|
this.tagsList = curItem; |
||||||
|
}, |
||||||
|
// 设置标签 |
||||||
|
setTags(route){ |
||||||
|
const isExist = this.tagsList.some(item => { |
||||||
|
return item.path === route.fullPath; |
||||||
|
}) |
||||||
|
if(!isExist){ |
||||||
|
if(this.tagsList.length >= 8){ |
||||||
|
this.tagsList.shift(); |
||||||
|
} |
||||||
|
this.tagsList.push({ |
||||||
|
title: route.meta.title, |
||||||
|
path: route.fullPath, |
||||||
|
name: route.matched[1].components.default.name |
||||||
|
}) |
||||||
|
} |
||||||
|
bus.$emit('tags', this.tagsList); |
||||||
|
}, |
||||||
|
handleTags(command){ |
||||||
|
command === 'other' ? this.closeOther() : this.closeAll(); |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
showTags() { |
||||||
|
return this.tagsList.length > 0; |
||||||
|
} |
||||||
|
}, |
||||||
|
watch:{ |
||||||
|
$route(newValue, oldValue){ |
||||||
|
this.setTags(newValue); |
||||||
|
} |
||||||
|
}, |
||||||
|
created(){ |
||||||
|
this.setTags(this.$route); |
||||||
|
// 监听关闭当前页面的标签页 |
||||||
|
bus.$on('close_current_tags', () => { |
||||||
|
for (let i = 0, len = this.tagsList.length; i < len; i++) { |
||||||
|
const item = this.tagsList[i]; |
||||||
|
if(item.path === this.$route.fullPath){ |
||||||
|
if(i < len - 1){ |
||||||
|
this.$router.push(this.tagsList[i+1].path); |
||||||
|
}else if(i > 0){ |
||||||
|
this.$router.push(this.tagsList[i-1].path); |
||||||
|
}else{ |
||||||
|
this.$router.push('/'); |
||||||
|
} |
||||||
|
this.tagsList.splice(i, 1); |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
|
||||||
|
<style> |
||||||
|
.tags { |
||||||
|
position: relative; |
||||||
|
height: 30px; |
||||||
|
overflow: hidden; |
||||||
|
background: #fff; |
||||||
|
padding-right: 120px; |
||||||
|
box-shadow: 0 5px 10px #ddd; |
||||||
|
} |
||||||
|
|
||||||
|
.tags ul { |
||||||
|
box-sizing: border-box; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.tags-li { |
||||||
|
float: left; |
||||||
|
margin: 3px 5px 2px 3px; |
||||||
|
border-radius: 3px; |
||||||
|
font-size: 12px; |
||||||
|
overflow: hidden; |
||||||
|
cursor: pointer; |
||||||
|
height: 23px; |
||||||
|
line-height: 23px; |
||||||
|
border: 1px solid #e9eaec; |
||||||
|
background: #fff; |
||||||
|
padding: 0 5px 0 12px; |
||||||
|
vertical-align: middle; |
||||||
|
color: #666; |
||||||
|
-webkit-transition: all .3s ease-in; |
||||||
|
-moz-transition: all .3s ease-in; |
||||||
|
transition: all .3s ease-in; |
||||||
|
} |
||||||
|
|
||||||
|
.tags-li:not(.active):hover { |
||||||
|
background: #f8f8f8; |
||||||
|
} |
||||||
|
|
||||||
|
.tags-li.active { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.tags-li-title { |
||||||
|
float: left; |
||||||
|
max-width: 80px; |
||||||
|
overflow: hidden; |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
margin-right: 5px; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
|
||||||
|
.tags-li.active .tags-li-title { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.tags-close-box { |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
top: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
padding-top: 1px; |
||||||
|
text-align: center; |
||||||
|
width: 110px; |
||||||
|
height: 30px; |
||||||
|
background: #fff; |
||||||
|
box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1); |
||||||
|
z-index: 10; |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
import Vue from 'vue'; |
||||||
|
|
||||||
|
// 使用 Event Bus
|
||||||
|
const bus = new Vue(); |
||||||
|
|
||||||
|
export default bus; |
||||||
@ -0,0 +1,80 @@ |
|||||||
|
import Vue from 'vue'; |
||||||
|
|
||||||
|
// v-dialogDrag: 弹窗拖拽属性
|
||||||
|
Vue.directive('dialogDrag', { |
||||||
|
bind(el, binding, vnode, oldVnode) { |
||||||
|
const dialogHeaderEl = el.querySelector('.el-dialog__header'); |
||||||
|
const dragDom = el.querySelector('.el-dialog'); |
||||||
|
|
||||||
|
dialogHeaderEl.style.cssText += ';cursor:move;' |
||||||
|
dragDom.style.cssText += ';top:0px;' |
||||||
|
|
||||||
|
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
|
||||||
|
const sty = (() => { |
||||||
|
if (window.document.currentStyle) { |
||||||
|
return (dom, attr) => dom.currentStyle[attr]; |
||||||
|
} else { |
||||||
|
return (dom, attr) => getComputedStyle(dom, false)[attr]; |
||||||
|
} |
||||||
|
})() |
||||||
|
|
||||||
|
dialogHeaderEl.onmousedown = (e) => { |
||||||
|
// 鼠标按下，计算当前元素距离可视区的距离
|
||||||
|
const disX = e.clientX - dialogHeaderEl.offsetLeft; |
||||||
|
const disY = e.clientY - dialogHeaderEl.offsetTop; |
||||||
|
|
||||||
|
const screenWidth = document.body.clientWidth; // body当前宽度
|
||||||
|
const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取)
|
||||||
|
|
||||||
|
const dragDomWidth = dragDom.offsetWidth; // 对话框宽度
|
||||||
|
const dragDomheight = dragDom.offsetHeight; // 对话框高度
|
||||||
|
|
||||||
|
const minDragDomLeft = dragDom.offsetLeft; |
||||||
|
const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth; |
||||||
|
|
||||||
|
const minDragDomTop = dragDom.offsetTop; |
||||||
|
const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight; |
||||||
|
|
||||||
|
|
||||||
|
// 获取到的值带px 正则匹配替换
|
||||||
|
let styL = sty(dragDom, 'left'); |
||||||
|
let styT = sty(dragDom, 'top'); |
||||||
|
|
||||||
|
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
|
||||||
|
if (styL.includes('%')) { |
||||||
|
styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100); |
||||||
|
styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100); |
||||||
|
} else { |
||||||
|
styL = +styL.replace(/\px/g, ''); |
||||||
|
styT = +styT.replace(/\px/g, ''); |
||||||
|
}; |
||||||
|
|
||||||
|
document.onmousemove = function (e) { |
||||||
|
// 通过事件委托，计算移动的距离
|
||||||
|
let left = e.clientX - disX; |
||||||
|
let top = e.clientY - disY; |
||||||
|
|
||||||
|
// 边界处理
|
||||||
|
if (-(left) > minDragDomLeft) { |
||||||
|
left = -(minDragDomLeft); |
||||||
|
} else if (left > maxDragDomLeft) { |
||||||
|
left = maxDragDomLeft; |
||||||
|
} |
||||||
|
|
||||||
|
if (-(top) > minDragDomTop) { |
||||||
|
top = -(minDragDomTop); |
||||||
|
} else if (top > maxDragDomTop) { |
||||||
|
top = maxDragDomTop; |
||||||
|
} |
||||||
|
|
||||||
|
// 移动当前元素
|
||||||
|
dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`; |
||||||
|
}; |
||||||
|
|
||||||
|
document.onmouseup = function (e) { |
||||||
|
document.onmousemove = null; |
||||||
|
document.onmouseup = null; |
||||||
|
}; |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
@ -0,0 +1,30 @@ |
|||||||
|
export const messages = { |
||||||
|
'zh': { |
||||||
|
i18n: { |
||||||
|
breadcrumb: '国际化产品', |
||||||
|
tips: '通过切换语言按钮，来改变当前内容的语言。', |
||||||
|
btn: '切换英文', |
||||||
|
title1: '常用用法', |
||||||
|
p1: '要是你把你的秘密告诉了风，那就别怪风把它带给树。', |
||||||
|
p2: '没有什么比信念更能支撑我们度过艰难的时光了。', |
||||||
|
p3: '只要能把自己的事做好，并让自己快乐，你就领先于大多数人了。', |
||||||
|
title2: '组件插值', |
||||||
|
info: 'Element组件需要国际化，请参考 {action}。', |
||||||
|
value: '文档' |
||||||
|
} |
||||||
|
}, |
||||||
|
'en': { |
||||||
|
i18n: { |
||||||
|
breadcrumb: 'International Products', |
||||||
|
tips: 'Click on the button to change the current language. ', |
||||||
|
btn: 'Switch Chinese', |
||||||
|
title1: 'Common usage', |
||||||
|
p1: "If you reveal your secrets to the wind you should not blame the wind for revealing them to the trees.", |
||||||
|
p2: "Nothing can help us endure dark times better than our faith. ", |
||||||
|
p3: "If you can do what you do best and be happy, you're further along in life than most people.", |
||||||
|
title2: 'Component interpolation', |
||||||
|
info: 'The default language of Element is Chinese. If you wish to use another language, please refer to the {action}.', |
||||||
|
value: 'documentation' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,179 @@ |
|||||||
|
<template> |
||||||
|
<div class="quill" :class="[classes,readonly ? 'readonly' : '']"> |
||||||
|
<div ref="editor" :style="styles" v-loading="loading"></div> |
||||||
|
|
||||||
|
<el-upload :action="this.api.fileupload" :before-upload="beforeUpload" :on-success="editorUploadSuccess" style="display: none"> |
||||||
|
<el-button class="editorUpload" size="small" type="primary">点击上传</el-button> |
||||||
|
</el-upload> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Quill from 'quill'; |
||||||
|
import 'quill/dist/quill.core.css'; |
||||||
|
import 'quill/dist/quill.snow.css'; |
||||||
|
import 'quill/dist/quill.bubble.css'; |
||||||
|
import toolbarOptions from './options' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'quill', |
||||||
|
props: { |
||||||
|
value: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
readonly: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
toTop: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
}, |
||||||
|
border: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
height: { |
||||||
|
type: Number |
||||||
|
}, |
||||||
|
minHeight: { |
||||||
|
type: Number |
||||||
|
} |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
Quill: null, |
||||||
|
currentValue: '', |
||||||
|
options: { |
||||||
|
theme: 'snow', |
||||||
|
bounds: document.body, |
||||||
|
debug: 'warn', |
||||||
|
modules: { |
||||||
|
toolbar: { |
||||||
|
container: this.readonly ? [] : toolbarOptions, |
||||||
|
handlers: { |
||||||
|
'image': function (value) { |
||||||
|
if (value) { |
||||||
|
// 调用iview图片上传 |
||||||
|
document.querySelector('.editorUpload').click() |
||||||
|
} else { |
||||||
|
this.Quill.format('image', false); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
placeholder: '', |
||||||
|
readOnly: this.readonly |
||||||
|
}, |
||||||
|
loading: false |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
classes () { |
||||||
|
return [ |
||||||
|
{ |
||||||
|
'quill-no-border': !this.border |
||||||
|
} |
||||||
|
]; |
||||||
|
}, |
||||||
|
styles () { |
||||||
|
let style = {}; |
||||||
|
if (this.minHeight) { |
||||||
|
style.minHeight = `${this.minHeight}px`; |
||||||
|
} |
||||||
|
if (this.height) { |
||||||
|
style.height = `${this.height}px`; |
||||||
|
} |
||||||
|
return style; |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
value: { |
||||||
|
handler (val) { |
||||||
|
if (val !== this.currentValue) { |
||||||
|
this.currentValue = val; |
||||||
|
if (this.Quill) { |
||||||
|
this.Quill.pasteHTML(this.value); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
immediate: true |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
this.init(); |
||||||
|
}, |
||||||
|
beforeDestroy () { |
||||||
|
// 在组件销毁后销毁实例 |
||||||
|
this.Quill = null; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
init () { |
||||||
|
const editor = this.$refs.editor; |
||||||
|
// 初始化编辑器 |
||||||
|
this.Quill = new Quill(editor, this.options); |
||||||
|
// 默认值 |
||||||
|
this.Quill.pasteHTML(this.currentValue); |
||||||
|
if(this.toTop){ |
||||||
|
this.$nextTick(() => { |
||||||
|
window.scrollTo(0,0) |
||||||
|
}) |
||||||
|
} |
||||||
|
// 绑定事件 |
||||||
|
this.Quill.on('text-change', (delta, oldDelta, source) => { |
||||||
|
const html = this.$refs.editor.children[0].innerHTML; |
||||||
|
const text = this.Quill.getText(); |
||||||
|
const quill = this.Quill; |
||||||
|
// 更新内部的值 |
||||||
|
this.currentValue = html; |
||||||
|
// 发出事件 v-model |
||||||
|
this.$emit('input', html); |
||||||
|
// 发出事件 |
||||||
|
this.$emit('on-change', { html, text, quill }); |
||||||
|
}); |
||||||
|
// 将一些 quill 自带的事件传递出去 |
||||||
|
this.Quill.on('text-change', (delta, oldDelta, source) => { |
||||||
|
this.$emit('on-text-change', delta, oldDelta, source); |
||||||
|
}); |
||||||
|
this.Quill.on('selection-change', (range, oldRange, source) => { |
||||||
|
this.$emit('on-selection-change', range, oldRange, source); |
||||||
|
}); |
||||||
|
this.Quill.on('editor-change', (eventName, ...args) => { |
||||||
|
this.$emit('on-editor-change', eventName, ...args); |
||||||
|
}); |
||||||
|
}, |
||||||
|
beforeUpload(file){ |
||||||
|
this.loading = true |
||||||
|
}, |
||||||
|
editorUploadSuccess (res) { |
||||||
|
// 获取富文本组件实例 |
||||||
|
let quill = this.Quill |
||||||
|
// 如果上传成功 |
||||||
|
if (res.data.filesResult.fileUrl) { |
||||||
|
// 获取光标所在位置 |
||||||
|
let length = quill.getSelection().index; |
||||||
|
// 插入图片，res为服务器返回的图片链接地址 |
||||||
|
quill.insertEmbed(length, 'image', res.data.filesResult.fileUrl) |
||||||
|
// 调整光标到最后 |
||||||
|
quill.setSelection(length + 1) |
||||||
|
} else { |
||||||
|
this.$message.success('图片插入失败') |
||||||
|
} |
||||||
|
this.loading = false |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.quill-no-border{ |
||||||
|
.ql-toolbar.ql-snow{ |
||||||
|
border: none; |
||||||
|
border-bottom: 1px solid #e8eaec; |
||||||
|
} |
||||||
|
.ql-container.ql-snow{ |
||||||
|
border: none; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
export default [ |
||||||
|
['bold', 'italic', 'underline', 'strike'], |
||||||
|
['blockquote', 'code-block'], |
||||||
|
[{ 'header': 1 }, { 'header': 2 }], |
||||||
|
[{ 'list': 'ordered' }, { 'list': 'bullet' }], |
||||||
|
[{ 'script': 'sub' }, { 'script': 'super' }], |
||||||
|
[{ 'indent': '-1' }, { 'indent': '+1' }], |
||||||
|
[{ 'direction': 'rtl' }], |
||||||
|
[{ 'size': ['small', false, 'large', 'huge'] }], |
||||||
|
[{ 'color': [] }, { 'background': [] }], |
||||||
|
[{ 'font': [] }], |
||||||
|
[{ 'align': [] }], |
||||||
|
['clean'], |
||||||
|
['link', 'image', 'video'] |
||||||
|
] |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
<template> |
||||||
|
<div class="error-page"> |
||||||
|
<div class="error-code">4<span>0</span>3</div> |
||||||
|
<div class="error-desc">啊哦~ 你没有权限访问该页面哦</div> |
||||||
|
<div class="error-handle"> |
||||||
|
<router-link to="/"> |
||||||
|
<el-button type="primary" size="large">返回首页</el-button> |
||||||
|
</router-link> |
||||||
|
<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
methods: { |
||||||
|
goBack(){ |
||||||
|
this.$router.go(-1); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.error-page{ |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
flex-direction: column; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background: #f3f3f3; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
.error-code{ |
||||||
|
line-height: 1; |
||||||
|
font-size: 250px; |
||||||
|
font-weight: bolder; |
||||||
|
color: #f02d2d; |
||||||
|
} |
||||||
|
.error-code span{ |
||||||
|
color: #00a854; |
||||||
|
} |
||||||
|
.error-desc{ |
||||||
|
font-size: 30px; |
||||||
|
color: #777; |
||||||
|
} |
||||||
|
.error-handle{ |
||||||
|
margin-top: 30px; |
||||||
|
padding-bottom: 200px; |
||||||
|
} |
||||||
|
.error-btn{ |
||||||
|
margin-left: 100px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
<template> |
||||||
|
<div class="error-page"> |
||||||
|
<div class="error-code">4<span>0</span>4</div> |
||||||
|
<div class="error-desc">啊哦~ 你所访问的页面不存在</div> |
||||||
|
<div class="error-handle"> |
||||||
|
<router-link to="/"> |
||||||
|
<el-button type="primary" size="large">返回首页</el-button> |
||||||
|
</router-link> |
||||||
|
<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
methods: { |
||||||
|
goBack(){ |
||||||
|
this.$router.go(-1); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.error-page{ |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
flex-direction: column; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background: #f3f3f3; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
.error-code{ |
||||||
|
line-height: 1; |
||||||
|
font-size: 250px; |
||||||
|
font-weight: bolder; |
||||||
|
color: #2d8cf0; |
||||||
|
} |
||||||
|
.error-code span{ |
||||||
|
color: #00a854; |
||||||
|
} |
||||||
|
.error-desc{ |
||||||
|
font-size: 30px; |
||||||
|
color: #777; |
||||||
|
} |
||||||
|
.error-handle{ |
||||||
|
margin-top: 30px; |
||||||
|
padding-bottom: 200px; |
||||||
|
} |
||||||
|
.error-btn{ |
||||||
|
margin-left: 100px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,280 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div> |
||||||
|
<div class="flex-center mgb20"> |
||||||
|
<p class="hr_tag"></p> |
||||||
|
<span>筛选</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-form label-width="100px"> |
||||||
|
<div> |
||||||
|
<el-form-item label="时间" class="userRadio"> |
||||||
|
<el-radio-group v-model="month" @change="getData"> |
||||||
|
<el-radio v-for="(item,index) in dateList" :key="index" :label="item.id" border>{{item.name}}</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
<el-date-picker v-model="date" align="right" unlink-panels type="daterange" style="margin-left: 10px;" |
||||||
|
start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable></el-date-picker> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
<div class="flex-between no-mb"> |
||||||
|
<div> |
||||||
|
<el-form-item label="实验项目分类" class="userRadio"> |
||||||
|
<el-radio-group v-model="projectPermissions" @change="getData"> |
||||||
|
<el-radio v-for="(item,index) in projectType" :key="index" :label="item.id" border>{{item.name}}</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-form-item> |
||||||
|
<el-input placeholder="请输入实验项目名称/班级名称" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div class="flex-center"> |
||||||
|
<p class="hr_tag"></p> |
||||||
|
<span>成绩管理</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-button |
||||||
|
v-if="projectPermissions" |
||||||
|
type="primary" |
||||||
|
size="small" |
||||||
|
icon="el-icon-delete" |
||||||
|
round |
||||||
|
class="bt_one" |
||||||
|
@click="delAllData" |
||||||
|
>批量删除</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table :data="listData" class="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id"> |
||||||
|
<el-table-column type="selection" width="55" align="center" :reserve-selection="true" :selectable="disabledSelection"></el-table-column> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{scope.$index + (pageNo - 1) * pageSize + 1}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<template v-if="projectPermissions == 1"> |
||||||
|
<el-table-column prop="experimentalName" label="考核名称" align="center"></el-table-column> |
||||||
|
<el-table-column prop="experimentalClassName" label="班级" align="center"></el-table-column> |
||||||
|
</template> |
||||||
|
<el-table-column prop="projectName" label="项目名称" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="projectPermissions" label="分类" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{scope.row.projectPermissions == 2 ? '竞赛' : projectType.find(n => n.id === scope.row.projectPermissions).name}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="number" label="成绩报告数量" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="creationTime" label="创建时间" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" @click="entry(scope.row)">成绩管理</el-button> |
||||||
|
<el-button v-if="projectPermissions" type="text" @click="handleDelete(scope.row)" :disabled="!scope.row.isdel">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { Loading } from 'element-ui' |
||||||
|
export default { |
||||||
|
name: 'achievement', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
userId: this.$store.state.userLoginId, |
||||||
|
keyword: '', |
||||||
|
systemId: this.$config.systemId, |
||||||
|
projectPermissions: 0, |
||||||
|
startingtime: '', |
||||||
|
endtime: '', |
||||||
|
month: '', |
||||||
|
listData: [], |
||||||
|
multipleSelection: [], |
||||||
|
dateList: [ |
||||||
|
{ |
||||||
|
id: '', |
||||||
|
name: '不限' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
name: '近一个月' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 6, |
||||||
|
name: '近六个月' |
||||||
|
} |
||||||
|
], |
||||||
|
projectType: [ |
||||||
|
{ |
||||||
|
id: 0, |
||||||
|
name: '练习模式' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
name: '考核模式' |
||||||
|
} |
||||||
|
], |
||||||
|
date: '', |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
totals: 1, |
||||||
|
listDataAll: [], |
||||||
|
loadIns: null, |
||||||
|
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
month: function(val){ |
||||||
|
if(val){ |
||||||
|
let unit = 24 * 60 * 60 * 1000 |
||||||
|
this.date = [this.formatDate('yyyy-MM-dd',new Date(new Date().getTime() - unit * 30 * val)),this.formatDate('yyyy-MM-dd',new Date(new Date().getTime() + unit))] |
||||||
|
}else{ |
||||||
|
this.date = [] |
||||||
|
} |
||||||
|
}, |
||||||
|
date: function(val){ |
||||||
|
if(val){ |
||||||
|
this.startingtime = val[0] |
||||||
|
this.endtime = val[1] |
||||||
|
}else{ |
||||||
|
this.startingtime = '' |
||||||
|
this.endtime = '' |
||||||
|
} |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
keyword: function(val) { |
||||||
|
clearTimeout(this.searchTimer) |
||||||
|
this.searchTimer = setTimeout(() => { |
||||||
|
this.getData() |
||||||
|
},500) |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData() { |
||||||
|
this.loadIns = Loading.service({ |
||||||
|
background: 'rgba(255,255,255,.6)' |
||||||
|
}) |
||||||
|
let data = { |
||||||
|
searchContant: this.encodeString(this.keyword), |
||||||
|
startTime: this.startingtime, |
||||||
|
endtime: this.endtime, |
||||||
|
month: this.month, |
||||||
|
page: this.pageNo, |
||||||
|
size: this.pageSize, |
||||||
|
userId: this.userId |
||||||
|
} |
||||||
|
let url = this.api.queryAchievement |
||||||
|
if(this.projectPermissions){ |
||||||
|
url = this.api.queryAchievementNew |
||||||
|
}else{ |
||||||
|
data.systemId = this.systemId |
||||||
|
data.projectPermissions = this.projectPermissions |
||||||
|
} |
||||||
|
this.$get(url,data).then(res => { |
||||||
|
this.listData = res.data.list |
||||||
|
this.totals = res.data.total |
||||||
|
this.$nextTick(() => { |
||||||
|
this.loadIns.close() |
||||||
|
}) |
||||||
|
}).catch(res => { |
||||||
|
this.loadIns.close() |
||||||
|
}) |
||||||
|
}, |
||||||
|
entry(row){ |
||||||
|
if(this.projectPermissions){ |
||||||
|
this.$store.commit('addExperimentData',{experimentData: { |
||||||
|
id: row.id, |
||||||
|
name: row.projectName, |
||||||
|
class: row.experimentalClassName, |
||||||
|
systemId: this.systemId, |
||||||
|
projectId: row.projectId, |
||||||
|
experimentalName: row.experimentalName |
||||||
|
}}) |
||||||
|
this.$router.push('experimentTeach') |
||||||
|
}else{ |
||||||
|
this.$store.commit('addExperimentData',{experimentData: { |
||||||
|
id: row.projectId, |
||||||
|
name: row.projectName, |
||||||
|
class: row.experimentalClassName, |
||||||
|
systemId: this.systemId |
||||||
|
}}) |
||||||
|
this.$router.push('experimentVir') |
||||||
|
} |
||||||
|
}, |
||||||
|
disabledSelection(row,index){ |
||||||
|
if(row.isdel == 0) return false |
||||||
|
return true |
||||||
|
}, |
||||||
|
handleDelete(row) { |
||||||
|
this.$confirm('该项目下的所有成绩报告将会删除，是否继续？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$post(`${this.api.deleteReportById}?projectIds=${row.projectId}&projectPermissions=${row.projectPermissions}&ids=${row.id ? row.id : ''}`).then(res => { |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}, |
||||||
|
delAllData() { |
||||||
|
if(this.multipleSelection.length != ''){ |
||||||
|
let newArr = this.multipleSelection |
||||||
|
let delList = newArr.map(item => { |
||||||
|
return `projectIds=${item.projectId}` |
||||||
|
}) |
||||||
|
let delList1 = newArr[0].id ? newArr.map(item => { |
||||||
|
return `ids=${item.id}` |
||||||
|
}) : [] |
||||||
|
|
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
let data = `${delList.join('&')}&projectPermissions=${this.projectPermissions}&${delList1.length ? delList1.join('&') : ''}` |
||||||
|
this.$post(`${this.api.deleteReportById}?${data}`).then(res => { |
||||||
|
this.$refs.table.clearSelection() |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}else{ |
||||||
|
this.$message.error('请先选择数据 ！'); |
||||||
|
} |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val; |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.pageNo = val; |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.no-mb /deep/.el-form-item{ |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
@ -0,0 +1,547 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-form :disabled="isDetail"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between"> |
||||||
|
<div class="per_title" v-preventReClick @click="goback()"> |
||||||
|
<i class="el-icon-arrow-left"></i> |
||||||
|
<span class="per_back">返回</span> |
||||||
|
<span class="per_school">{{isDetail ? '查看' : (id ? '更新' : '创建')}}教学实验</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-button type="primary" size="small" round class="mag" v-preventReClick @click="upload" v-show="!isDetail">{{id ? '更新' : '创建'}}</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgr20 mgb20"> |
||||||
|
<div> |
||||||
|
<p class="mgb20">实验名称</p> |
||||||
|
<el-input |
||||||
|
placeholder="请输入实验名称" |
||||||
|
v-model="experimentalName" |
||||||
|
clearable |
||||||
|
class="assName_input" |
||||||
|
@change="judgeExpName" |
||||||
|
></el-input> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgr20 mgb20"> |
||||||
|
<div> |
||||||
|
<p class="mgb20">班级名称</p> |
||||||
|
<el-input |
||||||
|
placeholder="请输入班级名称" |
||||||
|
v-model="experimentalClassName" |
||||||
|
clearable |
||||||
|
class="assName_input" |
||||||
|
></el-input> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div> |
||||||
|
<p class="mgb20">发布方式</p> |
||||||
|
<el-radio :disabled="id ? true : false" v-model="type" label="1" class="fons">手动发布</el-radio> |
||||||
|
<el-radio :disabled="id ? true : false" v-model="type" label="2" class="fons">定时发布</el-radio> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
<!-- 根据发布方式判断时间的显示 --> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div> |
||||||
|
<p class="mgb20">实验时间</p> |
||||||
|
<!-- 手动发布显示 --> |
||||||
|
<div v-if="type==1"> |
||||||
|
实验时长： |
||||||
|
<el-input size="small" v-model="duration.day" placeholder class="dateinput"></el-input> 天 |
||||||
|
<el-input size="small" v-model="duration.hour" placeholder class="dateinput"></el-input> 小时 |
||||||
|
<el-input size="small" v-model="duration.minute" placeholder class="dateinput"></el-input> 分 |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 定时发布显示 --> |
||||||
|
<div v-if="type==2" class="addAssess"> |
||||||
|
<span class="mgr10">开始时间:</span> |
||||||
|
<el-date-picker |
||||||
|
size="small" |
||||||
|
v-model="date" |
||||||
|
type="datetimerange" |
||||||
|
range-separator="-" |
||||||
|
start-placeholder="开始日期" |
||||||
|
end-placeholder="结束日期" |
||||||
|
:picker-options="pickerOptions" |
||||||
|
></el-date-picker> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<!-- 实训项目模块 --> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<span>实训项目</span> |
||||||
|
<el-button type="primary" size="small" round @click="toProject">自定义实验项目</el-button> |
||||||
|
</div> |
||||||
|
<!-- 实训项目表格 --> |
||||||
|
<el-table :data="projectData" class="table" stripe header-align="center"> |
||||||
|
<!-- 单选实训项目ID --> |
||||||
|
<el-table-column width="60" label="选择" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-radio v-model="projectId" :label="scope.row.projectId"> </el-radio> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="projectName" label="项目名称" align="center"></el-table-column> |
||||||
|
<el-table-column prop="auth" label="项目权限" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{projectPermissionsList[scope.row.projectPermissions]}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="creater" label="创建人" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{roleStatus(scope.row.founder)}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="creationTime" label="创建时间" align="center"></el-table-column> |
||||||
|
<el-table-column label="操作" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" @click="showProject(scope.row)">查看</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination |
||||||
|
background |
||||||
|
:page-size="pageSize" |
||||||
|
@current-change="handleCurrentChange" |
||||||
|
layout="total,prev, pager, next" |
||||||
|
:total="totals" |
||||||
|
></el-pagination> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<!-- 邀请码 --> |
||||||
|
<el-card shadow="hover"> |
||||||
|
<div style="margin-bottom: 10px"> |
||||||
|
<p class="mgb20">设置邀请码</p> |
||||||
|
<el-radio v-model="isCode" label="0">是</el-radio> |
||||||
|
<el-radio v-model="isCode" label="1">否</el-radio> |
||||||
|
</div> |
||||||
|
<div v-show="isCode == 0"> |
||||||
|
<el-input style="display: inline-block;width: auto;margin-right: 10px" v-model.number="invitationCode" maxlength="6" placeholder="请设置6个数字"></el-input> |
||||||
|
<el-button type="text" @click="createInv">随机</el-button> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
id: '', |
||||||
|
systemId: this.$config.systemId, |
||||||
|
isDetail: true, |
||||||
|
userId: this.$store.state.userLoginId, |
||||||
|
cacheData: this.$store.state.addClass, |
||||||
|
duration: { |
||||||
|
day: '', |
||||||
|
hour: '', |
||||||
|
minute: '' |
||||||
|
}, |
||||||
|
date: '', //时间 |
||||||
|
experimentDuration: '0d0h0m', |
||||||
|
experimentalNumber: 0, |
||||||
|
projectId: '', |
||||||
|
projectName: '', |
||||||
|
status: '', |
||||||
|
surplusTime: '', |
||||||
|
experimentalName: '',//实验名称 |
||||||
|
experimentalClassName: '', //班级名称 |
||||||
|
type: '1', |
||||||
|
isCode: '0', //是否设置邀请码 |
||||||
|
startTime: '0000-00-00 00:00:00', //开始时间 |
||||||
|
stopTime: '0000-00-00 00:00:00', //结束时间 |
||||||
|
invitationCode: '', |
||||||
|
currPage: 1, |
||||||
|
projectData: [], |
||||||
|
invRepeat: false, |
||||||
|
pickerOptions: { |
||||||
|
disabledDate: time => { |
||||||
|
return time.getTime() < new Date().getTime() - 86400000 |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
projectPermissionsList: ['练习','考核','竞赛'], |
||||||
|
projectQueryData: { |
||||||
|
userId: this.$store.state.userLoginId, |
||||||
|
systemId: this.$config.systemId |
||||||
|
}, |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 5, |
||||||
|
totals: 0, |
||||||
|
multipleSelection: [], |
||||||
|
isToProject: false, |
||||||
|
expNameRepeat: false |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.date = [this.formatDate("yyyy-MM-dd hh:mm:ss",new Date(new Date().getTime() + 300000)),this.formatDate("yyyy-MM-dd hh:mm:ss",new Date(new Date().getTime() + 300000))] |
||||||
|
this.id = this.$route.query.id |
||||||
|
this.isDetail = Boolean(this.$route.query.show) |
||||||
|
this.id && this.getData() |
||||||
|
this.getProjectData() |
||||||
|
this.recoveryData() |
||||||
|
}, |
||||||
|
beforeDestroy(){ |
||||||
|
if(!this.isToProject){ |
||||||
|
this.$store.commit("addClassData", { addClass : {} }) |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
date: function(val){ |
||||||
|
if(val[0] != '0000-00-00 00:00:00'){ |
||||||
|
this.startTime = this.formatDate("yyyy-MM-dd hh:mm:ss",new Date(val[0])) |
||||||
|
this.stopTime = this.formatDate("yyyy-MM-dd hh:mm:ss",new Date(val[1])) |
||||||
|
} |
||||||
|
}, |
||||||
|
duration: { |
||||||
|
handler(n,o){ |
||||||
|
this.experimentDuration = `${n.day ? n.day : 0}d${n.hour ? n.hour : 0}h${n.minute ? n.minute : 0}m` |
||||||
|
}, |
||||||
|
deep: true |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getProjectData(){ |
||||||
|
let data = this.projectQueryData |
||||||
|
data.pageNo = this.pageNo |
||||||
|
data.pageSize = this.pageSize |
||||||
|
data.projectName = '' |
||||||
|
this.$get(this.api.queryManagements,data).then(res => { |
||||||
|
this.projectData = res.message.rows |
||||||
|
this.totals = res.message.total |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
recoveryData(){ |
||||||
|
if(JSON.stringify(this.cacheData) != '{}'){ |
||||||
|
let info = this.cacheData |
||||||
|
this.experimentDuration = info.experimentDuration |
||||||
|
this.experimentalClassName = info.experimentalClassName |
||||||
|
this.experimentalName = info.experimentalName |
||||||
|
this.invitationCode = info.invitationCode |
||||||
|
this.isCode = String(info.isCode) |
||||||
|
this.projectId = info.projectId |
||||||
|
this.startTime = info.startTime |
||||||
|
this.stopTime = info.stopTime |
||||||
|
this.surplusTime = info.surplusTime |
||||||
|
this.type = String(info.type) |
||||||
|
this.expNameRepeat = info.expNameRepeat |
||||||
|
|
||||||
|
this.formatDuration() |
||||||
|
} |
||||||
|
}, |
||||||
|
upload() { |
||||||
|
if(!this.experimentalName) return this.$message.warning('请填写实验名称') |
||||||
|
if(this.expNameRepeat) return this.$message.warning('实验名称重复，请重新输入') |
||||||
|
if(!this.experimentalClassName) return this.$message.warning('请填写班级名称') |
||||||
|
if(this.type == 1){ |
||||||
|
this.status = 1 |
||||||
|
}else{ |
||||||
|
if(new Date().getTime() > new Date(this.startTime).getTime()) return this.$message.warning('开始时间不能早于当前时间') |
||||||
|
this.status = 1 |
||||||
|
let timestamp = new Date(new Date(this.stopTime).getTime() - new Date(this.startTime).getTime()) |
||||||
|
let minute = 1000 * 60 |
||||||
|
let hour = minute * 60 |
||||||
|
let day = hour * 24 |
||||||
|
this.experimentDuration = `${Math.floor(timestamp / day)}d${Math.floor(timestamp % day / hour)}h${Math.floor(timestamp % day % hour / minute)}m` |
||||||
|
} |
||||||
|
if(this.type == 1 && this.experimentDuration == '0d0h0m') return this.$message.warning('请填写实验时长') |
||||||
|
if(this.type == 2 && this.startTime == '0000-00-00 00:00:00') return this.$message.warning('请填写实验时间') |
||||||
|
if(!this.projectId) return this.$message.warning('请选择实训项目') |
||||||
|
this.projectName = this.projectData.find(n => n.projectId == this.projectId).projectName |
||||||
|
if(this.isCode == 0){ |
||||||
|
if(!this.invitationCode) return this.$message.warning('请设置邀请码') |
||||||
|
if(!this.invitationCode || String(this.invitationCode).length < 6 || isNaN(this.invitationCode)) return this.$message.warning('请输入6位纯数字邀请码') |
||||||
|
// if(this.invRepeat) return this.$message.warning('邀请码重复，请重新输入') |
||||||
|
} |
||||||
|
|
||||||
|
let data = { |
||||||
|
id: this.id, |
||||||
|
experimentDuration: this.experimentDuration, |
||||||
|
creationTime: this.id ? this.creationTime : this.formatDate("yyyy-MM-dd hh:mm:ss"), |
||||||
|
experimentalClassName: this.experimentalClassName, |
||||||
|
experimentalName: this.experimentalName, |
||||||
|
experimentalNumber: this.experimentalNumber, |
||||||
|
invitationCode: this.invitationCode, |
||||||
|
isCode: this.isCode, |
||||||
|
projectId: this.projectId, |
||||||
|
projectName: this.projectName, |
||||||
|
startTime: this.startTime, |
||||||
|
status: Number(this.status), |
||||||
|
stopTime: this.stopTime, |
||||||
|
surplusTime: this.surplusTime, |
||||||
|
type: Number(this.type), |
||||||
|
userId: this.userId, |
||||||
|
systemId: this.systemId |
||||||
|
} |
||||||
|
if(this.id){ |
||||||
|
this.$post(this.api.expUpdate, data).then(res => { |
||||||
|
this.$message.success('修改成功'); |
||||||
|
this.$router.back() |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
}); |
||||||
|
}else{ |
||||||
|
this.$post(this.api.expSave, data).then(res => { |
||||||
|
this.$message.success('创建成功'); |
||||||
|
this.$router.back() |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
getData() { |
||||||
|
this.$get(this.api.expInfo + this.id) |
||||||
|
.then(res => { |
||||||
|
if(res.errmessage == 'success'){ |
||||||
|
let info = res.ExperimentalTeaching |
||||||
|
this.creationTime = info.creationTime |
||||||
|
this.experimentDuration = info.experimentDuration |
||||||
|
this.experimentalClassName = info.experimentalClassName |
||||||
|
this.experimentalName = info.experimentalName |
||||||
|
this.experimentalNumber = info.experimentalNumber |
||||||
|
this.invitationCode = info.invitationCode |
||||||
|
this.isCode = String(info.isCode) |
||||||
|
this.projectId = info.projectId |
||||||
|
this.projectName = info.projectName |
||||||
|
this.startTime = info.startTime |
||||||
|
this.status = info.status |
||||||
|
this.stopTime = info.stopTime |
||||||
|
this.surplusTime = info.surplusTime |
||||||
|
this.type = String(info.type) |
||||||
|
|
||||||
|
this.formatDuration() |
||||||
|
}else{ |
||||||
|
this.$message.error('查询失败'); |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
|
||||||
|
}); |
||||||
|
}, |
||||||
|
formatDuration(){ |
||||||
|
let duration = this.experimentDuration.replace(/\D+/g,',').split(',') |
||||||
|
this.duration = { |
||||||
|
day: duration[0], |
||||||
|
hour: duration[1], |
||||||
|
minute: duration[2] |
||||||
|
} |
||||||
|
this.date = [this.startTime,this.stopTime] |
||||||
|
}, |
||||||
|
handleCacheData(){ |
||||||
|
let data = { |
||||||
|
id: this.id, |
||||||
|
experimentDuration: this.experimentDuration, |
||||||
|
experimentalClassName: this.experimentalClassName, |
||||||
|
experimentalName: this.experimentalName, |
||||||
|
invitationCode: this.invitationCode, |
||||||
|
isCode: this.isCode, |
||||||
|
projectId: this.projectId, |
||||||
|
startTime: this.startTime, |
||||||
|
stopTime: this.stopTime, |
||||||
|
surplusTime: this.surplusTime, |
||||||
|
type: this.type, |
||||||
|
expNameRepeat: this.expNameRepeat |
||||||
|
} |
||||||
|
this.$store.commit("addClassData", { addClass : data}) |
||||||
|
this.isToProject = true |
||||||
|
}, |
||||||
|
toProject(){ |
||||||
|
this.handleCacheData() |
||||||
|
this.$router.push('/project') |
||||||
|
}, |
||||||
|
showProject(row){ |
||||||
|
this.handleCacheData() |
||||||
|
this.$router.push(`/addproject?id=${row.projectId}&show=1`) |
||||||
|
}, |
||||||
|
goback() { |
||||||
|
if(this.isDetail){ |
||||||
|
this.$router.back() |
||||||
|
}else{ |
||||||
|
this.$confirm('确定返回？未更新的信息将不会保存。', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$router.back() |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
} |
||||||
|
}, |
||||||
|
varifyInv() { |
||||||
|
this.$get(this.api.getInvitationCode, { invitationCode: this.invitationCode }) |
||||||
|
.then(res => { |
||||||
|
if(res.InvitationCode) { |
||||||
|
this.$message.warning('邀请码重复，请重新输入') |
||||||
|
this.invRepeat = true |
||||||
|
}else{ |
||||||
|
this.invRepeat = false |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch(err => {}); |
||||||
|
}, |
||||||
|
createInv() { |
||||||
|
let result = '' |
||||||
|
for(let i=0; i<6; i++){ |
||||||
|
result += Math.floor(Math.random()*10) |
||||||
|
} |
||||||
|
this.invitationCode = result |
||||||
|
// this.varifyInv() |
||||||
|
}, |
||||||
|
handleCurrentChange(val){ |
||||||
|
this.pageNo = val |
||||||
|
this.getProjectData() |
||||||
|
}, |
||||||
|
judgeExpName(){ |
||||||
|
this.$get(this.api.expCheck, { experimentalName: this.experimentalName }) |
||||||
|
.then(res => { |
||||||
|
if(res.errmessage != 'success') { |
||||||
|
this.$message.warning('实验名称重复，请重新输入') |
||||||
|
this.expNameRepeat = true |
||||||
|
}else{ |
||||||
|
this.expNameRepeat = false |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch(err => {}); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scope> |
||||||
|
.makeupList /deep/.el-upload-list__item { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.dateinput { |
||||||
|
width: 100px; |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
.mgb20-container { |
||||||
|
width: 98%; |
||||||
|
} |
||||||
|
.makeupList { |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
.makeupList /deep/.el-upload--text { |
||||||
|
width: 100px; |
||||||
|
display: inline-block; |
||||||
|
height: 38px; |
||||||
|
display: flex; |
||||||
|
border: none; |
||||||
|
} |
||||||
|
.makeupList /deep/.el-upload-list { |
||||||
|
} |
||||||
|
|
||||||
|
.makeupList /deep/.el-icon-upload-success { |
||||||
|
} |
||||||
|
.mgb20-container1 /deep/ .el-checkbox__inner { |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
.mgb20-container1 /deep/ .el-tree .el-icon-caret-right { |
||||||
|
background: #9278ff; |
||||||
|
border-radius: 50%; |
||||||
|
color: #fff; |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.mgb20-container1 /deep/.el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
.mgb20-container1 /deep/.el-tree-node .el-checkbox__input > .el-checkbox__inner { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.mgb20-container1 /deep/ .el-tree-node__label { |
||||||
|
color: #333333; |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
|
||||||
|
.mgb20-container1 /deep/.el-tree-node__content { |
||||||
|
height: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
.mgb20-container1 /deep/.is-leaf { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.el-row { |
||||||
|
margin-bottom: 20px; |
||||||
|
padding: 20px 16px; |
||||||
|
} |
||||||
|
.mg20 { |
||||||
|
margin-left: 20px; |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
/* .mgb20 { |
||||||
|
position: relative; |
||||||
|
} */ |
||||||
|
.mag { |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
.mgr10 { |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
.mgr20 { |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
.assName_input { |
||||||
|
width: 300px; |
||||||
|
} |
||||||
|
.foot_btn { |
||||||
|
text-align: right; |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
.mgb20-input1 { |
||||||
|
margin-left: 800px; |
||||||
|
display: inline-block; |
||||||
|
position: absolute; |
||||||
|
right: 0px; |
||||||
|
} |
||||||
|
/* .mgb200 { |
||||||
|
background-color: #9076ff; |
||||||
|
color: #fff; |
||||||
|
} */ |
||||||
|
.makeupList { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
.btninput { |
||||||
|
position: relative; |
||||||
|
|
||||||
|
margin-bottom: 30px; |
||||||
|
} |
||||||
|
.classcard { |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
.classspan { |
||||||
|
display: inline-block; |
||||||
|
height: 25px; |
||||||
|
width: 80px; |
||||||
|
background-color: #9076ff; |
||||||
|
border-radius: 10px; |
||||||
|
text-align: center; |
||||||
|
line-height: 25px; |
||||||
|
color: #fff; |
||||||
|
margin-right: 10px; |
||||||
|
float: left; |
||||||
|
} |
||||||
|
.fade-enter-active, |
||||||
|
.fade-leave-active { |
||||||
|
transition: opacity 0.5s; |
||||||
|
} |
||||||
|
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
.addAssess /deep/ .row{ |
||||||
|
padding: 0; |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
.addAssess .row /deep/ .el-form-item{ |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
@ -0,0 +1,467 @@ |
|||||||
|
<template> |
||||||
|
<div class="box"> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :span="24"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between"> |
||||||
|
<div class="per_title" v-preventReClick @click="goback()"> |
||||||
|
<i class="el-icon-arrow-left"></i> |
||||||
|
<span class="per_back">返回</span> |
||||||
|
<span class="per_school">修改分数</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-button type="success" size="small" round class="mag" v-preventReClick @click="saveAdd('form')">预览</el-button> |
||||||
|
<el-button type="primary" size="small" round class="mag" v-preventReClick @click="saveAdd('form')">发布成绩</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<div id="wrap"> |
||||||
|
<h6 style="text-align: center;font-size: 20px">实验成绩报告</h6> |
||||||
|
<div class="flex-center mgb20 user_header"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>基本信息</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div> |
||||||
|
<el-table :data="infoData" class="info-table" style="margin-bottom: 40px" header-align="center"> |
||||||
|
<el-table-column prop="userName" label="学生姓名" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="workNumber" label="学生学号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="className" label="学生班级" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="teacherName" label="指导老师" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="period" label="实验学时" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="laboratory" label="实验室名称" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="startTime" label="实验时间" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="score" label="实验成绩" align="center"> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="mgb20"> |
||||||
|
<div class="meta-title-wrap"> |
||||||
|
<p class="meta-title"><i class="el-icon-discount"></i> 实验项目名称</p> |
||||||
|
</div> |
||||||
|
<el-input v-model="form.projectName" type="textarea" rows="5" disabled></el-input> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="mgb20"> |
||||||
|
<div class="meta-title-wrap"> |
||||||
|
<p class="meta-title"><i class="el-icon-discount"></i> 实验目的</p> |
||||||
|
</div> |
||||||
|
<el-input v-model="form.purpose" type="textarea" rows="5" disabled></el-input> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="mgb20"> |
||||||
|
<div class="meta-title-wrap"> |
||||||
|
<p class="meta-title"><i class="el-icon-discount"></i> 实验原理</p> |
||||||
|
</div> |
||||||
|
<el-input v-model="form.principle" type="textarea" rows="5" disabled></el-input> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="mgb20"> |
||||||
|
<div class="meta-title-wrap"> |
||||||
|
<p class="meta-title"><i class="el-icon-discount"></i> 实验器材（设备、元器件）</p> |
||||||
|
</div> |
||||||
|
<el-input v-model="form.equipment" type="textarea" rows="5" disabled></el-input> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="mgb20"> |
||||||
|
<div class="meta-title-wrap"> |
||||||
|
<p class="meta-title"><i class="el-icon-discount"></i> 实验步骤</p> |
||||||
|
</div> |
||||||
|
<el-input v-model="form.step" type="textarea" rows="5" disabled></el-input> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="mgb20"> |
||||||
|
<div class="meta-title-wrap"> |
||||||
|
<p class="meta-title">实验数据</p> |
||||||
|
<!-- <span>得分：50/60</span> --> |
||||||
|
</div> |
||||||
|
<el-table :data="sjData" class="table" stripe header-align="center"> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{scope.$index + 1}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="judgmentPointsName" label="考核点" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="StudentAnswers" label="学生答案" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="ReferenceAnswer" label="参考答案" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="score" label="得分" align="center"> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="mgb20"> |
||||||
|
<div class="meta-title-wrap"> |
||||||
|
<p class="meta-title"><i class="el-icon-discount"></i> 实验数据及结果分析</p> |
||||||
|
</div> |
||||||
|
<el-table :data="expData" stripe header-align="center" class="mat20"> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"></el-table-column> |
||||||
|
<el-table-column prop="ename" label="代码" align="center"></el-table-column> |
||||||
|
<el-table-column prop="name" label="合约名称" align="center"></el-table-column> |
||||||
|
<el-table-column prop="tradingDirection" label="方向(买/卖)" align="center"></el-table-column> |
||||||
|
<el-table-column prop="entrustNumber" label="持仓/可用" align="center"></el-table-column> |
||||||
|
<el-table-column prop="entrustPrice" label="均价/现价" align="center"></el-table-column> |
||||||
|
<el-table-column prop="floatingPl" label="浮动盈亏" align="center"></el-table-column> |
||||||
|
<el-table-column prop="preFreezingMargin" label="保证金" align="center"></el-table-column> |
||||||
|
<el-table-column prop="tradeTime" label="最后交易日" align="center"></el-table-column> |
||||||
|
<el-table-column prop="status" label="持仓状态" align="center"></el-table-column> |
||||||
|
<el-table-column prop="createTime" label="开仓时间" align="center"></el-table-column> |
||||||
|
<el-table-column prop="updateTime" label="平仓时间" align="center"></el-table-column> |
||||||
|
</el-table> |
||||||
|
<el-input style="margin-top: 20px" v-model="form.analysis" type="textarea" rows="5" disabled></el-input> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="mgb20"> |
||||||
|
<div class="meta-title-wrap"> |
||||||
|
<p class="meta-title"><i class="el-icon-discount"></i> 实验结论</p> |
||||||
|
</div> |
||||||
|
<el-input type="textarea" v-model="form.conclusion" rows="5"></el-input> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="mgb20"> |
||||||
|
<div class="meta-title-wrap"> |
||||||
|
<p class="meta-title"><i class="el-icon-discount"></i> 总结及心得体会</p> |
||||||
|
</div> |
||||||
|
<el-input type="textarea" v-model="form.summarize" rows="5"></el-input> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="mgb20"> |
||||||
|
<div class="meta-title-wrap"> |
||||||
|
<p class="meta-title"><i class="el-icon-discount"></i> 对本实验过程及方法、手段的改进建议</p> |
||||||
|
</div> |
||||||
|
<el-input type="textarea" rows="5" v-model="form.improvement"></el-input> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="mgb20"> |
||||||
|
<div class="meta-title-wrap"> |
||||||
|
<p class="meta-title"><i class="el-icon-discount"></i> 老师评语</p> |
||||||
|
</div> |
||||||
|
<el-input type="textarea" rows="5" v-model="form.comment"></el-input> |
||||||
|
</div> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<p class="mgb20">教师签名</p> |
||||||
|
<div class="mgb20"> |
||||||
|
<el-radio v-model="autograph" label="1">不使用</el-radio> |
||||||
|
<el-radio v-model="autograph" label="2">已有签名</el-radio> |
||||||
|
<el-radio v-model="autograph" label="3">重新上传</el-radio> |
||||||
|
</div> |
||||||
|
<el-row> |
||||||
|
<el-col :span="6"> |
||||||
|
<template v-if="autograph == 2"> |
||||||
|
<el-select v-model="signId" placeholder="请选择签名" size="mini" @change="signChange"> |
||||||
|
<el-option |
||||||
|
v-for="item in signList" |
||||||
|
:key="item.id" |
||||||
|
:label="item.signatureName" |
||||||
|
:value="item.id" |
||||||
|
> |
||||||
|
</el-option> |
||||||
|
</el-select> |
||||||
|
<img class="sign-img" :src="signSrc" alt=""> |
||||||
|
<div> |
||||||
|
<el-button size="mini" type="danger" @click="delSign">删除</el-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<template v-else-if="autograph == 3"> |
||||||
|
<el-upload |
||||||
|
:data="{userId: userId}" |
||||||
|
:limit="1" |
||||||
|
:action="api.uploadSignature" |
||||||
|
list-type="picture-card" |
||||||
|
:on-remove="handleRemove" |
||||||
|
:on-exceed="handleExceed" |
||||||
|
:on-success="uploadSuccess"> |
||||||
|
<i class="el-icon-plus"></i> |
||||||
|
</el-upload> |
||||||
|
</template> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data (){ |
||||||
|
return { |
||||||
|
userId: this.$store.state.userLoginId, |
||||||
|
stuId: this.$route.query.stuId, |
||||||
|
studentName: this.$route.query.studentName, |
||||||
|
class: this.$route.query.class, |
||||||
|
id: this.$route.query.id, |
||||||
|
infoData: [], |
||||||
|
accountData: [], |
||||||
|
analysisContent: '', |
||||||
|
showData: '1', |
||||||
|
autograph: '1', |
||||||
|
form: { |
||||||
|
projectName: '', |
||||||
|
period: '', |
||||||
|
userName: '', |
||||||
|
content: '', |
||||||
|
conclusion: '', |
||||||
|
score: '', |
||||||
|
}, |
||||||
|
pages: 1, |
||||||
|
ipVisible: false, |
||||||
|
configId : this.$store.state.configId, |
||||||
|
keyword: '', |
||||||
|
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}], |
||||||
|
isEdit: false, |
||||||
|
signList: [], |
||||||
|
signId: '', |
||||||
|
sjData: [], |
||||||
|
expData: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
this.getData() |
||||||
|
this.getSgin() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData(){ |
||||||
|
let data = { |
||||||
|
reportId: this.id, |
||||||
|
userId: this.stuId, |
||||||
|
} |
||||||
|
this.$get(this.api.getReport,data).then(res => { |
||||||
|
let report = res.data.experimentalReportEntity |
||||||
|
let steps = [] |
||||||
|
for(let i in report){ |
||||||
|
if(i.includes('steps') && report[i]) steps.push(JSON.parse(report[i])) |
||||||
|
} |
||||||
|
this.form = report |
||||||
|
this.expData = report.steps9 ? JSON.parse(report.steps9).recordsData: [] |
||||||
|
|
||||||
|
let score = res.data.score |
||||||
|
let answerList = [] |
||||||
|
for(let i in res.data.userAnswersList){ |
||||||
|
answerList = answerList.concat(res.data.userAnswersList[i]) |
||||||
|
} |
||||||
|
let sjData = [] |
||||||
|
answerList.map(n => { |
||||||
|
if(n.type == 1){ |
||||||
|
this.$post(this.api.queryItem,n.levelThree) |
||||||
|
.then((res) => { |
||||||
|
n.levelFour = res.subject.find(e => e.id == n.levelFour).itemDescription |
||||||
|
console.log(11,n) |
||||||
|
}).catch((err) => {}) |
||||||
|
} |
||||||
|
}) |
||||||
|
setTimeout(() => { |
||||||
|
score.map(n => { |
||||||
|
let item = answerList.find(e => e.tradingJudgmentPointsId == n.tradingJudgmentPointsId) |
||||||
|
sjData.push({ |
||||||
|
judgmentPointsName: item.judgmentPointsName, |
||||||
|
userAnswers: n.userAnswers, |
||||||
|
referenceAnswer: item.levelFour, |
||||||
|
score: n.score |
||||||
|
}) |
||||||
|
}) |
||||||
|
},500) |
||||||
|
|
||||||
|
this.sjData = sjData |
||||||
|
this.infoData.push({ |
||||||
|
workNumber: report.workNumber, |
||||||
|
className: this.class != 'undefined' ? this.class : '', |
||||||
|
teacherName: report.teacherName, |
||||||
|
period: report.period, |
||||||
|
laboratory: report.laboratory, |
||||||
|
startTime: report.creationTime, |
||||||
|
score: report.score, |
||||||
|
userName: this.studentName |
||||||
|
}) |
||||||
|
}).catch(res => {}) |
||||||
|
}, |
||||||
|
getSgin(){ |
||||||
|
let data = { |
||||||
|
userId: this.userId |
||||||
|
} |
||||||
|
this.$get(this.api.querySignature,data).then(res => { |
||||||
|
this.signList = res.data |
||||||
|
this.signId = res.data[0].id |
||||||
|
this.signSrc = res.data[0].signatureUrl |
||||||
|
}).catch(res => {}) |
||||||
|
}, |
||||||
|
signChange(){ |
||||||
|
this.signSrc = this.signList.find(n => n.id == this.signId).signatureUrl |
||||||
|
console.log(22,this.signSrc) |
||||||
|
}, |
||||||
|
delSign(){ |
||||||
|
let data = { |
||||||
|
id: this.signId |
||||||
|
} |
||||||
|
this.$post(this.api.daleteSignature,data).then(res => { |
||||||
|
this.$message.success('删除成功') |
||||||
|
this.getSgin() |
||||||
|
}).catch(res => {}) |
||||||
|
}, |
||||||
|
handleRemove(file, fileList) { |
||||||
|
console.log(file, fileList); |
||||||
|
}, |
||||||
|
saveAdd(){ |
||||||
|
let data = { |
||||||
|
systemId: this.configId, |
||||||
|
systemName: this.form.systemName, |
||||||
|
systemType: this.form.systemType, |
||||||
|
systemAttribution: this.form.systemAttribution, |
||||||
|
} |
||||||
|
if(this.configId){ |
||||||
|
this.$post(this.api.updateServiceConfig,data).then((res) => { |
||||||
|
this.$message.success('编辑成功'); |
||||||
|
this.$router.back() |
||||||
|
}).catch((res) => { |
||||||
|
}) |
||||||
|
}else{ |
||||||
|
this.$post(this.api.updateServiceConfig,data).then((res) => { |
||||||
|
this.$message.success('添加成功'); |
||||||
|
this.$router.back() |
||||||
|
}).catch((res) => { |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
editMsg(){ |
||||||
|
this.isEdit = true |
||||||
|
}, |
||||||
|
handleExceed(files, fileList) { |
||||||
|
this.$message.warning( |
||||||
|
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` |
||||||
|
); |
||||||
|
}, |
||||||
|
uploadSuccess(res,file){ |
||||||
|
if(res.status == 200){ |
||||||
|
this.$message.success('上传成功') |
||||||
|
this.getSgin() |
||||||
|
}else{ |
||||||
|
this.$message.error(res.errmessage) |
||||||
|
} |
||||||
|
}, |
||||||
|
goback() { |
||||||
|
this.$confirm('确定返回？未更新的信息将不会保存。', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$router.back() |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.box{ |
||||||
|
padding: 0 50px; |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
/deep/.el-textarea.is-disabled .el-textarea__inner{ |
||||||
|
background-color: #ebfafd; |
||||||
|
} |
||||||
|
#wrap{ |
||||||
|
/deep/.info-table{ |
||||||
|
border: 0; |
||||||
|
th{ |
||||||
|
background-color: #fff !important; |
||||||
|
.cell{ |
||||||
|
color: #444; |
||||||
|
} |
||||||
|
} |
||||||
|
tr{ |
||||||
|
border: 0; |
||||||
|
} |
||||||
|
tr:hover,tr:hover>td{ |
||||||
|
background-color: #c6f2f8 !important; |
||||||
|
} |
||||||
|
td{ |
||||||
|
border: { |
||||||
|
left: 4px solid #fff; |
||||||
|
right: 4px solid #fff; |
||||||
|
} |
||||||
|
&:first-child{ |
||||||
|
border-left: 0; |
||||||
|
} |
||||||
|
&:last-child{ |
||||||
|
border-right: 0; |
||||||
|
} |
||||||
|
background-color: #c6f2f8; |
||||||
|
border-bottom: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
/deep/.table th{ |
||||||
|
background-color: #a2a2a2 !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/deep/.cell{ |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
/deep/.el-row{ |
||||||
|
padding-top: 20px; |
||||||
|
margin: 0 !important; |
||||||
|
} |
||||||
|
.form-item{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.form-item .el-input{ |
||||||
|
width: auto; |
||||||
|
} |
||||||
|
.form-item span{ |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
.meta-title-wrap{ |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
span{ |
||||||
|
font-size: 13px; |
||||||
|
color: #444; |
||||||
|
} |
||||||
|
} |
||||||
|
.flex-between{ |
||||||
|
span{ |
||||||
|
font-size: 13px; |
||||||
|
color: #444; |
||||||
|
} |
||||||
|
} |
||||||
|
.meta-title{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
padding: 10px 20px; |
||||||
|
margin-bottom: 10px; |
||||||
|
font-size: 16px; |
||||||
|
color: #fff; |
||||||
|
background-color: #9278FF; |
||||||
|
i{ |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
.step-title{ |
||||||
|
margin-bottom: 10px; |
||||||
|
font-size: 16px; |
||||||
|
color: #9278ff; |
||||||
|
} |
||||||
|
.bd-title{ |
||||||
|
padding-top: 20px; |
||||||
|
border-top: 1px dashed #ccc; |
||||||
|
} |
||||||
|
.sign-img{ |
||||||
|
max-width: 200px; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
</style> |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,104 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div class="flex-center"> |
||||||
|
<p class="hr_tag"></p> |
||||||
|
<span>系统列表</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-input placeholder="请输入系统名称" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table :data="listData" class="table" stripe header-align="center" row-key="id"> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{scope.$index + (pageNo - 1) * pageSize + 1}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="name" label="系统名称" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="time" label="创建时间" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" @click="entry(scope.row)">进入</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'dashboard', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
keyword: '', |
||||||
|
listData: [ |
||||||
|
{ |
||||||
|
name: '商品期货期权虚拟仿真', |
||||||
|
time: '2020-01-05 12:22:41' |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '期货套利量化策略实验报告', |
||||||
|
time: '2020-06-23 07:12:31' |
||||||
|
}, |
||||||
|
], |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
totals: 2, |
||||||
|
searchTimer: null |
||||||
|
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
keyword: function(val) { |
||||||
|
clearTimeout(this.searchTimer) |
||||||
|
this.searchTimer = setTimeout(() => { |
||||||
|
this.getData() |
||||||
|
},500) |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
// this.getData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData() { |
||||||
|
// let data = { |
||||||
|
// countries: this.form.countries, |
||||||
|
// provinceId: this.form.provinces, |
||||||
|
// cityId: this.form.city, |
||||||
|
// searchContent: this.form.keyword, |
||||||
|
// pageNo: this.pageNo, |
||||||
|
// pageSize: this.pageSize |
||||||
|
// } |
||||||
|
// this.$get(this.api.queryCustomer,data).then(res => { |
||||||
|
// this.listData = res.message.rows |
||||||
|
// this.totals = res.message.total |
||||||
|
// }).catch(res => {}); |
||||||
|
}, |
||||||
|
entry(){ |
||||||
|
this.$router.push('report') |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.pageNo = val; |
||||||
|
this.getData(); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.mag{ |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
/deep/.el-tabs__nav-wrap::after{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
@ -0,0 +1,441 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div> |
||||||
|
<div class="flex-center mgb20"> |
||||||
|
<p class="hr_tag"></p> |
||||||
|
<span>筛选</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-form label-width="80px"> |
||||||
|
<div> |
||||||
|
<el-form-item label="实验时间" class="userRadio"> |
||||||
|
<el-radio-group v-model="form.month" @change="getData"> |
||||||
|
<el-radio v-for="(item,index) in dateList" :key="index" :label="item.id" border>{{item.name}}</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
<el-date-picker v-model="date" align="right" unlink-panels type="daterange" style="margin-left: 10px;" |
||||||
|
start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable></el-date-picker> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
<div class="flex-between no-mb"> |
||||||
|
<div class="flex-center"> |
||||||
|
<el-form-item label="发布类型"> |
||||||
|
<el-select v-model="form.type" clearable placeholder="请选择发布类型" @change="getData"> |
||||||
|
<el-option v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.value"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="实验状态"> |
||||||
|
<el-select v-model="form.status" clearable placeholder="请选择实验状态" @change="getData"> |
||||||
|
<el-option v-for="(item,index) in statusList" :key="index" :label="item.name" :value="item.value"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-form-item> |
||||||
|
<el-input placeholder="请输入实验班级/项目名称" prefix-icon="el-icon-search" v-model="keyword" clearable @keyup.enter.native="onSearch"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div class="flex-center"> |
||||||
|
<p class="hr_tag"></p> |
||||||
|
<span>实验教学列表</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
size="small" |
||||||
|
icon="el-icon-plus" |
||||||
|
round |
||||||
|
@click="add" |
||||||
|
class="bt_one" |
||||||
|
>创建实验</el-button> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
size="small" |
||||||
|
icon="el-icon-delete" |
||||||
|
round |
||||||
|
class="bt_one" |
||||||
|
@click="delAllData" |
||||||
|
>批量删除</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table ref="table" :data="customerData" class="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id"> |
||||||
|
<el-table-column type="selection" :selectable="row => row.status!=2" width="50" align="center" :reserve-selection="true"></el-table-column> |
||||||
|
<el-table-column type="index" width="60" label="序号" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{scope.$index + (pageNo - 1) * pageSize + 1}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="experimentalClassName" label="实验班级" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="experimentalName" label="实验教学名称" min-width="120" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="projectName" label="项目名称" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="experimentalNumber" label="实验人数" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="experimentDuration" label="实验时长" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="邀请码" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<span>{{scope.row.isCode == 0 ? scope.row.invitationCode : ''}}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="adminName" label="发布类型" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<span>{{types[scope.row.type]}}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="creationTime" width="150" label="创建时间" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="startTime" width="150" label="起始时间" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<span>{{transferTime(scope.row.startTime,scope.row.type)}}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="stopTime" width="150" label="结束时间" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<span>{{transferTime(scope.row.stopTime,scope.row.type)}}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="surplusTime" label="倒计时" align="center"> |
||||||
|
<!-- <template slot-scope="scope"> |
||||||
|
<span v-if="scope.row.status == 2" v-countdown="scope.row.surplusTime">{{scope.row.surplusTime}}</span> |
||||||
|
<span v-else>00:00:00</span> |
||||||
|
</template> --> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="实验状态" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<span>{{status[scope.row.status]}}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center" width="170"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<template v-if="scope.row.status == 1"> |
||||||
|
<el-button type="text" @click="start(scope.row)">启动</el-button> |
||||||
|
<el-button type="text" @click="edit(scope.row)">修改</el-button> |
||||||
|
</template> |
||||||
|
<template v-else-if="scope.row.status == 2"> |
||||||
|
<el-button type="text" @click="finish(scope.row)">提前结束</el-button> |
||||||
|
</template> |
||||||
|
<template v-else-if="scope.row.status == 3"> |
||||||
|
<el-button type="text" @click="show(scope.row)">查看成绩</el-button> |
||||||
|
</template> |
||||||
|
<el-button v-if="scope.row.status == 1 || scope.row.status == 3" type="text" @click="delData(scope.row)">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import bus from '../common/bus'; |
||||||
|
import axios from 'axios'; |
||||||
|
export default { |
||||||
|
name: 'dashboard', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
name: sessionStorage.getItem('ms_username'), |
||||||
|
schoolId: this.$store.state.schoolId, |
||||||
|
systemId: this.$config.systemId, |
||||||
|
systemList: [ |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
label: 'Python实验系统' |
||||||
|
},{ |
||||||
|
id: 2, |
||||||
|
label: '跨国仿真系统' |
||||||
|
},{ |
||||||
|
id: 3, |
||||||
|
label: '期权期货系统' |
||||||
|
},{ |
||||||
|
id: 4, |
||||||
|
label: 'Python金融建模教学系统' |
||||||
|
},{ |
||||||
|
id: 5, |
||||||
|
label: 'Python数据可视化教学系统' |
||||||
|
}, |
||||||
|
], |
||||||
|
keyword: '', |
||||||
|
typeList: [ |
||||||
|
{ |
||||||
|
value: '', |
||||||
|
name: '不限' |
||||||
|
}, |
||||||
|
{ |
||||||
|
value: 1, |
||||||
|
name: '手动发布' |
||||||
|
}, |
||||||
|
{ |
||||||
|
value: 2, |
||||||
|
name: '定时发布' |
||||||
|
} |
||||||
|
], |
||||||
|
status: ['','待开始','进行中','已完成'], |
||||||
|
types: ['','手动发布','定时发布'], |
||||||
|
statusList: [ |
||||||
|
{ |
||||||
|
value: '', |
||||||
|
name: '不限' |
||||||
|
}, |
||||||
|
{ |
||||||
|
value: 1, |
||||||
|
name: '待开始' |
||||||
|
}, |
||||||
|
{ |
||||||
|
value: 2, |
||||||
|
name: '进行中' |
||||||
|
}, |
||||||
|
{ |
||||||
|
value: 3, |
||||||
|
name: '已完成' |
||||||
|
} |
||||||
|
], |
||||||
|
customerData: [], |
||||||
|
form: { |
||||||
|
type: '', |
||||||
|
status: '', |
||||||
|
startTime: '', |
||||||
|
stopTime: '', |
||||||
|
month: '', |
||||||
|
searchContent: '' |
||||||
|
}, |
||||||
|
multipleSelection: [], |
||||||
|
dateList: [ |
||||||
|
{ |
||||||
|
id: '', |
||||||
|
name: '不限' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
name: '近一个月' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 3, |
||||||
|
name: '近三个月' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 6, |
||||||
|
name: '近六个月' |
||||||
|
} |
||||||
|
], |
||||||
|
date: [], |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
totals: 0, |
||||||
|
ruleIds: [], |
||||||
|
timerList: [], |
||||||
|
timer: null |
||||||
|
}; |
||||||
|
}, |
||||||
|
directives: { |
||||||
|
countdown: { |
||||||
|
bind: function(el,binding,vnode) { |
||||||
|
let that = vnode.context |
||||||
|
let time = binding.value |
||||||
|
let timer = setInterval(() => { |
||||||
|
let timeList = time.split(':') |
||||||
|
let total = Number.parseInt(timeList[0] * 60 * 60) + Number.parseInt(timeList[1] * 60) + Number.parseInt(timeList[2]) |
||||||
|
if(total > 0){ |
||||||
|
--total |
||||||
|
let hours = Math.floor(total / (60 * 60)) |
||||||
|
let minutes = Math.floor(total % (60 * 60) / 60) |
||||||
|
let seconds = Math.floor(total % (60 * 60) % 60) |
||||||
|
time = `${that.formateTime(hours)}:${that.formateTime(minutes)}:${that.formateTime(seconds)}` |
||||||
|
}else{ |
||||||
|
clearInterval(timer) |
||||||
|
} |
||||||
|
console.log(11,time) |
||||||
|
el.innerHTML = time |
||||||
|
},1000) |
||||||
|
that.timerList.push(timer) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
'form.month': function(val){ |
||||||
|
if(val){ |
||||||
|
let unit = 24 * 60 * 60 * 1000 |
||||||
|
this.date = [this.formatDate('yyyy-MM-dd',new Date(new Date().getTime() - unit * 30 * val)),this.formatDate('yyyy-MM-dd',new Date(new Date().getTime() + unit))] |
||||||
|
}else{ |
||||||
|
this.date = [] |
||||||
|
} |
||||||
|
}, |
||||||
|
date: function(val){ |
||||||
|
if(val){ |
||||||
|
this.form.startTime = val[0] |
||||||
|
this.form.stopTime = val[1] |
||||||
|
}else{ |
||||||
|
this.form.startTime = '' |
||||||
|
this.form.stopTime = '' |
||||||
|
} |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
keyword: function(val) { |
||||||
|
clearTimeout(this.searchTimer) |
||||||
|
this.searchTimer = setTimeout(() => { |
||||||
|
this.getData() |
||||||
|
},500) |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
role() { |
||||||
|
return this.name === 'admin' ? '超级管理员' : '普通用户'; |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getData() |
||||||
|
this.timer = setInterval(this.getData,1000) |
||||||
|
this.$once('hook:beforeDestroy',() => { |
||||||
|
clearInterval(this.timer) |
||||||
|
}) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData() { |
||||||
|
let data = { |
||||||
|
type: this.form.type, |
||||||
|
startTime: this.form.startTime, |
||||||
|
stopTime: this.form.stopTime, |
||||||
|
month: this.form.month, |
||||||
|
searchContent: this.encodeString(this.keyword), |
||||||
|
status: this.form.status, |
||||||
|
page: this.pageNo, |
||||||
|
size: this.pageSize, |
||||||
|
systemId: this.systemId, |
||||||
|
schoolId: this.schoolId ? this.schoolId : '' |
||||||
|
} |
||||||
|
this.$get(this.api.expList,data).then(res => { |
||||||
|
this.customerData = res.list.list |
||||||
|
this.totals = res.list.totalCount |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
permission(){ |
||||||
|
this.$router.push('/permission') |
||||||
|
}, |
||||||
|
add(){ |
||||||
|
this.$router.push('addclass') |
||||||
|
}, |
||||||
|
edit(row){ |
||||||
|
this.$router.push(`addclass?id=${row.id}`) |
||||||
|
}, |
||||||
|
show(row){ |
||||||
|
this.$store.commit('addExperimentData',{experimentData: { |
||||||
|
id: row.id, |
||||||
|
name: row.projectName, |
||||||
|
class: row.experimentalClassName, |
||||||
|
systemId: this.systemId, |
||||||
|
projectId: row.projectId, |
||||||
|
experimentalName: row.experimentalName |
||||||
|
}}) |
||||||
|
this.$router.push('experimentTeach') |
||||||
|
}, |
||||||
|
start(row){ |
||||||
|
let data = { |
||||||
|
id: row.id, |
||||||
|
startTime: this.formatDate("yyyy-MM-dd hh:mm:ss",new Date()), |
||||||
|
status: 2 |
||||||
|
} |
||||||
|
this.$post(this.api.expUpdate,data).then(res => { |
||||||
|
if(res.errmessage == 'success') { |
||||||
|
this.$message.success('启动成功！') |
||||||
|
this.getData() |
||||||
|
} |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
finish(row){ |
||||||
|
this.$confirm('确定要提前结束吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
let data = { |
||||||
|
id: row.id, |
||||||
|
stopTime: this.formatDate("yyyy-MM-dd hh:mm:ss",new Date()), |
||||||
|
status: 3 |
||||||
|
} |
||||||
|
this.$post(this.api.expUpdate,data).then(res => { |
||||||
|
if(res.errmessage == 'success') { |
||||||
|
this.$message.success('提前结束成功！') |
||||||
|
this.getData() |
||||||
|
} |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}) |
||||||
|
}, |
||||||
|
delData(row) { |
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$post(this.api.expDelete,[row.id]).then(res => { |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}, |
||||||
|
delAllData() { |
||||||
|
if(this.multipleSelection.length != ''){ |
||||||
|
let newArr = this.multipleSelection |
||||||
|
let delList = newArr.map(item => { |
||||||
|
return item.id |
||||||
|
}) |
||||||
|
|
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
let data = delList |
||||||
|
this.$post(this.api.expDelete,data).then(res => { |
||||||
|
this.$refs.table.clearSelection() |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}else{ |
||||||
|
this.$message.error('请先选择数据 ！'); |
||||||
|
} |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val; |
||||||
|
}, |
||||||
|
onSearch(){ |
||||||
|
this.pageNo = 1 |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.pageNo = val; |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
transferTime(date,type){ |
||||||
|
if(date == '0000-00-00 00:00:00') return '---' |
||||||
|
return date |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.mag{ |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
/deep/.el-tabs__nav-wrap::after{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.no-mb /deep/.el-form-item{ |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
@ -0,0 +1,300 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between" style="margin-bottom: 10px"> |
||||||
|
<div class="per_title" v-preventReClick @click="goback()"> |
||||||
|
<i class="el-icon-arrow-left"></i> |
||||||
|
<span class="per_back">返回</span> |
||||||
|
<span class="per_school">{{experimentalName}}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-form label-width="100px"> |
||||||
|
<div class="flex-between"> |
||||||
|
<div></div> |
||||||
|
<div> |
||||||
|
<el-input placeholder="请输入学校/学生姓名" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-form> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="stat"> |
||||||
|
<div class="cka-Overview"> |
||||||
|
<div class="newPractice-card"> |
||||||
|
<div class="newPractice-card-other"> |
||||||
|
<p style="font-size:18px">实验总人数</p> |
||||||
|
<p style="font-size:36px">{{totals}}</p> |
||||||
|
</div> |
||||||
|
<div class="newPractice-card-other"> |
||||||
|
<p style="font-size:18px">实验平均分</p> |
||||||
|
<p style="font-size:36px">{{avg}}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="chart" id="chart"></div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-button type="primary" size="small" @click="delAllData">批量删除</el-button> |
||||||
|
<el-button type="primary" size="small" @click="exportData">导出</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table :data="listData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="reportId"> |
||||||
|
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{scope.$index + (pageNo - 1) * pageSize + 1}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="schoolName" label="学校" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="experimentalName" label="考核名称" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{experimentalName}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column v-if="className" prop="class" label="班级" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="userName" label="学生姓名" align="center"></el-table-column> |
||||||
|
<el-table-column prop="workNumber" label="学号" align="center"></el-table-column> |
||||||
|
<el-table-column prop="score" label="分数" align="center"></el-table-column> |
||||||
|
<el-table-column prop="submitTime" label="提交时间" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center" width="220"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" @click="edit(scope.row)">修改分数</el-button> |
||||||
|
<el-button type="text" @click="show(scope.row)">查看成绩报告</el-button> |
||||||
|
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import echarts from 'echarts' |
||||||
|
export default { |
||||||
|
name: 'experiment', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
systemId: this.$store.state.experimentData.systemId, |
||||||
|
id: this.$store.state.experimentData.id, |
||||||
|
projectId: this.$store.state.experimentData.projectId, |
||||||
|
projectName: this.$store.state.experimentData.name, |
||||||
|
experimentalName: this.$store.state.experimentData.experimentalName, |
||||||
|
className: this.$store.state.experimentData.class, |
||||||
|
keyword: '', |
||||||
|
listData: [], |
||||||
|
multipleSelection: [], |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
totals: 0, |
||||||
|
avg: 0, |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData() { |
||||||
|
let data = { |
||||||
|
systemId: this.systemId, |
||||||
|
page: this.pageNo, |
||||||
|
size: this.pageSize, |
||||||
|
searchContant: this.keyword, |
||||||
|
projectId: this.id |
||||||
|
} |
||||||
|
this.$get(this.api.queryEvaluationReport,data).then(res => { |
||||||
|
let list = res.data.list |
||||||
|
let score = 0 |
||||||
|
list.map(n => { |
||||||
|
n.class = this.className |
||||||
|
score += n.score |
||||||
|
}) |
||||||
|
this.listData = list |
||||||
|
this.totals = res.data.totalCount |
||||||
|
this.avg = score ? (score / res.data.totalCount).toFixed(2) : 0 |
||||||
|
this.getChart() |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
edit(row){ |
||||||
|
this.$router.push(`showExperiment?id=${row.reportId}&studentId=${row.userId}&userName=${row.userName}&edit=1`) |
||||||
|
}, |
||||||
|
show(row){ |
||||||
|
this.$router.push(`showExperiment?id=${row.reportId}&studentId=${row.userId}&userName=${row.userName}`) |
||||||
|
}, |
||||||
|
exportData(){ |
||||||
|
if(!this.listData.length) return false |
||||||
|
let selected = this.multipleSelection |
||||||
|
let exportList = [] |
||||||
|
if(selected.length){ |
||||||
|
exportList = selected.map(item => { |
||||||
|
return item.recordId |
||||||
|
}) |
||||||
|
}else{ |
||||||
|
exportList = this.listData.map(item => { |
||||||
|
return item.recordId |
||||||
|
}) |
||||||
|
} |
||||||
|
window.open(`${this.api.exportAchievement}?ids=${exportList.join(',')}&projectId=${this.projectId}&source=2`) |
||||||
|
}, |
||||||
|
handleDelete(row) { |
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$post(`${this.api.deleteReport}?reportId=${row.reportId}`).then(res => { |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}, |
||||||
|
delAllData() { |
||||||
|
if(this.multipleSelection.length != ''){ |
||||||
|
let newArr = this.multipleSelection |
||||||
|
let delList = newArr.map(item => { |
||||||
|
return `reportId=${item.reportId}` |
||||||
|
}) |
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$post(`${this.api.deleteReport}?${delList.join('&')}`).then(res => { |
||||||
|
this.$refs.table.clearSelection() |
||||||
|
this.$message.success('删除成功') |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}) |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}else{ |
||||||
|
this.$message.error('请先选择数据 ！'); |
||||||
|
} |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val; |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.pageNo = val; |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
getChart(){ |
||||||
|
let data = [0,0,0,0,0,0,0,0,0,0] |
||||||
|
let list = this.listData |
||||||
|
list.map(n => { |
||||||
|
n.score |
||||||
|
if(n.score >= 0 && n.score <= 10){ |
||||||
|
data[0]++ |
||||||
|
}else if(n.score > 10 && n.score <= 20){ |
||||||
|
data[1]++ |
||||||
|
}else if(n.score > 20 && n.score <= 30){ |
||||||
|
data[2]++ |
||||||
|
}else if(n.score > 30 && n.score <= 40){ |
||||||
|
data[3]++ |
||||||
|
}else if(n.score > 40 && n.score <= 50){ |
||||||
|
data[4]++ |
||||||
|
}else if(n.score > 50 && n.score <= 60){ |
||||||
|
data[5]++ |
||||||
|
}else if(n.score > 60 && n.score <= 70){ |
||||||
|
data[6]++ |
||||||
|
}else if(n.score > 70 && n.score <= 80){ |
||||||
|
data[7]++ |
||||||
|
}else if(n.score > 80 && n.score <= 90){ |
||||||
|
data[8]++ |
||||||
|
}else if(n.score > 90 && n.score <= 100){ |
||||||
|
data[9]++ |
||||||
|
} |
||||||
|
}) |
||||||
|
let myChart = echarts.init(document.getElementById('chart')) |
||||||
|
myChart.setOption({ |
||||||
|
title: { text: '实验分数分布图' }, |
||||||
|
tooltip: {}, |
||||||
|
xAxis: { |
||||||
|
name: '分数', |
||||||
|
type: 'category', |
||||||
|
boundaryGap: false, |
||||||
|
data: ['0-10', '11-20', '21-30', '31-40', '41-50', '51-60', '61-70', '71-80','81-90','91-100'] |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
name: '人数', |
||||||
|
type: 'value' |
||||||
|
}, |
||||||
|
series: [{ |
||||||
|
data, |
||||||
|
type: 'line', |
||||||
|
areaStyle: {}, |
||||||
|
color: ['#8191fd'] |
||||||
|
}] |
||||||
|
}) |
||||||
|
}, |
||||||
|
goback() { |
||||||
|
this.$router.back() |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.mag{ |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
/deep/.el-tabs__nav-wrap::after{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.stat{ |
||||||
|
display: flex; |
||||||
|
.chart{ |
||||||
|
flex: 1; |
||||||
|
height: 300px; |
||||||
|
} |
||||||
|
} |
||||||
|
.cka-Overview { |
||||||
|
width: 600px; |
||||||
|
margin-right: 20px; |
||||||
|
p { |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
.newPractice-card { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
height: 100%; |
||||||
|
.newPractice-card-other:nth-child(1) { |
||||||
|
background-image: url('../../assets/img/total.png'); |
||||||
|
} |
||||||
|
.newPractice-card-other:nth-child(2) { |
||||||
|
background-image: url('../../assets/img/avg.png'); |
||||||
|
} |
||||||
|
|
||||||
|
.newPractice-card-other { |
||||||
|
width: 300px; |
||||||
|
padding: 30px 30px; |
||||||
|
margin: 0 10px; |
||||||
|
box-sizing: border-box; |
||||||
|
border-radius: 8px; |
||||||
|
background-size: 100% 100%; |
||||||
|
background-repeat: no-repeat; |
||||||
|
p { |
||||||
|
font-size: 18px; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
p:last-child { |
||||||
|
margin-top: 10px; |
||||||
|
color: #ffffff; |
||||||
|
font-size: 26px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,305 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between" style="margin-bottom: 10px"> |
||||||
|
<div class="per_title" v-preventReClick @click="goback()"> |
||||||
|
<i class="el-icon-arrow-left"></i> |
||||||
|
<span class="per_back">返回</span> |
||||||
|
<span class="per_school">{{experimentalName}}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-form label-width="100px"> |
||||||
|
<div class="flex-between"> |
||||||
|
<div></div> |
||||||
|
<div> |
||||||
|
<el-input placeholder="请输入学校/学生姓名" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-form> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="stat"> |
||||||
|
<div class="cka-Overview"> |
||||||
|
<div class="newPractice-card"> |
||||||
|
<div class="newPractice-card-other"> |
||||||
|
<p style="font-size:18px">实验总人数</p> |
||||||
|
<p style="font-size:36px">{{totals}}</p> |
||||||
|
</div> |
||||||
|
<div class="newPractice-card-other"> |
||||||
|
<p style="font-size:18px">实验平均分</p> |
||||||
|
<p style="font-size:36px">{{avg}}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="chart" id="chart"></div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-button type="primary" size="small" @click="delAllData">批量删除</el-button> |
||||||
|
<el-button type="primary" size="small" @click="exportData">导出</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table :data="listData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="reportId"> |
||||||
|
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{scope.$index + (pageNo - 1) * pageSize + 1}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="schoolName" label="学校" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="experimentalName" label="考核名称" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{experimentalName}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column v-if="className" prop="class" label="班级" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="userName" label="学生姓名" align="center"></el-table-column> |
||||||
|
<el-table-column prop="workNumber" label="学号" align="center"></el-table-column> |
||||||
|
<el-table-column prop="score" label="分数" align="center"></el-table-column> |
||||||
|
<el-table-column prop="creationTime" label="提交时间" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center" width="220"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" @click="edit(scope.row)">修改分数</el-button> |
||||||
|
<el-button type="text" @click="show(scope.row)">查看成绩报告</el-button> |
||||||
|
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import echarts from 'echarts' |
||||||
|
export default { |
||||||
|
name: 'experiment', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
systemId: this.$store.state.experimentData.systemId, |
||||||
|
id: this.$store.state.experimentData.id, |
||||||
|
projectName: this.$store.state.experimentData.name, |
||||||
|
experimentalName: this.$store.state.experimentData.experimentalName, |
||||||
|
className: this.$store.state.experimentData.class, |
||||||
|
projectId: this.$store.state.experimentData.projectId, |
||||||
|
keyword: '', |
||||||
|
listDataAll: [], |
||||||
|
listData: [], |
||||||
|
multipleSelection: [], |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
totals: 0, |
||||||
|
avg: 0, |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData() { |
||||||
|
let data = { |
||||||
|
id: this.id |
||||||
|
} |
||||||
|
this.$get(this.api.getTeachAchievement,data).then(res => { |
||||||
|
let list = res.data |
||||||
|
let score = 0 |
||||||
|
list.map(n => { |
||||||
|
n.class = this.className |
||||||
|
score += n.score |
||||||
|
}) |
||||||
|
this.listDataAll = list |
||||||
|
this.handlePage() |
||||||
|
this.totals = list.length |
||||||
|
this.avg = score ? (score / list.length).toFixed(2) : 0 |
||||||
|
this.getChart() |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
handlePage(){ |
||||||
|
let list = this.listDataAll |
||||||
|
this.listData = list.slice((this.pageNo - 1) * this.pageSize,this.pageNo * this.pageSize) |
||||||
|
this.totals = list.length |
||||||
|
}, |
||||||
|
edit(row){ |
||||||
|
this.$router.push(`/showExperiment?id=${row.reportId}&studentId=${row.userId}&userName=${row.userName}&edit=1`) |
||||||
|
}, |
||||||
|
show(row){ |
||||||
|
this.$router.push(`/showExperiment?id=${row.reportId}&studentId=${row.userId}&userName=${row.userName}`) |
||||||
|
}, |
||||||
|
exportData(){ |
||||||
|
if(!this.listData.length) return false |
||||||
|
let selected = this.multipleSelection |
||||||
|
let exportList = [] |
||||||
|
if(selected.length){ |
||||||
|
exportList = selected.map(item => { |
||||||
|
return item.recordId |
||||||
|
}) |
||||||
|
}else{ |
||||||
|
exportList = this.listData.map(item => { |
||||||
|
return item.recordId |
||||||
|
}) |
||||||
|
} |
||||||
|
console.log(exportList.join(','),this.id,this.projectId) |
||||||
|
window.open(`${this.api.exportAchievement}?ids=${exportList.join(',')}&projectId=${this.projectId}&source=2`) |
||||||
|
}, |
||||||
|
handleDelete(row) { |
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$post(`${this.api.deleteReport}?reportId=${row.reportId}`).then(res => { |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}, |
||||||
|
delAllData() { |
||||||
|
if(this.multipleSelection.length != ''){ |
||||||
|
let newArr = this.multipleSelection |
||||||
|
let delList = newArr.map(item => { |
||||||
|
return `reportId=${item.reportId}` |
||||||
|
}) |
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$post(`${this.api.deleteReport}?${delList.join('&')}`).then(res => { |
||||||
|
this.$refs.table.clearSelection() |
||||||
|
this.$message.success('删除成功') |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}) |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}else{ |
||||||
|
this.$message.error('请先选择数据 ！'); |
||||||
|
} |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val; |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.pageNo = val; |
||||||
|
this.handlePage(); |
||||||
|
}, |
||||||
|
getChart(){ |
||||||
|
let data = [0,0,0,0,0,0,0,0,0,0] |
||||||
|
let list = this.listData |
||||||
|
list.map(n => { |
||||||
|
n.score |
||||||
|
if(n.score >= 0 && n.score <= 10){ |
||||||
|
data[0]++ |
||||||
|
}else if(n.score > 10 && n.score <= 20){ |
||||||
|
data[1]++ |
||||||
|
}else if(n.score > 20 && n.score <= 30){ |
||||||
|
data[2]++ |
||||||
|
}else if(n.score > 30 && n.score <= 40){ |
||||||
|
data[3]++ |
||||||
|
}else if(n.score > 40 && n.score <= 50){ |
||||||
|
data[4]++ |
||||||
|
}else if(n.score > 50 && n.score <= 60){ |
||||||
|
data[5]++ |
||||||
|
}else if(n.score > 60 && n.score <= 70){ |
||||||
|
data[6]++ |
||||||
|
}else if(n.score > 70 && n.score <= 80){ |
||||||
|
data[7]++ |
||||||
|
}else if(n.score > 80 && n.score <= 90){ |
||||||
|
data[8]++ |
||||||
|
}else if(n.score > 90 && n.score <= 100){ |
||||||
|
data[9]++ |
||||||
|
} |
||||||
|
}) |
||||||
|
let myChart = echarts.init(document.getElementById('chart')) |
||||||
|
myChart.setOption({ |
||||||
|
title: { text: '实验分数分布图' }, |
||||||
|
tooltip: {}, |
||||||
|
xAxis: { |
||||||
|
name: '分数', |
||||||
|
type: 'category', |
||||||
|
boundaryGap: false, |
||||||
|
data: ['0-10', '11-20', '21-30', '31-40', '41-50', '51-60', '61-70', '71-80','81-90','91-100'] |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
name: '人数', |
||||||
|
type: 'value' |
||||||
|
}, |
||||||
|
series: [{ |
||||||
|
data, |
||||||
|
type: 'line', |
||||||
|
areaStyle: {}, |
||||||
|
color: ['#8191fd'] |
||||||
|
}] |
||||||
|
}) |
||||||
|
}, |
||||||
|
goback() { |
||||||
|
this.$router.back() |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.mag{ |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
/deep/.el-tabs__nav-wrap::after{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.stat{ |
||||||
|
display: flex; |
||||||
|
.chart{ |
||||||
|
flex: 1; |
||||||
|
height: 300px; |
||||||
|
} |
||||||
|
} |
||||||
|
.cka-Overview { |
||||||
|
width: 600px; |
||||||
|
margin-right: 20px; |
||||||
|
p { |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
.newPractice-card { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
height: 100%; |
||||||
|
.newPractice-card-other:nth-child(1) { |
||||||
|
background-image: url('../../assets/img/total.png'); |
||||||
|
} |
||||||
|
.newPractice-card-other:nth-child(2) { |
||||||
|
background-image: url('../../assets/img/avg.png'); |
||||||
|
} |
||||||
|
|
||||||
|
.newPractice-card-other { |
||||||
|
width: 300px; |
||||||
|
padding: 30px 30px; |
||||||
|
margin: 0 10px; |
||||||
|
box-sizing: border-box; |
||||||
|
border-radius: 8px; |
||||||
|
background-size: 100% 100%; |
||||||
|
background-repeat: no-repeat; |
||||||
|
p { |
||||||
|
font-size: 18px; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
p:last-child { |
||||||
|
margin-top: 10px; |
||||||
|
color: #ffffff; |
||||||
|
font-size: 26px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
@ -0,0 +1,301 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between" style="margin-bottom: 10px"> |
||||||
|
<div class="per_title" v-preventReClick @click="goback()"> |
||||||
|
<i class="el-icon-arrow-left"></i> |
||||||
|
<span class="per_back">返回</span> |
||||||
|
<span class="per_school">{{experimentName}}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-form label-width="100px"> |
||||||
|
<div class="flex-between"> |
||||||
|
<div></div> |
||||||
|
<div> |
||||||
|
<el-input placeholder="请输入学校/学生姓名" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-form> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="stat"> |
||||||
|
<div class="cka-Overview"> |
||||||
|
<div class="newPractice-card"> |
||||||
|
<div class="newPractice-card-other"> |
||||||
|
<p style="font-size:18px">实验总人数</p> |
||||||
|
<p style="font-size:36px">{{totals}}</p> |
||||||
|
</div> |
||||||
|
<div class="newPractice-card-other"> |
||||||
|
<p style="font-size:18px">实验平均分</p> |
||||||
|
<p style="font-size:36px">{{avg}}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="chart" id="chart"></div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<!-- <el-button type="primary" size="small" @click="delAllData">批量删除</el-button> --> |
||||||
|
<el-button type="primary" size="small" @click="exportData">导出</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table :data="listData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id"> |
||||||
|
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{scope.$index + (pageNo - 1) * pageSize + 1}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="schoolName" label="学校" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column v-if="className" prop="class" label="班级" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="studentName" label="学生姓名" align="center"></el-table-column> |
||||||
|
<el-table-column prop="workNumber" label="学号" align="center"></el-table-column> |
||||||
|
<el-table-column prop="score" label="分数" align="center"></el-table-column> |
||||||
|
<el-table-column prop="creationTime" label="提交时间" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center" width="220"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" @click="edit(scope.row)">修改分数</el-button> |
||||||
|
<el-button type="text" @click="show(scope.row)">查看成绩报告</el-button> |
||||||
|
<!-- <el-button type="text" @click="handleDelete(scope.row)">删除</el-button> --> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import echarts from 'echarts' |
||||||
|
export default { |
||||||
|
name: 'experiment', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
systemId: this.$config.systemId, |
||||||
|
projectId: this.$store.state.experimentData.id, |
||||||
|
experimentName: this.$store.state.experimentData.name, |
||||||
|
className: this.$store.state.experimentData.class, |
||||||
|
keyword: '', |
||||||
|
listDataAll: [], |
||||||
|
listData: [], |
||||||
|
multipleSelection: [], |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
totals: 0, |
||||||
|
avg: 0, |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData() { |
||||||
|
let data = { |
||||||
|
systemId: this.systemId, |
||||||
|
page: this.pageNo, |
||||||
|
size: this.pageSize, |
||||||
|
searchContant: this.keyword, |
||||||
|
projectId: this.projectId |
||||||
|
} |
||||||
|
this.$get(this.api.reportList,data).then(res => { |
||||||
|
let list = res.data |
||||||
|
let score = 0 |
||||||
|
list.map(n => { |
||||||
|
n.class = this.className |
||||||
|
score += n.score |
||||||
|
}) |
||||||
|
this.listDataAll = list |
||||||
|
this.handlePage() |
||||||
|
this.avg = score ? (score / list.length).toFixed(2) : 0 |
||||||
|
this.totals = list.length |
||||||
|
this.getChart() |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
handlePage(){ |
||||||
|
let list = this.listDataAll |
||||||
|
this.listData = list.slice((this.pageNo - 1) * this.pageSize,this.pageNo * this.pageSize) |
||||||
|
this.totals = list.length |
||||||
|
}, |
||||||
|
edit(row){ |
||||||
|
this.$router.push(`showExperiment?id=${row.reportId}&studentId=${row.userId}&userName=${row.studentName}&edit=1`) |
||||||
|
}, |
||||||
|
show(row){ |
||||||
|
this.$router.push(`showExperiment?id=${row.reportId}&studentId=${row.userId}&userName=${row.studentName}`) |
||||||
|
}, |
||||||
|
exportData(){ |
||||||
|
if(!this.listData.length) return false |
||||||
|
let selected = this.multipleSelection |
||||||
|
let exportList = [] |
||||||
|
if(selected.length){ |
||||||
|
exportList = selected.map(item => { |
||||||
|
return item.recordId |
||||||
|
}) |
||||||
|
}else{ |
||||||
|
exportList = this.listData.map(item => { |
||||||
|
return item.recordId |
||||||
|
}) |
||||||
|
} |
||||||
|
console.log(exportList.join(','),this.id,this.projectId) |
||||||
|
window.open(`${this.api.exportAchievement}?ids=${exportList.join(',')}&projectId=${this.projectId}&source=2`) |
||||||
|
}, |
||||||
|
handleDelete(row) { |
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$post(`${this.api.deleteReport}?reportId=${row.reportId}`).then(res => { |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}, |
||||||
|
delAllData() { |
||||||
|
if(this.multipleSelection.length != ''){ |
||||||
|
let newArr = this.multipleSelection |
||||||
|
let delList = newArr.map(item => { |
||||||
|
return `reportId=${item.reportId}` |
||||||
|
}) |
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$post(`${this.api.deleteReport}?${delList.join('&')}`).then(res => { |
||||||
|
this.$refs.table.clearSelection() |
||||||
|
this.$message.success('删除成功') |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}) |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}else{ |
||||||
|
this.$message.error('请先选择数据 ！'); |
||||||
|
} |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val; |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.pageNo = val; |
||||||
|
this.handlePage(); |
||||||
|
}, |
||||||
|
getChart(){ |
||||||
|
let data = [0,0,0,0,0,0,0,0,0,0] |
||||||
|
let list = this.listData |
||||||
|
list.map(n => { |
||||||
|
n.score |
||||||
|
if(n.score >= 0 && n.score <= 10){ |
||||||
|
data[0]++ |
||||||
|
}else if(n.score > 10 && n.score <= 20){ |
||||||
|
data[1]++ |
||||||
|
}else if(n.score > 20 && n.score <= 30){ |
||||||
|
data[2]++ |
||||||
|
}else if(n.score > 30 && n.score <= 40){ |
||||||
|
data[3]++ |
||||||
|
}else if(n.score > 40 && n.score <= 50){ |
||||||
|
data[4]++ |
||||||
|
}else if(n.score > 50 && n.score <= 60){ |
||||||
|
data[5]++ |
||||||
|
}else if(n.score > 60 && n.score <= 70){ |
||||||
|
data[6]++ |
||||||
|
}else if(n.score > 70 && n.score <= 80){ |
||||||
|
data[7]++ |
||||||
|
}else if(n.score > 80 && n.score <= 90){ |
||||||
|
data[8]++ |
||||||
|
}else if(n.score > 90 && n.score <= 100){ |
||||||
|
data[9]++ |
||||||
|
} |
||||||
|
}) |
||||||
|
let myChart = echarts.init(document.getElementById('chart')) |
||||||
|
myChart.setOption({ |
||||||
|
title: { text: '实验分数分布图' }, |
||||||
|
tooltip: {}, |
||||||
|
xAxis: { |
||||||
|
name: '分数', |
||||||
|
type: 'category', |
||||||
|
boundaryGap: false, |
||||||
|
data: ['0-10', '11-20', '21-30', '31-40', '41-50', '51-60', '61-70', '71-80','81-90','91-100'] |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
name: '人数', |
||||||
|
type: 'value' |
||||||
|
}, |
||||||
|
series: [{ |
||||||
|
data, |
||||||
|
type: 'line', |
||||||
|
areaStyle: {}, |
||||||
|
color: ['#8191fd'] |
||||||
|
}] |
||||||
|
}) |
||||||
|
}, |
||||||
|
goback() { |
||||||
|
this.$router.back() |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.mag{ |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
/deep/.el-tabs__nav-wrap::after{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.stat{ |
||||||
|
display: flex; |
||||||
|
.chart{ |
||||||
|
flex: 1; |
||||||
|
height: 300px; |
||||||
|
} |
||||||
|
} |
||||||
|
.cka-Overview { |
||||||
|
width: 600px; |
||||||
|
margin-right: 20px; |
||||||
|
p { |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
.newPractice-card { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
height: 100%; |
||||||
|
.newPractice-card-other:nth-child(1) { |
||||||
|
background-image: url('../../assets/img/total.png'); |
||||||
|
} |
||||||
|
.newPractice-card-other:nth-child(2) { |
||||||
|
background-image: url('../../assets/img/avg.png'); |
||||||
|
} |
||||||
|
|
||||||
|
.newPractice-card-other { |
||||||
|
width: 300px; |
||||||
|
padding: 30px 30px; |
||||||
|
margin: 0 10px; |
||||||
|
box-sizing: border-box; |
||||||
|
border-radius: 8px; |
||||||
|
background-size: 100% 100%; |
||||||
|
background-repeat: no-repeat; |
||||||
|
p { |
||||||
|
font-size: 18px; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
p:last-child { |
||||||
|
margin-top: 10px; |
||||||
|
color: #ffffff; |
||||||
|
font-size: 26px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,46 @@ |
|||||||
|
<template> |
||||||
|
<section class="main"> |
||||||
|
<div class="crumbs"> |
||||||
|
<el-breadcrumb separator="/"> |
||||||
|
<el-breadcrumb-item><i class="el-icon-lx-global"></i> {{$t('i18n.breadcrumb')}}</el-breadcrumb-item> |
||||||
|
</el-breadcrumb> |
||||||
|
</div> |
||||||
|
<div class="container"> |
||||||
|
<span>{{$t('i18n.tips')}}</span> |
||||||
|
<el-button type="primary" @click="$i18n.locale = $i18n.locale === 'zh'?'en':'zh';">{{$t('i18n.btn')}}</el-button> |
||||||
|
<div class="list"> |
||||||
|
<h2>{{$t('i18n.title1')}}</h2> |
||||||
|
<p>{{$t('i18n.p1')}}</p> |
||||||
|
<p>{{$t('i18n.p2')}}</p> |
||||||
|
<p>{{$t('i18n.p3')}}</p> |
||||||
|
</div> |
||||||
|
<h2>{{$t('i18n.title2')}}</h2> |
||||||
|
<div> |
||||||
|
<i18n path="i18n.info" tag="p"> |
||||||
|
<a place="action" href="https://element.eleme.cn/2.0/#/zh-CN/component/i18n">{{ $t('i18n.value') }}</a> |
||||||
|
</i18n> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data(){ |
||||||
|
return { |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.list{ |
||||||
|
padding: 30px 0; |
||||||
|
} |
||||||
|
.list p{ |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
a{ |
||||||
|
color: #409eff; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,225 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<div class="crumbs"> |
||||||
|
<el-breadcrumb separator="/"> |
||||||
|
<el-breadcrumb-item><i class="el-icon-lx-emoji"></i> 自定义图标</el-breadcrumb-item> |
||||||
|
</el-breadcrumb> |
||||||
|
</div> |
||||||
|
<div class="container"> |
||||||
|
<h2>使用方法</h2> |
||||||
|
<p style="line-height: 50px;"> |
||||||
|
直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{iconList.length}}个图标） |
||||||
|
</p> |
||||||
|
<p class="example-p"> |
||||||
|
<i class="el-icon-lx-redpacket_fill" style="font-size: 30px;color: #ff5900"></i> |
||||||
|
<span><i class="el-icon-lx-redpacket_fill"></i></span> |
||||||
|
</p> |
||||||
|
<p class="example-p"> |
||||||
|
<i class="el-icon-lx-weibo" style="font-size: 30px;color:#fd5656"></i> |
||||||
|
<span><i class="el-icon-lx-weibo"></i></span> |
||||||
|
</p> |
||||||
|
<p class="example-p"> |
||||||
|
<i class="el-icon-lx-emojifill" style="font-size: 30px;color: #ffc300"></i> |
||||||
|
<span><i class="el-icon-lx-emojifill"></i></span> |
||||||
|
</p> |
||||||
|
<br> |
||||||
|
<h2>图标</h2> |
||||||
|
<div class="search-box"> |
||||||
|
<el-input class="search" size="large" v-model="keyword" clearable placeholder="请输入图标名称"></el-input> |
||||||
|
</div> |
||||||
|
<ul> |
||||||
|
<li class="icon-li" v-for="(item,index) in list" :key="index"> |
||||||
|
<div class="icon-li-content"> |
||||||
|
<i :class="`el-icon-lx-${item}`"></i> |
||||||
|
<span>{{item}}</span> |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data: function(){ |
||||||
|
return { |
||||||
|
keyword: '', |
||||||
|
iconList: [ |
||||||
|
'attentionforbid', |
||||||
|
'attentionforbidfill', |
||||||
|
'attention', |
||||||
|
'attentionfill', |
||||||
|
'tag', |
||||||
|
'tagfill', |
||||||
|
'people', |
||||||
|
'peoplefill', |
||||||
|
'notice', |
||||||
|
'noticefill', |
||||||
|
'mobile', |
||||||
|
'mobilefill', |
||||||
|
'voice', |
||||||
|
'voicefill', |
||||||
|
'unlock', |
||||||
|
'lock', |
||||||
|
'home', |
||||||
|
'homefill', |
||||||
|
'delete', |
||||||
|
'deletefill', |
||||||
|
'notification', |
||||||
|
'notificationfill', |
||||||
|
'notificationforbidfill', |
||||||
|
'like', |
||||||
|
'likefill', |
||||||
|
'comment', |
||||||
|
'commentfill', |
||||||
|
'camera', |
||||||
|
'camerafill', |
||||||
|
'warn', |
||||||
|
'warnfill', |
||||||
|
'time', |
||||||
|
'timefill', |
||||||
|
'location', |
||||||
|
'locationfill', |
||||||
|
'favor', |
||||||
|
'favorfill', |
||||||
|
'skin', |
||||||
|
'skinfill', |
||||||
|
'news', |
||||||
|
'newsfill', |
||||||
|
'record', |
||||||
|
'recordfill', |
||||||
|
'emoji', |
||||||
|
'emojifill', |
||||||
|
'message', |
||||||
|
'messagefill', |
||||||
|
'goods', |
||||||
|
'goodsfill', |
||||||
|
'crown', |
||||||
|
'crownfill', |
||||||
|
'move', |
||||||
|
'add', |
||||||
|
'hot', |
||||||
|
'hotfill', |
||||||
|
'service', |
||||||
|
'servicefill', |
||||||
|
'present', |
||||||
|
'presentfill', |
||||||
|
'pic', |
||||||
|
'picfill', |
||||||
|
'rank', |
||||||
|
'rankfill', |
||||||
|
'male', |
||||||
|
'female', |
||||||
|
'down', |
||||||
|
'top', |
||||||
|
'recharge', |
||||||
|
'rechargefill', |
||||||
|
'forward', |
||||||
|
'forwardfill', |
||||||
|
'info', |
||||||
|
'infofill', |
||||||
|
'redpacket', |
||||||
|
'redpacket_fill', |
||||||
|
'roundadd', |
||||||
|
'roundaddfill', |
||||||
|
'friendadd', |
||||||
|
'friendaddfill', |
||||||
|
'cart', |
||||||
|
'cartfill', |
||||||
|
'more', |
||||||
|
'moreandroid', |
||||||
|
'back', |
||||||
|
'right', |
||||||
|
'shop', |
||||||
|
'shopfill', |
||||||
|
'question', |
||||||
|
'questionfill', |
||||||
|
'roundclose', |
||||||
|
'roundclosefill', |
||||||
|
'roundcheck', |
||||||
|
'roundcheckfill', |
||||||
|
'global', |
||||||
|
'mail', |
||||||
|
'punch', |
||||||
|
'exit', |
||||||
|
'upload', |
||||||
|
'read', |
||||||
|
'file', |
||||||
|
'link', |
||||||
|
'full', |
||||||
|
'group', |
||||||
|
'friend', |
||||||
|
'profile', |
||||||
|
'addressbook', |
||||||
|
'calendar', |
||||||
|
'text', |
||||||
|
'copy', |
||||||
|
'share', |
||||||
|
'wifi', |
||||||
|
'vipcard', |
||||||
|
'weibo', |
||||||
|
'remind', |
||||||
|
'refresh', |
||||||
|
'filter', |
||||||
|
'settings', |
||||||
|
'scan', |
||||||
|
'qrcode', |
||||||
|
'cascades', |
||||||
|
'apps', |
||||||
|
'sort', |
||||||
|
'searchlist', |
||||||
|
'search', |
||||||
|
'edit' |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
list(){ |
||||||
|
return this.iconList.filter((item) => { |
||||||
|
return item.indexOf(this.keyword) !== -1; |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.example-p{ |
||||||
|
height: 45px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.search-box{ |
||||||
|
text-align: center; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
.search{ |
||||||
|
width: 300px; |
||||||
|
} |
||||||
|
ul,li{ |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
.icon-li{ |
||||||
|
display: inline-block; |
||||||
|
padding: 10px; |
||||||
|
width: 120px; |
||||||
|
height: 120px; |
||||||
|
} |
||||||
|
.icon-li-content{ |
||||||
|
display: flex; |
||||||
|
height: 100%; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.icon-li-content i{ |
||||||
|
font-size: 36px; |
||||||
|
color: #606266; |
||||||
|
} |
||||||
|
.icon-li-content span{ |
||||||
|
margin-top: 10px; |
||||||
|
color: #787878; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,192 @@ |
|||||||
|
<template> |
||||||
|
<div class="login-wrap"> |
||||||
|
<div class="header"> |
||||||
|
<div class="logo"> |
||||||
|
<img src="../../assets/img/logo.png"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="ms-login"> |
||||||
|
<div class="ms-title"> |
||||||
|
<el-tabs v-model="activeName" @tab-click="handleClick"> |
||||||
|
<el-tab-pane label="账号登录" name="first"> |
||||||
|
<el-form :model="param" :rules="rules" ref="login" label-width="0px" style="margin-top: 40px"> |
||||||
|
<el-form-item prop="username"> |
||||||
|
<el-input v-model="param.username" placeholder="请输入账号"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="password"> |
||||||
|
<el-input |
||||||
|
type="password" |
||||||
|
placeholder="请输入密码" |
||||||
|
v-model="param.password" |
||||||
|
@keyup.enter.native="submitForm()" |
||||||
|
> |
||||||
|
</el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-button type="text" class="forget">忘记密码?</el-button> |
||||||
|
<div class="login-btn"> |
||||||
|
<el-button type="primary" @click="submitForm()">马上登录</el-button> |
||||||
|
</div> |
||||||
|
<!-- <p class="login-tips">使用第三方账号直接登录</p> |
||||||
|
<p class="thirdParty"> |
||||||
|
<i class="icon-weixin"></i> |
||||||
|
<i class="icon-qq"></i> |
||||||
|
</p> --> |
||||||
|
</el-form> |
||||||
|
</el-tab-pane> |
||||||
|
|
||||||
|
<el-tab-pane label="扫描登录" name="second">扫描登录</el-tab-pane> |
||||||
|
</el-tabs> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import addRoutes from '@/libs/route/addRoutes' |
||||||
|
export default { |
||||||
|
data: function() { |
||||||
|
return { |
||||||
|
param: { |
||||||
|
username: '', |
||||||
|
password: '', |
||||||
|
}, |
||||||
|
rules: { |
||||||
|
username: [{ required: true, message: '请输入账号', trigger: 'blur' }], |
||||||
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }], |
||||||
|
}, |
||||||
|
activeName: 'first' |
||||||
|
}; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
submitForm() { |
||||||
|
this.$refs.login.validate(valid => { |
||||||
|
if (valid) { |
||||||
|
let data = { |
||||||
|
account: this.param.username, |
||||||
|
password: this.param.password |
||||||
|
} |
||||||
|
this.$get(this.api.logins,data).then(res => { |
||||||
|
let data = res.message.retvalue |
||||||
|
// if(data.roleId == 1 || data.roleId == 2 || data.roleId == 3){ |
||||||
|
// this.$post(this.api.updateLogInNumber,{userId: data.userId}).then(res => {}).catch(res => {}); |
||||||
|
res.message.listValue && this.$config.dynamicRoute && addRoutes(res.message.listValue) |
||||||
|
this.$message.success('登录成功'); |
||||||
|
sessionStorage.setItem('kd_server_username', this.param.username); |
||||||
|
res.message.retvalue.userAvatars && this.$store.commit("userPhoto", { avatar : res.message.retvalue.userAvatars}) |
||||||
|
this.$store.commit("userLoginData", { userLogin_id : data.userId,userRole_id: data.roleId,schoolId: data.schoolId,token: data.token,userName: data.userName}); |
||||||
|
|
||||||
|
let redirect = decodeURIComponent(this.$route.query.redirect || '/dashboard') |
||||||
|
this.$router.replace(redirect) |
||||||
|
// }else{ |
||||||
|
// this.$message.error('该用户没有权限'); |
||||||
|
// } |
||||||
|
}).catch(res => {}); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
handleClick(tab, event) { |
||||||
|
console.log(tab, event); |
||||||
|
} |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.login-wrap { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background-image: url(../../assets/img/login-bg.png); |
||||||
|
background-size: 100%; |
||||||
|
} |
||||||
|
.ms-title { |
||||||
|
width: 548px; |
||||||
|
position: absolute; |
||||||
|
left: 50%; |
||||||
|
top: 50px; |
||||||
|
transform: translate(-50%,0); |
||||||
|
} |
||||||
|
.ms-login { |
||||||
|
position: absolute; |
||||||
|
left: 50%; |
||||||
|
top: 42px; |
||||||
|
transform: translate(-50%,0); |
||||||
|
width: 1200px; |
||||||
|
height: 82%; |
||||||
|
/* height: 884px; */ |
||||||
|
margin-top: 60px; |
||||||
|
background-image: url(../../assets/img/login-input.png); |
||||||
|
box-shadow:0px 0px 79px 0px rgba(11,15,65,0.36); |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
.login-btn { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.login-btn button { |
||||||
|
width: 100%; |
||||||
|
height: 88px; |
||||||
|
margin-bottom: 50px; |
||||||
|
font-weight: bold; |
||||||
|
background:linear-gradient(90deg,rgba(94,206,253,1),rgba(91,67,231,1)); |
||||||
|
box-shadow:0px 7px 27px 0px rgba(50,129,255,0.51); |
||||||
|
border-radius:10px; |
||||||
|
} |
||||||
|
.login-tips { |
||||||
|
text-align: center; |
||||||
|
color: #999; |
||||||
|
font-weight:bold; |
||||||
|
} |
||||||
|
.forget{ |
||||||
|
width: 100%; |
||||||
|
margin-bottom: 28px; |
||||||
|
text-align: right; |
||||||
|
color: #999; |
||||||
|
font-weight:bold; |
||||||
|
} |
||||||
|
.thirdParty{ |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
margin-top: 33px; |
||||||
|
} |
||||||
|
|
||||||
|
/* 头部 */ |
||||||
|
.header{ |
||||||
|
width: 100%; |
||||||
|
height: 60px; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
background-color: #fff; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
.logo{ |
||||||
|
width: 171px; |
||||||
|
height: 40px; |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
img{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.header_title{ |
||||||
|
width: 33%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.header_title a{ |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.header_title a:hover{ |
||||||
|
color: blueviolet; |
||||||
|
} |
||||||
|
.nul{ |
||||||
|
width:80px; |
||||||
|
margin-right: 30px; |
||||||
|
} |
||||||
|
</style> |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,543 @@ |
|||||||
|
<template> |
||||||
|
<!-- 编程类 --> |
||||||
|
<div> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="per_title" v-preventReClick @click="goback()"> |
||||||
|
<i class="el-icon-arrow-left"></i> |
||||||
|
<span class="per_back">返回</span> |
||||||
|
<span class="per_school">查看判分点</span> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-center mgb20 user_header"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>基本信息</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px"> |
||||||
|
<el-form-item label="请输入判分点名称" prop="judgmentPointsName"> |
||||||
|
<el-input :disabled="true" v-model="ruleForm.judgmentPointsName"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="实验要求" prop="experimentalRequirements"> |
||||||
|
<el-input type="textarea" :disabled="true" v-model="ruleForm.experimentalRequirements"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-center mgb20 user_header"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>实验代码</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="footer_inputs1"> |
||||||
|
<p style=" text-align: center;">参考答案</p> |
||||||
|
<textarea id="memo1" :disabled="true" v-model="ruleForm.experimentcode" style="outline:none;"></textarea> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-center mgb20 user_header"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>判分规则</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<el-table |
||||||
|
:data="tableData" |
||||||
|
:stripe="true" |
||||||
|
:cell-style="rowClass" |
||||||
|
:header-cell-style="headClass" |
||||||
|
header-align="center" |
||||||
|
ref="editTable" |
||||||
|
> |
||||||
|
<el-table-column |
||||||
|
prop="decisionPointRule" |
||||||
|
type="index" |
||||||
|
label="序号" |
||||||
|
align="center" |
||||||
|
width="80" |
||||||
|
></el-table-column> |
||||||
|
<el-table-column label="编译器中正确答案" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<p class="p">字段一致性规则：用户编辑器中至少出现如下语句</p> |
||||||
|
<el-input |
||||||
|
type="textarea" |
||||||
|
:rows="2" |
||||||
|
v-model="scope.row.judgmentRulesRule" |
||||||
|
:disabled="scope.row.isShow" |
||||||
|
></el-input> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" width="150"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
:disabled="scope.row.isShow" |
||||||
|
style="cursor:pointer;border-radius: 50%;" |
||||||
|
circle |
||||||
|
@click="getPerhaps(scope.row)" |
||||||
|
>{{scope.row.perhaps==0?"且":"或"}}</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="终端中正确答案" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<p class="p">运行结果一致性规则：用户运行结果需要与下方代码运行结果一致</p> |
||||||
|
<el-input |
||||||
|
type="textarea" |
||||||
|
:rows="2" |
||||||
|
v-model="scope.row.judgmentRulesPoint" |
||||||
|
:disabled="scope.row.isShow" |
||||||
|
></el-input> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center" width="300"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-link |
||||||
|
size="mini" |
||||||
|
type="primary" |
||||||
|
:underline="false" |
||||||
|
:disabled="scope.row.isShow" |
||||||
|
v-show="scope.row.isShow" |
||||||
|
@click="getHandleEdit(scope.row)" |
||||||
|
>编辑</el-link> |
||||||
|
<el-link |
||||||
|
type="primary" |
||||||
|
size="mini" |
||||||
|
:underline="false" |
||||||
|
v-show="!scope.row.isShow" |
||||||
|
@click="getRule(scope.row)" |
||||||
|
>保存</el-link> |
||||||
|
<el-link |
||||||
|
size="mini" |
||||||
|
type="primary" |
||||||
|
:underline="false" |
||||||
|
v-show="!scope.row.isShow" |
||||||
|
@click="dialogFormVisible(scope.$index,scope.row)" |
||||||
|
>取消</el-link> |
||||||
|
<el-link |
||||||
|
size="mini" |
||||||
|
type="primary" |
||||||
|
:underline="false" |
||||||
|
v-show="!scope.row.isShow" |
||||||
|
@click="getRuleDelete(scope.$index,scope.row)" |
||||||
|
>删除</el-link> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</el-card> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { log } from "util"; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
ruleForm: { |
||||||
|
judgmentPointsName: "", |
||||||
|
experimentalRequirements: "", |
||||||
|
experimentcode: "" |
||||||
|
}, |
||||||
|
tableData: [], |
||||||
|
id: "", |
||||||
|
rules: { |
||||||
|
judgmentPointsName: [ |
||||||
|
{ required: true, message: "内容不能为空", trigger: "blur" } |
||||||
|
], |
||||||
|
experimentalRequirements: [ |
||||||
|
{ required: true, message: "实验要求不能为空", trigger: "blur" } |
||||||
|
], |
||||||
|
experimentcode: [ |
||||||
|
{ required: true, message: "参考答案不能为空", trigger: "blur" } |
||||||
|
] |
||||||
|
}, |
||||||
|
decisionPointRule: "", |
||||||
|
systemId: this.$config.systemId, |
||||||
|
userId: "", |
||||||
|
ruleIds: [], |
||||||
|
jRP: "", |
||||||
|
jRR: "", |
||||||
|
isAdd: false |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getMesg(); |
||||||
|
}, |
||||||
|
|
||||||
|
methods: { |
||||||
|
//且或判断 |
||||||
|
getPerhaps(a) { |
||||||
|
if (a.perhaps == 1) { |
||||||
|
a.perhaps = "0"; |
||||||
|
} else { |
||||||
|
a.perhaps = "1"; |
||||||
|
} |
||||||
|
}, |
||||||
|
//判分点详细信息查询(通过首页编辑按钮) |
||||||
|
getMesg() { |
||||||
|
if (this.$route.query.judgmentPointsId) { |
||||||
|
this.$get(this.api.QueryPfdInformation, { |
||||||
|
judgmentPointsId: this.$route.query.judgmentPointsId |
||||||
|
}) |
||||||
|
.then(res => { |
||||||
|
res.message.rules.map(e => { |
||||||
|
this.$set(e, "isQie", true); |
||||||
|
this.$set(e, "isShow", true); |
||||||
|
}); |
||||||
|
this.ruleForm = { |
||||||
|
judgmentPointsName: res.message.point.judgmentPointsName, |
||||||
|
experimentalRequirements: |
||||||
|
res.message.point.experimentalRequirements, |
||||||
|
experimentcode: res.message.point.experimentcode |
||||||
|
}; |
||||||
|
this.tableData = res.message.rules; |
||||||
|
let arr1 = this.tableData; |
||||||
|
let result1 = arr1.map(e => e.decisionPointRule); |
||||||
|
this.ruleIds = this.ruleIds.concat(result1); |
||||||
|
// this.decisionPointRule=res.message.rules[0].decisionPointRule; |
||||||
|
}) |
||||||
|
.catch(err => {}); |
||||||
|
} |
||||||
|
}, |
||||||
|
goback() { |
||||||
|
this.$router.back() |
||||||
|
}, |
||||||
|
|
||||||
|
// 表头样式设置 |
||||||
|
headClass() { |
||||||
|
return "text-align: center;"; |
||||||
|
}, |
||||||
|
|
||||||
|
// 表格样式设置 |
||||||
|
rowClass() { |
||||||
|
return "text-align: center;"; |
||||||
|
}, |
||||||
|
// 编辑判分点规则 保存按钮 |
||||||
|
getRule(row) { |
||||||
|
if (!row.judgmentRulesRule || !row.judgmentRulesPoint) { |
||||||
|
this.$message({ |
||||||
|
showClose: true, |
||||||
|
message: "内容不能为空", |
||||||
|
type: "warning" |
||||||
|
}); |
||||||
|
} else { |
||||||
|
if (row.decisionPointRule) { |
||||||
|
this.$post(this.api.UpdatePointOfJudgementRule, { |
||||||
|
judgmentRulesRule: row.judgmentRulesRule, |
||||||
|
judgmentRulesPoint: row.judgmentRulesPoint, |
||||||
|
perhaps: String(row.perhaps), |
||||||
|
decisionPointRule: row.decisionPointRule |
||||||
|
}) |
||||||
|
.then(res => { |
||||||
|
this.isAdd = false; |
||||||
|
row.isShow = true; |
||||||
|
this.getContent(); |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
console.log(err); |
||||||
|
}); |
||||||
|
} else { |
||||||
|
//新增判分规则 |
||||||
|
this.$post(this.api.AddPfdgzInformation, { |
||||||
|
judgmentRulesRule: row.judgmentRulesRule, |
||||||
|
judgmentRulesPoint: row.judgmentRulesPoint, |
||||||
|
perhaps: String(row.perhaps) |
||||||
|
}) |
||||||
|
.then(s => { |
||||||
|
this.isAdd = false; |
||||||
|
row.isShow = true; |
||||||
|
this.id = s.message; |
||||||
|
this.ruleIds.push(this.id); |
||||||
|
console.log(this.ruleIds); |
||||||
|
this.getContent(); |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
console.log(err); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
//取消 |
||||||
|
dialogFormVisible(index, row) { |
||||||
|
this.isAdd = false; |
||||||
|
if (!row.decisionPointRule) { |
||||||
|
this.tableData.splice(index, 1); |
||||||
|
} else { |
||||||
|
if (!row.judgmentRulesRule || !row.judgmentRulesPoint) { |
||||||
|
this.$message({ |
||||||
|
showClose: true, |
||||||
|
message: "内容不能为空", |
||||||
|
type: "warning" |
||||||
|
}); |
||||||
|
} else { |
||||||
|
row.isShow = true; |
||||||
|
row.judgmentRulesRule = this.jRR; |
||||||
|
row.judgmentRulesPoint = this.jRP; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
//编辑 |
||||||
|
getHandleEdit(row) { |
||||||
|
this.isAdd = true; |
||||||
|
row.isShow = false; |
||||||
|
this.jRR = row.judgmentRulesRule; |
||||||
|
this.jRP = row.judgmentRulesPoint; |
||||||
|
}, |
||||||
|
//删除 |
||||||
|
getRuleDelete(index, row) { |
||||||
|
this.getContent(); |
||||||
|
if (!row.decisionPointRule) { |
||||||
|
this.tableData.splice(index, 1); |
||||||
|
this.isAdd = false; |
||||||
|
} else { |
||||||
|
this.$confirm("此操作将永久删除该内容, 是否继续?", "提示", { |
||||||
|
confirmButtonText: "确定", |
||||||
|
cancelButtonText: "取消", |
||||||
|
type: "warning", |
||||||
|
center: true |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$post(this.api.DeletePointOfJudgementRule, { |
||||||
|
decisionPointRule: this.decisionPointRule |
||||||
|
}) |
||||||
|
.then(res => { |
||||||
|
this.getContent(); |
||||||
|
this.isAdd = false; |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
console.log(err); |
||||||
|
}); |
||||||
|
this.$message({ |
||||||
|
type: "success", |
||||||
|
message: "删除成功!" |
||||||
|
}); |
||||||
|
}) |
||||||
|
.catch(() => { |
||||||
|
this.$message({ |
||||||
|
type: "info", |
||||||
|
message: "已取消删除" |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
// 判分点规则信息查询 |
||||||
|
getContent() { |
||||||
|
this.$get(this.api.QueryPfdgzInformation, { |
||||||
|
ruleIds: this.ruleIds.join() |
||||||
|
}) |
||||||
|
.then(s => { |
||||||
|
s.message.map(e => { |
||||||
|
this.$set(e, "isQie", true); |
||||||
|
this.$set(e, "isShow", true); |
||||||
|
}); |
||||||
|
this.tableData = s.message; |
||||||
|
this.decisionPointRule = s.message[0].decisionPointRule; |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
console.log(err); |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
// 后面修改的样式 |
||||||
|
/deep/ .el-link.el-link--primary { |
||||||
|
padding-right: 10px; |
||||||
|
} |
||||||
|
/deep/ .el-button { |
||||||
|
line-height: 0; |
||||||
|
height: 30px; |
||||||
|
width: 80px; |
||||||
|
margin-top: 7px; |
||||||
|
border-radius: 20px; |
||||||
|
position: absolute; |
||||||
|
right: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
/deep/ .el-input__inner { |
||||||
|
border: 1px solid #9278ff; |
||||||
|
} |
||||||
|
/deep/ .el-form-item { |
||||||
|
margin-top: 15px; |
||||||
|
} |
||||||
|
// 第二部分 |
||||||
|
/deep/ .el-button--text { |
||||||
|
color: #9278ff; |
||||||
|
} |
||||||
|
/deep/ .el-button--text:focus, |
||||||
|
.el-button--text:hover { |
||||||
|
color: #9278ff; |
||||||
|
} |
||||||
|
.border { |
||||||
|
width: 50px; |
||||||
|
height: 50px; |
||||||
|
border: 1px solid #9278ff; |
||||||
|
border-radius: 50%; |
||||||
|
margin: auto; |
||||||
|
} |
||||||
|
.p { |
||||||
|
font-size: 12px; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
// 文本框 |
||||||
|
/deep/ .el-textarea__inner { |
||||||
|
height: 145px; |
||||||
|
width: 650px; |
||||||
|
resize: none; |
||||||
|
border: 1px solid #9278ff; |
||||||
|
font-size: 12px; |
||||||
|
border-radius: 5px; |
||||||
|
} |
||||||
|
/deep/ .el-textarea__inner:hover { |
||||||
|
border: 1px solid #9278ff; |
||||||
|
} |
||||||
|
|
||||||
|
// 滚动条的宽度 |
||||||
|
/deep/ ::-webkit-scrollbar { |
||||||
|
width: 6px; // 横向滚动条 |
||||||
|
height: 6px; // 纵向滚动条 必写 |
||||||
|
} |
||||||
|
// 滚动条的滑块 |
||||||
|
/deep/ ::-webkit-scrollbar-thumb { |
||||||
|
background-color: #9278ff; |
||||||
|
border-radius: 3px; |
||||||
|
-webkit-box-shadow: inset 0 0 5px #dddddd; |
||||||
|
} |
||||||
|
/deep/ ::-webkit-scrollbar-track { |
||||||
|
/*滚动条里面轨道*/ |
||||||
|
-webkit-box-shadow: inset 0 0 5px #dddddd; |
||||||
|
border-radius: 0; |
||||||
|
background: #dddddd; |
||||||
|
} |
||||||
|
/deep/ .el-row { |
||||||
|
padding: 0 20px; |
||||||
|
} |
||||||
|
|
||||||
|
/deep/ .el-table th { |
||||||
|
font-size: 14px; |
||||||
|
font-family: Microsoft YaHei; |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
background-color: #9278ff; |
||||||
|
} |
||||||
|
/deep/ .el-table td, |
||||||
|
.el-table th { |
||||||
|
padding-top: 0; |
||||||
|
} |
||||||
|
.footer_b p { |
||||||
|
margin: 0; |
||||||
|
padding-left: 10px; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
.footer_b { |
||||||
|
padding: 10px 0; |
||||||
|
border-top: 1px dashed #cccccc; |
||||||
|
margin: 0 15px; |
||||||
|
height: 45px; |
||||||
|
line-height: 45px; |
||||||
|
} |
||||||
|
|
||||||
|
// 第一部分 |
||||||
|
|
||||||
|
#memo { |
||||||
|
margin-left: 10px; |
||||||
|
height: 200px; |
||||||
|
width: 800px; |
||||||
|
resize: none; |
||||||
|
border: 1px solid #9278ff; |
||||||
|
font-size: 12px; |
||||||
|
border-radius: 5px; |
||||||
|
} |
||||||
|
#memo1 { |
||||||
|
height: 300px; |
||||||
|
width: 1700px; |
||||||
|
resize: none; |
||||||
|
border: 1px solid #9278ff; |
||||||
|
font-size: 12px; |
||||||
|
border-radius: 5px; |
||||||
|
padding: 10px 20px; |
||||||
|
} |
||||||
|
/deep/ .el-input--suffix .el-input__inner { |
||||||
|
border: 1px solid #9278ff; |
||||||
|
} |
||||||
|
.footer_input p { |
||||||
|
font-size: 12px; |
||||||
|
padding-right: 20px; |
||||||
|
} |
||||||
|
.footer_input { |
||||||
|
padding: 30px 0 20px 80px; |
||||||
|
} |
||||||
|
.footer_inputs { |
||||||
|
padding: 30px 0 20px 80px; |
||||||
|
} |
||||||
|
.footer_inputs1 { |
||||||
|
padding-bottom: 50px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.footer_inputs1 p { |
||||||
|
margin: 0 0 15px 0; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
.footer_inputs p { |
||||||
|
font-size: 12px; |
||||||
|
padding-right: 20px; |
||||||
|
} |
||||||
|
/deep/ .el-input { |
||||||
|
width: 30%; |
||||||
|
} |
||||||
|
/deep/ [class*=" el-icon-"], |
||||||
|
[class^="el-icon-"] { |
||||||
|
line-height: 3; |
||||||
|
padding-left: 10px; |
||||||
|
} |
||||||
|
.header { |
||||||
|
background-color: #ffffff; |
||||||
|
height: 45px; |
||||||
|
line-height: 45px; |
||||||
|
font-size: 14px; |
||||||
|
font-weight: 600; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.header span { |
||||||
|
font-size: 14px; |
||||||
|
font-weight: 600; |
||||||
|
padding-left: 5px; |
||||||
|
} |
||||||
|
.header p { |
||||||
|
padding-left: 20px; |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
.footer_h { |
||||||
|
border-top: 1px dashed #cccccc; |
||||||
|
border-bottom: 1px dashed #cccccc; |
||||||
|
margin: 0 15px; |
||||||
|
height: 45px; |
||||||
|
line-height: 45px; |
||||||
|
} |
||||||
|
.flex { |
||||||
|
display: flex; |
||||||
|
justify-content: flex-start; |
||||||
|
} |
||||||
|
.footer { |
||||||
|
background-color: #ffffff; |
||||||
|
} |
||||||
|
.footer_h p { |
||||||
|
padding-left: 10px; |
||||||
|
font-size: 14px; |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
.black { |
||||||
|
width: 8px; |
||||||
|
height: 18px; |
||||||
|
background-color: #333; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
.content { |
||||||
|
position: relative; |
||||||
|
top: 10px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,372 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-card v-if="showBack" shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between"> |
||||||
|
<div class="per_title" v-preventReClick @click="goback()"> |
||||||
|
<i class="el-icon-arrow-left"></i> |
||||||
|
<span class="per_back">返回</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div> |
||||||
|
<div class="flex-center mgb20"> |
||||||
|
<p class="hr_tag"></p> |
||||||
|
<span>筛选</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-form label-width="80px" class="flex-between no-mb"> |
||||||
|
<div class="flex-center"> |
||||||
|
<div> |
||||||
|
<el-form-item label="创建人"> |
||||||
|
<el-select v-model="queryData.founder" clearable placeholder="请选择创建人" @change="getData()"> |
||||||
|
<el-option v-for="(item,index) in founder" :key="index" :label="item.label" :value="item.value"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-form-item label="状态"> |
||||||
|
<el-select v-model="queryData.state" clearable placeholder="请选择状态" @change="getData()"> |
||||||
|
<el-option v-for="(item,index) in state" :key="index" :label="item.label" :value="item.value"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-form-item label="权限"> |
||||||
|
<el-select v-model="queryData.projectPermissions" placeholder="请选择" @change="getData()"> |
||||||
|
<el-option |
||||||
|
v-for="item in projectPermissions" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-form-item> |
||||||
|
<el-input placeholder="请输入项目名称" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div class="flex-center"> |
||||||
|
<p class="hr_tag"></p> |
||||||
|
<span>项目列表</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-button type="primary" size="small" round @click="add">新增项目</el-button> |
||||||
|
<el-button type="primary" size="small" round @click="delAllData">批量删除</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table :data="projectData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange"> |
||||||
|
<el-table-column type="selection" width="55" align="center"></el-table-column> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="projectName" label="实验项目名称" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="people" label="创建人" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{roleStatus(scope.row.founder)}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="权限" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{projectPermissions.find(n => n.value === scope.row.projectPermissions).label}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="模式" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{patternList.find(n => n.value === scope.row.pattern).label}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="creationTime" label="创建时间" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="status" label="状态" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{transferStatus(scope.row.state)}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" @click="edit(scope.row)">编辑</el-button> |
||||||
|
<el-button type="text" @click="delData(scope.row)">删除</el-button> |
||||||
|
<!-- <el-button type="text" @click="copyData(scope.row)">复制</el-button> --> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="totals"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-dialog title="复制" :visible.sync="copyVisible" width="24%" center :close-on-click-modal="false"> |
||||||
|
<el-form> |
||||||
|
<el-form-item> |
||||||
|
<el-input placeholder="请输入项目名称" v-model="projectName" @change="projectNameExistis"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="copyVisible = false">取 消</el-button> |
||||||
|
<el-button type="primary" @click="copySubmit">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import bus from '../common/bus'; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
systemId: this.$config.systemId, |
||||||
|
showBack: JSON.stringify(this.$store.state.addClass) == '{}' ? false : true, |
||||||
|
roleId: this.$store.state.userRoleId, |
||||||
|
userId: this.$store.state.userLoginId, |
||||||
|
queryData: { |
||||||
|
projectPermissions: "", |
||||||
|
founder: "", |
||||||
|
state: "", |
||||||
|
projectName: "", |
||||||
|
userId: this.$store.state.userLoginId, |
||||||
|
systemId: this.systemId |
||||||
|
}, |
||||||
|
keyword: '', |
||||||
|
status: '', |
||||||
|
projectData:[], |
||||||
|
totals: 0, |
||||||
|
patternList: [ |
||||||
|
{ |
||||||
|
value: 0, |
||||||
|
label: "基础模式" |
||||||
|
}, |
||||||
|
{ |
||||||
|
value: 1, |
||||||
|
label: "挑战模式" |
||||||
|
} |
||||||
|
], |
||||||
|
projectPermissions: [ |
||||||
|
{ |
||||||
|
value: "", |
||||||
|
label: "不限" |
||||||
|
}, |
||||||
|
{ |
||||||
|
value: 0, |
||||||
|
label: "练习" |
||||||
|
}, |
||||||
|
{ |
||||||
|
value: 1, |
||||||
|
label: "考核" |
||||||
|
}, |
||||||
|
// { |
||||||
|
// value: 2, |
||||||
|
// label: "竞赛" |
||||||
|
// } |
||||||
|
], |
||||||
|
founder: [ |
||||||
|
{ |
||||||
|
value: "", |
||||||
|
label: "不限" |
||||||
|
}, |
||||||
|
{ |
||||||
|
value: 1, |
||||||
|
label: "超级管理员" |
||||||
|
}, |
||||||
|
{ |
||||||
|
value: 2, |
||||||
|
label: "管理员" |
||||||
|
}, |
||||||
|
{ |
||||||
|
value: 3, |
||||||
|
label: "老师" |
||||||
|
} |
||||||
|
], |
||||||
|
state: [ |
||||||
|
{ |
||||||
|
value: "", |
||||||
|
label: "不限" |
||||||
|
}, |
||||||
|
{ |
||||||
|
value: 0, |
||||||
|
label: "草稿箱" |
||||||
|
}, |
||||||
|
{ |
||||||
|
value: 1, |
||||||
|
label: "已发布" |
||||||
|
} |
||||||
|
], |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
multipleSelection: [], |
||||||
|
copyVisible: false, |
||||||
|
projectName: '', |
||||||
|
projectNameRepeat: false, |
||||||
|
currentRow: {}, |
||||||
|
projectDataAll: [], |
||||||
|
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
keyword: function(val) { |
||||||
|
clearTimeout(this.searchTimer) |
||||||
|
this.searchTimer = setTimeout(() => { |
||||||
|
this.getData() |
||||||
|
},500) |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData(){ |
||||||
|
let data = this.queryData |
||||||
|
data.pageNo = this.pageNo |
||||||
|
data.pageSize = this.pageSize |
||||||
|
data.projectName = this.encodeString(this.keyword) |
||||||
|
data.systemId = this.systemId |
||||||
|
this.$get(this.api.queryAllManagements,data).then(res => { |
||||||
|
this.projectData = res.pageInfo.list |
||||||
|
this.totals = res.pageInfo.total |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
transferStatus(status){ |
||||||
|
return status == 1 ? '已发布' : '草稿箱' |
||||||
|
}, |
||||||
|
handleCurrentChange(val){ |
||||||
|
this.pageNo = val |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
add(){ |
||||||
|
this.$store.commit("configData", { config_id : ''}); |
||||||
|
this.$router.push('/addproject'); |
||||||
|
}, |
||||||
|
edit(row){ |
||||||
|
this.$router.push(`/addproject?id=${row.projectId}`); |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val; |
||||||
|
}, |
||||||
|
delData(row) { |
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$post(this.api.removeProjectManagement,[row.projectId]).then(res => { |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}, |
||||||
|
delAllData() { |
||||||
|
if(this.multipleSelection.length != ''){ |
||||||
|
let newArr = this.multipleSelection |
||||||
|
let delList = newArr.map(item => { |
||||||
|
return item.projectId |
||||||
|
}) |
||||||
|
|
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$post(this.api.removeProjectManagement,delList).then(res => { |
||||||
|
this.$refs.table.clearSelection() |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}else{ |
||||||
|
this.$message.error('请先选择项目 ！'); |
||||||
|
} |
||||||
|
}, |
||||||
|
projectNameExistis(){ |
||||||
|
let data = { |
||||||
|
projectName: this.projectName |
||||||
|
} |
||||||
|
this.$get(this.api.isNameExistis,data).then(res => { |
||||||
|
if(res.status != 200){ |
||||||
|
this.projectNameRepeat = true |
||||||
|
this.$message.warning('该项目名称已存在') |
||||||
|
}else{ |
||||||
|
this.projectNameRepeat = false |
||||||
|
} |
||||||
|
}).catch(res => {}) |
||||||
|
}, |
||||||
|
copyData(row){ |
||||||
|
this.currentRow.management = { |
||||||
|
caseDescription: row.caseDescription, |
||||||
|
experimentSuggests: row.experimentSuggests, |
||||||
|
experimentalGoal: row.experimentalGoal, |
||||||
|
founder: row.founder, |
||||||
|
isstartexperimentSuggests: row.isstartexperimentSuggests, |
||||||
|
isstartexperimental: row.isstartexperimental, |
||||||
|
projectName: row.projectName, |
||||||
|
projectPermissions: row.projectPermissions, |
||||||
|
state: row.state, |
||||||
|
systemId: row.systemId, |
||||||
|
userId: row.userId, |
||||||
|
knowledgePoints: row.knowledgePoints, |
||||||
|
experimentIntroduction: row.experimentIntroduction |
||||||
|
} |
||||||
|
this.currentRow.founder = row.founder |
||||||
|
this.projectName = row.projectName |
||||||
|
this.projectNameRepeat = true |
||||||
|
this.copyVisible = true |
||||||
|
let data = { |
||||||
|
projectId: row.projectId |
||||||
|
} |
||||||
|
this.$get(this.api.getJudgmentPoints,data).then((res) => { |
||||||
|
this.currentRow.roleId = res.message.roleList.map(n => n.roleId) |
||||||
|
let scoreList = res.message.scoreIndexList |
||||||
|
let scores = [] |
||||||
|
for(let i in scoreList){ |
||||||
|
scores = scores.concat(scoreList[i]) |
||||||
|
} |
||||||
|
let point = res.message.judgmentPointsList |
||||||
|
point.map(n => { |
||||||
|
n.judgmentPointsId = n.id |
||||||
|
let same = scores.find(e => e.judgmentPointsId == n.id) |
||||||
|
if(same) n.score = same.score |
||||||
|
}) |
||||||
|
this.currentRow.pooints = point |
||||||
|
this.$message.warning('请修改项目名称') |
||||||
|
}) |
||||||
|
}, |
||||||
|
copySubmit(){ |
||||||
|
if(!this.projectName.length) return this.$message.warning('请填写项目名称') |
||||||
|
if(this.projectNameRepeat) return this.$message.warning('该项目名称已存在') |
||||||
|
let data = this.currentRow |
||||||
|
data.management.projectName = this.projectName |
||||||
|
data.founder = Number(this.roleId) |
||||||
|
data.management.founder = this.roleId |
||||||
|
data.management.userId = this.userId |
||||||
|
data.pooints.map(n => { |
||||||
|
n.userId = this.userId |
||||||
|
}) |
||||||
|
this.$post(this.api.addProjectManagement,data).then((res) => { |
||||||
|
this.$message.success('复制成功'); |
||||||
|
this.copyVisible = false |
||||||
|
this.getData() |
||||||
|
}) |
||||||
|
}, |
||||||
|
goback() { |
||||||
|
this.$router.back() |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.no-mb /deep/.el-form-item{ |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
@ -0,0 +1,124 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between"> |
||||||
|
<div class="per_title" v-preventReClick @click="goback()"> |
||||||
|
<i class="el-icon-arrow-left"></i> |
||||||
|
<span class="per_back">返回</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div class="flex-center"> |
||||||
|
<p class="hr_tag"></p> |
||||||
|
<span>实验报告管理</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-input placeholder="请输入报告名称" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table :data="listData" class="table" stripe header-align="center" row-key="id"> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{scope.$index + (pageNo - 1) * pageSize + 1}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="name" label="报告名称" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="project" label="实验项目" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="creater" label="创建人" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="time" label="创建时间" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" @click="entry(scope.row)">查看</el-button> |
||||||
|
<el-button v-if="roleId == 1" type="text" @click="edit(scope.row)">编辑</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'report', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
roleId: this.$store.state.userRoleId, |
||||||
|
keyword: '', |
||||||
|
listData: [ |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
name: '期权交易实验报告', |
||||||
|
project: '期权交易实验报告', |
||||||
|
creater: '系统内置', |
||||||
|
time: '2020-01-05 12:22:41' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
name: '套利与转向套利', |
||||||
|
project: '套利与转向套利', |
||||||
|
creater: '系统内置', |
||||||
|
time: '2020-06-12 14:21:22' |
||||||
|
}, |
||||||
|
], |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
totals: 2, |
||||||
|
searchTimer: null |
||||||
|
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
keyword: function(val) { |
||||||
|
clearTimeout(this.searchTimer) |
||||||
|
this.searchTimer = setTimeout(() => { |
||||||
|
this.getData() |
||||||
|
},500) |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
console.log(11,this.roleId) |
||||||
|
// this.getData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData() { |
||||||
|
// let data = { |
||||||
|
// countries: this.form.countries, |
||||||
|
// provinceId: this.form.provinces, |
||||||
|
// cityId: this.form.city, |
||||||
|
// searchContent: this.form.keyword, |
||||||
|
// pageNo: this.pageNo, |
||||||
|
// pageSize: this.pageSize |
||||||
|
// } |
||||||
|
// this.$get(this.api.queryCustomer,data).then(res => { |
||||||
|
// this.listData = res.message.rows |
||||||
|
// this.totals = res.message.total |
||||||
|
// }).catch(res => {}); |
||||||
|
}, |
||||||
|
edit(){ |
||||||
|
this.$router.push('reportconfig') |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.pageNo = val; |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
goback() { |
||||||
|
this.$router.back() |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
|
||||||
|
</style> |
||||||
|
|
||||||
@ -0,0 +1,461 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :span="24"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between"> |
||||||
|
<div class="per_title" v-preventReClick @click="goback()"> |
||||||
|
<i class="el-icon-arrow-left"></i> |
||||||
|
<span class="per_back">返回</span> |
||||||
|
<span class="per_school">实验报告配置</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-button type="primary" size="small" round v-preventReClick>确定</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div> |
||||||
|
<p class="mgb20">实验报告名称</p> |
||||||
|
<el-input |
||||||
|
placeholder="请输入实验报告名称" |
||||||
|
clearable |
||||||
|
maxlength="15" |
||||||
|
class="inline-input" |
||||||
|
></el-input> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-center mgb20"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>基本信息</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-form inline class="inline-form"> |
||||||
|
<div class="inner"> |
||||||
|
<el-form-item label="学生姓名"> |
||||||
|
<el-input placeholder="" size="small"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="学生学号"> |
||||||
|
<el-input placeholder="" size="small"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="学生班级"> |
||||||
|
<el-input placeholder="" size="small"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
<div class="inner"> |
||||||
|
<el-form-item label="实验名称"> |
||||||
|
<el-input placeholder="" size="small"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="实验学时"> |
||||||
|
<el-input placeholder="" size="small"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div class="flex-center"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>实验目的</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<span>得分：0/60</span> |
||||||
|
<el-button class="ml10" type="primary" size="small" v-preventReClick>编辑</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-input type="textarea" rows="5" disabled></el-input> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div class="flex-center"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>实验原理</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<span>得分：0/60</span> |
||||||
|
<el-button class="ml10" type="primary" size="small" v-preventReClick>编辑</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-input type="textarea" rows="5" disabled></el-input> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div class="flex-center"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>实验步骤</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<span>得分：0/60</span> |
||||||
|
<el-button class="ml10" type="primary" size="small" v-preventReClick>编辑</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-input type="textarea" rows="5" disabled></el-input> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div class="flex-center"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>实验结果分析</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<span>得分：0/60</span> |
||||||
|
<el-button class="ml10" type="primary" size="small" v-preventReClick>编辑</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="block"> |
||||||
|
<div class="flex-between mb10"> |
||||||
|
<p class="l-title">步骤1 判断平价关系确定交易方向</p> |
||||||
|
<el-switch></el-switch> |
||||||
|
</div> |
||||||
|
<div class="inner"> |
||||||
|
<el-checkbox>日期</el-checkbox> |
||||||
|
<el-checkbox>品种</el-checkbox> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div class="flex-between"> |
||||||
|
<div class="inline-flex"> |
||||||
|
<el-checkbox></el-checkbox> |
||||||
|
<span>设置结论选项</span> |
||||||
|
<div class="input-wrap"> |
||||||
|
<div class="input" v-for="(item,index) in conclusion1" :key="index"> |
||||||
|
<el-input size="mini" v-model="item.val"></el-input> |
||||||
|
<i class="plus el-icon-circle-plus-outline" @click="addColumn(1)"></i> |
||||||
|
<i class="sub el-icon-remove-outline" v-if="conclusion1.length > 1" @click="delColumn(1,index)"></i> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<p>(0/0分)</p> |
||||||
|
</div> |
||||||
|
<div class="flex-between"> |
||||||
|
<div class="inline-flex"> |
||||||
|
<el-checkbox></el-checkbox> |
||||||
|
<span>设置主观题</span> |
||||||
|
<el-input size="mini"></el-input> |
||||||
|
</div> |
||||||
|
<p>(0/0分)</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="block"> |
||||||
|
<div class="flex-between mb10"> |
||||||
|
<p class="l-title">步骤2 选择期货期权套利策略</p> |
||||||
|
<el-switch></el-switch> |
||||||
|
</div> |
||||||
|
<div class="inner"> |
||||||
|
<el-checkbox>策略</el-checkbox> |
||||||
|
<el-checkbox>套利组合</el-checkbox> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div class="flex-between"> |
||||||
|
<div class="inline-flex"> |
||||||
|
<el-checkbox></el-checkbox> |
||||||
|
<span>设置结论选项</span> |
||||||
|
<div class="input-wrap"> |
||||||
|
<div class="input" v-for="(item,index) in conclusion2" :key="index"> |
||||||
|
<el-input size="mini" v-model="item.val"></el-input> |
||||||
|
<i class="plus el-icon-circle-plus-outline" @click="addColumn(2)"></i> |
||||||
|
<i class="sub el-icon-remove-outline" v-if="conclusion2.length > 1" @click="delColumn(2,index)"></i> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<p>(0/0分)</p> |
||||||
|
</div> |
||||||
|
<div class="flex-between"> |
||||||
|
<div class="inline-flex"> |
||||||
|
<el-checkbox></el-checkbox> |
||||||
|
<span>设置主观题</span> |
||||||
|
<el-input size="mini"></el-input> |
||||||
|
</div> |
||||||
|
<p>(0/0分)</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="block"> |
||||||
|
<div class="flex-between mb10"> |
||||||
|
<p class="l-title">步骤3 判断平价关系确定交易方向</p> |
||||||
|
<el-switch></el-switch> |
||||||
|
</div> |
||||||
|
<div class="inner"> |
||||||
|
<el-checkbox>策略</el-checkbox> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div class="flex-between"> |
||||||
|
<div class="inline-flex"> |
||||||
|
<el-checkbox></el-checkbox> |
||||||
|
<span>设置结论选项</span> |
||||||
|
<div class="input-wrap"> |
||||||
|
<div class="input" v-for="(item,index) in conclusion3" :key="index"> |
||||||
|
<el-input size="mini" v-model="item.val"></el-input> |
||||||
|
<i class="plus el-icon-circle-plus-outline" @click="addColumn(3)"></i> |
||||||
|
<i class="sub el-icon-remove-outline" v-if="conclusion3.length > 1" @click="delColumn(3,index)"></i> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<p>(0/0分)</p> |
||||||
|
</div> |
||||||
|
<div class="flex-between"> |
||||||
|
<div class="inline-flex"> |
||||||
|
<el-checkbox></el-checkbox> |
||||||
|
<span>设置主观题</span> |
||||||
|
<el-input size="mini"></el-input> |
||||||
|
</div> |
||||||
|
<p>(0/0分)</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="block"> |
||||||
|
<div class="flex-between mb10"> |
||||||
|
<p class="l-title">步骤4 选择期权期货套利策略</p> |
||||||
|
<el-switch></el-switch> |
||||||
|
</div> |
||||||
|
<div class="inner"> |
||||||
|
<el-checkbox>策略</el-checkbox> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div class="flex-between"> |
||||||
|
<div class="inline-flex"> |
||||||
|
<el-checkbox></el-checkbox> |
||||||
|
<span>设置结论选项</span> |
||||||
|
<div class="input-wrap"> |
||||||
|
<div class="input" v-for="(item,index) in conclusion4" :key="index"> |
||||||
|
<el-input size="mini" v-model="item.val"></el-input> |
||||||
|
<i class="plus el-icon-circle-plus-outline" @click="addColumn(4)"></i> |
||||||
|
<i class="sub el-icon-remove-outline" v-if="conclusion4.length > 1" @click="delColumn(4,index)"></i> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<p>(0/0分)</p> |
||||||
|
</div> |
||||||
|
<div class="flex-between"> |
||||||
|
<div class="inline-flex"> |
||||||
|
<el-checkbox></el-checkbox> |
||||||
|
<span>设置主观题</span> |
||||||
|
<el-input size="mini"></el-input> |
||||||
|
</div> |
||||||
|
<p>(0/0分)</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div class="flex-center"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>实验结论</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<span>得分：0/60</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-input type="textarea" rows="5" placeholder="请填写实验结论"></el-input> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div class="flex-center"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>总结与心得体会</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<span>得分：0/60</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-input type="textarea" rows="5" placeholder="请填写总结与心得体会"></el-input> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data (){ |
||||||
|
return { |
||||||
|
form: { |
||||||
|
systemName: '', |
||||||
|
systemType: '', |
||||||
|
systemAttribution: '' |
||||||
|
}, |
||||||
|
rules: { |
||||||
|
systemName:[ |
||||||
|
{ required: true, message: '请输入系统名称', trigger: 'blur' } |
||||||
|
], |
||||||
|
systemType:[ |
||||||
|
{ required: true, message: '请选择系统类型', trigger: 'change' } |
||||||
|
], |
||||||
|
systemAttribution:[ |
||||||
|
{ required: true, message: '请选择系统归属', trigger: 'change' } |
||||||
|
] |
||||||
|
}, |
||||||
|
conclusion1: [{val: ''}], |
||||||
|
conclusion2: [{val: ''}], |
||||||
|
conclusion3: [{val: ''}], |
||||||
|
conclusion4: [{val: ''}], |
||||||
|
conclusion5: [{val: ''}], |
||||||
|
conclusion6: [{val: ''}], |
||||||
|
conclusion7: [{val: ''}], |
||||||
|
conclusion8: [{val: ''}], |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
if(this.configId){ |
||||||
|
this.getData() |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData(){ |
||||||
|
let data = { |
||||||
|
systemId: this.configId |
||||||
|
} |
||||||
|
this.$get(this.api.queryServiceConfigDetails,data).then((res) => { |
||||||
|
this.form = { |
||||||
|
systemName: res.message[0].systemName, |
||||||
|
systemType: res.message[0].systemType, |
||||||
|
systemAttribution: res.message[0].systemAttribution, |
||||||
|
} |
||||||
|
}).catch((res) => { |
||||||
|
}) |
||||||
|
}, |
||||||
|
saveAdd(){ |
||||||
|
let data = { |
||||||
|
systemId: this.configId, |
||||||
|
systemName: this.form.systemName, |
||||||
|
systemType: this.form.systemType, |
||||||
|
systemAttribution: this.form.systemAttribution, |
||||||
|
} |
||||||
|
if(this.configId){ |
||||||
|
this.$post(this.api.updateServiceConfig,data).then((res) => { |
||||||
|
this.$message.success('编辑成功'); |
||||||
|
this.$router.back() |
||||||
|
}).catch((res) => { |
||||||
|
}) |
||||||
|
}else{ |
||||||
|
this.$post(this.api.updateServiceConfig,data).then((res) => { |
||||||
|
this.$message.success('添加成功'); |
||||||
|
this.$router.back() |
||||||
|
}).catch((res) => { |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
goback() { |
||||||
|
this.$confirm('确定返回？未更新的信息将不会保存。', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$router.back() |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}, |
||||||
|
addColumn(index){ |
||||||
|
if(this[`conclusion${index}`].length > 4){ |
||||||
|
this.$message.warning('最多添加5个'); |
||||||
|
}else{ |
||||||
|
this[`conclusion${index}`].push({val: ''}) |
||||||
|
} |
||||||
|
}, |
||||||
|
delColumn(index,i){ |
||||||
|
this[`conclusion${index}`].splice(i,1) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.ml10{ |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
.mb10{ |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
.inline-input{ |
||||||
|
width: 200px; |
||||||
|
} |
||||||
|
.inline-form{ |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
|
||||||
|
.inner{ |
||||||
|
display: inline-flex; |
||||||
|
|
||||||
|
&:first-child{ |
||||||
|
margin-bottom: 15px; |
||||||
|
} |
||||||
|
.el-form-item{ |
||||||
|
width: 33.33%; |
||||||
|
margin: 0 20px; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.flex-center{ |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
.flex-between{ |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
.block{ |
||||||
|
padding: 10px; |
||||||
|
margin-bottom: 15px; |
||||||
|
background-color: #f5f5f5; |
||||||
|
|
||||||
|
.l-title{ |
||||||
|
font-size: 14px; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
.inner{ |
||||||
|
min-height: 100px; |
||||||
|
padding: 10px; |
||||||
|
margin-bottom: 10px; |
||||||
|
border-radius: 8px; |
||||||
|
border: 1px solid #ccc; |
||||||
|
background-color: #fff; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
.inline-flex{ |
||||||
|
display: inline-flex; |
||||||
|
margin-bottom: 10px; |
||||||
|
font-size: 12px; |
||||||
|
|
||||||
|
.input-wrap{ |
||||||
|
.input{ |
||||||
|
margin-bottom: 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
span{ |
||||||
|
margin: 0 10px 0 5px; |
||||||
|
} |
||||||
|
.el-input{ |
||||||
|
width: 400px; |
||||||
|
} |
||||||
|
i{ |
||||||
|
font-size: 16px; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
&:hover{ |
||||||
|
opacity: .8; |
||||||
|
} |
||||||
|
} |
||||||
|
.plus{ |
||||||
|
margin-left: 10px; |
||||||
|
color: #63e600; |
||||||
|
} |
||||||
|
.sub{ |
||||||
|
margin-left: 5px; |
||||||
|
color: #636363; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,322 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div> |
||||||
|
<div class="flex-center mgb20"> |
||||||
|
<p class="hr_tag"></p> |
||||||
|
<span>筛选</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div style="display: flex;justify-content: flex-end;"> |
||||||
|
<div> |
||||||
|
<el-input placeholder="请输入角色名称" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div class="flex-center"> |
||||||
|
<p class="hr_tag"></p> |
||||||
|
<span>角色列表</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-button type="primary" size="small" round @click="addRole" v-auth="'system:角色权限:新增角色'">新增角色</el-button> |
||||||
|
<el-button type="primary" size="small" round @click="delAllSelection" v-auth="'system:角色权限:批量删除'">批量删除</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table :data="roleData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" :row-key="getRowKeys"> |
||||||
|
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="name" label="角色名称" align="center" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="角色描述" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-input placeholder="该角色用于管理全部功能权限" v-model="scope.row.description" disabled></el-input> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" @click="showRole(scope.row)" v-auth="'system:角色权限:查看'">查看</el-button> |
||||||
|
<el-button type="text" @click="editRole(scope.row)" v-auth="'system:角色权限:编辑'">编辑</el-button> |
||||||
|
<el-button type="text" @click="handleDelete(scope.row)" v-auth="'system:角色权限:删除'">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background @current-change="currentChange" :current-page="pageNo" layout="total, prev, pager, next" :total="totals"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-dialog :title="isDetail ? '查看角色' : (isAdd ? '新增角色' : '编辑角色')" :visible.sync="roleVisible" |
||||||
|
width="30%" @close="closeRole" class="dialog" :close-on-click-modal="false"> |
||||||
|
<el-form ref="form" label-width="100px" :disabled="isDetail"> |
||||||
|
<el-form-item label="角色名称"> |
||||||
|
<el-input v-model="form.name " ref="account" placeholder="请输入角色名称"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="角色描述"> |
||||||
|
<el-input v-model="form.description " placeholder="请输入角色描述" type="textarea" rows="5"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="role" label="角色权限"> |
||||||
|
<div class="per-wrap"> |
||||||
|
<el-tree |
||||||
|
ref="per" |
||||||
|
:data="permissions" |
||||||
|
show-checkbox |
||||||
|
node-key="id" |
||||||
|
:default-expanded-keys="checkedIds" |
||||||
|
:default-checked-keys="checkedIds" |
||||||
|
:props="defaultProps"> |
||||||
|
</el-tree> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<span slot="footer" class="dialog-footer" v-if="!isDetail"> |
||||||
|
<el-button size="small" @click="roleVisible = false">取 消</el-button> |
||||||
|
<el-button size="small" type="primary" @click="saveData">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'dashboard', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
keyword: '', |
||||||
|
searchTimer: null, |
||||||
|
isDetail: false, |
||||||
|
form: { |
||||||
|
roleId: '', |
||||||
|
name: '', |
||||||
|
description: '', |
||||||
|
}, |
||||||
|
roleData:[], |
||||||
|
data: [{ |
||||||
|
id: 1, |
||||||
|
label: '一级 1', |
||||||
|
children: [{ |
||||||
|
id: 4, |
||||||
|
label: '二级 1-1', |
||||||
|
children: [{ |
||||||
|
id: 9, |
||||||
|
label: '三级 1-1-1' |
||||||
|
}, { |
||||||
|
id: 10, |
||||||
|
label: '三级 1-1-2' |
||||||
|
}] |
||||||
|
}] |
||||||
|
}, { |
||||||
|
id: 2, |
||||||
|
label: '一级 2', |
||||||
|
children: [{ |
||||||
|
id: 5, |
||||||
|
label: '二级 2-1' |
||||||
|
}, { |
||||||
|
id: 6, |
||||||
|
label: '二级 2-2' |
||||||
|
}] |
||||||
|
}, { |
||||||
|
id: 3, |
||||||
|
label: '一级 3', |
||||||
|
children: [{ |
||||||
|
id: 7, |
||||||
|
label: '二级 3-1' |
||||||
|
}, { |
||||||
|
id: 8, |
||||||
|
label: '二级 3-2' |
||||||
|
}] |
||||||
|
}], |
||||||
|
defaultProps: { |
||||||
|
children: 'children', |
||||||
|
label: 'name' |
||||||
|
}, |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
totals: 0, |
||||||
|
multipleSelection: [], |
||||||
|
isAdd: true, |
||||||
|
roleVisible: false, |
||||||
|
permissions: [], |
||||||
|
checkedIds: [] |
||||||
|
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
keyword: function(val) { |
||||||
|
clearTimeout(this.searchTimer) |
||||||
|
this.searchTimer = setTimeout(() => { |
||||||
|
this.getData() |
||||||
|
},500) |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData() { |
||||||
|
let data = { |
||||||
|
name: this.encodeString(this.keyword), |
||||||
|
page: this.pageNo, |
||||||
|
size: this.pageSize |
||||||
|
} |
||||||
|
this.$get(this.api.rolePermissionList,data).then(res => { |
||||||
|
this.roleData = res.data.list |
||||||
|
this.totals = res.data.totalCount |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
currentChange(val) { |
||||||
|
this.pageNo = val; |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
handleDelete(row) { |
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
let data = { |
||||||
|
roleIds: [row.roleId] |
||||||
|
} |
||||||
|
this.$post(`${this.api.delRolePermission}`,data).then(res => { |
||||||
|
this.$message.success('删除成功') |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}) |
||||||
|
}) |
||||||
|
.catch(() => {}) |
||||||
|
}, |
||||||
|
getRowKeys(row) { |
||||||
|
return row.roleId; |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val; |
||||||
|
}, |
||||||
|
delAllSelection() { |
||||||
|
if(this.multipleSelection.length){ |
||||||
|
let newArr = this.multipleSelection |
||||||
|
let delList = newArr.map(item => { |
||||||
|
return item.roleId |
||||||
|
}) |
||||||
|
|
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
let data = { |
||||||
|
roleIds: delList |
||||||
|
} |
||||||
|
this.$post(`${this.api.delRolePermission}`,data).then(res => { |
||||||
|
this.$refs.table.clearSelection() |
||||||
|
this.$message.success('删除成功') |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}) |
||||||
|
}) |
||||||
|
.catch(() => {}) |
||||||
|
}else{ |
||||||
|
this.$message.error('请先选择数据！') |
||||||
|
} |
||||||
|
}, |
||||||
|
closeRole(){ |
||||||
|
this.isDetail = false |
||||||
|
this.form = { |
||||||
|
roleId: '', |
||||||
|
name: '', |
||||||
|
description: '' |
||||||
|
} |
||||||
|
this.checkedIds = [] |
||||||
|
this.permissions = [] |
||||||
|
}, |
||||||
|
getPer(row){ |
||||||
|
if(!this.permissions.length){ |
||||||
|
this.$get(this.api.roleTree).then(res => { |
||||||
|
this.permissions = res.data |
||||||
|
if(row){ |
||||||
|
this.getDetail(row) |
||||||
|
} |
||||||
|
}).catch(res => {}) |
||||||
|
} |
||||||
|
}, |
||||||
|
addRole(){ |
||||||
|
this.isAdd = true |
||||||
|
this.getPer() |
||||||
|
this.checkedIds = [] |
||||||
|
this.permissions.length && this.$refs.per.setCheckedNodes([]) |
||||||
|
this.roleVisible = true |
||||||
|
}, |
||||||
|
handleRolePer(data,permissions){ |
||||||
|
let result = data |
||||||
|
console.log(1,result,permissions) |
||||||
|
if(permissions.length){ |
||||||
|
permissions.map(e => { |
||||||
|
if(result.includes(e.id) && e.children){ |
||||||
|
e.children.every(n => result.includes(n)) || result.splice(result.indexOf(e.id),1) |
||||||
|
} |
||||||
|
e.children && e.children.length && this.handleRolePer(data,e.children) |
||||||
|
}) |
||||||
|
} |
||||||
|
return result |
||||||
|
}, |
||||||
|
async getDetail(row){ |
||||||
|
let res = await this.$get(`${this.api.queryPermissionArrById}?roleId=${row.roleId}`) |
||||||
|
if(res.success){ |
||||||
|
this.form = res.data |
||||||
|
this.form.roleId = row.roleId |
||||||
|
this.checkedIds = this.handleRolePer(res.data.permissionIds,this.permissions) |
||||||
|
this.$refs.per.setCheckedNodes(this.checkedIds) |
||||||
|
} |
||||||
|
}, |
||||||
|
showRole(row){ |
||||||
|
this.isDetail = true |
||||||
|
this.isAdd = false |
||||||
|
this.getPer(row) |
||||||
|
this.roleVisible = true |
||||||
|
}, |
||||||
|
editRole(row){ |
||||||
|
this.isAdd = false |
||||||
|
this.getPer(row) |
||||||
|
this.roleVisible = true |
||||||
|
}, |
||||||
|
async saveData() { |
||||||
|
if(!this.form.name) return this.$message.warning('请填写角色名称') |
||||||
|
if(!this.form.description) return this.$message.warning('请填写角色描述') |
||||||
|
if(!this.$refs.per.getCheckedKeys().length) return this.$message.warning('请选择角色权限') |
||||||
|
let permissionIds = [...this.$refs.per.getHalfCheckedKeys(),...this.$refs.per.getCheckedKeys()] |
||||||
|
let data = { |
||||||
|
roleId: this.form.roleId, |
||||||
|
name: this.form.name, |
||||||
|
description: this.form.description, |
||||||
|
permissionIds |
||||||
|
} |
||||||
|
if(this.form.roleId){ |
||||||
|
this.$post(this.api.updateRolePermission,data).then(res => { |
||||||
|
this.$message.success('修改成功') |
||||||
|
this.getData() |
||||||
|
this.roleVisible = false |
||||||
|
}).catch(res => {}) |
||||||
|
}else{ |
||||||
|
this.$post(this.api.saveRolePermission,data).then(res => { |
||||||
|
this.$message.success('新增成功') |
||||||
|
this.getData() |
||||||
|
this.roleVisible = false |
||||||
|
}).catch(res => {}) |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.mag{ |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
.no-mb /deep/.el-form-item{ |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
/deep/.el-row{ |
||||||
|
padding: 0 !important; |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,561 @@ |
|||||||
|
<template> |
||||||
|
<div class="box"> |
||||||
|
<el-row :gutter="24"> |
||||||
|
<el-col :span="24"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between"> |
||||||
|
<div class="per_title" v-preventReClick @click="goback()"> |
||||||
|
<i class="el-icon-arrow-left"></i> |
||||||
|
<span class="per_back">返回</span> |
||||||
|
<span class="per_school">查看报告</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-button type="primary" size="small" round v-preventReClick @click="saveAdd('form')">保存</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<div id="pdfDom"> |
||||||
|
<h6 style="text-align: center;font-size: 20px">标准实验报告</h6> |
||||||
|
<div class="flex-center mgb20 user_header"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span style="font-size: 18px">基本信息</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div> |
||||||
|
<el-table :data="infoData" class="info-table" style="margin-bottom: 40px" header-align="center"> |
||||||
|
<el-table-column prop="userName" label="学生姓名" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="workNumber" label="学生学号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="className" label="学生班级" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="teacherName" label="指导老师" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="period" label="实验学时" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="laboratory" label="实验室名称" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="startTime" label="实验时间" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="score" label="实验成绩" align="center"> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="mgb20"> |
||||||
|
<div class="meta-title-wrap"> |
||||||
|
<p class="meta-title"><i class="el-icon-discount"></i> 实验项目名称</p> |
||||||
|
</div> |
||||||
|
<el-input v-model="form.projectName" type="textarea" :disabled="true" rows="5"></el-input> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="mgb20"> |
||||||
|
<div class="meta-title-wrap"> |
||||||
|
<p class="meta-title"><i class="el-icon-discount"></i> 实验目的</p> |
||||||
|
</div> |
||||||
|
<el-input v-model="form.purpose" type="textarea" :disabled="true" rows="5"></el-input> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="mgb20"> |
||||||
|
<div class="meta-title-wrap"> |
||||||
|
<p class="meta-title"><i class="el-icon-discount"></i> 实验原理</p> |
||||||
|
</div> |
||||||
|
<el-input v-model="form.principle" type="textarea" :disabled="true" rows="5"></el-input> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="mgb20"> |
||||||
|
<div class="meta-title-wrap"> |
||||||
|
<p class="meta-title"><i class="el-icon-discount"></i> 实验内容</p> |
||||||
|
</div> |
||||||
|
<el-input v-model="form.content" type="textarea" :disabled="true" rows="5"></el-input> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="mgb20"> |
||||||
|
<div class="meta-title-wrap"> |
||||||
|
<p class="meta-title"><i class="el-icon-discount"></i> 实验器材（设备、元器件）</p> |
||||||
|
</div> |
||||||
|
<el-input v-model="form.equipment" type="textarea" :disabled="true" rows="5"></el-input> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="mgb20"> |
||||||
|
<div class="meta-title-wrap"> |
||||||
|
<p class="meta-title"><i class="el-icon-discount"></i> 实验步骤</p> |
||||||
|
</div> |
||||||
|
<el-input v-model="form.step" type="textarea" :disabled="true" rows="5"></el-input> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="mgb20"> |
||||||
|
<div class="meta-title-wrap"> |
||||||
|
<p class="meta-title">实验数据</p> |
||||||
|
<!-- <span>得分：50/60</span> --> |
||||||
|
</div> |
||||||
|
<el-table :data="sjData" class="table" stripe header-align="center"> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{scope.$index + 1}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="judgmentPointsName" label="考核点" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="userAnswers" label="学生答案" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<pre v-html="scope.row.userAnswers"></pre> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="referenceAnswer" label="参考答案" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="score" label="得分" width="100" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-input v-if="edit" type="number" v-model="scope.row.score"></el-input> |
||||||
|
<template v-else>{{scope.row.score}}</template> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center" v-if="edit"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" @click="save(scope.row)">保存</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="mgb20"> |
||||||
|
<div class="meta-title-wrap"> |
||||||
|
<p class="meta-title"><i class="el-icon-discount"></i> 实验数据及结果分析</p> |
||||||
|
</div> |
||||||
|
<div class="data-wrap"> |
||||||
|
<el-table :data="goodsData" :span-method="objectSpanMethod" stripe header-align="center" style="flex: 1;margin-right: 10px"> |
||||||
|
<el-table-column prop="name" label="现货" align="center"></el-table-column> |
||||||
|
<el-table-column prop="num" label="数量" align="center"></el-table-column> |
||||||
|
<el-table-column prop="time" label="时间" align="center"></el-table-column> |
||||||
|
<el-table-column prop="price" label="价格" align="center"></el-table-column> |
||||||
|
<el-table-column prop="marketValue" label="现货市值" align="center"></el-table-column> |
||||||
|
<el-table-column prop="proftAndLoss" label="累计盈亏" align="center"></el-table-column> |
||||||
|
</el-table> |
||||||
|
<el-table :data="futuresData" :span-method="objectSpanMethod1" stripe header-align="center" style="flex: 1;margin-right: 10px"> |
||||||
|
<el-table-column prop="name" label="期权名称" align="center"></el-table-column> |
||||||
|
<el-table-column prop="dir" label="交易方向" align="center"></el-table-column> |
||||||
|
<el-table-column prop="num" label="数量" align="center"></el-table-column> |
||||||
|
<el-table-column prop="time" label="时间" align="center"></el-table-column> |
||||||
|
<el-table-column prop="price" label="价格" align="center"></el-table-column> |
||||||
|
<el-table-column prop="marketValue" label="期权市值" align="center"></el-table-column> |
||||||
|
<el-table-column prop="proftAndLoss" label="累计盈亏" align="center"></el-table-column> |
||||||
|
</el-table> |
||||||
|
<div style="width: 150px;"> |
||||||
|
<el-table :data="futuresLoss" stripe header-align="center"> |
||||||
|
<el-table-column prop="futuresLoss" label="策略总盈亏" align="center"></el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-input style="margin-top: 20px" v-model="form.analysis" type="textarea" :disabled="true" rows="5"></el-input> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="mgb20"> |
||||||
|
<div class="meta-title-wrap"> |
||||||
|
<p class="meta-title"><i class="el-icon-discount"></i> 实验结论</p> |
||||||
|
</div> |
||||||
|
<el-input type="textarea" v-model="form.conclusion" rows="5" disabled></el-input> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="mgb20"> |
||||||
|
<div class="meta-title-wrap"> |
||||||
|
<p class="meta-title"><i class="el-icon-discount"></i> 总结及心得体会</p> |
||||||
|
</div> |
||||||
|
<el-input type="textarea" v-model="form.summarize" rows="5" disabled></el-input> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="mgb20"> |
||||||
|
<div class="meta-title-wrap"> |
||||||
|
<p class="meta-title"><i class="el-icon-discount"></i> 对本实验过程及方法、手段的改进建议</p> |
||||||
|
</div> |
||||||
|
<el-input type="textarea" rows="5" v-model="form.improvement" disabled></el-input> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="mgb20"> |
||||||
|
<div class="meta-title-wrap"> |
||||||
|
<p class="meta-title"><i class="el-icon-discount"></i> 老师评语</p> |
||||||
|
</div> |
||||||
|
<el-input type="textarea" rows="5" v-model="form.comment" disabled></el-input> |
||||||
|
</div> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<p class="mgb20">教师签名</p> |
||||||
|
<template v-if="edit"> |
||||||
|
<div class="mgb20"> |
||||||
|
<el-radio v-model="autograph" label="1">不使用</el-radio> |
||||||
|
<el-radio v-model="autograph" label="2">已有签名</el-radio> |
||||||
|
<el-radio v-model="autograph" label="3">重新上传</el-radio> |
||||||
|
</div> |
||||||
|
<el-row> |
||||||
|
<el-col :span="6"> |
||||||
|
<template v-if="autograph == 2"> |
||||||
|
<el-select v-model="signId" placeholder="请选择签名" size="mini" @change="signChange"> |
||||||
|
<el-option |
||||||
|
v-for="item in signList" |
||||||
|
:key="item.id" |
||||||
|
:label="item.signatureName" |
||||||
|
:value="item.id" |
||||||
|
> |
||||||
|
</el-option> |
||||||
|
</el-select> |
||||||
|
<img class="sign-img" :src="signSrc" alt="" style="max-width: 400px;margin: 10px 0;"> |
||||||
|
<div> |
||||||
|
<el-button size="mini" type="danger" @click="delSign">删除</el-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<template v-else-if="autograph == 3"> |
||||||
|
<el-upload |
||||||
|
:data="{userId: userId,reportId: id}" |
||||||
|
:limit="1" |
||||||
|
:action="api.uploadSignature" |
||||||
|
list-type="picture-card" |
||||||
|
:on-remove="handleRemove" |
||||||
|
:on-exceed="handleExceed" |
||||||
|
:on-success="uploadSuccess"> |
||||||
|
<i class="el-icon-plus"></i> |
||||||
|
</el-upload> |
||||||
|
</template> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</template> |
||||||
|
<template v-else> |
||||||
|
<img :src="signSrc" alt="" style="max-width: 400px;"> |
||||||
|
</template> |
||||||
|
</el-card> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data (){ |
||||||
|
return { |
||||||
|
id: this.$route.query.id, |
||||||
|
title: '实验报告', |
||||||
|
studentId: this.$route.query.studentId, |
||||||
|
userName: this.$route.query.userName, |
||||||
|
class: this.$route.query.class, |
||||||
|
edit: this.$route.query.edit, |
||||||
|
userId: this.$store.state.userLoginId, |
||||||
|
form: { |
||||||
|
analysis: '', |
||||||
|
conclusion: '', |
||||||
|
content: '', |
||||||
|
equipment: '', |
||||||
|
data: '', |
||||||
|
purpose: '', |
||||||
|
experimentId: '', |
||||||
|
experimentalClassName: '', |
||||||
|
improvement: '', |
||||||
|
laboratory: '', |
||||||
|
period: '', |
||||||
|
principle: '', |
||||||
|
projectName: '', |
||||||
|
score: 0, |
||||||
|
step: '', |
||||||
|
submitTime: '', |
||||||
|
summarize: '', |
||||||
|
teacherName: '', |
||||||
|
userId: this.userId, |
||||||
|
userName: this.userName, |
||||||
|
workNumber: '', |
||||||
|
analysis: '', |
||||||
|
comment: '' |
||||||
|
}, |
||||||
|
signId: '', |
||||||
|
signSrc: '', |
||||||
|
autograph: '1', |
||||||
|
signList: [], |
||||||
|
sjData: [], |
||||||
|
infoData: [], |
||||||
|
expData: [], |
||||||
|
goodsData: [], |
||||||
|
futuresData: [], |
||||||
|
futuresLoss: [], |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
this.getData() |
||||||
|
this.getSgin() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData(){ |
||||||
|
let data = { |
||||||
|
reportId: this.id, |
||||||
|
userId: this.studentId, |
||||||
|
} |
||||||
|
this.$get(this.api.getReport,data).then(res => { |
||||||
|
let report = res.data.experimentalReportEntity |
||||||
|
let steps = [] |
||||||
|
for(let i in report){ |
||||||
|
if(i.includes('steps') && report[i]) steps.push(JSON.parse(report[i])) |
||||||
|
} |
||||||
|
this.form = report |
||||||
|
if(report.steps9){ |
||||||
|
let steps9 = JSON.parse(report.steps9) |
||||||
|
this.goodsData = steps9.goodsData ? steps9.goodsData: [] |
||||||
|
this.futuresData = steps9.futuresData ? steps9.futuresData: [] |
||||||
|
this.futuresLoss = steps9.futuresLoss ? steps9.futuresLoss: [] |
||||||
|
} |
||||||
|
|
||||||
|
let score = res.data.score |
||||||
|
let answerList = [] |
||||||
|
for(let i in res.data.userAnswersList){ |
||||||
|
answerList = answerList.concat(res.data.userAnswersList[i]) |
||||||
|
} |
||||||
|
let sjData = [] |
||||||
|
answerList.map(n => { |
||||||
|
if(n.type == 1){ |
||||||
|
this.$post(this.api.queryItem,n.levelThree) |
||||||
|
.then((res) => { |
||||||
|
n.levelFour = res.subject.find(e => e.id == n.levelFour).itemDescription |
||||||
|
console.log(11,n) |
||||||
|
}).catch((err) => {}) |
||||||
|
} |
||||||
|
}) |
||||||
|
setTimeout(() => { |
||||||
|
score.map(n => { |
||||||
|
let item = answerList.find(e => e.tradingJudgmentPointsId == n.tradingJudgmentPointsId) |
||||||
|
sjData.push({ |
||||||
|
judgmentPointsName: item.judgmentPointsName, |
||||||
|
userAnswers: n.userAnswers, |
||||||
|
referenceAnswer: item.levelFour, |
||||||
|
score: n.score, |
||||||
|
id: n.id |
||||||
|
}) |
||||||
|
}) |
||||||
|
},500) |
||||||
|
|
||||||
|
this.sjData = sjData |
||||||
|
this.infoData = [{ |
||||||
|
workNumber: report.workNumber, |
||||||
|
className: report.className, |
||||||
|
teacherName: report.teacherName, |
||||||
|
period: report.period, |
||||||
|
laboratory: report.laboratory, |
||||||
|
startTime: report.creationTime, |
||||||
|
score: report.score, |
||||||
|
userName: this.userName |
||||||
|
}] |
||||||
|
}).catch(res => {}) |
||||||
|
}, |
||||||
|
//合并行 |
||||||
|
objectSpanMethod({ row, column, rowIndex, columnIndex }) { |
||||||
|
if (columnIndex === 0 || columnIndex === 1 || columnIndex === 5) { |
||||||
|
if (rowIndex % 2 === 0) { |
||||||
|
return { |
||||||
|
rowspan: 2, |
||||||
|
colspan: 1 |
||||||
|
}; |
||||||
|
} else { |
||||||
|
return { |
||||||
|
rowspan: 0, |
||||||
|
colspan: 0 |
||||||
|
}; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
//合并行 |
||||||
|
objectSpanMethod1({ row, column, rowIndex, columnIndex }) { |
||||||
|
if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 6) { |
||||||
|
if (rowIndex % 2 === 0) { |
||||||
|
return { |
||||||
|
rowspan: 2, |
||||||
|
colspan: 1 |
||||||
|
}; |
||||||
|
} else { |
||||||
|
return { |
||||||
|
rowspan: 0, |
||||||
|
colspan: 0 |
||||||
|
}; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
getSgin(){ |
||||||
|
if(this.edit){ |
||||||
|
let data = { |
||||||
|
reportId: this.id |
||||||
|
} |
||||||
|
this.$get(this.api.querySignature,data).then(res => { |
||||||
|
this.signList = res.data |
||||||
|
if(res.data.length){ |
||||||
|
this.signId = res.data[0].id |
||||||
|
this.signSrc = this.signList.find(n => n.id == this.signId).signatureUrl |
||||||
|
} |
||||||
|
}).catch(res => {}) |
||||||
|
}else{ |
||||||
|
let data = { |
||||||
|
reportId: this.id |
||||||
|
} |
||||||
|
this.$get(this.api.reportSignature,data).then(res => { |
||||||
|
this.signSrc = res.data.signatureUrl |
||||||
|
}).catch(res => {}) |
||||||
|
} |
||||||
|
}, |
||||||
|
signChange(){ |
||||||
|
this.signSrc = this.signList.find(n => n.id == this.signId).signatureUrl |
||||||
|
this.$post(`${this.api.selectSignature}?reportId=${this.id}&id=${this.signId}`).then(res => { |
||||||
|
|
||||||
|
}).catch(res => {}) |
||||||
|
}, |
||||||
|
delSign(){ |
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}).then(() => { |
||||||
|
let data = { |
||||||
|
id: this.signId |
||||||
|
} |
||||||
|
this.$post(this.api.daleteSignature,data).then(res => { |
||||||
|
this.$message.success('删除成功') |
||||||
|
this.getSgin() |
||||||
|
}).catch(res => {}) |
||||||
|
}).catch(() => {}) |
||||||
|
}, |
||||||
|
handleRemove(file, fileList) { |
||||||
|
console.log(file, fileList); |
||||||
|
}, |
||||||
|
save(row){ |
||||||
|
let data = { |
||||||
|
id: row.id, |
||||||
|
reportId: this.id, |
||||||
|
score: row.score |
||||||
|
} |
||||||
|
this.$post(this.api.editScore,data).then((res) => { |
||||||
|
if(res.status == 10000){ |
||||||
|
this.$message.error(res.message) |
||||||
|
}else{ |
||||||
|
this.$message.success('修改成功') |
||||||
|
this.getData() |
||||||
|
} |
||||||
|
}).catch((err) => {}) |
||||||
|
}, |
||||||
|
handleExceed(files, fileList) { |
||||||
|
this.$message.warning( |
||||||
|
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` |
||||||
|
); |
||||||
|
}, |
||||||
|
uploadSuccess(res,file){ |
||||||
|
if(res.status == 200){ |
||||||
|
this.$message.success('上传成功') |
||||||
|
this.getSgin() |
||||||
|
}else{ |
||||||
|
this.$message.error(res.errmessage) |
||||||
|
} |
||||||
|
}, |
||||||
|
saveAdd(){ |
||||||
|
let data = { |
||||||
|
comment: this.configId, |
||||||
|
id: this.id, |
||||||
|
level: this.form.systemType, |
||||||
|
} |
||||||
|
this.$post(this.api.updateComment,data).then((res) => { |
||||||
|
this.$router.back() |
||||||
|
}).catch((res) => {}) |
||||||
|
}, |
||||||
|
goback(){ |
||||||
|
this.$router.go(-1) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.box{ |
||||||
|
padding: 0 50px; |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
/deep/.el-textarea.is-disabled .el-textarea__inner{ |
||||||
|
background-color: #ebfafd; |
||||||
|
} |
||||||
|
#pdfDom{ |
||||||
|
padding: 50px; |
||||||
|
/deep/.info-table{ |
||||||
|
border: 0; |
||||||
|
th{ |
||||||
|
background-color: #fff !important; |
||||||
|
.cell{ |
||||||
|
color: #444; |
||||||
|
} |
||||||
|
} |
||||||
|
tr{ |
||||||
|
border: 0; |
||||||
|
} |
||||||
|
tr:hover,tr:hover>td{ |
||||||
|
background-color: #c6f2f8 !important; |
||||||
|
} |
||||||
|
td{ |
||||||
|
border: { |
||||||
|
left: 4px solid #fff; |
||||||
|
right: 4px solid #fff; |
||||||
|
} |
||||||
|
&:first-child{ |
||||||
|
border-left: 0; |
||||||
|
} |
||||||
|
&:last-child{ |
||||||
|
border-right: 0; |
||||||
|
} |
||||||
|
background-color: #c6f2f8; |
||||||
|
border-bottom: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
/deep/.table th{ |
||||||
|
background-color: #a2a2a2 !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/deep/.cell{ |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
/deep/.el-row{ |
||||||
|
padding-top: 20px; |
||||||
|
margin: 0 !important; |
||||||
|
} |
||||||
|
.form-item{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.form-item .el-input{ |
||||||
|
width: auto; |
||||||
|
} |
||||||
|
.form-item span{ |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
.meta-title-wrap{ |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
span{ |
||||||
|
font-size: 13px; |
||||||
|
color: #444; |
||||||
|
} |
||||||
|
} |
||||||
|
.flex-between{ |
||||||
|
span{ |
||||||
|
font-size: 13px; |
||||||
|
color: #444; |
||||||
|
} |
||||||
|
} |
||||||
|
.meta-title{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
padding: 10px 20px; |
||||||
|
margin-bottom: 10px; |
||||||
|
font-size: 16px; |
||||||
|
color: #fff; |
||||||
|
background-color: #9076FF; |
||||||
|
i{ |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
.step-title{ |
||||||
|
margin-bottom: 10px; |
||||||
|
font-size: 16px; |
||||||
|
color: #9278ff; |
||||||
|
} |
||||||
|
.bd-title{ |
||||||
|
padding-top: 20px; |
||||||
|
border-top: 1px dashed #ccc; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,847 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-container> |
||||||
|
<el-aside width="350px"> |
||||||
|
<TeacherSide ref="getSelectData" @fircheck="fircheck" @twocheck="twocheck" @getData="getData"></TeacherSide> |
||||||
|
</el-aside> |
||||||
|
|
||||||
|
<el-main style="padding-top: 0"> |
||||||
|
<el-col :span="24"> |
||||||
|
<el-card shadow="hover" class="mgb20 teacher_tab"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div> |
||||||
|
<el-input placeholder="请输入员工账号/姓名/工号" v-model="keyword"> |
||||||
|
<i slot="suffix" class="el-input__icon el-icon-search"></i> |
||||||
|
</el-input> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-button type="primary" size="small" round @click="addTeacher" v-auth="'system:员工管理:新增员工'">新增员工</el-button> |
||||||
|
<el-button type="primary" size="small" round @click="batchImport" v-auth="'system:员工管理:批量导入'">批量导入</el-button> |
||||||
|
<el-button type="primary" size="small" round @click="delAllSelection" v-auth="'system:员工管理:批量删除'">批量删除</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table :data="listData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange"> |
||||||
|
<el-table-column type="selection" width="55" align="center"></el-table-column> |
||||||
|
<el-table-column type="index" label="序号" width="55" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="account" label="账号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="userName" label="职工姓名" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="workNumber" label="职工工号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="staffProfessionalArchitectureName" label="一级部门" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="staffGradeName" label="二级部门" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="NewaccountRole" label="账号角色" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="logInNumber" label="登录次数" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="lastLoginTime" label="上次登录时间" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" width="200" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" @click="showTeacher(scope.row)" v-auth="'system:员工管理:查看'">查看</el-button> |
||||||
|
<el-button type="text" @click="editTeacher(scope.row)" v-auth="'system:员工管理:编辑'">编辑</el-button> |
||||||
|
<el-button type="text" @click="resetPassword(scope.row)" v-auth="'system:员工管理:重置密码'">重置密码</el-button> |
||||||
|
<el-button type="text" @click="delTeacher(scope.row)" v-auth="'system:员工管理:删除'">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background layout="total, prev, pager, next" :current-page="pageNo" @current-change="handleCurrentChange" :total="totals"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
</el-main> |
||||||
|
</el-container> |
||||||
|
|
||||||
|
<!-- 新增用户 --> |
||||||
|
<el-dialog :title="isDetail ? '查看员工' : (isAddteacher ? '新增员工' : '编辑员工')" :visible.sync="teacherVisible" |
||||||
|
width="30%" center @close="closeTeacher" class="dialog" :close-on-click-modal="false"> |
||||||
|
<el-form ref="teacherForm" :model="teacherForm" :rules="rules" label-width="120px" :disabled="isDetail"> |
||||||
|
<el-form-item prop="userAccount" label="账号"> |
||||||
|
<el-input v-model="teacherForm.userAccount" ref="account" placeholder="请输入职工账号" @change="accountChange"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="userName" label="用户姓名"> |
||||||
|
<el-input v-model="teacherForm.userName" placeholder="请输入员工姓名"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="roleValue" label="账号角色"> |
||||||
|
<el-checkbox-group v-model="teacherForm.roleValue"> |
||||||
|
<el-checkbox label="老师"></el-checkbox> |
||||||
|
<el-checkbox label="管理员"></el-checkbox> |
||||||
|
<el-checkbox label="学生" disabled></el-checkbox> |
||||||
|
</el-checkbox-group> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="uniqueIdentificationAccount" label="唯一标识"> |
||||||
|
<el-input disabled v-model="teacherForm.uniqueIdentificationAccount" placeholder="请输入职工工号获取唯一标识"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<template v-if="teacherForm.roleValue.some((n) => n == '老师')"> |
||||||
|
<el-form-item prop="teacherWorkNumber" label="老师职工工号"> |
||||||
|
<el-input v-model="teacherForm.teacherWorkNumber" placeholder="请输入老师职工工号" @change="OnlyId(14)"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="teacherMajor" label="老师一级部门"> |
||||||
|
<el-select v-model="teacherForm.teacherMajor" placeholder="请选择一级部门" @change="getDepartment(14)"> |
||||||
|
<el-option v-for="(item,index) in majorList" :key="index" |
||||||
|
:label="item.staffProfessionalArchitectureName" :value="item.staffProfessionalArchitectureId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="teacherDepartment" label="老师二级部门"> |
||||||
|
<el-select v-model="teacherForm.teacherDepartment" placeholder="请选择二级部门" :disabled="teacherForm.teacherMajor ? false : true"> |
||||||
|
<el-option v-for="(item,index) in teacherDepartmentList" :key="index" |
||||||
|
:label="item.staffGradeName" :value="item.staffGradeId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</template> |
||||||
|
<template v-if="teacherForm.roleValue.some((n) => n == '管理员')"> |
||||||
|
<el-form-item prop="managerWorkNumber" label="管理员职工工号"> |
||||||
|
<el-input v-model="teacherForm.managerWorkNumber" placeholder="请输入管理员职工工号" @change="OnlyId(13)"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="managerMajor" label="管理员一级部门"> |
||||||
|
<el-select v-model="teacherForm.managerMajor" placeholder="请选择一级部门" @change="getDepartment(13)"> |
||||||
|
<el-option v-for="(item,index) in majorList" :key="index" |
||||||
|
:label="item.staffProfessionalArchitectureName" :value="item.staffProfessionalArchitectureId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="managerDepartment" label="管理员二级部门"> |
||||||
|
<el-select v-model="teacherForm.managerDepartment" placeholder="请选择二级部门" :disabled="teacherForm.managerMajor ? false : true"> |
||||||
|
<el-option v-for="(item,index) in managerDepartmentList" :key="index" |
||||||
|
:label="item.staffGradeName" :value="item.staffGradeId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</template> |
||||||
|
|
||||||
|
<el-form-item prop="phone" label="手机号"> |
||||||
|
<el-input v-model="teacherForm.phone" placeholder="请输入手机号" maxlength="11" @change="phoneChange"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="email" label="邮箱"> |
||||||
|
<el-input v-model="teacherForm.email" placeholder="请输入邮箱"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<!-- <el-form-item prop="major" label="专业方向"> |
||||||
|
<el-select v-model="teacherForm.major" placeholder="请选择专业方向"> |
||||||
|
<el-option v-for="(item,index) in majorList1" :key="index" |
||||||
|
:label="item.label" :value="item.value"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> --> |
||||||
|
<el-form-item prop="schoolId" label="所在院校"> |
||||||
|
<el-select v-model="teacherForm.schoolId" placeholder="默认为当前院校（可修改）" filterable> |
||||||
|
<el-option v-for="(item,index) in schoolList" :key="index" :label="item.schoolName" :value="item.schoolId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<span slot="footer" class="dialog-footer" v-if="!isDetail"> |
||||||
|
<el-button @click="teacherVisible = false">取 消</el-button> |
||||||
|
<el-button type="primary" @click="saveSure('teacherForm')">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
|
||||||
|
<!-- 批量导入 --> |
||||||
|
<el-dialog title="批量导入" :visible.sync="importVisible" width="24%" center :close-on-click-modal="false"> |
||||||
|
<div style="text-align: center"> |
||||||
|
<div style="margin-bottom: 10px;"><el-button type="primary" @click="downLoad">模板下载<i class="el-icon-download el-icon--right"></i></el-button></div> |
||||||
|
<el-upload |
||||||
|
accept=".xls,.xlsx" |
||||||
|
:on-remove="handleRemove" |
||||||
|
:on-error="uploadError" |
||||||
|
:on-success="uploadSuccess" |
||||||
|
:before-remove="beforeRemove" |
||||||
|
:limit="1" |
||||||
|
:on-exceed="handleExceed" |
||||||
|
:action="this.api.uploadFileStaff" |
||||||
|
:file-list="uploadList" |
||||||
|
name="file" |
||||||
|
> |
||||||
|
<el-button type="primary" class="ml20">上传文件<i class="el-icon-upload2 el-icon--right"></i></el-button> |
||||||
|
</el-upload> |
||||||
|
<el-link v-if="uploadFaild" type="primary" @click="showFaild">部分数据导入失败，查看失败原因</el-link> |
||||||
|
</div> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="importVisible = false">取 消</el-button> |
||||||
|
<el-button type="primary" @click="uploadSure">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import TeacherSide from './StaffSide.vue'; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
pages: 10, |
||||||
|
isDetail: false, |
||||||
|
isAddteacher: false, |
||||||
|
teacherVisible: false, |
||||||
|
schoolId: 2105, |
||||||
|
teacherForm: { |
||||||
|
teacherId: '', |
||||||
|
userName: '', |
||||||
|
roleValue: [], |
||||||
|
tearcherAccount: '', |
||||||
|
phone: '', |
||||||
|
uniqueIdentificationAccount: '', |
||||||
|
teacherWorkNumber: '', |
||||||
|
managerWorkNumber: '', |
||||||
|
email: '', |
||||||
|
teacherMajor: '', |
||||||
|
teacherDepartment: '', |
||||||
|
managerMajor: '', |
||||||
|
managerDepartment: '', |
||||||
|
userAccount: '', |
||||||
|
major: '', |
||||||
|
schoolId: this.schoolId |
||||||
|
}, |
||||||
|
rules: { |
||||||
|
userAccount: [ |
||||||
|
{ required: true, message: '请输入职工账号', trigger: 'blur' }, |
||||||
|
{ |
||||||
|
pattern: /^[a-zA-Z0-9_-]{1,16}$/, |
||||||
|
message: '请输入正确的账号', |
||||||
|
trigger: 'blur' |
||||||
|
} |
||||||
|
], |
||||||
|
userName: [ |
||||||
|
{ required: true, message: '请输入用户姓名', trigger: 'blur' } |
||||||
|
], |
||||||
|
roleValue: [ |
||||||
|
{ required: true, message: '请选择账号角色', trigger: 'change' } |
||||||
|
], |
||||||
|
tearcherAccount: [ |
||||||
|
{ required: true, message: '请输入老师职工工号', trigger: 'blur' }, |
||||||
|
{ |
||||||
|
pattern: /^[0-9]*$/, |
||||||
|
message: '职工工号必须为数字', |
||||||
|
trigger: 'blur' |
||||||
|
} |
||||||
|
], |
||||||
|
uniqueIdentificationAccount: [ |
||||||
|
// { required: true, message: '请输入唯一标识', trigger: 'blur' }, |
||||||
|
], |
||||||
|
teacherWorkNumber: [ |
||||||
|
{ required: true, message: '请输入老师职工工号', trigger: 'blur' }, |
||||||
|
{ |
||||||
|
pattern: /^[A-Za-z0-9]+$/, |
||||||
|
message: '请输入正确的职工工号', |
||||||
|
trigger: 'blur' |
||||||
|
} |
||||||
|
], |
||||||
|
teacherDepartment: [ |
||||||
|
{ required: true, message: '请选择老师二级部门', trigger: 'change' } |
||||||
|
], |
||||||
|
managerMajor: [ |
||||||
|
{ required: true, message: '请选择管理员一级部门', trigger: 'change' } |
||||||
|
], |
||||||
|
managerWorkNumber: [ |
||||||
|
{ required: true, message: '请输入管理员职工工号', trigger: 'blur' }, |
||||||
|
{ |
||||||
|
pattern: /^[A-Za-z0-9]+$/, |
||||||
|
message: '请输入正确的职工工号', |
||||||
|
trigger: 'blur' |
||||||
|
} |
||||||
|
], |
||||||
|
managerDepartment: [ |
||||||
|
{ required: true, message: '请选择管理员二级部门', trigger: 'change' } |
||||||
|
], |
||||||
|
teacherMajor: [ |
||||||
|
{ required: true, message: '请选择老师一级部门', trigger: 'change' } |
||||||
|
], |
||||||
|
phone: [ |
||||||
|
// { required: true, message: '请输入职工手机号', trigger: 'blur' }, |
||||||
|
{ |
||||||
|
pattern: /^1[3456789]\d{9}$/, |
||||||
|
message: '请输入正确的手机号', |
||||||
|
trigger: 'blur' |
||||||
|
} |
||||||
|
], |
||||||
|
email: [ |
||||||
|
// { required: true, message: '请输入邮箱', trigger: 'blur' }, |
||||||
|
{ |
||||||
|
pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/, |
||||||
|
message: '请输入正确的邮箱', |
||||||
|
trigger: 'blur' |
||||||
|
} |
||||||
|
], |
||||||
|
schoolId: [ |
||||||
|
{ required: true, message: '请选择所在院校', trigger: 'change' } |
||||||
|
], |
||||||
|
}, |
||||||
|
listData: [], |
||||||
|
importVisible: false, |
||||||
|
keyword: '', |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
totals: 0, |
||||||
|
managerDepartmentList: [], |
||||||
|
teacherDepartmentList: [], |
||||||
|
staffstateProfessId: '', |
||||||
|
staffGradeId: '', |
||||||
|
multipleSelection: [], |
||||||
|
uploadList: [], |
||||||
|
provinceId: this.$store.state.provinceId, |
||||||
|
cityId: this.$store.state.cityId, |
||||||
|
userId: this.$store.state.userId, |
||||||
|
oneDepartmentIds: '', |
||||||
|
twoDepartmentIds: '', |
||||||
|
ProfessionalClassList: [], |
||||||
|
subjectList: [], |
||||||
|
ProfessionalList: [], |
||||||
|
NoAdd: '', |
||||||
|
AccountNoAdd: '', |
||||||
|
managerNumberNoAdd: true, |
||||||
|
teacherNumberNoAdd: true, |
||||||
|
platformId: this.$store.state.platformId, |
||||||
|
isManager: false, |
||||||
|
isTeacher: false, |
||||||
|
isNewUser: 1, |
||||||
|
schoolList: [], |
||||||
|
uploadFaild: false, |
||||||
|
token: '' |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
TeacherSide |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
keyword: function(val) { |
||||||
|
clearTimeout(this.searchTimer) |
||||||
|
this.searchTimer = setTimeout(() => { |
||||||
|
this.getData() |
||||||
|
},500) |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
this.getData() |
||||||
|
this.teacherForm.schoolId = 2105 |
||||||
|
this.getSchoolData() |
||||||
|
// this.getSubject() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
handleCheck(data){ |
||||||
|
let oneDepartmentIds = [] |
||||||
|
let twoDepartmentIds = [] |
||||||
|
|
||||||
|
data.forEach( e => { |
||||||
|
if(e.ischeck){ |
||||||
|
oneDepartmentIds.push(e.staffProfessionalArchitectureId) |
||||||
|
}else{ |
||||||
|
this.removeByValue(oneDepartmentIds, e.staffProfessionalArchitectureId); |
||||||
|
} |
||||||
|
e.children.forEach( r => { |
||||||
|
if(r.ischeck){ |
||||||
|
twoDepartmentIds.push(r.staffGradeId) |
||||||
|
}else{ |
||||||
|
this.removeByValue(twoDepartmentIds, r.staffGradeId); |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
this.oneDepartmentIds = oneDepartmentIds.toString() |
||||||
|
this.twoDepartmentIds = twoDepartmentIds.toString() |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
fircheck(val,val2){ |
||||||
|
val.ischeck = !val.ischeck |
||||||
|
val.children.map( e => e.ischeck = val.ischeck) |
||||||
|
this.handleCheck(val2) |
||||||
|
}, |
||||||
|
twocheck(val,val2){ |
||||||
|
val.ischeck = !val.ischeck |
||||||
|
val2.map( e => { |
||||||
|
e.children.map( r => { |
||||||
|
if(r.staffGradeId == val.staffGradeId){ |
||||||
|
if(e.children.every(i => i.ischeck)){ |
||||||
|
e.ischeck = true |
||||||
|
}else{ |
||||||
|
e.ischeck = false |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
this.handleCheck(val2) |
||||||
|
}, |
||||||
|
getData(){ |
||||||
|
let data = { |
||||||
|
// staffProfessionalArchitectureIds: this.oneDepartmentIds, |
||||||
|
staffProfessionalArchitectureIds: '', |
||||||
|
staffGradeIds: this.twoDepartmentIds, |
||||||
|
searchContent: this.encodeString(this.keyword), |
||||||
|
page: this.pageNo, |
||||||
|
size: this.pageSize, |
||||||
|
schoolId: this.schoolId |
||||||
|
} |
||||||
|
this.$post(this.api.queryStaff,data).then(res => { |
||||||
|
this.listData = res.data.list |
||||||
|
this.totals = res.data.totalCount |
||||||
|
this.listData.forEach(e => { |
||||||
|
if(e.roleId.length > 1) { |
||||||
|
let NewaccountRole = [] |
||||||
|
let roleIds = e.roleId.split(',') |
||||||
|
roleIds.forEach((n,k) => { |
||||||
|
NewaccountRole.push(this.roleStatus(n)) |
||||||
|
}) |
||||||
|
e.NewaccountRole = NewaccountRole.join(',') |
||||||
|
}else{ |
||||||
|
e.NewaccountRole = this.roleStatus(e.roleId) |
||||||
|
} |
||||||
|
}) |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
getSchoolData(){ |
||||||
|
let data = { |
||||||
|
schoolName: '', |
||||||
|
provinceId: '', |
||||||
|
cityId: '' |
||||||
|
} |
||||||
|
this.$get(this.api.querySchool,data).then(res => { |
||||||
|
this.schoolList = res.message |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
closeTeacher(){ |
||||||
|
this.teacherForm= { |
||||||
|
teacherId: '', |
||||||
|
userName: '', |
||||||
|
roleValue: [], |
||||||
|
tearcherAccount: '', |
||||||
|
phone: '', |
||||||
|
uniqueIdentificationAccount: '', |
||||||
|
teacherWorkNumber: '', |
||||||
|
managerWorkNumber: '', |
||||||
|
email: '', |
||||||
|
teacherMajor: '', |
||||||
|
teacherDepartment: '', |
||||||
|
managerMajor: '', |
||||||
|
managerDepartment: '', |
||||||
|
userAccount: '', |
||||||
|
major: '', |
||||||
|
schoolId: this.schoolId |
||||||
|
} |
||||||
|
this.isManager = false |
||||||
|
this.isTeacher = false |
||||||
|
this.$refs.teacherForm.clearValidate() |
||||||
|
}, |
||||||
|
addTeacher(){ |
||||||
|
this.isDetail = false |
||||||
|
this.teacherVisible = true |
||||||
|
this.isAddteacher = true |
||||||
|
this.teacherForm.teacherId = '' |
||||||
|
this.majorList = this.$refs.getSelectData.majorList |
||||||
|
this.$refs.teacherForm.clearValidate() |
||||||
|
}, |
||||||
|
getStaffDetail(userId){ |
||||||
|
let data = { |
||||||
|
userId: userId |
||||||
|
} |
||||||
|
this.$get(this.api.querystaffDetail,data).then(res => { |
||||||
|
let user = res.data.userInfo; |
||||||
|
let or = res.data.staffInfo; |
||||||
|
this.teacherForm.userName = user.userName |
||||||
|
this.teacherForm.phone = user.phone |
||||||
|
this.teacherForm.email = user.email |
||||||
|
this.teacherForm.userAccount = user.account |
||||||
|
this.teacherForm.userId = user.userId |
||||||
|
this.teacherForm.schoolId = user.schoolId |
||||||
|
or.forEach((n,i) => { |
||||||
|
this.teacherForm.roleValue.push(this.roleStatus(n.roleId)) |
||||||
|
if(n.roleId == 13) { |
||||||
|
this.teacherForm.managerMajor = n.staffProfessionalArchitectureId |
||||||
|
this.teacherForm.managerDepartment = n.staffGradeId |
||||||
|
this.teacherForm.managerWorkNumber = n.workNumber |
||||||
|
this.isManager = true |
||||||
|
this.teacherForm.managerStaffId = n.staffId |
||||||
|
this.getDepartment(13) |
||||||
|
}else if(n.roleId == 14){ |
||||||
|
this.teacherForm.teacherMajor = n.staffProfessionalArchitectureId |
||||||
|
this.teacherForm.teacherDepartment = n.staffGradeId |
||||||
|
this.teacherForm.teacherWorkNumber = n.workNumber |
||||||
|
this.isTeacher = true |
||||||
|
this.teacherForm.teacherStaffId = n.staffId |
||||||
|
this.getDepartment(14) |
||||||
|
} |
||||||
|
}) |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
editTeacher(row){ |
||||||
|
this.isDetail = false |
||||||
|
this.teacherVisible = true |
||||||
|
this.isAddteacher = false |
||||||
|
this.AccountNoAdd = false |
||||||
|
this.teacherForm.teacherId = row.userId |
||||||
|
this.majorList = this.$refs.getSelectData.majorList |
||||||
|
this.isNewUser = 0 |
||||||
|
this.getStaffDetail(row.userId) |
||||||
|
}, |
||||||
|
resetPassword(row){ |
||||||
|
this.$confirm(`重置后的密码为：${this.$config.initialPassword}，确定重置？`, '提示', { |
||||||
|
}).then(() => { |
||||||
|
let data = { |
||||||
|
newPwd: this.$config.initialPassword, |
||||||
|
userId: row.userId, |
||||||
|
} |
||||||
|
this.$get(this.api.resetPwd,data).then(res => { |
||||||
|
if(res.errmessage == 'success'){ |
||||||
|
this.$message.success('重置成功') |
||||||
|
}else{ |
||||||
|
this.$message.error('重置失败') |
||||||
|
} |
||||||
|
}).catch(res => {}); |
||||||
|
}).catch(() => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
showTeacher(row){ |
||||||
|
this.isDetail = true |
||||||
|
this.teacherVisible = true |
||||||
|
this.isAddteacher = false |
||||||
|
this.AccountNoAdd = false |
||||||
|
this.teacherForm.teacherId = row.userId |
||||||
|
this.majorList = this.$refs.getSelectData.majorList |
||||||
|
this.isNewUser = 0 |
||||||
|
this.getStaffDetail(row.userId) |
||||||
|
}, |
||||||
|
getDepartment(type){ |
||||||
|
let data = { |
||||||
|
staffProfessionalArchitectureId: type == 13 ? this.teacherForm.managerMajor : this.teacherForm.teacherMajor |
||||||
|
} |
||||||
|
this.$get(this.api.queryStaffGrade,data).then(res => { |
||||||
|
if(type == 13){ |
||||||
|
this.managerDepartmentList = res.message |
||||||
|
}else{ |
||||||
|
this.teacherDepartmentList = res.message |
||||||
|
} |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
async phoneChange(){ |
||||||
|
let res = await this.$get(this.api.queryPhone, { phone: this.teacherForm.phone }); |
||||||
|
if(res.message.length != 0){ |
||||||
|
this.$message.warning('该手机号已存在'); |
||||||
|
this.NoAdd = false |
||||||
|
}else{ |
||||||
|
this.NoAdd = true |
||||||
|
} |
||||||
|
}, |
||||||
|
async accountChange(){ |
||||||
|
let res = await this.$get(this.api.queryAccountIsExist, { |
||||||
|
account: this.encodeString(this.teacherForm.userAccount), |
||||||
|
schoolId: this.schoolId |
||||||
|
}); |
||||||
|
if(this.isAddteacher){ |
||||||
|
this.isManager = false |
||||||
|
this.isTeacher = false |
||||||
|
} |
||||||
|
if(res.message.user.length != 0){ |
||||||
|
let user = res.message.user[0]; |
||||||
|
let or = res.message.OR; |
||||||
|
this.$message.warning('该账号已存在'); |
||||||
|
this.teacherForm.email = user.email |
||||||
|
this.teacherForm.phone = user.phone |
||||||
|
this.teacherForm.uniqueIdentificationAccount = user.uniqueIdentificationAccount |
||||||
|
this.teacherForm.userName = user.userName |
||||||
|
// this.teacherForm.schoolId = user.schoolId |
||||||
|
this.teacherForm.userId = user.userId |
||||||
|
this.isNewUser = 0 |
||||||
|
or.forEach((n,i) => { |
||||||
|
this.teacherForm.roleValue.push(this.roleStatus(n.roleId)) |
||||||
|
if(n.roleId == 13) { |
||||||
|
this.teacherForm.managerMajor = n.oneDepartmentId |
||||||
|
this.teacherForm.managerDepartment = n.twoDepartmentId |
||||||
|
this.teacherForm.managerWorkNumber = n.workNumber |
||||||
|
this.teacherForm.managerSchoolId = n.schoolId |
||||||
|
this.teacherForm.managerSchoolName = n.schoolName |
||||||
|
this.isManager = true |
||||||
|
this.getDepartment(13) |
||||||
|
}else if(n.roleId == 14){ |
||||||
|
this.teacherForm.teacherMajor = n.oneDepartmentId |
||||||
|
this.teacherForm.teacherDepartment = n.twoDepartmentId |
||||||
|
this.teacherForm.teacherWorkNumber = n.workNumber |
||||||
|
this.teacherForm.teacherSchoolId = n.schoolId |
||||||
|
this.teacherForm.tacherSchoolName = n.schoolName |
||||||
|
this.isTeacher = true |
||||||
|
this.getDepartment(14) |
||||||
|
} |
||||||
|
}) |
||||||
|
this.AccountNoAdd = false |
||||||
|
}else{ |
||||||
|
this.isNewUser = 1 |
||||||
|
this.AccountNoAdd = true |
||||||
|
} |
||||||
|
}, |
||||||
|
async submitOnlyId(){ |
||||||
|
if(this.teacherForm.managerWorkNumber != ''){ |
||||||
|
this.OnlyId(13) |
||||||
|
}else if(this.teacherForm.teacherWorkNumber != ''){ |
||||||
|
this.OnlyId(14) |
||||||
|
} |
||||||
|
}, |
||||||
|
async OnlyId(type){ |
||||||
|
let data = {}; |
||||||
|
let msg = ''; |
||||||
|
if(type == 13){ |
||||||
|
data = { |
||||||
|
workNumber: this.encodeString(this.teacherForm.managerWorkNumber), |
||||||
|
roleId: 13, |
||||||
|
schoolId: this.teacherForm.schoolId |
||||||
|
} |
||||||
|
msg = '该管理员工号已存在' |
||||||
|
}else if(type == 14){ |
||||||
|
data = { |
||||||
|
workNumber: this.encodeString(this.teacherForm.teacherWorkNumber), |
||||||
|
roleId: 14, |
||||||
|
schoolId: this.teacherForm.schoolId |
||||||
|
} |
||||||
|
msg = '该老师工号已存在' |
||||||
|
} |
||||||
|
let res = await this.$get(this.api.queryWorkNumberIsExist1, data); |
||||||
|
if(JSON.stringify(res.message) != '{}'){ |
||||||
|
this.$message.warning(msg); |
||||||
|
type == 2 ? (this.managerNumberNoAdd = false) : (this.teacherNumberNoAdd = false) |
||||||
|
}else{ |
||||||
|
let timestamp = Date.parse(new Date()); |
||||||
|
this.teacherForm.uniqueIdentificationAccount = `${this.schoolId}${this.teacherForm.uniqueIdentificationAccount}${timestamp}` |
||||||
|
type == 2 ? (this.managerNumberNoAdd = true) : (this.teacherNumberNoAdd = true) |
||||||
|
} |
||||||
|
}, |
||||||
|
async saveSure(teacherForm){ |
||||||
|
this.$refs[teacherForm].validate((valid) => { |
||||||
|
if (valid) { |
||||||
|
if(this.isAddteacher) { |
||||||
|
if(this.isManager && this.isTeacher) return this.$message.warning('该用户已经是老师和管理员，请重新添加'); |
||||||
|
if(this.isManager && !this.teacherForm.roleValue.some((n) => n == '老师')) return this.$message.warning('该用户已经是管理员'); |
||||||
|
if(this.isTeacher && !this.teacherForm.roleValue.some((n) => n == '管理员')) return this.$message.warning('该用户已经是老师'); |
||||||
|
if(!this.AccountNoAdd) return this.$message.warning('该账号已存在'); |
||||||
|
if(this.NoAdd == '' && this.teacherForm.phone){ |
||||||
|
this.phoneChange() |
||||||
|
if(!this.NoAdd) return false |
||||||
|
}else if(this.NoAdd === false) return this.$message.warning('该手机号已存在'); |
||||||
|
} |
||||||
|
if(!this.managerNumberNoAdd) return this.$message.warning('该管理员工号已存在'); |
||||||
|
if(!this.teacherNumberNoAdd) return this.$message.warning('该老师工号已存在'); |
||||||
|
|
||||||
|
let roleId = [] |
||||||
|
this.teacherForm.roleValue.forEach((n,k) => { |
||||||
|
n == '老师' && roleId.push(14) |
||||||
|
n == '管理员' && roleId.push(13) |
||||||
|
}) |
||||||
|
let data = { |
||||||
|
userName: this.teacherForm.userName, |
||||||
|
account: this.teacherForm.userAccount, |
||||||
|
schoolId: this.teacherForm.schoolId, |
||||||
|
roleId: roleId.join(','), |
||||||
|
phone: this.teacherForm.phone, |
||||||
|
email: this.teacherForm.email, |
||||||
|
uniqueIdentificationAccount: this.teacherForm.uniqueIdentificationAccount ? this.teacherForm.uniqueIdentificationAccount : Date.parse(new Date()), |
||||||
|
userId: this.teacherForm.userId ? this.teacherForm.userId : '' |
||||||
|
} |
||||||
|
data.staff = []; |
||||||
|
if((!this.isAddteacher && this.teacherForm.managerWorkNumber && roleId.includes(13)) || (this.isAddteacher && !this.isManager && this.teacherForm.managerWorkNumber)){ |
||||||
|
let oneDepartmentName = ''; |
||||||
|
for(let i in this.majorList){ |
||||||
|
if(this.majorList[i].staffProfessionalArchitectureId == this.teacherForm.managerMajor) { |
||||||
|
oneDepartmentName = this.majorList[i].staffProfessionalArchitectureName |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
let twoDepartmentName = this.managerDepartmentList.find((n) => { |
||||||
|
return n.staffGradeId == this.teacherForm.managerDepartment |
||||||
|
}).staffGradeName; |
||||||
|
let orList = { |
||||||
|
roleId: 13, |
||||||
|
staffId: this.teacherForm.managerStaffId, |
||||||
|
workNumber: this.teacherForm.managerWorkNumber, |
||||||
|
staffProfessionalArchitectureId: this.teacherForm.managerMajor, |
||||||
|
staffGradeId: this.teacherForm.managerDepartment, |
||||||
|
staffProfessionalArchitectureName: oneDepartmentName, |
||||||
|
staffGradeName: twoDepartmentName, |
||||||
|
}; |
||||||
|
data.staff.push(orList) |
||||||
|
} |
||||||
|
if((!this.isAddteacher && this.teacherForm.teacherWorkNumber && roleId.includes(14)) || (this.isAddteacher && !this.isTeacher && this.teacherForm.teacherWorkNumber)){ |
||||||
|
let oneDepartmentName = ''; |
||||||
|
for(let i in this.majorList){ |
||||||
|
if(this.majorList[i].staffProfessionalArchitectureId == this.teacherForm.teacherMajor) { |
||||||
|
oneDepartmentName = this.majorList[i].staffProfessionalArchitectureName |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
let twoDepartmentName = this.teacherDepartmentList.find((n) => { |
||||||
|
return n.staffGradeId == this.teacherForm.teacherDepartment |
||||||
|
}).staffGradeName; |
||||||
|
let orList = { |
||||||
|
roleId: 14, |
||||||
|
staffId: this.teacherForm.teacherStaffId, |
||||||
|
workNumber: this.teacherForm.teacherWorkNumber, |
||||||
|
staffProfessionalArchitectureId: this.teacherForm.teacherMajor, |
||||||
|
staffGradeId: this.teacherForm.teacherDepartment, |
||||||
|
staffProfessionalArchitectureName: oneDepartmentName, |
||||||
|
staffGradeName: twoDepartmentName, |
||||||
|
}; |
||||||
|
data.staff.push(orList) |
||||||
|
} |
||||||
|
if(this.teacherForm.teacherId){ |
||||||
|
this.$put(this.api.updateStaff,data).then(res => { |
||||||
|
this.teacherVisible = false |
||||||
|
this.$message.success('编辑成功'); |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}else{ |
||||||
|
this.$post(this.api.addStaff,data).then(res => { |
||||||
|
this.teacherVisible = false |
||||||
|
this.$message.success('添加成功'); |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
} |
||||||
|
}else{ |
||||||
|
return false; |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
delTeacher(row){ |
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$post(this.api.daleteBatchStaff,[row.userId]).then(res => { |
||||||
|
this.$message.success('删除成功') |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val; |
||||||
|
}, |
||||||
|
delAllSelection() { |
||||||
|
if(this.multipleSelection.length != ''){ |
||||||
|
let newArr = this.multipleSelection |
||||||
|
let delList = newArr.map(item => { |
||||||
|
return item.userId |
||||||
|
}) |
||||||
|
// 批量删除 |
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
let data = delList |
||||||
|
this.$post(this.api.daleteBatchStaff,data).then(res => { |
||||||
|
this.$refs.table.clearSelection() |
||||||
|
this.$message.success('删除成功') |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}).catch(() => {}); |
||||||
|
}else{ |
||||||
|
this.$message.error('请先选择员工 ！') |
||||||
|
} |
||||||
|
}, |
||||||
|
batchImport(){ |
||||||
|
this.importVisible = true |
||||||
|
this.uploadList = [] |
||||||
|
this.uploadFaild = false |
||||||
|
}, |
||||||
|
searchTeacher(){ |
||||||
|
this.pageNo = 1; |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.pageNo = val; |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
downLoad(){ |
||||||
|
location.href = 'http://www.liuwanr.cn/template/staff.xlsx' |
||||||
|
}, |
||||||
|
showFaild(){ |
||||||
|
location.href = `${this.api.export_failureStaff}?token=${this.token}` |
||||||
|
}, |
||||||
|
// 上传文件 |
||||||
|
handleExceed(files, fileList) { |
||||||
|
this.$message.warning( |
||||||
|
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` |
||||||
|
); |
||||||
|
}, |
||||||
|
uploadSuccess(res, file, fileList) { |
||||||
|
this.uploadFaild = false |
||||||
|
if(res.errmessage == 'success'){ |
||||||
|
if(res.data.token){ |
||||||
|
this.token = res.data.token |
||||||
|
this.uploadFaild = true |
||||||
|
}else{ |
||||||
|
this.$message.success('上传成功') |
||||||
|
} |
||||||
|
}else{ |
||||||
|
res.message ? this.$message.error(res.message) : this.$message.error('上传失败，请检查数据') |
||||||
|
} |
||||||
|
}, |
||||||
|
uploadError(err, file, fileList) { |
||||||
|
this.$message({ |
||||||
|
message: "上传出错，请重试！", |
||||||
|
type: "error", |
||||||
|
center: true |
||||||
|
}); |
||||||
|
}, |
||||||
|
beforeRemove(file, fileList) { |
||||||
|
return this.$confirm(`确定移除 ${file.name}？`); |
||||||
|
}, |
||||||
|
handleRemove(file, fileList) { |
||||||
|
this.uploadList = fileList |
||||||
|
this.uploadFaild = false |
||||||
|
}, |
||||||
|
uploadSure(){ |
||||||
|
this.importVisible = false |
||||||
|
this.pageNo = 1 |
||||||
|
this.keyword = '' |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
// 获取学科类别 |
||||||
|
getSubject(){ |
||||||
|
this.$get(this.api.queryCourseDiscipline).then(res => { |
||||||
|
this.subjectList = res.message |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
// 清除学科类别 |
||||||
|
clearClass(){ |
||||||
|
this.teacherForm.professionalClassId = '', |
||||||
|
this.teacherForm.professionalId = '' |
||||||
|
}, |
||||||
|
// 获取专业类 |
||||||
|
getProfessionalClass(){ |
||||||
|
this.clearClass() |
||||||
|
if(this.teacherForm.disciplineId){ |
||||||
|
this.getProfessionalClassData() |
||||||
|
} |
||||||
|
}, |
||||||
|
getProfessionalClassData(){ |
||||||
|
let data = { |
||||||
|
disciplineId: this.teacherForm.disciplineId |
||||||
|
} |
||||||
|
this.$get(this.api.queryCourseProfessionalClass,data).then(res => { |
||||||
|
this.ProfessionalClassList = res.message |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
// 清除专业类 |
||||||
|
clearProfess(){ |
||||||
|
this.teacherForm.professionalId = '' |
||||||
|
}, |
||||||
|
// 获取专业 |
||||||
|
getProfessional(){ |
||||||
|
this.clearProfess() |
||||||
|
if(this.teacherForm.professionalClassId){ |
||||||
|
this.getProfessionalData() |
||||||
|
} |
||||||
|
}, |
||||||
|
getProfessionalData(){ |
||||||
|
let data = { |
||||||
|
professionalClassId: this.teacherForm.professionalClassId |
||||||
|
} |
||||||
|
this.$get(this.api.queryCourseProfessional,data).then(res => { |
||||||
|
this.ProfessionalList = res.message |
||||||
|
}).catch(res => {}); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
.el-container{ |
||||||
|
background-color: #f0f0f0; |
||||||
|
} |
||||||
|
.mag{ |
||||||
|
margin-right: 20px; |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,357 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<div> |
||||||
|
<lctree :data="majorList" |
||||||
|
@addMajor="addMajor" @editMajor="editMajor" @delMajor="delMajor" |
||||||
|
@addDepartment="addDepartment" @editDepartment="editDepartment" @delDepartment="delDepartment" |
||||||
|
@fircheckitem="fircheckitem" @twocheckitem="twocheckitem" |
||||||
|
></lctree> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 添加专业 --> |
||||||
|
<el-dialog :title="Form.MajorId ? '编辑专业' : '新增专业'" :visible.sync="isaddMajor" width="24%" center @close="closeAdd" :close-on-click-modal="false"> |
||||||
|
<el-form ref="Form" :model="Form" :rules="rules"> |
||||||
|
<el-form-item prop="majorName"> |
||||||
|
<el-input placeholder="请输入专业名称" v-model="Form.majorName" @change="majorChange"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="isaddMajor = false">取 消</el-button> |
||||||
|
<el-button type="primary" @click="sure('Form')">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
|
||||||
|
<!-- 添加部门 --> |
||||||
|
<el-dialog :title="Form.departmentId ? '编辑部门' : '新增部门'" :visible.sync="isAddDepartment" width="24%" center @close="closeAdd" :close-on-click-modal="false"> |
||||||
|
<el-form ref="Form" :model="Form" :rules="rules"> |
||||||
|
<el-form-item prop="departmentName"> |
||||||
|
<el-input placeholder="请输入部门名称" v-model="Form.departmentName"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="isAddDepartment = false">取 消</el-button> |
||||||
|
<el-button type="primary" @click="sureDepartment('Form')">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import lctree from './Stafftree'; |
||||||
|
export default { |
||||||
|
props:["Data"], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
majorList: [], |
||||||
|
firactive: 0, |
||||||
|
twoactive: 0, |
||||||
|
isaddMajor: false, |
||||||
|
isAddDepartment: false, |
||||||
|
schoolId: 2105, |
||||||
|
Form: { |
||||||
|
MajorId: '', |
||||||
|
majorName: '', |
||||||
|
departmentId: '', |
||||||
|
departmentName: '' |
||||||
|
}, |
||||||
|
rules: { |
||||||
|
majorName: [ |
||||||
|
{ required: true, message: '请输入专业名称', trigger: 'blur' } |
||||||
|
], |
||||||
|
departmentName: [ |
||||||
|
{ required: true, message: '请输入部门名称', trigger: 'blur' } |
||||||
|
] |
||||||
|
}, |
||||||
|
staffstateProfessId: '', |
||||||
|
staffstateId: '', |
||||||
|
majorNoAdd: true |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
lctree |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
this.getStaff() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getStaff(){ |
||||||
|
let data = { |
||||||
|
schoolId: this.schoolId |
||||||
|
} |
||||||
|
this.$get(this.api.queryStaffPro,data).then(res => { |
||||||
|
if(res.message){ |
||||||
|
res.message.map(e => { |
||||||
|
(e.ifVisible = false), (e.ischeck = false), (e.label = e.staffProfessionalArchitectureName); |
||||||
|
let data = { |
||||||
|
staffProfessionalArchitectureId: e.staffProfessionalArchitectureId |
||||||
|
} |
||||||
|
this.$get(this.api.queryStaffGrade,data).then(res => { |
||||||
|
res.message.map(e => { |
||||||
|
(e.ischeck = false), (e.label = e.staffGradeName); |
||||||
|
}) |
||||||
|
e.children = res.message |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
} |
||||||
|
setTimeout(() => { |
||||||
|
this.majorList = res.message |
||||||
|
}, 500); |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
// 选择专业 |
||||||
|
fircheckitem(item){ |
||||||
|
this.$emit("fircheck",item,this.majorList) |
||||||
|
}, |
||||||
|
// 选择部门 |
||||||
|
twocheckitem(item){ |
||||||
|
this.$emit("twocheck",item,this.majorList) |
||||||
|
}, |
||||||
|
closeAdd(){ |
||||||
|
this.$refs.Form.resetFields() |
||||||
|
}, |
||||||
|
// 新增编辑专业 |
||||||
|
addMajor(){ |
||||||
|
this.Form.MajorId = '' |
||||||
|
this.Form.majorName = '' |
||||||
|
this.isaddMajor = true |
||||||
|
}, |
||||||
|
editMajor(item){ |
||||||
|
this.Form.MajorId = item.staffProfessionalArchitectureId, |
||||||
|
this.Form.majorName = item.staffProfessionalArchitectureName |
||||||
|
this.isaddMajor = true |
||||||
|
}, |
||||||
|
async majorChange(){ |
||||||
|
let res = await this.$get(this.api.queryStaffPAN, { name: this.Form.majorName }); |
||||||
|
if(res.message.length != 0){ |
||||||
|
this.$message.warning('该一级部门已存在'); |
||||||
|
this.majorNoAdd = false |
||||||
|
}else{ |
||||||
|
this.majorNoAdd = true |
||||||
|
} |
||||||
|
}, |
||||||
|
sure(Form){ |
||||||
|
this.$refs[Form].validate((valid) => { |
||||||
|
if (valid) { |
||||||
|
if(!this.majorNoAdd) return this.$message.warning('该一级部门已存在'); |
||||||
|
let data = { |
||||||
|
staffProfessionalArchitectureName: this.Form.majorName, |
||||||
|
staffProfessionalArchitectureId: this.Form.MajorId, |
||||||
|
schoolId: this.schoolId, |
||||||
|
} |
||||||
|
if(this.Form.MajorId){ |
||||||
|
this.$post(this.api.updateStaffPro,data).then(res => { |
||||||
|
this.$message.success('编辑成功'); |
||||||
|
this.isaddMajor = false |
||||||
|
this.majorList.map(e =>{ |
||||||
|
if(e.staffProfessionalArchitectureId == this.Form.MajorId){ |
||||||
|
e.staffProfessionalArchitectureName = this.Form.majorName |
||||||
|
e.label = this.Form.majorName |
||||||
|
} |
||||||
|
}) |
||||||
|
this.$emit('getData') |
||||||
|
}).catch(res => {}); |
||||||
|
}else{ |
||||||
|
this.$post(this.api.addStaffPro,data).then(res => { |
||||||
|
this.$message.success('添加成功'); |
||||||
|
this.isaddMajor = false |
||||||
|
let newData = { |
||||||
|
staffProfessionalArchitectureId: res.message, |
||||||
|
staffProfessionalArchitectureName: this.Form.majorName, |
||||||
|
label: this.Form.majorName, |
||||||
|
ifVisible: false, |
||||||
|
ischeck: false, |
||||||
|
children: [] |
||||||
|
} |
||||||
|
this.majorList.push(newData) |
||||||
|
}).catch(res => {}); |
||||||
|
} |
||||||
|
}else{ |
||||||
|
return false; |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 新增编辑部门 |
||||||
|
addDepartment(item){ |
||||||
|
this.Form.departmentId = '' |
||||||
|
this.Form.departmentName = '' |
||||||
|
this.isAddDepartment = true |
||||||
|
this.Form.MajorId = item.staffProfessionalArchitectureId |
||||||
|
}, |
||||||
|
editDepartment(item){ |
||||||
|
this.Form.departmentId = item.staffGradeId, |
||||||
|
this.Form.departmentName = item.staffGradeName |
||||||
|
this.isAddDepartment = true |
||||||
|
for (let j = 0; j < this.majorList.length; j++) { |
||||||
|
for (let k = 0; k < this.majorList[j].children.length; k++) { |
||||||
|
if(this.majorList[j].children[k].staffGradeName == item.staffGradeName){ |
||||||
|
this.Form.MajorId = this.majorList[j].staffProfessionalArchitectureId |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
sureDepartment(Form){ |
||||||
|
this.$refs[Form].validate((valid) => { |
||||||
|
if (valid) { |
||||||
|
let data = { |
||||||
|
staffGradeName: this.Form.departmentName, |
||||||
|
staffProfessionalArchitectureId: this.Form.MajorId, |
||||||
|
staffGradeId: this.Form.departmentId |
||||||
|
} |
||||||
|
if(this.Form.departmentId){ |
||||||
|
this.$post(this.api.updateStaffGrade,data).then(res => { |
||||||
|
this.$message.success('编辑成功'); |
||||||
|
this.isAddDepartment = false |
||||||
|
this.majorList.map(e =>{ |
||||||
|
e.children.map(r =>{ |
||||||
|
if(r.staffGradeId == this.Form.departmentId){ |
||||||
|
r.staffGradeName = this.Form.departmentName |
||||||
|
r.label = this.Form.departmentName |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
}).catch(res => {}); |
||||||
|
}else{ |
||||||
|
this.$post(this.api.addStaffGrade,data).then(res => { |
||||||
|
this.$message.success('添加成功'); |
||||||
|
this.isAddDepartment = false |
||||||
|
let newData = { |
||||||
|
staffGradeId: res.message, |
||||||
|
staffGradeName: this.Form.departmentName, |
||||||
|
label: this.Form.departmentName, |
||||||
|
ifVisible: false, |
||||||
|
ischeck: false |
||||||
|
} |
||||||
|
this.majorList.map(e =>{ |
||||||
|
if(e.staffProfessionalArchitectureId == this.Form.MajorId){ |
||||||
|
e.ifVisible = true |
||||||
|
e.children.push(newData) |
||||||
|
} |
||||||
|
}) |
||||||
|
}).catch(res => {}); |
||||||
|
} |
||||||
|
}else{ |
||||||
|
return false; |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
delMajor(item,index){ |
||||||
|
this.$confirm('确定要删除该专业吗？该操作将会删除该组织下的用户账号。', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
let data = { |
||||||
|
staffProfessionalArchitectureId: item.staffProfessionalArchitectureId |
||||||
|
} |
||||||
|
this.$post(this.api.deleteStaffPro,data).then(res => { |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.majorList.splice(index, 1) |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}, |
||||||
|
delDepartment(item,indx){ |
||||||
|
this.$confirm('确定要删除该部门吗？该操作将会删除该组织下的用户账号。', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
let data = { |
||||||
|
staffGradeId: item.staffGradeId |
||||||
|
} |
||||||
|
this.$post(this.api.deleteStaffGrade,data).then(res => { |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.majorList.map(e =>{ |
||||||
|
e.children.map(r =>{ |
||||||
|
if(r.staffGradeId == item.staffGradeId){ |
||||||
|
e.children.splice(indx,1) |
||||||
|
if(e.children.length == 0){ |
||||||
|
e.ifVisible = false |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
.side_view{ |
||||||
|
height: 800px; |
||||||
|
padding: 40px 20px; |
||||||
|
background-color: #fff; |
||||||
|
box-shadow:-2px 0px 57px 0px rgba(192,189,216,0.39); |
||||||
|
} |
||||||
|
.side_icon{ |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
.side_icon i{ |
||||||
|
cursor:pointer; |
||||||
|
font-size: 20px; |
||||||
|
color: #9278FF; |
||||||
|
} |
||||||
|
.side_tree{ |
||||||
|
width: 100%; |
||||||
|
font-size: 14px; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
.side_tree i{ |
||||||
|
color: #9278FF; |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
.fir_back{ |
||||||
|
width: 100%; |
||||||
|
padding: 15px 0; |
||||||
|
background:rgba(255,255,255,1); |
||||||
|
/* box-shadow:1px 14px 29px 0px rgba(138,97,250,0.19); */ |
||||||
|
border-radius:10px; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
.fir_back:first-child{ |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
.fir_back:hover{ |
||||||
|
box-shadow:1px 14px 29px 0px rgba(138,97,250,0.19); |
||||||
|
cursor:pointer; |
||||||
|
} |
||||||
|
.fir_back span{ |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
.two_active{ |
||||||
|
color: #9278FF; |
||||||
|
} |
||||||
|
/* .two_active:hover{ |
||||||
|
color: #9278FF; |
||||||
|
cursor:pointer; |
||||||
|
} */ |
||||||
|
.two_back:hover{ |
||||||
|
cursor:pointer; |
||||||
|
color: #9278FF; |
||||||
|
} |
||||||
|
.mar_top{ |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
.back_active{ |
||||||
|
box-shadow:1px 14px 29px 0px rgba(138,97,250,0.19); |
||||||
|
} |
||||||
|
.bor_lef{ |
||||||
|
padding: 20px 0 0 0; |
||||||
|
margin-left: 40px; |
||||||
|
} |
||||||
|
.three_lef{ |
||||||
|
margin-left: 60px; |
||||||
|
padding: 20px 0; |
||||||
|
} |
||||||
|
.three_text{ |
||||||
|
font-size: 14px; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
.teacher_tab{ |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
.icon_select:before{ |
||||||
|
transform: rotate(180deg); |
||||||
|
} |
||||||
|
.list-enter-active, .list-leave-active { transition: all 1s; } |
||||||
|
.list-enter, .list-leave-to { opacity: 0; transform: translateY(-30px); } |
||||||
|
</style> |
||||||
@ -0,0 +1,250 @@ |
|||||||
|
<template> |
||||||
|
<div class="side_view"> |
||||||
|
<p class="side_icon mab20"> |
||||||
|
<i class="icon-jiahao mar20" @click="addMajor"></i> |
||||||
|
<!-- <i class="icon-delete"></i> --> |
||||||
|
</p> |
||||||
|
<div class="side_tree" v-for="(item,index) in data" :key="index"> |
||||||
|
<div class="item" @click.stop="open(item,1)"> |
||||||
|
<!-- <i :class="{ 'arrowTransform': !item.ifVisible, 'arrowTransformReturn': item.ifVisible}" class="icon-shixiangyoujiantou-"></i> --> |
||||||
|
<img |
||||||
|
v-if="item.children&&item.children.length!=0" |
||||||
|
:class="{ 'arrowTransform': !item.ifVisible, 'arrowTransformReturn': item.ifVisible}" |
||||||
|
src="../../assets/img/icon-xiangyou.png" |
||||||
|
alt |
||||||
|
/> |
||||||
|
<i v-else class="empty"></i> |
||||||
|
<i :class="item.ischeck ? 'icon-yigouxuan' : 'icon-weigouxuan'" @click.stop="fircheckitem(item)"></i> |
||||||
|
<span>{{item.label}}</span> |
||||||
|
<svg t="1604370117041" class="icon edit ft" @click.stop="editMajor(item)" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9029" width="16" height="16"><path d="M511.979 30.125c-266.13 0-481.871 215.741-481.871 481.871s215.741 481.871 481.871 481.871S993.85 778.126 993.85 511.996 778.109 30.125 511.979 30.125zM459.644 693.015c-15.876 18.135-22.818 22.486-44.972 30.657-34.111 12.787-96.687 36.27-137.374 51.515-7.706 3.056-36.735 1.495-24.578-27.036 13.784-39.757 34.045-98.414 45.636-131.894 8.436-23.615 11.758-29.76 28.73-45.603l175.271-175.271 124.055 124.088C626.413 519.471 508.469 642.264 459.644 693.015zM653.084 492.867 528.996 368.779l26.605-26.605 124.088 124.121L653.084 492.867zM759.469 386.482l-53.176 53.209L582.205 315.569l53.209-53.176c19.596-19.596 51.316-19.596 70.912 0l53.209 53.176C779.065 335.166 779.065 366.919 759.469 386.482z" p-id="9030" fill="#9076ff"></path></svg> |
||||||
|
<i class="el-icon-circle-plus ft" @click.stop="addDepartment(item)"></i> |
||||||
|
<i class="icon-delete ft" @click.stop="delMajor(item,index)"></i> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div v-show="item.ifVisible" v-if="item.children&&item.children.length!=0"> |
||||||
|
<div v-for="(item1,index1) in item.children" :key="index1"> |
||||||
|
<div class="item2" @click.stop="open(item1,2)"> |
||||||
|
<i :class="item1.ischeck ? 'icon-yigouxuan' : 'icon-weigouxuan'" @click.stop="twocheckitem(item1)"></i> |
||||||
|
<span>{{item1.label}}</span> |
||||||
|
<svg t="1604370117041" class="icon edit ft" @click.stop="editDepartment(item1)" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9029" width="16" height="16"><path d="M511.979 30.125c-266.13 0-481.871 215.741-481.871 481.871s215.741 481.871 481.871 481.871S993.85 778.126 993.85 511.996 778.109 30.125 511.979 30.125zM459.644 693.015c-15.876 18.135-22.818 22.486-44.972 30.657-34.111 12.787-96.687 36.27-137.374 51.515-7.706 3.056-36.735 1.495-24.578-27.036 13.784-39.757 34.045-98.414 45.636-131.894 8.436-23.615 11.758-29.76 28.73-45.603l175.271-175.271 124.055 124.088C626.413 519.471 508.469 642.264 459.644 693.015zM653.084 492.867 528.996 368.779l26.605-26.605 124.088 124.121L653.084 492.867zM759.469 386.482l-53.176 53.209L582.205 315.569l53.209-53.176c19.596-19.596 51.316-19.596 70.912 0l53.209 53.176C779.065 335.166 779.065 366.919 759.469 386.482z" p-id="9030" fill="#9076ff"></path></svg> |
||||||
|
<i class="icon-delete ft" @click.stop="delDepartment(item1,index1)"></i> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
Array.prototype.removeByValue = function (val) { |
||||||
|
for (var i = 0; i < this.length; i++) { |
||||||
|
if (JSON.stringify(this[i]).indexOf(JSON.stringify(val)) != -1) { |
||||||
|
this.splice(i, 1); |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
chooseList: [] |
||||||
|
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
chooseList(n, o) { |
||||||
|
this.$emit('chooseNode', n); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
props: { |
||||||
|
data: { |
||||||
|
type: Array |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
//点击节点时伸展或收缩列表 |
||||||
|
open(item,type) { |
||||||
|
item.ifVisible = !item.ifVisible; |
||||||
|
type == 1 ? this.$emit('fircheckitem',item) : this.$emit('twocheckitem',item) |
||||||
|
}, |
||||||
|
|
||||||
|
//选中叶子节点时将选中的叶子节点添加进数组，如果叶子节点存在则删除，removeByvalue函数定义在main.js中 |
||||||
|
choose(item) { |
||||||
|
item.ifVisible = !item.ifVisible; |
||||||
|
if (item.ifVisible) { |
||||||
|
this.chooseList.push(item); |
||||||
|
} else { |
||||||
|
this.chooseList.removeByValue(item); |
||||||
|
} |
||||||
|
}, |
||||||
|
fircheckitem(item){ |
||||||
|
this.$emit('fircheckitem',item); |
||||||
|
}, |
||||||
|
twocheckitem(item){ |
||||||
|
this.$emit('twocheckitem',item); |
||||||
|
}, |
||||||
|
// 专业 |
||||||
|
addMajor(){ |
||||||
|
this.$emit('addMajor'); |
||||||
|
}, |
||||||
|
editMajor(item){ |
||||||
|
this.$emit('editMajor',item); |
||||||
|
}, |
||||||
|
delMajor(item,index){ |
||||||
|
this.$emit('delMajor',item,index); |
||||||
|
}, |
||||||
|
// 年级 |
||||||
|
addDepartment(item){ |
||||||
|
this.$emit('addDepartment',item); |
||||||
|
}, |
||||||
|
editDepartment(item){ |
||||||
|
this.$emit('editDepartment',item); |
||||||
|
}, |
||||||
|
delDepart(item,index){ |
||||||
|
this.$emit('delDepart',item,index); |
||||||
|
}, |
||||||
|
// 班级 |
||||||
|
addClass(item){ |
||||||
|
this.$emit('addClass',item); |
||||||
|
}, |
||||||
|
editDepartment(item){ |
||||||
|
this.$emit('editDepartment',item); |
||||||
|
}, |
||||||
|
delDepartment(item,index){ |
||||||
|
this.$emit('delDepartment',item,index); |
||||||
|
}, |
||||||
|
//判断数组中是否包含某个对象 |
||||||
|
isHasObj(arr, val) { |
||||||
|
var flag = 0; //1为有 0为没有 |
||||||
|
for (var i = 0; i < arr.length; i++) { |
||||||
|
if (JSON.stringify(arr[i]).indexOf(JSON.stringify(val)) != -1) { |
||||||
|
flag = 1; |
||||||
|
} |
||||||
|
} |
||||||
|
if (flag == 1) { |
||||||
|
return true; |
||||||
|
} else { |
||||||
|
return false; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
$insideColor: rgba(245, 242, 255, 0.8); //内部节点的边框颜色 |
||||||
|
$outColor: rgba(255, 255, 255, 0.8); //外部节点的边框颜色 |
||||||
|
|
||||||
|
//混合代码,提取item共同样式 |
||||||
|
@mixin public { |
||||||
|
cursor: pointer; |
||||||
|
font-size: 18px; |
||||||
|
color: #333333; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
img { |
||||||
|
height: 20px; |
||||||
|
width: 20px; |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.main { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.item { |
||||||
|
@include public; |
||||||
|
width: 100%; |
||||||
|
padding: 15px 0; |
||||||
|
background:rgba(255,255,255,1); |
||||||
|
box-shadow:1px 14px 29px 0px rgba(138,97,250,0.19); |
||||||
|
border-radius:10px; |
||||||
|
text-align: left; |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
.item:first{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
.item .empty{ |
||||||
|
width: 20px; |
||||||
|
} |
||||||
|
.edit{ |
||||||
|
width: 16px !important; |
||||||
|
height: 16px !important; |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
.item2 { |
||||||
|
@include public; |
||||||
|
margin-top: 20px; |
||||||
|
margin-left:60px |
||||||
|
} |
||||||
|
.item2:hover{ |
||||||
|
color: #9278FF; |
||||||
|
} |
||||||
|
|
||||||
|
//清除ul,li的默认样式 |
||||||
|
ul, |
||||||
|
li { |
||||||
|
padding: 0; |
||||||
|
margin: 0; |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
// 使三角形旋转动画 |
||||||
|
.arrowTransform { |
||||||
|
transition: 0.4s; |
||||||
|
transform-origin: center; |
||||||
|
transform: rotateZ(0deg); |
||||||
|
} |
||||||
|
.arrowTransformReturn { |
||||||
|
transition: 0.4s; |
||||||
|
transform-origin: center; |
||||||
|
transform: rotateZ(90deg); |
||||||
|
} |
||||||
|
|
||||||
|
//复选框样式 |
||||||
|
.checkBox { |
||||||
|
width: 14px; |
||||||
|
height: 14px; |
||||||
|
border-radius: 7px; |
||||||
|
margin-left: 10px; |
||||||
|
margin-right: 10px; |
||||||
|
border: 2px solid rgba(146, 120, 255, 1); |
||||||
|
} |
||||||
|
|
||||||
|
//当点击复选框时候切换背景图片 |
||||||
|
.isActive { |
||||||
|
background: url('../../assets/img/icon-yigouxuan.png'); |
||||||
|
background-size: 14px 14px; /*按比例缩放*/ |
||||||
|
} |
||||||
|
|
||||||
|
.side_view{ |
||||||
|
// height: 800px; |
||||||
|
padding: 40px 20px; |
||||||
|
background-color: #fff; |
||||||
|
box-shadow:-2px 0px 57px 0px rgba(192,189,216,0.39); |
||||||
|
i { |
||||||
|
color: #9278FF; |
||||||
|
} |
||||||
|
} |
||||||
|
.side_icon{ |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
.side_icon i{ |
||||||
|
cursor:pointer; |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
.side_tree{ |
||||||
|
width: 100%; |
||||||
|
font-size: 14px; |
||||||
|
color: #333; |
||||||
|
i{ |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
span{ |
||||||
|
margin-left: 5px; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,689 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div> |
||||||
|
<div class="flex-center mgb20"> |
||||||
|
<p class="hr_tag"></p> |
||||||
|
<span>学生情况分析</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div class="stat"> |
||||||
|
<div class="item"> |
||||||
|
<div class="chart" id="chart1"></div> |
||||||
|
</div> |
||||||
|
<div class="item"> |
||||||
|
<div class="chart" id="chart2"></div> |
||||||
|
</div> |
||||||
|
<div class="item"> |
||||||
|
<div class="chart" id="chart3"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div> |
||||||
|
<el-button type="primary" size="small" round @click="addStudent">新增学生</el-button> |
||||||
|
<el-button type="primary" size="small" round @click="batchImport">批量导入</el-button> |
||||||
|
<el-button type="primary" size="small" round @click="delAllSelection">批量删除</el-button> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-input placeholder="请输入学生姓名/学校名称" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table :data="studentData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" :row-key="getRowKeys"> |
||||||
|
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="account" label="账号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="schoolName" label="院校" align="center"></el-table-column> |
||||||
|
<el-table-column prop="userName" label="学生姓名" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="countries" label="账号角色" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{roleStatus(scope.row.roleId)}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="loginNumber" label="登录次数" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="lastLoginTime" label="上次登录时间" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center" width="300"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" @click="editStudent(scope.row,true)">查看</el-button> |
||||||
|
<el-button type="text" @click="editStudent(scope.row,false)">编辑</el-button> |
||||||
|
<el-button type="text" @click="resetPassword(scope.row)">重置密码</el-button> |
||||||
|
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button> |
||||||
|
<el-switch |
||||||
|
v-model="scope.row.disableAccount" |
||||||
|
:active-value="0" |
||||||
|
:inactive-value="1" |
||||||
|
style="margin: 0 5px" |
||||||
|
@change="switchOff($event,scope.row,scope.$index)" |
||||||
|
></el-switch> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background @current-change="currentChange" :current-page="pageNo" layout="total, prev, pager, next" :total="totals"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-dialog :title="isDetail ? '查看学生' : (isAdd ? '新增学生' : '编辑学生')" :visible.sync="studentVisible" |
||||||
|
width="30%" center @close="closeStudent" class="dialog" :close-on-click-modal="false"> |
||||||
|
<el-form ref="form" :model="form" :rules="rules" :disabled="isDetail" label-width="100px"> |
||||||
|
<el-form-item prop="account" label="账号"> |
||||||
|
<el-input v-model="form.account" placeholder="请输入学生账号" @change="accountChange"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="userName" label="学生姓名"> |
||||||
|
<el-input v-model="form.userName" placeholder="请输入学生姓名"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="roleId" label="账号角色"> |
||||||
|
学生 |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="workNumber" label="学生学号"> |
||||||
|
<el-input v-model="form.workNumber" placeholder="" @change="worknumberChange"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="phone" label="手机号"> |
||||||
|
<el-input v-model="form.phone" placeholder="可用于登录平台，以及找回密码" maxlength="11"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="email" label="邮箱"> |
||||||
|
<el-input v-model="form.email" placeholder="可用于登录平台，以及找回密码"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="schoolAppellationId" label="所在院校"> |
||||||
|
<el-select v-model="form.schoolAppellationId" placeholder="默认为当前院校（可修改）" filterable> |
||||||
|
<el-option v-for="(item,index) in schoolList" :key="index" :label="item.schoolName" :value="item.schoolId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="uniqueIdentificationAccount" label="唯一标识"> |
||||||
|
<el-input disabled v-model="form.uniqueIdentificationAccount"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<span slot="footer" class="dialog-footer" v-if="!isDetail"> |
||||||
|
<el-button @click="studentVisible = false">取消</el-button> |
||||||
|
<el-button type="primary" @click="saveData">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
|
||||||
|
<!-- 批量导入 --> |
||||||
|
<el-dialog title="批量导入" :visible.sync="importVisible" width="24%" center :close-on-click-modal="false"> |
||||||
|
<div style="text-align: center"> |
||||||
|
<div style="margin-bottom: 10px;"><el-button type="primary" @click="downLoad">模板下载<i class="el-icon-download el-icon--right"></i></el-button></div> |
||||||
|
<el-upload |
||||||
|
accept=".xls,.xlsx" |
||||||
|
:on-remove="handleRemove" |
||||||
|
:on-error="uploadError" |
||||||
|
:on-success="uploadSuccess" |
||||||
|
:before-remove="beforeRemove" |
||||||
|
:limit="1" |
||||||
|
:on-exceed="handleExceed" |
||||||
|
:action="this.api.uploadFile" |
||||||
|
:file-list="uploadList" |
||||||
|
name="file" |
||||||
|
> |
||||||
|
<el-button type="primary" class="ml20">上传文件<i class="el-icon-upload2 el-icon--right"></i></el-button> |
||||||
|
</el-upload> |
||||||
|
<el-link v-if="uploadFaild" type="primary" @click="showFaild">部分数据导入失败，查看失败原因</el-link> |
||||||
|
</div> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="importVisible = false">取 消</el-button> |
||||||
|
<el-button type="primary" @click="uploadSure">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
|
||||||
|
<el-dialog |
||||||
|
title="重置密码" |
||||||
|
:visible.sync="passwordVisible" |
||||||
|
:close-on-click-modal="false" |
||||||
|
@close="closePassword" |
||||||
|
width="30%"> |
||||||
|
<el-form ref="passwordForm" :model="form" label-width="60px"> |
||||||
|
<el-form-item label="原密码"> |
||||||
|
<el-input type="password" v-model="passwordForm.password" placeholder="请输入原密码"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="新密码"> |
||||||
|
<el-input type="password" v-model="passwordForm.newPassword" placeholder="请输入新密码" @keyup.enter.native="editPassword"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="新密码"> |
||||||
|
<el-input type="password" v-model="passwordForm.reNewPassword" placeholder="请确认新密码" @keyup.enter.native="editPassword"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="passwordVisible = false">取 消</el-button> |
||||||
|
<el-button type="primary" @click="editPassword">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import echarts from 'echarts' |
||||||
|
export default { |
||||||
|
name: 'dashboard', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
isDetail: false, |
||||||
|
keyword: '', |
||||||
|
schoolId: 2105, |
||||||
|
form: { |
||||||
|
userName: '', |
||||||
|
account: '', |
||||||
|
phone: '', |
||||||
|
uniqueIdentificationAccount: '', |
||||||
|
workNumber: '', |
||||||
|
email: '', |
||||||
|
account: '', |
||||||
|
roleId: 4, |
||||||
|
schoolId: 2105, |
||||||
|
schoolAppellationId: '' |
||||||
|
}, |
||||||
|
rules: { |
||||||
|
account: [ |
||||||
|
{ required: true, message: '请输入账号', trigger: 'blur' }, |
||||||
|
{ |
||||||
|
pattern: /^[a-zA-Z0-9_-]{1,16}$/, |
||||||
|
message: '请输入正确的账号', |
||||||
|
trigger: 'blur' |
||||||
|
} |
||||||
|
], |
||||||
|
userName: [ |
||||||
|
{ required: true, message: '请输入学生姓名', trigger: 'blur' } |
||||||
|
], |
||||||
|
schoolAppellationId: [ |
||||||
|
{ required: true, message: '请选择所在院校', trigger: 'change' } |
||||||
|
], |
||||||
|
// uniqueIdentificationAccount: [ |
||||||
|
// { required: true, message: '请输入唯一标识', trigger: 'blur' }, |
||||||
|
// ], |
||||||
|
workNumber: [ |
||||||
|
{ required: true, message: '请输入学生学号', trigger: 'blur' } |
||||||
|
], |
||||||
|
phone: [ |
||||||
|
// { required: true, message: '请输入职工手机号', trigger: 'blur' }, |
||||||
|
{ |
||||||
|
pattern: /^1[3456789]\d{9}$/, |
||||||
|
message: '请输入正确的手机号', |
||||||
|
trigger: 'blur' |
||||||
|
} |
||||||
|
], |
||||||
|
email: [ |
||||||
|
// { required: true, message: '请输入邮箱', trigger: 'blur' }, |
||||||
|
{ |
||||||
|
pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/, |
||||||
|
message: '请输入正确的邮箱', |
||||||
|
trigger: 'blur' |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
studentData:[], |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
totals: 0, |
||||||
|
multipleSelection: [], |
||||||
|
uploadList: [], |
||||||
|
importVisible: false, |
||||||
|
isAdd: true, |
||||||
|
studentVisible: false, |
||||||
|
accountReapeat: false, |
||||||
|
originalAccount: '', |
||||||
|
phoneRepeat: false, |
||||||
|
workNumberRepeat: false, |
||||||
|
originalWorkNumber: '', |
||||||
|
isDetail: false, |
||||||
|
resetVisible: false, |
||||||
|
passwordVisible: false, |
||||||
|
passwordForm: { |
||||||
|
password: '', |
||||||
|
newPassword: '', |
||||||
|
reNewPassword: '' |
||||||
|
}, |
||||||
|
schoolList: [], |
||||||
|
uploadFaild: false, |
||||||
|
token: '', |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.form.schoolAppellationId = 2105 |
||||||
|
this.getData() |
||||||
|
this.getSchoolData() |
||||||
|
this.getStat() |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
keyword: function(val) { |
||||||
|
clearTimeout(this.searchTimer) |
||||||
|
this.searchTimer = setTimeout(() => { |
||||||
|
this.getData() |
||||||
|
},500) |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData() { |
||||||
|
let data = { |
||||||
|
schoolId: '', |
||||||
|
seachContent: this.encodeString(this.keyword), |
||||||
|
page: this.pageNo, |
||||||
|
size: this.pageSize |
||||||
|
} |
||||||
|
this.$get(this.api.queryStudent,data).then(res => { |
||||||
|
this.studentData = res.data.list |
||||||
|
this.totals = res.data.totalCount |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
getStat() { |
||||||
|
this.$get(this.api.queryStudentData).then(res => { |
||||||
|
let stat1 = [] |
||||||
|
res.data['学生分布情况'].map(n => { |
||||||
|
stat1.push({ |
||||||
|
name: n.schoolName, |
||||||
|
value: n.schoolNumber |
||||||
|
}) |
||||||
|
}) |
||||||
|
let myChart = echarts.init(document.getElementById('chart1')) |
||||||
|
myChart.setOption({ |
||||||
|
title: { text: '实验学生的学校分布情况' }, |
||||||
|
tooltip: { |
||||||
|
trigger: 'item' |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
top: 'bottom' |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: '学校分布情况', |
||||||
|
type: 'pie', |
||||||
|
center: ['50%', '47%'], |
||||||
|
top: 30, |
||||||
|
bottom: 50, |
||||||
|
// radius: ['40%', '70%'], |
||||||
|
avoidLabelOverlap: false, |
||||||
|
// roseType: 'area', |
||||||
|
itemStyle: { |
||||||
|
borderRadius: 10, |
||||||
|
borderColor: '#fff', |
||||||
|
borderWidth: 2 |
||||||
|
}, |
||||||
|
// emphasis: { |
||||||
|
// label: { |
||||||
|
// show: true, |
||||||
|
// fontSize: '20', |
||||||
|
// fontWeight: 'bold' |
||||||
|
// } |
||||||
|
// }, |
||||||
|
labelLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
data: stat1 |
||||||
|
} |
||||||
|
] |
||||||
|
}) |
||||||
|
|
||||||
|
let schoolList = [] |
||||||
|
let frequencyList = [] |
||||||
|
res.data['学生平均登录情况'].map(n => { |
||||||
|
schoolList.push(n.schoolName) |
||||||
|
frequencyList.push(n.studentLoginNumber) |
||||||
|
}) |
||||||
|
let myChart1 = echarts.init(document.getElementById('chart2')) |
||||||
|
myChart1.setOption({ |
||||||
|
title: { text: '实验学生平均登录次数' }, |
||||||
|
tooltip: { |
||||||
|
trigger: 'item' |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: 'category', |
||||||
|
data: schoolList |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
type: 'value' |
||||||
|
}, |
||||||
|
series: [{ |
||||||
|
data: frequencyList, |
||||||
|
type: 'bar', |
||||||
|
smooth: true, |
||||||
|
color: ['#8191fd'] |
||||||
|
}] |
||||||
|
}) |
||||||
|
|
||||||
|
let schoolList1 = [] |
||||||
|
let timeList = [] |
||||||
|
res.data['学生实验平均时长'].map(n => { |
||||||
|
schoolList1.push(n.schoolName) |
||||||
|
timeList.push(n.studentAvgTime) |
||||||
|
}) |
||||||
|
let myChart2 = echarts.init(document.getElementById('chart3')) |
||||||
|
myChart2.setOption({ |
||||||
|
title: { |
||||||
|
text: '实验学生的平均实验时间情况', |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'axis', |
||||||
|
axisPointer: { |
||||||
|
type: 'shadow' |
||||||
|
} |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
left: '3%', |
||||||
|
right: '4%', |
||||||
|
bottom: '3%', |
||||||
|
containLabel: true |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: 'value', |
||||||
|
boundaryGap: [0, 0.01] |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
type: 'category', |
||||||
|
data: schoolList1 |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: '2011年', |
||||||
|
type: 'bar', |
||||||
|
data: timeList, |
||||||
|
color: ['#9278ff'] |
||||||
|
}, |
||||||
|
] |
||||||
|
}) |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
saveData() { |
||||||
|
this.$refs.form.validate((valid) => { |
||||||
|
if (valid) { |
||||||
|
if(this.accountReapeat) return this.$message.warning('该账号已存在') |
||||||
|
if(this.workNumberRepeat) return this.$message.warning('该学生学号已存在') |
||||||
|
if(this.phoneRepeat) return this.$message.warning('该手机号已存在') |
||||||
|
if(this.form.studentId) { |
||||||
|
this.$put(this.api.updateStudent,this.form).then(res => { |
||||||
|
if(res.errmessage == 'success') { |
||||||
|
this.$message.success('提交成功！'); |
||||||
|
this.studentVisible = false |
||||||
|
this.getData() |
||||||
|
this.getStat() |
||||||
|
}else{ |
||||||
|
this.$message.error(res.message); |
||||||
|
} |
||||||
|
}).catch(res => {}); |
||||||
|
}else{ |
||||||
|
this.form.uniqueIdentificationAccount = new Date().getTime() |
||||||
|
this.$post(this.api.addStudent,this.form).then(res => { |
||||||
|
if(res.errmessage == 'success') { |
||||||
|
this.$message.success('提交成功！'); |
||||||
|
this.studentVisible = false |
||||||
|
this.getData() |
||||||
|
this.getStat() |
||||||
|
}else{ |
||||||
|
this.$message.error(res.message); |
||||||
|
} |
||||||
|
}).catch(res => {}); |
||||||
|
} |
||||||
|
}else{ |
||||||
|
return false; |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
async accountChange(){ |
||||||
|
if(this.form.account !== this.originalAccount){ |
||||||
|
let res = await this.$get(this.api.queryAccountIsExist, { |
||||||
|
account: this.encodeString(this.form.account), |
||||||
|
schoolId: this.schoolId |
||||||
|
}); |
||||||
|
if(res.message.user.length){ |
||||||
|
this.$message.warning('该账号已存在'); |
||||||
|
this.accountReapeat = true |
||||||
|
}else{ |
||||||
|
this.accountReapeat = false |
||||||
|
} |
||||||
|
}else{ |
||||||
|
this.accountReapeat = false |
||||||
|
} |
||||||
|
}, |
||||||
|
async worknumberChange(){ |
||||||
|
// if(this.form.workNumber !== this.originalWorkNumber){ |
||||||
|
let res = await this.$get(this.api.queryWorkNumberIsExist, { |
||||||
|
workNumber: this.encodeString(this.form.workNumber), |
||||||
|
schoolAppellationId: this.form.schoolAppellationId |
||||||
|
}); |
||||||
|
if(res.status != 200){ |
||||||
|
this.$message.warning('该学生学号已存在'); |
||||||
|
this.workNumberRepeat = true |
||||||
|
}else{ |
||||||
|
this.workNumberRepeat = false |
||||||
|
} |
||||||
|
// }else{ |
||||||
|
// this.workNumberRepeat = false |
||||||
|
// } |
||||||
|
}, |
||||||
|
async phoneChange(){ |
||||||
|
let res = await this.$get(this.api.queryPhone, { phone: this.form.phone }); |
||||||
|
if(res.message.length != 0){ |
||||||
|
this.$message.warning('该手机号已存在'); |
||||||
|
this.phoneRepeat = true |
||||||
|
}else{ |
||||||
|
this.phoneRepeat = false |
||||||
|
} |
||||||
|
}, |
||||||
|
batchImport(){ |
||||||
|
this.importVisible = true |
||||||
|
this.uploadList = [] |
||||||
|
this.uploadFaild = false |
||||||
|
}, |
||||||
|
// 获取学校/客户名称 |
||||||
|
getSchool(){ |
||||||
|
this.clearcity() |
||||||
|
this.getSchoolData() |
||||||
|
this.pageNo = 1 |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
getSchoolData(){ |
||||||
|
let data = { |
||||||
|
schoolName: '', |
||||||
|
provinceId: '', |
||||||
|
cityId: '' |
||||||
|
} |
||||||
|
this.$get(this.api.querySchool,data).then(res => { |
||||||
|
this.schoolList = res.message |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
closeStudent(){ |
||||||
|
this.isDetail = false |
||||||
|
this.$refs.form.clearValidate() |
||||||
|
this.form = { |
||||||
|
schoolId: 2105, |
||||||
|
userName: '', |
||||||
|
account: '', |
||||||
|
phone: '', |
||||||
|
uniqueIdentificationAccount: '', |
||||||
|
workNumber: '', |
||||||
|
email: '', |
||||||
|
account: '', |
||||||
|
roleId: 4, |
||||||
|
schoolAppellationId: 2105 |
||||||
|
} |
||||||
|
}, |
||||||
|
currentChange(val) { |
||||||
|
this.pageNo = val; |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
addStudent(){ |
||||||
|
this.isAdd = true |
||||||
|
this.studentVisible = true |
||||||
|
}, |
||||||
|
editStudent(row,isDetail){ |
||||||
|
this.isAdd = false |
||||||
|
this.isDetail = isDetail |
||||||
|
this.studentVisible = true |
||||||
|
this.form = Object.assign({},row) |
||||||
|
this.originalWorkNumber = row.workNumber |
||||||
|
this.originalAccount = row.account |
||||||
|
this.$nextTick(() => { |
||||||
|
this.$refs.form.clearValidate() |
||||||
|
}) |
||||||
|
}, |
||||||
|
downLoad(){ |
||||||
|
location.href = this.api.download |
||||||
|
}, |
||||||
|
handleDelete(row) { |
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$post(this.api.daleteStudent,[row.studentId]).then(res => { |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.getData() |
||||||
|
this.getStat() |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}, |
||||||
|
getRowKeys(row) { |
||||||
|
return row.userId; |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val; |
||||||
|
}, |
||||||
|
delAllSelection() { |
||||||
|
if(this.multipleSelection.length != ''){ |
||||||
|
let newArr = this.multipleSelection |
||||||
|
let delList = newArr.map(item => { |
||||||
|
return item.studentId |
||||||
|
}) |
||||||
|
this.$confirm('确定要删除选中用户吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
let data = delList |
||||||
|
this.$post(this.api.daleteStudent,data).then(res => { |
||||||
|
this.$refs.table.clearSelection() |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.getData() |
||||||
|
this.getStat() |
||||||
|
}).catch(res => {}); |
||||||
|
}).catch(() => {}); |
||||||
|
}else{ |
||||||
|
this.$message.error('请先选择数据 ！'); |
||||||
|
} |
||||||
|
}, |
||||||
|
resetPassword(row){ |
||||||
|
this.$confirm(`重置后的密码为：${this.$config.initialPassword}，确定重置？`, '提示', { |
||||||
|
}).then(() => { |
||||||
|
this.$put(this.api.reSetPassword,[row.userId]).then(res => { |
||||||
|
if(res.errmessage == 'success') this.$message.success('重置成功') |
||||||
|
}).catch(res => {}); |
||||||
|
}).catch(() => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
switchOff(val,row,index) { |
||||||
|
let data = { |
||||||
|
studentId: row.studentId, |
||||||
|
disableAccount: row.disableAccount ? 0 : 1 |
||||||
|
} |
||||||
|
this.$put(this.api.disableAccount,data) |
||||||
|
.then(res => {}) |
||||||
|
.catch(err => {}); |
||||||
|
}, |
||||||
|
closePassword() { |
||||||
|
this.passwordForm = { |
||||||
|
password: '', |
||||||
|
newPassword: '', |
||||||
|
reNewPassword: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
editPassword(){ |
||||||
|
if(!this.passwordForm.password) return this.$message.warning('请输入原密码') |
||||||
|
if(!this.passwordForm.newPassword) return this.$message.warning('请输入新密码') |
||||||
|
if(!this.passwordForm.reNewPassword) return this.$message.warning('请确认新密码') |
||||||
|
if(this.passwordForm.newPassword.length < 6 || this.passwordForm.reNewPassword.length < 6) return this.$message.warning('请输入6位数以上的密码') |
||||||
|
if(this.passwordForm.newPassword !== this.passwordForm.reNewPassword) return this.$message.warning('输入的新密码不一致，请重新确认') |
||||||
|
if(this.passwordForm.password === this.passwordForm.newPassword) return this.$message.warning('原密码跟新密码不能一致') |
||||||
|
|
||||||
|
let data = this.passwordForm |
||||||
|
data.userid = this.userId |
||||||
|
this.$put(this.api.reSetPassword,data) |
||||||
|
.then(res => { |
||||||
|
if(res.errmessage == 'success'){ |
||||||
|
this.$message.success('更换成功') |
||||||
|
this.passwordVisible = false |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
console.log(err); |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 上传文件 |
||||||
|
handleExceed(files, fileList) { |
||||||
|
this.$message.warning( |
||||||
|
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` |
||||||
|
); |
||||||
|
}, |
||||||
|
showFaild(){ |
||||||
|
location.href = `${this.api.export_failure}?token=${this.token}` |
||||||
|
}, |
||||||
|
uploadSuccess(res, file, fileList) { |
||||||
|
this.uploadFaild = false |
||||||
|
if(res.errmessage == 'success'){ |
||||||
|
if(res.data.token){ |
||||||
|
this.token = res.data.token |
||||||
|
this.uploadFaild = true |
||||||
|
}else{ |
||||||
|
this.$message.success('上传成功') |
||||||
|
} |
||||||
|
}else{ |
||||||
|
res.message ? this.$message.error(res.message) : this.$message.error('上传失败，请检查数据') |
||||||
|
} |
||||||
|
}, |
||||||
|
uploadError(err, file, fileList) { |
||||||
|
this.$message({ |
||||||
|
message: "上传出错，请重试！", |
||||||
|
type: "error", |
||||||
|
center: true |
||||||
|
}); |
||||||
|
}, |
||||||
|
beforeRemove(file, fileList) { |
||||||
|
return this.$confirm(`确定移除 ${file.name}？`); |
||||||
|
}, |
||||||
|
handleRemove(file, fileList) { |
||||||
|
this.uploadList = fileList |
||||||
|
this.uploadFaild = false |
||||||
|
}, |
||||||
|
uploadSure(){ |
||||||
|
this.importVisible = false |
||||||
|
this.pageNo = 1 |
||||||
|
this.keyword = '' |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.mag{ |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
.no-mb /deep/.el-form-item{ |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
/deep/.el-row{ |
||||||
|
padding: 0 !important; |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
.stat{ |
||||||
|
display: flex; |
||||||
|
.item{ |
||||||
|
flex: 1; |
||||||
|
padding: 15px; |
||||||
|
margin-right: 20px; |
||||||
|
box-shadow: 1px 1px 3px 1px rgba(146,120,255,.3); |
||||||
|
box-sizing: border-box; |
||||||
|
&:last-child{ |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
.chart{ |
||||||
|
height: 300px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
<template> |
||||||
|
<div class="Achievement-container"> |
||||||
|
<div class="tabs"> |
||||||
|
<a class="item" v-for="(item,index) in tabs" :key="index" :class="{active: index == activeName}" @click="tabChange(index)">{{item}}</a> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="score-table" v-if="activeName == 'first'"> |
||||||
|
<staff></staff> |
||||||
|
</div> |
||||||
|
<div class="score-table" v-else> |
||||||
|
<role></role> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import staff from './Staff.vue'; |
||||||
|
import role from './Role.vue'; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
activeName: 'first', |
||||||
|
userId: this.$store.state.userId, |
||||||
|
tabs: { |
||||||
|
first: '员工管理', |
||||||
|
second: '角色权限' |
||||||
|
} |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
staff, |
||||||
|
role |
||||||
|
}, |
||||||
|
created() { |
||||||
|
|
||||||
|
}, |
||||||
|
methods: { |
||||||
|
tabChange(index){ |
||||||
|
this.activeName = index |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scopted> |
||||||
|
.Achievement-container { |
||||||
|
width: 100%; |
||||||
|
box-shadow: 0px 0px 21px 0px rgba(48, 115, 248, 0.1); |
||||||
|
text-align: center; |
||||||
|
overflow: hidden; |
||||||
|
.header { |
||||||
|
width: 97%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
margin: 0 auto; |
||||||
|
margin-top: 16px; |
||||||
|
p { |
||||||
|
margin-top: 14px; |
||||||
|
font-size: 20px; |
||||||
|
font-family: MicrosoftYaHeil; |
||||||
|
color: #333333; |
||||||
|
} |
||||||
|
} |
||||||
|
.score-table { |
||||||
|
margin: 0 auto; |
||||||
|
margin-top: 18px; |
||||||
|
position: relative; |
||||||
|
.block { |
||||||
|
position: absolute; |
||||||
|
right: 0px; |
||||||
|
bottom: -50px; |
||||||
|
} |
||||||
|
} |
||||||
|
.el-pagination.is-background .el-pager li:not(.disabled).active { |
||||||
|
background-color: #9278ff; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
.tabs{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
padding: 20px 1.5% 20px; |
||||||
|
margin: 0; |
||||||
|
z-index: 999; |
||||||
|
background-color: #fff; |
||||||
|
.item{ |
||||||
|
padding: 12px 20px; |
||||||
|
margin-right: 10px; |
||||||
|
color:#606266; |
||||||
|
line-height: 1; |
||||||
|
border-radius: 4px; |
||||||
|
background-color: #fff; |
||||||
|
border: 1px solid #dcdfe6; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
&.active{ |
||||||
|
color: #fff; |
||||||
|
background-color: #9278ff; |
||||||
|
border-color: #9278ff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,307 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between"> |
||||||
|
<div class="per_title" v-preventReClick @click="goback()"> |
||||||
|
<i class="el-icon-arrow-left"></i> |
||||||
|
<span class="per_back">返回</span> |
||||||
|
<span class="per_school">老师评语</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div> |
||||||
|
<p class="mgb20">评语模板名称</p> |
||||||
|
<el-input |
||||||
|
placeholder="请输入评语模板名称" |
||||||
|
clearable |
||||||
|
class="inline-input" |
||||||
|
></el-input> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<p class="l-title">老师寄语</p> |
||||||
|
<el-switch></el-switch> |
||||||
|
</div> |
||||||
|
<div class="mgb20" style="display: flex;justify-content: flex-end;"> |
||||||
|
<div> |
||||||
|
<el-button type="primary" size="small" round>导入</el-button> |
||||||
|
<el-button type="primary" size="small" round>删除</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table :data="listData" class="table" stripe header-align="center" row-key="id"> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{scope.$index+1}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="name" label="分数" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<div class="inline"> |
||||||
|
<el-select v-model="scope.row.score1" size="mini"> |
||||||
|
<el-option v-for="item in scoreList" :key="item.id" :label="item.label" :value="item.id"></el-option> |
||||||
|
</el-select> |
||||||
|
<span>——</span> |
||||||
|
<el-select v-model="scope.row.score2" size="mini"> |
||||||
|
<el-option v-for="item in scoreList" :key="item.id" :label="item.label" :value="item.id"></el-option> |
||||||
|
</el-select> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="评语" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-input type="textarea" rows="2" v-model="scope.row.comment"></el-input> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="plus" @click="addData"> |
||||||
|
<i class="el-icon-circle-plus-outline"></i> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<p class="l-title">老师签名</p> |
||||||
|
<el-switch></el-switch> |
||||||
|
</div> |
||||||
|
<div class="ags"> |
||||||
|
<div class="item"> |
||||||
|
<el-radio v-model="autograph" label="1">已有签名</el-radio> |
||||||
|
<el-select v-model="agVal" size="mini"> |
||||||
|
<el-option v-for="item in autographList" :key="item.id" :label="item.name" :value="item.id"></el-option> |
||||||
|
</el-select> |
||||||
|
<el-upload |
||||||
|
class="avatar-uploader" |
||||||
|
accept=".jpg,.png,.jpeg,.gif" |
||||||
|
:on-remove="handleRemove" |
||||||
|
:on-error="uploadError" |
||||||
|
:on-success="uploadSuccess" |
||||||
|
:before-remove="beforeRemove" |
||||||
|
:limit="1" |
||||||
|
:on-exceed="handleExceed" |
||||||
|
:action="this.api.fileupload" |
||||||
|
name="file" |
||||||
|
> |
||||||
|
<img v-if="coverUrl" :src="coverUrl" class="avatar"> |
||||||
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
||||||
|
</el-upload> |
||||||
|
</div> |
||||||
|
<div class="item"> |
||||||
|
<el-radio v-model="autograph" label="2">重新上传</el-radio> |
||||||
|
<el-select v-model="agVal" size="mini"> |
||||||
|
<el-option v-for="item in autographList" :key="item.id" :label="item.name" :value="item.id"></el-option> |
||||||
|
</el-select> |
||||||
|
<el-upload |
||||||
|
class="avatar-uploader" |
||||||
|
accept=".jpg,.png,.jpeg,.gif" |
||||||
|
:on-remove="handleRemove" |
||||||
|
:on-error="uploadError" |
||||||
|
:on-success="uploadSuccess" |
||||||
|
:before-remove="beforeRemove" |
||||||
|
:limit="1" |
||||||
|
:on-exceed="handleExceed" |
||||||
|
:action="this.api.fileupload" |
||||||
|
name="file" |
||||||
|
> |
||||||
|
<img v-if="coverUrl" :src="coverUrl" class="avatar"> |
||||||
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
||||||
|
</el-upload> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</el-card> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'teachercomment', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
scoreList: [ |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
label: 1 |
||||||
|
},{ |
||||||
|
id: 2, |
||||||
|
label: 2 |
||||||
|
},{ |
||||||
|
id: 3, |
||||||
|
label: 3 |
||||||
|
}, |
||||||
|
], |
||||||
|
listData: [ |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
score1: 1, |
||||||
|
score2: 10, |
||||||
|
comment: '' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
score1: 1, |
||||||
|
score2: 10, |
||||||
|
comment: '' |
||||||
|
}, |
||||||
|
], |
||||||
|
autograph: '1', |
||||||
|
agVal: 1, |
||||||
|
autographList: [ |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
name: '签名一' |
||||||
|
},{ |
||||||
|
id: 2, |
||||||
|
name: '签名二' |
||||||
|
}, |
||||||
|
] |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
// this.getData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData() { |
||||||
|
// let data = { |
||||||
|
// countries: this.form.countries, |
||||||
|
// provinceId: this.form.provinces, |
||||||
|
// cityId: this.form.city, |
||||||
|
// searchContent: this.form.keyword, |
||||||
|
// pageNo: this.pageNo, |
||||||
|
// pageSize: this.pageSize |
||||||
|
// } |
||||||
|
// this.$get(this.api.queryCustomer,data).then(res => { |
||||||
|
// this.listData = res.message.rows |
||||||
|
// this.totals = res.message.total |
||||||
|
// }).catch(res => {}); |
||||||
|
}, |
||||||
|
entry(){ |
||||||
|
this.$router.push('report') |
||||||
|
}, |
||||||
|
goback() { |
||||||
|
this.$confirm('确定返回？未更新的信息将不会保存。', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$router.back() |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}, |
||||||
|
handleExceed(files, fileList) { |
||||||
|
this.$message.warning( |
||||||
|
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` |
||||||
|
); |
||||||
|
}, |
||||||
|
uploadSuccess(res, file, fileList) { |
||||||
|
this.coverUrl = res.data.filesResult.fileUrl |
||||||
|
}, |
||||||
|
uploadLgSuccess(res, file, fileList) { |
||||||
|
this.carouselUrl = res.data.filesResult.fileUrl |
||||||
|
}, |
||||||
|
uploadError(err, file, fileList) { |
||||||
|
this.$message({ |
||||||
|
message: "上传出错，请重试！", |
||||||
|
type: "error", |
||||||
|
center: true |
||||||
|
}); |
||||||
|
}, |
||||||
|
beforeRemove(file, fileList) { |
||||||
|
return this.$confirm(`确定移除 ${file.name}？`); |
||||||
|
}, |
||||||
|
handleRemove(file, fileList) { |
||||||
|
this.uploadList = fileList |
||||||
|
}, |
||||||
|
addData(){ |
||||||
|
this.listData.push({ |
||||||
|
id: '', |
||||||
|
score1: '', |
||||||
|
score2: '', |
||||||
|
comment: '', |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.inline-input{ |
||||||
|
width: 200px; |
||||||
|
} |
||||||
|
.inline{ |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
.el-select{ |
||||||
|
width: 100px; |
||||||
|
margin: 0 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
.plus{ |
||||||
|
padding: 10px 0; |
||||||
|
text-align: center; |
||||||
|
background-color: #9278FF; |
||||||
|
cursor: pointer; |
||||||
|
i{ |
||||||
|
font-size: 24px; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
.ags{ |
||||||
|
display: flex; |
||||||
|
|
||||||
|
.item:first-child{ |
||||||
|
padding-right: 20px; |
||||||
|
margin-right: 20px; |
||||||
|
border-right: 1px dashed #ccc; |
||||||
|
} |
||||||
|
.el-radio{ |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
/deep/.el-select{ |
||||||
|
.el-input{ |
||||||
|
width: 150px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.avatar-uploader{ |
||||||
|
margin-top: 15px; |
||||||
|
} |
||||||
|
.avatar-uploader /deep/.el-upload { |
||||||
|
width: 220px; |
||||||
|
height: 140px; |
||||||
|
border: 1px dashed #d9d9d9; |
||||||
|
border-radius: 6px; |
||||||
|
cursor: pointer; |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
.avatar-uploader-lg /deep/.el-upload { |
||||||
|
width: 100%; |
||||||
|
height: 300px; |
||||||
|
} |
||||||
|
.avatar-uploader .el-upload:hover { |
||||||
|
border-color: #cb221c; |
||||||
|
} |
||||||
|
.avatar-uploader-icon { |
||||||
|
font-size: 28px; |
||||||
|
color: #8c939d; |
||||||
|
width: 178px !important; |
||||||
|
height: 178px; |
||||||
|
line-height: 178px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.avatar { |
||||||
|
width: 220px; |
||||||
|
height: 140px; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.avatar-lg { |
||||||
|
width: 100%; |
||||||
|
height: 300px; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
@ -0,0 +1,350 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div> |
||||||
|
<div class="flex-center mgb20"> |
||||||
|
<p class="hr_tag"></p> |
||||||
|
<span>筛选</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-form label-width="80px"> |
||||||
|
<el-row> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="国家"> |
||||||
|
<el-select v-model="form.countries" clearable placeholder="请选择国家"> |
||||||
|
<el-option v-for="(item,index) in countryList" :key="index" :label="item.name" :value="item.value"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="省份"> |
||||||
|
<el-select v-model="form.provinces" clearable placeholder="请选择省份" @change="getCity" @clear="clearprovince()"> |
||||||
|
<el-option v-for="(item,index) in provinceList" :key="index" :label="item.provinceName" :value="item.provinceId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="城市"> |
||||||
|
<el-select v-model="form.city" clearable placeholder="请选择城市" |
||||||
|
:disabled="form.provinces ? false : true" @clear="clearcity()" @change="getSchool"> |
||||||
|
<el-option v-for="(item,index) in cityList" :key="index" :label="item.cityName" :value="item.cityId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="学校"> |
||||||
|
<el-select v-model="form.schoolId" clearable placeholder="请选择学校" :disabled="form.city ? false : true" @change="getData()"> |
||||||
|
<el-option v-for="(item,index) in schoolList" :key="index" :label="item.schoolName" :value="item.schoolId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
|
||||||
|
<el-row class="no-mb"> |
||||||
|
<el-col :span="10"> |
||||||
|
<el-form-item label="创建时间" class="userRadio"> |
||||||
|
<el-radio-group v-model="form.month" @change="itemRadio"> |
||||||
|
<el-radio v-for="(item,index) in dateList" :key="index" :label="item.id" border>{{item.name}}</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="8"> |
||||||
|
<el-form-item label="自定义"> |
||||||
|
<el-date-picker v-model="form.date" align="right" unlink-panels type="daterange" |
||||||
|
start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="selectTime" clearable></el-date-picker> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item> |
||||||
|
<el-input placeholder="请输入用户姓名/学校名称" prefix-icon="el-icon-search" v-model="form.keyword" clearable @keyup.enter.native="onSearch"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div class="flex-center"> |
||||||
|
<p class="hr_tag"></p> |
||||||
|
<span>用户列表</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-button type="primary" size="small" round class="mag" @click="adduser">新增用户</el-button> |
||||||
|
<el-button type="primary" size="small" round @click="delAllSelection">批量删除</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table :data="userData" class="table" stripe header-align="center" @selection-change="handleSelectionChange" :row-key="getRowKeys"> |
||||||
|
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="account" label="用户账号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="username" label="姓名" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="countries" label="国家" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="provinceName" label="省份" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="cityName" label="城市" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="schoolName" label="学校名称" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="creationTime" label="创建时间" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="logInNumber" label="登录次数" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text">密码重置</el-button> |
||||||
|
<el-button type="text">查看</el-button> |
||||||
|
<el-button type="text" @click="edit(scope.row)">编辑</el-button> |
||||||
|
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background @current-change="currentChange" :current-page="pageNo" layout="total, prev, pager, next" :total="totals"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import bus from '../common/bus'; |
||||||
|
export default { |
||||||
|
name: 'dashboard', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
form: { |
||||||
|
name: '', |
||||||
|
countries: '中国', |
||||||
|
provinces: '', |
||||||
|
city: '', |
||||||
|
schoolId: '', |
||||||
|
keyword: '', |
||||||
|
date:'', |
||||||
|
startTime: '', |
||||||
|
endTime: '', |
||||||
|
month: '' |
||||||
|
}, |
||||||
|
accountRoleList: [{ |
||||||
|
name: '超级管理员', |
||||||
|
value: 1 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '管理员', |
||||||
|
value: 2 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '教师', |
||||||
|
value: 3 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '学生', |
||||||
|
value: 4 |
||||||
|
}], |
||||||
|
countryList: [{ |
||||||
|
name:'中国' |
||||||
|
}], |
||||||
|
provinceList: this.$store.state.provinceList, |
||||||
|
cityList: [], |
||||||
|
schoolList: [], |
||||||
|
userData:[], |
||||||
|
dateList: [{ |
||||||
|
id: '', |
||||||
|
name: '不限' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 3, |
||||||
|
name: '3个月内' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 6, |
||||||
|
name: '6个月内' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 9, |
||||||
|
name: '9个月内' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 12, |
||||||
|
name: '1年内' |
||||||
|
}], |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
totals: 1, |
||||||
|
multipleSelection: [] |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
// this.getData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData() { |
||||||
|
// let data = { |
||||||
|
// countries: this.form.countries, |
||||||
|
// provinceId: this.form.provinces, |
||||||
|
// cityId: this.form.city, |
||||||
|
// schoolId: this.form.schoolId, |
||||||
|
// month: this.form.month, |
||||||
|
// creationTime: this.form.startTime, |
||||||
|
// endTime: this.form.endTime, |
||||||
|
// searchContent: this.form.keyword, |
||||||
|
// pageNo: this.pageNo, |
||||||
|
// pageSize: this.pageSize |
||||||
|
// } |
||||||
|
// this.$get(this.api.queryUser,data).then(res => { |
||||||
|
// this.userData = res.message.rows |
||||||
|
// this.totals = res.message.total |
||||||
|
// }).catch(res => {}); |
||||||
|
}, |
||||||
|
// 清除省份 |
||||||
|
clearprovince(){ |
||||||
|
this.form.city = '', |
||||||
|
this.form.schoolId = '' |
||||||
|
}, |
||||||
|
// 获取城市 |
||||||
|
getCity(){ |
||||||
|
this.clearprovince() |
||||||
|
this.getCityData() |
||||||
|
this.pageNo = 1 |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
getCityData(){ |
||||||
|
let data = { |
||||||
|
provinceId: this.form.provinces |
||||||
|
} |
||||||
|
this.$get(this.api.queryCity,data).then(res => { |
||||||
|
this.cityList = res.message |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
// 清除城市 |
||||||
|
clearcity(){ |
||||||
|
this.form.schoolId = '' |
||||||
|
}, |
||||||
|
// 获取学校/客户名称 |
||||||
|
getSchool(){ |
||||||
|
this.clearcity() |
||||||
|
this.getSchoolData() |
||||||
|
this.pageNo = 1 |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
getSchoolData(){ |
||||||
|
let data = { |
||||||
|
provinceId: this.form.provinces, |
||||||
|
cityId: this.form.city |
||||||
|
} |
||||||
|
this.$get(this.api.querySchool,data).then(res => { |
||||||
|
this.schoolList = res.message |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
onSearch(){ |
||||||
|
this.pageNo = 1 |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
itemRadio(val){ |
||||||
|
this.form.month = val |
||||||
|
this.form.date = '' |
||||||
|
this.form.startTime = '' |
||||||
|
this.form.endTime = '' |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
selectTime(val){ |
||||||
|
if(val){ |
||||||
|
this.form.startTime = val[0] |
||||||
|
this.form.endTime = val[1] |
||||||
|
}else{ |
||||||
|
this.form.startTime = '' |
||||||
|
this.form.endTime = '' |
||||||
|
} |
||||||
|
this.form.month = '' |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
currentChange(val) { |
||||||
|
this.pageNo = val; |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
permission(){ |
||||||
|
this.$router.push('/permission') |
||||||
|
}, |
||||||
|
adduser(){ |
||||||
|
this.$store.commit("userData", { user_id : '', roleId: ''}); |
||||||
|
this.$router.push('/adduser'); |
||||||
|
}, |
||||||
|
edit(row){ |
||||||
|
this.$store.commit("userData", { user_id : row.userId }); |
||||||
|
this.$router.push('/adduser'); |
||||||
|
}, |
||||||
|
handleDelete(row) { |
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
let obj = {} |
||||||
|
Object.assign(obj, |
||||||
|
{ |
||||||
|
userId:row.userId, |
||||||
|
phone: row.phone |
||||||
|
}) |
||||||
|
let arr = [] |
||||||
|
arr.push(obj) |
||||||
|
let data = arr |
||||||
|
this.$post(this.api.deleteUser,data).then(res => { |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}, |
||||||
|
getRowKeys(row) { |
||||||
|
return row.userId; |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val; |
||||||
|
}, |
||||||
|
delAllSelection() { |
||||||
|
if(this.multipleSelection.length != ''){ |
||||||
|
let newArr = this.multipleSelection |
||||||
|
let delList = newArr.map(item => { |
||||||
|
return { |
||||||
|
userId: item.userId, |
||||||
|
phone: item.phone |
||||||
|
} |
||||||
|
}) |
||||||
|
// 批量删除 |
||||||
|
this.$confirm('确定要删除选中用户吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
let data = delList |
||||||
|
this.$post(this.api.deleteUser,data).then(res => { |
||||||
|
this.multipleSelection = []; |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}).catch(() => {}); |
||||||
|
}else{ |
||||||
|
this.$message.error('请先选择客户 ！'); |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.mag{ |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
.no-mb /deep/.el-form-item{ |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
/deep/.el-row{ |
||||||
|
padding: 0 !important; |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
@ -0,0 +1,32 @@ |
|||||||
|
export default { |
||||||
|
/** |
||||||
|
* @description 配置显示在浏览器标签的title |
||||||
|
*/ |
||||||
|
title: '电子科大虚拟仿真系统', |
||||||
|
/** |
||||||
|
* @description 是否使用国际化，默认为false |
||||||
|
* 如果不使用，则需要在路由中给需要在菜单中展示的路由设置meta: {title: 'xxx'} |
||||||
|
* 用来在菜单中显示文字 |
||||||
|
*/ |
||||||
|
locale: 'zh', |
||||||
|
/** |
||||||
|
* @description 跳转子系统链接 |
||||||
|
*/ |
||||||
|
subSystem: 'https://org.modao.cc/app/dfa8ba16a4a8f2b6dc1af8d31ff36ec62a184ace?simulator_type=device&sticky#screen=skdikymc2cmsgkk', |
||||||
|
/** |
||||||
|
* @description 新增项目跳转判分点数据存储cookie的key |
||||||
|
*/ |
||||||
|
projectData: 'kd_data', |
||||||
|
/** |
||||||
|
* @description 默认密码 |
||||||
|
*/ |
||||||
|
initialPassword: '111aaa', |
||||||
|
/** |
||||||
|
* @description 系统id |
||||||
|
*/ |
||||||
|
systemId: 3, |
||||||
|
/** |
||||||
|
* @description 是否使用动态路由 |
||||||
|
*/ |
||||||
|
dynamicRoute: true |
||||||
|
} |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
/** |
||||||
|
* @description 鉴权指令 |
||||||
|
* 当传入的权限当前用户没有时，会移除该组件 |
||||||
|
* 用例：<Tag v-auth">text</Tag> 或者：<Tag v-auth="'user:编辑'">text</Tag> |
||||||
|
* */ |
||||||
|
import store from '@/store'; |
||||||
|
import config from '@/config' |
||||||
|
|
||||||
|
export default { |
||||||
|
inserted (el, binding, vnode) { |
||||||
|
if(config.dynamicRoute){ |
||||||
|
let btnText = '' |
||||||
|
if(binding.value){ |
||||||
|
btnText = binding.value |
||||||
|
}else{ |
||||||
|
btnText = `${vnode.context.$route.name}:${el.innerText}` |
||||||
|
} |
||||||
|
const btnPermissions = store.state.btnPermissions; |
||||||
|
|
||||||
|
if (btnText && btnPermissions && btnPermissions.length) { |
||||||
|
const isPermission = btnPermissions.includes(btnText); |
||||||
|
if (!isPermission) { |
||||||
|
el.parentNode && el.parentNode.removeChild(el); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
/** |
||||||
|
* @description 生成按钮级别权限组 |
||||||
|
* */ |
||||||
|
|
||||||
|
import store from '@/store'; |
||||||
|
export default function(data){ |
||||||
|
let result = [] |
||||||
|
data.map(e => { |
||||||
|
e.children.map(n => { |
||||||
|
if(n.children.length){ |
||||||
|
result.push(`${e.name}:${n.name}`) |
||||||
|
n.children.map(j => { |
||||||
|
e.menuUrl ? result.push(`${e.menuUrl}:${n.name}:${j.name}`) : result.push(`${n.menuUrl}:${j.name}`) |
||||||
|
}) |
||||||
|
}else{ |
||||||
|
result.push(`${e.menuUrl}:${n.name}`) |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
// console.log(11,result)
|
||||||
|
store.commit('addBtnPerData',{btnPermissions: result}) |
||||||
|
} |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
/** |
||||||
|
* 插件 |
||||||
|
* */ |
||||||
|
|
||||||
|
import auth from './auth/authentication'; |
||||||
|
|
||||||
|
export default { |
||||||
|
async install (Vue, options) { |
||||||
|
// 指令
|
||||||
|
Vue.directive('auth', auth); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
import store from '@/store'; |
||||||
|
import router from '@/router'; |
||||||
|
import generateBtnPermission from '../auth/generateBtnPermission'; |
||||||
|
|
||||||
|
|
||||||
|
const newRoutes = [] |
||||||
|
|
||||||
|
function createMeta(item){ |
||||||
|
let meta = { title: item.name } |
||||||
|
return meta |
||||||
|
} |
||||||
|
|
||||||
|
function createRoute(data){ |
||||||
|
data.map(e => { |
||||||
|
if(e.menuUrl){ |
||||||
|
let meta = createMeta(e) |
||||||
|
newRoutes.push({ |
||||||
|
name: e.menuUrl, |
||||||
|
path: e.menuUrl, |
||||||
|
component: () => import(`@/components/page/${e.menuUrl}.vue`), |
||||||
|
meta |
||||||
|
}) |
||||||
|
} |
||||||
|
e.children && e.children.length && createRoute(e.children) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export default function(data,path){ |
||||||
|
generateBtnPermission(data) |
||||||
|
createRoute(data) |
||||||
|
let routes = router.options.routes |
||||||
|
routes[1].children = [...routes[1].children,...newRoutes] |
||||||
|
store.commit("addRoutesData", { routes }) |
||||||
|
// router.addRoutes(routes)
|
||||||
|
setTimeout(() => { |
||||||
|
!newRoutes.find(n => n.name == 'dashboard') && router.push(newRoutes[0].path) |
||||||
|
},10) |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import store from '@/store'; |
||||||
|
import router from '@/router'; |
||||||
|
|
||||||
|
export default function(){ |
||||||
|
setTimeout(() => { |
||||||
|
let routes = store.state.routes |
||||||
|
routes.forEach(e => { |
||||||
|
if(e.path == '/'){ |
||||||
|
e.component = () => import('@/components/common/Home.vue') |
||||||
|
}else{ |
||||||
|
e.component = () => import(`@/components/page/${e.path}.vue`) |
||||||
|
} |
||||||
|
|
||||||
|
e.children && e.children.forEach(n => { |
||||||
|
n.path && (n.component = () => import(`@/components/page/${n.path}.vue`)) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
routes.push({ |
||||||
|
path: '*', |
||||||
|
redirect: '404' |
||||||
|
}) |
||||||
|
router.addRoutes(routes) |
||||||
|
},500) |
||||||
|
} |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
import router from '@/router'; |
||||||
|
|
||||||
|
export default function(){ |
||||||
|
const newRouter = createRouter() |
||||||
|
router.matcher = newRouter.matcher |
||||||
|
} |
||||||
@ -0,0 +1,70 @@ |
|||||||
|
import Vue from 'vue'; |
||||||
|
import App from './App.vue'; |
||||||
|
import router from './router'; |
||||||
|
import ElementUI from 'element-ui'; |
||||||
|
import VueI18n from 'vue-i18n'; |
||||||
|
import { messages } from './components/common/i18n'; |
||||||
|
// import 'element-ui/lib/theme-chalk/index.css'; // 默认主题
|
||||||
|
import './assets/css/theme-green/index.css'; // 浅绿色主题
|
||||||
|
import './assets/css/icon.css'; |
||||||
|
import './assets/icon/iconfont.css'; |
||||||
|
import './components/common/directives'; |
||||||
|
import 'babel-polyfill'; |
||||||
|
import './util/rem'; |
||||||
|
import {post,get,del,put} from './utils/http'; |
||||||
|
import api from './utils/api';
|
||||||
|
import store from './store' |
||||||
|
import config from '@/config' |
||||||
|
import permission from '@/router/permission'; |
||||||
|
import { systemStatus, systemTypeStatus, systemAttributionStatus, courseTypeStatus, |
||||||
|
hoursStatus, roleStatus, orderTypeFn, orderStatusFn, orderNatureFn, Percentage, removeByValue, formatDate, formateTime, orderRoleType, orderRoleAttribute, setCookie, encodeString } from './utils/core'; |
||||||
|
import preventReClick from './store/preventReClick' //防多次点击，重复提交
|
||||||
|
|
||||||
|
// 插件
|
||||||
|
import plugins from '@/libs'; |
||||||
|
|
||||||
|
Vue.use(plugins); |
||||||
|
|
||||||
|
Vue.prototype.api = api; |
||||||
|
Vue.prototype.$get = get; |
||||||
|
Vue.prototype.$post = post; |
||||||
|
Vue.prototype.$del = del; |
||||||
|
Vue.prototype.$put = put; |
||||||
|
Vue.prototype.$config = config |
||||||
|
|
||||||
|
Vue.prototype.systemStatus = systemStatus; |
||||||
|
Vue.prototype.systemTypeStatus = systemTypeStatus; |
||||||
|
Vue.prototype.systemAttributionStatus = systemAttributionStatus; |
||||||
|
Vue.prototype.courseTypeStatus = courseTypeStatus; |
||||||
|
Vue.prototype.hoursStatus = hoursStatus; |
||||||
|
Vue.prototype.roleStatus = roleStatus; |
||||||
|
Vue.prototype.orderTypeFn = orderTypeFn; |
||||||
|
Vue.prototype.orderStatusFn = orderStatusFn; |
||||||
|
Vue.prototype.orderNatureFn = orderNatureFn; |
||||||
|
Vue.prototype.Percentage = Percentage; |
||||||
|
Vue.prototype.removeByValue = removeByValue; |
||||||
|
Vue.prototype.formatDate = formatDate; |
||||||
|
Vue.prototype.orderRoleType = orderRoleType; |
||||||
|
Vue.prototype.orderRoleAttribute = orderRoleAttribute; |
||||||
|
Vue.prototype.formateTime = formateTime; |
||||||
|
Vue.prototype.setCookie = setCookie; |
||||||
|
Vue.prototype.encodeString = encodeString; |
||||||
|
|
||||||
|
Vue.config.productionTip = false; |
||||||
|
Vue.use(VueI18n); |
||||||
|
Vue.use(ElementUI); |
||||||
|
const i18n = new VueI18n({ |
||||||
|
locale: 'zh', |
||||||
|
messages |
||||||
|
}); |
||||||
|
|
||||||
|
router.afterEach(to => { |
||||||
|
window.scrollTo(0, 0) |
||||||
|
}) |
||||||
|
|
||||||
|
new Vue({ |
||||||
|
router, |
||||||
|
store, |
||||||
|
i18n, |
||||||
|
render: h => h(App) |
||||||
|
}).$mount('#app'); |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
import router from './index'; |
||||||
|
import generateRoutes from '@/libs/route/generateRoutes'; |
||||||
|
import config from '@/config'; |
||||||
|
|
||||||
|
router.beforeEach((to, from, next) => { |
||||||
|
document.title = `${to.meta.title} | ${config.title}`; |
||||||
|
const role = sessionStorage.getItem('kd_server_username'); |
||||||
|
if (!role && to.path !== '/login') { |
||||||
|
next('/login') |
||||||
|
} else if(role && to.path == '/login') { |
||||||
|
next('/dashboard') |
||||||
|
} else { |
||||||
|
next(); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
router.afterEach(to => { |
||||||
|
window.scrollTo(0, 0) |
||||||
|
}) |
||||||
|
|
||||||
|
// config.dynamicRoute && generateRoutes()
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue