任务面板:加保存按钮,负责人和分类改为可编辑 (#76)
用户 2026-11-05:「时间控件是对的,但是现在没有保存按钮,只有下面一个
评论的发表按钮。另外,负责人和分类都没法修改,按道理讲都应该可以修改才对。」
三处改动:
① 取消"立即保存",改成显式「保存」按钮
上一版(#74)做的是"选完截止时间就发请求"。用户不认可:他要的是
"改完点一下保存"那种确定感。
⇒ 移除 bindDue() 的 change 监听,改成 save-attrs 动作一次性提交三项。
② 负责人 / 分类 从只读改成可编辑
改前是只读 dl.kv 行,而且**值为空时整行不渲染**
(if (!empty($tpT[assignee_name])) / if ($tpCatName !== ))
⇒ 用户不仅改不了,连"这一项存在"都看不出来。
现在三项合成「更多信息」小节:
截止 [ AntD 日期控件 ]
负责人 [ 下拉 ]
分类 [ 下拉 ]
[ 保存 ]
负责人用原生 select 而不是 _person_picker.php 的弹窗选人:
面板已在浮层里,再弹一层模态 = 两层遮罩,手机上容易点错;
且 picker 需要 fbInitPickers() 初始化,loadPanel() 目前没调它。
家里 3~10 人 select 够用;人多了再换,那时记得把 fbInitPickers
也补进 loadPanel()。
③ Task::setAttrs()(新增)
只更新 due_at / assignee_id / category_id 三列。
不复用 update():那是全字段覆盖,面板只交三项的话
title/note/status/repeat/parent/board 会被默认值抹空
—— 与 setDue() 记的是同一个坑。
用 array_key_exists 判"传没传",这样可以只改其中一项
(面板在"没有成员"等极端情况下可能不渲染负责人下拉,
那时不该把它当成 0 去清掉原值)。
路由 tasks/panel_save:只把表单**真的提交了**的字段放进 $sd,
与 status/move 同一套约定(ajax_panel=1 回整块新面板)。
清理:bindDue / window.fbTaskPanelBindDue 全部移除
(entry_popup.js 里的调用、task_panel.js 里的定义与导出)
—— 留着会引用未定义函数,直接抛错。
实测:
三项一起改 => due_at/assignee/category 全对 ✅
标题/状态/备注/看板 均未被破坏 ✅
只改 due_at => 另两项保留、未被清空 ✅
面板渲染 => save-url / 保存按钮 / 两个下拉 / AntD 控件 /
原有状态/附件/评论 全部在位 ✅
This commit is contained in:
@@ -6930,6 +6930,29 @@ h6.md-h { font-size: 17px; color: var(--muted); }
|
||||
/* 「还剩 3 天」那类小字:贴在控件右边,不与控件抢宽度 */
|
||||
.tk-due-word { flex: 0 0 auto; font-size: 12.5px; color: var(--faint); white-space: nowrap; }
|
||||
.tk-due-word.kb-late { color: var(--red); }
|
||||
|
||||
/* 🔴 #76:「更多信息」小节 —— 截止 / 负责人 / 分类 三行 + 保存。
|
||||
用户 2026-11-05:「没有保存按钮…负责人和分类都没法修改。」
|
||||
每行结构 = 固定宽标签 + 占满剩余宽度的控件,与 .mv-row 同一套观感
|
||||
(但标签用 tk-attr-lb,因为面板里字号比整页表单小一号)。 */
|
||||
.tk-attrs { display: flex; flex-direction: column; gap: 10px; }
|
||||
.tk-attr-row {
|
||||
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
|
||||
}
|
||||
.tk-attr-lb {
|
||||
flex: 0 0 46px; font-size: 12.5px; color: var(--faint); text-align: right;
|
||||
}
|
||||
/* 控件区占满标签右侧(min-width:0 让它能被压缩,不会把标签挤出去) */
|
||||
.tk-attr-row > *:not(.tk-attr-lb) { flex: 1 1 auto; min-width: 0; }
|
||||
/* AntD 的 picker 本身有固定宽度,别让它撑满整行 */
|
||||
.tk-attr-row > .dt-input { max-width: 300px; }
|
||||
.tk-attr-row > select.select { max-width: 300px; }
|
||||
/* 保存按钮那一行:与上面的控件左缘对齐(= 46px 标签宽 + 10px gap) */
|
||||
.tk-attr-actions {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding-left: 56px;
|
||||
}
|
||||
.tk-attr-tip { font-size: 12px; color: var(--green, #2E7D4F); }
|
||||
.tk-sec-lb { flex: 0 0 34px; font-size: 12.5px; color: var(--faint); }
|
||||
.tk-seg { display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
/* 面板里的状态徽标比卡片上的大一档(这里是要点的按钮,不是标签) */
|
||||
|
||||
@@ -226,10 +226,6 @@
|
||||
if (typeof window.fbBootAntd === 'function') {
|
||||
try { window.fbBootAntd(); } catch (e) { /* 挂不上就留在原生下拉,不阻断面板 */ }
|
||||
}
|
||||
/* 截止控件的 change 监听(#74):首次打开也要绑,否则选完时间不会保存 */
|
||||
if (typeof window.fbTaskPanelBindDue === 'function') {
|
||||
try { window.fbTaskPanelBindDue(); } catch (e) { /* 忽略 */ }
|
||||
}
|
||||
})
|
||||
.catch(function () {
|
||||
if (!bodyEl()) { return; }
|
||||
|
||||
+43
-58
@@ -92,56 +92,9 @@
|
||||
if (typeof window.fbBootAntd === 'function') {
|
||||
try { window.fbBootAntd(); } catch (err) { /* 挂不上就留在原生下拉,不阻断面板 */ }
|
||||
}
|
||||
/* 重画之后节点是新的 ⇒ 监听要重新绑一遍(旧的已经随旧节点一起没了) */
|
||||
bindDue();
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 监听「截止时间」控件的变化,改完**立即保存**(#74)。
|
||||
*
|
||||
* 为什么不用 `data-tk-act="due"` 那种按钮:
|
||||
* 面板里其它动作都是"点一下就生效",截止时间是**选完时间**就该生效,
|
||||
* 再让用户点一次「保存」会让这一处与其它处不一致。
|
||||
*
|
||||
* 为什么监听**隐藏字段的 change** 而不是 AntD 的回调:
|
||||
* · AntD 挂载时会把选中的值写回 `.dt-date` / `.dt-hour` / `.dt-minute`
|
||||
* 这些原生字段,并 copy 一个 `change` 事件(见 app.js 的 writeDT);
|
||||
* · 原生下拉那一档(AntD 没挂上时的兜底)也是同一批发 `change`;
|
||||
* · ⇒ 监听一次就能覆盖**两种形态**,不用分别处理。
|
||||
*
|
||||
* ⚠️ `data-fb-due-bound` 幂等标记:`bindDue()` 在每次 paint 后都会跑,
|
||||
* 没有它会给同一个节点挂上多个监听 ⇒ 改一次时间发好几条请求。
|
||||
*/
|
||||
function bindDue() {
|
||||
var b = bodyEl();
|
||||
if (!b) { return; }
|
||||
var box = b.querySelector('.dt-input[data-dt]');
|
||||
if (!box) { return; }
|
||||
var cfg = {};
|
||||
try { cfg = JSON.parse(box.getAttribute('data-dt') || '{}'); } catch (e) { return; }
|
||||
if (cfg.name !== 'due_at') { return; }
|
||||
if (box.getAttribute('data-fb-due-bound') === '1') { return; }
|
||||
box.setAttribute('data-fb-due-bound', '1');
|
||||
|
||||
/* 用 `change`(不是 `input`):AntD 选完日期/时间才写回,
|
||||
中途打字不该触发几十次请求。 */
|
||||
box.addEventListener('change', function () {
|
||||
var d = box.querySelector('.dt-date');
|
||||
var date = d ? String(d.value || '').trim() : '';
|
||||
if (date === '') {
|
||||
/* 清空 = 去掉截止时间(allowClear 会走到这里) */
|
||||
act(urlOf('due'), { due_at: '' });
|
||||
return;
|
||||
}
|
||||
var h = box.querySelector('.dt-hour');
|
||||
var m = box.querySelector('.dt-minute');
|
||||
var hh = h && String(h.value || '').trim() !== '' ? String(h.value) : '00';
|
||||
var mm = m && String(m.value || '').trim() !== '' ? String(m.value) : '00';
|
||||
act(urlOf('due'), { due_at: date + ' ' + hh + ':' + mm + ':00' });
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 把面板里的最新状态**顺手**同步到首页那张卡上(v78)。
|
||||
*
|
||||
@@ -282,6 +235,49 @@
|
||||
act(urlOf('move'), { board: btn.getAttribute('data-board') || '0' });
|
||||
return;
|
||||
}
|
||||
/* 🔴 #76(用户 2026-11-05):「时间控件是对的,但是现在没有保存按钮…
|
||||
另外,负责人和分类都没法修改,按道理讲都应该可以修改才对。」
|
||||
|
||||
⇒ 「截止 / 负责人 / 分类」三项一次性提交。
|
||||
⚠️ 上一版是"选完截止时间立即保存"(监听 change),用户不认可 ——
|
||||
他要的是"改完点保存"这种确定感。
|
||||
⚠️ 只提交这三项,服务端 `Task::setAttrs()` 也只写这三列,
|
||||
不碰 title/note/status/repeat(见那个方法的注释)。 */
|
||||
if (what === 'save-attrs') {
|
||||
e.preventDefault();
|
||||
if (btn.disabled) { return; }
|
||||
var bd = bodyEl();
|
||||
if (!bd) { return; }
|
||||
var dbox = bd.querySelector('.dt-input[data-dt]');
|
||||
var dueVal = '';
|
||||
if (dbox) {
|
||||
var dt = dbox.querySelector('.dt-date');
|
||||
var dstr = dt ? String(dt.value || '').trim() : '';
|
||||
if (dstr !== '') {
|
||||
/* 截止时间是"日期 + 时刻":时分没选就补 00:00(与 readDT 同一口径) */
|
||||
var hh = dbox.querySelector('.dt-hour');
|
||||
var mm = dbox.querySelector('.dt-minute');
|
||||
var h2 = hh && String(hh.value || '').trim() !== '' ? String(hh.value) : '00';
|
||||
var m2 = mm && String(mm.value || '').trim() !== '' ? String(mm.value) : '00';
|
||||
dueVal = dstr + ' ' + h2 + ':' + m2 + ':00';
|
||||
}
|
||||
}
|
||||
var asg = bd.querySelector('select[name="assignee_id"]');
|
||||
var cat = bd.querySelector('select[name="category_id"]');
|
||||
var extra = {};
|
||||
/* ⚠️ 只有控件真的在 DOM 里才提交该项 —— 没有成员时负责人下拉不渲染,
|
||||
那时不该把它当成 0 去清掉原值。 */
|
||||
extra['due_at'] = dueVal;
|
||||
if (asg) { extra['assignee_id'] = asg.value; }
|
||||
if (cat) { extra['category_id'] = cat.value; }
|
||||
|
||||
btn.disabled = true;
|
||||
act(urlOf('save'), extra);
|
||||
/* 面板会被整块换掉(act → send → paint),按钮随之重建,不用手动恢复 */
|
||||
setTimeout(function () { btn.disabled = false; }, 4000);
|
||||
return;
|
||||
}
|
||||
|
||||
if (what === 'cmt-del') {
|
||||
e.preventDefault();
|
||||
if (!window.confirm('删掉这条留言?')) { return; }
|
||||
@@ -406,15 +402,4 @@
|
||||
step();
|
||||
}
|
||||
|
||||
/**
|
||||
* 对外暴露「给截止控件绑 change 监听」(#74)。
|
||||
*
|
||||
* 为什么需要:首次打开面板走的是 `entry_popup.js` 的 `loadPanel()`,
|
||||
* 那条路只 innerHTML、不经过本文件的 `paint()` ⇒ `bindDue()` 不会自动跑
|
||||
* ⇒ 用户选完截止时间不会保存(只有做过一次别的动作、触发过一次重画才会生效)。
|
||||
* `loadPanel()` 在插入 HTML 后显式调这个。
|
||||
*
|
||||
* ⚠️ 内部有 `data-fb-due-bound` 幂等标记,重复调用不会重复绑。
|
||||
*/
|
||||
window.fbTaskPanelBindDue = bindDue;
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user