inleft
2022-02-09 9bcb19959eeb9da9bde2561e7278f6d0a55eb151
commit | author | age
9bcb19 1 <template>
I 2   <a-modal
3     title="应用编辑"
4     :width="500"
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           style="display: none;"
14           :labelCol="labelCol"
15           :wrapperCol="wrapperCol"
16         >
17           <a-input v-decorator="['id']" />
18         </a-form-item>
19         <a-form-item
20           style="display: none;"
21           :labelCol="labelCol"
22           :wrapperCol="wrapperCol"
23         >
24           <a-input v-decorator="['active']" />
25         </a-form-item>
26         <a-form-item
27           label="应用名称"
28           :labelCol="labelCol"
29           :wrapperCol="wrapperCol"
30           has-feedback
31         >
32           <a-input placeholder="请输入应用名称" v-decorator="['name', {rules: [{required: true, message: '请输入应用名称!'}]}]" />
33         </a-form-item>
34         <a-form-item
35           label="唯一编码"
36           :labelCol="labelCol"
37           :wrapperCol="wrapperCol"
38           has-feedback
39         >
40           <a-input placeholder="请输入唯一编码" v-decorator="['code', {rules: [{required: true, message: '请输入唯一编码!'}]}]" />
41         </a-form-item>
42       </a-form>
43     </a-spin>
44   </a-modal>
45 </template>
46 <script>
47   import { sysAppEdit } from '@/api/modular/system/appManage'
48   export default {
49     data () {
50       return {
51         labelCol: {
52           xs: { span: 24 },
53           sm: { span: 5 }
54         },
55         wrapperCol: {
56           xs: { span: 24 },
57           sm: { span: 18 }
58         },
59         visible: false,
60         confirmLoading: false,
61         visibleDef: false,
62         form: this.$form.createForm(this)
63       }
64     },
65     methods: {
66       // 初始化方法
67       edit (record) {
68         this.visible = true
69         setTimeout(() => {
70           this.form.setFieldsValue(
71             {
72               id: record.id,
73               name: record.name,
74               code: record.code,
75               active: record.active
76             }
77           )
78         }, 100)
79       },
80       handleSubmit () {
81         const { form: { validateFields } } = this
82         this.confirmLoading = true
83         validateFields((errors, values) => {
84           if (!errors) {
85             sysAppEdit(values).then((res) => {
86               if (res.success) {
87                 this.$message.success('编辑成功')
88                 this.visible = false
89                 this.confirmLoading = false
90                 this.$emit('ok', values)
91               } else {
92                 this.$message.error('编辑失败:' + res.message)
93               }
94             }).finally((res) => {
95               this.confirmLoading = false
96             })
97           } else {
98             this.confirmLoading = false
99           }
100         })
101       },
102       handleCancel () {
103         this.form.resetFields()
104         this.visible = false
105       }
106     }
107   }
108 </script>