blog的后端代码
view | history | commit | commitdiff
inleft
2022-02-09 9bcb19959eeb9da9bde2561e7278f6d0a55eb151
commit | author | age
9bcb19 1 <template>
I 2   <a-modal
3     title="编辑blog文章主体"
4     :width="900"
5     :visible="visible"
6     :confirmLoading="confirmLoading"
7     @ok="handleSubmit"
8     @cancel="handleCancel"
9   >
10     <a-spin :spinning="confirmLoading">
11       <a-form :form="form">
12         <a-form-item v-show="false"><a-input v-decorator="['id']" /></a-form-item>
13         <a-form-item
14           label="文章标题"
15           :labelCol="labelCol"
16           :wrapperCol="wrapperCol"
17           has-feedback
18         >
19           <a-input placeholder="请输入文章标题" v-decorator="['title', {rules: [{required: true, message: '请输入文章标题！'}]}]" />
20         </a-form-item>
21         <a-form-item
22           label="文章文件id"
23           :labelCol="labelCol"
24           :wrapperCol="wrapperCol"
25           has-feedback
26         >
27           <a-input placeholder="请输入文章文件id" v-decorator="['articleFileId', {rules: [{required: true, message: '请输入文章文件id！'}]}]" />
28         </a-form-item>
29         <a-form-item
30           label="文件类型 1:markdown 2:html"
31           :labelCol="labelCol"
32           :wrapperCol="wrapperCol"
33           has-feedback
34         >
35           <a-input placeholder="请输入文件类型 1:markdown 2:html" v-decorator="['articleFileType', {rules: [{required: true, message: '请输入文件类型 1:markdown 2:html！'}]}]" />
36         </a-form-item>
37         <a-form-item
38           label="文章分类id 0:没有分类"
39           :labelCol="labelCol"
40           :wrapperCol="wrapperCol"
41           has-feedback
42         >
43           <a-input placeholder="请输入文章分类id 0:没有分类" v-decorator="['articleTypeId', {rules: [{required: true, message: '请输入文章分类id 0:没有分类！'}]}]" />
44         </a-form-item>
45         <a-form-item
46           label="文章引言"
47           :labelCol="labelCol"
48           :wrapperCol="wrapperCol"
49           has-feedback
50         >
51           <a-input placeholder="请输入文章引言" v-decorator="['introduce', {rules: [{required: true, message: '请输入文章引言！'}]}]" />
52         </a-form-item>
53         <a-form-item
54           label="封面文件地址(id)"
55           :labelCol="labelCol"
56           :wrapperCol="wrapperCol"
57           has-feedback
58         >
59           <a-input placeholder="请输入封面文件地址(id)" v-decorator="['coverFileId', {rules: [{required: true, message: '请输入封面文件地址(id)！'}]}]" />
60         </a-form-item>
61         <a-form-item
62           label="上次编辑时间"
63           :labelCol="labelCol"
64           :wrapperCol="wrapperCol"
65           has-feedback
66         >
67           <a-date-picker style="width: 100%" placeholder="请选择上次编辑时间" v-decorator="['lastEditorDate',{rules: [{ required: true, message: '请选择上次编辑时间！' }]}]" @change="lastEditorDateOnChange"/>
68         </a-form-item>
69         <a-form-item
70           label="发布时间"
71           :labelCol="labelCol"
72           :wrapperCol="wrapperCol"
73           has-feedback
74         >
75           <a-date-picker style="width: 100%" placeholder="请选择发布时间" v-decorator="['publishDate',{rules: [{ required: true, message: '请选择发布时间！' }]}]" @change="publishDateOnChange"/>
76         </a-form-item>
77         <a-form-item
78           label="是否置顶 0:否 1:是"
79           :labelCol="labelCol"
80           :wrapperCol="wrapperCol"
81           has-feedback
82         >
83           <a-input placeholder="请输入是否置顶 0:否 1:是" v-decorator="['isTop', {rules: [{required: true, message: '请输入是否置顶 0:否 1:是！'}]}]" />
84         </a-form-item>
85         <a-form-item
86           label="置顶值(越小越靠前)"
87           :labelCol="labelCol"
88           :wrapperCol="wrapperCol"
89           has-feedback
90         >
91           <a-input placeholder="请输入置顶值(越小越靠前)" v-decorator="['topValue', {rules: [{required: true, message: '请输入置顶值(越小越靠前)！'}]}]" />
92         </a-form-item>
93         <a-form-item
94           label="公开状态 1:公开 2:私密 3:密码授权"
95           :labelCol="labelCol"
96           :wrapperCol="wrapperCol"
97           has-feedback
98         >
99           <a-input placeholder="请输入公开状态 1:公开 2:私密 3:密码授权" v-decorator="['authStatus', {rules: [{required: true, message: '请输入公开状态 1:公开 2:私密 3:密码授权！'}]}]" />
100         </a-form-item>
101         <a-form-item
102           label="授权密码(在密码授权状态时)"
103           :labelCol="labelCol"
104           :wrapperCol="wrapperCol"
105           has-feedback
106         >
107           <a-input placeholder="请输入授权密码(在密码授权状态时)" v-decorator="['authPassword', {rules: [{required: true, message: '请输入授权密码(在密码授权状态时)！'}]}]" />
108         </a-form-item>
109         <a-form-item
110           label="编辑状态 0:草稿 1:发布"
111           :labelCol="labelCol"
112           :wrapperCol="wrapperCol"
113           has-feedback
114         >
115           <a-input placeholder="请输入编辑状态 0:草稿 1:发布" v-decorator="['editorStatus', {rules: [{required: true, message: '请输入编辑状态 0:草稿 1:发布！'}]}]" />
116         </a-form-item>
117         <a-form-item
118           label="归档年份(以初次发布时间为准)"
119           :labelCol="labelCol"
120           :wrapperCol="wrapperCol"
121           has-feedback
122         >
123           <a-input placeholder="请输入归档年份(以初次发布时间为准)" v-decorator="['separateYear', {rules: [{required: true, message: '请输入归档年份(以初次发布时间为准)！'}]}]" />
124         </a-form-item>
125         <a-form-item
126           label="归档月份"
127           :labelCol="labelCol"
128           :wrapperCol="wrapperCol"
129           has-feedback
130         >
131           <a-input placeholder="请输入归档月份" v-decorator="['separateMonth', {rules: [{required: true, message: '请输入归档月份！'}]}]" />
132         </a-form-item>
133         <a-form-item
134           label="归档日"
135           :labelCol="labelCol"
136           :wrapperCol="wrapperCol"
137           has-feedback
138         >
139           <a-input placeholder="请输入归档日" v-decorator="['separateDay', {rules: [{required: true, message: '请输入归档日！'}]}]" />
140         </a-form-item>
141         <a-form-item
142           label="是否启用 0:否 1:是"
143           :labelCol="labelCol"
144           :wrapperCol="wrapperCol"
145           has-feedback
146         >
147           <a-input placeholder="请输入是否启用 0:否 1:是" v-decorator="['isEnable', {rules: [{required: true, message: '请输入是否启用 0:否 1:是！'}]}]" />
148         </a-form-item>
149         <a-form-item
150           label="更新时间"
151           :labelCol="labelCol"
152           :wrapperCol="wrapperCol"
153           has-feedback
154         >
155           <a-date-picker style="width: 100%" placeholder="请选择更新时间" v-decorator="['updateDate',{rules: [{ required: true, message: '请选择更新时间！' }]}]" @change="updateDateOnChange"/>
156         </a-form-item>
157         <a-form-item
158           label="创建时间"
159           :labelCol="labelCol"
160           :wrapperCol="wrapperCol"
161           has-feedback
162         >
163           <a-date-picker style="width: 100%" placeholder="请选择创建时间" v-decorator="['createDate',{rules: [{ required: true, message: '请选择创建时间！' }]}]" @change="createDateOnChange"/>
164         </a-form-item>
165       </a-form>
166     </a-spin>
167   </a-modal>
168 </template>
169
170 <script>
171   import moment from 'moment'
172   import { blogArticleEdit } from '@/api/modular/main/blogarticle/blogArticleManage'
173   export default {
174     data () {
175       return {
176         labelCol: {
177           xs: { span: 24 },
178           sm: { span: 5 }
179         },
180         wrapperCol: {
181           xs: { span: 24 },
182           sm: { span: 15 }
183         },
184         lastEditorDateDateString: '',
185         publishDateDateString: '',
186         updateDateDateString: '',
187         createDateDateString: '',
188         visible: false,
189         confirmLoading: false,
190         form: this.$form.createForm(this)
191       }
192     },
193     methods: {
194       moment,
195       // 初始化方法
196       edit (record) {
197         this.visible = true
198         setTimeout(() => {
199           this.form.setFieldsValue(
200             {
201               id: record.id,
202               title: record.title,
203               articleFileId: record.articleFileId,
204               articleFileType: record.articleFileType,
205               articleTypeId: record.articleTypeId,
206               introduce: record.introduce,
207               coverFileId: record.coverFileId,
208               isTop: record.isTop,
209               topValue: record.topValue,
210               authStatus: record.authStatus,
211               authPassword: record.authPassword,
212               editorStatus: record.editorStatus,
213               separateYear: record.separateYear,
214               separateMonth: record.separateMonth,
215               separateDay: record.separateDay,
216               isEnable: record.isEnable
217             }
218           )
219         }, 100)
220         // 时间单独处理
221         if (record.lastEditorDate) {
222             this.form.getFieldDecorator('lastEditorDate', { initialValue: moment(record.lastEditorDate, 'YYYY-MM-DD') })
223             this.lastEditorDateDateString = moment(record.lastEditorDate).format('YYYY-MM-DD')
224         }
225         // 时间单独处理
226         if (record.publishDate) {
227             this.form.getFieldDecorator('publishDate', { initialValue: moment(record.publishDate, 'YYYY-MM-DD') })
228             this.publishDateDateString = moment(record.publishDate).format('YYYY-MM-DD')
229         }
230         // 时间单独处理
231         if (record.updateDate) {
232             this.form.getFieldDecorator('updateDate', { initialValue: moment(record.updateDate, 'YYYY-MM-DD') })
233             this.updateDateDateString = moment(record.updateDate).format('YYYY-MM-DD')
234         }
235         // 时间单独处理
236         if (record.createDate) {
237             this.form.getFieldDecorator('createDate', { initialValue: moment(record.createDate, 'YYYY-MM-DD') })
238             this.createDateDateString = moment(record.createDate).format('YYYY-MM-DD')
239         }
240       },
241       handleSubmit () {
242         const { form: { validateFields } } = this
243         this.confirmLoading = true
244         validateFields((errors, values) => {
245           if (!errors) {
246             for (const key in values) {
247               if (typeof (values[key]) === 'object' && values[key] != null) {
248                 values[key] = JSON.stringify(values[key])
249               }
250             }
251             values.lastEditorDate = this.lastEditorDateDateString || null
252             values.publishDate = this.publishDateDateString || null
253             values.updateDate = this.updateDateDateString || null
254             values.createDate = this.createDateDateString || null
255             blogArticleEdit(values).then((res) => {
256               if (res.success) {
257                 this.$message.success('编辑成功')
258                 this.confirmLoading = false
259                 this.$emit('ok', values)
260                 this.handleCancel()
261               } else {
262                 this.$message.error('编辑失败')//  + res.message
263               }
264             }).finally((res) => {
265               this.confirmLoading = false
266             })
267           } else {
268             this.confirmLoading = false
269           }
270         })
271       },
272       lastEditorDateOnChange(date, dateString) {
273         this.lastEditorDateDateString = dateString
274       },
275       publishDateOnChange(date, dateString) {
276         this.publishDateDateString = dateString
277       },
278       updateDateOnChange(date, dateString) {
279         this.updateDateDateString = dateString
280       },
281       createDateOnChange(date, dateString) {
282         this.createDateDateString = dateString
283       },
284       handleCancel () {
285         this.lastEditorDateDateString =''
286         this.form.getFieldDecorator('lastEditorDate', { initialValue: null })
287         this.publishDateDateString =''
288         this.form.getFieldDecorator('publishDate', { initialValue: null })
289         this.updateDateDateString =''
290         this.form.getFieldDecorator('updateDate', { initialValue: null })
291         this.createDateDateString =''
292         this.form.getFieldDecorator('createDate', { initialValue: null })
293         this.form.resetFields()
294         this.visible = false
295       }
296     }
297   }
298 </script>