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