|
|
|
|
@ -1,211 +1,238 @@ |
|
|
|
|
<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 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 :model="form" |
|
|
|
|
:rules="rules" |
|
|
|
|
ref="form" |
|
|
|
|
label-width="90px" |
|
|
|
|
label-suffix=":" |
|
|
|
|
size="small"> |
|
|
|
|
<el-form-item prop="coverUrl" |
|
|
|
|
label="封面图"> |
|
|
|
|
<el-upload class="avatar-uploader" |
|
|
|
|
accept=".jpg,.png,.jpeg" |
|
|
|
|
:on-remove="handleRemove" |
|
|
|
|
:on-error="uploadError" |
|
|
|
|
:before-remove="beforeRemove" |
|
|
|
|
:limit="1" |
|
|
|
|
:on-exceed="handleExceed" |
|
|
|
|
action="" |
|
|
|
|
:http-request="handleRequest"> |
|
|
|
|
<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> |
|
|
|
|
</el-card> |
|
|
|
|
<el-card shadow="hover" class="m-b-20"> |
|
|
|
|
<el-form :model="form" :rules="rules" ref="form" label-width="90px" label-suffix=":" size="small"> |
|
|
|
|
<el-form-item prop="coverUrl" 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="form.coverUrl" :src="form.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 prop="author" label="作者"> |
|
|
|
|
<div class="d-inline-block"> |
|
|
|
|
<el-input placeholder="请输入作者" v-model="form.author" clearable></el-input> |
|
|
|
|
</div> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="date" label="日期"> |
|
|
|
|
<div class="d-inline-block"> |
|
|
|
|
<el-date-picker v-model="form.date" type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"></el-date-picker> |
|
|
|
|
</div> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="title" label="文章标题"> |
|
|
|
|
<el-input placeholder="请输入文章标题" v-model="form.title" clearable></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="content" label="文章内容"> |
|
|
|
|
<quill :border="true" v-model="form.content" :uploading.sync="uploading" :height="400" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item> |
|
|
|
|
<el-button type="primary" @click="saveData">确定</el-button> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
</el-card> |
|
|
|
|
</div> |
|
|
|
|
</el-upload> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="author" |
|
|
|
|
label="作者"> |
|
|
|
|
<div class="d-inline-block"> |
|
|
|
|
<el-input placeholder="请输入作者" |
|
|
|
|
v-model="form.author" |
|
|
|
|
clearable></el-input> |
|
|
|
|
</div> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="date" |
|
|
|
|
label="日期"> |
|
|
|
|
<div class="d-inline-block"> |
|
|
|
|
<el-date-picker v-model="form.date" |
|
|
|
|
type="date" |
|
|
|
|
value-format="yyyy-MM-dd HH:mm:ss" |
|
|
|
|
placeholder="选择日期"></el-date-picker> |
|
|
|
|
</div> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="title" |
|
|
|
|
label="文章标题"> |
|
|
|
|
<el-input placeholder="请输入文章标题" |
|
|
|
|
v-model="form.title" |
|
|
|
|
clearable></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="content" |
|
|
|
|
label="文章内容"> |
|
|
|
|
<quill :border="true" |
|
|
|
|
v-model="form.content" |
|
|
|
|
:uploading.sync="uploading" |
|
|
|
|
:height="400" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item> |
|
|
|
|
<el-button type="primary" |
|
|
|
|
@click="saveData">确定</el-button> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
</el-card> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import Oss from '@/components/upload/upload.js' |
|
|
|
|
import quill from "@/components/quill"; |
|
|
|
|
import util from "@/libs/util"; |
|
|
|
|
export default { |
|
|
|
|
name: "addarticle", |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
headers: { |
|
|
|
|
token: sessionStorage.getItem('token') |
|
|
|
|
}, |
|
|
|
|
form: { |
|
|
|
|
columnId: +this.$route.query.columnId, |
|
|
|
|
sort: +this.$route.query.sort, |
|
|
|
|
id: '', |
|
|
|
|
coverUrl: '', |
|
|
|
|
author: '', |
|
|
|
|
date: '', |
|
|
|
|
title: '', |
|
|
|
|
content: '', |
|
|
|
|
createUser: this.$store.state.userName |
|
|
|
|
}, |
|
|
|
|
rules: { |
|
|
|
|
coverUrl: [ |
|
|
|
|
{ required: true, message: '请上传封面', trigger: 'change' } |
|
|
|
|
], |
|
|
|
|
author: [ |
|
|
|
|
{ required: true, message: '请输入作者', trigger: 'blur' } |
|
|
|
|
], |
|
|
|
|
date: [ |
|
|
|
|
{ required: true, message: '请选择日期', trigger: 'change' } |
|
|
|
|
], |
|
|
|
|
title: [ |
|
|
|
|
{ required: true, message: '请输入文章标题', trigger: 'blur' } |
|
|
|
|
], |
|
|
|
|
content: [ |
|
|
|
|
{ required: true, message: '请输入文章内容', trigger: 'blur' } |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
uploadList: [], |
|
|
|
|
uploadDataList: [], |
|
|
|
|
submiting: false, |
|
|
|
|
uploading: false |
|
|
|
|
}; |
|
|
|
|
name: "addarticle", |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
headers: { |
|
|
|
|
token: sessionStorage.getItem('token') |
|
|
|
|
}, |
|
|
|
|
form: { |
|
|
|
|
columnId: +this.$route.query.columnId, |
|
|
|
|
sort: +this.$route.query.sort, |
|
|
|
|
id: '', |
|
|
|
|
coverUrl: '', |
|
|
|
|
author: '', |
|
|
|
|
date: '', |
|
|
|
|
title: '', |
|
|
|
|
content: '', |
|
|
|
|
createUser: this.$store.state.userName |
|
|
|
|
}, |
|
|
|
|
rules: { |
|
|
|
|
coverUrl: [ |
|
|
|
|
{ required: true, message: '请上传封面', trigger: 'change' } |
|
|
|
|
], |
|
|
|
|
author: [ |
|
|
|
|
{ required: true, message: '请输入作者', trigger: 'blur' } |
|
|
|
|
], |
|
|
|
|
date: [ |
|
|
|
|
{ required: true, message: '请选择日期', trigger: 'change' } |
|
|
|
|
], |
|
|
|
|
title: [ |
|
|
|
|
{ required: true, message: '请输入文章标题', trigger: 'blur' } |
|
|
|
|
], |
|
|
|
|
content: [ |
|
|
|
|
{ required: true, message: '请输入文章内容', trigger: 'blur' } |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
uploadList: [], |
|
|
|
|
uploadDataList: [], |
|
|
|
|
submiting: false, |
|
|
|
|
uploading: false |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
components: { |
|
|
|
|
quill |
|
|
|
|
}, |
|
|
|
|
mounted () { |
|
|
|
|
this.id = this.$route.query.id; |
|
|
|
|
this.id && this.getData(); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// 返回 |
|
|
|
|
goBack () { |
|
|
|
|
this.$router.back(); |
|
|
|
|
}, |
|
|
|
|
components: { |
|
|
|
|
quill |
|
|
|
|
getData () { |
|
|
|
|
this.$get(`${this.api.getArticle}?articleId=${this.id}`).then(({ article }) => { |
|
|
|
|
this.form = article |
|
|
|
|
}).catch(err => { }) |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
this.id = this.$route.query.id; |
|
|
|
|
this.id && this.getData(); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// 返回 |
|
|
|
|
goBack() { |
|
|
|
|
this.$router.back(); |
|
|
|
|
}, |
|
|
|
|
getData() { |
|
|
|
|
this.$get(`${this.api.getArticle}?articleId=${this.id}`).then(({ article }) => { |
|
|
|
|
this.form = article |
|
|
|
|
}).catch(err => {}) |
|
|
|
|
}, |
|
|
|
|
saveData() { |
|
|
|
|
this.$refs.form.validate((valid) => { |
|
|
|
|
if (valid) { |
|
|
|
|
if (this.submiting) return false |
|
|
|
|
const { form } = this |
|
|
|
|
if (this.uploading) return util.warningMsg("图片正在上传中，请稍等"); |
|
|
|
|
this.submiting = true |
|
|
|
|
if (form.id) { |
|
|
|
|
this.$put(this.api.editArticle, form).then(res => { |
|
|
|
|
this.submiting = false; |
|
|
|
|
util.successMsg("修改成功"); |
|
|
|
|
this.back(); |
|
|
|
|
}) |
|
|
|
|
.catch(err => { |
|
|
|
|
this.submiting = false; |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
this.$post(this.api.addArticle, form).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.form.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.form.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.form.coverUrl.replace("https://liuwanr.oss-cn-shenzhen.aliyuncs.com/", ""); |
|
|
|
|
this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => { |
|
|
|
|
this.form.coverUrl = ""; |
|
|
|
|
}).catch(res => { |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
uploadSure() { |
|
|
|
|
this.BatchUpload = false; |
|
|
|
|
this.pageNo = 1; |
|
|
|
|
this.keyword = ""; |
|
|
|
|
this.getData(); |
|
|
|
|
}, |
|
|
|
|
back() { |
|
|
|
|
this.$router.back(); |
|
|
|
|
}, |
|
|
|
|
goback() { |
|
|
|
|
this.$confirm("确定返回？未更新的信息将不会保存。", "提示", { |
|
|
|
|
type: "warning" |
|
|
|
|
saveData () { |
|
|
|
|
this.$refs.form.validate((valid) => { |
|
|
|
|
if (valid) { |
|
|
|
|
if (this.submiting) return false |
|
|
|
|
const { form } = this |
|
|
|
|
if (this.uploading) return util.warningMsg("图片正在上传中，请稍等"); |
|
|
|
|
this.submiting = true |
|
|
|
|
if (form.id) { |
|
|
|
|
this.$put(this.api.editArticle, form).then(res => { |
|
|
|
|
this.submiting = false; |
|
|
|
|
util.successMsg("修改成功"); |
|
|
|
|
this.back(); |
|
|
|
|
}) |
|
|
|
|
.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); |
|
|
|
|
.catch(err => { |
|
|
|
|
this.submiting = false; |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
this.$post(this.api.addArticle, form).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 个文件，如需更换，请删除上一个文件再重新选择！`); |
|
|
|
|
}, |
|
|
|
|
// 封面自定义上传 |
|
|
|
|
async handleRequest ({ file }) { |
|
|
|
|
Oss.upload(file).then(res => { |
|
|
|
|
this.form.coverUrl = res.url |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
uploadSuccess (res, file, fileList) { |
|
|
|
|
if (this.form.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.form.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) { |
|
|
|
|
Oss.del(this.form.coverUrl) |
|
|
|
|
this.form.coverUrl = '' |
|
|
|
|
}, |
|
|
|
|
uploadSure () { |
|
|
|
|
this.BatchUpload = false; |
|
|
|
|
this.pageNo = 1; |
|
|
|
|
this.keyword = ""; |
|
|
|
|
this.getData(); |
|
|
|
|
}, |
|
|
|
|
back () { |
|
|
|
|
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> |
|
|
|
|
|
|
|
|
|
@ -221,7 +248,7 @@ $avatar-width: 104px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
border-color: #409EFF; |
|
|
|
|
border-color: #409eff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.uploader-default { |
|
|
|
|
@ -272,7 +299,8 @@ $avatar-width: 104px; |
|
|
|
|
/deep/ .d-inline-block { |
|
|
|
|
width: 216px; |
|
|
|
|
|
|
|
|
|
.el-select, .el-input { |
|
|
|
|
.el-select, |
|
|
|
|
.el-input { |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
