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