parent
6b46057408
commit
f11780ee8f
24 changed files with 3089 additions and 33 deletions
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 318 B |
|
Before Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 45 KiB |
@ -0,0 +1,594 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-card shadow="hover" class="m-b-20"> |
||||||
|
<div class="flex-between"> |
||||||
|
<el-page-header @back="back" :content="'创建赛事'"></el-page-header> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
<el-card shadow="hover" class="m-b-20"> |
||||||
|
<el-form label-width="170px" label-suffix=":" size="small"> |
||||||
|
<el-form-item label="竞赛封面（选填）"> |
||||||
|
<el-upload |
||||||
|
class="avatar-uploader" |
||||||
|
accept=".jpg,.png,.jpeg,.gif" |
||||||
|
:on-remove="handleRemove" |
||||||
|
:on-error="uploadError" |
||||||
|
:on-success="uploadSuccess" |
||||||
|
:before-remove="beforeRemove" |
||||||
|
:limit="1" |
||||||
|
:on-exceed="handleExceed" |
||||||
|
: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-remove="handleLgRemove" |
||||||
|
:on-error="uploadError" |
||||||
|
:on-success="uploadLgSuccess" |
||||||
|
:before-remove="beforeRemove" |
||||||
|
:limit="1" :on-exceed="handleExceed" |
||||||
|
: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 label="比赛范围"> |
||||||
|
<div> |
||||||
|
<el-radio v-model="form.competitionScope" :label="1">全平台</el-radio> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-radio v-model="form.competitionScope" :label="2">指定区域、院校</el-radio> |
||||||
|
<el-button v-if="form.competitionScope === 2" type="primary" size="mini" @click="showRange">选择院校</el-button> |
||||||
|
<span style="margin-left: 20px">{{ rangeName }}</span> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="竞赛名称"> |
||||||
|
<div class="d-inline-block"> |
||||||
|
<el-input placeholder="请输入竞赛名称" v-model="form.name" clearable></el-input> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item 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" @click="addSponsor"> |
||||||
|
<i class="el-icon-plus"></i> |
||||||
|
<span>添加</span> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="承办方（选填）"> |
||||||
|
<div class="inline-input"> |
||||||
|
<div class="input-wrap" v-for="(item,index) in undertakerList" :key="index"> |
||||||
|
<el-input placeholder="承办方名称" v-model="undertakerList[index]"></el-input> |
||||||
|
<i v-if="undertakerList.length > 1" class="remove" @click="delOrganizer(index)"></i> |
||||||
|
<button v-if="index == 0" class="add-btn" @click="addOrganizer"> |
||||||
|
<i class="el-icon-plus"></i> |
||||||
|
<span>添加</span> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<button v-if="!undertakerList.length" class="add-btn" @click="addOrganizer"> |
||||||
|
<i class="el-icon-plus"></i> |
||||||
|
<span>添加</span> |
||||||
|
</button> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item 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 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 label="竞赛详情"> |
||||||
|
<quill :border="true" v-model="form.description" :height="400" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="附件"> |
||||||
|
<el-upload |
||||||
|
:on-remove="handleAnnexRemove" |
||||||
|
:on-error="uploadError" |
||||||
|
:before-upload="beforeUpload" |
||||||
|
:on-success="uploadAnnexSuccess" |
||||||
|
:before-remove="beforeRemove" |
||||||
|
:limit="5" |
||||||
|
:on-exceed="handleExceedAnnex" |
||||||
|
:action="this.api.fileupload" |
||||||
|
:headers="headers" |
||||||
|
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 @click="save(0)">保存</el-button> |
||||||
|
<el-button type="primary" @click="save(1)">发布</el-button> |
||||||
|
<el-button type="danger" @click="preview">预览</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-dialog title="请勾选院校" :visible.sync="rangeVisible" width="580px" custom-class="range-dia" :close-on-click-modal="false"> |
||||||
|
<el-cascader |
||||||
|
ref="range" |
||||||
|
v-model="range" |
||||||
|
:options="ranges" |
||||||
|
:props="props" |
||||||
|
clearable |
||||||
|
filterable></el-cascader> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button size="small" @click="rangeVisible = false">取 消</el-button> |
||||||
|
<el-button size="small" type="primary" @click="rangeSubmit">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import util from "@/libs/util"; |
||||||
|
import quill from "@/components/quill"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "add", |
||||||
|
data() { |
||||||
|
const that = this |
||||||
|
return { |
||||||
|
headers: { |
||||||
|
token: sessionStorage.getItem('token') |
||||||
|
}, |
||||||
|
fileName: '', |
||||||
|
form: { |
||||||
|
id: '', |
||||||
|
platformSource: 0, // 平台来源(0:中台，1：职站) |
||||||
|
ztOpen: 0, // 中台是否开启(0开启 1未开启 默认0) |
||||||
|
name: '', |
||||||
|
sponsor: '', |
||||||
|
undertaker: '', |
||||||
|
competitionScope: 1, // 大赛范围(0:本校内 1:全平台 2:指定区域、院校) |
||||||
|
contestRangeList: [], // 大赛范围选择 |
||||||
|
contestAnnexList: [], // 赛事附件 |
||||||
|
coverUrl: '', |
||||||
|
carouselUrl: '', |
||||||
|
publishStatus: 0, |
||||||
|
signUpStartTime: '', |
||||||
|
signUpEndTime: '', |
||||||
|
playStartTime: '', |
||||||
|
playEndTime: '', |
||||||
|
description: '', |
||||||
|
}, |
||||||
|
signupTime: '', |
||||||
|
playTime: '', |
||||||
|
sponsorList: [""], |
||||||
|
undertakerList: [""], |
||||||
|
pickerOptions: { |
||||||
|
disabledDate: time => { |
||||||
|
return time.getTime() < new Date().getTime() - 86400000; |
||||||
|
} |
||||||
|
}, |
||||||
|
provinceList: this.$store.state.provinceList, |
||||||
|
rangeVisible: false, |
||||||
|
range: [], |
||||||
|
ranges: [], |
||||||
|
rangeName: '', |
||||||
|
// 选择区域懒加载 |
||||||
|
props: { |
||||||
|
multiple: true, |
||||||
|
checkStrictly: true, |
||||||
|
lazy: true, |
||||||
|
lazyLoad (node, resolve) { |
||||||
|
const { level, value } = node |
||||||
|
// 省份 |
||||||
|
if (!level) { |
||||||
|
const data = [] |
||||||
|
that.$store.state.provinceList.map(e => { |
||||||
|
data.push({ |
||||||
|
value: e.provinceId, |
||||||
|
label: e.provinceName |
||||||
|
}) |
||||||
|
}) |
||||||
|
resolve(data) |
||||||
|
} else if (level === 1) { |
||||||
|
// 城市 |
||||||
|
that.$get(that.api.queryCity, { |
||||||
|
provinceId: value |
||||||
|
}).then(({ list }) => { |
||||||
|
const data = [] |
||||||
|
list.map(e => { |
||||||
|
data.push({ |
||||||
|
provinceId: value, |
||||||
|
value: e.cityId, |
||||||
|
label: e.cityName |
||||||
|
}) |
||||||
|
}) |
||||||
|
resolve(data) |
||||||
|
}).catch(res => {}) |
||||||
|
} else if (level === 2) { |
||||||
|
// 学校 |
||||||
|
that.$get(that.api.getSchoolsByProvince, { |
||||||
|
provinceId: node.data.provinceId, |
||||||
|
cityId: value, |
||||||
|
schoolName: '' |
||||||
|
}).then(({ list }) => { |
||||||
|
const data = [] |
||||||
|
list.map(e => { |
||||||
|
data.push({ |
||||||
|
value: e.schoolId, |
||||||
|
label: e.schoolName, |
||||||
|
leaf: true |
||||||
|
}) |
||||||
|
}) |
||||||
|
resolve(data) |
||||||
|
}).catch(res => {}) |
||||||
|
} else { |
||||||
|
resolve([]) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
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() { |
||||||
|
|
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 选择范围 |
||||||
|
showRange() { |
||||||
|
this.rangeVisible = true |
||||||
|
}, |
||||||
|
// 范围确定 |
||||||
|
rangeSubmit() { |
||||||
|
// 处理提交需要的id |
||||||
|
const data = [] |
||||||
|
this.range.map(e => { |
||||||
|
data.push({ |
||||||
|
provinceId: e[0] || '', |
||||||
|
cityId: e[1] || '', |
||||||
|
schoolId: e[2] || '', |
||||||
|
type: e.length > 2 ? 0 : 1 |
||||||
|
}) |
||||||
|
}) |
||||||
|
console.log(44, this.range, this.$refs.range.getCheckedNodes()) |
||||||
|
this.form.contestRangeList = data |
||||||
|
|
||||||
|
// 处理显示的name |
||||||
|
const checked = this.$refs.range.getCheckedNodes() |
||||||
|
const name = [] |
||||||
|
checked.map(e => { |
||||||
|
name.push(e.label) |
||||||
|
}) |
||||||
|
this.rangeName = name.join('、') |
||||||
|
|
||||||
|
this.rangeVisible = false |
||||||
|
}, |
||||||
|
handleExceed(files, fileList) { |
||||||
|
util.warningMsg(`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`); |
||||||
|
}, |
||||||
|
handleExceedAnnex(files, fileList) { |
||||||
|
util.warningMsg(`当前限制选择 5 个文件，如需更换，请删除一个文件再重新选择！`); |
||||||
|
}, |
||||||
|
uploadSuccess(res) { |
||||||
|
const { coverUrl } = this.form |
||||||
|
coverUrl && this.$del(`${this.api.fileDeletion}?keys=${coverUrl}`).then(res => {}).catch(res => {}) |
||||||
|
this.form.coverUrl = res.data.filesResult.fileUrl |
||||||
|
}, |
||||||
|
uploadLgSuccess(res) { |
||||||
|
const { carouselUrl } = this.form |
||||||
|
carouselUrl && this.$del(`${this.api.fileDeletion}?keys=${carouselUrl}`).then(res => {}).catch(res => {}) |
||||||
|
this.form.carouselUrl = res.data.filesResult.fileUrl |
||||||
|
}, |
||||||
|
// 附件上传成功 |
||||||
|
uploadAnnexSuccess(res) { |
||||||
|
const file = res.data.filesResult |
||||||
|
this.form.contestAnnexList.push({ |
||||||
|
fileName: this.fileName, |
||||||
|
filePath: file.fileUrl || file.fileId |
||||||
|
}) |
||||||
|
console.log(44, this.form) |
||||||
|
}, |
||||||
|
// 附件上传前 |
||||||
|
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) { |
||||||
|
this.$del(`${this.api.fileDeletion}?keys=${this.form.coverUrl}`).then(res => { |
||||||
|
this.form.coverUrl = '' |
||||||
|
}).catch(res => {}) |
||||||
|
}, |
||||||
|
handleLgRemove(file, fileList) { |
||||||
|
this.$del(`${this.api.fileDeletion}?keys=${this.form.carouselUrl}`).then(res => { |
||||||
|
this.form.carouselUrl = '' |
||||||
|
}).catch(res => {}) |
||||||
|
}, |
||||||
|
handleAnnexRemove(file, fileList) { |
||||||
|
debugger |
||||||
|
this.$del(`${this.api.fileDeletion}?keys=${this.coverUrl}`).then(res => { |
||||||
|
this.carouselUrl = '' |
||||||
|
}).catch(res => {}) |
||||||
|
}, |
||||||
|
// 提交 |
||||||
|
save(status) { |
||||||
|
if (this.submiting) return false; |
||||||
|
const { form } = this |
||||||
|
form.sponsor = this.sponsorList.filter(d => d).join(); |
||||||
|
form.undertaker = this.undertakerList.filter(d => d).join(); |
||||||
|
if (form.competitionScope == 2 && !form.contestRangeList.length) return util.warningMsg('请选择区域、院校') |
||||||
|
if (!form.name) return util.warningMsg("请填写竞赛名称"); |
||||||
|
if (status == 0) { |
||||||
|
if (!form.sponsor) 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 && status == 0) return util.warningMsg("请选择竞赛时间"); |
||||||
|
if (playStartTime && playStartTime < signUpEndTime) return util.warningMsg("竞赛时间不能早于报名结束时间"); |
||||||
|
if (!form.description && status == 0) return util.warningMsg("请填写竞赛详情"); |
||||||
|
|
||||||
|
this.submiting = true |
||||||
|
form.publishStatus = status |
||||||
|
if (this.form.id) { |
||||||
|
this.$put(this.api.editContest, form).then(res => { |
||||||
|
this.submiting = false; |
||||||
|
util.successMsg("修改成功"); |
||||||
|
this.$router.back(); |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
this.submiting = false; |
||||||
|
}); |
||||||
|
} else { |
||||||
|
this.$post(this.api.addContest, form).then(res => { |
||||||
|
this.submiting = false; |
||||||
|
util.successMsg("创建成功"); |
||||||
|
this.$router.back(); |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
this.submiting = false; |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
// 预览 |
||||||
|
preview() { |
||||||
|
|
||||||
|
}, |
||||||
|
back(i) { |
||||||
|
const id = this.form.cid |
||||||
|
const updateTime = this.updateTime |
||||||
|
// 更改了信息才需要提示 |
||||||
|
if ((id && updateTime > 1) || (!id && updateTime)) { |
||||||
|
this.$confirm(`编辑的内容未保存，是否保存？`, '提示', { |
||||||
|
type: 'warning' |
||||||
|
}).then(() => { |
||||||
|
this.save(1) |
||||||
|
}).catch(() => { |
||||||
|
this.backPage() |
||||||
|
}) |
||||||
|
} else { |
||||||
|
this.backPage() |
||||||
|
} |
||||||
|
}, |
||||||
|
backPage(){ |
||||||
|
this.$router.back() |
||||||
|
}, |
||||||
|
addSponsor() { |
||||||
|
this.sponsorList.push(""); |
||||||
|
}, |
||||||
|
delSponsor(index) { |
||||||
|
this.sponsorList.splice(index, 1); |
||||||
|
}, |
||||||
|
addOrganizer() { |
||||||
|
this.undertakerList.push(""); |
||||||
|
}, |
||||||
|
delOrganizer(index) { |
||||||
|
this.undertakerList.splice(index, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</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,323 @@ |
|||||||
|
<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> |
||||||
|
<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> |
||||||
|
<el-select v-model="form.platformSource" clearable @change="getData"> |
||||||
|
<el-option v-for="(item, i) in sourceList" :key="i" :label="item.name" :value="item.id"></el-option> |
||||||
|
</el-select> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<label>大赛范围：</label> |
||||||
|
<el-select v-model="form.competitionScope" clearable @change="getData"> |
||||||
|
<el-option v-for="(item, i) in rangeList" :key="i" :label="item.name" :value="item.id"></el-option> |
||||||
|
</el-select> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<div> |
||||||
|
<el-button type="primary" round @click="add">创建竞赛</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<el-table ref="table" :data="matchData" 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 + (page - 1) * pageSize + 1 }} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="competitionName" label="竞赛名称" align="center"></el-table-column> |
||||||
|
<el-table-column prop="founderName" label="创建人" align="center"></el-table-column> |
||||||
|
<el-table-column prop="name" label="大赛来源" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{ sourceList.find(e => e.id === scope.row.platformSource).name }} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="name" label="大赛范围" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{ rangeList.find(e => e.id === scope.row.competitionScope).name }} |
||||||
|
</template> |
||||||
|
</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="150"> |
||||||
|
<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="200"></el-table-column> |
||||||
|
<el-table-column label="操作" align="center" width="100"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" @click="manage(scope.row)">管理</el-button> |
||||||
|
<el-divider direction="vertical"></el-divider> |
||||||
|
<el-button type="text" @click="delData(scope.row)">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="发布状态" align="center" width="120"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-switch |
||||||
|
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"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "match", |
||||||
|
data() { |
||||||
|
return { |
||||||
|
keyword: "", |
||||||
|
sourceList: [ |
||||||
|
{ |
||||||
|
id: "", |
||||||
|
name: "不限" |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 0, |
||||||
|
name: "平台创建" |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
name: "院校创建" |
||||||
|
} |
||||||
|
], |
||||||
|
rangeList: [ |
||||||
|
{ |
||||||
|
id: "", |
||||||
|
name: "不限" |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
name: "全平台" |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
name: "指定区域" |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 0, |
||||||
|
name: "校内" |
||||||
|
} |
||||||
|
], |
||||||
|
matchData: [], |
||||||
|
form: { |
||||||
|
month: "", |
||||||
|
publishStatus: "", |
||||||
|
startTime: "", |
||||||
|
endTime: "", |
||||||
|
platformSource: '', // 大赛来源(0中台，1职站) |
||||||
|
competitionScope: '', // 大赛范围(0:本校内 1:全平台 2.指定区域、院校) |
||||||
|
}, |
||||||
|
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: [ "未发布", "已发布"] |
||||||
|
}; |
||||||
|
}, |
||||||
|
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() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData() { |
||||||
|
const { form } = this |
||||||
|
this.$post(this.api.contestPageConditionQueryByNakadai, { |
||||||
|
pageNum: this.page, |
||||||
|
pageSize: this.pageSize, |
||||||
|
competitionScope: form.competitionScope === '' ? null : form.competitionScope, |
||||||
|
endTime: form.endTime || null, |
||||||
|
keyWord: this.keyword || null, |
||||||
|
platformSource: form.platformSource === '' ? null : form.platformSource, |
||||||
|
startTime: form.startTime || null, |
||||||
|
}).then(({ data }) => { |
||||||
|
this.matchData = data.records |
||||||
|
this.total = data.total |
||||||
|
this.$refs.table.clearSelection() |
||||||
|
if (!this.matchData.length && this.total) { |
||||||
|
this.page-- |
||||||
|
this.getData() |
||||||
|
} |
||||||
|
}).catch(res => {}) |
||||||
|
}, |
||||||
|
initData() { |
||||||
|
this.page = 1; |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
add() { |
||||||
|
this.$router.push("/addMatch"); |
||||||
|
}, |
||||||
|
manage(row) { |
||||||
|
this.$router.push(`/matchManage?id=${row.id}`); |
||||||
|
}, |
||||||
|
|
||||||
|
changeType() { |
||||||
|
this.$refs.table.clearSelection(); |
||||||
|
this.initData(); |
||||||
|
}, |
||||||
|
delData(row) { |
||||||
|
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", { |
||||||
|
type: "warning" |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$post(`${this.api.deleteContest}?contestId=${row.id}`).then(res => { |
||||||
|
util.successMsg("删除成功"); |
||||||
|
this.getData(); |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
}) |
||||||
|
.catch(() => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
delAllData() { |
||||||
|
if (this.multipleSelection.length != "") { |
||||||
|
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", { |
||||||
|
type: "warning" |
||||||
|
}).then(() => { |
||||||
|
let delList = this.multipleSelection.map(item => { |
||||||
|
return item.id; |
||||||
|
}); |
||||||
|
this.$post(this.api.deleteContest, delList).then(res => { |
||||||
|
this.multipleSelection = []; |
||||||
|
this.$refs.table.clearSelection(); |
||||||
|
util.successMsg("删除成功"); |
||||||
|
this.getData(); |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
}).catch(() => { |
||||||
|
}); |
||||||
|
} else { |
||||||
|
util.errorMsg("请先选择数据 ！"); |
||||||
|
} |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val; |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.page = val; |
||||||
|
this.$router.push(`match?page=${val}`) |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
transferTime(date, type) { |
||||||
|
if (date == "0000-00-00 00:00:00") return "---"; |
||||||
|
return date; |
||||||
|
}, |
||||||
|
switchOff(val, row, index) { |
||||||
|
this.$put(`${this.api.publishContest}/${row.id}/${val}`) |
||||||
|
.then(res => { |
||||||
|
val == 1 ? util.warningMsg("该赛事信息已隐藏对学生端用户不可见") : util.successMsg("该赛事信息已对学生端用户公开"); |
||||||
|
}) |
||||||
|
.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,450 @@ |
|||||||
|
<template> |
||||||
|
<!-- 大赛详情 --> |
||||||
|
<div style="padding: 24px"> |
||||||
|
<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-remove="handleRemove" |
||||||
|
:on-error="uploadError" |
||||||
|
:on-success="uploadSuccess" |
||||||
|
:before-remove="beforeRemove" |
||||||
|
:limit="1" |
||||||
|
:on-exceed="handleExceed" |
||||||
|
:action="this.api.fileupload" |
||||||
|
name="file" |
||||||
|
> |
||||||
|
<img v-if="coverUrl" :src="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-remove="handleLgRemove" |
||||||
|
:on-error="uploadError" |
||||||
|
:on-success="uploadLgSuccess" |
||||||
|
:before-remove="beforeRemove" |
||||||
|
:limit="1" |
||||||
|
:on-exceed="handleExceed" |
||||||
|
:action="this.api.fileupload" |
||||||
|
name="file" |
||||||
|
> |
||||||
|
<img v-if="carouselUrl" :src="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 label="竞赛名称"> |
||||||
|
<div class="d-inline-block"> |
||||||
|
<el-input placeholder="请输入竞赛名称" v-model="name" clearable></el-input> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item 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" @click="addSponsor"> |
||||||
|
<i class="el-icon-plus"></i> |
||||||
|
<span>添加</span> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="承办方（选填）"> |
||||||
|
<div class="inline-input"> |
||||||
|
<div class="input-wrap" v-for="(item,index) in undertakerList" :key="index"> |
||||||
|
<el-input placeholder="承办方名称" v-model="undertakerList[index]"></el-input> |
||||||
|
<i v-if="undertakerList.length > 1" class="remove" @click="delOrganizer(index)"></i> |
||||||
|
<button v-if="index == 0" class="add-btn" @click="addOrganizer"> |
||||||
|
<i class="el-icon-plus"></i> |
||||||
|
<span>添加</span> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<button v-if="!undertakerList.length" class="add-btn" @click="addOrganizer"> |
||||||
|
<i class="el-icon-plus"></i> |
||||||
|
<span>添加</span> |
||||||
|
</button> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="报名时间"> |
||||||
|
<el-date-picker v-model="signupTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="竞赛时间"> |
||||||
|
<el-date-picker v-model="playTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="竞赛详情"> |
||||||
|
<quill :border="true" v-model="description" :height="400" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button @click="save(1)">保存</el-button> |
||||||
|
<el-button type="primary" v-if="publishStatus == 1" @click="save(0)">发布</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import quill from "@/components/quill"; |
||||||
|
import util from "@/libs/util"; |
||||||
|
import { mapActions } from "vuex"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "matchDetail", |
||||||
|
data() { |
||||||
|
return { |
||||||
|
id: this.$route.query.id, |
||||||
|
coverUrl: "", |
||||||
|
carouselUrl: "", |
||||||
|
publishStatus: 0, |
||||||
|
uploadList: [], |
||||||
|
uploadDataList: [], |
||||||
|
name: "", |
||||||
|
sponsor: "", |
||||||
|
sponsorList: [""], |
||||||
|
undertaker: "", |
||||||
|
undertakerList: [], |
||||||
|
signUpStartTime: "", |
||||||
|
signUpEndTime: "", |
||||||
|
signupTime: "", |
||||||
|
playTime: "", |
||||||
|
playStartTime: "", |
||||||
|
playEndTime: "", |
||||||
|
description: "" |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
quill |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
signupTime: function(val) { |
||||||
|
if (val) { |
||||||
|
this.signUpStartTime = val[0]; |
||||||
|
this.signUpEndTime = val[1]; |
||||||
|
} else { |
||||||
|
this.signUpStartTime = ""; |
||||||
|
this.signUpEndTime = ""; |
||||||
|
} |
||||||
|
}, |
||||||
|
playTime: function(val) { |
||||||
|
if (val) { |
||||||
|
this.playStartTime = val[0]; |
||||||
|
this.playEndTime = val[1]; |
||||||
|
} else { |
||||||
|
this.playStartTime = ""; |
||||||
|
this.playEndTime = ""; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getData(); |
||||||
|
this.commitId(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
...mapActions("match", [ |
||||||
|
"setMatchId" |
||||||
|
]), |
||||||
|
save(status) { |
||||||
|
this.sponsor = this.sponsorList.filter(d => d).join(); |
||||||
|
this.undertaker = this.undertakerList.filter(d => d).join(); |
||||||
|
|
||||||
|
if (!this.name) return util.warningMsg("请填写竞赛名称"); |
||||||
|
if (status == 0) { |
||||||
|
if (!this.sponsor) return util.warningMsg("请填写主办方"); |
||||||
|
if (!this.signUpStartTime) return util.warningMsg("请选择报名时间"); |
||||||
|
} |
||||||
|
let now = new Date().getTime(); |
||||||
|
let signUpStartTime = new Date(this.signUpStartTime).getTime(); |
||||||
|
let signUpEndTime = new Date(this.signUpEndTime).getTime(); |
||||||
|
let playStartTime = new Date(this.playStartTime).getTime(); |
||||||
|
// if(signUpStartTime && now > signUpStartTime) return this.$$message.warning('报名时间不能早于当前时间') |
||||||
|
if (!this.playStartTime && status == 0) return util.warningMsg("请选择竞赛时间"); |
||||||
|
if (playStartTime && playStartTime < signUpEndTime) return util.warningMsg("竞赛时间不能早于报名结束时间"); |
||||||
|
if (!this.description && status == 0) return util.warningMsg("请填写竞赛详情"); |
||||||
|
|
||||||
|
let data = { |
||||||
|
id: this.id, |
||||||
|
coverUrl: this.coverUrl, |
||||||
|
carouselUrl: this.carouselUrl, |
||||||
|
description: this.description, |
||||||
|
founderId: 1, |
||||||
|
name: this.name, |
||||||
|
playEndTime: this.playEndTime, |
||||||
|
playStartTime: this.playStartTime, |
||||||
|
publishStatus: status ? this.publishStatus : 0, |
||||||
|
signUpEndTime: this.signUpEndTime, |
||||||
|
signUpStartTime: this.signUpStartTime, |
||||||
|
sponsor: this.sponsor, |
||||||
|
undertaker: this.undertaker |
||||||
|
}; |
||||||
|
if (this.id) { |
||||||
|
this.$put(this.api.editContest, data).then(res => { |
||||||
|
util.successMsg("修改成功"); |
||||||
|
this.$router.back(); |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
}); |
||||||
|
} else { |
||||||
|
this.$post(this.api.addContest, data).then(res => { |
||||||
|
util.successMsg("创建成功"); |
||||||
|
this.$router.back(); |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
getData() { |
||||||
|
this.$get(this.api.getContest + "/" + this.id) |
||||||
|
.then(res => { |
||||||
|
let data = res.contest; |
||||||
|
this.coverUrl = data.coverUrl; |
||||||
|
this.carouselUrl = data.carouselUrl; |
||||||
|
this.description = data.description; |
||||||
|
this.name = data.name; |
||||||
|
this.playEndTime = data.playEndTime; |
||||||
|
this.playStartTime = data.playStartTime; |
||||||
|
this.publishStatus = data.publishStatus; |
||||||
|
this.signUpEndTime = data.signUpEndTime; |
||||||
|
this.signUpStartTime = data.signUpStartTime; |
||||||
|
this.sponsor = data.sponsor; |
||||||
|
this.undertaker = data.undertaker; |
||||||
|
|
||||||
|
this.signupTime = [data.signUpStartTime, data.signUpEndTime]; |
||||||
|
this.playTime = [data.playStartTime, data.playEndTime]; |
||||||
|
this.sponsorList = data.sponsor.split(","); |
||||||
|
this.undertakerList = data.undertaker.split(","); |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
|
||||||
|
}); |
||||||
|
}, |
||||||
|
commitId() { |
||||||
|
this.setMatchId(this.id); |
||||||
|
}, |
||||||
|
handleExceed(files, fileList) { |
||||||
|
util.warningMsg(`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`); |
||||||
|
}, |
||||||
|
uploadSuccess(res, file, fileList) { |
||||||
|
if (this.coverUrl) { |
||||||
|
let fileName = this.coverUrl.replace("https://liuwanr.oss-cn-shenzhen.aliyuncs.com/", ""); |
||||||
|
this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => { |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
} |
||||||
|
this.coverUrl = res.data.filesResult.fileUrl; |
||||||
|
}, |
||||||
|
uploadLgSuccess(res, file, fileList) { |
||||||
|
if (this.carouselUrl) { |
||||||
|
let fileName = this.carouselUrl.replace("https://liuwanr.oss-cn-shenzhen.aliyuncs.com/", ""); |
||||||
|
this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => { |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
} |
||||||
|
this.carouselUrl = res.data.filesResult.fileUrl; |
||||||
|
}, |
||||||
|
uploadError(err, file, fileList) { |
||||||
|
this.$message({ |
||||||
|
message: "上传出错，请重试！", |
||||||
|
type: "error", |
||||||
|
center: true |
||||||
|
}); |
||||||
|
}, |
||||||
|
beforeRemove(file, fileList) { |
||||||
|
return this.$confirm(`确定移除 ${file.name}？`); |
||||||
|
}, |
||||||
|
handleRemove(file, fileList) { |
||||||
|
let fileName = this.coverUrl.replace("https://liuwanr.oss-cn-shenzhen.aliyuncs.com/", ""); |
||||||
|
this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => { |
||||||
|
this.coverUrl = ""; |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
handleLgRemove(file, fileList) { |
||||||
|
let fileName = this.carouselUrl.replace("https://liuwanr.oss-cn-shenzhen.aliyuncs.com/", ""); |
||||||
|
this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => { |
||||||
|
this.carouselUrl = ""; |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
uploadSure() { |
||||||
|
this.BatchUpload = false; |
||||||
|
this.pageNo = 1; |
||||||
|
this.keyword = ""; |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
goback() { |
||||||
|
this.$confirm("确定返回？未更新的信息将不会保存。", "提示", { |
||||||
|
type: "warning" |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$router.push("/match"); |
||||||
|
}) |
||||||
|
.catch(() => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
addSponsor() { |
||||||
|
this.sponsorList.push(""); |
||||||
|
}, |
||||||
|
delSponsor(index) { |
||||||
|
this.sponsorList.splice(index, 1); |
||||||
|
}, |
||||||
|
addOrganizer() { |
||||||
|
this.undertakerList.push(""); |
||||||
|
}, |
||||||
|
delOrganizer(index) { |
||||||
|
this.undertakerList.splice(index, 1); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
}; |
||||||
|
</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,73 @@ |
|||||||
|
<template> |
||||||
|
<!-- 赛事管理 --> |
||||||
|
<div> |
||||||
|
<el-card shadow="hover" class="m-b-20"> |
||||||
|
<div class="flex-between"> |
||||||
|
<el-page-header @back="goBack" :content="'赛事管理'"></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" @waitChange="tabChangeWait()" :key="index" :class="{active: index == active}" @click="tabChange(index)">{{ item }}</a> |
||||||
|
</div> |
||||||
|
<!-- 大赛详情 --> |
||||||
|
<MatchDetail v-if="active == 'first'" /> |
||||||
|
<!-- 竞赛进展 --> |
||||||
|
<MatchProgress v-else-if="active == 'second'" /> |
||||||
|
<!-- 公告通知 --> |
||||||
|
<notice v-else-if="active == 'third'" /> |
||||||
|
<!-- 报名人员 --> |
||||||
|
<MatchSignup v-else /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import MatchDetail from "./matchDetail"; |
||||||
|
import MatchProgress from "./matchProgress"; |
||||||
|
import notice from "./notice"; |
||||||
|
import MatchSignup from "./matchSignup"; |
||||||
|
import EventBus from "@/libs/bus.js"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "matchManage", |
||||||
|
data() { |
||||||
|
return { |
||||||
|
active: "first", |
||||||
|
tabs: { |
||||||
|
first: "大赛详情", |
||||||
|
second: "竞赛进展", |
||||||
|
third: "公告通知", |
||||||
|
fourth: "报名人员" |
||||||
|
} |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
MatchDetail, |
||||||
|
MatchProgress, |
||||||
|
notice, |
||||||
|
MatchSignup |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
goBack() { |
||||||
|
this.$router.back(); |
||||||
|
}, |
||||||
|
tabChange(index) { |
||||||
|
this.active = index |
||||||
|
}, |
||||||
|
tabChangeWait(index) { |
||||||
|
this.tabChange(index) |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
wait() { |
||||||
|
return this.$store.state.wait |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,641 @@ |
|||||||
|
<template> |
||||||
|
<!-- 大赛详情 --> |
||||||
|
<div style="padding: 24px"> |
||||||
|
<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-remove="handleRemove" |
||||||
|
:on-error="uploadError" |
||||||
|
:on-success="uploadSuccess" |
||||||
|
:before-remove="beforeRemove" |
||||||
|
:limit="1" |
||||||
|
:on-exceed="handleExceed" |
||||||
|
: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-remove="handleLgRemove" |
||||||
|
:on-error="uploadError" |
||||||
|
:on-success="uploadLgSuccess" |
||||||
|
:before-remove="beforeRemove" |
||||||
|
:limit="1" |
||||||
|
:on-exceed="handleExceed" |
||||||
|
: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 label="比赛范围"> |
||||||
|
<div> |
||||||
|
<el-radio v-model="form.competitionScope" :label="1">全平台</el-radio> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-radio v-model="form.competitionScope" :label="2">指定区域、院校</el-radio> |
||||||
|
<el-button v-if="form.competitionScope === 2" type="primary" size="mini" @click="showRange">选择院校</el-button> |
||||||
|
<span style="margin-left: 20px">{{ rangeName }}</span> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="竞赛名称"> |
||||||
|
<div class="d-inline-block"> |
||||||
|
<el-input placeholder="请输入竞赛名称" v-model="form.name" clearable></el-input> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item 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" @click="addSponsor"> |
||||||
|
<i class="el-icon-plus"></i> |
||||||
|
<span>添加</span> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="承办方（选填）"> |
||||||
|
<div class="inline-input"> |
||||||
|
<div class="input-wrap" v-for="(item,index) in undertakerList" :key="index"> |
||||||
|
<el-input placeholder="承办方名称" v-model="undertakerList[index]"></el-input> |
||||||
|
<i v-if="undertakerList.length > 1" class="remove" @click="delOrganizer(index)"></i> |
||||||
|
<button v-if="index == 0" class="add-btn" @click="addOrganizer"> |
||||||
|
<i class="el-icon-plus"></i> |
||||||
|
<span>添加</span> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<button v-if="!undertakerList.length" class="add-btn" @click="addOrganizer"> |
||||||
|
<i class="el-icon-plus"></i> |
||||||
|
<span>添加</span> |
||||||
|
</button> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="报名时间"> |
||||||
|
<el-date-picker v-model="signupTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="竞赛时间"> |
||||||
|
<el-date-picker v-model="playTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="竞赛详情"> |
||||||
|
<quill :border="true" v-model="form.description" :height="400" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="附件"> |
||||||
|
<el-upload |
||||||
|
:on-remove="handleAnnexRemove" |
||||||
|
:on-error="uploadError" |
||||||
|
:before-upload="beforeUpload" |
||||||
|
:on-success="uploadAnnexSuccess" |
||||||
|
:before-remove="beforeRemove" |
||||||
|
:limit="5" |
||||||
|
:on-exceed="handleExceedAnnex" |
||||||
|
: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 type="primary" @click="save(0)">发布</el-button> |
||||||
|
<el-button @click="$router.back()">取消</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
|
||||||
|
<el-dialog title="请勾选院校" :visible.sync="rangeVisible" width="580px" custom-class="range-dia" :close-on-click-modal="false"> |
||||||
|
<el-cascader |
||||||
|
ref="range" |
||||||
|
v-model="range" |
||||||
|
:options="ranges" |
||||||
|
:props="props" |
||||||
|
clearable |
||||||
|
filterable></el-cascader> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button size="small" @click="rangeVisible = false">取 消</el-button> |
||||||
|
<el-button size="small" type="primary" @click="rangeSubmit">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import util from "@/libs/util"; |
||||||
|
import quill from "@/components/quill"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "add", |
||||||
|
data() { |
||||||
|
const that = this |
||||||
|
return { |
||||||
|
headers: { |
||||||
|
token: sessionStorage.getItem('token') |
||||||
|
}, |
||||||
|
form: { |
||||||
|
id: this.$route.query.id, |
||||||
|
platformSource: 0, // 平台来源(0:中台，1：职站) |
||||||
|
ztOpen: 0, // 中台是否开启(0开启 1未开启 默认0) |
||||||
|
name: '', |
||||||
|
sponsor: '', |
||||||
|
undertaker: '', |
||||||
|
competitionScope: 1, // 大赛范围(0:本校内 1:全平台 2:指定区域、院校) |
||||||
|
contestRangeList: [], // 大赛范围选择 |
||||||
|
contestAnnexList: [], // 赛事附件 |
||||||
|
fileName: '', |
||||||
|
coverUrl: '', |
||||||
|
carouselUrl: '', |
||||||
|
publishStatus: 0, |
||||||
|
signUpStartTime: '', |
||||||
|
signUpEndTime: '', |
||||||
|
playStartTime: '', |
||||||
|
playEndTime: '', |
||||||
|
description: '', |
||||||
|
}, |
||||||
|
signupTime: '', |
||||||
|
playTime: '', |
||||||
|
sponsorList: [""], |
||||||
|
undertakerList: [""], |
||||||
|
fileList: [], |
||||||
|
pickerOptions: { |
||||||
|
disabledDate: time => { |
||||||
|
return time.getTime() < new Date().getTime() - 86400000; |
||||||
|
} |
||||||
|
}, |
||||||
|
provinceList: this.$store.state.provinceList, |
||||||
|
rangeVisible: false, |
||||||
|
range: [], |
||||||
|
ranges: [], |
||||||
|
rangeName: '', |
||||||
|
// 选择区域懒加载 |
||||||
|
props: { |
||||||
|
multiple: true, |
||||||
|
checkStrictly: true, |
||||||
|
lazy: true, |
||||||
|
lazyLoad (node, resolve) { |
||||||
|
const { level, value } = node |
||||||
|
// 省份 |
||||||
|
console.log('lazy', node) |
||||||
|
if (!level) { |
||||||
|
const data = [] |
||||||
|
that.$store.state.provinceList.map(e => { |
||||||
|
data.push({ |
||||||
|
value: e.provinceId, |
||||||
|
label: e.provinceName |
||||||
|
}) |
||||||
|
}) |
||||||
|
resolve(data) |
||||||
|
} else if (level === 1) { |
||||||
|
// 城市 |
||||||
|
that.$get(that.api.queryCity, { |
||||||
|
provinceId: value |
||||||
|
}).then(({ list }) => { |
||||||
|
const data = [] |
||||||
|
list.map(e => { |
||||||
|
data.push({ |
||||||
|
provinceId: value, |
||||||
|
value: e.cityId, |
||||||
|
label: e.cityName |
||||||
|
}) |
||||||
|
}) |
||||||
|
resolve(data) |
||||||
|
}).catch(res => {}) |
||||||
|
} else if (level === 2) { |
||||||
|
// 学校 |
||||||
|
that.$get(that.api.getSchoolsByProvince, { |
||||||
|
provinceId: node.data.provinceId, |
||||||
|
cityId: value, |
||||||
|
schoolName: '' |
||||||
|
}).then(({ list }) => { |
||||||
|
const data = [] |
||||||
|
list.map(e => { |
||||||
|
data.push({ |
||||||
|
value: e.schoolId, |
||||||
|
label: e.schoolName, |
||||||
|
leaf: true |
||||||
|
}) |
||||||
|
}) |
||||||
|
resolve(data) |
||||||
|
}).catch(res => {}) |
||||||
|
} else { |
||||||
|
resolve([]) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
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() { |
||||||
|
this.$post(`${this.api.getContest}?contestId=${this.form.id}`).then(({ contest }) => { |
||||||
|
this.signupTime = [contest.signUpStartTime, contest.signUpEndTime] |
||||||
|
this.playTime = [contest.playStartTime, contest.playEndTime] |
||||||
|
this.sponsorList = contest.sponsor.split(",") |
||||||
|
this.undertakerList = contest.undertaker.split(",") |
||||||
|
// 附件 |
||||||
|
const fileList = contest.contestAnnexList |
||||||
|
if (fileList) { |
||||||
|
const files = [] |
||||||
|
fileList.map(e => { |
||||||
|
files.push({ |
||||||
|
name: e.fileName, |
||||||
|
url: e.filePath |
||||||
|
}) |
||||||
|
}) |
||||||
|
this.fileList = files |
||||||
|
} else { |
||||||
|
contest.contestAnnexList = [] |
||||||
|
} |
||||||
|
|
||||||
|
// 选择范围 |
||||||
|
const range = [] |
||||||
|
contest.contestRangeList.map(e => { |
||||||
|
const item = [+e.provinceId] |
||||||
|
e.cityId && item.push(+e.cityId) |
||||||
|
e.schoolId && item.push(+e.schoolId) |
||||||
|
range.push(item) |
||||||
|
}) |
||||||
|
this.range = range |
||||||
|
|
||||||
|
// 处理显示的name |
||||||
|
this.$nextTick(() => { |
||||||
|
// const checked = this.$refs.range.getCheckedNodes() |
||||||
|
// console.log(444, contest, checked) |
||||||
|
// const name = [] |
||||||
|
// checked.map(e => { |
||||||
|
// name.push(e.label) |
||||||
|
// }) |
||||||
|
// this.rangeName = name.join('、') |
||||||
|
}) |
||||||
|
|
||||||
|
this.form = contest |
||||||
|
|
||||||
|
}).catch(err => {}) |
||||||
|
}, |
||||||
|
// 选择范围 |
||||||
|
showRange() { |
||||||
|
this.rangeVisible = true |
||||||
|
console.log(33, this.form.contestRangeList) |
||||||
|
}, |
||||||
|
// 范围确定 |
||||||
|
rangeSubmit() { |
||||||
|
// 处理提交需要的id |
||||||
|
const data = [] |
||||||
|
this.range.map(e => { |
||||||
|
data.push({ |
||||||
|
contestId: this.form.id || '', |
||||||
|
provinceId: e[0] || '', |
||||||
|
cityId: e[1] || '', |
||||||
|
schoolId: e[2] || '', |
||||||
|
type: e.length > 2 ? 0 : 1 |
||||||
|
}) |
||||||
|
}) |
||||||
|
this.form.contestRangeList = data |
||||||
|
|
||||||
|
// 处理显示的name |
||||||
|
const checked = this.$refs.range.getCheckedNodes() |
||||||
|
const name = [] |
||||||
|
checked.map(e => { |
||||||
|
name.push(e.label) |
||||||
|
}) |
||||||
|
this.rangeName = name.join('、') |
||||||
|
|
||||||
|
this.rangeVisible = false |
||||||
|
}, |
||||||
|
handleExceed(files, fileList) { |
||||||
|
util.warningMsg(`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`); |
||||||
|
}, |
||||||
|
handleExceedAnnex(files, fileList) { |
||||||
|
util.warningMsg(`当前限制选择 5 个文件，如需更换，请删除一个文件再重新选择！`); |
||||||
|
}, |
||||||
|
uploadSuccess(res) { |
||||||
|
const { coverUrl } = this.form |
||||||
|
coverUrl && this.$del(`${this.api.fileDeletion}?keys=${coverUrl}`).then(res => {}).catch(res => {}) |
||||||
|
this.form.coverUrl = res.data.filesResult.fileUrl |
||||||
|
}, |
||||||
|
uploadLgSuccess(res) { |
||||||
|
const { carouselUrl } = this.form |
||||||
|
carouselUrl && this.$del(`${this.api.fileDeletion}?keys=${carouselUrl}`).then(res => {}).catch(res => {}) |
||||||
|
this.form.carouselUrl = res.data.filesResult.fileUrl |
||||||
|
}, |
||||||
|
// 附件上传成功 |
||||||
|
uploadAnnexSuccess(res) { |
||||||
|
const file = res.data.filesResult |
||||||
|
const { id } = this.form |
||||||
|
const data = { |
||||||
|
contestId: id || '', |
||||||
|
fileName: this.fileName, |
||||||
|
filePath: file.fileUrl |
||||||
|
} |
||||||
|
this.form.contestAnnexList.push(data) |
||||||
|
// 编辑的时候需要调新增附件接口 |
||||||
|
id && this.$post(this.api.saveAnnex, data).then(res => {}).catch(res => {}) |
||||||
|
console.log(44, this.form) |
||||||
|
}, |
||||||
|
// 附件上传前 |
||||||
|
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) { |
||||||
|
this.$del(`${this.api.fileDeletion}?keys=${this.form.coverUrl}`).then(res => { |
||||||
|
this.form.coverUrl = '' |
||||||
|
}).catch(res => {}) |
||||||
|
}, |
||||||
|
handleLgRemove(file, fileList) { |
||||||
|
this.$del(`${this.api.fileDeletion}?keys=${this.form.carouselUrl}`).then(res => { |
||||||
|
this.form.carouselUrl = '' |
||||||
|
}).catch(res => {}) |
||||||
|
}, |
||||||
|
handleAnnexRemove(file, fileList) { |
||||||
|
this.$del(`${this.api.fileDeletion}?keys=${file.url}`).then(res => {}).catch(res => {}) |
||||||
|
const id = this.form.contestAnnexList.find(e => e.fileName === file.name).id |
||||||
|
this.$post(`${this.api.deleteAnnex}?id=${id}`).then(res => {}).catch(res => {}) |
||||||
|
}, |
||||||
|
// 提交 |
||||||
|
save(status) { |
||||||
|
if (this.submiting) return false; |
||||||
|
const { form } = this |
||||||
|
form.sponsor = this.sponsorList.filter(d => d).join(); |
||||||
|
form.undertaker = this.undertakerList.filter(d => d).join(); |
||||||
|
if (form.competitionScope == 2 && !form.contestRangeList.length) return util.warningMsg('请选择区域、院校') |
||||||
|
if (!form.name) return util.warningMsg("请填写竞赛名称"); |
||||||
|
if (status == 0) { |
||||||
|
if (!form.sponsor) 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 && status == 0) return util.warningMsg("请选择竞赛时间"); |
||||||
|
if (playStartTime && playStartTime < signUpEndTime) return util.warningMsg("竞赛时间不能早于报名结束时间"); |
||||||
|
if (!form.description && status == 0) return util.warningMsg("请填写竞赛详情"); |
||||||
|
|
||||||
|
this.submiting = true |
||||||
|
form.publishStatus = status |
||||||
|
if (form.id) delete form.contestAnnexList |
||||||
|
if (this.form.id) { |
||||||
|
this.$post(this.api.editContest, form).then(res => { |
||||||
|
this.submiting = false; |
||||||
|
util.successMsg("修改成功"); |
||||||
|
this.$router.back(); |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
this.submiting = false; |
||||||
|
}); |
||||||
|
} else { |
||||||
|
this.$post(this.api.addContest, form).then(res => { |
||||||
|
this.submiting = false; |
||||||
|
util.successMsg("创建成功"); |
||||||
|
this.$router.back(); |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
this.submiting = false; |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
// 预览 |
||||||
|
preview() { |
||||||
|
|
||||||
|
}, |
||||||
|
back(i) { |
||||||
|
const id = this.form.cid |
||||||
|
const updateTime = this.updateTime |
||||||
|
// 更改了信息才需要提示 |
||||||
|
if ((id && updateTime > 1) || (!id && updateTime)) { |
||||||
|
this.$confirm(`编辑的内容未保存，是否保存？`, '提示', { |
||||||
|
type: 'warning' |
||||||
|
}).then(() => { |
||||||
|
this.save(1) |
||||||
|
}).catch(() => { |
||||||
|
this.backPage() |
||||||
|
}) |
||||||
|
} else { |
||||||
|
this.backPage() |
||||||
|
} |
||||||
|
}, |
||||||
|
backPage(){ |
||||||
|
this.$router.back() |
||||||
|
}, |
||||||
|
addSponsor() { |
||||||
|
this.sponsorList.push(""); |
||||||
|
}, |
||||||
|
delSponsor(index) { |
||||||
|
this.sponsorList.splice(index, 1); |
||||||
|
}, |
||||||
|
addOrganizer() { |
||||||
|
this.undertakerList.push(""); |
||||||
|
}, |
||||||
|
delOrganizer(index) { |
||||||
|
this.undertakerList.splice(index, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</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,238 @@ |
|||||||
|
<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)">编辑</el-button> |
||||||
|
<el-button v-else type="text" @click="saveData(scope.row)">保存</el-button> |
||||||
|
<el-button type="text" @click="handleDelete(scope.row, scope.$index)">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="plus" @click="addData"> |
||||||
|
<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.getContestProgress}/${this.id}`).then(res => { |
||||||
|
this.listData = res.contestProgressList; |
||||||
|
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.editContestProgress, data).then(res => { |
||||||
|
this.touchTime = this.touchTime-1 |
||||||
|
util.successMsg("修改成功"); |
||||||
|
this.getData(); |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
} else { |
||||||
|
this.$post(this.api.addContestProgress, 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.deleteContestProgress}/${row.id}`).then(res => { |
||||||
|
util.successMsg("删除成功"); |
||||||
|
this.getData(); |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
}).catch(() => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
addData() { |
||||||
|
// this.$store.commit("match/setWait", 1); |
||||||
|
this.touchTime = this.touchTime+1 |
||||||
|
if (this.listData.length) { |
||||||
|
if (this.listData[this.listData.length - 1].id) { |
||||||
|
this.listData.push({ |
||||||
|
contestId: this.id, |
||||||
|
id: "", |
||||||
|
title: "", |
||||||
|
description: "", |
||||||
|
status: 0, |
||||||
|
operate: true |
||||||
|
}); |
||||||
|
this.operateIt(this.listData[this.listData.length - 1]) |
||||||
|
} else { |
||||||
|
util.warningMsg("请先保存新数据"); |
||||||
|
} |
||||||
|
} else { |
||||||
|
this.listData.push({ |
||||||
|
contestId: 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,153 @@ |
|||||||
|
<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"></el-input> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<div> |
||||||
|
<el-button type="primary" round @click="exportAll">全部导出</el-button> |
||||||
|
<el-button type="primary" round @click="exportBatch">批量导出</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<el-table ref="table" :data="listData" class="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id"> |
||||||
|
<el-table-column type="selection" :selectable="row => row.isDisable!=0" 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 + (pageNo - 1) * pageSize + 1 }} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="school" label="学校"> |
||||||
|
</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="170"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-switch |
||||||
|
v-model="scope.row.isDisable" |
||||||
|
:active-text="scope.row.isDisable ? '开' : '关'" |
||||||
|
:active-value="1" |
||||||
|
:inactive-value="0" |
||||||
|
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() { |
||||||
|
let data = { |
||||||
|
contestId: this.id |
||||||
|
}; |
||||||
|
if (this.keyword) data.name = this.keyword; |
||||||
|
this.$get(`${this.api.queryApplicantByCondition}/${this.pageNo}/${this.pageSize}`, data).then(res => { |
||||||
|
this.listData = res.applicantList; |
||||||
|
this.totals = res.total; |
||||||
|
this.$refs.table.clearSelection(); |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val; |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.pageNo = val; |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
switchOff(val, row, index) { |
||||||
|
this.$put(`${this.api.disableApplicant}/${row.id}/${val}`) |
||||||
|
.then(res => { |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
disalbeAllData() { |
||||||
|
if (this.multipleSelection.length != "") { |
||||||
|
let newArr = this.multipleSelection; |
||||||
|
let delList = newArr.map(item => { |
||||||
|
return item.id; |
||||||
|
}); |
||||||
|
|
||||||
|
this.$confirm("确定要禁用吗？", "提示", { |
||||||
|
type: "warning" |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$put(`${this.api.disableContests}?ids=${delList.join(",")}`).then(res => { |
||||||
|
this.multipleSelection = []; |
||||||
|
util.successMsg("禁用成功"); |
||||||
|
this.getData(); |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
}) |
||||||
|
.catch(() => { |
||||||
|
}); |
||||||
|
} else { |
||||||
|
util.errorMsg("请先选择数据 ！"); |
||||||
|
} |
||||||
|
}, |
||||||
|
exportAll() { |
||||||
|
location.href = `${this.api.excelExport}?contestId=${this.id}`; |
||||||
|
}, |
||||||
|
exportBatch() { |
||||||
|
if (this.multipleSelection.length != "") { |
||||||
|
let newArr = this.multipleSelection; |
||||||
|
let data = newArr.map(item => { |
||||||
|
return item.id; |
||||||
|
}); |
||||||
|
location.href = `${this.api.batchExport}?ids=${data.join(",")}`; |
||||||
|
} else { |
||||||
|
util.errorMsg("请先选择数据 ！"); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,124 @@ |
|||||||
|
<template> |
||||||
|
<!-- 报名人员 --> |
||||||
|
<div class="page-content" style="padding: 24px"> |
||||||
|
<div class="tool" style="justify-content: flex-end"> |
||||||
|
<el-button type="primary" round @click="add">新增</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)">编辑</el-button> |
||||||
|
<el-button type="text" @click="del(scope.row)">删除</el-button> |
||||||
|
<el-switch |
||||||
|
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.queryAnnouncementByContestId}?pageNum=${this.pageNo}&pageSize=${this.pageSize}&contestId=${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) { |
||||||
|
this.$put(`${this.api.disableApplicant}/${row.id}/${val}`) |
||||||
|
.then(res => { |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
add() { |
||||||
|
this.$router.push(`/noticeDetail?contestId=${this.id}`) |
||||||
|
}, |
||||||
|
edit(row) { |
||||||
|
this.$router.push(`/noticeDetail?id=${row.id}&contestId=${this.id}`) |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,300 @@ |
|||||||
|
<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)">草稿</el-button> |
||||||
|
<el-button type="primary" @click="save(1)">发布</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"; |
||||||
|
export default { |
||||||
|
name: "matchDetail", |
||||||
|
data() { |
||||||
|
return { |
||||||
|
headers: { |
||||||
|
token: sessionStorage.getItem('token') |
||||||
|
}, |
||||||
|
form: { |
||||||
|
id: this.$route.query.id, |
||||||
|
contestId: this.$route.query.contestId, |
||||||
|
announcementText: '', |
||||||
|
announcementTitle: '', |
||||||
|
announcementAnnexList: [] |
||||||
|
}, |
||||||
|
updateTime: 0, |
||||||
|
fileName: '', |
||||||
|
fileList: [], |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
quill |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
// 监听信息是否有更改,有的话页面离开的时候要询问是否要保存 |
||||||
|
form: { |
||||||
|
handler(){ |
||||||
|
this.updateTime++ |
||||||
|
if(this.updateTime > 1) this.$store.commit('match/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) { |
||||||
|
this.$post(this.api.amendmentAnnouncement, form).then(res => { |
||||||
|
util.successMsg("修改成功") |
||||||
|
this.$router.back() |
||||||
|
}).catch(err => {}) |
||||||
|
} else { |
||||||
|
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 |
||||||
|
this.form.announcementAnnexList.push({ |
||||||
|
announcementId: id || '', |
||||||
|
fileName: this.fileName, |
||||||
|
filePath: file.fileUrl || file.fileId |
||||||
|
}) |
||||||
|
this.form.contestAnnexList.push(data) |
||||||
|
// 编辑的时候需要调新增附件接口 |
||||||
|
id && this.$post(this.api.saveAnnouncementAnnex, data).then(res => {}).catch(res => {}) |
||||||
|
console.log(44, this.form) |
||||||
|
}, |
||||||
|
// 附件上传前 |
||||||
|
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) { |
||||||
|
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.deleteAnnouncementAnnex}?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> |
||||||
Loading…
Reference in new issue