74 lines
2.4 KiB
JavaScript
74 lines
2.4 KiB
JavaScript
|
// 用户后台编辑 Alpine 组件，负责编辑弹窗提交、状态提示和保存中状态。
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 读取 CSRF 令牌，供用户编辑 AJAX 请求使用。
|
||
|
|
*
|
||
|
|
* @returns {string}
|
||
|
|
*/
|
||
|
|
function getCsrfToken() {
|
||
|
|
return document.querySelector('meta[name="csrf-token"]')?.getAttribute("content") ?? "";
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 注册用户编辑弹窗组件。
|
||
|
|
*
|
||
|
|
* @returns {void}
|
||
|
|
*/
|
||
|
|
function registerUserEditorComponent() {
|
||
|
|
document.addEventListener("alpine:init", () => {
|
||
|
|
window.Alpine.data("userEditor", () => ({
|
||
|
|
showEditModal: false,
|
||
|
|
editingUser: {},
|
||
|
|
editToast: false,
|
||
|
|
editToastOk: true,
|
||
|
|
editToastMsg: "",
|
||
|
|
editSaving: false,
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 提交用户编辑表单，并用弹窗内提示反馈保存结果。
|
||
|
|
*
|
||
|
|
* @param {HTMLFormElement} formEl
|
||
|
|
* @returns {Promise<void>}
|
||
|
|
*/
|
||
|
|
async submitEditUser(formEl) {
|
||
|
|
this.editSaving = true;
|
||
|
|
this.editToast = false;
|
||
|
|
|
||
|
|
const formData = new FormData(formEl);
|
||
|
|
formData.append("_method", "PUT");
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch(this.editingUser.requestUrl, {
|
||
|
|
method: "POST",
|
||
|
|
headers: {
|
||
|
|
Accept: "application/json",
|
||
|
|
"X-CSRF-TOKEN": getCsrfToken(),
|
||
|
|
},
|
||
|
|
body: formData,
|
||
|
|
});
|
||
|
|
const json = await response.json();
|
||
|
|
|
||
|
|
this.editToastOk = json.status === "success";
|
||
|
|
this.editToastMsg = json.message || (json.status === "success" ? "保存成功！" : "保存失败");
|
||
|
|
this.editToast = true;
|
||
|
|
|
||
|
|
if (json.status === "success") {
|
||
|
|
window.setTimeout(() => {
|
||
|
|
this.showEditModal = false;
|
||
|
|
}, 1500);
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
this.editToastOk = false;
|
||
|
|
this.editToastMsg = "网络请求异常，请检查连接后重试。";
|
||
|
|
this.editToast = true;
|
||
|
|
console.error("Edit User Request Failed:", error);
|
||
|
|
} finally {
|
||
|
|
this.editSaving = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}));
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
registerUserEditorComponent();
|