docs(design): 原型同步（草稿 KPI 4 卡+warn 色登记、抽屉列/去¥、库存总价列演示数据重算）
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JJ1g8XV1YhhmHRzhwWEW7o
This commit is contained in:
wangjia
@@ -101,12 +101,14 @@ svg{fill:none; stroke:currentColor;}
|
||||
.kpi .t{font-size:var(--fs-sm); color:var(--muted);}
|
||||
.kpi .v{font-size:24px; font-weight:700; color:var(--heading); margin-top:7px; letter-spacing:.3px; font-family:var(--font-mono);}
|
||||
.kpi.alert .v{color:var(--accent);}
|
||||
.kpi.warn .v{color:var(--warn);}
|
||||
.kpi .d{font-size:var(--fs-xs); margin-top:5px; display:inline-flex; align-items:center; gap:4px;}
|
||||
.up{color:var(--success);} .down{color:var(--danger);}
|
||||
.ic{width:30px; height:30px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; float:right; margin-top:-2px;}
|
||||
.ic svg{width:17px; height:17px; stroke-width:1.8;}
|
||||
.ic-info{background:var(--info-soft); color:var(--primary);} .ic-ok{background:var(--ok-soft); color:var(--success);}
|
||||
.ic-blue{background:var(--info-soft); color:var(--brand400);} .ic-alert{background:var(--accent-soft); color:var(--accent);}
|
||||
.ic-warn{background:var(--warn-bg); color:var(--warn);} /* 暗黄（草稿类 KPI） */
|
||||
|
||||
/* ---- 表格 ---- */
|
||||
.table{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; transition:background-color .28s,border-color .28s;}
|
||||
|
||||
@@ -382,6 +382,7 @@
|
||||
<div class="pcard"><div class="pcard-h"><h3>KPI 卡</h3><span class="tk">.kpi</span></div><div class="pcard-b">
|
||||
<div class="kpi" style="width:200px"><div class="ic ic-info"><svg viewBox="0 0 24 24"><use href="#i-box"/></svg></div><div class="t">SKU 总数</div><div class="v">1,284</div><div class="d up">▲ 2.3%</div></div>
|
||||
<div class="kpi alert" style="width:200px"><div class="ic ic-alert"><svg viewBox="0 0 24 24"><use href="#i-ic18"/></svg></div><div class="t">缺货预警</div><div class="v">17</div><div class="d down">需补货 6 项</div></div>
|
||||
<div class="kpi warn" style="width:200px"><div class="ic ic-warn"><svg viewBox="0 0 24 24"><use href="#i-ic06"/></svg></div><div class="t">草稿单数</div><div class="v">2</div><div class="d">待提交审核</div></div>
|
||||
</div></div>
|
||||
<div class="pcard"><div class="pcard-h"><h3>表格行</h3><span class="tk">.table thead/tbody</span></div><div class="pcard-b" style="display:block">
|
||||
<div class="table"><table><thead><tr><th>商品</th><th>分类</th><th class="num">库存</th><th><span class="fh filtered">状态 <svg class="funnel" viewBox="0 0 24 24"><use href="#i-ic68"/></svg></span></th></tr></thead><tbody>
|
||||
|
||||
@@ -99,21 +99,21 @@
|
||||
<script src="shell.js"></script>
|
||||
<script>
|
||||
const ITEMS=[
|
||||
{name:'茅台 飞天 53°',code:'MT-FT-500',spec:'500ml×6',series:'飞天',batch:'PZ240711',cat:'酱香',qty:128,unit:'件',cost:'¥2,680',price:'¥2680.00',prodDate:'2024-07-11',inDate:'2026-06-14',supplier:'贵州茅台经销',value:'¥34.3万',status:'在售'},
|
||||
{name:'五粮液 普五 52°',code:'WLY-PW-500',spec:'500ml×6',series:'普五',batch:'PZ240428',cat:'浓香',qty:64,unit:'件',cost:'¥1,050',price:'¥1050.00',prodDate:'2024-04-28',inDate:'2026-06-14',supplier:'宜宾五粮液',value:'¥6.7万',status:'在售'},
|
||||
{name:'剑南春 水晶剑',code:'JNC-SJ-500',spec:'500ml×6',series:'水晶剑',batch:'PZ231115',cat:'浓香',qty:8,unit:'件',cost:'¥438',price:'¥438.00',prodDate:'2023-11-15',inDate:'2026-06-12',supplier:'绵竹剑南春',value:'¥3,500',status:'缺货'},
|
||||
{name:'国窖 1573',code:'GJ-1573-500',spec:'500ml×6',series:'1573',batch:'PZ240208',cat:'浓香',qty:42,unit:'件',cost:'¥980',price:'¥980.00',prodDate:'2024-02-08',inDate:'2026-06-10',supplier:'泸州老窖',value:'¥4.1万',status:'在售'},
|
||||
{name:'洋河 梦之蓝 M6',code:'YH-M6-500',spec:'500ml×6',series:'梦之蓝M6',batch:'PZ240520',cat:'绵柔',qty:23,unit:'件',cost:'¥620',price:'¥620.00',prodDate:'2024-05-20',inDate:'2026-06-09',supplier:'洋河股份',value:'¥1.4万',status:'预警'},
|
||||
{name:'泸州老窖 特曲',code:'LZLJ-TQ-500',spec:'500ml×6',series:'特曲',batch:'PZ240630',cat:'浓香',qty:156,unit:'件',cost:'¥320',price:'¥320.00',prodDate:'2024-06-30',inDate:'2026-06-08',supplier:'泸州老窖',value:'¥5万',status:'在售'},
|
||||
{name:'习酒 窖藏 1988',code:'XJ-JC1988',spec:'500ml×6',series:'窖藏1988',batch:'PZ230918',cat:'酱香',qty:31,unit:'件',cost:'¥760',price:'¥760.00',prodDate:'2023-09-18',inDate:'2026-06-05',supplier:'贵州习酒',value:'¥2.4万',status:'在售'},
|
||||
{name:'汾酒 青花 20',code:'FJ-QH20-500',spec:'500ml×6',series:'青花20',batch:'PZ240112',cat:'清香',qty:0,unit:'件',cost:'¥420',price:'¥420.00',prodDate:'2024-01-12',inDate:'2026-06-03',supplier:'山西杏花村',value:'¥0',status:'缺货'},
|
||||
{name:'郎酒 红花郎 15',code:'LJ-HHL15',spec:'500ml×6',series:'红花郎15',batch:'PZ240325',cat:'酱香',qty:54,unit:'件',cost:'¥560',price:'¥560.00',prodDate:'2024-03-25',inDate:'2026-06-01',supplier:'四川郎酒',value:'¥3万',status:'在售'},
|
||||
{name:'古井贡 年份原浆',code:'GJG-NF-500',spec:'500ml×6',series:'年份原浆',batch:'PZ240802',cat:'浓香',qty:12,unit:'件',cost:'¥390',price:'¥390.00',prodDate:'2024-08-02',inDate:'2026-05-28',supplier:'古井贡酒',value:'¥4,700',status:'预警'},
|
||||
{name:'西凤酒 旗舰版',code:'XF-QJ-500',spec:'500ml×6',series:'旗舰版',batch:'PZ240614',cat:'凤香',qty:88,unit:'件',cost:'¥280',price:'¥280.00',prodDate:'2024-06-14',inDate:'2026-05-25',supplier:'陕西西凤',value:'¥2.5万',status:'在售'},
|
||||
{name:'水井坊 井台',code:'SJF-JT-500',spec:'500ml×6',series:'井台',batch:'PZ231209',cat:'浓香',qty:6,unit:'件',cost:'¥680',price:'¥680.00',prodDate:'2023-12-09',inDate:'2026-05-20',supplier:'四川水井坊',value:'¥4,100',status:'缺货'},
|
||||
{name:'茅台 飞天 53°',code:'MT-FT-500',spec:'500ml×6',series:'飞天',batch:'PZ240711',cat:'酱香',qty:128,unit:'件',cost:'¥2,680',price:'¥343,040',prodDate:'2024-07-11',inDate:'2026-06-14',supplier:'贵州茅台经销',value:'¥34.3万',status:'在售'},
|
||||
{name:'五粮液 普五 52°',code:'WLY-PW-500',spec:'500ml×6',series:'普五',batch:'PZ240428',cat:'浓香',qty:64,unit:'件',cost:'¥1,050',price:'¥67,200',prodDate:'2024-04-28',inDate:'2026-06-14',supplier:'宜宾五粮液',value:'¥6.7万',status:'在售'},
|
||||
{name:'剑南春 水晶剑',code:'JNC-SJ-500',spec:'500ml×6',series:'水晶剑',batch:'PZ231115',cat:'浓香',qty:8,unit:'件',cost:'¥438',price:'¥3,504',prodDate:'2023-11-15',inDate:'2026-06-12',supplier:'绵竹剑南春',value:'¥3,500',status:'缺货'},
|
||||
{name:'国窖 1573',code:'GJ-1573-500',spec:'500ml×6',series:'1573',batch:'PZ240208',cat:'浓香',qty:42,unit:'件',cost:'¥980',price:'¥41,160',prodDate:'2024-02-08',inDate:'2026-06-10',supplier:'泸州老窖',value:'¥4.1万',status:'在售'},
|
||||
{name:'洋河 梦之蓝 M6',code:'YH-M6-500',spec:'500ml×6',series:'梦之蓝M6',batch:'PZ240520',cat:'绵柔',qty:23,unit:'件',cost:'¥620',price:'¥14,260',prodDate:'2024-05-20',inDate:'2026-06-09',supplier:'洋河股份',value:'¥1.4万',status:'预警'},
|
||||
{name:'泸州老窖 特曲',code:'LZLJ-TQ-500',spec:'500ml×6',series:'特曲',batch:'PZ240630',cat:'浓香',qty:156,unit:'件',cost:'¥320',price:'¥49,920',prodDate:'2024-06-30',inDate:'2026-06-08',supplier:'泸州老窖',value:'¥5万',status:'在售'},
|
||||
{name:'习酒 窖藏 1988',code:'XJ-JC1988',spec:'500ml×6',series:'窖藏1988',batch:'PZ230918',cat:'酱香',qty:31,unit:'件',cost:'¥760',price:'¥23,560',prodDate:'2023-09-18',inDate:'2026-06-05',supplier:'贵州习酒',value:'¥2.4万',status:'在售'},
|
||||
{name:'汾酒 青花 20',code:'FJ-QH20-500',spec:'500ml×6',series:'青花20',batch:'PZ240112',cat:'清香',qty:0,unit:'件',cost:'¥420',price:'¥0',prodDate:'2024-01-12',inDate:'2026-06-03',supplier:'山西杏花村',value:'¥0',status:'缺货'},
|
||||
{name:'郎酒 红花郎 15',code:'LJ-HHL15',spec:'500ml×6',series:'红花郎15',batch:'PZ240325',cat:'酱香',qty:54,unit:'件',cost:'¥560',price:'¥30,240',prodDate:'2024-03-25',inDate:'2026-06-01',supplier:'四川郎酒',value:'¥3万',status:'在售'},
|
||||
{name:'古井贡 年份原浆',code:'GJG-NF-500',spec:'500ml×6',series:'年份原浆',batch:'PZ240802',cat:'浓香',qty:12,unit:'件',cost:'¥390',price:'¥4,680',prodDate:'2024-08-02',inDate:'2026-05-28',supplier:'古井贡酒',value:'¥4,700',status:'预警'},
|
||||
{name:'西凤酒 旗舰版',code:'XF-QJ-500',spec:'500ml×6',series:'旗舰版',batch:'PZ240614',cat:'凤香',qty:88,unit:'件',cost:'¥280',price:'¥24,640',prodDate:'2024-06-14',inDate:'2026-05-25',supplier:'陕西西凤',value:'¥2.5万',status:'在售'},
|
||||
{name:'水井坊 井台',code:'SJF-JT-500',spec:'500ml×6',series:'井台',batch:'PZ231209',cat:'浓香',qty:6,unit:'件',cost:'¥680',price:'¥4,080',prodDate:'2023-12-09',inDate:'2026-05-20',supplier:'四川水井坊',value:'¥4,100',status:'缺货'},
|
||||
];
|
||||
const STATUS=['全部','在售','预警','缺货'];
|
||||
const COLS=[{key:'product',label:'商品',fixed:true},{key:'spec',label:'规格'},{key:'series',label:'系列'},{key:'batch',label:'批次号'},{key:'qty',label:'库存',num:true},{key:'cost',label:'成本价',num:true},{key:'price',label:'单价',num:true},{key:'prodDate',label:'生产日期'},{key:'inDate',label:'入库时间'},{key:'supplier',label:'供应商'},{key:'status',label:'状态',filter:'status'},{key:'act',label:'操作',fixed:true}];
|
||||
const COLS=[{key:'product',label:'商品',fixed:true},{key:'spec',label:'规格'},{key:'series',label:'系列'},{key:'batch',label:'批次号'},{key:'qty',label:'库存',num:true},{key:'cost',label:'成本价',num:true},{key:'price',label:'总价',num:true},{key:'prodDate',label:'生产日期'},{key:'inDate',label:'入库时间'},{key:'supplier',label:'供应商'},{key:'status',label:'状态',filter:'status'},{key:'act',label:'操作',fixed:true}];
|
||||
const state={q:'',code:'',status:'全部',page:1,perPage:10,hidden:new Set()};
|
||||
|
||||
function setActive(k){ document.querySelectorAll('.nav[data-k]').forEach(e=>e.classList.toggle('active',e.dataset.k===k)); }
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
.head h1{margin:0; font-size:var(--fs-h1); font-weight:700; color:var(--title); letter-spacing:.3px;}
|
||||
.head .sub{font-size:var(--fs-sm); color:var(--muted); margin-bottom:2px;}
|
||||
.head .actions{margin-left:auto; display:flex; gap:10px;}
|
||||
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px;}
|
||||
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px;}
|
||||
.toolbar{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-bottom:none; border-radius:var(--r-lg) var(--r-lg) 0 0; padding:12px 14px; flex-wrap:wrap; transition:background-color .28s,border-color .28s;}
|
||||
.toolbar .searchbox{width:260px;}
|
||||
.toolbar .daterange{display:flex; align-items:center; gap:6px; height:34px; padding:0 11px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); font-size:var(--fs-sm); color:var(--text); cursor:pointer;}
|
||||
@@ -58,6 +58,7 @@
|
||||
<div class="kpi"><div class="ic ic-info"><svg viewBox="0 0 24 24"><use href="#i-download"/></svg></div><div class="t">本月入库笔数</div><div class="v">28</div><div class="d up">▲ 12% 较上月</div></div>
|
||||
<div class="kpi"><div class="ic ic-ok"><svg viewBox="0 0 24 24"><use href="#i-ic47"/></svg></div><div class="t">本月入库金额</div><div class="v">¥186万</div><div class="d up">▲ 8.4% 较上月</div></div>
|
||||
<div class="kpi alert click" onclick="filterStatus('待审核')"><div class="ic ic-alert"><svg viewBox="0 0 24 24"><use href="#i-ic42"/></svg></div><div class="t">待审核单数 · 点击筛选</div><div class="v">4</div><div class="d down">需尽快处理</div></div>
|
||||
<div class="kpi warn click" onclick="filterStatus('草稿')"><div class="ic ic-warn"><svg viewBox="0 0 24 24"><use href="#i-ic06"/></svg></div><div class="t">草稿单数 · 点击筛选</div><div class="v">2</div><div class="d">待提交审核</div></div>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<div class="searchbox"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="searchInput" placeholder="搜索单号 / 供应商 / 酒名" oninput="state.q=this.value; state.page=1; render()"></div>
|
||||
@@ -153,6 +154,7 @@ const PARTY_LABEL='供应商';
|
||||
|
||||
|
||||
function money(n){ return '¥'+n.toLocaleString(); }
|
||||
function numf(n){ return (Number(n)||0).toLocaleString(); } /* 明细行内数字：去¥，缩一号（2026-07-03） */
|
||||
function filtered(){ return ORDERS.filter(o=>{
|
||||
if(state.status!=='全部'&&o.status!==state.status&&o.ret!==state.status)return false;
|
||||
if(state.party!=='全部'&&o.party!==state.party)return false;
|
||||
@@ -300,8 +302,8 @@ function auditBtns(o,idx){
|
||||
return '';
|
||||
}
|
||||
function openDetail(idx){ const o=ORDERS[idx]; document.getElementById('dTitle').textContent=o.no;
|
||||
let lh=`<div class="lines"><div class="lh" style="grid-template-columns:1fr 124px 40px 64px 78px"><span>商品 · 编码</span><span>系列 / 规格</span><span style="text-align:right">数量</span><span style="text-align:right">单价</span><span style="text-align:right">金额</span></div>`;
|
||||
o.lines.forEach(l=>{ const pi=PINFO[l.name]||{}; const pend=(l.price||0)<=0; const priceC=pend?'<span class="pending-price">待定价</span>':money(l.price); const amtC=pend?'<span class="pending-price">待定价</span>':money(l.qty*l.price); lh+=`<div class="lr" style="grid-template-columns:1fr 124px 40px 64px 78px;align-items:start"><span class="lcell"><span class="ln">${l.name}</span><span class="lcode">${pi.code||'—'}</span></span><span class="lcell"><span class="lser">${pi.series||'—'}</span><span class="lspec">${pi.spec||''}</span></span><span style="text-align:right;font-family:var(--font-mono)">${l.qty}</span><span style="text-align:right;font-family:var(--font-mono)">${priceC}</span><span class="amt">${amtC}</span></div>`; }); lh+='</div>';
|
||||
let lh=`<div class="lines"><div class="lh" style="grid-template-columns:1fr 124px 40px 64px 78px"><span>商品 · 编码</span><span>系列 / 规格</span><span style="text-align:right">数量</span><span style="text-align:right">进价（单瓶）</span><span style="text-align:right">总价</span></div>`;
|
||||
o.lines.forEach(l=>{ const pi=PINFO[l.name]||{}; const pend=(l.price||0)<=0; const priceC=pend?'<span class="pending-price">待定价</span>':numf(l.price); const amtC=pend?'<span class="pending-price">待定价</span>':numf(l.qty*l.price); lh+=`<div class="lr" style="grid-template-columns:1fr 124px 40px 64px 78px;align-items:start"><span class="lcell"><span class="ln">${l.name}</span><span class="lcode">${pi.code||'—'}</span></span><span class="lcell"><span class="lser">${pi.series||'—'}</span><span class="lspec">${pi.spec||''}</span></span><span style="text-align:right;font-family:var(--font-mono)">${l.qty}</span><span style="text-align:right;font-family:var(--font-mono)">${priceC}</span><span class="amt">${amtC}</span></div>`; }); lh+='</div>';
|
||||
const pendCount=o.lines.filter(l=>(l.price||0)<=0).length;
|
||||
const auditor=o.auditor?o.auditor:'<span style="color:var(--faint)">—</span>';
|
||||
document.getElementById('drawerBody').innerHTML=`<div class="drow"><span>单据日期</span><b>${o.date}</b></div><div class="drow"><span>${PARTY_LABEL}</span><b>${o.party}</b></div><div class="drow"><span>仓库</span><b>${o.wh}</b></div><div class="drow"><span>商品数</span><b>${o.count}</b></div><div class="drow"><span>入库员</span><b>${o.op}</b></div><div class="drow"><span>审核员</span><b>${auditor}</b></div><div class="drow"><span>状态</span><b><span class="badge b-${o.status}">${o.status}</span>${o.ret?` <span class="badge b-${o.ret}">${o.ret}</span>`:''}</b></div><label style="display:block;font-size:var(--fs-sm);color:var(--muted);margin:16px 0 8px;">入库明细</label>${lh}<div class="ltotal">合计金额 <b>${money(o.amount)}</b></div>`+
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
.head h1{margin:0; font-size:var(--fs-h1); font-weight:700; color:var(--title); letter-spacing:.3px;}
|
||||
.head .sub{font-size:var(--fs-sm); color:var(--muted); margin-bottom:2px;}
|
||||
.head .actions{margin-left:auto; display:flex; gap:10px;}
|
||||
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px;}
|
||||
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px;}
|
||||
.toolbar{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-bottom:none; border-radius:var(--r-lg) var(--r-lg) 0 0; padding:12px 14px; flex-wrap:wrap; transition:background-color .28s,border-color .28s;}
|
||||
.toolbar .searchbox{width:260px;}
|
||||
.toolbar .daterange{display:flex; align-items:center; gap:6px; height:34px; padding:0 11px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); font-size:var(--fs-sm); color:var(--text); cursor:pointer;}
|
||||
@@ -58,6 +58,7 @@
|
||||
<div class="kpi"><div class="ic ic-info"><svg viewBox="0 0 24 24"><use href="#i-ic53"/></svg></div><div class="t">本月出库笔数</div><div class="v">31</div><div class="d up">▲ 9% 较上月</div></div>
|
||||
<div class="kpi"><div class="ic ic-ok"><svg viewBox="0 0 24 24"><use href="#i-ic47"/></svg></div><div class="t">本月出库金额</div><div class="v">¥214万</div><div class="d up">▲ 6.2% 较上月</div></div>
|
||||
<div class="kpi alert click" onclick="filterStatus('待审核')"><div class="ic ic-alert"><svg viewBox="0 0 24 24"><use href="#i-ic42"/></svg></div><div class="t">待审核单数 · 点击筛选</div><div class="v">3</div><div class="d down">需尽快处理</div></div>
|
||||
<div class="kpi warn click" onclick="filterStatus('草稿')"><div class="ic ic-warn"><svg viewBox="0 0 24 24"><use href="#i-ic06"/></svg></div><div class="t">草稿单数 · 点击筛选</div><div class="v">2</div><div class="d">待提交审核</div></div>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<div class="searchbox"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="searchInput" placeholder="搜索单号 / 客户 / 酒名" oninput="state.q=this.value; state.page=1; render()"></div>
|
||||
@@ -152,6 +153,7 @@ const PARTY_LABEL='客户';
|
||||
|
||||
|
||||
function money(n){ return '¥'+n.toLocaleString(); }
|
||||
function numf(n){ return (Number(n)||0).toLocaleString(); } /* 明细行内数字：去¥，缩一号（2026-07-03） */
|
||||
function filtered(){ return ORDERS.filter(o=>{
|
||||
if(state.status!=='全部'&&o.status!==state.status&&o.ret!==state.status)return false;
|
||||
if(state.party!=='全部'&&o.party!==state.party)return false;
|
||||
@@ -295,9 +297,9 @@ function auditBtns(o,idx){
|
||||
return '';
|
||||
}
|
||||
function openDetail(idx){ const o=ORDERS[idx]; document.getElementById('dTitle').textContent=o.no;
|
||||
const GRID='1fr 108px 36px 60px 60px 64px';
|
||||
let lh=`<div class="lines"><div class="lh" style="grid-template-columns:${GRID}"><span>商品 · 编码</span><span>系列 / 规格</span><span style="text-align:right">数量</span><span style="text-align:right">成本价</span><span style="text-align:right">售价</span><span style="text-align:right">利润</span></div>`;
|
||||
o.lines.forEach(l=>{ const pi=PINFO[l.name]||{}; const cost=l.cost!=null?l.cost:Math.round((l.price||0)*0.85); const pend=(l.price||0)<=0; const saleC=pend?'<span class="pending-price">待定价</span>':money(l.price); const profit=(l.price-cost)*l.qty; const profitC=pend?'<span class="pending-price">待定价</span>':`<span style="color:${profit<0?'var(--danger)':'var(--success)'}">${money(profit)}</span>`; lh+=`<div class="lr" style="grid-template-columns:${GRID};align-items:start"><span class="lcell"><span class="ln">${l.name}</span><span class="lcode">${pi.code||'—'}</span></span><span class="lcell"><span class="lser">${pi.series||'—'}</span><span class="lspec">${pi.spec||''}</span></span><span style="text-align:right;font-family:var(--font-mono)">${l.qty}</span><span style="text-align:right;font-family:var(--font-mono)">${money(cost)}</span><span style="text-align:right;font-family:var(--font-mono)">${saleC}</span><span class="amt">${profitC}</span></div>`; }); lh+='</div>';
|
||||
const GRID='1fr 96px 32px 56px 56px 62px 60px';
|
||||
let lh=`<div class="lines"><div class="lh" style="grid-template-columns:${GRID}"><span>商品 · 编码</span><span>系列 / 规格</span><span style="text-align:right">数量</span><span style="text-align:right">成本价</span><span style="text-align:right">售价</span><span style="text-align:right">总售价</span><span style="text-align:right">利润</span></div>`;
|
||||
o.lines.forEach(l=>{ const pi=PINFO[l.name]||{}; const cost=l.cost!=null?l.cost:Math.round((l.price||0)*0.85); const pend=(l.price||0)<=0; const saleC=pend?'<span class="pending-price">待定价</span>':numf(l.price); const profit=(l.price-cost)*l.qty; const profitC=pend?'<span class="pending-price">待定价</span>':`<span style="color:${profit<0?'var(--danger)':'var(--success)'}">${numf(profit)}</span>`; lh+=`<div class="lr" style="grid-template-columns:${GRID};align-items:start"><span class="lcell"><span class="ln">${l.name}</span><span class="lcode">${pi.code||'—'}</span></span><span class="lcell"><span class="lser">${pi.series||'—'}</span><span class="lspec">${pi.spec||''}</span></span><span style="text-align:right;font-family:var(--font-mono)">${l.qty}</span><span style="text-align:right;font-family:var(--font-mono);font-size:var(--fs-sm)">${numf(cost)}</span><span style="text-align:right;font-family:var(--font-mono);font-size:var(--fs-sm)">${saleC}</span><span class="amt" style="font-size:var(--fs-sm)">${pend?'<span class="pending-price">待定价</span>':numf(l.qty*l.price)}</span><span style="text-align:right;font-family:var(--font-mono);font-size:var(--fs-sm)">${profitC}</span></div>`; }); lh+='</div>';
|
||||
const pendCount=o.lines.filter(l=>(l.price||0)<=0).length;
|
||||
const auditor=o.auditor?o.auditor:'<span style="color:var(--faint)">—</span>';
|
||||
document.getElementById('drawerBody').innerHTML=`<div class="drow"><span>单据日期</span><b>${o.date}</b></div><div class="drow"><span>${PARTY_LABEL}</span><b>${o.party}</b></div><div class="drow"><span>仓库</span><b>${o.wh}</b></div><div class="drow"><span>商品数</span><b>${o.count}</b></div><div class="drow"><span>出库员</span><b>${o.op}</b></div><div class="drow"><span>审核员</span><b>${auditor}</b></div><div class="drow"><span>状态</span><b><span class="badge b-${o.status}">${o.status}</span>${o.ret?` <span class="badge b-${o.ret}">${o.ret}</span>`:''}</b></div><label style="display:block;font-size:var(--fs-sm);color:var(--muted);margin:16px 0 8px;">出库明细</label>${lh}<div class="ltotal">合计金额 <b>${money(o.amount)}</b></div><div class="ltotal" style="padding-top:4px">合计利润 <b style="color:var(--success)">${money(o.lines.reduce((s,l)=>{const c=l.cost!=null?l.cost:Math.round((l.price||0)*0.85);return s+((l.price||0)>0?((l.price-c)*l.qty):0);},0))}</b></div>`+
|
||||
|
||||
Reference in New Issue
Block a user