feat: 计划模块 + 待签约迁移 + 表格排序 + 已签约→项目
- 新增计划模块(plan_finances/plan_expense_records, 侧边栏计划tab) - 待签约项目自动迁移到计划模块(data_fixes 幂等) - 已签约tab改名为项目(业务+计划两个模块) - 业务模块表格点击列头排序(月度/季度/总视图) - 计划与业务侧边栏位置对调 - plan模块CSS修复(使用finance-tab类) - 版本号 v1.0.0.17
This commit is contained in:
mac
@@ -116,7 +116,7 @@ function renderFinance() {
|
||||
const finHeaderBase = `<span class="text-sm text-slate-500">视图：</span><select onchange="setFinView(this.value)" class="text-sm font-medium py-1 px-2.5 cursor-pointer" style="appearance:none;-webkit-appearance:none;background-color:transparent;border:0;outline:none;background:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%236b7280%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpolyline points=%226 9 12 15 18 9%22%3E%3C/polyline%3E%3C/svg%3E') no-repeat right 4px center;padding-right:22px;min-height:30px"><option value="overview" ${state.finView==='overview'?'selected':''}>总视图</option><option value="quarterly" ${state.finView==='quarterly'?'selected':''}>季度视图</option><option value="monthly" ${state.finView==='monthly'?'selected':''}>月度视图</option></select>${toolDateSelect}`;
|
||||
const finAddBtn = `<button class="btn btn-primary btn-sm" onclick="openFinanceModal()">新增财务项目</button>`;
|
||||
|
||||
const finFilterTabs = `<div class="finance-tabs" style="padding:0;border-bottom:1px solid #e2e8f0;margin-bottom:0"><button onclick="switchFinFilter('overview')" class="finance-tab${state.finFilter==='overview'?' active':''}" style="font-size:14px;font-weight:600">总览</button><button onclick="switchFinFilter('已签约')" class="finance-tab${state.finFilter==='已签约'?' active':''}" style="font-size:14px;font-weight:600">已签约 (${pfs.filter(x=>x.status==='已签约').length})</button><button onclick="switchFinFilter('待签约')" class="finance-tab${state.finFilter==='待签约'?' active':''}" style="font-size:14px;font-weight:600">待签约 (${pfs.filter(x=>x.status==='待签约').length})</button><button onclick="switchFinFilter('expense')" class="finance-tab${state.finFilter==='expense'?' active':''}" style="font-size:14px;font-weight:600">平台费用</button></div>`;
|
||||
const finFilterTabs = `<div class="finance-tabs" style="padding:0;border-bottom:1px solid #e2e8f0;margin-bottom:0"><button onclick="switchFinFilter('overview')" class="finance-tab${state.finFilter==='overview'?' active':''}" style="font-size:14px;font-weight:600">总览</button><button onclick="switchFinFilter('已签约')" class="finance-tab${state.finFilter==='已签约'?' active':''}" style="font-size:14px;font-weight:600">项目 (${pfs.filter(x=>x.status==='已签约').length})</button><button onclick="switchFinFilter('待签约')" class="finance-tab${state.finFilter==='待签约'?' active':''}" style="font-size:14px;font-weight:600">待签约 (${pfs.filter(x=>x.status==='待签约').length})</button><button onclick="switchFinFilter('expense')" class="finance-tab${state.finFilter==='expense'?' active':''}" style="font-size:14px;font-weight:600">平台费用</button></div>`;
|
||||
|
||||
document.querySelector("#finance").innerHTML = `<div class="grid gap-4">
|
||||
${finFilterTabs}
|
||||
@@ -261,38 +261,49 @@ function renderFinance() {
|
||||
{ label: '付款率', hideUnsigned: true, value: ctx => ctx.sumCost && ctx.sumPaid ? Math.round(ctx.sumPaid / ctx.sumCost * 100) + '%' : '—', color: 'text-slate-500' },
|
||||
].filter(c => state.finFilter !== '待签约' || !c.hideUnsigned);
|
||||
|
||||
// 列排序
|
||||
if (!state.finSort) state.finSort = { key: null, asc: true };
|
||||
const sortData = (data, key) => {
|
||||
if (!key || !state.finSort.key) return data;
|
||||
var asc = state.finSort.asc ? 1 : -1;
|
||||
return data.slice().sort(function(a, b) {
|
||||
var va = a[key], vb = b[key];
|
||||
if (typeof va === 'string') va = va || '', vb = vb || '';
|
||||
else { va = parseFloat(va) || 0; vb = parseFloat(vb) || 0; }
|
||||
if (va < vb) return -1 * asc;
|
||||
if (va > vb) return 1 * asc;
|
||||
return 0;
|
||||
});
|
||||
};
|
||||
const buildThead = (cols, sortKey) => {
|
||||
var h = '<thead><tr class="bg-slate-50 border-b border-slate-200">';
|
||||
cols.forEach(function(c) {
|
||||
var arrow = sortKey ? (sortKey === c.key ? (state.finSort.asc ? ' ↑' : ' ↓') : '') : '';
|
||||
h += '<th class="p-2 text-center font-semibold align-middle cursor-pointer select-none" onclick="setFinSort(\'' + sortKey + '|' + c.key + '\')">' + c.label + arrow + '</th>';
|
||||
});
|
||||
h += '</tr></thead>';
|
||||
return h;
|
||||
};
|
||||
const SIGNED_COLS = [
|
||||
{ key: 'customer_name', label: '项目名称' }, { key: 'status', label: '状态' }, { key: 'sign_amount', label: '签约金额' },
|
||||
{ key: 'rev', label: '已确收' }, { key: 'gross', label: '毛利' }, { key: 'cost', label: '成本' },
|
||||
{ key: 'profit', label: '项目利润' }, { key: 'payment', label: '已回款' }, { key: 'paid', label: '已付' },
|
||||
{ key: 'cashflow', label: '现金流' }, { key: 'exe_rate', label: '执行率' }, { key: 'gross_rate', label: '毛利率' },
|
||||
{ key: 'pay_rate', label: '回款率' }, { key: 'paid_rate', label: '付款率' },
|
||||
];
|
||||
const UNSIGNED_COLS = [
|
||||
{ key: 'customer_name', label: '项目名称' }, { key: 'status', label: '状态' }, { key: 'sign_amount', label: '签约金额' },
|
||||
{ key: 'sign_month', label: '签约月份' }, { key: 'gross', label: '毛利' }, { key: 'cost', label: '成本' },
|
||||
{ key: 'profit', label: '项目利润' },
|
||||
];
|
||||
|
||||
const renderView = (rows, sumRev, sumPay, sumCost, sumPaid, sumGross, signTotal, signCnt, emptyText) => {
|
||||
const ctx = { sumRev, sumPay, sumCost, sumPaid, sumGross, signTotal, signCnt };
|
||||
const cards = METRIC_CARDS.map(c => {
|
||||
const v = c.value(ctx);
|
||||
return typeof v === 'object' ? [c.label, v.val, v.cls] : [c.label, v, c.color];
|
||||
});
|
||||
const thead = isUnsigned
|
||||
? '<thead><tr class="bg-slate-50 border-b border-slate-200">' +
|
||||
'<th class="p-2 text-center font-semibold align-middle">项目名称</th>' +
|
||||
'<th class="p-2 text-center font-semibold align-middle">状态</th>' +
|
||||
'<th class="p-2 text-center font-semibold align-middle">签约金额</th>' +
|
||||
'<th class="p-2 text-center font-semibold align-middle">签约月份</th>' +
|
||||
'<th class="p-2 text-center font-semibold align-middle">毛利</th>' +
|
||||
'<th class="p-2 text-center font-semibold align-middle text-rose-600">成本</th>' +
|
||||
'<th class="p-2 text-center font-semibold align-middle">项目利润</th>' +
|
||||
'</tr></thead>'
|
||||
: '<thead><tr class="bg-slate-50 border-b border-slate-200">' +
|
||||
'<th class="p-2 text-center font-semibold align-middle">项目名称</th>' +
|
||||
'<th class="p-2 text-center font-semibold align-middle">状态</th>' +
|
||||
'<th class="p-2 text-center font-semibold align-middle">签约金额</th>' +
|
||||
'<th class="p-2 text-center font-semibold align-middle text-blue-600">已确收</th>' +
|
||||
'<th class="p-2 text-center font-semibold align-middle">毛利</th>' +
|
||||
'<th class="p-2 text-center font-semibold align-middle text-rose-600">成本</th>' +
|
||||
'<th class="p-2 text-center font-semibold align-middle">项目利润</th>' +
|
||||
'<th class="p-2 text-center font-semibold align-middle text-amber-600">已回款</th>' +
|
||||
'<th class="p-2 text-center font-semibold align-middle text-purple-600">已付</th>' +
|
||||
'<th class="p-2 text-center font-semibold align-middle text-slate-700">现金流</th>' +
|
||||
'<th class="p-2 text-center font-semibold align-middle">执行率</th>' +
|
||||
'<th class="p-2 text-center font-semibold align-middle">毛利率</th>' +
|
||||
'<th class="p-2 text-center font-semibold align-middle">回款率</th>' +
|
||||
'<th class="p-2 text-center font-semibold align-middle">付款率</th>' +
|
||||
'</tr></thead>';
|
||||
const thead = isUnsigned ? buildThead(UNSIGNED_COLS, 'uns') : buildThead(SIGNED_COLS, 'sig');
|
||||
const theadCols = isUnsigned ? 7 : 14;
|
||||
const tbody = rows.length ? `<tbody>${rows.join("")}</tbody>` : `<tr><td colspan="${theadCols}" class="p-6 text-center text-slate-400">${emptyText}</td></tr>`;
|
||||
|
||||
@@ -336,8 +347,7 @@ function renderFinance() {
|
||||
const defaultMonth = now.getFullYear() + "-" + String(now.getMonth() + 1).padStart(2, "0");
|
||||
if (!state.finMonth) state.finMonth = defaultMonth;
|
||||
const selMonth = state.finMonth;
|
||||
const rows = [];
|
||||
let sumRev = 0, sumPay = 0, sumCost = 0, sumPaid = 0, sumGross = 0;
|
||||
var dataItems = [];
|
||||
allPfs.forEach(pf => {
|
||||
let bd = []; try { bd = JSON.parse(pf.budget_data || "[]"); } catch (e) {}
|
||||
let ed = []; try { ed = JSON.parse(pf.expense_data || "[]"); } catch (e) {}
|
||||
@@ -349,8 +359,24 @@ function renderFinance() {
|
||||
const cost = Math.round(parseFloat(e.cost || 0) || 0);
|
||||
const paid = Math.round(parseFloat(e.paid || 0) || 0);
|
||||
if (!rev && !payment && !cost && !paid && !gross) return;
|
||||
sumRev += rev; sumPay += payment; sumCost += cost; sumPaid += paid; sumGross += gross;
|
||||
rows.push(isUnsigned ? tdRowUnsigned(pf, cost, gross) : tdRow(pf, rev, payment, cost, paid, gross));
|
||||
dataItems.push({
|
||||
pf: pf, customer_name: pf.customer_name || '', status: pf.status || '',
|
||||
sign_amount: pf.sign_amount || 0, sign_month: pf.sign_month || '',
|
||||
rev: rev, gross: gross, cost: cost, profit: gross, payment: payment, paid: paid,
|
||||
cashflow: payment - paid,
|
||||
exe_rate: rev && pf.sign_amount ? Math.round(rev / pf.sign_amount * 100) : 0,
|
||||
gross_rate: rev && gross ? Math.round(gross / rev * 100) : 0,
|
||||
pay_rate: rev && payment ? Math.round(payment / rev * 100) : 0,
|
||||
paid_rate: cost && paid ? Math.round(paid / cost * 100) : 0,
|
||||
});
|
||||
});
|
||||
var sortK = state.finSort && state.finSort.key ? state.finSort.key.split('|')[1] : null;
|
||||
dataItems = sortData(dataItems, sortK);
|
||||
const rows = [];
|
||||
let sumRev = 0, sumPay = 0, sumCost = 0, sumPaid = 0, sumGross = 0;
|
||||
dataItems.forEach(d => {
|
||||
sumRev += d.rev; sumPay += d.payment; sumCost += d.cost; sumPaid += d.paid; sumGross += d.gross;
|
||||
rows.push(isUnsigned ? tdRowUnsigned(d.pf, d.cost, d.gross) : tdRow(d.pf, d.rev, d.payment, d.cost, d.paid, d.gross));
|
||||
});
|
||||
const signTotal = Math.round(allPfs.filter(x => (x.sign_month || "").substring(0, 7) === selMonth).reduce((a, p) => a + (p.sign_amount || 0), 0));
|
||||
const signCnt = allPfs.filter(x => x.status === "已签约" && (x.sign_month || "").substring(0, 7) === selMonth).length;
|
||||
@@ -377,8 +403,7 @@ function renderFinance() {
|
||||
try { JSON.parse(pf.expense_data || "[]").forEach(e => { const m = parseInt((e.month || "").substring(5)) || 0; if (qRange.includes(m)) total += parseFloat(e[field] || 0); }); } catch (e) {}
|
||||
return total;
|
||||
};
|
||||
let sumRev = 0, sumPay = 0, sumCost = 0, sumPaid = 0, sumGross = 0;
|
||||
const rows = [];
|
||||
var dataItems = [];
|
||||
allPfs.forEach(pf => {
|
||||
const rev = sumBudget(pf, "rev");
|
||||
const payment = sumBudget(pf, "payment");
|
||||
@@ -386,8 +411,24 @@ function renderFinance() {
|
||||
const cost = sumExpense(pf, "cost");
|
||||
const paid = sumExpense(pf, "paid");
|
||||
if (!rev && !payment && !cost && !paid && !gross) return;
|
||||
sumRev += rev; sumPay += payment; sumCost += cost; sumPaid += paid; sumGross += gross;
|
||||
rows.push(isUnsigned ? tdRowUnsigned(pf, cost, gross) : tdRow(pf, rev, payment, cost, paid, gross));
|
||||
dataItems.push({
|
||||
pf: pf, customer_name: pf.customer_name || '', status: pf.status || '',
|
||||
sign_amount: pf.sign_amount || 0, sign_month: pf.sign_month || '',
|
||||
rev: rev, gross: gross, cost: cost, profit: gross, payment: payment, paid: paid,
|
||||
cashflow: payment - paid,
|
||||
exe_rate: rev && pf.sign_amount ? Math.round(rev / pf.sign_amount * 100) : 0,
|
||||
gross_rate: rev && gross ? Math.round(gross / rev * 100) : 0,
|
||||
pay_rate: rev && payment ? Math.round(payment / rev * 100) : 0,
|
||||
paid_rate: cost && paid ? Math.round(paid / cost * 100) : 0,
|
||||
});
|
||||
});
|
||||
var sortK = state.finSort && state.finSort.key ? state.finSort.key.split('|')[1] : null;
|
||||
dataItems = sortData(dataItems, sortK);
|
||||
let sumRev = 0, sumPay = 0, sumCost = 0, sumPaid = 0, sumGross = 0;
|
||||
const rows = [];
|
||||
dataItems.forEach(d => {
|
||||
sumRev += d.rev; sumPay += d.payment; sumCost += d.cost; sumPaid += d.paid; sumGross += d.gross;
|
||||
rows.push(isUnsigned ? tdRowUnsigned(d.pf, d.cost, d.gross) : tdRow(d.pf, d.rev, d.payment, d.cost, d.paid, d.gross));
|
||||
});
|
||||
const signTotal = Math.round(allPfs.filter(x => { const m = parseInt((x.sign_month || "0").substring(5)) || 0; return qRange.includes(m); }).reduce((a, p) => a + (p.sign_amount || 0), 0));
|
||||
const signCnt = allPfs.filter(x => x.status === "已签约" && qRange.includes(parseInt((x.sign_month || "0").substring(5)) || 0)).length;
|
||||
@@ -405,12 +446,26 @@ function renderFinance() {
|
||||
return { rev: Math.round(rev), payment: Math.round(payment), cost: Math.round(cost), paid: Math.round(paid), gross: Math.round(gross) };
|
||||
};
|
||||
const allPfs = pfs.filter(x => x.status === state.finFilter);
|
||||
var dataItems = allPfs.map(pf => {
|
||||
var t = calcTotals(pf);
|
||||
return {
|
||||
pf: pf, customer_name: pf.customer_name || '', status: pf.status || '',
|
||||
sign_amount: pf.sign_amount || 0, sign_month: pf.sign_month || '',
|
||||
rev: t.rev, gross: t.gross, cost: t.cost, profit: t.gross,
|
||||
payment: t.payment, paid: t.paid, cashflow: t.payment - t.paid,
|
||||
exe_rate: t.rev && pf.sign_amount ? Math.round(t.rev / pf.sign_amount * 100) : 0,
|
||||
gross_rate: t.rev && t.gross ? Math.round(t.gross / t.rev * 100) : 0,
|
||||
pay_rate: t.rev && t.payment ? Math.round(t.payment / t.rev * 100) : 0,
|
||||
paid_rate: t.cost && t.paid ? Math.round(t.paid / t.cost * 100) : 0,
|
||||
};
|
||||
});
|
||||
var sortK = state.finSort && state.finSort.key ? state.finSort.key.split('|')[1] : null;
|
||||
dataItems = sortData(dataItems, sortK);
|
||||
let sumRev = 0, sumPay = 0, sumCost = 0, sumPaid = 0, sumGross = 0;
|
||||
const rows = [];
|
||||
allPfs.forEach(pf => {
|
||||
const t = calcTotals(pf);
|
||||
sumRev += t.rev; sumPay += t.payment; sumCost += t.cost; sumPaid += t.paid; sumGross += t.gross;
|
||||
rows.push(isUnsigned ? tdRowUnsigned(pf, t.cost, t.gross) : tdRow(pf, t.rev, t.payment, t.cost, t.paid, t.gross));
|
||||
dataItems.forEach(d => {
|
||||
sumRev += d.rev; sumPay += d.payment; sumCost += d.cost; sumPaid += d.paid; sumGross += d.gross;
|
||||
rows.push(isUnsigned ? tdRowUnsigned(d.pf, d.cost, d.gross) : tdRow(d.pf, d.rev, d.payment, d.cost, d.paid, d.gross));
|
||||
});
|
||||
const signTotal = Math.round(allPfs.reduce((a, p) => a + (p.sign_amount || 0), 0));
|
||||
const signCnt = allPfs.filter(x => x.status === "已签约").length;
|
||||
|
||||
1053
static/modules/plan.js
Normal file
1053
static/modules/plan.js
Normal file
File diff suppressed because it is too large
Load Diff
219
static/modules/plan_expense.js
Normal file
219
static/modules/plan_expense.js
Normal file
@@ -0,0 +1,219 @@
|
||||
// expense.js — 费用管理模块
|
||||
|
||||
function renderPlanExpense() {
|
||||
var records = state.data.planExpense || [];
|
||||
var money = function(v) { return '¥ ' + (Number(v || 0)).toLocaleString('zh-CN', { minimumFractionDigits: 0, maximumFractionDigits: 2 }); };
|
||||
var esc = function(s) { return (s || '').replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"'); };
|
||||
var EXPENSE_TYPES = ['通用费用','平台采购','人力成本','研发费用','奖金','其他'];
|
||||
var STATUS_OPTIONS = ['计入费用','暂不计入'];
|
||||
|
||||
// 排序状态
|
||||
if (!state.planExpSort) state.planExpSort = { key: 'expense_month', asc: true };
|
||||
var sortKey = state.planExpSort.key;
|
||||
var sortAsc = state.planExpSort.asc ? 1 : -1;
|
||||
|
||||
// 筛选状态
|
||||
var view = state.planExpView || 'total';
|
||||
var typeFilter = state.planExpFilter || '全部';
|
||||
var filtered = typeFilter === '全部' ? records : records.filter(function(r) { return r.expense_type === typeFilter; });
|
||||
|
||||
// 视图数据预处理
|
||||
var now = new Date();
|
||||
var thisYear = now.getFullYear();
|
||||
var defaultMonth = thisYear + '-' + String(now.getMonth() + 1).padStart(2, '0');
|
||||
|
||||
if (!state.planExpMonth) state.planExpMonth = defaultMonth;
|
||||
if (state.planExpQuarter === '') state.planExpQuarter = String(Math.floor(now.getMonth() / 3));
|
||||
|
||||
// 月度筛选
|
||||
if (view === 'monthly') {
|
||||
filtered = filtered.filter(function(r) { return r.expense_month === state.planExpMonth; });
|
||||
}
|
||||
|
||||
// 季度筛选
|
||||
if (view === 'quarterly') {
|
||||
var q = parseInt(state.planExpQuarter) || 0;
|
||||
var qRanges = [[1,2,3],[4,5,6],[7,8,9],[10,11,12]];
|
||||
var qRange = qRanges[q];
|
||||
filtered = filtered.filter(function(r) {
|
||||
var m = parseInt((r.expense_month || '0').substring(5)) || 0;
|
||||
return qRange.indexOf(m) >= 0;
|
||||
});
|
||||
}
|
||||
|
||||
// 排序
|
||||
filtered.sort(function(a, b) {
|
||||
var va = a[sortKey] || '', vb = b[sortKey] || '';
|
||||
if (sortKey === 'amount' || sortKey === 'incurred_amount') {
|
||||
va = parseFloat(va) || 0; vb = parseFloat(vb) || 0;
|
||||
}
|
||||
if (va < vb) return -1 * sortAsc;
|
||||
if (va > vb) return 1 * sortAsc;
|
||||
return 0;
|
||||
});
|
||||
|
||||
var totalAmount = filtered.reduce(function(s, r) { return s + (r.amount || 0); }, 0);
|
||||
var totalIncurred = filtered.reduce(function(s, r) { return s + (r.incurred_amount || 0); }, 0);
|
||||
|
||||
// 月份下拉选项（去年/今年/明年）
|
||||
var monthOpts = '';
|
||||
for (var yr = thisYear - 1; yr <= thisYear + 1; yr++)
|
||||
for (var m = 1; m <= 12; m++) {
|
||||
var mv = yr + '-' + String(m).padStart(2, '0');
|
||||
monthOpts += '<option value="' + mv + '">' + mv + '</option>';
|
||||
}
|
||||
|
||||
// 季度下拉
|
||||
var qLabels = ['Q1 (1-3月)','Q2 (4-6月)','Q3 (7-9月)','Q4 (10-12月)'];
|
||||
var quarterOpts = '';
|
||||
for (var qi = 0; qi < 4; qi++) {
|
||||
quarterOpts += '<option value="' + qi + '">' + qLabels[qi] + '</option>';
|
||||
}
|
||||
|
||||
// 月份/季度日期选择器
|
||||
var dateSelect = '';
|
||||
if (view === 'monthly') {
|
||||
dateSelect = '<span class="text-sm text-slate-500 ml-2">月份：</span><select onchange="setPlanExpMonth(this.value)" class="text-sm font-medium py-1 px-2.5 cursor-pointer" style="appearance:none;-webkit-appearance:none;background-color:transparent;border:0;outline:none;background:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%236b7280%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpolyline points=%226 9 12 15 18 9%22%3E%3C/polyline%3E%3C/svg%3E') no-repeat right 4px center;padding-right:22px;min-height:30px"><option value=""' + (!state.planExpMonth?' selected':'') + '>请选择</option>' + monthOpts.replace('value="' + state.planExpMonth + '"', 'value="' + state.planExpMonth + '" selected') + '</select>';
|
||||
} else if (view === 'quarterly') {
|
||||
dateSelect = '<span class="text-sm text-slate-500 ml-2">季度：</span><select onchange="setPlanExpQuarter(this.value)" class="text-sm font-medium py-1 px-2.5 cursor-pointer" style="appearance:none;-webkit-appearance:none;background-color:transparent;border:0;outline:none;background:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%236b7280%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpolyline points=%226 9 12 15 18 9%22%3E%3C/polyline%3E%3C/svg%3E') no-repeat right 4px center;padding-right:22px;min-height:30px">' + quarterOpts.replace('value="' + state.planExpQuarter + '"', 'value="' + state.planExpQuarter + '" selected') + '</select>';
|
||||
}
|
||||
|
||||
// Toolbar
|
||||
var toolbar = '<span class="text-sm text-slate-500">视图：</span><select onchange="setPlanExpView(this.value)" class="text-sm font-medium py-1 px-2.5 cursor-pointer" style="appearance:none;-webkit-appearance:none;background-color:transparent;border:0;outline:none;background:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%236b7280%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpolyline points=%226 9 12 15 18 9%22%3E%3C/polyline%3E%3C/svg%3E') no-repeat right 4px center;padding-right:22px;min-height:30px"><option value="total"' + (view==='total'?' selected':'') + '>总视图</option><option value="quarterly"' + (view==='quarterly'?' selected':'') + '>季度视图</option><option value="monthly"' + (view==='monthly'?' selected':'') + '>月度视图</option></select><span class="text-sm text-slate-500 ml-3">类型：</span><select onchange="setPlanExpFilter(this.value)" class="text-sm font-medium py-1 px-2.5 cursor-pointer" style="appearance:none;-webkit-appearance:none;background-color:transparent;border:0;outline:none;background:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%236b7280%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpolyline points=%226 9 12 15 18 9%22%3E%3C/polyline%3E%3C/svg%3E') no-repeat right 4px center;padding-right:22px;min-height:30px"><option value="全部"' + (typeFilter==='全部'?' selected':'') + '>全部 (' + records.length + ')</option>';
|
||||
EXPENSE_TYPES.forEach(function(t) {
|
||||
toolbar += '<option value="' + t + '"' + (typeFilter===t?' selected':'') + '>' + t + ' (' + records.filter(function(r){return r.expense_type===t}).length + ')</option>';
|
||||
});
|
||||
toolbar += '</select>' + dateSelect;
|
||||
|
||||
// 排序箭头
|
||||
var sortArrow = function(key) {
|
||||
var arrow = key === sortKey ? (sortAsc === 1 ? ' ↑' : ' ↓') : '';
|
||||
return '<span class="text-slate-400 text-xs cursor-pointer" onclick="togglePlanExpSort(\'' + key + '\')">' + arrow + '</span>';
|
||||
};
|
||||
|
||||
// 表格行
|
||||
var tableRows = '';
|
||||
if (filtered.length) {
|
||||
filtered.forEach(function(r) {
|
||||
var statusCls = r.status === '暂不计入' ? 'text-amber-600' : 'text-green-600';
|
||||
tableRows += '<tr class="border-b border-slate-100 hover:bg-slate-50 cursor-pointer" onclick="openPlanExpEdit(' + r.id + ')"><td class="p-2 text-center align-middle font-medium">' + (r.expense_month || '—') + '</td><td class="p-2 font-medium text-center align-middle">' + esc(r.expense_type) + '</td><td class="p-2 text-center align-middle font-semibold ' + statusCls + '">' + esc(r.status || '计入费用') + '</td><td class="p-2 text-center align-middle font-medium">' + money(r.amount) + '</td><td class="p-2 text-center align-middle font-medium">' + money(r.incurred_amount) + '</td><td class="p-2 text-center align-middle text-slate-500">' + (esc(r.notes) || '—') + '</td></tr>';
|
||||
});
|
||||
} else {
|
||||
var emptyMsg = view === 'monthly' ? '该月份暂无费用记录' : view === 'quarterly' ? '该季度暂无费用记录' : '暂无费用记录';
|
||||
tableRows = '<tr><td colspan="6" class="p-6 text-center text-slate-400">' + emptyMsg + '</td></tr>';
|
||||
}
|
||||
|
||||
// 模态框 monthOpts for form (with current value preselected)
|
||||
var modalMonthOpts = '<option value="">请选择</option>';
|
||||
for (var yr2 = thisYear - 1; yr2 <= thisYear + 1; yr2++)
|
||||
for (var m2 = 1; m2 <= 12; m2++) {
|
||||
var mv2 = yr2 + '-' + String(m2).padStart(2, '0');
|
||||
modalMonthOpts += '<option value="' + mv2 + '">' + mv2 + '</option>';
|
||||
}
|
||||
var statusOpts = STATUS_OPTIONS.map(function(s) { return '<option value="' + s + '">' + s + '</option>'; }).join('');
|
||||
|
||||
var modal = '<div id="planExpenseModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40" onclick="closePlanExpModal()"><div class="bg-white rounded-2xl shadow-2xl w-full max-w-lg mx-4" onclick="event.stopPropagation()"><div class="sticky top-0 z-10 bg-white/95 backdrop-blur border-b border-slate-100 px-6 py-4 flex items-center justify-between"><h3 class="text-lg font-bold text-slate-800" id="planExpenseModalTitle">新增费用</h3><div class="flex items-center gap-2"><button class="btn btn-ghost btn-sm text-red-600 hidden" id="planExpDeleteBtn" onclick="deletePlanExpItem()">删除</button><button class="btn btn-ghost btn-sm rounded-full w-8 h-8 p-0" onclick="closePlanExpModal()"><i data-lucide="x"></i></button></div></div><form onsubmit="savePlanExpense(event)" class="p-6 grid gap-4" novalidate><input type="hidden" name="expense_id" value=""><div class="grid grid-cols-2 gap-3"><label class="block"><span class="text-sm text-slate-500 mb-1 block">费用类型 <span class="text-red-500">*</span></span><select name="expense_type" required class="form-ctrl bg-white"><option value="">请选择</option>';
|
||||
EXPENSE_TYPES.forEach(function(t) { modal += '<option>' + t + '</option>'; });
|
||||
modal += '</select></label><label class="block"><span class="text-sm text-slate-500 mb-1 block">月份 <span class="text-red-500">*</span></span><select name="expense_month" required class="form-ctrl bg-white">' + modalMonthOpts + '</select></label></div><div class="grid grid-cols-2 gap-3"><label class="block"><span class="text-sm text-slate-500 mb-1 block">金额（元）</span><input name="amount" type="number" step="0.01" class="form-ctrl" placeholder="0.00"></label><label class="block"><span class="text-sm text-slate-500 mb-1 block">已发生金额（元）</span><input name="incurred_amount" type="number" step="0.01" class="form-ctrl" placeholder="0.00"></label></div><label class="block"><span class="text-sm text-slate-500 mb-1 block">状态</span><select name="status" class="form-ctrl bg-white">' + statusOpts + '</select></label><label class="block"><span class="text-sm text-slate-500 mb-1 block">费用说明</span><textarea name="notes" class="form-ctrl" rows="3" placeholder="备注信息"></textarea></label><div class="flex justify-end gap-3 pt-2"><button type="button" class="btn btn-ghost btn-sm px-6" onclick="closePlanExpModal()">取消</button><button type="submit" class="btn btn-primary btn-sm px-8">保存</button></div></form></div></div>';
|
||||
|
||||
var target = document.querySelector("#planExpenseModule") || document.querySelector("#planExpenseModule") || document.querySelector("#planExpenseContent");
|
||||
if (!target) return;
|
||||
target.innerHTML = '<div class="grid gap-4">' +
|
||||
'<div class="card p-3"><div class="flex justify-between items-center"><div class="flex items-center gap-2">' + toolbar + '</div><button class="btn btn-primary btn-sm" onclick="openPlanExpModal()">新增费用</button></div></div>' +
|
||||
'<div class="grid grid-cols-3 gap-3">' +
|
||||
'<div class="metric-card p-3"><span class="flex items-center gap-2 text-sm text-slate-500">费用记录</span><strong class="mt-2 block text-xl">' + filtered.length + '</strong></div>' +
|
||||
'<div class="metric-card p-3"><span class="flex items-center gap-2 text-sm text-slate-500">总费用</span><strong class="mt-2 block text-xl">' + money(totalAmount) + '</strong></div>' +
|
||||
'<div class="metric-card p-3"><span class="flex items-center gap-2 text-sm text-slate-500">已发生金额</span><strong class="mt-2 block text-xl">' + money(totalIncurred) + '</strong></div>' +
|
||||
'</div>' +
|
||||
modal +
|
||||
'<div class="card p-4"><div class="overflow-x-auto"><table class="w-full text-sm"><thead><tr class="bg-slate-50 border-b border-slate-200"><th class="p-2 text-center font-semibold cursor-pointer select-none" onclick="togglePlanExpSort(\'expense_month\')">月份' + sortArrow('expense_month') + '</th><th class="p-2 text-center font-semibold cursor-pointer select-none" onclick="togglePlanExpSort(\'expense_type\')">费用类型' + sortArrow('expense_type') + '</th><th class="p-2 text-center font-semibold cursor-pointer select-none" onclick="togglePlanExpSort(\'status\')">状态' + sortArrow('status') + '</th><th class="p-2 text-center font-semibold cursor-pointer select-none" onclick="togglePlanExpSort(\'amount\')">金额' + sortArrow('amount') + '</th><th class="p-2 text-center font-semibold cursor-pointer select-none" onclick="togglePlanExpSort(\'incurred_amount\')">已发生金额' + sortArrow('incurred_amount') + '</th><th class="p-2 text-center font-semibold">费用说明</th></tr></thead><tbody>' + tableRows + '</tbody></table></div></div>' +
|
||||
'</div>';
|
||||
|
||||
if (window.lucide) window.lucide.createIcons();
|
||||
}
|
||||
|
||||
window.togglePlanExpSort = function(key) {
|
||||
var cur = state.planExpSort || {};
|
||||
if (cur.key === key) { cur.asc = !cur.asc; }
|
||||
else { cur.key = key; cur.asc = true; }
|
||||
state.planExpSort = cur;
|
||||
renderPlanExpense();
|
||||
};
|
||||
|
||||
window.setPlanExpView = function(v) { state.planExpView = v; renderPlanExpense(); };
|
||||
window.setPlanExpFilter = function(v) { state.planExpFilter = v; renderPlanExpense(); };
|
||||
window.setPlanExpMonth = function(v) { state.planExpMonth = v; renderPlanExpense(); };
|
||||
window.setPlanExpQuarter = function(v) { state.planExpQuarter = v; renderPlanExpense(); };
|
||||
|
||||
window.openPlanExpModal = function() {
|
||||
var form = document.querySelector("#planExpenseModal form");
|
||||
form.reset();
|
||||
form.querySelector('[name="expense_id"]').value = "";
|
||||
form.querySelector('[name="status"]').value = "计入费用";
|
||||
document.querySelector("#planExpenseModalTitle").textContent = "新增费用";
|
||||
document.querySelector("#planExpDeleteBtn").classList.add("hidden");
|
||||
document.querySelector("#planExpenseModal").classList.remove("hidden");
|
||||
};
|
||||
|
||||
window.closePlanExpModal = function() {
|
||||
document.querySelector("#planExpenseModal").classList.add("hidden");
|
||||
};
|
||||
|
||||
window.openPlanExpEdit = function(id) {
|
||||
var r = (state.data.planExpense || []).find(function(x) { return x.id === id; });
|
||||
if (!r) return;
|
||||
var form = document.querySelector("#planExpenseModal form");
|
||||
form.reset();
|
||||
var setVal = function(name, val) { var el = form.querySelector('[name="' + name + '"]'); if (el) el.value = val || ""; };
|
||||
setVal("expense_id", r.id);
|
||||
setVal("expense_type", r.expense_type);
|
||||
setVal("expense_month", r.expense_month);
|
||||
setVal("amount", r.amount);
|
||||
setVal("incurred_amount", r.incurred_amount);
|
||||
setVal("notes", r.notes);
|
||||
setVal("status", r.status || "计入费用");
|
||||
document.querySelector("#planExpenseModalTitle").textContent = "编辑费用";
|
||||
document.querySelector("#planExpDeleteBtn").classList.remove("hidden");
|
||||
document.querySelector("#planExpenseModal").classList.remove("hidden");
|
||||
};
|
||||
|
||||
window.savePlanExpense = async function(event) {
|
||||
event.preventDefault();
|
||||
var form = event.target;
|
||||
var data = Object.fromEntries(new FormData(form).entries());
|
||||
if (data.amount === '' || data.amount === undefined) data.amount = 0;
|
||||
if (data.incurred_amount === '' || data.incurred_amount === undefined) data.incurred_amount = 0;
|
||||
if (!data.status) data.status = '计入费用';
|
||||
var isEdit = !!data.expense_id;
|
||||
delete data.expense_id;
|
||||
|
||||
var id = form.querySelector('[name="expense_id"]').value;
|
||||
var url = isEdit ? "/api/planExpense/" + id : "/api/planExpense";
|
||||
var method = isEdit ? "PUT" : "POST";
|
||||
|
||||
var resp = await fetch(url, { method: method, headers: { "Content-Type": "application/json" }, body: JSON.stringify({ data: Object.assign({}, data, { tenant: state.tenant }) }) });
|
||||
if (!resp.ok) { var err = await resp.text(); alert("保存失败：" + err); return; }
|
||||
|
||||
var bResp = await fetch("/api/bootstrap?tenant=" + encodeURIComponent(state.tenant));
|
||||
if (bResp.ok) {
|
||||
var bd = await bResp.json();
|
||||
state.data = bd;
|
||||
applyUserTenants();
|
||||
renderPlanExpense();
|
||||
}
|
||||
closePlanExpModal();
|
||||
};
|
||||
|
||||
window.deletePlanExpItem = async function() {
|
||||
var id = document.querySelector("#planExpenseModal form [name='expense_id']").value;
|
||||
if (!id || !confirm("确定删除？")) return;
|
||||
var resp = await fetch("/api/planExpense/" + id, { method: "DELETE" });
|
||||
if (!resp.ok) { alert("删除失败"); return; }
|
||||
var bResp = await fetch("/api/bootstrap?tenant=" + encodeURIComponent(state.tenant));
|
||||
if (bResp.ok) {
|
||||
var bd = await bResp.json();
|
||||
state.data = bd;
|
||||
applyUserTenants();
|
||||
renderPlanExpense();
|
||||
}
|
||||
};
|
||||
@@ -10,6 +10,10 @@ const state = {
|
||||
taskQuery: "",
|
||||
taskView: localStorage.getItem("opc-task-view") || "detail",
|
||||
finView: "overview",
|
||||
finSort: null, // { key: 'col', asc: true }
|
||||
planFilter: "已签约",
|
||||
planView: "overview",
|
||||
planSort: null,
|
||||
proposalTab: "standard",
|
||||
chart: null,
|
||||
chart2: null,
|
||||
@@ -132,7 +136,7 @@ function switchTab(tab) {
|
||||
document.querySelectorAll(".panel").forEach((panel) => panel.classList.toggle("active", panel.id === tab));
|
||||
|
||||
// 更新顶部标题
|
||||
const titles = { home: 'OPC 工作台', finance: '业务管理', projects: '重点工作台账', proposals: '业务方案', products: '版本与运营', performance: '季度绩效考核' };
|
||||
const titles = { home: 'OPC 工作台', finance: '业务管理', plan: '计划管理', projects: '重点工作台账', proposals: '业务方案', products: '版本与运营', performance: '季度绩效考核' };
|
||||
const titleEl = document.querySelector('#workspaceTitle');
|
||||
if (titleEl) titleEl.textContent = titles[tab] || state.tenant + ' OPC 工作台';
|
||||
|
||||
@@ -159,6 +163,7 @@ function render() {
|
||||
renderProducts();
|
||||
renderPerformance();
|
||||
renderFinance();
|
||||
renderPlan();
|
||||
if (window.lucide) window.lucide.createIcons();
|
||||
}
|
||||
|
||||
@@ -171,6 +176,7 @@ function renderActive() {
|
||||
else if (tab === "products") renderProducts();
|
||||
else if (tab === "performance") renderPerformance();
|
||||
else if (tab === "finance") renderFinance();
|
||||
else if (tab === "plan") renderPlan();
|
||||
if (window.lucide) window.lucide.createIcons();
|
||||
}
|
||||
|
||||
@@ -200,8 +206,31 @@ window.setFinView = (view) => {
|
||||
};
|
||||
window.switchFinFilter = (filter) => {
|
||||
state.finFilter = filter;
|
||||
state.finSort = null;
|
||||
renderFinance();
|
||||
};
|
||||
|
||||
window.setFinSort = (key) => {
|
||||
if (!state.finSort) state.finSort = { key: null, asc: true };
|
||||
if (state.finSort.key === key) { state.finSort.asc = !state.finSort.asc; }
|
||||
else { state.finSort.key = key; state.finSort.asc = true; }
|
||||
renderFinance();
|
||||
};
|
||||
window.setPlanView = (view) => {
|
||||
state.planView = view;
|
||||
renderPlan();
|
||||
};
|
||||
window.switchPlanFilter = (filter) => {
|
||||
state.planFilter = filter;
|
||||
state.planSort = null;
|
||||
renderPlan();
|
||||
};
|
||||
window.setPlanSort = (key) => {
|
||||
if (!state.planSort) state.planSort = { key: null, asc: true };
|
||||
if (state.planSort.key === key) { state.planSort.asc = !state.planSort.asc; }
|
||||
else { state.planSort.key = key; state.planSort.asc = true; }
|
||||
renderPlan();
|
||||
};
|
||||
window.switchTenant = (tenant) => {
|
||||
state.tenant = tenant;
|
||||
state.selectedProject = null;
|
||||
|
||||
Reference in New Issue
Block a user