inleft
2022-03-02 34223b096cf6ad9d92c3702bb9529e764f523b11
commit | author | age
91dc6c 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
13           label="分类名称"
14           :labelCol="labelCol"
15           :wrapperCol="wrapperCol"
16           has-feedback
17         >
18           <a-input placeholder="请输入分类名称" v-decorator="['typeName', {rules: [{required: true, message: '请输入分类名称!'}]}]" />
19         </a-form-item>
20         <a-form-item
21           label="公开类型"
22           :labelCol="labelCol"
23           :wrapperCol="wrapperCol"
24         >
25           <a-radio-group placeholder="请选择公开类型" v-decorator="['openType',{rules: [{ required: true, message: '请选择公开类型!' }]}]" >
26             <a-radio v-for="(item,index) in openTypeData" :key="index" :value="item.code">{{ item.name }}</a-radio>
27           </a-radio-group>
28         </a-form-item>
29         <a-form-item
30           label="置顶值"
31           :labelCol="labelCol"
32           :wrapperCol="wrapperCol"
33           has-feedback
34         >
35           <a-input placeholder="请输入置顶值" v-decorator="['topValue']" />
36         </a-form-item>
37         <a-form-item
38           label="是否启用"
39           :labelCol="labelCol"
40           :wrapperCol="wrapperCol"
41         >
42           <a-radio-group placeholder="请选择是否启用" v-decorator="['isEnable',{rules: [{ required: true, message: '请选择是否启用!' }]}]" >
43             <a-radio v-for="(item,index) in isEnableData" :key="index" :value="item.code">{{ item.name }}</a-radio>
44           </a-radio-group>
45         </a-form-item>
46       </a-form>
47     </a-spin>
48   </a-modal>
49 </template>
50
51 <script>
52   import { blogArticleTypeAdd } from '@/api/modular/main/blogarticletype/blogArticleTypeManage'
53   export default {
54     data () {
55       return {
56         labelCol: {
57           xs: { span: 24 },
58           sm: { span: 5 }
59         },
60         wrapperCol: {
61           xs: { span: 24 },
62           sm: { span: 15 }
63         },
64         openTypeData: [],
65         isEnableData: [],
66         visible: false,
67         confirmLoading: false,
68         form: this.$form.createForm(this)
69       }
70     },
71     methods: {
72       // 初始化方法
73       add (record) {
74         this.visible = true
75         const openTypeOption = this.$options
76         this.openTypeData = openTypeOption.filters['dictData']('blog_auth_status')
77         const isEnableOption = this.$options
78         this.isEnableData = isEnableOption.filters['dictData']('blog_yes_or_no')
79       },
80       /**
81        * 提交表单
82        */
83       handleSubmit () {
84         const { form: { validateFields } } = this
85         this.confirmLoading = true
86         validateFields((errors, values) => {
87           if (!errors) {
88             for (const key in values) {
89               if (typeof (values[key]) === 'object' && values[key] != null) {
90                 values[key] = JSON.stringify(values[key])
91               }
92             }
93             blogArticleTypeAdd(values).then((res) => {
94               if (res.success) {
95                 this.$message.success('新增成功')
96                 this.confirmLoading = false
97                 this.$emit('ok', values)
98                 this.handleCancel()
99               } else {
100                 this.$message.error('新增失败')// + res.message
101               }
102             }).finally((res) => {
103               this.confirmLoading = false
104             })
105           } else {
106             this.confirmLoading = false
107           }
108         })
109       },
110       handleCancel () {
111         this.form.resetFields()
112         this.visible = false
113       }
114     }
115   }
116 </script>