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