3951 lines
202 KiB
JavaScript
3951 lines
202 KiB
JavaScript
/* 软件开发部 · 关键任务追踪看板 */
|
||
(function () {
|
||
"use strict";
|
||
|
||
const Ico = window.Icon;
|
||
|
||
const state = {
|
||
view: "board",
|
||
gran: "week",
|
||
weekId: null,
|
||
monthIdx: null,
|
||
categoryId: null,
|
||
keyword: "",
|
||
idle: "key",
|
||
showArchived: false,
|
||
meta: null,
|
||
periods: null,
|
||
categories: [],
|
||
board: null,
|
||
stats: null,
|
||
projects: [],
|
||
drawerProject: null,
|
||
// 详情抽屉：周期反馈的显示粒度 / 范围 / 往前翻页偏移
|
||
dw: { group: "week", range: 2, back: 0 },
|
||
// 定开项目
|
||
customMeta: null,
|
||
// 定开：项目明细 / 本周进展 两个 tab（原交付流水线 / 阶段看板 / 财务跟踪已下线）
|
||
customTab: "list",
|
||
customAnnualEdit: false, // 年度任务：默认查看模式，点「编辑」才可改
|
||
customRegion: "",
|
||
customStage: "",
|
||
customStatus: "",
|
||
customOrigin: "",
|
||
customSort: null, // { key: amount | sign_date | update_date, dir: asc | desc }
|
||
customArchived: "false",
|
||
customRows: [],
|
||
intakeType: "general",
|
||
// 更新录入的两种方式：direct = 直接写入（原样存 1 条）；ai = AI 整理（补结构化字段，也只存 1 条）
|
||
intakeMode: "direct",
|
||
intakePeriodId: null,
|
||
drawerCustom: null,
|
||
// 周看板（左栏总览 + 右栏详情）
|
||
weekly: null,
|
||
weeklySel: null,
|
||
// 项目管理
|
||
projOwner: "",
|
||
projIdleOnly: false,
|
||
// 每周重点工作
|
||
focusRows: [],
|
||
focusFilter: "week",
|
||
focusArchived: false,
|
||
// 人力资源库
|
||
staff: [],
|
||
staffDict: { groups: [], affiliations: [] },
|
||
staffArchived: "false",
|
||
staffGroup: "",
|
||
// 登录用户（含角色与菜单权限）；未登录时为 null
|
||
me: null,
|
||
};
|
||
|
||
/* ---------------------------------------------------------------- utils */
|
||
const $ = (sel) => document.querySelector(sel);
|
||
const $$ = (sel) => Array.prototype.slice.call(document.querySelectorAll(sel));
|
||
|
||
function esc(s) {
|
||
if (s === null || s === undefined) return "";
|
||
return String(s)
|
||
.replace(/&/g, "&")
|
||
.replace(/</g, "<")
|
||
.replace(/>/g, ">")
|
||
.replace(/"/g, """);
|
||
}
|
||
const nl2br = (s) => esc(s).replace(/\n/g, "<br>");
|
||
const money = (n) =>
|
||
n === null || n === undefined
|
||
? "—"
|
||
: "¥" + Number(n).toLocaleString("zh-CN", { maximumFractionDigits: 2 });
|
||
const wan = (n) =>
|
||
n === null || n === undefined ? "—" : (Number(n) / 10000).toFixed(1) + " 万";
|
||
const fen = (n) => (n === null || n === undefined ? "—" : (Number(n) / 10000).toFixed(2));
|
||
/** 重点标记：统一用星标图标，on = 已标重点 */
|
||
const starMark = (on, readonly, title) =>
|
||
`<span class="star${on ? " on" : ""}${readonly ? " readonly" : ""}"${title ? ` title="${esc(title)}"` : ""}>${Ico.svg("star")}</span>`;
|
||
|
||
async function api(path, opts) {
|
||
const res = await fetch("/api" + path, Object.assign({ headers: { "Content-Type": "application/json" } }, opts || {}));
|
||
if (!res.ok) {
|
||
let msg = res.statusText;
|
||
try { msg = (await res.json()).detail || msg; } catch (e) { /* ignore */ }
|
||
// 会话过期 / 被管理员下线：任何请求都直接把界面切回登录页
|
||
if (res.status === 401 && path !== "/auth/login") showAuthGate(msg);
|
||
const err = new Error(msg);
|
||
err.status = res.status;
|
||
throw err;
|
||
}
|
||
return res.json();
|
||
}
|
||
const post = (path, body) => api(path, { method: "POST", body: JSON.stringify(body) });
|
||
const put = (path, body) => api(path, { method: "PUT", body: JSON.stringify(body) });
|
||
const patch = (path, body) => api(path, { method: "PATCH", body: JSON.stringify(body) });
|
||
const del = (path) => api(path, { method: "DELETE" });
|
||
|
||
let toastTimer = null;
|
||
function toast(msg) {
|
||
const t = $("#toast");
|
||
t.textContent = msg;
|
||
t.classList.add("show");
|
||
clearTimeout(toastTimer);
|
||
toastTimer = setTimeout(() => t.classList.remove("show"), 2400);
|
||
}
|
||
|
||
/* ---------------------------------------------- 登录与菜单权限 */
|
||
/** 菜单权限：can = 能看（ro/rw），canW = 能改（只有 rw）。未登录一律 false。 */
|
||
function can(menu) {
|
||
return !!(state.me && state.me.menus && state.me.menus[menu]);
|
||
}
|
||
const canR = can;
|
||
function canW(menu) {
|
||
return !!(state.me && state.me.menus && state.me.menus[menu] === "rw");
|
||
}
|
||
|
||
function showAuthGate(msg) {
|
||
$("#authGate").classList.remove("hidden");
|
||
const box = $("#authErr");
|
||
box.textContent = msg || "";
|
||
box.style.display = msg ? "" : "none";
|
||
const f = $("#authPass").value ? $("#authOk") : ($("#authUser").value ? $("#authPass") : $("#authUser"));
|
||
setTimeout(() => f.focus(), 60);
|
||
}
|
||
|
||
function bindAuthForm() {
|
||
$("#authForm").addEventListener("submit", async (e) => {
|
||
e.preventDefault();
|
||
const btn = $("#authOk");
|
||
btn.disabled = true;
|
||
try {
|
||
await post("/auth/login", { username: $("#authUser").value.trim(), password: $("#authPass").value });
|
||
location.reload(); // 登录成功后整页重载，按新权限重新渲染
|
||
} catch (err) {
|
||
const box = $("#authErr");
|
||
box.textContent = err.message;
|
||
box.style.display = "";
|
||
btn.disabled = false;
|
||
}
|
||
});
|
||
}
|
||
|
||
/** 只保留有权限的菜单；顶栏「更新录入」按钮同样跟着 intake 权限走 */
|
||
function applyNavPermissions() {
|
||
$$("#nav .nav-item").forEach((b) => b.classList.toggle("hidden", !can(b.dataset.view)));
|
||
$$("#nav .nav-label").forEach((l) => {
|
||
let n = l.nextElementSibling, any = false;
|
||
while (n && !n.classList.contains("nav-label")) {
|
||
if (n.classList.contains("nav-item") && !n.classList.contains("hidden")) any = true;
|
||
n = n.nextElementSibling;
|
||
}
|
||
l.classList.toggle("hidden", !any);
|
||
});
|
||
$("#btnIntake").classList.toggle("hidden", !can("intake"));
|
||
}
|
||
|
||
/** 有权限的第一个菜单，用于回落 */
|
||
function firstAllowedView() {
|
||
const b = $$("#nav .nav-item").filter((x) => can(x.dataset.view))[0];
|
||
return b ? b.dataset.view : null;
|
||
}
|
||
|
||
/* ---------------------------------------- 侧栏底部的用户胶囊 */
|
||
function renderUserChip() {
|
||
const me = state.me;
|
||
$("#sideUser").innerHTML = `
|
||
<button class="user-chip" id="userChip">
|
||
<span class="avatar">${esc(String(me.name || me.username || "?").slice(0, 1))}</span>
|
||
<span class="u-text"><b>${esc(me.name || me.username)}</b><i>${esc(me.role_name || "未分配角色")}</i></span>
|
||
${Ico.svg("chevron-up", "ic")}
|
||
</button>
|
||
<div class="user-menu hidden" id="userMenu">
|
||
<button id="miProfile">${Ico.svg("sliders", "ic")}用户设置</button>
|
||
<button class="danger" id="miLogout">${Ico.svg("log-out", "ic")}退出登录</button>
|
||
</div>`;
|
||
const menu = $("#userMenu");
|
||
$("#userChip").addEventListener("click", (e) => { e.stopPropagation(); menu.classList.toggle("hidden"); });
|
||
document.addEventListener("click", () => menu.classList.add("hidden"));
|
||
$("#miProfile").addEventListener("click", openProfileDialog);
|
||
$("#miLogout").addEventListener("click", doLogout);
|
||
}
|
||
|
||
/** 用户设置：改昵称 + 改自己的密码；角色由管理员在权限管理里分配 */
|
||
function openProfileDialog() {
|
||
const me = state.me;
|
||
openModal(`
|
||
<div class="modal-head"><h3>用户设置</h3><button class="icon-btn" data-mclose title="关闭">${Ico.svg("x")}</button></div>
|
||
<div class="modal-body">
|
||
<div class="form-row"><label>姓名</label><input class="inp" id="pfName" value="${esc(me.name || "")}" data-autofocus style="width:100%" /></div>
|
||
<div class="form-row"><label>账号</label><div class="ro">${esc(me.username)}</div></div>
|
||
<div class="form-row"><label>角色</label><div class="ro">${esc(me.role_name || "未分配")} <span class="tag-mini">${(me.menus && Object.keys(me.menus).length) || 0} 个菜单</span></div></div>
|
||
<div class="sec-title" style="margin-top:16px">修改密码</div>
|
||
<div class="form-row"><label>原密码</label><input class="inp" id="pfOld" type="password" autocomplete="current-password" style="width:100%" /></div>
|
||
<div class="form-row"><label>新密码</label><input class="inp" id="pfNew" type="password" autocomplete="new-password" style="width:100%" /></div>
|
||
<div class="notice err" id="mErr" style="display:none"></div>
|
||
</div>
|
||
<div class="modal-foot">
|
||
<button class="btn" data-mclose>关闭</button>
|
||
<button class="btn primary" id="pfOk">保存</button>
|
||
</div>`);
|
||
$("#pfOk").addEventListener("click", async () => {
|
||
const btn = $("#pfOk");
|
||
btn.disabled = true;
|
||
modalError("");
|
||
try {
|
||
const name = $("#pfName").value.trim();
|
||
if (name && name !== me.name) state.me = await put("/auth/me", { name: name });
|
||
const nw = $("#pfNew").value.trim();
|
||
if (nw) await post("/auth/password", { old_password: $("#pfOld").value, new_password: nw });
|
||
renderUserChip();
|
||
closeModal(true);
|
||
toast(nw ? "已保存，其他设备需重新登录" : "已保存");
|
||
} catch (e) {
|
||
modalError(e.message);
|
||
btn.disabled = false;
|
||
}
|
||
});
|
||
}
|
||
|
||
async function doLogout() {
|
||
try { await post("/auth/logout", {}); } catch (e) { /* 会话可能已经失效，忽略 */ }
|
||
location.reload();
|
||
}
|
||
|
||
/* ------------------------------------------------ 列表页统一骨架 */
|
||
/** 卡头 = 列表页的子 header：标题+计数（左）、筛选 chip（紧跟标题）、操作按钮（最右）。
|
||
工具栏不再单独占一行，所有页面统一走这里。 */
|
||
function cardHead(o) {
|
||
const tools = [(o.fields || ""), (o.tools || "")].filter(Boolean).join("");
|
||
const cnt = o.count ? `<span class="cnt">${o.count}</span>` : "";
|
||
// chipsRow：切 tab 的 chip 独占一行 header（标题与当前 tab 同名，省掉，计数跟在 chip 后），
|
||
// 筛选器和主功能按钮放同一行。
|
||
if (o.chipsRow) {
|
||
return `<div class="card-head chips-row">
|
||
${o.chips ? `<div class="head-chips">${o.chips}${cnt}</div>` : ""}
|
||
${tools ? `<div class="head-tools">${tools}</div>` : ""}
|
||
</div>`;
|
||
}
|
||
return `<div class="card-head">
|
||
<h4><span class="t">${esc(o.title)}</span>${cnt}</h4>
|
||
${o.chips ? `<div class="head-chips">${o.chips}</div>` : ""}
|
||
${tools ? `<div class="head-tools">${tools}</div>` : ""}
|
||
</div>`;
|
||
}
|
||
|
||
function listCard(o) {
|
||
return `<div class="card">
|
||
${cardHead(o)}
|
||
${o.rows.length ? `<div class="tbl-wrap">${o.table}</div>` : `<div class="empty">${o.empty}</div>`}
|
||
</div>`;
|
||
}
|
||
|
||
/** 表格行内操作：全站统一「修改 / 归档 / 删除」三个图标按钮，名称点开详情。
|
||
事件属性名由调用方给出，沿用各表原有的绑定。 */
|
||
function rowOps(o) {
|
||
// 只读角色不给行内「修改 / 归档 / 删除」
|
||
if (!canW(state.view)) return "";
|
||
const b = (attr, icon, title, cls) =>
|
||
`<button class="icon-btn sm${cls ? " " + cls : ""}" ${attr} title="${esc(title)}">${Ico.svg(icon)}</button>`;
|
||
if (!o.edit && !o.archive && !o.remove) return "";
|
||
return `<span class="row-ops">` +
|
||
(o.edit ? b(o.edit, "pencil", "修改") : "") +
|
||
(o.archive ? b(o.archive + ` data-archived="${o.archived ? "1" : "0"}"`, "archive", o.archived ? "恢复" : "归档") : "") +
|
||
(o.remove ? b(o.remove, "trash", "删除", "danger") : "") +
|
||
`</span>`;
|
||
}
|
||
|
||
/* -------------------------------------- 周期记录（执行 / 交付）的新增·修改·删除 */
|
||
/** 记录条目右上角的操作按钮，鼠标移到条目上才显现 */
|
||
function updOps(kind, u) {
|
||
if (!canW(kind === "custom" ? "custom" : "projects")) return "";
|
||
return `<span class="u-ops">
|
||
<button class="icon-btn xs" data-uop="edit" data-ukind="${kind}" data-uid="${u.id}" title="修改这条记录">${Ico.svg("pencil")}</button>
|
||
<button class="icon-btn xs danger" data-uop="del" data-ukind="${kind}" data-uid="${u.id}" title="删除这条记录">${Ico.svg("trash")}</button>
|
||
</span>`;
|
||
}
|
||
|
||
/**
|
||
* 新增 / 修改一条周期记录，全站唯一入口（看板右栏、项目抽屉、定开抽屉共用）。
|
||
* kind = "project" 自研产品的执行记录，"custom" 定开项目的交付记录；
|
||
* 传 update 就是修改，否则在 periodId 下新建；写完调 onDone 刷新所在区域。
|
||
*/
|
||
function openUpdateDialog(o) {
|
||
const isP = o.kind !== "custom";
|
||
const u = o.update || null;
|
||
const weeks = state.periods.weeks || [];
|
||
const periodId = u ? u.period_id : o.periodId;
|
||
const stages = (state.customMeta && state.customMeta.stages) || [];
|
||
const nv = (v) => (v === null || v === undefined ? "" : String(v));
|
||
// 新建时沿用项目当前的状态 / 阶段：后端会按记录回写档案，别让默认值改坏台账
|
||
const defStatus = u ? u.status : o.status || "in_progress";
|
||
const defStage = u ? u.stage : o.stage || "";
|
||
// 计收 / 下单增量在库里存的是元，页面上统一按万元填写
|
||
const toWan = (v) => (v === null || v === undefined ? "" : (Number(v) / 10000).toFixed(2));
|
||
const fields = isP
|
||
? `<div class="form-row"><label>子任务</label><input class="inp" id="udTask" value="${esc(u ? u.task_name || "" : "")}" placeholder="留空记在整体进展下" style="width:100%" /></div>
|
||
<div class="form-row"><label>状态</label><select class="sel" id="udStatus" style="width:100%">
|
||
${(state.meta.statuses || []).map((s) => `<option value="${esc(s.code)}" ${s.code === defStatus ? "selected" : ""}>${esc(s.name)}</option>`).join("")}
|
||
</select></div>
|
||
<div class="form-row"><label>进度（%）</label><input class="inp" id="udProgress" type="number" min="0" max="100" value="${nv(u && u.progress)}" style="width:100%" /></div>`
|
||
: `<div class="form-row"><label>交付阶段</label><select class="sel" id="udStage" style="width:100%">
|
||
${stages.map((s) => `<option value="${esc(s.code)}" ${s.code === defStage ? "selected" : ""}>${esc(s.name)}</option>`).join("")}
|
||
</select></div>
|
||
<div class="form-row"><label>进度（%）</label><input class="inp" id="udProgress" type="number" min="0" max="100" value="${nv(u && u.progress)}" style="width:100%" /></div>
|
||
<div class="form-row"><label>本期新增计收（万元）</label><input class="inp" id="udRevenue" type="number" min="0" step="0.01" value="${toWan(u && u.revenue_delta)}" style="width:100%" /></div>
|
||
<div class="form-row"><label>本期新增下单（万元）</label><input class="inp" id="udAmount" type="number" min="0" step="0.01" value="${toWan(u && u.amount_delta)}" style="width:100%" /></div>`;
|
||
|
||
openModal(
|
||
`<div class="modal-head"><h3>${u ? "修改" : "添加"}${isP ? "执行记录" : "交付记录"}</h3><button class="icon-btn" data-mclose title="关闭">${Ico.svg("x")}</button></div>
|
||
<div class="modal-body">
|
||
<div class="form-grid">
|
||
<div class="form-row full"><label>周期 *</label><select class="sel" id="udPeriod" style="width:100%">
|
||
${weeks.map((w) => `<option value="${w.id}" ${w.id === periodId ? "selected" : ""}>${esc(w.full_label)}</option>`).join("")}
|
||
</select></div>
|
||
${fields}
|
||
<div class="form-row full"><label>内容 *</label><textarea class="inp" id="udContent" rows="5" data-autofocus style="width:100%">${esc(u ? u.content || u.summary || "" : "")}</textarea></div>
|
||
<div class="form-row full"><label>风险</label><textarea class="inp" id="udRisk" rows="2" style="width:100%">${esc(u ? u.risk || "" : "")}</textarea></div>
|
||
<div class="form-row full"><label>下一步</label><textarea class="inp" id="udNext" rows="2" style="width:100%">${esc(u ? u.next_step || "" : "")}</textarea></div>
|
||
</div>
|
||
<div class="notice err" id="mErr" style="display:none"></div>
|
||
</div>
|
||
<div class="modal-foot"><button class="btn" data-mclose>取消</button><button class="btn primary" id="mOk">${u ? "保存修改" : "添加"}</button></div>`
|
||
);
|
||
|
||
const numVal = (id) => { const el = $(id); return el.value === "" ? null : Number(el.value); };
|
||
const wanVal = (id) => { const el = $(id); return el.value === "" ? null : Math.round(Number(el.value) * 10000); };
|
||
$("#mOk").addEventListener("click", async () => {
|
||
const content = $("#udContent").value.trim();
|
||
if (!content) return modalError("请填写内容");
|
||
const btn = $("#mOk");
|
||
btn.disabled = true;
|
||
const body = {
|
||
period_id: Number($("#udPeriod").value),
|
||
content: content,
|
||
progress: numVal("#udProgress"),
|
||
risk: $("#udRisk").value.trim() || null,
|
||
next_step: $("#udNext").value.trim() || null,
|
||
};
|
||
try {
|
||
if (isP) {
|
||
body.status = $("#udStatus").value;
|
||
body.task_name = $("#udTask").value.trim();
|
||
if (u) await patch("/updates/" + u.id, body);
|
||
else await post("/updates", Object.assign({ project_id: o.projectId, source: "manual" }, body));
|
||
} else {
|
||
body.stage = $("#udStage").value;
|
||
body.revenue_delta = wanVal("#udRevenue");
|
||
body.amount_delta = wanVal("#udAmount");
|
||
if (u) await patch("/custom/updates/" + u.id, body);
|
||
else await post("/custom/updates", Object.assign({ custom_project_id: o.customProjectId, source: "manual" }, body));
|
||
}
|
||
} catch (e) {
|
||
btn.disabled = false;
|
||
return modalError(e.message);
|
||
}
|
||
closeModal();
|
||
toast(u ? "已修改" : "已添加");
|
||
await afterWrite();
|
||
if (o.onDone) await o.onDone();
|
||
});
|
||
}
|
||
|
||
/** 给一块区域里的周期记录绑上「修改 / 删除」。list 用来按 id 找回记录，reload 刷新这块区域。 */
|
||
function bindUpdateOps(root, list, reload) {
|
||
root.querySelectorAll("[data-uop]").forEach((b) =>
|
||
b.addEventListener("click", async () => {
|
||
const id = Number(b.dataset.uid);
|
||
const kind = b.dataset.ukind;
|
||
const u = (list || []).find((x) => x.id === id);
|
||
if (!u) return;
|
||
if (b.dataset.uop === "edit") {
|
||
openUpdateDialog({
|
||
kind: kind,
|
||
update: u,
|
||
projectId: u.project_id,
|
||
customProjectId: u.custom_project_id,
|
||
onDone: reload,
|
||
});
|
||
return;
|
||
}
|
||
const ok = await confirmDialog({
|
||
title: "删除这条记录？",
|
||
body: `<div class="notice err">删除后无法恢复。</div>
|
||
<div style="font-size:12.5px;color:var(--text-2);line-height:1.7">${esc([u.period_full, u.task_name || u.project_name].filter(Boolean).join(" · "))}</div>`,
|
||
okText: "永久删除",
|
||
danger: true,
|
||
});
|
||
if (!ok) return;
|
||
try {
|
||
await del(kind === "custom" ? "/custom/updates/" + id : "/updates/" + id);
|
||
} catch (e) { toast("删除失败：" + e.message); return; }
|
||
toast("已删除");
|
||
await afterWrite();
|
||
if (reload) await reload();
|
||
})
|
||
);
|
||
}
|
||
|
||
/** 页内搜索框：与右上角全局搜索共用 state.keyword */
|
||
function keywordInputHtml(id, placeholder, width) {
|
||
return `<input id="${id}" class="search" type="search" placeholder="${esc(placeholder)}" value="${esc(state.keyword)}" style="width:${width}px;height:30px" />`;
|
||
}
|
||
|
||
/** 绑定页内搜索。
|
||
默认：防抖实时搜索；opts.enter=true 时只在「回车 / 清空(×)」后才查询。
|
||
重绘后把光标放回搜索框，连续操作不中断。 */
|
||
function bindKeyword(id, opts) {
|
||
opts = opts || {};
|
||
const el = $("#" + id);
|
||
if (!el) return;
|
||
const apply = (v) => {
|
||
v = (v || "").trim();
|
||
if (v === state.keyword) return;
|
||
keywordFocus = true;
|
||
state.keyword = v;
|
||
$("#globalSearch").value = v;
|
||
refresh();
|
||
};
|
||
if (opts.enter) {
|
||
// 输入阶段不查询；回车提交后才检索
|
||
el.addEventListener("keydown", (e) => {
|
||
if (e.key === "Enter") { e.preventDefault(); apply(el.value); }
|
||
});
|
||
// type=search 的清除「×」会触发 search 事件
|
||
el.addEventListener("search", () => apply(el.value));
|
||
} else {
|
||
let t = null;
|
||
el.addEventListener("input", (e) => {
|
||
clearTimeout(t);
|
||
const v = e.target.value.trim();
|
||
t = setTimeout(() => apply(v), 320);
|
||
});
|
||
}
|
||
if (keywordFocus) {
|
||
keywordFocus = false;
|
||
el.focus();
|
||
el.setSelectionRange(el.value.length, el.value.length);
|
||
}
|
||
}
|
||
|
||
/* ---------------------------------------------------- 弹窗 / 确认框 */
|
||
let modalResolve = null;
|
||
|
||
function openModal(html, onMount) {
|
||
$("#modalMask").classList.add("open");
|
||
$("#modal").innerHTML = html;
|
||
if (onMount) onMount();
|
||
const f = $("#modal").querySelector("[data-autofocus]");
|
||
if (f) f.focus();
|
||
}
|
||
|
||
/** 关闭弹窗；result 省略时按「取消」处理 */
|
||
function closeModal(result) {
|
||
if (!$("#modalMask").classList.contains("open")) return;
|
||
$("#modalMask").classList.remove("open");
|
||
$("#modal").innerHTML = "";
|
||
const cb = modalResolve;
|
||
modalResolve = null;
|
||
if (cb) cb(result === undefined ? false : result);
|
||
}
|
||
|
||
function modalError(msg) {
|
||
const e = $("#mErr");
|
||
if (!e) return;
|
||
e.textContent = msg || "";
|
||
e.style.display = msg ? "" : "none";
|
||
}
|
||
|
||
/** 需要用户明确点确认才继续；requireText 时还必须逐字输入该文本 */
|
||
function confirmDialog(o) {
|
||
return new Promise((resolve) => {
|
||
openModal(
|
||
`<div class="modal-head"><h3>${esc(o.title)}</h3><button class="icon-btn" data-mclose title="关闭">${Ico.svg("x")}</button></div>
|
||
<div class="modal-body">
|
||
${o.body || ""}
|
||
${
|
||
o.requireText
|
||
? `<div class="form-row" style="margin-top:14px"><label>请输入<br><b>${esc(o.requireText)}</b></label>
|
||
<input class="inp" id="mConfirmText" data-autofocus placeholder="${esc(o.requirePlaceholder || "逐字输入项目名称")}" style="width:100%" /></div>`
|
||
: ""
|
||
}
|
||
<div class="notice err" id="mErr" style="display:none"></div>
|
||
</div>
|
||
<div class="modal-foot">
|
||
<button class="btn" data-mclose>${esc(o.cancelText || "取消")}</button>
|
||
<button class="btn ${o.danger ? "danger solid" : "primary"}" id="mOk" ${o.requireText ? "disabled" : ""}>${esc(o.okText || "确认")}</button>
|
||
</div>`
|
||
);
|
||
modalResolve = resolve;
|
||
$("#mOk").addEventListener("click", () => closeModal(true));
|
||
if (o.requireText) {
|
||
const t = $("#mConfirmText");
|
||
const ok = $("#mOk");
|
||
t.addEventListener("input", () => {
|
||
ok.disabled = t.value.trim() !== o.requireText;
|
||
});
|
||
t.addEventListener("keydown", (e) => {
|
||
if (e.key === "Enter" && !ok.disabled) closeModal(true);
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
function statusMeta(code) {
|
||
const list = (state.meta && state.meta.statuses) || [];
|
||
return list.find((s) => s.code === code) || { code, name: code, color: "#94a3b8" };
|
||
}
|
||
function statusPill(code) {
|
||
const s = statusMeta(code);
|
||
return `<span class="pill" style="background:${s.color}1a;color:${s.color}">${Ico.status(code)}${esc(s.name)}</span>`;
|
||
}
|
||
function catPill(cat) {
|
||
if (!cat) return `<span class="tag-mini">未分类</span>`;
|
||
return `<span class="tag-mini" style="background:${cat.color}18;color:${cat.color}">${esc(cat.name)}</span>`;
|
||
}
|
||
|
||
/** 规范省级行政区下拉（按大区分组）。selected 不在标准列表时补一个选项，避免丢值。 */
|
||
function regionOptions(selected, withEmpty) {
|
||
const groups = (state.customMeta && state.customMeta.region_groups) || [];
|
||
const all = groups.reduce((acc, g) => acc.concat(g.regions), []);
|
||
let html = withEmpty === false ? "" : `<option value="" ${!selected ? "selected" : ""}>（未标注）</option>`;
|
||
for (const g of groups) {
|
||
html += `<optgroup label="${esc(g.group)}">` +
|
||
g.regions.map((r) => `<option value="${esc(r)}" ${r === selected ? "selected" : ""}>${esc(r)}</option>`).join("") +
|
||
`</optgroup>`;
|
||
}
|
||
if (selected && all.indexOf(selected) < 0) {
|
||
html += `<option value="${esc(selected)}" selected>${esc(selected)}（非标准）</option>`;
|
||
}
|
||
return html;
|
||
}
|
||
|
||
/** 触发浏览器下载（导出 Excel） */
|
||
function download(url) {
|
||
const a = document.createElement("a");
|
||
a.href = url;
|
||
a.style.display = "none";
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
setTimeout(() => a.remove(), 1000);
|
||
toast("正在生成 Excel，请稍候…");
|
||
}
|
||
|
||
/**
|
||
* 负责人下拉。选项来自人力资源库：已归档人员不再出现在选项里，
|
||
* 只有他本来就是当前负责人时才带「（已归档）」标注出现一次，避免历史记录丢值；
|
||
* 库里没有的历史人名同样补一个选项，保证老数据不被改坏。
|
||
*/
|
||
function ownerSelectHtml(value, attrs) {
|
||
const cur = (value || "").trim();
|
||
let html = `<select class="sel" ${attrs || 'style="width:104px"'}>
|
||
<option value="">（未指定）</option>`;
|
||
state.staff.forEach((s) => {
|
||
if (s.archived && s.name !== cur) return;
|
||
html += `<option value="${esc(s.name)}" ${s.name === cur ? "selected" : ""}>${esc(s.name)}${s.archived ? "（已归档）" : ""}</option>`;
|
||
});
|
||
if (cur && !state.staff.some((s) => s.name === cur)) {
|
||
html += `<option value="${esc(cur)}" selected>${esc(cur)}（不在花名册）</option>`;
|
||
}
|
||
return html + `</select>`;
|
||
}
|
||
|
||
/**
|
||
* 多负责人 / 团队成员的可编辑名单：人名下拉（选项来自人力资源库）横向排开、自动换行，
|
||
* 不分主次，每个人都能删；「＋ 添加」紧跟在名单末尾。
|
||
* 增删按钮的事件统一委托在 #drawerBody 上（见 bindDrawerPeople）。
|
||
*/
|
||
function peopleEditorHtml(id, label, values, opts) {
|
||
const list = values && values.length ? values : [""];
|
||
const rows = list
|
||
.map(
|
||
(n) => `
|
||
<div class="people-row">
|
||
${ownerSelectHtml(n, 'style="width:118px"')}
|
||
<button class="btn sm ghost people-del" type="button" data-pdel title="移除">${Ico.svg("x")}</button>
|
||
</div>`,
|
||
)
|
||
.join("");
|
||
return `
|
||
<div class="form-row top">
|
||
<label>${label}</label>
|
||
<div>
|
||
<div class="people-rows" id="${id}">${rows}
|
||
<button class="btn sm ghost" type="button" data-padd="${id}">${Ico.svg("plus")}添加${opts.add}</button>
|
||
</div>
|
||
${opts.hint ? `<div class="sec-hint" style="margin:6px 0 0">${opts.hint}</div>` : ""}
|
||
</div>
|
||
</div>`;
|
||
}
|
||
|
||
/** 读回名单里的人名（按行序，空行忽略） */
|
||
function peopleValues(id) {
|
||
return $$("#" + id + " select").map((x) => x.value.trim()).filter(Boolean);
|
||
}
|
||
|
||
/** 名单增删：抽屉里所有「多负责人 / 团队成员」共用一个委托 */
|
||
function bindDrawerPeople() {
|
||
$("#drawerBody").addEventListener("click", (e) => {
|
||
const add = e.target.closest("[data-padd]");
|
||
if (add) {
|
||
const box = document.getElementById(add.dataset.padd);
|
||
if (!box) return;
|
||
const row = document.createElement("div");
|
||
row.className = "people-row";
|
||
row.innerHTML =
|
||
ownerSelectHtml("", 'style="width:130px"') +
|
||
`<button class="btn sm ghost people-del" type="button" data-pdel title="移除">${Ico.svg("x")}</button>`;
|
||
box.insertBefore(row, add);
|
||
row.querySelector("select").focus();
|
||
return;
|
||
}
|
||
const del = e.target.closest("[data-pdel]");
|
||
if (del) del.closest(".people-row").remove();
|
||
});
|
||
}
|
||
|
||
/** 只读名单：小标签一排 */
|
||
function nameChips(list) {
|
||
return (list || []).length
|
||
? list.map((n) => `<span class="tag-mini">${esc(n)}</span>`).join(" ")
|
||
: "—";
|
||
}
|
||
|
||
/** 拉一次花名册，供各处「负责人」下拉使用 */
|
||
async function loadStaff() {
|
||
if (!canR("staff")) return null; // 没有花名册权限时不请求，负责人下拉留空
|
||
const d = await api("/staff?archived=all");
|
||
state.staff = d.items;
|
||
state.staffDict = d.dict;
|
||
return d;
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- scope */
|
||
function scopeQuery(extra) {
|
||
const p = [];
|
||
if (state.gran === "week") {
|
||
if (state.weekId) p.push("period_id=" + state.weekId);
|
||
} else {
|
||
const m = currentMonth();
|
||
if (m) p.push("year=" + m.year, "month=" + m.month);
|
||
}
|
||
if (state.keyword) p.push("keyword=" + encodeURIComponent(state.keyword));
|
||
if (extra) p.push.apply(p, extra);
|
||
return p.length ? "?" + p.join("&") : "";
|
||
}
|
||
function currentMonth() {
|
||
if (!state.periods || state.monthIdx === null) return null;
|
||
return state.periods.months[state.monthIdx] || null;
|
||
}
|
||
function scopePeriodIds() {
|
||
if (state.gran === "week") return state.weekId ? [state.weekId] : [];
|
||
const m = currentMonth();
|
||
return m ? m.period_ids : [];
|
||
}
|
||
/** 顶栏当前选中周期（周 = 那一周，月 = 该月各周的并集）的实际起止日期，口径同后端 /periods */
|
||
function scopeRange() {
|
||
if (state.gran === "week") {
|
||
const w = (state.periods.weeks || []).find((x) => x.id === state.weekId);
|
||
return w && w.first_day ? { start: w.first_day, end: w.last_day, label: w.full_label } : null;
|
||
}
|
||
const m = currentMonth();
|
||
return m && m.first_day ? { start: m.first_day, end: m.last_day, label: m.label } : null;
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- charts */
|
||
function barChart(items, opts) {
|
||
opts = opts || {};
|
||
const W = 660, H = opts.height || 190, padL = 34, padB = 30, padT = 14;
|
||
const innerW = W - padL - 12, innerH = H - padB - padT;
|
||
const max = Math.max(1, ...items.map((d) => d.value));
|
||
const n = items.length || 1;
|
||
const slot = innerW / n;
|
||
const bw = Math.min(38, slot * 0.6);
|
||
let bars = "";
|
||
items.forEach((d, i) => {
|
||
const h = Math.max(2, (d.value / max) * innerH);
|
||
const x = padL + slot * i + (slot - bw) / 2;
|
||
const y = padT + innerH - h;
|
||
bars += `<rect x="${x.toFixed(1)}" y="${y.toFixed(1)}" width="${bw.toFixed(1)}" height="${h.toFixed(1)}" rx="3" fill="${d.color || "#2563eb"}" opacity="${d.dim ? .45 : .9}"><title>${esc(d.label)}: ${d.value}${esc(opts.unit || "")}</title></rect>`;
|
||
if (d.value > 0) {
|
||
bars += `<text x="${(x + bw / 2).toFixed(1)}" y="${(y - 4).toFixed(1)}" font-size="10" fill="#7a8394" text-anchor="middle">${d.value}</text>`;
|
||
}
|
||
bars += `<text x="${(padL + slot * i + slot / 2).toFixed(1)}" y="${(H - 10).toFixed(1)}" font-size="10" fill="#7a8394" text-anchor="middle">${esc(d.label)}</text>`;
|
||
});
|
||
let grid = "";
|
||
for (let g = 0; g <= 3; g++) {
|
||
const y = padT + (innerH / 3) * g;
|
||
grid += `<line x1="${padL}" y1="${y.toFixed(1)}" x2="${W - 8}" y2="${y.toFixed(1)}" stroke="#eef0f4"/>`;
|
||
grid += `<text x="4" y="${(y + 3).toFixed(1)}" font-size="9" fill="#aeb5c2">${Math.round(max - (max / 3) * g)}</text>`;
|
||
}
|
||
return `<svg class="svg-chart" viewBox="0 0 ${W} ${H}" preserveAspectRatio="xMidYMid meet">${grid}${bars}</svg>`;
|
||
}
|
||
|
||
function donutChart(items) {
|
||
const total = items.reduce((a, b) => a + b.value, 0) || 1;
|
||
const r = 58, cx = 80, cy = 80, C = 2 * Math.PI * r;
|
||
let acc = 0, segs = "";
|
||
items.forEach((d) => {
|
||
const len = (d.value / total) * C;
|
||
segs += `<circle cx="${cx}" cy="${cy}" r="${r}" fill="none" stroke="${d.color}" stroke-width="22" stroke-dasharray="${len.toFixed(2)} ${(C - len).toFixed(2)}" stroke-dashoffset="${(-acc).toFixed(2)}" transform="rotate(-90 ${cx} ${cy})"><title>${esc(d.name)}: ${d.value}</title></circle>`;
|
||
acc += len;
|
||
});
|
||
return `<svg class="svg-chart" viewBox="0 0 160 160" style="max-width:190px;margin:0 auto">
|
||
${segs}
|
||
<text x="80" y="76" text-anchor="middle" font-size="22" font-weight="700" fill="#1f2430">${total}</text>
|
||
<text x="80" y="95" text-anchor="middle" font-size="10" fill="#7a8394">项目总数</text>
|
||
</svg>`;
|
||
}
|
||
|
||
function stackBar(items) {
|
||
const total = items.reduce((a, b) => a + b.count, 0) || 1;
|
||
let x = 0, segs = "";
|
||
items.filter((i) => i.count > 0).forEach((d) => {
|
||
const w = (d.count / total) * 100;
|
||
segs += `<rect x="${x.toFixed(2)}%" y="0" width="${w.toFixed(2)}%" height="14" fill="${d.color}"><title>${esc(d.name)}: ${d.count}</title></rect>`;
|
||
x += w;
|
||
});
|
||
return `<svg class="svg-chart" viewBox="0 0 100 14" preserveAspectRatio="none" style="height:14px;border-radius:99px;overflow:hidden">${segs}</svg>`;
|
||
}
|
||
|
||
function barList(rows) {
|
||
return rows.map((r) => `
|
||
<div class="bar-row">
|
||
<div class="b-name" title="${esc(r.name)}">${r.is_key ? starMark(true) + " " : ""}${esc(r.name)}</div>
|
||
<div class="b-track"><i style="width:${Math.min(100, r.progress)}%;background:${r.color}"></i></div>
|
||
<div class="b-val">${r.progress}${r.estimated ? "*" : ""}</div>
|
||
</div>`).join("");
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- periods */
|
||
async function createNewPeriod() {
|
||
const label = prompt("新建周期（格式如：9月第1周）\n年份会自动接在最新周期之后，也可写成 2027年1月第1周", "");
|
||
if (!label || !label.trim()) return null;
|
||
try {
|
||
const r = await post("/periods", { label: label.trim() });
|
||
await loadPeriods();
|
||
state.gran = "week";
|
||
state.weekId = r.period.id;
|
||
state.intakePeriodId = r.period.id;
|
||
$$("#granSeg .seg-btn").forEach((x) => x.classList.toggle("active", x.dataset.gran === "week"));
|
||
renderPeriodSelect();
|
||
toast(r.created ? `已新增周期 ${r.period.full_label}` : `周期 ${r.period.full_label} 已存在，已切换`);
|
||
return r.period.id;
|
||
} catch (err) {
|
||
toast("新建周期失败：" + err.message);
|
||
return null;
|
||
}
|
||
}
|
||
|
||
async function loadPeriods() {
|
||
state.periods = await api("/periods");
|
||
if (!state.periods.weeks.length) return;
|
||
// 刷新后恢复的周期可能已经被删除/重建，不在列表里就回落到今天所在的周（没有就取最新一期）
|
||
if (!state.periods.weeks.some((w) => w.id === state.weekId)) {
|
||
state.weekId = state.periods.today_id || state.periods.weeks[state.periods.weeks.length - 1].id;
|
||
}
|
||
if (state.monthIdx === null || state.monthIdx >= state.periods.months.length) {
|
||
state.monthIdx = state.periods.months.length - 1;
|
||
}
|
||
renderPeriodSelect();
|
||
}
|
||
|
||
function renderPeriodSelect() {
|
||
saveUI();
|
||
const sel = $("#periodSelect");
|
||
if (!state.periods) return;
|
||
if (state.gran === "week") {
|
||
sel.innerHTML =
|
||
state.periods.weeks
|
||
.map((w) => `<option value="${w.id}" ${w.id === state.weekId ? "selected" : ""}>${esc(w.full_label)}</option>`)
|
||
.join("") + `<option value="__new">＋ 新建周期…</option>`;
|
||
} else {
|
||
sel.innerHTML = state.periods.months
|
||
.map((m, i) => `<option value="${i}" ${i === state.monthIdx ? "selected" : ""}>${esc(m.label)}（${m.week_count} 周）</option>`)
|
||
.join("");
|
||
}
|
||
$("#periodHint").textContent = state.gran === "week" ? "" : "月视图 · 自动汇总该月所有周";
|
||
}
|
||
|
||
function shiftPeriod(delta) {
|
||
if (state.gran === "week") {
|
||
const arr = state.periods.weeks;
|
||
let i = arr.findIndex((w) => w.id === state.weekId);
|
||
i = Math.min(arr.length - 1, Math.max(0, i + delta));
|
||
state.weekId = arr[i].id;
|
||
} else {
|
||
let i = state.monthIdx + delta;
|
||
i = Math.min(state.periods.months.length - 1, Math.max(0, i));
|
||
state.monthIdx = i;
|
||
}
|
||
renderPeriodSelect();
|
||
refresh();
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- dashboard */
|
||
/** 统计概览（原「执行面板」）：折进工作看板底部，不再占一个主导航位 */
|
||
async function dashboardHtml() {
|
||
const s = await api("/stats" + scopeQuery());
|
||
state.stats = s;
|
||
const k = s.kpi;
|
||
const trend = s.trend.map((t) => {
|
||
const cur = scopePeriodIds().indexOf(t.period_id) >= 0;
|
||
return { label: `${t.month}/${t.week || ""}`, value: t.update_count, color: cur ? "#2563eb" : "#93b4f5", dim: !cur };
|
||
});
|
||
|
||
return `
|
||
<div class="grid kpi" style="margin-bottom:16px">
|
||
<div class="kpi accent-blue">${Ico.badge("layers")}<div class="k-label">在管项目</div><div class="k-value">${k.project_total}</div><div class="k-foot">重点项目 ${k.key_total} 个</div></div>
|
||
<div class="kpi accent-violet"><div class="k-label">执行记录</div><div class="k-value">${k.update_count}</div><div class="k-foot">覆盖项目 ${k.covered_projects} / ${k.project_total}</div></div>
|
||
<div class="kpi accent-green">${Ico.badge("gauge")}<div class="k-label">平均进度</div><div class="k-value">${k.avg_progress}%</div></div>
|
||
<div class="kpi accent-amber">${Ico.badge("alert")}<div class="k-label">风险 / 阻塞</div><div class="k-value">${k.risk_count}</div></div>
|
||
<div class="kpi accent-red">${Ico.badge("alert-circle")}<div class="k-label">重点项目未更新</div><div class="k-value">${s.idle_key.length}</div></div>
|
||
</div>
|
||
|
||
<div class="grid g2" style="margin-bottom:16px">
|
||
<div class="card">
|
||
<div class="card-head"><h4>周期更新活跃度</h4></div>
|
||
<div class="card-body">${barChart(trend, { unit: " 条" })}</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-head"><h4>项目分类分布</h4></div>
|
||
<div class="card-body">
|
||
<div style="display:flex;gap:18px;align-items:center;flex-wrap:wrap">
|
||
<div style="flex:0 0 190px">${donutChart(s.category_dist.map((c) => ({ name: c.name, color: c.color, value: c.count })))}</div>
|
||
<div class="legend" style="flex-direction:column;gap:6px;flex:1">
|
||
${s.category_dist.map((c) => `<div><i style="background:${c.color}"></i>${esc(c.name)} <b>${c.count}</b></div>`).join("")}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid g2e" style="margin-bottom:16px">
|
||
<div class="card">
|
||
<div class="card-head"><h4>执行状态分布</h4></div>
|
||
<div class="card-body">
|
||
${stackBar(s.status_dist)}
|
||
<div class="legend">${s.status_dist.map((x) => `<span><i style="background:${x.color}"></i>${esc(x.name)} ${x.count}</span>`).join("")}</div>
|
||
<div class="sec-title" style="margin-top:18px">进度领先 Top 10</div>
|
||
${barList(s.top_progress)}
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-head"><h4>风险与阻塞</h4></div>
|
||
<div class="card-body" style="max-height:330px;overflow:auto">
|
||
${s.risks.length ? s.risks.map((r) => `
|
||
<div class="upd-item">
|
||
<div class="u-head">
|
||
<span class="u-task">${esc(r.project_name)}</span>${statusPill(r.status)}
|
||
<span class="tag-mini">${esc(r.period_label || "")}</span>
|
||
</div>
|
||
<div class="u-body">${nl2br(r.risk || r.content || "")}</div>
|
||
</div>`).join("") : `<div class="empty">本周期暂无风险上报</div>`}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid g2">
|
||
<div class="card">
|
||
<div class="card-head"><h4>低进度预警</h4></div>
|
||
<div class="card-body">${s.low_progress.length ? barList(s.low_progress) : `<div class="empty">暂无</div>`}</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-head"><h4>最近更新</h4></div>
|
||
<div class="card-body" style="max-height:300px;overflow:auto">
|
||
${s.recent_updates.length ? s.recent_updates.map((u) => `
|
||
<div class="upd-item">
|
||
<div class="u-head"><span class="u-task">${esc(u.project_name)}</span>${statusPill(u.status)}<span class="tag-mini">${esc(u.task_name || "")}</span><span class="tag-mini">${esc(u.period_label || "")}</span></div>
|
||
<div class="u-body">${nl2br((u.summary || u.content || "").slice(0, 160))}</div>
|
||
</div>`).join("") : `<div class="empty">暂无</div>`}
|
||
</div>
|
||
</div>
|
||
</div>`;
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- 周看板 */
|
||
/** 左栏一行：重点项目 / 定开项目共用 */
|
||
function weeklyItem(r) {
|
||
const sel = state.weeklySel;
|
||
const active = sel && sel.kind === r.kind && sel.id === r.id;
|
||
const color = r.kind === "project"
|
||
? ((r.category && r.category.color) || "#2563eb")
|
||
: stageMeta(r.stage).color;
|
||
const badge = r.has_update
|
||
? `<span class="tag-mini" style="background:#e9f7ef;color:#16a34a">${r.update_count} 条</span>`
|
||
: `<span class="tag-mini" style="background:#fdecec;color:#dc2626">未更新</span>`;
|
||
return `
|
||
<div class="wk-item ${active ? "active" : ""}" style="--c:${color}" data-wk="${r.kind}:${r.id}">
|
||
<div class="wk-i-top">
|
||
<span class="wk-i-name">${r.is_key ? starMark(true) : ""}${esc(r.name)}</span>
|
||
${badge}
|
||
</div>
|
||
<div class="wk-i-meta">
|
||
${r.kind === "project" ? statusPill(r.status) : stagePill(r.stage)}
|
||
<span class="tag-mini">${esc(r.owner || "未指派")}</span>
|
||
${r.kind === "project"
|
||
? `<span class="tag-mini">${r.progress}%</span>`
|
||
: `<span class="tag-mini">${fen(r.amount)} 万</span>`}
|
||
${r.risks.length ? `<span class="tag-mini" style="background:#fff4e0;color:#b45309">风险 ${r.risks.length}</span>` : ""}
|
||
</div>
|
||
</div>`;
|
||
}
|
||
|
||
/** 交付环节步骤条：日期可直接补录，补了日期后端会自动推进商务阶段 */
|
||
function pipelineBar(p, readonly) {
|
||
const steps = (state.customMeta && state.customMeta.pipeline) || [];
|
||
return `<div class="pipe">
|
||
${steps.map((s, i) => `
|
||
${i ? `<div class="pipe-arrow">${Ico.svg("chevron-right")}</div>` : ""}
|
||
<div class="pipe-step ${p[s.date_field] ? "done" : ""} ${p.stage === s.stage ? "now" : ""}" style="--c:${s.color}">
|
||
<div class="pipe-name">${Ico.pipe(s.code)}${esc(s.name)}</div>
|
||
${readonly
|
||
? `<div class="pipe-date ${p[s.date_field] ? "" : "none"}">${p[s.date_field] ? esc(p[s.date_field]) : "未填"}</div>`
|
||
: `<input class="inp" type="date" data-cf="${s.date_field}" value="${p[s.date_field] || ""}" />`}
|
||
</div>`).join("")}
|
||
</div>`;
|
||
}
|
||
|
||
/** 一条执行 / 交付记录；传 kind 才给行内「修改 / 删除」 */
|
||
function updateItem(u, kind) {
|
||
return `
|
||
<div class="upd-item">
|
||
<div class="u-head">
|
||
<span class="u-task">${esc(u.task_name || u.period_full || "记录")}</span>
|
||
${u.stage ? stagePill(u.stage) : statusPill(u.status)}
|
||
${u.progress !== null && u.progress !== undefined ? `<span class="tag-mini">${u.progress}%</span>` : ""}
|
||
${u.task_name && u.period_full ? `<span class="tag-mini">${esc(u.period_label || "")}</span>` : ""}
|
||
${kind ? updOps(kind, u) : ""}
|
||
</div>
|
||
<div class="u-body">${nl2br(u.summary || u.content || "（无正文）")}</div>
|
||
${u.risk ? `<div class="u-risk">${Ico.svg("alert-circle")}<div>${nl2br(u.risk)}</div></div>` : ""}
|
||
${u.next_step ? `<div class="u-next">${Ico.svg("arrow-right")}<div>${nl2br(u.next_step)}</div></div>` : ""}
|
||
</div>`;
|
||
}
|
||
|
||
function weeklyHead(row) {
|
||
const isP = row.kind === "project";
|
||
const color = isP ? ((row.category && row.category.color) || "#2563eb") : stageMeta(row.stage).color;
|
||
const menu = isP ? "projects" : "custom";
|
||
return `
|
||
<div class="wk-head" style="--c:${color}">
|
||
<div class="wk-head-main">
|
||
<div class="wk-head-title">${Ico.badge(isP ? Ico.nameOfStatus(row.status) : Ico.nameOfStage(row.stage))}${row.is_key ? starMark(true) : ""}${esc(row.name)}</div>
|
||
<div class="wk-i-meta">
|
||
${isP ? catPill(row.category) + " " + statusPill(row.status) : stagePill(row.stage)}
|
||
<span class="tag-mini">${esc(row.owner || "未指派")}</span>
|
||
<span class="tag-mini">最近更新 ${esc(row.last_update || "尚无记录")}</span>
|
||
${row.idle_weeks ? `<span class="tag-mini" style="background:#fff4e0;color:#b45309">已 ${row.idle_weeks} 周没更新</span>` : ""}
|
||
</div>
|
||
</div>
|
||
<div class="wk-head-ops">
|
||
${canW(menu) ? `<button class="btn sm primary" id="wkAddUpd">${Ico.svg("plus")}${isP ? "添加执行记录" : "添加交付记录"}</button>` : ""}
|
||
<button class="btn sm" id="wkDrawer">完整详情</button>
|
||
</div>
|
||
</div>`;
|
||
}
|
||
|
||
/* 右栏：常规项目详情 */
|
||
async function weeklyProjectDetail(row) {
|
||
const d = await api("/projects/" + row.id);
|
||
const p = d.project;
|
||
const color = (p.category && p.category.color) || "#2563eb";
|
||
const trend = d.timeline.slice(-8).reverse();
|
||
return `
|
||
${weeklyHead(row)}
|
||
<div class="sec">
|
||
<div class="sec-title">本期执行记录（${row.updates.length}）</div>
|
||
${row.updates.length
|
||
? row.updates.map((x) => updateItem(x, "project")).join("")
|
||
: `<div class="notice warn">本周期还没有执行记录。重点项目每周都要更新一次，点上方「添加执行记录」补上。</div>`}
|
||
</div>
|
||
|
||
<div class="sec">
|
||
<div class="sec-title">进度与状态</div>
|
||
<div class="progress"><i style="width:${Math.min(100, row.progress)}%;background:${color}"></i></div>
|
||
<div class="progress-label"><span>整体进度</span><span>${row.progress}%</span></div>
|
||
${d.tasks.length ? `<div class="inline-fields" style="margin-top:10px">${d.tasks.map((t) => `<span class="tag-mini">${esc(t.name)}</span>`).join("")}</div>` : ""}
|
||
</div>
|
||
|
||
${trend.length ? `
|
||
<div class="sec">
|
||
<div class="sec-title">近 ${trend.length} 期趋势</div>
|
||
${trend.map((t) => `
|
||
<div class="timeline-row">
|
||
<div class="t-label">${esc(t.period.full_label.replace(/^\d+年/, ""))}</div>
|
||
<div style="flex:1">${statusPill(t.status)}${t.progress !== null ? ` <span class="tag-mini">${t.progress}%</span>` : ""}
|
||
<span class="tag-mini">${t.updates.length} 条</span></div>
|
||
</div>`).join("")}
|
||
</div>` : ""}`;
|
||
}
|
||
|
||
/* 右栏：定开项目详情（交付环节 + 财务） */
|
||
async function weeklyCustomDetail(row) {
|
||
const d = await api("/custom/projects/" + row.id);
|
||
const p = d.project;
|
||
const hist = d.updates.slice(-5).reverse();
|
||
return `
|
||
${weeklyHead(row)}
|
||
<div class="sec">
|
||
<div class="sec-title">交付环节</div>
|
||
${pipelineBar(p, !canW("custom"))}
|
||
${p.remark ? `<div class="kcard-remark" style="margin-top:10px">${nl2br(p.remark)}</div>` : ""}
|
||
</div>
|
||
|
||
<div class="sec">
|
||
<div class="sec-title">财务跟踪</div>
|
||
<div class="grid kpi" style="gap:10px;grid-template-columns:repeat(auto-fit,minmax(132px,1fr))">
|
||
<div class="kpi">${Ico.badge("wallet")}<div class="k-label">合同额</div><div class="k-value" style="font-size:18px">${wan(p.amount)}</div></div>
|
||
<div class="kpi">${Ico.badge("receipt")}<div class="k-label">可确认收入</div><div class="k-value" style="font-size:18px">${wan(p.confirmed_amount)}</div><div class="k-foot">${p.revenue_ratio}%</div></div>
|
||
<div class="kpi">${Ico.badge("wallet")}<div class="k-label">已计收</div><div class="k-value" style="font-size:18px">${wan(p.revenue_amount)}</div></div>
|
||
<div class="kpi">${Ico.badge("hourglass")}<div class="k-label">待计收</div><div class="k-value" style="font-size:18px">${wan(p.pending_amount)}</div></div>
|
||
</div>
|
||
<div class="inline-fields" style="margin-top:12px">
|
||
<label class="field-mini">开票金额<input class="inp" type="number" data-cf="invoice_amount" value="${p.invoice_amount === null ? "" : p.invoice_amount}" style="width:110px;text-align:right" /></label>
|
||
<label class="field-mini">已回款<input class="inp" type="number" data-cf="received_amount" value="${p.received_amount === null ? "" : p.received_amount}" style="width:110px;text-align:right" /></label>
|
||
<span class="tag-mini" style="background:#fff4e0;color:#b45309">待开票 ${fen(p.pending_invoice)} 万 · 待回款 ${fen(p.pending_received)} 万</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sec">
|
||
<div class="sec-title">本期交付记录（${row.updates.length}）</div>
|
||
${row.updates.length
|
||
? row.updates.map((x) => updateItem(x, "custom")).join("")
|
||
: `<div class="notice ${row.is_key ? "warn" : "info"}">本周期没有交付记录。</div>`}
|
||
</div>
|
||
|
||
${hist.length ? `
|
||
<div class="sec">
|
||
<div class="sec-title">更早的交付记录</div>
|
||
${hist.map((u) => `
|
||
<div class="timeline-row">
|
||
<div class="t-label">${esc((u.period_full || "").replace(/^\d+年/, ""))}</div>
|
||
<div style="flex:1">${stagePill(u.stage)}${u.revenue_delta ? ` <span class="tag-mini" style="background:#e9f7ef;color:#16a34a">计收 ${fen(u.revenue_delta)}万</span>` : ""}</div>
|
||
</div>`).join("")}
|
||
</div>` : ""}`;
|
||
}
|
||
|
||
function bindWeeklyDetail(box, row) {
|
||
// 写入后 afterWrite() 会重绘看板并保留当前选中项，这里不用再自己刷新
|
||
const add = $("#wkAddUpd");
|
||
if (add) add.addEventListener("click", () =>
|
||
openUpdateDialog({
|
||
kind: row.kind, periodId: state.weekId, projectId: row.id, customProjectId: row.id,
|
||
status: row.status, stage: row.stage,
|
||
})
|
||
);
|
||
bindUpdateOps(box, row.updates);
|
||
const dw = $("#wkDrawer");
|
||
if (dw) dw.addEventListener("click", () =>
|
||
row.kind === "project" ? openDrawer(row.id) : openCustomDrawer(row.id)
|
||
);
|
||
box.querySelectorAll("[data-cf]").forEach((inp) => {
|
||
if (!canW("custom")) { inp.disabled = true; return; }
|
||
inp.addEventListener("change", async () => {
|
||
const f = inp.dataset.cf;
|
||
let v = inp.value;
|
||
if (f === "invoice_amount" || f === "received_amount") v = v === "" ? null : Number(v);
|
||
try {
|
||
await patch("/custom/projects/" + row.id, { [f]: v });
|
||
toast("已保存");
|
||
await afterWrite();
|
||
} catch (e) { toast("保存失败：" + e.message); }
|
||
});
|
||
});
|
||
}
|
||
|
||
/** 定开项目本周动态里的一条：整行可点，点进去看该项目详情 */
|
||
function weeklyCustomRow(r, tag) {
|
||
return `
|
||
<div class="wk-item" style="--c:${stageMeta(r.stage).color}" data-cpick="${r.id}">
|
||
<div class="wk-i-top">
|
||
<span class="wk-i-name">${r.is_key ? starMark(true) : ""}${esc(r.name)}</span>
|
||
${tag || ""}
|
||
</div>
|
||
<div class="wk-i-meta">
|
||
${stagePill(r.stage)}
|
||
<span class="tag-mini">${esc(r.owner || "未指派")}</span>
|
||
<span class="tag-mini">${fen(r.amount)} 万</span>
|
||
${r.period_revenue_delta ? `<span class="tag-mini" style="background:#e9f7ef;color:#16a34a">计收 ${fen(r.period_revenue_delta)} 万</span>` : ""}
|
||
${(r.risks || []).length ? `<span class="tag-mini" style="background:#fff4e0;color:#b45309">风险 ${(r.risks || []).length}</span>` : ""}
|
||
</div>
|
||
${r.summary ? `<div class="wk-i-sub">${esc(String(r.summary).replace(/\s+/g, " ").slice(0, 90))}</div>` : ""}
|
||
</div>`;
|
||
}
|
||
|
||
/** 右栏：定开项目本周动态。左栏的「定开项目」只给入口，清单都收在这里 */
|
||
function weeklyCustomOverview(data) {
|
||
// 「本周新增 / 本周验收」与定开项目的「本周进展」tab 共用同一套口径
|
||
const { added, accepted, listed } = customWeeklySections(data.custom, scopeRange());
|
||
// 高风险取全部在档项目：/weekly 的 custom 只有本期有动态的，取全量才不会漏
|
||
const risky = (state.customAll || data.custom).filter((r) => isHighRisk(r))
|
||
.sort((a, b) => Number(b.amount || 0) - Number(a.amount || 0));
|
||
const RISK_SHOW = 10; // 高风险项目可能几十条，卡片里按合同额只显示前若干个
|
||
// 合计只算列出来的行（同一项目可能同时出现在新增与验收两段，这里按 id 去重），免得数字对不上清单
|
||
const sum = listed.reduce((a, r) => a + Number(r.amount || 0), 0);
|
||
const sec = (title, sub, list, tag) => `
|
||
<div class="sec">
|
||
<div class="sec-title">${title}</div>
|
||
${list.length ? list.map((r) => weeklyCustomRow(r, tag(r))).join("")
|
||
: `<div class="empty" style="padding:14px 4px;font-size:12px">本周期没有</div>`}
|
||
</div>`;
|
||
return `
|
||
<div class="wk-head" style="--c:#0d9488">
|
||
<div class="wk-head-main">
|
||
<div class="wk-head-title">${Ico.badge("package")}定开项目 · 本周动态</div>
|
||
<div class="wk-i-meta">
|
||
<span class="tag-mini">本周新增 ${added.length} 个</span>
|
||
<span class="tag-mini">本周验收 ${accepted.length} 个</span>
|
||
<span class="tag-mini">高风险 ${risky.length} 个</span>
|
||
<span class="tag-mini">合同额合计 ${fen(sum)} 万</span>
|
||
<span class="tag-mini">本期计收 ${fen(data.kpi.revenue_delta)} 万</span>
|
||
</div>
|
||
</div>
|
||
<div class="wk-head-ops">
|
||
<button class="btn sm" id="wkGoCustom">去定开项目</button>
|
||
</div>
|
||
</div>
|
||
${sec("本周新增", "下单时间落在本周期（已下单 / 提前交付）", added,
|
||
(r) => `<span class="tag-mini" style="background:#e8f0ff;color:#2563eb">${esc(String(r.sign_date || "").slice(0, 10) || "本期下单")}</span>`)}
|
||
${sec("本周验收", "更新时间落在本周期且状态为已验收", accepted,
|
||
(r) => `<span class="tag-mini" style="background:#fff4e0;color:#b45309">${esc(String(r.update_date || "").slice(0, 10) || "本期验收")}</span>`)}
|
||
${sec("高风险项目", "风险值为「高风险」的在档定开项目", risky.slice(0, RISK_SHOW),
|
||
(r) => (r.project_status ? `<span class="tag-mini">${esc(r.project_status)}</span>` : ""))}
|
||
${risky.length > RISK_SHOW ? `<div class="sec-hint">共 ${risky.length} 个高风险项目，按合同额显示前 ${RISK_SHOW} 个</div>` : ""}`;
|
||
}
|
||
|
||
function bindWeeklyCustomOverview(box) {
|
||
const gc = box.querySelector("#wkGoCustom");
|
||
if (gc) gc.addEventListener("click", () => setView("custom"));
|
||
box.querySelectorAll("[data-cpick]").forEach((el) =>
|
||
el.addEventListener("click", () => {
|
||
state.weeklySel = { kind: "custom", id: Number(el.dataset.cpick) };
|
||
renderWeeklyDetail();
|
||
})
|
||
);
|
||
}
|
||
|
||
async function renderWeeklyDetail() {
|
||
const box = $("#wkRight");
|
||
if (!box) return;
|
||
const sel = state.weeklySel;
|
||
if (sel && sel.kind === "focus") {
|
||
const f = (state.focusRows || []).find((x) => x.id === sel.id);
|
||
box.innerHTML = f ? focusDetailHtml(f) : `<div class="empty">在左侧选择一条重点工作查看详情</div>`;
|
||
const eb = $("#wkFocusEdit");
|
||
if (eb) eb.addEventListener("click", () => openFocusDrawer(sel.id, "edit"));
|
||
return;
|
||
}
|
||
if (sel && sel.kind === "customs") {
|
||
box.innerHTML = weeklyCustomOverview(state.weekly);
|
||
bindWeeklyCustomOverview(box);
|
||
return;
|
||
}
|
||
const row = sel && (sel.kind === "project" ? state.weekly.projects : state.weekly.custom)
|
||
.find((r) => r.id === sel.id);
|
||
if (!row) { box.innerHTML = `<div class="empty">在左侧选择一个项目查看执行详情</div>`; return; }
|
||
box.innerHTML = `<div class="empty">加载中…</div>`;
|
||
try {
|
||
box.innerHTML = row.kind === "project"
|
||
? await weeklyProjectDetail(row)
|
||
: await weeklyCustomDetail(row);
|
||
bindWeeklyDetail(box, row);
|
||
} catch (e) {
|
||
box.innerHTML = `<div class="notice err">加载失败：${esc(e.message)}</div>`;
|
||
}
|
||
}
|
||
|
||
async function renderBoard() {
|
||
saveUI();
|
||
const host = $("#view-board");
|
||
host.innerHTML = `<div class="empty">加载中…</div>`;
|
||
if (!state.customMeta) state.customMeta = await api("/custom/meta");
|
||
const [data, focusRows, customAll] = await Promise.all([
|
||
api("/weekly" + scopeQuery()),
|
||
api("/focus" + focusQuery(["archived=false"])),
|
||
// 「本季度验收」与「定制项目 · 项目总览」同一口径：先看「项目状态=已验收」，季度归属再按「验收时间」
|
||
api("/custom/projects?archived=false"),
|
||
]);
|
||
const now = new Date();
|
||
const qYear = now.getFullYear(), qNo = Math.floor(now.getMonth() / 3) + 1;
|
||
const qOf = (s) => { const t = String(s || "").trim().toUpperCase(); return /^Q[1-4]$/.test(t) ? t : ""; };
|
||
// 先按「项目状态=已验收」过滤（状态一改统计立即同步）；季度归属再按「验收时间」，为空时算本季度
|
||
const accRows = customAll.filter((p) => String(p.project_status || "").trim() === "已验收");
|
||
const accQuarter = accRows.filter((p) => { const q = qOf(p.accept_date); return !q || q === "Q" + qNo; });
|
||
const accQuarterAmount = accQuarter.reduce((a, p) => a + Number(p.amount || 0), 0);
|
||
const accYearCount = accRows.length;
|
||
state.weekly = data;
|
||
state.customAll = customAll; // 右栏「高风险项目」用全量台账
|
||
state.focusRows = focusRows;
|
||
const k = data.kpi;
|
||
const focus = focusBuckets(focusRows);
|
||
|
||
// 默认选中本期有记录的第一条，选中项还在列表里就保持不变
|
||
const all = data.projects.concat(data.custom);
|
||
const cur = state.weeklySel;
|
||
const keep = cur && (cur.kind === "customs" ? true
|
||
: cur.kind === "focus"
|
||
? focusRows.some((f) => f.id === cur.id)
|
||
: all.some((r) => r.kind === cur.kind && r.id === cur.id)) ? cur : null;
|
||
const pick = keep || all.find((r) => r.has_update) || all[0] || null;
|
||
state.weeklySel = pick ? { kind: pick.kind, id: pick.id } : null;
|
||
|
||
const cSec = customWeeklySections(data.custom, scopeRange());
|
||
const cNew = cSec.added, cAcc = cSec.accepted, cRisk = customAll.filter((p) => isHighRisk(p)).length;
|
||
const cDyn = cSec.listed.length;
|
||
|
||
const kpi = `
|
||
<div class="grid kpi" style="margin-bottom:8px">
|
||
<div class="kpi accent-blue">${Ico.badge("star")}<div class="k-label">重点项目</div><div class="k-value">${k.key_total}</div><div class="k-foot">本期已更新 ${k.key_updated}</div></div>
|
||
<div class="kpi accent-blue">${Ico.badge("list-checks")}<div class="k-label">本周重点工作</div><div class="k-value">${focus.week.length}</div><div class="k-foot">延期 ${focus.overdue.length} 条 · 已完成 ${focus.done.length} 条</div></div>
|
||
<div class="kpi accent-violet">${Ico.badge("activity")}<div class="k-label">执行记录</div><div class="k-value">${k.update_count}</div><div class="k-foot">在办项目 ${k.project_listed} 个</div></div>
|
||
<div class="kpi accent-green">${Ico.badge("wallet")}<div class="k-label">本季度验收（${qYear}年Q${qNo}）</div><div class="k-value" style="font-size:22px">${fen(accQuarterAmount)} 万</div><div class="k-foot">${accQuarter.length} 个项目 · 本年验收 ${accYearCount} 个</div></div>
|
||
<div class="kpi accent-amber">${Ico.badge("alert")}<div class="k-label">风险 / 阻塞</div><div class="k-value">${k.risk_count}</div></div>
|
||
</div>`;
|
||
|
||
const group = (title, rows, tip) => `
|
||
<div class="wk-group">
|
||
<div class="wk-group-head">${title}<span class="cnt">${rows.length}</span>
|
||
<span class="wk-group-foot">${rows.filter((r) => r.has_update).length} ${tip}</span></div>
|
||
${rows.length ? rows.map(weeklyItem).join("") : `<div class="empty" style="padding:16px 6px;font-size:12px">本周期没有记录</div>`}
|
||
</div>`;
|
||
|
||
// 左栏顺序：本周工作重点 → 重点项目 → 定开项目（只给入口，点开在右栏看清单）
|
||
const focusList = focus.overdue.concat(focus.week);
|
||
const openCustom = cur && (cur.kind === "customs" || cur.kind === "custom");
|
||
|
||
host.innerHTML = kpi + `
|
||
<div class="wk-split">
|
||
<div class="wk-left card">
|
||
<div class="wk-group">
|
||
<div class="wk-group-head">本周工作重点<span class="cnt">${focusList.length}</span>
|
||
<span class="wk-group-foot">${focus.overdue.length ? focus.overdue.length + " 条延期" : "已完成 " + focus.done.length + " 条"}</span></div>
|
||
${focusList.length ? focusList.map(focusItem).join("") : `<div class="empty" style="padding:16px 6px;font-size:12px">本周没有安排重点工作</div>`}
|
||
</div>
|
||
${group("重点项目", data.projects, "个已更新")}
|
||
<div class="wk-group">
|
||
<div class="wk-group-head">定开项目<span class="cnt">${data.custom.length}</span>
|
||
<span class="wk-group-foot">本周动态 ${cDyn} 个</span></div>
|
||
<div class="wk-item ${openCustom ? "active" : ""}" style="--c:#0d9488" data-wk="customs:0">
|
||
<div class="wk-i-top">
|
||
<span class="wk-i-ic">${Ico.svg("package")}</span>
|
||
<span class="wk-i-name">本周定开项目动态</span>
|
||
<span class="tag-mini">${Ico.svg("arrow-right")}</span>
|
||
</div>
|
||
<div class="wk-i-meta">
|
||
<span class="tag-mini">新增 ${cNew.length}</span>
|
||
<span class="tag-mini">验收 ${cAcc.length}</span>
|
||
<span class="tag-mini">高风险 ${cRisk}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wk-right card" id="wkRight"><div class="empty">加载中…</div></div>
|
||
</div>`;
|
||
|
||
// 统计概览（原「执行面板」）折在最底下，展开才看；失败也不影响看板主体
|
||
dashboardHtml().then((html) => {
|
||
host.insertAdjacentHTML("beforeend",
|
||
`<details class="card ov"><summary><span class="ov-chev"><i data-icon="chevron-right"></i></span>统计概览</summary><div class="ov-body">${html}</div></details>`);
|
||
}).catch((e) => {
|
||
host.insertAdjacentHTML("beforeend", `<div class="notice err">统计概览加载失败：${esc(e.message)}</div>`);
|
||
});
|
||
|
||
host.querySelectorAll("[data-wk]").forEach((el) =>
|
||
el.addEventListener("click", () => {
|
||
const parts = el.dataset.wk.split(":");
|
||
state.weeklySel = { kind: parts[0], id: Number(parts[1]) };
|
||
host.querySelectorAll("[data-wk]").forEach((x) => x.classList.toggle("active", x === el));
|
||
renderWeeklyDetail();
|
||
})
|
||
);
|
||
renderWeeklyDetail();
|
||
}
|
||
|
||
/* ------------------------------------------------------------ 每周重点工作 */
|
||
/** 重点工作一律按「周」跟踪，基准周取顶栏当前选中的那一周 */
|
||
function focusWeek() {
|
||
return (state.periods.weeks || []).find((w) => w.id === state.weekId) || null;
|
||
}
|
||
|
||
function focusQuery(extra) {
|
||
const p = extra ? extra.slice() : [];
|
||
if (state.keyword) p.push("keyword=" + encodeURIComponent(state.keyword));
|
||
return p.length ? "?" + p.join("&") : "";
|
||
}
|
||
|
||
/** 分堆按「录入周」（f.sort_key 就是条目录入的那一周），和预计完成时间无关：
|
||
week = 本周录入的；overdue = 更早周次录入、标了延期又没做完的结转条目。
|
||
「已完成」是交叉视图，已完成条目仍留在自己那一周里，避免录完就看不见。
|
||
更早周次里没标延期的未完成条目不进当周视图，只能在「全部」里查得到。 */
|
||
function focusBuckets(rows) {
|
||
const w = focusWeek();
|
||
const cur = w ? w.sort_key : 0;
|
||
const out = { cur: cur, overdue: [], week: [], done: [] };
|
||
rows.forEach((f) => {
|
||
if (f.sort_key === cur) out.week.push(f);
|
||
else if (f.sort_key < cur && focusIsLate(f)) out.overdue.push(f);
|
||
if (f.status === "done") out.done.push(f);
|
||
});
|
||
return out;
|
||
}
|
||
|
||
/** 是否延期：录入时人工打开的开关，不再按日期自动判定 */
|
||
function focusIsLate(f) {
|
||
return f.status !== "done" && !!f.delayed;
|
||
}
|
||
|
||
/** 本地今天（YYYY-MM-DD），新增条目的预计完成时间默认值 */
|
||
function todayIso() {
|
||
const d = new Date();
|
||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
|
||
}
|
||
|
||
/** 预计完成时间：有日历日期就显示日期，早期没日期的条目退回显示录入周 */
|
||
function focusDueText(f) {
|
||
return f.due_date || f.period_full || "—";
|
||
}
|
||
|
||
/** 状态徽章：打开「是否延期」的未完成条目挂一个「延期」 */
|
||
function focusPill(f) {
|
||
return (focusIsLate(f) ? `<span class="pill" style="background:#fdecec;color:#dc2626">延期</span>` : "") +
|
||
statusPill(f.status);
|
||
}
|
||
|
||
/** 工作看板左栏的一条重点工作 */
|
||
function focusItem(f) {
|
||
const sel = state.weeklySel;
|
||
const late = focusIsLate(f);
|
||
return `
|
||
<div class="wk-item ${sel && sel.kind === "focus" && sel.id === f.id ? "active" : ""}"
|
||
style="--c:${late ? "#dc2626" : statusMeta(f.status).color}" data-wk="focus:${f.id}">
|
||
<div class="wk-i-top">
|
||
<span class="wk-i-ic">${Ico.status(f.status)}</span>
|
||
<span class="wk-i-name">${esc(f.content)}</span>
|
||
${late ? `<span class="tag-mini" style="background:#fdecec;color:#dc2626">延期</span>` : ""}
|
||
</div>
|
||
<div class="wk-i-meta">
|
||
${statusPill(f.status)}
|
||
<span class="tag-mini">预计 ${esc(focusDueText(f))}</span>
|
||
${late ? `<span class="tag-mini">录入 ${esc(f.period_label || "—")}</span>` : ""}
|
||
</div>
|
||
</div>`;
|
||
}
|
||
|
||
/** 工作看板右栏的一条重点工作（只读，改内容走抽屉） */
|
||
function focusDetailHtml(f) {
|
||
const ro = (label, val) => `<div class="form-row"><label>${label}</label><div class="ro">${val}</div></div>`;
|
||
return `
|
||
<div class="wk-head" style="--c:${statusMeta(f.status).color}">
|
||
<div class="wk-head-main">
|
||
<div class="wk-head-title">${Ico.statusBadge(f.status)}${esc(f.content)}</div>
|
||
<div class="wk-i-meta">
|
||
${focusPill(f)}
|
||
<span class="tag-mini">预计完成 ${esc(focusDueText(f))}</span>
|
||
</div>
|
||
</div>
|
||
${canW("focus") ? `<div class="wk-head-ops"><button class="btn sm primary" id="wkFocusEdit">修改</button></div>` : ""}
|
||
</div>
|
||
<div class="sec">
|
||
<div class="sec-title">说明</div>
|
||
${f.detail ? nl2br(f.detail) : `<div class="empty">未填写说明</div>`}
|
||
</div>
|
||
<div class="sec">
|
||
<div class="sec-title">结果反馈</div>
|
||
${f.result ? nl2br(f.result) : `<div class="empty">未填写结果反馈</div>`}
|
||
</div>`;
|
||
}
|
||
|
||
async function renderFocus() {
|
||
saveUI();
|
||
const host = $("#view-focus");
|
||
host.innerHTML = `<div class="empty">加载中…</div>`;
|
||
const rows = await api("/focus" + focusQuery(["archived=" + (state.focusArchived ? "all" : "false")]));
|
||
state.focusRows = rows;
|
||
const b = focusBuckets(rows);
|
||
const shown = state.focusFilter === "all" ? rows : b[state.focusFilter] || [];
|
||
|
||
const filters = [["week", "本周"], ["overdue", "延期"], ["done", "已完成"], ["all", "全部"]];
|
||
const chips = filters.map((x) => `<button class="chip ${state.focusFilter === x[0] ? "active" : ""}" data-ffilter="${x[0]}">${x[1]} ${b[x[0]] !== undefined ? b[x[0]].length : rows.length}</button>`).join("");
|
||
|
||
const table = `<table class="tbl">
|
||
<thead><tr>
|
||
<th style="min-width:220px">工作内容</th><th style="min-width:220px">说明</th>
|
||
<th>预计完成时间</th><th>状态</th><th style="min-width:150px">结果反馈</th><th>更新</th><th class="col-ops">操作</th>
|
||
</tr></thead>
|
||
<tbody>
|
||
${shown.map((f) => `
|
||
<tr ${f.archived ? 'style="opacity:.62"' : ""}>
|
||
<td><div style="display:flex;align-items:center;gap:6px">
|
||
<a href="javascript:;" data-fopen="${f.id}" style="color:var(--text);text-decoration:none">${esc(f.content)}</a>
|
||
${f.archived ? `<span class="arch-badge">已归档</span>` : ""}
|
||
</div></td>
|
||
<td style="color:var(--muted)">${esc((f.detail || "—").replace(/\s+/g, " ").slice(0, 48))}</td>
|
||
<td class="nowrap">${esc(focusDueText(f))}${f.period_label ? `<div class="period-hint">录入 ${esc(f.period_label)}</div>` : ""}</td>
|
||
<td class="nowrap">${focusPill(f)}</td>
|
||
<td style="color:var(--muted)">${esc((f.result || "—").replace(/\s+/g, " ").slice(0, 40))}</td>
|
||
<td class="nowrap">${esc((f.updated_at || "").slice(0, 10) || "—")}</td>
|
||
<td class="nowrap col-ops">${rowOps({
|
||
edit: `data-fedit="${f.id}"`,
|
||
archive: `data-farch="${f.id}"`,
|
||
archived: f.archived,
|
||
remove: `data-fdel="${f.id}"`,
|
||
})}</td>
|
||
</tr>`).join("")}
|
||
</tbody></table>`;
|
||
|
||
const body = listCard({
|
||
title: "重点工作清单",
|
||
count: rows.length,
|
||
chips: chips,
|
||
fields: `<label class="switch"><input type="checkbox" id="fcArchived" ${state.focusArchived ? "checked" : ""} /> 含归档条目</label>`,
|
||
tools: `${keywordInputHtml("fKeyword", "搜索工作内容…", 180)}
|
||
${canR("focus") ? `<button class="btn sm" id="btnExportFocus">导出 Excel</button>` : ""}
|
||
${canW("focus") ? `<button class="btn sm primary" id="btnAddFocus">${Ico.svg("plus")}新增重点工作</button>` : ""}`,
|
||
rows: shown,
|
||
table: table,
|
||
empty: state.keyword
|
||
? "没有匹配「" + esc(state.keyword) + "」的重点工作"
|
||
: state.focusFilter === "week"
|
||
? "本周还没有录入重点工作，点右上角「新增重点工作」添加"
|
||
: "这一堆还没有条目，点右上角「新增重点工作」添加",
|
||
});
|
||
|
||
host.innerHTML = body;
|
||
|
||
bindKeyword("fKeyword");
|
||
host.querySelectorAll("[data-ffilter]").forEach((c) =>
|
||
c.addEventListener("click", () => { state.focusFilter = c.dataset.ffilter; renderFocus(); })
|
||
);
|
||
$("#fcArchived").addEventListener("change", (e) => { state.focusArchived = e.target.checked; renderFocus(); });
|
||
const bex = $("#btnExportFocus");
|
||
if (bex) bex.addEventListener("click", () =>
|
||
download("/api/export/focus" + focusQuery(["archived=" + (state.focusArchived ? "all" : "false")]))
|
||
);
|
||
host.querySelectorAll("[data-fopen]").forEach((el) =>
|
||
el.addEventListener("click", () => openFocusDrawer(Number(el.dataset.fopen), "view"))
|
||
);
|
||
host.querySelectorAll("[data-fedit]").forEach((el) =>
|
||
el.addEventListener("click", () => openFocusDrawer(Number(el.dataset.fedit), "edit"))
|
||
);
|
||
host.querySelectorAll("[data-farch]").forEach((el) =>
|
||
el.addEventListener("click", async () => {
|
||
const toArchive = el.dataset.archived !== "1";
|
||
try {
|
||
await patch("/focus/" + el.dataset.farch, { archived: toArchive });
|
||
} catch (e) { toast("操作失败：" + e.message); return; }
|
||
toast(toArchive ? "已归档（勾选「含归档条目」可查看）" : "已恢复");
|
||
await afterWrite();
|
||
})
|
||
);
|
||
host.querySelectorAll("[data-fdel]").forEach((el) =>
|
||
el.addEventListener("click", () => {
|
||
const row = rows.find((x) => x.id === Number(el.dataset.fdel));
|
||
if (row) deleteFocus(row);
|
||
})
|
||
);
|
||
const bad = $("#btnAddFocus");
|
||
if (bad) bad.addEventListener("click", () => openFocusDrawer(null, "create"));
|
||
}
|
||
|
||
/** 删除重点工作条目：列表和抽屉共用。条目不是项目，危险确认即可，不要求逐字输入 */
|
||
async function deleteFocus(f) {
|
||
const ok = await confirmDialog({
|
||
title: "删除重点工作条目",
|
||
danger: true,
|
||
okText: "永久删除",
|
||
body: `<div class="notice err">「${esc(f.content)}」将被删除，<b>删除后无法恢复</b>。</div>
|
||
<div style="font-size:12px;color:var(--muted);margin-top:8px">只是这一周不再跟进？请改用「归档」。</div>`,
|
||
});
|
||
if (!ok) return;
|
||
try {
|
||
await del("/focus/" + f.id);
|
||
} catch (e) { toast("删除失败：" + e.message); return; }
|
||
toast("已删除「" + f.content + "」");
|
||
closeDrawer();
|
||
await afterWrite();
|
||
}
|
||
|
||
/** 重点工作抽屉：新增走单独面板，详情只读、修改才出表单；基础信息的动作一律在面板顶部 */
|
||
async function openFocusDrawer(fid, mode) {
|
||
mode = mode === "create" ? "create" : mode === "edit" ? "edit" : "view";
|
||
if (!canW("focus")) mode = "view";
|
||
$("#drawerMask").classList.add("open");
|
||
$("#drawer").classList.add("open");
|
||
$("#drawerBody").innerHTML = `<div class="empty">加载中…</div>`;
|
||
drawerActions("");
|
||
let f = null;
|
||
if (mode === "create") {
|
||
f = { content: "", detail: "", period_id: state.weekId, status: state.meta.statuses[0].code, archived: false };
|
||
} else {
|
||
try {
|
||
const rows = await api("/focus?archived=all");
|
||
f = rows.find((x) => x.id === fid) || null;
|
||
} catch (e) {
|
||
$("#drawerBody").innerHTML = `<div class="notice err">加载失败：${esc(e.message)}</div>`;
|
||
return;
|
||
}
|
||
if (!f) {
|
||
$("#drawerBody").innerHTML = `<div class="empty">条目不存在，可能已被删除</div>`;
|
||
return;
|
||
}
|
||
}
|
||
// 录入周 = 顶栏当前选中的那一周（新增时定下来，之后不随预计完成时间变）
|
||
const w = focusWeek();
|
||
const entryWeek = mode === "create" ? (w ? w.full_label : "顶栏当前周") : (f.period_full || f.period_label || "—");
|
||
$("#drawerTitle").innerHTML = mode === "create"
|
||
? `<i data-icon="list-checks"></i>新增每周重点工作`
|
||
: `<i data-icon="list-checks"></i>${esc(f.content)}`;
|
||
$("#drawerSub").innerHTML = mode === "create"
|
||
? `一条就是一个活儿，不用先建项目 · 录入周 ${esc(entryWeek)}`
|
||
: `${focusPill(f)} · 录入 ${esc(f.period_full || f.period_label || "—")} · 预计完成 ${esc(focusDueText(f))}`;
|
||
|
||
const ro = (label, val) => `<div class="form-row"><label>${label}</label><div class="ro">${val}</div></div>`;
|
||
// 基础信息的动作在标题栏右侧按钮条：危险动作在左，主按钮在最右
|
||
drawerActions(mode === "view" ? `
|
||
<button class="btn sm danger" id="fdDelete">删除</button>
|
||
<button class="btn sm" id="fdArchive">${f.archived ? "恢复" : "归档"}</button>
|
||
<button class="btn sm primary" id="fdEdit">修改</button>` : `
|
||
<button class="btn sm" id="fdCancel">取消</button>
|
||
<button class="btn sm primary" id="fdSave">${mode === "create" ? "添加" : "保存"}</button>`);
|
||
|
||
const form = mode === "view" ? `
|
||
<div class="sec">
|
||
<div class="sec-title">基本信息</div>
|
||
${ro("工作内容", esc(f.content) + (f.archived ? ` <span class="arch-badge">已归档</span>` : ""))}
|
||
${ro("说明", f.detail ? nl2br(f.detail) : "—")}
|
||
${ro("预计完成时间", esc(focusDueText(f)))}
|
||
${ro("录入周", esc(f.period_full || f.period_label || "—"))}
|
||
${ro("执行状态", statusPill(f.status))}
|
||
${ro("是否延期", f.delayed ? `<span class="pill" style="background:#fdecec;color:#dc2626">延期</span>` : "未延期")}
|
||
${ro("结果反馈", f.result ? nl2br(f.result) : "—")}
|
||
${ro("最近更新", esc((f.updated_at || "").replace("T", " ") || "—"))}
|
||
</div>` : `
|
||
<div class="sec">
|
||
<div class="sec-title">基本信息</div>
|
||
<div class="form-row"><label>工作内容 *</label><input class="inp" id="fdContent" value="${esc(f.content)}" placeholder="要干的事，一句话" style="width:100%" /></div>
|
||
<div class="form-row"><label>说明</label><textarea class="inp" id="fdDetail" rows="4" placeholder="补充说明（可选）" style="width:100%">${esc(f.detail || "")}</textarea></div>
|
||
<div class="form-row"><label>录入周</label><div class="ro">${esc(entryWeek)}</div></div>
|
||
<div class="form-row"><label>预计完成时间 *</label><input class="inp" id="fdDue" type="date" value="${esc(f.due_date || todayIso())}" style="width:200px" /></div>
|
||
<div class="form-row"><label>执行状态</label><select class="sel" id="fdStatus" style="width:150px">
|
||
${state.meta.statuses.map((s) => `<option value="${s.code}" ${s.code === f.status ? "selected" : ""}>${esc(s.name)}</option>`).join("")}
|
||
</select></div>
|
||
<div class="form-row"><label>结果反馈</label><textarea class="inp" id="fdResult" rows="3" placeholder="做出来的结果 / 交付结论（可选）" style="width:100%">${esc(f.result || "")}</textarea></div>
|
||
<div class="form-row"><label>是否延期</label><label class="switch"><input type="checkbox" id="fdDelayed" ${f.delayed ? "checked" : ""} /> 标记为延期</label></div>
|
||
</div>`;
|
||
$("#drawerBody").innerHTML =
|
||
(mode === "view" ? "" : `<div class="notice err" id="fdErr" style="display:none"></div>`) + form;
|
||
|
||
const on = (sel, fn) => { const el = $(sel); if (el) el.addEventListener("click", fn); };
|
||
const after = () => afterWrite();
|
||
|
||
on("#fdEdit", () => openFocusDrawer(fid, "edit"));
|
||
on("#fdCancel", () => (mode === "create" ? closeDrawer() : openFocusDrawer(fid, "view")));
|
||
on("#fdSave", async () => {
|
||
const btn = $("#fdSave");
|
||
const err = $("#fdErr");
|
||
const content = $("#fdContent").value.trim();
|
||
if (!content) { err.textContent = "请填写工作内容"; err.style.display = ""; return; }
|
||
btn.disabled = true;
|
||
err.style.display = "none";
|
||
const due = $("#fdDue").value;
|
||
if (!due) { err.textContent = "请选择预计完成时间"; err.style.display = ""; return; }
|
||
const body = {
|
||
content: content,
|
||
detail: $("#fdDetail").value,
|
||
status: $("#fdStatus").value,
|
||
due_date: due,
|
||
result: $("#fdResult").value,
|
||
delayed: $("#fdDelayed").checked,
|
||
};
|
||
if (mode === "create") body.period_id = state.weekId; // 录入周 = 顶栏当前周
|
||
try {
|
||
if (mode === "create") fid = (await post("/focus", body)).id;
|
||
else await patch("/focus/" + fid, body);
|
||
} catch (e) {
|
||
btn.disabled = false;
|
||
err.textContent = "保存失败：" + e.message;
|
||
err.style.display = "";
|
||
return;
|
||
}
|
||
toast(mode === "create" ? "已添加「" + content + "」" : "已保存");
|
||
after();
|
||
openFocusDrawer(fid, "view");
|
||
});
|
||
on("#fdArchive", async () => {
|
||
try {
|
||
await patch("/focus/" + fid, { archived: !f.archived });
|
||
} catch (e) { toast("操作失败：" + e.message); return; }
|
||
toast(f.archived ? "已恢复" : "已归档");
|
||
closeDrawer();
|
||
after();
|
||
});
|
||
on("#fdDelete", () => deleteFocus(f));
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- 项目管理 */
|
||
/** 删除项目是高危动作：必须逐字输入项目名才能点「永久删除」。列表与抽屉共用一套。 */
|
||
async function deleteProject(p) {
|
||
const ok = await confirmDialog({
|
||
title: "删除项目",
|
||
danger: true,
|
||
okText: "永久删除",
|
||
requireText: p.name,
|
||
body:
|
||
`<div class="notice err">将连同 <b>${p.task_count}</b> 个子任务、<b>${p.update_count}</b> 条执行记录一并删除，<b>删除后无法恢复</b>。</div>
|
||
<div style="font-size:12px;color:var(--muted);margin-top:8px">只是暂时不想在看板里看到它？请改用「归档」，数据全部保留。</div>`,
|
||
});
|
||
if (!ok) return;
|
||
try {
|
||
const r = await del("/projects/" + p.id);
|
||
toast(`已删除「${r.name}」：${r.deleted_tasks} 个子任务 / ${r.deleted_updates} 条记录`);
|
||
closeDrawer();
|
||
await afterWrite();
|
||
} catch (e) {
|
||
toast("删除失败：" + e.message);
|
||
}
|
||
}
|
||
|
||
async function renderProjects() {
|
||
saveUI();
|
||
const host = $("#view-projects");
|
||
host.innerHTML = `<div class="empty">加载中…</div>`;
|
||
const extra = ["archived=" + (state.showArchived ? "all" : "false")];
|
||
if (state.categoryId) extra.push("category_id=" + state.categoryId);
|
||
if (state.projOwner) extra.push("owner=" + encodeURIComponent(state.projOwner));
|
||
const rows = await api("/projects" + scopeQuery(extra));
|
||
const shown = state.projIdleOnly ? rows.filter((r) => !r.updated_this_period) : rows;
|
||
const idle = rows.filter((r) => !r.updated_this_period).length;
|
||
|
||
const ownerFilter = `<select id="pOwner" class="sel" style="width:120px">
|
||
<option value="">全部负责人</option>
|
||
${state.staff.map((s) => `<option value="${esc(s.name)}" ${s.name === state.projOwner ? "selected" : ""}>${esc(s.name)}${s.archived ? "（归档）" : ""}</option>`).join("")}
|
||
</select>`;
|
||
|
||
const chips = `<button class="chip ${state.projIdleOnly ? "active" : ""}" data-pidle="1">只看本${state.gran === "week" ? "周" : "月"}未更新</button>`;
|
||
// 原来挂在左侧菜单栏的分类筛选器，收进卡头，能力不变
|
||
const catFilter = `<select id="pCat" class="sel" style="width:120px" title="分类">
|
||
<option value="">全部分类</option>
|
||
${state.categories.map((c) => `<option value="${c.id}" ${c.id === state.categoryId ? "selected" : ""}>${esc(c.name)}（${c.project_count}）</option>`).join("")}
|
||
</select>`;
|
||
|
||
const table = `<table class="tbl">
|
||
<thead><tr>
|
||
<th style="min-width:200px">项目名称</th><th>分类</th><th>负责人</th><th>状态</th>
|
||
<th class="num">进度%</th><th>本${state.gran === "week" ? "周" : "月"}更新</th>
|
||
<th class="num">记录</th><th class="num">子任务</th><th>最近记录</th><th class="col-ops">操作</th>
|
||
</tr></thead>
|
||
<tbody>
|
||
${shown.map((p) => `
|
||
<tr data-pid="${p.id}" ${p.archived ? 'style="opacity:.62"' : ""}>
|
||
<td><div style="display:flex;align-items:center;gap:6px">
|
||
${starMark(p.is_key, true, "重点标记在详情面板中维护")}
|
||
<a href="javascript:;" data-popen="${p.id}" style="color:var(--text);text-decoration:none">${esc(p.name)}</a>
|
||
${p.archived ? `<span class="arch-badge">已归档</span>` : ""}
|
||
</div></td>
|
||
<td>${catPill(p.category)}</td>
|
||
<td><div class="people-cell">${nameChips(p.owners)}</div></td>
|
||
<td>${statusPill(p.status)}</td>
|
||
<td class="num">${Math.round(p.progress)}%</td>
|
||
<td class="nowrap">${p.updated_this_period
|
||
? `<span class="pill" style="background:#e9f7ef;color:#16a34a">已更新</span>`
|
||
: `<span class="pill" style="background:#fdecec;color:#dc2626">${p.idle_weeks === null ? "从未更新" : p.idle_weeks + " 周未更新"}</span>`}</td>
|
||
<td class="num">${p.update_count}</td>
|
||
<td class="num">${p.task_count}</td>
|
||
<td>${esc((p.last_update && p.last_update.period_full) || "—")}</td>
|
||
<td class="nowrap col-ops">${rowOps({
|
||
edit: `data-pedit="${p.id}"`,
|
||
archive: `data-parch="${p.id}"`,
|
||
archived: p.archived,
|
||
remove: `data-pdel="${p.id}"`,
|
||
})}</td>
|
||
</tr>`).join("")}
|
||
</tbody></table>`;
|
||
|
||
const body = listCard({
|
||
title: "重点项目明细",
|
||
count: rows.length,
|
||
chips: chips,
|
||
fields: `<label class="switch"><input type="checkbox" id="chkArchived" ${state.showArchived ? "checked" : ""} /> 含归档项目</label>`,
|
||
tools: `${keywordInputHtml("pKeyword", "搜索项目名称…", 180)}
|
||
${catFilter}
|
||
${ownerFilter}
|
||
${canR("projects") ? `<button class="btn sm" id="btnExportProjects">导出 Excel</button>` : ""}
|
||
${canW("projects") ? `<button class="btn sm primary" id="btnNewProject">${Ico.svg("plus")}新建项目</button>` : ""}`,
|
||
rows: shown,
|
||
table: table,
|
||
empty: state.keyword
|
||
? "没有匹配「" + esc(state.keyword) + "」的项目"
|
||
: "还没有项目",
|
||
});
|
||
|
||
host.innerHTML = body;
|
||
|
||
bindKeyword("pKeyword", { enter: true });
|
||
const pc = $("#pCat");
|
||
if (pc) pc.addEventListener("change", () => {
|
||
state.categoryId = pc.value ? Number(pc.value) : null;
|
||
renderProjects();
|
||
});
|
||
host.querySelectorAll("[data-pidle]").forEach((b) =>
|
||
b.addEventListener("click", () => { state.projIdleOnly = !state.projIdleOnly; renderProjects(); })
|
||
);
|
||
const po = $("#pOwner");
|
||
if (po) po.addEventListener("change", () => { state.projOwner = po.value; renderProjects(); });
|
||
host.querySelectorAll("[data-popen]").forEach((a) =>
|
||
a.addEventListener("click", () => openDrawer(Number(a.dataset.popen), "view"))
|
||
);
|
||
host.querySelectorAll("[data-pedit]").forEach((b) =>
|
||
b.addEventListener("click", () => openDrawer(Number(b.dataset.pedit), "edit"))
|
||
);
|
||
host.querySelectorAll("[data-parch]").forEach((b) =>
|
||
b.addEventListener("click", async () => {
|
||
const toArchive = b.dataset.archived !== "1";
|
||
await patch("/projects/" + b.dataset.parch, { archived: toArchive });
|
||
toast(toArchive ? "已归档（勾选「含归档项目」可查看）" : "已恢复");
|
||
await afterWrite();
|
||
})
|
||
);
|
||
host.querySelectorAll("[data-pdel]").forEach((b) =>
|
||
b.addEventListener("click", () => {
|
||
const p = shown.find((x) => x.id === Number(b.dataset.pdel));
|
||
if (p) deleteProject(p);
|
||
})
|
||
);
|
||
$("#chkArchived").addEventListener("change", (e) => { state.showArchived = e.target.checked; renderProjects(); });
|
||
const bex = $("#btnExportProjects");
|
||
if (bex) bex.addEventListener("click", () => {
|
||
const q = ["archived=" + (state.showArchived ? "all" : "false")];
|
||
if (state.categoryId) q.push("category_id=" + state.categoryId);
|
||
if (state.keyword) q.push("keyword=" + encodeURIComponent(state.keyword));
|
||
download("/api/export/projects?" + q.join("&"));
|
||
});
|
||
const bn = $("#btnNewProject");
|
||
if (bn) bn.addEventListener("click", () => {
|
||
openModal(
|
||
`<div class="modal-head"><h3>新建项目</h3><button class="icon-btn" data-mclose title="关闭">${Ico.svg("x")}</button></div>
|
||
<div class="modal-body">
|
||
<div class="form-grid">
|
||
<div class="form-row full"><label>项目名称 *</label><input class="inp" id="npName" data-autofocus style="width:100%" /></div>
|
||
<div class="form-row"><label>分类</label><select class="sel" id="npCat" style="width:100%">
|
||
<option value="">（未分类）</option>
|
||
${state.categories.map((c) => `<option value="${c.id}">${esc(c.name)}</option>`).join("")}
|
||
</select></div>
|
||
<div class="form-row"><label>负责人</label>${ownerSelectHtml("", 'id="npOwner" style="width:100%"')}</div>
|
||
<div class="form-row full"><label>重点项目</label><label class="switch"><input type="checkbox" id="npKey" /> 标记为重点（★，进入每周周看板）</label></div>
|
||
</div>
|
||
<div class="notice err" id="mErr" style="display:none"></div>
|
||
</div>
|
||
<div class="modal-foot"><button class="btn" data-mclose>取消</button><button class="btn primary" id="mOk">创建</button></div>`
|
||
);
|
||
$("#mOk").addEventListener("click", async () => {
|
||
const name = $("#npName").value.trim();
|
||
if (!name) return modalError("请填写项目名称");
|
||
const btn = $("#mOk");
|
||
btn.disabled = true;
|
||
try {
|
||
await post("/projects", {
|
||
name: name,
|
||
category_id: $("#npCat").value ? Number($("#npCat").value) : null,
|
||
owner: $("#npOwner").value || null,
|
||
is_key: $("#npKey").checked,
|
||
});
|
||
closeModal();
|
||
toast("已创建「" + name + "」");
|
||
await afterWrite();
|
||
} catch (e) { btn.disabled = false; modalError(e.message); }
|
||
});
|
||
$("#npName").addEventListener("keydown", (e) => { if (e.key === "Enter") $("#mOk").click(); });
|
||
});
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- 定开项目 */
|
||
function stageMeta(code) {
|
||
const list = (state.customMeta && state.customMeta.stages) || [];
|
||
return list.find((s) => s.code === code) || { code, name: code, color: "#94a3b8" };
|
||
}
|
||
function stagePill(code) {
|
||
const s = stageMeta(code);
|
||
return `<span class="pill" style="background:${s.color}1a;color:${s.color}">${Ico.stage(code)}${esc(s.name)}</span>`;
|
||
}
|
||
|
||
/* ---- 市场台账（《定开项目.xlsx》）的小色块 ---- */
|
||
const CUSTOM_STATUS_COLOR = {
|
||
已验收: "#16a34a",
|
||
交付完成: "#0891b2",
|
||
进行中: "#2563eb",
|
||
待开发: "#b45309",
|
||
退单: "#7a8394",
|
||
};
|
||
|
||
/** 台账里的项目状态：已验收/交付完成/进行中/待开发/退单，和项目状态机不是一套 */
|
||
function customStatusPill(code) {
|
||
if (!code) return `<span style="color:var(--muted)">—</span>`;
|
||
const color = CUSTOM_STATUS_COLOR[code] || "#7a8394";
|
||
return `<span class="pill" style="background:${color}1a;color:${color}">${esc(code)}</span>`;
|
||
}
|
||
|
||
/** 风险值是否「高风险」（台账取值为 1.高风险 / 2.低风险） */
|
||
const isHighRisk = (p) => String(p.risk_level || "").includes("高");
|
||
|
||
/** 风险值：1.高风险 红 / 2.低风险 绿 */
|
||
function riskPill(code) {
|
||
if (!code) return `<span style="color:var(--muted)">—</span>`;
|
||
const high = String(code).includes("高");
|
||
const color = high ? "#dc2626" : "#16a34a";
|
||
const text = String(code).replace(/^\d+\./, "");
|
||
return `<span class="pill" style="background:${color}1a;color:${color}">${esc(text)}</span>`;
|
||
}
|
||
|
||
let keywordFocus = false;
|
||
|
||
/** 定开「项目归属」取值：前三项视为「已下单」，提前交付为下单前状态 */
|
||
const CUSTOM_ORIGINS = ["华智下单", "存量项目", "汇智直签", "提前交付"];
|
||
const CUSTOM_PLACED = ["华智下单", "存量项目", "汇智直签"];
|
||
const isPlaced = (p) => CUSTOM_PLACED.indexOf(p.origin) >= 0;
|
||
async function renderCustom() {
|
||
saveUI();
|
||
const host = $("#view-custom");
|
||
host.innerHTML = `<div class="empty">加载中…</div>`;
|
||
if (!state.customMeta) state.customMeta = await api("/custom/meta");
|
||
|
||
// 一次性取「全部定开项目」（不带搜索/筛选条件）：
|
||
// 列表在本地按关键字/区域/状态筛选，而统计条始终基于全部数据。
|
||
const allRows = await api("/custom/projects?archived=" + state.customArchived);
|
||
state.customRows = allRows;
|
||
|
||
// 区域筛选：用规范名称、按大区分组，只列出实际有项目的区域
|
||
const usedSet = {};
|
||
(state.customMeta.regions || []).forEach((r) => { usedSet[r] = true; });
|
||
const stdAll = (state.customMeta.region_groups || []).reduce((a, g) => a.concat(g.regions), []);
|
||
let regionFilterHtml = `<option value="">全部区域</option>`;
|
||
(state.customMeta.region_groups || []).forEach((g) => {
|
||
const hit = g.regions.filter((r) => usedSet[r]);
|
||
if (!hit.length) return;
|
||
regionFilterHtml += `<optgroup label="${esc(g.group)}">` +
|
||
hit.map((r) => `<option value="${esc(r)}" ${r === state.customRegion ? "selected" : ""}>${esc(r)}</option>`).join("") +
|
||
`</optgroup>`;
|
||
});
|
||
const nonStd = (state.customMeta.regions || []).filter((r) => stdAll.indexOf(r) < 0);
|
||
if (nonStd.length) {
|
||
regionFilterHtml += `<optgroup label="其他">` +
|
||
nonStd.map((r) => `<option value="${esc(r)}" ${r === state.customRegion ? "selected" : ""}>${esc(r)}</option>`).join("") +
|
||
`</optgroup>`;
|
||
}
|
||
|
||
const STATUS_OPTIONS = ["已验收", "待开发", "交付完成", "进行中", "退单"];
|
||
const statusFilterHtml = `<option value="">全部状态</option>` +
|
||
STATUS_OPTIONS.map((s) => `<option value="${esc(s)}" ${s === state.customStatus ? "selected" : ""}>${esc(s)}</option>`).join("");
|
||
const originFilterHtml = `<option value="">全部归属</option>` +
|
||
CUSTOM_ORIGINS.map((o) => `<option value="${esc(o)}" ${o === state.customOrigin ? "selected" : ""}>${esc(o)}</option>`).join("");
|
||
|
||
const isList = state.customTab !== "weekly" && state.customTab !== "annual";
|
||
// 三个 tab 用顶部「周/月」那套分段控件，筛选器和主按钮（导出 / 新建）放下一行
|
||
const head = {
|
||
chips: `
|
||
<div class="seg">
|
||
<button class="seg-btn ${state.customTab === "list" ? "active" : ""}" data-ctab="list">项目总览</button>
|
||
<button class="seg-btn ${state.customTab === "weekly" ? "active" : ""}" data-ctab="weekly">本周进展</button>
|
||
<button class="seg-btn ${state.customTab === "annual" ? "active" : ""}" data-ctab="annual">年度任务</button>
|
||
</div>`,
|
||
tools: isList ? `
|
||
${keywordInputHtml("cKeyword", "搜索项目名称…（回车查询）", 200)}
|
||
<select id="cOrigin" class="sel" style="width:130px">${originFilterHtml}</select>
|
||
<select id="cRegion" class="sel" style="width:132px">${regionFilterHtml}</select>
|
||
<select id="cStatus" class="sel" style="width:140px">${statusFilterHtml}</select>
|
||
${canR("custom") ? `<button class="btn sm" id="btnExportCustom">导出 Excel</button>` : ""}
|
||
${canW("custom") ? `<button class="btn sm primary" id="btnNewCustom">${Ico.svg("plus")}新建定开项目</button>` : ""}` : "",
|
||
};
|
||
|
||
host.innerHTML = (
|
||
state.customTab === "weekly" ? renderCustomWeekly(allRows, head)
|
||
: state.customTab === "annual" ? renderCustomAnnual(allRows, head)
|
||
: renderCustomList(allRows, head));
|
||
|
||
host.querySelectorAll("[data-ctab]").forEach((b) =>
|
||
b.addEventListener("click", () => {
|
||
if (b.dataset.ctab !== state.customTab) state.customAnnualEdit = false; // 切 tab 退出年度任务的编辑态
|
||
state.customTab = b.dataset.ctab; renderCustom();
|
||
})
|
||
);
|
||
const os = $("#cOrigin");
|
||
if (os) os.addEventListener("change", () => { state.customOrigin = os.value; renderCustom(); });
|
||
const rs = $("#cRegion");
|
||
if (rs) rs.addEventListener("change", () => { state.customRegion = rs.value; renderCustom(); });
|
||
const st = $("#cStatus");
|
||
if (st) st.addEventListener("change", () => { state.customStatus = st.value; renderCustom(); });
|
||
if (isList) bindKeyword("cKeyword", { enter: true });
|
||
const bn = $("#btnNewCustom");
|
||
if (bn) bn.addEventListener("click", () => openNewCustomDialog(() => afterWrite()));
|
||
const bex = $("#btnExportCustom");
|
||
if (bex) bex.addEventListener("click", () => {
|
||
// 导出与「项目总览」当前筛选一致：归档态 + 归属 + 区域 + 状态 + 关键字
|
||
const q = ["archived=" + state.customArchived];
|
||
if (state.customOrigin) q.push("origin=" + encodeURIComponent(state.customOrigin));
|
||
if (state.customRegion) q.push("region=" + encodeURIComponent(state.customRegion));
|
||
if (state.customStatus) q.push("status=" + encodeURIComponent(state.customStatus));
|
||
if (state.keyword) q.push("keyword=" + encodeURIComponent(state.keyword));
|
||
download("/api/export/custom?" + q.join("&"));
|
||
});
|
||
bindCustomList(host);
|
||
}
|
||
|
||
function renderCustomList(allRows, hdr) {
|
||
hdr = hdr || {};
|
||
// 列表：按 关键字 + 归属 + 区域 + 状态 在本地筛选；再按表头排序
|
||
const kw = (state.keyword || "").trim();
|
||
let list = allRows;
|
||
if (kw) list = list.filter((p) => String(p.name || "").includes(kw));
|
||
if (state.customOrigin) list = list.filter((p) => (p.origin || "") === state.customOrigin);
|
||
if (state.customRegion) list = list.filter((p) => (p.region || "") === state.customRegion);
|
||
if (state.customStatus) list = list.filter((p) => (p.project_status || "") === state.customStatus);
|
||
const s = state.customSort || { key: "update_date", dir: "desc" };
|
||
const sv = (p, k) => (k === "amount" ? Number(p.amount || 0) : String(p[k] || ""));
|
||
const view = list.slice().sort((a, b) => {
|
||
const va = sv(a, s.key), vb = sv(b, s.key);
|
||
const c = va < vb ? -1 : va > vb ? 1 : 0;
|
||
return s.dir === "asc" ? c : -c;
|
||
});
|
||
|
||
// ---- 统计条：基于「全部已下单项目」，不随搜索 / 筛选变化 ----
|
||
const placed = allRows.filter(isPlaced); // 已下单 = 华智下单 / 存量项目 / 汇智直签
|
||
const today = new Date();
|
||
const Y = today.getFullYear();
|
||
const M = today.getMonth() + 1;
|
||
const Q = Math.floor((M - 1) / 3) + 1; // 当前季度 1~4
|
||
const sum = (arr, f) => arr.reduce((a, p) => a + Number(p[f] || 0), 0);
|
||
// 取日期里的「年-月」；像「2024年3月前」这种文本不参与季度/年度判定
|
||
const ymOf = (d) => {
|
||
const s = String(d || "");
|
||
return /^\d{4}-\d{2}/.test(s) ? { y: Number(s.slice(0, 4)), m: Number(s.slice(5, 7)) } : null;
|
||
};
|
||
const inYear = (d) => { const t = ymOf(d); return !!t && t.y === Y; };
|
||
const inQuarter = (d) => { const t = ymOf(d); return !!t && t.y === Y && Math.floor((t.m - 1) / 3) + 1 === Q; };
|
||
|
||
const signedQuarter = placed.filter((p) => inQuarter(p.sign_date));
|
||
const signedYear = placed.filter((p) => inYear(p.sign_date));
|
||
// 验收：以「项目状态 = 已验收」为准（状态一改，统计立即同步）；
|
||
// 季度归属看「验收时间」(accept_date，季度文本 Q1~Q4)；验收时间为空时按「本季度」计。
|
||
const qOf = (s) => { const t = String(s || "").trim().toUpperCase(); return /^Q[1-4]$/.test(t) ? t : ""; };
|
||
const thisQ = "Q" + Q;
|
||
const accRows = allRows.filter((p) => String(p.project_status || "").trim() === "已验收");
|
||
const accQuarter = accRows.filter((p) => { const q = qOf(p.accept_date); return !q || q === thisQ; });
|
||
const accYear = accRows;
|
||
|
||
const stat = (label, count, amount, color) =>
|
||
`<div class="stat" style="--c:${color}"><div class="stat-num">${count}<span class="stat-unit">个</span> · <span class="stat-money">${fen(amount)}</span><span class="stat-unit">万</span></div><div class="stat-label">${label}</div></div>`;
|
||
|
||
const statBar = `<div class="stat-row">
|
||
${stat("已下单项目 / 合同额", placed.length, sum(placed, "amount"), "var(--primary)")}
|
||
${stat(`本季度下单（${Y}年Q${Q}）`, signedQuarter.length, sum(signedQuarter, "amount"), "var(--violet)")}
|
||
${stat(`本年新增下单（${Y}年）`, signedYear.length, sum(signedYear, "amount"), "var(--violet)")}
|
||
${stat(`本季度验收（${Y}年Q${Q}）`, accQuarter.length, sum(accQuarter, "amount"), "var(--amber)")}
|
||
${stat(`本年验收项目（${Y}年）`, accYear.length, sum(accYear, "amount"), "var(--amber)")}
|
||
</div>
|
||
`;
|
||
|
||
return `<div class="card">
|
||
${cardHead({ title: "定开项目总览", count: view.length, chips: hdr.chips, tools: hdr.tools, chipsRow: true })}
|
||
${statBar}
|
||
${view.length ? customTableHtml(view) : `<div class="empty">${state.keyword ? "没有匹配「" + esc(state.keyword) + "」的定开项目" : "当前筛选条件下没有定开项目"}</div>`}
|
||
</div>`;
|
||
}
|
||
|
||
/** 定开项目表格（「项目总览」与「本周进展」两个 tab 共用）；下单时间 / 订单金额 / 更新时间 表头可排序 */
|
||
function customTableHtml(view, withOps) {
|
||
const ops = withOps !== false;
|
||
const s = state.customSort || { key: "update_date", dir: "desc" };
|
||
const sth = (label, k, cls) =>
|
||
`<th class="${cls ? cls + " " : ""}sortable" data-sort="${k}" style="cursor:pointer;user-select:none" title="点击排序">${label}${s.key === k ? (s.dir === "asc" ? " ▲" : " ▼") : ""}</th>`;
|
||
return `<div class="tbl-wrap">
|
||
<table class="tbl">
|
||
<thead><tr>
|
||
<th style="min-width:200px">项目名称</th>
|
||
<th>项目ID</th>
|
||
${sth("下单时间", "sign_date")}
|
||
<th>项目归属</th>
|
||
<th>办事处</th>
|
||
<th>行业</th>
|
||
<th class="num">市场下单人天</th>
|
||
${sth("订单金额", "amount", "num")}
|
||
<th>市场责任人</th>
|
||
<th>项目状态</th>
|
||
<th class="num">进度</th>
|
||
<th>验收时间</th>
|
||
<th>推动验收计划</th>
|
||
<th>风险值</th>
|
||
${sth("更新时间", "update_date")}
|
||
<th>备注</th>
|
||
${ops ? `<th class="col-ops">操作</th>` : ""}
|
||
</tr></thead>
|
||
<tbody>
|
||
${view.map((p) => `
|
||
<tr data-cid="${p.id}" ${p.archived ? 'style="opacity:.62"' : ""}>
|
||
<td>
|
||
<div style="display:flex;align-items:center;gap:6px">
|
||
${starMark(p.is_key, true, "重点标记在详情面板中维护")}
|
||
<a href="javascript:;" data-copen="${p.id}" style="color:var(--text);text-decoration:none">${esc(p.name)}</a>
|
||
${p.archived ? `<span class="arch-badge">已归档</span>` : ""}
|
||
</div>
|
||
</td>
|
||
<td class="nowrap">${esc(p.project_code || "—")}</td>
|
||
<td class="nowrap">${p.sign_date ? esc(p.sign_date) : "—"}</td>
|
||
<td class="nowrap">${esc(p.origin || "—")}</td>
|
||
<td class="nowrap">${esc(p.office || "—")}</td>
|
||
<td class="nowrap">${esc(p.industry || "—")}</td>
|
||
<td class="num">${p.man_days == null ? "—" : Math.round(p.man_days).toLocaleString()}</td>
|
||
<td class="num">${money(p.amount)}</td>
|
||
<td class="nowrap">${esc(p.market_owner || "—")}</td>
|
||
<td class="nowrap">${customStatusPill(p.project_status)}</td>
|
||
<td class="num">${(p.project_status === "进行中" || Number(p.progress || 0) > 0) ? Math.round(p.progress || 0) + "%" : "—"}</td>
|
||
<td class="nowrap">${p.accept_date ? esc(p.accept_date) : "—"}</td>
|
||
<td>${esc(p.accept_plan || "—")}</td>
|
||
<td class="nowrap">${riskPill(p.risk_level)}</td>
|
||
<td class="nowrap">${esc(p.update_date || "—")}</td>
|
||
<td>${esc((p.remark || "").slice(0, 40)) || "—"}</td>
|
||
${ops ? `<td class="nowrap col-ops">${rowOps({
|
||
edit: `data-cedit="${p.id}"`,
|
||
archive: `data-carch="${p.id}"`,
|
||
archived: p.archived,
|
||
remove: `data-cdel="${p.id}"`,
|
||
})}</td>` : ""}
|
||
</tr>`).join("")}
|
||
</tbody>
|
||
</table>
|
||
</div>`;
|
||
}
|
||
|
||
/** 定开项目「本期」分堆 —— 工作看板右栏与「本周进展」tab 共用同一套口径：
|
||
· 本周新增：下单时间落在本期 ∧（已下单 ∨ 提前交付），和「更新时间」无关
|
||
· 本周验收：更新时间落在本期 ∧ 项目状态为「已验收」
|
||
rows 传 /custom/projects 全量或 /weekly 的行都行，两者都带 sign_date / update_date / origin / project_status。 */
|
||
function customWeeklySections(rows, sc) {
|
||
const inScope = (v) => {
|
||
const s = String(v || "").slice(0, 10);
|
||
return !!(sc && s && s >= sc.start && s <= sc.end);
|
||
};
|
||
const added = rows.filter((r) => inScope(r.sign_date) && (isPlaced(r) || r.origin === "提前交付"));
|
||
const accepted = rows.filter((r) => inScope(r.update_date) && r.project_status === "已验收");
|
||
const inAdded = {}, inAccepted = {};
|
||
added.forEach((r) => { inAdded[r.id] = true; });
|
||
accepted.forEach((r) => { inAccepted[r.id] = true; });
|
||
const seen = {}, listed = [];
|
||
[added, accepted].forEach((list) => list.forEach((r) => {
|
||
if (!seen[r.id]) { seen[r.id] = true; listed.push(r); }
|
||
}));
|
||
return { added, accepted, listed };
|
||
}
|
||
|
||
/** 本周进展：更新时间落在「顶栏选中周期」内的项目；并按 验收/下单/提前交付/进行中 分类统计 */
|
||
function renderCustomWeekly(allRows, hdr) {
|
||
hdr = hdr || {};
|
||
const sc = scopeRange();
|
||
if (!sc) return `<div class="empty">没有取到当前周期的起止日期（刚更新过后端的话，请重启服务后刷新）</div>`;
|
||
const start = sc.start, end = sc.end;
|
||
const dayOf = (v) => String(v || "").slice(0, 10);
|
||
const inScope = (v) => { const s = dayOf(v); return !!s && s >= start && s <= end; };
|
||
const rows = allRows.filter((p) => inScope(p.update_date)); // 更新时间在本期
|
||
|
||
const sum = (arr, f) => arr.reduce((a, p) => a + Number(p[f] || 0), 0);
|
||
// 新增项目 / 验收情况：与工作看板右栏共用 customWeeklySections，两处口径必须一致
|
||
const { added: newDeal, accepted: acc } = customWeeklySections(allRows, sc);
|
||
// 进行中项目：本期更新的「进行中 + 交付完成」
|
||
const doing = rows.filter((p) => p.project_status === "进行中" || p.project_status === "交付完成");
|
||
|
||
const stat = (label, rows, color) =>
|
||
`<div class="stat" style="--c:${color}"><div class="stat-num">${rows.length}<span class="stat-unit">个</span> · <span class="stat-money">${fen(sum(rows, "amount"))}</span><span class="stat-unit">万</span></div><div class="stat-label">${label}</div></div>`;
|
||
|
||
const statBar = `<div class="stat-row">
|
||
${stat("验收情况", acc, "var(--amber)")}
|
||
${stat("新增项目", newDeal, "var(--violet)")}
|
||
${stat("进行中项目", doing, "var(--primary)")}
|
||
</div>
|
||
`;
|
||
|
||
return `<div class="card">
|
||
${cardHead({ title: "本周进展", count: rows.length, chips: hdr.chips, tools: hdr.tools, chipsRow: true })}
|
||
${statBar}
|
||
${rows.length
|
||
? customTableHtml(rows.slice().sort((a, b) => String(b.update_date || "").localeCompare(String(a.update_date || ""))), false)
|
||
: `<div class="empty">本期没有更新的定开项目</div>`}
|
||
</div>`;
|
||
}
|
||
|
||
/** 年度任务：季度计收目标（可在页面上改，存后端）+ 按「验收时间 / 下单时间」回填的完成数据 */
|
||
function renderCustomAnnual(allRows, hdr) {
|
||
hdr = hdr || {};
|
||
const meta = annualTargetMeta();
|
||
const Y = meta.year;
|
||
const saved = meta.targets;
|
||
const qOf = (s) => { const t = String(s || "").trim().toUpperCase(); return /^Q[1-4]$/.test(t) ? t : ""; };
|
||
const signQ = (d) => {
|
||
const s = String(d || "");
|
||
if (!/^\d{4}-\d{2}/.test(s) || Number(s.slice(0, 4)) !== Y) return 0;
|
||
return Math.floor((Number(s.slice(5, 7)) - 1) / 3) + 1;
|
||
};
|
||
const sumW = (arr) => arr.reduce((a, p) => a + Number(p.amount || 0), 0) / 10000; // 元 → 万元
|
||
const fmt = (v) => v.toLocaleString("zh-CN", { maximumFractionDigits: 2 });
|
||
const rate = (target, acc) => (!target ? "—" : ((acc / target) * 100).toFixed(1) + "%");
|
||
const targetOf = (q) => Number(saved[String(q)] || 0);
|
||
|
||
const rows = [1, 2, 3, 4].map((q) => {
|
||
const acc = allRows.filter((p) => qOf(p.accept_date) === "Q" + q); // 计收：验收项目
|
||
const sign = allRows.filter((p) => isPlaced(p) && signQ(p.sign_date) === q); // 签单：下单项目（已下单）
|
||
const accAmt = sumW(acc);
|
||
return { q, target: targetOf(q), accN: acc.length, accAmt, signN: sign.length, signAmt: sumW(sign) };
|
||
});
|
||
const tot = rows.reduce((a, r) => ({
|
||
target: a.target + r.target, accN: a.accN + r.accN, accAmt: a.accAmt + r.accAmt,
|
||
signN: a.signN + r.signN, signAmt: a.signAmt + r.signAmt,
|
||
}), { target: 0, accN: 0, accAmt: 0, signN: 0, signAmt: 0 });
|
||
|
||
const editing = !!state.customAnnualEdit;
|
||
const tr = (r) => `
|
||
<tr>
|
||
<td class="nowrap">Q${r.q}</td>
|
||
<td class="num">${editing
|
||
? `<input class="inp num-inp" type="number" min="0" step="0.01" data-at="${r.q}" value="${r.target}" ${canW("custom") ? "" : "disabled"} />`
|
||
: fmt(r.target)}</td>
|
||
<td class="num">${r.accN}</td>
|
||
<td class="num">${fmt(r.accAmt)}</td>
|
||
<td class="num" data-ate="${r.q}" data-acc="${r.accAmt}">${rate(r.target, r.accAmt)}</td>
|
||
<td class="num">${r.signN}</td>
|
||
<td class="num">${fmt(r.signAmt)}</td>
|
||
</tr>`;
|
||
|
||
return `<div class="card">
|
||
${cardHead({
|
||
title: "年度任务（" + Y + "年）", count: Y + "年",
|
||
chips: hdr.chips, chipsRow: true,
|
||
tools: canW("custom") ? `<button class="btn sm primary" id="atSave">${editing ? "保存" : "编辑"}</button>` : "",
|
||
})}
|
||
<div class="tbl-wrap">
|
||
<table class="tbl">
|
||
<thead><tr>
|
||
<th>季度</th>
|
||
<th class="num">计收目标（万元）</th>
|
||
<th class="num">计收项目数量</th>
|
||
<th class="num">计收项目金额(万元)</th>
|
||
<th class="num">计收完成率</th>
|
||
<th class="num">新增签单项目数量</th>
|
||
<th class="num">新增签单项目数量金额(万元)</th>
|
||
</tr></thead>
|
||
<tbody>
|
||
${rows.map(tr).join("")}
|
||
<tr style="font-weight:600">
|
||
<td class="nowrap">合计</td>
|
||
<td class="num" data-att="1">${fmt(tot.target)}</td>
|
||
<td class="num">${tot.accN}</td>
|
||
<td class="num">${fmt(tot.accAmt)}</td>
|
||
<td class="num" data-ate="0" data-acc="${tot.accAmt}">${rate(tot.target, tot.accAmt)}</td>
|
||
<td class="num">${tot.signN}</td>
|
||
<td class="num">${fmt(tot.signAmt)}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
</div>`;
|
||
}
|
||
|
||
/** 年度计收目标（万元）：后端存一年一套，没配过时返回《年度任务.xlsx》的默认值 */
|
||
function annualTargetMeta() {
|
||
const a = (state.customMeta && state.customMeta.annual_targets) || {};
|
||
return { year: a.year || new Date().getFullYear(), targets: a.targets || {} };
|
||
}
|
||
|
||
/** 年度目标：默认只读，点「编辑」进入编辑模式（按钮变「保存」），改数字实时重算完成率与合计 */
|
||
function bindAnnualTargets(host) {
|
||
const btn = host.querySelector("#atSave");
|
||
if (!btn) return;
|
||
if (!state.customAnnualEdit) {
|
||
btn.addEventListener("click", () => { state.customAnnualEdit = true; renderCustom(); });
|
||
return;
|
||
}
|
||
const meta = annualTargetMeta();
|
||
const save = btn;
|
||
const inputs = Array.prototype.slice.call(host.querySelectorAll("[data-at]"));
|
||
const fmt = (v) => v.toLocaleString("zh-CN", { maximumFractionDigits: 2 });
|
||
const valOf = (q) => {
|
||
const el = inputs.filter((i) => i.dataset.at === String(q))[0];
|
||
return el ? Number(el.value) || 0 : 0;
|
||
};
|
||
const rate = (target, acc) => (!target ? "—" : ((acc / target) * 100).toFixed(1) + "%");
|
||
const recalc = () => {
|
||
const total = [1, 2, 3, 4].reduce((a, q) => a + valOf(q), 0);
|
||
host.querySelectorAll("[data-ate]").forEach((cell) => {
|
||
const q = Number(cell.dataset.ate);
|
||
const target = q === 0 ? total : valOf(q);
|
||
cell.textContent = rate(target, Number(cell.dataset.acc) || 0);
|
||
});
|
||
host.querySelector("[data-att]").textContent = fmt(total);
|
||
};
|
||
inputs.forEach((i) => i.addEventListener("input", recalc));
|
||
save.addEventListener("click", async () => {
|
||
const targets = {};
|
||
inputs.forEach((i) => { targets[i.dataset.at] = Number(i.value) || 0; });
|
||
save.disabled = true;
|
||
try {
|
||
state.customMeta.annual_targets = await put("/custom/annual-targets", { year: meta.year, targets: targets });
|
||
} catch (e) {
|
||
save.disabled = false;
|
||
toast("保存失败：" + e.message);
|
||
return;
|
||
}
|
||
state.customAnnualEdit = false;
|
||
toast("已保存年度目标");
|
||
renderCustom();
|
||
});
|
||
}
|
||
|
||
/** 项目总览表：行内「修改 / 归档 / 删除」，名称可点开详情；表头（下单时间 / 订单金额 / 更新时间）可排序 */
|
||
function bindCustomList(host) {
|
||
host.querySelectorAll("[data-copen]").forEach((a) =>
|
||
a.addEventListener("click", () => openCustomDrawer(Number(a.dataset.copen), "view"))
|
||
);
|
||
host.querySelectorAll("[data-cedit]").forEach((b) =>
|
||
b.addEventListener("click", () => openCustomDrawer(Number(b.dataset.cedit), "edit"))
|
||
);
|
||
const findRow = (id) => (state.customRows || []).find((x) => x.id === id);
|
||
host.querySelectorAll("[data-carch]").forEach((b) =>
|
||
b.addEventListener("click", () => {
|
||
const p = findRow(Number(b.dataset.carch));
|
||
if (p) archiveCustomProject(p, afterWrite);
|
||
})
|
||
);
|
||
host.querySelectorAll("[data-cdel]").forEach((b) =>
|
||
b.addEventListener("click", () => {
|
||
const p = findRow(Number(b.dataset.cdel));
|
||
if (p) deleteCustomProject(p, afterWrite);
|
||
})
|
||
);
|
||
bindAnnualTargets(host);
|
||
host.querySelectorAll("[data-sort]").forEach((th) =>
|
||
th.addEventListener("click", () => {
|
||
const k = th.dataset.sort;
|
||
const cur = state.customSort || { key: "update_date", dir: "desc" };
|
||
state.customSort = { key: k, dir: cur.key === k && cur.dir === "desc" ? "asc" : "desc" };
|
||
renderCustom();
|
||
})
|
||
);
|
||
}
|
||
|
||
/**
|
||
* 新建定开项目 —— 全站唯一的新建入口。
|
||
* 「定开项目」工具栏和「更新录入」页都调用它，避免两套录入逻辑。
|
||
*/
|
||
function openNewCustomDialog(onDone) {
|
||
const today = new Date();
|
||
const iso = today.getFullYear() + "-" +
|
||
String(today.getMonth() + 1).padStart(2, "0") + "-" +
|
||
String(today.getDate()).padStart(2, "0");
|
||
|
||
// 选项直接对齐《定开项目.xlsx》台账字段取值
|
||
const opts = (list, sel) =>
|
||
list.map((v) => `<option value="${esc(v)}" ${v === sel ? "selected" : ""}>${esc(v)}</option>`).join("");
|
||
const originOpts = opts(CUSTOM_ORIGINS, "华智下单");
|
||
const industryOpts = opts(["安平", "政府", "企业", "教育", "交通", "医疗", "高速", "行业", "其他"], "");
|
||
const statusOpts = opts(["待开发", "进行中", "交付完成", "已验收", "退单"], "待开发");
|
||
const riskOpts = opts(["1.高风险", "2.低风险"], "2.低风险");
|
||
const numVal = (sel) => ($(sel).value === "" ? null : Number($(sel).value));
|
||
const txtVal = (sel) => $(sel).value.trim() || null;
|
||
|
||
openModal(
|
||
`<div class="modal-head"><h3>新建定开项目</h3><button class="icon-btn" data-mclose title="关闭">${Ico.svg("x")}</button></div>
|
||
<div class="modal-body">
|
||
<div class="notice info">字段与《定开项目.xlsx》台账一致；<b>项目名称</b>必填，其余可建档后补。区域按「办事处」自动归集。</div>
|
||
<div class="form-grid">
|
||
<div class="form-row"><label>项目名称 *</label><input class="inp" id="ncName" data-autofocus placeholder="如：重庆高新三期" style="width:100%" /></div>
|
||
<div class="form-row"><label>项目归属</label><select class="sel" id="ncOrigin" style="width:100%">${originOpts}</select></div>
|
||
<div class="form-row"><label>项目ID</label><input class="inp" id="ncCode" placeholder="市场编号" style="width:100%" /></div>
|
||
<div class="form-row"><label>下单时间</label><input class="inp" id="ncSign" type="date" value="${iso}" style="width:100%" /></div>
|
||
<div class="form-row"><label>办事处</label><input class="inp" id="ncOffice" placeholder="如：黑龙江" style="width:100%" /></div>
|
||
<div class="form-row"><label>行业</label><select class="sel" id="ncIndustry" style="width:100%">${industryOpts}</select></div>
|
||
<div class="form-row"><label>市场下单人天</label><input class="inp" id="ncManDays" type="number" min="0" step="0.5" style="width:100%" /></div>
|
||
<div class="form-row"><label>订单金额（元）</label><input class="inp" id="ncAmount" type="number" min="0" style="width:100%" /></div>
|
||
<div class="form-row"><label>市场责任人</label><input class="inp" id="ncMarketOwner" placeholder="多人用 / 分隔" style="width:100%" /></div>
|
||
<div class="form-row"><label>项目状态</label><select class="sel" id="ncStatus" style="width:100%">${statusOpts}</select></div>
|
||
<div class="form-row"><label>进度(%)</label><input class="inp" id="ncProgress" type="number" min="0" max="100" step="5" placeholder="进行中项目填 0~100" style="width:100%" /></div>
|
||
<div class="form-row"><label>验收时间</label><input class="inp" id="ncAcceptQuarter" placeholder="季度文本，如 Q3" style="width:100%" /></div>
|
||
<div class="form-row"><label>推动验收计划</label><input class="inp" id="ncAcceptPlan" placeholder="如 Q4 / 27年" style="width:100%" /></div>
|
||
<div class="form-row"><label>风险值</label><select class="sel" id="ncRisk" style="width:100%">${riskOpts}</select></div>
|
||
<div class="form-row"><label>验收日期</label><input class="inp" id="ncAcceptReal" type="date" title="真实验收日期，用于本月/本年验收统计" style="width:100%" /></div>
|
||
<div class="form-row full"><label>备注</label><textarea class="inp" id="ncRemark" rows="2" style="width:100%"></textarea></div>
|
||
<div class="form-row full"><label>重点项目</label><label class="switch"><input type="checkbox" id="ncKey" /> 标记为重点（★，看板置顶）</label></div>
|
||
</div>
|
||
<div class="notice err" id="mErr" style="display:none"></div>
|
||
</div>
|
||
<div class="modal-foot">
|
||
<button class="btn" data-mclose>取消</button>
|
||
<button class="btn primary" id="mOk">创建</button>
|
||
</div>`
|
||
);
|
||
|
||
const submit = async () => {
|
||
const name = txtVal("#ncName");
|
||
if (!name) return modalError("请填写项目名称");
|
||
const btn = $("#mOk");
|
||
btn.disabled = true;
|
||
try {
|
||
const p = await post("/custom/projects", {
|
||
name: name,
|
||
origin: txtVal("#ncOrigin"),
|
||
project_code: txtVal("#ncCode"),
|
||
sign_date: txtVal("#ncSign"),
|
||
office: txtVal("#ncOffice"),
|
||
industry: txtVal("#ncIndustry"),
|
||
man_days: numVal("#ncManDays"),
|
||
progress: numVal("#ncProgress") == null ? 0 : numVal("#ncProgress"),
|
||
amount: numVal("#ncAmount"),
|
||
market_owner: txtVal("#ncMarketOwner"),
|
||
project_status: txtVal("#ncStatus"),
|
||
accept_date: txtVal("#ncAcceptQuarter"),
|
||
accept_plan: txtVal("#ncAcceptPlan"),
|
||
risk_level: txtVal("#ncRisk"),
|
||
accept_date_real: txtVal("#ncAcceptReal"),
|
||
is_key: $("#ncKey").checked,
|
||
remark: txtVal("#ncRemark"),
|
||
});
|
||
closeModal();
|
||
toast("已创建「" + p.name + "」");
|
||
if (onDone) onDone(p); else refresh();
|
||
} catch (e) {
|
||
btn.disabled = false;
|
||
modalError(e.message);
|
||
}
|
||
};
|
||
$("#mOk").addEventListener("click", submit);
|
||
$("#ncName").addEventListener("keydown", (e) => { if (e.key === "Enter") submit(); });
|
||
}
|
||
|
||
/** 归档 / 恢复：归档后不进看板与统计，随时可恢复 */
|
||
async function archiveCustomProject(p, onDone) {
|
||
const toArchive = !p.archived;
|
||
const ok = await confirmDialog({
|
||
title: toArchive ? "归档定开项目" : "恢复定开项目",
|
||
okText: toArchive ? "确认归档" : "确认恢复",
|
||
body:
|
||
`<p style="margin:0 0 10px"><b>${esc(p.name)}</b></p>` +
|
||
`<div class="notice ${toArchive ? "warn" : "info"}">${
|
||
toArchive
|
||
? "归档后该项目不再出现在项目明细与统计中，历史周期记录完整保留。"
|
||
: "恢复后重新计入项目明细与统计。"
|
||
}</div>`,
|
||
});
|
||
if (!ok) return;
|
||
try {
|
||
await patch("/custom/projects/" + p.id, { archived: toArchive });
|
||
toast(toArchive ? "已归档" : "已恢复");
|
||
if (onDone) onDone(); else refresh();
|
||
} catch (e) {
|
||
toast("操作失败：" + e.message);
|
||
}
|
||
}
|
||
|
||
/** 删除：连带周期记录一起清除，需逐字输入项目名确认 */
|
||
async function deleteCustomProject(p, onDone) {
|
||
const ok = await confirmDialog({
|
||
title: "删除定开项目",
|
||
danger: true,
|
||
okText: "永久删除",
|
||
requireText: p.name,
|
||
body:
|
||
`<div class="notice err">将连同该项目 <b>${p.update_count || 0}</b> 条周期记录一并删除，<b>删除后无法恢复</b>。</div>
|
||
<ul class="bullet-list">
|
||
<li>阶段：${esc(stageMeta(p.stage).name)} 合同额：${money(p.amount)}</li>
|
||
<li>已计收：${money(p.revenue_amount)} 入库时间：${esc(p.entry_date || "—")}</li>
|
||
</ul>
|
||
<div style="font-size:12px;color:var(--muted);margin-top:8px">只是暂时不想在看板里看到它？请改用「归档」，数据全部保留。</div>`,
|
||
});
|
||
if (!ok) return;
|
||
try {
|
||
const r = await del("/custom/projects/" + p.id);
|
||
toast("已删除「" + r.name + "」及其 " + r.deleted_updates + " 条周期记录");
|
||
if (onDone) onDone(); else refresh();
|
||
} catch (e) {
|
||
toast("删除失败：" + e.message);
|
||
}
|
||
}
|
||
|
||
/** cid 定开项目抽屉；mode = "view" 只读详情（默认） / "edit" 编辑基础信息 */
|
||
async function openCustomDrawer(cid, mode) {
|
||
mode = mode === "edit" ? "edit" : "view";
|
||
if (!canW("custom")) mode = "view";
|
||
$("#drawerMask").classList.add("open");
|
||
$("#drawer").classList.add("open");
|
||
$("#drawerBody").innerHTML = `<div class="empty">加载中…</div>`;
|
||
drawerActions("");
|
||
const d = await api("/custom/projects/" + cid);
|
||
state.drawerCustom = d;
|
||
const p = d.project;
|
||
$("#drawerTitle").innerHTML = `${p.is_key ? starMark(true) : ""}${esc(p.name)}${p.archived ? ` <span class="arch-badge">已归档</span>` : ""}`;
|
||
const progPct = (p.project_status === "进行中" || Number(p.progress || 0) > 0) ? Math.round(p.progress || 0) + "%" : null;
|
||
$("#drawerSub").innerHTML = `${stagePill(p.stage)} ${customStatusPill(p.project_status)}` +
|
||
(progPct ? ` <span class="tag-mini">进度 ${progPct}</span>` : "");
|
||
|
||
const timeline = d.timeline.slice().reverse().map((t) => `
|
||
<div class="timeline-row">
|
||
<div class="t-label">${esc(t.period.full_label.replace(/^\d+年/, ""))}</div>
|
||
<div style="flex:1">${stagePill(t.stage)}${t.progress !== null ? ` <span class="tag-mini">${t.progress}%</span>` : ""}
|
||
${t.revenue_delta ? ` <span class="tag-mini" style="background:#e9f7ef;color:#16a34a">计收 ${fen(t.revenue_delta)}万</span>` : ""}</div>
|
||
</div>
|
||
<div style="font-size:12.5px;color:var(--text-2);line-height:1.7;padding:0 0 8px 120px;white-space:pre-wrap">${nl2br(t.content || "")}</div>`).join("");
|
||
|
||
// 「添加动态」落到顶栏当前选中的那一周，与更新录入页的周期下拉一致
|
||
|
||
const ro = (label, val) => `<div class="form-row"><label>${label}</label><div class="ro">${val}</div></div>`;
|
||
const optList = (list, sel) => list.map((v) => `<option value="${esc(v)}" ${v === sel ? "selected" : ""}>${esc(v)}</option>`).join("");
|
||
const originOpts = optList(CUSTOM_ORIGINS, p.origin);
|
||
const industryOpts = optList(["安平", "政府", "企业", "教育", "交通", "医疗", "高速", "行业", "其他"], p.industry);
|
||
const statusOpts = optList(["待开发", "进行中", "交付完成", "已验收", "退单"], p.project_status);
|
||
const riskOpts = optList(["1.高风险", "2.低风险"], p.risk_level);
|
||
|
||
// 市场台账（来源《定开项目.xlsx》）：详情只读，修改模式给输入框
|
||
const numOrDash = (v) => (v === null || v === undefined ? "—" : String(Math.round(v)));
|
||
const ledgerSec = `
|
||
<div class="sec">
|
||
<div class="sec-title">项目信息</div>
|
||
${mode === "edit" ? `
|
||
<div class="form-row"><label>项目归属</label><select class="sel" id="cdOrigin" style="width:100%">${originOpts}</select></div>
|
||
<div class="form-row"><label>项目名称 *</label><input class="inp" id="cdName" value="${esc(p.name)}" style="width:100%" /></div>
|
||
<div class="form-row"><label>项目ID</label><input class="inp" id="cdCode" value="${esc(p.project_code || "")}" style="width:100%" /></div>
|
||
<div class="form-row"><label>下单时间</label><input class="inp" id="cdSign" value="${esc(p.sign_date || "")}" style="width:100%" placeholder="YYYY-MM-DD 或季度文本" /></div>
|
||
<div class="form-row"><label>办事处</label><input class="inp" id="cdOffice" value="${esc(p.office || "")}" style="width:100%" /></div>
|
||
<div class="form-row"><label>行业</label><select class="sel" id="cdIndustry" style="width:100%">${industryOpts}</select></div>
|
||
<div class="form-row"><label>市场下单人天</label><input class="inp" id="cdManDays" type="number" min="0" step="0.5" value="${p.man_days == null ? "" : p.man_days}" style="width:100%" /></div>
|
||
<div class="form-row"><label>订单金额（元）</label><input class="inp" id="cdAmount" type="number" min="0" value="${p.amount == null ? "" : p.amount}" style="width:100%" /></div>
|
||
<div class="form-row"><label>市场责任人</label><input class="inp" id="cdMarketOwner" value="${esc(p.market_owner || "")}" style="width:100%" placeholder="多人用 / 分隔" /></div>
|
||
<div class="form-row"><label>项目状态</label><select class="sel" id="cdStatus" style="width:100%">${statusOpts}</select></div>
|
||
<div class="form-row"><label>进度(%)</label><div style="display:flex;align-items:center;gap:6px"><input class="inp" id="cdProgress" type="number" min="0" max="100" step="5" value="${p.progress == null ? "" : Math.round(p.progress)}" style="width:100px" /> %</div></div>
|
||
<div class="form-row"><label>验收时间</label><input class="inp" id="cdAcceptQuarter" value="${esc(p.accept_date || "")}" style="width:100%" placeholder="季度文本，如 Q3" /></div>
|
||
<div class="form-row"><label>推动验收计划</label><input class="inp" id="cdAcceptPlan" value="${esc(p.accept_plan || "")}" style="width:100%" placeholder="如 Q4 / 27年" /></div>
|
||
<div class="form-row"><label>风险值</label><select class="sel" id="cdRisk" style="width:100%">${riskOpts}</select></div>
|
||
<div class="form-row full"><label>验收日期</label><input class="inp" id="cdAcceptReal" type="date" value="${esc(p.accept_date_real || "")}" style="width:100%" title="真实验收日期，用于本月/本年验收统计" /></div>
|
||
<div class="form-row full"><label>备注</label><textarea class="inp" id="cdRemark" rows="2" style="width:100%">${esc(p.remark || "")}</textarea></div>
|
||
<div class="form-row full"><label>更新时间</label><div class="ro">${esc(p.update_date || "—")}<span style="font-size:12px;color:var(--muted);margin-left:10px">跟随「下单时间」</span></div></div>
|
||
` : `
|
||
${ro("项目归属", esc(p.origin || "—"))}
|
||
${ro("项目ID", esc(p.project_code || "—"))}
|
||
${ro("办事处", esc(p.office || p.region || "—"))}
|
||
${ro("行业", esc(p.industry || "—"))}
|
||
${ro("下单时间", esc(p.sign_date || "—"))}
|
||
${ro("市场下单人天", numOrDash(p.man_days))}
|
||
${ro("市场责任人", esc(p.market_owner || "—"))}
|
||
${ro("交付负责人", esc(p.owner || "—"))}
|
||
${ro("团队成员", nameChips(p.members))}
|
||
${ro("客户", esc(p.customer || "—"))}
|
||
${ro("项目状态", customStatusPill(p.project_status))}
|
||
${ro("进度", progPct || "—")}
|
||
${ro("验收时间", esc(p.accept_date || "—"))}
|
||
${ro("推动验收计划", esc(p.accept_plan || "—"))}
|
||
${ro("风险值", riskPill(p.risk_level))}
|
||
${ro("交付环节", `<div style="max-width:100%">${pipelineBar(p, true)}</div>`)}
|
||
${ro("备注", p.remark ? nl2br(p.remark) : "—")}
|
||
${ro("更新时间", esc(p.update_date || "—"))}
|
||
`}
|
||
</div>`;
|
||
|
||
drawerActions(mode === "edit" ? `
|
||
<button class="btn sm" id="cdCancel">取消</button>
|
||
<button class="btn sm primary" id="cdSave">保存</button>` : `
|
||
<button class="btn sm danger" id="cdDelete">删除</button>
|
||
<button class="btn sm" id="cdArchive">${p.archived ? "恢复" : "归档"}</button>
|
||
<button class="btn sm" id="cdKey">${p.is_key ? "取消重点" : "标记重点"}</button>
|
||
<button class="btn sm primary" id="cdEdit">修改</button>`);
|
||
|
||
$("#drawerBody").innerHTML = `
|
||
${mode === "edit" ? `<div class="notice err" id="cdErr" style="display:none"></div>` : ""}
|
||
${ledgerSec}
|
||
${mode === "view" ? `
|
||
<div class="sec">
|
||
<div class="sec-title">收入确认</div>
|
||
<div class="grid kpi" style="gap:10px">
|
||
<div class="kpi">${Ico.badge("wallet")}<div class="k-label">合同额</div><div class="k-value" style="font-size:19px">${wan(p.amount)}</div></div>
|
||
<div class="kpi">${Ico.badge("receipt")}<div class="k-label">可确认收入</div><div class="k-value" style="font-size:19px">${wan(p.confirmed_amount)}</div><div class="k-foot">${p.manual_ratio == null ? "按阶段" : "手动"} ${p.revenue_ratio}%</div></div>
|
||
<div class="kpi">${Ico.badge("wallet")}<div class="k-label">已计收</div><div class="k-value" style="font-size:19px">${wan(p.revenue_amount)}</div></div>
|
||
<div class="kpi">${Ico.badge("hourglass")}<div class="k-label">待计收</div><div class="k-value" style="font-size:19px">${wan(p.pending_amount)}</div></div>
|
||
</div>
|
||
<div class="grid kpi" style="gap:10px;margin-top:10px">
|
||
<div class="kpi">${Ico.badge("receipt")}<div class="k-label">已开票</div><div class="k-value" style="font-size:19px">${wan(p.invoice_amount)}</div><div class="k-foot">待开票 ${wan(p.pending_invoice)}</div></div>
|
||
<div class="kpi">${Ico.badge("trending-up")}<div class="k-label">已回款</div><div class="k-value" style="font-size:19px">${wan(p.received_amount)}</div><div class="k-foot">待回款 ${wan(p.pending_received)}</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sec">
|
||
<div class="sec-title">交付记录（${d.updates.length}）</div>
|
||
<div class="sec-actions upd">
|
||
<button class="btn sm primary" id="cdAddUpd">${Ico.svg("plus")}添加交付记录</button>
|
||
<button class="btn sm ghost" id="cdIntake">${Ico.svg("sparkles")}AI 录入</button>
|
||
</div>
|
||
${d.updates.length ? d.updates.map((u) => updateItem(u, "custom")).join("") : `<div class="empty">暂无交付记录</div>`}
|
||
</div>
|
||
|
||
${d.timeline.length ? `<div class="sec"><div class="sec-title">阶段流转</div>${timeline}</div>` : ""}
|
||
` : ""}`;
|
||
|
||
const on = (sel, fn) => { const el = $(sel); if (el) el.addEventListener("click", fn); };
|
||
|
||
on("#cdEdit", () => openCustomDrawer(cid, "edit"));
|
||
on("#cdAddUpd", () =>
|
||
openUpdateDialog({ kind: "custom", periodId: state.weekId, customProjectId: cid, stage: p.stage, onDone: () => openCustomDrawer(cid, "view") }));
|
||
on("#cdIntake", () => {
|
||
state.intakeType = "custom";
|
||
state.intakePeriodId = state.weekId;
|
||
customIntakeId = cid;
|
||
closeDrawer();
|
||
setView("intake");
|
||
});
|
||
bindUpdateOps($("#drawerBody"), d.updates, () => openCustomDrawer(cid, "view"));
|
||
on("#cdCancel", () => openCustomDrawer(cid, "view"));
|
||
on("#cdSave", async () => {
|
||
const btn = $("#cdSave");
|
||
const err = $("#cdErr");
|
||
btn.disabled = true;
|
||
err.style.display = "none";
|
||
try {
|
||
await patch("/custom/projects/" + cid, {
|
||
name: $("#cdName").value.trim(),
|
||
origin: $("#cdOrigin").value.trim() || null,
|
||
project_code: $("#cdCode").value.trim() || null,
|
||
sign_date: $("#cdSign").value || null,
|
||
office: $("#cdOffice").value.trim() || null,
|
||
industry: $("#cdIndustry").value.trim() || null,
|
||
man_days: $("#cdManDays").value === "" ? null : Number($("#cdManDays").value),
|
||
amount: $("#cdAmount").value === "" ? null : Number($("#cdAmount").value),
|
||
market_owner: $("#cdMarketOwner").value.trim() || null,
|
||
project_status: $("#cdStatus").value.trim() || null,
|
||
progress: $("#cdProgress").value === "" ? 0 : Number($("#cdProgress").value),
|
||
accept_date: $("#cdAcceptQuarter").value.trim() || null,
|
||
accept_plan: $("#cdAcceptPlan").value.trim() || null,
|
||
risk_level: $("#cdRisk").value.trim() || null,
|
||
accept_date_real: $("#cdAcceptReal").value || null,
|
||
remark: $("#cdRemark").value,
|
||
});
|
||
} catch (e) {
|
||
btn.disabled = false;
|
||
err.textContent = "保存失败：" + e.message;
|
||
err.style.display = "";
|
||
return;
|
||
}
|
||
toast("已保存");
|
||
await afterWrite();
|
||
openCustomDrawer(cid, "view");
|
||
});
|
||
on("#cdKey", async () => {
|
||
await patch("/custom/projects/" + cid, { is_key: !p.is_key });
|
||
await afterWrite();
|
||
openCustomDrawer(cid, mode);
|
||
});
|
||
on("#cdArchive", () => archiveCustomProject(p, () => { closeDrawer(); afterWrite(); }));
|
||
on("#cdDelete", () => deleteCustomProject(p, () => { closeDrawer(); afterWrite(); }));
|
||
}
|
||
|
||
/* ------------------------------------------------ 录入方式（两类项目共用） */
|
||
/** 录入方式分段控件：直接写入（第一位）/ AI 整理 */
|
||
function intakeModeSegHtml() {
|
||
const mode = intakeMode();
|
||
return `
|
||
<div style="display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap">
|
||
<div class="seg" id="intakeModeSeg" style="width:max-content">
|
||
<button class="seg-btn ${mode === "direct" ? "active" : ""}" data-imode="direct">直接写入</button>
|
||
<button class="seg-btn ${mode === "ai" ? "active" : ""}" data-imode="ai">AI 整理</button>
|
||
</div>
|
||
${mode === "ai" ? `<span class="sec-hint">AI 补出摘要 / 进度 / 状态 / 风险 / 下一步，正文保持原文，最终<b>只写 1 条</b></span>` : ""}
|
||
</div>`;
|
||
}
|
||
|
||
function intakeMode() {
|
||
return state.intakeMode === "ai" ? "ai" : "direct";
|
||
}
|
||
|
||
/** 切换录入方式：保留已填的原文，重画当前录入页 */
|
||
function bindIntakeMode(rawSel, rerender) {
|
||
document.querySelectorAll("#intakeModeSeg [data-imode]").forEach((b) =>
|
||
b.addEventListener("click", () => {
|
||
if (intakeMode() === b.dataset.imode) return;
|
||
const keep = $(rawSel) ? $(rawSel).value : "";
|
||
state.intakeMode = b.dataset.imode;
|
||
Promise.resolve(rerender()).then(() => { const el = $(rawSel); if (el) el.value = keep; });
|
||
})
|
||
);
|
||
}
|
||
|
||
/* ------------------------------------------------ 定制项目录入 */
|
||
async function renderCustomIntake(host) {
|
||
const projects = await api("/custom/projects");
|
||
const weeks = state.periods.weeks.slice().reverse();
|
||
const curPeriodId =
|
||
state.gran === "week"
|
||
? state.weekId
|
||
: currentMonth()
|
||
? currentMonth().period_ids[currentMonth().period_ids.length - 1]
|
||
: null;
|
||
|
||
host.innerHTML = `
|
||
<div class="seg" id="intakeTypeSeg" style="margin-bottom:14px">
|
||
<button class="seg-btn ${state.intakeType === "general" ? "active" : ""}" data-itype="general">自研产品</button>
|
||
<button class="seg-btn ${state.intakeType === "custom" ? "active" : ""}" data-itype="custom">定制项目</button>
|
||
</div>
|
||
${intakeModeSegHtml()}
|
||
<div class="card">
|
||
<div class="card-head"><h4>定制项目 · 交付记录录入</h4>
|
||
<button class="btn sm" id="btnNewCustomIntake">${Ico.svg("plus")}新建定制项目</button>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="step" style="margin-bottom:12px"><span class="step-no">1</span><span class="step-title">选择定制项目与周期</span></div>
|
||
<div class="inline-fields" style="margin-bottom:20px">
|
||
<input id="cInSearch" class="inp" placeholder="搜索项目名称…" style="width:200px" />
|
||
<select id="cInProject" class="sel" style="width:320px">
|
||
${projects.map((p) => `<option value="${p.id}" ${p.id === customIntakeId ? "selected" : ""}>${p.is_key ? "★ " : ""}${esc(p.name)}</option>`).join("")}
|
||
</select>
|
||
<select id="cInPeriod" class="sel" style="width:200px">
|
||
${weeks.map((w) => `<option value="${w.id}" ${w.id === (state.intakePeriodId || curPeriodId) ? "selected" : ""}>${esc(w.full_label)}</option>`).join("")}
|
||
<option value="__new">＋ 新建周期…</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="step" style="margin-bottom:10px"><span class="step-no">2</span><span class="step-title">粘贴该项目的原始内容</span></div>
|
||
<textarea id="cInRaw" class="inp big-textarea" placeholder="例如： 重庆高新三期：合同已签订，金额 100 万，开发交付阶段，本周完成集群部署，进度 60% 风险：客户机房断电，联调推迟 下一步：下周完成灰度上线，推动 30% 预付款计收"></textarea>
|
||
|
||
${intakeMode() === "ai" ? `
|
||
<div style="display:flex;gap:10px;margin:14px 0 6px;align-items:center;flex-wrap:wrap">
|
||
<button class="btn primary" id="btnCParse">AI 整理</button>
|
||
<button class="btn" id="btnCRule">本地规则整理（不调用模型）</button>
|
||
<button class="btn" id="btnCClear">清空</button>
|
||
<span id="cInMode" style="font-size:12px;color:var(--muted)"></span>
|
||
</div>` : `
|
||
<div style="display:flex;gap:10px;margin:14px 0 6px;align-items:center;flex-wrap:wrap">
|
||
<button class="btn primary" id="btnCDirect">直接写入这 1 条</button>
|
||
<button class="btn" id="btnCClear">清空</button>
|
||
<span id="cInMode" style="font-size:12px;color:var(--muted)"></span>
|
||
</div>`}
|
||
<div id="cInPreview"></div>
|
||
</div>
|
||
</div>`;
|
||
|
||
const sel = $("#cInProject");
|
||
host.querySelectorAll("[data-itype]").forEach((b) =>
|
||
b.addEventListener("click", () => { state.intakeType = b.dataset.itype; renderIntake(); })
|
||
);
|
||
sel.addEventListener("change", () => { customIntakeId = Number(sel.value); });
|
||
$("#btnNewCustomIntake").addEventListener("click", () =>
|
||
openNewCustomDialog((p) => { customIntakeId = p.id; renderCustomIntake(host); })
|
||
);
|
||
$("#cInPeriod").addEventListener("change", async (e) => {
|
||
if (e.target.value === "__new") {
|
||
await createNewPeriod();
|
||
await renderIntake();
|
||
return;
|
||
}
|
||
state.intakePeriodId = Number(e.target.value);
|
||
});
|
||
$("#cInSearch").addEventListener("input", (e) => {
|
||
const kw = e.target.value.trim();
|
||
sel.innerHTML = projects.filter((p) => !kw || p.name.includes(kw))
|
||
.map((p) => `<option value="${p.id}">${p.is_key ? "★ " : ""}${esc(p.name)}</option>`).join("");
|
||
});
|
||
bindIntakeMode("#cInRaw", () => renderCustomIntake(host));
|
||
const on = (sel2, fn) => { const el = $(sel2); if (el) el.addEventListener("click", fn); };
|
||
on("#btnCClear", () => {
|
||
$("#cInRaw").value = ""; $("#cInPreview").innerHTML = ""; $("#cInMode").textContent = "";
|
||
});
|
||
on("#btnCParse", () => doCustomParse(true));
|
||
on("#btnCRule", () => doCustomParse(false));
|
||
on("#btnCDirect", commitCustomDirect);
|
||
}
|
||
|
||
/** 定制项目 · 直接写入：内容一字不改存成 1 条执行记录，阶段 / 金额 / 计收一律不动 */
|
||
async function commitCustomDirect() {
|
||
const raw = $("#cInRaw").value.trim();
|
||
if (!raw) return toast("请先填写内容");
|
||
const id = Number($("#cInProject").value);
|
||
if (!id) return toast("请选择定制项目");
|
||
const pid = Number($("#cInPeriod").value);
|
||
if (!pid) return toast("请选择周期");
|
||
const btn = $("#btnCDirect");
|
||
btn.disabled = true;
|
||
try {
|
||
await post("/custom/updates", {
|
||
custom_project_id: id,
|
||
period_id: pid,
|
||
content: raw,
|
||
source: "manual",
|
||
});
|
||
$("#cInRaw").value = "";
|
||
$("#cInPreview").innerHTML = `<div class="notice info">写入成功：已按原文存入 <b>1</b> 条执行记录，未拆解、未改写。</div>`;
|
||
toast("已写入 1 条执行记录");
|
||
await afterWrite();
|
||
} catch (e) {
|
||
toast("写入失败：" + e.message);
|
||
} finally {
|
||
btn.disabled = false;
|
||
}
|
||
}
|
||
|
||
let customIntakeId = null;
|
||
let customIntakeParsed = null;
|
||
let customIntakeRaw = "";
|
||
|
||
async function doCustomParse(useAI) {
|
||
const raw = $("#cInRaw").value.trim();
|
||
if (!raw) return toast("请先粘贴内容");
|
||
const sel = $("#cInProject");
|
||
const id = Number(sel.value);
|
||
if (!id) return toast("请选择定制项目");
|
||
|
||
const btn = useAI ? $("#btnCParse") : $("#btnCRule");
|
||
const old = btn.innerHTML;
|
||
btn.disabled = true;
|
||
btn.innerHTML = `<span class="spinner"></span> 整理中…`;
|
||
try {
|
||
const r = await post("/custom/ai/parse", {
|
||
custom_project_id: id,
|
||
project_name: null,
|
||
period_id: Number($("#cInPeriod").value),
|
||
raw_text: raw,
|
||
use_ai: useAI,
|
||
});
|
||
customIntakeId = r.project ? r.project.id : customIntakeId;
|
||
customIntakeParsed = r.parsed;
|
||
customIntakeRaw = raw;
|
||
renderCustomPreview(r);
|
||
} catch (e) {
|
||
$("#cInPreview").innerHTML = `<div class="notice err">整理失败：${esc(e.message)}</div>`;
|
||
} finally {
|
||
btn.disabled = false; btn.innerHTML = old;
|
||
}
|
||
}
|
||
|
||
function renderCustomPreview(r) {
|
||
const p = r.parsed;
|
||
const stageOpts = state.customMeta.stages
|
||
.map((s) => `<option value="${s.code}" ${s.code === p.stage ? "selected" : ""}>${esc(s.name)}（${s.base_ratio}%）</option>`)
|
||
.join("");
|
||
$("#cInMode").textContent = r.mode === "ai" ? `已由 ${r.parsed.model || "大模型"} 整理` : "本地规则整理";
|
||
|
||
$("#cInPreview").innerHTML = `
|
||
${r.warning ? `<div class="notice warn">${esc(r.warning)}</div>` : ""}
|
||
${r.error ? `<div class="notice err">AI 调用异常：${esc(r.error)}</div>` : ""}
|
||
<div class="sec-title">整理结果 · 1 条记录（可直接修改后写入）</div>
|
||
<div class="preview-box">
|
||
<div class="kv"><label>项目</label><div><b>${esc(r.project ? r.project.name : "（新建）")}</b> · ${esc(r.period ? r.period.full_label : "")}</div></div>
|
||
<div class="kv"><label>执行内容（正文，原文照录）</label><textarea class="inp" id="cPvContent" rows="5" style="width:100%">${esc(customIntakeRaw)}</textarea></div>
|
||
<div class="kv"><label>商务阶段</label><select class="sel" id="cPvStage">${stageOpts}</select></div>
|
||
<div class="kv"><label>开发进度</label><input class="inp" id="cPvProgress" type="number" min="0" max="100" value="${p.progress === null || p.progress === undefined ? "" : p.progress}" style="width:100px" /></div>
|
||
<div class="kv"><label>合同额</label><input class="inp" id="cPvAmount" type="number" value="${p.amount === null || p.amount === undefined ? "" : p.amount}" style="width:160px" /></div>
|
||
<div class="kv"><label>累计已计收</label><input class="inp" id="cPvRevenue" type="number" value="${p.revenue_amount === null || p.revenue_amount === undefined ? "" : p.revenue_amount}" style="width:160px" /></div>
|
||
<div class="kv"><label>本期新增计收</label><input class="inp" id="cPvDelta" type="number" value="${p.revenue_delta === null || p.revenue_delta === undefined ? "" : p.revenue_delta}" style="width:160px" /></div>
|
||
<div class="kv"><label>摘要</label><input class="inp" id="cPvSummary" value="${esc(p.summary || "")}" style="width:100%" /></div>
|
||
<div class="kv"><label>风险</label><textarea class="inp" id="cPvRisks" rows="2" style="width:100%">${esc((p.risks || []).join("\n"))}</textarea></div>
|
||
<div class="kv"><label>下一步</label><textarea class="inp" id="cPvNext" rows="2" style="width:100%">${esc((p.next_steps || []).join("\n"))}</textarea></div>
|
||
</div>
|
||
<div style="display:flex;gap:10px;margin-top:14px">
|
||
<button class="btn primary" id="btnCCommit">确认写入这 1 条</button>
|
||
<span style="font-size:12px;color:var(--muted);align-self:center">正文用你的原文，AI 只补上面这些字段；写入后阶段、金额、计收同步更新到「定制项目」</span>
|
||
</div>`;
|
||
|
||
$("#btnCCommit").addEventListener("click", commitCustomIntake);
|
||
}
|
||
|
||
function collectCustomPreview() {
|
||
const num = (id) => { const v = $(id).value.trim(); return v === "" ? null : Number(v); };
|
||
const lines = (id) => $(id).value.split("\n").map((s) => s.trim()).filter(Boolean);
|
||
return {
|
||
stage: $("#cPvStage").value,
|
||
progress: num("#cPvProgress"),
|
||
amount: num("#cPvAmount"),
|
||
revenue_amount: num("#cPvRevenue"),
|
||
revenue_delta: num("#cPvDelta"),
|
||
summary: $("#cPvSummary").value.trim(),
|
||
risks: lines("#cPvRisks"),
|
||
next_steps: lines("#cPvNext"),
|
||
updates: [], // AI 整理只落 1 条：正文走 raw_text
|
||
};
|
||
}
|
||
|
||
async function commitCustomIntake() {
|
||
const sel = $("#cInProject");
|
||
const btn = $("#btnCCommit");
|
||
btn.disabled = true;
|
||
try {
|
||
const res = await post("/custom/ai/commit", {
|
||
custom_project_id: Number(sel.value),
|
||
project_name: null,
|
||
period_id: Number($("#cInPeriod").value),
|
||
raw_text: ($("#cPvContent").value || "").trim() || customIntakeRaw,
|
||
parsed: collectCustomPreview(),
|
||
mode: customIntakeParsed && customIntakeParsed.model ? "ai" : "rule",
|
||
model: (customIntakeParsed && customIntakeParsed.model) || null,
|
||
});
|
||
toast(`已写入 ${res.created.length} 条记录`);
|
||
$("#cInPreview").innerHTML = `<div class="notice info">写入成功：「${esc(res.project.name)}」阶段 <b>${esc(stageMeta(res.project.stage).name)}</b>，可确认收入 ${wan(res.project.confirmed_amount)}。</div>`;
|
||
await afterWrite();
|
||
} catch (e) {
|
||
toast("写入失败：" + e.message);
|
||
} finally {
|
||
btn.disabled = false;
|
||
}
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- 更新录入 */
|
||
let intakeProjectId = null;
|
||
let intakeParsed = null;
|
||
|
||
async function renderIntake() {
|
||
const host = $("#view-intake");
|
||
// 录入页整个页面都是写操作，只读角色没有可用的部分，直接给说明
|
||
if (!canW("intake")) {
|
||
host.innerHTML = `<div class="notice warn">「更新录入」是写操作，当前角色是只读权限，无法录入内容。</div>`;
|
||
return;
|
||
}
|
||
if (!state.customMeta) state.customMeta = await api("/custom/meta");
|
||
if (state.intakeType === "custom") return renderCustomIntake(host);
|
||
|
||
const projects = await api("/projects?archived=false");
|
||
const weeks = state.periods.weeks.slice().reverse();
|
||
const curPeriodId = state.gran === "week" ? state.weekId : (currentMonth() ? currentMonth().period_ids[currentMonth().period_ids.length - 1] : null);
|
||
|
||
const mode = intakeMode();
|
||
const actionRow = mode === "ai" ? `
|
||
<div style="display:flex;gap:10px;margin:14px 0 6px;align-items:center;flex-wrap:wrap">
|
||
<button class="btn primary" id="btnAIParse">AI 整理</button>
|
||
<button class="btn" id="btnRuleParse">本地规则整理（不调用模型）</button>
|
||
<button class="btn" id="btnClearIntake">清空</button>
|
||
<span id="intakeMode" style="font-size:12px;color:var(--muted)"></span>
|
||
</div>` : `
|
||
<div style="display:flex;gap:10px;margin:14px 0 6px;align-items:center;flex-wrap:wrap">
|
||
<button class="btn primary" id="btnDirectWrite">直接写入这 1 条</button>
|
||
<button class="btn" id="btnClearIntake">清空</button>
|
||
<span id="intakeMode" style="font-size:12px;color:var(--muted)"></span>
|
||
</div>`;
|
||
|
||
host.innerHTML = `
|
||
<div class="seg" id="intakeTypeSeg" style="margin-bottom:14px">
|
||
<button class="seg-btn ${state.intakeType === "general" ? "active" : ""}" data-itype="general">自研产品</button>
|
||
<button class="seg-btn ${state.intakeType === "custom" ? "active" : ""}" data-itype="custom">定制项目</button>
|
||
</div>
|
||
${intakeModeSegHtml()}
|
||
<div class="card">
|
||
<div class="card-head"><h4>自研产品 · 执行记录录入</h4></div>
|
||
<div class="card-body">
|
||
<div class="step" style="margin-bottom:12px"><span class="step-no">1</span><span class="step-title">选择项目与周期</span></div>
|
||
<div class="inline-fields" style="margin-bottom:20px">
|
||
<input id="intakeProjectSearch" class="inp" placeholder="搜索项目…" style="width:200px" />
|
||
<select id="intakeProject" class="sel" style="width:300px">
|
||
${projects.map((p) => `<option value="${p.id}" ${p.id === intakeProjectId ? "selected" : ""}>${p.is_key ? "★ " : ""}${esc(p.name)}</option>`).join("")}
|
||
<option value="__new">＋ 新建项目（按下方名称）</option>
|
||
</select>
|
||
<input id="intakeNewProject" class="inp" placeholder="新项目名称" style="width:220px;display:none" />
|
||
<select id="intakePeriod" class="sel" style="width:200px">
|
||
${weeks.map((w) => `<option value="${w.id}" ${w.id === (state.intakePeriodId || curPeriodId) ? "selected" : ""}>${esc(w.full_label)}</option>`).join("")}
|
||
<option value="__new">＋ 新建周期…</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="step" style="margin-bottom:10px"><span class="step-no">2</span><span class="step-title">粘贴该项目的原始内容</span></div>
|
||
<textarea id="intakeRaw" class="inp big-textarea" placeholder="把周报 / 项目群消息 / 会议纪要原文粘进来，例如： 1、授权卸载管理已完成开发和联调，可以转测 2、集群部署，进度50% 3、国产化操作系统切换，进度50%；风险：license 未到位"></textarea>
|
||
|
||
${actionRow}
|
||
<div id="intakePreview"></div>
|
||
</div>
|
||
</div>`;
|
||
|
||
host.querySelectorAll("[data-itype]").forEach((b) =>
|
||
b.addEventListener("click", () => { state.intakeType = b.dataset.itype; renderIntake(); })
|
||
);
|
||
bindIntakeMode("#intakeRaw", renderIntake);
|
||
|
||
const sel = $("#intakeProject");
|
||
sel.addEventListener("change", () => {
|
||
if (sel.value !== "__new") intakeProjectId = Number(sel.value);
|
||
$("#intakeNewProject").style.display = sel.value === "__new" ? "" : "none";
|
||
});
|
||
$("#intakePeriod").addEventListener("change", async (e) => {
|
||
if (e.target.value === "__new") {
|
||
await createNewPeriod();
|
||
await renderIntake();
|
||
return;
|
||
}
|
||
state.intakePeriodId = Number(e.target.value);
|
||
});
|
||
$("#intakeProjectSearch").addEventListener("input", (e) => {
|
||
const kw = e.target.value.trim();
|
||
sel.innerHTML = projects.filter((p) => !kw || p.name.includes(kw))
|
||
.map((p) => `<option value="${p.id}">${p.is_key ? "★ " : ""}${esc(p.name)}</option>`).join("")
|
||
+ `<option value="__new">＋ 新建项目（按下方名称）</option>`;
|
||
});
|
||
$("#btnClearIntake").addEventListener("click", () => {
|
||
$("#intakeRaw").value = ""; $("#intakePreview").innerHTML = ""; $("#intakeMode").textContent = "";
|
||
});
|
||
const on = (sel, fn) => { const el = $(sel); if (el) el.addEventListener("click", fn); };
|
||
on("#btnAIParse", () => doParse(true));
|
||
on("#btnRuleParse", () => doParse(false));
|
||
on("#btnDirectWrite", commitDirectWrite);
|
||
}
|
||
|
||
/**
|
||
* 自研产品 · 直接写入：填入的内容一字不改存成 1 条执行记录。
|
||
* 不调大模型、不建子任务、不写 progress，项目的进度和状态一律不动。
|
||
*/
|
||
async function commitDirectWrite() {
|
||
const raw = $("#intakeRaw").value.trim();
|
||
if (!raw) return toast("请先填写内容");
|
||
const sel = $("#intakeProject");
|
||
const btn = $("#btnDirectWrite");
|
||
let projectId = sel.value === "__new" ? null : Number(sel.value);
|
||
btn.disabled = true;
|
||
try {
|
||
if (!projectId) {
|
||
const name = $("#intakeNewProject").value.trim();
|
||
if (!name) { toast("请填写项目名称"); return; }
|
||
const created = await post("/projects", { name });
|
||
projectId = created.id;
|
||
intakeProjectId = created.id;
|
||
sel.insertAdjacentHTML("beforeend", `<option value="${created.id}" selected>${esc(created.name)}</option>`);
|
||
$("#intakeNewProject").style.display = "none";
|
||
}
|
||
await post("/updates", {
|
||
project_id: projectId,
|
||
period_id: Number($("#intakePeriod").value),
|
||
content: raw,
|
||
source: "manual",
|
||
});
|
||
$("#intakeRaw").value = "";
|
||
$("#intakePreview").innerHTML = `<div class="notice info">写入成功：已按原文存入 <b>1</b> 条执行记录，未拆解、未改写。</div>`;
|
||
toast("已写入 1 条执行记录");
|
||
await afterWrite();
|
||
} catch (e) {
|
||
toast("写入失败：" + e.message);
|
||
} finally {
|
||
btn.disabled = false;
|
||
}
|
||
}
|
||
|
||
async function doParse(useAI) {
|
||
const raw = $("#intakeRaw").value.trim();
|
||
if (!raw) return toast("请先粘贴内容");
|
||
const sel = $("#intakeProject");
|
||
const projectId = sel.value === "__new" ? null : Number(sel.value);
|
||
const projectName = sel.value === "__new" ? $("#intakeNewProject").value.trim() : null;
|
||
if (!projectId && !projectName) return toast("请选择或填写项目名称");
|
||
|
||
const btn = useAI ? $("#btnAIParse") : $("#btnRuleParse");
|
||
const old = btn.innerHTML;
|
||
btn.disabled = true;
|
||
btn.innerHTML = `<span class="spinner"></span> 整理中…`;
|
||
try {
|
||
const r = await post("/ai/parse", {
|
||
project_id: projectId, project_name: projectName,
|
||
period_id: Number($("#intakePeriod").value),
|
||
raw_text: raw, use_ai: useAI,
|
||
});
|
||
intakeProjectId = r.project ? r.project.id : intakeProjectId;
|
||
intakeParsed = r.parsed;
|
||
renderIntakePreview(r, raw);
|
||
} catch (e) {
|
||
$("#intakePreview").innerHTML = `<div class="notice err">整理失败：${esc(e.message)}</div>`;
|
||
} finally {
|
||
btn.disabled = false; btn.innerHTML = old;
|
||
}
|
||
}
|
||
|
||
function renderIntakePreview(r, raw) {
|
||
const p = r.parsed;
|
||
const statusOpts = state.meta.statuses.map((s) => `<option value="${s.code}" ${s.code === p.status ? "selected" : ""}>${esc(s.name)}</option>`).join("");
|
||
$("#intakeMode").textContent = r.mode === "ai" ? `已由 ${r.parsed.model || "大模型"} 整理` : "本地规则整理";
|
||
|
||
$("#intakePreview").innerHTML = `
|
||
${r.warning ? `<div class="notice warn">${esc(r.warning)}</div>` : ""}
|
||
${r.error ? `<div class="notice err">AI 调用异常：${esc(r.error)}</div>` : ""}
|
||
<div class="sec-title">整理结果 · 1 条记录（可直接修改后写入）</div>
|
||
<div class="preview-box">
|
||
<div class="kv"><label>项目</label><div><b>${esc(r.project ? r.project.name : "")}</b> · ${esc(r.period ? r.period.full_label : "")}</div></div>
|
||
<div class="kv"><label>执行内容（正文，原文照录）</label><textarea class="inp" id="pvContent" rows="5" style="width:100%">${esc(raw)}</textarea></div>
|
||
<div class="kv"><label>一句话摘要</label><input class="inp" id="pvSummary" value="${esc(p.summary || "")}" style="width:100%" /></div>
|
||
<div class="kv"><label>总进度 %</label><input class="inp" id="pvProgress" type="number" min="0" max="100" value="${p.progress === null || p.progress === undefined ? "" : p.progress}" style="width:100px" /></div>
|
||
<div class="kv"><label>整体状态</label><select class="sel" id="pvStatus">${statusOpts}</select></div>
|
||
<div class="kv"><label>风险 / 阻塞</label><textarea class="inp" id="pvRisks" rows="2" style="width:100%">${esc((p.risks || []).join("\n"))}</textarea></div>
|
||
<div class="kv"><label>下一步计划</label><textarea class="inp" id="pvNext" rows="2" style="width:100%">${esc((p.next_steps || []).join("\n"))}</textarea></div>
|
||
</div>
|
||
<div style="display:flex;gap:10px;margin-top:14px">
|
||
<button class="btn primary" id="btnCommit">确认写入这 1 条</button>
|
||
<span style="font-size:12px;color:var(--muted);align-self:center">正文用你的原文，AI 只补摘要 / 进度 / 状态 / 风险 / 下一步；写入后可在「工作看板」中立即查看</span>
|
||
</div>`;
|
||
|
||
$("#btnCommit").addEventListener("click", () => commitIntake(r, raw));
|
||
}
|
||
|
||
/** 收集预览表单。tasks 恒为空 → 后端按「1 条执行记录」写入，不建子任务 */
|
||
function collectPreview() {
|
||
const lines = (id) => $(id).value.split("\n").map((s) => s.trim()).filter(Boolean);
|
||
const pg = $("#pvProgress").value;
|
||
return {
|
||
summary: $("#pvSummary").value.trim(),
|
||
progress: pg === "" ? null : Number(pg),
|
||
status: $("#pvStatus").value,
|
||
risks: lines("#pvRisks"),
|
||
next_steps: lines("#pvNext"),
|
||
tasks: [],
|
||
};
|
||
}
|
||
|
||
async function commitIntake(r, raw) {
|
||
const sel = $("#intakeProject");
|
||
const btn = $("#btnCommit");
|
||
btn.disabled = true;
|
||
try {
|
||
const res = await post("/ai/commit", {
|
||
project_id: sel.value === "__new" ? null : Number(sel.value),
|
||
project_name: sel.value === "__new" ? $("#intakeNewProject").value.trim() : null,
|
||
period_id: Number($("#intakePeriod").value),
|
||
raw_text: ($("#pvContent").value || "").trim() || raw,
|
||
parsed: collectPreview(),
|
||
mode: r.mode,
|
||
model: r.parsed.model || null,
|
||
});
|
||
toast(`已写入 ${res.created.length} 条执行记录`);
|
||
$("#intakePreview").innerHTML = `<div class="notice info">写入成功：项目「${esc(res.project.name)}」新增 ${res.created.length} 条记录。可切换到「工作看板」查看。</div>`;
|
||
await afterWrite();
|
||
} catch (e) {
|
||
toast("写入失败：" + e.message);
|
||
} finally {
|
||
btn.disabled = false;
|
||
}
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- settings */
|
||
async function renderSettings() {
|
||
const host = $("#view-settings");
|
||
const [s, health, periods] = await Promise.all([
|
||
api("/settings"),
|
||
fetch("/health").then((r) => r.json()),
|
||
api("/periods"),
|
||
]);
|
||
const weeks = periods.weeks.slice().reverse();
|
||
const rw = canW("settings");
|
||
host.innerHTML = `
|
||
<div class="grid g2">
|
||
<div class="card">
|
||
<div class="card-head"><h4>AI 整理配置</h4></div>
|
||
<div class="card-body">
|
||
${state.meta.ai.enabled
|
||
? `<div class="notice info">已启用 AI 整理（模型：${esc(state.meta.ai.model || "—")}）</div>`
|
||
: `<div class="notice warn">未配置 API Key，当前使用本地规则解析。填写下方配置后自动切换到大模型整理。</div>`}
|
||
<div class="form-row"><label>Base URL</label><input class="inp" id="cfgBase" value="${esc(s.ai_api_base || "")}" style="width:100%" placeholder="https://api.deepseek.com/v1" /></div>
|
||
<div class="form-row"><label>API Key</label><input class="inp" id="cfgKey" type="password" value="${esc(s.ai_api_key || "")}" style="width:100%" placeholder="sk-..." /></div>
|
||
<div class="form-row"><label>模型</label><input class="inp" id="cfgModel" value="${esc(s.ai_model || "")}" style="width:100%" placeholder="deepseek-chat" /></div>
|
||
<div class="form-row"><label>温度</label><input class="inp" id="cfgTemp" value="${esc(s.ai_temperature || "0.2")}" style="width:100px" /></div>
|
||
<div style="margin-top:14px">${rw ? `<button class="btn primary" id="btnSaveCfg">保存配置</button>` : `<span class="tag-mini">只读权限</span>`}</div>
|
||
<div style="margin-top:14px;font-size:12px;color:var(--muted);line-height:1.8">
|
||
兼容：DeepSeek、通义千问（兼容模式）、Moonshot、智谱、OpenAI、本地 Ollama 等。<br>
|
||
例：Ollama → Base URL <code>http://localhost:11434/v1</code>，模型 <code>qwen2.5:14b</code>，Key 任意填。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-head"><h4>数据库</h4></div>
|
||
<div class="card-body">
|
||
<div class="form-row"><label>当前引擎</label><b>${esc(health.db)}</b></div>
|
||
<div style="font-size:12.5px;color:var(--text-2);line-height:1.9">
|
||
默认使用 SQLite（<code>data/board.db</code>），无需安装任何服务。<br><br>
|
||
<b>迁移到 MySQL：</b><br>
|
||
1. 安装驱动：<code>pip install pymysql cryptography</code><br>
|
||
2. 在 <code>.env</code> 中设置：<br>
|
||
<code>DATABASE_URL=mysql+pymysql://user:pwd@host:3306/unis_board?charset=utf8mb4</code><br>
|
||
3. 重启服务，表结构自动创建；再用
|
||
<code>python scripts/import_excel.py --reset</code> 重新灌数即可。<br><br>
|
||
数据访问层全部走 SQLAlchemy，无原生 SQL，切换方言不需要改业务代码。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" style="margin-top:16px">
|
||
<div class="card-head">
|
||
<h4>周期管理</h4>
|
||
${rw ? `<button class="btn sm primary" id="btnAddPeriod">+ 新建周期</button>` : ""}
|
||
</div>
|
||
<div class="card-body" style="max-height:360px;overflow:auto;padding:0">
|
||
<table class="tbl">
|
||
<thead><tr><th>周期</th><th class="num">常规记录</th><th class="num">定开记录</th><th></th></tr></thead>
|
||
<tbody>
|
||
${weeks.map((w) => `
|
||
<tr data-pid="${w.id}">
|
||
<td><b>${esc(w.full_label)}</b> <span style="color:var(--muted);font-size:12px">（原标签：${esc(w.label)}）</span></td>
|
||
<td class="num">${w.update_count || 0}</td>
|
||
<td class="num">${w.custom_update_count || 0}</td>
|
||
<td class="num">${rw ? `<button class="btn sm danger" data-delperiod="${w.id}" ${(w.update_count || w.custom_update_count) ? "disabled title='该周期已有记录，不能删除'" : ""}>删除</button>` : ""}</td>
|
||
</tr>`).join("")}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>`;
|
||
|
||
if (!rw) host.querySelectorAll("#cfgBase,#cfgKey,#cfgModel,#cfgTemp").forEach((i) => { i.disabled = true; });
|
||
const bap = $("#btnAddPeriod");
|
||
if (bap) bap.addEventListener("click", async () => {
|
||
const id = await createNewPeriod();
|
||
if (id) renderSettings();
|
||
});
|
||
host.querySelectorAll("[data-delperiod]").forEach((b) =>
|
||
b.addEventListener("click", async () => {
|
||
const id = Number(b.dataset.delperiod);
|
||
const row = b.closest("tr");
|
||
const name = row.querySelector("b").textContent;
|
||
if (!confirm(`确认删除周期「${name}」？`)) return;
|
||
try {
|
||
await del("/periods/" + id);
|
||
toast("已删除周期 " + name);
|
||
await loadPeriods();
|
||
renderSettings();
|
||
} catch (e) {
|
||
toast("删除失败：" + e.message);
|
||
}
|
||
})
|
||
);
|
||
const bsc = $("#btnSaveCfg");
|
||
if (bsc) bsc.addEventListener("click", async () => {
|
||
await put("/settings", {
|
||
values: {
|
||
ai_api_base: $("#cfgBase").value.trim(),
|
||
ai_api_key: $("#cfgKey").value.trim(),
|
||
ai_model: $("#cfgModel").value.trim(),
|
||
ai_temperature: $("#cfgTemp").value.trim() || "0.2",
|
||
},
|
||
});
|
||
state.meta = await api("/meta");
|
||
toast("配置已保存");
|
||
renderSettings();
|
||
});
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- drawer */
|
||
/** pid 详情抽屉；mode = "view" 只读详情（默认） / "edit" 编辑基础信息 */
|
||
async function openDrawer(pid, mode) {
|
||
mode = mode === "edit" ? "edit" : "view";
|
||
if (!canW("projects")) mode = "view";
|
||
$("#drawerMask").classList.add("open");
|
||
$("#drawer").classList.add("open");
|
||
$("#drawerBody").innerHTML = `<div class="empty">加载中…</div>`;
|
||
drawerActions("");
|
||
let d = await api("/projects/" + pid);
|
||
state.drawerProject = d;
|
||
// 弹窗里改完记录，只重画下面的周期反馈，抽屉不关闭、滚动位置不丢
|
||
const reloadFeed = async () => {
|
||
d = await api("/projects/" + pid);
|
||
state.drawerProject = d;
|
||
renderFeed();
|
||
};
|
||
const p = d.project;
|
||
$("#drawerTitle").innerHTML = `${p.is_key ? starMark(true) : ""}${esc(p.name)}`;
|
||
$("#drawerSub").innerHTML = `${catPill(p.category)} ${statusPill(p.status)} <span class="tag-mini">进度 ${Math.round(p.progress)}%</span>`;
|
||
|
||
const ro = (label, val) => `<div class="form-row"><label>${label}</label><div class="ro">${val}</div></div>`;
|
||
|
||
// 基础信息：详情只读、修改才给表单，两档各自一条操作条，别和下面的附表混在一起
|
||
const baseSec = mode === "edit" ? `
|
||
<div class="sec">
|
||
<div class="sec-title">项目信息</div>
|
||
<div class="form-row"><label>项目名称</label><input class="inp" id="dwName" value="${esc(p.name)}" style="width:100%" /></div>
|
||
<div class="form-row"><label>分类</label><select class="sel" id="dwCat" style="width:150px">
|
||
<option value="">（未分类）</option>
|
||
${state.categories.map((c) => `<option value="${c.id}" ${c.id === p.category_id ? "selected" : ""}>${esc(c.name)}</option>`).join("")}
|
||
</select></div>
|
||
<div class="form-row"><label>状态</label><select class="sel" id="dwStatus" style="width:130px">
|
||
${state.meta.statuses.map((s) => `<option value="${s.code}" ${s.code === p.status ? "selected" : ""}>${esc(s.name)}</option>`).join("")}
|
||
</select></div>
|
||
${peopleEditorHtml("dwOwners", "负责人", p.owners, { add: "负责人" })}
|
||
${peopleEditorHtml("dwMembers", "团队成员", p.members, { add: "成员" })}
|
||
<div class="form-row"><label>进度</label><div style="display:flex;align-items:center;gap:6px"><input class="inp" id="dwProgress" type="number" min="0" max="100" value="${Math.round(p.progress)}" style="width:90px" /> %</div></div>
|
||
<div class="form-row"><label>标签</label><input class="inp" id="dwTags" placeholder="标签（、分隔）" value="${esc(p.tags.map((t) => t.name).join("、"))}" style="width:220px" /></div>
|
||
</div>` : `
|
||
<div class="sec">
|
||
<div class="sec-title">项目信息</div>
|
||
${ro("项目名称", esc(p.name) + (p.archived ? ` <span class="arch-badge">已归档</span>` : ""))}
|
||
${ro("分类", catPill(p.category))}
|
||
${ro("状态", statusPill(p.status))}
|
||
${ro("负责人", nameChips(p.owners))}
|
||
${ro("团队成员", nameChips(p.members))}
|
||
${ro("进度", Math.round(p.progress) + "%")}
|
||
${ro("标签", p.tags.length ? p.tags.map((t) => `<span class="tag-mini">${esc(t.name)}</span>`).join(" ") : "—")}
|
||
${ro("记录", `${p.task_count} 个子任务 / ${p.update_count} 条执行记录`)}
|
||
</div>`;
|
||
|
||
// 基础信息的动作在标题栏右侧按钮条；附表的更新动作仍在它的列表上方，两类不混
|
||
drawerActions(mode === "edit" ? `
|
||
<button class="btn sm" id="dwCancel">取消</button>
|
||
<button class="btn sm primary" id="dwSave">保存</button>` : `
|
||
<button class="btn sm danger" id="dwDelete">删除</button>
|
||
<button class="btn sm" id="dwArchive">${p.archived ? "恢复" : "归档"}</button>
|
||
<button class="btn sm" id="dwKey">${p.is_key ? "取消重点" : "标记重点"}</button>
|
||
<button class="btn sm primary" id="dwEdit">修改</button>`);
|
||
|
||
const updItem = (u) => `
|
||
<div class="upd-item">
|
||
<div class="u-head"><span class="u-task">${esc(u.task_name || "整体进展")}</span>${statusPill(u.status)}${u.progress !== null ? `<span class="tag-mini">${u.progress}%</span>` : ""}${updOps("project", u)}</div>
|
||
<div class="u-body">${nl2br(u.content || u.summary || "")}</div>
|
||
${u.risk ? `<div class="u-risk">${Ico.svg("alert-circle")}<div>${nl2br(u.risk)}</div></div>` : ""}
|
||
${u.next_step ? `<div class="u-next">${Ico.svg("arrow-right")}<div>${nl2br(u.next_step)}</div></div>` : ""}
|
||
</div>`;
|
||
|
||
// 把项目的 timeline 按「周」或「月」归成显示单元（timeline 已由后端按时间升序返回）
|
||
function feedUnits() {
|
||
if (state.dw.group === "week") {
|
||
return d.timeline.map((t) => ({
|
||
label: t.period.full_label, count: t.updates.length, progress: t.progress,
|
||
periods: [t], ids: [t.period.id],
|
||
}));
|
||
}
|
||
const map = new Map();
|
||
d.timeline.forEach((t) => {
|
||
const k = t.period.year + "-" + t.period.month;
|
||
if (!map.has(k)) map.set(k, { label: t.period.year + "年" + t.period.month + "月", count: 0, progress: null, periods: [], ids: [] });
|
||
const u = map.get(k);
|
||
u.periods.push(t);
|
||
u.count += t.updates.length;
|
||
u.ids.push(t.period.id);
|
||
if (t.progress !== null) u.progress = u.progress === null ? t.progress : Math.max(u.progress, t.progress);
|
||
});
|
||
return [...map.values()];
|
||
}
|
||
|
||
const FEED_RANGES = {
|
||
week: [[2, "近 2 周"], [0, "全部"]],
|
||
month: [[1, "近 1 月"], [0, "全部"]],
|
||
};
|
||
|
||
// 「添加执行记录」直接去「更新录入」页，不再弹录入窗
|
||
const gotoIntake = () => {
|
||
state.intakeType = "general";
|
||
state.intakeMode = "direct";
|
||
state.intakePeriodId = state.weekId;
|
||
intakeProjectId = pid;
|
||
closeDrawer();
|
||
setView("intake");
|
||
};
|
||
|
||
// 范围以顶栏选中的周期为锚点，和看板其余部分保持一致
|
||
function renderFeed() {
|
||
const host = $("#dwFeed");
|
||
const units = feedUnits();
|
||
const unitName = state.dw.group === "week" ? "周" : "个月"; /* 「7 月」会被读成七月，用「个月」 */
|
||
const scope = scopePeriodIds();
|
||
let anchor = -1;
|
||
units.forEach((u, i) => { if (u.ids.some((id) => scope.indexOf(id) >= 0)) anchor = i; });
|
||
if (anchor < 0) anchor = units.length - 1;
|
||
|
||
const n = state.dw.range;
|
||
const step = n === 0 ? Math.max(1, anchor + 1) : n;
|
||
const last = Math.max(0, anchor - step * state.dw.back);
|
||
const first = n === 0 ? 0 : Math.max(0, last - n + 1);
|
||
const win = units.slice(first, last + 1);
|
||
const nUpd = win.reduce((a, u) => a + u.count, 0);
|
||
|
||
const bar = `
|
||
<div class="feed-bar">
|
||
|
||
<div class="seg" id="dwGroup">
|
||
<button class="seg-btn ${state.dw.group === "week" ? "active" : ""}" data-g="week">按周</button>
|
||
<button class="seg-btn ${state.dw.group === "month" ? "active" : ""}" data-g="month">按月</button>
|
||
</div>
|
||
<div class="feed-chips">${FEED_RANGES[state.dw.group].map(([v, l]) =>
|
||
`<button class="chip ${state.dw.range === v ? "active" : ""}" data-r="${v}">${l}</button>`).join("")}</div>
|
||
<div class="feed-pager">
|
||
<button class="nav-arrow sm" id="dwOlder" title="更早" ${first <= 0 ? "disabled" : ""}>${Ico.svg("chevron-left")}</button>
|
||
<button class="nav-arrow sm" id="dwNewer" title="更新" ${state.dw.back <= 0 ? "disabled" : ""}>${Ico.svg("chevron-right")}</button>
|
||
</div>
|
||
<div class="feed-ops">
|
||
<button class="btn sm primary" id="dwAddUpd">${Ico.svg("plus")}添加执行记录</button>
|
||
</div>
|
||
</div>`;
|
||
|
||
// win 是按升序取的窗口，展示时倒过来：新的在前
|
||
const body = win.length ? win.slice().reverse().map((u) => `
|
||
<div class="feed-hd"><b>${esc(u.label)}</b>${u.progress !== null ? `<span>进度 ${u.progress}%</span>` : ""}<span class="feed-cnt">${u.count} 条</span></div>
|
||
${u.periods.slice().reverse().map((t) => `
|
||
${state.dw.group === "month" ? `<div class="feed-sub">${esc(t.period.full_label.replace(/^\d+年/, ""))}${t.progress !== null ? " · 进度 " + t.progress + "%" : ""} ${statusPill(t.status)}</div>` : ""}
|
||
${t.updates.map(updItem).join("")}`).join("")}`).join("")
|
||
: `<div class="empty">还没有执行记录</div>`;
|
||
|
||
host.innerHTML = `<div class="sec"><div class="sec-title">执行记录</div>${bar}<div>${body}</div></div>`;
|
||
host.querySelector("#dwAddUpd").addEventListener("click", () => gotoIntake());
|
||
bindUpdateOps(host, d.timeline.flatMap((t) => t.updates), reloadFeed);
|
||
|
||
host.querySelectorAll("#dwGroup [data-g]").forEach((b) => b.addEventListener("click", () => {
|
||
const g = b.dataset.g;
|
||
if (state.dw.group === g) return;
|
||
state.dw = { group: g, range: g === "week" ? 2 : 1, back: 0 };
|
||
renderFeed();
|
||
}));
|
||
host.querySelectorAll(".feed-chips [data-r]").forEach((b) => b.addEventListener("click", () => {
|
||
state.dw.range = Number(b.dataset.r);
|
||
state.dw.back = 0;
|
||
renderFeed();
|
||
}));
|
||
host.querySelector("#dwOlder").addEventListener("click", () => { state.dw.back += 1; renderFeed(); });
|
||
host.querySelector("#dwNewer").addEventListener("click", () => { state.dw.back = Math.max(0, state.dw.back - 1); renderFeed(); });
|
||
}
|
||
|
||
const timeline = d.timeline.slice().reverse().map((t) => `
|
||
<div class="timeline-row">
|
||
<div class="t-label">${esc(t.period.full_label.replace(/^\d+年/, ""))}</div>
|
||
<div class="t-bar"><div class="progress" style="margin:0"><i style="width:${t.progress || 0}%;background:${statusMeta(t.status).color}"></i></div></div>
|
||
<div class="t-val">${t.progress === null ? "—" : t.progress + "%"}</div>
|
||
</div>`).join("");
|
||
|
||
// 周期反馈单独渲染，切换范围/周期不必重新请求
|
||
state.dw = { group: "week", range: 2, back: 0 };
|
||
$("#drawerBody").innerHTML =
|
||
(mode === "edit" ? `<div class="notice err" id="dwErr" style="display:none"></div>` : "") +
|
||
baseSec + `<div id="dwFeed"></div>` +
|
||
`<div class="sec"><div class="sec-title">历史进度走势</div>${timeline || '<div class="empty">暂无</div>'}</div>`;
|
||
renderFeed();
|
||
|
||
const on = (sel, fn) => { const el = $(sel); if (el) el.addEventListener("click", fn); };
|
||
|
||
on("#dwEdit", () => openDrawer(pid, "edit"));
|
||
on("#dwCancel", () => openDrawer(pid, "view"));
|
||
on("#dwSave", async () => {
|
||
const btn = $("#dwSave");
|
||
const err = $("#dwErr");
|
||
btn.disabled = true;
|
||
err.style.display = "none";
|
||
try {
|
||
await patch("/projects/" + pid, {
|
||
name: $("#dwName").value.trim(),
|
||
category_id: $("#dwCat").value === "" ? null : Number($("#dwCat").value),
|
||
status: $("#dwStatus").value,
|
||
owners: peopleValues("dwOwners"),
|
||
members: peopleValues("dwMembers"),
|
||
progress: Number($("#dwProgress").value),
|
||
tags: $("#dwTags").value.split(/[、,，;；\s]+/).filter(Boolean),
|
||
});
|
||
} catch (e) {
|
||
btn.disabled = false;
|
||
err.textContent = "保存失败：" + e.message;
|
||
err.style.display = "";
|
||
return;
|
||
}
|
||
toast("已保存");
|
||
await afterWrite();
|
||
openDrawer(pid, "view");
|
||
});
|
||
on("#dwKey", async () => {
|
||
await patch("/projects/" + pid, { is_key: !p.is_key });
|
||
await afterWrite();
|
||
openDrawer(pid, mode);
|
||
});
|
||
on("#dwArchive", async () => {
|
||
await patch("/projects/" + pid, { archived: !p.archived });
|
||
toast(p.archived ? "已恢复" : "已归档");
|
||
closeDrawer();
|
||
await afterWrite();
|
||
});
|
||
on("#dwDelete", () => deleteProject(p));
|
||
}
|
||
|
||
// 标题栏右侧的标准按钮条：按钮由当前打开的抽屉自己填，主按钮在最右
|
||
function drawerActions(html) {
|
||
$("#drawerActions").innerHTML = html || "";
|
||
}
|
||
|
||
function closeDrawer() {
|
||
drawerActions("");
|
||
$("#drawer").classList.remove("open");
|
||
$("#drawerMask").classList.remove("open");
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- 人力资源库 */
|
||
function openStaffDialog(person, onDone) {
|
||
const isNew = !person;
|
||
const p = person || {};
|
||
const groups = (state.staffDict.groups || []).map(
|
||
(g) => `<option value="${esc(g)}" ${g === p.group ? "selected" : ""}>${esc(g)}</option>`
|
||
).join("");
|
||
const affs = (state.staffDict.affiliations || []).map(
|
||
(a) => `<option value="${esc(a)}" ${a === p.affiliation ? "selected" : ""}>${esc(a)}</option>`
|
||
).join("");
|
||
openModal(
|
||
`<div class="modal-head"><h3>${isNew ? "新增人员" : "编辑人员"}</h3><button class="icon-btn" data-mclose title="关闭">${Ico.svg("x")}</button></div>
|
||
<div class="modal-body">
|
||
<div class="form-grid">
|
||
<div class="form-row"><label>姓名 *</label><input class="inp" id="sfName" data-autofocus value="${esc(p.name || "")}" style="width:100%" /></div>
|
||
<div class="form-row"><label>归属小组</label><select class="sel" id="sfGroup" style="width:100%">${groups}</select></div>
|
||
<div class="form-row"><label>人员归属</label><select class="sel" id="sfAff" style="width:100%">${affs}</select></div>
|
||
<div class="form-row full"><label>说明</label><input class="inp" id="sfNote" value="${esc(p.note || "")}" placeholder="如：外包 / 实习 / 兼岗" style="width:100%" /></div>
|
||
</div>
|
||
${isNew ? "" : `<div class="notice info">改姓名会把名下项目的负责人一并改过来，历史记录不会断。</div>`}
|
||
<div class="notice err" id="mErr" style="display:none"></div>
|
||
</div>
|
||
<div class="modal-foot"><button class="btn" data-mclose>取消</button><button class="btn primary" id="mOk">${isNew ? "新增" : "保存"}</button></div>`
|
||
);
|
||
$("#mOk").addEventListener("click", async () => {
|
||
const name = $("#sfName").value.trim();
|
||
if (!name) return modalError("请填写姓名");
|
||
const btn = $("#mOk");
|
||
btn.disabled = true;
|
||
const body = {
|
||
name: name,
|
||
group: $("#sfGroup").value || null,
|
||
affiliation: $("#sfAff").value || null,
|
||
note: $("#sfNote").value.trim() || null,
|
||
};
|
||
try {
|
||
let msg = "已新增「" + name + "」";
|
||
if (isNew) { await post("/staff", body); }
|
||
else {
|
||
const r = await patch("/staff/" + p.id, body);
|
||
const n = r.synced.projects + r.synced.custom_projects;
|
||
msg = n ? `已更新，并同步 ${n} 个项目的负责人` : "已更新";
|
||
}
|
||
closeModal();
|
||
toast(msg);
|
||
if (onDone) onDone(); else await afterWrite();
|
||
} catch (e) { btn.disabled = false; modalError(e.message); }
|
||
});
|
||
$("#sfName").addEventListener("keydown", (e) => { if (e.key === "Enter") $("#mOk").click(); });
|
||
}
|
||
|
||
async function deleteStaff(m) {
|
||
const ok = await confirmDialog({
|
||
title: "删除人员",
|
||
danger: true,
|
||
okText: "确认删除",
|
||
body: `<p style="margin:0 0 10px">确认从花名册删除 <b>${esc(m.name)}</b>？</p>
|
||
<div class="notice warn">删除后这个人不再出现在「负责人」下拉里。
|
||
若他名下还有在管项目，接口会拒绝删除 —— 离职人员请用<b>归档</b>，历史数据完整保留。</div>`,
|
||
});
|
||
if (!ok) return;
|
||
try {
|
||
await del("/staff/" + m.id);
|
||
toast("已删除「" + m.name + "」");
|
||
await afterWrite();
|
||
} catch (e) {
|
||
toast(e.message);
|
||
}
|
||
}
|
||
|
||
async function renderStaff() {
|
||
saveUI();
|
||
const host = $("#view-staff");
|
||
host.innerHTML = `<div class="empty">加载中…</div>`;
|
||
const extra = ["archived=" + state.staffArchived];
|
||
if (state.staffGroup) extra.push("group=" + encodeURIComponent(state.staffGroup));
|
||
if (state.keyword) extra.push("keyword=" + encodeURIComponent(state.keyword));
|
||
const d = await api("/staff?" + extra.join("&"));
|
||
await loadStaff(); // 负责人下拉始终用完整花名册
|
||
const sum = d.summary;
|
||
|
||
const archOpts = [["false", "在编"], ["true", "已归档"], ["all", "全部"]]
|
||
.map((x) => `<option value="${x[0]}" ${x[0] === state.staffArchived ? "selected" : ""}>${x[1]}</option>`).join("");
|
||
const groupOpts = `<option value="">全部小组</option>` +
|
||
(d.dict.groups || []).map((g) => `<option value="${esc(g)}" ${g === state.staffGroup ? "selected" : ""}>${esc(g)}</option>`).join("");
|
||
|
||
const kpi = `
|
||
<div class="grid kpi" style="margin-bottom:14px">
|
||
<div class="kpi accent-blue">${Ico.badge("users")}<div class="k-label">在册人员</div><div class="k-value">${sum.total}</div><div class="k-foot">其中 ${sum.with_project} 人带项目</div></div>
|
||
${sum.groups.slice(0, 4).map((g, i) => `<div class="kpi accent-${["violet", "green", "amber", "red"][i % 4]}">${Ico.badge("users")}<div class="k-label">${esc(g.name)}</div><div class="k-value">${g.count}</div></div>`).join("")}
|
||
</div>
|
||
<div class="grid g2e" style="margin-bottom:16px">
|
||
<div class="card">
|
||
<div class="card-head"><h4>人员归属</h4></div>
|
||
<div class="card-body">
|
||
${sum.affiliations.map((a) => `
|
||
<div class="bar-row">
|
||
<div class="b-name">${esc(a.name)}</div>
|
||
<div class="b-track"><i style="width:${Math.round((a.count / (sum.total || 1)) * 100)}%;background:#2563eb"></i></div>
|
||
<div class="b-val">${a.count}</div>
|
||
</div>`).join("")}
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-head"><h4>花名册外的负责人</h4></div>
|
||
<div class="card-body">
|
||
${sum.outside.length ? sum.outside.map((o) => `
|
||
<div class="upd-item" style="display:flex;align-items:center;gap:10px">
|
||
<b>${esc(o.name)}</b>
|
||
<span class="tag-mini">项目 ${o.project_count}</span>
|
||
<span class="tag-mini">定开 ${o.custom_count}</span>
|
||
<span style="flex:1"></span>
|
||
<button class="btn sm" data-outside="${esc(o.name)}">加入花名册</button>
|
||
</div>`).join("") : `<div class="empty">所有项目负责人都能对上花名册</div>`}
|
||
</div>
|
||
</div>
|
||
</div>`;
|
||
|
||
const table = `<table class="tbl">
|
||
<thead><tr>
|
||
<th style="min-width:120px">姓名</th><th>归属小组</th><th>人员归属</th><th>说明</th>
|
||
<th class="num">在管项目</th><th class="num">定开项目</th><th class="num">定开合同额</th>
|
||
<th class="num">名下待计收</th><th>最近更新</th><th class="col-ops">操作</th>
|
||
</tr></thead><tbody>
|
||
${d.items.map((m) => `
|
||
<tr data-sid="${m.id}" ${m.archived ? 'style="opacity:.62"' : ""}>
|
||
<td><div style="display:flex;align-items:center;gap:6px">
|
||
${canW("staff")
|
||
? `<a href="javascript:;" data-sedit="${m.id}" style="color:var(--text);text-decoration:none;font-weight:600">${esc(m.name)}</a>`
|
||
: `<b>${esc(m.name)}</b>`}
|
||
${m.archived ? `<span class="arch-badge">已归档</span>` : ""}
|
||
</div></td>
|
||
<td><select class="sel" data-sf="group" style="width:112px">
|
||
${(d.dict.groups || []).map((g) => `<option value="${esc(g)}" ${g === m.group ? "selected" : ""}>${esc(g)}</option>`).join("")}
|
||
${m.group && (d.dict.groups || []).indexOf(m.group) < 0 ? `<option value="${esc(m.group)}" selected>${esc(m.group)}</option>` : ""}
|
||
</select></td>
|
||
<td><select class="sel" data-sf="affiliation" style="width:92px">
|
||
${(d.dict.affiliations || []).map((a) => `<option value="${esc(a)}" ${a === m.affiliation ? "selected" : ""}>${esc(a)}</option>`).join("")}
|
||
${m.affiliation && (d.dict.affiliations || []).indexOf(m.affiliation) < 0 ? `<option value="${esc(m.affiliation)}" selected>${esc(m.affiliation)}</option>` : ""}
|
||
</select></td>
|
||
<td><input class="inp" data-sf="note" value="${esc(m.note || "")}" style="width:150px" placeholder="—" /></td>
|
||
<td class="num">${m.project_count ? `${m.project_count}${m.key_project_count ? ` ${starMark(true, false, "重点项目")}<span class="tag-mini">${m.key_project_count}</span>` : ""}` : "—"}</td>
|
||
<td class="num">${m.custom_count}</td>
|
||
<td class="num">${m.custom_amount ? fen(m.custom_amount) + " 万" : "—"}</td>
|
||
<td class="num">${m.custom_pending ? `<span style="color:#b45309">${fen(m.custom_pending)} 万</span>` : "—"}</td>
|
||
<td>${esc(m.last_update || "—")}</td>
|
||
<td class="nowrap col-ops">${rowOps({
|
||
edit: `data-sedit="${m.id}"`,
|
||
archive: `data-sarch="${m.id}"`,
|
||
archived: m.archived,
|
||
remove: `data-sdel="${m.id}"`,
|
||
})}</td>
|
||
</tr>`).join("")}
|
||
</tbody></table>`;
|
||
|
||
const body = listCard({
|
||
title: "人员花名册",
|
||
count: d.items.length,
|
||
fields: `<select id="stArchived" class="sel" style="width:104px">${archOpts}</select>
|
||
<select id="stGroup" class="sel" style="width:120px">${groupOpts}</select>
|
||
${keywordInputHtml("stKeyword", "搜索姓名…", 160)}`,
|
||
tools: `${canR("staff") ? `<button class="btn sm" id="btnExportStaff">导出 Excel</button>` : ""}
|
||
${canW("staff") ? `<button class="btn sm primary" id="btnNewStaff">${Ico.svg("plus")}新增人员</button>` : ""}`,
|
||
rows: d.items,
|
||
table: table,
|
||
empty: state.keyword
|
||
? "没有匹配「" + esc(state.keyword) + "」的人员"
|
||
: (state.staffGroup ? "「" + esc(state.staffGroup) + "」还没有人员" : "还没有人员"),
|
||
});
|
||
|
||
host.innerHTML = kpi + body;
|
||
|
||
bindKeyword("stKeyword");
|
||
$("#stArchived").addEventListener("change", (e) => { state.staffArchived = e.target.value; renderStaff(); });
|
||
$("#stGroup").addEventListener("change", (e) => { state.staffGroup = e.target.value; renderStaff(); });
|
||
const bn = $("#btnNewStaff");
|
||
if (bn) bn.addEventListener("click", () => openStaffDialog(null));
|
||
const bex = $("#btnExportStaff");
|
||
if (bex) bex.addEventListener("click", () => download("/api/export/staff?archived=" + state.staffArchived));
|
||
host.querySelectorAll("[data-sedit]").forEach((b) =>
|
||
b.addEventListener("click", () => {
|
||
const m = d.items.find((x) => x.id === Number(b.dataset.sedit));
|
||
openStaffDialog(m);
|
||
})
|
||
);
|
||
host.querySelectorAll("[data-sarch]").forEach((b) =>
|
||
b.addEventListener("click", async () => {
|
||
const m = d.items.find((x) => x.id === Number(b.dataset.sarch));
|
||
await patch("/staff/" + m.id, { archived: !m.archived });
|
||
toast(m.archived ? "已恢复" : `已归档「${m.name}」，不再出现在负责人下拉里`);
|
||
await afterWrite();
|
||
})
|
||
);
|
||
host.querySelectorAll("[data-sdel]").forEach((b) =>
|
||
b.addEventListener("click", () =>
|
||
deleteStaff(d.items.find((x) => x.id === Number(b.dataset.sdel)))
|
||
)
|
||
);
|
||
host.querySelectorAll("[data-outside]").forEach((b) =>
|
||
b.addEventListener("click", () => openStaffDialog({ name: b.dataset.outside }))
|
||
);
|
||
const roStaff = !canW("staff");
|
||
host.querySelectorAll("tr[data-sid]").forEach((tr) => {
|
||
const id = Number(tr.dataset.sid);
|
||
tr.querySelectorAll("[data-sf]").forEach((inp) => {
|
||
if (roStaff) { inp.disabled = true; return; }
|
||
inp.addEventListener("change", async () => {
|
||
const f = inp.dataset.sf;
|
||
try {
|
||
await patch("/staff/" + id, { [f]: inp.value || null });
|
||
toast("已保存");
|
||
await afterWrite();
|
||
} catch (e) { toast("保存失败：" + e.message); }
|
||
});
|
||
});
|
||
});
|
||
}
|
||
|
||
/* ------------------------------------------------------ 权限管理（RBAC） */
|
||
/** 角色 = 一张「菜单 × 能改/只读」矩阵；用户挂一个角色。下拉改完即存，后端立刻生效。 */
|
||
async function renderRbac() {
|
||
const host = $("#view-rbac");
|
||
host.innerHTML = `<div class="empty">加载中…</div>`;
|
||
const [meta, roles, users] = await Promise.all([
|
||
api("/rbac/meta"), api("/rbac/roles"), api("/rbac/users"),
|
||
]);
|
||
const rw = canW("rbac");
|
||
const menus = meta.menus;
|
||
const save = async (fn) => {
|
||
try { await fn(); } catch (e) { toast("保存失败：" + e.message); }
|
||
await renderRbac();
|
||
};
|
||
|
||
const levelCell = (role, m) => {
|
||
const cur = (role.menus || {})[m.key] || "";
|
||
return `<td><select class="sel xs" data-rmenu="${role.id}" data-menu="${m.key}"${rw ? "" : " disabled"}>` +
|
||
meta.levels.map((l) => `<option value="${l.value}" ${l.value === cur ? "selected" : ""}>${l.label}</option>`).join("") +
|
||
`</select></td>`;
|
||
};
|
||
const roleTable = `<table class="tbl">
|
||
<thead><tr>
|
||
<th class="rbac-role">角色 / 说明</th>
|
||
${menus.map((m) => `<th class="rbac-menu-th">${esc(m.label)}</th>`).join("")}
|
||
<th class="num">用户</th>
|
||
${rw ? `<th class="col-ops">操作</th>` : ""}
|
||
</tr></thead><tbody>
|
||
${roles.map((r) => `<tr>
|
||
<td class="rbac-role"><b>${esc(r.name)}</b>${r.is_builtin ? ` <span class="tag-mini builtin">内置</span>` : ""}${r.description ? `<span>${esc(r.description)}</span>` : ""}</td>
|
||
${menus.map((m) => levelCell(r, m)).join("")}
|
||
<td class="num">${r.user_count}</td>
|
||
${rw ? `<td class="col-ops nowrap"><span class="row-ops">
|
||
<button class="icon-btn sm" data-redit="${r.id}" title="修改名称/说明">${Ico.svg("pencil")}</button>
|
||
${r.is_builtin ? "" : `<button class="icon-btn sm danger" data-rdel="${r.id}" title="删除">${Ico.svg("trash")}</button>`}
|
||
</span></td>` : ""}
|
||
</tr>`).join("")}
|
||
</tbody></table>`;
|
||
|
||
const roleOpts = (sel) => roles.map((r) =>
|
||
`<option value="${r.id}" ${r.id === sel ? "selected" : ""}>${esc(r.name)}</option>`).join("");
|
||
const userTable = `<table class="tbl">
|
||
<thead><tr>
|
||
<th>姓名</th><th>登录账号</th><th>角色</th><th class="num">可用菜单</th><th>最近登录</th>
|
||
${rw ? `<th class="col-ops">操作</th>` : ""}
|
||
</tr></thead><tbody>
|
||
${users.map((u) => {
|
||
const self = u.id === state.me.id;
|
||
return `<tr${u.active ? "" : ' style="opacity:.6"'}>
|
||
<td><b>${esc(u.name)}</b>${self ? ` <span class="tag-mini">我自己</span>` : ""}${u.active ? "" : ` <span class="tag-mini">已停用</span>`}</td>
|
||
<td>${esc(u.username)}</td>
|
||
<td><select class="sel xs" data-urole="${u.id}"${rw && !self ? "" : " disabled"} title="${self ? "不能改自己的角色" : ""}">${roleOpts(u.role_id)}</select></td>
|
||
<td class="num">${u.menus ? Object.keys(u.menus).length : 0}</td>
|
||
<td>${esc(u.last_login_at ? u.last_login_at.replace("T", " ").slice(0, 16) : "从未登录")}</td>
|
||
${rw ? `<td class="col-ops nowrap"><span class="row-ops">
|
||
<button class="icon-btn sm" data-upw="${u.id}" title="重置密码">${Ico.svg("sliders")}</button>
|
||
${self ? "" : `
|
||
<button class="icon-btn sm" data-uactive="${u.id}" data-on="${u.active ? "1" : "0"}" title="${u.active ? "停用" : "启用"}">${Ico.svg(u.active ? "ban" : "check-circle")}</button>
|
||
<button class="icon-btn sm danger" data-udel="${u.id}" title="删除">${Ico.svg("trash")}</button>`}
|
||
</span></td>` : ""}
|
||
</tr>`;
|
||
}).join("")}
|
||
</tbody></table>`;
|
||
|
||
host.innerHTML =
|
||
listCard({
|
||
title: "角色权限", count: roles.length, rows: roles, table: roleTable, empty: "还没有角色",
|
||
tools: rw ? `<button class="btn sm primary" id="btnNewRole">${Ico.svg("plus")}新建角色</button>` : "",
|
||
}) +
|
||
`<div style="height:16px"></div>` +
|
||
listCard({
|
||
title: "用户", count: users.length, rows: users, table: userTable, empty: "还没有用户",
|
||
tools: rw ? `<button class="btn sm primary" id="btnNewUser">${Ico.svg("plus")}新建用户</button>` : "",
|
||
});
|
||
|
||
// ---- 权限矩阵：一个角色的整行一起提交 ----
|
||
host.querySelectorAll("[data-rmenu]").forEach((sel) =>
|
||
sel.addEventListener("change", () => {
|
||
const rid = Number(sel.dataset.rmenu);
|
||
const mine = state.me.role_id === rid;
|
||
const next = {};
|
||
sel.closest("tr").querySelectorAll("[data-rmenu]").forEach((x) => { if (x.value) next[x.dataset.menu] = x.value; });
|
||
save(() => patch("/rbac/roles/" + rid, { menus: next })).then(() => {
|
||
if (mine) toast("已更新你所在角色的权限，刷新页面后生效");
|
||
});
|
||
})
|
||
);
|
||
const bnr = $("#btnNewRole");
|
||
if (bnr) bnr.addEventListener("click", () => openRoleDialog(null));
|
||
host.querySelectorAll("[data-redit]").forEach((b) =>
|
||
b.addEventListener("click", () => openRoleDialog(roles.find((x) => x.id === Number(b.dataset.redit))))
|
||
);
|
||
host.querySelectorAll("[data-rdel]").forEach((b) =>
|
||
b.addEventListener("click", async () => {
|
||
const r = roles.find((x) => x.id === Number(b.dataset.rdel));
|
||
const ok = await confirmDialog({ title: "删除角色", danger: true, okText: "确认删除",
|
||
body: `<p style="margin:0">确认删除角色 <b>${esc(r.name)}</b>？该角色下不能还有用户。</p>` });
|
||
if (ok) save(() => del("/rbac/roles/" + r.id));
|
||
})
|
||
);
|
||
|
||
// ---- 用户 ----
|
||
const bnu = $("#btnNewUser");
|
||
if (bnu) bnu.addEventListener("click", () => openUserDialog(null, roles));
|
||
host.querySelectorAll("[data-urole]").forEach((sel) =>
|
||
sel.addEventListener("change", () =>
|
||
save(() => patch("/rbac/users/" + Number(sel.dataset.urole), { role_id: Number(sel.value) }))
|
||
)
|
||
);
|
||
host.querySelectorAll("[data-upw]").forEach((b) =>
|
||
b.addEventListener("click", () =>
|
||
openPasswordReset(users.find((x) => x.id === Number(b.dataset.upw)))
|
||
)
|
||
);
|
||
host.querySelectorAll("[data-uactive]").forEach((b) =>
|
||
b.addEventListener("click", () => {
|
||
const on = b.dataset.on === "1";
|
||
save(() => patch("/rbac/users/" + Number(b.dataset.uactive), { active: !on }));
|
||
})
|
||
);
|
||
host.querySelectorAll("[data-udel]").forEach((b) =>
|
||
b.addEventListener("click", async () => {
|
||
const u = users.find((x) => x.id === Number(b.dataset.udel));
|
||
const ok = await confirmDialog({ title: "删除用户", danger: true, okText: "确认删除",
|
||
body: `<p style="margin:0">确认删除用户 <b>${esc(u.name)}</b>（${esc(u.username)}）？该账号会立即下线。</p>` });
|
||
if (ok) save(() => del("/rbac/users/" + u.id));
|
||
})
|
||
);
|
||
}
|
||
|
||
/** 角色只影响「能看哪些菜单」，名称说明在这里改，菜单授权在矩阵里勾 */
|
||
function openRoleDialog(role) {
|
||
const isNew = !role;
|
||
openModal(
|
||
`<div class="modal-head"><h3>${isNew ? "新建角色" : "修改角色"}</h3><button class="icon-btn" data-mclose title="关闭">${Ico.svg("x")}</button></div>
|
||
<div class="modal-body">
|
||
<div class="form-row"><label>角色名 *</label><input class="inp" id="rlName" data-autofocus value="${esc(role ? role.name : "")}" style="width:100%" placeholder="如：项目管理员" /></div>
|
||
<div class="form-row"><label>说明</label><input class="inp" id="rlDesc" value="${esc((role && role.description) || "")}" style="width:100%" placeholder="这个角色给谁用" /></div>
|
||
${isNew ? `<div class="notice info">新建后默认不带任何菜单权限，保存后在矩阵里逐项勾选。</div>` : ""}
|
||
<div class="notice err" id="mErr" style="display:none"></div>
|
||
</div>
|
||
<div class="modal-foot"><button class="btn" data-mclose>取消</button><button class="btn primary" id="mOk">${isNew ? "新建" : "保存"}</button></div>`
|
||
);
|
||
$("#mOk").addEventListener("click", async () => {
|
||
const name = $("#rlName").value.trim();
|
||
if (!name) return modalError("请填写角色名");
|
||
const body = { name: name, description: $("#rlDesc").value.trim() };
|
||
try {
|
||
if (isNew) await post("/rbac/roles", { name: body.name, description: body.description, menus: {} });
|
||
else await patch("/rbac/roles/" + role.id, body);
|
||
closeModal();
|
||
toast(isNew ? "已新建角色，在矩阵里勾选菜单即可授权" : "已保存");
|
||
await renderRbac();
|
||
} catch (e) { modalError(e.message); }
|
||
});
|
||
}
|
||
|
||
function openUserDialog(user, roles) {
|
||
const isNew = !user;
|
||
const u = user || {};
|
||
openModal(
|
||
`<div class="modal-head"><h3>${isNew ? "新建用户" : "编辑用户"}</h3><button class="icon-btn" data-mclose title="关闭">${Ico.svg("x")}</button></div>
|
||
<div class="modal-body">
|
||
<div class="form-grid">
|
||
<div class="form-row"><label>姓名 *</label><input class="inp" id="usName" data-autofocus value="${esc(u.name || "")}" style="width:100%" /></div>
|
||
<div class="form-row"><label>登录账号 *</label><input class="inp" id="usUser" value="${esc(u.username || "")}" ${isNew ? "" : "disabled"} style="width:100%" autocomplete="off" /></div>
|
||
<div class="form-row"><label>角色</label><select class="sel" id="usRole" style="width:100%">${
|
||
roles.map((r) => `<option value="${r.id}" ${r.id === u.role_id ? "selected" : ""}>${esc(r.name)}</option>`).join("")
|
||
}</select></div>
|
||
${isNew ? `<div class="form-row"><label>初始密码 *</label><input class="inp" id="usPass" type="text" value="" style="width:100%" placeholder="至少 6 位" autocomplete="new-password" /></div>` : ""}
|
||
</div>
|
||
<div class="notice info">换角色会强制该账号重新登录，权限立即按新角色生效。</div>
|
||
<div class="notice err" id="mErr" style="display:none"></div>
|
||
</div>
|
||
<div class="modal-foot"><button class="btn" data-mclose>取消</button><button class="btn primary" id="mOk">${isNew ? "新建" : "保存"}</button></div>`
|
||
);
|
||
$("#mOk").addEventListener("click", async () => {
|
||
const name = $("#usName").value.trim();
|
||
if (!name) return modalError("请填写姓名");
|
||
const btn = $("#mOk");
|
||
btn.disabled = true;
|
||
try {
|
||
if (isNew) {
|
||
const username = $("#usUser").value.trim();
|
||
const password = $("#usPass").value.trim();
|
||
if (!username) return void (btn.disabled = false, modalError("请填写登录账号"));
|
||
await post("/rbac/users", { name: name, username: username, password: password, role_id: Number($("#usRole").value), active: true });
|
||
} else {
|
||
await patch("/rbac/users/" + u.id, { name: name });
|
||
}
|
||
closeModal();
|
||
toast(isNew ? `已新建用户「${name}」` : "已保存");
|
||
await renderRbac();
|
||
} catch (e) { btn.disabled = false; modalError(e.message); }
|
||
});
|
||
}
|
||
|
||
function openPasswordReset(user) {
|
||
openModal(
|
||
`<div class="modal-head"><h3>重置密码</h3><button class="icon-btn" data-mclose title="关闭">${Ico.svg("x")}</button></div>
|
||
<div class="modal-body">
|
||
<p style="margin:0 0 12px">给 <b>${esc(user.name)}</b>（${esc(user.username)}）设置新密码。</p>
|
||
<div class="form-row"><label>新密码 *</label><input class="inp" id="rsPass" type="text" data-autofocus style="width:100%" placeholder="至少 6 位" autocomplete="new-password" /></div>
|
||
<div class="notice warn">重置后该用户的其他登录全部失效，需要用新密码重新登录。</div>
|
||
<div class="notice err" id="mErr" style="display:none"></div>
|
||
</div>
|
||
<div class="modal-foot"><button class="btn" data-mclose>取消</button><button class="btn primary" id="mOk">重置</button></div>`
|
||
);
|
||
$("#mOk").addEventListener("click", async () => {
|
||
try {
|
||
await patch("/rbac/users/" + user.id, { password: $("#rsPass").value.trim() });
|
||
closeModal();
|
||
toast(`已重置「${user.name}」的密码`);
|
||
} catch (e) { modalError(e.message); }
|
||
});
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- shell */
|
||
async function loadCategories() {
|
||
// 侧栏的分类筛选器已下线，这里只给「自研产品」子 header 上的分类下拉供数据
|
||
if (!canR("projects")) { state.categories = []; return; }
|
||
state.categories = await api("/categories");
|
||
}
|
||
|
||
function setView(view) {
|
||
if (!can(view)) view = firstAllowedView();
|
||
if (!view) { hostNoPermission(); return; }
|
||
state.view = view;
|
||
saveUI();
|
||
$$("#nav .nav-item").forEach((b) => b.classList.toggle("active", b.dataset.view === view));
|
||
$$(".view").forEach((v) => v.classList.add("hidden"));
|
||
$("#view-" + view).classList.remove("hidden");
|
||
refresh();
|
||
}
|
||
|
||
async function refresh() {
|
||
const v = state.view;
|
||
try {
|
||
if (v === "board") await renderBoard();
|
||
else if (v === "projects") await renderProjects();
|
||
else if (v === "custom") await renderCustom();
|
||
else if (v === "focus") await renderFocus();
|
||
else if (v === "staff") await renderStaff();
|
||
else if (v === "intake") await renderIntake();
|
||
else if (v === "settings") await renderSettings();
|
||
else if (v === "rbac") await renderRbac();
|
||
} catch (e) {
|
||
$("#view-" + v).innerHTML = `<div class="notice err">加载失败：${esc(e.message)}</div>`;
|
||
}
|
||
}
|
||
|
||
/** 写操作统一收尾：刷新侧栏计数 + 当前视图。
|
||
录入页不重绘，否则会清空用户正在编辑的表单。 */
|
||
async function afterWrite() {
|
||
await Promise.all([loadCategories(), loadStaff()]);
|
||
if (state.view === "intake") return;
|
||
await refresh();
|
||
}
|
||
|
||
function bindShell() {
|
||
$$("#nav .nav-item").forEach((b) => b.addEventListener("click", () => setView(b.dataset.view)));
|
||
$$("#granSeg .seg-btn").forEach((b) =>
|
||
b.addEventListener("click", () => {
|
||
state.gran = b.dataset.gran;
|
||
$$("#granSeg .seg-btn").forEach((x) => x.classList.toggle("active", x === b));
|
||
renderPeriodSelect();
|
||
refresh();
|
||
})
|
||
);
|
||
$("#prevPeriod").addEventListener("click", () => shiftPeriod(-1));
|
||
$("#nextPeriod").addEventListener("click", () => shiftPeriod(1));
|
||
$("#periodSelect").addEventListener("change", (e) => {
|
||
if (e.target.value === "__new") {
|
||
renderPeriodSelect();
|
||
createNewPeriod().then((id) => { if (id) refresh(); });
|
||
return;
|
||
}
|
||
if (state.gran === "week") state.weekId = Number(e.target.value);
|
||
else state.monthIdx = Number(e.target.value);
|
||
renderPeriodSelect();
|
||
refresh();
|
||
});
|
||
$("#btnIntake").addEventListener("click", () => setView("intake"));
|
||
$("#drawerClose").addEventListener("click", closeDrawer);
|
||
bindDrawerPeople();
|
||
$("#drawerMask").addEventListener("click", closeDrawer);
|
||
$("#modalMask").addEventListener("click", (e) => {
|
||
if (e.target.id === "modalMask" || e.target.dataset.mclose !== undefined) closeModal(false);
|
||
});
|
||
let t = null;
|
||
$("#globalSearch").addEventListener("input", (e) => {
|
||
clearTimeout(t);
|
||
const v = e.target.value.trim();
|
||
t = setTimeout(() => { state.keyword = v; refresh(); }, 320);
|
||
});
|
||
document.addEventListener("keydown", (e) => {
|
||
if (e.key !== "Escape") return;
|
||
if ($("#modalMask").classList.contains("open")) closeModal(false);
|
||
else closeDrawer();
|
||
});
|
||
}
|
||
|
||
/* ------------------------------------------- 界面状态（刷新后保持） */
|
||
const UI_KEY = "unis.ui.v1";
|
||
const UI_FIELDS = ["view", "gran", "weekId", "monthIdx", "categoryId", "keyword",
|
||
"projOwner", "projIdleOnly", "showArchived", "focusFilter", "focusArchived",
|
||
"customTab", "customArchived", "customRegion", "customOrigin", "customSort", "staffArchived", "staffGroup"];
|
||
|
||
function saveUI() {
|
||
const o = {};
|
||
UI_FIELDS.forEach((k) => { o[k] = state[k]; });
|
||
try { sessionStorage.setItem(UI_KEY, JSON.stringify(o)); } catch (e) { /* 存不了就算了 */ }
|
||
}
|
||
|
||
function restoreUI() {
|
||
let o = null;
|
||
try { o = JSON.parse(sessionStorage.getItem(UI_KEY) || "null"); } catch (e) { o = null; }
|
||
if (!o) return;
|
||
UI_FIELDS.forEach((k) => { if (k in o) state[k] = o[k]; });
|
||
if (["board", "projects", "custom", "focus", "staff", "intake", "settings", "rbac"].indexOf(state.view) < 0) state.view = "board";
|
||
if (state.gran !== "month") state.gran = "week";
|
||
if (state.focusFilter === "later") state.focusFilter = "week";
|
||
}
|
||
|
||
function hostNoPermission() {
|
||
document.querySelector(".views").innerHTML =
|
||
`<div class="notice warn">当前角色没有分配任何功能菜单，请联系管理员在「权限管理」里授权。</div>`;
|
||
}
|
||
|
||
async function main() {
|
||
restoreUI();
|
||
bindAuthForm();
|
||
try {
|
||
state.me = await api("/auth/me");
|
||
} catch (e) {
|
||
if (e.status === 401) return showAuthGate(); // 首次访问：切到登录页但不显示报错
|
||
throw e;
|
||
}
|
||
if (!state.me.menus || !Object.keys(state.me.menus).length) {
|
||
bindShell();
|
||
renderUserChip();
|
||
return hostNoPermission();
|
||
}
|
||
state.meta = await api("/meta");
|
||
await loadPeriods();
|
||
await loadStaff();
|
||
await loadCategories();
|
||
bindShell();
|
||
renderUserChip();
|
||
applyNavPermissions();
|
||
// 恢复出来的视图状态要回写到顶栏/侧栏控件上
|
||
$$("#granSeg .seg-btn").forEach((x) => x.classList.toggle("active", x.dataset.gran === state.gran));
|
||
$("#globalSearch").value = state.keyword || "";
|
||
setView(state.view);
|
||
}
|
||
|
||
main().catch((e) => {
|
||
document.body.insertAdjacentHTML("beforeend", `<div class="notice err" style="margin:20px">初始化失败：${esc(e.message)}</div>`);
|
||
});
|
||
})();
|