<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
|
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: false, 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 { blogArticleAdd } 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: {
|
// 初始化方法
|
add (record) {
|
this.visible = true
|
},
|
/**
|
* 提交表单
|
*/
|
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
|
blogArticleAdd(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>
|
