vue element 新增、編輯類Dialog公用函數

調用

<el-button type="primary" class="my-button" size="small" :loading="editLoading" @click="submitDialogInfo('edit')">確 定</el-button>

<el-button type="primary" class="my-button" size="small" :loading="addLoading" @click="submitDialogInfo('add')">確 定</el-button>

 

axios

// api
import * as category from 'api/subjectManage/category';

js

// 彈框內容提交
        submitDialogInfo(formName) {
            const that = this;
            const _form = `${formName}Form`;
            const _loading = `${formName}Loading`;
            const _dialog = `${formName}Dialog`;
            that.$refs[_form].validate(function(valid) {
                that[_dialog] = true;
                if (valid) {
                    // data
                    const data = that[_form];
                    // name
                    let match_name = `${formName}Info`;
                    for (let key in category) {
                        if (match_name === key) {
                            // function
                            category[key](data)
                                .then(res => {
                                    that[_loading] = false;
                                    if (res.data && (!res.data.code || res.data.code === 200)) {
                                        // 關閉彈框
                                        that[_dialog] = false;
                                        that.$message.success('數據更新成功');
                                        // 刷新數據
                                        that.getData();
                                    } else {
                                        // 在表單中輸出錯誤提示
                                        let err = res.data.errors;
                                        for (let key in err) {
                                            err[key] = err[key][0];
                                        }
                                        that.formError = err;
                                    }
                                })
                                .catch(err => {
                                    that[_loading] = false; // button loading
                                });
                        }
                    }
                } else {
                    that[_loading] = false;
                    that.$message.error('請檢查輸入');
                }
            });
        }