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]:not(:disabled)");
    }

    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:not(:disabled)"
    ).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 setupPurchaseModal() {
    var openButtons = document.querySelectorAll("[data-purchase-open]");
    var form = document.querySelector("[data-purchase-form]");
    if (!openButtons.length || !form) return;
    var modeInputs = form.querySelectorAll("[data-execution-mode]");
    var livePanel = form.querySelector("[data-live-confirm-panel]");
    var liveAcknowledged = form.querySelector("[data-live-acknowledged]");
    var liveConfirmation = form.querySelector("[data-live-confirmation]");
    var clientSelect = form.querySelector("select[name=client_id]");
    function updateExecutionMode() {
      var selected = form.querySelector("[data-execution-mode]:checked");
      var isLive = selected && selected.value === "live";
      if (livePanel) livePanel.hidden = !isLive;
      if (liveAcknowledged) liveAcknowledged.required = isLive;
      if (liveConfirmation) liveConfirmation.required = isLive;
      if (clientSelect) {
        clientSelect.querySelectorAll("option[data-purchase-mode]").forEach(function (option) {
          option.disabled = isLive && option.getAttribute("data-purchase-mode") !== "live";
        });
        if (clientSelect.selectedOptions.length && clientSelect.selectedOptions[0].disabled) {
          clientSelect.value = "";
        }
      }
      form.setAttribute("data-confirm-submit", isLive
        ? "确认创建真实的未付款订单？系统不会自动支付。"
        : "确认创建采购演练任务？任务创建后将等待所选客户端领取。");
    }
    modeInputs.forEach(function (input) {
      input.addEventListener("change", updateExecutionMode);
    });
    updateExecutionMode();
    openButtons.forEach(function (openButton) {
      openButton.addEventListener("click", function () {
        var selected = {};
        var singleID = openButton.getAttribute("data-purchase-id");
        if (singleID) {
          selected[singleID] = true;
        } else {
          document.querySelectorAll("tbody input[name=ids]:checked").forEach(function (box) {
            selected[box.value] = true;
          });
        }
        var shown = 0;
        form.querySelectorAll("[data-purchase-row]").forEach(function (row) {
          var enabled = !!selected[row.getAttribute("data-purchase-row")];
          row.hidden = !enabled;
          row.querySelectorAll("input").forEach(function (input) {
            input.disabled = !enabled;
          });
          if (enabled) shown += 1;
        });
        var empty = form.querySelector("[data-purchase-empty]");
        if (empty) empty.hidden = shown > 0;

        /* 每次打开都回到演练模式，避免上次关闭弹窗后遗留 live 选择。 */
        var dryRun = form.querySelector("[data-execution-mode][value=dry_run]");
        if (dryRun) dryRun.checked = true;
        if (liveAcknowledged) liveAcknowledged.checked = false;
        if (liveConfirmation) liveConfirmation.value = "";
        updateExecutionMode();
      });
    });
  }

  /* PDD 批量采集弹窗只同步已选数量并提供提交反馈。
     客户端权限和任务初始状态始终由服务端决定。 */
  function setupCollectModals() {
    document.querySelectorAll("[data-collect-open]").forEach(function (openButton) {
      var formID = openButton.getAttribute("data-collect-form") || "pdd-form";
      var form = document.getElementById(formID);
      var modal = document.getElementById(openButton.getAttribute("data-modal-open"));
      if (!form || !modal) return;
      var count = modal.querySelector("[data-collect-count]");
      var submitButton = modal.querySelector("[data-collect-submit]");
      if (!count || !submitButton) return;

      openButton.addEventListener("click", function () {
        var fixedCount = openButton.getAttribute("data-collect-count-value");
        count.textContent = fixedCount === null ? checkedCount() : fixedCount;
      });
      form.addEventListener("submit", function (event) {
        if (event.submitter !== submitButton) return;
        submitButton.disabled = true;
        submitButton.setAttribute("aria-busy", "true");
        submitButton.textContent = "创建中…";
      });
    });
  }

  /* Excel 解析可能需要几秒。浏览器校验通过并开始上传后立即锁住提交按钮，
     防止采购员因为没有反馈而重复提交同一批文件。 */
  function setupUploadFeedback() {
    document.querySelectorAll("[data-upload-form]").forEach(function (form) {
      var button = form.querySelector("[data-upload-submit]");
      if (!button) return;
      form.addEventListener("submit", function () {
        button.disabled = true;
        button.setAttribute("aria-busy", "true");
        button.textContent = "导入中…";
      });
    });
  }

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

  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") || "";

    function loadDetail(id) {
      if (!modal.hidden && modal.getAttribute("data-loaded-detail-id") === id) return;
      modal.setAttribute("data-loaded-detail-id", id);
      slot.innerHTML = "<div class='modal-body'>正在加载…</div>";
      openModal(modal);

      var separator = base.indexOf("?") === -1 ? "?" : "&";
      fetch(base + separator + "id=" + encodeURIComponent(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>";
        });
    }

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

        loadDetail(row.getAttribute("data-detail-id"));
      });
    });

    document.querySelectorAll("[data-detail-open-id]").forEach(function (button) {
      button.addEventListener("click", function () {
        loadDetail(button.getAttribute("data-detail-open-id"));
      });
    });
  }

  /* 顺运宝缩略图使用上游图片 URL。这里只在弹窗里放大展示，
     不代理、不下载图片；加载失败时保留新窗口重试入口。 */
  function setupImagePreview() {
    var modal = document.getElementById("image-preview-modal");
    if (!modal) return;
    var image = modal.querySelector("[data-image-preview-image]");
    var title = modal.querySelector("[data-image-preview-title]");
    var status = modal.querySelector("[data-image-preview-status]");
    var link = modal.querySelector("[data-image-preview-link]");
    if (!image || !title || !status || !link) return;

    document.querySelectorAll("[data-image-preview-url]").forEach(function (button) {
      button.addEventListener("click", function () {
        var url = button.getAttribute("data-image-preview-url") || "";
        var productTitle = button.getAttribute("data-image-preview-title") || "商品";
        title.textContent = productTitle + " · 原图";
        link.href = url;
        image.alt = productTitle + " 原图";
        image.hidden = true;
        status.hidden = false;
        status.classList.remove("missing");
        status.textContent = "正在加载原图…";
        openModal(modal);

        image.onload = function () {
          status.hidden = true;
          image.hidden = false;
        };
        image.onerror = function () {
          image.hidden = true;
          status.hidden = false;
          status.classList.add("missing");
          status.textContent = "原图加载失败，请在新窗口打开或稍后重试。";
        };
        image.src = url;
      });
    });
  }

  /* ── 顺运宝登录弹窗：验证码"换一张" ─────────────
     图片本身、以及旁边的"换一张"按钮，点了都重新请求验证码接口。
     `[必须]` 每次请求带一个新的时间戳查询参数，绕开浏览器缓存——
     否则点了"换一张"看到的还是同一张图（工单 #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();
    setupPurchaseModal();
    setupCollectModals();
    setupUploadFeedback();
    setupModals();
    setupRowDetail();
    setupImagePreview();
    setupCaptchaRefresh();
    setupSybSyncFeedback();
    setupSybHistoryRefresh();
    syncButtons();
  });

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