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
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 { sysPosEdit } from '@/api/modular/system/posManage'
66
67   export default {
68     data () {
69       return {
70         labelCol: {
71           xs: { span: 24 },
72           sm: { span: 5 }
73         },
74         wrapperCol: {
75           xs: { span: 24 },
76           sm: { span: 18 }
77         },
78         visible: false,
79         confirmLoading: false,
80         form: this.$form.createForm(this)
81       }
82     },
83     methods: {
84       // 初始化方法
85       edit (record) {
86         this.visible = true
87         setTimeout(() => {
88           this.form.setFieldsValue(
89             {
90               id: record.id,
91               name: record.name,
92               code: record.code,
93               sort: record.sort,
94               remark: record.remark
95             }
96           )
97         }, 100)
98       },
99
100       handleSubmit () {
101         const { form: { validateFields } } = this
102         this.confirmLoading = true
103         validateFields((errors, values) => {
104           if (!errors) {
105             sysPosEdit(values).then((res) => {
106               if (res.success) {
107                 this.$message.success('编辑成功')
108                 this.visible = false
109                 this.confirmLoading = false
110                 this.$emit('ok', values)
111                 this.form.resetFields()
112               } else {
113                 this.$message.error('编辑失败:' + res.message)
114               }
115             }).finally((res) => {
116               this.confirmLoading = false
117             })
118           } else {
119             this.confirmLoading = false
120           }
121         })
122       },
123       handleCancel () {
124         this.form.resetFields()
125         this.visible = false
126       }
127     }
128   }
129 </script>