<template>
|
<a-modal
|
title="编辑blog文章主体"
|
:width="900"
|
:visible="visible"
|
:confirmLoading="confirmLoading"
|
@ok="handleSubmit"
|
@cancel="handleCancel"
|
>
|
<a-spin :spinning="confirmLoading">
|
<a-form :form="form">
|
<a-form-item v-show="false"><a-input v-decorator="['id']" /></a-form-item>
|
<a-form-item
|
label="文章标题"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-input placeholder="请输入文章标题" v-decorator="['title', {rules: [{required: true, message: '请输入文章标题！'}]}]" />
|
</a-form-item>
|
<a-form-item
|
label="文章文件id"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-input placeholder="请输入文章文件id" v-decorator="['articleFileId', {rules: [{required: true, message: '请输入文章文件id！'}]}]" />
|
</a-form-item>
|
<a-form-item
|
label="文件类型 1:markdown 2:html"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-input placeholder="请输入文件类型 1:markdown 2:html" v-decorator="['articleFileType', {rules: [{required: true, message: '请输入文件类型 1:markdown 2:html！'}]}]" />
|
</a-form-item>
|
<a-form-item
|
label="文章分类id 0:没有分类"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-input placeholder="请输入文章分类id 0:没有分类" v-decorator="['articleTypeId', {rules: [{required: true, message: '请输入文章分类id 0:没有分类！'}]}]" />
|
</a-form-item>
|
<a-form-item
|
label="文章引言"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-input placeholder="请输入文章引言" v-decorator="['introduce', {rules: [{required: true, message: '请输入文章引言！'}]}]" />
|
</a-form-item>
|
<a-form-item
|
label="封面文件地址(id)"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-input placeholder="请输入封面文件地址(id)" v-decorator="['coverFileId', {rules: [{required: true, message: '请输入封面文件地址(id)！'}]}]" />
|
</a-form-item>
|
<a-form-item
|
label="上次编辑时间"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-date-picker style="width: 100%" placeholder="请选择上次编辑时间" v-decorator="['lastEditorDate',{rules: [{ required: true, message: '请选择上次编辑时间！' }]}]" @change="lastEditorDateOnChange"/>
|
</a-form-item>
|
<a-form-item
|
label="发布时间"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-date-picker style="width: 100%" placeholder="请选择发布时间" v-decorator="['publishDate',{rules: [{ required: true, message: '请选择发布时间！' }]}]" @change="publishDateOnChange"/>
|
</a-form-item>
|
<a-form-item
|
label="是否置顶 0:否 1:是"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-input placeholder="请输入是否置顶 0:否 1:是" v-decorator="['isTop', {rules: [{required: true, message: '请输入是否置顶 0:否 1:是！'}]}]" />
|
</a-form-item>
|
<a-form-item
|
label="置顶值(越小越靠前)"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-input placeholder="请输入置顶值(越小越靠前)" v-decorator="['topValue', {rules: [{required: true, message: '请输入置顶值(越小越靠前)！'}]}]" />
|
</a-form-item>
|
<a-form-item
|
label="公开状态 1:公开 2:私密 3:密码授权"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-input placeholder="请输入公开状态 1:公开 2:私密 3:密码授权" v-decorator="['authStatus', {rules: [{required: true, message: '请输入公开状态 1:公开 2:私密 3:密码授权！'}]}]" />
|
</a-form-item>
|
<a-form-item
|
label="授权密码(在密码授权状态时)"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-input placeholder="请输入授权密码(在密码授权状态时)" v-decorator="['authPassword', {rules: [{required: true, message: '请输入授权密码(在密码授权状态时)！'}]}]" />
|
</a-form-item>
|
<a-form-item
|
label="编辑状态 0:草稿 1:发布"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-input placeholder="请输入编辑状态 0:草稿 1:发布" v-decorator="['editorStatus', {rules: [{required: true, message: '请输入编辑状态 0:草稿 1:发布！'}]}]" />
|
</a-form-item>
|
<a-form-item
|
label="归档年份(以初次发布时间为准)"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-input placeholder="请输入归档年份(以初次发布时间为准)" v-decorator="['separateYear', {rules: [{required: true, message: '请输入归档年份(以初次发布时间为准)！'}]}]" />
|
</a-form-item>
|
<a-form-item
|
label="归档月份"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-input placeholder="请输入归档月份" v-decorator="['separateMonth', {rules: [{required: true, message: '请输入归档月份！'}]}]" />
|
</a-form-item>
|
<a-form-item
|
label="归档日"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-input placeholder="请输入归档日" v-decorator="['separateDay', {rules: [{required: true, message: '请输入归档日！'}]}]" />
|
</a-form-item>
|
<a-form-item
|
label="是否启用 0:否 1:是"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-input placeholder="请输入是否启用 0:否 1:是" v-decorator="['isEnable', {rules: [{required: true, message: '请输入是否启用 0:否 1:是！'}]}]" />
|
</a-form-item>
|
<a-form-item
|
label="更新时间"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-date-picker style="width: 100%" placeholder="请选择更新时间" v-decorator="['updateDate',{rules: [{ required: true, message: '请选择更新时间！' }]}]" @change="updateDateOnChange"/>
|
</a-form-item>
|
<a-form-item
|
label="创建时间"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
has-feedback
|
>
|
<a-date-picker style="width: 100%" placeholder="请选择创建时间" v-decorator="['createDate',{rules: [{ required: true, message: '请选择创建时间！' }]}]" @change="createDateOnChange"/>
|
</a-form-item>
|
</a-form>
|
</a-spin>
|
</a-modal>
|
</template>
|
|
<script>
|
import moment from 'moment'
|
import { blogArticleEdit } from '@/api/modular/main/blogarticle/blogArticleManage'
|
export default {
|
data () {
|
return {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 5 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 15 }
|
},
|
lastEditorDateDateString: '',
|
publishDateDateString: '',
|
updateDateDateString: '',
|
createDateDateString: '',
|
visible: false,
|
confirmLoading: false,
|
form: this.$form.createForm(this)
|
}
|
},
|
methods: {
|
moment,
|
// 初始化方法
|
edit (record) {
|
this.visible = true
|
setTimeout(() => {
|
this.form.setFieldsValue(
|
{
|
id: record.id,
|
title: record.title,
|
articleFileId: record.articleFileId,
|
articleFileType: record.articleFileType,
|
articleTypeId: record.articleTypeId,
|
introduce: record.introduce,
|
coverFileId: record.coverFileId,
|
isTop: record.isTop,
|
topValue: record.topValue,
|
authStatus: record.authStatus,
|
authPassword: record.authPassword,
|
editorStatus: record.editorStatus,
|
separateYear: record.separateYear,
|
separateMonth: record.separateMonth,
|
separateDay: record.separateDay,
|
isEnable: record.isEnable
|
}
|
)
|
}, 100)
|
// 时间单独处理
|
if (record.lastEditorDate) {
|
this.form.getFieldDecorator('lastEditorDate', { initialValue: moment(record.lastEditorDate, 'YYYY-MM-DD') })
|
this.lastEditorDateDateString = moment(record.lastEditorDate).format('YYYY-MM-DD')
|
}
|
// 时间单独处理
|
if (record.publishDate) {
|
this.form.getFieldDecorator('publishDate', { initialValue: moment(record.publishDate, 'YYYY-MM-DD') })
|
this.publishDateDateString = moment(record.publishDate).format('YYYY-MM-DD')
|
}
|
// 时间单独处理
|
if (record.updateDate) {
|
this.form.getFieldDecorator('updateDate', { initialValue: moment(record.updateDate, 'YYYY-MM-DD') })
|
this.updateDateDateString = moment(record.updateDate).format('YYYY-MM-DD')
|
}
|
// 时间单独处理
|
if (record.createDate) {
|
this.form.getFieldDecorator('createDate', { initialValue: moment(record.createDate, 'YYYY-MM-DD') })
|
this.createDateDateString = moment(record.createDate).format('YYYY-MM-DD')
|
}
|
},
|
handleSubmit () {
|
const { form: { validateFields } } = this
|
this.confirmLoading = true
|
validateFields((errors, values) => {
|
if (!errors) {
|
for (const key in values) {
|
if (typeof (values[key]) === 'object' && values[key] != null) {
|
values[key] = JSON.stringify(values[key])
|
}
|
}
|
values.lastEditorDate = this.lastEditorDateDateString || null
|
values.publishDate = this.publishDateDateString || null
|
values.updateDate = this.updateDateDateString || null
|
values.createDate = this.createDateDateString || null
|
blogArticleEdit(values).then((res) => {
|
if (res.success) {
|
this.$message.success('编辑成功')
|
this.confirmLoading = false
|
this.$emit('ok', values)
|
this.handleCancel()
|
} else {
|
this.$message.error('编辑失败')// + res.message
|
}
|
}).finally((res) => {
|
this.confirmLoading = false
|
})
|
} else {
|
this.confirmLoading = false
|
}
|
})
|
},
|
lastEditorDateOnChange(date, dateString) {
|
this.lastEditorDateDateString = dateString
|
},
|
publishDateOnChange(date, dateString) {
|
this.publishDateDateString = dateString
|
},
|
updateDateOnChange(date, dateString) {
|
this.updateDateDateString = dateString
|
},
|
createDateOnChange(date, dateString) {
|
this.createDateDateString = dateString
|
},
|
handleCancel () {
|
this.lastEditorDateDateString =''
|
this.form.getFieldDecorator('lastEditorDate', { initialValue: null })
|
this.publishDateDateString =''
|
this.form.getFieldDecorator('publishDate', { initialValue: null })
|
this.updateDateDateString =''
|
this.form.getFieldDecorator('updateDate', { initialValue: null })
|
this.createDateDateString =''
|
this.form.getFieldDecorator('createDate', { initialValue: null })
|
this.form.resetFields()
|
this.visible = false
|
}
|
}
|
}
|
</script>
|
