|
|
|
|
@ -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> |
|
|
|
|
@ -72,7 +120,7 @@ import step4 from './step4' |
|
|
|
|
import { Loading } from 'element-ui' |
|
|
|
|
export default { |
|
|
|
|
name: "add", |
|
|
|
|
data() { |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
id: this.$route.query.id || '', |
|
|
|
|
cache: this.$store.state.match.cache, |
|
|
|
|
@ -107,26 +155,26 @@ export default { |
|
|
|
|
step4 |
|
|
|
|
}, |
|
|
|
|
// 离开的时候判断是否有保存更改的信息,没有则拦截并提示 |
|
|
|
|
beforeRouteLeave(to, from, next) { |
|
|
|
|
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(() => { |
|
|
|
|
this.save(this.step,to.path,next) |
|
|
|
|
this.save(this.step, to.path, next) |
|
|
|
|
}).catch(() => { |
|
|
|
|
next() |
|
|
|
|
}) |
|
|
|
|
}else{ |
|
|
|
|
} else { |
|
|
|
|
next() |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
mounted () { |
|
|
|
|
this.getPer() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// 如果是从第三步里的自定义项目入口进去后返回的，则要直接进入第三步 |
|
|
|
|
resumeData() { |
|
|
|
|
resumeData () { |
|
|
|
|
if (this.cache) { |
|
|
|
|
this.step = 3 |
|
|
|
|
this.editing = true |
|
|
|
|
@ -134,32 +182,32 @@ export default { |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 查询客户增值模块（如果返回了true，则显示设置完整比赛选项） |
|
|
|
|
getPer() { |
|
|
|
|
getPer () { |
|
|
|
|
this.$get(this.api.getCustomerOrder).then(({ show }) => { |
|
|
|
|
this.hasPer = show |
|
|
|
|
show || this.$parent.hideArch() |
|
|
|
|
}).catch(err => {}) |
|
|
|
|
}).catch(err => { }) |
|
|
|
|
}, |
|
|
|
|
// 展示loading |
|
|
|
|
showLoad() { |
|
|
|
|
showLoad () { |
|
|
|
|
this.loadIns = Loading.service() |
|
|
|
|
}, |
|
|
|
|
// 隐藏loading |
|
|
|
|
hideLoad() { |
|
|
|
|
hideLoad () { |
|
|
|
|
this.loadIns.close() |
|
|
|
|
}, |
|
|
|
|
// 提交 |
|
|
|
|
save(status, next = 0,cb) { |
|
|
|
|
console.log('status=>',status) |
|
|
|
|
console.log('cb=>',cb) |
|
|
|
|
console.log('this.step=>',this.step) |
|
|
|
|
this.$refs['step' + this.step].save(status, next, this.releaseType,cb) |
|
|
|
|
save (status, next = 0, cb) { |
|
|
|
|
console.log('status=>', status) |
|
|
|
|
console.log('cb=>', cb) |
|
|
|
|
console.log('this.step=>', this.step) |
|
|
|
|
this.$refs['step' + this.step].save(status, next, this.releaseType, cb) |
|
|
|
|
}, |
|
|
|
|
// 上一步 |
|
|
|
|
prev() { |
|
|
|
|
prev () { |
|
|
|
|
// 更改了信息才需要提示 |
|
|
|
|
const { updateTime } = this.$refs['step' + this.step] |
|
|
|
|
if (updateTime) { |
|
|
|
|
if (this.$refs['step' + this.step] && updateTime) { |
|
|
|
|
this.$confirm(`编辑的内容未保存，是否保存？`, '提示', { |
|
|
|
|
type: 'warning' |
|
|
|
|
}).then(() => { |
|
|
|
|
@ -172,10 +220,7 @@ export default { |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 发布后的逻辑 |
|
|
|
|
next(next, setupId, competitionId,type) { |
|
|
|
|
console.log('next==>',next) |
|
|
|
|
console.log('setupId==>',setupId) |
|
|
|
|
console.log('competitionId==>',competitionId) |
|
|
|
|
next (next, setupId, competitionId, type) { |
|
|
|
|
if (!next) { |
|
|
|
|
this.$router.push(`/match?page=${this.$store.state.matchPage}`) |
|
|
|
|
} else if (next === 2) { |
|
|
|
|
@ -190,29 +235,29 @@ export default { |
|
|
|
|
this.step-- |
|
|
|
|
} else { |
|
|
|
|
console.log(99999999) |
|
|
|
|
if(typeof setupId === 'function') { |
|
|
|
|
if (typeof setupId === 'function') { |
|
|
|
|
setupId() |
|
|
|
|
}else if(typeof type === 'function') { |
|
|
|
|
} else if (typeof type === 'function') { |
|
|
|
|
type() |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 点击步骤条跳转 |
|
|
|
|
toStep(i) { |
|
|
|
|
toStep (i) { |
|
|
|
|
if (this.id && !this.editing) this.step = i |
|
|
|
|
}, |
|
|
|
|
// 预览 |
|
|
|
|
preview() { |
|
|
|
|
preview () { |
|
|
|
|
util.local.set('match', this.$refs.step1.form) |
|
|
|
|
window.open(this.$router.resolve('/match/preview').href) |
|
|
|
|
}, |
|
|
|
|
// 取消 |
|
|
|
|
cancel() { |
|
|
|
|
cancel () { |
|
|
|
|
// 当前是编辑赛事，并且表单处于编辑状态，则返回到查看状态；查看状态，则返回到列表 |
|
|
|
|
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(() => { |
|
|
|
|
@ -227,11 +272,10 @@ export default { |
|
|
|
|
this.$router.push(`/match?page=${this.$store.state.match.page}`) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
back() { |
|
|
|
|
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(() => { |
|
|
|
|
@ -243,7 +287,7 @@ export default { |
|
|
|
|
this.backPage() |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
backPage() { |
|
|
|
|
backPage () { |
|
|
|
|
this.$router.push(`/match?page=${this.$store.state.match.page}`) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -305,10 +349,10 @@ export default { |
|
|
|
|
.circle { |
|
|
|
|
color: #fff; |
|
|
|
|
border-color: #459ffb; |
|
|
|
|
background: #007EFF; |
|
|
|
|
background: #007eff; |
|
|
|
|
} |
|
|
|
|
.text { |
|
|
|
|
color: #007EFF; |
|
|
|
|
color: #007eff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.done { |
|
|
|
|
|
