v24 第 9 批：名册九条（分组按钮/加入名册/生日月日/地址四级/千人性能/拖动修复/删除人员/返回名册/Semi DatePicker）
- #131 名册卡片加「分组」按钮（details+radio，显示当前分组，选中即改） - #132 修复「从已有人里加入名册」无反应 - #133 生日只显示月和日（阳历 MM-DD / 农历中文名），PersonQuery::birthdaysOf 取代 birthdayOf - #134 地址结构化为 国家/省/市/区+详细：regions 表（3429 行全国区划）+ Region.php + ?r=regions 级联接口 + 表单 .addr-grid + 老地址回填（Schema v16） - #135 千人名册性能：.person content-visibility:auto + 名册页 ob_gzhandler （实测 服务端 1.15s/3.8MB → 0.17s/87KB；客户端导航→load 1.35s → 0.37s） - #136 拖动排序改 Pointer Events（Chrome 下 HTML5 DnD 在 DOM 变动时断） - #137 个人详情页底部「删除人员」 - #138 编辑资料页加「返回名册」 - #139 所有日期选择换 Semi Design DatePicker（渐进增强：原生四字段保 POST 契约， 懒加载 vendor semi UMD，值回写原字段；工作经历 type=month 一并升级；宣纸主题对齐） 验证：e2e 785/0、batch9 37/0、upgrade 126/0、picker 28/0、mobile 688/0、interact 97/0、 batch_e 91/0、import 21/0、douban 22/0、drag 5/0、semi-integrate 28/0、semi-probe 17/0、 geom 5/5；部署后线上自检 16/16（含 4 个 semi 资源 200 + regions 路由）。
This commit is contained in:
+484
-59
@@ -430,33 +430,76 @@
|
||||
// 落库的是**整版布局**（每栏的有序 id 列表），一次提交写完 ——
|
||||
// 逐条提交会在中途留下自相矛盾的中间态（两个人暂时同号），刷新一下就变样。
|
||||
//
|
||||
// 没有这段 JS 也完全能用：卡片上的「⋯ → 调整分组」表单还在，
|
||||
// 而且手机上 HTML5 拖放本来就不生效，那套表单就是窄屏的正路。
|
||||
// 🔴🔴 这一段**不用 HTML5 拖放**（dragstart/dragover/drop），改用 Pointer Events。
|
||||
// 换掉的原因（用户 2026-10-04 第 6 条：「chrome 下只有第一组可以拖动」）：
|
||||
// · HTML5 DnD 的拖放是浏览器在"协商"的：dragstart 之后必须由我们在
|
||||
// dragover 里持续 preventDefault 才允许放下，而一旦拖动过程中**改了 DOM**
|
||||
// （本功能本来就要把卡片挪来挪去），Chrome 会中途撤销这次拖放 ——
|
||||
// 表现就是"第一栏能拖，后面的栏拖着拖着就断了"。
|
||||
// · 它**没有自动滚动**：名册长了以后下面的分组在视口外，根本够不着。
|
||||
// · 手机上 HTML5 DnD 一律不生效（这条以前是靠「⋯」表单兜的）。
|
||||
// Pointer Events 三件事全都自己说了算：落点、自动滚动、触摸。
|
||||
//
|
||||
// 没有这段 JS 也完全能用：行上的「分组」按钮（<details> 里的表单）照样能改分组。
|
||||
(function () {
|
||||
var roster = document.querySelector('.roster.is-droppable');
|
||||
if (!roster || !window.FormData || !window.fetch) { return; }
|
||||
var url = roster.getAttribute('data-reorder');
|
||||
var csrf = roster.getAttribute('data-csrf') || '';
|
||||
var dragging = null;
|
||||
var noteEl = null;
|
||||
var MIN_MOVE = 5; // 超过这个位移才算"在拖"，否则只是点了一下
|
||||
var EDGE = 72; // 指针离视口上下边缘多少像素开始自动滚动
|
||||
var EDGE_SPD = 18; // 自动滚动速度（像素/帧）
|
||||
var pending = null; // 按下但还没到门槛
|
||||
var dragging = null; // 真正在拖的那张卡
|
||||
var suppressClick = false; // 拖完要掐掉紧接着的那次 click（否则会跳进详情页）
|
||||
var startPt = null;
|
||||
var lastPt = null;
|
||||
var rafId = 0;
|
||||
var noteEl = null;
|
||||
|
||||
function each(list, fn) { Array.prototype.forEach.call(list, fn); }
|
||||
|
||||
function blocks() {
|
||||
return roster.querySelectorAll('.group-block');
|
||||
}
|
||||
|
||||
/** 从事件目标往上找那张可拖的卡片（点在卡片里的链接/表单上时也算这张卡） */
|
||||
function cardFrom(e) {
|
||||
var t = e.target;
|
||||
function cardFrom(node) {
|
||||
var t = node;
|
||||
while (t && t !== roster) {
|
||||
if (t.classList && t.classList.contains('person')
|
||||
&& t.getAttribute('draggable') === 'true') {
|
||||
return t;
|
||||
}
|
||||
if (t.classList && t.classList.contains('person')) { return t; }
|
||||
t = t.parentNode;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function blocks() {
|
||||
return roster.querySelectorAll('.group-block');
|
||||
/**
|
||||
* 这次按下该不该算"拖动"？
|
||||
*
|
||||
* ⚠️ 按钮 / 输入框 / 下拉 / <summary> 一律不算 —— 在那儿按下是"要用它"，
|
||||
* 不是"要拖这张卡"。唯一例外是 `.drag-handle`（它是专门用来抓的）。
|
||||
* ⚠️ 大链接 `.person-main` **算**：整行都能拖才顺手（这也是原来的手感），
|
||||
* 靠 MIN_MOVE 门槛区分"点进去看详情"和"拖着走"，并且拖过之后要掐掉那次 click。
|
||||
*/
|
||||
function isControl(node) {
|
||||
var t = node;
|
||||
while (t && t !== roster) {
|
||||
if (t.nodeType !== 1) { t = t.parentNode; continue; }
|
||||
// ⚠️ 判定顺序不能乱：先认"专门用来抓的"和"整行那个大链接"，
|
||||
// 再认"点了就有别的作用的控件"。
|
||||
if (t.classList && t.classList.contains('drag-handle')) { return false; }
|
||||
// `.person-main` 虽然是 <a>（点它会进详情页），但整行都能拖才顺手 ——
|
||||
// 靠 MIN_MOVE 区分"点"与"拖"，拖过之后掐掉那次 click。
|
||||
if (t.classList && t.classList.contains('person-main')) { return false; }
|
||||
if (t.getAttribute && t.getAttribute('data-no-drag') !== null) { return true; }
|
||||
var tag = t.tagName;
|
||||
if (tag === 'BUTTON' || tag === 'INPUT' || tag === 'SELECT' || tag === 'TEXTAREA'
|
||||
|| tag === 'SUMMARY' || tag === 'LABEL' || tag === 'A') {
|
||||
return true;
|
||||
}
|
||||
t = t.parentNode;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/** 每栏人数与"空栏"标记跟着 DOM 走 —— 不然拖完之后标题上的「N 人」还是旧的 */
|
||||
@@ -466,6 +509,12 @@
|
||||
var nEl = b.querySelector('.group-n .n');
|
||||
if (nEl) { nEl.textContent = String(n); }
|
||||
b.classList.toggle('is-empty', n === 0);
|
||||
// 🔴 empty 的栏被 filter.js 标了 hidden（筛完没人剩就整栏收起）。
|
||||
// 拖了一张卡进来之后必须**把 hidden 也清掉** —— 只去掉 is-empty 没用：
|
||||
// 作者样式里 .group-block 没有写 display，于是浏览器默认的
|
||||
// [hidden]{display:none} 照样生效，那一栏连同刚放进去的人一起看不见
|
||||
// （症状就是"拖到后面的分组里，松手什么都没有"）。
|
||||
b.hidden = (n === 0);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -518,51 +567,32 @@
|
||||
});
|
||||
}
|
||||
|
||||
roster.addEventListener('dragstart', function (e) {
|
||||
var card = cardFrom(e);
|
||||
if (!card) { return; }
|
||||
// 「⋯」菜单里的下拉与按钮不参与拖动 —— 在那儿按下多半是想选项，不是想拖卡
|
||||
var t = e.target;
|
||||
while (t && t !== roster) {
|
||||
if (t.getAttribute && t.getAttribute('data-no-drag') !== null) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
t = t.parentNode;
|
||||
}
|
||||
dragging = card;
|
||||
roster.classList.add('is-dragging');
|
||||
card.classList.add('is-dragged');
|
||||
if (e.dataTransfer) {
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
try { e.dataTransfer.setData('text/plain', card.getAttribute('data-person')); } catch (err) { /* 老浏览器忽略 */ }
|
||||
}
|
||||
});
|
||||
|
||||
roster.addEventListener('dragover', function (e) {
|
||||
if (!dragging) { return; }
|
||||
var block = e.target && e.target.closest ? e.target.closest('.group-block') : null;
|
||||
if (!block) { return; }
|
||||
e.preventDefault();
|
||||
if (e.dataTransfer) { e.dataTransfer.dropEffect = 'move'; }
|
||||
/** 按当前指针位置把拖着的卡插到正确的栏、正确的位置 */
|
||||
function placeAt(pt) {
|
||||
// ⚠️ 落点必须用 elementFromPoint 现算：拖动的卡自己就在指针底下，
|
||||
// 而它在 CSS 里是 pointer-events:none（见 .person.is-dragged），
|
||||
// 所以拿到的永远是它**下面**那个元素 —— 正是落点。
|
||||
var under = document.elementFromPoint(pt.x, pt.y);
|
||||
if (!under) { return; }
|
||||
var block = under.closest ? under.closest('.group-block') : null;
|
||||
if (!block || !roster.contains(block)) { return; }
|
||||
var grid = block.querySelector('.people-grid');
|
||||
if (!grid) { return; }
|
||||
|
||||
/* 落点判定（用户 2026-10-03 第 4 条："好像只能往后调整，不能往前调整"）。
|
||||
名册已从网格改成**竖向列表**，所以：
|
||||
指针在某行的**上半部分** → 插到它前面；下半部分 → 插到它后面。
|
||||
⚠️ 原来只记了"第一个满足 clientY < 中点 的卡片"然后 insertBefore ——
|
||||
当目标就在**当前拖着的这张之后**时，insertBefore 到它的位置
|
||||
等于没动（因为 dragged 自己先被移走、后面的元素整体前移一位），
|
||||
于是"往前拖"看起来完全无效。现在改成显式记录"插到谁前面/后面"，
|
||||
并且在计算时**排除 dragged 自己**，两种方向都成立。 */
|
||||
名册是**竖向列表**，所以：指针在某行的**上半部分** → 插到它前面；
|
||||
下半部分 → 插到它后面。
|
||||
⚠️ 候选里要**排除 dragging 自己**，否则它自己会变成参照物、
|
||||
两个方向都会算成"不动"（这正是"往前拖无效"的根因）。 */
|
||||
var kids = [];
|
||||
each(grid.querySelectorAll('.person'), function (c) {
|
||||
if (c !== dragging) { kids.push(c); }
|
||||
});
|
||||
var target = null; // 落点参照物
|
||||
var before = true; // 插到它的前面还是后面
|
||||
var target = null; // 落点参照物
|
||||
var before = true; // 插到它的前面还是后面
|
||||
for (var i = 0; i < kids.length; i++) {
|
||||
var r = kids[i].getBoundingClientRect();
|
||||
if (e.clientY < r.top + r.height / 2) {
|
||||
if (pt.y < r.top + r.height / 2) {
|
||||
target = kids[i];
|
||||
before = true;
|
||||
break;
|
||||
@@ -571,29 +601,207 @@
|
||||
before = false;
|
||||
}
|
||||
if (!target) {
|
||||
grid.appendChild(dragging);
|
||||
if (grid.lastChild !== dragging) { grid.appendChild(dragging); }
|
||||
} else if (before) {
|
||||
grid.insertBefore(dragging, target);
|
||||
if (target.previousSibling !== dragging) { grid.insertBefore(dragging, target); }
|
||||
} else {
|
||||
grid.insertBefore(dragging, target.nextSibling);
|
||||
if (target.nextSibling !== dragging) { grid.insertBefore(dragging, target.nextSibling); }
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
roster.addEventListener('drop', function (e) {
|
||||
// 不 preventDefault 的话浏览器会按"跳到某个地址"处理，整页就跳走了
|
||||
if (dragging) { e.preventDefault(); }
|
||||
});
|
||||
/**
|
||||
* 自动滚动：指针靠近视口上下边缘时带着页面走。
|
||||
* 名册长到一千人时，下面的分组在视口外面 —— 没有它根本拖不过去。
|
||||
*/
|
||||
function autoScroll() {
|
||||
rafId = 0;
|
||||
if (!dragging || !lastPt) { return; }
|
||||
var dy = 0;
|
||||
if (lastPt.y < EDGE) { dy = -Math.round(EDGE_SPD * (1 - lastPt.y / EDGE)); }
|
||||
else if (lastPt.y > window.innerHeight - EDGE) {
|
||||
dy = Math.round(EDGE_SPD * (1 - (window.innerHeight - lastPt.y) / EDGE));
|
||||
}
|
||||
if (dy !== 0) {
|
||||
window.scrollBy(0, dy);
|
||||
placeAt(lastPt);
|
||||
}
|
||||
rafId = window.requestAnimationFrame(autoScroll);
|
||||
}
|
||||
|
||||
roster.addEventListener('dragend', function () {
|
||||
if (!dragging) { return; }
|
||||
function beginDrag(card, pt) {
|
||||
dragging = card;
|
||||
roster.classList.add('is-dragging');
|
||||
card.classList.add('is-dragged');
|
||||
placeAt(pt);
|
||||
if (!rafId) { rafId = window.requestAnimationFrame(autoScroll); }
|
||||
}
|
||||
|
||||
function endDrag() {
|
||||
if (rafId) { window.cancelAnimationFrame(rafId); rafId = 0; }
|
||||
if (!dragging) { pending = null; return; }
|
||||
dragging.classList.remove('is-dragged');
|
||||
roster.classList.remove('is-dragging');
|
||||
dragging = null;
|
||||
pending = null;
|
||||
// ⚠️ 紧接着的那次 click 要掐掉：指针从卡片上的链接按下、拖走了又松开，
|
||||
// 浏览器会当成"点了那个链接"→ 直接跳进详情页，拖了半天等于白拖。
|
||||
suppressClick = true;
|
||||
window.setTimeout(function () { suppressClick = false; }, 0);
|
||||
refreshCounts();
|
||||
save();
|
||||
}
|
||||
|
||||
roster.addEventListener('pointerdown', function (e) {
|
||||
if (e.button !== 0 && e.pointerType === 'mouse') { return; }
|
||||
var card = cardFrom(e.target);
|
||||
if (!card) { return; }
|
||||
// 触摸时整行都能拖会让页面没法上下滚 —— 触摸只认那个 ⠿ 手柄
|
||||
var fromHandle = !!(e.target.closest && e.target.closest('.drag-handle'));
|
||||
if (e.pointerType !== 'mouse' && !fromHandle) { return; }
|
||||
if (!fromHandle && isControl(e.target)) { return; }
|
||||
pending = { card: card, id: e.pointerId, type: e.pointerType };
|
||||
startPt = { x: e.clientX, y: e.clientY };
|
||||
lastPt = { x: e.clientX, y: e.clientY };
|
||||
/* 🔴 空栏必须在**按下的这一刻**就露出来，不能等"真的开始拖"才露。
|
||||
露出来会让页面变高、下面的分组整体下移 ——
|
||||
如果等到拖动开始才露，用户瞄准的那个位置在手指一动之后就跑了
|
||||
（症状：想拖到「未分类」，松手却落进了别的栏，或者干脆没动静）。
|
||||
按下时就露，布局在**瞄准之前**已经稳定，之后全程不变。
|
||||
⚠️ 只点一下不拖的情况：松手时会收回去（见下面的 pointerup）；
|
||||
而"点一下"多半是点这一行看详情，页面本来就要跳走，看不到这一下。 */
|
||||
roster.classList.add('is-dragging');
|
||||
if (fromHandle) { e.preventDefault(); } // 别顺手选中文字
|
||||
});
|
||||
|
||||
document.addEventListener('pointermove', function (e) {
|
||||
if (pending && !dragging && e.pointerId === pending.id) {
|
||||
if (Math.abs(e.clientX - startPt.x) < MIN_MOVE
|
||||
&& Math.abs(e.clientY - startPt.y) < MIN_MOVE) {
|
||||
return;
|
||||
}
|
||||
beginDrag(pending.card, { x: e.clientX, y: e.clientY });
|
||||
}
|
||||
if (!dragging) { return; }
|
||||
lastPt = { x: e.clientX, y: e.clientY };
|
||||
placeAt(lastPt);
|
||||
});
|
||||
|
||||
document.addEventListener('pointerup', function (e) {
|
||||
if (dragging) { endDrag(); }
|
||||
else if (pending && e.pointerId === pending.id) {
|
||||
pending = null;
|
||||
roster.classList.remove('is-dragging'); // 只是点了一下：把露出来的空栏收回去
|
||||
}
|
||||
});
|
||||
document.addEventListener('pointercancel', function () {
|
||||
if (dragging) { endDrag(); }
|
||||
else if (pending) {
|
||||
pending = null;
|
||||
roster.classList.remove('is-dragging');
|
||||
}
|
||||
});
|
||||
|
||||
// 拖完掐掉那一次 click（捕获阶段就拦，别等它冒泡到链接上）
|
||||
document.addEventListener('click', function (e) {
|
||||
if (!suppressClick) { return; }
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}, true);
|
||||
})();
|
||||
|
||||
// ===== 地址：省 → 市 → 区 三级联动（用户 2026-10-04 第 4 条）=====
|
||||
//
|
||||
// 数据有 3429 条，一次性塞进页面会让表单页重一百多 KB，所以按级去取：
|
||||
// 换了省就把「市」换成这个省下面的市、并把「区」清空；换了市同理。
|
||||
//
|
||||
// ⚠️ 这是**纯增强**：服务端已经把当前这一条链（省→市→区）的选项渲染好了，
|
||||
// 没有这段 JS 时三个下拉照样能选、照样能提交，只是换了省不会自动带出新的市。
|
||||
(function () {
|
||||
var wrap = document.querySelector('[data-addr]');
|
||||
if (!wrap) { return; }
|
||||
var src = wrap.getAttribute('data-src');
|
||||
var selProvince = wrap.querySelector('[data-addr-lvl="1"]');
|
||||
var selCity = wrap.querySelector('[data-addr-lvl="2"]');
|
||||
var selDistrict = wrap.querySelector('[data-addr-lvl="3"]');
|
||||
if (!selProvince || !src) { return; }
|
||||
|
||||
var cache = {}; // 同一个父级取过一次就不再问（省下面那几个市来回切很常见）
|
||||
|
||||
function fill(sel, items, keep) {
|
||||
sel.innerHTML = '';
|
||||
var none = document.createElement('option');
|
||||
none.value = '';
|
||||
none.textContent = '（不填）';
|
||||
sel.appendChild(none);
|
||||
Array.prototype.forEach.call(items, function (it) {
|
||||
var o = document.createElement('option');
|
||||
o.value = it.name;
|
||||
o.setAttribute('data-code', it.code);
|
||||
o.textContent = it.name;
|
||||
if (keep && keep === it.name) { o.selected = true; }
|
||||
sel.appendChild(o);
|
||||
});
|
||||
sel.setAttribute('data-code', '');
|
||||
}
|
||||
|
||||
function codeOf(sel) {
|
||||
var o = sel.selectedOptions && sel.selectedOptions[0];
|
||||
return (o && o.getAttribute('data-code')) || sel.getAttribute('data-code') || '';
|
||||
}
|
||||
|
||||
function load(parent, done) {
|
||||
var key = parent || '_root';
|
||||
if (cache[key]) { done(cache[key]); return; }
|
||||
if (!window.fetch) { done([]); return; }
|
||||
window.fetch(src + (parent ? '&parent=' + encodeURIComponent(parent) : ''), {
|
||||
credentials: 'same-origin',
|
||||
headers: { 'X-Requested-With': 'XMLHttpRequest' },
|
||||
}).then(function (r) { return r.ok ? r.json() : null; })
|
||||
.then(function (j) {
|
||||
var items = (j && j.items) || [];
|
||||
cache[key] = items;
|
||||
done(items);
|
||||
}).catch(function () { done([]); });
|
||||
}
|
||||
|
||||
selProvince.addEventListener('change', function () {
|
||||
var keep = selCity.value;
|
||||
load(codeOf(selProvince), function (items) {
|
||||
// ⚠️ 换了省之后**原来看中的市多半不在这个省里** ——
|
||||
// 但也不一律清空：省没变只是重取了一次时，保留用户选过的那个。
|
||||
var still = false;
|
||||
Array.prototype.forEach.call(items, function (it) { if (it.name === keep) { still = true; } });
|
||||
fill(selCity, items, still ? keep : '');
|
||||
fill(selDistrict, [], '');
|
||||
});
|
||||
});
|
||||
|
||||
if (selCity) {
|
||||
selCity.addEventListener('change', function () {
|
||||
load(codeOf(selCity), function (items) {
|
||||
fill(selDistrict, items, selDistrict.value);
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
// ===== 名册行的「分组」按钮：选中即提交 =====
|
||||
// 用事件委托：名册有几行就有几个这种表单，而且以后动态加进来的一样生效。
|
||||
// ⚠️ 只是"选中即提交"的锦上添花 —— 表单里那个「保存」按钮一直都在，
|
||||
// 没有 JS（或 JS 出错）时照样能改分组，不会变成"点了没反应"。
|
||||
document.addEventListener('change', function (e) {
|
||||
var inp = e.target;
|
||||
if (!inp || inp.type !== 'radio' || inp.name !== 'group_id') { return; }
|
||||
var form = inp.form;
|
||||
if (!form || !form.classList || !form.classList.contains('pg-menu')) { return; }
|
||||
// requestSubmit 才会跑浏览器的原生校验；老浏览器退回 submit()
|
||||
if (typeof form.requestSubmit === 'function') {
|
||||
form.requestSubmit();
|
||||
} else {
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
|
||||
// ===== 点页面其它地方 / 按 Esc 就收起下拉菜单 =====
|
||||
// 用户 2026-10-03 第 3 条：「菜单栏点击后面，应该自动关闭，不应该一直保持打开」。
|
||||
// 原生 <details> 只在再点一次 summary（或按 Esc）时收起 —— 点别处一律不管，
|
||||
@@ -645,3 +853,220 @@
|
||||
});
|
||||
})();
|
||||
})();
|
||||
|
||||
// ==================== Semi Design DatePicker（v24 第 9 批 #9） ====================
|
||||
// 用户点名「所有日期选择换 https://semi.design 的 DatePicker，样式与系统统一」。
|
||||
// 这里是**渐进增强**的升级层：templates/_datetime.php 照旧渲染原生「日期+时/分/秒」
|
||||
// 四字段（表单契约与服务端 read_dt_input() 不动），Semi 的资源（合计约 4 MB）只在
|
||||
// 页面上真出现 .dt-input 时才懒加载；加载成功 → 藏原生、挂 DatePicker、值回写原字段；
|
||||
// 加载失败 → 原生控件原样可用，页面不会坏。
|
||||
(function () {
|
||||
var boxes = Array.prototype.slice.call(document.querySelectorAll('.dt-input[data-dt]'));
|
||||
var hasMonth = !!document.querySelector('input[type="month"]');
|
||||
if (!boxes.length && !hasMonth) { return; }
|
||||
var meta = document.querySelector('meta[name="fb-semi"]');
|
||||
if (!meta) { return; }
|
||||
var conf;
|
||||
try { conf = JSON.parse(meta.getAttribute('content')); } catch (e) { return; }
|
||||
if (!conf || !conf.css || !conf.react || !conf.dom || !conf.ui) { return; }
|
||||
|
||||
function loadCss(href) {
|
||||
return new Promise(function (res) {
|
||||
var l = document.createElement('link');
|
||||
l.rel = 'stylesheet';
|
||||
l.href = href;
|
||||
l.onload = function () { res(true); };
|
||||
l.onerror = function () { res(false); };
|
||||
document.head.appendChild(l);
|
||||
});
|
||||
}
|
||||
function loadJs(src) {
|
||||
return new Promise(function (res, rej) {
|
||||
var s = document.createElement('script');
|
||||
s.src = src;
|
||||
s.onload = function () { res(); };
|
||||
s.onerror = function () { rej(new Error('加载失败: ' + src)); };
|
||||
document.head.appendChild(s);
|
||||
});
|
||||
}
|
||||
|
||||
function pad(n) { return (n < 10 ? '0' : '') + n; }
|
||||
|
||||
function parseDT(str) {
|
||||
// 'YYYY-MM-DD [HH:mm[:ss]]' → 本地时区 Date | undefined
|
||||
var m = (str || '').trim().match(/^(\d{4})-(\d{1,2})-(\d{1,2})(?:[ T](\d{1,2}):(\d{1,2})(?::(\d{1,2}))?)?$/);
|
||||
if (!m) { return undefined; }
|
||||
var d = new Date(+m[1], +m[2] - 1, +m[3], +(m[4] || 0), +(m[5] || 0), +(m[6] || 0));
|
||||
return isNaN(d.getTime()) ? undefined : d;
|
||||
}
|
||||
|
||||
function part(native, sel) {
|
||||
var n = native.querySelector(sel);
|
||||
return n ? String(n.value || '') : '';
|
||||
}
|
||||
|
||||
function upgrade(box) {
|
||||
if (box.getAttribute('data-semi-done')) { return; }
|
||||
if (typeof window.SemiUI === 'undefined' || !window.SemiUI.DatePicker) { return; }
|
||||
if (!window.ReactDOM || !window.ReactDOM.createRoot) { return; }
|
||||
var cfg = {};
|
||||
try { cfg = JSON.parse(box.getAttribute('data-dt') || '{}'); } catch (e) { /* 空配置按默认走 */ }
|
||||
var host = box.querySelector('.dt-semi');
|
||||
var native = box.querySelector('.dt-native');
|
||||
if (!host || !native) { return; }
|
||||
|
||||
var fmt = 'yyyy-MM-dd HH:mm' + (cfg.seconds === false ? '' : ':ss');
|
||||
var init = parseDT(
|
||||
part(native, '.dt-date') + ' ' +
|
||||
(part(native, '.dt-hour') || '00') + ':' +
|
||||
(part(native, '.dt-minute') || '00') + ':' +
|
||||
(part(native, '.dt-second') || '00')
|
||||
);
|
||||
|
||||
// Semi 的 onChange → 写回原生四字段（POST 契约），并派 change 事件给可能的监听者
|
||||
function writeBack(date, str) {
|
||||
var m = (str || '').trim().match(/^(\d{4})-(\d{1,2})-(\d{1,2})[ T](\d{1,2}):(\d{1,2})(?::(\d{1,2}))?$/);
|
||||
function set(sel, v) {
|
||||
var n = box.querySelector(sel);
|
||||
if (!n || n.value === v) { return; }
|
||||
n.value = v;
|
||||
n.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
}
|
||||
if (m) {
|
||||
set('.dt-date', m[1] + '-' + pad(+m[2]) + '-' + pad(+m[3]));
|
||||
set('.dt-hour', pad(+m[4]));
|
||||
set('.dt-minute', pad(+m[5]));
|
||||
set('.dt-second', pad(+(m[6] || 0)));
|
||||
} else {
|
||||
set('.dt-date', '');
|
||||
set('.dt-hour', '00');
|
||||
set('.dt-minute', '00');
|
||||
set('.dt-second', '00');
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
ReactDOM.createRoot(host).render(React.createElement(SemiUI.DatePicker, {
|
||||
type: 'dateTime',
|
||||
format: fmt,
|
||||
showClear: true,
|
||||
defaultValue: init,
|
||||
placeholder: '选择日期时间',
|
||||
position: window.matchMedia('(max-width: 640px)').matches ? 'bottom' : 'bottomLeft',
|
||||
onChange: writeBack
|
||||
}));
|
||||
} catch (e) {
|
||||
if (window.console) { console.warn('Semi DatePicker 挂载失败，留在原生控件：', e && e.message); }
|
||||
return;
|
||||
}
|
||||
|
||||
box.classList.add('is-semi');
|
||||
native.style.display = 'none';
|
||||
if (init) { box.classList.add('has-value'); }
|
||||
// required 不能留在 display:none 的输入上（Chrome 会拦提交却不显示提示），
|
||||
// 改成提交前自己查一遍。
|
||||
var req = native.querySelector('.dt-date[required]');
|
||||
if (req) {
|
||||
req.removeAttribute('required');
|
||||
box.setAttribute('data-required', '1');
|
||||
var form = box.closest('form');
|
||||
if (form && !form.getAttribute('data-dt-guard')) {
|
||||
form.setAttribute('data-dt-guard', '1');
|
||||
form.addEventListener('submit', function (ev) {
|
||||
// 不能用 :not([value]) 这类选择器：value 是动态写回的属性，得手动筛
|
||||
var bad = [];
|
||||
form.querySelectorAll('.dt-input[data-required="1"]').forEach(function (b) {
|
||||
var d = b.querySelector('.dt-date');
|
||||
if (d && !d.value) { bad.push(b); }
|
||||
});
|
||||
if (bad.length) {
|
||||
ev.preventDefault();
|
||||
bad.forEach(function (b) { b.classList.add('dt-missing'); });
|
||||
var inp = bad[0].querySelector('.dt-semi input');
|
||||
if (inp) { inp.focus(); }
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
box.setAttribute('data-semi-done', '1');
|
||||
}
|
||||
|
||||
var kicked = false;
|
||||
function boot() {
|
||||
if (kicked) { return; }
|
||||
kicked = true;
|
||||
loadCss(conf.css);
|
||||
loadJs(conf.react)
|
||||
.then(function () { return loadJs(conf.dom); })
|
||||
.then(function () { return loadJs(conf.ui); })
|
||||
.then(function () {
|
||||
boxes.forEach(upgrade);
|
||||
upgradeAllMonths();
|
||||
watchNewMonths();
|
||||
})
|
||||
.catch(function (err) {
|
||||
// 资源拉不动就留在原生控件上 —— 渐进增强的兜底，不弹任何打扰
|
||||
if (window.console) { console.warn('Semi DatePicker 未启用：', err && err.message); }
|
||||
});
|
||||
}
|
||||
|
||||
// ---- 工作经历的 <input type="month">（YYYY-MM）也换 Semi DatePicker ----
|
||||
// 原生 type="month" Firefox 压根不支持；同样渐进增强：原 input 藏起来当值载体，
|
||||
// POST 契约（job_start[]/job_end[]）不变。「再加一段」新增的行由 observer 补挂。
|
||||
function parseYm(str) {
|
||||
var m = (str || '').trim().match(/^(\d{4})-(\d{1,2})$/);
|
||||
if (!m) { return undefined; }
|
||||
var d = new Date(+m[1], +m[2] - 1, 1);
|
||||
return isNaN(d.getTime()) ? undefined : d;
|
||||
}
|
||||
|
||||
function upgradeMonth(inp) {
|
||||
if (inp.getAttribute('data-semi-month')) { return; }
|
||||
inp.setAttribute('data-semi-month', '1');
|
||||
var host = document.createElement('span');
|
||||
host.className = 'dt-semi dt-semi-month';
|
||||
inp.parentNode.insertBefore(host, inp);
|
||||
try {
|
||||
ReactDOM.createRoot(host).render(React.createElement(SemiUI.DatePicker, {
|
||||
type: 'month',
|
||||
format: 'yyyy-MM',
|
||||
showClear: true,
|
||||
defaultValue: parseYm(inp.value),
|
||||
placeholder: '选择年月',
|
||||
position: window.matchMedia('(max-width: 640px)').matches ? 'bottom' : 'bottomLeft',
|
||||
onChange: function (date, str) {
|
||||
var v = (str || '').trim();
|
||||
if (inp.value !== v) {
|
||||
inp.value = v;
|
||||
inp.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
}
|
||||
}
|
||||
}));
|
||||
} catch (e) {
|
||||
if (window.console) { console.warn('月份选择器挂载失败，留在原生控件：', e && e.message); }
|
||||
return;
|
||||
}
|
||||
host.classList.add('is-live');
|
||||
inp.style.display = 'none';
|
||||
}
|
||||
|
||||
function upgradeAllMonths() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll('input[type="month"]'), upgradeMonth);
|
||||
}
|
||||
|
||||
function watchNewMonths() {
|
||||
if (!window.MutationObserver) { return; }
|
||||
var timer = null;
|
||||
new MutationObserver(function () {
|
||||
if (timer) { return; }
|
||||
timer = setTimeout(function () {
|
||||
timer = null;
|
||||
upgradeAllMonths();
|
||||
}, 200);
|
||||
}).observe(document.body, { childList: true, subtree: true });
|
||||
}
|
||||
|
||||
// 错开首屏：idle 时再拉 4 MB 资源，别挡首屏渲染
|
||||
if ('requestIdleCallback' in window) { requestIdleCallback(boot, { timeout: 3000 }); }
|
||||
else { setTimeout(boot, 500); }
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user