wordpress-theme-aksrt/assets/js/admin-tickets.js

/** 工单后台：列表与处理工作区为页内视图；代客提交与内部备注为原生 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();
})();