master
parent
356f120dcd
commit
68af41a4b7
27 changed files with 962 additions and 754 deletions
@ -1,264 +0,0 @@ |
||||
<template> |
||||
<div> |
||||
<el-form :disabled="isDetail"> |
||||
<el-card shadow="hover" class="m-b-20"> |
||||
<div class="flex j-between"> |
||||
<div class="per_title" v-throttle @click="goback()"> |
||||
<i class="el-icon-arrow-left"></i> |
||||
<span class="per_back">返回</span> |
||||
<span class="per_school">{{isDetail ? '查看' : (id ? '更新' : '创建')}}考核</span> |
||||
</div> |
||||
<div> |
||||
<el-button type="primary" size="small" round v-throttle @click="save" v-show="!isDetail">{{id ? '更新' : '创建'}}</el-button> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
|
||||
<el-card shadow="hover" class="m-b-20"> |
||||
<div> |
||||
<p class="m-b-20">考核名称</p> |
||||
<el-input |
||||
placeholder="请输入考核名称" |
||||
v-model="assessmentName" |
||||
clearable |
||||
maxlength="25" |
||||
class="inline_input" |
||||
></el-input> |
||||
</div> |
||||
</el-card> |
||||
|
||||
<el-card shadow="hover" class="m-b-20"> |
||||
<div> |
||||
<p class="m-b-20">考核类型</p> |
||||
<div class="inline_input"> |
||||
<el-select v-model="classificationId" placeholder="请选择考核类型"> |
||||
<el-option |
||||
v-for="item in classificationList" |
||||
:key="item.id" |
||||
:label="item.name" |
||||
:value="item.id"> |
||||
</el-option> |
||||
</el-select> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
|
||||
<el-card shadow="hover" class="m-b-20"> |
||||
<div> |
||||
<p class="m-b-20">考核时间</p> |
||||
<el-date-picker |
||||
size="small" |
||||
v-model="date" |
||||
value-format="yyyy-MM-dd HH:mm:ss" |
||||
type="datetimerange" |
||||
range-separator="-" |
||||
start-placeholder="开始日期" |
||||
end-placeholder="结束日期" |
||||
:picker-options="pickerOptions" |
||||
></el-date-picker> |
||||
</div> |
||||
</el-card> |
||||
|
||||
<el-card shadow="hover" class="m-b-20"> |
||||
<div> |
||||
<p class="m-b-20">试卷选择</p> |
||||
<div class="inline_input"> |
||||
<el-button type="primary" @click="openSelect">试卷选择</el-button> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
|
||||
<el-card shadow="hover" class="m-b-20"> |
||||
<div> |
||||
<p class="m-b-20">发布班级</p> |
||||
<div class="inline_input"> |
||||
<div class="per-wrap"> |
||||
<el-tree |
||||
ref="per" |
||||
:data="permissions" |
||||
show-checkbox |
||||
node-key="id" |
||||
:default-expanded-keys="checkedIds" |
||||
:default-checked-keys="checkedIds" |
||||
:props="defaultProps"> |
||||
</el-tree> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
</el-form> |
||||
|
||||
<el-dialog title="试卷选择" :visible.sync="selectVisible" width="40%" @close="closeSelect" :close-on-click-modal="false"> |
||||
<div class="flex-justify-end"> |
||||
<el-form label-width="80px" inline> |
||||
<el-form-item class="no-mb" label="所属考核"> |
||||
<el-select v-model="publishStatus" 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 class="no-mb"> |
||||
<el-input |
||||
placeholder="请输入试卷名称" |
||||
prefix-icon="el-icon-search" |
||||
v-model="keyword" |
||||
clearable |
||||
></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
|
||||
<el-table |
||||
:data="listData" |
||||
ref="table" |
||||
row-key="id" |
||||
class="table" |
||||
stripe |
||||
header-align="center" |
||||
@selection-change="handleSelectionChange" |
||||
> |
||||
<el-table-column width="60" label="选择" align="center"> |
||||
<template slot-scope="scope"> |
||||
<el-radio v-model="projectId" :label="scope.row.projectId"> </el-radio> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column type="index" width="100" label="序号" align="center"> |
||||
<template |
||||
slot-scope="scope" |
||||
>{{scope.$index + (page - 1) * pageSize + 1}}</template> |
||||
</el-table-column> |
||||
<el-table-column prop="name" label="试卷名称" align="center"></el-table-column> |
||||
<el-table-column label="操作" align="center"> |
||||
<template slot-scope="scope"> |
||||
<el-button type="text" @click="showQues(scope.row)">预览</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination |
||||
background |
||||
@current-change="handleCurrentChange" |
||||
:current-page="page" |
||||
:page-size="pageSize" |
||||
layout="total,prev, pager, next" |
||||
:total="total" |
||||
></el-pagination> |
||||
</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 { mapState } from 'vuex' |
||||
export default { |
||||
data() { |
||||
return { |
||||
id: '', |
||||
assessmentName: '', |
||||
classId: '', |
||||
date: [], |
||||
startTime: '', |
||||
endTime: '', |
||||
state: '', |
||||
testPaperId: '', |
||||
type: '', |
||||
page: 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
isDetail: Boolean(this.$route.query.show), |
||||
selectVisible: false |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapState('user', [ |
||||
'userId','clientId' |
||||
]) |
||||
}, |
||||
watch: { |
||||
date: function(val){ |
||||
if(val){ |
||||
this.startTime = val[0] |
||||
this.endTime = val[1] |
||||
}else{ |
||||
this.startTime = '' |
||||
this.endTime = '' |
||||
} |
||||
this.getData() |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.id = this.$route.query.id |
||||
this.id && this.getData() |
||||
}, |
||||
methods: { |
||||
save() { |
||||
if(this.assessmentName === '') return this.$message.warning('请填写考核名称') |
||||
if(this.type === '') return this.$message.warning('请选择考核类型') |
||||
if(this.startTime === '') return this.$message.warning('请选择考核时间') |
||||
if(this.testPaperId === '') return this.$message.warning('请选择试卷') |
||||
|
||||
let data = { |
||||
id: this.id, |
||||
userId: this.userId, |
||||
assessmentName: this.assessmentName, |
||||
type: this.type, |
||||
startTime: this.startTime, |
||||
endTime: this.endTime, |
||||
} |
||||
if(this.id){ |
||||
this.$put(this.api.editCourse, data).then(res => { |
||||
this.$message.success('修改成功'); |
||||
this.$router.back() |
||||
}) |
||||
.catch(err => { |
||||
}); |
||||
}else{ |
||||
this.$post(this.api.addCourse, data).then(res => { |
||||
this.$message.success('创建成功'); |
||||
this.$router.back() |
||||
}) |
||||
.catch(err => { |
||||
}); |
||||
} |
||||
}, |
||||
getData() { |
||||
this.$get(`${this.api.getCourse}/${this.id}`) |
||||
.then(res => { |
||||
|
||||
}) |
||||
.catch(err => { |
||||
|
||||
}); |
||||
}, |
||||
goback() { |
||||
if(this.isDetail){ |
||||
this.$router.back() |
||||
}else{ |
||||
this.$confirm('确定返回？未更新的信息将不会保存。', '提示', { |
||||
type: 'warning' |
||||
}) |
||||
.then(() => { |
||||
this.$router.back() |
||||
}) |
||||
.catch(() => {}); |
||||
} |
||||
}, |
||||
openSelect(){ |
||||
this.selectVisible = true |
||||
} |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.inline_input { |
||||
width: 300px; |
||||
} |
||||
.per-wrap{ |
||||
max-height: 400px; |
||||
overflow: auto; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,139 @@ |
||||
<template> |
||||
<div> |
||||
<div> |
||||
<lctree :data="majorList" @fircheckitem="fircheckitem" @twocheckitem="twocheckitem" @threecheckitem="threecheckitem" @fourcheckitem="fourcheckitem"></lctree> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import lctree from './studentTree' |
||||
import { mapState } from 'vuex' |
||||
export default { |
||||
props:["Data",'classId','studentId'], |
||||
data() { |
||||
return { |
||||
majorList: [], |
||||
firactive: 0, |
||||
twoactive: 0, |
||||
threeactive: 0, |
||||
isaddClassMajor: false, |
||||
isAddDepartment: false, |
||||
isAddClass: false, |
||||
Form: { |
||||
classmajorId: '', |
||||
classmajorName: '', |
||||
}, |
||||
Form2: { |
||||
departmentId: '', |
||||
departmentName: '', |
||||
}, |
||||
Form3: { |
||||
classId: '', |
||||
className: '' |
||||
}, |
||||
majorNoAdd: true, |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapState('user', [ |
||||
'userId','clientId' |
||||
]) |
||||
}, |
||||
components: { |
||||
lctree |
||||
}, |
||||
mounted(){ |
||||
this.getStaff() |
||||
}, |
||||
methods: { |
||||
getStaff(){ |
||||
let data = { |
||||
schoolId: this.clientId |
||||
} |
||||
let classId = this.classId ? this.classId.split(',') : [] |
||||
let studentId = this.studentId |
||||
this.$get(this.api.queryStudentProfessionalArchitecture,data).then(res => { |
||||
let StaffProfessionalArchitectureList = res.data.StaffProfessionalArchitectureList |
||||
StaffProfessionalArchitectureList.map(n => { |
||||
(n.ifVisible = false), (n.ischeck = false), (n.label = n.stuProfessionalArchitectureName); |
||||
let data = { |
||||
stuProfessionalArchitectureId: n.stuProfessionalArchitectureId |
||||
} |
||||
this.$get(this.api.queryGrade,data).then(res => { |
||||
n.children = res.data.Grade |
||||
n.children.map(j => { |
||||
(j.ifVisible = false), (j.ischeck = false), (j.label = j.gradeName); |
||||
let data = { |
||||
gradeId: j.gradeId |
||||
} |
||||
this.$get(this.api.queryClass,data).then(res => { |
||||
res.data.Class.map(e => { |
||||
(e.ifVisible = false), (e.ischeck = false), (e.label = e.className) |
||||
let data = { |
||||
searchContent: '', |
||||
professionalIds: n.stuProfessionalArchitectureId, |
||||
gradeIds: j.gradeId, |
||||
classIds: e.classId, |
||||
schoolId: this.clientId |
||||
} |
||||
this.$get(`${this.api.queryStudent}/1/200`,data).then(res => { |
||||
res.data.studentList.map(s => { |
||||
(s.ifVisible = false), (s.ischeck = false), (s.label = s.studentName) |
||||
if(studentId.includes(s.userId)){ |
||||
s.ischeck = true |
||||
e.ifVisible = true |
||||
j.ifVisible = true |
||||
n.ifVisible = true |
||||
} |
||||
}) |
||||
e.children = res.data.studentList |
||||
}).catch(res => {}) |
||||
|
||||
if(classId.includes(String(e.classId))){ |
||||
e.ischeck = true |
||||
j.ifVisible = true |
||||
n.ifVisible = true |
||||
} |
||||
}) |
||||
j.children = res.data.Class |
||||
if(j.children.every(i => i.ischeck)){ |
||||
j.ischeck = true |
||||
} |
||||
if(n.children.every(i => i.ischeck)){ |
||||
n.ischeck = true |
||||
} |
||||
}).catch(res => {}); |
||||
}) |
||||
}).catch(res => {}); |
||||
}) |
||||
setTimeout(() => { |
||||
this.majorList = StaffProfessionalArchitectureList |
||||
this.majorList[0].ifVisible = true |
||||
}, 500); |
||||
}).catch(res => {}); |
||||
}, |
||||
// 选择专业 |
||||
fircheckitem(item){ |
||||
this.$emit("fircheck",item,this.majorList) |
||||
}, |
||||
// 选择年级 |
||||
twocheckitem(item){ |
||||
this.$emit("twocheck",item,this.majorList) |
||||
}, |
||||
threeClick(index){ |
||||
this.threeactive = index |
||||
}, |
||||
// 选择班级 |
||||
threecheckitem(three){ |
||||
this.$emit("threecheck",three,this.majorList) |
||||
}, |
||||
// 选择学生 |
||||
fourcheckitem(four){ |
||||
this.$emit("fourcheck",four,this.majorList) |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,154 @@ |
||||
<template> |
||||
<div class="side_view"> |
||||
<div class="side_tree" @click.stop="open(item)" v-for="(item,index) in data" :key="index"> |
||||
<div class="item" @click.stop="open(item)"> |
||||
<img |
||||
v-if="item.children&&item.children.length!=0" |
||||
:class="{ 'arrowTransform': !item.ifVisible, 'arrowTransformReturn': item.ifVisible}" |
||||
src="../../../assets/img/icon-xiangyou.png" |
||||
alt |
||||
/> |
||||
<i v-else class="empty"></i> |
||||
<i :class="item.ischeck ? 'icon-yigouxuan' : 'icon-weigouxuan'" @click.stop="fircheckitem(item)"></i> |
||||
<span>{{item.label}}</span> |
||||
</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 |
||||
v-if="item1.children&&item1.children.length!=0" |
||||
:class="{ 'arrowTransform': !item1.ifVisible, 'arrowTransformReturn': item1.ifVisible}" |
||||
src="../../../assets/img/icon-xiangyou.png" |
||||
alt |
||||
/> |
||||
<i v-else class="empty"></i> |
||||
<i :class="item1.ischeck ? 'icon-yigouxuan' : 'icon-weigouxuan'" @click.stop="twocheckitem(item1)"></i> |
||||
<span>{{item1.label}}年级</span> |
||||
</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)"> |
||||
<img |
||||
v-if="item2.children&&item2.children.length!=0" |
||||
:class="{ 'arrowTransform': !item2.ifVisible, 'arrowTransformReturn': item2.ifVisible}" |
||||
src="../../../assets/img/icon-xiangyou.png" |
||||
alt |
||||
/> |
||||
<i v-else class="empty"></i> |
||||
<i :class="item2.ischeck ? 'icon-yigouxuan' : 'icon-weigouxuan'" @click.stop="threecheckitem(item2)"></i> |
||||
<span>{{item2.label}}班</span> |
||||
</div> |
||||
|
||||
<div v-show="item2.ifVisible" v-if="item2.children&&item2.children.length!=0"> |
||||
<div v-for="(item3,index3) in item2.children" :key="index3"> |
||||
<div class="item3" @click.stop="open(item3)"> |
||||
<i :class="item3.ischeck ? 'icon-yigouxuan' : 'icon-weigouxuan'" @click.stop="fourcheckitem(item3)"></i> |
||||
<span>{{item3.label}}</span> |
||||
</div> |
||||
</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){ |
||||
console.log(22,item) |
||||
this.$emit('twocheckitem',item); |
||||
}, |
||||
threecheckitem(item){ |
||||
this.$emit('threecheckitem',item); |
||||
}, |
||||
fourcheckitem(item){ |
||||
this.$emit('fourcheckitem',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> |
||||
@import '../../../styles/pages/tree.scss'; |
||||
|
||||
.side_view{ |
||||
max-height: 300px; |
||||
overflow: auto;; |
||||
padding: 10px 20px; |
||||
i { |
||||
color: #cb221c; |
||||
} |
||||
} |
||||
.item{ |
||||
padding: 5px 0; |
||||
margin-top: 10px; |
||||
} |
||||
.item2 { |
||||
margin-left:43px |
||||
} |
||||
.item1,.item2,.item3{ |
||||
padding: 0; |
||||
margin-top: 0; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,104 @@ |
||||
$insideColor: rgba(245, 242, 255, 0.8); //内部节点的边框颜色 |
||||
$outColor: rgba(255, 255, 255, 0.8); //外部节点的边框颜色 |
||||
//混合代码,提取item共同样式 |
||||
@mixin public { |
||||
cursor: pointer; |
||||
font-size: 14px; |
||||
color: #333333; |
||||
display: flex; |
||||
align-items: center; |
||||
img { |
||||
height: 20px; |
||||
width: 20px; |
||||
margin-left: 10px; |
||||
} |
||||
} |
||||
|
||||
.side_tree{ |
||||
width: 100%; |
||||
font-size: 14px; |
||||
color: #333; |
||||
i{ |
||||
margin-left: 5px; |
||||
font-size: 17px; |
||||
} |
||||
span{ |
||||
margin-left: 5px; |
||||
font-size: 14px; |
||||
} |
||||
} |
||||
.item { |
||||
@include public; |
||||
width: 100%; |
||||
padding: 15px 0; |
||||
background:rgba(255,255,255,1); |
||||
box-shadow:1px 14px 29px 0px rgba(255,69,69,0.19); |
||||
border-radius:10px; |
||||
text-align: left; |
||||
margin-top: 20px; |
||||
} |
||||
.empty{ |
||||
width: 25px; |
||||
} |
||||
.item:first{ |
||||
margin-top: 0; |
||||
} |
||||
.item1 { |
||||
@include public; |
||||
margin-top: 20px; |
||||
margin-left: 23px; |
||||
} |
||||
.item2 { |
||||
@include public; |
||||
margin-top: 20px; |
||||
margin-left:80px |
||||
} |
||||
.item3 { |
||||
@include public; |
||||
margin-top: 20px; |
||||
margin-left:95px |
||||
} |
||||
.item2:hover{ |
||||
color: #cb221c; |
||||
} |
||||
.edit{ |
||||
display: inline-block; |
||||
width: 17px; |
||||
height: 17px; |
||||
background: url(../../../assets/svg/edit.svg) 0 0/cover no-repeat; |
||||
} |
||||
// 使三角形旋转动画 |
||||
.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_icon{ |
||||
text-align: right; |
||||
} |
||||
.side_icon i{ |
||||
cursor:pointer; |
||||
font-size: 20px; |
||||
} |
||||
Loading…
Reference in new issue