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