commit | author | age
|
9bcb19
|
1 |
<template> |
91dc6c
|
2 |
<a-modal title="编辑blog文章" :width="900" :visible="visible" :confirmLoading="confirmLoading" @ok="handleSubmit" |
I |
3 |
@cancel="handleCancel"> |
9bcb19
|
4 |
<a-spin :spinning="confirmLoading"> |
I |
5 |
<a-form :form="form"> |
91dc6c
|
6 |
<a-form-item v-show="false"> |
I |
7 |
<a-input v-decorator="['id']" /> |
|
8 |
</a-form-item> |
|
9 |
<a-form-item label="文章标题" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> |
9bcb19
|
10 |
<a-input placeholder="请输入文章标题" v-decorator="['title', {rules: [{required: true, message: '请输入文章标题!'}]}]" /> |
I |
11 |
</a-form-item> |
91dc6c
|
12 |
<a-form-item label="文章文件id" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> |
I |
13 |
<a-input placeholder="请输入文章文件id" |
|
14 |
v-decorator="['articleFileId', {rules: [{required: true, message: '请输入文章文件id!'}]}]" /> |
9bcb19
|
15 |
</a-form-item> |
91dc6c
|
16 |
<a-form-item label="文件类型" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
I |
17 |
<a-radio-group placeholder="请选择文件类型" v-decorator="['articleFileType']"> |
|
18 |
<a-radio v-for="(item,index) in articleFileTypeData" :key="index" :value="item.code">{{ item.name }} |
|
19 |
</a-radio> |
f1b087
|
20 |
</a-radio-group> |
9bcb19
|
21 |
</a-form-item> |
91dc6c
|
22 |
<a-form-item label="文章分类" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> |
I |
23 |
<a-input placeholder="请输入文章分类" |
|
24 |
v-decorator="['articleTypeId', {rules: [{required: true, message: '请输入文章分类!'}]}]" /> |
9bcb19
|
25 |
</a-form-item> |
91dc6c
|
26 |
<a-form-item label="文章引言" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> |
I |
27 |
<a-textarea placeholder="请输入文章引言" v-decorator="['introduce']" :auto-size="{ minRows: 3, maxRows: 6 }" /> |
9bcb19
|
28 |
</a-form-item> |
91dc6c
|
29 |
<a-form-item label="封面文件" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> |
f1b087
|
30 |
<a-input placeholder="请输入封面文件" v-decorator="['coverFileId']" /> |
9bcb19
|
31 |
</a-form-item> |
91dc6c
|
32 |
<a-form-item label="是否置顶" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
I |
33 |
<a-select style="width: 100%" placeholder="请选择是否置顶" |
|
34 |
v-decorator="['isTop', {rules: [{ required: true, message: '请选择是否置顶!' }]}]"> |
|
35 |
<a-select-option v-for="(item,index) in isTopData" :key="index" :value="item.code">{{ item.name }} |
|
36 |
</a-select-option> |
f1b087
|
37 |
</a-select> |
I |
38 |
</a-form-item> |
91dc6c
|
39 |
<a-form-item label="置顶值" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> |
f1b087
|
40 |
<a-input placeholder="请输入置顶值" v-decorator="['topValue']" /> |
9bcb19
|
41 |
</a-form-item> |
91dc6c
|
42 |
<a-form-item label="公开状态" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
I |
43 |
<a-radio-group placeholder="请选择公开状态" v-decorator="['authStatus']"> |
f1b087
|
44 |
<a-radio v-for="(item,index) in authStatusData" :key="index" :value="item.code">{{ item.name }}</a-radio> |
I |
45 |
</a-radio-group> |
|
46 |
</a-form-item> |
91dc6c
|
47 |
<a-form-item label="授权密码" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> |
f1b087
|
48 |
<a-input placeholder="请输入授权密码" v-decorator="['authPassword']" /> |
9bcb19
|
49 |
</a-form-item> |
91dc6c
|
50 |
<a-form-item label="编辑状态" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
I |
51 |
<a-radio-group placeholder="请选择编辑状态" v-decorator="['editorStatus']"> |
f1b087
|
52 |
<a-radio v-for="(item,index) in editorStatusData" :key="index" :value="item.code">{{ item.name }}</a-radio> |
I |
53 |
</a-radio-group> |
|
54 |
</a-form-item> |
91dc6c
|
55 |
<a-form-item label="是否启用" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> |
f1b087
|
56 |
<a-input placeholder="请输入是否启用" v-decorator="['isEnable']" /> |
9bcb19
|
57 |
</a-form-item> |
I |
58 |
</a-form> |
|
59 |
</a-spin> |
|
60 |
</a-modal> |
|
61 |
</template> |
|
62 |
|
|
63 |
<script> |
91dc6c
|
64 |
import { |
I |
65 |
blogArticleEdit |
|
66 |
} from '@/api/modular/main/blogarticle/blogArticleManage' |
9bcb19
|
67 |
export default { |
91dc6c
|
68 |
data() { |
9bcb19
|
69 |
return { |
I |
70 |
labelCol: { |
91dc6c
|
71 |
xs: { |
I |
72 |
span: 24 |
|
73 |
}, |
|
74 |
sm: { |
|
75 |
span: 5 |
|
76 |
} |
9bcb19
|
77 |
}, |
I |
78 |
wrapperCol: { |
91dc6c
|
79 |
xs: { |
I |
80 |
span: 24 |
|
81 |
}, |
|
82 |
sm: { |
|
83 |
span: 15 |
|
84 |
} |
9bcb19
|
85 |
}, |
f1b087
|
86 |
articleFileTypeData: [], |
I |
87 |
isTopData: [], |
|
88 |
authStatusData: [], |
|
89 |
editorStatusData: [], |
9bcb19
|
90 |
visible: false, |
I |
91 |
confirmLoading: false, |
|
92 |
form: this.$form.createForm(this) |
|
93 |
} |
|
94 |
}, |
|
95 |
methods: { |
|
96 |
// 初始化方法 |
91dc6c
|
97 |
edit(record) { |
9bcb19
|
98 |
this.visible = true |
f1b087
|
99 |
const articleFileTypeOption = this.$options |
I |
100 |
this.articleFileTypeData = articleFileTypeOption.filters['dictData']('blog_file_type') |
|
101 |
const isTopOption = this.$options |
|
102 |
this.isTopData = isTopOption.filters['dictData']('blog_yes_or_no') |
|
103 |
const authStatusOption = this.$options |
|
104 |
this.authStatusData = authStatusOption.filters['dictData']('blog_auth_status') |
|
105 |
const editorStatusOption = this.$options |
|
106 |
this.editorStatusData = editorStatusOption.filters['dictData']('blog_editor_status') |
91dc6c
|
107 |
|
I |
108 |
this.form.getFieldDecorator('articleFileType', { |
|
109 |
valuePropName: 'checked', |
|
110 |
initialValue: record.articleFileType.toString() |
|
111 |
}) |
|
112 |
this.form.getFieldDecorator('authStatus', { |
|
113 |
valuePropName: 'checked', |
|
114 |
initialValue: record.authStatus.toString() |
|
115 |
}) |
|
116 |
this.form.getFieldDecorator('editorStatus', { |
|
117 |
valuePropName: 'checked', |
|
118 |
initialValue: record.editorStatus.toString() |
|
119 |
}) |
|
120 |
|
9bcb19
|
121 |
setTimeout(() => { |
91dc6c
|
122 |
this.form.setFieldsValue({ |
I |
123 |
id: record.id, |
|
124 |
title: record.title, |
|
125 |
articleFileId: record.articleFileId, |
|
126 |
// articleFileType: record.articleFileType, |
|
127 |
articleTypeId: record.articleTypeId, |
|
128 |
introduce: record.introduce, |
|
129 |
coverFileId: record.coverFileId, |
|
130 |
isTop: record.isTop, |
|
131 |
topValue: record.topValue, |
|
132 |
// authStatus: record.authStatus, |
|
133 |
authPassword: record.authPassword, |
|
134 |
// editorStatus: record.editorStatus, |
|
135 |
isEnable: record.isEnable |
|
136 |
}) |
|
137 |
|
|
138 |
|
9bcb19
|
139 |
}, 100) |
I |
140 |
}, |
91dc6c
|
141 |
handleSubmit() { |
I |
142 |
const { |
|
143 |
form: { |
|
144 |
validateFields |
|
145 |
} |
|
146 |
} = this |
9bcb19
|
147 |
this.confirmLoading = true |
I |
148 |
validateFields((errors, values) => { |
|
149 |
if (!errors) { |
|
150 |
for (const key in values) { |
91dc6c
|
151 |
if (typeof(values[key]) === 'object' && values[key] != null) { |
9bcb19
|
152 |
values[key] = JSON.stringify(values[key]) |
I |
153 |
} |
|
154 |
} |
|
155 |
blogArticleEdit(values).then((res) => { |
|
156 |
if (res.success) { |
|
157 |
this.$message.success('编辑成功') |
|
158 |
this.confirmLoading = false |
|
159 |
this.$emit('ok', values) |
|
160 |
this.handleCancel() |
|
161 |
} else { |
91dc6c
|
162 |
this.$message.error('编辑失败') // + res.message |
9bcb19
|
163 |
} |
I |
164 |
}).finally((res) => { |
|
165 |
this.confirmLoading = false |
|
166 |
}) |
|
167 |
} else { |
|
168 |
this.confirmLoading = false |
|
169 |
} |
|
170 |
}) |
|
171 |
}, |
91dc6c
|
172 |
handleCancel() { |
9bcb19
|
173 |
this.form.resetFields() |
I |
174 |
this.visible = false |
|
175 |
} |
|
176 |
} |
|
177 |
} |
|
178 |
</script> |