You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
308 lines
8.9 KiB
308 lines
8.9 KiB
<template> |
|
<!-- 大赛详情 --> |
|
<div> |
|
<el-card shadow="hover" style="margin-bottom: 20px"> |
|
<div class="flex-between"> |
|
<el-page-header @back="back" :content="(form.id ? '编辑' : '创建') + '公告'"></el-page-header> |
|
</div> |
|
</el-card> |
|
<div class="page"> |
|
<div class="page-content"> |
|
<el-form label-width="170px" label-suffix=":" size="small"> |
|
<el-form-item label="公告标题"> |
|
<div class="d-inline-block"> |
|
<el-input placeholder="请输入公告名称" v-model="form.announcementTitle" clearable></el-input> |
|
</div> |
|
</el-form-item> |
|
<el-form-item label="正文"> |
|
<quill :border="true" v-model="form.announcementText" :height="400" /> |
|
</el-form-item> |
|
<el-form-item label="附件"> |
|
<el-upload |
|
:on-remove="handleRemove" |
|
:on-error="uploadError" |
|
:on-success="uploadSuccess" |
|
:before-upload="beforeUpload" |
|
:before-remove="beforeRemove" |
|
:limit="5" |
|
:on-exceed="handleExceed" |
|
:action="this.api.fileupload" |
|
:headers="headers" |
|
:file-list="fileList" |
|
name="file" |
|
> |
|
<el-button size="small" type="primary">点击上传</el-button> |
|
<div slot="tip" class="el-upload__tip"> |
|
<p>支持扩展名：.rar .zip .doc .docx .pdf .jpg...</p> |
|
</div> |
|
</el-upload> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-button v-if="!form.id" @click="save(0)" v-auth="'/match/list:管理:公告通知:草稿'">草稿</el-button> |
|
<el-button type="primary" @click="save(1)" v-auth="'/match/list:管理:公告通知:发布'">发布</el-button> |
|
<el-button @click="back">取消</el-button> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import quill from "@/components/quill"; |
|
import util from "@/libs/util"; |
|
import Setting from "@/setting"; |
|
export default { |
|
name: "matchDetail", |
|
data() { |
|
return { |
|
headers: { |
|
token: util.local.get(Setting.tokenKey) |
|
}, |
|
form: { |
|
id: this.$route.query.id, |
|
competitionId: this.$route.query.competitionId, |
|
announcementText: '', |
|
announcementTitle: '', |
|
announcementAnnexList: [], |
|
isOpen: 1 |
|
}, |
|
updateTime: 0, |
|
fileName: '', |
|
fileList: [], |
|
}; |
|
}, |
|
components: { |
|
quill |
|
}, |
|
watch: { |
|
// 监听信息是否有更改,有的话页面离开的时候要询问是否要保存 |
|
form: { |
|
handler(){ |
|
this.updateTime++ |
|
if(this.updateTime > 1) this.$store.commit('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) { |
|
form.isOpen = 0 |
|
delete form.announcementAnnexList |
|
this.$post(this.api.amendmentAnnouncement, form).then(res => { |
|
util.successMsg("修改成功") |
|
this.$router.back() |
|
}).catch(err => {}) |
|
} else { |
|
form.isOpen = status ? 0 : 1 |
|
this.$post(this.api.addAnnouncement, form).then(res => { |
|
util.successMsg("创建成功") |
|
this.$router.back() |
|
}).catch(err => {}) |
|
} |
|
}, |
|
handleExceed(files, fileList) { |
|
util.warningMsg(`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`); |
|
}, |
|
// 附件上传成功 |
|
uploadSuccess(res) { |
|
const file = res.data.filesResult |
|
const { id } = this.form |
|
const data = { |
|
announcementId: id || '', |
|
fileName: this.fileName, |
|
filePath: file.fileUrl || file.fileId |
|
} |
|
this.form.announcementAnnexList.push(data) |
|
// 编辑的时候需要调新增附件接口 |
|
id && this.$post(this.api.saveAnnouncementAnnex, data).then(res => {}).catch(res => {}) |
|
}, |
|
// 附件上传前 |
|
beforeUpload(file) { |
|
this.fileName = file.name |
|
}, |
|
uploadError(err, file, fileList) { |
|
this.$message({ |
|
message: "上传出错，请重试！", |
|
type: "error", |
|
center: true |
|
}); |
|
}, |
|
beforeRemove(file, fileList) { |
|
return this.$confirm(`确定移除 ${file.name}？`); |
|
}, |
|
handleRemove(file, fileList) { |
|
if (file.url) { |
|
this.$del(`${this.api.fileDeletion}?keys=${file.url}`).then(res => {}).catch(res => {}) |
|
const id = this.form.announcementAnnexList.find(e => e.fileName === file.name).id |
|
this.$post(`${this.api.delAnnex}?id=${id}`).then(res => {}).catch(res => {}) |
|
} |
|
}, |
|
back() { |
|
this.$router.back() |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
$upload-width: 220px; |
|
$upload-height: 140px; |
|
$upload-lg-height: 150px; |
|
/deep/ .avatar-uploader { |
|
.el-upload { |
|
position: relative; |
|
width: $upload-width; |
|
height: $upload-height; |
|
border: 1px dashed #d9d9d9; |
|
border-radius: 6px; |
|
cursor: pointer; |
|
overflow: hidden; |
|
|
|
&:hover { |
|
border-color: #cb221c; |
|
} |
|
|
|
.uploader-default { |
|
display: flex; |
|
height: $upload-height; |
|
flex-direction: column; |
|
justify-content: center; |
|
text-align: center; |
|
background: rgba(0, 0, 0, 0.04); |
|
|
|
i { |
|
font-size: 20px; |
|
font-weight: bold; |
|
color: #8c939d; |
|
} |
|
|
|
p { |
|
margin-top: 10px; |
|
font-size: 14px; |
|
color: rgba(0, 0, 0, 0.65); |
|
line-height: 1; |
|
} |
|
} |
|
} |
|
|
|
&.avatar-uploader-lg { |
|
.el-upload { |
|
width: 100%; |
|
max-width: 960px; |
|
height: $upload-lg-height; |
|
|
|
.uploader-default { |
|
height: $upload-lg-height; |
|
} |
|
} |
|
} |
|
|
|
.avatar { |
|
display: block; |
|
width: $upload-width; |
|
height: $upload-height; |
|
} |
|
|
|
.avatar-lg { |
|
display: block; |
|
width: 100%; |
|
height: $upload-lg-height; |
|
} |
|
|
|
.el-upload__tip { |
|
margin-top: 0; |
|
|
|
p { |
|
font-size: 14px; |
|
color: rgba(0, 0, 0, 0.45); |
|
line-height: 1; |
|
|
|
&:first-child { |
|
margin-bottom: 5px; |
|
} |
|
} |
|
} |
|
} |
|
|
|
/deep/ .d-inline-block { |
|
width: 216px; |
|
|
|
.el-select, .el-input { |
|
width: 100%; |
|
} |
|
} |
|
|
|
.inline-input { |
|
.input-wrap { |
|
display: flex; |
|
align-items: center; |
|
margin-bottom: 10px; |
|
|
|
.el-input { |
|
display: inline-block; |
|
width: 216px; |
|
margin-right: 8px; |
|
} |
|
|
|
.remove { |
|
width: 16px; |
|
height: 16px; |
|
background: url("../../../assets/img/close.png") 0 0/cover no-repeat; |
|
cursor: pointer; |
|
} |
|
} |
|
|
|
.add-btn { |
|
margin-left: 32px; |
|
} |
|
} |
|
|
|
.add-btn { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
width: 216px; |
|
line-height: 32px; |
|
font-size: 14px; |
|
color: rgba(0, 0, 0, 0.65); |
|
background-color: transparent; |
|
border: 1px dashed rgba(0, 0, 0, 0.15); |
|
border-radius: 4px; |
|
cursor: pointer; |
|
|
|
i { |
|
margin-right: 8px; |
|
font-size: 14px; |
|
font-weight: bold; |
|
} |
|
} |
|
</style> |