inleft
2022-02-15 91dc6cdda0548ff7f6e473a81933fa206d912cef
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
13         <a-form-item
14           style="display: none;"
15           :labelCol="labelCol"
16           :wrapperCol="wrapperCol"
17           has-feedback
18         >
19           <a-input v-decorator="['id']" />
20         </a-form-item>
21
22         <a-form-item
23           label="角色名"
24           :labelCol="labelCol"
25           :wrapperCol="wrapperCol"
26           has-feedback
27         >
28           <a-input placeholder="请输入角色名" v-decorator="['name', {rules: [{required: true, message: '请输入角色名!'}]}]" />
29         </a-form-item>
30
31         <a-form-item
32           label="唯一编码"
33           :labelCol="labelCol"
34           :wrapperCol="wrapperCol"
35           has-feedback
36         >
37           <a-input placeholder="请输入唯一编码" v-decorator="['code', {rules: [{required: true, message: '请输入唯一编码!'}]}]" />
38         </a-form-item>
39
40         <a-form-item
41           :labelCol="labelCol"
42           :wrapperCol="wrapperCol"
43           label="排序"
44           has-feedback
45         >
46           <a-input-number style="width: 100%" placeholder="请输入排序" v-decorator="['sort', { initialValue: 100 }]" :min="1" :max="1000" />
47         </a-form-item>
48
49         <a-form-item
50           label="备注"
51           :labelCol="labelCol"
52           :wrapperCol="wrapperCol"
53           has-feedback
54         >
55           <a-textarea :rows="4" placeholder="请输入备注" v-decorator="['remark']"></a-textarea>
56         </a-form-item>
57
58       </a-form>
59
60     </a-spin>
61   </a-modal>
62 </template>
63
64 <script>
65   import { sysRoleEdit } from '@/api/modular/system/roleManage'
66   export default {
67     data () {
68       return {
69         labelCol: {
70           xs: { span: 24 },
71           sm: { span: 5 }
72         },
73         wrapperCol: {
74           xs: { span: 24 },
75           sm: { span: 18 }
76         },
77         visible: false,
78         confirmLoading: false,
79         form: this.$form.createForm(this)
80       }
81     },
82     methods: {
83       // 初始化方法
84       edit (record) {
85         this.visible = true
86         setTimeout(() => {
87           this.form.setFieldsValue(
88             {
89               id: record.id,
90               name: record.name,
91               code: record.code,
92               sort: record.sort,
93               remark: record.remark
94             }
95           )
96         }, 100)
97       },
98
99       handleSubmit () {
100         const { form: { validateFields } } = this
101         this.confirmLoading = true
102         validateFields((errors, values) => {
103           if (!errors) {
104             sysRoleEdit(values).then((res) => {
105               if (res.success) {
106                 this.$message.success('编辑成功')
107                 this.visible = false
108                 this.confirmLoading = false
109                 this.$emit('ok', values)
110                 this.form.resetFields()
111               } else {
112                 this.$message.error('编辑失败:' + res.message)
113               }
114             }).finally((res) => {
115               this.confirmLoading = false
116             })
117           } else {
118             this.confirmLoading = false
119           }
120         })
121       },
122       handleCancel () {
123         this.form.resetFields()
124         this.visible = false
125       }
126     }
127   }
128 </script>