|
|
|
|
@ -1,143 +1,153 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="page"> |
|
|
|
|
<p class="page-name mb">文章详情</p> |
|
|
|
|
<el-form :model="form" :rules="rules" class="input-form model" label-width="140px"> |
|
|
|
|
<el-form-item prop="title" label="标题"> |
|
|
|
|
<el-input |
|
|
|
|
id="articleTitle" |
|
|
|
|
style="width: 940px" |
|
|
|
|
placeholder="请输入标题" |
|
|
|
|
v-model="form.title" |
|
|
|
|
clearable |
|
|
|
|
maxlength="100" |
|
|
|
|
@change="nameChange" |
|
|
|
|
></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<div class="item-line"> |
|
|
|
|
<el-form-item prop="releaseTime" label="发布日期"> |
|
|
|
|
<el-date-picker |
|
|
|
|
v-model="form.releaseTime" |
|
|
|
|
type="date" |
|
|
|
|
placeholder="选择日期" |
|
|
|
|
format="yyyy-MM-dd" |
|
|
|
|
:clearable="false" |
|
|
|
|
value-format="yyyy-MM-dd"> |
|
|
|
|
</el-date-picker> |
|
|
|
|
</el-form-item> |
|
|
|
|
<div> |
|
|
|
|
<el-card shadow="hover" class="mgb20"> |
|
|
|
|
<div class="flex-between"> |
|
|
|
|
<div class="per_title" v-preventReClick @click="back"> |
|
|
|
|
<i class="el-icon-arrow-left"></i> |
|
|
|
|
<span class="per_back">返回</span> |
|
|
|
|
<span class="per_school" v-text="form.id ? '编辑文章' : '新建文章'"></span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="item-line"> |
|
|
|
|
<el-form-item prop="source" label="来源"> |
|
|
|
|
</el-card> |
|
|
|
|
<div class="page"> |
|
|
|
|
<el-form :model="form" :rules="rules" class="input-form model" label-width="140px"> |
|
|
|
|
<el-form-item prop="title" label="标题"> |
|
|
|
|
<el-input |
|
|
|
|
placeholder="请输入来源" |
|
|
|
|
v-model.trim="form.source" |
|
|
|
|
id="articleTitle" |
|
|
|
|
style="width: 940px" |
|
|
|
|
placeholder="请输入标题" |
|
|
|
|
v-model="form.title" |
|
|
|
|
clearable |
|
|
|
|
maxlength="50" |
|
|
|
|
class="inline-input" |
|
|
|
|
maxlength="100" |
|
|
|
|
@change="nameChange" |
|
|
|
|
></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="author" label="作者"> |
|
|
|
|
<el-input |
|
|
|
|
v-model="form.author" |
|
|
|
|
clearable |
|
|
|
|
maxlength="50" |
|
|
|
|
class="inline-input" |
|
|
|
|
></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
</div> |
|
|
|
|
<div class="item-line"> |
|
|
|
|
<el-form-item prop="edit" label="编辑"> |
|
|
|
|
<div class="item-line"> |
|
|
|
|
<el-form-item prop="releaseTime" label="发布日期"> |
|
|
|
|
<el-date-picker |
|
|
|
|
v-model="form.releaseTime" |
|
|
|
|
type="date" |
|
|
|
|
placeholder="选择日期" |
|
|
|
|
format="yyyy-MM-dd" |
|
|
|
|
:clearable="false" |
|
|
|
|
value-format="yyyy-MM-dd"> |
|
|
|
|
</el-date-picker> |
|
|
|
|
</el-form-item> |
|
|
|
|
</div> |
|
|
|
|
<div class="item-line"> |
|
|
|
|
<el-form-item prop="source" label="来源"> |
|
|
|
|
<el-input |
|
|
|
|
placeholder="请输入来源" |
|
|
|
|
v-model.trim="form.source" |
|
|
|
|
clearable |
|
|
|
|
maxlength="50" |
|
|
|
|
class="inline-input" |
|
|
|
|
></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="author" label="作者"> |
|
|
|
|
<el-input |
|
|
|
|
v-model="form.author" |
|
|
|
|
clearable |
|
|
|
|
maxlength="50" |
|
|
|
|
class="inline-input" |
|
|
|
|
></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
</div> |
|
|
|
|
<div class="item-line"> |
|
|
|
|
<el-form-item prop="edit" label="编辑"> |
|
|
|
|
<el-input |
|
|
|
|
placeholder="请输入编辑" |
|
|
|
|
v-model.trim="form.edit" |
|
|
|
|
clearable |
|
|
|
|
maxlength="50" |
|
|
|
|
class="inline-input" |
|
|
|
|
></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="audit" label="审核"> |
|
|
|
|
<el-input |
|
|
|
|
placeholder="请输入审核" |
|
|
|
|
v-model.trim="form.audit" |
|
|
|
|
clearable |
|
|
|
|
maxlength="50" |
|
|
|
|
class="inline-input" |
|
|
|
|
></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="item-line"> |
|
|
|
|
<el-form-item prop="classificationId" label="所属分类"> |
|
|
|
|
<el-select style="width: 234px;" v-model="form.classificationId"> |
|
|
|
|
<template v-for="item in classifications"> |
|
|
|
|
<el-option |
|
|
|
|
v-if="item.id" |
|
|
|
|
:key="item.id" |
|
|
|
|
:label="item.classificationName" |
|
|
|
|
:value="item.id"> |
|
|
|
|
</el-option> |
|
|
|
|
</template> |
|
|
|
|
</el-select> |
|
|
|
|
<el-button class="set-btn" type="primary" @click="setClass">设置</el-button> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="author" label="主题标签"> |
|
|
|
|
<el-select style="width: 234px;" v-model="form.lableId" multiple> |
|
|
|
|
<template v-for="item in labels"> |
|
|
|
|
<el-option |
|
|
|
|
v-if="item.id" |
|
|
|
|
:key="item.id" |
|
|
|
|
:label="item.labelName" |
|
|
|
|
:value="item.id"> |
|
|
|
|
</el-option> |
|
|
|
|
</template> |
|
|
|
|
</el-select> |
|
|
|
|
<el-button class="set-btn" type="primary" @click="setLabel">设置</el-button> |
|
|
|
|
</el-form-item> |
|
|
|
|
</div> |
|
|
|
|
<el-form-item prop="summary" label="摘要"> |
|
|
|
|
<el-input |
|
|
|
|
placeholder="请输入编辑" |
|
|
|
|
v-model.trim="form.edit" |
|
|
|
|
style="width: 940px" |
|
|
|
|
type="textarea" |
|
|
|
|
v-model.trim="form.summary" |
|
|
|
|
:rows="3" |
|
|
|
|
clearable |
|
|
|
|
maxlength="50" |
|
|
|
|
class="inline-input" |
|
|
|
|
></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="audit" label="审核"> |
|
|
|
|
<el-input |
|
|
|
|
placeholder="请输入审核" |
|
|
|
|
v-model.trim="form.audit" |
|
|
|
|
clearable |
|
|
|
|
maxlength="50" |
|
|
|
|
class="inline-input" |
|
|
|
|
></el-input> |
|
|
|
|
<el-form-item prop="bannerImg" label="封面图"> |
|
|
|
|
<el-upload |
|
|
|
|
class="avatar-uploader" |
|
|
|
|
accept=".jpg,.png,.jpeg,.gif" |
|
|
|
|
:on-change="changeFile" |
|
|
|
|
:show-file-list="false" |
|
|
|
|
:action="this.api.fileupload" |
|
|
|
|
:auto-upload="false" |
|
|
|
|
> |
|
|
|
|
<img v-if="form.bannerImg" :src="form.bannerImg" class="avatar"> |
|
|
|
|
<div class="uploader-default" v-else> |
|
|
|
|
<img class="plus" src="@/assets/img/plus.png" alt=""> |
|
|
|
|
<p>点击上传</p> |
|
|
|
|
</div> |
|
|
|
|
</el-upload> |
|
|
|
|
</el-form-item> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="item-line"> |
|
|
|
|
<el-form-item prop="classificationId" label="所属分类"> |
|
|
|
|
<el-select style="width: 234px;" v-model="form.classificationId"> |
|
|
|
|
<template v-for="item in classifications"> |
|
|
|
|
<el-option |
|
|
|
|
v-if="item.id" |
|
|
|
|
:key="item.id" |
|
|
|
|
:label="item.classificationName" |
|
|
|
|
:value="item.id"> |
|
|
|
|
</el-option> |
|
|
|
|
</template> |
|
|
|
|
</el-select> |
|
|
|
|
<el-button class="set-btn" type="primary" @click="setClass">设置</el-button> |
|
|
|
|
<el-form-item prop="mainBody" label="正文"> |
|
|
|
|
<Editor api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' v-model="form.mainBody" :init="editorConfig" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="author" label="主题标签"> |
|
|
|
|
<el-select style="width: 234px;" v-model="form.lableId" multiple> |
|
|
|
|
<template v-for="item in labels"> |
|
|
|
|
<el-option |
|
|
|
|
v-if="item.id" |
|
|
|
|
:key="item.id" |
|
|
|
|
:label="item.labelName" |
|
|
|
|
:value="item.id"> |
|
|
|
|
</el-option> |
|
|
|
|
</template> |
|
|
|
|
</el-select> |
|
|
|
|
<el-button class="set-btn" type="primary" @click="setLabel">设置</el-button> |
|
|
|
|
<el-form-item prop="file" label="文件上传"> |
|
|
|
|
<el-upload |
|
|
|
|
:before-upload="fileBeforeUpload" |
|
|
|
|
:on-remove="handleRemove" |
|
|
|
|
:on-success="uploadSuccessFile" |
|
|
|
|
:action="this.api.fileUploadNakadai" |
|
|
|
|
:file-list="form.fileList" |
|
|
|
|
:headers="headers" |
|
|
|
|
> |
|
|
|
|
<el-button>上传</el-button> |
|
|
|
|
</el-upload> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
<div class="btns"> |
|
|
|
|
<el-button type="primary" @click="submit(1)">发布</el-button> |
|
|
|
|
<el-button @click="submit(0)">保存草稿</el-button> |
|
|
|
|
<el-button @click="back">取消</el-button> |
|
|
|
|
</div> |
|
|
|
|
<el-form-item prop="summary" label="摘要"> |
|
|
|
|
<el-input |
|
|
|
|
style="width: 940px" |
|
|
|
|
type="textarea" |
|
|
|
|
v-model.trim="form.summary" |
|
|
|
|
:rows="3" |
|
|
|
|
clearable |
|
|
|
|
></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="bannerImg" label="封面图"> |
|
|
|
|
<el-upload |
|
|
|
|
class="avatar-uploader" |
|
|
|
|
accept=".jpg,.png,.jpeg,.gif" |
|
|
|
|
:on-change="changeFile" |
|
|
|
|
:show-file-list="false" |
|
|
|
|
:action="this.api.fileupload" |
|
|
|
|
:auto-upload="false" |
|
|
|
|
> |
|
|
|
|
<img v-if="form.bannerImg" :src="form.bannerImg" class="avatar"> |
|
|
|
|
<div class="uploader-default" v-else> |
|
|
|
|
<img class="plus" src="@/assets/img/plus.png" alt=""> |
|
|
|
|
<p>点击上传</p> |
|
|
|
|
</div> |
|
|
|
|
</el-upload> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="mainBody" label="正文"> |
|
|
|
|
<Editor api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' v-model="form.mainBody" :init="editorConfig" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="file" label="文件上传"> |
|
|
|
|
<el-upload |
|
|
|
|
:before-upload="fileBeforeUpload" |
|
|
|
|
:on-remove="handleRemove" |
|
|
|
|
:on-success="uploadSuccessFile" |
|
|
|
|
:action="this.api.fileUploadNakadai" |
|
|
|
|
:file-list="form.fileList" |
|
|
|
|
:headers="headers" |
|
|
|
|
> |
|
|
|
|
<el-button>上传</el-button> |
|
|
|
|
</el-upload> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
<div class="btns"> |
|
|
|
|
<el-button type="primary" @click="submit(1)">发布</el-button> |
|
|
|
|
<el-button @click="submit(0)">保存草稿</el-button> |
|
|
|
|
<el-button @click="back">取消</el-button> |
|
|
|
|
</div> |
|
|
|
|
<!-- 剪裁组件弹窗 --> |
|
|
|
|
<el-dialog title="图片裁剪" append-to-body :visible.sync="cropperModel" width="1100px" :close-on-click-modal="false"> |
|
|
|
|
@ -258,9 +268,9 @@ export default { |
|
|
|
|
releaseTime: [ |
|
|
|
|
{ required: true, message: '请选择发布日期', trigger: 'change' } |
|
|
|
|
], |
|
|
|
|
// bannerImg: [ |
|
|
|
|
// { required: true, message: '请上传封面图', trigger: 'change' } |
|
|
|
|
// ], |
|
|
|
|
bannerImg: [ |
|
|
|
|
{ required: true, message: '请上传封面图', trigger: 'change' } |
|
|
|
|
], |
|
|
|
|
mainBody: [ |
|
|
|
|
{ required: true, message: '请输入正文', trigger: 'blur' } |
|
|
|
|
], |
|
|
|
|
@ -299,12 +309,13 @@ export default { |
|
|
|
|
next() |
|
|
|
|
} else if (!this.pass) { |
|
|
|
|
// 更改了信息才需要提示 |
|
|
|
|
if (this.updateTime > 1) { |
|
|
|
|
if (this.updateTime) { |
|
|
|
|
this.$confirm(`所填写内容暂未保存，是否保存？`, '提示', { |
|
|
|
|
type: 'warning' |
|
|
|
|
}).then(() => { |
|
|
|
|
this.submit(this.form.isRelease, next) |
|
|
|
|
}).catch(() => { |
|
|
|
|
console.log(55) |
|
|
|
|
next() |
|
|
|
|
}) |
|
|
|
|
} else { |
|
|
|
|
@ -317,21 +328,30 @@ export default { |
|
|
|
|
mounted() { |
|
|
|
|
this.getArticle() |
|
|
|
|
this.getLabel() |
|
|
|
|
this.getClassification() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// 文章列表 |
|
|
|
|
// 文章详情 |
|
|
|
|
getArticle() { |
|
|
|
|
const { id } = this.form |
|
|
|
|
id && this.$post(`${this.api.findByIdParnerArticle}?id=${id}`).then(({ data }) => { |
|
|
|
|
data.lableId = data.lableId ? data.lableId.split(',').map(e => +e) : [] |
|
|
|
|
data.fileList.forEach(e => e.name = e.fileName) |
|
|
|
|
this.form = data |
|
|
|
|
this.getClassification(1) |
|
|
|
|
}).catch(err => {}) |
|
|
|
|
}, |
|
|
|
|
// 获取所属分类 |
|
|
|
|
getClassification() { |
|
|
|
|
getClassification(detail) { |
|
|
|
|
this.$post(`${this.api.queryClassificationByType}?typeId=${this.typeId}`).then(({ data }) => { |
|
|
|
|
this.classifications = data |
|
|
|
|
// 如果所选分类被删除，则清空分类id |
|
|
|
|
if (detail) { |
|
|
|
|
const id = this.form.classificationId |
|
|
|
|
if (!data.find(e => e.id == id)) this.form.classificationId = '' |
|
|
|
|
setTimeout(() => { |
|
|
|
|
this.updateTime = 0 |
|
|
|
|
}, 500) |
|
|
|
|
} |
|
|
|
|
}).catch(err => {}) |
|
|
|
|
}, |
|
|
|
|
// 显示所属分类弹框 |
|
|
|
|
@ -396,8 +416,9 @@ export default { |
|
|
|
|
} else { |
|
|
|
|
this.classVisible = false |
|
|
|
|
} |
|
|
|
|
// 所选的分类被删了后，要清空所选的分类id |
|
|
|
|
if (!list.find(e => e.id == this.form.classificationId)) this.form.classificationId = '' |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 获取标签 |
|
|
|
|
getLabel() { |
|
|
|
|
@ -443,8 +464,6 @@ export default { |
|
|
|
|
this.$post(this.api[row.id ? 'updateParnerLabel' : 'saveParnerLabel'], { |
|
|
|
|
labelName: row.labelName, |
|
|
|
|
id: row.id, |
|
|
|
|
// editorId: this.userId, |
|
|
|
|
// founderId: this.userId |
|
|
|
|
}).then(res => { |
|
|
|
|
showMsg && Util.successMsg((row.id ? '修改' : '新增') + '成功') |
|
|
|
|
this.getLabel() |
|
|
|
|
@ -573,7 +592,7 @@ export default { |
|
|
|
|
}, |
|
|
|
|
// 附件删除 |
|
|
|
|
handleRemove(e, fileList) { |
|
|
|
|
e.id ? this.$post(`${this.api.delContentFile}?id=${e.id}`).then(res => { |
|
|
|
|
e.id ? this.$post(`${this.api.batchDeletionParnerFile}?ids=${e.id}`).then(res => { |
|
|
|
|
this.form.fileList = fileList |
|
|
|
|
}).catch(res => {}) : (this.form.fileList = fileList) |
|
|
|
|
}, |
|
|
|
|
@ -620,9 +639,8 @@ export default { |
|
|
|
|
// 返回 |
|
|
|
|
back() { |
|
|
|
|
this.pass = true |
|
|
|
|
const { updateTime } = this |
|
|
|
|
// 更改了信息才需要提示 |
|
|
|
|
if (updateTime > 1) { |
|
|
|
|
if (this.updateTime) { |
|
|
|
|
this.$confirm(`所填写内容暂未保存，是否保存？`, '提示', { |
|
|
|
|
type: 'warning' |
|
|
|
|
}).then(() => { |
|
|
|
|
@ -634,17 +652,6 @@ export default { |
|
|
|
|
this.$router.back() |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 更新附件的状态为发布 |
|
|
|
|
updateFile(files, form, quoteId) { |
|
|
|
|
files.map(e => { |
|
|
|
|
this.$post(this.api.updateFile, { |
|
|
|
|
id: e, |
|
|
|
|
isRelease: form.isRelease, |
|
|
|
|
quote: form.title, |
|
|
|
|
quoteId |
|
|
|
|
}).then(res => {}).catch(err => {}) |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 提交 |
|
|
|
|
submit(isRelease, next) { |
|
|
|
|
if (this.submiting) return false |
|
|
|
|
@ -653,18 +660,12 @@ export default { |
|
|
|
|
if (this.nameRepeat) return Util.errorMsg('该标题已重复!') |
|
|
|
|
// 如果是发布 |
|
|
|
|
if (isRelease) { |
|
|
|
|
// if (!form.releaseTime) return Util.errorMsg('请选择发布日期') |
|
|
|
|
// if (!form.bannerImg ) return Util.errorMsg('请上传封面') |
|
|
|
|
// if (!form.mainBody) return Util.errorMsg('请输入正文') |
|
|
|
|
if (!form.releaseTime) return Util.errorMsg('请选择发布日期') |
|
|
|
|
if (!form.classificationId) return Util.errorMsg('请选择所属分类') |
|
|
|
|
if (!form.bannerImg ) return Util.errorMsg('请上传封面') |
|
|
|
|
if (!form.mainBody) return Util.errorMsg('请输入正文') |
|
|
|
|
} |
|
|
|
|
// if (this.uploading) return Util.errorMsg('文件正在上传，请上传完成后再发布') |
|
|
|
|
const { fileList, bannerImg } = form |
|
|
|
|
const fileId = [] |
|
|
|
|
// 获取几个附件的id，url后面的数字串即是附件id |
|
|
|
|
if (bannerImg) fileId.push(bannerImg.substr(bannerImg.lastIndexOf('/') + 1)) |
|
|
|
|
fileList && fileList.map(e => { |
|
|
|
|
fileId.push(e[e.url ? 'url' : 'filePath'].substr(e[e.url ? 'url' : 'filePath'].lastIndexOf('/') + 1)) |
|
|
|
|
}) |
|
|
|
|
form.lableId = form.lableId.join(',') |
|
|
|
|
|
|
|
|
|
form.releaseTime = Util.formatDate('yyyy-MM-dd', new Date(form.releaseTime)) // 发布日期转化为年月日格式 |
|
|
|
|
@ -674,7 +675,6 @@ export default { |
|
|
|
|
if (form.id) { |
|
|
|
|
delete form.children |
|
|
|
|
this.$post(this.api.updateParnerArticle, form).then(res => { |
|
|
|
|
// this.updateFile(fileId, form, form.id) |
|
|
|
|
Util.successMsg('修改成功') |
|
|
|
|
next ? next() : this.$router.back() |
|
|
|
|
}).catch(err => { |
|
|
|
|
@ -682,18 +682,6 @@ export default { |
|
|
|
|
}) |
|
|
|
|
} else { |
|
|
|
|
this.$post(this.api.saveParnerArticle, form).then(({ data }) => { |
|
|
|
|
this.updateFile(fileId, form, data) |
|
|
|
|
// 新增文章完后需要把上传的附件添加到文章附件表 |
|
|
|
|
// form.fileList.map(e => { |
|
|
|
|
// this.$post(this.api.saveContentFile, { |
|
|
|
|
// contentId: data, |
|
|
|
|
// editorId: this.userId, |
|
|
|
|
// founderId: this.userId, |
|
|
|
|
// id: '', |
|
|
|
|
// fileName: e.name, |
|
|
|
|
// filePath: e.url |
|
|
|
|
// }).then(res => {}).catch(err => {}) |
|
|
|
|
// }) |
|
|
|
|
Util.successMsg('创建成功') |
|
|
|
|
next ? next() : this.$router.back() |
|
|
|
|
}).catch(err => { |
|
|
|
|
@ -829,7 +817,7 @@ $upload-lg-height: 102px; |
|
|
|
|
} |
|
|
|
|
.input-form { |
|
|
|
|
&.model { |
|
|
|
|
height: calc(100vh - 250px); |
|
|
|
|
height: calc(100vh - 340px); |
|
|
|
|
padding-right: 20px; |
|
|
|
|
overflow: auto; |
|
|
|
|
.el-form-item__label { |
|
|
|
|
|
