kate522andClaude Fable 5
b9000e1b93
Put the reply composer at the bottom of the conversation card so the timeline and composer form one viewport-height panel; the send button is visible on load and Ctrl/Cmd+Enter submits. Internal notes now open in a dialog instead of expanding inline, so the sidebar no longer grows. Remove the shared ticket_composer helper and the inline note expansion CSS; both dialogs share ticket_dialog_head. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
351 lines
14 KiB
JavaScript
351 lines
14 KiB
JavaScript
/** 工单后台：列表与处理工作区为页内视图；代客提交与内部备注为原生 dialog。写操作只使用工单 REST 接口，成功后整页跳转刷新。 */
|
|
(function () {
|
|
'use strict';
|
|
|
|
var root = document.querySelector('.aksrt-tickets-admin');
|
|
var config = window.AKSRTAdminTickets;
|
|
if (!root || !config) return;
|
|
|
|
var strings = config.strings;
|
|
var dialogs = Array.prototype.slice.call(root.querySelectorAll('dialog.aksrt-ticket-dialog'));
|
|
var opener = null;
|
|
// 页面级提示（工作区顶部）；弹窗内的表单使用弹窗自己的提示框。
|
|
var pageFeedback = Array.prototype.slice.call(root.querySelectorAll('[data-aksrt-ticket-feedback]')).filter(function (box) {
|
|
return !box.closest('dialog');
|
|
})[0] || null;
|
|
var feedbackBox = pageFeedback;
|
|
var detail = root.querySelector('[data-aksrt-ticket-detail]');
|
|
var ticketId = detail ? parseInt(detail.dataset.aksrtTicketDetail, 10) : 0;
|
|
var draftKey = 'aksrt-ticket-drafts-' + ticketId;
|
|
var baselines = new WeakMap();
|
|
var saving = false;
|
|
var stale = false;
|
|
var leaving = false;
|
|
|
|
function values(form) {
|
|
var result = {};
|
|
form.querySelectorAll('input[name], select[name], textarea[name]').forEach(function (field) {
|
|
result[field.name] = field.value;
|
|
});
|
|
return result;
|
|
}
|
|
|
|
function forms() {
|
|
return Array.prototype.slice.call(root.querySelectorAll('[data-aksrt-ticket-form]'));
|
|
}
|
|
|
|
/** 各表单相对初始值的改动；except 为正在提交的表单。 */
|
|
function drafts(except) {
|
|
var result = {};
|
|
forms().forEach(function (form) {
|
|
if (form === except) return;
|
|
var base = baselines.get(form) || {};
|
|
var current = values(form);
|
|
var changed = {};
|
|
Object.keys(current).forEach(function (key) {
|
|
if (current[key] !== base[key]) changed[key] = current[key];
|
|
});
|
|
if (Object.keys(changed).length) result[form.dataset.aksrtTicketForm] = changed;
|
|
});
|
|
return result;
|
|
}
|
|
|
|
function counter(field) {
|
|
var output = root.querySelector('[data-aksrt-ticket-counter="' + field.id + '"]');
|
|
if (!output) return;
|
|
output.textContent = field.value.length + ' / ' + field.maxLength;
|
|
output.classList.toggle('is-over', field.value.length >= field.maxLength);
|
|
}
|
|
|
|
function validateText(field) {
|
|
if (field.required && (field.tagName === 'TEXTAREA' || field.type === 'text')) {
|
|
field.setCustomValidity(field.value.trim() ? '' : strings.required);
|
|
}
|
|
}
|
|
|
|
function syncStatus(form) {
|
|
var select = form.querySelector('[data-aksrt-ticket-status]');
|
|
if (!select) return;
|
|
var option = select.options[select.selectedIndex];
|
|
var closed = !!option && option.dataset.closed === '1';
|
|
var confirm = form.querySelector('[data-aksrt-ticket-close-confirm]');
|
|
form.querySelector('[data-aksrt-ticket-close-warning]').hidden = !closed;
|
|
confirm.required = closed;
|
|
if (!closed) confirm.checked = false;
|
|
}
|
|
|
|
function feedback(message, error, reload) {
|
|
if (!feedbackBox) return;
|
|
feedbackBox.hidden = !message;
|
|
feedbackBox.classList.toggle('is-error', !!error);
|
|
feedbackBox.querySelector('p').textContent = message || '';
|
|
feedbackBox.querySelector('[data-aksrt-ticket-reload]').hidden = !reload;
|
|
}
|
|
|
|
function busy(form, value) {
|
|
saving = value;
|
|
form.setAttribute('aria-busy', String(value));
|
|
form.querySelectorAll('input, select, textarea, button').forEach(function (control) {
|
|
if (value) {
|
|
control.dataset.aksrtWasDisabled = control.disabled ? '1' : '';
|
|
control.disabled = true;
|
|
} else {
|
|
control.disabled = control.dataset.aksrtWasDisabled === '1';
|
|
delete control.dataset.aksrtWasDisabled;
|
|
}
|
|
});
|
|
}
|
|
|
|
/** 工单已被删除、权限失效或状态冲突时，锁定所有写入口，只留「重新加载」。 */
|
|
function lockForms() {
|
|
root.querySelectorAll('[data-aksrt-ticket-form] :is(input, select, textarea, button), [data-aksrt-ticket-assign]').forEach(function (control) {
|
|
control.disabled = true;
|
|
});
|
|
}
|
|
|
|
function syncLatest() {
|
|
var conversation = root.querySelector('.aksrt-ticket-conversation__scroll');
|
|
var button = root.querySelector('[data-aksrt-ticket-latest]');
|
|
if (!conversation || !button) return;
|
|
button.hidden = conversation.scrollHeight - conversation.clientHeight - conversation.scrollTop <= 8;
|
|
}
|
|
|
|
function showLatest(manual) {
|
|
var conversation = root.querySelector('.aksrt-ticket-conversation__scroll');
|
|
if (!conversation) return;
|
|
conversation.scrollTop = conversation.scrollHeight;
|
|
if (manual) conversation.focus({ preventScroll: true });
|
|
syncLatest();
|
|
}
|
|
|
|
async function request(url, body, signal) {
|
|
var response = await fetch(url, {
|
|
method: 'POST',
|
|
credentials: 'same-origin',
|
|
headers: { 'Content-Type': 'application/json', 'X-WP-Nonce': config.restNonce },
|
|
body: body,
|
|
signal: signal,
|
|
});
|
|
var result = await response.json();
|
|
if (!response.ok || !result || result.success !== true) {
|
|
var error = new Error(result && (result.message || (result.data && result.data.message)) || strings.saveFailed);
|
|
error.confirmed = !!result && (result.success === false || typeof result.code === 'string');
|
|
error.status = response.status;
|
|
throw error;
|
|
}
|
|
return result.data;
|
|
}
|
|
|
|
/** 成功后跳回工作区并带结果码；未提交的其它表单草稿暂存到 sessionStorage，加载后恢复。 */
|
|
function go(id, kind, remaining) {
|
|
var url = new URL(window.location.href);
|
|
url.searchParams.set('id', String(id));
|
|
url.searchParams.set('aksrt_ticket_msg', kind);
|
|
url.hash = '';
|
|
try {
|
|
if (Object.keys(remaining).length) window.sessionStorage.setItem('aksrt-ticket-drafts-' + id, JSON.stringify(remaining));
|
|
} catch (e) { /* 存储不可用时放弃草稿恢复 */ }
|
|
leaving = true;
|
|
window.location.assign(url.toString());
|
|
}
|
|
|
|
function restoreDrafts() {
|
|
var saved = {};
|
|
try {
|
|
saved = JSON.parse(window.sessionStorage.getItem(draftKey) || '{}') || {};
|
|
window.sessionStorage.removeItem(draftKey);
|
|
} catch (e) { saved = {}; }
|
|
return saved;
|
|
}
|
|
|
|
function setup() {
|
|
var restore = ticketId ? restoreDrafts() : {};
|
|
forms().forEach(function (form) {
|
|
baselines.set(form, values(form));
|
|
var changes = restore[form.dataset.aksrtTicketForm] || {};
|
|
form.querySelectorAll('[name]').forEach(function (field) {
|
|
if (Object.prototype.hasOwnProperty.call(changes, field.name)) field.value = changes[field.name];
|
|
validateText(field);
|
|
});
|
|
syncStatus(form);
|
|
});
|
|
root.querySelectorAll('[data-aksrt-ticket-editor]').forEach(counter);
|
|
showLatest(false);
|
|
var notes = root.querySelector('.aksrt-ticket-detail__notes');
|
|
if (notes) notes.scrollTop = notes.scrollHeight;
|
|
// 结果码只用于本次渲染通知，刷新页面不应重复显示。
|
|
var url = new URL(window.location.href);
|
|
if (url.searchParams.has('aksrt_ticket_msg')) {
|
|
url.searchParams.delete('aksrt_ticket_msg');
|
|
window.history.replaceState(window.history.state, '', url.toString());
|
|
}
|
|
}
|
|
|
|
/** 表单所在弹窗的提示框优先，否则用页面级提示框。 */
|
|
function feedbackFor(node) {
|
|
var host = node && node.closest('dialog');
|
|
return (host && host.querySelector('[data-aksrt-ticket-feedback]')) || pageFeedback;
|
|
}
|
|
|
|
/** 只比较弹窗内表单的改动，弹窗外的回复草稿不影响关闭确认。 */
|
|
function dialogDirty(dialog) {
|
|
var form = dialog.querySelector('[data-aksrt-ticket-form]');
|
|
if (!form) return false;
|
|
var base = baselines.get(form) || {};
|
|
var current = values(form);
|
|
return Object.keys(current).some(function (key) { return current[key] !== base[key]; });
|
|
}
|
|
|
|
/** 关闭弹窗：保存中不可关；有未保存输入时先确认。不响应遮罩点击，避免误关丢失输入。 */
|
|
function closeDialog(dialog) {
|
|
if (saving || !dialog.open) return;
|
|
if (!stale && dialogDirty(dialog) && !window.confirm(strings.discard)) return;
|
|
dialog.close();
|
|
}
|
|
|
|
dialogs.forEach(function (dialog) {
|
|
dialog.addEventListener('cancel', function (event) {
|
|
event.preventDefault();
|
|
closeDialog(dialog);
|
|
});
|
|
dialog.addEventListener('close', function () {
|
|
var form = dialog.querySelector('[data-aksrt-ticket-form]');
|
|
if (form && !stale) {
|
|
form.reset();
|
|
baselines.set(form, values(form));
|
|
form.querySelectorAll('[name]').forEach(validateText);
|
|
form.querySelectorAll('[data-aksrt-ticket-editor]').forEach(counter);
|
|
feedbackBox = feedbackFor(dialog);
|
|
feedback('', false, false);
|
|
}
|
|
feedbackBox = pageFeedback;
|
|
if (opener && opener.isConnected) opener.focus();
|
|
opener = null;
|
|
});
|
|
});
|
|
|
|
root.addEventListener('click', function (event) {
|
|
if (event.target.closest('[data-aksrt-ticket-reload]')) {
|
|
leaving = true;
|
|
window.location.reload();
|
|
return;
|
|
}
|
|
var closer = event.target.closest('[data-aksrt-dialog-close]');
|
|
if (closer && closer.closest('dialog')) {
|
|
closeDialog(closer.closest('dialog'));
|
|
return;
|
|
}
|
|
var open = event.target.closest('[data-aksrt-dialog-open]');
|
|
var target = open && document.getElementById(open.dataset.aksrtDialogOpen);
|
|
if (target && dialogs.indexOf(target) !== -1) {
|
|
if (saving) return;
|
|
opener = open;
|
|
feedbackBox = feedbackFor(target);
|
|
// 结果未确认时保留「重新加载」提示，重新打开也不能再提交。
|
|
if (!stale) feedback('', false, false);
|
|
target.showModal();
|
|
var focus = target.querySelector('[autofocus]') || target.querySelector('h2');
|
|
if (focus) focus.focus();
|
|
return;
|
|
}
|
|
if (saving || stale) return;
|
|
var assign = event.target.closest('[data-aksrt-ticket-assign]');
|
|
if (assign) {
|
|
var statusForm = root.querySelector('[data-aksrt-ticket-form="status"]');
|
|
if (!statusForm) return;
|
|
statusForm.querySelector('[name="admin_id"]').value = String(config.currentUser);
|
|
var statusSelect = statusForm.querySelector('[name="status"]');
|
|
if (statusSelect.value === 'pending') statusSelect.value = 'handling';
|
|
syncStatus(statusForm);
|
|
statusForm.querySelector('[type="submit"]').focus();
|
|
return;
|
|
}
|
|
if (event.target.closest('[data-aksrt-ticket-latest]')) showLatest(true);
|
|
});
|
|
|
|
root.addEventListener('input', function (event) {
|
|
validateText(event.target);
|
|
if (event.target.matches('[data-aksrt-ticket-editor]')) counter(event.target);
|
|
});
|
|
|
|
// 回复框 Ctrl/⌘ + Enter 直接发送；输入法组字中不触发。
|
|
root.addEventListener('keydown', function (event) {
|
|
if (event.key !== 'Enter' || !(event.ctrlKey || event.metaKey) || event.isComposing) return;
|
|
if (!event.target.matches('[data-aksrt-ticket-send-shortcut]')) return;
|
|
var form = event.target.form;
|
|
if (!form) return;
|
|
event.preventDefault();
|
|
// 走 submit 事件，保证与点击「发送回复」经过同一套校验与防重。
|
|
if (typeof form.requestSubmit === 'function') form.requestSubmit();
|
|
else form.querySelector('[type="submit"]').click();
|
|
});
|
|
|
|
root.addEventListener('change', function (event) {
|
|
var select = event.target;
|
|
if (select.matches('[data-aksrt-ticket-status]')) {
|
|
select.form.querySelector('[data-aksrt-ticket-close-confirm]').checked = false;
|
|
syncStatus(select.form);
|
|
}
|
|
if (!select.matches('[data-aksrt-ticket-prereply]') || !select.value) return;
|
|
var field = document.getElementById(select.dataset.aksrtTicketPrereply);
|
|
if (!field) return;
|
|
var start = field.selectionStart || 0;
|
|
var end = field.selectionEnd || 0;
|
|
var before = field.value.slice(0, start);
|
|
var insert = (before && !/\n$/.test(before) ? '\n' : '') + select.value;
|
|
var next = before + insert + field.value.slice(end);
|
|
if (next.length > field.maxLength) {
|
|
feedbackBox = feedbackFor(field);
|
|
feedback(strings.tooLong, true, false);
|
|
} else {
|
|
field.value = next;
|
|
field.focus();
|
|
field.setSelectionRange(start + insert.length, start + insert.length);
|
|
validateText(field);
|
|
counter(field);
|
|
}
|
|
select.value = '';
|
|
});
|
|
|
|
root.addEventListener('submit', async function (event) {
|
|
var form = event.target.closest('[data-aksrt-ticket-form]');
|
|
if (!form) return;
|
|
event.preventDefault();
|
|
if (saving || stale) return;
|
|
form.querySelectorAll('input, textarea').forEach(validateText);
|
|
if (!form.reportValidity()) return;
|
|
var kind = form.dataset.aksrtTicketForm;
|
|
var body = JSON.stringify(values(form));
|
|
var remaining = drafts(form);
|
|
var controller = new AbortController();
|
|
var timer = setTimeout(function () { controller.abort(); }, 30000);
|
|
feedbackBox = feedbackFor(form);
|
|
busy(form, true);
|
|
feedback(strings.saving, false, false);
|
|
try {
|
|
var data = await request(form.action, body, controller.signal);
|
|
baselines.set(form, values(form));
|
|
go(kind === 'create' ? data.id : ticketId, kind === 'create' ? 'created' : kind, remaining);
|
|
} catch (error) {
|
|
busy(form, false);
|
|
// 结果未确认或工单已不可写：只能重新加载核对，不允许原样再提交。
|
|
stale = !error.confirmed || [401, 403, 404, 409].indexOf(error.status) !== -1;
|
|
feedback(error.confirmed ? error.message : strings.uncertain, true, stale);
|
|
if (stale) lockForms();
|
|
} finally {
|
|
clearTimeout(timer);
|
|
}
|
|
});
|
|
|
|
var conversation = root.querySelector('.aksrt-ticket-conversation__scroll');
|
|
if (conversation) conversation.addEventListener('scroll', syncLatest);
|
|
|
|
window.addEventListener('beforeunload', function (event) {
|
|
if (leaving || (!saving && !Object.keys(drafts()).length)) return;
|
|
event.preventDefault();
|
|
event.returnValue = '';
|
|
});
|
|
|
|
setup();
|
|
})();
|