inleft
2022-02-17 4d51af31b49927bf401e432138d584f9ef40ef22
commit | author | age
4d51af 1 <template>
I 2   <a-modal title="新增友情链接" :width="900" :visible="visible" :confirmLoading="confirmLoading" @ok="handleSubmit"
3     @cancel="handleCancel">
4     <a-spin :spinning="confirmLoading">
5       <a-form :form="form">
6         <a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
7           <a-input placeholder="请输入名称" v-decorator="['name', {rules: [{required: true, message: '请输入名称!'}]}]" />
8         </a-form-item>
9         <a-form-item label="url地址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
10           <a-input placeholder="请输入url地址" v-decorator="['url', {rules: [{required: true, message: '请输入url地址!'}]}]" />
11         </a-form-item>
12         <a-form-item label="头像地址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
13           <a-input placeholder="请输入头像地址"
14             v-decorator="['avatar', {rules: [{required: false, message: '请输入头像地址!'}]}]" />
15         </a-form-item>
16         <a-form-item label="描述" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
17           <a-input placeholder="请输入描述" v-decorator="['remark', {rules: [{required: false, message: '请输入描述!'}]}]" />
18         </a-form-item>
19         <a-form-item label="链接类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
20           <a-radio-group placeholder="请选择链接类型"
21             v-decorator="['linkType',{rules: [{ required: true, message: '请选择链接类型!' }]}]">
22             <a-radio v-for="(item,index) in linkTypeData" :key="index" :value="item.code">{{ item.name }}</a-radio>
23           </a-radio-group>
24         </a-form-item>
25         <a-form-item label="权重" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
26           <a-input placeholder="请输入权重" v-decorator="['topValue', {rules: [{required: true, message: '请输入权重!'}]}]" />
27         </a-form-item>
28         <a-form-item label="是否新窗口打开" :labelCol="labelCol" :wrapperCol="wrapperCol">
29           <a-radio-group placeholder="请选择是否新窗口打开"
30             v-decorator="['isNewWindowOpen',{rules: [{ required: true, message: '请选择是否新窗口打开!' }]}]">
31             <a-radio v-for="(item,index) in isNewWindowOpenData" :key="index" :value="item.code">{{ item.name }}
32             </a-radio>
33           </a-radio-group>
34         </a-form-item>
35       </a-form>
36     </a-spin>
37   </a-modal>
38 </template>
39
40 <script>
41   import {
42     blogFriendshipLinkAdd
43   } from '@/api/modular/main/blogfriendshiplink/blogFriendshipLinkManage'
44   export default {
45     data() {
46       return {
47         labelCol: {
48           xs: {
49             span: 24
50           },
51           sm: {
52             span: 5
53           }
54         },
55         wrapperCol: {
56           xs: {
57             span: 24
58           },
59           sm: {
60             span: 15
61           }
62         },
63         linkTypeData: [],
64         isNewWindowOpenData: [],
65         visible: false,
66         confirmLoading: false,
67         form: this.$form.createForm(this)
68       }
69     },
70     methods: {
71       // 初始化方法
72       add(record) {
73         this.visible = true
74         const linkTypeOption = this.$options
75         this.linkTypeData = linkTypeOption.filters['dictData']('blog_link_type')
76         const isNewWindowOpenOption = this.$options
77         this.isNewWindowOpenData = isNewWindowOpenOption.filters['dictData']('blog_yes_or_no')
78       },
79       /**
80        * 提交表单
81        */
82       handleSubmit() {
83         const {
84           form: {
85             validateFields
86           }
87         } = this
88         this.confirmLoading = true
89         validateFields((errors, values) => {
90           if (!errors) {
91             for (const key in values) {
92               if (typeof(values[key]) === 'object' && values[key] != null) {
93                 values[key] = JSON.stringify(values[key])
94               }
95             }
96             blogFriendshipLinkAdd(values).then((res) => {
97               if (res.success) {
98                 this.$message.success('新增成功')
99                 this.confirmLoading = false
100                 this.$emit('ok', values)
101                 this.handleCancel()
102               } else {
103                 this.$message.error('新增失败') // + res.message
104               }
105             }).finally((res) => {
106               this.confirmLoading = false
107             })
108           } else {
109             this.confirmLoading = false
110           }
111         })
112       },
113       handleCancel() {
114         this.form.resetFields()
115         this.visible = false
116       }
117     }
118   }
119 </script>