/* ============================================================
page-settle.jsx — 结算中心（行级存储版）
每条记录独立一行，并发安全，操作直接读写 settle_out / settle_in 表
============================================================ */
const S_TH = { padding: "8px 10px", textAlign: "left", fontWeight: 600, fontSize: 11.5, color: "var(--ink-2)", whiteSpace: "nowrap", background: "var(--bg-2)" };
const S_TD = { padding: "0 10px", height: 44, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", maxWidth: 0, verticalAlign: "middle", fontSize: 12.5 };
const PAYER_OPTS = ["深圳不鸣", "沈阳不鸣", "幕后玩家", "深圳业鱼", "业鱼", "惊人"];
const RECEIVER_OPTS = ["深圳不鸣", "沈阳不鸣", "幕后玩家", "深圳业鱼", "业鱼", "惊人"];
const OVERALL_COLOR = { "已完成":"var(--ink-4)", "待打款":"#2563eb", "待开票":"#d97706", "待盖章":"#d97706", "待确认":"var(--vermilion)" };
/* ── 单行状态下拉 ── */
function StatusCell({ val, opts, onSave }) {
const { editing } = useEditMode();
const done = val && val.startsWith("已");
return (
|
{editing ? (
) : {val||opts[0]}}
|
);
}
/* ── 下拉选择格 ── */
function SelectCell({ val, opts, onSave, placeholder }) {
const { editing } = useEditMode();
return (
{editing ? (
) : {val||"—"}}
|
);
}
/* ── 文件附件格（Supabase Storage + 外链）── */
function FileCell({ val, onSave, rowId, fkey }) {
const { editing } = useEditMode();
const [uploading, setUploading] = useState(false);
const [pct, setPct] = useState(0);
const inputId = `sf-${rowId}-${fkey}`;
const parsed = !val ? null : (typeof val==="object" ? val : { name: val });
const href = parsed?.url || parsed?.external_url;
const onPick = async (e) => {
const f = e.target.files?.[0]; if (!f) return;
if (f.size > 209715200) { alert("文件超过 200 MB"); e.target.value=""; return; }
setUploading(true); setPct(20);
try {
const stem = f.name.replace(/[^A-Za-z0-9_\-\.]/g,"_").slice(0,60)||"file";
const path = `settle/${rowId}_${Date.now()}_${stem}`;
setPct(40);
const { error } = await _sb.storage.from("manju-files").upload(path, f, { upsert:false });
if (error) throw new Error(error.message);
setPct(80);
const { data:pub } = _sb.storage.from("manju-files").getPublicUrl(path);
onSave({ name:f.name, storage_path:path, url:pub.publicUrl, size:f.size });
setPct(100);
} catch(err) { alert("上传失败: "+(err.message||"请重试")); }
finally { setUploading(false); setPct(0); e.target.value=""; }
};
const pasteLink = () => {
const url = prompt("粘贴飞书/网盘链接"); if (!url) return;
const name = prompt("文件名称（可空）")||url.split("/").pop().split("?")[0]||"对账文件";
onSave({ name, external_url:url });
};
if (!editing) {
if (!parsed) return — | ;
return
{href ?
↗ {parsed.name||"查看"}
: {parsed.name||"—"}}
| ;
}
return (
{uploading ? (
) : href ? (
↗ {parsed.name}
) : (
{parsed?.name && {parsed.name}}
)}
|
);
}
/* ── 可编辑文本格（直接保存行）── */
function TextCell({ val, onSave, placeholder, mono }) {
const { editing } = useEditMode();
const [draft, setDraft] = useState(val||"");
useEffect(() => { setDraft(val||""); }, [val]);
if (!editing) return {val||"—"} | ;
return (
setDraft(e.target.value)}
onBlur={() => { if (draft !== (val||"")) onSave(draft); }}
onKeyDown={e => { if (e.key==="Enter") { e.target.blur(); } }}
placeholder={placeholder||"—"}
style={{ width:"100%", background:"transparent", border:"none", outline:"none",
fontSize:12.5, fontFamily:mono?"var(--font-mono)":undefined, color:"var(--ink-1)" }}/>
|
);
}
/* ══════════════════════════════════════════════════════════════
主页面
══════════════════════════════════════════════════════════════ */
function PageSettle() {
const { editing } = useEditMode();
const [tab, setTab] = useState("out");
const [rows, setRows] = useState([]);
const [loading, setLoading] = useState(true);
const [monthFilter, setMF] = useState("__all__");
const [holderFilter, setHF] = useState("__all__");
const [statusFilter, setSF] = useState("__all__");
const table = tab === "out" ? "settle_out" : "settle_in";
const publisherOpts = useMemo(() => {
const seedNames = (window.__SEED__?.PUBLISHERS||[]).map(p=>p.name).filter(Boolean);
// 合并种子名称 + 数据库中实际存在的值（防止名称不一致导致下拉显示占位符）
const extra = ["看点"]; // 飞书原始数据用"看点"，种子用"看点短篇"
return [...new Set([...extra, ...seedNames])].sort();
}, []);
/* 拉全表 */
const load = useCallback(async () => {
setLoading(true);
const { data, error } = await _sb.from(table).select("*").order("month", { ascending:false });
if (!error && data) setRows(data);
setLoading(false);
}, [table]);
useEffect(() => { load(); }, [load]);
/* 保存单个字段 */
const saveField = async (id, field, value) => {
// 乐观更新
setRows(prev => prev.map(r => r.id===id ? { ...r, [field]:value, updated_at:new Date().toISOString() } : r));
const { error } = await _sb.from(table).update({ [field]:value, updated_at:new Date().toISOString() }).eq("id", id);
if (error) { alert("保存失败: "+error.message); load(); }
};
/* 新增行 */
const addRow = async () => {
const blank = tab==="out"
? { id:`so-${Date.now()}`, month:"", holder:"", amount:null, s_confirm:"待确认", s_seal:"待盖章", s_invoice:"待开票", s_payment:"待打款", payer:"", invoice_file:null, reconcile_file:null, note:"" }
: { id:`si-${Date.now()}`, month:"", holder:"", amount:null, s_confirm:"待确认", s_invoice:"待开票", s_payment:"待打款", receiver:"", reconcile_file:null, note:"" };
const { error } = await _sb.from(table).insert(blank);
if (error) { alert("新增失败: "+error.message); return; }
setRows(prev => [blank, ...prev]);
};
/* 删除行 */
const delRow = async (id) => {
if (!confirm("确认删除？")) return;
const { error } = await _sb.from(table).delete().eq("id", id);
if (error) { alert("删除失败: "+error.message); return; }
setRows(prev => prev.filter(r => r.id!==id));
};
const getStatus = (r) => {
if (tab==="out") {
if (r.s_payment==="已打款") return "已完成";
if (r.s_invoice==="已开票") return "待打款";
if (r.s_seal ==="已盖章") return "待开票";
if (r.s_confirm==="已确认") return "待盖章";
return "待确认";
} else {
if (r.s_payment==="已打款") return "已完成";
if (r.s_invoice==="已开票") return "待打款";
if (r.s_confirm==="已确认") return "待开票";
return "待确认";
}
};
const months = [...new Set(rows.map(r=>r.month).filter(Boolean))].sort().reverse();
const holders = [...new Set(rows.map(r=>r.holder).filter(Boolean))].sort();
const visible = rows.filter(r =>
(monthFilter ==="__all__"||r.month ===monthFilter) &&
(holderFilter==="__all__"||r.holder===holderFilter) &&
(statusFilter==="__all__"||getStatus(r)===statusFilter)
);
const totalAmt = visible.reduce((s,r) => s+(parseFloat(r.amount)||0), 0);
const tabBtn = (id, label, sub) => (
);
const sel = (val, setter, opts, ph) => (
);
return (
<>
{tabBtn("out","支出结算","我们付 → 版权方")}
{tabBtn("in", "收入结算","版权方付 → 我们")}
{sel(monthFilter, setMF, months, "全部月份")}
{sel(holderFilter, setHF, holders, "全部版权方")}
{sel(statusFilter, setSF, ["待确认","待盖章","待开票","待打款","已完成"], "全部状态")}
{loading && 加载中…}
{!loading && {visible.length} 条}
{visible.length>0 && (
合计 ¥{totalAmt.toLocaleString("zh-CN",{minimumFractionDigits:2,maximumFractionDigits:2})}
)}
{tab==="out" ? <>
: <>
}
{editing&&}
| 月份 |
版权方 |
金额 |
{tab==="out" ? <>
版权方确认 |
结算单盖章 |
版权方开票 |
我们打款 |
打款主体 |
对账表 |
发票文件 |
: <>
我们确认 |
我们开票 |
版权方打款 |
收款主体 |
对账表 |
}
进度 |
备注 |
{editing&& | }
{!loading && visible.length===0 && (
|
暂无结算记录{editing?" · 点击下方「新增记录」":""}
|
)}
{visible.map(r => {
const sv = (field, val) => saveField(r.id, field, val);
const overall = getStatus(r);
return (
sv("month",v)} placeholder="2025-08" />
sv("holder",v)} placeholder="版权方" />
sv("amount",v?parseFloat(v):null)} placeholder="0.00" mono />
{tab==="out" ? <>
sv("s_confirm",v)} />
sv("s_seal",v)} />
sv("s_invoice",v)} />
sv("s_payment",v)} />
sv("payer",v)} placeholder="打款主体" />
sv("reconcile_file",v)} rowId={r.id} fkey="rec" />
sv("invoice_file",v)} rowId={r.id} fkey="inv" />
: <>
sv("s_confirm",v)} />
sv("s_invoice",v)} />
sv("s_payment",v)} />
sv("receiver",v)} placeholder="收款主体" />
sv("reconcile_file",v)} rowId={r.id} fkey="rec" />
}
|
{overall}
|
sv("note",v)} placeholder="—" />
{editing && (
|
)}
);
})}
{editing && (
)}
);
}
Object.assign(window, { PageSettle });