parent
5ee7400f91
commit
cfb36245dc
32 changed files with 354 additions and 8471 deletions
@ -1,195 +0,0 @@ |
|||||||
<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> |
|
||||||
@ -1,238 +0,0 @@ |
|||||||
<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> |
|
||||||
|
|
||||||
@ -1,705 +0,0 @@ |
|||||||
<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> |
|
||||||
@ -1,526 +0,0 @@ |
|||||||
<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> |
|
||||||
@ -1,287 +0,0 @@ |
|||||||
<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> |
|
||||||
@ -1,749 +0,0 @@ |
|||||||
<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> |
|
||||||
@ -1,357 +0,0 @@ |
|||||||
<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> |
|
||||||
@ -1,238 +0,0 @@ |
|||||||
<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> |
|
||||||
@ -1,15 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
|
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
|
||||||
|
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style> |
|
||||||
|
|
||||||
</style> |
|
||||||
@ -1,13 +0,0 @@ |
|||||||
<template> |
|
||||||
|
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
|
||||||
|
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style> |
|
||||||
|
|
||||||
</style> |
|
||||||
@ -1,212 +0,0 @@ |
|||||||
<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,311 @@ |
|||||||
|
<template> |
||||||
|
<div class="pd20"> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :span="24"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div> |
||||||
|
<div class="flex-center mgb20"> |
||||||
|
<p class="hr_tag"></p> |
||||||
|
<span>筛选</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-form label-width="80px"> |
||||||
|
<el-form-item label="实验班级" class="userRadio"> |
||||||
|
<el-radio-group v-model="form.classId" @change="getData"> |
||||||
|
<el-radio label="" border>不限</el-radio> |
||||||
|
<el-radio v-for="(item,index) in classList" :key="index" :label="item.classId" border>{{item.className}}</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
</el-form-item> |
||||||
|
<div class="flex-between no-mb"> |
||||||
|
<el-form-item label="考核状态"> |
||||||
|
<el-select v-model="form.status" clearable placeholder="请选择实验状态" @change="getData"> |
||||||
|
<el-option v-for="(item,index) in statusList" :key="index" :label="item.name" :value="item.value"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item> |
||||||
|
<el-input placeholder="请输入考核名称" prefix-icon="el-icon-search" v-model="keyword" clearable @keyup.enter.native="onSearch"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
|
||||||
|
<el-col :span="24"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div class="flex-center"> |
||||||
|
<p class="hr_tag"></p> |
||||||
|
<span>考核管理</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table :data="customerData" class="table" stripe header-align="center" :row-key="getRowKeys"> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{scope.$index + (pageNo - 1) * pageSize + 1}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="experimentalName" label="考核名称" align="center"></el-table-column> |
||||||
|
<el-table-column prop="className" label="考核班级" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="experimentalNumber" label="考核人数" align="center"></el-table-column> |
||||||
|
<el-table-column prop="experimentDuration" label="考核时长" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="creationTime" label="创建时间" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="startTime" label="起始时间" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="stopTime" label="结束时间" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="倒计时" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<span v-if="scope.row.surplusTime == '838:00:00'">>30天</span> |
||||||
|
<span v-else-if="scope.row.status == 2" v-countdown="scope.row.surplusTime">{{scope.row.surplusTime}}</span> |
||||||
|
<span v-else>00:00:00</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="实验状态" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<span class="ellipsis">{{status[scope.row.status]}}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<!-- <el-button v-if="scope.row.status != 3" type="text" @click="entry(scope.row)" :disabled="scope.row.status != 2">进入</el-button> |
||||||
|
<el-button v-else type="text" @click="show(scope.row)">查看成绩</el-button> --> |
||||||
|
|
||||||
|
<el-button v-if="scope.row.status == 3 && !scope.row.reportId" type="text" disabled>未参加</el-button> |
||||||
|
<el-button v-if="scope.row.status != 3 && !scope.row.reportId" type="text" @click="entry(scope.row)" :disabled="scope.row.status != 2">进入</el-button> |
||||||
|
<el-button v-if="scope.row.status == 2 && scope.row.reportId" type="text" disabled>已提交</el-button> |
||||||
|
<el-button v-if="scope.row.status == 3 && scope.row.reportId" type="text" @click="show(scope.row)">查看成绩</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
|
||||||
|
<el-dialog title="请输入邀请码" :visible.sync="icVisible" width="30%" @close="closeIc" center :close-on-click-modal="false"> |
||||||
|
<el-input v-model="invitationCode" placeholder="邀请码" maxlength="6"></el-input> |
||||||
|
<div slot="footer" class="dialog-footer"> |
||||||
|
<el-button type="primary" @click="saveIc">确 定</el-button> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'project', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
userId: this.$store.state.userId, |
||||||
|
roleId: this.$store.state.accountRole, |
||||||
|
name: sessionStorage.getItem('ms_username'), |
||||||
|
status: ['','待开始','进行中','已完成'], |
||||||
|
statusList: [{ |
||||||
|
name:'不限', |
||||||
|
value: 0 |
||||||
|
},{ |
||||||
|
name:'待开始', |
||||||
|
value: 1 |
||||||
|
},{ |
||||||
|
name:'进行中', |
||||||
|
value: 2 |
||||||
|
},{ |
||||||
|
name:'已完成', |
||||||
|
value: 3 |
||||||
|
}], |
||||||
|
customerData: [], |
||||||
|
date: [], |
||||||
|
form: { |
||||||
|
classId: '', |
||||||
|
startTime: '', |
||||||
|
endTime: '', |
||||||
|
status: 0, |
||||||
|
}, |
||||||
|
keyword: '', |
||||||
|
classList: [], |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
totals: 0, |
||||||
|
icVisible: false, |
||||||
|
invitationCode: '', |
||||||
|
searchTimer: null, |
||||||
|
timerList: [], |
||||||
|
curClassName: '', |
||||||
|
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
keyword: function(val) { |
||||||
|
clearTimeout(this.searchTimer) |
||||||
|
this.searchTimer = setTimeout(() => { |
||||||
|
this.getData() |
||||||
|
},500) |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getClass() |
||||||
|
this.getData() |
||||||
|
this.$once('hook:beforeDestroy', function () { |
||||||
|
this.timerList.forEach((n,k) => { |
||||||
|
clearInterval(n) |
||||||
|
}) |
||||||
|
this.timerList = [] |
||||||
|
}) |
||||||
|
}, |
||||||
|
directives: { |
||||||
|
countdown: { |
||||||
|
bind: function(el,binding,vnode) { |
||||||
|
let that = vnode.context |
||||||
|
let time = binding.value |
||||||
|
let timer = setInterval(() => { |
||||||
|
let timeList = time.split(':') |
||||||
|
let total = Number.parseInt(timeList[0] * 60 * 60) + Number.parseInt(timeList[1] * 60) + Number.parseInt(timeList[2]) |
||||||
|
if(total > 0){ |
||||||
|
--total |
||||||
|
let hours = Math.floor(total / (60 * 60)) |
||||||
|
let minutes = Math.floor(total % (60 * 60) / 60) |
||||||
|
let seconds = Math.floor(total % (60 * 60) % 60) |
||||||
|
time = `${that.core.formateTime(hours)}:${that.core.formateTime(minutes)}:${that.core.formateTime(seconds)}` |
||||||
|
}else{ |
||||||
|
clearInterval(timer) |
||||||
|
} |
||||||
|
el.innerHTML = time |
||||||
|
},1000) |
||||||
|
that.timerList.push(timer) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData() { |
||||||
|
let data = { |
||||||
|
classId: this.form.classId, |
||||||
|
role: this.roleId, |
||||||
|
type: '', |
||||||
|
userId: this.userId, |
||||||
|
startTime: this.form.startTime, |
||||||
|
stopTime: this.form.endTime, |
||||||
|
searchContent: this.core.encodeString(this.keyword), |
||||||
|
status: this.form.status, |
||||||
|
pageNum: this.pageNo, |
||||||
|
pageSize: this.pageSize, |
||||||
|
} |
||||||
|
this.$post(this.api.stuAssessmentByScreen,data).then(res => { |
||||||
|
this.customerData = res.list.list |
||||||
|
this.totals = res.list.totalCount |
||||||
|
// this.$get(this.api.fictitiousRecord, { |
||||||
|
// userId: this.userId, |
||||||
|
// page: 1, |
||||||
|
// size: 1000, |
||||||
|
// projectPermissions: 1, |
||||||
|
// systemId: 3 |
||||||
|
// }).then(res => { |
||||||
|
// let recordList = res.data.list |
||||||
|
// list.map(n => { |
||||||
|
// let same = recordList.find(e => e.experimentalName == n.experimentalName) |
||||||
|
// if(same){ |
||||||
|
// n.reportId = same.reportId |
||||||
|
// } |
||||||
|
// }) |
||||||
|
// this.customerData = list |
||||||
|
// }).catch(err => {}) |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
getClass(){ |
||||||
|
this.$get(`${this.api.mineClass}?userId=${this.userId}`).then(res => { |
||||||
|
this.classList = res.list |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
add(){ |
||||||
|
this.$store.commit("customerData", { customer_id : ''}); |
||||||
|
this.$router.push('/addclass'); |
||||||
|
}, |
||||||
|
edit(row){ |
||||||
|
this.$store.commit("customerData", { customer_id : row.customerId }); |
||||||
|
this.$router.push('/addcustomer'); |
||||||
|
}, |
||||||
|
getRowKeys(row) { |
||||||
|
return row.customerId; |
||||||
|
}, |
||||||
|
onSearch(){ |
||||||
|
this.pageNo = 1 |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.pageNo = val; |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
entry(row) { |
||||||
|
if(row.status == 1){ |
||||||
|
return this.$message.warning('该实验尚未开始') |
||||||
|
}else if(row.status == 3){ |
||||||
|
return this.$message.warning('该实验已经结束') |
||||||
|
}else{ |
||||||
|
this.curClassName = row.experimentalClassName |
||||||
|
this.rowId = row.id |
||||||
|
this.projectId = row.projectId |
||||||
|
if(row.isCode == 1){ |
||||||
|
this.core.toSubSystem(this.curClassName,this.rowId) |
||||||
|
}else{ |
||||||
|
this.$get(this.api.checkInvitationCode,{ |
||||||
|
userId: this.userId, |
||||||
|
id: row.id |
||||||
|
}).then(res => { |
||||||
|
if(res.errmessage == 'false'){ |
||||||
|
this.icVisible = true |
||||||
|
}else{ |
||||||
|
this.core.toSubSystem(this.curClassName,this.rowId) |
||||||
|
} |
||||||
|
}).catch(res => {}); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
show(row) { |
||||||
|
this.$router.push(`/showExperiment?id=${row.reportId}`) |
||||||
|
}, |
||||||
|
saveIc() { |
||||||
|
if(!this.invitationCode) return this.$message.warning('请输入邀请码') |
||||||
|
if(!this.invitationCode || String(this.invitationCode).length < 6 || isNaN(this.invitationCode)) return this.$message.warning('请输入6位纯数字邀请码') |
||||||
|
let data = { |
||||||
|
id: this.rowId, |
||||||
|
userId: this.userId, |
||||||
|
invitationCode: Number(this.invitationCode) |
||||||
|
} |
||||||
|
this.$post(this.api.joinPractice,data).then(res => { |
||||||
|
if(res.errmessage == 'success') { |
||||||
|
this.$message.success('验证成功！'); |
||||||
|
this.icVisible = false |
||||||
|
setTimeout(() => { |
||||||
|
this.core.toSubSystem(this.curClassName,this.rowId) |
||||||
|
},1000) |
||||||
|
} |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
closeIc() { |
||||||
|
this.invitationCode = '' |
||||||
|
}, |
||||||
|
goback() { |
||||||
|
this.$router.back() |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.mag{ |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
/deep/.el-tabs__nav-wrap::after{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.no-mb /deep/.el-form-item{ |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,537 +0,0 @@ |
|||||||
<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> |
|
||||||
@ -1,298 +0,0 @@ |
|||||||
<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> |
|
||||||
@ -1,268 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="horizontalVerticalCenter"> |
|
||||||
<!-- 头像部分 --> |
|
||||||
<div class="headerContent"> |
|
||||||
<Headportrait></Headportrait> |
|
||||||
<p class="p">{{PracticeData.studentName}}</p> |
|
||||||
</div> |
|
||||||
|
|
||||||
<!-- 练习概览 --> |
|
||||||
<div class="newPractice"> |
|
||||||
<p class="exerciseOverview" style="margin-left:28px;">练习概览</p> |
|
||||||
<div class="newPractice-card"> |
|
||||||
<div class="newPractice-card-first"> |
|
||||||
<div class="card-first-up"> |
|
||||||
<P style="margin-left:10px">练习项目数量</P> |
|
||||||
<P>完成练习项目数量</P> |
|
||||||
<P>实训练习次数</P> |
|
||||||
<P>练习总时长</P> |
|
||||||
<p>当前实训积分</p> |
|
||||||
<p>全国平均实训积分</p> |
|
||||||
</div> |
|
||||||
<div class="card-first-down"> |
|
||||||
<P style="margin-left:10px">{{PracticeData.practiceNumber}}</P> |
|
||||||
<P>{{PracticeData.accomplishNumber}}</P> |
|
||||||
<P>{{PracticeData.sumNumber}}</P> |
|
||||||
<P>{{PracticeData.totalTime}}</P> |
|
||||||
<P>{{PracticeData.integral}}</P> |
|
||||||
<P>{{PracticeData.avgintegral}}</P> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="newPractice-card-other"> |
|
||||||
<div class="card-other-score"> |
|
||||||
<p style="font-size:18px;">练习平均分(个人)</p> |
|
||||||
<p>{{PracticeData.avg}}</p> |
|
||||||
</div> |
|
||||||
<div style="margin-top:40px;margin-left:35px"> |
|
||||||
<img src="../../assets/img/05学生-练习记录_03.png" alt /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="newPractice-card-other"> |
|
||||||
<div class="card-other-score"> |
|
||||||
<p style="font-size:18px;">平均分最高(全国)</p> |
|
||||||
<p>{{PracticeData.heightintegral}}</p> |
|
||||||
</div> |
|
||||||
<div style="margin-top:40px;margin-left:35px"> |
|
||||||
<img src="../../assets/img/05学生-练习记录_05.png" alt /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<!-- <div class="newPractice-card"> |
|
||||||
<div class="AssesmentRecord" style="background:#CDDCF1;"> |
|
||||||
<p style="color:#FF6161;font-size:30px">{{PracticeData.studentName}}</p> |
|
||||||
<p>姓名</p> |
|
||||||
</div> |
|
||||||
<div class="AssesmentRecord" style="background:#CDDCF1;"> |
|
||||||
<p style="color:#FF6161;font-size:30px">{{PracticeData.practiceNumber}}</p> |
|
||||||
<p>练习项目数量</p> |
|
||||||
</div> |
|
||||||
<div class="AssesmentRecord" style="background:#F7EFEF;"> |
|
||||||
<p style="color:#FF6161;font-size:30px">{{PracticeData.accomplishNumber}}</p> |
|
||||||
<p>完成练习项目数量</p> |
|
||||||
</div> |
|
||||||
<div class="AssesmentRecord" style="background:#F7EFEF;"> |
|
||||||
<p style="color:#FF6161;font-size:30px">{{PracticeData.sumNumber}}</p> |
|
||||||
<p>实训练习次数</p> |
|
||||||
</div> |
|
||||||
<div class="AssesmentRecord" style="background:#F7EFEF;"> |
|
||||||
<p style="color:#FF6161;font-size:30px">{{PracticeData.totalTime}}</p> |
|
||||||
<p>练习总时长</p> |
|
||||||
</div> |
|
||||||
<div class="AssesmentRecord" style="background:#F7EFEF;"> |
|
||||||
<p style="color:#FF6161;font-size:30px">{{PracticeData.avg}}</p> |
|
||||||
<p>练习平均分</p> |
|
||||||
</div> |
|
||||||
<div class="AssesmentRecord" style="background:#FF6161;"> |
|
||||||
<p style="color:#FFF;font-size:30px">{{PracticeData.integral}}</p> |
|
||||||
<p style="color:#FFF">当前实训积分</p> |
|
||||||
</div> |
|
||||||
<div class="AssesmentRecord" style="background:#FF8061;"> |
|
||||||
<p style="color:#FFF;font-size:30px">{{PracticeData.avgintegral}}</p> |
|
||||||
<p style="color:#FFF">全国平均实训积分</p> |
|
||||||
</div> |
|
||||||
<div class="AssesmentRecord" style="background:#FF6161;"> |
|
||||||
<p style="color:#FFF;font-size:30px">{{PracticeData.heightintegral}}</p> |
|
||||||
<p style="color:#FFF">全国最高实训积分</p> |
|
||||||
</div> |
|
||||||
|
|
||||||
</div>--> |
|
||||||
</div> |
|
||||||
<!-- 成绩明细 --> |
|
||||||
<Achievement |
|
||||||
:student="studentId" |
|
||||||
projectPermissions="0" |
|
||||||
:AssesmentRecord="this.api.queryAssesmentRecord" |
|
||||||
style="margin-top:20px;margin-bottom:50px" |
|
||||||
></Achievement> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Achievement from '../common/Studentcommon/Achievement'; |
|
||||||
import Headportrait from '../common/Studentcommon/Headportrait'; |
|
||||||
export default { |
|
||||||
data() { |
|
||||||
return { |
|
||||||
PracticeData: {}, |
|
||||||
highestAvg: '', |
|
||||||
studentId: this.$store.state.studentId |
|
||||||
}; |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
changeCourseId() { |
|
||||||
return this.$store.state.courseId; |
|
||||||
} |
|
||||||
}, |
|
||||||
watch: { |
|
||||||
changeCourseId() { |
|
||||||
this.getPracticeData() |
|
||||||
} |
|
||||||
}, |
|
||||||
components: { |
|
||||||
Achievement, |
|
||||||
Headportrait |
|
||||||
}, |
|
||||||
mounted() { |
|
||||||
this.getPracticeData() |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
getPracticeData: function() { |
|
||||||
this.$get(this.api.queryPracticeVo, { studentId: this.$store.state.studentId, courseId:this.$store.state.courseId }).then(res => { |
|
||||||
let h = parseInt(res.message.totalTime / 60); |
|
||||||
let m = parseInt(res.message.totalTime % 60); |
|
||||||
res.message.totalTime = h + 'h' + m + 'm'; |
|
||||||
this.PracticeData = res.message; |
|
||||||
}); |
|
||||||
} |
|
||||||
} |
|
||||||
}; |
|
||||||
</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; |
|
||||||
} |
|
||||||
} |
|
||||||
.AssesmentRecord { |
|
||||||
width: 10%; |
|
||||||
height: 120px; |
|
||||||
background-color: red; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
p { |
|
||||||
margin-left: 0px; |
|
||||||
} |
|
||||||
} |
|
||||||
.newPractice { |
|
||||||
width: 98%; |
|
||||||
height: 229px; |
|
||||||
margin-top: 20px; |
|
||||||
background: rgba(255, 255, 255, 1); |
|
||||||
box-shadow: 0px 0px 21px 0px rgba(48, 115, 248, 0.1); |
|
||||||
border-radius: 10px; |
|
||||||
.exerciseOverview { |
|
||||||
padding: 30px 0; |
|
||||||
} |
|
||||||
p { |
|
||||||
font-size: 20px; |
|
||||||
margin-left: 25px; |
|
||||||
} |
|
||||||
.newPractice-card { |
|
||||||
width: 97%; |
|
||||||
margin: 0 auto; |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
|
|
||||||
.newPractice-card-first { |
|
||||||
.card-first-up { |
|
||||||
font-weight: 400; |
|
||||||
display: flex; |
|
||||||
justify-content: space-around; |
|
||||||
width: 1050px; |
|
||||||
height: 60px; |
|
||||||
background: rgba(255, 255, 255, 1); |
|
||||||
border-radius: 10px 10px 0 0; |
|
||||||
box-shadow: 0px 3px 18px 0px rgba(84, 84, 84, 0.09); |
|
||||||
|
|
||||||
p { |
|
||||||
line-height: 60px; |
|
||||||
width: 150px; |
|
||||||
font-size: 18px; |
|
||||||
color: #333333; |
|
||||||
} |
|
||||||
} |
|
||||||
.card-first-down { |
|
||||||
font-weight: 400; |
|
||||||
display: flex; |
|
||||||
justify-content: space-around; |
|
||||||
width: 1050px; |
|
||||||
height: 60px; |
|
||||||
background: rgba(146, 120, 255, 1); |
|
||||||
border-radius: 0 0 10px 10px; |
|
||||||
box-shadow: 0px 3px 18px 0px rgba(84, 84, 84, 0.09); |
|
||||||
|
|
||||||
p { |
|
||||||
line-height: 60px; |
|
||||||
width: 150px; |
|
||||||
font-size: 26px; |
|
||||||
color: #ffffff; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.newPractice-card-other { |
|
||||||
width: 350px; |
|
||||||
height: 120px; |
|
||||||
background: rgba(255, 255, 255, 1); |
|
||||||
box-shadow: 0px 3px 18px 0px rgba(84, 84, 84, 0.09); |
|
||||||
border-radius: 8px; |
|
||||||
display: flex; |
|
||||||
.card-other-score { |
|
||||||
margin-top: 18px; |
|
||||||
height: 88px; |
|
||||||
position: relative; |
|
||||||
|
|
||||||
p:last-child { |
|
||||||
position: absolute; |
|
||||||
bottom: 0px; |
|
||||||
color: #328aff; |
|
||||||
font-size: 26px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
p { |
|
||||||
margin: 0px; |
|
||||||
} |
|
||||||
.about-head1 { |
|
||||||
width: 95%; |
|
||||||
display: flex; |
|
||||||
margin-bottom: 20px; |
|
||||||
p { |
|
||||||
margin-left: 20px; |
|
||||||
color: #328aff; |
|
||||||
font-size: 20px; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,558 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="box"> |
|
||||||
<el-row :gutter="24"> |
|
||||||
<el-col :span="24"> |
|
||||||
<el-card shadow="hover" class="mgb20"> |
|
||||||
<div class="flex-between"> |
|
||||||
<div class="per_title" v-preventReClick @click="goback()"> |
|
||||||
<i class="el-icon-arrow-left"></i> |
|
||||||
<span class="per_back">返回</span> |
|
||||||
<span class="per_school">查看报告</span> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<el-button type="primary" @click="exportPage">导出</el-button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</el-card> |
|
||||||
|
|
||||||
<div id="pdfDom"> |
|
||||||
<h6 style="text-align: center;font-size: 20px">标准实验报告</h6> |
|
||||||
<div class="flex-center mgb20 user_header"> |
|
||||||
<p class="addhr_tag"></p> |
|
||||||
<span style="font-size: 18px">基本信息</span> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div> |
|
||||||
<el-table :data="infoData" class="info-table" style="margin-bottom: 40px" header-align="center"> |
|
||||||
<el-table-column prop="userName" label="学生姓名" align="center"> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="workNumber" label="学生学号" align="center"> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="experimentalClassName" label="学生班级" align="center"> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="teacherName" label="指导老师" align="center"> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="period" label="实验学时" align="center"> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="laboratory" label="实验室名称" align="center"> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="startTime" label="实验时间" align="center"> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="score" label="实验成绩" align="center"> |
|
||||||
</el-table-column> |
|
||||||
</el-table> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="mgb20"> |
|
||||||
<div class="meta-title-wrap"> |
|
||||||
<p class="meta-title"><i class="el-icon-discount"></i> 实验项目名称</p> |
|
||||||
</div> |
|
||||||
<el-input v-model="form.projectName" type="textarea" :disabled="true" rows="5"></el-input> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="mgb20"> |
|
||||||
<div class="meta-title-wrap"> |
|
||||||
<p class="meta-title"><i class="el-icon-discount"></i> 实验目的</p> |
|
||||||
</div> |
|
||||||
<el-input v-model="form.experimentGoal" type="textarea" :disabled="true" rows="5"></el-input> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="mgb20"> |
|
||||||
<div class="meta-title-wrap"> |
|
||||||
<p class="meta-title"><i class="el-icon-discount"></i> 实验原理</p> |
|
||||||
</div> |
|
||||||
<el-input v-model="form.principle" type="textarea" :disabled="true" rows="5"></el-input> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="mgb20"> |
|
||||||
<div class="meta-title-wrap"> |
|
||||||
<p class="meta-title"><i class="el-icon-discount"></i> 实验内容</p> |
|
||||||
</div> |
|
||||||
<el-input v-model="form.content" type="textarea" :disabled="true" rows="5"></el-input> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="mgb20"> |
|
||||||
<div class="meta-title-wrap"> |
|
||||||
<p class="meta-title"><i class="el-icon-discount"></i> 实验器材（设备、元器件）</p> |
|
||||||
</div> |
|
||||||
<el-input v-model="form.tool" type="textarea" :disabled="true" rows="5"></el-input> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="mgb20"> |
|
||||||
<div class="meta-title-wrap"> |
|
||||||
<p class="meta-title"><i class="el-icon-discount"></i> 实验步骤</p> |
|
||||||
</div> |
|
||||||
<el-input v-model="form.step" type="textarea" :disabled="true" rows="5"></el-input> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="mgb20"> |
|
||||||
<div class="meta-title-wrap"> |
|
||||||
<p class="meta-title">实验数据</p> |
|
||||||
<span>得分：50/60</span> |
|
||||||
</div> |
|
||||||
<el-table :data="sjData" class="table" stripe header-align="center"> |
|
||||||
<el-table-column type="index" width="100" label="序号" align="center"> |
|
||||||
<template slot-scope="scope"> |
|
||||||
{{scope.$index + 1}} |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="judgmentPointsName" label="考核点" align="center"> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="userAnswer" label="学生答案" align="center"> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="answer" label="参考答案" align="center"> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="codeScore" label="得分" align="center"> |
|
||||||
</el-table-column> |
|
||||||
</el-table> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="mgb20"> |
|
||||||
<div class="meta-title-wrap"> |
|
||||||
<p class="meta-title"><i class="el-icon-discount"></i> 实验数据及结果分析</p> |
|
||||||
</div> |
|
||||||
<el-table :data="expData" class="table" stripe header-align="center"> |
|
||||||
<el-table-column prop="module" label="期权平仓方式" align="center"> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="judgmentPointsName" label="期权合约" align="center"> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="userAnswer" label="期权合约持仓时间段" width="150" align="center"> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="answer" label="期权交易方向" align="center"> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="sl" label="委托数量" align="center"> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="jg" label="委托价格" align="center"> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="hy" label="期货合约" align="center"> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="sjd" label="合约持仓时间段" align="center"> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="fx" label="交易方向" align="center"> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="hyyk" label="期权/期货合约盈亏" width="120" align="center"> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="xhyk" label="现货盈亏" align="center"> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="sxf" label="手续费" align="center"> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="zyk" label="总盈亏" align="center"> |
|
||||||
</el-table-column> |
|
||||||
</el-table> |
|
||||||
<el-input style="margin-top: 20px" v-model="form.fx" type="textarea" :disabled="true" rows="5"></el-input> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="mgb20"> |
|
||||||
<div class="meta-title-wrap"> |
|
||||||
<p class="meta-title"><i class="el-icon-discount"></i> 实验结论</p> |
|
||||||
</div> |
|
||||||
<el-input type="textarea" v-model="form.conclusion" rows="5" disabled></el-input> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="mgb20"> |
|
||||||
<div class="meta-title-wrap"> |
|
||||||
<p class="meta-title"><i class="el-icon-discount"></i> 总结及心得体会</p> |
|
||||||
</div> |
|
||||||
<el-input type="textarea" v-model="form.summarize" rows="5" disabled></el-input> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="mgb20"> |
|
||||||
<div class="meta-title-wrap"> |
|
||||||
<p class="meta-title"><i class="el-icon-discount"></i> 对本实验过程及方法、手段的改进建议</p> |
|
||||||
</div> |
|
||||||
<el-input type="textarea" rows="5" v-model="form.improvement" disabled></el-input> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="mgb20"> |
|
||||||
<div class="meta-title-wrap"> |
|
||||||
<p class="meta-title"><i class="el-icon-discount"></i> 老师评语</p> |
|
||||||
</div> |
|
||||||
<el-input type="textarea" rows="5" v-model="form.py" disabled></el-input> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</el-col> |
|
||||||
</el-row> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import html2Canvas from 'html2canvas' |
|
||||||
import JsPDF from 'jspdf' |
|
||||||
export default { |
|
||||||
data (){ |
|
||||||
return { |
|
||||||
title: '实验报告', |
|
||||||
userId: this.$store.state.userId, |
|
||||||
studentId: this.$store.state.studentId, |
|
||||||
form: { |
|
||||||
analysis: '', |
|
||||||
conclusion: '11111', |
|
||||||
content: `本实验以商品期权的保险功能为主轴，以期权故事展开，衔接实战规则的介绍，之后进入案例和策略选择，并以此逐步完成期权交易的整个流程，最终输出实验报告。`, |
|
||||||
tool: '计算机、行情软件（东方财富、叩富app）、纸张', |
|
||||||
data: '', |
|
||||||
experimentGoal: `期权策略的应用对学生学习能力和应用能力要求较高，需要扎实和期权期货理论知识和思辨能力，借助信息化技术，让学生有沉浸式的体验，增加学生学习和研究的积极性，同时提升期权期货的专业认知水平。`, |
|
||||||
experimentId: '', |
|
||||||
experimentalClassName: '', |
|
||||||
improvement: '11111', |
|
||||||
laboratory: '', |
|
||||||
period: '', |
|
||||||
principle: `本项目以商品期权在实际生产中的保险作用为研究对象，包括两个模块。共计4个学时。课时分配如下：模块一：期权保险基础实验（2学时）模块二：期权保险挑战实验（2学时）`, |
|
||||||
projectName: '商品期货期权保险虚拟仿真实验项目', |
|
||||||
score: 0, |
|
||||||
step: `实验步骤：1.期权概念2.期权实战规则3.期权策略选择4.模拟开户5.银证转账6.选择期权合约7.期权开仓8.期权/期货平仓9.核算损益10.填写实验报告`, |
|
||||||
submitTime: '', |
|
||||||
summarize: '11111', |
|
||||||
teacherName: '', |
|
||||||
userId: this.userId, |
|
||||||
userName: '', |
|
||||||
workNumber: '', |
|
||||||
fx: '111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111', |
|
||||||
py: '期权相关知识理论掌握扎实，相关测试题正确率高；对期权保险原理理解正确，选择了合理的合约及数量，选择的期权策略很好的满足案例中的保险需求。' |
|
||||||
}, |
|
||||||
sjData: [ |
|
||||||
{ |
|
||||||
judgmentPointsName: '测试题1', |
|
||||||
userAnswer: 'A', |
|
||||||
answer: 'A', |
|
||||||
codeScore: '3', |
|
||||||
},{ |
|
||||||
judgmentPointsName: '测试题2', |
|
||||||
userAnswer: 'A', |
|
||||||
answer: 'A', |
|
||||||
codeScore: '3', |
|
||||||
},{ |
|
||||||
judgmentPointsName: '测试题3', |
|
||||||
userAnswer: 'C', |
|
||||||
answer: 'C', |
|
||||||
codeScore: '3', |
|
||||||
},{ |
|
||||||
judgmentPointsName: '测试题1', |
|
||||||
userAnswer: 'C', |
|
||||||
answer: 'C', |
|
||||||
codeScore: '3', |
|
||||||
},{ |
|
||||||
judgmentPointsName: '测试题2', |
|
||||||
userAnswer: 'C', |
|
||||||
answer: 'C', |
|
||||||
codeScore: '3', |
|
||||||
},{ |
|
||||||
judgmentPointsName: '测试题3', |
|
||||||
userAnswer: 'A', |
|
||||||
answer: 'A', |
|
||||||
codeScore: '3', |
|
||||||
},{ |
|
||||||
judgmentPointsName: '测试题1', |
|
||||||
userAnswer: 'A', |
|
||||||
answer: 'A', |
|
||||||
codeScore: '3', |
|
||||||
},{ |
|
||||||
judgmentPointsName: '测试题2', |
|
||||||
userAnswer: 'B', |
|
||||||
answer: 'B', |
|
||||||
codeScore: '3', |
|
||||||
},{ |
|
||||||
judgmentPointsName: '测试题3', |
|
||||||
userAnswer: 'B', |
|
||||||
answer: 'B', |
|
||||||
codeScore: '3', |
|
||||||
},{ |
|
||||||
judgmentPointsName: '总盈亏', |
|
||||||
userAnswer: '3088', |
|
||||||
answer: '＞-5000', |
|
||||||
codeScore: '20', |
|
||||||
},{ |
|
||||||
judgmentPointsName: '实验数据及结果分析', |
|
||||||
userAnswer: '111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111', |
|
||||||
answer: '字数>200', |
|
||||||
codeScore: '20', |
|
||||||
},{ |
|
||||||
judgmentPointsName: '实验结论', |
|
||||||
userAnswer: '11111', |
|
||||||
answer: '字数>200', |
|
||||||
codeScore: '0', |
|
||||||
} |
|
||||||
], |
|
||||||
type: this.$route.query.type, |
|
||||||
id: this.$route.query.id, |
|
||||||
recordId: this.$route.query.recordId, |
|
||||||
reportId: this.$route.query.reportId, |
|
||||||
infoData: [{ |
|
||||||
userName: "张黎", |
|
||||||
workNumber: "00", |
|
||||||
startTime: '2020-12-31 14:11:12', |
|
||||||
score: 80 |
|
||||||
}], |
|
||||||
expData: [ |
|
||||||
{ |
|
||||||
module: '卖出', |
|
||||||
judgmentPointsName: '豆粕1911-看跌-2900', |
|
||||||
userAnswer: '2019-06-06:2019-08-08', |
|
||||||
answer: '多头', |
|
||||||
sl: '8', |
|
||||||
jg: '2900', |
|
||||||
hy: '-', |
|
||||||
sjd: '', |
|
||||||
fx: '-', |
|
||||||
hyyk: '-2400', |
|
||||||
xhyk: '', |
|
||||||
sxf: '36', |
|
||||||
zyk: '', |
|
||||||
},{ |
|
||||||
module: '卖出', |
|
||||||
judgmentPointsName: '豆粕1911-看跌-2900', |
|
||||||
userAnswer: '2019-08-09:2019-09-30', |
|
||||||
answer: '多头', |
|
||||||
sl: '8', |
|
||||||
jg: '2900', |
|
||||||
hy: '-', |
|
||||||
sjd: '', |
|
||||||
fx: '-', |
|
||||||
hyyk: '880', |
|
||||||
xhyk: '4720', |
|
||||||
sxf: '36', |
|
||||||
zyk: '3088', |
|
||||||
} |
|
||||||
], |
|
||||||
accountData: [], |
|
||||||
showData: '1', |
|
||||||
autograph: '1', |
|
||||||
pages: 1, |
|
||||||
ipVisible: false, |
|
||||||
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}], |
|
||||||
conclusionOptions: [ |
|
||||||
{ |
|
||||||
value: 1, |
|
||||||
label: '结论符合预期' |
|
||||||
} |
|
||||||
], |
|
||||||
} |
|
||||||
}, |
|
||||||
mounted(){ |
|
||||||
// this.getData() |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
getData(){ |
|
||||||
if(this.type){ |
|
||||||
let data = { |
|
||||||
recordId: this.id, |
|
||||||
} |
|
||||||
this.$get(this.api.queryVirtualReport,data).then(res => { |
|
||||||
this.form = res.data.report |
|
||||||
this.expData = res.data.data |
|
||||||
let form = this.form |
|
||||||
this.infoData.push({ |
|
||||||
workNumber: form.workNumber, |
|
||||||
experimentalClassName: form.experimentalClassName, |
|
||||||
teacherName: form.teacherName, |
|
||||||
period: form.period, |
|
||||||
laboratory: form.laboratory, |
|
||||||
startTime: form.submitTime, |
|
||||||
score: form.score, |
|
||||||
userName: form.userName |
|
||||||
}) |
|
||||||
}).catch(res => {}); |
|
||||||
}else{ |
|
||||||
let data = { |
|
||||||
studentId: this.studentId, |
|
||||||
projectId: this.id, |
|
||||||
recordId: this.recordId, |
|
||||||
reportId: this.reportId |
|
||||||
} |
|
||||||
this.$get(this.api.queryArchievement,data).then(res => { |
|
||||||
this.form = res.data.report |
|
||||||
this.expData = res.data.data |
|
||||||
let form = this.form |
|
||||||
this.infoData.push({ |
|
||||||
workNumber: form.workNumber, |
|
||||||
experimentalClassName: form.experimentalClassName, |
|
||||||
teacherName: form.teacherName, |
|
||||||
period: form.period, |
|
||||||
laboratory: form.laboratory, |
|
||||||
startTime: form.submitTime, |
|
||||||
score: form.score, |
|
||||||
userName: form.userName |
|
||||||
}) |
|
||||||
}).catch(res => {}); |
|
||||||
} |
|
||||||
}, |
|
||||||
handleRemove(file, fileList) { |
|
||||||
console.log(file, fileList); |
|
||||||
}, |
|
||||||
handlePreview(file) { |
|
||||||
console.log(file); |
|
||||||
}, |
|
||||||
saveAdd(){ |
|
||||||
let data = { |
|
||||||
systemId: this.configId, |
|
||||||
systemName: this.form.systemName, |
|
||||||
systemType: this.form.systemType, |
|
||||||
systemAttribution: this.form.systemAttribution, |
|
||||||
} |
|
||||||
if(this.configId){ |
|
||||||
this.$post(this.api.updateServiceConfig,data).then((res) => { |
|
||||||
this.$message.success('编辑成功'); |
|
||||||
this.goback() |
|
||||||
}).catch((res) => { |
|
||||||
}) |
|
||||||
}else{ |
|
||||||
this.$post(this.api.updateServiceConfig,data).then((res) => { |
|
||||||
this.$message.success('添加成功'); |
|
||||||
this.goback() |
|
||||||
}).catch((res) => { |
|
||||||
}) |
|
||||||
} |
|
||||||
}, |
|
||||||
handleRemove(file, fileList) { |
|
||||||
console.log(file, fileList); |
|
||||||
}, |
|
||||||
handlePictureCardPreview(file) { |
|
||||||
this.dialogImageUrl = file.url; |
|
||||||
this.dialogVisible = true; |
|
||||||
}, |
|
||||||
SpanMethod({ row, column, rowIndex, columnIndex }) { |
|
||||||
if (rowIndex % 2 === 0) { |
|
||||||
if (columnIndex === 6) { |
|
||||||
if(!row.Intranet){ |
|
||||||
return [1, 2]; |
|
||||||
} |
|
||||||
} |
|
||||||
// else if (columnIndex === 1) { |
|
||||||
// return [0, 0]; |
|
||||||
// } |
|
||||||
} |
|
||||||
}, |
|
||||||
goback(){ |
|
||||||
this.$router.go(-1) |
|
||||||
}, |
|
||||||
exportPage(){ |
|
||||||
var title = this.title; |
|
||||||
html2Canvas(document.querySelector('#pdfDom'), { |
|
||||||
allowTaint: true |
|
||||||
}).then(function (canvas) { |
|
||||||
let contentWidth = canvas.width |
|
||||||
let contentHeight = canvas.height |
|
||||||
let pageHeight = contentWidth / 592.28 * 841.89 |
|
||||||
let leftHeight = contentHeight |
|
||||||
let position = 0 |
|
||||||
let imgWidth = 595.28 |
|
||||||
let imgHeight = 592.28 / contentWidth * contentHeight |
|
||||||
let pageData = canvas.toDataURL('image/jpeg', 1.0) |
|
||||||
let PDF = new JsPDF('', 'pt', 'a4') |
|
||||||
if (leftHeight < pageHeight) { |
|
||||||
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) |
|
||||||
} else { |
|
||||||
while (leftHeight > 0) { |
|
||||||
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) |
|
||||||
leftHeight -= pageHeight |
|
||||||
position -= 841.89 |
|
||||||
if (leftHeight > 0) { |
|
||||||
PDF.addPage() |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
PDF.save(title + '.pdf') |
|
||||||
} |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
.box{ |
|
||||||
padding: 0 50px; |
|
||||||
background-color: #fff; |
|
||||||
} |
|
||||||
/deep/.el-textarea.is-disabled .el-textarea__inner{ |
|
||||||
background-color: #ebfafd; |
|
||||||
} |
|
||||||
#pdfDom{ |
|
||||||
padding: 0 50px; |
|
||||||
/deep/.info-table{ |
|
||||||
border: 0; |
|
||||||
th{ |
|
||||||
background-color: #fff !important; |
|
||||||
.cell{ |
|
||||||
color: #444; |
|
||||||
} |
|
||||||
} |
|
||||||
tr{ |
|
||||||
border: 0; |
|
||||||
} |
|
||||||
tr:hover,tr:hover>td{ |
|
||||||
background-color: #c6f2f8 !important; |
|
||||||
} |
|
||||||
td{ |
|
||||||
border: { |
|
||||||
left: 4px solid #fff; |
|
||||||
right: 4px solid #fff; |
|
||||||
} |
|
||||||
&:first-child{ |
|
||||||
border-left: 0; |
|
||||||
} |
|
||||||
&:last-child{ |
|
||||||
border-right: 0; |
|
||||||
} |
|
||||||
background-color: #c6f2f8; |
|
||||||
border-bottom: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
/deep/.table th{ |
|
||||||
background-color: #a2a2a2 !important; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/deep/.cell{ |
|
||||||
font-size: 12px; |
|
||||||
} |
|
||||||
/deep/.el-row{ |
|
||||||
padding-top: 20px; |
|
||||||
margin: 0 !important; |
|
||||||
} |
|
||||||
.form-item{ |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
.form-item .el-input{ |
|
||||||
width: auto; |
|
||||||
} |
|
||||||
.form-item span{ |
|
||||||
margin-right: 10px; |
|
||||||
} |
|
||||||
.meta-title-wrap{ |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
align-items: center; |
|
||||||
span{ |
|
||||||
font-size: 13px; |
|
||||||
color: #444; |
|
||||||
} |
|
||||||
} |
|
||||||
.flex-between{ |
|
||||||
span{ |
|
||||||
font-size: 13px; |
|
||||||
color: #444; |
|
||||||
} |
|
||||||
} |
|
||||||
.meta-title{ |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
padding: 10px 20px; |
|
||||||
margin-bottom: 10px; |
|
||||||
font-size: 16px; |
|
||||||
color: #fff; |
|
||||||
background-color: #9076FF; |
|
||||||
i{ |
|
||||||
margin-right: 10px; |
|
||||||
} |
|
||||||
} |
|
||||||
.step-title{ |
|
||||||
margin-bottom: 10px; |
|
||||||
font-size: 16px; |
|
||||||
color: #328aff; |
|
||||||
} |
|
||||||
.bd-title{ |
|
||||||
padding-top: 20px; |
|
||||||
border-top: 1px dashed #ccc; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,174 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<div class="header_tab"> |
|
||||||
<div class="selectSystem"> |
|
||||||
<el-select v-model="value" placeholder="请选择" size="small" @change="chooseCourse"> |
|
||||||
<el-option |
|
||||||
v-for="(item,index) in options" |
|
||||||
:key="index" |
|
||||||
:label="item.courseName" |
|
||||||
:value="item.courseId" |
|
||||||
></el-option> |
|
||||||
</el-select> |
|
||||||
<div class="radius"></div> |
|
||||||
</div> |
|
||||||
<div class="tabs"> |
|
||||||
<el-tabs v-model="activeName"> |
|
||||||
<el-tab-pane label="实验学习" name="first"> |
|
||||||
<ExpLearning></ExpLearning> |
|
||||||
</el-tab-pane> |
|
||||||
<el-tab-pane label="考勤记录" name="second"> |
|
||||||
<CheckWorkAttendance></CheckWorkAttendance> |
|
||||||
</el-tab-pane> |
|
||||||
<el-tab-pane label="练习记录" name="third"> |
|
||||||
<Practice ></Practice> |
|
||||||
</el-tab-pane> |
|
||||||
<el-tab-pane label="考核记录" name="four"> |
|
||||||
<ExaminationRecord></ExaminationRecord> |
|
||||||
</el-tab-pane> |
|
||||||
</el-tabs> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import CheckWorkAttendance from './CheckWorkAttendance'; |
|
||||||
import ExpLearning from './ExpLearning'; |
|
||||||
import Practice from './Practice'; |
|
||||||
import ExaminationRecord from './ExaminationRecord'; |
|
||||||
export default { |
|
||||||
data() { |
|
||||||
return { |
|
||||||
activeName: 'first', |
|
||||||
options: [], |
|
||||||
value: '', |
|
||||||
schoolId: this.$store.state.schoolId, |
|
||||||
studentId: this.$store.state.studentId |
|
||||||
}; |
|
||||||
}, |
|
||||||
mounted(){ |
|
||||||
this.getCourse() |
|
||||||
}, |
|
||||||
components: { |
|
||||||
CheckWorkAttendance, |
|
||||||
ExpLearning, |
|
||||||
Practice, |
|
||||||
ExaminationRecord |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
chooseCourse(val){ |
|
||||||
this.$store.commit('courseIdData',{courseId: val}) |
|
||||||
}, |
|
||||||
|
|
||||||
async getCourse() { |
|
||||||
let arr = await this.$get(this.api.queryStudentCourse, { |
|
||||||
studentId: this.studentId |
|
||||||
}); |
|
||||||
if(arr.message.length != 0){ |
|
||||||
this.value = arr.message[0].courseId |
|
||||||
this.$store.commit('courseIdData',{ courseId: arr.message[0].courseId }) |
|
||||||
this.options = arr.message; |
|
||||||
}else{ |
|
||||||
this.$store.commit('courseIdData',{ courseId: '' }) |
|
||||||
} |
|
||||||
}, |
|
||||||
}, |
|
||||||
watch: { |
|
||||||
value(n, o) { |
|
||||||
this.$store.commit('courseIdData',{courseId:n}) |
|
||||||
} |
|
||||||
} |
|
||||||
}; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
::v-deep .el-tabs__active-bar{ |
|
||||||
height: 3px; |
|
||||||
border-radius: 20px; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
::v-deep .el-input__icon { |
|
||||||
line-height: 30px; |
|
||||||
} |
|
||||||
|
|
||||||
.header_tab /deep/ .el-select .el-input .el-select__caret { |
|
||||||
background: #328aff; |
|
||||||
border-radius: 50%; |
|
||||||
position: relative; |
|
||||||
height: 30px; |
|
||||||
z-index: 1; |
|
||||||
} |
|
||||||
.selectSystem /deep/ .el-input--suffix .el-input__inner{ |
|
||||||
border: none ; |
|
||||||
font-size: 16px; |
|
||||||
letter-spacing:2px |
|
||||||
} |
|
||||||
.header_tab /deep/ .el-tabs__item{ |
|
||||||
font-size: 16px; |
|
||||||
} |
|
||||||
.header_tab /deep/ .el-tabs__header{ |
|
||||||
padding-top: 0px; |
|
||||||
padding-left: 300px; |
|
||||||
} |
|
||||||
.header_tab /deep/ .el-tabs__item{ |
|
||||||
height: 60px; |
|
||||||
line-height: 60px; |
|
||||||
} |
|
||||||
.header_tab /deep/ .el-tabs__nav-scroll { |
|
||||||
margin-left: 100px; |
|
||||||
} |
|
||||||
.header_tab { |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
background-color: #fff; |
|
||||||
position: relative; |
|
||||||
} |
|
||||||
.header_tab ::v-deep .el-tabs__item{ |
|
||||||
padding: 0 50px; |
|
||||||
} |
|
||||||
.selectSystem { |
|
||||||
position: absolute; |
|
||||||
z-index: 99999; |
|
||||||
left: 20px; |
|
||||||
top:12px; |
|
||||||
margin-right: 60px; |
|
||||||
} |
|
||||||
.header_tab /deep/ .el-input--suffix .el-input__inner { |
|
||||||
background: #f5f2ff; |
|
||||||
position: relative; |
|
||||||
z-index: -1; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.header_tab /deep/ input::-webkit-input-placeholder { |
|
||||||
color: black; |
|
||||||
} |
|
||||||
.header_tab /deep/ input::-moz-input-placeholder { |
|
||||||
color: black; |
|
||||||
} |
|
||||||
.header_tab /deep/ input::-ms-input-placeholder { |
|
||||||
color: black; |
|
||||||
} |
|
||||||
|
|
||||||
.header_tab .radius { |
|
||||||
position: absolute; |
|
||||||
width: 32px; |
|
||||||
height: 32px; |
|
||||||
border-radius: 50%; |
|
||||||
background: #328aff; |
|
||||||
top: 0px; |
|
||||||
right: 1px; |
|
||||||
z-index: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.header_tab ::v-deep .el-select__caret:before { |
|
||||||
content: "\e78f"; |
|
||||||
font-size: 18px; |
|
||||||
padding: 3px; |
|
||||||
border-radius: 50%; |
|
||||||
color: #ffffff; |
|
||||||
} |
|
||||||
|
|
||||||
</style> |
|
||||||
@ -1,129 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class=""> |
|
||||||
<div class="crumbs"> |
|
||||||
<el-breadcrumb separator="/"> |
|
||||||
<el-breadcrumb-item><i class="el-icon-lx-copy"></i> tab选项卡</el-breadcrumb-item> |
|
||||||
</el-breadcrumb> |
|
||||||
</div> |
|
||||||
<div class="container"> |
|
||||||
<el-tabs v-model="message"> |
|
||||||
<el-tab-pane :label="`未读消息(${unread.length})`" name="first"> |
|
||||||
<el-table :data="unread" :show-header="false" style="width: 100%"> |
|
||||||
<el-table-column> |
|
||||||
<template slot-scope="scope"> |
|
||||||
<span class="message-title">{{scope.row.title}}</span> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="date" width="180"></el-table-column> |
|
||||||
<el-table-column width="120"> |
|
||||||
<template slot-scope="scope"> |
|
||||||
<el-button size="small" @click="handleRead(scope.$index)">标为已读</el-button> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
</el-table> |
|
||||||
<div class="handle-row"> |
|
||||||
<el-button type="primary">全部标为已读</el-button> |
|
||||||
</div> |
|
||||||
</el-tab-pane> |
|
||||||
<el-tab-pane :label="`已读消息(${read.length})`" name="second"> |
|
||||||
<template v-if="message === 'second'"> |
|
||||||
<el-table :data="read" :show-header="false" style="width: 100%"> |
|
||||||
<el-table-column> |
|
||||||
<template slot-scope="scope"> |
|
||||||
<span class="message-title">{{scope.row.title}}</span> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="date" width="150"></el-table-column> |
|
||||||
<el-table-column width="120"> |
|
||||||
<template slot-scope="scope"> |
|
||||||
<el-button type="danger" @click="handleDel(scope.$index)">删除</el-button> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
</el-table> |
|
||||||
<div class="handle-row"> |
|
||||||
<el-button type="danger">删除全部</el-button> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
</el-tab-pane> |
|
||||||
<el-tab-pane :label="`回收站(${recycle.length})`" name="third"> |
|
||||||
<template v-if="message === 'third'"> |
|
||||||
<el-table :data="recycle" :show-header="false" style="width: 100%"> |
|
||||||
<el-table-column> |
|
||||||
<template slot-scope="scope"> |
|
||||||
<span class="message-title">{{scope.row.title}}</span> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="date" width="150"></el-table-column> |
|
||||||
<el-table-column width="120"> |
|
||||||
<template slot-scope="scope"> |
|
||||||
<el-button @click="handleRestore(scope.$index)">还原</el-button> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
</el-table> |
|
||||||
<div class="handle-row"> |
|
||||||
<el-button type="danger">清空回收站</el-button> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
</el-tab-pane> |
|
||||||
</el-tabs> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
|
||||||
name: 'tabs', |
|
||||||
data() { |
|
||||||
return { |
|
||||||
message: 'first', |
|
||||||
showHeader: false, |
|
||||||
unread: [{ |
|
||||||
date: '2018-04-19 20:00:00', |
|
||||||
title: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护', |
|
||||||
},{ |
|
||||||
date: '2018-04-19 21:00:00', |
|
||||||
title: '今晚12点整发大红包，先到先得', |
|
||||||
}], |
|
||||||
read: [{ |
|
||||||
date: '2018-04-19 20:00:00', |
|
||||||
title: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护' |
|
||||||
}], |
|
||||||
recycle: [{ |
|
||||||
date: '2018-04-19 20:00:00', |
|
||||||
title: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护' |
|
||||||
}] |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
handleRead(index) { |
|
||||||
const item = this.unread.splice(index, 1); |
|
||||||
console.log(item); |
|
||||||
this.read = item.concat(this.read); |
|
||||||
}, |
|
||||||
handleDel(index) { |
|
||||||
const item = this.read.splice(index, 1); |
|
||||||
this.recycle = item.concat(this.recycle); |
|
||||||
}, |
|
||||||
handleRestore(index) { |
|
||||||
const item = this.recycle.splice(index, 1); |
|
||||||
this.read = item.concat(this.read); |
|
||||||
} |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
unreadNum(){ |
|
||||||
return this.unread.length; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
</script> |
|
||||||
|
|
||||||
<style> |
|
||||||
.message-title{ |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
.handle-row{ |
|
||||||
margin-top: 30px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
|
|
||||||
@ -1,173 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<div class="header_tab"> |
|
||||||
<div class="selectSystem"> |
|
||||||
<el-select v-model="value" placeholder="请选择" size="small"> |
|
||||||
<el-option |
|
||||||
v-for="item in options" |
|
||||||
:key="item.courseId" |
|
||||||
:label="item.courseName" |
|
||||||
:value="item.courseId" |
|
||||||
></el-option> |
|
||||||
</el-select> |
|
||||||
<div class="radius"></div> |
|
||||||
</div> |
|
||||||
<el-tabs v-model="activeName"> |
|
||||||
<el-tab-pane label="教学管理" name="first"> |
|
||||||
<!-- <TeacherIndex></TeacherIndex> --> |
|
||||||
<TeacherManage @startCurriculum="startCurriculum" @into="into"></TeacherManage> |
|
||||||
</el-tab-pane> |
|
||||||
<el-tab-pane label="考核管理" name="second"> |
|
||||||
<Assessment @release="release" @check="check"></Assessment> |
|
||||||
</el-tab-pane> |
|
||||||
</el-tabs> |
|
||||||
</div> |
|
||||||
<!-- <el-row :gutter="20"> |
|
||||||
<el-col :span="24"> |
|
||||||
<el-card shadow="hover" class="mgb20"> |
|
||||||
</el-card> |
|
||||||
</el-col> |
|
||||||
</el-row>--> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Assessment from '../common/Teachercommon/Assessment'; |
|
||||||
import TeacherManage from '../common/Teachercommon/TeacherManage'; |
|
||||||
export default { |
|
||||||
data() { |
|
||||||
return { |
|
||||||
activeName: 'first', |
|
||||||
isShow: true, |
|
||||||
value: '', |
|
||||||
options: [], |
|
||||||
schoolId: this.$store.state.schoolId, |
|
||||||
active: this.$route.query.active |
|
||||||
}; |
|
||||||
}, |
|
||||||
created(){ |
|
||||||
if(this.active == true){ |
|
||||||
this.activeName = 'second' |
|
||||||
} |
|
||||||
}, |
|
||||||
async mounted() { |
|
||||||
let arr = await this.$get(this.api.platformQueryCourse, { |
|
||||||
schoolId: this.schoolId |
|
||||||
}); |
|
||||||
if(arr.message.length != 0){ |
|
||||||
this.value = arr.message[0].courseId; |
|
||||||
this.$store.commit('courseIdData',{courseId:arr.message[0].courseId}) |
|
||||||
this.options = arr.message; |
|
||||||
} |
|
||||||
}, |
|
||||||
components: { |
|
||||||
Assessment, |
|
||||||
TeacherManage |
|
||||||
}, |
|
||||||
watch: { |
|
||||||
value(n, o) { |
|
||||||
this.$store.commit('courseIdData',{courseId:n}) |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
release() { |
|
||||||
this.$store.commit("assesmentData", { assesmentId : ''}); |
|
||||||
this.$router.push('/addassessment'); |
|
||||||
}, |
|
||||||
startCurriculum(val) { |
|
||||||
this.$store.commit('classData', { classId: val }); |
|
||||||
this.$router.push('/teacherindex'); |
|
||||||
}, |
|
||||||
check(val) { |
|
||||||
this.$store.commit('resultData', { resultId: val }); |
|
||||||
this.$router.push('/checkresult'); |
|
||||||
}, |
|
||||||
into(val) { |
|
||||||
this.$store.commit('classData', { classId: val.experimentalClassId, className: val.experimentalClassName }); |
|
||||||
this.$router.push('/classdetail'); |
|
||||||
} |
|
||||||
} |
|
||||||
}; |
|
||||||
</script> |
|
||||||
|
|
||||||
|
|
||||||
<style scoped> |
|
||||||
.selectSystem /deep/ .el-select .el-input .el-select__caret { |
|
||||||
background: #328aff; |
|
||||||
border-radius: 50%; |
|
||||||
position: relative; |
|
||||||
height: 30px; |
|
||||||
z-index: 1; |
|
||||||
} |
|
||||||
.selectSystem /deep/ .el-input--suffix .el-input__inner { |
|
||||||
border: none; |
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
.header_tab /deep/ .el-tabs__item { |
|
||||||
font-size: 16px; |
|
||||||
} |
|
||||||
.header_tab /deep/ .el-tabs__header { |
|
||||||
padding-top: 0px; |
|
||||||
padding-left: 300px; |
|
||||||
} |
|
||||||
.header_tab /deep/ .el-tabs__item { |
|
||||||
height: 60px; |
|
||||||
line-height: 60px; |
|
||||||
} |
|
||||||
.header_tab /deep/ .el-tabs__nav-scroll { |
|
||||||
margin-left: 100px; |
|
||||||
} |
|
||||||
::v-deep .el-input__icon { |
|
||||||
line-height: 30px; |
|
||||||
} |
|
||||||
.header_tab { |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
background-color: #fff; |
|
||||||
position: relative; |
|
||||||
} |
|
||||||
.selectSystem ::v-deep .el-tabs__item { |
|
||||||
padding: 0 50px; |
|
||||||
} |
|
||||||
.selectSystem { |
|
||||||
position: absolute; |
|
||||||
z-index: 1000; |
|
||||||
left: 20px; |
|
||||||
top: 12px; |
|
||||||
margin-right: 60px; |
|
||||||
} |
|
||||||
.selectSystem /deep/ .el-input--suffix .el-input__inner { |
|
||||||
background: #f5f2ff; |
|
||||||
position: relative; |
|
||||||
z-index: -1; |
|
||||||
} |
|
||||||
|
|
||||||
.selectSystem /deep/ input::-webkit-input-placeholder { |
|
||||||
color: black; |
|
||||||
} |
|
||||||
.selectSystem /deep/ input::-moz-input-placeholder { |
|
||||||
color: black; |
|
||||||
} |
|
||||||
.selectSystem /deep/ input::-ms-input-placeholder { |
|
||||||
color: black; |
|
||||||
} |
|
||||||
|
|
||||||
.radius { |
|
||||||
position: absolute; |
|
||||||
width: 32px; |
|
||||||
height: 32px; |
|
||||||
border-radius: 50%; |
|
||||||
background: #328aff; |
|
||||||
top: 0px; |
|
||||||
right: 1px; |
|
||||||
z-index: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.selectSystem ::v-deep .el-select__caret:before { |
|
||||||
content: '\e78f'; |
|
||||||
font-size: 18px; |
|
||||||
padding: 3px; |
|
||||||
border-radius: 50%; |
|
||||||
color: #ffffff; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,370 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<div> |
|
||||||
<img src="../../assets/img/back.png" class="backimg" /> |
|
||||||
</div> |
|
||||||
<el-row :gutter="20" style="margin-right:0px"> |
|
||||||
<el-col :span="4" class="introduce_col"> |
|
||||||
<el-card class="mgb200"> |
|
||||||
<div class="introduce"> |
|
||||||
<p class="introduce_title">{{courseName}}</p> |
|
||||||
<ul> |
|
||||||
<li |
|
||||||
v-for="(item,index) in sideList" |
|
||||||
:key="index" |
|
||||||
:class="active === index ? 'activeBack' : ''" |
|
||||||
@click="activeClick(index)" |
|
||||||
> |
|
||||||
<span>0{{index+1}}</span> |
|
||||||
<span style="margin-left:20px">{{item.name}}</span> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
</el-card> |
|
||||||
</el-col> |
|
||||||
<el-col :span="20"> |
|
||||||
<div class="introduce_main" v-if="active == 0"> |
|
||||||
<span>{{courseIntroduction}}</span> |
|
||||||
</div> |
|
||||||
<div class="introduce_main" v-if="active == 1"> |
|
||||||
<span>{{teachingGoal}}</span> |
|
||||||
</div> |
|
||||||
</el-col> |
|
||||||
</el-row> |
|
||||||
|
|
||||||
<el-row :gutter="20" style="margin-right:0px"> |
|
||||||
<el-col :span="24"> |
|
||||||
<el-col :span="24"> |
|
||||||
<el-card shadow="hover" class="mgb20"> |
|
||||||
<div class="flex-between mgb20"> |
|
||||||
<span>课程进度</span> |
|
||||||
<div> |
|
||||||
<el-button @click="toTeachingVideo" type="primary" size="small" round class="mag">开始课程</el-button> |
|
||||||
<el-button type="primary" size="small" round @click="isRelease = true">发布考核</el-button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<div class="div"> |
|
||||||
完成{{completeProject}}个实验项目的教学 |
|
||||||
<div class="div1"></div> |
|
||||||
</div> |
|
||||||
<el-progress text-inside :stroke-width="18" :percentage="projectTotal"></el-progress> |
|
||||||
</div> |
|
||||||
</el-card> |
|
||||||
</el-col> |
|
||||||
|
|
||||||
<el-col :span="24"> |
|
||||||
<el-card shadow="hover" class="mgb20"> |
|
||||||
<div class="flex-between mgb20"> |
|
||||||
<span>实验项目</span> |
|
||||||
<!-- <el-button type="primary" size="small" round>导出</el-button> --> |
|
||||||
</div> |
|
||||||
<el-table :data="customerData" class="table" stripe header-align="center"> |
|
||||||
<el-table-column type="index" width="100" label="次序" align="center"></el-table-column> |
|
||||||
<el-table-column prop="projectName" label="教学名称" align="center"></el-table-column> |
|
||||||
<el-table-column label="启用" align="center"> |
|
||||||
<template slot-scope="scope"> |
|
||||||
<el-switch |
|
||||||
:active-value="0" |
|
||||||
:inactive-value="1" |
|
||||||
v-model="scope.row.isOpenProject" |
|
||||||
@change="changeisExperimentSwitch(scope.row)" |
|
||||||
></el-switch> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="考勤" align="center"> |
|
||||||
<template slot-scope="scope"> |
|
||||||
<el-switch |
|
||||||
:active-value="1" |
|
||||||
:inactive-value="0" |
|
||||||
v-model="scope.row.isAttendance" |
|
||||||
@change="changeisAttendanceSwitch(scope.row)" |
|
||||||
></el-switch> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<!-- <el-table-column label="实验演示" align="center"> |
|
||||||
<template slot-scope="scope"> |
|
||||||
<el-button type="text" @click="toPython(scope.row.projectId)">实验演示</el-button> |
|
||||||
</template> |
|
||||||
</el-table-column> --> |
|
||||||
</el-table> |
|
||||||
<!-- <div class="pagination"> |
|
||||||
<el-pagination |
|
||||||
background |
|
||||||
@current-change="handleCurrentChange" |
|
||||||
layout="prev, pager, next" |
|
||||||
:total="pages" |
|
||||||
></el-pagination> |
|
||||||
</div> --> |
|
||||||
<div class="pagination"> |
|
||||||
<el-pagination background @current-change="currentChange" :current-page="pageNo" layout="total, prev, pager, next" :total="totals"> |
|
||||||
</el-pagination> |
|
||||||
</div> |
|
||||||
</el-card> |
|
||||||
</el-col> |
|
||||||
</el-col> |
|
||||||
|
|
||||||
<!-- 发布考核 --> |
|
||||||
<el-dialog title="发布考核" :visible.sync="isRelease" width="24%" center :close-on-click-modal="false"> |
|
||||||
<div> |
|
||||||
<el-select v-model="assessmentId" clearable placeholder="请选择考核名称" @change="chooeseAss"> |
|
||||||
<el-option v-for="(item,index) in assessmentList" :key="index" :label="item.assesmentName" :value="item.id"></el-option> |
|
||||||
</el-select> |
|
||||||
<div class="addAssessment"> |
|
||||||
<el-button type="text" @click="toRelease">点击前往创建新考核</el-button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<span slot="footer" class="dialog-footer"> |
|
||||||
<el-button @click="isRelease = false">取 消</el-button> |
|
||||||
<el-button type="primary" @click="release">确 定</el-button> |
|
||||||
</span> |
|
||||||
</el-dialog> |
|
||||||
</el-row> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<script> |
|
||||||
export default { |
|
||||||
data() { |
|
||||||
return { |
|
||||||
sideList: [ |
|
||||||
{ |
|
||||||
name: '课程简介' |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: '教学目标' |
|
||||||
} |
|
||||||
], |
|
||||||
active: 0, |
|
||||||
courseName: '', //课程名称 |
|
||||||
courseIntroduction: '', //课程简介 |
|
||||||
teachingGoal: '', //教学目标 |
|
||||||
customerData: [], |
|
||||||
completeProject: 0, |
|
||||||
projectTotal: 0, |
|
||||||
isRelease: false, |
|
||||||
assessmentId: '', |
|
||||||
assessmentList: [], |
|
||||||
timesum: '', |
|
||||||
experimentalClassId: this.$store.state.classId, |
|
||||||
courseId: this.$store.state.courseId, |
|
||||||
pageNo: 1, |
|
||||||
pageSize: 10, |
|
||||||
totals: 1 |
|
||||||
}; |
|
||||||
}, |
|
||||||
components: {}, |
|
||||||
mounted() { |
|
||||||
console.log(this.courseId) |
|
||||||
this.getdata(); |
|
||||||
this.getAssesment() |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
toPython(projectId) { |
|
||||||
this.setCookie('staffId', this.$store.state.staffId); |
|
||||||
this.setCookie('projectId', projectId); |
|
||||||
this.setCookie('courseId', this.courseId); |
|
||||||
window.location.href = 'http://www.occupationlab.com/pythonview/'; |
|
||||||
}, |
|
||||||
toTeachingVideo() { |
|
||||||
this.$router.push('teachingVideo'); |
|
||||||
}, |
|
||||||
activeClick(index) { |
|
||||||
this.active = index; |
|
||||||
}, |
|
||||||
//请求获得课程进度接口 |
|
||||||
async courseSchedule() { |
|
||||||
let schedule = await this.$get(this.api.getCourseSchedule, { |
|
||||||
courseId: this.courseId, |
|
||||||
experimentalClassId: this.experimentalClassId, |
|
||||||
studentId: '' |
|
||||||
}); |
|
||||||
if(schedule.message.number){ |
|
||||||
this.completeProject = schedule.message.number; |
|
||||||
let projectTotal1 = schedule.message.number / schedule.message.total; |
|
||||||
this.projectTotal = projectTotal1.toFixed(2); |
|
||||||
this.projectTotal = this.NumberMul(this.projectTotal,100) |
|
||||||
} |
|
||||||
}, |
|
||||||
getdata() { |
|
||||||
this.$get(this.api.getCourse, { |
|
||||||
courseId: this.courseId |
|
||||||
}).then((res) => { |
|
||||||
//获取课程简介和课程目标 |
|
||||||
this.courseIntroduction = res.message.courseIntroduction; |
|
||||||
this.teachingGoal = res.message.teachingGoal; |
|
||||||
this.courseName = res.message.courseName; |
|
||||||
}).catch((err) => {}); |
|
||||||
|
|
||||||
this.courseSchedule() |
|
||||||
|
|
||||||
this.getProject() |
|
||||||
}, |
|
||||||
getProject(){ |
|
||||||
this.$get(this.api.queryProject, { |
|
||||||
courseId: this.courseId, |
|
||||||
experimentalClassId: this.experimentalClassId, |
|
||||||
pageNo: this.pageNo, |
|
||||||
pageSize: this.pageSize |
|
||||||
}) |
|
||||||
.then(res => { |
|
||||||
this.customerData = res.message.rows |
|
||||||
this.totals = res.message.total |
|
||||||
}) |
|
||||||
.catch(err => { |
|
||||||
console.log(err); |
|
||||||
}); |
|
||||||
}, |
|
||||||
changeisExperimentSwitch(row) { |
|
||||||
//改变是否启用 |
|
||||||
// let flag = ''; |
|
||||||
// if (row.isOpenProject) { |
|
||||||
// flag = 0; |
|
||||||
// } else { |
|
||||||
// flag = 1; |
|
||||||
// } |
|
||||||
this.$post(this.api.updateIsExperiment, { |
|
||||||
courseId: this.courseId, |
|
||||||
experimentalClassId: this.experimentalClassId, |
|
||||||
project: { |
|
||||||
projectId: row.projectId, |
|
||||||
isOpenProject: row.isOpenProject |
|
||||||
} |
|
||||||
}); |
|
||||||
}, |
|
||||||
changeisAttendanceSwitch(row) { |
|
||||||
this.$post(this.api.updateIsAttendance, { |
|
||||||
courseId: this.courseId, |
|
||||||
experimentalClassId: this.experimentalClassId, |
|
||||||
project: { |
|
||||||
projectId: row.projectId, |
|
||||||
isAttendance: row.isAttendance |
|
||||||
} |
|
||||||
}); |
|
||||||
}, |
|
||||||
currentChange(val){ |
|
||||||
this.pageNo = val; |
|
||||||
this.getProject(); |
|
||||||
}, |
|
||||||
getAssesment(){ |
|
||||||
let data = { |
|
||||||
courseId: this.courseId |
|
||||||
} |
|
||||||
this.$get(this.api.releaseAssesment,data).then(res => { |
|
||||||
this.assessmentList = res.message |
|
||||||
}).catch(res => {}); |
|
||||||
}, |
|
||||||
chooeseAss(val){ |
|
||||||
let obj = {}; |
|
||||||
obj = this.assessmentList.find((item)=>{ |
|
||||||
return item.id === val; |
|
||||||
}); |
|
||||||
this.timesum = obj.timesum; |
|
||||||
}, |
|
||||||
release(){ |
|
||||||
let timestamp = Date.parse(new Date()); |
|
||||||
let data = { |
|
||||||
id: this.assessmentId, |
|
||||||
assesmentState: 1, |
|
||||||
releaseType: 0, |
|
||||||
creationTime: timestamp, |
|
||||||
endTime: '', |
|
||||||
timesum: this.timesum |
|
||||||
} |
|
||||||
this.$post(this.api.updateState,data).then(res => { |
|
||||||
this.isRelease = false |
|
||||||
this.$message.success('发布考核成功'); |
|
||||||
}).catch(res => {}); |
|
||||||
}, |
|
||||||
toRelease(){ |
|
||||||
this.$router.push('/addassessment'); |
|
||||||
} |
|
||||||
} |
|
||||||
}; |
|
||||||
</script> |
|
||||||
<style scoped lang="scss"> |
|
||||||
.div { |
|
||||||
width: 250px; |
|
||||||
height: 40px; |
|
||||||
background: rgba(60, 60, 60, 1); |
|
||||||
box-shadow: 0px 3px 9px 0px rgba(146, 120, 255, 0.44); |
|
||||||
border-radius: 12px; |
|
||||||
text-align: center; |
|
||||||
line-height: 40px; |
|
||||||
color: #ffffff; |
|
||||||
margin-bottom: 10px; |
|
||||||
margin-left: 150px; |
|
||||||
.div1 { |
|
||||||
width: 0; |
|
||||||
height: 0; |
|
||||||
border: 5px solid; |
|
||||||
margin-left: 120px; |
|
||||||
border-color: #3c3c3c transparent transparent; |
|
||||||
} |
|
||||||
} |
|
||||||
.el-container { |
|
||||||
background-color: #f0f0f0; |
|
||||||
} |
|
||||||
.mag { |
|
||||||
margin-right: 20px; |
|
||||||
margin-left: 20px; |
|
||||||
} |
|
||||||
.backimg { |
|
||||||
width: 100%; |
|
||||||
height: 430px; |
|
||||||
} |
|
||||||
.introduce_col { |
|
||||||
margin-top: -100px; |
|
||||||
position: relative; |
|
||||||
z-index: 99; |
|
||||||
width: 290px; |
|
||||||
} |
|
||||||
.mgb200 { |
|
||||||
margin-left: 10px; |
|
||||||
height: 400px; |
|
||||||
} |
|
||||||
.introduce { |
|
||||||
font-size: 20px; |
|
||||||
color: #333; |
|
||||||
padding-bottom: 100px; |
|
||||||
|
|
||||||
} |
|
||||||
.introduce_title { |
|
||||||
font-size: 26px; |
|
||||||
margin-top: 20px; |
|
||||||
} |
|
||||||
.introduce ul { |
|
||||||
margin-top: 40px; |
|
||||||
/* width: 300px; */ |
|
||||||
position: absolute; |
|
||||||
z-index: 999; |
|
||||||
} |
|
||||||
.introduce li { |
|
||||||
padding: 25px 10px; |
|
||||||
transition: all 0.5s linear; |
|
||||||
border-radius: 10px; |
|
||||||
margin-bottom: 10px; |
|
||||||
width: 240px; |
|
||||||
display: inline-block; |
|
||||||
} |
|
||||||
.introduce li:hover{ |
|
||||||
cursor:pointer |
|
||||||
} |
|
||||||
.activeBack { |
|
||||||
background-color: #9076ff; |
|
||||||
border-radius: 10px; |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
.introduce_main { |
|
||||||
padding: 30px 30px; |
|
||||||
width: 98%; |
|
||||||
} |
|
||||||
.introduce_main span { |
|
||||||
font-size: 20px; |
|
||||||
color: #333333; |
|
||||||
line-height: 48px; |
|
||||||
} |
|
||||||
.addAssessment{ |
|
||||||
margin-top: 10px; |
|
||||||
text-align: right; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,59 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="main"> |
|
||||||
<!-- <div class="top"> |
|
||||||
<div style="margin-left:30px;cursor:pointer;" @click="back"> |
|
||||||
<i class="el-icon-arrow-left"></i> Back |
|
||||||
</div> |
|
||||||
<div class="title">考核成绩</div> |
|
||||||
</div> --> |
|
||||||
<div class="bottom"> |
|
||||||
<Achievement :studentId="studentId" :projectPermissions="1"></Achievement> |
|
||||||
</div> |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div></div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Achievement from '../../components/common/Studentcommon/Achievement' |
|
||||||
export default { |
|
||||||
data(){ |
|
||||||
return{ |
|
||||||
studentId: this.$store.state.studentId |
|
||||||
} |
|
||||||
}, |
|
||||||
methods:{ |
|
||||||
back(){ |
|
||||||
this.$router.go(-1) |
|
||||||
} |
|
||||||
}, |
|
||||||
components:{ |
|
||||||
Achievement |
|
||||||
} |
|
||||||
}; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
.bottom{ |
|
||||||
margin-top: 10px; |
|
||||||
} |
|
||||||
.top { |
|
||||||
display: flex; |
|
||||||
font-weight: bold; |
|
||||||
height: 60px; |
|
||||||
line-height: 60px; |
|
||||||
.el-icon-arrow-left { |
|
||||||
font-size: 5px; |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
.title { |
|
||||||
margin-left: 30px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.main { |
|
||||||
background: #ffffff; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,59 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="main"> |
|
||||||
<!-- <div class="top"> |
|
||||||
<div style="margin-left:30px;cursor:pointer;" @click="back"> |
|
||||||
<i class="el-icon-arrow-left"></i> Back |
|
||||||
</div> |
|
||||||
<div class="title">练习成绩</div> |
|
||||||
</div> --> |
|
||||||
<div class="bottom"> |
|
||||||
<Achievement :studentId="studentId" :projectPermissions="0"></Achievement> |
|
||||||
</div> |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div></div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Achievement from '../../components/common/Studentcommon/Achievement' |
|
||||||
export default { |
|
||||||
data(){ |
|
||||||
return{ |
|
||||||
studentId: this.$store.state.studentId |
|
||||||
} |
|
||||||
}, |
|
||||||
methods:{ |
|
||||||
back(){ |
|
||||||
this.$router.go(-1) |
|
||||||
} |
|
||||||
}, |
|
||||||
components:{ |
|
||||||
Achievement |
|
||||||
} |
|
||||||
}; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
.bottom{ |
|
||||||
margin-top: 10px; |
|
||||||
} |
|
||||||
.top { |
|
||||||
display: flex; |
|
||||||
font-weight: bold; |
|
||||||
height: 60px; |
|
||||||
line-height: 60px; |
|
||||||
.el-icon-arrow-left { |
|
||||||
font-size: 5px; |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
.title { |
|
||||||
margin-left: 30px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.main { |
|
||||||
background: #ffffff; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,200 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="horizontalVerticalCenter"> |
|
||||||
<!-- 头像部分 --> |
|
||||||
<div class="headerContent"> |
|
||||||
<p class="p">{{studentName}}</p> |
|
||||||
</div> |
|
||||||
|
|
||||||
<!-- 考勤概览 --> |
|
||||||
<div class="cka-Overview"> |
|
||||||
<p style="padding:28px 0;margin-left:28px">考勤概览</p> |
|
||||||
<div class="newPractice-card"> |
|
||||||
<div class="newPractice-card-other"> |
|
||||||
<div class="card-other-score" style> |
|
||||||
<p style="font-size:18px">考勤总数</p> |
|
||||||
<p style="font-size:36px">{{count}}</p> |
|
||||||
</div> |
|
||||||
<div></div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="newPractice-card-other"> |
|
||||||
<div class="card-other-score"> |
|
||||||
<p style="font-size:18px">签到次数</p> |
|
||||||
<p style="font-size:36px">{{signInNumber}}</p> |
|
||||||
</div> |
|
||||||
<div></div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="newPractice-card-other"> |
|
||||||
<div class="card-other-score"> |
|
||||||
<p style="font-size:18px">缺勤次数</p> |
|
||||||
<p style="font-size:36px">{{absence}}</p> |
|
||||||
</div> |
|
||||||
<div></div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="newPractice-card-other"> |
|
||||||
<div class="card-other-score"> |
|
||||||
<p style="font-size:18px">剩余考勤次数</p> |
|
||||||
<p style="font-size:36px">{{getSurplus}}</p> |
|
||||||
</div> |
|
||||||
<div></div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<!-- 考勤明细 --> |
|
||||||
<div style="margin-top:40px;margin-bottom:50px;width:98%"> |
|
||||||
<registration :studentId="this.$store.state.studentId" :courseId="this.$store.state.courseId"></registration> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Headportrait from '../common/Studentcommon/Headportrait.vue'; |
|
||||||
import registration from '../common/Studentcommon/registration.vue'; |
|
||||||
export default { |
|
||||||
data() { |
|
||||||
return { |
|
||||||
studentName: '远方', |
|
||||||
count: '', |
|
||||||
signInNumber: '', |
|
||||||
absence: '' |
|
||||||
}; |
|
||||||
}, |
|
||||||
mounted() { |
|
||||||
// this.getData(); |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
changeCourseId() { |
|
||||||
return this.$store.state.courseId; |
|
||||||
}, |
|
||||||
getSurplus() { |
|
||||||
return this.count - this.signInNumber - this.absence; |
|
||||||
} |
|
||||||
}, |
|
||||||
watch: { |
|
||||||
changeCourseId() { |
|
||||||
this.getData(); |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
getData() { |
|
||||||
this.$get(this.api.queryAttendanceSignIn, { studentId: this.$store.state.studentId, courseId: this.$store.state.courseId }) |
|
||||||
.then(res => { |
|
||||||
this.studentName = res.message.studentName; |
|
||||||
this.count = res.message.count; |
|
||||||
this.signInNumber = res.message.signInNumber; |
|
||||||
this.absence = res.message.absence; |
|
||||||
}) |
|
||||||
.catch(err => { |
|
||||||
console.log(err); |
|
||||||
}); |
|
||||||
} |
|
||||||
}, |
|
||||||
components: { |
|
||||||
Headportrait, |
|
||||||
registration |
|
||||||
} |
|
||||||
}; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
.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; |
|
||||||
} |
|
||||||
} |
|
||||||
.cka-Overview { |
|
||||||
margin-top: 20px; |
|
||||||
width: 98%; |
|
||||||
height: 229px; |
|
||||||
background: rgba(255, 255, 255, 1); |
|
||||||
box-shadow: 0px 0px 21px 0px rgba(48, 115, 248, 0.1); |
|
||||||
border-radius: 10px; |
|
||||||
p { |
|
||||||
margin-left: 25px; |
|
||||||
font-size: 20px; |
|
||||||
} |
|
||||||
.newPractice-card { |
|
||||||
width: 97%; |
|
||||||
margin: 0 auto; |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
.newPractice-card-other:nth-child(1) { |
|
||||||
background: url('../../assets/img/student1.png'); |
|
||||||
box-shadow: 0px 25px 20px -22px #ec92e0; |
|
||||||
} |
|
||||||
.newPractice-card-other:nth-child(2) { |
|
||||||
background: url('../../assets/img/student2.png'); |
|
||||||
box-shadow: 0px 25px 20px -22px #60b8f6; |
|
||||||
} |
|
||||||
.newPractice-card-other:nth-child(3) { |
|
||||||
background: url('../../assets/img/student3.png'); |
|
||||||
box-shadow: 0px 25px 20px -22px #fe787a; |
|
||||||
} |
|
||||||
.newPractice-card-other:nth-child(4) { |
|
||||||
background: url('../../assets/img/student4.png'); |
|
||||||
box-shadow: 0px 25px 20px -22px #fbbb6e; |
|
||||||
} |
|
||||||
|
|
||||||
.newPractice-card-other { |
|
||||||
width: 400px; |
|
||||||
height: 120px; |
|
||||||
box-shadow: 0px 3px 18px 0px rgba(84, 84, 84, 0.09); |
|
||||||
border-radius: 8px; |
|
||||||
.card-other-score { |
|
||||||
margin-left: 25px; |
|
||||||
margin-top: 18px; |
|
||||||
height: 88px; |
|
||||||
position: relative; |
|
||||||
p { |
|
||||||
font-size: 18px; |
|
||||||
color: #ffffff; |
|
||||||
} |
|
||||||
p:last-child { |
|
||||||
position: absolute; |
|
||||||
bottom: 0px; |
|
||||||
color: #ffffff; |
|
||||||
font-size: 26px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.CKA-overview { |
|
||||||
width: 1450px; |
|
||||||
height: 200px; |
|
||||||
background: rgba(255, 255, 255, 1); |
|
||||||
box-shadow: 0px 0px 21px 0px rgba(48, 115, 248, 0.1); |
|
||||||
border-radius: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
.CheckWorkAttendance-head { |
|
||||||
margin-top: 20px; |
|
||||||
width: 95%; |
|
||||||
display: flex; |
|
||||||
margin-bottom: 20px; |
|
||||||
p { |
|
||||||
margin-left: 20px; |
|
||||||
color: #328aff; |
|
||||||
font-size: 20px; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
Loading…
Reference in new issue