parent
4e9e45df5d
commit
053d5c29de
14 changed files with 4800 additions and 0 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,961 @@ |
||||
<template> |
||||
<div class="wrap index"> |
||||
<div class="search"> |
||||
<h6>赛事竞技，精彩纷呈</h6> |
||||
<div class="input"> |
||||
<img src="@/assets/img/search.png" alt=""> |
||||
<input type="text" placeholder="请输入关键词" v-model="keyword"> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="main"> |
||||
<div class="center-wrap list-inner"> |
||||
<ul v-if="token" class="nav"> |
||||
<li :class="{ active: form.eventType === item.id }" v-for="(item, index) in typeList" :key="index" @click="changeType(item.id)">{{ item.name }} |
||||
</li> |
||||
</ul> |
||||
<div class="list-wrap"> |
||||
<!-- 课程筛选 --> |
||||
<div class="filter"> |
||||
<div> |
||||
<dl> |
||||
<dt>筛选排序：</dt> |
||||
<dd v-for="(item, i) in sorts" :key="i" :class="{active: form.sequence == item.id}" @click="changeSort(item.id)">{{ item.name }}</dd> |
||||
</dl> |
||||
</div> |
||||
<el-button type="primary" @click="$router.push('manage')">我的项目</el-button> |
||||
</div> |
||||
|
||||
<div class="list"> |
||||
<template v-if="listData.length"> |
||||
<ul> |
||||
<li v-for="(item,index) in listData" :key="index" @click="toDetail(item)"> |
||||
<div class="left"> |
||||
<!-- <el-button v-if="item.status === 1 || item.status === 2 || item.curStage" :class="['stage-label', {playing: item.curStage}]" type="primary">{{ item.status === 1 || item.status === 2 ? '报名中' : item.curStage ? '竞赛中' : '' }}</el-button> --> |
||||
<div class="cover"> |
||||
<img :src="item.coverUrl || 'https://huoran.oss-cn-shenzhen.aliyuncs.com/20220623/png/1539857403162943488.png'" alt=""> |
||||
</div> |
||||
<div class="info"> |
||||
<div class="title">{{ item.projectName }}</div> |
||||
<div class="metas"> |
||||
<div> |
||||
<span class="label">报名时间：</span><span class="val">{{ item.signUpStartTime}} ~ {{ item.signUpEndTime }}</span> |
||||
</div> |
||||
<div> |
||||
<span class="label">项目时间：</span><span class="val">{{ item.playStartTime}} ~ {{ item.playEndTime }}</span> |
||||
</div> |
||||
<template v-if="item.initiator"> |
||||
<div :class="{'flex-top': item.initiator.split(',').length > 1}"> |
||||
<span class="label">发起方： </span> |
||||
<span class="val">{{ item.initiator }}</span> |
||||
</div> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="right"> |
||||
<el-dropdown v-if="item.playingStages && item.playingStages.length > 1" class="m-l-10" @click.stop="stageClick" @command="e => chooseStage(e, item)"> |
||||
<el-button type="primary" style="background-color: #f96d6d;border: 0;"> |
||||
选择竞赛<i class="el-icon-arrow-down el-icon--right"></i> |
||||
</el-button> |
||||
<el-dropdown-menu slot="dropdown"> |
||||
<el-dropdown-item v-for="(stage, i) in item.playingStages" :key="i" :command="stage">进入{{ stage.stageName }}</el-dropdown-item> |
||||
</el-dropdown-menu> |
||||
</el-dropdown> |
||||
<p class="status" |
||||
v-else-if="item.status != 4 || (item.status == 4 && item.curStage)" |
||||
:class="{wait: item.status == 0,signing: item.status == 2,signed: item.status == 1,playing: item.status == 4 && item.curStage,finish: item.status == 3 || item.status == 5}" :title="item.status == 4 ? item.stageName : statusList[item.status]" |
||||
@click.stop="signup(item)">{{ item.status == 4 ? item.stageName : statusList[item.status] }}</p> |
||||
<p class="end-text" v-if="item.end"> |
||||
距离{{ item.status == 4 ? item.endText : endList[item.status] }}还有 |
||||
<em >{{ item.end }}</em> |
||||
</p> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
<div class="pagination"> |
||||
<el-pagination background layout="total, prev, pager, next" :total="totals" |
||||
@current-change="handleCurrentChange" |
||||
:current-page="page"> |
||||
</el-pagination> |
||||
</div> |
||||
</template> |
||||
<template v-else> |
||||
<div class="empty"> |
||||
<div> |
||||
<img src="@/assets/img/none.png" alt=""> |
||||
<p>暂无赛事</p> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
<el-dialog title="报名" :visible.sync="peopleSignupVisible" :close-on-click-modal="false" width="300px"> |
||||
<el-form class="dia-form"> |
||||
<el-form-item> |
||||
<el-input placeholder="请输入4位数大赛邀请码" maxlength="4" v-model="peopleSignupForm.registrationInvitationCode"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button size="small" type="primary" @click="peopleSignupSubmit">报名</el-button> |
||||
<el-button size="small" @click="peopleSignupVisible = false">取消</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
<el-dialog title="报名" :visible.sync="enterVisible" :close-on-click-modal="false" width="300px"> |
||||
<el-form class="dia-form"> |
||||
<p style="margin-bottom: 5px">请选择要加入的团队</p> |
||||
<el-form-item> |
||||
<el-select class="w-100" v-model="enterForm.teamId" filterable> |
||||
<el-option v-for="(item, i) in teams" :key="i" :label="item.teamName" :value="item.teamId"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-input placeholder="请输入6位数团队邀请码" maxlength="6" v-model="enterForm.invitationCode"></el-input> |
||||
</el-form-item> |
||||
<el-form-item v-if="curItem.setup.isNeedCode"> |
||||
<el-input placeholder="请输入4位数大赛邀请码" maxlength="4" v-model="enterForm.registrationInvitationCode"></el-input> |
||||
</el-form-item> |
||||
<p class="tips"> |
||||
查找不到团队？点击 <el-link :underline="false" type="primary" @click="toTeam">创建团队</el-link> |
||||
</p> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button size="small" type="primary" @click="enterSubmit">报名</el-button> |
||||
<el-button size="small" @click="enterVisible = false">取消</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
<el-dialog title="创建团队" :visible.sync="teamVisible" :close-on-click-modal="false" width="300px"> |
||||
<el-form class="dia-form"> |
||||
<el-form-item> |
||||
<el-input placeholder="请输入团队名称" maxlength="10" v-model="teamForm.teamName"></el-input> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-input placeholder="请输入6位数团队邀请码" maxlength="6" v-model="teamForm.invitationCode"></el-input> |
||||
</el-form-item> |
||||
<el-form-item v-if="curItem.setup.isNeedCode"> |
||||
<el-input placeholder="请输入4位数大赛邀请码" maxlength="4" v-model="teamForm.registrationInvitationCode"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button size="small" type="primary" @click="teamSubmit">创建并报名</el-button> |
||||
<el-button size="small" @click="teamVisible = false">取消</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { mapState, mapMutations } from "vuex"; |
||||
import { Loading } from "element-ui"; |
||||
import Setting from "@/setting" |
||||
import util from "@/libs/util" |
||||
|
||||
export default { |
||||
name: "match", |
||||
data() { |
||||
return { |
||||
timer: null, |
||||
redisTimer: null, |
||||
token: util.local.get(Setting.tokenKey), |
||||
statusList: ["待报名", "取消报名", "马上报名", "报名截止", "进入初赛", "已结束"], |
||||
endList: ["报名开始", "报名截止", "报名截止", "竞赛开始", "竞赛结束", ""], |
||||
typeList: [ |
||||
{ |
||||
id: '', |
||||
name: "本校项目" |
||||
}, |
||||
{ |
||||
id: 0, |
||||
name: "已报名" |
||||
} |
||||
], |
||||
provinces: [], |
||||
cities: [], |
||||
form: { |
||||
sequence: 2, // 排序(1:近期排名 2.最近更新) |
||||
eventType: '' |
||||
}, |
||||
squareScopes: [ |
||||
{ |
||||
id: 3, |
||||
name: '不限' |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '全平台' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '指定区域/院校' |
||||
} |
||||
], |
||||
scopes: [ |
||||
{ |
||||
id: 3, |
||||
name: '不限' |
||||
}, |
||||
{ |
||||
id: 0, |
||||
name: '本校内' |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '全平台' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '指定区域/院校' |
||||
} |
||||
], |
||||
sorts: [ |
||||
{ |
||||
id: 2, |
||||
name: '最近更新' |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '近期报名' |
||||
} |
||||
], |
||||
sort: 1, |
||||
keyword: "", |
||||
searchTimer: null, |
||||
page: 1, |
||||
pageSize: 10, |
||||
totals: 0, |
||||
listData: [], |
||||
covers: [], |
||||
loadIns: null, |
||||
contestIds: [], |
||||
timerList: [], |
||||
|
||||
|
||||
enterVisible: false, |
||||
enterForm: { |
||||
competitionId: '', |
||||
teamId: '', |
||||
invitationCode: '', |
||||
registrationInvitationCode: '', |
||||
whetherSignUp: 1 |
||||
}, |
||||
|
||||
teamVisible: false, |
||||
teams: [], |
||||
teamNameRepeat: false, |
||||
teamForm: { |
||||
competitionId: '', |
||||
registrationInvitationCode: '', |
||||
teamName: '', |
||||
invitationCode: '', |
||||
whetherSignUp: 1 |
||||
}, |
||||
curItem: { |
||||
setup: {} |
||||
}, |
||||
peopleSignupVisible: false, |
||||
peopleSignupForm: { |
||||
registrationInvitationCode: '' |
||||
}, |
||||
curRow: {} |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapState('match', [ |
||||
'eventType' |
||||
]) |
||||
}, |
||||
watch: { |
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer); |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData(); |
||||
}, 500); |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.getData() |
||||
this.$once('hook:beforeDestroy', function() { |
||||
this.clearTimer() |
||||
clearInterval(this.redisTimer) |
||||
}) |
||||
}, |
||||
methods: { |
||||
...mapMutations('match', [ |
||||
'SET_TYPE' |
||||
]), |
||||
getList() { |
||||
this.clearTimer() |
||||
const { form } = this |
||||
const { eventType, competitionScope } = form |
||||
const data = { |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
platformSource: 2, |
||||
keyWords: this.keyword, |
||||
...this.form |
||||
} |
||||
this.$post(this.api.schoolActivities, data).then(({ data }) => { |
||||
const { records } = data |
||||
this.listData = records |
||||
this.totals = data.total |
||||
// this.handleStatus() |
||||
// this.loadIns.close(); |
||||
}).catch(res => { |
||||
// this.loadIns.close() |
||||
}) |
||||
}, |
||||
// 定时处理时间及状态 |
||||
handleStatus() { |
||||
this.listData.map(item => { |
||||
if (item.signUpStartTime && item.signUpEndTime && item.playStartTime && item.playEndTime) { |
||||
let total = '' |
||||
let time = '' |
||||
let status = '' |
||||
let signUpStartTime = new Date(this.core.dateCompatible(item.signUpStartTime)) // 报名开始时间 |
||||
let signUpEndTime = new Date(this.core.dateCompatible(item.signUpEndTime)) // 报名结束时间 |
||||
let playStartTime = new Date(this.core.dateCompatible(item.playStartTime)) // 比赛开始时间 |
||||
let playEndTime = new Date(this.core.dateCompatible(item.playEndTime)) // 比赛结束时间 |
||||
let timer = setInterval(() => { |
||||
const now = new Date() |
||||
if (now < signUpStartTime) { // 报名没开始 |
||||
status = 0 |
||||
total = signUpStartTime - now |
||||
} else if (now > signUpStartTime && now < signUpEndTime) { // 报名进行中 |
||||
// whetherToSignUp 0已报名，1未报名 |
||||
status = item.whetherToSignUp ? 2 : 1 // 1已报名，2立即报名 |
||||
total = signUpEndTime - now |
||||
} else if (now > signUpEndTime && now < playStartTime) { // 报名结束了,但比赛没开始 |
||||
status = 3 |
||||
total = playStartTime - now |
||||
} else if (now > playStartTime && now < playEndTime) { // 比赛进行中 |
||||
// 如果是完整比赛 |
||||
if (item.releaseType) { |
||||
// 进行中的赛事，则遍历每个阶段的开始结束时间，看阶段比赛是否开始 |
||||
let curStage = null |
||||
const stages = item.competitionStageList |
||||
if (stages) { |
||||
item.playingStages = [] |
||||
// 报了名才算作可以进入的阶段 |
||||
item.whetherToSignUp === 0 && stages.forEach(e => { |
||||
if (now >= new Date(e.startTime) && now <= new Date(e.endTime) && e.method !== 2) item.playingStages.push(e) |
||||
}) |
||||
for (const i in stages) { |
||||
const e = stages[i] |
||||
const startTime = new Date(e.startTime) |
||||
const endTime = new Date(e.endTime) |
||||
if (now < startTime) { // 阶段比赛未开始，不显示进入比赛按钮 |
||||
this.$set(item, 'stageName', '') |
||||
this.$set(item, 'endText', '阶段开始') |
||||
total = startTime - now |
||||
break |
||||
} else if (now >= startTime && now <= endTime) { // 阶段比赛进行中，显示进入比赛按钮 |
||||
if (item.whetherToSignUp === 0 && e.method !== 2) this.$set(item, 'stageName', e.count ? '已提交' : '进入' + e.stageName) // 报名了并且没参加比赛才能进入比赛 |
||||
this.$set(item, 'endText', '阶段结束') |
||||
curStage = e |
||||
total = endTime - now |
||||
break |
||||
} else if (stages[i + 1] && now > endTime && now < new Date(stages[i + 1].startTime)) { // 过了该阶段的结束时间，但是没到下个阶段的开始时间，不显示进入比赛按钮 |
||||
this.$set(item, 'stageName', '') |
||||
this.$set(item, 'endText', '阶段开始') |
||||
total = new Date(stages[i + 1].startTime) - now |
||||
break |
||||
} else if (i === stages.length - 1) { // 当前时间在比赛开始结束时间之间，并且是最后一个阶段结束时间之后 |
||||
this.$set(item, 'stageName', '') |
||||
this.$set(item, 'endText', '竞赛结束') |
||||
total = playEndTime - now |
||||
break |
||||
} |
||||
} |
||||
} |
||||
item.curStage = curStage |
||||
} else { // 仅发布信息 |
||||
this.$set(item, 'endText', '竞赛结束') |
||||
total = playEndTime - now |
||||
} |
||||
status = 4 |
||||
} else if (now > playEndTime) { // 比赛结束 |
||||
status = 5 |
||||
} |
||||
this.$set(item, 'status', status) |
||||
total = total / 1000 |
||||
--total |
||||
if (total > 86400) { // 超过一天则显示天数 |
||||
// clearInterval(timer) |
||||
this.$set(item, 'end', Math.floor(total / 86400) + '天') |
||||
} else if (total > 0) { // 一天之内，显示时分秒 |
||||
let hours = Math.floor(total / (60 * 60)) |
||||
let minutes = Math.floor(total % (60 * 60) / 60) |
||||
let seconds = Math.floor(total % (60 * 60) % 60) |
||||
time = `${this.core.formateTime(hours)}:${this.core.formateTime(minutes)}:${this.core.formateTime(seconds)}` |
||||
if (total > 0) this.$set(item, 'end', time) |
||||
} else if (item.status === 5) { // 竞赛结束，清除定时器 |
||||
clearInterval(timer) |
||||
} |
||||
}, 1000) |
||||
this.timerList.push(timer) |
||||
} |
||||
}) |
||||
}, |
||||
// 清除定时器 |
||||
clearTimer() { |
||||
this.timerList.forEach(n => { |
||||
clearInterval(n) |
||||
}) |
||||
this.timerList = [] |
||||
}, |
||||
getData() { |
||||
// this.loadIns = Loading.service() |
||||
this.getList() |
||||
if (!Setting.isDev) { |
||||
clearInterval(this.redisTimer) |
||||
this.redisTimer = setInterval(this.getRedis, 1000) |
||||
} |
||||
}, |
||||
initData() { |
||||
this.page = 1 |
||||
this.getData() |
||||
}, |
||||
// 获取redis缓存 |
||||
getRedis() { |
||||
this.$post(this.api.getRedisCacheCompetition).then(({ data }) => { |
||||
data && this.getList() |
||||
}).catch(res => {}) |
||||
}, |
||||
// 获取省份 |
||||
getProvince() { |
||||
this.$get(this.api.queryProvince).then(({ list }) => { |
||||
this.provinces = list |
||||
}).catch(res => {}) |
||||
}, |
||||
// 获取城市 |
||||
getCity() { |
||||
const { form } = this |
||||
form.cityId = '' |
||||
form.provinceId ? |
||||
this.$get(this.api.queryCity, { |
||||
provinceId: form.provinceId |
||||
}).then(({ list }) => { |
||||
this.cities = list |
||||
this.initData() |
||||
}).catch(res => {}) : |
||||
this.initData() |
||||
}, |
||||
changeType(type) { |
||||
const { form } = this |
||||
form.competitionScope = 3 |
||||
form.provinceId = '' |
||||
form.cityId = '' |
||||
form.sequence = 2 |
||||
form.eventType = type |
||||
this.initData() |
||||
}, |
||||
// 筛选范围 |
||||
changeScope(type) { |
||||
this.form.competitionScope = type |
||||
this.initData() |
||||
}, |
||||
// 筛选排序 |
||||
changeSort(type) { |
||||
this.form.sequence = type |
||||
this.initData() |
||||
}, |
||||
toDetail(item) { |
||||
this.SET_TYPE(this.form.eventType) |
||||
this.$router.push(`/activity/details?id=${item.id}`); |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.page = val; |
||||
this.getData(); |
||||
}, |
||||
|
||||
// 个人报名提交 |
||||
peopleSignupSubmit() { |
||||
this.$post(this.api.addCompetitionRegistration, { |
||||
competitionId: this.curRow.id, |
||||
registrationInvitationCode: this.peopleSignupForm.registrationInvitationCode |
||||
}).then(res => { |
||||
this.peopleSignupVisible = false |
||||
this.getData() |
||||
this.$message.success('报名成功') |
||||
}).catch(res => {}) |
||||
}, |
||||
// 团队报名提交 |
||||
enterSubmit() { |
||||
const form = this.enterForm |
||||
if (!form.teamId) return util.errorMsg('请选择团队') |
||||
if (!form.invitationCode) return util.errorMsg('请输入团队邀请码') |
||||
if (this.curItem.setup.isNeedCode && !form.registrationInvitationCode) return util.errorMsg('请输入大赛邀请码') |
||||
this.$post(this.api.joinCompetitionTeam, form).then(res => { |
||||
this.enterVisible = false |
||||
this.getData() |
||||
util.successMsg('报名成功！') |
||||
}).catch(res => {}) |
||||
}, |
||||
|
||||
|
||||
// 创建团队 |
||||
toTeam() { |
||||
this.teamForm = { |
||||
competitionId: this.curItem.id, |
||||
teamName: '', |
||||
invitationCode: '', |
||||
registrationInvitationCode: '', |
||||
whetherSignUp: 1 |
||||
} |
||||
this.teamVisible = true |
||||
}, |
||||
// 获取团队列表 |
||||
getTeam() { |
||||
this.$get(this.api.searchTeam, { |
||||
teamName: '', |
||||
competitionId: this.curItem.id |
||||
}).then(({ teamList }) => { |
||||
this.teams = teamList |
||||
}).catch(res => {}) |
||||
}, |
||||
// 团队提交 |
||||
teamSubmit() { |
||||
const form = this.teamForm |
||||
if (!form.teamName) return util.errorMsg('请输入团队名称') |
||||
if (this.teamNameRepeat) return util.errorMsg('团队名称重复，请重新输入') |
||||
if (form.invitationCode.length !== 6) return util.errorMsg('请输入6位数团队邀请码') |
||||
if (this.curItem.setup.isNeedCode && !form.registrationInvitationCode) return util.errorMsg('请输入大赛邀请码') |
||||
this.$post(this.api.addCompetitionTeam, form).then(res => { |
||||
this.teamVisible = false |
||||
this.enterVisible = false |
||||
this.getData() |
||||
util.successMsg('报名成功！') |
||||
}).catch(res => {}) |
||||
}, |
||||
stageClick(e) {}, |
||||
// 选择要进入的阶段 |
||||
chooseStage(e, item) { |
||||
item.curStage = e |
||||
this.signup(item) |
||||
}, |
||||
// 判断是否能进赛事 |
||||
getAllow(item) { |
||||
// 是否允许参加赛事（淘汰赛制） |
||||
if (item.rule === 1) { |
||||
this.$post(this.api.allowedParticipateCompetition, { |
||||
competitionId: item.id, |
||||
number: item.curStage.number, |
||||
stageId: item.curStage.stageId, |
||||
teamId: item.teamId, |
||||
}).then(res => { |
||||
this.toSub() |
||||
}).catch(res => {}) |
||||
} else { |
||||
this.toSub() |
||||
} |
||||
}, |
||||
// 报名 |
||||
signup(item) { |
||||
const { status, id } = item |
||||
const { competitionType } = item.setup |
||||
// 如果没登录，提示去登录 |
||||
if (util.local.get(Setting.tokenKey)) { |
||||
this.curItem = item |
||||
if (status == 4) { // 进入比赛 |
||||
// 参加过比赛不让参加 |
||||
if (item.curStage.count) return util.errorMsg('您已经参加过该阶段竞赛！') |
||||
if (item.isDisable === 1) return util.errorMsg('当前用户已被禁赛，如有疑问，请联系平台管理员。') // 被禁用的用户不能进入大赛 |
||||
// 团队赛，则判断是否为参赛人员 |
||||
if (competitionType) { |
||||
this.$post(this.api.isParticipant, { |
||||
competitionId: id, |
||||
stageId: item.curStage.stageId, |
||||
teamId: item.teamId, |
||||
}).then(res => { |
||||
this.getAllow(item) |
||||
}).catch(res => {}) |
||||
} else { |
||||
this.getAllow(item) |
||||
} |
||||
} else if (status == 2) { // 报名 |
||||
// 团队赛报名 |
||||
if (competitionType) { |
||||
this.getTeam() |
||||
this.enterForm = { |
||||
competitionId: id, |
||||
teamId: '', |
||||
invitationCode: '', |
||||
registrationInvitationCode: '' |
||||
} |
||||
this.enterVisible = true |
||||
} else { // 个人赛报名 |
||||
if (item.setup.isNeedCode) { |
||||
this.curRow = item |
||||
this.peopleSignupForm.registrationInvitationCode = '' |
||||
this.peopleSignupVisible = true |
||||
} else { |
||||
this.$post(this.api.addCompetitionRegistration, { |
||||
competitionId: id |
||||
}).then(res => { |
||||
this.getData() |
||||
this.$message.success('报名成功') |
||||
}).catch(res => {}) |
||||
} |
||||
} |
||||
} else if (status == 1) { |
||||
// 已报名，点击取消报名 |
||||
this.$confirm('是否要取消报名？', '提示', { |
||||
type: 'success' |
||||
}).then(() => { |
||||
this.$post(`${this.api.cancelRegistration}?competitionId=${item.id}`).then(res => { |
||||
this.getData() |
||||
this.$message.success('取消报名成功') |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
} |
||||
} else { |
||||
this.$confirm('请先登录，是否直接前往登录？', "提示", { |
||||
type: 'success' |
||||
}).then(() => { |
||||
this.SET_SOURCE(item.id) |
||||
this.$router.push('/login') |
||||
}).catch(() => {}) |
||||
} |
||||
}, |
||||
// 进入python系统 |
||||
toPython() { |
||||
const form = this.curItem.curStage |
||||
let token = util.local.get(Setting.tokenKey); |
||||
util.cookies.set('assessmentId', '', -1) |
||||
util.cookies.set('startTime', '', -1) |
||||
util.cookies.set('stopTime', '', -1) |
||||
util.cookies.set('projectId', form.projectId) |
||||
util.cookies.set('token', token) |
||||
util.cookies.set('courseId', form.cid) |
||||
util.cookies.set('curriculumName', escape(form.systemName)) |
||||
util.cookies.set('systemId', form.systemId) |
||||
util.cookies.set('competitionId', this.curItem.id) |
||||
util.cookies.set('stageId', form.stageId) |
||||
util.cookies.set('teamId', this.curItem.teamId) |
||||
util.cookies.set('stopTime', form.endTime) |
||||
util.cookies.set('resultsDetails', form.resultsDetails) |
||||
util.cookies.set('resultAnnouncementTime', form.resultAnnouncementTime) |
||||
util.cookies.set('fromManager', '', -1) |
||||
// 8个python子系统都跳这个地址，子系统会通过cookie里的systemId识别展示哪套系统 |
||||
location.href = process.env.NODE_ENV === 'development' ? |
||||
`http://${location.hostname}:8085/#/` : |
||||
Setting.isPro ? |
||||
`https://${location.hostname}/pyTrials` : |
||||
`${location.origin}/pyTrials` |
||||
}, |
||||
// 进入子系统 |
||||
toSub() { |
||||
const form = this.curItem |
||||
const { systemId, projectId, cid, stageId } = form.curStage |
||||
const competitionId = form.id |
||||
const teamId = form.teamId |
||||
let token = util.local.get(Setting.tokenKey); |
||||
if (systemId == 11) { |
||||
// 银行系统 |
||||
location.href = `${Setting.systemPath}/#/index/list?curriculumName=${this.curriculumName}&token=${token}&cid=${cid}&systemId=${systemId}&projectId=${projectId}&competitionId=${competitionId}&stageId=${stageId}&teamId=${teamId}&assessmentId=&classId=&stopTime=&test=true` |
||||
} else if (systemId == 12) { |
||||
// 众筹系统 |
||||
window.open(`http://120.78.139.126:8879?systemId=${systemId}&courseId=${cid}&projectId=${projectId}&token=${token}&userId=${this.userId}&classId=1&competitionId=${competitionId}&stageId=${stageId}&teamId=${teamId}`); |
||||
} else { |
||||
// python系统 |
||||
this.toPython() |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.search { |
||||
position: relative; |
||||
padding: 100px 0 130px; |
||||
text-align: center; |
||||
background: url(../../../assets/img/match-bg4.png) (27px 10px)/auto no-repeat, |
||||
url(../../../assets/img/match-bg5.png) (98% 20px)/auto no-repeat, |
||||
url(../../../assets/img/match-bg3.png) 0 0/100% 100% no-repeat; |
||||
h6 { |
||||
margin-bottom: 25px; |
||||
font-size: 26px; |
||||
color: #fff; |
||||
} |
||||
.input { |
||||
position: relative; |
||||
width: 700px; |
||||
margin: 0 auto; |
||||
} |
||||
img { |
||||
position: absolute; |
||||
top: 19px; |
||||
left: 14px; |
||||
} |
||||
input { |
||||
width: 100%; |
||||
height: 62px; |
||||
line-height: 62px; |
||||
padding: 0 50px; |
||||
font-size: 18px; |
||||
color: #333; |
||||
border: 0; |
||||
outline: none; |
||||
border-radius: 4px; |
||||
} |
||||
} |
||||
.main{ |
||||
background: url(../../../assets/img/match-bg1.png) (0px 95px)/auto auto no-repeat, |
||||
url(../../../assets/img/match-bg2.png) (98% bottom)/auto auto no-repeat; |
||||
.center-wrap { |
||||
width: 1078px; |
||||
} |
||||
} |
||||
.filter { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
width: 100%; |
||||
padding: 0 20px; |
||||
margin-bottom: 20px; |
||||
background-color: #fff; |
||||
dl { |
||||
display: flex; |
||||
align-items: center; |
||||
margin: 20px 0; |
||||
dt { |
||||
color: #333; |
||||
font-size: 16px; |
||||
font-weight: 600; |
||||
white-space: nowrap; |
||||
} |
||||
dd { |
||||
padding: 5px 15px; |
||||
color: #6a6a6a; |
||||
font-size: 16px; |
||||
white-space: nowrap; |
||||
cursor: pointer; |
||||
border-radius: 4px; |
||||
&.active { |
||||
color: $main-color; |
||||
background-color: #e6f0ff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.select-wrap { |
||||
display: inline-flex; |
||||
align-items: center; |
||||
margin: 0 10px; |
||||
.label { |
||||
margin-right: 10px; |
||||
white-space: nowrap; |
||||
} |
||||
.el-select { |
||||
width: 130px; |
||||
} |
||||
} |
||||
.list-inner { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items:flex-start; |
||||
} |
||||
.nav{ |
||||
width: 156px; |
||||
text-align: right; |
||||
overflow: hidden; |
||||
background-color: #fff; |
||||
li { |
||||
padding: 0 24px; |
||||
font-size: 16px; |
||||
color: #666; |
||||
line-height: 48px; |
||||
border-bottom: 2px solid #f3f6fa; |
||||
border-right: 2px solid transparent; |
||||
cursor: pointer; |
||||
&:before { |
||||
content: ''; |
||||
display: inline-block; |
||||
width: 3px; |
||||
height: 3px; |
||||
margin-right: 10px; |
||||
vertical-align: middle; |
||||
border-radius: 50%; |
||||
background-color: #666; |
||||
} |
||||
&.active { |
||||
color: $main-color; |
||||
border-right-color: $main-color; |
||||
&:before { |
||||
background-color: $main-color; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.list-wrap { |
||||
width: calc(100% - 180px); |
||||
margin-left: 24px; |
||||
.list { |
||||
li { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
padding: 16px; |
||||
margin-bottom: 12px; |
||||
transition: all 0.3s; |
||||
cursor: pointer; |
||||
border-radius: 6px; |
||||
background-color: #fff; |
||||
.right { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: flex-end; |
||||
flex: 1; |
||||
|
||||
.status { |
||||
max-width: 120px; |
||||
padding: 0 23px; |
||||
line-height: 34px; |
||||
font-size: 14px; |
||||
color: #fff; |
||||
white-space: nowrap; |
||||
background-color: #52C41A; |
||||
border-radius: 4px; |
||||
@include ellipsis(); |
||||
&.wait { |
||||
background-color: #FAAD14; |
||||
} |
||||
|
||||
&.signing { |
||||
background-color: $main-color; |
||||
} |
||||
|
||||
&.signed { |
||||
background-color: #52C41A; |
||||
} |
||||
&.playing { |
||||
background-color: #f96d6d; |
||||
} |
||||
|
||||
&.finish { |
||||
background-color: #ccc; |
||||
} |
||||
} |
||||
|
||||
.btn { |
||||
padding: 12px 20px; |
||||
color: #fff; |
||||
background-color: #cb221c; |
||||
border-radius: 4px; |
||||
cursor: pointer; |
||||
|
||||
&:hover { |
||||
opacity: .9; |
||||
} |
||||
|
||||
&.disabled { |
||||
cursor: not-allowed; |
||||
background-color: #969696; |
||||
} |
||||
} |
||||
|
||||
.end-text { |
||||
margin-top: 10px; |
||||
color: rgba(0, 0, 0, .65); |
||||
font-size: 12px; |
||||
white-space: nowrap; |
||||
|
||||
em { |
||||
font-style: normal; |
||||
color: #f00; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&:hover { |
||||
.left { |
||||
.info { |
||||
.title { |
||||
color: $main-color; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.left { |
||||
position: relative; |
||||
display: inline-flex; |
||||
.stage-label { |
||||
position: absolute; |
||||
top: -16px; |
||||
left: -16px; |
||||
border: 0; |
||||
background-color: rgb(101, 227, 181); |
||||
&.playing { |
||||
background-color: rgb(251, 174, 41); |
||||
} |
||||
} |
||||
.cover { |
||||
img { |
||||
width: 275px; |
||||
height: 175px; |
||||
border-radius: 6px; |
||||
} |
||||
} |
||||
|
||||
.info { |
||||
margin-left: 16px; |
||||
.title { |
||||
margin-bottom: 10px; |
||||
font-size: 20px; |
||||
font-weight: 500; |
||||
color: #0B1D30; |
||||
line-height: 1; |
||||
} |
||||
.metas { |
||||
font-size: 14px; |
||||
color: #666; |
||||
div { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-bottom: 5px; |
||||
|
||||
&.flex-top { |
||||
align-items: flex-start; |
||||
} |
||||
} |
||||
|
||||
.label, .val { |
||||
font-size: 14px; |
||||
color: #666; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
.val { |
||||
max-width: 350px; |
||||
text-overflow: ellipsis; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.a-line { |
||||
display: block; |
||||
} |
||||
} |
||||
|
||||
.desc { |
||||
font-size: 14px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
/deep/.dia-form { |
||||
.w-100 { |
||||
width: 100%; |
||||
} |
||||
.tips { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,512 @@ |
||||
<template> |
||||
<div> |
||||
<el-card v-if="!id" shadow="hover" class="m-b-20"> |
||||
<div class="flex-between"> |
||||
<el-page-header @back="back" :content="'创建项目'"></el-page-header> |
||||
</div> |
||||
</el-card> |
||||
<div class="page"> |
||||
<div class="page-content"> |
||||
<el-form label-width="170px" label-suffix=":" size="small"> |
||||
<el-form-item label="项目封面（选填）"> |
||||
<el-upload |
||||
class="avatar-uploader" |
||||
accept=".jpg,.png,.jpeg,.gif" |
||||
:on-success="uploadSuccess" |
||||
:limit="1" |
||||
:action="this.api.fileupload" |
||||
:headers="headers" |
||||
name="file" |
||||
> |
||||
<img v-if="form.coverUrl" :src="form.coverUrl" class="avatar"> |
||||
<div class="uploader-default" v-else> |
||||
<i class="el-icon-plus"></i> |
||||
<p>上传封面</p> |
||||
</div> |
||||
<div slot="tip" class="el-upload__tip"> |
||||
<p>展示宽度为220，高度140，JPG/PNG/GIF，3MB以内</p> |
||||
</div> |
||||
</el-upload> |
||||
</el-form-item> |
||||
<el-form-item label="项目封面长图（选填）"> |
||||
<el-upload |
||||
class="avatar-uploader avatar-uploader-lg" |
||||
accept=".jpg,.png,.jpeg,.gif" |
||||
:on-success="uploadLgSuccess" |
||||
:limit="1" |
||||
:action="this.api.fileupload" |
||||
:headers="headers" |
||||
name="file" |
||||
> |
||||
<img v-if="form.carouselUrl" :src="form.carouselUrl" class="avatar-lg"> |
||||
<div class="uploader-default" v-else> |
||||
<i class="el-icon-plus"></i> |
||||
<p>上传封面</p> |
||||
</div> |
||||
<div slot="tip" class="el-upload__tip"> |
||||
<p>展示宽度为1920，高度300，JPG/PNG/GIF，3MB以内</p> |
||||
</div> |
||||
</el-upload> |
||||
</el-form-item> |
||||
<el-form-item class="req" label="项目名称"> |
||||
<div class="d-inline-block"> |
||||
<el-input placeholder="请输入项目名称" v-model="form.projectName" clearable></el-input> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item class="req" label="发起方"> |
||||
<div class="inline-input"> |
||||
<div class="input-wrap" v-for="(item,index) in sponsorList" :key="index"> |
||||
<el-input placeholder="发起方名称" v-model="sponsorList[index]"></el-input> |
||||
<i v-if="sponsorList.length > 1" class="remove" @click="delSponsor(index)"></i> |
||||
<button v-if="index == 0" class="add-btn" type="button" @click="addSponsor"> |
||||
<i class="el-icon-plus"></i> |
||||
<span>添加</span> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item class="req" label="报名时间"> |
||||
<el-date-picker v-model="signupTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" |
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" |
||||
:picker-options="pickerOptions"></el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item class="req" label="项目时间"> |
||||
<el-date-picker v-model="playTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" |
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" |
||||
:picker-options="pickerOptions"></el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item class="req" label="发布范围"> |
||||
<div> |
||||
<el-radio v-model="scope" :label="0" disabled>本校内</el-radio> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item class="req" label="报名人数上限"> |
||||
<div class="input-center"> |
||||
<el-input placeholder="请输入人数" v-model.number="form.maximumNumber" type="number"></el-input> 人 |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item class="req" label="报名邀请码"> |
||||
<div class="input-center" style="width: 550px;"> |
||||
<el-radio v-model="form.isNeedCode" :label="0">不需要</el-radio> |
||||
<el-radio v-model="form.isNeedCode" :label="1">需要</el-radio> |
||||
<el-input style="width: 250px" placeholder="请输入4位邀请码或点击随机生成" v-model="form.invitationCode" :disabled="form.isNeedCode === 0"></el-input> |
||||
<el-button v-if="form.isNeedCode === 1" @click="randomInv">随机</el-button> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item class="req" label="项目详情"> |
||||
<quill ref="quill" :border="true" v-model="form.projectDescribe" :height="400" /> |
||||
</el-form-item> |
||||
<el-form-item label="附件"> |
||||
<el-upload |
||||
:before-upload="beforeUpload" |
||||
:on-success="uploadAnnexSuccess" |
||||
:limit="5" |
||||
:action="this.api.fileupload" |
||||
:headers="headers" |
||||
:file-list="fileList" |
||||
name="file" |
||||
> |
||||
<el-button size="small" type="primary">点击上传</el-button> |
||||
<div slot="tip" class="el-upload__tip"> |
||||
<p>支持扩展名：.rar .zip .doc .docx .pdf .jpg...</p> |
||||
</div> |
||||
</el-upload> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
<div class="btns"> |
||||
<el-button @click="save(0)">保存</el-button> |
||||
<el-button type="primary" @click="save(1)">发布</el-button> |
||||
<el-button type="danger" @click="preview" v-auth="'/activity/list:管理:大赛详情:预览'">预览</el-button> |
||||
<el-button @click="back">取消</el-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from "@/libs/util"; |
||||
import quill from "@/components/quill"; |
||||
import Setting from "@/setting"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
id: this.$route.query.id || '', |
||||
headers: { |
||||
token: util.local.get(Setting.tokenKey) |
||||
}, |
||||
scope: 0, |
||||
form: { |
||||
id: this.$route.query.id || '', |
||||
founder: 2, |
||||
isOpen: 0, // 职站是否开启(0开启 1未开启 默认0) |
||||
maximumNumber: '', |
||||
carouselUrl: '', |
||||
coverUrl: '', |
||||
activityFileList: [], // 赛事附件 |
||||
initiator: '', |
||||
isNeedCode: 0, |
||||
maximumNumber: 0, |
||||
signUpStartTime: '', |
||||
signUpEndTime: '', |
||||
playStartTime: '', |
||||
playEndTime: '', |
||||
projectDescribe: '', |
||||
projectName: '', |
||||
publishStatus: 0, |
||||
}, |
||||
pickerOptions: { |
||||
disabledDate: time => { |
||||
return this.$route.query.id ? false : time.getTime() < new Date().getTime() - 86400000; |
||||
} |
||||
}, |
||||
fileName: '', |
||||
signupTime: [], |
||||
playTime: [], |
||||
sponsorList: [""], |
||||
fileList: [], |
||||
submiting: false, |
||||
updateTime: 0, |
||||
}; |
||||
}, |
||||
components: { |
||||
quill, |
||||
}, |
||||
watch: { |
||||
// 监听信息是否有更改,有的话页面离开的时候要询问是否要保存 |
||||
form: { |
||||
handler(){ |
||||
this.updateTime++ |
||||
}, |
||||
deep:true |
||||
}, |
||||
signupTime: function(val) { |
||||
const { form } = this |
||||
if (val) { |
||||
form.signUpStartTime = val[0]; |
||||
form.signUpEndTime = val[1]; |
||||
} else { |
||||
form.signUpStartTime = '' |
||||
form.signUpEndTime = '' |
||||
} |
||||
}, |
||||
playTime: function(val) { |
||||
const { form } = this |
||||
if (val) { |
||||
form.playStartTime = val[0] |
||||
form.playEndTime = val[1] |
||||
} else { |
||||
form.playStartTime = '' |
||||
form.playEndTime = '' |
||||
} |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
getData() { |
||||
const { id } = this.form |
||||
id && this.$post(`${this.api.findByIdActivity}?id=${id}`).then(({ data }) => { |
||||
if (data.signUpStartTime) this.signupTime = [data.signUpStartTime, data.signUpEndTime] |
||||
if (data.playStartTime) this.playTime = [data.playStartTime, data.playEndTime] |
||||
this.sponsorList = data.initiator.split(",") |
||||
// 附件 |
||||
const fileList = data.activityFileList |
||||
if (fileList) { |
||||
const files = [] |
||||
fileList.map(e => { |
||||
files.push({ |
||||
name: e.fileName, |
||||
url: e.filePath |
||||
}) |
||||
}) |
||||
this.fileList = files |
||||
} else { |
||||
data.activityFileList = [] |
||||
} |
||||
|
||||
this.form = data |
||||
this.$nextTick(() => { |
||||
this.updateTime = 0 |
||||
}) |
||||
}).catch(err => {}) |
||||
}, |
||||
uploadSuccess(res) { |
||||
this.form.coverUrl = res.data.filesResult.fileUrl |
||||
}, |
||||
uploadLgSuccess(res) { |
||||
this.form.carouselUrl = res.data.filesResult.fileUrl |
||||
}, |
||||
// 附件上传成功 |
||||
uploadAnnexSuccess(res) { |
||||
const file = res.data.filesResult |
||||
const { id } = this.form |
||||
const data = { |
||||
activityId: id || '', |
||||
fileName: this.fileName, |
||||
filePath: file.fileUrl || file.fileId |
||||
} |
||||
this.form.activityFileList.push(data) |
||||
}, |
||||
// 附件上传前 |
||||
beforeUpload(file) { |
||||
const isLt2M = file.size / 1024 / 1024 < 10 |
||||
if (!isLt2M) util.warningMsg('请上传小于10MB的附件！') |
||||
if (isLt2M) { |
||||
this.fileName = file.name |
||||
return true |
||||
} else { |
||||
return false |
||||
} |
||||
}, |
||||
handleAnnexRemove(file, fileList) { |
||||
|
||||
}, |
||||
// 随机邀请码 |
||||
randomInv() { |
||||
let result = '' |
||||
for (let i = 0; i < 4; i++) { |
||||
result += Math.floor(Math.random() * 10); |
||||
} |
||||
this.form.completeCompetitionSetup.invitationCode = result |
||||
}, |
||||
// 提交 |
||||
save(status) { |
||||
const { form } = this |
||||
form.initiator = this.sponsorList.filter(d => d).join(); |
||||
if (!form.projectName) return util.warningMsg("请填写项目名称"); |
||||
// 发布需要校验 |
||||
if (status) { |
||||
if (!form.initiator) return util.warningMsg("请填写发起方"); |
||||
if (!form.signUpStartTime) return util.warningMsg("请选择报名时间"); |
||||
let now = new Date().getTime(); |
||||
let signUpStartTime = new Date(form.signUpStartTime).getTime(); |
||||
let signUpEndTime = new Date(form.signUpEndTime).getTime(); |
||||
let playStartTime = new Date(form.playStartTime).getTime(); |
||||
// if (signUpStartTime && now > signUpStartTime) return util.warningMsg("报名时间不能早于当前时间"); |
||||
if (!form.playStartTime) return util.warningMsg("请选择项目时间"); |
||||
if (playStartTime && signUpEndTime && playStartTime < signUpEndTime) return util.warningMsg("项目时间不能早于报名结束时间"); |
||||
if (form.isNeedCode && (!form.invitationCode || form.invitationCode.length !== 4)) return util.warningMsg('请填写四位数邀请码') |
||||
if (!form.projectDescribe) return util.warningMsg("请填写项目详情"); |
||||
} |
||||
form.publishStatus = status |
||||
form.id = this.$route.query.id |
||||
if (form.id) { |
||||
this.$post(this.api.updateActivity, form).then(res => { |
||||
this.updateTime = 0 |
||||
this.$router.back() |
||||
util.successMsg("修改成功"); |
||||
}).catch(err => {}); |
||||
} else { |
||||
this.$post(this.api.saveActivity, form).then(res => { |
||||
this.updateTime = 0 |
||||
this.$router.back() |
||||
util.successMsg("创建成功"); |
||||
}).catch(err => {}); |
||||
} |
||||
}, |
||||
// 预览 |
||||
preview() { |
||||
util.local.set('activity', this.form) |
||||
window.open(this.$router.resolve('/matchPreview').href) |
||||
}, |
||||
addSponsor() { |
||||
this.sponsorList.push(""); |
||||
}, |
||||
delSponsor(index) { |
||||
this.sponsorList.splice(index, 1); |
||||
}, |
||||
back() { |
||||
// 更改了信息才需要提示 |
||||
const { updateTime } = this.$refs['step' + this.step] |
||||
console.log("🚀 ~ file: index.vue:142 ~ back ~ updateTime", updateTime) |
||||
if (this.step < 4 && updateTime) { |
||||
this.$confirm(`编辑的内容未保存，是否保存？`, '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.save(0) |
||||
}).catch(() => { |
||||
this.backPage() |
||||
}) |
||||
} else { |
||||
this.backPage() |
||||
} |
||||
}, |
||||
backPage() { |
||||
this.$router.push(`/activity?page=${this.$store.state.activity.page}`) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
$upload-width: 220px; |
||||
$upload-height: 140px; |
||||
$upload-lg-height: 150px; |
||||
/deep/ .avatar-uploader { |
||||
.el-upload { |
||||
position: relative; |
||||
width: $upload-width; |
||||
height: $upload-height; |
||||
border: 1px dashed #d9d9d9; |
||||
border-radius: 6px; |
||||
cursor: pointer; |
||||
overflow: hidden; |
||||
|
||||
&:hover { |
||||
border-color: #cb221c; |
||||
} |
||||
|
||||
.uploader-default { |
||||
display: flex; |
||||
height: $upload-height; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
text-align: center; |
||||
background: rgba(0, 0, 0, 0.04); |
||||
|
||||
i { |
||||
font-size: 20px; |
||||
font-weight: bold; |
||||
color: #8c939d; |
||||
} |
||||
|
||||
p { |
||||
margin-top: 10px; |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.65); |
||||
line-height: 1; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&.avatar-uploader-lg { |
||||
.el-upload { |
||||
width: 100%; |
||||
max-width: 960px; |
||||
height: $upload-lg-height; |
||||
|
||||
.uploader-default { |
||||
height: $upload-lg-height; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.avatar { |
||||
display: block; |
||||
width: $upload-width; |
||||
height: $upload-height; |
||||
} |
||||
|
||||
.avatar-lg { |
||||
display: block; |
||||
width: 100%; |
||||
height: $upload-lg-height; |
||||
} |
||||
|
||||
.el-upload__tip { |
||||
margin-top: 0; |
||||
|
||||
p { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.45); |
||||
line-height: 1; |
||||
|
||||
&:first-child { |
||||
margin-bottom: 5px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
/deep/ .d-inline-block { |
||||
width: 216px; |
||||
|
||||
.el-select, .el-input { |
||||
width: 100%; |
||||
} |
||||
} |
||||
.inline-input { |
||||
.input-wrap { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-bottom: 10px; |
||||
|
||||
.el-input { |
||||
display: inline-block; |
||||
width: 216px; |
||||
margin-right: 8px; |
||||
} |
||||
|
||||
.remove { |
||||
width: 16px; |
||||
height: 16px; |
||||
background: url("../../../../assets/img/close.png") 0 0/cover no-repeat; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
.add-btn { |
||||
margin-left: 32px; |
||||
} |
||||
} |
||||
|
||||
.add-btn { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 216px; |
||||
line-height: 32px; |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.65); |
||||
background-color: transparent; |
||||
border: 1px dashed rgba(0, 0, 0, 0.15); |
||||
border-radius: 4px; |
||||
cursor: pointer; |
||||
|
||||
i { |
||||
margin-right: 8px; |
||||
font-size: 14px; |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
.range-check { |
||||
display: inline-block; |
||||
margin: 0 0 10px 10px; |
||||
} |
||||
/deep/.range-cas { |
||||
.el-tag { |
||||
display: none; |
||||
} |
||||
} |
||||
.input-center { |
||||
display: flex; |
||||
align-items: center; |
||||
width: 216px; |
||||
white-space: nowrap; |
||||
.el-input { |
||||
margin-right: 5px; |
||||
} |
||||
} |
||||
.el-steps { |
||||
justify-content: center; |
||||
} |
||||
/deep/.req { |
||||
.el-form-item__label { |
||||
&:before { |
||||
content: '*'; |
||||
margin-right: 5px; |
||||
font-size: 18px; |
||||
vertical-align: middle; |
||||
color: #f00; |
||||
} |
||||
} |
||||
} |
||||
.btns { |
||||
display: flex; |
||||
justify-content: center; |
||||
text-align: center; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,367 @@ |
||||
<template> |
||||
<div class="page"> |
||||
<h6 class="p-title">筛选</h6> |
||||
<div class="tool mul"> |
||||
<ul class="filter"> |
||||
<li> |
||||
<label>创建时间：</label> |
||||
<div class="single-choice"> |
||||
<dl> |
||||
<dd> |
||||
<el-radio-group v-model="form.month" @change="changeType"> |
||||
<el-radio v-for="(item,index) in dateList" :key="index" :label="item.id" border>{{ item.name }}</el-radio> |
||||
</el-radio-group> |
||||
</dd> |
||||
</dl> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<label>创建区间：</label> |
||||
<el-date-picker v-model="date" align="right" unlink-panels type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable></el-date-picker> |
||||
</li> |
||||
<li> |
||||
<label>搜索：</label> |
||||
<el-input placeholder="请输入项目名称/创建人" suffix-icon="el-icon-search" v-model="keyword" clearable></el-input> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
<div class="tool mul"> |
||||
<ul class="filter"> |
||||
<li> |
||||
<label>状态：</label> |
||||
<dl> |
||||
<dd> |
||||
<el-radio-group v-model="form.publishStatus" @change="changeType"> |
||||
<el-radio v-for="(item,index) in statuses" :key="index" :label="item.id" border>{{ item.name }}</el-radio> |
||||
</el-radio-group> |
||||
</dd> |
||||
</dl> |
||||
</li> |
||||
</ul> |
||||
<div> |
||||
<el-button type="primary" round @click="add" v-auth>创建项目</el-button> |
||||
<el-button type="primary" round @click="delAllSelection" v-auth>批量删除</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-table ref="table" :data="activityData" class="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id"> |
||||
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
||||
<el-table-column type="index" width="60" label="序号" align="center"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.$index + (page - 1) * pageSize + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="projectName" label="项目名称" align="center"></el-table-column> |
||||
<el-table-column prop="applicantNum" label="报名人数" align="center" width="150"></el-table-column> |
||||
<el-table-column prop="status" label="状态" align="center" width="90"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.publishStatus ? '已发布' : '未发布' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="time" label="项目时间" align="center" width="300"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.playStartTime }} ~ {{ scope.row.playEndTime }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="160"></el-table-column> |
||||
<el-table-column prop="founderName" label="创建人" align="center" width="130"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.founderName || '学校超管' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center" width="170"> |
||||
<template slot-scope="scope"> |
||||
<el-button v-auth type="text" @click="manage(scope.row)">管理</el-button> |
||||
<el-button v-auth type="text" @click="delData(scope.row)">删除</el-button> |
||||
<!-- 列表展示中台的禁启用依据zt_open展示，职站的禁启用依据is_open展示 --> |
||||
<!-- 中台禁用了这个学校发布的学校这边还能看到，但是学校这边不能启用。 --> |
||||
<el-switch |
||||
v-if="scope.row.publishStatus" |
||||
v-auth="'禁用'" |
||||
v-model="scope.row.isOpen" |
||||
:active-value="0" |
||||
:inactive-value="1" |
||||
style="margin: 0 10px 0 5px" |
||||
:active-text="scope.row.isOpen ? '关' : '开'" |
||||
@change="switchOff($event,scope.row,scope.$index)" |
||||
></el-switch> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :current-page="page"> |
||||
</el-pagination> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from "@/libs/util"; |
||||
import Setting from "@/setting"; |
||||
import { mapMutations } from "vuex"; |
||||
import { Loading } from 'element-ui' |
||||
export default { |
||||
data() { |
||||
return { |
||||
timer: null, |
||||
keyword: "", |
||||
activityData: [], |
||||
statuses: [ |
||||
{ |
||||
id: '', |
||||
name: '不限' |
||||
}, |
||||
{ |
||||
id: 0, |
||||
name: '待发布' |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '已发布' |
||||
} |
||||
], |
||||
form: { |
||||
month: "", |
||||
publishStatus: "", |
||||
startTime: "", |
||||
endTime: "", |
||||
}, |
||||
multipleSelection: [], |
||||
dateList: [ |
||||
{ |
||||
id: "", |
||||
name: "不限" |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: "近一个月" |
||||
}, |
||||
{ |
||||
id: 3, |
||||
name: "近三个月" |
||||
}, |
||||
{ |
||||
id: 6, |
||||
name: "近六个月" |
||||
} |
||||
], |
||||
date: [], |
||||
page: +this.$route.query.page || 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
transferPublishStatus: [ "未发布", "已发布"], |
||||
modifyVisible: false, |
||||
curRow: { |
||||
playingStages: [] |
||||
}, |
||||
timer: null, |
||||
redisTimer: null, |
||||
pickerOptions: { |
||||
shortcuts: [{ |
||||
text: '此刻', |
||||
onClick(picker) { |
||||
picker.$emit('pick', new Date(Date.now() + 5000)) |
||||
} |
||||
}] |
||||
} |
||||
}; |
||||
}, |
||||
watch: { |
||||
"form.month": function(val) { |
||||
if (val) { |
||||
let unit = 24 * 60 * 60 * 1000; |
||||
this.date = [util.formatDate("yyyy-MM-dd", new Date(new Date().getTime() - unit * 30 * val)), util.formatDate("yyyy-MM-dd", new Date(new Date().getTime() + unit))]; |
||||
} else { |
||||
this.date = []; |
||||
} |
||||
}, |
||||
date: function(val) { |
||||
if (val) { |
||||
this.form.startTime = val[0]; |
||||
this.form.endTime = val[1]; |
||||
} else { |
||||
this.form.startTime = ""; |
||||
this.form.endTime = ""; |
||||
} |
||||
this.initData(); |
||||
}, |
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer); |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData(); |
||||
}, 500); |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.getData() |
||||
this.$once('hook:beforeDestroy', function() { |
||||
clearInterval(this.timer) |
||||
clearInterval(this.redisTimer) |
||||
}) |
||||
}, |
||||
methods: { |
||||
// ...mapMutations('activity', [ |
||||
// 'setPage' |
||||
// ]), |
||||
getList() { |
||||
// const load = Loading.service() |
||||
const { form } = this |
||||
this.$post(this.api.myActivities, { |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
endTime: form.endTime || null, |
||||
keyWords: this.keyword || null, |
||||
platformSource: 2, // 当前所属平台(0:中台，1：职站教师 2职站学生) |
||||
startTime: form.startTime || null, |
||||
publishStatus: form.publishStatus === '' ? null : form.publishStatus |
||||
}).then(({ data }) => { |
||||
// load.close() |
||||
if (data) { |
||||
const list = data.records |
||||
// 定时处理是否要显示修改结束时间按钮 |
||||
this.timer = setInterval(() => { |
||||
const now = new Date() |
||||
list.map(e => { |
||||
if (!e.playingStages) { |
||||
this.$set(e, 'playingStages', []) |
||||
} else { |
||||
e.playingStages = [] |
||||
} |
||||
// 如果当前时间在项目开始结束时间之间 |
||||
if (now >= new Date(e.playStartTime) && now <= new Date(e.playEndTime)) { |
||||
// 遍历赛事阶段 |
||||
if (e.competitionStageList) { |
||||
for (const n of e.competitionStageList) { |
||||
// 判断是否有开始了的阶段 |
||||
if (now >= new Date(n.startTime) && now <= new Date(n.endTime)) { |
||||
e.playingStages.push(n) |
||||
} |
||||
} |
||||
} |
||||
} |
||||
}) |
||||
}, 1000) |
||||
list.map(e => { |
||||
if (e.ztOpen) e.isOpen = 1 |
||||
}) |
||||
this.activityData = list |
||||
this.total = data.total |
||||
this.$refs.table.clearSelection() |
||||
if (!this.activityData.length && this.total) { |
||||
this.page-- |
||||
this.getData() |
||||
} |
||||
} |
||||
}).catch(res => { |
||||
// load.close() |
||||
}) |
||||
}, |
||||
getData() { |
||||
this.getList() |
||||
}, |
||||
initData() { |
||||
this.page = 1; |
||||
this.getData(); |
||||
}, |
||||
// 获取redis缓存 |
||||
getRedis() { |
||||
this.$post(this.api.getRedisCacheActivity).then(({ data }) => { |
||||
data && this.getList() |
||||
}).catch(res => {}) |
||||
}, |
||||
getData() { |
||||
this.getList() |
||||
if (!Setting.isDev) { |
||||
clearInterval(this.redisTimer) |
||||
this.redisTimer = setInterval(this.getRedis, 1000) |
||||
} |
||||
}, |
||||
add() { |
||||
this.$router.push("add"); |
||||
}, |
||||
manage(row) { |
||||
this.$router.push(`manage?id=${row.id}&name=${row.projectName}`) |
||||
}, |
||||
|
||||
changeType() { |
||||
this.$refs.table.clearSelection(); |
||||
this.initData(); |
||||
}, |
||||
delData(row) { |
||||
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", { |
||||
type: "warning" |
||||
}) |
||||
.then(() => { |
||||
this.$post(`${this.api.batchDeletionActivity}?ids=${row.id}`).then(res => { |
||||
util.successMsg("删除成功"); |
||||
this.getData(); |
||||
}).catch(res => { |
||||
}); |
||||
}) |
||||
.catch(() => { |
||||
}); |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val; |
||||
}, |
||||
// 批量删除 |
||||
delAllSelection() { |
||||
if (this.multipleSelection.length) { |
||||
this.$confirm("确定要删除吗？", "提示", { |
||||
type: "warning" |
||||
}).then(() => { |
||||
let ids = this.multipleSelection.map(i => 'ids=' + i.id); |
||||
this.$post(`${this.api.batchDeletionActivity}?${ids.join('&')}`).then(res => { |
||||
this.getData(); |
||||
this.$message.success("删除成功"); |
||||
this.$refs.table.clearSelection() |
||||
}).catch(err => { |
||||
}); |
||||
}).catch(() => { |
||||
}); |
||||
} else { |
||||
this.$message.warning("请先选择赛事 ！"); |
||||
} |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.page = val; |
||||
this.$router.push(`list?page=${val}`) |
||||
this.getData() |
||||
// this.setPage(val) |
||||
}, |
||||
transferTime(date, type) { |
||||
if (date == "0000-00-00 00:00:00") return "---"; |
||||
return date; |
||||
}, |
||||
switchOff(val, row) { |
||||
this.$post(this.api.disabledEventsActivity, { |
||||
activityId: row.id, |
||||
isOpen: val, |
||||
type: 2 // 禁用平台来源(0中台，1职站) |
||||
}).then(res => {}).catch(err => {}) |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
/deep/ .tool { |
||||
.filter { |
||||
.el-input { |
||||
min-width: 190px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media(max-width: 1640px) { |
||||
.page .page-content .tool .filter { |
||||
flex-wrap: wrap; |
||||
margin-bottom: -15px; |
||||
|
||||
li { |
||||
min-width: 34%; |
||||
margin-bottom: 15px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,129 @@ |
||||
<template> |
||||
<!-- 赛事管理 --> |
||||
<div> |
||||
<el-card shadow="hover" class="m-b-20"> |
||||
<div class="flex-between"> |
||||
<el-page-header @back="back" :content="name + '/管理'"></el-page-header> |
||||
</div> |
||||
</el-card> |
||||
<div class="page" style="margin-bottom: 24px"> |
||||
<div class="tabs"> |
||||
<a class="item" v-for="(item,index) in tabs" :key="index" :class="{active: index == active}" @click="tabChange(index)">{{ item }}</a> |
||||
</div> |
||||
<MatchDetail v-if="active == 'tab1'" ref="detail" /> |
||||
<MatchProgress v-else-if="active == 'tab2'" /> |
||||
<notice v-else-if="active == 'tab3'" /> |
||||
<MatchSignup v-else-if="active == 'tab4'" /> |
||||
</div> |
||||
</div> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
import Setting from "@/setting"; |
||||
import MatchDetail from "../add"; |
||||
import MatchProgress from "./matchProgress"; |
||||
import notice from "./notice"; |
||||
import MatchSignup from "./matchSignup"; |
||||
import { mapState } from "vuex"; |
||||
export default { |
||||
name: "matchManage", |
||||
data() { |
||||
return { |
||||
name: this.$route.query.name, |
||||
active: this.$route.query.tab || "tab1", |
||||
tabs: { |
||||
tab1: "项目详情", |
||||
tab2: "项目进展", |
||||
tab3: "公告通知", |
||||
tab4: "报名人员" |
||||
}, |
||||
}; |
||||
}, |
||||
components: { |
||||
MatchDetail, |
||||
MatchProgress, |
||||
notice, |
||||
MatchSignup |
||||
}, |
||||
// computed: { |
||||
// ...mapState("user", [ |
||||
// 'page' |
||||
// ]), |
||||
// ...mapState('auth', [ |
||||
// 'btns' |
||||
// ]) |
||||
// }, |
||||
mounted() { |
||||
// Setting.dynamicRoute && this.initTabs() |
||||
}, |
||||
methods: { |
||||
initTabs() { |
||||
// const { btns } = this |
||||
// const tab1 = btns.includes('/activity/list:管理:大赛详情') |
||||
// const tab3 = btns.includes('/activity/list:管理:竞赛进展') |
||||
// const tab4 = btns.includes('/activity/list:管理:公告通知') |
||||
// const tab5 = btns.includes('/activity/list:管理:报名人员') |
||||
|
||||
// tab1 || this.$delete(this.tabs, 'tab1') |
||||
// tab3 || this.$delete(this.tabs, 'tab3') |
||||
// tab4 || this.$delete(this.tabs, 'tab4') |
||||
// tab5 || this.$delete(this.tabs, 'tab5') |
||||
// const type = this.$route.query.tab |
||||
// const keys = Object.keys(this.tabs) |
||||
// this.active = keys.includes(type) ? type : keys[0] |
||||
}, |
||||
// 移除成绩管理 |
||||
hideArch() { |
||||
this.$delete(this.tabs, 'tab2') |
||||
}, |
||||
back() { |
||||
this.handleSave(0) && this.backPage() |
||||
}, |
||||
// 判断是否需要confirm |
||||
handleSave(i) { |
||||
// 如果是赛事详情，则要判断是否已经保存，未保存则提示是否保存 |
||||
if (this.active === 'tab1') { |
||||
const detail = this.$refs.detail |
||||
if (detail.step < 4 && detail.$refs['step' + detail.step].updateTime) { |
||||
this.$confirm(`编辑的内容未保存，是否保存并且发布？`, '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
detail.save(1, 1) |
||||
this.backOrTab(i) |
||||
}).catch(() => { |
||||
this.backOrTab(i) |
||||
}) |
||||
} else { |
||||
this.backOrTab(i) |
||||
} |
||||
return false |
||||
} else { |
||||
return true |
||||
} |
||||
}, |
||||
// 返回列表 |
||||
backPage(){ |
||||
console.log(444, this.$store.state) |
||||
this.$router.push(`/activity?page=${this.$store.state.activity.page}`) |
||||
}, |
||||
// tab切换 |
||||
tabSwitch(i) { |
||||
this.active = i |
||||
this.$router.push(`/activity/manage?id=${this.$route.query.id}&tab=${i}&name=${this.name}`) |
||||
}, |
||||
// 判断返回还是tab |
||||
backOrTab(i) { |
||||
i ? this.tabSwitch(i) : this.backPage() |
||||
}, |
||||
// tab回调 |
||||
tabChange(i) { |
||||
this.handleSave(i) && this.tabSwitch(i) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,240 @@ |
||||
<template> |
||||
<!-- 竞赛进展 --> |
||||
<div class="page-content" style="padding: 24px"> |
||||
<el-table ref="table" :data="listData" class="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id"> |
||||
<el-table-column type="index" width="60" label="序号" align="center"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.$index + (pageNo - 1) * pageSize + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="name" label="标题"> |
||||
<template slot-scope="scope"> |
||||
<el-input placeholder="请输入标题" :disabled="!scope.row.operate" v-model="scope.row.title"></el-input> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="name" label="详情描述"> |
||||
<template slot-scope="scope"> |
||||
<el-input placeholder="请输入详情描述" :disabled="!scope.row.operate" type="textarea" v-model="scope.row.description"></el-input> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="name" label="状态" width="150"> |
||||
<template slot-scope="scope"> |
||||
<el-select v-model="scope.row.status" :disabled="!scope.row.operate" clearable placeholder="请选择状态"> |
||||
<el-option v-for="(item,index) in statusList" :key="index" :label="item.name" :value="item.value"></el-option> |
||||
</el-select> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center" width="170"> |
||||
<template slot-scope="scope"> |
||||
<el-button v-if="!scope.row.operate" type="text" @click="operateIt(scope.row)" v-auth="'/activity:管理:竞赛进展:编辑'">编辑</el-button> |
||||
<el-button v-else type="text" @click="saveData(scope.row)">保存</el-button> |
||||
<el-button type="text" @click="handleDelete(scope.row, scope.$index)" v-auth="'/activity/list:管理:竞赛进展:删除'">删除</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="plus" @click="addData" v-auth="'/activity/list:管理:竞赛进展:新增'"> |
||||
<i class="el-icon-circle-plus-outline"></i> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from "@/libs/util"; |
||||
export default { |
||||
name: "matchProgress", |
||||
data() { |
||||
return { |
||||
save: false, |
||||
id: this.$route.query.id, |
||||
statusList: [ |
||||
{ |
||||
value: 0, |
||||
name: "未完成" |
||||
}, |
||||
{ |
||||
value: 1, |
||||
name: "进行中" |
||||
}, |
||||
{ |
||||
value: 2, |
||||
name: "已完成" |
||||
} |
||||
], |
||||
listData: [], |
||||
multipleSelection: [], |
||||
pageNo: 1, |
||||
pageSize: 10, |
||||
totals: 0, |
||||
touchTime:0, |
||||
timeOut: {} |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.getData(); |
||||
}, |
||||
methods: { |
||||
operateIt(row) { |
||||
row.operate = true |
||||
}, |
||||
getData() { |
||||
this.$get(this.api.getCompetitionProgress, { |
||||
competitionId: this.id |
||||
}).then(res => { |
||||
this.listData = res.competitionProgressList; |
||||
for(let index=0; index<this.listData.length; index++) { |
||||
// 未点编辑时不可输入 |
||||
this.$set(this.listData, index, { operate: false, ...this.listData[index]}) |
||||
} |
||||
}).catch(res => { |
||||
}); |
||||
}, |
||||
saveData(row) { |
||||
// 有点编辑的时候就要等待确认 |
||||
let data = row; |
||||
if (data.title.length) { |
||||
if (row.id) { |
||||
this.$put(this.api.editCompetitionProgress, data).then(res => { |
||||
this.touchTime = this.touchTime-1 |
||||
util.successMsg("修改成功"); |
||||
this.getData(); |
||||
}).catch(res => { |
||||
}); |
||||
} else { |
||||
this.$post(this.api.addCompetitionProgress, data).then(res => { |
||||
this.touchTime = this.touchTime-1 |
||||
util.successMsg("创建成功"); |
||||
this.getData(); |
||||
}).catch(res => { |
||||
}); |
||||
} |
||||
} else { |
||||
util.warningMsg("请填写标题"); |
||||
} |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val; |
||||
}, |
||||
onSearch() { |
||||
this.pageNo = 1; |
||||
this.getData(); |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.pageNo = val; |
||||
this.getData(); |
||||
}, |
||||
handleDelete(row, index) { |
||||
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", { |
||||
type: "warning" |
||||
}).then(() => { |
||||
if(row.id === "") { |
||||
this.listData.splice(index, 1) |
||||
util.successMsg("删除成功"); |
||||
}else { |
||||
this.touchTime = this.touchTime+1 |
||||
this.$del(`${this.api.deleteCompetitionProgress}?competitionProgressId=${row.id}`).then(res => { |
||||
util.successMsg("删除成功"); |
||||
this.getData(); |
||||
}).catch(res => { |
||||
}); |
||||
} |
||||
|
||||
}).catch(() => { |
||||
}); |
||||
}, |
||||
addData() { |
||||
// this.$store.commit("activity/setWait", 1); |
||||
this.touchTime = this.touchTime+1 |
||||
if (this.listData.length) { |
||||
if (this.listData[this.listData.length - 1].id) { |
||||
this.listData.push({ |
||||
competitionId: this.id, |
||||
id: "", |
||||
title: "", |
||||
description: "", |
||||
status: 0, |
||||
operate: true |
||||
}); |
||||
this.operateIt(this.listData[this.listData.length - 1]) |
||||
} else { |
||||
util.warningMsg("请先保存新数据"); |
||||
} |
||||
} else { |
||||
this.listData.push({ |
||||
competitionId: this.id, |
||||
id: "", |
||||
title: "", |
||||
description: "", |
||||
status: 1, // status为1时表示未保存的 |
||||
operate: true |
||||
}); |
||||
} |
||||
}, |
||||
waitSave() { |
||||
if(this.hasEdit) { |
||||
this.$confirm('暂未保存，是否保存本次编辑?', '提示', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning' |
||||
}).then(() => { |
||||
let num = 0; |
||||
for(var i=0;i<this.listData.length;i++){ |
||||
let data = this.listData[i]; |
||||
if (data.title) { |
||||
if (this.listData[i].id) { |
||||
this.$put(this.api.editContestProgress, data).then(res => { |
||||
|
||||
}).catch(res => { |
||||
}); |
||||
}else{ |
||||
num = num+1 |
||||
} |
||||
}else{ |
||||
num = num+1 |
||||
} |
||||
} |
||||
if (num >0){ |
||||
this.$message({ |
||||
type: 'error', |
||||
message: '保存失败，有未填项目' |
||||
}); |
||||
}else{ |
||||
this.$message({ |
||||
type: 'success', |
||||
message: '保存成功!' |
||||
}); |
||||
} |
||||
}).catch(() => { |
||||
this.$message({ |
||||
type: 'info', |
||||
message: '已取消保存' |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
} |
||||
}, |
||||
computed: { |
||||
hasEdit() { |
||||
return this.listData.some(item => item.operate) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.box { |
||||
height: calc(100vh - 100px); |
||||
overflow: auto; |
||||
} |
||||
|
||||
.plus { |
||||
padding: 15px 0 0; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
|
||||
i { |
||||
font-size: 24px; |
||||
color: #cb221c; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,171 @@ |
||||
<template> |
||||
<!-- 报名人员 --> |
||||
<div class="page-content" style="padding: 24px"> |
||||
<div class="tool"> |
||||
<ul class="filter"> |
||||
<li> |
||||
<label>搜索：</label> |
||||
<el-input placeholder="请输入姓名/手机号/学号" prefix-icon="el-icon-search" v-model="keyword" clearable size="mini" style="width: 250px"></el-input> |
||||
</li> |
||||
<li v-if="info.releaseType"> |
||||
<label>参赛人员状态：</label> |
||||
<el-select v-model="isDisable" @change="initData"> |
||||
<el-option v-for="(item, i) in statusList" :key="i" :label="item.name" :value="item.id"></el-option> |
||||
</el-select> |
||||
</li> |
||||
</ul> |
||||
<div> |
||||
<el-button type="primary" round @click="exportAll" v-auth="'/activity/list:管理:报名人员:批量导出'">批量导出</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-table ref="table" :data="listData" class="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id" @sort-change="sortChange"> |
||||
<el-table-column type="selection" width="80" align="center" :reserve-selection="true"></el-table-column> |
||||
<el-table-column type="index" width="60" label="序号" align="center"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.$index + (page - 1) * pageSize + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="school" label="学校" sortable="custom"> |
||||
</el-table-column> |
||||
<el-table-column prop="username" label="学生姓名"> |
||||
</el-table-column> |
||||
<el-table-column prop="workNumber" label="学号"> |
||||
</el-table-column> |
||||
<el-table-column prop="phone" label="手机号"> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center" width="320"> |
||||
<template slot-scope="scope"> |
||||
<el-switch |
||||
v-auth="'/activity/list:管理:报名人员:禁用'" |
||||
v-model="scope.row.isDisable" |
||||
:active-text="scope.row.isDisable ? '关' : '开'" |
||||
:active-value="0" |
||||
:inactive-value="1" |
||||
style="margin: 0 10px 0 5px" |
||||
@change="switchOff($event,scope.row,scope.$index)" |
||||
></el-switch> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :current-page="page"> |
||||
</el-pagination> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from "@/libs/util"; |
||||
import axios from 'axios' |
||||
import Setting from "@/setting"; |
||||
export default { |
||||
name: "matchSignup", |
||||
data() { |
||||
return { |
||||
token: util.local.get(Setting.tokenKey), |
||||
id: +this.$route.query.id, |
||||
info: { |
||||
completeCompetitionSetup: {} |
||||
}, |
||||
isDisable: '', |
||||
statusList: [ |
||||
{ |
||||
id: '', |
||||
name: '不限' |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '已禁用' |
||||
}, |
||||
{ |
||||
id: 0, |
||||
name: '未禁用' |
||||
} |
||||
], |
||||
keyword: "", |
||||
listData: [], |
||||
multipleSelection: [], |
||||
page: 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
}; |
||||
}, |
||||
watch: { |
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer); |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData(); |
||||
}, 500); |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.initData() |
||||
}, |
||||
methods: { |
||||
getData() { |
||||
this.$post(this.api.ApplicantsList, { |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
activityId: this.id, |
||||
keyWords: this.keyword, |
||||
isDisable: this.isDisable, |
||||
}).then(({ data }) => { |
||||
this.listData = data.records; |
||||
this.total = data.total; |
||||
}).catch(res => { |
||||
}); |
||||
}, |
||||
initData() { |
||||
this.page = 1 |
||||
this.getData() |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val; |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.page = val; |
||||
this.getData(); |
||||
}, |
||||
switchOff(val, row, index) { |
||||
this.$put(`${this.api.disableRegistration}?competitionRegistrationId=${row.id}&isDisable=${val}`).then(res => {}).catch(err => {}); |
||||
}, |
||||
exportAll() { |
||||
const data = this.multipleSelection |
||||
if (data.length) { |
||||
data.map((e, i) => e.id = i + 1) |
||||
axios.post(this.api.exportDataInBatches, data, { |
||||
headers: { |
||||
token: this.token |
||||
}, |
||||
responseType: 'blob' |
||||
}).then((res) => { |
||||
util.downloadFileDirect(`报名人员.xls`, new Blob([res.data])) |
||||
}).catch(res => {}) |
||||
} else { |
||||
axios.get(`${this.api.excelExport}?activityId=${this.id}`, { |
||||
headers: { |
||||
token: this.token |
||||
}, |
||||
responseType: 'blob' |
||||
}).then((res) => { |
||||
util.downloadFileDirect(`报名人员.xls`, new Blob([res.data])) |
||||
}).catch(res => {}) |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
/deep/.dia-form { |
||||
.w-100 { |
||||
width: 100%; |
||||
} |
||||
.tips { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,140 @@ |
||||
<template> |
||||
<!-- 报名人员 --> |
||||
<div class="page-content" style="padding: 24px"> |
||||
<div class="tool" style="justify-content: flex-end"> |
||||
<el-button type="primary" round @click="add" v-auth="'/activity/list:管理:公告通知:新增'">新增</el-button> |
||||
</div> |
||||
|
||||
<el-table ref="table" :data="listData" class="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id"> |
||||
<el-table-column type="index" width="60" label="序号" align="center"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.$index + (pageNo - 1) * pageSize + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="announcementTitle" label="标题名称"> |
||||
</el-table-column> |
||||
<el-table-column prop="createTime" label="创建时间"> |
||||
</el-table-column> |
||||
<el-table-column prop="updateTime" label="发布时间"> |
||||
</el-table-column> |
||||
<el-table-column prop="phone" label="状态"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.status ? '已发布' : '草稿' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center" width="250"> |
||||
<template slot-scope="scope"> |
||||
<el-button type="text" @click="edit(scope.row)" v-auth="'/activity/list:管理:公告通知:编辑'">编辑</el-button> |
||||
<el-button type="text" @click="del(scope.row)" v-auth="'/activity/list:管理:公告通知:删除'">删除</el-button> |
||||
<el-switch |
||||
v-auth="'/activity/list:管理:公告通知:启用'" |
||||
v-model="scope.row.isOpen" |
||||
:active-text="scope.row.isOpen ? '关' : '开'" |
||||
:active-value="0" |
||||
:inactive-value="1" |
||||
style="margin: 0 10px 0 5px" |
||||
@change="switchOff($event,scope.row,scope.$index)" |
||||
></el-switch> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo"> |
||||
</el-pagination> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from "@/libs/util"; |
||||
import Setting from "@/setting"; |
||||
|
||||
export default { |
||||
name: "matchSignup", |
||||
data() { |
||||
return { |
||||
token: util.local.get(Setting.tokenKey), |
||||
id: this.$route.query.id, |
||||
keyword: "", |
||||
listData: [], |
||||
multipleSelection: [], |
||||
pageNo: 1, |
||||
pageSize: 10, |
||||
totals: 0 |
||||
}; |
||||
}, |
||||
watch: { |
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer); |
||||
this.searchTimer = setTimeout(() => { |
||||
this.getData(); |
||||
}, 500); |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
getData() { |
||||
this.$post(`${this.api.queryAnnouncementByCompetitionId}?pageNum=${this.pageNo}&pageSize=${this.pageSize}&competitionId=${this.id}`).then(({ data }) => { |
||||
this.listData = data.records |
||||
this.totals = data.total |
||||
this.$refs.table.clearSelection() |
||||
}).catch(res => {}) |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val; |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.pageNo = val; |
||||
this.getData(); |
||||
}, |
||||
del(row) { |
||||
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", { |
||||
type: "warning" |
||||
}) |
||||
.then(() => { |
||||
this.$post(`${this.api.deleteAnnouncement}?id=${row.id}`).then(res => { |
||||
util.successMsg("删除成功"); |
||||
this.getData(); |
||||
}).catch(res => { |
||||
}); |
||||
}) |
||||
.catch(() => { |
||||
}); |
||||
}, |
||||
switchOff(val, row, index) { |
||||
if (val) { |
||||
this.$put(`${this.api.disableAnnouncement}?id=${row.id}&isDisable=${val}`).then(res => {}).catch(err => {}) |
||||
} else if (!row.status) { |
||||
this.$confirm('是否发布该公告？', '提示', { |
||||
type: 'success' |
||||
}).then(() => { |
||||
this.$put(`${this.api.disableAnnouncement}?id=${row.id}&isDisable=${val}`).then(res => { |
||||
this.$post(this.api.amendmentAnnouncement, { |
||||
id: row.id, |
||||
status: 1 |
||||
}).then(res => { |
||||
this.getData() |
||||
}).catch(err => {}) |
||||
}).catch(err => {}) |
||||
}).catch(() => { |
||||
row.isOpen = 1 |
||||
}) |
||||
} else { |
||||
this.$put(`${this.api.disableAnnouncement}?id=${row.id}&isDisable=${val}`).then(res => {}).catch(err => {}) |
||||
} |
||||
}, |
||||
add() { |
||||
this.$router.push(`noticeDetail?competitionId=${this.id}`) |
||||
}, |
||||
edit(row) { |
||||
this.$router.push(`noticeDetail?id=${row.id}&competitionId=${this.id}`) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,308 @@ |
||||
<template> |
||||
<!-- 大赛详情 --> |
||||
<div> |
||||
<el-card shadow="hover" style="margin-bottom: 20px"> |
||||
<div class="flex-between"> |
||||
<el-page-header @back="back" :content="(form.id ? '编辑' : '创建') + '公告'"></el-page-header> |
||||
</div> |
||||
</el-card> |
||||
<div class="page"> |
||||
<div class="page-content"> |
||||
<el-form label-width="170px" label-suffix=":" size="small"> |
||||
<el-form-item label="公告标题"> |
||||
<div class="d-inline-block"> |
||||
<el-input placeholder="请输入公告名称" v-model="form.announcementTitle" clearable></el-input> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item label="正文"> |
||||
<quill :border="true" v-model="form.announcementText" :height="400" /> |
||||
</el-form-item> |
||||
<el-form-item label="附件"> |
||||
<el-upload |
||||
:on-remove="handleRemove" |
||||
:on-error="uploadError" |
||||
:on-success="uploadSuccess" |
||||
:before-upload="beforeUpload" |
||||
:before-remove="beforeRemove" |
||||
:limit="5" |
||||
:on-exceed="handleExceed" |
||||
:action="this.api.fileupload" |
||||
:headers="headers" |
||||
:file-list="fileList" |
||||
name="file" |
||||
> |
||||
<el-button size="small" type="primary">点击上传</el-button> |
||||
<div slot="tip" class="el-upload__tip"> |
||||
<p>支持扩展名：.rar .zip .doc .docx .pdf .jpg...</p> |
||||
</div> |
||||
</el-upload> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button v-if="!form.id" @click="save(0)" v-auth="'/activity/list:管理:公告通知:草稿'">草稿</el-button> |
||||
<el-button type="primary" @click="save(1)" v-auth="'/activity/list:管理:公告通知:发布'">发布</el-button> |
||||
<el-button @click="back">取消</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import quill from "@/components/quill"; |
||||
import util from "@/libs/util"; |
||||
import Setting from "@/setting"; |
||||
export default { |
||||
name: "matchDetail", |
||||
data() { |
||||
return { |
||||
headers: { |
||||
token: util.local.get(Setting.tokenKey) |
||||
}, |
||||
form: { |
||||
id: this.$route.query.id, |
||||
competitionId: this.$route.query.competitionId, |
||||
announcementText: '', |
||||
announcementTitle: '', |
||||
announcementAnnexList: [], |
||||
isOpen: 1 |
||||
}, |
||||
updateTime: 0, |
||||
fileName: '', |
||||
fileList: [], |
||||
}; |
||||
}, |
||||
components: { |
||||
quill |
||||
}, |
||||
watch: { |
||||
// 监听信息是否有更改,有的话页面离开的时候要询问是否要保存 |
||||
form: { |
||||
handler(){ |
||||
this.updateTime++ |
||||
if(this.updateTime > 1) this.$store.commit('activity/setWait', 0) |
||||
}, |
||||
deep:true |
||||
}, |
||||
}, |
||||
mounted() { |
||||
this.form.id && this.getData() |
||||
}, |
||||
methods: { |
||||
getData() { |
||||
this.$post(`${this.api.queryAnnouncementDetails}?id=${this.form.id}`).then(({ data }) => { |
||||
this.form = data |
||||
// 附件 |
||||
const fileList = data.announcementAnnexList |
||||
if (fileList) { |
||||
const files = [] |
||||
fileList.map(e => { |
||||
files.push({ |
||||
name: e.fileName, |
||||
url: e.filePath |
||||
}) |
||||
}) |
||||
this.fileList = files |
||||
} else { |
||||
data.announcementAnnexList = [] |
||||
} |
||||
}).catch(err => {}) |
||||
}, |
||||
// 保存 |
||||
save(status) { |
||||
const form = this.form |
||||
if (!form.announcementTitle) return util.warningMsg('请填写公告标题') |
||||
if (!form.announcementText) return util.warningMsg('请填写正文') |
||||
form.status = status |
||||
if (form.id) { |
||||
form.isOpen = 0 |
||||
delete form.announcementAnnexList |
||||
this.$post(this.api.amendmentAnnouncement, form).then(res => { |
||||
util.successMsg("修改成功") |
||||
this.$router.back() |
||||
}).catch(err => {}) |
||||
} else { |
||||
form.isOpen = status ? 0 : 1 |
||||
this.$post(this.api.addAnnouncement, form).then(res => { |
||||
util.successMsg("创建成功") |
||||
this.$router.back() |
||||
}).catch(err => {}) |
||||
} |
||||
}, |
||||
handleExceed(files, fileList) { |
||||
util.warningMsg(`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`); |
||||
}, |
||||
// 附件上传成功 |
||||
uploadSuccess(res) { |
||||
const file = res.data.filesResult |
||||
const { id } = this.form |
||||
const data = { |
||||
announcementId: id || '', |
||||
fileName: this.fileName, |
||||
filePath: file.fileUrl || file.fileId |
||||
} |
||||
this.form.announcementAnnexList.push(data) |
||||
// 编辑的时候需要调新增附件接口 |
||||
id && this.$post(this.api.saveAnnouncementAnnex, data).then(res => {}).catch(res => {}) |
||||
}, |
||||
// 附件上传前 |
||||
beforeUpload(file) { |
||||
this.fileName = file.name |
||||
}, |
||||
uploadError(err, file, fileList) { |
||||
this.$message({ |
||||
message: "上传出错，请重试！", |
||||
type: "error", |
||||
center: true |
||||
}); |
||||
}, |
||||
beforeRemove(file, fileList) { |
||||
return this.$confirm(`确定移除 ${file.name}？`); |
||||
}, |
||||
handleRemove(file, fileList) { |
||||
if (file.url) { |
||||
this.$del(`${this.api.fileDeletion}?keys=${file.url}`).then(res => {}).catch(res => {}) |
||||
const id = this.form.announcementAnnexList.find(e => e.fileName === file.name).id |
||||
this.$post(`${this.api.delAnnex}?id=${id}`).then(res => {}).catch(res => {}) |
||||
} |
||||
}, |
||||
back() { |
||||
this.$router.back() |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
$upload-width: 220px; |
||||
$upload-height: 140px; |
||||
$upload-lg-height: 150px; |
||||
/deep/ .avatar-uploader { |
||||
.el-upload { |
||||
position: relative; |
||||
width: $upload-width; |
||||
height: $upload-height; |
||||
border: 1px dashed #d9d9d9; |
||||
border-radius: 6px; |
||||
cursor: pointer; |
||||
overflow: hidden; |
||||
|
||||
&:hover { |
||||
border-color: #cb221c; |
||||
} |
||||
|
||||
.uploader-default { |
||||
display: flex; |
||||
height: $upload-height; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
text-align: center; |
||||
background: rgba(0, 0, 0, 0.04); |
||||
|
||||
i { |
||||
font-size: 20px; |
||||
font-weight: bold; |
||||
color: #8c939d; |
||||
} |
||||
|
||||
p { |
||||
margin-top: 10px; |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.65); |
||||
line-height: 1; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&.avatar-uploader-lg { |
||||
.el-upload { |
||||
width: 100%; |
||||
max-width: 960px; |
||||
height: $upload-lg-height; |
||||
|
||||
.uploader-default { |
||||
height: $upload-lg-height; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.avatar { |
||||
display: block; |
||||
width: $upload-width; |
||||
height: $upload-height; |
||||
} |
||||
|
||||
.avatar-lg { |
||||
display: block; |
||||
width: 100%; |
||||
height: $upload-lg-height; |
||||
} |
||||
|
||||
.el-upload__tip { |
||||
margin-top: 0; |
||||
|
||||
p { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.45); |
||||
line-height: 1; |
||||
|
||||
&:first-child { |
||||
margin-bottom: 5px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
/deep/ .d-inline-block { |
||||
width: 216px; |
||||
|
||||
.el-select, .el-input { |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
.inline-input { |
||||
.input-wrap { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-bottom: 10px; |
||||
|
||||
.el-input { |
||||
display: inline-block; |
||||
width: 216px; |
||||
margin-right: 8px; |
||||
} |
||||
|
||||
.remove { |
||||
width: 16px; |
||||
height: 16px; |
||||
background: url("../../../assets/img/close.png") 0 0/cover no-repeat; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
.add-btn { |
||||
margin-left: 32px; |
||||
} |
||||
} |
||||
|
||||
.add-btn { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 216px; |
||||
line-height: 32px; |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.65); |
||||
background-color: transparent; |
||||
border: 1px dashed rgba(0, 0, 0, 0.15); |
||||
border-radius: 4px; |
||||
cursor: pointer; |
||||
|
||||
i { |
||||
margin-right: 8px; |
||||
font-size: 14px; |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,533 @@ |
||||
<template> |
||||
<div class="activity"> |
||||
<div class="banner" :style="{backgroundImage: 'url(' + (form.carouselUrl || 'https://huoran.oss-cn-shenzhen.aliyuncs.com/20220613/png/1536269450851409920.png') + ')'}"></div> |
||||
<div class="center"> |
||||
<breadcrumb ref="breadcrumb" :data="'全部赛事/' + form.name" route="matchPreview"></breadcrumb> |
||||
<div class="activity-inner"> |
||||
<div class="flex-between"> |
||||
<el-tabs v-model="curType" @tab-click="typeChange"> |
||||
<el-tab-pane v-for="(item, index) in typeList" :key="index" :label="item.name" :name="item.id"></el-tab-pane> |
||||
</el-tabs> |
||||
<div class="status wait">等待报名</div> |
||||
</div> |
||||
<div class="info"> |
||||
<h6 class="title">{{ form.name }}</h6> |
||||
<div class="meta">最近编辑时间：{{ form.updateTime }}</div> |
||||
</div> |
||||
|
||||
<div class="l-title" id="part1"><img src="@/assets/img/label.png" alt=""> 竞赛信息</div> |
||||
<div v-if="form.description" class="texts ql-editor" v-html="form.description"></div> |
||||
<template v-if="form.competitionAnnexList && form.competitionAnnexList.length"> |
||||
<h6 class="p-title">附件下载</h6> |
||||
<ul class="files"> |
||||
<li v-for="(item, i) in form.competitionAnnexList" :key="i"> |
||||
<el-link v-if="item.canPreview" class="m-r-10" type="primary" @click="previewFile(item)">{{ item.fileName }}</el-link> |
||||
<span v-else class="file-name">{{ item.fileName }}</span> |
||||
<el-link type="primary" :underline="false" @click="download(item)">下载</el-link> |
||||
</li> |
||||
</ul> |
||||
</template> |
||||
<template v-if="!form.description && (!form.competitionAnnexList || !form.competitionAnnexList.length )"> |
||||
<div class="empty"> |
||||
<div> |
||||
<img src="@/assets/img/none.png" alt=""> |
||||
<p>暂无数据</p> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<template v-if="form.releaseType && form.competitionStage.length"> |
||||
<div class="l-title"><img src="@/assets/img/label.png" alt=""> 赛程、规则与内容</div> |
||||
<h6 class="rule-title">共{{ form.competitionStage.length }}个竞赛阶段，同一个团队每个成员只能参加一个阶段赛项</h6> |
||||
<div v-for="(rule, i) in form.competitionStage" :key="i" class="rule"> |
||||
<p style="font-size: 16px;color: #333;">{{ rule.stageName }}</p> |
||||
<p>比赛时间：{{ rule.startTime && rule.startTime + ' ~ ' + rule.endTime }}</p> |
||||
<p>比赛方式：{{ methods.find(e => e.id == rule.method) && methods.find(e => e.id == rule.method).name }}</p> |
||||
<p v-if="!rule.method">课程系统：{{ rule.systemName }}</p> |
||||
<p v-if="rule.onlineButton">线上地点：{{ rule.onlineAddress }}</p> |
||||
<p v-if="rule.offlineButton">线下地点：{{ rule.offlineAddress }}</p> |
||||
<template v-if="rule.method === 2"> |
||||
<p>线下地点：{{ rule.offlineAddress }}</p> |
||||
<p>比赛内容：{{ rule.contentDescription }}</p> |
||||
<p>评分规则：{{ rule.scoreRule }}</p> |
||||
</template> |
||||
|
||||
<template v-if="form.completeCompetitionSetup.competitionType"> |
||||
<p>团队参赛人数限制：{{ rule.teamNumLimit || '不限制' }}</p> |
||||
<p>团队成绩计算方式：{{ teamCalculationMethods.find(e => e.id == rule.teamCalculationMethod) && teamCalculationMethods.find(e => e.id == rule.teamCalculationMethod).name }}</p> |
||||
</template> |
||||
<p>阶段比赛结束后{{ rule.resultAnnouncementTime }}小时，公布阶段比赛成绩。</p> |
||||
<div v-if="form.rule === 1" class="flex"> |
||||
<p>晋级规则：</p> |
||||
<div> |
||||
<p v-if="rule.peopleLimit">本阶段成绩排名前{{ rule.peopleLimit }}队，可晋级下一阶段比赛</p> |
||||
<p v-if="rule.percentageLimit">本阶段成绩排名前{{ rule.percentageLimit }}%，可晋级下一阶段比赛</p> |
||||
<p v-if="rule.scoreLimit">本阶段成绩{{ rule.scoreLimit }}分，可晋级下一阶段比赛</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<!-- 进展 --> |
||||
<div class="l-title" id="part2"><img src="@/assets/img/label.png" alt=""> 竞赛进展</div> |
||||
<ul class="progress" v-if="progress.length"> |
||||
<li v-for="(item,index) in progress" :key="index" :class="item.status == 0 ? 'not' : (item.status == 1 ? 'ing' : 'done')"> |
||||
<i class="dot"></i> |
||||
<p class="name">{{item.title}}</p> |
||||
<p class="desc">{{item.description}}</p> |
||||
</li> |
||||
<img class="rocket" src="@/assets/img/rocket.png" alt=""> |
||||
</ul> |
||||
<template v-else> |
||||
<div class="empty"> |
||||
<div> |
||||
<img src="@/assets/img/none.png" alt=""> |
||||
<p>暂无数据</p> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<!-- 公告 --> |
||||
<div class="l-title" id="part3"><img src="@/assets/img/label.png" alt=""> 通知公告</div> |
||||
<ul class="notice-list" v-if="notices.length"> |
||||
<li v-for="(item, i) in notices" :key="i" @click="toNotice(item)"> |
||||
<h6>{{ item.announcementTitle }}</h6> |
||||
<p class="meta">{{ item.updateTime }}</p> |
||||
<div class="des" v-html="item.announcementText"></div> |
||||
</li> |
||||
</ul> |
||||
<template v-else> |
||||
<div class="empty"> |
||||
<div> |
||||
<img src="@/assets/img/none.png" alt=""> |
||||
<p>暂无通知公告</p> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from "@/libs/util"; |
||||
import breadcrumb from '@/components/breadcrumb' |
||||
import Const from '@/const/activity' |
||||
export default { |
||||
data() { |
||||
return { |
||||
rules: Const.rules, |
||||
methods: Const.methods, |
||||
teamCalculationMethods: Const.teamCalculationMethods, |
||||
curType: '1', |
||||
typeList: [ |
||||
{ |
||||
id: '1', |
||||
name: '竞赛信息' |
||||
}, |
||||
{ |
||||
id: '2', |
||||
name: '竞赛进展' |
||||
}, |
||||
{ |
||||
id: '3', |
||||
name: '通知公告' |
||||
} |
||||
], |
||||
form: util.local.get('activity'), |
||||
progress: [], |
||||
notices: [], |
||||
}; |
||||
}, |
||||
components: { |
||||
breadcrumb |
||||
}, |
||||
mounted() { |
||||
this.handleAnnex() |
||||
if (this.form.id) { |
||||
this.getProgress() |
||||
this.getNotice() |
||||
} |
||||
}, |
||||
methods: { |
||||
// 处理附件 |
||||
handleAnnex() { |
||||
const list = this.form.competitionAnnexList |
||||
if (list) { |
||||
list.map(e => { |
||||
const { filePath } = e |
||||
e.canPreview = util.canPreview(filePath.substr(filePath.lastIndexOf('.') + 1)) // 判断是否能够预览 |
||||
}) |
||||
this.$forceUpdate() |
||||
} |
||||
}, |
||||
getProgress() { // 获取竞赛进展 |
||||
this.$get(this.api.getCompetitionProgress, { |
||||
competitionId: this.form.id |
||||
}).then(res => { |
||||
this.progress = res.competitionProgressList.reverse() |
||||
}).catch(err => {}); |
||||
}, |
||||
// 公告列表 |
||||
getNotice() { |
||||
this.$post(`${this.api.queryAnnouncementByCompetitionId}?pageNum=1&pageSize=1000&competitionId=${this.form.id}`).then(({ data }) => { |
||||
const records = data.records.filter(e => e.status) // 只显示已发布的（status 0草稿 1为已发布） |
||||
records.map(e => { |
||||
e.announcementText = e.announcementText.replace(/<img.*?(?:>|\/>)/gi, '') |
||||
}) |
||||
this.notices = records |
||||
}).catch(res => {}) |
||||
}, |
||||
// 预览附件 |
||||
previewFile(item) { |
||||
const { filePath } = item |
||||
const suffix = filePath.substr(filePath.lastIndexOf('.') + 1) |
||||
window.open((util.isDoc(suffix) || suffix === 'pdf' ? 'https://view.officeapps.live.com/op/view.aspx?src=' : '') + item.filePath) |
||||
}, |
||||
// 下载附件 |
||||
download(item) { |
||||
util.downloadFile(item.fileName, item.filePath) |
||||
}, |
||||
// tab切换 |
||||
typeChange() { |
||||
document.querySelector(`#part${this.curType}`).scrollIntoView() |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.activity { |
||||
padding-bottom: 20px; |
||||
background-color: #F3F6FA; |
||||
.banner{ |
||||
width: 100%; |
||||
height: 350px; |
||||
color: #fff; |
||||
background-size: 100% 350px; |
||||
background-repeat: no-repeat; |
||||
box-sizing: border-box; |
||||
} |
||||
.center { |
||||
width: 1000px; |
||||
margin: 40px auto 0; |
||||
} |
||||
.activity-inner { |
||||
min-height: calc(100vh - 465px); |
||||
padding: 30px 40px 20px; |
||||
background-color: #fff; |
||||
box-sizing: border-box; |
||||
} |
||||
/deep/.el-tabs { |
||||
.el-tabs__item.is-active, .el-tabs__item:hover { |
||||
color: #007EFF; |
||||
} |
||||
.el-tabs__active-bar { |
||||
background-color: #007EFF; |
||||
} |
||||
} |
||||
.p-title { |
||||
border-left-color: #007EFF; |
||||
} |
||||
.l-title{ |
||||
display: flex; |
||||
align-items: center; |
||||
margin-bottom: 12px; |
||||
font-size: 18px; |
||||
color: #333; |
||||
img{ |
||||
margin-right: 5px; |
||||
} |
||||
} |
||||
.status { |
||||
padding: 0 16px; |
||||
margin-left: 20px; |
||||
line-height: 34px; |
||||
font-size: 14px; |
||||
color: #fff; |
||||
background-color: #52C41A; |
||||
border-radius: 4px; |
||||
cursor: pointer; |
||||
&.wait { |
||||
background-color: #FAAD14; |
||||
} |
||||
&.signing { |
||||
background-color: #007EFF; |
||||
} |
||||
&.signed { |
||||
background-color: #52C41A; |
||||
} |
||||
&.finish { |
||||
background-color: #ccc; |
||||
} |
||||
} |
||||
.title{ |
||||
width: 67%; |
||||
margin: 0 auto; |
||||
font-size: 28px; |
||||
text-align: center; |
||||
color: #0B1D30; |
||||
} |
||||
.info .meta{ |
||||
padding: 16px 0; |
||||
font-size: 12px; |
||||
color: #999; |
||||
text-align: center; |
||||
} |
||||
.texts { |
||||
margin-bottom: 30px; |
||||
font-size: 14px; |
||||
line-height: 1.6; |
||||
text-indent: 2em; |
||||
overflow: hidden; |
||||
/deep/img{ |
||||
max-width: 100%; |
||||
} |
||||
} |
||||
.files { |
||||
margin-bottom: 30px; |
||||
li { |
||||
display: flex; |
||||
align-items: center; |
||||
margin: 10px 0; |
||||
} |
||||
.file-name { |
||||
margin-right: 10px; |
||||
font-size: 12px; |
||||
} |
||||
} |
||||
.el-link.el-link--primary { |
||||
color: #007EFF !important; |
||||
&:after { |
||||
border-color: #007EFF; |
||||
} |
||||
} |
||||
} |
||||
.progress{ |
||||
position: relative; |
||||
width: 95%; |
||||
padding: 50px 0; |
||||
margin: 40px auto 80px; |
||||
text-align: left; |
||||
&:before{ |
||||
content: ''; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 50%; |
||||
width: 2px; |
||||
height: 100%; |
||||
background-color: #E1E6F2; |
||||
} |
||||
&:after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: -10px; |
||||
left: 430px; |
||||
border: 8px solid transparent; |
||||
border-bottom-color: #E1E6F2; |
||||
} |
||||
.rocket { |
||||
position: absolute; |
||||
bottom: -50px; |
||||
left: 425px; |
||||
} |
||||
li{ |
||||
position: relative; |
||||
width: 400px; |
||||
margin-bottom: 42px; |
||||
.dot{ |
||||
position: absolute; |
||||
top: 12px; |
||||
left: 431px; |
||||
width: 15px; |
||||
height: 15px; |
||||
background-color: #DCDCDC; |
||||
border-radius: 50%; |
||||
} |
||||
.name{ |
||||
display: inline-block; |
||||
padding: 0 19px; |
||||
margin-bottom: 16px; |
||||
line-height: 40px; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
color: #fff; |
||||
border-radius: 20px; |
||||
background-color: #C4C4C4; |
||||
} |
||||
.desc{ |
||||
position: relative; |
||||
color: #333; |
||||
font-size: 14px; |
||||
} |
||||
&.ing, &.done { |
||||
.dot { |
||||
top: 8px; |
||||
background-color: #007EFF; |
||||
} |
||||
.name { |
||||
background-color: #007EFF; |
||||
} |
||||
} |
||||
&.ing { |
||||
.dot { |
||||
width: 27px; |
||||
height: 27px; |
||||
border: 6px solid #E2F1FB; |
||||
} |
||||
} |
||||
&:nth-child(odd) { |
||||
text-align: right; |
||||
&.ing { |
||||
.dot { |
||||
left: auto; |
||||
right: -58px; |
||||
} |
||||
} |
||||
.name { |
||||
&:before { |
||||
content: ''; |
||||
z-index: 2; |
||||
position: absolute; |
||||
top: 14px; |
||||
right: -35px; |
||||
border: 18px solid transparent; |
||||
border-top-width: 6px; |
||||
border-bottom-width: 6px; |
||||
border-left-color: #C4C4C4; |
||||
} |
||||
} |
||||
.desc { |
||||
text-align: right; |
||||
} |
||||
&.ing, &.done { |
||||
.name { |
||||
&:before { |
||||
border-left-color: #007EFF; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&:nth-child(even) { |
||||
margin-left: 482px; |
||||
.dot { |
||||
left: -51px; |
||||
} |
||||
&.ing { |
||||
.dot { |
||||
left: -57px; |
||||
} |
||||
} |
||||
.name { |
||||
text-align: left; |
||||
&:after { |
||||
content: ''; |
||||
z-index: 2; |
||||
position: absolute; |
||||
top: 14px; |
||||
left: -35px; |
||||
border: 18px solid transparent; |
||||
border-top-width: 6px; |
||||
border-bottom-width: 6px; |
||||
border-right-color: #C4C4C4; |
||||
} |
||||
} |
||||
.desc { |
||||
&:before { |
||||
left: auto; |
||||
right: -16px; |
||||
border: 8px solid transparent; |
||||
border-left-color: #fff; |
||||
} |
||||
&:after { |
||||
left: auto; |
||||
right: -18px; |
||||
border: 9px solid transparent; |
||||
border-left-color: #E6E6E6; |
||||
} |
||||
} |
||||
|
||||
&.ing, &.done { |
||||
.name { |
||||
&:after { |
||||
border-right-color: #007EFF; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&:last-child{ |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
} |
||||
.notice-list { |
||||
text-align: left; |
||||
li { |
||||
padding: 16px; |
||||
margin-bottom: 12px; |
||||
transition: all 0.3s; |
||||
cursor: pointer; |
||||
border-radius: 6px; |
||||
background-color: #fff; |
||||
border-bottom: 1px dashed #ebebeb; |
||||
&:last-child { |
||||
border-bottom: 0; |
||||
} |
||||
} |
||||
h6 { |
||||
font-size: 20px; |
||||
font-weight: 500; |
||||
color: #0B1D30; |
||||
&:hover { |
||||
color: #007EFF; |
||||
} |
||||
} |
||||
.meta { |
||||
margin: 10px 0; |
||||
font-size: 14px; |
||||
color: #666; |
||||
} |
||||
.des { |
||||
font-size: 14px; |
||||
color: #333; |
||||
line-height: 24px; |
||||
display: -webkit-box; |
||||
display:-moz-box; |
||||
-webkit-box-orient: vertical; |
||||
-moz-box-orient: vertical; |
||||
-webkit-line-clamp: 2; |
||||
-moz-line-clamp: 2; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
} |
||||
.empty{ |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
padding: 50px 0; |
||||
text-align: center; |
||||
img{ |
||||
width: 471px; |
||||
} |
||||
p{ |
||||
margin-top: 40px; |
||||
font-size: 18px; |
||||
color: rgba(0, 0, 0, 0.25); |
||||
} |
||||
} |
||||
.rule-title { |
||||
margin-bottom: 10px; |
||||
font-size: 16px; |
||||
} |
||||
.rule { |
||||
padding: 15px; |
||||
margin-bottom: 15px; |
||||
border: 1px solid #dfdfdf; |
||||
p { |
||||
font-size: 14px; |
||||
line-height: 30px; |
||||
color: #6e6e6e; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,170 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="breadcrumb"> |
||||
<el-breadcrumb separator=">"> |
||||
<template v-for="(item, i) in breadPath"> |
||||
<el-breadcrumb-item |
||||
v-if="!i" |
||||
:key="i" |
||||
:to="{ path: 'list' }"> |
||||
{{item}} |
||||
</el-breadcrumb-item> |
||||
<el-breadcrumb-item |
||||
v-else-if="breadPath.length > 2 && i === 1" |
||||
:to="{ path: 'details', query: { end, status, id } }" |
||||
:key="i"> |
||||
{{item}} |
||||
</el-breadcrumb-item> |
||||
<el-breadcrumb-item |
||||
v-else |
||||
:key="i"> |
||||
{{item}} |
||||
</el-breadcrumb-item> |
||||
</template> |
||||
</el-breadcrumb> |
||||
</div> |
||||
<div class="page"> |
||||
<h6 class="title">{{ form.announcementTitle }}</h6> |
||||
<div class="metas"> |
||||
<span>{{ form.updateTime }}</span> |
||||
</div> |
||||
<div class="content ql-editor" v-html="form.announcementText"></div> |
||||
|
||||
<template v-if="form.announcementAnnexList"> |
||||
<h6 class="p-title">附件下载</h6> |
||||
<ul class="files"> |
||||
<li v-for="(item, i) in form.announcementAnnexList" :key="i"> |
||||
<el-link class="m-r-10" type="primary" @click="preview(item)">{{ item.fileName }}</el-link> |
||||
<el-link type="primary" :underline="false" @click="download(item)">下载</el-link> |
||||
</li> |
||||
</ul> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import { Loading } from 'element-ui'; |
||||
import 'quill/dist/quill.core.css'; |
||||
import 'quill/dist/quill.snow.css'; |
||||
import 'quill/dist/quill.bubble.css'; |
||||
import breadcrumb from '@/components/breadcrumb' |
||||
import util from '@/libs/util' |
||||
export default { |
||||
data() { |
||||
return { |
||||
id: this.$route.query.matchId, |
||||
end: this.$route.query.end, |
||||
status: this.$route.query.status, |
||||
breadPath: ['全部赛事', this.$route.query.name], |
||||
form: { |
||||
id: this.$route.query.id, |
||||
announcementText: '', |
||||
announcementTitle: '', |
||||
announcementAnnexList: [] |
||||
}, |
||||
loadIns: null |
||||
} |
||||
}, |
||||
components: { |
||||
breadcrumb |
||||
}, |
||||
mounted() { |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
// 公告详情 |
||||
getData() { |
||||
this.loadIns = Loading.service() |
||||
this.$post(`${this.api.queryAnnouncementDetails}?id=${this.form.id}`).then(({ data }) => { |
||||
this.form = data |
||||
this.breadPath.push(data.announcementTitle) |
||||
this.loadIns.close() |
||||
}).catch(err => { |
||||
this.loadIns.close() |
||||
}) |
||||
}, |
||||
// 预览附件 |
||||
preview(item) { |
||||
const { filePath } = item |
||||
const suffix = filePath.substr(filePath.lastIndexOf('.') + 1) |
||||
window.open((util.isDoc(suffix) || suffix === 'pdf' ? 'https://view.officeapps.live.com/op/view.aspx?src=' : '') + item.filePath) |
||||
}, |
||||
// 下载附件 |
||||
download(item) { |
||||
util.downloadFile(item.fileName, item.filePath) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.breadcrumb { |
||||
margin: 4px 0 16px; |
||||
/deep/.el-breadcrumb__item { |
||||
.is-link, .el-breadcrumb__separator { |
||||
font-weight: 400; |
||||
color: $main-color; |
||||
} |
||||
&:last-child { |
||||
.is-link { |
||||
color: #0B1D30; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.wrap { |
||||
padding-bottom: 20px; |
||||
.title{ |
||||
margin-top: 30px; |
||||
text-align: center; |
||||
font-size: 28px; |
||||
font-weight: 500; |
||||
color: #0B1D30; |
||||
} |
||||
.metas{ |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
padding-bottom: 32px; |
||||
margin: 16px 0 32px; |
||||
span{ |
||||
display: inline-flex; |
||||
align-items: center; |
||||
color: #999; |
||||
font-size: 12px; |
||||
img{ |
||||
width: 18px; |
||||
margin-right: 5px; |
||||
} |
||||
} |
||||
.el-divider { |
||||
margin: 0 16px; |
||||
} |
||||
} |
||||
.cover{ |
||||
margin: 20px 0; |
||||
text-align: center; |
||||
img{ |
||||
width: 800px; |
||||
} |
||||
} |
||||
.content{ |
||||
margin-bottom: 20px; |
||||
line-height: 1.8; |
||||
font-size: 14px; |
||||
text-indent: 2em; |
||||
/deep/img{ |
||||
max-width: 100%; |
||||
} |
||||
} |
||||
} |
||||
.files { |
||||
margin-bottom: 30px; |
||||
li { |
||||
display: flex; |
||||
align-items: center; |
||||
margin: 10px 0; |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,37 @@ |
||||
import BasicLayout from "@/layouts/home"; |
||||
|
||||
const meta = {}; |
||||
|
||||
const pre = "activity-"; |
||||
|
||||
export default { |
||||
path: "/activity", |
||||
name: "activity", |
||||
redirect: { |
||||
name: `${pre}list` |
||||
}, |
||||
meta, |
||||
component: BasicLayout, |
||||
children: [ |
||||
{ |
||||
path: `list`, |
||||
component: () => import("@/pages/activity/list"), |
||||
}, |
||||
{ |
||||
path: `details`, |
||||
component: () => import("@/pages/activity/details"), |
||||
}, |
||||
{ |
||||
path: `noticeDetail`, |
||||
component: () => import("@/pages/activity/noticeDetail"), |
||||
}, |
||||
{ |
||||
path: `manage`, |
||||
component: () => import("@/pages/activity/manage/list"), |
||||
}, |
||||
{ |
||||
path: `add`, |
||||
component: () => import("@/pages/activity/manage/add"), |
||||
} |
||||
] |
||||
}; |
||||
Loading…
Reference in new issue