parent
13d0e57d9a
commit
8d3b1e62f5
13 changed files with 2476 additions and 1 deletions
@ -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: 1, |
||||||
|
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,365 @@ |
|||||||
|
<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.activityList, { |
||||||
|
pageNum: this.page, |
||||||
|
pageSize: this.pageSize, |
||||||
|
endTime: form.endTime || null, |
||||||
|
keyWords: this.keyword || null, |
||||||
|
platformSource: 1, // 当前所属平台(0:中台，1：职站教师 2职站学生) |
||||||
|
startTime: form.startTime || null, |
||||||
|
publishStatus: form.publishStatus === '' ? null : form.publishStatus |
||||||
|
}).then(({ data }) => { |
||||||
|
// load.close() |
||||||
|
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("/activity/add"); |
||||||
|
}, |
||||||
|
manage(row) { |
||||||
|
this.$router.push(`/activity/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: 1 // 禁用平台来源(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,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: [ |
||||||
|
{ |
||||||
|
name: `${pre}list`, |
||||||
|
path: `list`, |
||||||
|
component: () => import("@/pages/activity/list"), |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: `${pre}add`, |
||||||
|
path: `add`, |
||||||
|
component: () => import("@/pages/activity/add"), |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: `${pre}manage`, |
||||||
|
path: `manage`, |
||||||
|
component: () => import("@/pages/activity/manage"), |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: `${pre}noticeDetail`, |
||||||
|
path: `noticeDetail`, |
||||||
|
component: () => import("@/pages/activity/manage/noticeDetail"), |
||||||
|
}, |
||||||
|
] |
||||||
|
}; |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
/** |
||||||
|
* 赛事相关 |
||||||
|
* */ |
||||||
|
export default { |
||||||
|
namespaced: true, |
||||||
|
state: { |
||||||
|
page: 1, |
||||||
|
cache: null |
||||||
|
}, |
||||||
|
mutations: { |
||||||
|
setPage: (state, page) => { |
||||||
|
state.page = page |
||||||
|
}, |
||||||
|
setCache: (state, cache) => { |
||||||
|
state.cache = cache |
||||||
|
} |
||||||
|
}, |
||||||
|
actions: { |
||||||
|
|
||||||
|
} |
||||||
|
}; |
||||||
Loading…
Reference in new issue