commit
3120a0bdae
172 changed files with 32441 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,39 @@ |
|||||||
|
{ |
||||||
|
"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", |
||||||
|
"core-js": "^2.6.12", |
||||||
|
"echarts": "^4.8.0", |
||||||
|
"element-theme": "^2.0.1", |
||||||
|
"element-ui": "^2.13.0", |
||||||
|
"html2canvas": "^1.0.0-rc.7", |
||||||
|
"jspdf": "^2.1.1", |
||||||
|
"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.4.0" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@vue/cli-plugin-babel": "^3.9.0", |
||||||
|
"@vue/cli-service": "^3.9.0", |
||||||
|
"element-theme-chalk": "^2.13.0", |
||||||
|
"node-sass": "^4.13.0", |
||||||
|
"sass-loader": "^8.0.0", |
||||||
|
"vue-template-compiler": "^2.6.10" |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
module.exports = { |
||||||
|
plugins: { |
||||||
|
autoprefixer: {} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
<!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,22 @@ |
|||||||
|
<template> |
||||||
|
<div id="app" > |
||||||
|
<router-view></router-view> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'App', |
||||||
|
created () { |
||||||
|
//在页面加载时读取sessionStorage里的状态信息 |
||||||
|
if (sessionStorage.getItem("kd_client_store") ) { |
||||||
|
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("kd_client_store")))) |
||||||
|
} |
||||||
|
|
||||||
|
//在页面刷新时将vuex里的信息保存到sessionStorage里 |
||||||
|
window.addEventListener("beforeunload",()=>{ |
||||||
|
sessionStorage.setItem("kd_client_store",JSON.stringify(this.$store.state)) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 7.6 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 1.0 MiB |
|
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: 3.0 MiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 709 B |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 632 B |
|
After Width: | Height: | Size: 918 B |
|
After Width: | Height: | Size: 499 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 683 B |
|
After Width: | Height: | Size: 556 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 75 KiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 106 KiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 539 B |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 29 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: 23 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 722 B |
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,195 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<div class="main" @click.stop="open(item)" v-for="(item,index) in data" :key="index"> |
||||||
|
<div class="item" @click.stop="open(item)"> |
||||||
|
<div> |
||||||
|
<img |
||||||
|
:class="{ 'arrowTransform': !item.ifVisible, 'arrowTransformReturn': item.ifVisible}" |
||||||
|
src="../../assets/img/3.png" |
||||||
|
alt |
||||||
|
/> |
||||||
|
</div> |
||||||
|
{{item.label}} |
||||||
|
</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="item1" @click.stop="open(item1)"> |
||||||
|
<div style="margin-left:40px"> |
||||||
|
<img |
||||||
|
:class="{ 'arrowTransform': !item1.ifVisible, 'arrowTransformReturn': item1.ifVisible}" |
||||||
|
src="../../assets/img/3.png" |
||||||
|
alt |
||||||
|
/> |
||||||
|
</div> |
||||||
|
{{item1.label}} |
||||||
|
</div> |
||||||
|
<div v-show="item1.ifVisible" v-if="item1.children&&item1.children.length!=0"> |
||||||
|
<div |
||||||
|
class="item4" |
||||||
|
@click.stop="choose(item2)" |
||||||
|
v-for="(item2,index2) in item1.children" |
||||||
|
:key="index2" |
||||||
|
> |
||||||
|
<span :class="{checkBox:true,isActive:item2.ifVisible}"></span> |
||||||
|
{{item2.label}} |
||||||
|
</div> |
||||||
|
</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) { |
||||||
|
item.ifVisible = !item.ifVisible; |
||||||
|
}, |
||||||
|
|
||||||
|
//选中叶子节点时将选中的叶子节点添加进数组，如果叶子节点存在则删除，removeByvalue函数定义在main.js中 |
||||||
|
choose(item) { |
||||||
|
item.ifVisible = !item.ifVisible; |
||||||
|
if (item.ifVisible) { |
||||||
|
this.chooseList.push(item); |
||||||
|
} else { |
||||||
|
this.chooseList.removeByValue(item); |
||||||
|
} |
||||||
|
}, |
||||||
|
//判断数组中是否包含某个对象 |
||||||
|
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 { |
||||||
|
height: 50px; |
||||||
|
line-height: 50px; |
||||||
|
cursor: pointer; |
||||||
|
font-size: 18px; |
||||||
|
color: #333333; |
||||||
|
display: flex; |
||||||
|
div { |
||||||
|
margin: 0 10px; |
||||||
|
position: relative; |
||||||
|
top: 50%; |
||||||
|
transform: translateY(-50%); |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
border-radius: 50%; |
||||||
|
width: 30px; |
||||||
|
height: 30px; |
||||||
|
background: rgba(146, 120, 255, 1); |
||||||
|
img { |
||||||
|
height: 12px; |
||||||
|
width: 8px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.main { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.item { |
||||||
|
@include public; |
||||||
|
border-bottom: 1px solid $outColor; |
||||||
|
background: rgba(245, 242, 255, 1); |
||||||
|
} |
||||||
|
.item1 { |
||||||
|
@include public; |
||||||
|
border-bottom: 1px solid $insideColor; |
||||||
|
background: rgba(255, 255, 255, 1); |
||||||
|
} |
||||||
|
.item2 { |
||||||
|
@include public; |
||||||
|
border-bottom: 1px solid $insideColor; |
||||||
|
background: rgba(255, 255, 255, 1); |
||||||
|
} |
||||||
|
.item4 { |
||||||
|
@include public; |
||||||
|
align-items: center; |
||||||
|
border-bottom: 1px solid $insideColor; |
||||||
|
padding-left: 80px; |
||||||
|
background: rgba(255, 255, 255, 1); |
||||||
|
} |
||||||
|
|
||||||
|
//清除ul,li的默认样式 |
||||||
|
ul, |
||||||
|
li { |
||||||
|
padding: 0; |
||||||
|
margin: 0; |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
// 使三角形旋转动画 |
||||||
|
.arrowTransform { |
||||||
|
transition: 0.2s; |
||||||
|
transform-origin: center; |
||||||
|
transform: rotateZ(0deg); |
||||||
|
} |
||||||
|
.arrowTransformReturn { |
||||||
|
transition: 0.2s; |
||||||
|
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/get.png'); |
||||||
|
background-size: 14px 14px; /*按比例缩放*/ |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,130 @@ |
|||||||
|
<template> |
||||||
|
<div class="header flex-between"> |
||||||
|
<div v-if="this.$route.path=='/personalcenter'" |
||||||
|
class="goBack" v-preventReClick @click="back"><i class="el-icon-arrow-left"></i>返回</div> |
||||||
|
<div v-else class="logo"> |
||||||
|
<img src="../../assets/img/logo-fill.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 { |
||||||
|
userName: this.$store.state.userName, |
||||||
|
avatar: this.$store.state.avatar |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
bus.$on('updateAvatar',avatar => { |
||||||
|
this.avatar = avatar |
||||||
|
}) |
||||||
|
bus.$on('updateAccount',userName => { |
||||||
|
this.userName = userName |
||||||
|
}) |
||||||
|
}, |
||||||
|
// computed: { |
||||||
|
// username() { |
||||||
|
// let username = sessionStorage.getItem('kd_client_username'); |
||||||
|
// return username ? username : this.name; |
||||||
|
// } |
||||||
|
// }, |
||||||
|
methods: { |
||||||
|
loginout() { |
||||||
|
this.$store.replaceState({}) |
||||||
|
sessionStorage.removeItem('kd_client_username'); |
||||||
|
location.reload() |
||||||
|
}, |
||||||
|
toPersonalCenter(){ |
||||||
|
this.$router.push('/personalcenter') |
||||||
|
}, |
||||||
|
back(){ |
||||||
|
if(this.$route.path == '/addassessment'){ |
||||||
|
this.$router.push({ path: '/teacherhome', query: { active: true }}) |
||||||
|
}else{ |
||||||
|
this.$router.go(-1) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style scoped lang="scss"> |
||||||
|
.goBack{ |
||||||
|
cursor: pointer; |
||||||
|
line-height: 60px; |
||||||
|
height: 60px; |
||||||
|
font-size: 16px; |
||||||
|
font-weight: bold; |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
.goBack i{ |
||||||
|
color: #328aff; |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
.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,52 @@ |
|||||||
|
<template> |
||||||
|
<div class="wrapper"> |
||||||
|
<v-head></v-head> |
||||||
|
<!-- <v-sidebar></v-sidebar> --> |
||||||
|
<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> |
||||||
@ -0,0 +1,189 @@ |
|||||||
|
<template> |
||||||
|
<div class="sidebar"> |
||||||
|
<el-menu |
||||||
|
class="sidebar-el-menu" |
||||||
|
:default-active="onRoutes" |
||||||
|
:collapse="collapse" |
||||||
|
background-color="#324157" |
||||||
|
text-color="#bfcbd9" |
||||||
|
active-text-color="#20a0ff" |
||||||
|
unique-opened |
||||||
|
router |
||||||
|
> |
||||||
|
<template v-for="item in items"> |
||||||
|
<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, |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
icon: 'el-icon-lx-home', |
||||||
|
index: 'dashboard', |
||||||
|
title: '系统首页' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: 'el-icon-lx-cascades', |
||||||
|
index: 'table', |
||||||
|
title: '基础表格' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: 'el-icon-lx-copy', |
||||||
|
index: 'tabs', |
||||||
|
title: 'tab选项卡' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: 'el-icon-lx-calendar', |
||||||
|
index: '3', |
||||||
|
title: '表单相关', |
||||||
|
subs: [ |
||||||
|
{ |
||||||
|
index: 'form', |
||||||
|
title: '基本表单' |
||||||
|
}, |
||||||
|
{ |
||||||
|
index: '3-2', |
||||||
|
title: '三级菜单', |
||||||
|
subs: [ |
||||||
|
{ |
||||||
|
index: 'editor', |
||||||
|
title: '富文本编辑器' |
||||||
|
}, |
||||||
|
{ |
||||||
|
index: 'markdown', |
||||||
|
title: 'markdown编辑器' |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
index: 'upload', |
||||||
|
title: '文件上传' |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: 'el-icon-lx-emoji', |
||||||
|
index: 'icon', |
||||||
|
title: '自定义图标' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: 'el-icon-pie-chart', |
||||||
|
index: 'charts', |
||||||
|
title: 'schart图表' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: 'el-icon-rank', |
||||||
|
index: '6', |
||||||
|
title: '拖拽组件', |
||||||
|
subs: [ |
||||||
|
{ |
||||||
|
index: 'drag', |
||||||
|
title: '拖拽列表' |
||||||
|
}, |
||||||
|
{ |
||||||
|
index: 'dialog', |
||||||
|
title: '拖拽弹框' |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: 'el-icon-lx-global', |
||||||
|
index: 'i18n', |
||||||
|
title: '国际化功能' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: 'el-icon-lx-warn', |
||||||
|
index: '7', |
||||||
|
title: '错误处理', |
||||||
|
subs: [ |
||||||
|
{ |
||||||
|
index: 'permission', |
||||||
|
title: '权限测试' |
||||||
|
}, |
||||||
|
{ |
||||||
|
index: '404', |
||||||
|
title: '404页面' |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: 'el-icon-lx-redpacket_fill', |
||||||
|
index: '/donate', |
||||||
|
title: '支持作者' |
||||||
|
} |
||||||
|
] |
||||||
|
}; |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
onRoutes() { |
||||||
|
return this.$route.path.replace('/', ''); |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
// 通过 Event Bus 进行组件间通信，来折叠侧边栏 |
||||||
|
bus.$on('collapse', msg => { |
||||||
|
this.collapse = msg; |
||||||
|
bus.$emit('collapse-content', msg); |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.sidebar { |
||||||
|
display: block; |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
top: 70px; |
||||||
|
bottom: 0; |
||||||
|
overflow-y: scroll; |
||||||
|
} |
||||||
|
.sidebar::-webkit-scrollbar { |
||||||
|
width: 0; |
||||||
|
} |
||||||
|
.sidebar-el-menu:not(.el-menu--collapse) { |
||||||
|
width: 250px; |
||||||
|
} |
||||||
|
.sidebar > ul { |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,238 @@ |
|||||||
|
<template> |
||||||
|
<div class="Statistics"> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :span="24"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<p class="header_title">关键指标</p> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="browse"> |
||||||
|
<p class="mgb20">浏览量（PV）</p> |
||||||
|
<p> |
||||||
|
<span class="browse_volume">253</span> |
||||||
|
<span>/日</span> |
||||||
|
<span class="mgl10">12% |
||||||
|
<i class="icon-up up_color"></i> |
||||||
|
</span> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="browse"> |
||||||
|
<p class="mgb20">独立用户（UV）</p> |
||||||
|
<p> |
||||||
|
<span class="browse_volume">70</span> |
||||||
|
<span>/日</span> |
||||||
|
<span class="mgl10">12% |
||||||
|
<i class="icon-up up_color"></i> |
||||||
|
</span> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="browse"> |
||||||
|
<p class="mgb20">访问次数（VV）</p> |
||||||
|
<p> |
||||||
|
<span class="browse_volume">152</span> |
||||||
|
<span>/日</span> |
||||||
|
<span class="mgl10">105.41% |
||||||
|
<i class="icon-up up_color"></i> |
||||||
|
</span> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="browse"> |
||||||
|
<p class="mgb20">独立IP</p> |
||||||
|
<p> |
||||||
|
<span class="browse_volume">67</span> |
||||||
|
<span>/日</span> |
||||||
|
<span class="mgl10">82.27% |
||||||
|
<i class="icon-up up_color"></i> |
||||||
|
</span> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
|
||||||
|
<el-col :span="24"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="schart-box"> |
||||||
|
<el-radio-group v-model="radio2" size="medium"> |
||||||
|
<el-radio-button v-for="(item,index) in dateList" :key="index" label="item.id" >{{item.name}}</el-radio-button> |
||||||
|
</el-radio-group> |
||||||
|
<schart class="schart" canvasId="line" :options="options2"></schart> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
|
||||||
|
<el-col :span="24"> |
||||||
|
<el-card shadow="hover"> |
||||||
|
<p class="mgb20"> |
||||||
|
<span class="header_title">客户列表</span> |
||||||
|
</p> |
||||||
|
<el-table :data="customerData" class="table" stripe header-align="center"> |
||||||
|
<el-table-column type="selection" width="55" align="center"></el-table-column> |
||||||
|
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column> |
||||||
|
<el-table-column prop="id" label="时间" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="age" label="浏览量（PV）" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="storeName" label="独立用户（UV）" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="total" label="访问次数（VV）" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="payamount" label="独立IP" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="payamount" label="跳出率" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="payamount" label="平均在线时长" align="center"> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="pages"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import bus from '../common/bus'; |
||||||
|
import Schart from 'vue-schart'; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
CountryName: '中国', |
||||||
|
countryList: [{ |
||||||
|
name:'中国' |
||||||
|
}, |
||||||
|
{ |
||||||
|
name:'美国' |
||||||
|
}, |
||||||
|
{ |
||||||
|
name:'日本' |
||||||
|
}], |
||||||
|
CustomerSearch: '', |
||||||
|
customerData:[{ |
||||||
|
id: 1, |
||||||
|
age: '10', |
||||||
|
storeName:'中国', |
||||||
|
total: '金融', |
||||||
|
payamount: '广东' |
||||||
|
}], |
||||||
|
options2: { |
||||||
|
type: 'line', |
||||||
|
title: { |
||||||
|
text: '最近几个月各品类销售趋势图' |
||||||
|
}, |
||||||
|
bgColor: '#fbfbfb', |
||||||
|
labels: ['6月', '7月', '8月', '9月', '10月'], |
||||||
|
datasets: [ |
||||||
|
{ |
||||||
|
label: '家电', |
||||||
|
data: [234, 278, 270, 190, 230] |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '百货', |
||||||
|
data: [164, 178, 150, 135, 160] |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '食品', |
||||||
|
data: [114, 138, 200, 235, 190] |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
radio2: 1, |
||||||
|
dateList: [{ |
||||||
|
id: 0, |
||||||
|
name: '小时指标' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
name: '浏览量（PV）' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
name: '独立用户（UV）' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 3, |
||||||
|
name: '访问次数（VV）' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 4, |
||||||
|
name: '独立IP' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 5, |
||||||
|
name: '跳出率' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 6, |
||||||
|
name: '平均在线时长' |
||||||
|
}], |
||||||
|
pages: 10 |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
Schart |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
permission(){ |
||||||
|
this.$router.push('/permission') |
||||||
|
}, |
||||||
|
handleCurrentChange(){} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.el-row { |
||||||
|
margin-bottom: 20px; |
||||||
|
padding: 20px 16px; |
||||||
|
} |
||||||
|
.Statistics{ |
||||||
|
background-color: #f0f0f0; |
||||||
|
} |
||||||
|
.browse{ |
||||||
|
font-size: 20px; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
.browse_volume{ |
||||||
|
font-size: 36px; |
||||||
|
} |
||||||
|
.mgl10{ |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
.header_title{ |
||||||
|
margin-left: 10px; |
||||||
|
margin-bottom: 30px; |
||||||
|
} |
||||||
|
.up_color{ |
||||||
|
color: #FF3232; |
||||||
|
} |
||||||
|
|
||||||
|
.schart-box { |
||||||
|
margin-top: 20px; |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
.schart { |
||||||
|
width: 100%; |
||||||
|
height: 400px; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
@ -0,0 +1,142 @@ |
|||||||
|
<template> |
||||||
|
<div class="Achievement-container"> |
||||||
|
<div class="header"> |
||||||
|
<p>成绩明细</p> |
||||||
|
<a ref="message"> |
||||||
|
<el-button |
||||||
|
round |
||||||
|
style="background-color:#328aff;color:#FFFFFF;width:110px;height:36px;" |
||||||
|
>导出</el-button> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="score-table"> |
||||||
|
<el-table |
||||||
|
:cell-style="tableRowStyle" |
||||||
|
:header-cell-style="{background:'#328aff',color:'#FFFFFF'}" |
||||||
|
:data="tableData" |
||||||
|
stripe |
||||||
|
> |
||||||
|
<el-table-column label="次序" width="120px" type="index" align="center"></el-table-column> |
||||||
|
<el-table-column prop="projectName" label="考核名称" min-width="12%" align="center"></el-table-column> |
||||||
|
<el-table-column prop="projectName" min-width="12%" label="实验项目" align="center"></el-table-column> |
||||||
|
<el-table-column prop="score" label="得分" min-width="12%" align="center"></el-table-column> |
||||||
|
<el-table-column prop="timeSum" label="耗时" min-width="12%" align="center"></el-table-column> |
||||||
|
<el-table-column prop="createTime" label="起始时间" min-width="12%" align="center"></el-table-column> |
||||||
|
<el-table-column prop="endTime" label="结束时间" min-width="12%" align="center"></el-table-column> |
||||||
|
<!-- <el-table-column fixed="right" label="查看" min-width="12%" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button @click="handleClick(scope.row)" type="text" size="small">实验报告</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> --> |
||||||
|
</el-table> |
||||||
|
<div class="block"> |
||||||
|
<el-pagination |
||||||
|
background |
||||||
|
@current-change="handleCurrentChange" |
||||||
|
layout="prev, pager, next, jumper" |
||||||
|
:total="dataTotal" |
||||||
|
></el-pagination> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
studentId: this.$store.state.studentId, |
||||||
|
tableData: [], //成绩明细列表数据 |
||||||
|
dataTotal: 1, |
||||||
|
courseId: this.$store.state.courseId |
||||||
|
}; |
||||||
|
}, |
||||||
|
props: ['AssesmentRecord', 'projectPermissions', 'value'], |
||||||
|
mounted() { |
||||||
|
this.handleCurrentChange(1); //初始化成绩明细列表 |
||||||
|
//设置导出接口的链接 |
||||||
|
this.$refs.message.href = `http://www.liuwanr.cn:8080/experiment/exportPractice?courseId=${this.courseId}&studentId=${this.studentId}&projectPermissions=${this.projectPermissions}&titles=%E6%AC%A1%E5%BA%8F,%E7%BB%83%E4%B9%A0%E5%90%8D%E7%A7%B0,%E5%AE%9E%E9%AA%8C%E9%A1%B9%E7%9B%AE,%E5%BE%97%E5%88%86,%E8%80%97%E6%97%B6,%E8%B5%B7%E5%A7%8B%E6%97%B6%E9%97%B4,%E7%BB%93%E6%9D%9F%E6%97%B6%E9%97%B4,%E6%9F%A5%E7%9C%8B`; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
changeCourseId(n, o) { |
||||||
|
this.$refs.message.href = `http://www.liuwanr.cn:8080/experiment/exportPractice?courseId=${this.courseId}&studentId=${this.studentId}&projectPermissions=${this.projectPermissions}&titles=%E6%AC%A1%E5%BA%8F,%E7%BB%83%E4%B9%A0%E5%90%8D%E7%A7%B0,%E5%AE%9E%E9%AA%8C%E9%A1%B9%E7%9B%AE,%E5%BE%97%E5%88%86,%E8%80%97%E6%97%B6,%E8%B5%B7%E5%A7%8B%E6%97%B6%E9%97%B4,%E7%BB%93%E6%9D%9F%E6%97%B6%E9%97%B4,%E6%9F%A5%E7%9C%8B`; |
||||||
|
this.handleCurrentChange(1); |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
changeCourseId() { |
||||||
|
return this.courseId; |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
||||||
|
if (rowIndex % 2 === 0) { |
||||||
|
return 'background-color: #FFF'; |
||||||
|
} else { |
||||||
|
return 'background-color: #F5F2FF'; |
||||||
|
} |
||||||
|
}, |
||||||
|
//请求成绩明细表格数据 |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.$get(this.api.queryStudentByPage, { |
||||||
|
studentId: this.studentId, |
||||||
|
pageSize: 5, |
||||||
|
pageNum: val, |
||||||
|
projectPermissions: this.projectPermissions, |
||||||
|
courseId: this.courseId |
||||||
|
}) |
||||||
|
.then(res => { |
||||||
|
this.tableData = res.message.rows; |
||||||
|
this.dataTotal = res.message.total; |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
console.log(err); |
||||||
|
}); |
||||||
|
}, |
||||||
|
handleClick(){} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.Achievement-container { |
||||||
|
width: 98%; |
||||||
|
height: 600px; |
||||||
|
background: rgba(255, 255, 255, 1); |
||||||
|
box-shadow: 0px 0px 21px 0px rgba(48, 115, 248, 0.1); |
||||||
|
border-radius: 10px; |
||||||
|
text-align: center; |
||||||
|
overflow: hidden; |
||||||
|
.header { |
||||||
|
width: 97%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
margin: 0 auto; |
||||||
|
margin-top: 16px; |
||||||
|
p { |
||||||
|
font-size: 20px; |
||||||
|
margin-top: 14px; |
||||||
|
margin-bottom: 0px; |
||||||
|
padding: 0; |
||||||
|
font-family: MicrosoftYaHeil; |
||||||
|
color: #333333; |
||||||
|
} |
||||||
|
} |
||||||
|
.score-table { |
||||||
|
width: 97%; |
||||||
|
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: #328aff; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,83 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-table |
||||||
|
:cell-style="tableRowStyle" |
||||||
|
:header-cell-style="{background:'#328aff',color:'#FFFFFF'}" |
||||||
|
:data="tableData" |
||||||
|
stripe |
||||||
|
style="width: 100%" |
||||||
|
> |
||||||
|
<el-table-column prop="id" label="次序" width="120" align="center" type="index"></el-table-column> |
||||||
|
<el-table-column prop="projectName" label="实验项目名称" align="center"></el-table-column> |
||||||
|
<el-table-column prop="score" label="得分" align="center"></el-table-column> |
||||||
|
<el-table-column prop="timeConsuming" label="耗时" align="center"></el-table-column> |
||||||
|
<el-table-column prop="startTime" label="起始时间" align="center"></el-table-column> |
||||||
|
<el-table-column prop="endTime" label="结束时间" align="center"></el-table-column> |
||||||
|
<el-table-column label="操作" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" @click="toReport(scope.row)">实验报告</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background :current-page="pageNo" layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange"></el-pagination> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
totals: 0, |
||||||
|
tableData: [], |
||||||
|
userId: this.$store.state.userId, |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10 |
||||||
|
}; |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
||||||
|
if (rowIndex % 2 === 0) { |
||||||
|
return 'background-color: #FFF'; |
||||||
|
} else { |
||||||
|
return 'background-color: #F5F2FF'; |
||||||
|
} |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.pageNo = val |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
getData() { |
||||||
|
this.$get(this.api.fictitiousRecord, { |
||||||
|
userId: this.userId, |
||||||
|
page: this.pageNo, |
||||||
|
size: this.pageSize, |
||||||
|
projectPermissions: 0, |
||||||
|
systemId: 3 |
||||||
|
}) |
||||||
|
.then(res => { |
||||||
|
let data = res.data |
||||||
|
this.tableData = data.list |
||||||
|
this.totals = data.totalCount |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
console.log(err); |
||||||
|
}); |
||||||
|
}, |
||||||
|
exportData() { |
||||||
|
location.href = `${this.api.exportProjectRecord}?userId=${this.userId}` |
||||||
|
}, |
||||||
|
toReport(row) { |
||||||
|
this.$router.push(`/showExperiment?id=${row.reportId}&type=1`) |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scopted> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
<template> |
||||||
|
<div class="HeadPortrait"> |
||||||
|
<img :src="this.$store.state.userPhoto" alt=""> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
|
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.HeadPortrait { |
||||||
|
img{ |
||||||
|
width: 60px; |
||||||
|
height: 60px; |
||||||
|
background: rgba(146, 120, 255, 1); |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,84 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-table |
||||||
|
:cell-style="tableRowStyle" |
||||||
|
:header-cell-style="{background:'#328aff',color:'#FFFFFF'}" |
||||||
|
:data="tableData" |
||||||
|
stripe |
||||||
|
> |
||||||
|
<el-table-column prop="id" label="次序" width="120" align="center" type="index"></el-table-column> |
||||||
|
<el-table-column prop="experimentalName" label="实验教学名称" align="center"></el-table-column> |
||||||
|
<el-table-column prop="experimentalClassName" label="班级" align="center"></el-table-column> |
||||||
|
<el-table-column prop="projectName" label="实验项目名称" align="center"></el-table-column> |
||||||
|
<el-table-column prop="score" label="得分" align="center"></el-table-column> |
||||||
|
<el-table-column prop="timeConsuming" label="耗时" align="center"></el-table-column> |
||||||
|
<el-table-column prop="startTime" label="起始时间" align="center"></el-table-column> |
||||||
|
<el-table-column prop="endTime" label="结束时间" align="center"></el-table-column> |
||||||
|
<el-table-column label="操作" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" @click="toReport(scope.row)">实验成绩报告</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background :current-page="pageNo" layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange"></el-pagination> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
totals: 0, |
||||||
|
tableData: [], |
||||||
|
userId: this.$store.state.userId, |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10 |
||||||
|
}; |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
||||||
|
if (rowIndex % 2 === 0) { |
||||||
|
return 'background-color: #FFF'; |
||||||
|
} else { |
||||||
|
return 'background-color: #F5F2FF'; |
||||||
|
} |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.pageNo = val |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
getData() { |
||||||
|
this.$get(this.api.fictitiousRecord, { |
||||||
|
userId: this.userId, |
||||||
|
page: this.pageNo, |
||||||
|
size: this.pageSize, |
||||||
|
projectPermissions: 1, |
||||||
|
systemId: 3 |
||||||
|
}) |
||||||
|
.then(res => { |
||||||
|
let data = res.data |
||||||
|
this.tableData = data.list |
||||||
|
this.totals = data.totalCount |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
console.log(err); |
||||||
|
}); |
||||||
|
}, |
||||||
|
exportData() { |
||||||
|
location.href = `${this.api.exportProjectRecord}?userId=${this.userId}` |
||||||
|
}, |
||||||
|
toReport(row) { |
||||||
|
this.$router.push(`/showExperiment?id=${row.reportId}`) |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scopted> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,121 @@ |
|||||||
|
<template> |
||||||
|
<div class="Achievement-container"> |
||||||
|
<!-- <el-tabs v-model="activeName"> |
||||||
|
<el-tab-pane label="虚拟实验" name="first"></el-tab-pane> |
||||||
|
<el-tab-pane label="教学实验" name="second"></el-tab-pane> |
||||||
|
</el-tabs> --> |
||||||
|
<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="header"> |
||||||
|
<p>实验记录明细</p> |
||||||
|
<el-button round type="primary" @click="exportData" v-preventReClick>导出</el-button> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="score-table" v-if="activeName == 'first'"> |
||||||
|
<fictitiouslist></fictitiouslist> |
||||||
|
</div> |
||||||
|
<div class="score-table" v-else> |
||||||
|
<teachinglist></teachinglist> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import fictitiouslist from './FictitiousList.vue'; |
||||||
|
import teachinglist from './TeachingList.vue'; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
activeName: 'first', |
||||||
|
userId: this.$store.state.userId, |
||||||
|
tabs: { |
||||||
|
first: '练习模式', |
||||||
|
second: '考核模式' |
||||||
|
} |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
fictitiouslist, |
||||||
|
teachinglist |
||||||
|
}, |
||||||
|
created() { |
||||||
|
// this.$refs.message.href = `http://liuwanr.cn:8080/attendance/exportPractice?studentId=${this.studentId}&courseId=${this.$store.state.courseId}&titles=%E5%BA%8F%E5%8F%B7,%E9%A1%B9%E7%9B%AE%E5%90%8D%E7%A7%B0,%E5%AE%9E%E9%AA%8C%E9%A1%B9%E7%9B%AE,%E8%80%83%E5%8B%A4%E8%AE%B0%E5%BD%95,%E7%AD%BE%E5%88%B0%E6%97%B6%E9%97%B4`; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
exportData() { |
||||||
|
if(this.activeName == 'first'){ |
||||||
|
location.href = `${this.api.exportProjectRecord}?userId=${this.userId}` |
||||||
|
}else{ |
||||||
|
location.href = `${this.api.exportExperimentProjectRecord}?userId=${this.userId}` |
||||||
|
} |
||||||
|
}, |
||||||
|
tabChange(index){ |
||||||
|
this.activeName = index |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scopted> |
||||||
|
.Achievement-container { |
||||||
|
width: 100%; |
||||||
|
padding: 20px; |
||||||
|
background: rgba(255, 255, 255, 1); |
||||||
|
box-sizing: border-box; |
||||||
|
box-shadow: 0px 0px 21px 0px rgba(48, 115, 248, 0.1); |
||||||
|
border-radius: 10px; |
||||||
|
text-align: center; |
||||||
|
overflow: hidden; |
||||||
|
.header { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
margin-top: 16px; |
||||||
|
p { |
||||||
|
margin-top: 14px; |
||||||
|
font-size: 20px; |
||||||
|
font-family: MicrosoftYaHeil; |
||||||
|
color: #333333; |
||||||
|
} |
||||||
|
} |
||||||
|
.score-table { |
||||||
|
margin-top: 18px; |
||||||
|
position: relative; |
||||||
|
.block { |
||||||
|
position: absolute; |
||||||
|
right: 0px; |
||||||
|
bottom: -50px; |
||||||
|
} |
||||||
|
} |
||||||
|
.el-pagination.is-background .el-pager li:not(.disabled).active { |
||||||
|
background-color: #328aff; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
.tabs{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
padding: 20px 0 0; |
||||||
|
margin: 0; |
||||||
|
// box-shadow:0px 0px 25px 2px rgba(48,115,248,0.14); |
||||||
|
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: #328aff; |
||||||
|
border-color: #328aff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,705 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-container> |
||||||
|
<el-aside width="350px"> |
||||||
|
<StudentSide ref="getSelectData" @fircheck="fircheck" @twocheck="twocheck" @threecheck="threecheck"></StudentSide> |
||||||
|
</el-aside> |
||||||
|
|
||||||
|
<el-main> |
||||||
|
<el-col :span="24"> |
||||||
|
<el-card shadow="hover" class="mgb20 student_tab"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div> |
||||||
|
<el-input placeholder="输入学生名称" v-model="keyword" @keyup.enter.native="searchstudent"> |
||||||
|
<i slot="suffix" class="el-input__icon el-icon-search"></i> |
||||||
|
</el-input> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-button type="primary" size="small" round @click="addstudent">新增学生</el-button> |
||||||
|
<el-button type="primary" size="small" round class="mag" @click="batchImport">批量导入</el-button> |
||||||
|
<el-button type="primary" size="small" round @click="delAllSelection">批量删除</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table :data="studentData" class="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="userName" label="学生姓名" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="workNumber" label="学生工号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="professionalName" label="专业" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="gradeName" label="年级" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="className" label="班级" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="roleId" 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="操作" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<!-- <el-button type="text">查看</el-button> --> |
||||||
|
<el-button type="text" @click="editstudent(scope.row)">编辑</el-button> |
||||||
|
<el-button type="text" @click="delstudent(scope.row)">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background layout="prev, pager, next" :current-page="pageNo" @current-change="handleCurrentChange" :total="pages"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
</el-main> |
||||||
|
</el-container> |
||||||
|
|
||||||
|
<!-- 新增用户 --> |
||||||
|
<el-dialog :title="isAddstudent ? '新增学生' : '编辑学生'" :visible.sync="studentVisible" |
||||||
|
width="30%" center @close="closestudent" class="dialog" :close-on-click-modal="false"> |
||||||
|
<el-form ref="studentForm" :model="studentForm" :rules="rules" label-width="80px"> |
||||||
|
<el-form-item prop="userAccount" label="账号"> |
||||||
|
<el-input v-model="studentForm.userAccount" placeholder="请输入学生账号" @change="accountChange"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="userName" label="学生姓名"> |
||||||
|
<el-input v-model="studentForm.userName" placeholder="请输入学生姓名"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="roleValue" label="账号角色"> |
||||||
|
<el-checkbox-group v-model="studentForm.roleValue" :disabled="true"> |
||||||
|
<el-checkbox label="老师"></el-checkbox> |
||||||
|
<el-checkbox label="管理员"></el-checkbox> |
||||||
|
<el-checkbox label="学生"></el-checkbox> |
||||||
|
</el-checkbox-group> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="uniqueIdentificationAccount" label="唯一标识"> |
||||||
|
<el-input disabled v-model="studentForm.uniqueIdentificationAccount" placeholder="请输入学生学号获取唯一标识"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="studentAccount" label="学生学号"> |
||||||
|
<el-input v-model="studentForm.studentAccount" placeholder="请输入学生学号" @change="OnlyId()"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="professionalId" label="专业"> |
||||||
|
<el-select v-model="studentForm.professionalId" placeholder="请选择专业" @change="getGrade"> |
||||||
|
<el-option v-for="(item,index) in majorList" :key="index" |
||||||
|
:label="item.stuProfessionalArchitectureName" :value="item.stuProfessionalArchitectureId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="gradeId" label="年级"> |
||||||
|
<el-select v-model="studentForm.gradeId" placeholder="请选择年级" :disabled="studentForm.professionalId ? false : true" @change="getClass"> |
||||||
|
<el-option v-for="(item,index) in gradeList" :key="index" |
||||||
|
:label="item.gradeName" :value="item.gradeId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="classId" label="班级"> |
||||||
|
<el-select v-model="studentForm.classId" placeholder="请选择班级" :disabled="studentForm.gradeId ? false : true"> |
||||||
|
<el-option v-for="(item,index) in classList" :key="index" |
||||||
|
:label="item.className" :value="item.classId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="mobile" label="手机号"> |
||||||
|
<el-input v-model="studentForm.mobile" placeholder="可以用于登录平台，以及找回密码" maxlength="11" @change="phoneChange"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="email" label="邮箱"> |
||||||
|
<el-input v-model="studentForm.email" placeholder="可以用于登录平台，以及找回密码"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="studentVisible = false">取 消</el-button> |
||||||
|
<el-button type="primary" @click="saveSure('studentForm')">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
|
||||||
|
<!-- 批量导入 --> |
||||||
|
<el-dialog title="批量导入" :visible.sync="importVisible" width="24%" center :close-on-click-modal="false"> |
||||||
|
<!-- <el-input placeholder="请上传文件"></el-input> --> |
||||||
|
<div class="flex-start-around"> |
||||||
|
<!-- <el-button type="text" class="ml20" @click="loginout">浏览电脑</el-button> --> |
||||||
|
<el-button type="primary" @click="downLoad">模板下载<i class="el-icon-download el-icon--right"></i></el-button> |
||||||
|
<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.readStaff" |
||||||
|
:file-list="uploadList" |
||||||
|
:data="form" |
||||||
|
name="file" |
||||||
|
> |
||||||
|
<el-button type="primary" class="ml20">上传文件<i class="el-icon-upload2 el-icon--right"></i></el-button> |
||||||
|
</el-upload> |
||||||
|
</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 StudentSide from './StudentSide.vue'; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
pages: 10, |
||||||
|
studentVisible: false, |
||||||
|
studentForm: { |
||||||
|
studentId: '', |
||||||
|
userName: '', |
||||||
|
roleValue: ['学生'], |
||||||
|
studentAccount: '', |
||||||
|
mobile: '', |
||||||
|
email: '', |
||||||
|
professionalId: '', |
||||||
|
gradeId: '', |
||||||
|
classId: '' , |
||||||
|
uniqueIdentificationAccount: '', |
||||||
|
userAccount: '' |
||||||
|
}, |
||||||
|
rules: { |
||||||
|
userName: [ |
||||||
|
{ required: true, message: '请输入学生姓名', trigger: 'blur' } |
||||||
|
], |
||||||
|
roleValue: [ |
||||||
|
{ required: true, message: '请选择账号角色', trigger: 'change' } |
||||||
|
], |
||||||
|
studentAccount: [ |
||||||
|
{ required: true, message: '请输入学生学号', trigger: 'blur' }, |
||||||
|
{ |
||||||
|
pattern: /^[0-9]*$/, |
||||||
|
message: '学生学号必须为数字', |
||||||
|
trigger: 'blur' |
||||||
|
} |
||||||
|
], |
||||||
|
userAccount: [ |
||||||
|
{ required: true, message: '请输入账号', trigger: 'blur' }, |
||||||
|
{ |
||||||
|
pattern: /^[A-Za-z0-9]*$/, |
||||||
|
message: '账号必须为数字', |
||||||
|
trigger: 'blur' |
||||||
|
} |
||||||
|
], |
||||||
|
professionalId: [ |
||||||
|
{ required: true, message: '请选择专业', trigger: 'change' } |
||||||
|
], |
||||||
|
gradeId: [ |
||||||
|
{ required: true, message: '请选择年级', trigger: 'change' } |
||||||
|
], |
||||||
|
classId: [ |
||||||
|
{ required: true, message: '请选择班级', trigger: 'change' } |
||||||
|
], |
||||||
|
mobile: [ |
||||||
|
// { 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: [], |
||||||
|
updata: { |
||||||
|
schoolId: this.$store.state.schoolId, |
||||||
|
schoolName: this.$store.state.schoolName |
||||||
|
}, |
||||||
|
importVisible: false, |
||||||
|
keyword: '', |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
majorList: [], |
||||||
|
gradeList: [], |
||||||
|
classList: [], |
||||||
|
professionalIds: '', |
||||||
|
professionalStudentIds: '', |
||||||
|
gradeIds: '', |
||||||
|
classIds: '', |
||||||
|
multipleSelection: [], |
||||||
|
form: { |
||||||
|
schoolId: this.$store.state.schoolId |
||||||
|
}, |
||||||
|
provinceId: this.$store.state.provinceId, |
||||||
|
cityId: this.$store.state.cityId, |
||||||
|
userId: this.$store.state.userId, |
||||||
|
uploadList: [], |
||||||
|
parmData: [], |
||||||
|
isAddstudent: false, |
||||||
|
NoAdd: true, |
||||||
|
AccountNoAdd: true, |
||||||
|
NumberNoAdd: true, |
||||||
|
isNewUser: 1, |
||||||
|
isTeacher: 0 |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
StudentSide |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
this.getStudent() |
||||||
|
// this.test() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
test() { |
||||||
|
let data = { |
||||||
|
"message":{ |
||||||
|
"Staff":[ |
||||||
|
{ |
||||||
|
"account":"4", |
||||||
|
"email":"4", |
||||||
|
"logNumber":0, |
||||||
|
"phone":"4", |
||||||
|
"roleId":2, |
||||||
|
"schoolId":4, |
||||||
|
"staffGradeId":4, |
||||||
|
"staffGradeName":"4", |
||||||
|
"staffId":134, |
||||||
|
"staffName":"4", |
||||||
|
"staffProfessionalArchitectureId":4, |
||||||
|
"staffProfessionalArchitectureName":"4", |
||||||
|
"staffWorkNumber":"4", |
||||||
|
"uniqueIdentificationAccount":"4" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"account":"1", |
||||||
|
"email":"1", |
||||||
|
"logNumber":0, |
||||||
|
"phone":"1", |
||||||
|
"roleId":3, |
||||||
|
"schoolId":1, |
||||||
|
"staffGradeId":1, |
||||||
|
"staffGradeName":"1", |
||||||
|
"staffId":135, |
||||||
|
"staffName":"1", |
||||||
|
"staffProfessionalArchitectureId":1, |
||||||
|
"staffProfessionalArchitectureName":"1", |
||||||
|
"staffWorkNumber":"1", |
||||||
|
"uniqueIdentificationAccount":"1" |
||||||
|
} |
||||||
|
], |
||||||
|
"Student":[ |
||||||
|
{ |
||||||
|
"account":"2", |
||||||
|
"classId":1, |
||||||
|
"className":"1", |
||||||
|
"email":"1", |
||||||
|
"gradeId":1, |
||||||
|
"gradeName":"1", |
||||||
|
"isAssess":0, |
||||||
|
"loginNumber":0, |
||||||
|
"phone":"2", |
||||||
|
"professionalId":1, |
||||||
|
"professionalName":"1", |
||||||
|
"roleId":4, |
||||||
|
"schoolId":1, |
||||||
|
"studentId":75, |
||||||
|
"studentName":"2", |
||||||
|
"studentNumber":"2", |
||||||
|
"uniqueIdentificationAccount":"1" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"account":"3", |
||||||
|
"classId":3, |
||||||
|
"className":"3", |
||||||
|
"email":"3", |
||||||
|
"gradeId":3, |
||||||
|
"gradeName":"3", |
||||||
|
"isAssess":0, |
||||||
|
"loginNumber":0, |
||||||
|
"phone":"3", |
||||||
|
"professionalId":3, |
||||||
|
"professionalName":"3", |
||||||
|
"roleId":4, |
||||||
|
"schoolId":3, |
||||||
|
"studentId":76, |
||||||
|
"studentName":"3", |
||||||
|
"studentNumber":"3", |
||||||
|
"uniqueIdentificationAccount":"3" |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
"status":200 |
||||||
|
}; |
||||||
|
let result = {}; |
||||||
|
let staff = data.message.Staff; |
||||||
|
let student = data.message.Student; |
||||||
|
|
||||||
|
for(let j in staff) { |
||||||
|
// console.log(j != 'removeByValue') |
||||||
|
// if(`s${staff[n].schoolId}` == ) |
||||||
|
if(j != 'removeByValue'){ |
||||||
|
// console.log(j) |
||||||
|
if(result[`s${staff[j].schoolId}`]){ |
||||||
|
result[`s${staff[j].schoolId}`].push(staff[j]) |
||||||
|
}else{ |
||||||
|
result[`s${staff[j].schoolId}`] = [staff[j]] |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
console.log(3334,student) |
||||||
|
for(let n in student) { |
||||||
|
if(n != 'removeByValue'){ |
||||||
|
console.log(n) |
||||||
|
console.log(student[n]) |
||||||
|
if(result[`s${student[n].schoolId}`]){ |
||||||
|
result[`s${student[n].schoolId}`].push(student[n]) |
||||||
|
}else{ |
||||||
|
result[`s${student[n].schoolId}`] = [student[n]] |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
console.log(3333,result) |
||||||
|
}, |
||||||
|
getStudent(){ |
||||||
|
let data = { |
||||||
|
pageNo: this.pageNo, |
||||||
|
pageSize: this.pageSize, |
||||||
|
searchContent: this.keyword, |
||||||
|
professionalId: this.professionalStudentIds, |
||||||
|
gradeIds: this.gradeIds, |
||||||
|
classIds: this.classIds, |
||||||
|
schoolId: this.form.schoolId |
||||||
|
} |
||||||
|
this.$get(this.api.queryStudentData,data).then(res => { |
||||||
|
let Length = res.message.rows.length |
||||||
|
for (let i = 0; i < Length; i++) { |
||||||
|
res.message.rows[i].roleId = this.core.roleType(res.message.rows[i].roleId) |
||||||
|
} |
||||||
|
this.studentData = res.message.rows |
||||||
|
this.pages = res.message.totalPages*10 |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
fircheck(val){ |
||||||
|
val.ischeck = !val.ischeck |
||||||
|
val.children.map(e => { |
||||||
|
e.children.map(r => { |
||||||
|
if(val.ischeck){ |
||||||
|
e.ischeck = true |
||||||
|
r.ischeck = true |
||||||
|
this.parmData.push(r.classId) |
||||||
|
}else{ |
||||||
|
e.ischeck = false |
||||||
|
r.ischeck = false |
||||||
|
this.core.removeByValue(this.parmData, r.classId); |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
this.classIds = this.parmData.toString() |
||||||
|
this.getStudent() |
||||||
|
}, |
||||||
|
twocheck(val,val2){ |
||||||
|
const twoStatus = val.ischeck |
||||||
|
val.ischeck = !twoStatus |
||||||
|
val2.map(e => { |
||||||
|
e.children.map(r => { |
||||||
|
r.children.map(k =>{ |
||||||
|
if(r.gradeId == val.gradeId){ |
||||||
|
if(r.ischeck){ |
||||||
|
e.ischeck = true |
||||||
|
k.ischeck = true |
||||||
|
this.parmData.push(k.classId) |
||||||
|
} else { |
||||||
|
e.ischeck = false |
||||||
|
k.ischeck = false |
||||||
|
this.core.removeByValue(this.parmData, k.classId); |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
}) |
||||||
|
this.classIds = this.parmData.toString() |
||||||
|
this.getStudent() |
||||||
|
}, |
||||||
|
threecheck(val,val2){ |
||||||
|
const threeStatus = val.ischeck |
||||||
|
val.ischeck = !threeStatus |
||||||
|
val2.map(e => { |
||||||
|
e.children.map(r => { |
||||||
|
r.children.map(k =>{ |
||||||
|
if(k.classId == val.classId){ |
||||||
|
if(k.ischeck){ |
||||||
|
e.ischeck = true |
||||||
|
r.ischeck = true |
||||||
|
this.parmData.push(val.classId) |
||||||
|
} else { |
||||||
|
e.ischeck = false |
||||||
|
r.ischeck = false |
||||||
|
this.core.removeByValue(this.parmData,val.classId); |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
}) |
||||||
|
this.classIds = this.parmData.toString() |
||||||
|
this.getStudent() |
||||||
|
}, |
||||||
|
closestudent(){ |
||||||
|
this.$refs.studentForm.resetFields() |
||||||
|
}, |
||||||
|
addstudent(){ |
||||||
|
this.studentForm.studentId = '' |
||||||
|
this.studentVisible = true |
||||||
|
this.isAddstudent = true |
||||||
|
this.majorList = this.$refs.getSelectData.majorList |
||||||
|
}, |
||||||
|
editstudent(row){ |
||||||
|
this.studentVisible = true |
||||||
|
this.isAddstudent = false |
||||||
|
this.studentForm.studentId = row.studentId |
||||||
|
this.majorList = this.$refs.getSelectData.majorList |
||||||
|
this.isNewUser = 0 |
||||||
|
console.log(12,row) |
||||||
|
let data = { |
||||||
|
studentId: row.userId, |
||||||
|
roleId: row.roleId |
||||||
|
} |
||||||
|
this.$get(this.api.queryStudentDetails,data).then(res => { |
||||||
|
this.studentForm.userName = res.message[0].student.studentName, |
||||||
|
this.studentForm.roleValue = res.message[0].student.roleId, |
||||||
|
this.studentForm.studentAccount = res.message[0].student.studentNumber, |
||||||
|
this.studentForm.uniqueIdentificationAccount = res.message[0].student.uniqueIdentificationAccount, |
||||||
|
this.studentForm.professionalId = res.message[0].student.professionalId, |
||||||
|
this.studentForm.gradeId = res.message[0].student.gradeId, |
||||||
|
this.studentForm.classId = res.message[0].student.classId, |
||||||
|
this.studentForm.mobile = res.message[0].student.phone, |
||||||
|
this.studentForm.email = res.message[0].student.email, |
||||||
|
this.studentForm.uniqueIdentificationAccount = res.message[0].student.uniqueIdentificationAccount, |
||||||
|
this.studentForm.userAccount = res.message[0].user.userAccount |
||||||
|
this.getGradeData() |
||||||
|
this.getClassData() |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
// 获取年级 |
||||||
|
getGrade(){ |
||||||
|
this.studentForm.gradeId = '' |
||||||
|
this.studentForm.classId = '' |
||||||
|
this.getGradeData() |
||||||
|
}, |
||||||
|
getGradeData(){ |
||||||
|
let data = { |
||||||
|
stuProfessionalArchitectureId: this.studentForm.professionalId |
||||||
|
} |
||||||
|
this.$get(this.api.queryStuGrade,data).then(res => { |
||||||
|
this.gradeList = res.message |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
//获取班级 |
||||||
|
getClass(){ |
||||||
|
this.studentForm.classId = '' |
||||||
|
this.getClassData() |
||||||
|
}, |
||||||
|
getClassData(){ |
||||||
|
let data = { |
||||||
|
gradeId: this.studentForm.gradeId |
||||||
|
} |
||||||
|
this.$get(this.api.queryStuClass,data).then(res => { |
||||||
|
this.classList = res.message |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
async phoneChange(){ |
||||||
|
let res = await this.$get(this.api.queryPhone, { phone: this.studentForm.mobile }); |
||||||
|
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.studentForm.userAccount, |
||||||
|
schoolId: this.updata.schoolId |
||||||
|
}); |
||||||
|
this.isTeacher = 0 |
||||||
|
if(res.message.user.length != 0){ |
||||||
|
let user = res.message.user[0]; |
||||||
|
let or = res.message.OR; |
||||||
|
this.$message.warning('该账号已存在'); |
||||||
|
this.studentForm.email = user.email |
||||||
|
this.studentForm.phone = user.phone |
||||||
|
this.studentForm.userName = user.userName |
||||||
|
this.studentForm.schoolId = user.schoolId |
||||||
|
this.studentForm.userId = user.userId |
||||||
|
this.isNewUser = 0 |
||||||
|
or.forEach((n,i) => { |
||||||
|
if(n.roleId == 4) { |
||||||
|
this.isTeacher = 1 |
||||||
|
this.studentForm.studentAccount = n.workNumber |
||||||
|
this.studentForm.schoolId = n.schoolId |
||||||
|
} |
||||||
|
}) |
||||||
|
this.AccountNoAdd = false |
||||||
|
}else{ |
||||||
|
this.isNewUser = 1 |
||||||
|
this.AccountNoAdd = true |
||||||
|
} |
||||||
|
}, |
||||||
|
async OnlyId(){ |
||||||
|
if(this.studentForm.studentAccount){ |
||||||
|
let res = await this.$get(this.api.queryWorkNumberIsExist, { |
||||||
|
workNumber: this.studentForm.studentAccount, |
||||||
|
roleId: 4, |
||||||
|
schoolId: this.studentForm.schoolId |
||||||
|
}); |
||||||
|
if(res.message.length != 0){ |
||||||
|
this.$message.warning('该学号已存在'); |
||||||
|
this.NumberNoAdd = false |
||||||
|
}else{ |
||||||
|
let timestamp = Date.parse(new Date()); |
||||||
|
this.studentForm.uniqueIdentificationAccount = `${this.form.schoolId}${this.studentForm.studentAccount}${timestamp}` |
||||||
|
this.NumberNoAdd = true |
||||||
|
} |
||||||
|
}else{ |
||||||
|
this.studentForm.uniqueIdentificationAccount = '' |
||||||
|
} |
||||||
|
}, |
||||||
|
saveSure(studentForm){ |
||||||
|
this.$refs[studentForm].validate((valid) => { |
||||||
|
if (valid) { |
||||||
|
if(this.isTeacher) return this.$message.warning('该用户已经是学生，请重新添加'); |
||||||
|
if(!this.NoAdd) return this.$message.warning('该手机号已存在'); |
||||||
|
if(!this.AccountNoAdd) return this.$message.warning('该账号已存在'); |
||||||
|
if(!this.NumberNoAdd) return this.$message.warning('该学号已存在'); |
||||||
|
let data = { |
||||||
|
userInfo: { |
||||||
|
isNewUser: this.isNewUser, |
||||||
|
userName: this.studentForm.userName, |
||||||
|
account: this.studentForm.userAccount, |
||||||
|
phone: this.studentForm.mobile, |
||||||
|
email: this.studentForm.email, |
||||||
|
uniqueIdentificationAccount: this.studentForm.uniqueIdentificationAccount, |
||||||
|
schoolId: this.updata.schoolId, |
||||||
|
roleId: 4, |
||||||
|
userId: this.studentForm.userId ? this.studentForm.userId : '' |
||||||
|
}, |
||||||
|
organizationRelationship: { |
||||||
|
professionalId: this.studentForm.professionalId, |
||||||
|
gradeId: this.studentForm.gradeId, |
||||||
|
classId: this.studentForm.classId, |
||||||
|
workNumber: this.studentForm.studentAccount, |
||||||
|
schoolId: this.updata.schoolId |
||||||
|
} |
||||||
|
} |
||||||
|
if(this.studentForm.studentId){ |
||||||
|
this.$post(this.api.updateStudent,data).then(res => { |
||||||
|
this.studentVisible = false |
||||||
|
this.$message.success('编辑成功'); |
||||||
|
this.getStudent() |
||||||
|
}).catch(res => {}); |
||||||
|
}else{ |
||||||
|
this.$post(this.api.addStudent,data).then(res => { |
||||||
|
this.studentVisible = false |
||||||
|
this.$message.success('添加成功'); |
||||||
|
this.getStudent() |
||||||
|
}).catch(res => {}); |
||||||
|
} |
||||||
|
}else{ |
||||||
|
return false; |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
delstudent(row){ |
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
let data = [row.userId] |
||||||
|
this.$post(this.api.deleteStudent,data).then(res => { |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.getStudent() |
||||||
|
}).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.deleteStudent,data).then(res => { |
||||||
|
this.multipleSelection = []; |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.getStudent() |
||||||
|
}).catch(res => {}); |
||||||
|
}).catch(() => {}); |
||||||
|
}else{ |
||||||
|
this.$message.error('请先选择学生 ！'); |
||||||
|
} |
||||||
|
}, |
||||||
|
batchImport(){ |
||||||
|
this.importVisible = true |
||||||
|
}, |
||||||
|
searchstudent(){ |
||||||
|
this.pageNo = 1 |
||||||
|
this.getStudent() |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.pageNo = val; |
||||||
|
this.getStudent(); |
||||||
|
}, |
||||||
|
downLoad(){ |
||||||
|
window.open('http://www.liuwanr.cn:8080/makeuplist/excelExport?fileName=模板下载&titles=学生姓名,账号角色,学生学号,专业,年级,班级,手机号码,邮箱') |
||||||
|
}, |
||||||
|
// 上传文件 |
||||||
|
handleExceed(files, fileList) { |
||||||
|
// console.log(files, fileList) |
||||||
|
this.$message.warning( |
||||||
|
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` |
||||||
|
); |
||||||
|
}, |
||||||
|
uploadSuccess(response, file, fileList) { |
||||||
|
// this.uploadList.push({ name: file.name, url: response.message.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 |
||||||
|
}, |
||||||
|
uploadSure(){ |
||||||
|
this.importVisible = false |
||||||
|
this.pageNo = 1 |
||||||
|
this.classIds = '' |
||||||
|
this.keyword = '' |
||||||
|
this.getStudent() |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
.el-container{ |
||||||
|
background-color: #f0f0f0; |
||||||
|
} |
||||||
|
.mag{ |
||||||
|
margin-right: 20px; |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,526 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<div> |
||||||
|
<!-- <p class="side_icon mab20"> |
||||||
|
<i class="icon-jiahao mar20" @click="addMajor()"></i> --> |
||||||
|
<!-- <i class="icon-delete"></i> --> |
||||||
|
<!-- </p> --> |
||||||
|
<lctree :data="majorList" |
||||||
|
@addMajor="addMajor" @editmajorClass="editmajorClass" @delClassDepartment="delClassDepartment" |
||||||
|
@addClassDepartment="addClassDepartment" @editDepartment="editDepartment" @delDepart="delDepart" |
||||||
|
@addClass="addClass" @editClass="editClass" @delClass="delClass" |
||||||
|
@fircheckitem="fircheckitem" @twocheckitem="twocheckitem" @threecheckitem="threecheckitem" |
||||||
|
></lctree> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 添加专业 --> |
||||||
|
<el-dialog :title="Form.classmajorId ? '编辑专业' : '新增专业'" :visible.sync="isaddClassMajor" width="24%" center @close="closeAddClass" :close-on-click-modal="false"> |
||||||
|
<el-form ref="Form" :model="Form" :rules="rules"> |
||||||
|
<el-form-item prop="classmajorName"> |
||||||
|
<el-input placeholder="请输入专业名称" v-model="Form.classmajorName"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="isaddClassMajor = false">取 消</el-button> |
||||||
|
<el-button type="primary" @click="sure('Form')">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
|
||||||
|
<!-- 添加年级 --> |
||||||
|
<el-dialog :title="Form2.departmentId ? '编辑年级' : '新增年级'" :visible.sync="isAddDepartment" width="24%" center @close="closeAddClass2" :close-on-click-modal="false"> |
||||||
|
<el-form ref="Form2" :model="Form2" :rules="rules"> |
||||||
|
<el-form-item prop="departmentName"> |
||||||
|
<el-input placeholder="请输入年级名称" v-model="Form2.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('Form2')">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
|
||||||
|
<!-- 添加班级 --> |
||||||
|
<el-dialog :title="Form3.classId ? '编辑班级' : '新增班级'" :visible.sync="isAddClass" width="24%" center @close="closeAddClass3" :close-on-click-modal="false"> |
||||||
|
<el-form ref="Form3" :model="Form3" :rules="rules"> |
||||||
|
<el-form-item prop="className"> |
||||||
|
<el-input placeholder="请输入班级名称" v-model="Form3.className"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="isAddClass = false">取 消</el-button> |
||||||
|
<el-button type="primary" @click="sureClass('Form3')">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import lctree from '../../common/Stutree'; |
||||||
|
export default { |
||||||
|
props:["Data"], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
majorList: [], |
||||||
|
firactive: 0, |
||||||
|
twoactive: 0, |
||||||
|
threeactive: 0, |
||||||
|
isaddClassMajor: false, |
||||||
|
isAddDepartment: false, |
||||||
|
isAddClass: false, |
||||||
|
schoolId: this.$store.state.schoolId, |
||||||
|
Form: { |
||||||
|
classmajorId: '', |
||||||
|
classmajorName: '', |
||||||
|
}, |
||||||
|
Form2: { |
||||||
|
departmentId: '', |
||||||
|
departmentName: '', |
||||||
|
}, |
||||||
|
Form3: { |
||||||
|
classId: '', |
||||||
|
className: '' |
||||||
|
}, |
||||||
|
rules: { |
||||||
|
classmajorName: [ |
||||||
|
{ required: true, message: '请输入专业名称', trigger: 'blur' } |
||||||
|
], |
||||||
|
departmentName: [ |
||||||
|
{ required: true, message: '请输入年级名称', trigger: 'blur' }, |
||||||
|
{ |
||||||
|
pattern: /^[0-9]*$/, |
||||||
|
message: '年级名称必须为数字', |
||||||
|
trigger: 'blur' |
||||||
|
} |
||||||
|
], |
||||||
|
className: [ |
||||||
|
{ required: true, message: '请输入班级名称', trigger: 'blur' }, |
||||||
|
{ |
||||||
|
pattern: /^[0-9]*$/, |
||||||
|
message: '班级名称必须为数字', |
||||||
|
trigger: 'blur' |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
lctree |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
this.getStaff() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getStaff(){ |
||||||
|
let data = { |
||||||
|
schoolId: this.schoolId |
||||||
|
} |
||||||
|
this.$get(this.api.queryStuPro,data).then(res => { |
||||||
|
if(res.message){ |
||||||
|
res.message.map(e => { |
||||||
|
(e.ifVisible = false), (e.ischeck = false), (e.label = e.stuProfessionalArchitectureName); |
||||||
|
let data = { |
||||||
|
stuProfessionalArchitectureId: e.stuProfessionalArchitectureId |
||||||
|
} |
||||||
|
this.$get(this.api.queryStuGrade,data).then(res => { |
||||||
|
if(res.message){ |
||||||
|
e.children = res.message |
||||||
|
res.message.map(e => { |
||||||
|
(e.ifVisible = false), (e.ischeck = false), (e.label = e.gradeName); |
||||||
|
let data = { |
||||||
|
gradeId: e.gradeId |
||||||
|
} |
||||||
|
this.$get(this.api.queryStuClass,data).then(res => { |
||||||
|
if(res.message){ |
||||||
|
res.message.map(e => { |
||||||
|
(e.ifVisible = false), (e.ischeck = false), (e.label = e.className); |
||||||
|
}) |
||||||
|
e.children = res.message |
||||||
|
} |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
} |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
} |
||||||
|
setTimeout(() => { |
||||||
|
this.majorList = res.message |
||||||
|
}, 500); |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
// 选择专业 |
||||||
|
fircheckitem(item){ |
||||||
|
this.$emit("fircheck",item) |
||||||
|
}, |
||||||
|
// 选择年级 |
||||||
|
twocheckitem(item){ |
||||||
|
this.$emit("twocheck",item,this.majorList) |
||||||
|
}, |
||||||
|
threeClick(index){ |
||||||
|
this.threeactive = index |
||||||
|
}, |
||||||
|
// 选择班级 |
||||||
|
threecheckitem(three){ |
||||||
|
this.$emit("threecheck",three,this.majorList) |
||||||
|
}, |
||||||
|
closeAddClass(){ |
||||||
|
this.$refs.Form.resetFields() |
||||||
|
}, |
||||||
|
closeAddClass2(){ |
||||||
|
this.$refs.Form2.resetFields() |
||||||
|
}, |
||||||
|
closeAddClass3(){ |
||||||
|
this.$refs.Form3.resetFields() |
||||||
|
}, |
||||||
|
// 新增编辑专业 |
||||||
|
addMajor(){ |
||||||
|
this.Form.classmajorId = '' |
||||||
|
this.Form.classmajorName = '' |
||||||
|
this.isaddClassMajor = true |
||||||
|
}, |
||||||
|
editmajorClass(item){ |
||||||
|
this.Form.classmajorId = item.stuProfessionalArchitectureId, |
||||||
|
this.Form.classmajorName = item.stuProfessionalArchitectureName |
||||||
|
this.isaddClassMajor = true |
||||||
|
}, |
||||||
|
delClassDepartment(item,index){ |
||||||
|
this.$confirm('确定要删除该专业吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
let data = { |
||||||
|
stuProfessionalArchitectureId: item.stuProfessionalArchitectureId |
||||||
|
} |
||||||
|
this.$post(this.api.deleteStuPro,data).then(res => { |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.majorList.splice(index, 1) |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}, |
||||||
|
sure(Form){ |
||||||
|
this.$refs[Form].validate((valid) => { |
||||||
|
if (valid) { |
||||||
|
let data = { |
||||||
|
stuProfessionalArchitectureName: this.Form.classmajorName, |
||||||
|
stuProfessionalArchitectureId: this.Form.classmajorId, |
||||||
|
schoolId: this.$store.state.schoolId, |
||||||
|
} |
||||||
|
if(this.Form.classmajorId){ |
||||||
|
this.$post(this.api.updateStuPro,data).then(res => { |
||||||
|
this.$message.success('编辑成功'); |
||||||
|
this.isaddClassMajor = false |
||||||
|
this.majorList.map(e =>{ |
||||||
|
if(e.stuProfessionalArchitectureId == this.Form.classmajorId){ |
||||||
|
e.stuProfessionalArchitectureName = this.Form.classmajorName |
||||||
|
e.label = this.Form.classmajorName |
||||||
|
} |
||||||
|
}) |
||||||
|
}).catch(res => {}); |
||||||
|
}else{ |
||||||
|
this.$post(this.api.addStuPro,data).then(res => { |
||||||
|
this.$message.success('添加成功'); |
||||||
|
this.isaddClassMajor = false |
||||||
|
let newData = { |
||||||
|
stuProfessionalArchitectureId: res.message, |
||||||
|
stuProfessionalArchitectureName : this.Form.classmajorName, |
||||||
|
label: this.Form.classmajorName, |
||||||
|
ifVisible: false, |
||||||
|
ischeck: false, |
||||||
|
children: [] |
||||||
|
} |
||||||
|
this.majorList.push(newData) |
||||||
|
}).catch(res => {}); |
||||||
|
} |
||||||
|
}else{ |
||||||
|
return false; |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 新增编辑年级 |
||||||
|
addClassDepartment(item){ |
||||||
|
this.Form2.departmentId = '' |
||||||
|
this.Form2.departmentName = '' |
||||||
|
this.isAddDepartment = true |
||||||
|
this.Form.classmajorId = item.stuProfessionalArchitectureId |
||||||
|
}, |
||||||
|
editDepartment(item){ |
||||||
|
this.Form2.departmentId = item.gradeId, |
||||||
|
this.Form2.departmentName = item.gradeName |
||||||
|
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].gradeName == item.gradeName){ |
||||||
|
this.Form.classmajorId = this.majorList[j].stuProfessionalArchitectureId |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
delDepart(item,index){ |
||||||
|
this.$confirm('确定要删除该年级吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
let data = { |
||||||
|
gradeId: item.gradeId |
||||||
|
} |
||||||
|
this.$post(this.api.deleteStuGrade,data).then(res => { |
||||||
|
this.$message.success('删除成功'); |
||||||
|
|
||||||
|
this.majorList.map(e =>{ |
||||||
|
e.children.map(r =>{ |
||||||
|
if(r.gradeId == item.gradeId){ |
||||||
|
e.children.splice(index,1) |
||||||
|
if(e.children.length == 0){ |
||||||
|
e.ifVisible = false |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}, |
||||||
|
sureDepartment(Form2){ |
||||||
|
this.$refs[Form2].validate((valid) => { |
||||||
|
if (valid) { |
||||||
|
let data = { |
||||||
|
gradeName: this.Form2.departmentName, |
||||||
|
gradeId: this.Form2.departmentId, |
||||||
|
stuProfessionalArchitectureId: this.Form.classmajorId, |
||||||
|
} |
||||||
|
if(this.Form2.departmentId){ |
||||||
|
this.$post(this.api.updateStuGrade,data).then(res => { |
||||||
|
this.$message.success('编辑成功'); |
||||||
|
this.isAddDepartment = false |
||||||
|
this.majorList.map(e =>{ |
||||||
|
e.children.map(r =>{ |
||||||
|
if(r.gradeId == this.Form2.departmentId){ |
||||||
|
r.gradeName = this.Form2.departmentName |
||||||
|
r.label = this.Form2.departmentName |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
}).catch(res => {}); |
||||||
|
}else{ |
||||||
|
this.$post(this.api.addStuGrade,data).then(res => { |
||||||
|
this.$message.success('添加成功'); |
||||||
|
this.isAddDepartment = false |
||||||
|
let newData = { |
||||||
|
gradeId: res.message, |
||||||
|
gradeName: this.Form2.departmentName, |
||||||
|
label: this.Form2.departmentName, |
||||||
|
ifVisible: false, |
||||||
|
ischeck: false, |
||||||
|
children: [] |
||||||
|
} |
||||||
|
this.majorList.map(e =>{ |
||||||
|
if(e.stuProfessionalArchitectureId == this.Form.classmajorId){ |
||||||
|
e.ifVisible = true |
||||||
|
e.children.push(newData) |
||||||
|
} |
||||||
|
}) |
||||||
|
}).catch(res => {}); |
||||||
|
} |
||||||
|
}else{ |
||||||
|
return false; |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 新增编辑班级 |
||||||
|
addClass(two){ |
||||||
|
this.Form3.classId = '' |
||||||
|
this.Form3.className = '' |
||||||
|
this.isAddClass = true |
||||||
|
this.Form2.departmentId = two.gradeId |
||||||
|
}, |
||||||
|
editClass(three){ |
||||||
|
this.Form3.classId = three.classId, |
||||||
|
this.Form3.className = three.className |
||||||
|
this.isAddClass = true |
||||||
|
for (let j = 0; j < this.majorList.length; j++) { |
||||||
|
for (let k = 0; k < this.majorList[j].children.length; k++) { |
||||||
|
for(let l = 0; l < this.majorList[j].children[k].children.length; l++){ |
||||||
|
if(this.majorList[j].children[k].children[l].className == three.className){ |
||||||
|
this.Form2.departmentId = this.majorList[j].gradeId |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
delClass(item,index){ |
||||||
|
this.$confirm('确定要删除该班级吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
let data = { |
||||||
|
classId: item.classId |
||||||
|
} |
||||||
|
this.$post(this.api.deleteStuClass,data).then(res => { |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.majorList.map(e =>{ |
||||||
|
e.children.map(r =>{ |
||||||
|
r.children.map(c =>{ |
||||||
|
if(c.classId == item.classId){ |
||||||
|
r.children.splice(index,1) |
||||||
|
if(r.children.length == 0){ |
||||||
|
r.ifVisible = false |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
}) |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}, |
||||||
|
sureClass(Form3){ |
||||||
|
this.$refs[Form3].validate((valid) => { |
||||||
|
if (valid) { |
||||||
|
let data = { |
||||||
|
className: this.Form3.className, |
||||||
|
classId: this.Form3.classId, |
||||||
|
gradeId: this.Form2.departmentId |
||||||
|
} |
||||||
|
if(this.Form3.classId){ |
||||||
|
this.$post(this.api.updateStuClass,data).then(res => { |
||||||
|
this.$message.success('编辑成功'); |
||||||
|
this.isAddClass = false |
||||||
|
this.majorList.map(e =>{ |
||||||
|
e.children.map(r =>{ |
||||||
|
r.children.map(c =>{ |
||||||
|
if(c.classId == this.Form3.classId){ |
||||||
|
c.className = this.Form3.className |
||||||
|
c.label = this.Form3.className |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
}) |
||||||
|
}).catch(res => {}); |
||||||
|
}else{ |
||||||
|
this.$post(this.api.addStuClass,data).then(res => { |
||||||
|
this.$message.success('添加成功'); |
||||||
|
this.isAddClass = false |
||||||
|
let newData = { |
||||||
|
classId: res.message, |
||||||
|
className: this.Form3.className, |
||||||
|
label: this.Form3.className, |
||||||
|
ifVisible: false, |
||||||
|
ischeck: false |
||||||
|
} |
||||||
|
this.majorList.map(e =>{ |
||||||
|
e.children.map(r =>{ |
||||||
|
if(r.gradeId == this.Form2.departmentId){ |
||||||
|
r.ifVisible = true |
||||||
|
if(r.children.length == 0){ |
||||||
|
let arr = [] |
||||||
|
arr.push(newData) |
||||||
|
r.children = arr |
||||||
|
}else{ |
||||||
|
r.children.push(newData) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
}).catch(res => {}); |
||||||
|
} |
||||||
|
}else{ |
||||||
|
return false; |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</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: 30px; |
||||||
|
color: #328aff; |
||||||
|
} |
||||||
|
.side_tree{ |
||||||
|
width: 100%; |
||||||
|
font-size: 18px; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
.side_tree i{ |
||||||
|
color: #328aff; |
||||||
|
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: #328aff; |
||||||
|
} |
||||||
|
/* .two_active:hover{ |
||||||
|
color: #328aff; |
||||||
|
cursor:pointer; |
||||||
|
} */ |
||||||
|
.two_back{ |
||||||
|
width: 100%; |
||||||
|
margin-top: 20px; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
.two_back:hover{ |
||||||
|
cursor:pointer; |
||||||
|
color: #328aff; |
||||||
|
} |
||||||
|
.three_back{ |
||||||
|
width: 100%; |
||||||
|
margin-top: 20px; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
.three_back:hover{ |
||||||
|
cursor:pointer; |
||||||
|
color: #328aff; |
||||||
|
} |
||||||
|
.mar_top{ |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
.back_active{ |
||||||
|
box-shadow:1px 14px 29px 0px rgba(138,97,250,0.19); |
||||||
|
} |
||||||
|
.bor_lef{ |
||||||
|
padding: 10px 0; |
||||||
|
margin-left: 40px; |
||||||
|
} |
||||||
|
.three_lef{ |
||||||
|
margin-left: 60px; |
||||||
|
padding: 20px 0; |
||||||
|
} |
||||||
|
.three_text{ |
||||||
|
font-size: 18px; |
||||||
|
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,287 @@ |
|||||||
|
<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" @click.stop="open(item)" v-for="(item,index) in data" :key="index"> |
||||||
|
<div class="item" @click.stop="open(item)"> |
||||||
|
<!-- <i :class="{ 'arrowTransform': !item.ifVisible, 'arrowTransformReturn': item.ifVisible}" class="icon-shixiangyoujiantou-"></i> --> |
||||||
|
<img |
||||||
|
:class="{ 'arrowTransform': !item.ifVisible, 'arrowTransformReturn': item.ifVisible}" |
||||||
|
src="../../assets/img/icon-xiangyou.png" |
||||||
|
alt |
||||||
|
/> |
||||||
|
<i :class="item.ischeck ? 'icon-yigouxuan' : 'icon-weigouxuan'" @click.stop="fircheckitem(item)"></i> |
||||||
|
<span>{{item.label}}</span> |
||||||
|
<i class="el-icon-info ft" @click.stop="editmajorClass(item)"></i> |
||||||
|
<i class="el-icon-circle-plus ft" @click.stop="addClassDepartment(item)"></i> |
||||||
|
<i class="icon-delete ft" @click.stop="delClassDepartment(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="item1" @click.stop="open(item1)"> |
||||||
|
<img |
||||||
|
:class="{ 'arrowTransform': !item1.ifVisible, 'arrowTransformReturn': item1.ifVisible}" |
||||||
|
src="../../assets/img/icon-xiangyou.png" |
||||||
|
alt |
||||||
|
style="margin-left:30px" |
||||||
|
/> |
||||||
|
<i :class="item1.ischeck ? 'icon-yigouxuan' : 'icon-weigouxuan'" @click.stop="twocheckitem(item1)"></i> |
||||||
|
<span>{{item1.label}}年级</span> |
||||||
|
<i class="el-icon-info ft" @click.stop="editDepartment(item1)"></i> |
||||||
|
<i class="el-icon-circle-plus ft" @click.stop="addClass(item1)"></i> |
||||||
|
<i class="icon-delete ft" @click.stop="delDepart(item1,index1)"></i> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div v-show="item1.ifVisible" v-if="item1.children&&item1.children.length!=0"> |
||||||
|
<div v-for="(item2,index2) in item1.children" :key="index2"> |
||||||
|
<div class="item2" @click.stop="open(item2)"> |
||||||
|
<i :class="item2.ischeck ? 'icon-yigouxuan' : 'icon-weigouxuan'" @click.stop="threecheckitem(item2)"></i> |
||||||
|
<span>{{item2.label}}班</span> |
||||||
|
<i class="el-icon-info ft" @click.stop="editClass(item2)"></i> |
||||||
|
<i class="icon-delete ft" @click.stop="delClass(item2,index2)"></i> |
||||||
|
</div> |
||||||
|
<!-- <div |
||||||
|
v-show="item2.ifVisible" |
||||||
|
v-if="item2.children&&item2.children.length!=0" |
||||||
|
> |
||||||
|
<div |
||||||
|
class="item4" |
||||||
|
@click.stop="choose(item3)" |
||||||
|
v-for="(item3,index3) in item2.children" |
||||||
|
:key="index3" |
||||||
|
> |
||||||
|
<span :class="{checkBox:true,isActive:item3.ifVisible}"></span> |
||||||
|
{{item3.label}} |
||||||
|
</div> |
||||||
|
</div> --> |
||||||
|
</div> |
||||||
|
</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) { |
||||||
|
item.ifVisible = !item.ifVisible; |
||||||
|
}, |
||||||
|
|
||||||
|
//选中叶子节点时将选中的叶子节点添加进数组，如果叶子节点存在则删除，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); |
||||||
|
}, |
||||||
|
threecheckitem(item){ |
||||||
|
this.$emit('threecheckitem',item); |
||||||
|
}, |
||||||
|
// 专业 |
||||||
|
addMajor(){ |
||||||
|
this.$emit('addMajor'); |
||||||
|
}, |
||||||
|
editmajorClass(item){ |
||||||
|
this.$emit('editmajorClass',item); |
||||||
|
}, |
||||||
|
delClassDepartment(item,index){ |
||||||
|
this.$emit('delClassDepartment',item,index); |
||||||
|
}, |
||||||
|
// 年级 |
||||||
|
addClassDepartment(item){ |
||||||
|
this.$emit('addClassDepartment',item); |
||||||
|
}, |
||||||
|
editDepartment(item){ |
||||||
|
this.$emit('editDepartment',item); |
||||||
|
}, |
||||||
|
delDepart(item,index){ |
||||||
|
this.$emit('delDepart',item,index); |
||||||
|
}, |
||||||
|
// 班级 |
||||||
|
addClass(item){ |
||||||
|
this.$emit('addClass',item); |
||||||
|
}, |
||||||
|
editClass(item){ |
||||||
|
this.$emit('editClass',item); |
||||||
|
}, |
||||||
|
delClass(item,index){ |
||||||
|
this.$emit('delClass',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: 30px; |
||||||
|
width: 30px; |
||||||
|
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; |
||||||
|
} |
||||||
|
.item1 { |
||||||
|
@include public; |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
.item1:hover{ |
||||||
|
color: #328aff; |
||||||
|
} |
||||||
|
.item2 { |
||||||
|
@include public; |
||||||
|
margin-top: 20px; |
||||||
|
margin-left:90px |
||||||
|
} |
||||||
|
.item2:hover{ |
||||||
|
color: #328aff; |
||||||
|
} |
||||||
|
.item4 { |
||||||
|
@include public; |
||||||
|
align-items: center; |
||||||
|
border-bottom: 1px solid $insideColor; |
||||||
|
padding-left: 80px; |
||||||
|
background: rgba(255, 255, 255, 1); |
||||||
|
} |
||||||
|
|
||||||
|
//清除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: #328aff; |
||||||
|
} |
||||||
|
} |
||||||
|
.side_icon{ |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
.side_icon i{ |
||||||
|
cursor:pointer; |
||||||
|
font-size: 30px; |
||||||
|
} |
||||||
|
.side_tree{ |
||||||
|
width: 100%; |
||||||
|
font-size: 18px; |
||||||
|
color: #333; |
||||||
|
i{ |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
span{ |
||||||
|
margin-left: 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
</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('/'); |
||||||
|
} |
||||||
|
}, |
||||||
|
// 关闭全部标签 |
||||||
|
closeAll(){ |
||||||
|
this.tagsList = []; |
||||||
|
this.$router.push('/'); |
||||||
|
}, |
||||||
|
// 关闭其他标签 |
||||||
|
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,749 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-container> |
||||||
|
<el-aside width="350px"> |
||||||
|
<TeacherSide ref="getSelectData" @fircheck="fircheck" @twocheck="twocheck"></TeacherSide> |
||||||
|
</el-aside> |
||||||
|
|
||||||
|
<el-main> |
||||||
|
<el-col :span="24"> |
||||||
|
<el-card shadow="hover" class="mgb20 teacher_tab"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div> |
||||||
|
<el-input placeholder="输入员工姓名" v-model="keyword" @keyup.enter.native="searchTeacher"> |
||||||
|
<i slot="suffix" class="el-input__icon el-icon-search"></i> |
||||||
|
</el-input> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-button type="primary" size="small" round @click="addTeacher">新增教师</el-button> |
||||||
|
<el-button type="primary" size="small" round class="mag" @click="batchImport">批量导入</el-button> |
||||||
|
<el-button type="primary" size="small" round @click="delAllSelection">批量删除</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table :data="teacherData" class="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="userName" label="职工姓名" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="workNumber" label="职工工号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="oneDepartmentName" label="一级部门" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="twoDepartmentName" label="二级部门" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="roleName" label="账号角色" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="logInNumber" label="登录次数" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="lastTimeOfLanding" 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" @click="editTeacher(scope.row)">编辑</el-button> |
||||||
|
<el-button type="text" @click="delTeacher(scope.row)">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background layout="prev, pager, next" :current-page="pageNo" @current-change="handleCurrentChange" :total="pages"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
</el-main> |
||||||
|
</el-container> |
||||||
|
|
||||||
|
<!-- 新增用户 --> |
||||||
|
<el-dialog :title="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="100px"> |
||||||
|
<el-form-item prop="userAccount" label="账号"> |
||||||
|
<el-input v-model.number="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" :disabled="!isAddteacher"> |
||||||
|
<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.number="teacherForm.teacherWorkNumber" placeholder="请输入老师职工工号" @change="OnlyId(3)"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="teacherMajor" label="老师一级部门"> |
||||||
|
<el-select v-model="teacherForm.teacherMajor" placeholder="请选择一级部门" @change="getDepartment(3)"> |
||||||
|
<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.number="teacherForm.managerWorkNumber" placeholder="请输入管理员职工工号" @change="OnlyId(2)"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="managerMajor" label="管理员一级部门"> |
||||||
|
<el-select v-model="teacherForm.managerMajor" placeholder="请选择一级部门" @change="getDepartment(2)"> |
||||||
|
<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> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<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"> |
||||||
|
<!-- <el-input placeholder="请上传文件"></el-input> --> |
||||||
|
<div class="flex-start-around"> |
||||||
|
<!-- <el-button type="text" class="ml20" @click="loginout">浏览电脑</el-button> --> |
||||||
|
<el-button type="primary" @click="downLoad">模板下载<i class="el-icon-download el-icon--right"></i></el-button> |
||||||
|
<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.readStaff" |
||||||
|
:file-list="uploadList" |
||||||
|
:data="updata" |
||||||
|
name="file" |
||||||
|
> |
||||||
|
<el-button type="primary" class="ml20">上传文件<i class="el-icon-upload2 el-icon--right"></i></el-button> |
||||||
|
</el-upload> |
||||||
|
</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 './TeacherSide.vue'; |
||||||
|
import bus from './bus'; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
pages: 10, |
||||||
|
isAddteacher: false, |
||||||
|
teacherVisible: false, |
||||||
|
teacherForm: { |
||||||
|
teacherId: '', |
||||||
|
userName: '', |
||||||
|
roleValue: [], |
||||||
|
tearcherAccount: '', |
||||||
|
phone: '', |
||||||
|
uniqueIdentificationAccount: '', |
||||||
|
teacherWorkNumber: '', |
||||||
|
managerWorkNumber: '', |
||||||
|
email: '', |
||||||
|
teacherMajor: '', |
||||||
|
teacherDepartment: '', |
||||||
|
managerMajor: '', |
||||||
|
managerDepartment: '', |
||||||
|
userAccount: '' |
||||||
|
}, |
||||||
|
rules: { |
||||||
|
userAccount: [ |
||||||
|
{ required: true, message: '请输入职工账号', trigger: 'blur' }, |
||||||
|
{ |
||||||
|
pattern: /^[A-Za-z0-9]*$/, |
||||||
|
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' } |
||||||
|
], |
||||||
|
teacherDepartment: [ |
||||||
|
{ required: true, message: '请选择老师二级部门', trigger: 'change' } |
||||||
|
], |
||||||
|
managerMajor: [ |
||||||
|
{ required: true, message: '请选择管理员一级部门', trigger: 'change' } |
||||||
|
], |
||||||
|
managerWorkNumber: [ |
||||||
|
{ required: true, 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' |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
teacherData: [], |
||||||
|
importVisible: false, |
||||||
|
keyword: '', |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
total: 0, |
||||||
|
majorList: [], |
||||||
|
managerDepartmentList: [], |
||||||
|
teacherDepartmentList: [], |
||||||
|
staffstateProfessId: '', |
||||||
|
staffGradeId: '', |
||||||
|
multipleSelection: [], |
||||||
|
uploadList: [], |
||||||
|
updata: { |
||||||
|
schoolId: this.$store.state.schoolId, |
||||||
|
schoolName: this.$store.state.schoolName |
||||||
|
}, |
||||||
|
provinceId: this.$store.state.provinceId, |
||||||
|
cityId: this.$store.state.cityId, |
||||||
|
userId: this.$store.state.userId, |
||||||
|
oneDepartmentIds: '', |
||||||
|
twoDepartmentIds: '', |
||||||
|
ProfessionalClassList: [], |
||||||
|
subjectList: [], |
||||||
|
ProfessionalList: [], |
||||||
|
NoAdd: '', |
||||||
|
AccountNoAdd: '', |
||||||
|
NumberNoAdd: '', |
||||||
|
platformId: this.$store.state.platformId, |
||||||
|
isManager: false, |
||||||
|
isTeacher: false, |
||||||
|
isNewUser: 1 |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
TeacherSide |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
this.getTeacher() |
||||||
|
this.getSubject() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
fircheck(val){ |
||||||
|
let oneDepartmentIds = this.oneDepartmentIds ? this.oneDepartmentIds.split(',') : [] |
||||||
|
val.ischeck = !val.ischeck |
||||||
|
val.children.map( e => e.ischeck = true) |
||||||
|
if(val.ischeck){ |
||||||
|
oneDepartmentIds.push(val.staffProfessionalArchitectureId) |
||||||
|
}else{ |
||||||
|
this.core.removeByValue(oneDepartmentIds, val.staffProfessionalArchitectureId); |
||||||
|
} |
||||||
|
this.oneDepartmentIds = oneDepartmentIds.toString() |
||||||
|
this.getTeacher() |
||||||
|
}, |
||||||
|
twocheck(val,val2){ |
||||||
|
let twoDepartmentIds = this.twoDepartmentIds ? this.twoDepartmentIds.split(',') : [] |
||||||
|
const twoStatus = val.ischeck |
||||||
|
val.ischeck = !twoStatus |
||||||
|
if(val.ischeck){ |
||||||
|
twoDepartmentIds.push(val.staffGradeId) |
||||||
|
}else{ |
||||||
|
this.core.removeByValue(twoDepartmentIds, val.staffGradeId); |
||||||
|
} |
||||||
|
val2.map( e => { |
||||||
|
e.children.map( r => { |
||||||
|
if(r.staffGradeId == val.staffGradeId){ |
||||||
|
if(r.ischeck){ |
||||||
|
e.ischeck = true |
||||||
|
} else { |
||||||
|
e.ischeck = false |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
this.twoDepartmentIds = twoDepartmentIds.toString() |
||||||
|
this.getTeacher() |
||||||
|
}, |
||||||
|
getTeacher(){ |
||||||
|
let data = { |
||||||
|
oneDepartmentIds: this.oneDepartmentIds, |
||||||
|
twoDepartmentIds: this.twoDepartmentIds, |
||||||
|
pageNo: this.pageNo, |
||||||
|
pageSize: this.pageSize, |
||||||
|
searchContent: this.keyword, |
||||||
|
schoolId: this.updata.schoolId |
||||||
|
} |
||||||
|
this.$get(this.api.queryStaff,data).then(res => { |
||||||
|
let Length = res.message.rows.length |
||||||
|
for (let i = 0; i < Length; i++) { |
||||||
|
res.message.rows[i].roleName = this.core.roleType(res.message.rows[i].roleId) |
||||||
|
res.message.rows[i].logInNumber = res.message.rows[i].logInNumber ? res.message.rows[i].logInNumber : 0 |
||||||
|
} |
||||||
|
this.teacherData = res.message.rows |
||||||
|
this.pages = res.message.totalPages*10 |
||||||
|
this.total = res.message.total |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
closeTeacher(){ |
||||||
|
this.$refs.teacherForm.resetFields() |
||||||
|
this.teacherForm.managerDepartment = '' |
||||||
|
this.teacherForm.managerMajor = '' |
||||||
|
this.teacherForm.managerWorkNumber = '' |
||||||
|
this.teacherForm.teacherDepartment = '' |
||||||
|
this.teacherForm.teacherMajor = '' |
||||||
|
this.teacherForm.teacherWorkNumber = '' |
||||||
|
this.teacherForm.userId = '' |
||||||
|
}, |
||||||
|
addTeacher(){ |
||||||
|
this.teacherVisible = true |
||||||
|
this.isAddteacher = true |
||||||
|
this.teacherForm.teacherId = '' |
||||||
|
this.majorList = this.$refs.getSelectData.majorList |
||||||
|
console.log(123,this.teacherForm) |
||||||
|
}, |
||||||
|
editTeacher(row){ |
||||||
|
this.teacherVisible = true |
||||||
|
this.isAddteacher = false |
||||||
|
this.AccountNoAdd = false |
||||||
|
this.teacherForm.teacherId = row.organizationRelationshipId |
||||||
|
this.majorList = this.$refs.getSelectData.majorList |
||||||
|
this.isNewUser = 0 |
||||||
|
let data = { |
||||||
|
userId: row.userId, |
||||||
|
roleId: row.roleId |
||||||
|
} |
||||||
|
this.$get(this.api.queryStaffDetails,data).then(res => { |
||||||
|
let user = res.message.user[0]; |
||||||
|
let or = res.message.staff; |
||||||
|
this.teacherForm.userName = user.userName |
||||||
|
this.teacherForm.phone = user.phone |
||||||
|
this.teacherForm.email = user.email |
||||||
|
this.teacherForm.uniqueIdentificationAccount = user.uniqueIdentificationAccount |
||||||
|
this.teacherForm.userAccount = user.account |
||||||
|
this.teacherForm.userId = user.userId |
||||||
|
or.forEach((n,i) => { |
||||||
|
this.teacherForm.roleValue.push(this.core.roleType(n.roleId)) |
||||||
|
if(n.roleId == 2) { |
||||||
|
this.teacherForm.managerMajor = n.oneDepartmentId |
||||||
|
this.teacherForm.managerDepartment = n.twoDepartmentId |
||||||
|
this.teacherForm.managerWorkNumber = n.workNumber |
||||||
|
this.isManager = true |
||||||
|
this.getDepartment(2) |
||||||
|
}else if(n.roleId == 3){ |
||||||
|
this.teacherForm.teacherMajor = n.oneDepartmentId |
||||||
|
this.teacherForm.teacherDepartment = n.twoDepartmentId |
||||||
|
this.teacherForm.teacherWorkNumber = n.workNumber |
||||||
|
this.isTeacher = true |
||||||
|
this.getDepartment(3) |
||||||
|
} |
||||||
|
}) |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
getDepartment(type){ |
||||||
|
let data = { |
||||||
|
staffProfessionalArchitectureId: type == 2 ? this.teacherForm.managerMajor : this.teacherForm.teacherMajor |
||||||
|
} |
||||||
|
this.$get(this.api.queryStaffGrade,data).then(res => { |
||||||
|
if(type == 2){ |
||||||
|
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 |
||||||
|
} |
||||||
|
}, |
||||||
|
resetFields() { |
||||||
|
// this.teacherForm |
||||||
|
}, |
||||||
|
async accountChange(){ |
||||||
|
let res = await this.$get(this.api.queryAccountIsExist, { |
||||||
|
account: this.teacherForm.userAccount, |
||||||
|
schoolId: this.updata.schoolId |
||||||
|
}); |
||||||
|
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.core.roleType(n.roleId)) |
||||||
|
if(n.roleId == 2) { |
||||||
|
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(2) |
||||||
|
}else if(n.roleId == 3){ |
||||||
|
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(3) |
||||||
|
} |
||||||
|
}) |
||||||
|
this.AccountNoAdd = false |
||||||
|
}else{ |
||||||
|
this.isNewUser = 1 |
||||||
|
this.AccountNoAdd = true |
||||||
|
} |
||||||
|
}, |
||||||
|
async submitOnlyId(){ |
||||||
|
if(this.teacherForm.managerWorkNumber != ''){ |
||||||
|
this.OnlyId(2) |
||||||
|
}else if(this.teacherForm.teacherWorkNumber != ''){ |
||||||
|
this.OnlyId(3) |
||||||
|
} |
||||||
|
}, |
||||||
|
async OnlyId(type){ |
||||||
|
let data = {}; |
||||||
|
let msg = ''; |
||||||
|
if(type == 2){ |
||||||
|
data = { |
||||||
|
workNumber: this.teacherForm.managerWorkNumber, |
||||||
|
roleId: 2, |
||||||
|
schoolId: this.teacherForm.managerSchoolId |
||||||
|
} |
||||||
|
msg = '该管理员工号已存在' |
||||||
|
}else if(type == 3){ |
||||||
|
data = { |
||||||
|
workNumber: this.teacherForm.teacherWorkNumber, |
||||||
|
roleId: 3, |
||||||
|
schoolId: this.teacherForm.teacherSchoolId |
||||||
|
} |
||||||
|
msg = '该老师工号已存在' |
||||||
|
} |
||||||
|
let res = await this.$get(this.api.queryWorkNumberIsExist, data); |
||||||
|
if(res.message.length != 0){ |
||||||
|
this.$message.warning(msg); |
||||||
|
this.NumberNoAdd = false |
||||||
|
}else{ |
||||||
|
let timestamp = Date.parse(new Date()); |
||||||
|
this.teacherForm.uniqueIdentificationAccount = `${this.updata.schoolId}${this.teacherForm.uniqueIdentificationAccount}${timestamp}` |
||||||
|
this.NumberNoAdd = 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.NumberNoAdd === ''){ |
||||||
|
this.submitOnlyId() |
||||||
|
if(!this.NumberNoAdd) return false |
||||||
|
}else if(this.NumberNoAdd === false){ |
||||||
|
if(this.teacherForm.managerWorkNumber != '') return this.$message.warning('该管理员工号已存在'); |
||||||
|
if(this.teacherForm.teacherWorkNumber != '') 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('该手机号已存在'); |
||||||
|
} |
||||||
|
|
||||||
|
let data = { |
||||||
|
UserInfo: { |
||||||
|
isNewUser: this.isNewUser, |
||||||
|
userName: this.teacherForm.userName, |
||||||
|
account: this.teacherForm.userAccount, |
||||||
|
schoolId: this.updata.schoolId, |
||||||
|
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 : '' |
||||||
|
} |
||||||
|
} |
||||||
|
if(this.isAddteacher) data.organizationRelationshipList = []; |
||||||
|
// if(!this.isManager && this.teacherForm.managerWorkNumber){ |
||||||
|
if((!this.isAddteacher && this.isManager) || (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: 2, |
||||||
|
workNumber: this.teacherForm.managerWorkNumber, |
||||||
|
oneDepartmentId: this.teacherForm.managerMajor, |
||||||
|
twoDepartmentId: this.teacherForm.managerDepartment, |
||||||
|
oneDepartmentName, |
||||||
|
twoDepartmentName, |
||||||
|
schoolId: this.updata.schoolId, |
||||||
|
schoolName: this.updata.schoolName, |
||||||
|
organizationRelationshipId: this.teacherForm.teacherId ? this.teacherForm.teacherId : '', |
||||||
|
platformId: this.platformId |
||||||
|
}; |
||||||
|
if(this.isAddteacher){ |
||||||
|
data.organizationRelationshipList.push(orList) |
||||||
|
}else{ |
||||||
|
data.OrganizationRelationship = orList |
||||||
|
} |
||||||
|
} |
||||||
|
// if(!this.isTeacher && this.teacherForm.teacherWorkNumber){ |
||||||
|
if((!this.isAddteacher && this.isTeacher) || (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: 3, |
||||||
|
workNumber: this.teacherForm.teacherWorkNumber, |
||||||
|
oneDepartmentId: this.teacherForm.teacherMajor, |
||||||
|
twoDepartmentId: this.teacherForm.teacherDepartment, |
||||||
|
oneDepartmentName, |
||||||
|
twoDepartmentName, |
||||||
|
schoolId: this.updata.schoolId, |
||||||
|
schoolName: this.updata.schoolName, |
||||||
|
organizationRelationshipId: this.teacherForm.teacherId ? this.teacherForm.teacherId : '', |
||||||
|
platformId: this.platformId |
||||||
|
}; |
||||||
|
if(this.isAddteacher){ |
||||||
|
data.organizationRelationshipList.push(orList) |
||||||
|
}else{ |
||||||
|
data.OrganizationRelationship = orList |
||||||
|
} |
||||||
|
} |
||||||
|
if(this.teacherForm.teacherId){ |
||||||
|
this.$post(this.api.updateStaff,data).then(res => { |
||||||
|
this.teacherVisible = false |
||||||
|
this.$message.success('编辑成功'); |
||||||
|
this.getTeacher() |
||||||
|
}).catch(res => {}); |
||||||
|
}else{ |
||||||
|
this.$post(this.api.addStaff,data).then(res => { |
||||||
|
this.teacherVisible = false |
||||||
|
this.$message.success('添加成功'); |
||||||
|
this.getTeacher() |
||||||
|
}).catch(res => {}); |
||||||
|
} |
||||||
|
}else{ |
||||||
|
return false; |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
delTeacher(row){ |
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
let data = [{organizationRelationshipId: row.organizationRelationshipId}] |
||||||
|
this.$post(this.api.deleteStaff,data).then(res => { |
||||||
|
let totalPage = Math.ceil((this.total - 1) / this.pageSize) |
||||||
|
let currentPage = this.pageNo > totalPage ? totalPage : this.pageNo |
||||||
|
this.pageNo = currentPage < 1 ? 1 : currentPage |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.getTeacher() |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val; |
||||||
|
}, |
||||||
|
delAllSelection() { |
||||||
|
if(this.multipleSelection.length != ''){ |
||||||
|
let newArr = this.multipleSelection |
||||||
|
let delList = newArr.map(item => { |
||||||
|
return {organizationRelationshipId: item.organizationRelationshipId} |
||||||
|
}) |
||||||
|
// 批量删除 |
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
let data = delList |
||||||
|
this.$post(this.api.deleteStaff,data).then(res => { |
||||||
|
this.multipleSelection = []; |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.getTeacher() |
||||||
|
}).catch(res => {}); |
||||||
|
}).catch(() => {}); |
||||||
|
}else{ |
||||||
|
this.$message.error('请先选择员工 ！'); |
||||||
|
} |
||||||
|
}, |
||||||
|
batchImport(){ |
||||||
|
this.importVisible = true |
||||||
|
}, |
||||||
|
searchTeacher(){ |
||||||
|
this.pageNo = 1; |
||||||
|
this.getTeacher() |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.pageNo = val; |
||||||
|
this.getTeacher(); |
||||||
|
}, |
||||||
|
downLoad(){ |
||||||
|
window.open('http://www.liuwanr.cn:8080/makeuplist/excelExport?fileName=模板下载&titles=职工姓名,账号角色,职工账号,专业方向,部门,手机号,邮箱') |
||||||
|
}, |
||||||
|
// 上传文件 |
||||||
|
handleExceed(files, fileList) { |
||||||
|
// console.log(files, fileList) |
||||||
|
this.$message.warning( |
||||||
|
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` |
||||||
|
); |
||||||
|
}, |
||||||
|
uploadSuccess(response, file, fileList) { |
||||||
|
// this.uploadList.push({ name: file.name, url: response.message.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 |
||||||
|
}, |
||||||
|
uploadSure(){ |
||||||
|
this.importVisible = false |
||||||
|
this.pageNo = 1 |
||||||
|
this.staffGradeId = '' |
||||||
|
this.keyword = '' |
||||||
|
this.getTeacher() |
||||||
|
}, |
||||||
|
// 获取学科类别 |
||||||
|
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 './Teachertree'; |
||||||
|
import bus from './bus'; |
||||||
|
export default { |
||||||
|
props:["Data"], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
majorList: [], |
||||||
|
firactive: 0, |
||||||
|
twoactive: 0, |
||||||
|
isaddMajor: false, |
||||||
|
isAddDepartment: false, |
||||||
|
schoolId: this.$store.state.schoolId, |
||||||
|
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) |
||||||
|
}, |
||||||
|
// 选择部门 |
||||||
|
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 |
||||||
|
} |
||||||
|
}) |
||||||
|
}).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: 30px; |
||||||
|
color: #328aff; |
||||||
|
} |
||||||
|
.side_tree{ |
||||||
|
width: 100%; |
||||||
|
font-size: 18px; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
.side_tree i{ |
||||||
|
color: #328aff; |
||||||
|
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: #328aff; |
||||||
|
} |
||||||
|
/* .two_active:hover{ |
||||||
|
color: #328aff; |
||||||
|
cursor:pointer; |
||||||
|
} */ |
||||||
|
.two_back:hover{ |
||||||
|
cursor:pointer; |
||||||
|
color: #328aff; |
||||||
|
} |
||||||
|
.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: 18px; |
||||||
|
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,238 @@ |
|||||||
|
<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" @click.stop="open(item)" v-for="(item,index) in data" :key="index"> |
||||||
|
<div class="item" @click.stop="open(item)"> |
||||||
|
<!-- <i :class="{ 'arrowTransform': !item.ifVisible, 'arrowTransformReturn': item.ifVisible}" class="icon-shixiangyoujiantou-"></i> --> |
||||||
|
<img |
||||||
|
:class="{ 'arrowTransform': !item.ifVisible, 'arrowTransformReturn': item.ifVisible}" |
||||||
|
src="../../assets/img/icon-xiangyou.png" |
||||||
|
alt |
||||||
|
/> |
||||||
|
<i :class="item.ischeck ? 'icon-yigouxuan' : 'icon-weigouxuan'" @click.stop="fircheckitem(item)"></i> |
||||||
|
<span>{{item.label}}</span> |
||||||
|
<i class="el-icon-info ft" @click.stop="editMajor(item)"></i> |
||||||
|
<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)"> |
||||||
|
<i :class="item1.ischeck ? 'icon-yigouxuan' : 'icon-weigouxuan'" @click.stop="twocheckitem(item1)"></i> |
||||||
|
<span>{{item1.label}}</span> |
||||||
|
<i class="el-icon-info ft" @click.stop="editDepartment(item1)"></i> |
||||||
|
<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) { |
||||||
|
item.ifVisible = !item.ifVisible; |
||||||
|
}, |
||||||
|
|
||||||
|
//选中叶子节点时将选中的叶子节点添加进数组，如果叶子节点存在则删除，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: 30px; |
||||||
|
width: 30px; |
||||||
|
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; |
||||||
|
} |
||||||
|
.item2 { |
||||||
|
@include public; |
||||||
|
margin-top: 20px; |
||||||
|
margin-left:60px |
||||||
|
} |
||||||
|
.item2:hover{ |
||||||
|
color: #328aff; |
||||||
|
} |
||||||
|
|
||||||
|
//清除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: #328aff; |
||||||
|
} |
||||||
|
} |
||||||
|
.side_icon{ |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
.side_icon i{ |
||||||
|
cursor:pointer; |
||||||
|
font-size: 30px; |
||||||
|
} |
||||||
|
.side_tree{ |
||||||
|
width: 100%; |
||||||
|
font-size: 18px; |
||||||
|
color: #333; |
||||||
|
i{ |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
span{ |
||||||
|
margin-left: 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
|
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
|
||||||
|
</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,13 @@ |
|||||||
|
<template> |
||||||
|
|
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
|
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,212 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<div class="main" @click.stop="open(item)" v-for="(item,index) in data" :key="index"> |
||||||
|
<div class="item" @click.stop="open(item)"> |
||||||
|
<div> |
||||||
|
<img |
||||||
|
:class="{ 'arrowTransform': !item.ifVisible, 'arrowTransformReturn': item.ifVisible}" |
||||||
|
src="../../assets/img/3.png" |
||||||
|
alt |
||||||
|
/> |
||||||
|
</div> |
||||||
|
{{item.label}} |
||||||
|
</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="item1" @click.stop="open(item1)"> |
||||||
|
<div style="margin-left:40px"> |
||||||
|
<img |
||||||
|
:class="{ 'arrowTransform': !item1.ifVisible, 'arrowTransformReturn': item1.ifVisible}" |
||||||
|
src="../../assets/img/3.png" |
||||||
|
alt |
||||||
|
/> |
||||||
|
</div> |
||||||
|
{{item1.label}} |
||||||
|
</div> |
||||||
|
<div v-show="item1.ifVisible" v-if="item1.children&&item1.children.length!=0"> |
||||||
|
<div v-for="(item2,index2) in item1.children" :key="index2"> |
||||||
|
<div class="item2" @click.stop="open(item2)"> |
||||||
|
<div style="margin-left:60px"> |
||||||
|
<img |
||||||
|
:class="{ 'arrowTransform': !item2.ifVisible, 'arrowTransformReturn': item2.ifVisible}" |
||||||
|
src="../../assets/img/3.png" |
||||||
|
alt |
||||||
|
/> |
||||||
|
</div> |
||||||
|
{{item2.label}} |
||||||
|
</div> |
||||||
|
<div |
||||||
|
v-show="item2.ifVisible" |
||||||
|
v-if="item2.children&&item2.children.length!=0" |
||||||
|
> |
||||||
|
<div |
||||||
|
class="item4" |
||||||
|
@click.stop="choose(item3)" |
||||||
|
v-for="(item3,index3) in item2.children" |
||||||
|
:key="index3" |
||||||
|
> |
||||||
|
<span :class="{checkBox:true,isActive:item3.ifVisible}"></span> |
||||||
|
{{item3.label}} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</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) { |
||||||
|
item.ifVisible = !item.ifVisible; |
||||||
|
}, |
||||||
|
|
||||||
|
//选中叶子节点时将选中的叶子节点添加进数组，如果叶子节点存在则删除，removeByvalue函数定义在main.js中 |
||||||
|
choose(item) { |
||||||
|
item.ifVisible = !item.ifVisible; |
||||||
|
if (item.ifVisible) { |
||||||
|
this.chooseList.push(item); |
||||||
|
} else { |
||||||
|
this.chooseList.removeByValue(item); |
||||||
|
} |
||||||
|
}, |
||||||
|
//判断数组中是否包含某个对象 |
||||||
|
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 { |
||||||
|
height: 50px; |
||||||
|
line-height: 50px; |
||||||
|
cursor: pointer; |
||||||
|
font-size: 18px; |
||||||
|
color: #333333; |
||||||
|
display: flex; |
||||||
|
div { |
||||||
|
margin: 0 10px; |
||||||
|
position: relative; |
||||||
|
top: 50%; |
||||||
|
transform: translateY(-50%); |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
border-radius: 50%; |
||||||
|
width: 30px; |
||||||
|
height: 30px; |
||||||
|
background: rgba(146, 120, 255, 1); |
||||||
|
img { |
||||||
|
height: 12px; |
||||||
|
width: 8px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.main { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.item { |
||||||
|
@include public; |
||||||
|
border-bottom: 1px solid $outColor; |
||||||
|
background: rgba(245, 242, 255, 1); |
||||||
|
} |
||||||
|
.item1 { |
||||||
|
@include public; |
||||||
|
border-bottom: 1px solid $insideColor; |
||||||
|
background: rgba(255, 255, 255, 1); |
||||||
|
} |
||||||
|
.item2 { |
||||||
|
@include public; |
||||||
|
border-bottom: 1px solid $insideColor; |
||||||
|
background: rgba(255, 255, 255, 1); |
||||||
|
} |
||||||
|
.item4 { |
||||||
|
@include public; |
||||||
|
align-items: center; |
||||||
|
border-bottom: 1px solid $insideColor; |
||||||
|
padding-left: 80px; |
||||||
|
background: rgba(255, 255, 255, 1); |
||||||
|
} |
||||||
|
|
||||||
|
//清除ul,li的默认样式 |
||||||
|
ul, |
||||||
|
li { |
||||||
|
padding: 0; |
||||||
|
margin: 0; |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
// 使三角形旋转动画 |
||||||
|
.arrowTransform { |
||||||
|
transition: 0.2s; |
||||||
|
transform-origin: center; |
||||||
|
transform: rotateZ(0deg); |
||||||
|
} |
||||||
|
.arrowTransformReturn { |
||||||
|
transition: 0.2s; |
||||||
|
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/get.png'); |
||||||
|
background-size: 14px 14px; /*按比例缩放*/ |
||||||
|
} |
||||||
|
</style> |
||||||
@ -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,537 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-row :gutter="20" style="margin:0px"> |
||||||
|
<el-col :span="24"> |
||||||
|
<div class="flex-end check_title"> |
||||||
|
<div> |
||||||
|
<p>考核成绩统计报告 - 量化投资实验班期末考试</p> |
||||||
|
<p> |
||||||
|
<span>任课老师：远方</span> |
||||||
|
<span class="assessment_date">考核时间：2019-01-06 09:30:00至13:00:00</span> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
<a |
||||||
|
:href="`http://www.liuwanr.cn:8080/assesmentRecord/exportPractice?studentId=${studentId}`" |
||||||
|
> |
||||||
|
<el-button type="primary" size="small" round>下载报告</el-button> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="screen"> |
||||||
|
<p class="mgb20">班级筛选</p> |
||||||
|
<div |
||||||
|
@click="() => {this.ifscreen = 0}" |
||||||
|
:class="{action:ifscreen == 0?true:false}" |
||||||
|
>按实验班级</div> |
||||||
|
<div |
||||||
|
@click="() => {this.ifscreen = 1}" |
||||||
|
:class="{action:ifscreen == 1?true:false}" |
||||||
|
>按行政班级</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div> |
||||||
|
<div v-show="this.ifscreen == 0"> |
||||||
|
<!-- <el-button |
||||||
|
@click="performanceOverview(experimentalClass.experimentalClassId,'')" |
||||||
|
plain |
||||||
|
>{{experimentalClass.experimentalClassName}}</el-button> --> |
||||||
|
<el-button |
||||||
|
@click="performanceOverview(item.experimentalClassId,'')" |
||||||
|
plain |
||||||
|
v-for="item in experimentalClass" |
||||||
|
:key="item.classId" |
||||||
|
>{{item.experimentalClassName}}</el-button> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div v-show="this.ifscreen == 1"> |
||||||
|
<!-- <el-button @click="performanceOverview('',classList)" plain>全部</el-button> --> |
||||||
|
<el-button |
||||||
|
@click="performanceOverview('',item.classId)" |
||||||
|
plain |
||||||
|
v-for="item in className" |
||||||
|
:key="item.classId" |
||||||
|
>{{item.className}}</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<p class="mgb20">成绩概览</p> |
||||||
|
|
||||||
|
<div class="flexContent"> |
||||||
|
<el-card shadow="hover" class="mgb20 flexContentCard"> |
||||||
|
<div class="flex-end"> |
||||||
|
<div> |
||||||
|
<p>平均分</p> |
||||||
|
<p class="Average">{{resultData.avg}}</p> |
||||||
|
</div> |
||||||
|
<img src="../../assets/img/17查看成绩1.png" alt /> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20 flexContentCard"> |
||||||
|
<div class="flex-end"> |
||||||
|
<div> |
||||||
|
<p>中位数</p> |
||||||
|
<p class="Average">{{resultData.median}}</p> |
||||||
|
</div> |
||||||
|
<img src="../../assets/img/17查看成绩2.png" alt /> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20 flexContentCard"> |
||||||
|
<div class="flex-end"> |
||||||
|
<div> |
||||||
|
<p>最低分</p> |
||||||
|
<p class="Average">{{resultData.min}}</p> |
||||||
|
</div> |
||||||
|
<img src="../../assets/img/17查看成绩3.png" alt /> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20 flexContentCard"> |
||||||
|
<div class="flex-end"> |
||||||
|
<div> |
||||||
|
<p>最高分</p> |
||||||
|
<p class="Average">{{resultData.max}}</p> |
||||||
|
</div> |
||||||
|
<img src="../../assets/img/17查看成绩4.png" alt /> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20 flexContentCard"> |
||||||
|
<div class="flex-end"> |
||||||
|
<div> |
||||||
|
<p>考核人数</p> |
||||||
|
<p class="Average">{{resultData.peopleSize}}</p> |
||||||
|
</div> |
||||||
|
<img src="../../assets/img/17查看成绩5.png" alt /> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20 flexContentCard"> |
||||||
|
<div class="flex-end"> |
||||||
|
<div> |
||||||
|
<p>考核点数量</p> |
||||||
|
<p class="Average">{{resultData.pointNumber}}</p> |
||||||
|
</div> |
||||||
|
<img src="../../assets/img/17查看成绩6.png" alt /> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20 flexContentCard"> |
||||||
|
<div class="flex-end"> |
||||||
|
<div> |
||||||
|
<p>错误率</p> |
||||||
|
<p class="Average">{{resultData.error}}</p> |
||||||
|
</div> |
||||||
|
<img src="../../assets/img/17查看成绩7.png" alt /> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
|
||||||
|
<el-row :gutter="20" style="margin:0px"> |
||||||
|
<el-col :span="12"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div id="myChart" :style="{width: '100%', height: '370px'}"></div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
|
||||||
|
<el-col :span="12"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div id="myChart1" :style="{width: '100%', height: '370px'}"></div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
|
||||||
|
<el-row :gutter="20" style="margin:0px"> |
||||||
|
<el-col :span="24"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<p class="mgb20">成绩明细</p> |
||||||
|
<el-col |
||||||
|
:span="4" |
||||||
|
class="mgb20" |
||||||
|
v-for="item in studentlist" :key="item.studen" |
||||||
|
> |
||||||
|
<el-card shadow="hover" class="mgb20" > |
||||||
|
<div class="flex-between" > |
||||||
|
<div class="student_icon"> |
||||||
|
<!-- <i class="el-icon-s-custom"></i> --> |
||||||
|
<img src="../../assets/img/back.png" alt /> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<p>{{item.studentName}}</p> |
||||||
|
<p class="Average">{{item.score}}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
studentId: this.$store.state.studentId, |
||||||
|
ifscreen: 0, |
||||||
|
median: '', |
||||||
|
resultId: this.$store.state.resultId, |
||||||
|
resultData: [], |
||||||
|
detailedData: [ |
||||||
|
{ |
||||||
|
name: '平均分', |
||||||
|
val: '92' |
||||||
|
} |
||||||
|
], |
||||||
|
experimentalClass: '', //存储实验班级信息 |
||||||
|
className: [], //存储行政班级信息 |
||||||
|
classList: [], //存储行政班级id的列表 |
||||||
|
studentlist:[]//存储学生列表 |
||||||
|
}; |
||||||
|
}, |
||||||
|
async mounted() { |
||||||
|
//请求所有班级信息 |
||||||
|
await this.classInformation(); |
||||||
|
|
||||||
|
await this.performanceOverview(this.experimentalClass[0].experimentalClassId,'') |
||||||
|
|
||||||
|
}, |
||||||
|
methods: { |
||||||
|
//请求班级信息，只在mounted里运行一次就可以 |
||||||
|
async classInformation() { |
||||||
|
let classInformationawait = await this.$get('http://www.liuwanr.cn:8080/assesment/getByclass', { |
||||||
|
assesmentId: this.$route.query.id |
||||||
|
}); |
||||||
|
this.experimentalClass = classInformationawait.message.experimentalClass; //获取实验班级信息 |
||||||
|
this.className = classInformationawait.message.class; //获取班级信息 |
||||||
|
|
||||||
|
this.classList = classInformationawait.message.class |
||||||
|
.map(ele => { |
||||||
|
return ele.classId; |
||||||
|
}) |
||||||
|
.join(); //获取班级列表的id，提供给点击全部的参数 |
||||||
|
}, |
||||||
|
|
||||||
|
async performanceOverview(exp,cla){ |
||||||
|
let performanceOverview = await this.$get('http://www.liuwanr.cn:8080/assesment/queryClassScore', { |
||||||
|
assesmentId: this.$route.query.id, |
||||||
|
experimentalClassId: exp, |
||||||
|
classId: cla |
||||||
|
}); //请求成绩概况接口 |
||||||
|
performanceOverview.message.error += '%'; //给错误率增加百分比符号 |
||||||
|
this.resultData = performanceOverview.message; //将返回的数据渲染到页面 |
||||||
|
|
||||||
|
let barChart = await this.$get('http://www.liuwanr.cn:8080/assesment/queryHistogram',{ |
||||||
|
assesmentId: this.$route.query.id, |
||||||
|
experimentalClassId: exp, |
||||||
|
classId: cla |
||||||
|
}) //取得柱状图数据 |
||||||
|
|
||||||
|
barChart.message.reverse() |
||||||
|
this.initBarEcharts(barChart.message)//初始化柱状图 |
||||||
|
|
||||||
|
let LineEchart = await this.$get('http://www.liuwanr.cn:8080/assesment/getLinechart',{ |
||||||
|
assesmentId: this.$route.query.id, |
||||||
|
experimentalClassId: exp, |
||||||
|
classId: cla |
||||||
|
}) //取得折线图数据 |
||||||
|
this.initLineEcharts(LineEchart.message)//初始化折线图 |
||||||
|
|
||||||
|
let studentlist = await this.$get('http://www.liuwanr.cn:8080/assesment/queryAssesmentScore',{ //查找全部学生的信息，并渲染页面 |
||||||
|
assesmentId: this.$route.query.id, |
||||||
|
experimentalClassId: exp, |
||||||
|
classId: cla |
||||||
|
}) |
||||||
|
this.studentlist = studentlist.message |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
initLineEcharts(val) { |
||||||
|
//初始化Echarts |
||||||
|
let echarts = this.$echarts.init(document.getElementById('myChart1')); |
||||||
|
let option = { |
||||||
|
title: { |
||||||
|
text: '错误分布', |
||||||
|
left: '', //文字离容器左侧的距离 |
||||||
|
textStyle: { |
||||||
|
fontWeight: 'normal' |
||||||
|
} |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
left: '6%', |
||||||
|
right: 25, |
||||||
|
height: 250 |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
nameLocation:'end',//坐标轴名称显示位置。 |
||||||
|
axisLabel : {//坐标轴刻度标签的相关设置。 |
||||||
|
interval:0, |
||||||
|
|
||||||
|
}, |
||||||
|
type: 'category', |
||||||
|
data: val[0], |
||||||
|
axisLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
yAxis: { |
||||||
|
axisLabel: { |
||||||
|
fontSize: 16, |
||||||
|
color: '#999999' |
||||||
|
}, |
||||||
|
type: 'value', |
||||||
|
splitLine: { |
||||||
|
//网格线 |
||||||
|
lineStyle: { |
||||||
|
type: 'solid', //设置网格线类型 dotted：虚线 solid:实线 |
||||||
|
color: 'rgba(220, 220, 220, 0.3)' |
||||||
|
}, |
||||||
|
show: true //隐藏或显示 |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false |
||||||
|
} |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
data: val[1], |
||||||
|
type: 'line', |
||||||
|
symbol: 'circle', //设定为实心点 |
||||||
|
symbolSize: 8, //设定实心点的大小 |
||||||
|
showBackground: true, |
||||||
|
backgroundStyle: { |
||||||
|
color: 'rgba(220, 220, 220, 0)' |
||||||
|
}, |
||||||
|
areaStyle: { |
||||||
|
color: { |
||||||
|
type: 'linear', |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 0, |
||||||
|
y2: 1, |
||||||
|
colorStops: [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: '#FFF6E8' // 0% 处的颜色 |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: '#FFFEFC' // 100% 处的颜色 |
||||||
|
} |
||||||
|
], |
||||||
|
global: false // 缺省为 false |
||||||
|
} |
||||||
|
}, |
||||||
|
color: 'rgba(255,206,55,1)', |
||||||
|
barWidth: 20, |
||||||
|
itemStyle: { |
||||||
|
//柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多 |
||||||
|
emphasis: { |
||||||
|
barBorderRadius: 30 |
||||||
|
}, |
||||||
|
normal: { |
||||||
|
//柱形图圆角，初始化效果 |
||||||
|
barBorderRadius: [30, 30, 30, 30], |
||||||
|
label: { |
||||||
|
show: false, //是否展示 |
||||||
|
textStyle: { |
||||||
|
fontWeight: 'bolder', |
||||||
|
fontSize: '12', |
||||||
|
fontFamily: '微软雅黑' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
}; |
||||||
|
|
||||||
|
echarts.setOption(option); |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
initBarEcharts(val) { |
||||||
|
//初始化Echarts |
||||||
|
let echarts = this.$echarts.init(document.getElementById('myChart')); |
||||||
|
let option = { |
||||||
|
title: { |
||||||
|
text: '成绩分布', |
||||||
|
left: '', //文字离容器左侧的距离 |
||||||
|
textStyle: { |
||||||
|
fontWeight: 'normal' |
||||||
|
} |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
left: '6%', |
||||||
|
right: 25, |
||||||
|
height: 250 |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
axisLabel: { |
||||||
|
fontSize: 16, |
||||||
|
color: '#999999', |
||||||
|
margin: 15 |
||||||
|
}, |
||||||
|
type: 'category', |
||||||
|
data: ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100'], |
||||||
|
axisLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
yAxis: { |
||||||
|
axisLabel: { |
||||||
|
fontSize: 16, |
||||||
|
color: '#999999' |
||||||
|
}, |
||||||
|
type: 'value', |
||||||
|
splitLine: { |
||||||
|
//网格线 |
||||||
|
lineStyle: { |
||||||
|
type: 'solid', //设置网格线类型 dotted：虚线 solid:实线 |
||||||
|
color: 'rgba(220, 220, 220, 0.3)' |
||||||
|
}, |
||||||
|
show: true //隐藏或显示 |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false |
||||||
|
} |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
data: val, |
||||||
|
type: 'bar', |
||||||
|
showBackground: true, |
||||||
|
backgroundStyle: { |
||||||
|
color: 'rgba(220, 220, 220, 0)' |
||||||
|
}, |
||||||
|
|
||||||
|
color: { |
||||||
|
type: 'linear', |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 0, |
||||||
|
y2: 1, |
||||||
|
colorStops: [ |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: 'rgba(146,120,255,1)' // 0% 处的颜色 |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: 'rgba(190,175,251,1)' // 100% 处的颜色 |
||||||
|
} |
||||||
|
], |
||||||
|
globalCoord: false // 缺省为 false |
||||||
|
}, |
||||||
|
barWidth: 20, |
||||||
|
itemStyle: { |
||||||
|
//柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多 |
||||||
|
emphasis: { |
||||||
|
barBorderRadius: 30 |
||||||
|
}, |
||||||
|
normal: { |
||||||
|
//柱形图圆角，初始化效果 |
||||||
|
barBorderRadius: [30, 30, 30, 30], |
||||||
|
label: { |
||||||
|
show: false, //是否展示 |
||||||
|
textStyle: { |
||||||
|
fontWeight: 'bolder', |
||||||
|
fontSize: '12', |
||||||
|
fontFamily: '微软雅黑' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
}; |
||||||
|
|
||||||
|
echarts.setOption(option); |
||||||
|
}, |
||||||
|
getdata() { |
||||||
|
//获取查看成绩页面数据 |
||||||
|
this.$get(this.api.queryAssesmentScore, { |
||||||
|
id: this.$store.state.resultId, |
||||||
|
experimentalClassId: 2 |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
.screen { |
||||||
|
display: flex; |
||||||
|
div { |
||||||
|
margin-left: 20px; |
||||||
|
cursor: pointer; |
||||||
|
height: 25px; |
||||||
|
} |
||||||
|
.action { |
||||||
|
border-bottom: 4px solid #bbbbbb; |
||||||
|
} |
||||||
|
} |
||||||
|
.flexContent { |
||||||
|
display: flex; |
||||||
|
justify-content: space-around; |
||||||
|
} |
||||||
|
.flexContentCard { |
||||||
|
width: 13%; |
||||||
|
img { |
||||||
|
width: 52px; |
||||||
|
height: 52px; |
||||||
|
} |
||||||
|
.Average { |
||||||
|
font-size: 26px; |
||||||
|
} |
||||||
|
} |
||||||
|
.el-row { |
||||||
|
margin-bottom: 20px; |
||||||
|
padding: 0 16px; |
||||||
|
font-size: 18px; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
.assessment_date { |
||||||
|
margin-left: 100px; |
||||||
|
} |
||||||
|
.check_title { |
||||||
|
padding: 20px 20px; |
||||||
|
} |
||||||
|
.Average { |
||||||
|
margin-top: 40px; |
||||||
|
font-size: 20px; |
||||||
|
color: #328aff; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
.student_icon img { |
||||||
|
width: 90px; |
||||||
|
height: 90px; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,549 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<div class="header_tab"> |
||||||
|
<el-tabs v-model="activeName" @tab-click="tabChange" :before-leave="saveActive"> |
||||||
|
<el-tab-pane label="首页" name="index"> |
||||||
|
|
||||||
|
</el-tab-pane> |
||||||
|
<el-tab-pane label="课前预习" name="first"> |
||||||
|
|
||||||
|
</el-tab-pane> |
||||||
|
<el-tab-pane label="练习模式" name="second"> |
||||||
|
|
||||||
|
</el-tab-pane> |
||||||
|
<el-tab-pane label="考核模式" name="third"> |
||||||
|
|
||||||
|
</el-tab-pane> |
||||||
|
<el-tab-pane label="实验记录" name="fourth"> |
||||||
|
|
||||||
|
</el-tab-pane> |
||||||
|
</el-tabs> |
||||||
|
<Index v-if="activeName=='index'"></Index> |
||||||
|
<TeachingVideo v-if="!showProject && activeName!='fourth' && activeName!='index'"></TeachingVideo> |
||||||
|
<Project v-if="showProject"></Project> |
||||||
|
<Record v-if="activeName=='fourth'"></Record> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 答题弹框 --> |
||||||
|
<el-dialog :visible.sync="evaluationVisible" width="30%" custom-class="evaluation_dialog" center :close-on-click-modal="false"> |
||||||
|
<div class="title">能力测评</div> |
||||||
|
|
||||||
|
<div class="content"> |
||||||
|
<p class="serial">{{question.currentQuestionSortNo}}/{{question.totalQuestionNum}}</p> |
||||||
|
<p class="type">({{question.questionTypeName}})</p> |
||||||
|
<div class="ques">{{question.questionStem}}</div> |
||||||
|
<div class="countdown flex-center"> |
||||||
|
<img src="../../assets/img/hourglass.png" alt=""> |
||||||
|
<span>倒计时：{{countdown}}</span> |
||||||
|
</div> |
||||||
|
<ul class="options" :class="{isDone}"> |
||||||
|
<li v-for="(item,key) in question.options" :key="key" :class="{active: selected.includes(key)}" @click="selectOption(key)"><em>{{key}}.</em><span>{{item}}</span></li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div slot="footer" class="dialog-footer" v-if="!isDone"> |
||||||
|
<template v-if="lastOne"> |
||||||
|
<el-button @click="prevQues">上一题</el-button> |
||||||
|
<el-button type="primary" @click="submitQues">提交</el-button> |
||||||
|
</template> |
||||||
|
<template v-else> |
||||||
|
<el-button class="first" @click="prevQues">上一题</el-button> |
||||||
|
<el-button class="second" type="primary" @click="nextQues">下一题</el-button> |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
|
||||||
|
<!-- 提交成绩弹框 --> |
||||||
|
<el-dialog :visible.sync="resultVisible" width="30%" custom-class="result_dialog" center :close-on-click-modal="false"> |
||||||
|
<div class="result"><span>{{result.isPassed}}</span></div> |
||||||
|
|
||||||
|
<div class="content"> |
||||||
|
<div class="point"> |
||||||
|
<span>{{result.totalScore}}</span>分 |
||||||
|
</div> |
||||||
|
<p class="tips">{{result.isPassed == '通过' ? '恭喜' : ''}}你答对{{result.correctQuestionNum}}题，正确率{{result.correctRate}}！</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div slot="footer" class="dialog-footer"> |
||||||
|
<el-button class="first" @click="toEvaluation(0)">再试一次</el-button> |
||||||
|
<el-button class="second" type="primary" @click="getDetail">成绩详情</el-button> |
||||||
|
<el-button v-if="result.isPassed == '通过'" class="third" type="primary" @click="toSonSys">进入实训</el-button> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
|
||||||
|
<!-- 成绩详情弹框 --> |
||||||
|
<el-dialog :visible.sync="detailVisible" width="30%" custom-class="detail_dialog" center :close-on-click-modal="false"> |
||||||
|
<div class="title">成绩详情</div> |
||||||
|
<div style="min-height: 370px"> |
||||||
|
<el-table |
||||||
|
:data="detailData" |
||||||
|
height="340" |
||||||
|
border |
||||||
|
style="width: 100%"> |
||||||
|
<el-table-column type="index" label="序号" width="60" align="center"></el-table-column> |
||||||
|
<el-table-column prop="date" label="正误" min-width="45" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<img v-if="scope.row.questionScore" width="15" src="../../assets/img/true.png" alt=""> |
||||||
|
<img v-else width="15" src="../../assets/img/false.png" alt=""> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="questionScore" label="得分" min-width="45" align="center"></el-table-column> |
||||||
|
<el-table-column prop="answer" label="正确答案" min-width="70" align="center"></el-table-column> |
||||||
|
<el-table-column prop="userAnswer" label="你的答案" min-width="70" align="center"></el-table-column> |
||||||
|
<el-table-column prop="answerAnalysis" label="解析" min-width="80"></el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
<p class="total">得分：{{totalScore}}分</p> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Index from './Index'; |
||||||
|
import TeachingVideo from './TeachingVideo'; |
||||||
|
import Project from './Project'; |
||||||
|
import Record from './Record'; |
||||||
|
import bus from '../common/bus'; |
||||||
|
export default { |
||||||
|
name: 'dashboard', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
name: sessionStorage.getItem('ms_username'), |
||||||
|
activeName: 'index', |
||||||
|
routeName: '#/dashboard', |
||||||
|
tabNameList: ['index','first','second','third','fourth'], |
||||||
|
userId: this.$store.state.userId, |
||||||
|
evaluationVisible: false, |
||||||
|
resultVisible: false, |
||||||
|
detailVisible: false, |
||||||
|
lastOne: false, |
||||||
|
question: { |
||||||
|
options: {} |
||||||
|
}, |
||||||
|
countdown: '', |
||||||
|
selected: '', |
||||||
|
result: {}, |
||||||
|
detail: {}, |
||||||
|
timer: null, |
||||||
|
totalScore: 0, |
||||||
|
detailData: [], |
||||||
|
isDone: false, |
||||||
|
history: [], |
||||||
|
btnType: 1, |
||||||
|
showProject: false, |
||||||
|
lastClick: '' |
||||||
|
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
question: { |
||||||
|
handler(newVal,oldVal) { |
||||||
|
for(let n in newVal.options) { |
||||||
|
if(newVal.options[n] == '') delete(newVal.options[n]) |
||||||
|
} |
||||||
|
}, |
||||||
|
deep: true |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.addDefault() |
||||||
|
this.$once('hook:beforeDestroy', function () { |
||||||
|
clearInterval(this.timer) |
||||||
|
this.timer = null |
||||||
|
}) |
||||||
|
bus.$on('tabChange',(tab,isIndex) => { |
||||||
|
this.tabChange(tab,isIndex) |
||||||
|
}) |
||||||
|
}, |
||||||
|
components: { |
||||||
|
Index, |
||||||
|
TeachingVideo, |
||||||
|
Project, |
||||||
|
Record |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
tabChange(tab,isIndex){ |
||||||
|
let index = tab.index |
||||||
|
if(index == 2){ |
||||||
|
this.toEvaluation(1,2) |
||||||
|
}else if(index == 3){ |
||||||
|
this.toEvaluation(1,3) |
||||||
|
}else{ |
||||||
|
this.showProject = false |
||||||
|
} |
||||||
|
|
||||||
|
let hash = location.hash |
||||||
|
if(hash == this.routeName){ |
||||||
|
location.hash = `${hash}#${index}` |
||||||
|
}else{ |
||||||
|
location.hash = `${this.routeName}#${index}` |
||||||
|
} |
||||||
|
isIndex && this.addDefault(isIndex) |
||||||
|
}, |
||||||
|
addDefault(isIndex){ |
||||||
|
let hash = location.hash |
||||||
|
if(hash == this.routeName){ |
||||||
|
location.hash = `${hash}#0` |
||||||
|
}else{ |
||||||
|
let index = hash.replace(`${this.routeName}#`,'') |
||||||
|
this.activeName = this.tabNameList[index] |
||||||
|
|
||||||
|
if(index == 3 && !isIndex){ |
||||||
|
this.toEvaluation(1,3) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
saveActive(activeName,oldActiveName){ |
||||||
|
this.lastClick = oldActiveName |
||||||
|
if(activeName == 'second'){ |
||||||
|
return false |
||||||
|
} |
||||||
|
}, |
||||||
|
async toEvaluation(type,btn) { |
||||||
|
clearInterval(this.timer) |
||||||
|
this.lastOne = false |
||||||
|
this.selected = '' |
||||||
|
this.resultVisible = false |
||||||
|
this.history = [] |
||||||
|
if(btn) this.btnType = btn |
||||||
|
if(type){ |
||||||
|
let res = null |
||||||
|
if(btn == 2){ |
||||||
|
res = await this.$get(this.api.openExerciseOrTeaching, { userId: this.userId }) |
||||||
|
}else{ |
||||||
|
res = await this.$get(this.api.openExerciseOrTeaching, { userId: this.userId }) |
||||||
|
} |
||||||
|
if(res.errmessage == 'true'){ |
||||||
|
if(btn == 2){ |
||||||
|
this.core.toSubSystem() |
||||||
|
} |
||||||
|
if(btn == 3){ |
||||||
|
this.showProject = true |
||||||
|
} |
||||||
|
}else{ |
||||||
|
this.activeName = this.lastClick |
||||||
|
this.$alert('请先完成能力测评并达到80分以上才可以进行实验', '提示', { |
||||||
|
confirmButtonText: '进入测评', |
||||||
|
callback: action => { |
||||||
|
if(action == 'confirm'){ |
||||||
|
this.toEvaluation(0) |
||||||
|
}else{ |
||||||
|
// this.activeName = btn == 2 ? 'second' : 'third' |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
}else{ |
||||||
|
this.start() |
||||||
|
this.getCountdown() |
||||||
|
} |
||||||
|
}, |
||||||
|
handleQues() { |
||||||
|
this.question.options = {} |
||||||
|
for(let n in this.question) { |
||||||
|
if(n.includes('option') && n != 'options') { |
||||||
|
this.question.options[n.replace('option','')] = this.question[n] |
||||||
|
} |
||||||
|
} |
||||||
|
if(this.question.currentQuestionSortNo == this.question.totalQuestionNum){ |
||||||
|
this.lastOne = true |
||||||
|
}else{ |
||||||
|
this.lastOne = false |
||||||
|
} |
||||||
|
}, |
||||||
|
async start() { |
||||||
|
let res = await this.$get(this.api.experimentStart, { userId: this.userId,types: this.btnType }) |
||||||
|
if(res.data){ |
||||||
|
this.question = res.data |
||||||
|
this.isDone = false |
||||||
|
this.question.currentQuestionSortNo == 1 && this.$store.commit("answerHistoryData", { answerHistory : []}) |
||||||
|
this.handleQues() |
||||||
|
this.evaluationVisible = true |
||||||
|
}else{ |
||||||
|
this.$message.warning(res.message) |
||||||
|
} |
||||||
|
}, |
||||||
|
async getCountdown() { |
||||||
|
let res = await this.$get(this.api.experimentRemaining, { userId: this.userId }) |
||||||
|
res.data && this.countDown(res.data) |
||||||
|
// this.countDown('00:00:05') |
||||||
|
}, |
||||||
|
countDown(time) { |
||||||
|
this.countdown = time |
||||||
|
this.timer = setInterval(() => { |
||||||
|
let timeList = this.countdown.split(':') |
||||||
|
let total = Number.parseInt(timeList[1] * 60) + Number.parseInt(timeList[2]) |
||||||
|
if(total > 0){ |
||||||
|
--total |
||||||
|
let minutes = Math.floor(total / 60) |
||||||
|
let seconds = Math.floor(total % 60) |
||||||
|
this.countdown = `00:${this.core.formateTime(minutes)}:${this.core.formateTime(seconds)}` |
||||||
|
}else{ |
||||||
|
this.isDone = true |
||||||
|
this.$message.warning('测评时间结束'); |
||||||
|
clearInterval(this.timer) |
||||||
|
} |
||||||
|
},1000) |
||||||
|
}, |
||||||
|
selectOption(option) { |
||||||
|
if(!this.isDone) { |
||||||
|
if(this.selected.includes(option)) { |
||||||
|
this.selected = this.selected.replace(option,'') |
||||||
|
}else{ |
||||||
|
if(this.question.questionType == 2) { |
||||||
|
this.selected += option |
||||||
|
}else{ |
||||||
|
this.selected = option |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
getHistory() { |
||||||
|
this.history = this.$store.state.answerHistory |
||||||
|
}, |
||||||
|
async nextQues() { |
||||||
|
if(!this.selected) return this.$message.warning('请选择答案') |
||||||
|
this.getHistory() |
||||||
|
if(this.history.length > this.question.currentQuestionSortNo){ |
||||||
|
this.history[this.question.currentQuestionSortNo-1] = this.selected |
||||||
|
}else if(this.history.length < this.question.currentQuestionSortNo){ |
||||||
|
this.history.push(this.selected) |
||||||
|
} |
||||||
|
this.$store.commit("answerHistoryData", { answerHistory : this.history}) |
||||||
|
let res = await this.$post(this.api.experimentNext, { |
||||||
|
id: this.question.id, |
||||||
|
currentQuestionSortNo: this.question.currentQuestionSortNo, |
||||||
|
userAnswer: this.selected |
||||||
|
}) |
||||||
|
if(res.data){ |
||||||
|
this.question = res.data |
||||||
|
this.selected = '' |
||||||
|
if(this.history.length >= this.question.currentQuestionSortNo){ |
||||||
|
this.selected = this.history[this.question.currentQuestionSortNo-1] |
||||||
|
}else{ |
||||||
|
this.selected = '' |
||||||
|
} |
||||||
|
this.handleQues() |
||||||
|
} |
||||||
|
}, |
||||||
|
async prevQues() { |
||||||
|
if(this.question.currentQuestionSortNo > 1){ |
||||||
|
this.getHistory() |
||||||
|
let res = await this.$post(this.api.experimentPrevious, { |
||||||
|
id: this.question.id, |
||||||
|
currentQuestionSortNo: this.question.currentQuestionSortNo, |
||||||
|
userAnswer: this.selected |
||||||
|
}) |
||||||
|
if(res.data){ |
||||||
|
this.question = res.data |
||||||
|
this.selected = this.history[this.question.currentQuestionSortNo-1] |
||||||
|
this.handleQues() |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
async submitQues() { |
||||||
|
if(!this.selected) return this.$message.warning('请选择答案'); |
||||||
|
let res = await this.$post(this.api.experimentSubmit, { |
||||||
|
id: this.question.id, |
||||||
|
currentQuestionSortNo: this.question.currentQuestionSortNo, |
||||||
|
userAnswer: this.selected, |
||||||
|
userId: this.userId, |
||||||
|
types: this.btnType |
||||||
|
}) |
||||||
|
if(res.data) { |
||||||
|
this.result = res.data |
||||||
|
this.evaluationVisible = false |
||||||
|
this.resultVisible = true |
||||||
|
} |
||||||
|
}, |
||||||
|
async getDetail() { |
||||||
|
let res = await this.$get(this.api.experimentDetail, { |
||||||
|
evaluationRecordId: this.question.id |
||||||
|
}) |
||||||
|
if(res.data){ |
||||||
|
this.totalScore = res.data.totalScore |
||||||
|
this.detailData = res.data.evaluationDetailVOS |
||||||
|
this.resultVisible = false |
||||||
|
this.detailVisible = true |
||||||
|
} |
||||||
|
}, |
||||||
|
toSonSys() { |
||||||
|
if(this.btnType == 2){ |
||||||
|
this.core.toSubSystem() |
||||||
|
}else if(this.btnType == 3){ |
||||||
|
this.resultVisible = false |
||||||
|
this.activeName = 'third' |
||||||
|
this.showProject = true |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
/deep/.el-tabs__item:focus{ |
||||||
|
outline: none; |
||||||
|
box-shadow: none !important; |
||||||
|
} |
||||||
|
h3{ |
||||||
|
color: #328aff; |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
.mar0{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
/deep/.evaluation_dialog{ |
||||||
|
min-height: 700px; |
||||||
|
background: url(../../assets/img/evaluation_bg1.png) 0 0/100% 100% no-repeat; |
||||||
|
} |
||||||
|
/deep/.evaluation_dialog .el-dialog__headerbtn,/deep/.evaluation_dialog .el-dialog__headerbtn,/deep/.detail_dialog .el-dialog__headerbtn{ |
||||||
|
font-size: 28px; |
||||||
|
} |
||||||
|
/deep/.evaluation_dialog .title,/deep/.detail_dialog .title{ |
||||||
|
margin-bottom: 45px; |
||||||
|
text-align: center; |
||||||
|
font-size: 24px |
||||||
|
} |
||||||
|
/deep/.evaluation_dialog .title{ |
||||||
|
margin-bottom: 55px; |
||||||
|
} |
||||||
|
/deep/.evaluation_dialog .serial{ |
||||||
|
font-size: 12px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
/deep/.evaluation_dialog .content{ |
||||||
|
width: 80%; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
/deep/.evaluation_dialog .type{ |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
/deep/.evaluation_dialog .ques{ |
||||||
|
margin: 20px 0; |
||||||
|
min-height: 145px; |
||||||
|
color: #666; |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
/deep/.evaluation_dialog .countdown{ |
||||||
|
margin-bottom: 20px; |
||||||
|
justify-content: center; |
||||||
|
text-align: center; |
||||||
|
color: #DC3434; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
/deep/.evaluation_dialog .countdown img{ |
||||||
|
width: 15px !important; |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
/deep/.evaluation_dialog .options{ |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
min-height: 340px; |
||||||
|
} |
||||||
|
/deep/.evaluation_dialog .options.isDone{ |
||||||
|
min-height: 395px; |
||||||
|
} |
||||||
|
/deep/.evaluation_dialog .options li{ |
||||||
|
padding: 0 15px; |
||||||
|
margin-bottom: 15px; |
||||||
|
line-height: 40px; |
||||||
|
border: 1px solid #9070FF; |
||||||
|
border-radius: 20px; |
||||||
|
color: #666; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
/deep/.evaluation_dialog .options li:hover{ |
||||||
|
color: #fff; |
||||||
|
background-color: #b038bb; |
||||||
|
border-color: #b038bb; |
||||||
|
} |
||||||
|
/deep/.evaluation_dialog .options li.active{ |
||||||
|
color: #fff; |
||||||
|
background-color: #916CFF; |
||||||
|
border-color: #916CFF; |
||||||
|
} |
||||||
|
/deep/.evaluation_dialog .options em{ |
||||||
|
margin-right: 10px; |
||||||
|
font-weight: bold; |
||||||
|
font-style: normal; |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
/deep/.evaluation_dialog .options span{ |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
/deep/.evaluation_dialog .el-dialog__footer{ |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
/deep/.evaluation_dialog .first,/deep/.result_dialog .first{ |
||||||
|
color: #fff; |
||||||
|
background-color: #9268FF; |
||||||
|
border-color: #9268FF; |
||||||
|
} |
||||||
|
/deep/.evaluation_dialog .second,/deep/.result_dialog .second{ |
||||||
|
color: #fff; |
||||||
|
background-color: #E371DA; |
||||||
|
border-color: #E371DA; |
||||||
|
} |
||||||
|
|
||||||
|
/deep/.result_dialog{ |
||||||
|
min-height: 500px; |
||||||
|
background: url(../../assets/img/evaluation_bg2.png) 0 0/100% 100% no-repeat; |
||||||
|
} |
||||||
|
/deep/.result_dialog .el-dialog__headerbtn .el-dialog__close{ |
||||||
|
color: #5a5a5a; |
||||||
|
font-size: 28px; |
||||||
|
} |
||||||
|
/deep/.result_dialog .result{ |
||||||
|
margin-top: 60px; |
||||||
|
text-align: center; |
||||||
|
color: #fff; |
||||||
|
font-size: 24px; |
||||||
|
} |
||||||
|
/deep/.result_dialog .point{ |
||||||
|
margin: 30px 0 20px; |
||||||
|
text-align: center; |
||||||
|
font-size: 30px; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
/deep/.result_dialog .point span{ |
||||||
|
font-size: 120px; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
/deep/.result_dialog .tips{ |
||||||
|
color: #666; |
||||||
|
text-align: center; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
/deep/.result_dialog .third{ |
||||||
|
color: #fff; |
||||||
|
background-color: #418cf5; |
||||||
|
border-color: #418cf5; |
||||||
|
} |
||||||
|
|
||||||
|
/deep/.detail_dialog{ |
||||||
|
background: url(../../assets/img/evaluation_bg3.png) 0 0/100% 100% no-repeat; |
||||||
|
} |
||||||
|
/deep/.detail_dialog .title{ |
||||||
|
margin-top: -20px; |
||||||
|
} |
||||||
|
/deep/.detail_dialog .el-table__header th:nth-last-child(2){ |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
/deep/.detail_dialog .total{ |
||||||
|
margin-top: 20px; |
||||||
|
text-align: center; |
||||||
|
font-size: 30px; |
||||||
|
color: #DC3434; |
||||||
|
} |
||||||
|
/deep/.evaluation_dialog{ |
||||||
|
margin:0 !important; |
||||||
|
position:absolute; |
||||||
|
top:50%; |
||||||
|
left:50%; |
||||||
|
transform:translate(-50%,-50%); |
||||||
|
max-height:calc(100% - 30px); |
||||||
|
max-width:calc(100% - 30px); |
||||||
|
} |
||||||
|
/deep/.evaluation_dialog .el-dialog__body{ |
||||||
|
flex:1; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,298 @@ |
|||||||
|
<template> |
||||||
|
<div class="horizontalVerticalCenter"> |
||||||
|
<div class="headerContent"> |
||||||
|
<Headportrait></Headportrait> |
||||||
|
<p class="p">{{personalScore.studentName}}</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 练习概览 --> |
||||||
|
<div class="practice"> |
||||||
|
<p style="padding:28px 0;margin-left:28px">考核概览</p> |
||||||
|
<div class="practiceRecord"> |
||||||
|
<div |
||||||
|
:class="{practiceRecordCon:true,active:this.active==1}" |
||||||
|
@click="changeActive(1)" |
||||||
|
> |
||||||
|
<i class="iconfont"></i> |
||||||
|
<p class="big-p">个人</p> |
||||||
|
<div class="practiceRecord-p"> |
||||||
|
<div class="div"> |
||||||
|
<div> |
||||||
|
<p style="font-size:20px">考核最高得分</p> |
||||||
|
<p class="fontcolor">{{personalScore.heightscore}}</p> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<p style="font-size:20px;color:#333333">考核平均得分</p> |
||||||
|
<p class="fontcolor">{{personalScore.avgscore}}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div |
||||||
|
:class="{practiceRecordCon:true,active:this.active==2}" |
||||||
|
@click="changeActive(2)" |
||||||
|
> |
||||||
|
<i class="iconfont"></i> |
||||||
|
<p class="big-p">全校</p> |
||||||
|
<div class="practiceRecord-center"> |
||||||
|
<div> |
||||||
|
<p style="font-size:20px;color:#333333">全校最高平均考核得分</p> |
||||||
|
<p class="fontcolor">{{personalScore.schoolheightscore}}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div |
||||||
|
:class="{practiceRecordCon:true,active:this.active==3}" |
||||||
|
@click="changeActive(3)" |
||||||
|
> |
||||||
|
<i class="iconfont"></i> |
||||||
|
<p class="big-p">全国</p> |
||||||
|
<div class="practiceRecord-p"> |
||||||
|
<div class="div"> |
||||||
|
<div> |
||||||
|
<p style="font-size:20px;color:#333333">平均考核得分</p> |
||||||
|
<p class="fontcolor">{{personalScore.countryavgscore}}</p> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<p style="font-size:20px;color:#333333">最高平均考核得分</p> |
||||||
|
<p class="fontcolor">{{personalScore.countryheightscore}}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- <div class="AssesmentRecord" style="background:#CDDCF1;"> |
||||||
|
<p style="color:#FF6161;font-size:30px">{{personalScore.studentName}}</p> |
||||||
|
<p>姓名</p> |
||||||
|
</div> |
||||||
|
<div class="AssesmentRecord" style="background:#F7EFEF;"> |
||||||
|
<p style="color:#FF6161;font-size:30px">{{personalScore.heightscore}}</p> |
||||||
|
<p>个人考核最高得分</p> |
||||||
|
</div> |
||||||
|
<div class="AssesmentRecord" style="background:#F7EFEF;"> |
||||||
|
<p style="color:#FF6161;font-size:30px">{{personalScore.avgscore}}</p> |
||||||
|
<p>个人考核平均得分</p> |
||||||
|
</div> |
||||||
|
<div class="AssesmentRecord" style="background:#FF8061;"> |
||||||
|
<p style="color:#FFF;font-size:30px">{{personalScore.schoolheightscore}}</p> |
||||||
|
<p>全校最高平均考核得分</p> |
||||||
|
</div> |
||||||
|
<div class="AssesmentRecord" style="background:#FF6161;"> |
||||||
|
<p style="color:#FFF;font-size:30px">{{personalScore.countryavgscore}}</p> |
||||||
|
<p>全国平均考核得分</p> |
||||||
|
</div> |
||||||
|
<div class="AssesmentRecord" style="background:#FF6161;"> |
||||||
|
<p style="color:#FFF;font-size:30px">{{personalScore.countryheightscore}}</p> |
||||||
|
<p>全国最高平均考核得分</p> |
||||||
|
</div>--> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 成绩明细组件 --> |
||||||
|
<Achievement |
||||||
|
:student="studentId" |
||||||
|
projectPermissions="1" |
||||||
|
:AssesmentRecord="this.api.queryAssesmentRecord" |
||||||
|
style="margin-top:20px;margin-bottom:50px" |
||||||
|
></Achievement> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Headportrait from '../common/Studentcommon/Headportrait'; |
||||||
|
import Achievement from '../common/Studentcommon/Achievement'; |
||||||
|
import axios from 'axios'; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
personalScore: {}, |
||||||
|
schoolScore: {}, |
||||||
|
nationalScore: '', |
||||||
|
nationalMaxScore: '', |
||||||
|
active: 1, |
||||||
|
studentId: this.$store.state.studentId |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
Achievement, |
||||||
|
Headportrait |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
changeCourseId() { |
||||||
|
return this.$store.state.courseId; |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
changeCourseId() { |
||||||
|
this.getData() |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
changeActive(val) { |
||||||
|
this.active = val; |
||||||
|
}, |
||||||
|
getData() { |
||||||
|
//查询姓名和个人平均分和最高分 |
||||||
|
this.$get(this.api.queryStudentAssessment, { studentId: this.$store.state.studentId, courseId: this.$store.state.courseId }) |
||||||
|
.then(res => { |
||||||
|
this.personalScore = res.message; |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
console.log(err); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.horizontalVerticalCenter { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
flex-direction: column; |
||||||
|
background: #f5f5f5; |
||||||
|
} |
||||||
|
|
||||||
|
.headerContent { |
||||||
|
display: flex; |
||||||
|
align-self: flex-start; |
||||||
|
margin-left: 20px; |
||||||
|
margin-top: 20px; |
||||||
|
.p { |
||||||
|
height: 60px; |
||||||
|
line-height: 60px; |
||||||
|
font-size: 25px; |
||||||
|
margin-left: 10px; |
||||||
|
color: #328aff; |
||||||
|
} |
||||||
|
} |
||||||
|
.active { |
||||||
|
background: linear-gradient(41deg, rgba(253, 201, 22, 1) 0%, rgba(255, 213, 70, 1) 100%) !important; |
||||||
|
i { |
||||||
|
color: #fff !important; |
||||||
|
} |
||||||
|
.fontcolor { |
||||||
|
color: #fff !important; |
||||||
|
} |
||||||
|
} |
||||||
|
p { |
||||||
|
margin: 0px; |
||||||
|
} |
||||||
|
.about-head { |
||||||
|
width: 95%; |
||||||
|
display: flex; |
||||||
|
margin-bottom: 20px; |
||||||
|
p { |
||||||
|
margin-left: 20px; |
||||||
|
color: #328aff; |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
.practice { |
||||||
|
margin-top: 20px; |
||||||
|
width: 98%; |
||||||
|
height: 299px; |
||||||
|
background: rgba(255, 255, 255, 1); |
||||||
|
box-shadow: 0px 0px 21px 0px rgba(48, 115, 248, 0.1); |
||||||
|
border-radius: 10px; |
||||||
|
margin-bottom: 20px; |
||||||
|
p { |
||||||
|
font-size: 20px; |
||||||
|
color: #333333; |
||||||
|
margin-left: 40px; |
||||||
|
} |
||||||
|
.practiceRecord { |
||||||
|
display: flex; |
||||||
|
justify-content: space-around; |
||||||
|
.practiceRecord-head { |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
.AssesmentRecord { |
||||||
|
width: 16%; |
||||||
|
height: 150px; |
||||||
|
background-color: red; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
p { |
||||||
|
margin-left: 0px; |
||||||
|
} |
||||||
|
} |
||||||
|
.practiceRecordCon { |
||||||
|
cursor: pointer; |
||||||
|
position: relative; |
||||||
|
width: 570px !important; |
||||||
|
height: 190px; |
||||||
|
background: #fff; |
||||||
|
box-shadow: 1px 5px 18px 0px rgba(84, 84, 84, 0.28); |
||||||
|
border-radius: 10px; |
||||||
|
width: 400px; |
||||||
|
height: 190px; |
||||||
|
transition: all 1s ease; |
||||||
|
i { |
||||||
|
position: absolute; |
||||||
|
left: 24px; |
||||||
|
top: 20px; |
||||||
|
font-size: 30px; |
||||||
|
font-weight: 500px; |
||||||
|
color: #f8c30c; |
||||||
|
} |
||||||
|
.big-p { |
||||||
|
font-size: 16px; |
||||||
|
position: absolute; |
||||||
|
left: 50px; |
||||||
|
top: 24px; |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
.practiceRecord-p { |
||||||
|
width: 90%; |
||||||
|
height: 130px; |
||||||
|
position: absolute; |
||||||
|
bottom: 0px; |
||||||
|
border-top: 1px solid #e8e8e8; |
||||||
|
left: 25px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
.div { |
||||||
|
width: 86%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
p { |
||||||
|
margin-top: 25px; |
||||||
|
margin-left: 0px; |
||||||
|
} |
||||||
|
.fontcolor { |
||||||
|
font-size: 26px; |
||||||
|
color: #f8c30c; |
||||||
|
} |
||||||
|
} |
||||||
|
.practiceRecord-center { |
||||||
|
width: 90%; |
||||||
|
height: 130px; |
||||||
|
display: flex; |
||||||
|
position: absolute; |
||||||
|
bottom: 0px; |
||||||
|
border-top: 1px solid #e8e8e8; |
||||||
|
left: 25px; |
||||||
|
justify-content: space-around; |
||||||
|
p { |
||||||
|
margin-top: 25px; |
||||||
|
margin-left: 0px; |
||||||
|
} |
||||||
|
div { |
||||||
|
.fontcolor { |
||||||
|
font-size: 26px; |
||||||
|
color: #f8c30c; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue