thinkyu/教育訓練系統/Web/Scripts/ApiMixin_Usage_Example.js

/**
 * 使用 ApiMixin 的示例
 * 这个文件展示了如何简化 領據處理.js 中的 API 调用
 */

// 原来的写法（冗长）:
save() {
    // ... 验证代码 ...
    
    axios({
        method: 'post',
        url: `${API_BASE}/Save`,
        headers: {
            'Content-Type': 'application/json; charset=utf-8'
        },
        data: JSON.stringify(data)
    })
        .then(response => {
            const result = response.data.d || response.data;
            if (result.Success) {
                this.ShowSuccess(result.Message);
                // ... 处理成功逻辑 ...
            } else {
                this.ShowError('儲存失敗: ' + result.Message);
            }
        })
        .catch(error => {
            console.error('Save error:', error);
            this.ShowError('儲存發生錯誤: ' + (error.message || '請檢查網路連線'));
        })
        .finally(() => {
            this.loading = false;
        });
}

// ===================================================================

// 使用 ApiMixin 的新写法（简洁）:
async save() {
    if (!this.validate()) {
        return;
    }

    this.loading = true;

    try {
        const data = {
            isNew: this.mode === 'add',
            mainItem: this.mainData,
            laborItem: this.laborData,
            travelItem: this.travelData
        };

        const result = await this.callApiWithErrorMsg('領據處理', 'Save', data, '儲存');
        
        this.ShowSuccess(result.Message);
        // 返回查看模式
        this.mode = 'view';
        // 更新编号和数据
        if (this.mainData.編號 === '' && result.Data) {
            this.mainData.編號 = result.Data;
            this.編號 = result.Data;
        }
        this.backupData();
    } catch (error) {
        console.error('Save error:', error);
    } finally {
        this.loading = false;
    }
}

// ===================================================================

// 其他 API 调用示例:

// 原来的 loadDropdownList:
async loadDropdownList(key) {
    let value = null;
    await axios({
        method: 'post',
        url: `${API_BASE}/GetDropdownLists`,
        headers: {
            'Content-Type': 'application/json; charset=utf-8'
        },
        data: JSON.stringify({ key: key })
    })
        .then(response => {
            const result = response.data.d || response.data;
            if (result.Success) {
                value = result.Data || [];
            } else {
                console.error('取得下拉選單資料失敗:', result.Message);
            }
        })
        .catch(error => {
            console.error('載入下拉選單失敗:', error);
        });
    return value;
}

// 使用 mixin 的新写法:
async loadDropdownList(key) {
    try {
        const result = await this.callApi('領據處理', 'GetDropdownLists', { key });
        return result.Data || [];
    } catch (error) {
        console.error('載入下拉選單失敗:', error);
        return [];
    }
}

// ===================================================================

// searchRecipient 的对比:

// 原来的写法:
searchRecipient() {
    const key = this.mainData.領款人姓名;
    const identity = this.mainData.身分別;

    if (key && key.length > 0) {
        if (!identity) {
            this.ShowWarning('請先選擇身分別');
            this.recipientList = [];
            this.showRecipientDropdown = false;
            return;
        }

        axios({
            method: 'post',
            url: `${API_BASE}/SearchRecipient`,
            headers: {
                'Content-Type': 'application/json; charset=utf-8'
            },
            data: JSON.stringify({ key, identity })
        })
            .then(response => {
                const result = response.data.d || response.data;
                if (result.Success) {
                    this.recipientList = result.Data || [];
                    this.showRecipientDropdown = this.recipientList.length > 0;
                } else {
                    this.recipientList = [];
                    this.showRecipientDropdown = false;
                    this.ShowWarning(result.Message);
                }
            })
            .catch(error => {
                console.error('查詢領款人失敗:', error);
            });
    } else {
        this.recipientList = [];
        this.showRecipientDropdown = false;
    }
}

// 使用 mixin 的新写法:
async searchRecipient() {
    const key = this.mainData.領款人姓名;
    const identity = this.mainData.身分別;

    if (!key || key.length === 0) {
        this.recipientList = [];
        this.showRecipientDropdown = false;
        return;
    }

    if (!identity) {
        this.ShowWarning('請先選擇身分別');
        this.recipientList = [];
        this.showRecipientDropdown = false;
        return;
    }

    try {
        const result = await this.callApi('領據處理', 'SearchRecipient', { key, identity });
        this.recipientList = result.Data || [];
        this.showRecipientDropdown = this.recipientList.length > 0;
    } catch (error) {
        console.error('查詢領款人失敗:', error);
        this.recipientList = [];
        this.showRecipientDropdown = false;
        this.ShowWarning(error.message);
    }
}