You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
579 lines
24 KiB
579 lines
24 KiB
<template> |
|
<div> |
|
<el-form :disabled="isDetail"> |
|
<el-card shadow="hover" class="m-b-20"> |
|
<div class="flex-between"> |
|
<el-page-header @back="goBack" :content="isDetail ? '查看' : (form.id ? '更新' : '创建') + '教学实验'"></el-page-header> |
|
<div> |
|
<el-button type="primary" size="small" @click="upload" v-show="!isDetail">{{ form.id ? "更新" : "创建" }}</el-button> |
|
</div> |
|
</div> |
|
</el-card> |
|
|
|
<el-card shadow="hover" class="mgr20 m-b-20"> |
|
<div> |
|
<p class="m-b-20">考核名称</p> |
|
<el-input |
|
placeholder="请输入考核名称" |
|
v-model.trim="form.experimentalName" |
|
clearable |
|
maxlength="15" |
|
class="inline-input" |
|
></el-input> |
|
</div> |
|
</el-card> |
|
|
|
|
|
<el-card shadow="hover" class="m-b-20"> |
|
<div> |
|
<p class="m-b-20">发布方式</p> |
|
<el-radio-group v-model="form.type" :disabled="form.id ? true : false"> |
|
<el-radio :label="1">手动发布</el-radio> |
|
<el-radio :label="2">定时发布</el-radio> |
|
</el-radio-group> |
|
</div> |
|
</el-card> |
|
<!-- 根据发布方式判断时间的显示 --> |
|
<el-card shadow="hover" class="m-b-20"> |
|
<div> |
|
<p class="m-b-20">实验时间</p> |
|
<!-- 手动发布显示 --> |
|
<div class="date-inputs" v-if="form.type==1"> |
|
实验时长： |
|
<el-input size="small" v-model.trim="duration.day" placeholder></el-input> |
|
天 |
|
<el-input size="small" v-model.trim="duration.hour" placeholder></el-input> |
|
小时 |
|
<el-input size="small" v-model.trim="duration.minute" placeholder></el-input> |
|
分 |
|
</div> |
|
|
|
<!-- 定时发布显示 --> |
|
<div v-if="form.type==2" class="addAssess"> |
|
<span class="mgr10">开始时间:</span> |
|
<el-date-picker |
|
size="small" |
|
v-model="date" |
|
type="datetimerange" |
|
range-separator="-" |
|
start-placeholder="开始日期" |
|
end-placeholder="结束日期" |
|
:picker-options="pickerOptions" |
|
></el-date-picker> |
|
</div> |
|
</div> |
|
</el-card> |
|
|
|
<el-card shadow="hover" class="mgr20 m-b-20"> |
|
<div> |
|
<p class="m-b-20">课程</p> |
|
<div class="inline-input"> |
|
<el-select v-model="form.curriculumId" @change="initData"> |
|
<el-option |
|
v-for="item in curriculumList" |
|
:key="item.cid" |
|
:label="item.curriculumName" |
|
:value="item.cid" |
|
></el-option> |
|
</el-select> |
|
</div> |
|
</div> |
|
</el-card> |
|
|
|
<!-- 实训项目模块 --> |
|
<el-card shadow="hover" class="m-b-20"> |
|
<div class="flex-between m-b-20"> |
|
<span>实训项目</span> |
|
<div style="display: inline-flex;"> |
|
<div> |
|
<el-input size="small" placeholder="请输入项目名称" prefix-icon="el-icon-search" v-model.trim="keyword" clearable></el-input> |
|
</div> |
|
<el-button style="margin-left: 5px" type="primary" size="small" round @click="toProject">自定义实验项目</el-button> |
|
</div> |
|
</div> |
|
<!-- 实训项目表格 --> |
|
<el-table :data="projectData" class="table" stripe header-align="center"> |
|
<!-- 单选实训项目ID --> |
|
<el-table-column width="60" label="选择" align="center"> |
|
<template slot-scope="scope"> |
|
<el-radio v-model="form.projectId" :label="scope.row.projectId"> </el-radio> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="projectName" label="项目名称" align="center"></el-table-column> |
|
<el-table-column prop="auth" label="项目权限" align="center"> |
|
<template slot-scope="scope"> |
|
{{ permissionsKeys[scope.row.projectPermissions] }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="createUser" label="创建人" align="center"></el-table-column> |
|
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column> |
|
<el-table-column label="操作" align="center"> |
|
<template slot-scope="scope"> |
|
<el-button type="text" @click="showProject(scope.row)">查看</el-button> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<div class="pagination"> |
|
<el-pagination |
|
background |
|
:page-size="pageSize" |
|
@current-change="handleCurrentChange" |
|
layout="total,prev, pager, next" |
|
:total="total" |
|
></el-pagination> |
|
</div> |
|
</el-card> |
|
|
|
<el-card shadow="hover" class="mgr20 m-b-20"> |
|
<div> |
|
<p class="m-b-20">考核发布</p> |
|
<el-radio-group v-model="form.isSpecify"> |
|
<el-radio :label="1">指定范围</el-radio> |
|
<el-radio :label="0">无指定范围</el-radio> |
|
</el-radio-group> |
|
|
|
</div> |
|
<div v-show="form.isSpecify === 1" style="padding-top: 24px;"> |
|
<p class="m-b-20">班级名称</p> |
|
<el-input |
|
placeholder="请输入班级名称" |
|
v-model.trim="filterClassName" |
|
class="inline-input m-b-20" |
|
clearable |
|
></el-input> |
|
|
|
<div v-show="tagList.length" class="m-b-20"> |
|
<el-tag |
|
v-for="(tag, index) in tagList" |
|
:key="index" |
|
closable |
|
@close="handleCloseTag(tag)" |
|
style="margin-right: 10px" |
|
> |
|
{{ tag.organizationName }} |
|
</el-tag> |
|
</div> |
|
|
|
<div class="tree-con"> |
|
<el-tree |
|
ref="tree" |
|
node-key="nodeKey" |
|
show-checkbox |
|
highlight-current |
|
default-expand-all |
|
lazy |
|
:load="loadTree" |
|
:default-checked-keys="defaultCheckedKeys" |
|
:props="{children: 'children', label: 'organizationName'}" |
|
:filter-node-method="filterNode" |
|
@check="handleCheck" |
|
> |
|
</el-tree> |
|
</div> |
|
</div> |
|
</el-card> |
|
|
|
<!-- 邀请码 --> |
|
<el-card v-if="form.isSpecify === 0" shadow="hover" class="m-b-20"> |
|
<div style="margin-bottom: 10px"> |
|
<p class="m-b-20">设置邀请码</p> |
|
<el-radio-group v-model="form.isEnableCode"> |
|
<el-radio :label="0">是</el-radio> |
|
<el-radio :label="1">否</el-radio> |
|
</el-radio-group> |
|
</div> |
|
<div v-if="form.isEnableCode === 0"> |
|
<el-input style="display: inline-block;width: auto;margin-right: 10px" type="number" v-model.trim="form.invitationCode" maxlength="6" placeholder="请设置6个数字"></el-input> |
|
<el-button type="text" @click="createInv">随机</el-button> |
|
</div> |
|
</el-card> |
|
</el-form> |
|
</div> |
|
</template> |
|
<script> |
|
import Setting from "@/setting"; |
|
import util from "@/libs/util"; |
|
import { mapState, mapActions } from "vuex"; |
|
|
|
export default { |
|
data() { |
|
return { |
|
permissionsKeys: { |
|
0: "练习", |
|
1: "考核", |
|
2: "竞赛" |
|
}, |
|
isDetail: Boolean(this.$route.query.show), |
|
form: { |
|
id: this.$route.query.id ? this.$route.query.id : "", |
|
experimentalName: "", |
|
type: 1, // 发布类型(1、手动发布 2、定时发布) |
|
experimentDuration: "0d0h0m", |
|
curriculumId: "", |
|
projectId: "", |
|
isSpecify: 1, // 考核发布(1、指定范围 2、无指定范围) |
|
isEnableCode: 0, //是否设置邀请码 |
|
invitationCode: "", |
|
status: 0, // 状态(0、待开始 1、进行中 2、已结束) |
|
classId: "", |
|
stuInfo: [] |
|
}, |
|
date: "", // 实验时间 |
|
duration: { |
|
day: "", |
|
hour: "", |
|
minute: "" |
|
}, // 实验时长 |
|
startTime: "0000-00-00 00:00:00", //开始时间 |
|
stopTime: "0000-00-00 00:00:00", //结束时间 |
|
expNameRepeat: false, // 考核名称是否重复 |
|
|
|
curriculumList: [], // 课程列表 |
|
|
|
filterClassName: "", // 班级名称搜索 |
|
tagList: [], // 班级名称标签 |
|
defaultCheckedKeys: [], // 默认选中 |
|
allCheckedNodes: [], // 当前选中和半选节点 |
|
|
|
keyword: "", // 项目名称搜索 |
|
searchTimer: null, |
|
|
|
surplusTime: "", |
|
|
|
projectDataAll: [], |
|
projectData: [], |
|
pickerOptions: { |
|
disabledDate: time => { |
|
return time.getTime() < new Date().getTime() - 86400000; |
|
} |
|
}, |
|
page: 1, |
|
pageSize: 5, |
|
total: 0, |
|
isToProject: false |
|
}; |
|
}, |
|
computed: { |
|
...mapState("project", [ |
|
"assFields" |
|
]) |
|
}, |
|
mounted() { |
|
// console.log(22,this.assFields) |
|
this.date = [util.formatDate("yyyy-MM-dd hh:mm:ss", new Date(new Date().getTime() + 300000)), util.formatDate("yyyy-MM-dd hh:mm:ss", new Date(new Date().getTime() + 300000))]; |
|
this.form.id && this.getData(); |
|
this.getschoolCourse(); |
|
this.recoveryData(); |
|
}, |
|
beforeDestroy() { |
|
if (!this.isToProject) this.setAss({}); |
|
}, |
|
watch: { |
|
date: function(val) { |
|
if (val[0] != "0000-00-00 00:00:00") { |
|
this.startTime = util.formatDate("yyyy-MM-dd hh:mm:ss", new Date(val[0])); |
|
this.stopTime = util.formatDate("yyyy-MM-dd hh:mm:ss", new Date(val[1])); |
|
} |
|
}, |
|
duration: { |
|
handler(n, o) { |
|
this.form.experimentDuration = `${n.day ? n.day : 0}d${n.hour ? n.hour : 0}h${n.minute ? n.minute : 0}m`; |
|
}, |
|
deep: true |
|
}, |
|
keyword: function(val) { |
|
clearTimeout(this.searchTimer); |
|
this.searchTimer = setTimeout(() => { |
|
this.initData(); |
|
}, 500); |
|
}, |
|
filterClassName(val) { |
|
this.$refs.tree.filter(val); |
|
} |
|
}, |
|
methods: { |
|
...mapActions("project", [ |
|
"setAss" |
|
]), |
|
handleCloseTag(tag) { // 关闭班级标签 |
|
this.allCheckedNodes = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes()); |
|
|
|
let tagIndex = this.tagList.findIndex(i => i.id === tag.id); |
|
this.tagList.splice(tagIndex, 1); |
|
// 设置选中 |
|
let setKeys = []; |
|
this.allCheckedNodes.forEach(i => { |
|
if (i.level === 4 && i.parentId !== tag.id) setKeys.push(i.nodeKey); |
|
}); |
|
this.$refs.tree.setCheckedKeys(setKeys); |
|
this.allCheckedNodes = this.allCheckedNodes.filter(i => (i.level === 3 && i.id !== tag.id) || (i.level === 4 && i.parentId !== tag.id)); |
|
}, |
|
handleCheck(data, checked) { // 当复选框被点击的时候触发 |
|
console.log(checked); |
|
|
|
// 全选和半选状态下的班级都显示在标签 |
|
let checkedClass = checked.checkedNodes.filter(i => i.level === 3); |
|
let halfCheckedClass = checked.halfCheckedNodes.filter(i => i.level === 3); |
|
this.tagList = [...checkedClass, ...halfCheckedClass].map(i => { |
|
return { id: i.id, organizationName: i.organizationName }; |
|
}); |
|
|
|
// 缓存全选和半选状态下的所有节点 |
|
this.allCheckedNodes = [...checked.checkedNodes, ...checked.halfCheckedNodes]; |
|
|
|
}, |
|
filterNode(value, data) { // 对树节点进行过滤 |
|
if (!value) return true; |
|
return data.organizationName.indexOf(value) !== -1; |
|
}, |
|
loadTree(node, resolve) { // 懒加载所在班级树结构 |
|
let level = 1; |
|
let parentId = ""; |
|
if (node.level === 0) { |
|
this.treeNode = node; |
|
this.treeResolve = resolve; |
|
this.getTreeData(resolve, level, parentId); |
|
} else if (node.level > 3) { |
|
return resolve([]); |
|
} else { |
|
if (node.data && node.data.level && node.data.id) { |
|
this.getTreeData(resolve, node.data.level + 1, node.data.id); |
|
} |
|
} |
|
}, |
|
async getTreeData(resolve, level, parentId) { // 获取组织架构树数据 |
|
let { status, treeList } = await this.$post(`${this.api.stuOrganizationTree}?level=${level}&parentId=${parentId}`); |
|
if (status === 200 && treeList.length) { |
|
let result = []; |
|
treeList.forEach(i => { |
|
if (i.level === 4) { |
|
i.nodeKey = `${i.parentId}-${i.id}`; |
|
i.isLeaf = "leaf"; |
|
} else { |
|
i.nodeKey = `${i.id}-${new Date().getTime()}`; |
|
} |
|
result.push(i); |
|
}); |
|
this.$nextTick(() => { |
|
// 编辑时，设置默认勾选 |
|
if (this.form.stuInfo && this.form.stuInfo.length) { |
|
let keys = this.form.stuInfo.map(i => { |
|
return `${i.classId}-${i.stuAccountId}`; |
|
}); |
|
this.defaultCheckedKeys = keys; |
|
} |
|
// 获取树结构选中和半选中状态下的数据 |
|
let nodes = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes()); |
|
this.allCheckedNodes = nodes; |
|
this.tagList = nodes.filter(i => i.level === 3); |
|
}); |
|
|
|
return resolve(result); |
|
} else { |
|
return resolve([]); |
|
} |
|
}, |
|
getschoolCourse() { // 获取课程 |
|
this.$get(this.api.schoolCourse).then(res => { |
|
this.curriculumList = res.data; |
|
if (this.curriculumList.length) { |
|
this.form.curriculumId = this.curriculumList[0].cid; |
|
this.getProjectData(); |
|
} |
|
}).catch(err => { |
|
console.log(err); |
|
}); |
|
}, |
|
getProjectData() { |
|
this.$get(`${this.api.projectListByCourseId}?cid=${this.form.curriculumId}&permissions=1&projectName=${this.keyword}`).then(res => { |
|
let { status, data } = res; |
|
if (status === 200 && data) { |
|
let list = data; |
|
let result = []; |
|
list.map(n => { |
|
n.enable || result.push(n); |
|
}); |
|
this.projectDataAll = result; |
|
this.total = result.length; |
|
this.handlePage(); |
|
} |
|
}).catch(err => { |
|
console.log(err); |
|
}); |
|
}, |
|
handlePage() { |
|
let list = this.projectDataAll; |
|
let result = list.slice((this.page - 1) * this.pageSize, this.page * this.pageSize); |
|
this.projectData = result; |
|
}, |
|
initData() { |
|
this.page = 1; |
|
this.getProjectData(); |
|
}, |
|
upload() { // 提交 |
|
if (!this.form.experimentalName) return util.warningMsg("请填写考核名称"); |
|
if (this.expNameRepeat) return util.warningMsg("考核名称重复，请重新输入"); |
|
if (this.form.type !== 1) { |
|
if (new Date().getTime() > new Date(this.startTime).getTime()) return util.warningMsg("开始时间不能早于当前时间"); |
|
let timestamp = new Date(new Date(this.stopTime).getTime() - new Date(this.startTime).getTime()); |
|
let minute = 1000 * 60; |
|
let hour = minute * 60; |
|
let day = hour * 24; |
|
this.form.experimentDuration = `${Math.floor(timestamp / day)}d${Math.floor(timestamp % day / hour)}h${Math.floor(timestamp % day % hour / minute)}m`; |
|
} |
|
if (this.form.type == 1 && this.form.experimentDuration == "0d0h0m") return util.warningMsg("请填写实验时长"); |
|
if (this.form.type == 2 && this.startTime == "0000-00-00 00:00:00") return util.warningMsg("请填写实验时间"); |
|
if (!this.form.projectId) return util.warningMsg("请选择实训项目"); |
|
if (this.form.isSpecify === 0 && this.form.isEnableCode == 0) { |
|
if (!this.form.invitationCode) return util.warningMsg("请设置邀请码"); |
|
if (!this.form.invitationCode || String(this.form.invitationCode).length < 6 || isNaN(this.form.invitationCode)) return util.warningMsg("请输入6位纯数字邀请码"); |
|
} |
|
|
|
if (this.form.type == 2) { |
|
this.form.startTime = this.startTime; |
|
this.form.stopTime = this.stopTime; |
|
} |
|
|
|
let classId = []; |
|
let stuInfo = []; |
|
this.allCheckedNodes.forEach(i => { |
|
if (i.level === 3) { |
|
classId.push(i.id); |
|
} else if (i.level === 4) { |
|
stuInfo.push({ classId: i.parentId, stuAccountId: i.id }); |
|
} |
|
}); |
|
if (this.isSpecify === 1 && !stuInfo.length) { |
|
util.warningMsg("请选择学生"); |
|
return; |
|
} else { |
|
this.form.classId = classId.toString(); |
|
this.form.stuInfo = stuInfo; |
|
} |
|
if (this.form.id) { |
|
this.$post(this.api.modifyAssessment, this.form).then(res => { |
|
util.successMsg("修改成功"); |
|
this.$router.back(); |
|
}).catch(err => { |
|
console.log(err); |
|
}); |
|
} else { |
|
this.$post(this.api.saveAssessment, this.form).then(res => { |
|
if (res.status === 200) { |
|
util.successMsg("创建成功"); |
|
this.$router.back(); |
|
} |
|
}).catch(err => { |
|
console.log(err); |
|
}); |
|
} |
|
}, |
|
getData() { // 获取详情 |
|
this.$get(`${this.api.getDetailById}?id=${this.form.id}`).then(res => { |
|
if (res.status == 200) { |
|
this.form = res.data; |
|
this.formatDuration(); |
|
} |
|
}).catch(err => { |
|
console.log(err); |
|
}); |
|
}, |
|
formatDuration() { // 格式化实验时长 |
|
let duration = this.form.experimentDuration.replace(/\D+/g, ",").split(","); |
|
this.duration = { |
|
day: duration[0], |
|
hour: duration[1], |
|
minute: duration[2] |
|
}; |
|
this.date = [this.startTime, this.stopTime]; |
|
}, |
|
recoveryData() { // 恢复数据 |
|
if (JSON.stringify(this.assFields) != "{}") { |
|
let info = this.assFields; |
|
this.form = info.form; |
|
this.duration = info.duration; // 实验时长 |
|
this.startTime = info.startTime; //开始时间 |
|
this.stopTime = info.startTime; //结束时间 |
|
this.expNameRepeat = info.expNameRepeat; // 考核名称是否重复 |
|
this.allCheckedNodes = info.allCheckedNodes; // 选中的树节点 |
|
this.formatDuration(); |
|
} |
|
}, |
|
handleCacheData() { // 缓存数据,用于从项目管理页面返回时,数据回显 |
|
this.allCheckedNodes.forEach(i => { |
|
if (i.level === 4) { |
|
this.form.stuInfo.push({ classId: i.parentId, stuAccountId: i.id }); |
|
} |
|
}); |
|
|
|
let data = { |
|
form: this.form, |
|
date: this.date, // 实验时间 |
|
duration: this.duration, // 实验时长 |
|
startTime: this.startTime, //开始时间 |
|
stopTime: this.startTime, //结束时间 |
|
expNameRepeat: this.expNameRepeat, // 考核名称是否重复 |
|
allCheckedNodes: this.allCheckedNodes // 选中的树节点 |
|
}; |
|
this.setAss(data); |
|
this.isToProject = true; |
|
}, |
|
toProject() { |
|
this.handleCacheData(); |
|
this.$router.push("/project/list/?show=1"); |
|
}, |
|
showProject(row) { |
|
this.handleCacheData(); |
|
this.$router.push(`/project/add?projectId=${row.projectId}&show=1`); |
|
}, |
|
createInv() { |
|
let result = ""; |
|
for (let i = 0; i < 6; i++) { |
|
result += Math.floor(Math.random() * 10); |
|
} |
|
this.form.invitationCode = result; |
|
}, |
|
handleCurrentChange(val) { |
|
this.page = val; |
|
this.handlePage(); |
|
}, |
|
goBack() { |
|
if (this.isDetail) { |
|
this.$router.back(); |
|
} else { |
|
this.$confirm("确定返回？未更新的信息将不会保存。", "提示", { type: "warning" }).then(() => { |
|
this.$router.back(); |
|
}); |
|
} |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.inline-input { |
|
width: 300px; |
|
} |
|
|
|
.date-inputs { |
|
.el-input { |
|
width: 100px; |
|
} |
|
} |
|
|
|
.tree-con { |
|
height: 400px; |
|
max-height: 400px; |
|
width: 300px; |
|
border: 1px solid #DCDFE6; |
|
border-radius: 4px; |
|
padding: 10px 10px 10px 0px; |
|
overflow: auto; |
|
|
|
/deep/ .el-icon-caret-right:before { |
|
color: #9278FF; |
|
font-weight: bold; |
|
} |
|
} |
|
|
|
</style> |