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