From 552004d0902687de16cd50e3378d4d6671d7f015 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Mon, 21 Feb 2022 18:46:36 +0800
Subject: [PATCH] 文章添加
---
_web/src/views/main/blogarticle/editForm.vue | 340 ++++++++++++++++++--------------------------------------
1 files changed, 110 insertions(+), 230 deletions(-)
diff --git a/_web/src/views/main/blogarticle/editForm.vue b/_web/src/views/main/blogarticle/editForm.vue
index 1ae1364..0e63eb9 100644
--- a/_web/src/views/main/blogarticle/editForm.vue
+++ b/_web/src/views/main/blogarticle/editForm.vue
@@ -1,166 +1,59 @@
<template>
- <a-modal
- title="编辑blog文章主体"
- :width="900"
- :visible="visible"
- :confirmLoading="confirmLoading"
- @ok="handleSubmit"
- @cancel="handleCancel"
- >
+ <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-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 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 label="文件类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
+ <a-radio-group placeholder="请选择文件类型" v-decorator="['articleFileType']">
+ <a-radio v-for="(item,index) in articleFileTypeData" :key="index" :value="item.code">{{ item.name }}
+ </a-radio>
+ </a-radio-group>
</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 label="文章分类" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+ <a-input placeholder="请输入文章分类"
+ v-decorator="['articleTypeId', {rules: [{required: true, message: '请输入文章分类！'}]}]" />
</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 label="文章引言" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+ <a-textarea placeholder="请输入文章引言" v-decorator="['introduce']" :auto-size="{ minRows: 3, maxRows: 6 }" />
</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 label="封面文件" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+ <a-input placeholder="请输入封面文件" v-decorator="['coverFileId']" />
</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 label="是否置顶" :labelCol="labelCol" :wrapperCol="wrapperCol">
+ <a-select style="width: 100%" placeholder="请选择是否置顶"
+ v-decorator="['isTop', {rules: [{ required: true, message: '请选择是否置顶！' }]}]">
+ <a-select-option v-for="(item,index) in isTopData" :key="index" :value="item.code">{{ item.name }}
+ </a-select-option>
+ </a-select>
</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 label="置顶值" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+ <a-input placeholder="请输入置顶值" v-decorator="['topValue']" />
</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 label="公开状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
+ <a-radio-group placeholder="请选择公开状态" v-decorator="['authStatus']">
+ <a-radio v-for="(item,index) in authStatusData" :key="index" :value="item.code">{{ item.name }}</a-radio>
+ </a-radio-group>
</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 label="授权密码" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+ <a-input placeholder="请输入授权密码" v-decorator="['authPassword']" />
</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 label="编辑状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
+ <a-radio-group placeholder="请选择编辑状态" v-decorator="['editorStatus']">
+ <a-radio v-for="(item,index) in editorStatusData" :key="index" :value="item.code">{{ item.name }}</a-radio>
+ </a-radio-group>
</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 label="是否启用" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+ <a-input placeholder="请输入是否启用" v-decorator="['isEnable']" />
</a-form-item>
</a-form>
</a-spin>
@@ -168,90 +61,97 @@
</template>
<script>
- import moment from 'moment'
- import { blogArticleEdit } from '@/api/modular/main/blogarticle/blogArticleManage'
+ import {
+ blogArticleEdit
+ } from '@/api/modular/main/blogarticle/blogArticleManage'
export default {
- data () {
+ data() {
return {
labelCol: {
- xs: { span: 24 },
- sm: { span: 5 }
+ xs: {
+ span: 24
+ },
+ sm: {
+ span: 5
+ }
},
wrapperCol: {
- xs: { span: 24 },
- sm: { span: 15 }
+ xs: {
+ span: 24
+ },
+ sm: {
+ span: 15
+ }
},
- lastEditorDateDateString: '',
- publishDateDateString: '',
- updateDateDateString: '',
- createDateDateString: '',
+ articleFileTypeData: [],
+ isTopData: [],
+ authStatusData: [],
+ editorStatusData: [],
visible: false,
confirmLoading: false,
form: this.$form.createForm(this)
}
},
methods: {
- moment,
// 初始化方法
- edit (record) {
+ edit(record) {
this.visible = true
+ const articleFileTypeOption = this.$options
+ this.articleFileTypeData = articleFileTypeOption.filters['dictData']('blog_file_type')
+ const isTopOption = this.$options
+ this.isTopData = isTopOption.filters['dictData']('blog_yes_or_no')
+ const authStatusOption = this.$options
+ this.authStatusData = authStatusOption.filters['dictData']('blog_auth_status')
+ const editorStatusOption = this.$options
+ this.editorStatusData = editorStatusOption.filters['dictData']('blog_editor_status')
+
+ this.form.getFieldDecorator('articleFileType', {
+ valuePropName: 'checked',
+ initialValue: record.articleFileType.toString()
+ })
+ this.form.getFieldDecorator('authStatus', {
+ valuePropName: 'checked',
+ initialValue: record.authStatus.toString()
+ })
+ this.form.getFieldDecorator('editorStatus', {
+ valuePropName: 'checked',
+ initialValue: record.editorStatus.toString()
+ })
+
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
- }
- )
+ 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,
+ 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
+ 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) {
+ 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('编辑成功')
@@ -259,7 +159,7 @@
this.$emit('ok', values)
this.handleCancel()
} else {
- this.$message.error('编辑失败')// + res.message
+ this.$message.error('编辑失败') // + res.message
}
}).finally((res) => {
this.confirmLoading = false
@@ -269,27 +169,7 @@
}
})
},
- 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 })
+ handleCancel() {
this.form.resetFields()
this.visible = false
}
--
Gitblit v1.9.1