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.
248 lines
9.1 KiB
248 lines
9.1 KiB
<template> |
|
<div> |
|
<el-card shadow="hover" class="m-b-20"> |
|
<div> |
|
<p class="m-b-20">比赛名称</p> |
|
{{ form.stageName }} |
|
</div> |
|
</el-card> |
|
<el-card shadow="hover" class="m-b-20"> |
|
<div> |
|
<p class="m-b-20">比赛时间</p> |
|
<div class="date-inputs"> |
|
起止时间： |
|
<div style="display: inline-flex;align-items: center;"> |
|
<el-date-picker |
|
v-model="form.time" |
|
type="datetimerange" |
|
range-separator="~" |
|
start-placeholder="开始日期" |
|
end-placeholder="结束日期" |
|
format="yyyy-MM-dd HH:mm:ss" |
|
value-format="yyyy-MM-dd HH:mm:ss" |
|
@change="timeChange"> |
|
</el-date-picker> |
|
<el-alert |
|
style="width: auto;padding: 4px 16px;margin-left: 10px;" |
|
:title="'(请设置在 ' + step1.playStartTime + ' ~ ' + step1.playEndTime + '间)'" |
|
type="error" |
|
:closable="false" |
|
effect="dark"> |
|
</el-alert> |
|
</div> |
|
</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.cid" @change="courseChange"> |
|
<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 placeholder="请输入项目名称" prefix-icon="el-icon-search" v-model.trim="keyword" clearable></el-input> |
|
</div> |
|
<el-button style="margin-left: 5px" type="primary" round @click="toProject">自定义实验项目</el-button> |
|
</div> |
|
</div> |
|
<!-- 实训项目表格 --> |
|
<el-table :data="projects" class="table" stripe header-align="center"> |
|
<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.permissions] }} |
|
</template> |
|
</el-table-column> |
|
<!-- <el-table-column prop="createUser" label="创建人" align="center"></el-table-column> --> |
|
<el-table-column prop="founder" label="创建人" align="center"> |
|
<template slot-scope="scope"> |
|
{{ scope.row.createUser }} |
|
</template> |
|
</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> |
|
|
|
<div style="text-align: center"> |
|
<el-button @click="back">返回</el-button> |
|
<el-button type="primary" @click="save">保存</el-button> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import util from "@/libs/util"; |
|
import { Loading } from 'element-ui' |
|
export default { |
|
props: ['form', 'step1'], |
|
data() { |
|
return { |
|
loadIns: null, |
|
curriculumList: [], |
|
keyword: '', |
|
projects: [], |
|
page: 1, |
|
pageSize: 5, |
|
total: 0, |
|
sysId: '', |
|
permissionsKeys: ['练习', '考核', '竞赛'], |
|
timeInvalid: false |
|
}; |
|
}, |
|
watch: { |
|
// 监听信息是否有更改,有的话页面离开的时候要询问是否要保存 |
|
form: { |
|
handler(){ |
|
this.updateTime++ |
|
}, |
|
deep:true |
|
}, |
|
keyword: function(val) { |
|
clearTimeout(this.searchTimer); |
|
this.searchTimer = setTimeout(() => { |
|
this.initData(); |
|
}, 500); |
|
} |
|
}, |
|
mounted() { |
|
this.getCourse() |
|
}, |
|
methods: { |
|
// 获取课程 |
|
getCourse() { |
|
this.loadIns = Loading.service() |
|
this.$get(this.api.curriculumList).then(({ data }) => { |
|
const list = data |
|
this.curriculumList = data |
|
if (!this.form.cid && list.length) this.form.cid = list[0].cid |
|
this.courseChange() |
|
}).catch(err => { |
|
this.loadIns.close() |
|
}); |
|
}, |
|
// 课程选择回调 |
|
courseChange(val) { |
|
const { sysId, sysName } = this.curriculumList.find(e => e.cid == this.form.cid) |
|
this.form.sysName = sysName |
|
this.sysId = sysId |
|
if (val) this.loadIns = Loading.service() |
|
this.getProject() |
|
}, |
|
// 查询项目 |
|
getProject() { |
|
this.$post(this.api.getProjectAssessmentByCompetition, { |
|
pageNum: this.page, |
|
pageSize: this.pageSize, |
|
cid: this.form.cid, |
|
projectName: this.keyword, |
|
systemId: this.sysId, |
|
permissions: 2 |
|
}).then(({ data }) => { |
|
this.projects = data.records |
|
this.total = data.total |
|
this.loadIns.close() |
|
}).catch(err => { |
|
this.loadIns.close() |
|
}); |
|
}, |
|
initData() { |
|
this.page = 1; |
|
this.getProject(); |
|
}, |
|
handleCurrentChange(val) { |
|
this.page = val; |
|
this.getProject(); |
|
}, |
|
// 自定义项目 |
|
toProject() { |
|
this.$store.commit('match/setCache', { |
|
form: this.form, |
|
curStep: this.$parent.curStep |
|
}) |
|
this.$router.push(`/project/list?show=1`) |
|
}, |
|
// 时间选择回调 |
|
timeChange(val) { |
|
if (val.length) { |
|
const startTime = new Date(val[0]) |
|
const endTime = new Date(val[1]) |
|
const { playStartTime, playEndTime } = this.step1 |
|
if (startTime < new Date(playStartTime) || endTime > new Date(playEndTime)) { |
|
this.timeInvalid = true |
|
return util.warningMsg('设置的阶段比赛时间必须要在第一步设置的竞赛时间范围内，请重新设置。') |
|
} |
|
this.timeInvalid = false |
|
const { form, curStep } = this.$parent |
|
for (const i in form) { |
|
// 判断其他阶段的时间跟当前选的时间是否重叠 |
|
if (i !== curStep) { |
|
const time1 = new Date(form[i].startTime) |
|
const time2 = new Date(form[i].endTime) |
|
if ((startTime >= time1 && startTime <= time2) || (endTime >= time1 && endTime <= time2)) { |
|
util.warningMsg('请注意，所设置的时间与已设置的阶段时间重合。') |
|
break |
|
} |
|
} |
|
} |
|
} |
|
}, |
|
// 提交 |
|
save() { |
|
const { form } = this |
|
if (!form.time.length) return util.warningMsg('请选择比赛时间') |
|
const { playStartTime, playEndTime } = this.step1 |
|
if (new Date(form.time[0]) < new Date(playStartTime) || new Date(form.time[1]) > new Date(playEndTime)) return util.warningMsg('设置的阶段比赛时间必须要在第一步设置的竞赛时间范围内，请重新设置。') |
|
if (!form.cid) return util.warningMsg('请选择课程') |
|
if (!form.projectId) return util.warningMsg('请选择项目') |
|
const cur = this.curriculumList.find(e => e.cid == form.cid) |
|
if (cur) form.systemName = cur.sysName |
|
const { systemId, projectName } = this.projects.find(e => e.projectId == form.projectId) |
|
if (systemId) form.systemId = systemId |
|
if (projectName) form.projectName = projectName |
|
form.startTime = form.time[0] |
|
form.endTime = form.time[1] |
|
this.$emit('hideSet', this.form) |
|
}, |
|
// 返回 |
|
back() { |
|
this.$emit('hideSet') |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
|
|
</style> |