parent
559a044844
commit
055566f7d9
9 changed files with 1041 additions and 906 deletions
@ -1,247 +1,275 @@ |
||||
<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 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> |
||||
</el-card> |
||||
<el-card shadow="hover" class="mgr20 m-b-20"> |
||||
</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.associatedProduct" |
||||
:label="item.productName" |
||||
:value="item.associatedProduct |
||||
"> |
||||
</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> |
||||
<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> |
||||
<el-input placeholder="请输入项目名称" |
||||
prefix-icon="el-icon-search" |
||||
v-model.trim="keyword" |
||||
clearable></el-input> |
||||
</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="founder" label="创建人" align="center"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.founder ? '老师创建' : '系统内置' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column> |
||||
<!-- <el-table-column label="操作" align="center"> |
||||
<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="founder" |
||||
label="创建人" |
||||
align="center"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.founder ? '老师创建' : '系统内置' }} |
||||
</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> |
||||
</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 |
||||
}; |
||||
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 |
||||
}, |
||||
watch: { |
||||
// 监听信息是否有更改,有的话页面离开的时候要询问是否要保存 |
||||
form: { |
||||
handler(){ |
||||
this.updateTime++ |
||||
}, |
||||
deep:true |
||||
}, |
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer); |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData(); |
||||
}, 500); |
||||
} |
||||
keyword: function (val) { |
||||
clearTimeout(this.searchTimer); |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData(); |
||||
}, 500); |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.getCourse() |
||||
}, |
||||
methods: { |
||||
// 获取课程 |
||||
getCourse () { |
||||
this.loadIns = Loading.service() |
||||
this.$post(this.api.listOfGoods, { |
||||
hotTag: 1, |
||||
isShelves: 0, |
||||
sort: 0, |
||||
pageNum: 1, |
||||
pageSize: 1000 |
||||
}).then(({ page }) => { |
||||
const list = page.records |
||||
this.curriculumList = list |
||||
if (!this.form.cid && list.length) this.form.cid = list[0].associatedProduct |
||||
this.courseChange() |
||||
}).catch(err => { |
||||
this.loadIns.close() |
||||
}); |
||||
}, |
||||
mounted() { |
||||
this.getCourse() |
||||
// 课程选择回调 |
||||
courseChange (val) { |
||||
const { systemId } = this.curriculumList.find(e => e.cid == this.form.cid) |
||||
this.sysId = systemId |
||||
if (val) this.loadIns = Loading.service() |
||||
this.getProject() |
||||
}, |
||||
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 { systemId } = this.curriculumList.find(e => e.cid == this.form.cid) |
||||
this.sysId = systemId |
||||
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() { |
||||
// 查询项目 |
||||
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 () { |
||||
const { form, curStep } = this.$parent |
||||
form[curStep] = this.form |
||||
this.$store.commit('match/setCache', { |
||||
form, |
||||
curStep |
||||
}) |
||||
this.$parent.pass = 1 |
||||
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 |
||||
form[curStep] = this.form |
||||
this.$store.commit('match/setCache', { |
||||
form, |
||||
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 |
||||
} |
||||
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 { systemId, systemName, projectName } = this.projects.find(e => e.projectId == form.projectId) |
||||
if (systemId) form.systemId = systemId |
||||
if (projectName) form.projectName = projectName |
||||
if (systemName) form.systemName = systemName |
||||
form.startTime = form.time[0] |
||||
form.endTime = form.time[1] |
||||
this.$emit('hideSet', this.form) |
||||
}, |
||||
// 返回 |
||||
back() { |
||||
this.$emit('hideSet') |
||||
} |
||||
}, |
||||
// 提交 |
||||
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 { systemId, systemName, projectName } = this.projects.find(e => e.projectId == form.projectId) |
||||
if (systemId) form.systemId = systemId |
||||
if (projectName) form.projectName = projectName |
||||
if (systemName) form.systemName = systemName |
||||
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> |
||||
@ -1,319 +1,355 @@ |
||||
<template> |
||||
<div> |
||||
<div v-show="!setVisible" class="page"> |
||||
<div class="page-content"> |
||||
<div class="p-title">比赛内容设置</div> |
||||
<el-form label-width="170px" label-suffix=":" size="small" :disabled="!editing && id"> |
||||
<div v-for="(item, i) in form" :key="i" class="step"> |
||||
<div class="title"> |
||||
<span>{{ item.stageName }}（第{{ nums[i] }}阶段） | {{ methods.find(e => e.id === item.method).name }} </span> |
||||
<el-button v-if="item.method !== 2" type="primary" @click="toSet(i)">设置</el-button> |
||||
</div> |
||||
<el-form-item class="req" prop="time" label="比赛时间"> |
||||
<span v-if="item.method !== 2 && item.startTime">{{ item.startTime + ' 至 ' + item.endTime }}</span> |
||||
<div style="display: flex;align-items: center;" v-if="item.method === 2"> |
||||
<el-date-picker |
||||
v-model="item.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: 0px 16px;margin-left: 10px;" |
||||
:title="'(请设置在 ' + step1.playStartTime + ' ~ ' + step1.playEndTime + '间)'" |
||||
type="error" |
||||
:closable="false" |
||||
effect="dark"> |
||||
</el-alert> |
||||
</div> |
||||
</el-form-item> |
||||
<template v-if="item.method === 2"> |
||||
<el-form-item class="req" label="比赛地点"> |
||||
<el-input v-model="item.offlineAddress" style="width: 80%"></el-input> |
||||
</el-form-item> |
||||
<el-form-item class="req" label="比赛内容"> |
||||
<el-input v-model="item.contentDescription" type="textarea" style="width: 80%"></el-input> |
||||
</el-form-item> |
||||
<el-form-item class="req" label="评分规则"> |
||||
<el-input v-model="item.scoreRule" type="textarea" style="width: 80%"></el-input> |
||||
</el-form-item> |
||||
</template> |
||||
<template v-else> |
||||
<el-form-item class="req" prop="cid" label="课程系统"> |
||||
{{ item.systemName }} |
||||
</el-form-item> |
||||
<el-form-item class="req" prop="assessmentId" label="已选择考核"> |
||||
{{ item.projectName }} |
||||
</el-form-item> |
||||
<el-form-item class="req" prop="resultAnnouncementTime" label="比赛地点"> |
||||
<div class="line"> |
||||
<el-checkbox v-model="item.onlineButton">线上</el-checkbox> |
||||
<el-input v-model="item.onlineAddress" clearable placeholder="请输入比赛网址" :disabled="!item.onlineButton" style="width: 400px;margin-left: 10px"></el-input> |
||||
</div> |
||||
<div class="line"> |
||||
<el-checkbox v-model="item.offlineButton">线下</el-checkbox> |
||||
<el-input v-model="item.offlineAddress" clearable placeholder="请输入地址" :disabled="!item.offlineButton" style="width: 400px;margin-left: 10px"></el-input> |
||||
</div> |
||||
</el-form-item> |
||||
</template> |
||||
<div> |
||||
<div v-show="!setVisible" |
||||
class="page"> |
||||
<div class="page-content"> |
||||
<div class="p-title">比赛内容设置</div> |
||||
<el-form label-width="170px" |
||||
label-suffix=":" |
||||
size="small" |
||||
:disabled="!editing && id"> |
||||
<div v-for="(item, i) in form" |
||||
:key="i" |
||||
class="step"> |
||||
<div class="title"> |
||||
<span>{{ item.stageName }}（第{{ nums[i] }}阶段） | {{ methods.find(e => e.id === item.method).name }} </span> |
||||
<el-button v-if="item.method !== 2" |
||||
type="primary" |
||||
@click="toSet(i)">设置</el-button> |
||||
</div> |
||||
<el-form-item class="req" |
||||
prop="time" |
||||
label="比赛时间"> |
||||
<span v-if="item.method !== 2 && item.startTime">{{ item.startTime + ' 至 ' + item.endTime }}</span> |
||||
<div style="display: flex;align-items: center;" |
||||
v-if="item.method === 2"> |
||||
<el-date-picker v-model="item.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: 0px 16px;margin-left: 10px;" |
||||
:title="'(请设置在 ' + step1.playStartTime + ' ~ ' + step1.playEndTime + '间)'" |
||||
type="error" |
||||
:closable="false" |
||||
effect="dark"> |
||||
</el-alert> |
||||
</div> |
||||
</el-form> |
||||
</el-form-item> |
||||
<template v-if="item.method === 2"> |
||||
<el-form-item class="req" |
||||
label="比赛地点"> |
||||
<el-input v-model="item.offlineAddress" |
||||
style="width: 80%"></el-input> |
||||
</el-form-item> |
||||
<el-form-item class="req" |
||||
label="比赛内容"> |
||||
<el-input v-model="item.contentDescription" |
||||
type="textarea" |
||||
style="width: 80%"></el-input> |
||||
</el-form-item> |
||||
<el-form-item class="req" |
||||
label="评分规则"> |
||||
<el-input v-model="item.scoreRule" |
||||
type="textarea" |
||||
style="width: 80%"></el-input> |
||||
</el-form-item> |
||||
</template> |
||||
<template v-else> |
||||
<el-form-item class="req" |
||||
prop="cid" |
||||
label="课程系统"> |
||||
{{ item.systemName }} |
||||
</el-form-item> |
||||
<el-form-item class="req" |
||||
prop="assessmentId" |
||||
label="已选择考核"> |
||||
{{ item.projectName }} |
||||
</el-form-item> |
||||
<el-form-item class="req" |
||||
prop="resultAnnouncementTime" |
||||
label="比赛地点"> |
||||
<div class="line"> |
||||
<el-checkbox v-model="item.onlineButton">线上</el-checkbox> |
||||
<el-input v-model="item.onlineAddress" |
||||
clearable |
||||
placeholder="请输入比赛网址" |
||||
:disabled="!item.onlineButton" |
||||
style="width: 400px;margin-left: 10px"></el-input> |
||||
</div> |
||||
<div class="line"> |
||||
<el-checkbox v-model="item.offlineButton">线下</el-checkbox> |
||||
<el-input v-model="item.offlineAddress" |
||||
clearable |
||||
placeholder="请输入地址" |
||||
:disabled="!item.offlineButton" |
||||
style="width: 400px;margin-left: 10px"></el-input> |
||||
</div> |
||||
</el-form-item> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
|
||||
<set v-if="setVisible" :form.sync="form[curStep]" :step1.sync="step1" @hideSet="hideSet" /> |
||||
</el-form> |
||||
</div> |
||||
</div> |
||||
|
||||
<set v-if="setVisible" |
||||
:form.sync="form[curStep]" |
||||
:step1.sync="step1" |
||||
@hideSet="hideSet" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from "@/libs/util"; |
||||
import set from './set' |
||||
export default { |
||||
props: ['setupId', 'competitionId', 'editing'], |
||||
data() { |
||||
return { |
||||
id: this.$route.query.id, |
||||
updateTime: 0, |
||||
step1: this.$parent.$refs.step1.form, |
||||
cache: this.$store.state.match.cache, |
||||
nums: ['一', '二', '三'], |
||||
methods: [ |
||||
{ |
||||
id: 0, |
||||
name: '实操' |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '理论' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '线下' |
||||
} |
||||
], |
||||
originForm: { |
||||
cid: '', |
||||
contentDescription: '', |
||||
endTime: '', |
||||
scoreRule: '', |
||||
stageId: '', |
||||
startTime: '', |
||||
systemId: '', |
||||
offlineAddress: '', |
||||
offlineButton: 0, |
||||
onlineAddress: '', |
||||
onlineButton: 0, |
||||
time: [] |
||||
}, |
||||
form: [], |
||||
setVisible: false, |
||||
curStep: 0, |
||||
}; |
||||
}, |
||||
components: { |
||||
set |
||||
}, |
||||
watch: { |
||||
// 监听信息是否有更改,有的话页面离开的时候要询问是否要保存 |
||||
form: { |
||||
handler(){ |
||||
this.updateTime++ |
||||
props: ['setupId', 'competitionId', 'editing'], |
||||
data () { |
||||
return { |
||||
id: this.$route.query.id, |
||||
updateTime: 0, |
||||
step1: this.$parent.$refs.step1.form, |
||||
cache: this.$store.state.match.cache, |
||||
nums: ['一', '二', '三'], |
||||
methods: [ |
||||
{ |
||||
id: 0, |
||||
name: '实操' |
||||
}, |
||||
deep:true |
||||
}, |
||||
}, |
||||
mounted() { |
||||
this.handleForm() |
||||
}, |
||||
methods: { |
||||
// 如果是从自定义项目入口进去后返回的，要恢复上次的阶段和数据 |
||||
resumeData() { |
||||
if (this.cache) { |
||||
this.curStep = this.cache.curStep |
||||
if (this.cache.form) this.form = this.cache.form |
||||
this.setVisible = true |
||||
this.$store.commit('match/setCache', null) |
||||
{ |
||||
id: 1, |
||||
name: '理论' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '线下' |
||||
} |
||||
], |
||||
originForm: { |
||||
cid: '', |
||||
mallId: '', |
||||
contentDescription: '', |
||||
endTime: '', |
||||
scoreRule: '', |
||||
stageId: '', |
||||
startTime: '', |
||||
systemId: '', |
||||
offlineAddress: '', |
||||
offlineButton: 0, |
||||
onlineAddress: '', |
||||
onlineButton: 0, |
||||
time: [] |
||||
}, |
||||
// 处理form |
||||
handleForm() { |
||||
// 根据赛事id查询赛事规则 |
||||
this.$post(`${this.api.queryCompetitionStageBySetupId}?setupId=${this.setupId}`).then(res => { |
||||
res.competitionStages.map(e => { |
||||
const form = e.competitionContent || JSON.parse(JSON.stringify(this.originForm)) |
||||
if (form.startTime) { |
||||
form.time = [form.startTime, form.endTime] |
||||
} else { |
||||
form.time = [] |
||||
} |
||||
form.offlineButton = !!form.offlineButton |
||||
form.onlineButton = !!form.onlineButton |
||||
form.method = e.method |
||||
form.stageId = e.stageId |
||||
form.stageName = e.stageName |
||||
this.form.push(form) |
||||
}) |
||||
this.resumeData() |
||||
this.$nextTick(() => { |
||||
this.updateTime = 0 |
||||
}) |
||||
}).catch(res => {}) |
||||
form: [], |
||||
setVisible: false, |
||||
curStep: 0, |
||||
pass: 0 |
||||
}; |
||||
}, |
||||
components: { |
||||
set |
||||
}, |
||||
watch: { |
||||
// 监听信息是否有更改,有的话页面离开的时候要询问是否要保存 |
||||
form: { |
||||
handler () { |
||||
this.updateTime++ |
||||
}, |
||||
// 显示设置页面 |
||||
toSet(i) { |
||||
this.curStep = i |
||||
this.$parent.showBtns = false |
||||
deep: true |
||||
}, |
||||
}, |
||||
mounted () { |
||||
this.handleForm() |
||||
}, |
||||
methods: { |
||||
// 如果是从自定义项目入口进去后返回的，要恢复上次的阶段和数据 |
||||
resumeData () { |
||||
if (this.cache) { |
||||
this.curStep = this.cache.curStep |
||||
if (this.cache.form) this.form = this.cache.form |
||||
this.setVisible = true |
||||
}, |
||||
// 隐藏设置 |
||||
hideSet(form) { |
||||
if (form) this.form[this.curStep] = form |
||||
this.setVisible = false |
||||
this.$parent.showBtns = true |
||||
}, |
||||
// 时间选择回调 |
||||
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)) return util.warningMsg('设置的阶段比赛时间必须要在第一步设置的竞赛时间范围内，请重新设置。') |
||||
const { form, curStep } = this |
||||
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 |
||||
} |
||||
this.$store.commit('match/setCache', null) |
||||
} |
||||
}, |
||||
// 处理form |
||||
handleForm () { |
||||
// 根据赛事id查询赛事规则 |
||||
this.$post(`${this.api.queryCompetitionStageBySetupId}?setupId=${this.setupId}`).then(res => { |
||||
res.competitionStages.map(e => { |
||||
const form = e.competitionContent || JSON.parse(JSON.stringify(this.originForm)) |
||||
if (form.startTime) { |
||||
form.time = [form.startTime, form.endTime] |
||||
} else { |
||||
form.time = [] |
||||
} |
||||
form.offlineButton = !!form.offlineButton |
||||
form.onlineButton = !!form.onlineButton |
||||
form.method = e.method |
||||
form.stageId = e.stageId |
||||
form.stageName = e.stageName |
||||
this.form.push(form) |
||||
}) |
||||
this.resumeData() |
||||
this.$nextTick(() => { |
||||
this.updateTime = 0 |
||||
}) |
||||
}).catch(res => { }) |
||||
}, |
||||
// 显示设置页面 |
||||
toSet (i) { |
||||
this.curStep = i |
||||
this.$parent.showBtns = false |
||||
this.setVisible = true |
||||
}, |
||||
// 隐藏设置 |
||||
hideSet (form) { |
||||
if (form) this.form[this.curStep] = form |
||||
this.setVisible = false |
||||
this.$parent.showBtns = true |
||||
}, |
||||
// 时间选择回调 |
||||
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)) return util.warningMsg('设置的阶段比赛时间必须要在第一步设置的竞赛时间范围内，请重新设置。') |
||||
const { form, curStep } = this |
||||
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 |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
// 发布赛事 |
||||
publish() { |
||||
this.competitionId && this.$post(`${this.api.publishCompetition}?competitionId=${this.competitionId}&publishStatus=1`).then(res => {}).catch(err => {}) |
||||
}, |
||||
// 提交 |
||||
save(status, next = 0,releaseType,cb) { |
||||
const { form } = this |
||||
if (!form.length) { |
||||
this.$parent.hideLoad() |
||||
util.successMsg('保存成功') |
||||
this.$emit('next', next) |
||||
return |
||||
} |
||||
// 发布才需要判断必填 |
||||
if (status) { |
||||
let invalid = 0 |
||||
const { playStartTime, playEndTime } = this.step1 |
||||
for (const e of form) { |
||||
if (!e.time.length) { |
||||
} |
||||
}, |
||||
// 发布赛事 |
||||
publish () { |
||||
this.competitionId && this.$post(`${this.api.publishCompetition}?competitionId=${this.competitionId}&publishStatus=1`).then(res => { }).catch(err => { }) |
||||
}, |
||||
// 提交 |
||||
save (status, next = 0, releaseType, cb) { |
||||
const { form } = this |
||||
if (!form.length) { |
||||
this.$parent.hideLoad() |
||||
util.successMsg('保存成功') |
||||
this.$emit('next', next) |
||||
return |
||||
} |
||||
// 发布才需要判断必填 |
||||
if (status) { |
||||
let invalid = 0 |
||||
const { playStartTime, playEndTime } = this.step1 |
||||
for (const e of form) { |
||||
if (!e.time.length) { |
||||
invalid = 1 |
||||
util.errorMsg('请选择比赛时间') |
||||
break |
||||
} |
||||
if (new Date(e.time[0]) < new Date(playStartTime) || new Date(e.time[1]) > new Date(playEndTime)) { |
||||
invalid = 1 |
||||
util.errorMsg('设置的阶段比赛时间必须要在第一步设置的竞赛时间范围内，请重新设置。') |
||||
break |
||||
} |
||||
e.startTime = e.time[0] |
||||
e.endTime = e.time[1] |
||||
if (e.method !== 2 && !e.cid) { |
||||
invalid = 1 |
||||
util.errorMsg('请选择课程') |
||||
break |
||||
} |
||||
if (e.method === 2) { // 线下 |
||||
if (!e.offlineAddress) { |
||||
invalid = 1 |
||||
util.errorMsg('请输入比赛地点') |
||||
break |
||||
} |
||||
if (!e.contentDescription) { |
||||
invalid = 1 |
||||
util.errorMsg('请选择比赛时间') |
||||
util.errorMsg('请输入比赛内容') |
||||
break |
||||
} |
||||
if (new Date(e.time[0]) < new Date(playStartTime) || new Date(e.time[1]) > new Date(playEndTime)) { |
||||
if (!e.scoreRule) { |
||||
invalid = 1 |
||||
util.errorMsg('设置的阶段比赛时间必须要在第一步设置的竞赛时间范围内，请重新设置。') |
||||
util.errorMsg('请输入评分规则') |
||||
break |
||||
} |
||||
e.startTime = e.time[0] |
||||
e.endTime = e.time[1] |
||||
if (e.method !== 2 && !e.cid) { |
||||
} else { |
||||
if (e.onlineButton && !e.onlineAddress) { |
||||
invalid = 1 |
||||
util.errorMsg('请选择课程') |
||||
util.errorMsg('请输入线上地点') |
||||
break |
||||
} |
||||
if (e.method === 2) { // 线下 |
||||
if (!e.offlineAddress) { |
||||
invalid = 1 |
||||
util.errorMsg('请输入比赛地点') |
||||
break |
||||
} |
||||
if (!e.contentDescription) { |
||||
invalid = 1 |
||||
util.errorMsg('请输入比赛内容') |
||||
break |
||||
} |
||||
if (!e.scoreRule) { |
||||
invalid = 1 |
||||
util.errorMsg('请输入评分规则') |
||||
break |
||||
} |
||||
} else { |
||||
if (e.onlineButton && !e.onlineAddress) { |
||||
invalid = 1 |
||||
util.errorMsg('请输入线上地点') |
||||
break |
||||
} |
||||
if (e.offlineButton && !e.offlineAddress) { |
||||
invalid = 1 |
||||
util.errorMsg('请输入线下地点') |
||||
break |
||||
} |
||||
if (!e.onlineAddress && !e.offlineAddress) { |
||||
invalid = 1 |
||||
util.errorMsg('请输入比赛地点') |
||||
break |
||||
} |
||||
if (e.offlineButton && !e.offlineAddress) { |
||||
invalid = 1 |
||||
util.errorMsg('请输入线下地点') |
||||
break |
||||
} |
||||
if (!e.onlineAddress && !e.offlineAddress) { |
||||
invalid = 1 |
||||
util.errorMsg('请输入比赛地点') |
||||
break |
||||
} |
||||
} |
||||
if (invalid) return |
||||
} |
||||
// 处理单选框 |
||||
for (const e of form) { |
||||
e.offlineButton = e.offlineButton ? 1 : 0 |
||||
e.onlineButton = e.onlineButton ? 1 : 0 |
||||
} |
||||
this.$parent.showLoad() |
||||
this.$post(this.api[form[0].contentId ? 'editCompetitionContent' : 'addCompetitionContent'], { |
||||
competitionContents: form |
||||
}).then(res => { |
||||
this.$parent.hideLoad() |
||||
// 新增赛事，并且点的是发布按钮，则发布该赛事 |
||||
status && this.publish(status) |
||||
util.successMsg((status ? '发布' : '保存') + '成功') |
||||
this.$emit('next', next,cb) |
||||
}).catch(err => { |
||||
this.$parent.hideLoad() |
||||
}) |
||||
}, |
||||
} |
||||
if (invalid) return |
||||
} |
||||
// 处理单选框 |
||||
for (const e of form) { |
||||
e.offlineButton = e.offlineButton ? 1 : 0 |
||||
e.onlineButton = e.onlineButton ? 1 : 0 |
||||
} |
||||
this.$parent.showLoad() |
||||
this.$post(this.api[form[0].contentId ? 'editCompetitionContent' : 'addCompetitionContent'], { |
||||
competitionContents: form |
||||
}).then(res => { |
||||
this.$parent.hideLoad() |
||||
// 新增赛事，并且点的是发布按钮，则发布该赛事 |
||||
status && this.publish(status) |
||||
util.successMsg((status ? '发布' : '保存') + '成功') |
||||
this.$emit('next', next, cb) |
||||
}).catch(err => { |
||||
this.$parent.hideLoad() |
||||
}) |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.step { |
||||
padding-bottom: 10px; |
||||
background-color: #f9f9f9; |
||||
.title { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
padding: 10px 15px; |
||||
margin-bottom: 10px; |
||||
background-color: #ededed; |
||||
} |
||||
padding-bottom: 10px; |
||||
background-color: #f9f9f9; |
||||
.title { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
padding: 10px 15px; |
||||
margin-bottom: 10px; |
||||
background-color: #ededed; |
||||
} |
||||
} |
||||
.line { |
||||
margin-bottom: 10px; |
||||
margin-bottom: 10px; |
||||
} |
||||
/deep/.req { |
||||
.el-form-item__label { |
||||
&:before { |
||||
content: '*'; |
||||
margin-right: 5px; |
||||
font-size: 18px; |
||||
vertical-align: middle; |
||||
color: #f00; |
||||
.el-form-item__label { |
||||
&:before { |
||||
content: '*'; |
||||
margin-right: 5px; |
||||
font-size: 18px; |
||||
vertical-align: middle; |
||||
color: #f00; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue