qiukai/opc-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 计划模块弹窗完整修复

Browse Source 
- 弹窗HTML从finance.js干净复制, 结构完全对齐
- 25个modal ID加plan_前缀, 与实际模块零冲突
- 16个window函数+4个全局函数加plan前缀, 避免覆盖
- closePlanModal关闭后调用render()清理DOM
- CSS 5条规则加上#planModal选择器
- isUnsigned=false, 表格14列+卡片14个
- 版本号 v1.0.0.20
This commit is contained in:
mac
2026-07-08 13:00:16 +08:00
parent eba4945fba
commit 61ba9c4c5d
3 changed files with 129 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
static/modules/plan.js
View File

@@ -95,8 +95,8 @@ function renderPlan() {
} }
})(); })();
const sm = pf.sign_month || ""; const sm = pf.sign_month || "";
const signMonthCell = `<td class="p-2 text-center align-middle text-sm"><span class="pf-sm-text cursor-pointer hover:text-blue-600" id="pf-sm-${pf.id}" onclick="event.stopPropagation(); editPfSignMonth(event, ${pf.id})">${sm || '—'}</span></td>`; const signMonthCell = `<td class="p-2 text-center align-middle text-sm"><span class="pf-sm-text cursor-pointer hover:text-blue-600" id="pf-sm-${pf.id}" onclick="event.stopPropagation(); planEditSignMonth(event, ${pf.id})">${sm || '—'}</span></td>`;
return `<tr class="border-b border-slate-100 hover:bg-slate-50 cursor-pointer" onclick="openPfEditModal(${pf.id})"><td class="p-2 text-sm font-medium text-center align-middle">${esc(pf.customer_name)}</td>${signMonthCell}<td class="p-2 text-center align-middle text-sm">${money(pf.sign_amount)}</td>${mCols}${totalCol}</tr>`; return `<tr class="border-b border-slate-100 hover:bg-slate-50 cursor-pointer" onclick="planOpenPfEditModal(${pf.id})"><td class="p-2 text-sm font-medium text-center align-middle">${esc(pf.customer_name)}</td>${signMonthCell}<td class="p-2 text-center align-middle text-sm">${money(pf.sign_amount)}</td>${mCols}${totalCol}</tr>`;
}; };
const now2 = new Date(); const now2 = new Date();
@@ -119,7 +119,7 @@ function renderPlan() {
document.querySelector("#plan").innerHTML = `<div class="grid gap-4"> document.querySelector("#plan").innerHTML = `<div class="grid gap-4">
${planFilterTabs} ${planFilterTabs}
${state.planFilter !== 'expense' && state.planFilter !== 'overview' ? card(`<div class="flex justify-between items-center"><div class="flex items-center gap-2">${finHeaderBase}</div>${finAddBtn}</div>`, "p-4") : ''} ${state.planFilter !== 'expense' && state.planFilter !== 'overview' ? card(`<div class="flex justify-between items-center"><div class="flex items-center gap-2">${finHeaderBase}</div>${finAddBtn}</div>`, "p-4") : ''}
<div id="financeModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40" onclick="closePlanModal()"><div class="bg-white rounded-2xl shadow-2xl w-full max-w-6xl mx-4 max-h-[92vh] overflow-y-auto" onclick="event.stopPropagation()"><div class="sticky top-0 z-10 bg-white/95 backdrop-blur border-b border-slate-100 px-8 py-5 flex items-center justify-between"><div><h3 class="text-xl font-bold text-slate-800" id="financeModalTitle">新增项目财务</h3><p class="text-xs text-slate-400 mt-0.5">填写项目财务信息与月度预算</p></div><div class="flex items-center gap-2"><button class="btn btn-ghost btn-sm text-red-600 hidden" id="financeDeleteBtn" onclick="deletePlanItem()"><i data-lucide="trash-2"></i>删除</button><button class="btn btn-ghost btn-sm rounded-full w-8 h-8 p-0" onclick="closePlanModal()"><i data-lucide="x"></i></button></div></div> <div id="planModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40" onclick="closePlanModal()"><div class="bg-white rounded-2xl shadow-2xl w-full max-w-6xl mx-4 max-h-[92vh] overflow-y-auto" onclick="event.stopPropagation()"><div class="sticky top-0 z-10 bg-white/95 backdrop-blur border-b border-slate-100 px-8 py-5 flex items-center justify-between"><div><h3 class="text-xl font-bold text-slate-800" id="planModalTitle">新增项目财务</h3><p class="text-xs text-slate-400 mt-0.5">填写项目财务信息与月度预算</p></div><div class="flex items-center gap-2"><button class="btn btn-ghost btn-sm text-red-600 hidden" id="planDeleteBtn" onclick="deletePlanItem()"><i data-lucide="trash-2"></i>删除</button><button class="btn btn-ghost btn-sm rounded-full w-8 h-8 p-0" onclick="closePlanModal()"><i data-lucide="x"></i></button></div></div>
<div class="finance-tabs"> <div class="finance-tabs">
<button class="finance-tab active" data-tab="info" onclick="switchPlanTab('info')"><i data-lucide="info" style="width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:4px"></i>基本信息</button> <button class="finance-tab active" data-tab="info" onclick="switchPlanTab('info')"><i data-lucide="info" style="width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:4px"></i>基本信息</button>
<button class="finance-tab" data-tab="revpay" onclick="switchPlanTab('revpay')"><i data-lucide="dollar-sign" style="width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:4px"></i>确收与回款</button> <button class="finance-tab" data-tab="revpay" onclick="switchPlanTab('revpay')"><i data-lucide="dollar-sign" style="width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:4px"></i>确收与回款</button>
@@ -128,9 +128,9 @@ function renderPlan() {
<button class="finance-tab" data-tab="tasks" onclick="switchPlanTab('tasks')"><i data-lucide="list-checks" style="width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:4px"></i>任务管理</button> <button class="finance-tab" data-tab="tasks" onclick="switchPlanTab('tasks')"><i data-lucide="list-checks" style="width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:4px"></i>任务管理</button>
<button class="finance-tab" data-tab="activity" onclick="switchPlanTab('activity')"><i data-lucide="message-square" style="width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:4px"></i>活动与跟进</button> <button class="finance-tab" data-tab="activity" onclick="switchPlanTab('activity')"><i data-lucide="message-square" style="width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:4px"></i>活动与跟进</button>
</div> </div>
<form onsubmit="createPlanFinance(event)" class="plan-form" novalidate><input type="hidden" name="pf_id" id="pf-id-input" value=""> <form onsubmit="createPlanFinance(event)" class="finance-form" novalidate><input type="hidden" name="pf_id" id="plan_pf-id-input" value="">
<div class="plan-tab-body"> <div class="finance-tab-body">
<div id="financeTabInfo"> <div id="plan_financeTabInfo">
<div class="grid gap-4"> <div class="grid gap-4">
<div class="grid grid-cols-3 gap-3"> <div class="grid grid-cols-3 gap-3">
<label class="block"><span class="fin-label">部门</span><input type="hidden" name="project_id" value="${state.tenant}"><input class="form-ctrl bg-slate-50 cursor-not-allowed" value="${state.tenant}" disabled></label> <label class="block"><span class="fin-label">部门</span><input type="hidden" name="project_id" value="${state.tenant}"><input class="form-ctrl bg-slate-50 cursor-not-allowed" value="${state.tenant}" disabled></label>
@@ -140,7 +140,7 @@ function renderPlan() {
<div class="grid grid-cols-3 gap-3"> <div class="grid grid-cols-3 gap-3">
<label class="block"><span class="fin-label">签约金额（元） <span class="text-red-500">*</span></span><input name="sign_amount" class="form-ctrl" placeholder="必须大于 0"></label> <label class="block"><span class="fin-label">签约金额（元） <span class="text-red-500">*</span></span><input name="sign_amount" class="form-ctrl" placeholder="必须大于 0"></label>
<label class="block"><span class="fin-label">签约月份 <span class="text-red-500">*</span></span><select name="sign_month" required class="form-ctrl bg-white"><option value="">选择</option>${monthOptions('')}</select></label> <label class="block"><span class="fin-label">签约月份 <span class="text-red-500">*</span></span><select name="sign_month" required class="form-ctrl bg-white"><option value="">选择</option>${monthOptions('')}</select></label>
<label class="block"><span class="fin-label">项目状态</span><select name="status" class="form-ctrl bg-white"><option>待签约</option></select></label> <label class="block"><span class="fin-label">项目状态</span><select name="status" class="form-ctrl bg-white"><option>已签约</option></select></label>
</div> </div>
<div class="grid grid-cols-3 gap-3"> <div class="grid grid-cols-3 gap-3">
<label class="block"><span class="fin-label">商务负责人 <span class="text-red-500">*</span></span><input name="sales_person" required class="form-ctrl" placeholder="请输入商务负责人"></label> <label class="block"><span class="fin-label">商务负责人 <span class="text-red-500">*</span></span><input name="sales_person" required class="form-ctrl" placeholder="请输入商务负责人"></label>
@@ -151,10 +151,10 @@ function renderPlan() {
<label class="block"><span class="fin-label">联系电话</span><input name="contact_phone" class="form-ctrl" placeholder="请输入联系电话"></label> <label class="block"><span class="fin-label">联系电话</span><input name="contact_phone" class="form-ctrl" placeholder="请输入联系电话"></label>
<label class="block"><span class="fin-label">其他</span><input name="other_info" class="form-ctrl" placeholder="备注信息"></label> <label class="block"><span class="fin-label">其他</span><input name="other_info" class="form-ctrl" placeholder="备注信息"></label>
</div> </div>
<div class="block"><span class="fin-label">业务类型</span><div class="flex flex-wrap gap-2 mt-1" id="businessTypeChecks">${fmTypes.map(t => `<label class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full border border-slate-200 cursor-pointer hover:border-blue-300 text-sm bt-chip" onclick="toggleBtChip(this)"><input type="checkbox" name="business_type[]" value="${t}" class="hidden"><span>${t}</span></label>`).join("")}</div></div> <div class="block"><span class="fin-label">业务类型</span><div class="flex flex-wrap gap-2 mt-1" id="plan_businessTypeChecks">${fmTypes.map(t => `<label class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full border border-slate-200 cursor-pointer hover:border-blue-300 text-sm bt-chip" onclick="planToggleBtChip(this)"><input type="checkbox" name="business_type[]" value="${t}" class="hidden"><span>${t}</span></label>`).join("")}</div></div>
</div> </div>
</div> </div>
<div id="financeTabExec" class="hidden"> <div id="plan_financeTabExec" class="hidden">
<div class="fin-field-group"> <div class="fin-field-group">
<p class="fin-section-label">执行信息</p> <p class="fin-section-label">执行信息</p>
<div class="grid grid-cols-3 gap-4"> <div class="grid grid-cols-3 gap-4">
@@ -165,53 +165,53 @@ function renderPlan() {
</div> </div>
</div> </div>
</div> </div>
<div id="financeTabRevpay" class="hidden"> <div id="plan_financeTabRevpay" class="hidden">
<div class="grid grid-cols-3 gap-3 mb-4" id="revpaySummary"> <div class="grid grid-cols-3 gap-3 mb-4" id="plan_revpaySummary">
<div class="bg-blue-50 rounded-lg p-3 text-center border border-blue-100"> <div class="bg-blue-50 rounded-lg p-3 text-center border border-blue-100">
<p class="text-xs text-blue-600 font-medium">总确收</p> <p class="text-xs text-blue-600 font-medium">总确收</p>
<p class="text-lg font-bold text-blue-700" id="revpayTotalRev">¥0</p> <p class="text-lg font-bold text-blue-700" id="plan_revpayTotalRev">¥0</p>
</div> </div>
<div class="bg-green-50 rounded-lg p-3 text-center border border-green-100"> <div class="bg-green-50 rounded-lg p-3 text-center border border-green-100">
<p class="text-xs text-green-600 font-medium">总毛利</p> <p class="text-xs text-green-600 font-medium">总毛利</p>
<p class="text-lg font-bold text-green-700" id="revpayTotalGross">¥0</p> <p class="text-lg font-bold text-green-700" id="plan_revpayTotalGross">¥0</p>
</div> </div>
<div class="bg-amber-50 rounded-lg p-3 text-center border border-amber-100"> <div class="bg-amber-50 rounded-lg p-3 text-center border border-amber-100">
<p class="text-xs text-amber-600 font-medium">总回款</p> <p class="text-xs text-amber-600 font-medium">总回款</p>
<p class="text-lg font-bold text-amber-700" id="revpayTotalPayment">¥0</p> <p class="text-lg font-bold text-amber-700" id="plan_revpayTotalPayment">¥0</p>
</div> </div>
</div> </div>
<table class="w-full text-sm border border-slate-200 rounded-lg overflow-hidden" id="revpayTable"> <table class="w-full text-sm border border-slate-200 rounded-lg overflow-hidden" id="plan_revpayTable">
<thead><tr class="bg-slate-50 border-b border-slate-200"><th class="p-2.5 text-left font-medium text-slate-500" style="min-width:140px">月份</th><th class="p-2.5 text-right font-medium text-slate-500">确收</th><th class="p-2.5 text-right font-medium text-slate-500">毛利</th><th class="p-2.5 text-right font-medium text-slate-500">回款</th><th class="p-2.5 text-left font-medium text-slate-500">备注</th><th class="p-2.5 w-8"></th></tr></thead> <thead><tr class="bg-slate-50 border-b border-slate-200"><th class="p-2.5 text-left font-medium text-slate-500" style="min-width:140px">月份</th><th class="p-2.5 text-right font-medium text-slate-500">确收</th><th class="p-2.5 text-right font-medium text-slate-500">毛利</th><th class="p-2.5 text-right font-medium text-slate-500">回款</th><th class="p-2.5 text-left font-medium text-slate-500">备注</th><th class="p-2.5 w-8"></th></tr></thead>
<tbody id="revpayTbody"></tbody> <tbody id="plan_revpayTbody"></tbody>
</table> </table>
<button type="button" class="btn btn-ghost btn-sm mt-3" onclick="addRevpayRow()"><i data-lucide="plus"></i>添加月份</button> <button type="button" class="btn btn-ghost btn-sm mt-3" onclick="planAddRevpayRow()"><i data-lucide="plus"></i>添加月份</button>
</div> </div>
<div id="financeTabCost" class="hidden"> <div id="plan_financeTabCost" class="hidden">
<div class="grid grid-cols-2 gap-3 mb-4" id="costSummary"> <div class="grid grid-cols-2 gap-3 mb-4" id="plan_costSummary">
<div class="bg-rose-50 rounded-lg p-3 text-center border border-rose-100"> <div class="bg-rose-50 rounded-lg p-3 text-center border border-rose-100">
<p class="text-xs text-rose-600 font-medium">总成本</p> <p class="text-xs text-rose-600 font-medium">总成本</p>
<p class="text-lg font-bold text-rose-700" id="costTotalCost">¥0</p> <p class="text-lg font-bold text-rose-700" id="plan_costTotalCost">¥0</p>
</div> </div>
<div class="bg-purple-50 rounded-lg p-3 text-center border border-purple-100"> <div class="bg-purple-50 rounded-lg p-3 text-center border border-purple-100">
<p class="text-xs text-purple-600 font-medium">总已付</p> <p class="text-xs text-purple-600 font-medium">总已付</p>
<p class="text-lg font-bold text-purple-700" id="costTotalPaid">¥0</p> <p class="text-lg font-bold text-purple-700" id="plan_costTotalPaid">¥0</p>
</div> </div>
</div> </div>
<table class="w-full text-sm border border-slate-200 rounded-lg overflow-hidden" id="costTable"> <table class="w-full text-sm border border-slate-200 rounded-lg overflow-hidden" id="plan_costTable">
<thead><tr class="bg-slate-50 border-b border-slate-200"><th class="p-2.5 text-left font-medium text-slate-500" style="min-width:140px">月份</th><th class="p-2.5 text-left font-medium text-slate-500" style="min-width:120px">费用类型</th><th class="p-2.5 text-right font-medium text-slate-500">成本</th><th class="p-2.5 text-right font-medium text-slate-500">已付</th><th class="p-2.5 text-left font-medium text-slate-500">备注</th><th class="p-2.5 w-8"></th></tr></thead> <thead><tr class="bg-slate-50 border-b border-slate-200"><th class="p-2.5 text-left font-medium text-slate-500" style="min-width:140px">月份</th><th class="p-2.5 text-left font-medium text-slate-500" style="min-width:120px">费用类型</th><th class="p-2.5 text-right font-medium text-slate-500">成本</th><th class="p-2.5 text-right font-medium text-slate-500">已付</th><th class="p-2.5 text-left font-medium text-slate-500">备注</th><th class="p-2.5 w-8"></th></tr></thead>
<tbody id="costTbody"></tbody> <tbody id="plan_costTbody"></tbody>
</table> </table>
<button type="button" class="btn btn-ghost btn-sm mt-3" onclick="addCostRow()"><i data-lucide="plus"></i>添加月份</button> <button type="button" class="btn btn-ghost btn-sm mt-3" onclick="planAddCostRow()"><i data-lucide="plus"></i>添加月份</button>
</div> </div>
<div id="financeTabTasks" class="hidden"> <div id="plan_financeTabTasks" class="hidden">
<table class="w-full text-sm border border-slate-200 rounded-lg overflow-hidden" id="taskTable"> <table class="w-full text-sm border border-slate-200 rounded-lg overflow-hidden" id="plan_taskTable">
<thead><tr class="bg-slate-50 border-b border-slate-200"><th class="p-2.5 text-left font-medium text-slate-500" style="min-width:120px">月份</th><th class="p-2.5 text-left font-medium text-slate-500" style="min-width:120px">任务类型</th><th class="p-2.5 text-right font-medium text-slate-500">任务数量</th><th class="p-2.5 text-right font-medium text-slate-500">已执行</th><th class="p-2.5 text-right font-medium text-slate-500">差额</th><th class="p-2.5 text-right font-medium text-slate-500">单价</th><th class="p-2.5 text-right font-medium text-slate-500">执行金额</th><th class="p-2.5 text-right font-medium text-slate-500">未执行金额</th><th class="p-2.5 w-8"></th></tr></thead> <thead><tr class="bg-slate-50 border-b border-slate-200"><th class="p-2.5 text-left font-medium text-slate-500" style="min-width:120px">月份</th><th class="p-2.5 text-left font-medium text-slate-500" style="min-width:120px">任务类型</th><th class="p-2.5 text-right font-medium text-slate-500">任务数量</th><th class="p-2.5 text-right font-medium text-slate-500">已执行</th><th class="p-2.5 text-right font-medium text-slate-500">差额</th><th class="p-2.5 text-right font-medium text-slate-500">单价</th><th class="p-2.5 text-right font-medium text-slate-500">执行金额</th><th class="p-2.5 text-right font-medium text-slate-500">未执行金额</th><th class="p-2.5 w-8"></th></tr></thead>
<tbody id="taskTbody"></tbody> <tbody id="plan_taskTbody"></tbody>
</table> </table>
<button type="button" class="btn btn-ghost btn-sm mt-3" onclick="addTaskRow()"><i data-lucide="plus"></i>添加任务</button> <button type="button" class="btn btn-ghost btn-sm mt-3" onclick="planAddTaskRow()"><i data-lucide="plus"></i>添加任务</button>
</div> </div>
<div id="financeTabActivity" class="hidden"> <div id="plan_financeTabActivity" class="hidden">
<div class="grid gap-2" id="finActivityList"></div> <div class="grid gap-2" id="plan_finActivityList"></div>
<div class="comment-box mt-3"> <div class="comment-box mt-3">
<div class="squire-toolbar"> <div class="squire-toolbar">
<button type="button" class="squire-btn" onmousedown="event.preventDefault();squireCmd('bold')" title="加粗"><i data-lucide="bold"></i></button> <button type="button" class="squire-btn" onmousedown="event.preventDefault();squireCmd('bold')" title="加粗"><i data-lucide="bold"></i></button>
@@ -226,24 +226,24 @@ function renderPlan() {
<button type="button" class="squire-btn" onmousedown="event.preventDefault();squireCmd('undo')" title="撤销"><i data-lucide="undo"></i></button> <button type="button" class="squire-btn" onmousedown="event.preventDefault();squireCmd('undo')" title="撤销"><i data-lucide="undo"></i></button>
<button type="button" class="squire-btn" onmousedown="event.preventDefault();squireCmd('redo')" title="重做"><i data-lucide="redo"></i></button> <button type="button" class="squire-btn" onmousedown="event.preventDefault();squireCmd('redo')" title="重做"><i data-lucide="redo"></i></button>
</div> </div>
<div class="squire-editor" id="squire_finance" placeholder="添加评论"></div> <div class="squire-editor" id="plan_squire_finance" placeholder="添加评论"></div>
<div class="comment-toolbar"> <div class="comment-toolbar">
<span class="comment-hint">支持富文本编辑</span> <span class="comment-hint">支持富文本编辑</span>
<button class="btn btn-primary btn-sm comment-submit" type="button" onclick="submitFinComment()">评论</button> <button class="btn btn-primary btn-sm comment-submit" type="button" onclick="planSubmitComment()">评论</button>
</div> </div>
</div> </div>
</div> </div>
</div><div class="flex justify-end gap-3 pt-2 plan-form-actions"><button type="button" class="btn btn-ghost btn-sm px-6" onclick="closePlanModal()">取消</button><button type="submit" class="btn btn-primary btn-sm px-8">保存</button></div></form></div></div> </div><div class="flex justify-end gap-3 pt-2 finance-form-actions"><button type="button" class="btn btn-ghost btn-sm px-6" onclick="closePlanModal()">取消</button><button type="submit" class="btn btn-primary btn-sm px-8">保存</button></div></form></div></div>
${(() => { ${(() => {
if (state.planFilter === 'overview') { if (state.planFilter === 'overview') {
setTimeout(() => renderPlanOverview(), 10); setTimeout(() => renderPlanOverview(), 10);
return `<div id="financeOverview"></div>`; return `<div id="planOverview"></div>`;
} }
if (state.planFilter === 'expense') { if (state.planFilter === 'expense') {
setTimeout(() => renderPlanExpense(), 10); setTimeout(() => renderPlanExpense(), 10);
return `<div id="planExpenseModule"></div>`; return `<div id="planExpenseModule"></div>`;
} }
const isUnsigned = state.planFilter === '待签约'; const isUnsigned = false;
const METRIC_CARDS = [ const METRIC_CARDS = [
{ label: '签约金额', value: ctx => moneyWan(ctx.signTotal), color: 'text-slate-700' }, { label: '签约金额', value: ctx => moneyWan(ctx.signTotal), color: 'text-slate-700' },
{ label: '已确收', hideUnsigned: true, value: ctx => moneyWan(ctx.sumRev), color: 'text-blue-700' }, { label: '已确收', hideUnsigned: true, value: ctx => moneyWan(ctx.sumRev), color: 'text-blue-700' },
@@ -257,7 +257,7 @@ function renderPlan() {
{ label: '毛利率', hideUnsigned: true, value: ctx => ctx.sumRev && ctx.sumGross ? Math.round(ctx.sumGross / ctx.sumRev * 100) + '%' : '—', color: 'text-slate-500' }, { label: '毛利率', hideUnsigned: true, value: ctx => ctx.sumRev && ctx.sumGross ? Math.round(ctx.sumGross / ctx.sumRev * 100) + '%' : '—', color: 'text-slate-500' },
{ label: '回款率', hideUnsigned: true, value: ctx => ctx.sumRev && ctx.sumPay ? Math.round(ctx.sumPay / ctx.sumRev * 100) + '%' : '—', color: 'text-slate-500' }, { label: '回款率', hideUnsigned: true, value: ctx => ctx.sumRev && ctx.sumPay ? Math.round(ctx.sumPay / ctx.sumRev * 100) + '%' : '—', color: 'text-slate-500' },
{ label: '付款率', hideUnsigned: true, value: ctx => ctx.sumCost && ctx.sumPaid ? Math.round(ctx.sumPaid / ctx.sumCost * 100) + '%' : '—', color: 'text-slate-500' }, { label: '付款率', hideUnsigned: true, value: ctx => ctx.sumCost && ctx.sumPaid ? Math.round(ctx.sumPaid / ctx.sumCost * 100) + '%' : '—', color: 'text-slate-500' },
].filter(c => state.planFilter !== '待签约' || !c.hideUnsigned); ].filter(c => true);
// 列排序 // 列排序
if (!state.planSort) state.planSort = { key: null, asc: true }; if (!state.planSort) state.planSort = { key: null, asc: true };
@@ -342,7 +342,7 @@ function renderPlan() {
const profit = gross; const profit = gross;
const pfCls = profit >= 0 ? 'text-green-600' : 'text-red-600'; const pfCls = profit >= 0 ? 'text-green-600' : 'text-red-600';
const pfVal = profit ? money(profit) : '<span class="text-slate-300">—</span>'; const pfVal = profit ? money(profit) : '<span class="text-slate-300">—</span>';
return `<tr class="border-b border-slate-100 hover:bg-slate-50 cursor-pointer" onclick="openPfEditModal(${pf.id})"><td class="p-2 text-sm font-medium text-center align-middle truncate" style="min-width:300px;max-width:300px;width:300px" title="${esc(pf.customer_name)}">${esc(pf.customer_name)}</td><td class="p-2 text-center align-middle text-sm">${st}</td><td class="p-2 text-center align-middle text-sm font-medium">${money(pf.sign_amount)}</td><td class="p-2 text-center text-blue-700 align-middle">${fmtNoUnit(rev)}</td><td class="p-2 text-center align-middle text-sm font-medium">${fmtNoUnit(gross)}</td><td class="p-2 text-center text-rose-700 align-middle">${fmtNoUnit(cost)}</td><td class="p-2 text-center font-semibold align-middle ${pfCls}">${pfVal}</td><td class="p-2 text-center text-amber-700 align-middle">${fmtNoUnit(payment)}</td><td class="p-2 text-center text-purple-700 align-middle">${fmtNoUnit(paid)}</td><td class="p-2 text-center font-semibold align-middle ${cfCls}">${cf}</td><td class="p-2 text-center align-middle text-sm">${exe}</td><td class="p-2 text-center align-middle text-sm">${grossR}</td><td class="p-2 text-center align-middle text-sm">${payR}</td><td class="p-2 text-center align-middle text-sm">${paidR}</td></tr>`; return `<tr class="border-b border-slate-100 hover:bg-slate-50 cursor-pointer" onclick="planOpenPfEditModal(${pf.id})"><td class="p-2 text-sm font-medium text-center align-middle truncate" style="min-width:300px;max-width:300px;width:300px" title="${esc(pf.customer_name)}">${esc(pf.customer_name)}</td><td class="p-2 text-center align-middle text-sm">${st}</td><td class="p-2 text-center align-middle text-sm font-medium">${money(pf.sign_amount)}</td><td class="p-2 text-center text-blue-700 align-middle">${fmtNoUnit(rev)}</td><td class="p-2 text-center align-middle text-sm font-medium">${fmtNoUnit(gross)}</td><td class="p-2 text-center text-rose-700 align-middle">${fmtNoUnit(cost)}</td><td class="p-2 text-center font-semibold align-middle ${pfCls}">${pfVal}</td><td class="p-2 text-center text-amber-700 align-middle">${fmtNoUnit(payment)}</td><td class="p-2 text-center text-purple-700 align-middle">${fmtNoUnit(paid)}</td><td class="p-2 text-center font-semibold align-middle ${cfCls}">${cf}</td><td class="p-2 text-center align-middle text-sm">${exe}</td><td class="p-2 text-center align-middle text-sm">${grossR}</td><td class="p-2 text-center align-middle text-sm">${payR}</td><td class="p-2 text-center align-middle text-sm">${paidR}</td></tr>`;
}; };
// 待签约简版行 // 待签约简版行
const tdRowUnsigned = (pf, cost, gross) => { const tdRowUnsigned = (pf, cost, gross) => {
@@ -350,7 +350,7 @@ function renderPlan() {
const profit = gross; const profit = gross;
const pfCls = profit >= 0 ? 'text-green-600' : 'text-red-600'; const pfCls = profit >= 0 ? 'text-green-600' : 'text-red-600';
const pfVal = profit ? money(profit) : '<span class="text-slate-300">—</span>'; const pfVal = profit ? money(profit) : '<span class="text-slate-300">—</span>';
return `<tr class="border-b border-slate-100 hover:bg-slate-50 cursor-pointer" onclick="openPfEditModal(${pf.id})"><td class="p-2 text-sm font-medium text-center align-middle truncate" style="min-width:300px;max-width:300px;width:300px" title="${esc(pf.customer_name)}">${esc(pf.customer_name)}</td><td class="p-2 text-center align-middle text-sm">${st}</td><td class="p-2 text-center align-middle text-sm font-medium">${money(pf.sign_amount)}</td><td class="p-2 text-center align-middle text-sm">${pf.sign_month || '—'}</td><td class="p-2 text-center align-middle text-sm font-medium">${fmtNoUnit(gross)}</td><td class="p-2 text-center text-rose-700 align-middle">${fmtNoUnit(cost)}</td><td class="p-2 text-center font-semibold align-middle ${pfCls}">${pfVal}</td></tr>`; return `<tr class="border-b border-slate-100 hover:bg-slate-50 cursor-pointer" onclick="planOpenPfEditModal(${pf.id})"><td class="p-2 text-sm font-medium text-center align-middle truncate" style="min-width:300px;max-width:300px;width:300px" title="${esc(pf.customer_name)}">${esc(pf.customer_name)}</td><td class="p-2 text-center align-middle text-sm">${st}</td><td class="p-2 text-center align-middle text-sm font-medium">${money(pf.sign_amount)}</td><td class="p-2 text-center align-middle text-sm">${pf.sign_month || '—'}</td><td class="p-2 text-center align-middle text-sm font-medium">${fmtNoUnit(gross)}</td><td class="p-2 text-center text-rose-700 align-middle">${fmtNoUnit(cost)}</td><td class="p-2 text-center font-semibold align-middle ${pfCls}">${pfVal}</td></tr>`;
}; };
if (state.planView === 'monthly') { if (state.planView === 'monthly') {
@@ -508,46 +508,46 @@ window.openPlanModal = () => {
if (dept) dept.value = state.tenant; if (dept) dept.value = state.tenant;
const pfIdInput = form.querySelector('[name="pf_id"]'); const pfIdInput = form.querySelector('[name="pf_id"]');
if (!pfIdInput || !pfIdInput.value) { if (!pfIdInput || !pfIdInput.value) {
initRevpayTable(null); planInitRevpayTable(null);
initCostTable(null); planInitCostTable(null);
initTaskTable(null); planInitTaskTable(null);
document.querySelector("#planDeleteBtn").classList.add("hidden"); document.querySelector("#planDeleteBtn").classList.add("hidden");
} }
modal.classList.remove("hidden"); modal.classList.remove("hidden");
}; };
window.addRevpayRow = (month = '', rev = '', gross = '', payment = '', rev_note = '') => { window.planAddRevpayRow = (month = '', rev = '', gross = '', payment = '', rev_note = '') => {
const tbody = document.querySelector("#revpayTbody"); const tbody = document.querySelector("#plan_revpayTbody");
if (!tbody) return; if (!tbody) return;
const row = document.createElement("tr"); const row = document.createElement("tr");
row.innerHTML = `<td><select name="budget_month[]" class="form-ctrl form-ctrl-sm w-full" style="min-width:140px" onchange="updateRevpaySummary()">${monthOptions(month)}</select></td> row.innerHTML = `<td><select name="budget_month[]" class="form-ctrl form-ctrl-sm w-full" style="min-width:140px" onchange="planUpdateRevpaySummary()">${monthOptions(month)}</select></td>
<td><input name="budget_rev[]" type="number" step="0.01" class="form-ctrl form-ctrl-sm w-full text-right" placeholder="0" value="${rev}" oninput="updateRevpaySummary()"></td> <td><input name="budget_rev[]" type="number" step="0.01" class="form-ctrl form-ctrl-sm w-full text-right" placeholder="0" value="${rev}" oninput="planUpdateRevpaySummary()"></td>
<td><input name="budget_gross[]" type="number" step="0.01" class="form-ctrl form-ctrl-sm w-full text-right" placeholder="0" value="${gross}" oninput="updateRevpaySummary()"></td> <td><input name="budget_gross[]" type="number" step="0.01" class="form-ctrl form-ctrl-sm w-full text-right" placeholder="0" value="${gross}" oninput="planUpdateRevpaySummary()"></td>
<td><input name="budget_payment[]" type="number" step="0.01" class="form-ctrl form-ctrl-sm w-full text-right" placeholder="0" value="${payment}" oninput="updateRevpaySummary()"></td> <td><input name="budget_payment[]" type="number" step="0.01" class="form-ctrl form-ctrl-sm w-full text-right" placeholder="0" value="${payment}" oninput="planUpdateRevpaySummary()"></td>
<td><input name="budget_rev_note[]" class="form-ctrl form-ctrl-sm w-full" placeholder="备注" value="${rev_note}"></td> <td><input name="budget_rev_note[]" class="form-ctrl form-ctrl-sm w-full" placeholder="备注" value="${rev_note}"></td>
<td><button type="button" class="btn btn-ghost btn-sm text-red-500 p-0 w-6 h-6" onclick="this.closest('tr').remove();updateRevpaySummary()"><i data-lucide="trash-2" style="width:14px;height:14px"></i></button></td>`; <td><button type="button" class="btn btn-ghost btn-sm text-red-500 p-0 w-6 h-6" onclick="this.closest('tr').remove();planUpdateRevpaySummary()"><i data-lucide="trash-2" style="width:14px;height:14px"></i></button></td>`;
tbody.appendChild(row); tbody.appendChild(row);
if (window.lucide) window.lucide.createIcons(); if (window.lucide) window.lucide.createIcons();
}; };
window.addCostRow = (month = '', expense_type = '', cost = '', paid = '', exp_note = '') => { window.planAddCostRow = (month = '', expense_type = '', cost = '', paid = '', exp_note = '') => {
const tbody = document.querySelector("#costTbody"); const tbody = document.querySelector("#plan_costTbody");
if (!tbody) return; if (!tbody) return;
const row = document.createElement("tr"); const row = document.createElement("tr");
row.innerHTML = `<td><select name="expense_month[]" class="form-ctrl form-ctrl-sm w-full" style="min-width:140px" onchange="updateCostSummary()">${monthOptions(month)}</select></td> row.innerHTML = `<td><select name="expense_month[]" class="form-ctrl form-ctrl-sm w-full" style="min-width:140px" onchange="planUpdateCostSummary()">${monthOptions(month)}</select></td>
<td><input name="expense_type[]" class="form-ctrl form-ctrl-sm w-full" placeholder="费用类型" value="${expense_type}"></td> <td><input name="expense_type[]" class="form-ctrl form-ctrl-sm w-full" placeholder="费用类型" value="${expense_type}"></td>
<td><input name="expense_cost[]" type="number" step="0.01" class="form-ctrl form-ctrl-sm w-full text-right" placeholder="0" value="${cost}" oninput="updateCostSummary()"></td> <td><input name="expense_cost[]" type="number" step="0.01" class="form-ctrl form-ctrl-sm w-full text-right" placeholder="0" value="${cost}" oninput="planUpdateCostSummary()"></td>
<td><input name="expense_paid[]" type="number" step="0.01" class="form-ctrl form-ctrl-sm w-full text-right" placeholder="0" value="${paid}" oninput="updateCostSummary()"></td> <td><input name="expense_paid[]" type="number" step="0.01" class="form-ctrl form-ctrl-sm w-full text-right" placeholder="0" value="${paid}" oninput="planUpdateCostSummary()"></td>
<td><input name="expense_note[]" class="form-ctrl form-ctrl-sm w-full" placeholder="备注" value="${exp_note}"></td> <td><input name="expense_note[]" class="form-ctrl form-ctrl-sm w-full" placeholder="备注" value="${exp_note}"></td>
<td><button type="button" class="btn btn-ghost btn-sm text-red-500 p-0 w-6 h-6" onclick="this.closest('tr').remove();updateCostSummary()"><i data-lucide="trash-2" style="width:14px;height:14px"></i></button></td>`; <td><button type="button" class="btn btn-ghost btn-sm text-red-500 p-0 w-6 h-6" onclick="this.closest('tr').remove();planUpdateCostSummary()"><i data-lucide="trash-2" style="width:14px;height:14px"></i></button></td>`;
tbody.appendChild(row); tbody.appendChild(row);
if (window.lucide) window.lucide.createIcons(); if (window.lucide) window.lucide.createIcons();
}; };
window.updateRevpaySummary = () => { window.planUpdateRevpaySummary = () => {
const revEl = document.querySelector("#revpayTotalRev"); const revEl = document.querySelector("#plan_revpayTotalRev");
const grossEl = document.querySelector("#revpayTotalGross"); const grossEl = document.querySelector("#plan_revpayTotalGross");
const paymentEl = document.querySelector("#revpayTotalPayment"); const paymentEl = document.querySelector("#plan_revpayTotalPayment");
if (!revEl || !paymentEl) return; if (!revEl || !paymentEl) return;
const revInputs = document.querySelectorAll('[name="budget_rev[]"]'); const revInputs = document.querySelectorAll('[name="budget_rev[]"]');
const grossInputs = document.querySelectorAll('[name="budget_gross[]"]'); const grossInputs = document.querySelectorAll('[name="budget_gross[]"]');
@@ -561,9 +561,9 @@ window.updateRevpaySummary = () => {
paymentEl.textContent = money(totalPayment); paymentEl.textContent = money(totalPayment);
}; };
window.updateCostSummary = () => { window.planUpdateCostSummary = () => {
const costEl = document.querySelector("#costTotalCost"); const costEl = document.querySelector("#plan_costTotalCost");
const paidEl = document.querySelector("#costTotalPaid"); const paidEl = document.querySelector("#plan_costTotalPaid");
if (!costEl || !paidEl) return; if (!costEl || !paidEl) return;
const costInputs = document.querySelectorAll('[name="expense_cost[]"]'); const costInputs = document.querySelectorAll('[name="expense_cost[]"]');
const paidInputs = document.querySelectorAll('[name="expense_paid[]"]'); const paidInputs = document.querySelectorAll('[name="expense_paid[]"]');
@@ -574,27 +574,27 @@ window.updateCostSummary = () => {
paidEl.textContent = money(totalPaid); paidEl.textContent = money(totalPaid);
}; };
window.initRevpayTable = (budgetData) => { window.planInitRevpayTable = (budgetData) => {
const tbody = document.querySelector("#revpayTbody"); const tbody = document.querySelector("#plan_revpayTbody");
if (!tbody) return; if (!tbody) return;
tbody.innerHTML = ""; tbody.innerHTML = "";
const rows = budgetData || []; const rows = budgetData || [];
rows.forEach(r => addRevpayRow(r.month || '', r.rev || '', r.gross || '', r.payment || '', r.rev_note || '')); rows.forEach(r => planAddRevpayRow(r.month || '', r.rev || '', r.gross || '', r.payment || '', r.rev_note || ''));
setTimeout(() => updateRevpaySummary(), 50); setTimeout(() => planUpdateRevpaySummary(), 50);
}; };
window.initCostTable = (expenseData) => { window.planInitCostTable = (expenseData) => {
const tbody = document.querySelector("#costTbody"); const tbody = document.querySelector("#plan_costTbody");
if (!tbody) return; if (!tbody) return;
tbody.innerHTML = ""; tbody.innerHTML = "";
const rows = expenseData || []; const rows = expenseData || [];
rows.forEach(r => addCostRow(r.month || '', r.expense_type || '', r.cost || '', r.paid || '', r.exp_note || '')); rows.forEach(r => planAddCostRow(r.month || '', r.expense_type || '', r.cost || '', r.paid || '', r.exp_note || ''));
setTimeout(() => updateCostSummary(), 50); setTimeout(() => planUpdateCostSummary(), 50);
}; };
// ---------- 任务管理 tab ---------- // ---------- 任务管理 tab ----------
function taskMonthOptions(selected) { function planTaskMonthOptions(selected) {
const now = new Date(); const now = new Date();
const opts = []; const opts = [];
for (let i = -2; i <= 12; i++) { for (let i = -2; i <= 12; i++) {
@@ -605,36 +605,36 @@ function taskMonthOptions(selected) {
return opts.join(""); return opts.join("");
} }
window.addTaskRow = (taskMonth = '', taskType = '', taskCount = '', executedCount = '', unitPrice = '') => { window.planAddTaskRow = (taskMonth = '', taskType = '', taskCount = '', executedCount = '', unitPrice = '') => {
const tbody = document.querySelector("#taskTbody"); const tbody = document.querySelector("#plan_taskTbody");
if (!tbody) return; if (!tbody) return;
const row = document.createElement("tr"); const row = document.createElement("tr");
const defaultMonth = (() => { const n = new Date(); return n.getFullYear() + "-" + String(n.getMonth()+1).padStart(2,"0"); })(); const defaultMonth = (() => { const n = new Date(); return n.getFullYear() + "-" + String(n.getMonth()+1).padStart(2,"0"); })();
const isPreset = TASK_TYPES.includes(taskType); const isPreset = TASK_TYPES.includes(taskType);
const typeCell = isPreset || !taskType const typeCell = isPreset || !taskType
? `<select name="task_type[]" class="form-ctrl form-ctrl-sm w-full" onchange="onTaskTypeChange(this)"><option value="">选择</option>${TASK_TYPES.map(t => `<option ${t === taskType ? 'selected' : ''}>${t}</option>`).join("")}<option value="__custom__" ${!isPreset && taskType ? 'selected' : ''}>自定义...</option></select>` ? `<select name="task_type[]" class="form-ctrl form-ctrl-sm w-full" onchange="planOnTaskTypeChange(this)"><option value="">选择</option>${TASK_TYPES.map(t => `<option ${t === taskType ? 'selected' : ''}>${t}</option>`).join("")}<option value="__custom__" ${!isPreset && taskType ? 'selected' : ''}>自定义...</option></select>`
: `<input name="task_type[]" class="form-ctrl form-ctrl-sm w-full" value="${esc(taskType)}" placeholder="输入自定义类型"><button type="button" class="btn btn-ghost btn-sm text-slate-400 p-0 w-5 h-5 ml-1" onclick="revertTaskType(this)" title="返回选择"><i data-lucide="rotate-ccw" style="width:12px;height:12px"></i></button>`; : `<input name="task_type[]" class="form-ctrl form-ctrl-sm w-full" value="${esc(taskType)}" placeholder="输入自定义类型"><button type="button" class="btn btn-ghost btn-sm text-slate-400 p-0 w-5 h-5 ml-1" onclick="planRevertTaskType(this)" title="返回选择"><i data-lucide="rotate-ccw" style="width:12px;height:12px"></i></button>`;
row.innerHTML = `<td><select name="task_month[]" class="form-ctrl form-ctrl-sm w-full">${taskMonthOptions(taskMonth || defaultMonth)}</select></td> row.innerHTML = `<td><select name="task_month[]" class="form-ctrl form-ctrl-sm w-full">${planTaskMonthOptions(taskMonth || defaultMonth)}</select></td>
<td class="flex items-center">${typeCell}</td> <td class="flex items-center">${typeCell}</td>
<td><input name="task_count[]" type="number" step="1" min="0" class="form-ctrl form-ctrl-sm text-right" style="width:100px" placeholder="0" value="${taskCount}" oninput="updateTaskDiff(this)"></td> <td><input name="task_count[]" type="number" step="1" min="0" class="form-ctrl form-ctrl-sm text-right" style="width:100px" placeholder="0" value="${taskCount}" oninput="planUpdateTaskDiff(this)"></td>
<td><input name="task_executed[]" type="number" step="1" min="0" class="form-ctrl form-ctrl-sm text-right" style="width:100px" placeholder="0" value="${executedCount}" oninput="updateTaskDiff(this)"></td> <td><input name="task_executed[]" type="number" step="1" min="0" class="form-ctrl form-ctrl-sm text-right" style="width:100px" placeholder="0" value="${executedCount}" oninput="planUpdateTaskDiff(this)"></td>
<td><input name="task_diff[]" type="number" class="form-ctrl form-ctrl-sm text-right" style="width:80px" placeholder="—" disabled></td> <td><input name="task_diff[]" type="number" class="form-ctrl form-ctrl-sm text-right" style="width:80px" placeholder="—" disabled></td>
<td><input name="task_unit_price[]" type="number" step="0.01" min="0" class="form-ctrl form-ctrl-sm text-right" style="width:90px" placeholder="0" value="${unitPrice}" oninput="updateTaskDiff(this)"></td> <td><input name="task_unit_price[]" type="number" step="0.01" min="0" class="form-ctrl form-ctrl-sm text-right" style="width:90px" placeholder="0" value="${unitPrice}" oninput="planUpdateTaskDiff(this)"></td>
<td><input name="task_exec_amount[]" type="number" class="form-ctrl form-ctrl-sm text-right" style="width:140px" placeholder="—" disabled></td> <td><input name="task_exec_amount[]" type="number" class="form-ctrl form-ctrl-sm text-right" style="width:140px" placeholder="—" disabled></td>
<td><input name="task_unexec_amount[]" type="number" class="form-ctrl form-ctrl-sm text-right" style="width:140px" placeholder="—" disabled></td> <td><input name="task_unexec_amount[]" type="number" class="form-ctrl form-ctrl-sm text-right" style="width:140px" placeholder="—" disabled></td>
<td><button type="button" class="btn btn-ghost btn-sm text-red-500 p-0 w-6 h-6" onclick="this.closest('tr').remove()"><i data-lucide="trash-2" style="width:14px;height:14px"></i></button></td>`; <td><button type="button" class="btn btn-ghost btn-sm text-red-500 p-0 w-6 h-6" onclick="this.closest('tr').remove()"><i data-lucide="trash-2" style="width:14px;height:14px"></i></button></td>`;
tbody.appendChild(row); tbody.appendChild(row);
if (window.lucide) window.lucide.createIcons(); if (window.lucide) window.lucide.createIcons();
updateRowCalc(row); planUpdateRowCalc(row);
}; };
window.updateTaskDiff = (el) => { window.planUpdateTaskDiff = (el) => {
const row = el.closest('tr'); const row = el.closest('tr');
if (!row) return; if (!row) return;
updateRowCalc(row); planUpdateRowCalc(row);
}; };
function updateRowCalc(row) { function planUpdateRowCalc(row) {
const countInput = row.querySelector('[name="task_count[]"]'); const countInput = row.querySelector('[name="task_count[]"]');
const execInput = row.querySelector('[name="task_executed[]"]'); const execInput = row.querySelector('[name="task_executed[]"]');
const priceInput = row.querySelector('[name="task_unit_price[]"]'); const priceInput = row.querySelector('[name="task_unit_price[]"]');
@@ -655,7 +655,7 @@ function updateRowCalc(row) {
unexecAmtInput.value = unexecAmt ? unexecAmt.toFixed(2) : ''; unexecAmtInput.value = unexecAmt ? unexecAmt.toFixed(2) : '';
} }
window.toggleBtChip = (chip) => { window.planToggleBtChip = (chip) => {
const cb = chip.querySelector('input'); const cb = chip.querySelector('input');
cb.checked = !cb.checked; cb.checked = !cb.checked;
chip.classList.toggle('bg-blue-50', cb.checked); chip.classList.toggle('bg-blue-50', cb.checked);
@@ -663,35 +663,36 @@ window.toggleBtChip = (chip) => {
chip.classList.toggle('text-blue-600', cb.checked); chip.classList.toggle('text-blue-600', cb.checked);
}; };
window.initTaskTable = (taskData) => { window.planInitTaskTable = (taskData) => {
const tbody = document.querySelector("#taskTbody"); const tbody = document.querySelector("#plan_taskTbody");
if (!tbody) return; if (!tbody) return;
tbody.innerHTML = ""; tbody.innerHTML = "";
const rows = taskData || []; const rows = taskData || [];
rows.forEach(r => addTaskRow(r.task_month || '', r.task_type || '', r.task_count || '', r.task_executed || '', r.unit_price || '')); rows.forEach(r => planAddTaskRow(r.task_month || '', r.task_type || '', r.task_count || '', r.task_executed || '', r.unit_price || ''));
}; };
window.onTaskTypeChange = (sel) => { window.planOnTaskTypeChange = (sel) => {
if (sel.value !== '__custom__') return; if (sel.value !== '__custom__') return;
const td = sel.parentElement; const td = sel.parentElement;
const oldVal = sel.value; const oldVal = sel.value;
td.innerHTML = `<input name="task_type[]" class="form-ctrl form-ctrl-sm w-full" placeholder="输入自定义类型" autofocus><button type="button" class="btn btn-ghost btn-sm text-slate-400 p-0 w-5 h-5 ml-1" onclick="revertTaskType(this)" title="返回选择"><i data-lucide="rotate-ccw" style="width:12px;height:12px"></i></button>`; td.innerHTML = `<input name="task_type[]" class="form-ctrl form-ctrl-sm w-full" placeholder="输入自定义类型" autofocus><button type="button" class="btn btn-ghost btn-sm text-slate-400 p-0 w-5 h-5 ml-1" onclick="planRevertTaskType(this)" title="返回选择"><i data-lucide="rotate-ccw" style="width:12px;height:12px"></i></button>`;
if (window.lucide) window.lucide.createIcons(); if (window.lucide) window.lucide.createIcons();
td.querySelector('input').focus(); td.querySelector('input').focus();
}; };
window.revertTaskType = (btn) => { window.planRevertTaskType = (btn) => {
const td = btn.parentElement; const td = btn.parentElement;
td.innerHTML = `<select name="task_type[]" class="form-ctrl form-ctrl-sm w-full" onchange="onTaskTypeChange(this)"><option value="">选择</option>${TASK_TYPES.map(t => `<option>${t}</option>`).join("")}<option value="__custom__">自定义...</option></select>`; td.innerHTML = `<select name="task_type[]" class="form-ctrl form-ctrl-sm w-full" onchange="planOnTaskTypeChange(this)"><option value="">选择</option>${TASK_TYPES.map(t => `<option>${t}</option>`).join("")}<option value="__custom__">自定义...</option></select>`;
if (window.lucide) window.lucide.createIcons(); if (window.lucide) window.lucide.createIcons();
}; };
window.closePlanModal = () => { window.closePlanModal = () => {
const modal = document.querySelector("#planModal"); const modal = document.querySelector("#planModal");
modal.classList.add("hidden"); if (modal) modal.classList.add("hidden");
render();
}; };
window.editPfSignMonth = (event, pfId) => { window.planEditSignMonth = (event, pfId) => {
event.stopPropagation(); event.stopPropagation();
const pf = (state.data.planFinances || []).find(x => x.id === pfId); const pf = (state.data.planFinances || []).find(x => x.id === pfId);
if (!pf) return; if (!pf) return;
@@ -707,11 +708,11 @@ window.editPfSignMonth = (event, pfId) => {
try { try {
await api(`/api/planFinances/${pfId}`, { method: "PUT", body: JSON.stringify({ data: { sign_month: newValue } }) }); await api(`/api/planFinances/${pfId}`, { method: "PUT", body: JSON.stringify({ data: { sign_month: newValue } }) });
pf.sign_month = newValue; pf.sign_month = newValue;
td.innerHTML = `<span class="pf-sm-text cursor-pointer hover:text-blue-600" onclick="editPfSignMonth(event, ${pfId})">${newValue || '—'}</span>`; td.innerHTML = `<span class="pf-sm-text cursor-pointer hover:text-blue-600" onclick="planEditSignMonth(event, ${pfId})">${newValue || '—'}</span>`;
} catch (e) { toast("修改失败：" + e.message, "error"); } } catch (e) { toast("修改失败：" + e.message, "error"); }
}); });
select.addEventListener("blur", () => { select.addEventListener("blur", () => {
td.innerHTML = `<span class="pf-sm-text cursor-pointer hover:text-blue-600" onclick="editPfSignMonth(event, ${pfId})">${currentValue || '—'}</span>`; td.innerHTML = `<span class="pf-sm-text cursor-pointer hover:text-blue-600" onclick="planEditSignMonth(event, ${pfId})">${currentValue || '—'}</span>`;
}); });
td.innerHTML = ""; td.innerHTML = "";
td.appendChild(select); td.appendChild(select);
@@ -720,25 +721,25 @@ window.editPfSignMonth = (event, pfId) => {
window.switchPlanTab = (tab) => { window.switchPlanTab = (tab) => {
document.querySelectorAll(".plan-tab").forEach(b => b.classList.toggle("active", b.dataset.tab === tab)); document.querySelectorAll(".plan-tab").forEach(b => b.classList.toggle("active", b.dataset.tab === tab));
document.querySelector("#financeTabInfo").classList.toggle("hidden", tab !== "info"); document.querySelector("#plan_financeTabInfo").classList.toggle("hidden", tab !== "info");
document.querySelector("#financeTabRevpay").classList.toggle("hidden", tab !== "revpay"); document.querySelector("#plan_financeTabRevpay").classList.toggle("hidden", tab !== "revpay");
document.querySelector("#financeTabCost").classList.toggle("hidden", tab !== "cost"); document.querySelector("#plan_financeTabCost").classList.toggle("hidden", tab !== "cost");
document.querySelector("#financeTabExec").classList.toggle("hidden", tab !== "exec"); document.querySelector("#plan_financeTabExec").classList.toggle("hidden", tab !== "exec");
document.querySelector("#financeTabTasks").classList.toggle("hidden", tab !== "tasks"); document.querySelector("#plan_financeTabTasks").classList.toggle("hidden", tab !== "tasks");
document.querySelector("#financeTabActivity").classList.toggle("hidden", tab !== "activity"); document.querySelector("#plan_financeTabActivity").classList.toggle("hidden", tab !== "activity");
document.querySelector(".plan-form-actions").classList.toggle("hidden", tab === "activity"); document.querySelector(".plan-form-actions").classList.toggle("hidden", tab === "activity");
if (tab === "activity") initFinSquire(); if (tab === "activity") planInitSquire();
}; };
// ---------- 活动与跟进 ---------- // ---------- 活动与跟进 ----------
async function loadFinFollowups(pfId) { async function planLoadFollowups(pfId) {
const list = document.querySelector("#finActivityList"); const list = document.querySelector("#plan_finActivityList");
if (!list || !pfId) return; if (!list || !pfId) return;
try { try {
const fups = await api(`/api/followups/project_finance/${pfId}`); const fups = await api(`/api/followups/project_finance/${pfId}`);
list.innerHTML = fups.length list.innerHTML = fups.length
? fups.map(f => `<div class="activity-item"><div class="activity-icon"><i data-lucide="message-square"></i></div><div class="min-w-0 flex-1"><div class="flex justify-between gap-3 text-[12px] text-slate-500"><span>${esc(f.follower)} · ${esc(f.follow_up_method)}</span><span>${esc(f.followed_at)}</span></div><div class="mt-1 leading-5 text-slate-800 rich-content" data-html="${encodeURIComponent(f.content || '')}"></div>${f.next_action ? `<p class="mt-1 leading-5 text-blue-700">下一步：${text(f.next_action)}</p>` : ""}</div><button class="activity-delete" type="button" onclick="deleteFinFollowup(event, ${f.id})" title="删除评论"><i data-lucide="trash-2"></i></button></div>`).join("") ? fups.map(f => `<div class="activity-item"><div class="activity-icon"><i data-lucide="message-square"></i></div><div class="min-w-0 flex-1"><div class="flex justify-between gap-3 text-[12px] text-slate-500"><span>${esc(f.follower)} · ${esc(f.follow_up_method)}</span><span>${esc(f.followed_at)}</span></div><div class="mt-1 leading-5 text-slate-800 rich-content" data-html="${encodeURIComponent(f.content || '')}"></div>${f.next_action ? `<p class="mt-1 leading-5 text-blue-700">下一步：${text(f.next_action)}</p>` : ""}</div><button class="activity-delete" type="button" onclick="planDeleteFollowup(event, ${f.id})" title="删除评论"><i data-lucide="trash-2"></i></button></div>`).join("")
: '<p class="text-sm text-slate-400 py-4 text-center">暂无跟进记录</p>'; : '<p class="text-sm text-slate-400 py-4 text-center">暂无跟进记录</p>';
if (window.lucide) window.lucide.createIcons(); if (window.lucide) window.lucide.createIcons();
list.querySelectorAll(".rich-content").forEach(el => { list.querySelectorAll(".rich-content").forEach(el => {
@@ -748,8 +749,8 @@ async function loadFinFollowups(pfId) {
} catch (e) { /* ignore */ } } catch (e) { /* ignore */ }
} }
function initFinSquire() { function planInitSquire() {
const ed = document.querySelector("#squire_finance"); const ed = document.querySelector("#plan_squire_finance");
if (!ed || !window.Squire) return; if (!ed || !window.Squire) return;
if (window.squireInstances["squire_finance"]) { window.squireInstances["squire_finance"].destroy(); } if (window.squireInstances["squire_finance"]) { window.squireInstances["squire_finance"].destroy(); }
const sq = new Squire(ed, { blockTag: "P" }); const sq = new Squire(ed, { blockTag: "P" });
@@ -758,8 +759,8 @@ function initFinSquire() {
ed.addEventListener("blur", () => { if (!ed.textContent.trim()) ed.classList.remove("focused"); }); ed.addEventListener("blur", () => { if (!ed.textContent.trim()) ed.classList.remove("focused"); });
} }
window.submitFinComment = async () => { window.planSubmitComment = async () => {
const pfId = document.querySelector("#pf-id-input").value; const pfId = document.querySelector("#plan_pf-id-input").value;
if (!pfId) return; if (!pfId) return;
const sq = window.squireInstances["squire_finance"]; const sq = window.squireInstances["squire_finance"];
const content = sq ? sq.getHTML().trim() : ""; const content = sq ? sq.getHTML().trim() : "";
@@ -771,22 +772,22 @@ window.submitFinComment = async () => {
sq.setHTML(""); sq.setHTML("");
btn.disabled = false; btn.disabled = false;
btn.textContent = "评论"; btn.textContent = "评论";
await loadFinFollowups(pfId); await planLoadFollowups(pfId);
}; };
window.deleteFinFollowup = async (event, followupId) => { window.planDeleteFollowup = async (event, followupId) => {
event.stopPropagation(); event.stopPropagation();
if (!confirm("确认删除这条评论？")) return; if (!confirm("确认删除这条评论？")) return;
await api(`/api/followups/${followupId}`, { method: "DELETE" }); await api(`/api/followups/${followupId}`, { method: "DELETE" });
const pfId = document.querySelector("#pf-id-input").value; const pfId = document.querySelector("#plan_pf-id-input").value;
if (pfId) await loadFinFollowups(pfId); if (pfId) await planLoadFollowups(pfId);
}; };
window.openPfEditModal = (pfId) => { window.planOpenPfEditModal = (pfId) => {
const pf = (state.data.planFinances || []).find(x => x.id === pfId); const pf = (state.data.planFinances || []).find(x => x.id === pfId);
if (!pf) return; if (!pf) return;
document.querySelector("#pf-id-input").value = pf.id; document.querySelector("#plan_pf-id-input").value = pf.id;
document.querySelector("#financeModalTitle").textContent = "编辑项目财务"; document.querySelector("#planModalTitle").textContent = "编辑项目财务";
document.querySelector("#planDeleteBtn").classList.remove("hidden"); document.querySelector("#planDeleteBtn").classList.remove("hidden");
const form = document.querySelector("#financeModal form"); const form = document.querySelector("#financeModal form");
form.querySelector('[name="project_id"]').value = pf.project_id || ""; form.querySelector('[name="project_id"]').value = pf.project_id || "";
@@ -827,15 +828,15 @@ window.openPfEditModal = (pfId) => {
setVal("other_info", pf.other_info); setVal("other_info", pf.other_info);
let budgetData = []; let budgetData = [];
try { budgetData = JSON.parse(pf.budget_data || "[]"); } catch (e) { budgetData = []; } try { budgetData = JSON.parse(pf.budget_data || "[]"); } catch (e) { budgetData = []; }
initRevpayTable(budgetData.length ? budgetData : null); planInitRevpayTable(budgetData.length ? budgetData : null);
let expenseData = []; let expenseData = [];
try { expenseData = JSON.parse(pf.expense_data || "[]"); } catch (e) { expenseData = []; } try { expenseData = JSON.parse(pf.expense_data || "[]"); } catch (e) { expenseData = []; }
initCostTable(expenseData.length ? expenseData : null); planInitCostTable(expenseData.length ? expenseData : null);
let taskData = []; let taskData = [];
try { taskData = JSON.parse(pf.task_data || "[]"); } catch (e) { taskData = []; } try { taskData = JSON.parse(pf.task_data || "[]"); } catch (e) { taskData = []; }
initTaskTable(taskData.length ? taskData : null); planInitTaskTable(taskData.length ? taskData : null);
setTimeout(() => updateBudgetSummary(), 100); setTimeout(() => updateBudgetSummary(), 100);
loadFinFollowups(pf.id); planLoadFollowups(pf.id);
openPlanModal(); openPlanModal();
}; };
@@ -936,8 +937,8 @@ window.createPlanFinance = async (event) => {
if (result.id && data.customer_name) logActivity("finance", result.id, "创建了「" + data.customer_name + "」的财务项目"); if (result.id && data.customer_name) logActivity("finance", result.id, "创建了「" + data.customer_name + "」的财务项目");
} }
form.reset(); form.reset();
document.querySelector("#pf-id-input").value = ""; document.querySelector("#plan_pf-id-input").value = "";
document.querySelector("#financeModalTitle").textContent = "新增项目财务"; document.querySelector("#planModalTitle").textContent = "新增项目财务";
closePlanModal(); closePlanModal();
await load(); await load();
} catch (error) { } catch (error) {
@@ -946,7 +947,7 @@ window.createPlanFinance = async (event) => {
}; };
window.deletePlanItem = async () => { window.deletePlanItem = async () => {
const pfId = document.querySelector("#pf-id-input").value; const pfId = document.querySelector("#plan_pf-id-input").value;
if (!pfId) return; if (!pfId) return;
const pf = (state.data.planFinances || []).find(x => x.id === parseInt(pfId)); const pf = (state.data.planFinances || []).find(x => x.id === parseInt(pfId));
const name = pf ? (pf.customer_name || "此项目") : "此项目"; const name = pf ? (pf.customer_name || "此项目") : "此项目";

10
static/styles.css
View File

@@ -96,26 +96,26 @@ body {
} }
/* 详情弹窗固定高度，tab 切换不抖动 */ /* 详情弹窗固定高度，tab 切换不抖动 */
#financeModal > div { #financeModal > div, #planModal > div {
height: 650px; height: 650px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
#financeModal .finance-tabs { flex-shrink: 0; } #financeModal .finance-tabs, #planModal .finance-tabs { flex-shrink: 0; }
#financeModal form { #financeModal form, #planModal form {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
} }
#financeModal .finance-tab-body { #financeModal .finance-tab-body, #planModal .finance-tab-body {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
overflow-y: auto; overflow-y: auto;
padding: 32px; padding: 32px;
} }
#financeModal .finance-form-actions { #financeModal .finance-form-actions, #planModal .finance-form-actions {
flex-shrink: 0; flex-shrink: 0;
background: #fff; background: #fff;
padding: 12px 32px 8px; padding: 12px 32px 8px;

2
templates/index.html
View File

@@ -80,7 +80,7 @@
<header class="topbar border-b border-slate-200 bg-white px-8 py-5"> <header class="topbar border-b border-slate-200 bg-white px-8 py-5">
<div class="flex items-center gap-3 w-full"> <div class="flex items-center gap-3 w-full">
<div class="flex-1"> <div class="flex-1">
<p class="eyebrow text-xs font-semibold uppercase tracking-[0.18em] text-blue-700">OPC Manager <span class="ml-2 text-xs font-normal text-slate-400 tracking-normal">v1.0.0.19</span></p> <p class="eyebrow text-xs font-semibold uppercase tracking-[0.18em] text-blue-700">OPC Manager <span class="ml-2 text-xs font-normal text-slate-400 tracking-normal">v1.0.0.20</span></p>
<div class="flex items-center gap-4 mt-1"> <div class="flex items-center gap-4 mt-1">
<h1 class="text-2xl font-semibold" id="workspaceTitle">科普 OPC 工作台</h1> <h1 class="text-2xl font-semibold" id="workspaceTitle">科普 OPC 工作台</h1>
<div class="hidden sm:flex items-center gap-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-100 rounded-full px-4 py-1.5"> <div class="hidden sm:flex items-center gap-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-100 rounded-full px-4 py-1.5">