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 v-show="false">
7           <a-input v-decorator="['id']" />
8         </a-form-item>
9         <a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
10           <a-input placeholder="请输入名称" v-decorator="['name', {rules: [{required: true, message: '请输入名称!'}]}]" />
11         </a-form-item>
12         <a-form-item label="url地址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
13           <a-input placeholder="请输入url地址" v-decorator="['url', {rules: [{required: true, message: '请输入url地址!'}]}]" />
14         </a-form-item>
15         <a-form-item label="头像地址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
16           <a-input placeholder="请输入头像地址" v-decorator="['avatar', {rules: [{required: false, message: '请输入头像地址!'}]}]" />
17         </a-form-item>
18         <a-form-item label="描述" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
19           <a-input placeholder="请输入描述" v-decorator="['remark', {rules: [{required: true, message: '请输入描述!'}]}]" />
20         </a-form-item>
21         <a-form-item label="链接类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
22           <a-radio-group placeholder="请选择链接类型"
23             v-decorator="['linkType',{rules: [{ required: true, message: '请选择链接类型!' }]}]">
24             <a-radio v-for="(item,index) in linkTypeData" :key="index" :value="item.code">{{ item.name }}</a-radio>
25           </a-radio-group>
26         </a-form-item>
27         <a-form-item label="权重" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
28           <a-input placeholder="请输入权重" v-decorator="['topValue', {rules: [{required: true, message: '请输入权重!'}]}]" />
29         </a-form-item>
30         <a-form-item label="是否新窗口打开" :labelCol="labelCol" :wrapperCol="wrapperCol">
31           <a-radio-group placeholder="请选择是否新窗口打开"
32             v-decorator="['isNewWindowOpen',{rules: [{ required: true, message: '请选择是否新窗口打开!' }]}]">
33             <a-radio v-for="(item,index) in isNewWindowOpenData" :key="index" :value="item.code">{{ item.name }}
34             </a-radio>
35           </a-radio-group>
36         </a-form-item>
37         <a-form-item label="是否启用" :labelCol="labelCol" :wrapperCol="wrapperCol">
38           <a-radio-group placeholder="请选择是否启用"
39             v-decorator="['isEnable',{rules: [{ required: true, message: '请选择是否启用!' }]}]">
40             <a-radio v-for="(item,index) in isEnableData" :key="index" :value="item.code">{{ item.name }}</a-radio>
41           </a-radio-group>
42         </a-form-item>
43       </a-form>
44     </a-spin>
45   </a-modal>
46 </template>
47
48 <script>
49   import {
50     blogFriendshipLinkEdit
51   } from '@/api/modular/main/blogfriendshiplink/blogFriendshipLinkManage'
52   export default {
53     data() {
54       return {
55         labelCol: {
56           xs: {
57             span: 24
58           },
59           sm: {
60             span: 5
61           }
62         },
63         wrapperCol: {
64           xs: {
65             span: 24
66           },
67           sm: {
68             span: 15
69           }
70         },
71         linkTypeData: [],
72         isEnableData: [],
73         isNewWindowOpenData: [],
74         visible: false,
75         confirmLoading: false,
76         form: this.$form.createForm(this)
77       }
78     },
79     methods: {
80       // 初始化方法
81       edit(record) {
82         this.visible = true
83         const linkTypeOption = this.$options
84         this.linkTypeData = linkTypeOption.filters['dictData']('blog_link_type')
85         const isNewWindowOpenOption = this.$options
86         this.isNewWindowOpenData = isNewWindowOpenOption.filters['dictData']('blog_yes_or_no')
87         const isEnableOption = this.$options
88         this.isEnableData = isEnableOption.filters['dictData']('blog_yes_or_no')
89         setTimeout(() => {
90           this.form.setFieldsValue({
91             id: record.id,
92             name: record.name,
93             url: record.url,
94             avatar: record.avatar,
95             isEnable: record.isEnable,
96             remark: record.remark,
97             linkType: record.linkType,
98             topValue: record.topValue,
99             isNewWindowOpen: record.isNewWindowOpen
100           })
101         }, 100)
102       },
103       handleSubmit() {
104         const {
105           form: {
106             validateFields
107           }
108         } = this
109         this.confirmLoading = true
110         validateFields((errors, values) => {
111           if (!errors) {
112             for (const key in values) {
113               if (typeof(values[key]) === 'object' && values[key] != null) {
114                 values[key] = JSON.stringify(values[key])
115               }
116             }
117             blogFriendshipLinkEdit(values).then((res) => {
118               if (res.success) {
119                 this.$message.success('编辑成功')
120                 this.confirmLoading = false
121                 this.$emit('ok', values)
122                 this.handleCancel()
123               } else {
124                 this.$message.error('编辑失败') //  + res.message
125               }
126             }).finally((res) => {
127               this.confirmLoading = false
128             })
129           } else {
130             this.confirmLoading = false
131           }
132         })
133       },
134       handleCancel() {
135         this.form.resetFields()
136         this.visible = false
137       }
138     }
139   }
140 </script>