|
|
@ -1,32 +1,51 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<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"> |
|
|
|
<div class="flex-between"> |
|
|
|
<el-page-header @back="back" :content="'创建赛事'"></el-page-header> |
|
|
|
<el-page-header @back="back" |
|
|
|
|
|
|
|
:content="'创建赛事'"></el-page-header> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
</el-card> |
|
|
|
<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> |
|
|
|
<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-form-item label="请选择类型"> |
|
|
|
<el-radio v-model="releaseType" :label="0">仅发布信息</el-radio> |
|
|
|
<el-radio v-model="releaseType" |
|
|
|
<el-radio v-model="releaseType" :label="1">设置完整比赛</el-radio> |
|
|
|
:label="0">仅发布信息</el-radio> |
|
|
|
|
|
|
|
<el-radio v-model="releaseType" |
|
|
|
|
|
|
|
:label="1">设置完整比赛</el-radio> |
|
|
|
</el-form-item> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</el-form> |
|
|
|
<el-button v-if="!editing && id" class="edit" type="primary" @click="editing = 1" v-auth="'/match:管理:大赛详情:编辑'">编辑</el-button> |
|
|
|
<el-button v-if="!editing && id" |
|
|
|
|
|
|
|
class="edit" |
|
|
|
|
|
|
|
type="primary" |
|
|
|
|
|
|
|
@click="editing = 1" |
|
|
|
|
|
|
|
v-auth="'/match:管理:大赛详情:编辑'">编辑</el-button> |
|
|
|
</div> |
|
|
|
</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 && publishStatus}]"> |
|
|
|
<ul :class="['steps', {pointer: !editing && id && publishStatus}]"> |
|
|
|
<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> |
|
|
|
<span class="circle">1</span> |
|
|
|
<p class="text">大赛信息填写</p> |
|
|
|
<p class="text">大赛信息填写</p> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
<template v-if="releaseType"> |
|
|
|
<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> |
|
|
|
<span class="circle circle2">2</span> |
|
|
|
<p class="text">赛程与规则设置</p> |
|
|
|
<p class="text">赛程与规则设置</p> |
|
|
|
</li> |
|
|
|
</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> |
|
|
|
<span class="circle circle3">3</span> |
|
|
|
<p class="text">比赛内容设置</p> |
|
|
|
<p class="text">比赛内容设置</p> |
|
|
|
</li> |
|
|
|
</li> |
|
|
@ -39,20 +58,43 @@ |
|
|
|
</el-card> |
|
|
|
</el-card> |
|
|
|
<div class="page"> |
|
|
|
<div class="page"> |
|
|
|
<div class="page-content"> |
|
|
|
<div class="page-content"> |
|
|
|
<step1 v-show="step === 1" ref="step1" :editing.sync="editing" @next="next" /> |
|
|
|
<step1 v-show="step === 1" |
|
|
|
<step2 v-if="step === 2" ref="step2" :editing.sync="editing" :setupId.sync="setupId" @next="next" /> |
|
|
|
ref="step1" |
|
|
|
<step3 v-if="step === 3" ref="step3" :editing.sync="editing" :setupId.sync="setupId" :competitionId.sync="competitionId" @next="next" /> |
|
|
|
:editing.sync="editing" |
|
|
|
<step4 v-if="step === 4" /> |
|
|
|
@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"> |
|
|
|
<!-- 处于编辑状态(列表点编辑按钮进来默认是查看状态,不可编辑,点了编辑按钮才可编辑),或者新增,才显示这几个按钮 --> |
|
|
|
<!-- 处于编辑状态(列表点编辑按钮进来默认是查看状态,不可编辑,点了编辑按钮才可编辑),或者新增,才显示这几个按钮 --> |
|
|
|
<template v-if="editing || !id"> |
|
|
|
<template v-if="editing || !id"> |
|
|
|
<el-button v-if="!publishStatus" @click="save(0)">保存{{ releaseType ? '草稿' : '' }}</el-button> |
|
|
|
<el-button v-if="!publishStatus" |
|
|
|
<el-button v-if="step === 2 || step === 3" type="primary" @click="prev">上一步</el-button> |
|
|
|
@click="save(0)">保存{{ releaseType ? '草稿' : '' }}</el-button> |
|
|
|
<el-button v-if="!releaseType || (releaseType && step === 3)" type="primary" @click="save(1)">发布</el-button> |
|
|
|
<el-button v-if="step === 2 || step === 3" |
|
|
|
<el-button v-else type="primary" @click="save(id ? 1 : 0, 2)">保存并下一步</el-button> |
|
|
|
type="primary" |
|
|
|
|
|
|
|
@click="prev">上一步</el-button> |
|
|
|
|
|
|
|
<el-button v-if="!releaseType || (releaseType && step === 3)" |
|
|
|
|
|
|
|
type="primary" |
|
|
|
|
|
|
|
@click="save(1)">发布</el-button> |
|
|
|
|
|
|
|
<el-button v-else |
|
|
|
|
|
|
|
type="primary" |
|
|
|
|
|
|
|
@click="save(id ? 1 : 0, 2)">保存并下一步</el-button> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<el-button type="danger" @click="preview" v-auth="'/match:管理:大赛详情:预览'">预览</el-button> |
|
|
|
<el-button type="danger" |
|
|
|
|
|
|
|
@click="preview" |
|
|
|
|
|
|
|
v-auth="'/match:管理:大赛详情:预览'">预览</el-button> |
|
|
|
<el-button @click="cancel">{{ editing ? '取消' : '返回' }}</el-button> |
|
|
|
<el-button @click="cancel">{{ editing ? '取消' : '返回' }}</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -70,7 +112,7 @@ import step4 from './step4' |
|
|
|
import { Loading } from 'element-ui' |
|
|
|
import { Loading } from 'element-ui' |
|
|
|
export default { |
|
|
|
export default { |
|
|
|
name: "add", |
|
|
|
name: "add", |
|
|
|
data() { |
|
|
|
data () { |
|
|
|
return { |
|
|
|
return { |
|
|
|
id: this.$route.query.id || '', |
|
|
|
id: this.$route.query.id || '', |
|
|
|
cache: this.$store.state.competitionCache, |
|
|
|
cache: this.$store.state.competitionCache, |
|
|
@ -93,12 +135,12 @@ export default { |
|
|
|
step3, |
|
|
|
step3, |
|
|
|
step4 |
|
|
|
step4 |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
mounted () { |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
methods: { |
|
|
|
// 如果是从第三步里的自定义项目入口进去后返回的,则要直接进入第三步 |
|
|
|
// 如果是从第三步里的自定义项目入口进去后返回的,则要直接进入第三步 |
|
|
|
resumeData() { |
|
|
|
resumeData () { |
|
|
|
if (this.cache) { |
|
|
|
if (this.cache) { |
|
|
|
this.step = 3 |
|
|
|
this.step = 3 |
|
|
|
this.editing = true |
|
|
|
this.editing = true |
|
|
@ -106,19 +148,19 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 展示loading |
|
|
|
// 展示loading |
|
|
|
showLoad() { |
|
|
|
showLoad () { |
|
|
|
this.loadIns = Loading.service() |
|
|
|
this.loadIns = Loading.service() |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 隐藏loading |
|
|
|
// 隐藏loading |
|
|
|
hideLoad() { |
|
|
|
hideLoad () { |
|
|
|
this.loadIns.close() |
|
|
|
this.loadIns.close() |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 提交 |
|
|
|
// 提交 |
|
|
|
save(status, next = 0) { |
|
|
|
save (status, next = 0) { |
|
|
|
this.$refs['step' + this.step].save(status, next, this.releaseType) |
|
|
|
this.$refs['step' + this.step].save(status, next, this.releaseType) |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 上一步 |
|
|
|
// 上一步 |
|
|
|
prev() { |
|
|
|
prev () { |
|
|
|
// 更改了信息才需要提示 |
|
|
|
// 更改了信息才需要提示 |
|
|
|
const { updateTime } = this.$refs['step' + this.step] |
|
|
|
const { updateTime } = this.$refs['step' + this.step] |
|
|
|
if (updateTime) { |
|
|
|
if (updateTime) { |
|
|
@ -134,7 +176,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 发布后的逻辑 |
|
|
|
// 发布后的逻辑 |
|
|
|
next(next, setupId, competitionId) { |
|
|
|
next (next, setupId, competitionId) { |
|
|
|
if (!next) { |
|
|
|
if (!next) { |
|
|
|
this.$router.push(`/match?page=${this.$store.state.matchPage}`) |
|
|
|
this.$router.push(`/match?page=${this.$store.state.matchPage}`) |
|
|
|
} else if (next === 2) { |
|
|
|
} else if (next === 2) { |
|
|
@ -150,16 +192,16 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 点击步骤条跳转 |
|
|
|
// 点击步骤条跳转 |
|
|
|
toStep(i) { |
|
|
|
toStep (i) { |
|
|
|
if (this.publishStatus && this.id && !this.editing) this.step = i |
|
|
|
if (this.publishStatus && this.id && !this.editing) this.step = i |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 预览 |
|
|
|
// 预览 |
|
|
|
preview() { |
|
|
|
preview () { |
|
|
|
util.local.set('match', this.$refs.step1.form) |
|
|
|
util.local.set('match', this.$refs.step1.form) |
|
|
|
window.open(this.$router.resolve('/matchPreview').href) |
|
|
|
window.open(this.$router.resolve('/matchPreview').href) |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 取消 |
|
|
|
// 取消 |
|
|
|
cancel() { |
|
|
|
cancel () { |
|
|
|
// 当前是编辑赛事,并且表单处于编辑状态,则返回到查看状态;查看状态,则返回到列表 |
|
|
|
// 当前是编辑赛事,并且表单处于编辑状态,则返回到查看状态;查看状态,则返回到列表 |
|
|
|
if (this.editing && this.$route.query.name) { |
|
|
|
if (this.editing && this.$route.query.name) { |
|
|
|
// 更改了信息才需要提示 |
|
|
|
// 更改了信息才需要提示 |
|
|
@ -179,7 +221,7 @@ export default { |
|
|
|
this.$router.push(`/match?page=${this.$store.state.matchPage}&platformSource=${this.$store.state.platformSource}`) |
|
|
|
this.$router.push(`/match?page=${this.$store.state.matchPage}&platformSource=${this.$store.state.platformSource}`) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
back() { |
|
|
|
back () { |
|
|
|
// 更改了信息才需要提示 |
|
|
|
// 更改了信息才需要提示 |
|
|
|
const { updateTime } = this.$refs['step' + this.step] |
|
|
|
const { updateTime } = this.$refs['step' + this.step] |
|
|
|
if (this.step < 4 && updateTime) { |
|
|
|
if (this.step < 4 && updateTime) { |
|
|
@ -194,7 +236,7 @@ export default { |
|
|
|
this.backPage() |
|
|
|
this.backPage() |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
backPage() { |
|
|
|
backPage () { |
|
|
|
this.$router.push(`/match?page=${this.$store.state.matchPage}&platformSource=${this.$store.state.platformSource}`) |
|
|
|
this.$router.push(`/match?page=${this.$store.state.matchPage}&platformSource=${this.$store.state.platformSource}`) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
@ -256,10 +298,10 @@ export default { |
|
|
|
.circle { |
|
|
|
.circle { |
|
|
|
color: #fff; |
|
|
|
color: #fff; |
|
|
|
border-color: #459ffb; |
|
|
|
border-color: #459ffb; |
|
|
|
background: #007EFF; |
|
|
|
background: #007eff; |
|
|
|
} |
|
|
|
} |
|
|
|
.text { |
|
|
|
.text { |
|
|
|
color: #007EFF; |
|
|
|
color: #007eff; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.done { |
|
|
|
.done { |
|
|
|