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.
282 lines
8.9 KiB
282 lines
8.9 KiB
<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> |
|
<el-card shadow="hover" class="m-b-20"> |
|
<el-form label-width="90px" label-suffix=":" size="small"> |
|
<el-form-item label="封面图"> |
|
<el-upload |
|
class="avatar-uploader" |
|
accept=".jpg,.png,.jpeg" |
|
: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="coverUrl" :src="coverUrl" class="avatar"> |
|
<div class="uploader-default" v-else> |
|
<i class="el-icon-plus"></i> |
|
<p>上传封面</p> |
|
</div> |
|
</el-upload> |
|
</el-form-item> |
|
<el-form-item label="作者"> |
|
<div class="d-inline-block"> |
|
<el-input placeholder="请输入作者" v-model="author" clearable></el-input> |
|
</div> |
|
</el-form-item> |
|
<el-form-item label="日期"> |
|
<div class="d-inline-block"> |
|
<el-date-picker v-model="date" type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"></el-date-picker> |
|
</div> |
|
</el-form-item> |
|
<el-form-item label="文章标题"> |
|
<el-input placeholder="请输入文章标题" v-model="title" clearable></el-input> |
|
</el-form-item> |
|
<el-form-item label="文章内容"> |
|
<quill :border="true" v-model="content" :uploading.sync="uploading" :height="400" /> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-button type="primary" v-throttle @click="saveData">确定</el-button> |
|
</el-form-item> |
|
</el-form> |
|
</el-card> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import quill from "@/components/quill"; |
|
import util from "@/libs/util"; |
|
import Setting from "@/setting"; |
|
|
|
export default { |
|
name: "addArticle", |
|
data() { |
|
return { |
|
headers: { |
|
token: util.local.get(Setting.tokenKey) |
|
}, |
|
columnId: this.$route.query.columnId, |
|
sort: this.$route.query.sort, |
|
id: "", |
|
coverUrl: "", |
|
uploadList: [], |
|
uploadDataList: [], |
|
author: "", |
|
date: "", |
|
title: "", |
|
content: "", |
|
submiting: false, |
|
uploading: false |
|
}; |
|
}, |
|
components: { |
|
quill |
|
}, |
|
mounted() { |
|
this.id = this.$route.query.id; |
|
this.id && this.getData(); |
|
}, |
|
methods: { |
|
// 返回 |
|
goBack() { |
|
this.$router.back(); |
|
}, |
|
getData() { |
|
this.$get(`${this.api.getArticle}/${this.id}`) |
|
.then(res => { |
|
let data = res.article; |
|
this.coverUrl = data.coverUrl; |
|
this.author = data.author; |
|
this.date = data.date; |
|
this.title = data.title; |
|
this.content = data.content; |
|
}) |
|
.catch(err => { |
|
|
|
}); |
|
}, |
|
saveData() { |
|
if (this.submiting) return false; |
|
if (!this.coverUrl) return util.warningMsg("请上传封面图"); |
|
if (!this.author) return util.warningMsg("请填写作者"); |
|
if (!this.date) return util.warningMsg("请选择日期"); |
|
if (!this.title) return util.warningMsg("请填写文章标题"); |
|
if (!this.content) return util.warningMsg("请填写文章内容"); |
|
if (this.uploading) return util.warningMsg("图片正在上传中，请稍等"); |
|
this.submiting = true; |
|
|
|
let data = { |
|
id: this.id, |
|
columnId: this.columnId, |
|
author: this.author, |
|
coverUrl: this.coverUrl, |
|
date: this.date, |
|
title: this.title, |
|
content: this.content, |
|
sort: this.sort |
|
}; |
|
if (this.id) { |
|
this.$put(this.api.editArticle, data).then(res => { |
|
this.submiting = false; |
|
util.successMsg("修改成功"); |
|
this.back(); |
|
}) |
|
.catch(err => { |
|
this.submiting = false; |
|
}); |
|
} else { |
|
this.$post(this.api.addArticle, data).then(res => { |
|
this.submiting = false; |
|
util.successMsg("创建成功"); |
|
this.back(); |
|
}) |
|
.catch(err => { |
|
this.submiting = false; |
|
}); |
|
} |
|
}, |
|
handleCurrentChange(val) { |
|
this.currPage = val; |
|
}, |
|
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; |
|
}, |
|
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 => { |
|
}); |
|
}, |
|
uploadSure() { |
|
this.BatchUpload = false; |
|
this.pageNo = 1; |
|
this.keyword = ""; |
|
this.getData(); |
|
}, |
|
back() { |
|
// this.$router.push(`/content?id=${this.columnId}`) |
|
this.$router.back(); |
|
}, |
|
goback() { |
|
this.$confirm("确定返回？未更新的信息将不会保存。", "提示", { |
|
type: "warning" |
|
}) |
|
.then(() => { |
|
this.back(); |
|
}) |
|
.catch(() => { |
|
}); |
|
}, |
|
addSponsor() { |
|
this.sponsorList.push(""); |
|
}, |
|
delSponsor(index) { |
|
this.sponsorList.splice(index, 1); |
|
}, |
|
addOrganizer() { |
|
this.organzinerList.push(""); |
|
}, |
|
delOrganizer(index) { |
|
this.organzinerList.splice(index, 1); |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
$avatar-width: 104px; |
|
/deep/ .avatar-uploader { |
|
.el-upload { |
|
position: relative; |
|
width: $avatar-width; |
|
border: 1px dashed #d9d9d9; |
|
border-radius: 2px; |
|
cursor: pointer; |
|
overflow: hidden; |
|
|
|
&:hover { |
|
border-color: #409EFF; |
|
} |
|
|
|
.uploader-default { |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
width: $avatar-width !important; |
|
height: $avatar-width; |
|
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 { |
|
width: $avatar-width; |
|
height: $avatar-width; |
|
display: block; |
|
} |
|
} |
|
|
|
.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%; |
|
} |
|
} |
|
</style> |