/** 工单后台:列表与处理工作区为页内视图;代客提交与内部备注为原生 dialog。写操作只使用工单 REST 接口,成功后整页跳转刷新。 */ (function () { 'use strict'; var root = document.querySelector('.jio-tickets-admin'); var config = window.JioAdminTickets; if (!root || !config) return; var strings = config.strings; var dialogs = Array.prototype.slice.call(root.querySelectorAll('dialog.jio-ticket-dialog')); var opener = null; // 页面级提示(工作区顶部);弹窗内的表单使用弹窗自己的提示框。 var pageFeedback = Array.prototype.slice.call(root.querySelectorAll('[data-jio-ticket-feedback]')).filter(function (box) { return !box.closest('dialog'); })[0] || null; var feedbackBox = pageFeedback; var detail = root.querySelector('[data-jio-ticket-detail]'); var ticketId = detail ? parseInt(detail.dataset.jioTicketDetail, 10) : 0; var draftKey = 'jio-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-jio-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.jioTicketForm] = changed; }); return result; } function counter(field) { var output = root.querySelector('[data-jio-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-jio-ticket-status]'); if (!select) return; var option = select.options[select.selectedIndex]; var closed = !!option && option.dataset.closed === '1'; var confirm = form.querySelector('[data-jio-ticket-close-confirm]'); form.querySelector('[data-jio-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-jio-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.jioWasDisabled = control.disabled ? '1' : ''; control.disabled = true; } else { control.disabled = control.dataset.jioWasDisabled === '1'; delete control.dataset.jioWasDisabled; } }); } /** 工单已被删除、权限失效或状态冲突时,锁定所有写入口,只留「重新加载」。 */ function lockForms() { root.querySelectorAll('[data-jio-ticket-form] :is(input, select, textarea, button), [data-jio-ticket-assign]').forEach(function (control) { control.disabled = true; }); } function syncLatest() { var conversation = root.querySelector('.jio-ticket-conversation__scroll'); var button = root.querySelector('[data-jio-ticket-latest]'); if (!conversation || !button) return; button.hidden = conversation.scrollHeight - conversation.clientHeight - conversation.scrollTop <= 8; } function showLatest(manual) { var conversation = root.querySelector('.jio-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('jio_ticket_msg', kind); url.hash = ''; try { if (Object.keys(remaining).length) window.sessionStorage.setItem('jio-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.jioTicketForm] || {}; 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-jio-ticket-editor]').forEach(counter); showLatest(false); var notes = root.querySelector('.jio-ticket-detail__notes'); if (notes) notes.scrollTop = notes.scrollHeight; // 结果码只用于本次渲染通知,刷新页面不应重复显示。 var url = new URL(window.location.href); if (url.searchParams.has('jio_ticket_msg')) { url.searchParams.delete('jio_ticket_msg'); window.history.replaceState(window.history.state, '', url.toString()); } } /** 表单所在弹窗的提示框优先,否则用页面级提示框。 */ function feedbackFor(node) { var host = node && node.closest('dialog'); return (host && host.querySelector('[data-jio-ticket-feedback]')) || pageFeedback; } /** 只比较弹窗内表单的改动,弹窗外的回复草稿不影响关闭确认。 */ function dialogDirty(dialog) { var form = dialog.querySelector('[data-jio-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-jio-ticket-form]'); if (form && !stale) { form.reset(); baselines.set(form, values(form)); form.querySelectorAll('[name]').forEach(validateText); form.querySelectorAll('[data-jio-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-jio-ticket-reload]')) { leaving = true; window.location.reload(); return; } var closer = event.target.closest('[data-jio-dialog-close]'); if (closer && closer.closest('dialog')) { closeDialog(closer.closest('dialog')); return; } var open = event.target.closest('[data-jio-dialog-open]'); var target = open && document.getElementById(open.dataset.jioDialogOpen); 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-jio-ticket-assign]'); if (assign) { var statusForm = root.querySelector('[data-jio-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-jio-ticket-latest]')) showLatest(true); }); root.addEventListener('input', function (event) { validateText(event.target); if (event.target.matches('[data-jio-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-jio-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-jio-ticket-status]')) { select.form.querySelector('[data-jio-ticket-close-confirm]').checked = false; syncStatus(select.form); } if (!select.matches('[data-jio-ticket-prereply]') || !select.value) return; var field = document.getElementById(select.dataset.jioTicketPrereply); 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-jio-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.jioTicketForm; 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('.jio-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(); })();