cmautobuy/admin/static/js/app.js

/* Admin 的全部 JavaScript。
 *
 * 原生 JS，没有框架、没有构建步骤——见 admin/AGENTS.md 前端约束。
 * 只做轻量界面交互：全选、操作前确认、按钮禁用和弹窗。
 * 搜索、删除、导入本身都是普通表单 POST，服务端渲染，不需要 JS。
 *
 * 不要往这里加业务逻辑。业务逻辑在服务端。
 */
(function () {
  "use strict";

  /* ── 全选 / 反选 ──────────────────────────────
     表头的勾选框控制本表格所有行的勾选框。 */
  function setupCheckAll(root) {
    var master = root.querySelector("[data-check-all]");
    if (!master) return;

    var table = master.closest("table");
    if (!table) return;

    function rowBoxes() {
      return table.querySelectorAll("tbody input[type=checkbox]");
    }

    master.addEventListener("change", function () {
      rowBoxes().forEach(function (box) {
        box.checked = master.checked;
      });
      syncButtons();
    });

    table.addEventListener("change", function (e) {
      if (e.target.type !== "checkbox" || e.target === master) return;
      var boxes = Array.prototype.slice.call(rowBoxes());
      master.checked = boxes.length > 0 && boxes.every(function (b) {
        return b.checked;
      });
      syncButtons();
    });
  }

  /* ── 选中数量 ────────────────────────────── */
  function checkedCount() {
    return document.querySelectorAll(
      "tbody input[type=checkbox]:checked"
    ).length;
  }

  /* ── 需要勾选才能点的按钮 ──────────────────
     标了 data-need-checked 的按钮，没勾选任何行时禁用。 */
  function syncButtons() {
    var n = checkedCount();
    document.querySelectorAll("[data-need-checked]").forEach(function (btn) {
      btn.disabled = n === 0;
    });
  }

  /* ── 删除前二次确认 ────────────────────────
     标了 data-confirm-delete 的元素，提交前必须确认，
     并明确告诉用户会删掉几条、能不能恢复。

     标在表单上就拦 submit，标在按钮上就拦 click——
     一个表单配多个提交按钮时（PDD 页就是），只有删除那个要确认。

     属性值可以写自定义文案，里面的 {n} 会替换成勾选条数；
     不写就用默认那句。 */
  var DEFAULT_CONFIRM = "将删除 {n} 条记录，不可恢复。确定继续？";

  function setupConfirmDelete() {
    document.querySelectorAll("[data-confirm-delete]").forEach(function (el) {
      var isForm = el.tagName === "FORM";
      el.addEventListener(isForm ? "submit" : "click", function (e) {
        var n = checkedCount();
        if (n === 0) {
          e.preventDefault();
          return;
        }
        var text = el.getAttribute("data-confirm-delete") || DEFAULT_CONFIRM;
        if (!window.confirm(text.replace("{n}", n) + "\n\n确定继续？")) {
          e.preventDefault();
        }
      });
    });
  }

  /* ── 普通敏感操作的二次确认 ───────────────
     账号启停和密码重置不是删除，但同样会撤销登录。服务端仍负责权限和事务，
     这里仅降低误操作概率。 */
  function setupConfirmSubmit() {
    document.querySelectorAll("form[data-confirm-submit]").forEach(function (form) {
      form.addEventListener("submit", function (e) {
        if (!window.confirm(form.getAttribute("data-confirm-submit"))) {
          e.preventDefault();
        }
      });
    });
  }

  /* 用户列表共用一个重置密码弹窗。按钮只把用户编号和显示名放进表单，
     不在前端处理权限、密码或 Session。 */
  function setupUserResetModal() {
    var modal = document.getElementById("reset-password-modal");
    if (!modal) return;
    var idInput = modal.querySelector("[data-reset-user-id-input]");
    var nameLabel = modal.querySelector("[data-reset-username-label]");
    document.querySelectorAll("[data-reset-user-id]").forEach(function (button) {
      button.addEventListener("click", function () {
        idInput.value = button.getAttribute("data-reset-user-id") || "";
        nameLabel.textContent = button.getAttribute("data-reset-username") || "";
      });
    });
  }

  /* 客户端列表共用绑定/转交弹窗。这里只回填行数据，权限和写入由服务端处理。 */
  function setupClientAssignmentModal() {
    var modal = document.getElementById("assign-client-modal");
    if (!modal) return;
    var idInput = modal.querySelector("[data-assign-client-id-input]");
    var nameLabel = modal.querySelector("[data-assign-client-label]");
    var select = modal.querySelector("select[name=user_id]");
    var title = modal.querySelector("#assign-client-title");
    var note = modal.querySelector("[data-assignment-note]");
    document.querySelectorAll("[data-assign-client-id]").forEach(function (button) {
      button.addEventListener("click", function () {
        var currentName = button.getAttribute("data-assign-username") || "";
        idInput.value = button.getAttribute("data-assign-client-id") || "";
        nameLabel.textContent = button.getAttribute("data-assign-client-name") || "";
        if (select) select.value = button.getAttribute("data-assign-user-id") || "";
        title.textContent = currentName ? "转交客户端" : "绑定客户端";
        note.textContent = currentName
          ? "当前负责人是“" + currentName + "”。保存后新负责人立即生效；既有任务不变。"
          : "绑定只改变负责人和网页可见范围，不影响 Client 接口或既有任务。";
      });
    });
  }

  /* ── 弹窗 ──────────────────────────────────
     弹窗**内容由服务端渲染**，这里只负责显示、隐藏和把内容取回来。
     不要在这里拼业务数据——价格格式、规格顺序都是业务规则，
     散到前端就没人维护得住了。 */

  function openModal(modal) {
    modal._returnFocus = document.activeElement;
    modal.hidden = false;
    var focusable = modal.querySelector("[autofocus]") ||
      modal.querySelector("input, button");
    if (focusable) focusable.focus();
  }

  function closeModal(modal) {
    modal.hidden = true;
    if (modal._returnFocus && modal._returnFocus.focus) {
      modal._returnFocus.focus();
    }
  }

  function setupModals() {
    /* 打开：按钮上写 data-modal-open="弹窗的 id" */
    document.querySelectorAll("[data-modal-open]").forEach(function (btn) {
      btn.addEventListener("click", function () {
        var modal = document.getElementById(btn.getAttribute("data-modal-open"));
        if (modal) openModal(modal);
      });
    });

    document.querySelectorAll(".modal-backdrop").forEach(function (modal) {
      /* 关闭：叉、取消按钮，以及真正点弹窗外面的灰底。

         不能只看 click 的 target：从输入框按下拖选到灰底松开时，浏览器会把
         合成的 click 目标设成灰底。只有手势也从灰底开始，才算有意关闭。 */
      var pointerStartedOnBackdrop = false;
      modal.addEventListener("pointerdown", function (e) {
        pointerStartedOnBackdrop = e.target === modal;
      });
      modal.addEventListener("pointercancel", function () {
        pointerStartedOnBackdrop = false;
      });
      modal.addEventListener("click", function (e) {
        var clickedCloseButton = e.target.closest("[data-modal-close]");
        var clickedBackdrop = e.target === modal && pointerStartedOnBackdrop;
        pointerStartedOnBackdrop = false;
        if (clickedBackdrop || clickedCloseButton) {
          closeModal(modal);
        }
      });
    });

    /* Esc 关掉最上面那个打开着的弹窗 */
    document.addEventListener("keydown", function (e) {
      if (e.key !== "Escape") return;
      var open = document.querySelectorAll(".modal-backdrop:not([hidden])");
      if (open.length > 0) closeModal(open[open.length - 1]);
    });
  }

  /* ── 双击行打开详情弹窗 ────────────────────
     行上写 data-detail-id，双击时去 /<模块>/detail?id=… 取回
     已经渲染好的 HTML 片段，塞进壳子里显示。 */
  function setupRowDetail() {
    var modal = document.getElementById("detail-modal");
    if (!modal) return;

    var slot = modal.querySelector("[data-detail-slot]");
    var base = modal.getAttribute("data-detail-url") || "";

    document.querySelectorAll("tr[data-detail-id]").forEach(function (row) {
      row.addEventListener("dblclick", function (e) {
        /* 双击到勾选框或链接上时不要弹窗，那是另一个动作 */
        if (e.target.closest("input, a, button")) return;

        slot.innerHTML = "<div class='modal-body'>正在加载…</div>";
        openModal(modal);

        fetch(base + "?id=" + encodeURIComponent(row.getAttribute("data-detail-id")), {
          headers: { "X-Requested-With": "fetch" }
        })
          .then(function (resp) {
            if (!resp.ok) throw new Error("HTTP " + resp.status);
            return resp.text();
          })
          .then(function (html) {
            slot.innerHTML = html;
          })
          .catch(function (err) {
            /* 出错也要说清楚，不能让弹窗一直停在"正在加载…" */
            slot.innerHTML =
              "<div class='modal-body'><p class='missing'>打不开详情：" +
              err.message +
              "。刷新页面后重试。</p></div>" +
              "<div class='modal-foot'><button type='button' data-modal-close>关闭</button></div>";
          });
      });
    });
  }

  /* ── 顺运宝登录弹窗：验证码"换一张" ─────────────
     图片本身、以及旁边的"换一张"按钮，点了都重新请求验证码接口。
     `[必须]` 每次请求带一个新的时间戳查询参数，绕开浏览器缓存——
     否则点了"换一张"看到的还是同一张图（工单 #46）。 */
  function setupCaptchaRefresh() {
    var img = document.getElementById("login-captcha-img");
    if (!img) return;
    var base = img.getAttribute("data-captcha-refresh") || img.src;

    function refresh() {
      img.src = base + "?_=" + Date.now();
    }

    img.addEventListener("click", refresh);
    var btn = document.getElementById("login-captcha-refresh");
    if (btn) btn.addEventListener("click", refresh);
  }

  /* 顺运宝同步是后台长任务。表单通过浏览器校验并提交后立即锁住按钮，
     让操作员在页面跳转前就看到反馈；服务端互斥仍是最终保护。 */
  function setupSybSyncFeedback() {
    var form = document.querySelector("[data-syb-sync-form]");
    if (!form) return;
    var button = form.querySelector("[data-syb-sync-submit]");
    if (!button) return;
    form.addEventListener("submit", function () {
      button.disabled = true;
      button.setAttribute("aria-busy", "true");
      button.textContent = "同步中…";
    });
  }

  /* 同步记录继续由服务端渲染，但只替换弹窗内部的 HTML 片段。
     事件委托挂在不会被替换的 slot 上，所以刷新和翻页后不用重新绑定。 */
  function setupSybHistoryRefresh() {
    var slot = document.querySelector("[data-syb-history-slot]");
    if (!slot) return;

    slot.addEventListener("click", function (event) {
      var trigger = event.target.closest("[data-history-fetch-url]");
      if (!trigger || !slot.contains(trigger)) return;
      event.preventDefault();
      if (slot.getAttribute("aria-busy") === "true") return;

      var fetchURL = trigger.getAttribute("data-history-fetch-url");
      var refreshButton = slot.querySelector("button[data-history-fetch-url]");
      var loading = slot.querySelector("[data-history-loading]");
      var previousError = slot.querySelector("[data-history-load-error]");
      var isRefreshButton = trigger === refreshButton;
      slot.setAttribute("aria-busy", "true");
      slot.querySelectorAll("[data-history-fetch-url]").forEach(function (control) {
        control.setAttribute("aria-disabled", "true");
      });
      if (refreshButton) refreshButton.disabled = true;
      if (loading) loading.hidden = false;
      if (previousError) previousError.hidden = true;
      if (isRefreshButton) refreshButton.textContent = "刷新中…";

      fetch(fetchURL, {
        cache: "no-store",
        headers: { "X-Requested-With": "fetch" }
      })
        .then(function (response) {
          if (response.redirected) {
            window.location.assign(response.url);
            return null;
          }
          if (!response.ok) throw new Error("HTTP " + response.status);
          return response.text();
        })
        .then(function (html) {
          if (html === null) return;
          slot.innerHTML = html;
          slot.removeAttribute("aria-busy");
          var nextRefreshButton = slot.querySelector("button[data-history-fetch-url]");
          if (nextRefreshButton) nextRefreshButton.focus({ preventScroll: true });
        })
        .catch(function (error) {
          slot.removeAttribute("aria-busy");
          slot.querySelectorAll("[data-history-fetch-url]").forEach(function (control) {
            control.removeAttribute("aria-disabled");
          });
          refreshButton = slot.querySelector("button[data-history-fetch-url]");
          loading = slot.querySelector("[data-history-loading]");
          var errorBox = slot.querySelector("[data-history-load-error]");
          if (refreshButton) {
            refreshButton.disabled = false;
            refreshButton.textContent = "刷新同步记录";
            refreshButton.focus({ preventScroll: true });
          }
          if (loading) loading.hidden = true;
          if (errorBox) {
            errorBox.textContent = "刷新同步记录失败：" + error.message + "。请重试。";
            errorBox.hidden = false;
          }
        });
    });
  }

  document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll("table").forEach(setupCheckAll);
    setupConfirmDelete();
    setupConfirmSubmit();
    setupUserResetModal();
    setupClientAssignmentModal();
    setupModals();
    setupRowDetail();
    setupCaptchaRefresh();
    setupSybSyncFeedback();
    setupSybHistoryRefresh();
    syncButtons();
  });

  /* TODO(骨架): 蝦皮数据页 -> 编辑弹窗（填 PDD 链接）。
     顺运宝页的登录弹窗已经实现（setupCaptchaRefresh + 通用 setupModals）；
     规格匹配弹窗仍是后续工单的范围。
     页面里放一个 id="detail-modal" 的壳子、行上写 data-detail-id，
     服务端出一个返回片段的 /<模块>/detail，这里就不用再加代码了。 */
})();