|
|
|
|
@ -1,32 +1,52 @@ |
|
|
|
|
<template> |
|
|
|
|
<div> |
|
|
|
|
<el-card v-if="!id" shadow="hover" class="m-b-20"> |
|
|
|
|
<el-card v-if="!id" |
|
|
|
|
shadow="hover" |
|
|
|
|
class="m-b-20"> |
|
|
|
|
<div class="flex-between"> |
|
|
|
|
<el-page-header @back="back" :content="'创建赛事'"></el-page-header> |
|
|
|
|
<el-page-header @back="back" |
|
|
|
|
:content="'创建赛事'"></el-page-header> |
|
|
|
|
</div> |
|
|
|
|
</el-card> |
|
|
|
|
<div v-if="hasPer"> |
|
|
|
|
<div v-if="step === 1 || (id && !editing)" :class="['type-wrap', {pd: !id}]"> |
|
|
|
|
<div v-if="step === 1 || (id && !editing)" |
|
|
|
|
:class="['type-wrap', {pd: !id}]"> |
|
|
|
|
<div class="p-title">大赛发布类型</div> |
|
|
|
|
<el-form label-width="100px" label-suffix=":" size="small" :disabled="!editing && id != ''"> |
|
|
|
|
<el-form label-width="100px" |
|
|
|
|
label-suffix=":" |
|
|
|
|
size="small" |
|
|
|
|
:disabled="!editing && id != ''"> |
|
|
|
|
<el-form-item label="请选择类型"> |
|
|
|
|
<el-radio v-for="(item, i) in releaseTypes" :key="i" v-model="releaseType" :label="item.id">{{ item.name }}</el-radio> |
|
|
|
|
<el-radio v-for="(item, i) in releaseTypes" |
|
|
|
|
:key="i" |
|
|
|
|
v-model="releaseType" |
|
|
|
|
:label="item.id">{{ item.name }}</el-radio> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
<el-button v-if="!editing && id" class="edit" type="primary" @click="editing = 1" v-auth="'/match/list:管理:大赛详情:编辑'">编辑</el-button> |
|
|
|
|
<el-button v-if="!editing && id" |
|
|
|
|
class="edit" |
|
|
|
|
type="primary" |
|
|
|
|
@click="editing = 1" |
|
|
|
|
v-auth="'/match/list:管理:大赛详情:编辑'">编辑</el-button> |
|
|
|
|
</div> |
|
|
|
|
<el-card v-if="step !== 4" shadow="hover" class="m-b-20" style="position: relative;margin-top: 20px"> |
|
|
|
|
<el-card v-if="step !== 4" |
|
|
|
|
shadow="hover" |
|
|
|
|
class="m-b-20" |
|
|
|
|
style="position: relative;margin-top: 20px"> |
|
|
|
|
<ul :class="['steps', {pointer: !editing && id}]"> |
|
|
|
|
<li :class="{active: step === 1,done: step > 1}" @click="toStep(1)"> |
|
|
|
|
<li :class="{active: step === 1,done: step > 1}" |
|
|
|
|
@click="toStep(1)"> |
|
|
|
|
<span class="circle">1</span> |
|
|
|
|
<p class="text">大赛信息填写</p> |
|
|
|
|
</li> |
|
|
|
|
<template v-if="releaseType"> |
|
|
|
|
<li :class="{active: step === 2,done: step > 2}" @click="toStep(2)"> |
|
|
|
|
<li :class="{active: step === 2,done: step > 2}" |
|
|
|
|
@click="toStep(2)"> |
|
|
|
|
<span class="circle circle2">2</span> |
|
|
|
|
<p class="text">赛程与规则设置</p> |
|
|
|
|
</li> |
|
|
|
|
<li :class="{active: step === 3,done: step > 3}" @click="toStep(3)"> |
|
|
|
|
<li :class="{active: step === 3,done: step > 3}" |
|
|
|
|
@click="toStep(3)"> |
|
|
|
|
<span class="circle circle3">3</span> |
|
|
|
|
<p class="text">比赛内容设置</p> |
|
|
|
|
</li> |
|
|
|
|
@ -38,23 +58,51 @@ |
|
|
|
|
</ul> |
|
|
|
|
</el-card> |
|
|
|
|
</div> |
|
|
|
|
<el-button v-else-if="!editing && id" class="edit" type="primary" @click="editing = 1" v-auth="'/match/list:管理:大赛详情:编辑'">编辑</el-button> |
|
|
|
|
<el-button v-else-if="!editing && id" |
|
|
|
|
class="edit" |
|
|
|
|
type="primary" |
|
|
|
|
@click="editing = 1" |
|
|
|
|
v-auth="'/match/list:管理:大赛详情:编辑'">编辑</el-button> |
|
|
|
|
<div class="page"> |
|
|
|
|
<div class="page-content"> |
|
|
|
|
<step1 v-show="step === 1" ref="step1" :editing.sync="editing" @next="next" /> |
|
|
|
|
<step2 v-if="step === 2" ref="step2" :editing.sync="editing" :setupId.sync="setupId" @next="next" /> |
|
|
|
|
<step3 v-if="step === 3" ref="step3" :editing.sync="editing" :setupId.sync="setupId" :competitionId.sync="competitionId" @next="next" /> |
|
|
|
|
<step4 v-if="step === 4" /> |
|
|
|
|
<step1 v-show="step === 1" |
|
|
|
|
ref="step1" |
|
|
|
|
:editing.sync="editing" |
|
|
|
|
@next="next" /> |
|
|
|
|
<step2 v-if="step === 2" |
|
|
|
|
ref="step2" |
|
|
|
|
:editing.sync="editing" |
|
|
|
|
:setupId.sync="setupId" |
|
|
|
|
@next="next" /> |
|
|
|
|
<step3 v-if="step === 3" |
|
|
|
|
ref="step3" |
|
|
|
|
:editing.sync="editing" |
|
|
|
|
:setupId.sync="setupId" |
|
|
|
|
:competitionId.sync="competitionId" |
|
|
|
|
@next="next" /> |
|
|
|
|
<step4 v-if="step === 4" |
|
|
|
|
ref="step4" /> |
|
|
|
|
|
|
|
|
|
<div v-if="step !== 4 && showBtns" class="btns"> |
|
|
|
|
<div v-if="step !== 4 && showBtns" |
|
|
|
|
class="btns"> |
|
|
|
|
<!-- 处于编辑状态(列表点编辑按钮进来默认是查看状态，不可编辑，点了编辑按钮才可编辑)，或者新增，才显示这几个按钮 --> |
|
|
|
|
<div v-if="editing || !id" class="m-r-10"> |
|
|
|
|
<el-button v-if="!publishStatus" @click="save(0)">保存{{ releaseType ? '草稿' : '' }}</el-button> |
|
|
|
|
<el-button v-if="step === 2 || step === 3" type="primary" @click="prev">上一步</el-button> |
|
|
|
|
<el-button v-if="releaseType == 0" type="primary" @click="save(1)">发布</el-button> |
|
|
|
|
<el-button v-else type="primary" @click="save(id ? 1 : 0, 2)">保存并下一步</el-button> |
|
|
|
|
<div v-if="editing || !id" |
|
|
|
|
class="m-r-10"> |
|
|
|
|
<el-button v-if="!publishStatus" |
|
|
|
|
@click="save(0)">保存{{ releaseType ? '草稿' : '' }}</el-button> |
|
|
|
|
<el-button v-if="step === 2 || step === 3" |
|
|
|
|
type="primary" |
|
|
|
|
@click="prev">上一步</el-button> |
|
|
|
|
<el-button v-if="releaseType == 0" |
|
|
|
|
type="primary" |
|
|
|
|
@click="save(1)">发布</el-button> |
|
|
|
|
<el-button v-else |
|
|
|
|
type="primary" |
|
|
|
|
@click="save(id ? 1 : 0, 2)">保存并下一步</el-button> |
|
|
|
|
</div> |
|
|
|
|
<el-button type="danger" @click="preview" v-auth="'/match/list:管理:大赛详情:预览'">预览</el-button> |
|
|
|
|
<el-button type="danger" |
|
|
|
|
@click="preview" |
|
|
|
|
v-auth="'/match/list:管理:大赛详情:预览'">预览</el-button> |
|
|
|
|
<el-button @click="cancel">{{ editing ? '取消' : '返回' }}</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -109,7 +157,7 @@ export default { |
|
|
|
|
// 离开的时候判断是否有保存更改的信息,没有则拦截并提示 |
|
|
|
|
beforeRouteLeave (to, from, next) { |
|
|
|
|
const { updateTime } = this.$refs['step' + this.step] |
|
|
|
|
if(updateTime){ |
|
|
|
|
if (this.$refs['step' + this.step] && updateTime) { |
|
|
|
|
this.$confirm(`您所更改的内容未更新，是否更新？`, '提示', { |
|
|
|
|
type: 'warning' |
|
|
|
|
}).then(() => { |
|
|
|
|
@ -159,7 +207,7 @@ export default { |
|
|
|
|
prev () { |
|
|
|
|
// 更改了信息才需要提示 |
|
|
|
|
const { updateTime } = this.$refs['step' + this.step] |
|
|
|
|
if (updateTime) { |
|
|
|
|
if (this.$refs['step' + this.step] && updateTime) { |
|
|
|
|
this.$confirm(`编辑的内容未保存，是否保存？`, '提示', { |
|
|
|
|
type: 'warning' |
|
|
|
|
}).then(() => { |
|
|
|
|
@ -173,9 +221,6 @@ export default { |
|
|
|
|
}, |
|
|
|
|
// 发布后的逻辑 |
|
|
|
|
next (next, setupId, competitionId, type) { |
|
|
|
|
console.log('next==>',next) |
|
|
|
|
console.log('setupId==>',setupId) |
|
|
|
|
console.log('competitionId==>',competitionId) |
|
|
|
|
if (!next) { |
|
|
|
|
this.$router.push(`/match?page=${this.$store.state.matchPage}`) |
|
|
|
|
} else if (next === 2) { |
|
|
|
|
@ -212,7 +257,7 @@ export default { |
|
|
|
|
if (this.editing && this.$route.query.name) { |
|
|
|
|
// 更改了信息才需要提示 |
|
|
|
|
const { updateTime } = this.$refs['step' + this.step] |
|
|
|
|
if (this.step < 4 && updateTime) { |
|
|
|
|
if (this.step < 4 && this.$refs['step' + this.step] && updateTime) { |
|
|
|
|
this.$confirm(`编辑的内容未保存，是否保存？`, '提示', { |
|
|
|
|
type: 'warning' |
|
|
|
|
}).then(() => { |
|
|
|
|
@ -230,8 +275,7 @@ export default { |
|
|
|
|
back () { |
|
|
|
|
// 更改了信息才需要提示 |
|
|
|
|
const { updateTime } = this.$refs['step' + this.step] |
|
|
|
|
console.log("🚀 ~ file: index.vue:142 ~ back ~ updateTime", updateTime) |
|
|
|
|
if (this.step < 4 && updateTime) { |
|
|
|
|
if (this.step < 4 && this.$refs['step' + this.step] && updateTime) { |
|
|
|
|
this.$confirm(`编辑的内容未保存，是否保存？`, '提示', { |
|
|
|
|
type: 'warning' |
|
|
|
|
}).then(() => { |
|
|
|
|
@ -305,10 +349,10 @@ export default { |
|
|
|
|
.circle { |
|
|
|
|
color: #fff; |
|
|
|
|
border-color: #459ffb; |
|
|
|
|
background: #007EFF; |
|
|
|
|
background: #007eff; |
|
|
|
|
} |
|
|
|
|
.text { |
|
|
|
|
color: #007EFF; |
|
|
|
|
color: #007eff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.done { |
|
|
|
|
|
