parent
6210b29513
commit
55a9ea2897
14 changed files with 1455 additions and 546 deletions
|
After Width: | Height: | Size: 334 B |
@ -0,0 +1,123 @@ |
||||
<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 { |
||||
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(`/match/noticeDetail?contestId=${this.id}`) |
||||
}, |
||||
edit(row) { |
||||
this.$router.push(`/match/noticeDetail?id=${row.id}&contestId=${this.id}`) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,304 @@ |
||||
<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"; |
||||
import Setting from "@/setting"; |
||||
export default { |
||||
name: "matchDetail", |
||||
data() { |
||||
return { |
||||
headers: { |
||||
token: util.local.get(Setting.tokenKey) |
||||
}, |
||||
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) { |
||||
delete form.announcementAnnexList |
||||
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 |
||||
const data = { |
||||
announcementId: id || '', |
||||
fileName: this.fileName, |
||||
filePath: file.fileUrl || file.fileId |
||||
} |
||||
this.form.announcementAnnexList.push(data) |
||||
// 编辑的时候需要调新增附件接口 |
||||
id && this.$post(this.api.saveAnnouncementAnnex, data).then(res => {}).catch(res => {}) |
||||
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