merge: 合并远端绿色种采重构与本地味养创新交互完善
- 远端：绿色种采模块全面重构（右侧抽屉详情、采供管理整页重构、供应商/监控多页面优化） - 本地：味养创新交互完善（人工创新详情/审核双模/AI推演弹窗重构及侧边栏修复） - 解决功能说明文档冲突：合并 9.4 绿色种采补充条目与新增 9.5 味养创新章节 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 4.6
@@ -46,6 +46,8 @@ Web 管理端和员工端 APP 的其余模块（系统管理、运动管理、
|
||||
- 覆盖模块：17 个（含三端+其他终端）
|
||||
|
||||
## 近期里程碑
|
||||
- 2026-05-22：味养创新交互完善——人工创新查看详情弹窗/审核双模/AI推演弹窗重构及侧边栏修复，功能说明9.5章节同步更新
|
||||
- 2026-05-22：绿色种采模块全面重构——采供管理整页重构（采购单维度主表+子表、5种状态联动操作、配送/取消弹窗交互、详情抽屉动态信息），采收入库/供应商管理/种植监控/养殖监控多页面优化，功能说明文档9.4章节同步更新
|
||||
- 2026-05-22：营养用餐模块多页面交互优化——数据分析页新增食堂切换栏/周选择器/餐品明细弹窗重构，食材效益页新增级联分类选择器，大模型管理新增API_KEY/API_URL列及接入/编辑弹窗，小模型管理新增新增模型弹窗，终端管理筛选栏/表格列精简，餐线管理操作列移除编辑按钮
|
||||
- 2026-05-20：营养用餐模块交互完善——用户管理等级配置tab增加新增/查看/编辑弹窗，消费管理筛选优化（日期默认今天、金额范围双输入框、消费类型标签化、单位部门级联筛选、流水号筛选、交易明细弹窗全字段对齐），取餐管理新增总金额列和餐品金额列
|
||||
- 2026-05-19：卫生供应模块8页面交互优化（侧边栏菜单顺序统一、多页面新增弹窗表单、表格列重构、溯源码前移、菜品名称格式统一），补充营养管理功能说明文档及调整记录
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!-- Last updated: 2026-05-15 | Commit: 26ad1d1 -->
|
||||
<!-- Last updated: 2026-05-22 | Commit: e50dbad -->
|
||||
|
||||
# 项目约束
|
||||
|
||||
|
||||
@@ -282,7 +282,6 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button>
|
||||
<button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
|
||||
@@ -232,7 +232,7 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
<div class="panel-left__filter">
|
||||
<select><option>全部分类</option><option>主食</option><option>荤菜</option><option>素菜</option><option>汤品</option><option>小吃</option></select>
|
||||
<select><option>全部状态</option><option>上架</option><option>下架</option></select>
|
||||
<select><option>全部状态</option><option>启用</option><option>停用</option></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-left__actions">
|
||||
@@ -274,41 +274,41 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<script>
|
||||
// 餐品数据
|
||||
const DISHES = [
|
||||
{id:'DISH001',name:'红烧肉',icon:'🥩',category:'荤菜',tags:['高蛋白'],specs:[{name:'标准份',weight:200,price:12,isDefault:true},{name:'小份',weight:120,price:8},{name:'大份',weight:300,price:18}],method:'炖',meal:'午/晚',allergen:'无',status:'上架',weightBasePrice:'6.00',weightVipPrice:'5.40',crowd:[{name:'成人',level:'推荐'},{name:'高血脂人群',level:'慎食'},{name:'高血压人群',level:'适量'}],crowdNote:'高血脂人群控制摄入量',
|
||||
{id:'DISH001',name:'红烧肉',icon:'🥩',category:'荤菜',tags:['高蛋白'],specs:[{name:'标准份',weight:200,price:12,isDefault:true},{name:'小份',weight:120,price:8},{name:'大份',weight:300,price:18}],method:'炖',meal:'午/晚',allergen:'无',status:'启用',source:'手动添加',weightBasePrice:'6.00',weightVipPrice:'5.40',crowd:[{name:'成人',level:'推荐'},{name:'高血脂人群',level:'慎食'},{name:'高血压人群',level:'适量'}],crowdNote:'高血脂人群控制摄入量',
|
||||
composition:[{name:'猪五花肉',cat:'肉禽类/猪肉',amount:160,pct:'80%',state:'净菜',main:true,allergen:'无',note:'—'},{name:'生姜',cat:'调味品/香辛料',amount:5,pct:'2.5%',state:'净菜',main:false,allergen:'无',note:'—'},{name:'生抽',cat:'调味品/酱油',amount:15,pct:'7.5%',state:'原料',main:false,allergen:'含麸质',note:'酱油'},{name:'冰糖',cat:'调味品/糖类',amount:10,pct:'5%',state:'原料',main:false,allergen:'无',note:'上色提味'},{name:'料酒',cat:'调味品/酒类',amount:10,pct:'5%',state:'原料',main:false,allergen:'无',note:'去腥'}],
|
||||
nutri:{calorie:385,protein:18.2,carb:12.4,fat:28.6,vitC:0.8,mineral:42,fiber:0.3,sodium:486,note:'铁2.4mg、锌1.8mg'},
|
||||
nutri:{calorie:385,protein:18.2,carb:12.4,fat:28.6,vitC:0.8,mineral:42,fiber:0.3,sodium:486,nutriGrade:'偏差',note:'铁2.4mg、锌1.8mg'},
|
||||
cook:{mainMethod:'炖',subMethod:'煎',heat:'中火→小火',duration:45,oil:15,salt:3,temp:'100→80',output:200,steps:6},
|
||||
taste:{sour:1,sweet:3,bitter:1,spicy:1,salty:4,smell:4.2,flavorScore:3.8,flavorGrade:'良好'},
|
||||
color:{mainColor:'红褐色',uniformity:4,gloss:4,freshness:4,appearance:4,colorScore:4.0,colorGrade:'良好'},
|
||||
texture:{hardness:2,sticky:3,crispy:1,smooth:4,elastic:3,textureScore:3.6,textureGrade:'良好'}
|
||||
},
|
||||
{id:'DISH002',name:'清炒时蔬',icon:'🥬',category:'素菜',tags:['低脂','素食'],specs:[{name:'标准份',weight:150,price:6,isDefault:true},{name:'小份',weight:100,price:4}],method:'炒',meal:'早/午/晚',allergen:'无',status:'上架',weightBasePrice:'3.00',weightVipPrice:'2.70',crowd:[{name:'全人群',level:'推荐'},{name:'糖尿病人群',level:'推荐'},{name:'肾结石人群',level:'慎食'}],crowdNote:'肾结石人群慎食（草酸含量高）',
|
||||
{id:'DISH002',name:'清炒时蔬',icon:'🥬',category:'素菜',tags:['低脂','素食'],specs:[{name:'标准份',weight:150,price:6,isDefault:true},{name:'小份',weight:100,price:4}],method:'炒',meal:'早/午/晚',allergen:'无',status:'启用',source:'系统内置',weightBasePrice:'3.00',weightVipPrice:'2.70',crowd:[{name:'全人群',level:'推荐'},{name:'糖尿病人群',level:'推荐'},{name:'肾结石人群',level:'慎食'}],crowdNote:'肾结石人群慎食（草酸含量高）',
|
||||
composition:[{name:'时令青菜',cat:'蔬菜类/叶菜',amount:120,pct:'80%',state:'净菜',main:true,allergen:'无',note:'—'},{name:'蒜末',cat:'调味品/香辛料',amount:5,pct:'3.3%',state:'净菜',main:false,allergen:'无',note:'—'},{name:'食用油',cat:'油脂类/植物油',amount:8,pct:'5.3%',state:'原料',main:false,allergen:'无',note:'—'},{name:'食盐',cat:'调味品/盐类',amount:2,pct:'1.3%',state:'原料',main:false,allergen:'无',note:'—'}],
|
||||
nutri:{calorie:68,protein:2.1,carb:8.6,fat:3.2,vitC:28.5,mineral:86,fiber:2.4,sodium:186,note:'铁1.2mg、钙45mg'},
|
||||
nutri:{calorie:68,protein:2.1,carb:8.6,fat:3.2,vitC:28.5,mineral:86,fiber:2.4,sodium:186,nutriGrade:'达标',note:'铁1.2mg、钙45mg'},
|
||||
cook:{mainMethod:'炒',subMethod:'—',heat:'大火',duration:5,oil:8,salt:2,temp:'200',output:150,steps:4},
|
||||
taste:{sour:1,sweet:2,bitter:1,spicy:1,salty:2,smell:3.5,flavorScore:3.2,flavorGrade:'一般'},
|
||||
color:{mainColor:'翠绿色',uniformity:5,gloss:4,freshness:5,appearance:4,colorScore:4.5,colorGrade:'优秀'},
|
||||
texture:{hardness:3,sticky:1,crispy:4,smooth:3,elastic:2,textureScore:3.4,textureGrade:'良好'}
|
||||
},
|
||||
{id:'DISH003',name:'番茄鸡蛋汤',icon:'🍅',category:'汤品',tags:['低卡'],specs:[{name:'标准份',weight:300,price:5,isDefault:true}],method:'煮',meal:'午/晚',allergen:'含蛋类',status:'上架',weightBasePrice:'1.67',weightVipPrice:'1.50',crowd:[{name:'全人群',level:'推荐'},{name:'儿童',level:'推荐'},{name:'老年人',level:'推荐'}],crowdNote:'',
|
||||
{id:'DISH003',name:'番茄鸡蛋汤',icon:'🍅',category:'汤品',tags:['低卡'],specs:[{name:'标准份',weight:300,price:5,isDefault:true}],method:'煮',meal:'午/晚',allergen:'含蛋类',status:'启用',source:'系统内置',weightBasePrice:'1.67',weightVipPrice:'1.50',crowd:[{name:'全人群',level:'推荐'},{name:'儿童',level:'推荐'},{name:'老年人',level:'推荐'}],crowdNote:'',
|
||||
composition:[{name:'番茄',cat:'蔬菜类/茄果',amount:150,pct:'50%',state:'净菜',main:true,allergen:'无',note:'—'},{name:'鸡蛋',cat:'蛋类/禽蛋',amount:60,pct:'20%',state:'原料',main:true,allergen:'含蛋类',note:'—'},{name:'食用油',cat:'油脂类/植物油',amount:5,pct:'1.7%',state:'原料',main:false,allergen:'无',note:'—'},{name:'食盐',cat:'调味品/盐类',amount:2,pct:'0.7%',state:'原料',main:false,allergen:'无',note:'—'}],
|
||||
nutri:{calorie:45,protein:3.8,carb:4.2,fat:2.1,vitC:18.2,mineral:32,fiber:1.1,sodium:280,note:'铁0.8mg、钾210mg'},
|
||||
nutri:{calorie:45,protein:3.8,carb:4.2,fat:2.1,vitC:18.2,mineral:32,fiber:1.1,sodium:280,nutriGrade:'达标',note:'铁0.8mg、钾210mg'},
|
||||
cook:{mainMethod:'煮',subMethod:'炒',heat:'中火',duration:12,oil:5,salt:2,temp:'100',output:300,steps:5},
|
||||
taste:{sour:3,sweet:2,bitter:1,spicy:1,salty:2,smell:3.8,flavorScore:3.5,flavorGrade:'良好'},
|
||||
color:{mainColor:'橙红色',uniformity:4,gloss:3,freshness:5,appearance:4,colorScore:4.0,colorGrade:'良好'},
|
||||
texture:{hardness:1,sticky:2,crispy:1,smooth:5,elastic:2,textureScore:3.8,textureGrade:'良好'}
|
||||
},
|
||||
{id:'DISH004',name:'米饭',icon:'🍚',category:'主食',tags:['主食'],specs:[{name:'标准份',weight:200,price:3,isDefault:true},{name:'小份',weight:100,price:2},{name:'大份',weight:300,price:4}],method:'蒸',meal:'早/午/晚',allergen:'无',status:'上架',weightBasePrice:'1.50',weightVipPrice:'1.35',crowd:[{name:'全人群',level:'推荐'},{name:'糖尿病人群',level:'适量'}],crowdNote:'糖尿病人群注意控制量',
|
||||
{id:'DISH004',name:'米饭',icon:'🍚',category:'主食',tags:['主食'],specs:[{name:'标准份',weight:200,price:3,isDefault:true},{name:'小份',weight:100,price:2},{name:'大份',weight:300,price:4}],method:'蒸',meal:'早/午/晚',allergen:'无',status:'启用',source:'系统内置',weightBasePrice:'1.50',weightVipPrice:'1.35',crowd:[{name:'全人群',level:'推荐'},{name:'糖尿病人群',level:'适量'}],crowdNote:'糖尿病人群注意控制量',
|
||||
composition:[{name:'大米',cat:'谷薯类/稻米',amount:100,pct:'100%',state:'原料',main:true,allergen:'无',note:'—'}],
|
||||
nutri:{calorie:232,protein:4.8,carb:51.2,fat:0.6,vitC:0,mineral:12,fiber:0.4,sodium:3,note:'—'},
|
||||
nutri:{calorie:232,protein:4.8,carb:51.2,fat:0.6,vitC:0,mineral:12,fiber:0.4,sodium:3,nutriGrade:'达标',note:'—'},
|
||||
cook:{mainMethod:'蒸',subMethod:'—',heat:'大火→中火',duration:30,oil:0,salt:0,temp:'100',output:200,steps:2},
|
||||
taste:{sour:1,sweet:2,bitter:1,spicy:1,salty:1,smell:3.0,flavorScore:2.8,flavorGrade:'一般'},
|
||||
color:{mainColor:'乳白色',uniformity:5,gloss:4,freshness:4,appearance:4,colorScore:4.2,colorGrade:'良好'},
|
||||
texture:{hardness:2,sticky:3,crispy:1,smooth:3,elastic:2,textureScore:3.2,textureGrade:'一般'}
|
||||
},
|
||||
{id:'DISH005',name:'糖醋里脊',icon:'🍖',category:'荤菜',tags:['高糖'],specs:[{name:'标准份',weight:180,price:14,isDefault:true},{name:'大份',weight:280,price:20}],method:'炸',meal:'午',allergen:'无',status:'下架',weightBasePrice:'7.78',weightVipPrice:'7.00',crowd:[{name:'成人',level:'推荐'},{name:'糖尿病人群',level:'慎食'},{name:'高血脂人群',level:'适量'}],crowdNote:'糖尿病人群慎食，含糖量高',
|
||||
{id:'DISH005',name:'糖醋里脊',icon:'🍖',category:'荤菜',tags:['高糖'],specs:[{name:'标准份',weight:180,price:14,isDefault:true},{name:'大份',weight:280,price:20}],method:'炸',meal:'午',allergen:'无',status:'停用',source:'味养创新',weightBasePrice:'7.78',weightVipPrice:'7.00',crowd:[{name:'成人',level:'推荐'},{name:'糖尿病人群',level:'慎食'},{name:'高血脂人群',level:'适量'}],crowdNote:'糖尿病人群慎食，含糖量高',
|
||||
composition:[{name:'猪里脊肉',cat:'肉禽类/猪肉',amount:120,pct:'66.7%',state:'净菜',main:true,allergen:'无',note:'—'},{name:'淀粉',cat:'谷薯类/淀粉',amount:20,pct:'11.1%',state:'原料',main:false,allergen:'无',note:'挂糊'},{name:'白糖',cat:'调味品/糖类',amount:25,pct:'13.9%',state:'原料',main:false,allergen:'无',note:'糖醋汁'},{name:'食醋',cat:'调味品/醋类',amount:15,pct:'8.3%',state:'原料',main:false,allergen:'无',note:'糖醋汁'}],
|
||||
nutri:{calorie:420,protein:22.4,carb:38.2,fat:18.6,vitC:1.2,mineral:28,fiber:0.6,sodium:620,note:'铁1.8mg'},
|
||||
nutri:{calorie:420,protein:22.4,carb:38.2,fat:18.6,vitC:1.2,mineral:28,fiber:0.6,sodium:620,nutriGrade:'未达标',note:'铁1.8mg'},
|
||||
cook:{mainMethod:'炸',subMethod:'炒',heat:'大火',duration:15,oil:50,salt:1,temp:'180',output:180,steps:7},
|
||||
taste:{sour:4,sweet:4,bitter:1,spicy:1,salty:3,smell:4.0,flavorScore:4.2,flavorGrade:'良好'},
|
||||
color:{mainColor:'金黄色',uniformity:4,gloss:5,freshness:4,appearance:5,colorScore:4.5,colorGrade:'优秀'},
|
||||
@@ -325,7 +325,7 @@ function renderDishList(){
|
||||
<div class="food-item__icon">${d.icon}</div>
|
||||
<div class="food-item__info">
|
||||
<div class="food-item__name">${d.name}</div>
|
||||
<div class="food-item__meta"><span>${d.id}</span><span>${d.category}</span><span class="tag tag-${d.status==='上架'?'green':'gray'}" style="margin:0;padding:1px 6px;">${d.status}</span></div>
|
||||
<div class="food-item__meta"><span>${d.id}</span><span>${d.category}</span><span class="tag tag-${d.status==='启用'?'green':'gray'}" style="margin:0;padding:1px 6px;">${d.status}</span></div>
|
||||
</div>
|
||||
</div>`).join('');
|
||||
}
|
||||
@@ -344,7 +344,7 @@ function renderDetail(){
|
||||
document.getElementById('detailName').textContent = d.name;
|
||||
document.getElementById('detailCode').textContent = d.id;
|
||||
const s = document.getElementById('detailStatus');
|
||||
s.textContent = d.status; s.className='tag tag-'+(d.status==='上架'?'green':'gray');
|
||||
s.textContent = d.status; s.className='tag tag-'+(d.status==='启用'?'green':'gray');
|
||||
const body = document.getElementById('detailBody');
|
||||
const renderers = [renderBasic,renderComposition,renderCook,renderNutri,renderTaste,renderTexture,renderColor];
|
||||
body.innerHTML = renderers[currentTab](d);
|
||||
@@ -359,13 +359,13 @@ function renderBasic(d){
|
||||
<div class="info-grid">
|
||||
<div class="info-cell"><div class="info-cell__label">餐品编号</div><div class="info-cell__value">${d.id}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">餐品分类</div><div class="info-cell__value">${d.category}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">烹饪方法</div><div class="info-cell__value">${d.method}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">适用餐次</div><div class="info-cell__value">${d.meal}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">过敏原</div><div class="info-cell__value">${d.allergen}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">餐品标签</div><div class="info-cell__value">${d.tags.map(t=>'<span class="tag tag-blue">'+t+'</span>').join('')}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">称重基础价(元/100g)</div><div class="info-cell__value">${d.weightBasePrice||'—'}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">称重会员价(元/100g)</div><div class="info-cell__value">${d.weightVipPrice||'—'}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">上架状态</div><div class="info-cell__value"><span class="tag tag-${d.status==='上架'?'green':'gray'}">${d.status}</span></div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">来源</div><div class="info-cell__value"><span class="tag ${d.source==='系统内置'?'tag-blue':d.source==='味养创新'?'tag-orange':'tag-gray'}">${d.source||'—'}</span></div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">启用状态</div><div class="info-cell__value"><span class="tag tag-${d.status==='启用'?'green':'gray'}">${d.status}</span></div></div>
|
||||
</div></div>
|
||||
<div class="info-section"><div class="info-section__title">👥 适配人群</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;">${(d.crowd||[]).map(function(c){return '<div style="display:flex;align-items:center;gap:4px;"><span style="font-size:var(--font-sm);">'+c.name+'</span>'+levelTag(c.level)+'</div>';}).join('')}</div>
|
||||
@@ -418,6 +418,7 @@ function renderNutri(d){
|
||||
<div class="info-cell"><div class="info-cell__label">矿物质 (mg)</div><div class="info-cell__value">${n.mineral}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">膳食纤维 (g)</div><div class="info-cell__value">${n.fiber}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">钠 (mg)</div><div class="info-cell__value">${n.sodium}</div></div>
|
||||
<div class="info-cell"><div class="info-cell__label">营养等级</div><div class="info-cell__value">${n.nutriGrade==='达标'?'<span class="tag tag-green">达标</span>':n.nutriGrade==='偏差'?'<span class="tag tag-orange">偏差</span>':'<span class="tag tag-red">未达标</span>'}</div></div>
|
||||
</div></div>`;
|
||||
}
|
||||
|
||||
|
||||
@@ -1128,6 +1128,9 @@
|
||||
- 菜品名称改为带加工规格格式（如"土豆（土豆丝）"）
|
||||
- 新增"新建外售订单"弹窗（含溯源码、客户信息、净菜选择、金额自动计算等）
|
||||
- 新增行内"确认签收"操作及交互逻辑
|
||||
- 新增右侧抽屉详情组件，点击"详情"以抽屉形式展示当前行所有字段
|
||||
- 新增"确认收货"二次确认弹窗（配送中状态订单）
|
||||
- 新增"备货完成"二次确认弹窗（备货中状态订单）
|
||||
|
||||
##### 2. sup-clean-internal.html（净菜内供）
|
||||
- 筛选栏"申领部门"改为"申领食堂"
|
||||
@@ -1135,44 +1138,61 @@
|
||||
- 表格新增"包装规格""申领份数"列，移除"库存状态"列
|
||||
- 菜品名称改为带加工规格格式
|
||||
- 新增"新建申领单"弹窗
|
||||
- 新增右侧抽屉详情组件，点击"详情"以抽屉形式展示当前行所有字段
|
||||
- 新增"确认收货"二次确认弹窗
|
||||
- 新增"立即配送"弹窗（含配送人姓名、备注输入）
|
||||
- 新增"备货完成"二次确认弹窗
|
||||
|
||||
##### 3. sup-hygiene-check.html（卫生检测）
|
||||
- 新增监测弹窗以及交互
|
||||
- 筛选栏新增"溯源码"输入框
|
||||
- 操作栏移除"隔离处理"按钮，在数据行后加隔离处理按钮
|
||||
- 新增右侧抽屉详情组件，"详情"从居中弹窗改为抽屉展示
|
||||
- 新增"隔离处理"二次确认弹窗（不合格检测项）
|
||||
|
||||
##### 4. sup-in-clean.html（净菜加工）
|
||||
- "加工类型/加工规格"改为"净菜类型/加工步骤"，移除"加工温度"列，新增"入库状态"列
|
||||
- 操作列改为"查看视频 + 生成入库单 + 更多(下拉)"分层交互
|
||||
- 新增"生成入库单"二次确认弹窗
|
||||
- 弹窗表单：溯源码改为必填首位，食材名称改为只读自动带出
|
||||
- 新增右侧抽屉详情组件，下拉菜单"详情"改为抽屉展示
|
||||
- "生成入库单"确认后跳转至净菜入库页面并通过 URL 参数自动填充表单
|
||||
|
||||
##### 5. sup-in-cleanin.html（净菜入库）
|
||||
- 新增表格列（食材名称、净菜类型、入库规格、入库数量 ）
|
||||
- 新增出库明细按钮已经交互
|
||||
- 操作列 sticky 定位移除，改为"更多"下拉菜单交互模式
|
||||
- CSS 重构与 sup-in-clean 保持一致
|
||||
- 新增「操作类型」列（操作人与操作列之间），值为"设备自动"（蓝色tag）/"人工录入"（绿色tag）
|
||||
- 新增弹窗表单补充「操作类型」必填下拉字段
|
||||
- 新增右侧抽屉详情组件，下拉菜单"详情"改为抽屉展示
|
||||
- 新增 URL 参数自动填充逻辑：从净菜加工页跳转时自动解析参数并填充溯源码、食材名称等字段，自动打开新增弹窗
|
||||
|
||||
##### 6. sup-in-raw.html（毛菜入库）
|
||||
- 弹窗新增"溯源码"必填字段
|
||||
- "供应商/来源地块"改为下拉选择的"供应商"
|
||||
- 移除"卫生检测报告编号"字段，"验收人"改为"操作人"
|
||||
- 新增右侧抽屉详情组件，点击"详情"以抽屉形式展示当前行所有字段
|
||||
|
||||
##### 7. sup-pkg-label.html（净菜包装）
|
||||
- Tab1 净菜包：新增"新增净菜包"按钮及弹窗，"包装编号"改为"包装批次号"，新增"包装规格""包装份数"列
|
||||
- Tab2 餐品净菜包：新增"新增餐品净菜包"按钮及弹窗（含食材动态行）
|
||||
- Tab3 包装设备：新增"新增包装设备"按钮及弹窗
|
||||
- Tab2 餐品净菜包：新增「操作类型」列（终端设备与操作列之间），值为"设备自动"/"人工录入"标签
|
||||
- Tab2 新增弹窗表单补充「操作类型」必填下拉字段
|
||||
|
||||
##### 8. sup-warehouse.html（仓储管理）
|
||||
- Tab 顺序重排：在库库存提升为默认首 Tab
|
||||
- 在库库存 Tab 全新重构：新筛选栏（物品类型、临期预警等）、新表格结构、新增分页组件
|
||||
- 仓库档案 Tab：状态选项改为"使用中/空置中
|
||||
- 新增右侧抽屉详情组件：三个 Tab（在库库存/仓库档案/区域管理）分别有独立的详情抽屉函数
|
||||
|
||||
##### 9.跨文件共性改动：
|
||||
- 所有页面侧边栏统一将"仓储管理"移到"毛菜入库"前面
|
||||
- 溯源码字段在多个页面前移或新增
|
||||
- 菜品名称统一为"食材名（加工规格）"格式
|
||||
- 多个页面补充了完整的新建弹窗交互
|
||||
- 卫生供应全部 8 个页面统一新增右侧抽屉（Drawer）详情展示组件，替代原有无效链接或居中弹窗
|
||||
|
||||
#### 9.2 营养用餐
|
||||
##### 1.营养用餐-食堂管理（新增菜单）
|
||||
@@ -1248,6 +1268,10 @@
|
||||
- 操作列重构：固定三项（食材溯源链路、查看视频、更多▾ hover 下拉）+ 状态按钮
|
||||
- 新建组配任务弹窗重构：改用下拉选择餐品/规格/份数/来源，移除手动食材清单
|
||||
- 食材明细弹窗新增「分类」列（主材/辅材/调料 标签）
|
||||
- 「开始组配」「完成组配」按钮新增顶部 toast 提示交互（状态联动切换）
|
||||
- 新增「操作类型」列（负责人与完成时间之间），值为"设备自动"（蓝色tag）/"人工录入"（绿色tag）
|
||||
- 新建任务弹窗补充「操作类型」必填下拉字段
|
||||
- 新增右侧抽屉详情组件，下拉菜单"详情"以抽屉形式展示任务各字段
|
||||
|
||||
##### 2. prod-proc-cook.html（按单烹制）
|
||||
- 筛选栏新增「当前食堂」「烹制日期」筛选，烹制日期默认当天
|
||||
@@ -1256,6 +1280,8 @@
|
||||
- 生熟比格式改为 1：0.8
|
||||
- 操作列重构：固定三项 + hover 下拉 + 状态按钮（通知取餐/烹制完成/开始烹制）
|
||||
- 新增烹制状态对应不同的操作按钮
|
||||
- 「开始烹制」「烹制完成」「通知取餐」按钮新增顶部 toast 提示交互（状态联动切换）
|
||||
- 新增右侧抽屉详情组件，下拉菜单"详情"以抽屉形式展示烹制任务各字段
|
||||
|
||||
##### 3. prod-proc-serve.html（上餐监控）
|
||||
- 筛选栏新增「当前食堂」下拉
|
||||
@@ -1263,6 +1289,7 @@
|
||||
- 新增上餐弹窗：选择已完成烹制餐品后自动回填信息卡片（任务号/菜品/厨师/出锅时间/温度/餐次/识别方式/重量）
|
||||
- 新增 .action-more 下拉菜单样式体系
|
||||
- 调整表格列的顺序和部分内容
|
||||
- 新增右侧抽屉详情组件，下拉菜单"详情"以抽屉形式展示上餐记录各字段
|
||||
|
||||
##### 4. prod-proc-surplus.html（余量处置）
|
||||
- 筛选栏新增「当前食堂」下拉
|
||||
@@ -1274,6 +1301,7 @@
|
||||
- 新增余量登记弹窗重构：餐线→餐次→菜品三级联动选择（菜品来自上餐监控），选择后自动回填计划制作量/实际制作量/销售取餐量/余量信息卡片
|
||||
- 处置方式选择「员工福利」时，弹窗下方动态显示员工领取记录表格（含操作列删除按钮），支持点击「＋ 新增领取记录」按钮展开输入行
|
||||
- 员工福利取餐明细弹窗：新增「操作」列（删除按钮），新增底部「＋ 新增领取记录」交互（点击后显示输入行，支持确认/取消）
|
||||
- 新增右侧抽屉详情组件，下拉菜单"详情"以抽屉形式展示处置单各字段
|
||||
|
||||
##### 5. prod-proc-stats.html（生产统计）
|
||||
- 新增页面标题行 + 食堂切换下拉（canteen-select 高亮样式）
|
||||
@@ -1287,6 +1315,7 @@
|
||||
- 新增页面标题行 + 食堂切换下拉切换
|
||||
- 新增摄像头回放弹窗（含播放器、时间轴、分时段列表）
|
||||
- 新增新增证件、新增留样弹窗及交互
|
||||
- 新增右侧抽屉详情组件，多个表格（违规记录/安全巡检/人员健康证/能耗记录）的"详情"统一以抽屉形式展示
|
||||
|
||||
##### 7. prod-clean-order.html（净菜订单）
|
||||
- 新增页面标题行 + 食堂切换下拉
|
||||
@@ -1295,6 +1324,8 @@
|
||||
- 订单状态选项调整为：备货中/待配送/配送中/已完成，配送中进行确认收货操作
|
||||
- 新增弹窗通用样式与表单网格布局
|
||||
- 调整表格字段（净菜类型，调整规格与计量方式）
|
||||
- 「确认收货」按钮新增二次确认弹窗（含订单信息展示），确认后状态变为"已完成"并移除按钮
|
||||
- 新增右侧抽屉详情组件，操作列"详情"以抽屉形式展示订单各字段
|
||||
|
||||
##### 8. prod-proc-cabinet.html（净菜进柜）
|
||||
- 新增页面标题行 + 食堂切换下拉
|
||||
@@ -1302,17 +1333,74 @@
|
||||
- 移除 Tab（食材净菜、餐品净菜包 、智能柜总览） 切换结构，改为左右分栏布局
|
||||
- 新增标签/链接通用样式
|
||||
- 新增手动存入净菜按钮及交互
|
||||
- 新增右侧抽屉详情组件，点击"详情"以抽屉形式展示格口详细信息
|
||||
|
||||
##### 9. prod-recipe-plan.html（食谱规划）
|
||||
- 选择餐品弹窗增加营养信息展示，对齐食谱规划页弹窗样式
|
||||
- 按周为单位进行食谱规划
|
||||
|
||||
##### 10. prod-qc-nutrition-sync.html（营养同步）
|
||||
- 新增右侧抽屉详情组件，操作列"详情"从居中弹窗改为抽屉展示（含同步信息和关联检验记录列表）
|
||||
|
||||
#### 9.4 绿色种采
|
||||
##### 1.绿色种采-土地环境模块
|
||||
- 地块管理：表格改为二级表头（基本信息+最新监测数据）；
|
||||
- 新增灌溉方式/土壤类型/负责人字段；
|
||||
- 操作从纯文本改为4个操作按钮；
|
||||
- 新增地块/养殖区的新增/编辑/详情/采集记录弹窗
|
||||
- 地块详情和养殖区详情从居中 Modal 重构为右侧 Drawer 抽屉，带 CSS 滑入动画
|
||||
- 详情内容 DOM 结构从 div 网格改为语义化 ul/li 列表（BEM 命名：detail-list__item）
|
||||
|
||||
##### 2. farm-monitor-crop.html（种植监控）
|
||||
- 种植记录详情从居中弹窗重构为右侧抽屉，带滑入动画和遮罩层
|
||||
- 详情内容从 div.detail-grid 改为 ul.detail-list（BEM 命名规范）
|
||||
|
||||
##### 3. farm-monitor-livestock.html（养殖监控）
|
||||
- 养殖批次详情从居中弹窗重构为右侧抽屉（宽度 480px），带滑入动画
|
||||
- 详情内容从 div.detail-grid 改为 ul.detail-list（BEM 命名规范）
|
||||
- 筛选栏「养殖区」下拉位置前移至「批次号/品种」前
|
||||
- 弹窗中「养殖区/舍」字段从文本输入改为下拉选择
|
||||
|
||||
##### 4. farm-monitor-crop.html（种植监控）
|
||||
- 筛选栏「地块名称」从文本输入改为下拉选择（A/B/C/D/E 区基地选项）
|
||||
- 筛选栏新增「种植批次号」文本输入框
|
||||
|
||||
##### 5. farm-harvest.html（采收入库）
|
||||
- 详情从居中弹窗重构为右侧抽屉（480px），CSS 滑入动画 + 遮罩层
|
||||
- 统计卡片重构：「本月入库总量」「A级占比」「今日入库批次」改为「种植采收批次」「养殖出栏批次」「A级占比」
|
||||
- 筛选栏新增「来源类型」下拉（种植采收/养殖出栏）、「产地/养殖区」下拉
|
||||
- 筛选栏「批次号/作物名」改为「批次号/食材名」；「入库日期范围」改为日期范围双输入框（起止日期）
|
||||
- 表格新增「种养殖批次」列、「采收单位」列；「入库数量(kg)」改为「采收数量」
|
||||
- 新增 2 条养殖出栏示例数据（猪肉白条、整鸡），数据行从 4 条扩展为 6 条
|
||||
- 弹窗表单新增「种养殖批次」字段；「入库数量(kg)」改为「采收数量」+ 独立「采收单位」下拉（公斤/头/只/箱/桶）
|
||||
|
||||
##### 6. farm-supplier.html（供应商管理）
|
||||
- 自供基地 Tab：表格新增「负责人电话」「年均产能」「产能单位」「累计订单」列；「当前产能(kg/月)」移除
|
||||
- 自供基地 Tab：地块/养殖区列改为多行展示（含地块编号+名称），基地名称更贴近业务（「A1-猪舍」→「生猪养殖基地」等）
|
||||
- 外部供应商 Tab：表格新增「联系人」「资质证书」（缩略图+数量）「合作期限」「合作状态」列；移除「资质状态」「最近评价」列；移除「评价供应商」按钮
|
||||
- 外部供应商 Tab：筛选「资质状态」改为「合作状态」（正常/即将到期/合同终止/黑名单）
|
||||
- 新增多选下拉组件样式（multi-select），用于弹窗中地块/养殖区多选
|
||||
- 新增图片上传区域样式（upload-area/upload-preview/upload-btn），用于资质证书上传
|
||||
- 新增只读字段样式（form-readonly），用于弹窗中自动生成的编号展示
|
||||
|
||||
##### 7. farm-purchase.html（采供管理）— 整页重构
|
||||
- **页面结构重构**：从食材明细维度的平铺表格，重构为采购单维度的主表 + 可展开食材明细子表（手风琴模式）
|
||||
- **主表列**：展开、采购单号、采购食堂、供应商、食材种类、采购总金额、下单日期、预计到货、采购单来源、订单状态、操作
|
||||
- **展开子表列**：溯源码、食材名称、食材分类、采购数量、规格（手动输入，如 25kg/件、散装(kg)、5L/桶）、单价、小计金额、备注
|
||||
- **订单状态体系**：待接单（橙）、待发货（蓝）、待收货（橙）、已完成（绿）、已取消（红），5 条示例数据各覆盖一种状态
|
||||
- **操作按钮按状态动态显示**：
|
||||
- 待接单：详情、编辑、立即接单、取消订单
|
||||
- 待发货：详情、编辑、开始配送、取消订单
|
||||
- 待收货：详情、确认收货
|
||||
- 已完成：详情、删除
|
||||
- 已取消：详情、删除
|
||||
- **新建/编辑采购单弹窗**（960px）：选择食堂/供应商后下方回显联系人和电话；食材明细动态行（添加/删除/自动小计）；食材名称为下拉选择；去掉底部备注和保存草稿按钮
|
||||
- **详情抽屉**（640px）：订单信息、采购食堂信息（含联系人/电话）、供应商信息（含联系人/电话）、食材明细表；按状态动态显示「配送信息」区块（待收货/已完成）或「取消信息」区块（已取消，红色高亮）
|
||||
- **立即接单**：页面顶部绿色 toast 浮窗提示
|
||||
- **取消订单弹窗**：二次确认 + 手动输入取消原因（textarea 必填）
|
||||
- **开始配送弹窗**（480px）：填写配送方式（下拉）、配送人姓名、配送人电话（必填）、预计送达时间
|
||||
- **确认收货弹窗**：二次确认，确认后 toast 提示
|
||||
- **其他**：导出按钮统一为 SVG 图标样式；删除确认弹窗保留
|
||||
|
||||
#### 9.5 味养创新
|
||||
|
||||
@@ -1346,4 +1434,4 @@
|
||||
**修复 AI创新转化餐品侧边栏高亮问题**
|
||||
- 问题：从 AI 创新列表点击「转化餐品」进入新建页时，左侧菜单高亮项错误显示为「餐品总库」而非「味养创新」；
|
||||
- 根因：AI 创新实验编号（INN-A0XX）不在 `INNOV_MAP` 中，导致 `INNOV` 为 null，原侧边栏修复逻辑嵌套在 `if(pageMode==='convert' && INNOV)` 块内被跳过；
|
||||
- 修复：将侧边栏 active 切换、页面标题和面包屑修改提取到独立的 `if(pageMode==='convert')` 块，数据预填逻辑保留在 `if(pageMode==='convert' && INNOV)` 块内，两者解耦。
|
||||
- 修复：将侧边栏 active 切换、页面标题和面包屑修改提取到独立的 `if(pageMode==='convert')` 块，数据预填逻辑保留在 `if(pageMode==='convert' && INNOV)` 块内，两者解耦。
|
||||
|
||||
@@ -114,13 +114,19 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
thead th:last-child,tbody td.td-actions{position:sticky;right:0;background:#fff;box-shadow:-4px 0 8px rgba(0,0,0,0.04);z-index:2;white-space:nowrap;}
|
||||
thead th:last-child{background:#FAFAFA;}
|
||||
tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
/* 详情弹窗 */
|
||||
.detail-modal{width:720px;}
|
||||
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;}
|
||||
.detail-item{display:flex;padding:12px 16px;border-bottom:1px solid #f0f0f0;}
|
||||
.detail-item.full{grid-column:1/-1;}
|
||||
/* 右侧抽屉 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.45);z-index:1000;display:none;}
|
||||
.drawer{position:fixed;top:0;right:-480px;width:480px;height:100%;background:#fff;z-index:1001;box-shadow:-4px 0 16px rgba(0,0,0,0.12);transition:right .3s ease;display:flex;flex-direction:column;}
|
||||
.drawer.open{right:0;}
|
||||
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid #e8e8e8;flex-shrink:0;}
|
||||
.drawer-title{font-size:16px;font-weight:600;color:#262626;}
|
||||
.drawer-close{font-size:22px;cursor:pointer;color:#8c8c8c;line-height:1;}.drawer-close:hover{color:#262626;}
|
||||
.drawer-body{flex:1;overflow-y:auto;padding:0;}
|
||||
.drawer-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #e8e8e8;flex-shrink:0;}
|
||||
.detail-grid{display:flex;flex-direction:column;}
|
||||
.detail-item{display:flex;padding:14px 24px;border-bottom:1px solid #f0f0f0;}
|
||||
.detail-label{width:120px;flex-shrink:0;color:var(--text-secondary);font-size:var(--font-sm);}
|
||||
.detail-value{flex:1;font-size:var(--font-sm);color:var(--text-primary);}
|
||||
.detail-value{flex:1;font-size:var(--font-sm);color:var(--text-primary);word-break:break-all;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -176,24 +182,32 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="stat-card__info"><div class="stat-card__value">186</div><div class="stat-card__label">入库批次总数</div></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon green">✅</div>
|
||||
<div class="stat-card__info"><div class="stat-card__value">930 kg</div><div class="stat-card__label">本月入库总量</div></div>
|
||||
<div class="stat-card__icon green">🌱</div>
|
||||
<div class="stat-card__info"><div class="stat-card__value">142</div><div class="stat-card__label">种植采收批次</div></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon orange">⭐</div>
|
||||
<div class="stat-card__icon orange">🐄</div>
|
||||
<div class="stat-card__info"><div class="stat-card__value">44</div><div class="stat-card__label">养殖出栏批次</div></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon blue">✅</div>
|
||||
<div class="stat-card__info"><div class="stat-card__value">78%</div><div class="stat-card__label">A级占比</div></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-card__icon blue">🌱</div>
|
||||
<div class="stat-card__info"><div class="stat-card__value">4</div><div class="stat-card__label">今日入库批次</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>批次号/作物名</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入批次号或作物名">
|
||||
<label>来源类型</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>种植采收</option>
|
||||
<option>养殖出栏</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>批次号/食材名</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入批次号或食材名称">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>品质等级</label>
|
||||
@@ -205,8 +219,24 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>入库日期范围</label>
|
||||
<input class="filter-input" type="date">
|
||||
<label>产地/养殖区</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>A区蔬菜基地</option>
|
||||
<option>B区根茎基地</option>
|
||||
<option>C区菌菇大棚</option>
|
||||
<option>D区豆类基地</option>
|
||||
<option>A1-猪舍</option>
|
||||
<option>B3-鸡舍</option>
|
||||
<option>C2-鸭舍</option>
|
||||
<option>D1-羊舍</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>入库日期</label>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
<span style="color:var(--text-secondary);font-size:var(--font-sm);">至</span>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
@@ -228,12 +258,15 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>采收批次号</th>
|
||||
<th>溯源码</th>
|
||||
<th>食材名称</th>
|
||||
<th>品种</th>
|
||||
<th>种养殖批次</th>
|
||||
<th>产地/地块</th>
|
||||
<th>采收/出栏日期</th>
|
||||
<th>入库数量(kg)</th>
|
||||
<th>采收数量</th>
|
||||
<th>采收单位</th>
|
||||
<th>品质等级</th>
|
||||
<th>入库日期</th>
|
||||
<th>经办人员</th>
|
||||
@@ -243,12 +276,15 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>HC-20260415-001</td>
|
||||
<td>ST-FH-FA01-VG-BOCA-286K-20260415-001</td>
|
||||
<td>菠菜</td>
|
||||
<td>尖叶菠菜</td>
|
||||
<td>ZZ-A01-2026-003</td>
|
||||
<td>A区蔬菜基地</td>
|
||||
<td>2026-04-15</td>
|
||||
<td>286</td>
|
||||
<td>公斤</td>
|
||||
<td><span class="tag tag-green">A级</span></td>
|
||||
<td>2026-04-15</td>
|
||||
<td>李采收</td>
|
||||
@@ -256,12 +292,15 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<td class="td-actions"><a class="link" onclick="openVideoModal()">查看视频</a> <a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HC-20260415-002</td>
|
||||
<td>ST-FH-FB01-VG-HLUB-420K-20260415-002</td>
|
||||
<td>胡萝卜</td>
|
||||
<td>红芯胡萝卜</td>
|
||||
<td>ZZ-B01-2026-007</td>
|
||||
<td>B区根茎基地</td>
|
||||
<td>2026-04-15</td>
|
||||
<td>420</td>
|
||||
<td>公斤</td>
|
||||
<td><span class="tag tag-green">A级</span></td>
|
||||
<td>2026-04-15</td>
|
||||
<td>王采收</td>
|
||||
@@ -269,12 +308,15 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<td class="td-actions"><a class="link" onclick="openVideoModal()">查看视频</a> <a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HC-20260414-003</td>
|
||||
<td>ST-FH-FC01-VG-XGUO-068K-20260414-003</td>
|
||||
<td>香菇</td>
|
||||
<td>808香菇</td>
|
||||
<td>ZZ-C01-2026-012</td>
|
||||
<td>C区菌菇大棚</td>
|
||||
<td>2026-04-14</td>
|
||||
<td>68</td>
|
||||
<td>公斤</td>
|
||||
<td><span class="tag tag-orange">B级</span></td>
|
||||
<td>2026-04-14</td>
|
||||
<td>李采收</td>
|
||||
@@ -282,24 +324,59 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<td class="td-actions"><a class="link" onclick="openVideoModal()">查看视频</a> <a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HC-20260414-004</td>
|
||||
<td>ST-FH-FD01-VG-SJJD-156K-20260414-004</td>
|
||||
<td>四季豆</td>
|
||||
<td>架豆王</td>
|
||||
<td>ZZ-D01-2026-005</td>
|
||||
<td>D区豆类基地</td>
|
||||
<td>2026-04-14</td>
|
||||
<td>156</td>
|
||||
<td>公斤</td>
|
||||
<td><span class="tag tag-green">A级</span></td>
|
||||
<td>2026-04-14</td>
|
||||
<td>张采收</td>
|
||||
<td>RPT-20260414-004</td>
|
||||
<td class="td-actions"><a class="link" onclick="openVideoModal()">查看视频</a> <a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HC-20260416-005</td>
|
||||
<td>ST-FH-A1ZS-LS-DLKZ-320T-20260416-005</td>
|
||||
<td>猪肉（白条）</td>
|
||||
<td>杜洛克</td>
|
||||
<td>LS-2604-001</td>
|
||||
<td>A1-猪舍</td>
|
||||
<td>2026-04-16</td>
|
||||
<td>50</td>
|
||||
<td>头</td>
|
||||
<td><span class="tag tag-green">A级</span></td>
|
||||
<td>2026-04-16</td>
|
||||
<td>陈大勇</td>
|
||||
<td>RPT-20260416-005</td>
|
||||
<td class="td-actions"><a class="link" onclick="openVideoModal()">查看视频</a> <a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HC-20260416-006</td>
|
||||
<td>ST-FH-B3JS-LS-HYJJ-200Z-20260416-006</td>
|
||||
<td>鸡（整只）</td>
|
||||
<td>黄羽鸡</td>
|
||||
<td>LS-2603-002</td>
|
||||
<td>B3-鸡舍</td>
|
||||
<td>2026-04-16</td>
|
||||
<td>200</td>
|
||||
<td>只</td>
|
||||
<td><span class="tag tag-green">A级</span></td>
|
||||
<td>2026-04-16</td>
|
||||
<td>刘芳</td>
|
||||
<td>RPT-20260416-006</td>
|
||||
<td class="td-actions"><a class="link" onclick="openVideoModal()">查看视频</a> <a class="link" onclick="showDetail(this)">详情</a> <a class="link" onclick="openModal('edit')">编辑</a> <a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<span>显示 4 条，共 186 条</span>
|
||||
<span>显示 6 条，共 186 条</span>
|
||||
<button class="page-btn">‹</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
@@ -355,6 +432,10 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<label>品种<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入品种">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>种养殖批次</label>
|
||||
<input type="text" placeholder="请输入种养殖批次号">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>来源地块/养殖区</label>
|
||||
<select><option>请选择</option><option>A区蔬菜基地</option><option>B区根茎基地</option><option>C区菌菇大棚</option><option>D区豆类基地</option><option>A1-猪舍</option><option>B3-鸡舍</option></select>
|
||||
@@ -364,8 +445,12 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<input type="date">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>入库数量(kg)<span class="required">*</span></label>
|
||||
<input type="number" placeholder="请输入入库数量">
|
||||
<label>采收数量<span class="required">*</span></label>
|
||||
<input type="number" placeholder="请输入采收数量">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>采收单位<span class="required">*</span></label>
|
||||
<select><option>请选择</option><option>公斤</option><option>吨</option><option>头</option><option>条</option><option>只</option><option>尾</option><option>个</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>品质等级</label>
|
||||
@@ -392,19 +477,18 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<div class="modal-overlay" id="detailModal" style="display:none;">
|
||||
<div class="modal detail-modal">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">收成入库详情</span>
|
||||
<span class="modal-close" onclick="closeDetailModal()">×</span>
|
||||
</div>
|
||||
<div class="modal-body" style="padding:0;">
|
||||
<div class="detail-grid" id="detailGrid"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeDetailModal()">关闭</button>
|
||||
</div>
|
||||
<!-- 右侧详情抽屉 -->
|
||||
<div class="drawer-overlay" id="drawerOverlay" onclick="closeDrawer()"></div>
|
||||
<div class="drawer" id="detailDrawer">
|
||||
<div class="drawer-header">
|
||||
<span class="drawer-title">收成入库详情</span>
|
||||
<span class="drawer-close" onclick="closeDrawer()">×</span>
|
||||
</div>
|
||||
<div class="drawer-body">
|
||||
<div class="detail-grid" id="detailGrid"></div>
|
||||
</div>
|
||||
<div class="drawer-footer">
|
||||
<button class="btn btn-default" onclick="closeDrawer()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -422,7 +506,7 @@ document.getElementById('modalOverlay').addEventListener('click',function(e){if(
|
||||
function openVideoModal(){document.getElementById('videoModal').style.display='flex';}
|
||||
function closeVideoModal(){document.getElementById('videoModal').style.display='none';}
|
||||
document.getElementById('videoModal').addEventListener('click',function(e){if(e.target===this)closeVideoModal();});
|
||||
// 详情弹窗
|
||||
// 详情抽屉
|
||||
function showDetail(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
@@ -435,10 +519,13 @@ function showDetail(el){
|
||||
div.innerHTML='<div class="detail-label">'+ths[i].textContent+'</div><div class="detail-value">'+tds[i].innerHTML+'</div>';
|
||||
grid.appendChild(div);
|
||||
}
|
||||
document.getElementById('detailModal').style.display='flex';
|
||||
document.getElementById('drawerOverlay').style.display='block';
|
||||
document.getElementById('detailDrawer').classList.add('open');
|
||||
}
|
||||
function closeDrawer(){
|
||||
document.getElementById('drawerOverlay').style.display='none';
|
||||
document.getElementById('detailDrawer').classList.remove('open');
|
||||
}
|
||||
function closeDetailModal(){document.getElementById('detailModal').style.display='none';}
|
||||
document.getElementById('detailModal').addEventListener('click',function(e){if(e.target===this)closeDetailModal();});
|
||||
// 切换二级菜单分组的展开/收起
|
||||
function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
// 初始化：若激活项位于子分组内，则自动展开
|
||||
|
||||
@@ -124,18 +124,26 @@ table thead .sub-header th{font-size:12px;font-weight:500;}
|
||||
.search-select__option{padding:8px 12px;font-size:var(--font-sm);cursor:pointer;transition:background .15s;}
|
||||
.search-select__option:hover,.search-select__option.highlighted{background:var(--primary-light);color:var(--primary);}
|
||||
.search-select__empty{padding:8px 12px;font-size:var(--font-sm);color:var(--text-placeholder);text-align:center;}
|
||||
/* 详情弹窗 */
|
||||
.detail-modal{width:720px;}
|
||||
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;}
|
||||
.detail-item{display:flex;padding:12px 16px;border-bottom:1px solid #f0f0f0;}
|
||||
.detail-item.full{grid-column:1/-1;}
|
||||
.detail-label{width:120px;flex-shrink:0;color:var(--text-secondary);font-size:var(--font-sm);}
|
||||
.detail-value{flex:1;font-size:var(--font-sm);color:var(--text-primary);}
|
||||
/* 详情抽屉 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.45);z-index:200;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;}
|
||||
.drawer-overlay.open{opacity:1;visibility:visible;}
|
||||
.drawer{position:fixed;top:0;right:0;width:480px;height:100%;background:#fff;box-shadow:-4px 0 16px rgba(0,0,0,0.12);z-index:201;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);}
|
||||
.drawer-overlay.open .drawer{transform:translateX(0);}
|
||||
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer-title{font-size:16px;font-weight:600;color:#262626;}
|
||||
.drawer-close{font-size:22px;cursor:pointer;color:#8c8c8c;line-height:1;}.drawer-close:hover{color:#262626;}
|
||||
.drawer-body{flex:1;overflow-y:auto;padding:0;}
|
||||
.drawer-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);flex-shrink:0;}
|
||||
.detail-list{list-style:none;}
|
||||
.detail-list__item{display:flex;padding:12px 24px;border-bottom:1px solid #f0f0f0;}
|
||||
.detail-list__item:last-child{border-bottom:none;}
|
||||
.detail-list__label{width:120px;flex-shrink:0;color:var(--text-secondary);font-size:var(--font-sm);}
|
||||
.detail-list__value{flex:1;font-size:var(--font-sm);color:var(--text-primary);word-break:break-all;}
|
||||
/* 详情分模块 */
|
||||
.detail-section{padding:16px 24px;border-bottom:1px solid #f0f0f0;}
|
||||
.detail-section:last-child{border-bottom:none;}
|
||||
.detail-section__title{font-size:var(--font-sm);font-weight:600;color:var(--primary);margin-bottom:12px;padding-left:8px;border-left:3px solid var(--primary);}
|
||||
.detail-section .detail-grid{gap:0;}
|
||||
.detail-section .detail-list{}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -427,29 +435,29 @@ table thead .sub-header th{font-size:12px;font-weight:500;}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 地块详情弹窗（只读） -->
|
||||
<div class="modal-overlay" id="plotDetailModal">
|
||||
<div class="modal detail-modal" style="width:760px;">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">地块详情</span>
|
||||
<span class="modal-close" onclick="closePlotDetail()">×</span>
|
||||
<!-- 地块详情抽屉（只读） -->
|
||||
<div class="drawer-overlay" id="plotDetailDrawer" onclick="if(event.target===this)closePlotDetail();">
|
||||
<div class="drawer">
|
||||
<div class="drawer-header">
|
||||
<span class="drawer-title">地块详情</span>
|
||||
<span class="drawer-close" onclick="closePlotDetail()">×</span>
|
||||
</div>
|
||||
<div class="modal-body" style="padding:0;" id="plotDetailContent"></div>
|
||||
<div class="modal-footer">
|
||||
<div class="drawer-body" id="plotDetailContent"></div>
|
||||
<div class="drawer-footer">
|
||||
<button class="btn btn-default" onclick="closePlotDetail()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 养殖区详情弹窗（只读） -->
|
||||
<div class="modal-overlay" id="breedDetailModal">
|
||||
<div class="modal detail-modal" style="width:760px;">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">养殖区详情</span>
|
||||
<span class="modal-close" onclick="closeBreedDetail()">×</span>
|
||||
<!-- 养殖区详情抽屉（只读） -->
|
||||
<div class="drawer-overlay" id="breedDetailDrawer" onclick="if(event.target===this)closeBreedDetail();">
|
||||
<div class="drawer">
|
||||
<div class="drawer-header">
|
||||
<span class="drawer-title">养殖区详情</span>
|
||||
<span class="drawer-close" onclick="closeBreedDetail()">×</span>
|
||||
</div>
|
||||
<div class="modal-body" style="padding:0;" id="breedDetailContent"></div>
|
||||
<div class="modal-footer">
|
||||
<div class="drawer-body" id="breedDetailContent"></div>
|
||||
<div class="drawer-footer">
|
||||
<button class="btn btn-default" onclick="closeBreedDetail()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -579,46 +587,44 @@ function showPlotDetail(el){
|
||||
var n=cells[11].textContent, p=cells[12].textContent, k=cells[13].textContent;
|
||||
var pest=cells[14].textContent, water=cells[15].textContent;
|
||||
var time=cells[16].textContent, warn=cells[17].textContent;
|
||||
// 模拟备注数据
|
||||
var remarks={'LAND-001':'有机种植示范区，禁止使用化学农药','LAND-002':'适合根茎类作物，排水良好','LAND-003':'恒温恒湿大棚，需定期通风','LAND-004':'休耕期进行土壤改良，计划下季种植大豆'};
|
||||
var remark=remarks[id]||'暂无备注';
|
||||
|
||||
var html='<div class="detail-section"><div class="detail-section__title">基本信息</div><div class="detail-grid">';
|
||||
html+='<div class="detail-item"><span class="detail-label">地块编号</span><span class="detail-value">'+id+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">地块名称</span><span class="detail-value">'+name+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">面积(亩)</span><span class="detail-value">'+area+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">地块状态</span><span class="detail-value">'+status+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">负责人</span><span class="detail-value">'+person+'</span></div>';
|
||||
html+='</div></div>';
|
||||
var html='<div class="detail-section"><div class="detail-section__title">基本信息</div><ul class="detail-list">';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">地块编号</span><span class="detail-list__value">'+id+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">地块名称</span><span class="detail-list__value">'+name+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">面积(亩)</span><span class="detail-list__value">'+area+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">地块状态</span><span class="detail-list__value">'+status+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">负责人</span><span class="detail-list__value">'+person+'</span></li>';
|
||||
html+='</ul></div>';
|
||||
|
||||
html+='<div class="detail-section"><div class="detail-section__title">种植信息</div><div class="detail-grid">';
|
||||
html+='<div class="detail-item"><span class="detail-label">种植作物</span><span class="detail-value">'+crop+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">灌溉方式</span><span class="detail-value">'+irrigation+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">土壤类型</span><span class="detail-value">'+soil+'</span></div>';
|
||||
html+='</div></div>';
|
||||
html+='<div class="detail-section"><div class="detail-section__title">种植信息</div><ul class="detail-list">';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">种植作物</span><span class="detail-list__value">'+crop+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">灌溉方式</span><span class="detail-list__value">'+irrigation+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">土壤类型</span><span class="detail-list__value">'+soil+'</span></li>';
|
||||
html+='</ul></div>';
|
||||
|
||||
html+='<div class="detail-section"><div class="detail-section__title">最新监测数据</div><div class="detail-grid">';
|
||||
html+='<div class="detail-item"><span class="detail-label">温度(℃)</span><span class="detail-value">'+temp+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">湿度(%RH)</span><span class="detail-value">'+hum+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">土壤pH</span><span class="detail-value">'+ph+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">氮(mg/kg)</span><span class="detail-value">'+n+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">磷(mg/kg)</span><span class="detail-value">'+p+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">钾(mg/kg)</span><span class="detail-value">'+k+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">农药残留</span><span class="detail-value">'+pest+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">水质等级</span><span class="detail-value">'+water+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">采集时间</span><span class="detail-value">'+time+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">预警等级</span><span class="detail-value">'+warn+'</span></div>';
|
||||
html+='</div></div>';
|
||||
html+='<div class="detail-section"><div class="detail-section__title">最新监测数据</div><ul class="detail-list">';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">温度(℃)</span><span class="detail-list__value">'+temp+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">湿度(%RH)</span><span class="detail-list__value">'+hum+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">土壤pH</span><span class="detail-list__value">'+ph+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">氮(mg/kg)</span><span class="detail-list__value">'+n+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">磷(mg/kg)</span><span class="detail-list__value">'+p+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">钾(mg/kg)</span><span class="detail-list__value">'+k+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">农药残留</span><span class="detail-list__value">'+pest+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">水质等级</span><span class="detail-list__value">'+water+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">采集时间</span><span class="detail-list__value">'+time+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">预警等级</span><span class="detail-list__value">'+warn+'</span></li>';
|
||||
html+='</ul></div>';
|
||||
|
||||
html+='<div class="detail-section"><div class="detail-section__title">备注</div><div class="detail-grid">';
|
||||
html+='<div class="detail-item full"><span class="detail-label">备注信息</span><span class="detail-value">'+remark+'</span></div>';
|
||||
html+='</div></div>';
|
||||
html+='<div class="detail-section"><div class="detail-section__title">备注</div><ul class="detail-list">';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">备注信息</span><span class="detail-list__value">'+remark+'</span></li>';
|
||||
html+='</ul></div>';
|
||||
|
||||
document.getElementById('plotDetailContent').innerHTML=html;
|
||||
document.getElementById('plotDetailModal').style.display='flex';
|
||||
document.getElementById('plotDetailDrawer').classList.add('open');
|
||||
}
|
||||
function closePlotDetail(){document.getElementById('plotDetailModal').style.display='none';}
|
||||
document.getElementById('plotDetailModal').addEventListener('click',function(e){if(e.target===this)closePlotDetail();});
|
||||
function closePlotDetail(){document.getElementById('plotDetailDrawer').classList.remove('open');}
|
||||
|
||||
// --- 养殖区详情 ---
|
||||
function showBreedDetail(el){
|
||||
@@ -630,45 +636,43 @@ function showBreedDetail(el){
|
||||
var nh3=cells[9].textContent, co2=cells[10].textContent, lux=cells[11].textContent;
|
||||
var vent=cells[12].textContent, water=cells[13].textContent, waste=cells[14].textContent;
|
||||
var time=cells[15].textContent, warn=cells[16].textContent;
|
||||
// 模拟备注数据
|
||||
var remarks={'BREED-A1':'标准化猪舍，配备自动喂料系统','BREED-B3':'散养鸡舍，林下养殖模式','BREED-C2':'水禽养殖区，需加强通风管理','BREED-D1':'空置中，计划下月引进新批次湖羊'};
|
||||
var remark=remarks[id]||'暂无备注';
|
||||
|
||||
var html='<div class="detail-section"><div class="detail-section__title">基本信息</div><div class="detail-grid">';
|
||||
html+='<div class="detail-item"><span class="detail-label">养殖区编号</span><span class="detail-value">'+id+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">养殖区名称</span><span class="detail-value">'+name+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">面积(㎡)</span><span class="detail-value">'+area+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">负责人</span><span class="detail-value">'+person+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">养殖状态</span><span class="detail-value">'+status+'</span></div>';
|
||||
html+='</div></div>';
|
||||
var html='<div class="detail-section"><div class="detail-section__title">基本信息</div><ul class="detail-list">';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">养殖区编号</span><span class="detail-list__value">'+id+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">养殖区名称</span><span class="detail-list__value">'+name+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">面积(㎡)</span><span class="detail-list__value">'+area+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">负责人</span><span class="detail-list__value">'+person+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">养殖状态</span><span class="detail-list__value">'+status+'</span></li>';
|
||||
html+='</ul></div>';
|
||||
|
||||
html+='<div class="detail-section"><div class="detail-section__title">养殖信息</div><div class="detail-grid">';
|
||||
html+='<div class="detail-item"><span class="detail-label">动物种类</span><span class="detail-value">'+animal+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">养殖方式</span><span class="detail-value">'+method+'</span></div>';
|
||||
html+='</div></div>';
|
||||
html+='<div class="detail-section"><div class="detail-section__title">养殖信息</div><ul class="detail-list">';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">动物种类</span><span class="detail-list__value">'+animal+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">养殖方式</span><span class="detail-list__value">'+method+'</span></li>';
|
||||
html+='</ul></div>';
|
||||
|
||||
html+='<div class="detail-section"><div class="detail-section__title">最新监测数据</div><div class="detail-grid">';
|
||||
html+='<div class="detail-item"><span class="detail-label">温度(℃)</span><span class="detail-value">'+temp+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">湿度(%RH)</span><span class="detail-value">'+hum+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">氨气(ppm)</span><span class="detail-value">'+nh3+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">CO₂(ppm)</span><span class="detail-value">'+co2+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">光照(lux)</span><span class="detail-value">'+lux+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">通风状态</span><span class="detail-value">'+vent+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">饮水水质</span><span class="detail-value">'+water+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">粪污处理</span><span class="detail-value">'+waste+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">采集时间</span><span class="detail-value">'+time+'</span></div>';
|
||||
html+='<div class="detail-item"><span class="detail-label">预警等级</span><span class="detail-value">'+warn+'</span></div>';
|
||||
html+='</div></div>';
|
||||
html+='<div class="detail-section"><div class="detail-section__title">最新监测数据</div><ul class="detail-list">';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">温度(℃)</span><span class="detail-list__value">'+temp+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">湿度(%RH)</span><span class="detail-list__value">'+hum+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">氨气(ppm)</span><span class="detail-list__value">'+nh3+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">CO₂(ppm)</span><span class="detail-list__value">'+co2+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">光照(lux)</span><span class="detail-list__value">'+lux+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">通风状态</span><span class="detail-list__value">'+vent+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">饮水水质</span><span class="detail-list__value">'+water+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">粪污处理</span><span class="detail-list__value">'+waste+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">采集时间</span><span class="detail-list__value">'+time+'</span></li>';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">预警等级</span><span class="detail-list__value">'+warn+'</span></li>';
|
||||
html+='</ul></div>';
|
||||
|
||||
html+='<div class="detail-section"><div class="detail-section__title">备注</div><div class="detail-grid">';
|
||||
html+='<div class="detail-item full"><span class="detail-label">备注信息</span><span class="detail-value">'+remark+'</span></div>';
|
||||
html+='</div></div>';
|
||||
html+='<div class="detail-section"><div class="detail-section__title">备注</div><ul class="detail-list">';
|
||||
html+='<li class="detail-list__item"><span class="detail-list__label">备注信息</span><span class="detail-list__value">'+remark+'</span></li>';
|
||||
html+='</ul></div>';
|
||||
|
||||
document.getElementById('breedDetailContent').innerHTML=html;
|
||||
document.getElementById('breedDetailModal').style.display='flex';
|
||||
document.getElementById('breedDetailDrawer').classList.add('open');
|
||||
}
|
||||
function closeBreedDetail(){document.getElementById('breedDetailModal').style.display='none';}
|
||||
document.getElementById('breedDetailModal').addEventListener('click',function(e){if(e.target===this)closeBreedDetail();});
|
||||
function closeBreedDetail(){document.getElementById('breedDetailDrawer').classList.remove('open');}
|
||||
|
||||
// --- 种植作物搜索选择框 ---
|
||||
(function(){
|
||||
|
||||
@@ -115,13 +115,21 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
thead th:last-child,tbody td.td-actions{position:sticky;right:0;background:#fff;box-shadow:-4px 0 8px rgba(0,0,0,0.04);z-index:2;white-space:nowrap;}
|
||||
thead th:last-child{background:#FAFAFA;}
|
||||
tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
/* 详情弹窗 */
|
||||
.detail-modal{width:720px;}
|
||||
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;}
|
||||
.detail-item{display:flex;padding:12px 16px;border-bottom:1px solid #f0f0f0;}
|
||||
.detail-item.full{grid-column:1/-1;}
|
||||
.detail-label{width:120px;flex-shrink:0;color:var(--text-secondary);font-size:var(--font-sm);}
|
||||
.detail-value{flex:1;font-size:var(--font-sm);color:var(--text-primary);}
|
||||
/* 详情抽屉 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.45);z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;}
|
||||
.drawer-overlay.open{opacity:1;visibility:visible;}
|
||||
.drawer{position:fixed;top:0;right:0;width:480px;height:100%;background:#fff;box-shadow:-4px 0 16px rgba(0,0,0,0.12);z-index:1001;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);}
|
||||
.drawer-overlay.open .drawer{transform:translateX(0);}
|
||||
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer-title{font-size:16px;font-weight:600;color:#262626;}
|
||||
.drawer-close{font-size:22px;cursor:pointer;color:#8c8c8c;line-height:1;}.drawer-close:hover{color:#262626;}
|
||||
.drawer-body{flex:1;overflow-y:auto;padding:0;}
|
||||
.drawer-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);flex-shrink:0;}
|
||||
.detail-list{list-style:none;}
|
||||
.detail-list__item{display:flex;padding:12px 24px;border-bottom:1px solid #f0f0f0;}
|
||||
.detail-list__item:last-child{border-bottom:none;}
|
||||
.detail-list__label{width:120px;flex-shrink:0;color:var(--text-secondary);font-size:var(--font-sm);}
|
||||
.detail-list__value{flex:1;font-size:var(--font-sm);color:var(--text-primary);word-break:break-all;}
|
||||
/* 巡检记录弹窗 */
|
||||
.inspection-modal{width:960px;max-height:85vh;}
|
||||
.inspection-header-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
|
||||
@@ -222,7 +230,14 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>地块名称</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入地块名称">
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>A区蔬菜基地</option>
|
||||
<option>B区根茎基地</option>
|
||||
<option>C区菌菇大棚</option>
|
||||
<option>D区豆类基地</option>
|
||||
<option>E区叶菜基地</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>作物类型</label>
|
||||
@@ -236,6 +251,10 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<option>生菜</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>种植批次号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入种植批次号">
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>种植状态</label>
|
||||
<select class="filter-select">
|
||||
@@ -470,18 +489,18 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<div class="modal-overlay" id="detailModal" style="display:none;">
|
||||
<div class="modal detail-modal">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">种植记录详情</span>
|
||||
<span class="modal-close" onclick="closeDetailModal()">×</span>
|
||||
<!-- 详情抽屉 -->
|
||||
<div class="drawer-overlay" id="detailDrawer" onclick="if(event.target===this)closeDetailDrawer();">
|
||||
<div class="drawer">
|
||||
<div class="drawer-header">
|
||||
<span class="drawer-title">种植记录详情</span>
|
||||
<span class="drawer-close" onclick="closeDetailDrawer()">×</span>
|
||||
</div>
|
||||
<div class="modal-body" style="padding:0;">
|
||||
<div class="detail-grid" id="detailGrid"></div>
|
||||
<div class="drawer-body">
|
||||
<ul class="detail-list" id="detailList"></ul>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeDetailModal()">关闭</button>
|
||||
<div class="drawer-footer">
|
||||
<button class="btn btn-default" onclick="closeDetailDrawer()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -539,23 +558,22 @@ function openModal(mode){
|
||||
}
|
||||
function closeModal(){document.getElementById('modalOverlay').style.display='none';}
|
||||
document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
// 详情弹窗
|
||||
// 详情抽屉
|
||||
function showDetail(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var ths=tr.closest('table').querySelectorAll('thead th');
|
||||
var grid=document.getElementById('detailGrid');
|
||||
grid.innerHTML='';
|
||||
var list=document.getElementById('detailList');
|
||||
list.innerHTML='';
|
||||
for(var i=0;i<tds.length-1;i++){
|
||||
var div=document.createElement('div');
|
||||
div.className='detail-item';
|
||||
div.innerHTML='<div class="detail-label">'+ths[i].textContent+'</div><div class="detail-value">'+tds[i].innerHTML+'</div>';
|
||||
grid.appendChild(div);
|
||||
var li=document.createElement('li');
|
||||
li.className='detail-list__item';
|
||||
li.innerHTML='<span class="detail-list__label">'+ths[i].textContent+'</span><span class="detail-list__value">'+tds[i].innerHTML+'</span>';
|
||||
list.appendChild(li);
|
||||
}
|
||||
document.getElementById('detailModal').style.display='flex';
|
||||
document.getElementById('detailDrawer').classList.add('open');
|
||||
}
|
||||
function closeDetailModal(){document.getElementById('detailModal').style.display='none';}
|
||||
document.getElementById('detailModal').addEventListener('click',function(e){if(e.target===this)closeDetailModal();});
|
||||
function closeDetailDrawer(){document.getElementById('detailDrawer').classList.remove('open');}
|
||||
// 巡检记录弹窗
|
||||
var inspectionData={
|
||||
'CROP-202601-001':[
|
||||
|
||||
@@ -114,13 +114,21 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
thead th:last-child,tbody td.td-actions{position:sticky;right:0;background:#fff;box-shadow:-4px 0 8px rgba(0,0,0,0.04);z-index:2;white-space:nowrap;}
|
||||
thead th:last-child{background:#FAFAFA;}
|
||||
tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
/* 详情弹窗 */
|
||||
.detail-modal{width:720px;}
|
||||
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;}
|
||||
.detail-item{display:flex;padding:12px 16px;border-bottom:1px solid #f0f0f0;}
|
||||
.detail-item.full{grid-column:1/-1;}
|
||||
.detail-label{width:140px;flex-shrink:0;color:var(--text-secondary);font-size:var(--font-sm);}
|
||||
.detail-value{flex:1;font-size:var(--font-sm);color:var(--text-primary);}
|
||||
/* 详情抽屉 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.45);z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;}
|
||||
.drawer-overlay.open{opacity:1;visibility:visible;}
|
||||
.drawer{position:fixed;top:0;right:0;width:480px;height:100%;background:#fff;box-shadow:-4px 0 16px rgba(0,0,0,0.12);z-index:1001;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);}
|
||||
.drawer-overlay.open .drawer{transform:translateX(0);}
|
||||
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer-title{font-size:16px;font-weight:600;color:#262626;}
|
||||
.drawer-close{font-size:22px;cursor:pointer;color:#8c8c8c;line-height:1;}.drawer-close:hover{color:#262626;}
|
||||
.drawer-body{flex:1;overflow-y:auto;padding:0;}
|
||||
.drawer-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);flex-shrink:0;}
|
||||
.detail-list{list-style:none;}
|
||||
.detail-list__item{display:flex;padding:12px 24px;border-bottom:1px solid #f0f0f0;}
|
||||
.detail-list__item:last-child{border-bottom:none;}
|
||||
.detail-list__label{width:140px;flex-shrink:0;color:var(--text-secondary);font-size:var(--font-sm);}
|
||||
.detail-list__value{flex:1;font-size:var(--font-sm);color:var(--text-primary);word-break:break-all;}
|
||||
/* 疫苗接种记录弹窗 */
|
||||
.vaccine-modal{width:960px;max-height:85vh;}
|
||||
.vaccine-header-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
|
||||
@@ -217,6 +225,16 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-item">
|
||||
<label>养殖区</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>A1-猪舍</option>
|
||||
<option>B3-鸡舍</option>
|
||||
<option>C2-鸭舍</option>
|
||||
<option>D1-羊舍</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>养殖批次号</label>
|
||||
<input class="filter-input" type="text" placeholder="请输入养殖批次号">
|
||||
@@ -240,16 +258,6 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<option>轻微异常</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>养殖区</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option>
|
||||
<option>A1-猪舍</option>
|
||||
<option>B3-鸡舍</option>
|
||||
<option>C2-鸭舍</option>
|
||||
<option>D1-羊舍</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>入栏时间</label>
|
||||
<input class="filter-input" type="date" style="min-width:140px;">
|
||||
@@ -397,7 +405,7 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>养殖区/舍编号<span class="required">*</span></label>
|
||||
<input type="text" placeholder="请输入养殖区/舍编号">
|
||||
<select><option>请选择</option><option>A1-猪舍</option><option>B3-鸡舍</option><option>C2-鸭舍</option><option>D1-羊舍</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>入栏数量(头/只)<span class="required">*</span></label>
|
||||
@@ -488,18 +496,18 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 养殖批次详情弹窗（只读） -->
|
||||
<div class="modal-overlay" id="detailModal" style="display:none;">
|
||||
<div class="modal detail-modal">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">养殖批次详情</span>
|
||||
<span class="modal-close" onclick="closeDetailModal()">×</span>
|
||||
<!-- 养殖批次详情抽屉（只读） -->
|
||||
<div class="drawer-overlay" id="detailDrawer" onclick="if(event.target===this)closeDetailDrawer();">
|
||||
<div class="drawer">
|
||||
<div class="drawer-header">
|
||||
<span class="drawer-title">养殖批次详情</span>
|
||||
<span class="drawer-close" onclick="closeDetailDrawer()">×</span>
|
||||
</div>
|
||||
<div class="modal-body" style="padding:0;">
|
||||
<div class="detail-grid" id="detailGrid"></div>
|
||||
<div class="drawer-body">
|
||||
<ul class="detail-list" id="detailList"></ul>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeDetailModal()">关闭</button>
|
||||
<div class="drawer-footer">
|
||||
<button class="btn btn-default" onclick="closeDetailDrawer()">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -516,23 +524,22 @@ function openModal(mode){
|
||||
function closeModal(){document.getElementById('modalOverlay').style.display='none';}
|
||||
document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
|
||||
// 详情弹窗
|
||||
// 详情抽屉
|
||||
var detailLabels=['养殖批次号','动物种类','品种','养殖区/舍编号','入栏数量(头/只)','入栏日期','当前存栏数','平均体重(kg)','养殖方式','健康状态','负责人','负责人电话','养殖状态','预计出栏日期'];
|
||||
function showDetail(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var grid=document.getElementById('detailGrid');
|
||||
grid.innerHTML='';
|
||||
var list=document.getElementById('detailList');
|
||||
list.innerHTML='';
|
||||
for(var i=0;i<detailLabels.length;i++){
|
||||
var div=document.createElement('div');
|
||||
div.className='detail-item'+(i===0?' full':'');
|
||||
div.innerHTML='<span class="detail-label">'+detailLabels[i]+'</span><span class="detail-value">'+tds[i].innerHTML+'</span>';
|
||||
grid.appendChild(div);
|
||||
var li=document.createElement('li');
|
||||
li.className='detail-list__item';
|
||||
li.innerHTML='<span class="detail-list__label">'+detailLabels[i]+'</span><span class="detail-list__value">'+tds[i].innerHTML+'</span>';
|
||||
list.appendChild(li);
|
||||
}
|
||||
document.getElementById('detailModal').style.display='flex';
|
||||
document.getElementById('detailDrawer').classList.add('open');
|
||||
}
|
||||
function closeDetailModal(){document.getElementById('detailModal').style.display='none';}
|
||||
document.getElementById('detailModal').addEventListener('click',function(e){if(e.target===this)closeDetailModal();});
|
||||
function closeDetailDrawer(){document.getElementById('detailDrawer').classList.remove('open');}
|
||||
|
||||
// 疫苗接种记录弹窗
|
||||
var vaccineData={
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -118,8 +118,35 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
.form-item textarea{height:80px;padding:8px 12px;resize:vertical;}
|
||||
.form-item select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;padding-right:28px;}
|
||||
/* 评分星星 */
|
||||
.star-rating{display:flex;gap:4px;font-size:24px;cursor:pointer;}
|
||||
.star-rating .star{color:#ddd;transition:color .2s;}.star-rating .star.active{color:#FAAD14;}
|
||||
/* 地块多行展示 */
|
||||
.td-land{white-space:normal !important;line-height:1.8;min-width:180px;}
|
||||
/* 多选下拉模拟 */
|
||||
.multi-select{position:relative;}
|
||||
.multi-select__trigger{min-height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 28px 4px 8px;font-size:var(--font-sm);cursor:pointer;display:flex;flex-wrap:wrap;gap:4px;align-items:center;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;}
|
||||
.multi-select__trigger:focus{border-color:var(--primary);outline:none;}
|
||||
.multi-select__tag{display:inline-flex;align-items:center;gap:2px;background:var(--primary-light);color:var(--primary);padding:1px 6px;border-radius:3px;font-size:11px;}
|
||||
.multi-select__tag .remove{cursor:pointer;font-size:14px;line-height:1;}
|
||||
.multi-select__placeholder{color:var(--text-placeholder);font-size:var(--font-sm);}
|
||||
.multi-select__dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);z-index:10;max-height:200px;overflow-y:auto;display:none;}
|
||||
.multi-select.open .multi-select__dropdown{display:block;}
|
||||
.multi-select__option{padding:8px 12px;font-size:var(--font-sm);cursor:pointer;display:flex;align-items:center;gap:8px;}
|
||||
.multi-select__option:hover{background:#F5F7FA;}
|
||||
.multi-select__option input{margin:0;}
|
||||
/* 只读字段 */
|
||||
.form-readonly{height:36px;line-height:36px;padding:0 12px;background:#F5F7FA;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
/* 资质证书缩略图（表格内） */
|
||||
.td-cert{white-space:nowrap !important;}
|
||||
.cert-thumb{display:inline-block;width:32px;height:32px;border-radius:4px;background:#E6F7FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect x='1' y='2' width='14' height='12' rx='1.5' fill='none' stroke='%231890FF' stroke-width='1.2'/%3E%3Ccircle cx='5' cy='7' r='1.5' fill='%231890FF'/%3E%3Cpath d='M3 12l3-3 2 1.5L11 7l2 3' stroke='%231890FF' stroke-width='1' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;vertical-align:middle;margin-right:4px;border:1px solid #BAE7FF;}
|
||||
.cert-count{font-size:11px;color:var(--text-secondary);vertical-align:middle;}
|
||||
/* 图片上传区域（弹窗内） */
|
||||
.upload-area{display:flex;flex-wrap:wrap;gap:8px;}
|
||||
.upload-preview{position:relative;width:80px;height:80px;border-radius:var(--radius-sm);border:1px solid var(--border);overflow:hidden;}
|
||||
.upload-img{width:100%;height:100%;background:#E6F7FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect x='2' y='4' width='28' height='24' rx='3' fill='none' stroke='%231890FF' stroke-width='1.5'/%3E%3Ccircle cx='10' cy='14' r='3' fill='%231890FF'/%3E%3Cpath d='M5 24l7-7 4 3L22 13l5 7' stroke='%231890FF' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;}
|
||||
.upload-del{position:absolute;top:2px;right:2px;width:18px;height:18px;background:rgba(0,0,0,.45);color:#fff;border-radius:50%;font-size:12px;line-height:18px;text-align:center;cursor:pointer;display:none;}
|
||||
.upload-preview:hover .upload-del{display:block;}
|
||||
.upload-btn{width:80px;height:80px;border:1px dashed var(--border);border-radius:var(--radius-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;gap:2px;color:#999;font-size:12px;transition:border-color .2s;}
|
||||
.upload-btn:hover{border-color:var(--primary);color:var(--primary);}
|
||||
.upload-hint{font-size:11px;color:var(--text-placeholder);margin-top:4px;width:100%;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -244,17 +271,17 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>编号</th><th>基地/场所名称</th><th>供应类别</th><th>负责人</th>
|
||||
<th>地块/养殖区</th><th>当前产能(kg/月)</th><th>运营状态</th><th>最近供货</th><th>操作</th>
|
||||
<th>编号</th><th>基地/场所名称</th><th>供应类别</th><th>负责人</th><th>负责人电话</th>
|
||||
<th>地块/养殖区</th><th>年均产能</th><th>产能单位</th><th>累计订单</th><th>运营状态</th><th>最近供货</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>SUP-IN-001</td><td>A区蔬菜基地</td><td>蔬菜</td><td>李负责人</td><td>LAND-001/LAND-002</td><td>2,400</td><td><span class="tag tag-green">运营中</span></td><td>今日</td><td class="td-actions"><a class="link" onclick="openInternalModal('edit','SUP-IN-001','A区蔬菜基地','蔬菜','李负责人')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>SUP-IN-002</td><td>B区根茎基地</td><td>蔬菜</td><td>王负责人</td><td>LAND-002</td><td>1,200</td><td><span class="tag tag-green">运营中</span></td><td>今日</td><td class="td-actions"><a class="link" onclick="openInternalModal('edit','SUP-IN-002','B区根茎基地','蔬菜','王负责人')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>SUP-IN-003</td><td>C区菌菇大棚</td><td>蔬菜</td><td>张负责人</td><td>LAND-003</td><td>480</td><td><span class="tag tag-green">运营中</span></td><td>昨日</td><td class="td-actions"><a class="link" onclick="openInternalModal('edit','SUP-IN-003','C区菌菇大棚','蔬菜','张负责人')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>SUP-IN-004</td><td>D区豆类基地</td><td>蔬菜</td><td>李负责人</td><td>LAND-004</td><td>860</td><td><span class="tag tag-gray">休耕中</span></td><td>3天前</td><td class="td-actions"><a class="link" onclick="openInternalModal('edit','SUP-IN-004','D区豆类基地','蔬菜','李负责人')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>SUP-IN-005</td><td>A1-猪舍</td><td>肉禽</td><td>赵负责人</td><td>BREED-A1</td><td>3,200</td><td><span class="tag tag-green">运营中</span></td><td>本周</td><td class="td-actions"><a class="link" onclick="openInternalModal('edit','SUP-IN-005','A1-猪舍','肉禽','赵负责人')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>SUP-IN-006</td><td>B3-鸡舍</td><td>肉禽</td><td>陈负责人</td><td>BREED-B3</td><td>1,800</td><td><span class="tag tag-green">运营中</span></td><td>本周</td><td class="td-actions"><a class="link" onclick="openInternalModal('edit','SUP-IN-006','B3-鸡舍','肉禽','陈负责人')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>SUP-IN-001</td><td>A区蔬菜基地</td><td>蔬菜</td><td>李负责人</td><td>138****6601</td><td class="td-land">LAND-001【一号菠菜大棚】<br>LAND-002【二号叶菜大棚】</td><td>28,800</td><td>公斤</td><td>86</td><td><span class="tag tag-green">运营中</span></td><td>2026-05-22</td><td class="td-actions"><a class="link" onclick="openInternalModal('edit')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>SUP-IN-002</td><td>B区根茎基地</td><td>蔬菜</td><td>王负责人</td><td>139****7702</td><td class="td-land">LAND-003【根茎种植区】<br>LAND-004【萝卜专区】</td><td>14,400</td><td>公斤</td><td>62</td><td><span class="tag tag-green">运营中</span></td><td>2026-05-22</td><td class="td-actions"><a class="link" onclick="openInternalModal('edit')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>SUP-IN-003</td><td>C区菌菇大棚</td><td>蔬菜</td><td>张负责人</td><td>137****3303</td><td class="td-land">LAND-005【菌菇培育棚】</td><td>5,760</td><td>公斤</td><td>41</td><td><span class="tag tag-green">运营中</span></td><td>2026-05-21</td><td class="td-actions"><a class="link" onclick="openInternalModal('edit')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>SUP-IN-004</td><td>D区豆类基地</td><td>蔬菜</td><td>李负责人</td><td>138****6601</td><td class="td-land">LAND-006【豆类种植区】<br>LAND-007【豆类育苗棚】</td><td>10,320</td><td>公斤</td><td>38</td><td><span class="tag tag-gray">休耕中</span></td><td>2026-05-19</td><td class="td-actions"><a class="link" onclick="openInternalModal('edit')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>SUP-IN-005</td><td>生猪养殖基地</td><td>肉禽</td><td>赵负责人</td><td>136****5505</td><td class="td-land">BREED-A1【生猪养殖一区】<br>BREED-A2【生猪养殖二区】</td><td>380</td><td>头</td><td>24</td><td><span class="tag tag-green">运营中</span></td><td>2026-05-20</td><td class="td-actions"><a class="link" onclick="openInternalModal('edit')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>SUP-IN-006</td><td>土鸡养殖基地</td><td>肉禽</td><td>陈负责人</td><td>135****4406</td><td class="td-land">BREED-B3【散养鸡舍】</td><td>6,000</td><td>只</td><td>18</td><td><span class="tag tag-green">运营中</span></td><td>2026-05-20</td><td class="td-actions"><a class="link" onclick="openInternalModal('edit')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -282,9 +309,9 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<label>资质状态</label>
|
||||
<label>合作状态</label>
|
||||
<select class="filter-select">
|
||||
<option>全部</option><option>正常</option><option>即将到期</option>
|
||||
<option>全部</option><option>正常</option><option>即将到期</option><option>合同终止</option><option>黑名单</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">查询</button>
|
||||
@@ -293,7 +320,6 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<button class="btn btn-primary" onclick="openExternalModal('add')">➕ 新增外部供应商</button>
|
||||
<button class="btn btn-default" onclick="openRateModal()">⭐ 评价供应商</button>
|
||||
<button class="btn btn-primary"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 10v2h10v-2M7 2v7M4.5 6.5L7 9l2.5-2.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>导出列表数据</button>
|
||||
<button class="btn btn-default"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M4 5h6M4 7.5h4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>查看导出任务</button>
|
||||
</div>
|
||||
@@ -306,16 +332,17 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>供应商名称</th><th>供应类别</th><th>联系电话</th><th>地址</th>
|
||||
<th>资质状态</th><th>综合评分</th><th>合作年限</th><th>累计订单</th>
|
||||
<th>上次供货</th><th>最近评价</th><th>操作</th>
|
||||
<th>供应商名称</th><th>供应类别</th><th>联系人</th><th>联系电话</th><th>地址</th>
|
||||
<th>资质证书</th><th>综合评分</th><th>合作期限</th><th>合作状态</th><th>累计订单</th>
|
||||
<th>上次供货</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>绿源蔬菜配送</td><td>蔬菜</td><td>138-0001-0001</td><td>本市郊区蔬菜基地</td><td><span class="tag tag-green">正常</span></td><td>4.6</td><td>3年</td><td>128单</td><td>今日</td><td>质量优/准时</td><td class="td-actions"><a class="link" onclick="openExternalModal('edit','绿源蔬菜配送','蔬菜','138-0001-0001','本市郊区蔬菜基地')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>鲜肉直供公司</td><td>肉类</td><td>139-0002-0002</td><td>本市农贸市场A区</td><td><span class="tag tag-green">正常</span></td><td>4.4</td><td>2年</td><td>96单</td><td>今日</td><td>质量良/准时</td><td class="td-actions"><a class="link" onclick="openExternalModal('edit','鲜肉直供公司','肉类','139-0002-0002','本市农贸市场A区')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>海鲜水产配送</td><td>水产</td><td>136-0003-0003</td><td>滨海水产批发市场</td><td><span class="tag tag-orange">即将到期</span></td><td>4.1</td><td>1年</td><td>48单</td><td>昨日</td><td>质量良/延迟</td><td class="td-actions"><a class="link" onclick="openExternalModal('edit','海鲜水产配送','水产','136-0003-0003','滨海水产批发市场')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>粮油批发商行</td><td>粮油</td><td>135-0004-0004</td><td>本市粮油批发中心</td><td><span class="tag tag-green">正常</span></td><td>4.5</td><td>4年</td><td>156单</td><td>3天前</td><td>质量优/准时</td><td class="td-actions"><a class="link" onclick="openExternalModal('edit','粮油批发商行','粮油','135-0004-0004','本市粮油批发中心')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>中粮</td><td>粮油</td><td>陈经理</td><td>138-0001-0001</td><td>西安运营中心</td><td class="td-cert"><span class="cert-thumb"></span><span class="cert-thumb"></span><span class="cert-count"></span></td><td>4.6</td><td>2023-03-01至2026-12-31</td><td><span class="tag tag-green">正常</span></td><td>128</td><td>2026-05-22</td><td class="td-actions"><a class="link" onclick="openExternalModal('edit')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>绿源蔬菜配送</td><td>蔬菜</td><td>张经理</td><td>138-0001-0001</td><td>本市郊区蔬菜基地</td><td class="td-cert"><span class="cert-thumb"></span><span class="cert-thumb"></span><span class="cert-count"></span></td><td>4.6</td><td>2023-03-01至2026-12-31</td><td><span class="tag tag-green">正常</span></td><td>128</td><td>2026-05-22</td><td class="td-actions"><a class="link" onclick="openExternalModal('edit')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>鲜肉直供公司</td><td>肉类</td><td>李总</td><td>139-0002-0002</td><td>本市农贸市场A区</td><td class="td-cert"><span class="cert-thumb"></span><span class="cert-thumb"></span><span class="cert-thumb"></span><span class="cert-count"></span></td><td>4.4</td><td>2024-01-15至2025-12-31</td><td><span class="tag tag-gray">合同终止</span></td><td>96</td><td>2026-05-22</td><td class="td-actions"><a class="link" onclick="openExternalModal('edit')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>海鲜水产配送</td><td>水产</td><td>王经理</td><td>136-0003-0003</td><td>滨海水产批发市场</td><td class="td-cert"><span class="cert-thumb"></span><span class="cert-count"></span></td><td>4.1</td><td>2025-06-01至2026-05-31</td><td><span class="tag tag-orange">即将到期</span></td><td>48</td><td>2026-05-21</td><td class="td-actions"><a class="link" onclick="openExternalModal('edit')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
<tr><td>粮油批发商行</td><td>粮油</td><td>赵主管</td><td>135-0004-0004</td><td>本市粮油批发中心</td><td class="td-cert"><span class="cert-thumb"></span><span class="cert-thumb"></span><span class="cert-count"></span></td><td>1.5</td><td>2022-01-01至2026-12-31</td><td><span class="tag tag-red">黑名单</span></td><td>36</td><td>2025-05-19</td><td class="td-actions"><a class="link" onclick="openExternalModal('edit')">编辑</a><a class="link" style="color:var(--danger)" onclick="if(confirm('确认删除？')){}">删除</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -341,10 +368,31 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="form-item"><label>基地/场所名称<span class="required">*</span></label><input id="int_name" placeholder="请输入基地或场所名称"></div>
|
||||
<div class="form-item"><label>供应类别<span class="required">*</span></label><select id="int_category"><option value="">请选择</option><option>蔬菜</option><option>肉禽</option><option>水产</option><option>粮油</option></select></div>
|
||||
<div class="form-item"><label>负责人<span class="required">*</span></label><input id="int_manager" placeholder="请输入负责人姓名"></div>
|
||||
<div class="form-item"><label>关联地块/养殖区</label><input placeholder="如 LAND-001"></div>
|
||||
<div class="form-item"><label>当前产能(kg/月)</label><input type="number" placeholder="请输入数字"></div>
|
||||
<div class="form-item"><label>负责人电话<span class="required">*</span></label><input placeholder="请输入联系电话"></div>
|
||||
<div class="form-item full"><label>关联地块/养殖区<span class="required">*</span></label>
|
||||
<div class="multi-select" id="landMultiSelect" onclick="toggleMultiSelect(event)">
|
||||
<div class="multi-select__trigger" tabindex="0">
|
||||
<span class="multi-select__tag">LAND-001【一号菠菜大棚】<span class="remove" onclick="removeTag(event,this)">×</span></span>
|
||||
<span class="multi-select__tag">LAND-002【二号叶菜大棚】<span class="remove" onclick="removeTag(event,this)">×</span></span>
|
||||
</div>
|
||||
<div class="multi-select__dropdown">
|
||||
<label class="multi-select__option"><input type="checkbox" checked> LAND-001【一号菠菜大棚】</label>
|
||||
<label class="multi-select__option"><input type="checkbox" checked> LAND-002【二号叶菜大棚】</label>
|
||||
<label class="multi-select__option"><input type="checkbox"> LAND-003【根茎种植区】</label>
|
||||
<label class="multi-select__option"><input type="checkbox"> LAND-004【萝卜专区】</label>
|
||||
<label class="multi-select__option"><input type="checkbox"> LAND-005【菌菇培育棚】</label>
|
||||
<label class="multi-select__option"><input type="checkbox"> LAND-006【豆类种植区】</label>
|
||||
<label class="multi-select__option"><input type="checkbox"> LAND-007【豆类育苗棚】</label>
|
||||
<label class="multi-select__option"><input type="checkbox"> BREED-A1【生猪养殖一区】</label>
|
||||
<label class="multi-select__option"><input type="checkbox"> BREED-A2【生猪养殖二区】</label>
|
||||
<label class="multi-select__option"><input type="checkbox"> BREED-B3【散养鸡舍】</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item"><label>年均产能<span class="required">*</span></label><input type="number" placeholder="请输入年均产能数值"></div>
|
||||
<div class="form-item"><label>产能单位<span class="required">*</span></label><select><option value="">请选择</option><option>公斤</option><option>吨</option><option>头</option><option>条</option><option>只</option><option>尾</option><option>个</option></select></div>
|
||||
<div class="form-item"><label>累计订单</label><div class="form-readonly">86（系统自动统计）</div></div>
|
||||
<div class="form-item"><label>运营状态<span class="required">*</span></label><select><option>运营中</option><option>休耕中</option></select></div>
|
||||
<div class="form-item"><label>联系电话</label><input placeholder="请输入联系电话"></div>
|
||||
<div class="form-item full"><label>备注</label><textarea placeholder="请输入备注信息"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -360,11 +408,25 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="form-grid">
|
||||
<div class="form-item"><label>供应商名称<span class="required">*</span></label><input id="ext_name" placeholder="请输入供应商名称"></div>
|
||||
<div class="form-item"><label>供应类别<span class="required">*</span></label><select id="ext_category"><option value="">请选择</option><option>蔬菜</option><option>肉类</option><option>水产</option><option>粮油</option></select></div>
|
||||
<div class="form-item"><label>联系人<span class="required">*</span></label><input id="ext_contact" placeholder="请输入联系人姓名"></div>
|
||||
<div class="form-item"><label>联系电话<span class="required">*</span></label><input id="ext_phone" placeholder="请输入联系电话"></div>
|
||||
<div class="form-item"><label>地址<span class="required">*</span></label><input id="ext_address" placeholder="请输入地址"></div>
|
||||
<div class="form-item full"><label>地址<span class="required">*</span></label><input id="ext_address" placeholder="请输入地址"></div>
|
||||
<div class="form-item full"><label>资质证书</label>
|
||||
<div class="upload-area">
|
||||
<div class="upload-preview"><div class="upload-img"></div><span class="upload-del" title="删除">×</span></div>
|
||||
<div class="upload-preview"><div class="upload-img"></div><span class="upload-del" title="删除">×</span></div>
|
||||
<div class="upload-btn">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="#999" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<span>上传图片</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload-hint">支持 JPG、PNG 格式，单张不超过 5MB，最多上传 5 张</div>
|
||||
</div>
|
||||
<div class="form-item"><label>资质到期日期</label><input type="date"></div>
|
||||
<div class="form-item"><label>营业执照编号</label><input placeholder="请输入营业执照编号"></div>
|
||||
<div class="form-item"><label>综合评分</label><input type="number" min="0" max="5" step="0.1" placeholder="0~5 分"></div>
|
||||
<div class="form-item"><label>合作开始日期</label><input type="date"></div>
|
||||
<div class="form-item"><label>合作结束日期</label><input type="date"></div>
|
||||
<div class="form-item"><label>合作状态<span class="required">*</span></label><select><option>正常</option><option>即将到期</option><option>合同终止</option><option>黑名单</option></select></div>
|
||||
<div class="form-item full"><label>备注</label><textarea placeholder="请输入备注信息"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -372,21 +434,6 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 弹窗：评价供应商 -->
|
||||
<div class="modal-overlay" id="rateModal" onclick="if(event.target===this)closeRateModal()">
|
||||
<div class="modal" style="width:520px;">
|
||||
<div class="modal-header"><span class="modal-title">评价供应商</span><span class="modal-close" onclick="closeRateModal()">×</span></div>
|
||||
<div class="modal-body">
|
||||
<div class="form-grid" style="grid-template-columns:1fr;">
|
||||
<div class="form-item"><label>选择供应商<span class="required">*</span></label><select><option value="">请选择供应商</option><option>绿源蔬菜配送</option><option>鲜肉直供公司</option><option>海鲜水产配送</option><option>粮油批发商行</option></select></div>
|
||||
<div class="form-item"><label>质量评分<span class="required">*</span></label><div class="star-rating" data-field="quality"><span class="star" data-v="1">★</span><span class="star" data-v="2">★</span><span class="star" data-v="3">★</span><span class="star" data-v="4">★</span><span class="star" data-v="5">★</span></div></div>
|
||||
<div class="form-item"><label>时效评分<span class="required">*</span></label><div class="star-rating" data-field="timeliness"><span class="star" data-v="1">★</span><span class="star" data-v="2">★</span><span class="star" data-v="3">★</span><span class="star" data-v="4">★</span><span class="star" data-v="5">★</span></div></div>
|
||||
<div class="form-item"><label>评价内容</label><textarea placeholder="请输入评价内容"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer"><button class="btn btn-default" onclick="closeRateModal()">取消</button><button class="btn btn-primary">提交评价</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 页签切换
|
||||
@@ -400,14 +447,10 @@ function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
(function(){var active=document.querySelector('.sidebar-item.active');if(!active)return;var sub=active.closest('.sidebar-subgroup');if(sub)sub.classList.add('open');})();
|
||||
|
||||
// 弹窗控制 - 内部供应商
|
||||
function openInternalModal(mode, id, name, category, manager){
|
||||
function openInternalModal(mode){
|
||||
var m=document.getElementById('internalModal');
|
||||
document.getElementById('internalModalTitle').textContent=mode==='edit'?'编辑内部供应商':'新增内部供应商';
|
||||
if(mode==='edit'){
|
||||
document.getElementById('int_name').value=name||'';
|
||||
document.getElementById('int_category').value=category||'';
|
||||
document.getElementById('int_manager').value=manager||'';
|
||||
}else{
|
||||
if(mode!=='edit'){
|
||||
m.querySelectorAll('input,textarea').forEach(function(el){el.value='';});
|
||||
m.querySelectorAll('select').forEach(function(el){el.selectedIndex=0;});
|
||||
}
|
||||
@@ -415,16 +458,24 @@ function openInternalModal(mode, id, name, category, manager){
|
||||
}
|
||||
function closeInternalModal(){document.getElementById('internalModal').style.display='none';}
|
||||
|
||||
// 多选下拉交互
|
||||
function toggleMultiSelect(e){
|
||||
if(e.target.closest('.remove'))return;
|
||||
var ms=e.currentTarget;
|
||||
ms.classList.toggle('open');
|
||||
}
|
||||
function removeTag(e,el){e.stopPropagation();el.parentElement.remove();}
|
||||
document.addEventListener('click',function(e){
|
||||
document.querySelectorAll('.multi-select.open').forEach(function(ms){
|
||||
if(!ms.contains(e.target))ms.classList.remove('open');
|
||||
});
|
||||
});
|
||||
|
||||
// 弹窗控制 - 外部供应商
|
||||
function openExternalModal(mode, name, category, phone, address){
|
||||
function openExternalModal(mode){
|
||||
var m=document.getElementById('externalModal');
|
||||
document.getElementById('externalModalTitle').textContent=mode==='edit'?'编辑外部供应商':'新增外部供应商';
|
||||
if(mode==='edit'){
|
||||
document.getElementById('ext_name').value=name||'';
|
||||
document.getElementById('ext_category').value=category||'';
|
||||
document.getElementById('ext_phone').value=phone||'';
|
||||
document.getElementById('ext_address').value=address||'';
|
||||
}else{
|
||||
if(mode!=='edit'){
|
||||
m.querySelectorAll('input,textarea').forEach(function(el){el.value='';});
|
||||
m.querySelectorAll('select').forEach(function(el){el.selectedIndex=0;});
|
||||
}
|
||||
@@ -432,27 +483,6 @@ function openExternalModal(mode, name, category, phone, address){
|
||||
}
|
||||
function closeExternalModal(){document.getElementById('externalModal').style.display='none';}
|
||||
|
||||
// 弹窗控制 - 评价供应商
|
||||
function openRateModal(){
|
||||
var m=document.getElementById('rateModal');
|
||||
m.querySelectorAll('.star').forEach(function(s){s.classList.remove('active');});
|
||||
m.querySelectorAll('select').forEach(function(el){el.selectedIndex=0;});
|
||||
m.querySelectorAll('textarea').forEach(function(el){el.value='';});
|
||||
m.style.display='flex';
|
||||
}
|
||||
function closeRateModal(){document.getElementById('rateModal').style.display='none';}
|
||||
|
||||
// 星星评分交互
|
||||
document.querySelectorAll('.star-rating').forEach(function(rating){
|
||||
rating.addEventListener('click',function(e){
|
||||
var star=e.target.closest('.star');
|
||||
if(!star)return;
|
||||
var val=parseInt(star.dataset.v);
|
||||
rating.querySelectorAll('.star').forEach(function(s){
|
||||
s.classList.toggle('active',parseInt(s.dataset.v)<=val);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -100,6 +100,27 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
.form-item input,.form-item select,.form-item textarea{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-item input:focus,.form-item select:focus{border-color:var(--primary);}
|
||||
.form-item select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;padding-right:28px;}
|
||||
/* 右侧抽屉 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;animation:modalFadeIn .2s ease;}
|
||||
.drawer-overlay.closing{animation:modalFadeOut .2s ease forwards;}
|
||||
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
|
||||
@keyframes modalFadeOut{from{opacity:1}to{opacity:0}}
|
||||
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:90vw;background:#fff;box-shadow:-6px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;z-index:1001;animation:drawerSlideIn .25s ease;}
|
||||
.drawer-overlay.closing .drawer{animation:drawerSlideOut .2s ease forwards;}
|
||||
@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
|
||||
@keyframes drawerSlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}}
|
||||
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.drawer__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;}
|
||||
.drawer__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.drawer__body{padding:0 24px 24px;overflow-y:auto;flex:1;}
|
||||
.drawer-section{margin-top:20px;}
|
||||
.drawer-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
|
||||
.drawer-section__title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--primary);border-radius:2px;}
|
||||
.drawer-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;}
|
||||
.drawer-field{display:flex;flex-direction:column;gap:2px;}
|
||||
.drawer-field__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.drawer-field__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;min-height:22px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -161,12 +182,12 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<table>
|
||||
<thead><tr><th>订单号</th><th>溯源码</th><th>净菜类型</th><th>净菜/餐品</th><th>包装规格</th><th>需求份数</th><th>需求计量(kg)</th><th>订单状态</th><th>申领时间</th><th>预定配送时间</th><th>创建人</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>CO-001</td><td>NC-INT-BOCA-20260422-01</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>菠菜</td><td>500g/袋</td><td>50</td><td>25</td><td><span class="tag tag-green">已完成</span></td><td>2026-04-22 07:30</td><td>2026-04-22 10:00</td><td>张厨师</td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-002</td><td>NC-INT-ZLRJ-20260422-01</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>猪排骨</td><td>2kg/盘</td><td>20</td><td>40</td><td><span class="tag tag-blue">配送中</span></td><td>2026-04-22 08:00</td><td>2026-04-22 10:30</td><td>李主管</td><td class="td-actions"><span class="link" style="color:var(--success)">确认收货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-003</td><td>NC-INT-JXRJ-20260422-01</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>宫保鸡丁</td><td>标准份（500g）</td><td>30</td><td>15</td><td><span class="tag tag-blue">配送中</span></td><td>2026-04-22 08:00</td><td>2026-04-22 10:30</td><td>李主管</td><td class="td-actions"><span class="link" style="color:var(--success)">确认收货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-005</td><td>NC-INT-QZYU-20260422-01</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>清蒸鱼</td><td>标准份（500g）</td><td>15</td><td>7.5</td><td><span class="tag tag-orange">待配送</span></td><td>2026-04-22 09:00</td><td>2026-04-22 11:00</td><td>王厨师</td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-006</td><td>NC-INT-TDSI-20260422-01</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>土豆（土豆丝）</td><td>500g/袋</td><td>40</td><td>20</td><td><span class="tag tag-gray">备货中</span></td><td>2026-04-22 09:15</td><td>2026-04-22 11:00</td><td>张厨师</td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-008</td><td>NC-INT-XLHU-20260422-01</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>西兰花</td><td>500g/袋</td><td>30</td><td>15</td><td><span class="tag tag-green">已完成</span></td><td>2026-04-22 10:00</td><td>2026-04-22 11:30</td><td>王厨师</td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-001</td><td>NC-INT-BOCA-20260422-01</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>菠菜</td><td>500g/袋</td><td>50</td><td>25</td><td><span class="tag tag-green">已完成</span></td><td>2026-04-22 07:30</td><td>2026-04-22 10:00</td><td>张厨师</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-002</td><td>NC-INT-ZLRJ-20260422-01</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>猪排骨</td><td>2kg/盘</td><td>20</td><td>40</td><td><span class="tag tag-blue">配送中</span></td><td>2026-04-22 08:00</td><td>2026-04-22 10:30</td><td>李主管</td><td class="td-actions"><span class="link" style="color:var(--success)" onclick="confirmReceive(this)">确认收货</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-003</td><td>NC-INT-JXRJ-20260422-01</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>宫保鸡丁</td><td>标准份（500g）</td><td>30</td><td>15</td><td><span class="tag tag-blue">配送中</span></td><td>2026-04-22 08:00</td><td>2026-04-22 10:30</td><td>李主管</td><td class="td-actions"><span class="link" style="color:var(--success)" onclick="confirmReceive(this)">确认收货</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-005</td><td>NC-INT-QZYU-20260422-01</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>清蒸鱼</td><td>标准份（500g）</td><td>15</td><td>7.5</td><td><span class="tag tag-orange">待配送</span></td><td>2026-04-22 09:00</td><td>2026-04-22 11:00</td><td>王厨师</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-006</td><td>NC-INT-TDSI-20260422-01</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>土豆（土豆丝）</td><td>500g/袋</td><td>40</td><td>20</td><td><span class="tag tag-gray">备货中</span></td><td>2026-04-22 09:15</td><td>2026-04-22 11:00</td><td>张厨师</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>CO-008</td><td>NC-INT-XLHU-20260422-01</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>西兰花</td><td>500g/袋</td><td>30</td><td>15</td><td><span class="tag tag-green">已完成</span></td><td>2026-04-22 10:00</td><td>2026-04-22 11:30</td><td>王厨师</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -233,6 +254,23 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 弹窗：确认收货 -->
|
||||
<div class="modal-mask" id="modal-confirm-receive">
|
||||
<div class="modal" style="width:420px;">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">确认收货</div>
|
||||
<button class="modal__close" onclick="closeModal('modal-confirm-receive')">✕</button>
|
||||
</div>
|
||||
<div class="modal__body" style="text-align:center;padding:32px 24px;">
|
||||
<div style="font-size:40px;margin-bottom:12px;">📦</div>
|
||||
<div id="confirmReceiveMsg" style="font-size:var(--font-base);color:var(--text-primary);">确认已收到该订单的净菜配送？</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal('modal-confirm-receive')">取消</button>
|
||||
<button class="btn btn-primary" onclick="doConfirmReceive()">确认收货</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// 弹窗开关
|
||||
function openModal(id){document.getElementById(id).classList.add('show');}
|
||||
@@ -241,6 +279,54 @@ function closeModal(id){document.getElementById(id).classList.remove('show');}
|
||||
document.querySelectorAll('.modal-mask').forEach(function(m){m.addEventListener('click',function(e){if(e.target===m)m.classList.remove('show');});});
|
||||
// 净菜类型切换：显示净菜名称或餐品名称
|
||||
function toggleOrderName(){var v=document.getElementById('orderType').value;document.getElementById('orderNameNC').style.display=(v==='cp'?'none':'flex');document.getElementById('orderNameCP').style.display=(v==='cp'?'flex':'none');}
|
||||
|
||||
// 确认收货
|
||||
var _confirmReceiveRow=null;
|
||||
function confirmReceive(el){
|
||||
_confirmReceiveRow=el.closest('tr');
|
||||
var orderNo=_confirmReceiveRow.querySelectorAll('td')[0].textContent;
|
||||
var foodName=_confirmReceiveRow.querySelectorAll('td')[3].textContent;
|
||||
document.getElementById('confirmReceiveMsg').innerHTML='确认已收到订单 <b>'+orderNo+'</b>（'+foodName+'）的净菜配送？';
|
||||
openModal('modal-confirm-receive');
|
||||
}
|
||||
function doConfirmReceive(){
|
||||
if(!_confirmReceiveRow)return;
|
||||
// 更新状态列为"已完成"
|
||||
var statusTd=_confirmReceiveRow.querySelectorAll('td')[7];
|
||||
statusTd.innerHTML='<span class="tag tag-green">已完成</span>';
|
||||
// 移除"确认收货"按钮
|
||||
var actionTd=_confirmReceiveRow.querySelector('.td-actions');
|
||||
var confirmBtn=actionTd.querySelector('span[onclick*="confirmReceive"]');
|
||||
if(confirmBtn)confirmBtn.remove();
|
||||
_confirmReceiveRow=null;
|
||||
closeModal('modal-confirm-receive');
|
||||
}
|
||||
|
||||
// 抽屉组件
|
||||
function closeDrawer(){
|
||||
var overlay=document.querySelector('.drawer-overlay');
|
||||
if(!overlay)return;
|
||||
overlay.classList.add('closing');
|
||||
setTimeout(function(){overlay.remove();},200);
|
||||
}
|
||||
function showDetail(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var ths=document.querySelectorAll('thead th');
|
||||
// 获取订单号（第一列）
|
||||
var orderNo=tds[0].textContent;
|
||||
// 构建字段数据（排除最后的操作列）
|
||||
var fields='';
|
||||
for(var i=0;i<ths.length-1;i++){
|
||||
fields+='<div class="drawer-field"><div class="drawer-field__label">'+ths[i].textContent+'</div><div class="drawer-field__value">'+tds[i].innerHTML+'</div></div>';
|
||||
}
|
||||
var html='<div class="drawer-overlay" onclick="if(event.target===this)closeDrawer()">'
|
||||
+'<div class="drawer">'
|
||||
+'<div class="drawer__header"><div class="drawer__title">净菜订单详情 — '+orderNo+'</div><button class="drawer__close" onclick="closeDrawer()">✕</button></div>'
|
||||
+'<div class="drawer__body"><div class="drawer-section"><div class="drawer-section__title">订单信息</div><div class="drawer-fields">'+fields+'</div></div></div>'
|
||||
+'</div></div>';
|
||||
document.body.insertAdjacentHTML('beforeend',html);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -160,6 +160,27 @@ tbody tr.row-active td.td-actions{background:var(--primary-light);}
|
||||
.video-info{display:flex;gap:24px;margin-top:16px;padding:12px 0;border-top:1px solid var(--border);}
|
||||
.video-info__item{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.video-info__item span{color:var(--text-primary);font-weight:500;}
|
||||
/* 右侧抽屉 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;animation:modalFadeIn .2s ease;}
|
||||
.drawer-overlay.closing{animation:modalFadeOut .2s ease forwards;}
|
||||
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
|
||||
@keyframes modalFadeOut{from{opacity:1}to{opacity:0}}
|
||||
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:90vw;background:#fff;box-shadow:-6px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;z-index:1001;animation:drawerSlideIn .25s ease;}
|
||||
.drawer-overlay.closing .drawer{animation:drawerSlideOut .2s ease forwards;}
|
||||
@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
|
||||
@keyframes drawerSlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}}
|
||||
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.drawer__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;}
|
||||
.drawer__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.drawer__body{padding:0 24px 24px;overflow-y:auto;flex:1;}
|
||||
.drawer-section{margin-top:20px;}
|
||||
.drawer-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
|
||||
.drawer-section__title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--primary);border-radius:2px;}
|
||||
.drawer-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;}
|
||||
.drawer-field{display:flex;flex-direction:column;gap:2px;}
|
||||
.drawer-field__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.drawer-field__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;min-height:22px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -311,12 +332,12 @@ tbody tr.row-active td.td-actions{background:var(--primary-light);}
|
||||
<table>
|
||||
<thead><tr><th>格口</th><th>溯源码</th><th>存放净菜</th><th>类型</th><th>初始重量(kg)</th><th>当前余量(kg)</th><th>操作人</th><th>温度(℃)</th><th>保质剩余</th><th>存入时间</th><th>状态</th><th>操作</th></tr></thead>
|
||||
<tbody id="detailTable">
|
||||
<tr class="row-active" data-slot="0"><td>A1-01</td><td>NC-CAB-BOCA-0422-01</td><td>土豆（土豆丝）</td><td><span class="tag tag-green">🥬 净菜</span></td><td>12.5</td><td>10.2</td><td>张厨师</td><td>4.2</td><td>剩余32h</td><td>04-22 09:15</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-01','土豆')">视频</span> <span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="1"><td>A1-02</td><td>NC-CAB-HLUB-0422-01</td><td>净胡萝卜</td><td><span class="tag tag-green">🥬 净菜</span></td><td>18.0</td><td>15.6</td><td>李主管</td><td>4.1</td><td>剩余46h</td><td>04-22 09:20</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-02','净胡萝卜')">视频</span> <span class="link">详情</span><span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="2"><td>A1-03</td><td>NC-CAB-XGUO-0422-01</td><td>净香菇</td><td><span class="tag tag-green">🥬 净菜</span></td><td>9.0</td><td>6.8</td><td>王厨师</td><td>4.3</td><td>剩余6h</td><td>04-22 09:30</td><td><span class="tag tag-orange">临期预警</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-03','净香菇')">视频</span> <span class="link">详情</span><span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="3"><td>A1-04</td><td>NC-CAB-XLHU-0422-01</td><td>净西兰花</td><td><span class="tag tag-green">🥬 净菜</span></td><td>10.0</td><td>8.5</td><td>张厨师</td><td>4.0</td><td>剩余50h</td><td>04-22 09:40</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-04','净西兰花')">视频</span> <span class="link">详情</span><span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="4"><td>A1-05</td><td>PKG-DH-001</td><td>宫保鸡丁</td><td><span class="tag tag-orange">🍱 餐品包</span></td><td>6.0</td><td>5.4</td><td>李主管</td><td>3.8</td><td>剩余44h</td><td>04-22 10:20</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-05','宫保鸡丁')">视频</span> <span class="link">详情</span><span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="5"><td>A1-06</td><td>NC-CAB-BCAI-0422-01</td><td>净白菜</td><td><span class="tag tag-green">🥬 净菜</span></td><td>22.0</td><td>18.0</td><td>王厨师</td><td>7.8</td><td>剩余40h</td><td>04-22 08:50</td><td><span class="tag tag-red">已过期</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-06','净白菜')">视频</span> <span class="link">详情</span><span class="link">编辑</span></td></tr>
|
||||
<tr class="row-active" data-slot="0"><td>A1-01</td><td>NC-CAB-BOCA-0422-01</td><td>土豆（土豆丝）</td><td><span class="tag tag-green">🥬 净菜</span></td><td>12.5</td><td>10.2</td><td>张厨师</td><td>4.2</td><td>剩余32h</td><td>04-22 09:15</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-01','土豆')">视频</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="1"><td>A1-02</td><td>NC-CAB-HLUB-0422-01</td><td>净胡萝卜</td><td><span class="tag tag-green">🥬 净菜</span></td><td>18.0</td><td>15.6</td><td>李主管</td><td>4.1</td><td>剩余46h</td><td>04-22 09:20</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-02','净胡萝卜')">视频</span> <span class="link" onclick="showDetail(this)">详情</span><span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="2"><td>A1-03</td><td>NC-CAB-XGUO-0422-01</td><td>净香菇</td><td><span class="tag tag-green">🥬 净菜</span></td><td>9.0</td><td>6.8</td><td>王厨师</td><td>4.3</td><td>剩余6h</td><td>04-22 09:30</td><td><span class="tag tag-orange">临期预警</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-03','净香菇')">视频</span> <span class="link" onclick="showDetail(this)">详情</span><span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="3"><td>A1-04</td><td>NC-CAB-XLHU-0422-01</td><td>净西兰花</td><td><span class="tag tag-green">🥬 净菜</span></td><td>10.0</td><td>8.5</td><td>张厨师</td><td>4.0</td><td>剩余50h</td><td>04-22 09:40</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-04','净西兰花')">视频</span> <span class="link" onclick="showDetail(this)">详情</span><span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="4"><td>A1-05</td><td>PKG-DH-001</td><td>宫保鸡丁</td><td><span class="tag tag-orange">🍱 餐品包</span></td><td>6.0</td><td>5.4</td><td>李主管</td><td>3.8</td><td>剩余44h</td><td>04-22 10:20</td><td><span class="tag tag-green">存放中</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-05','宫保鸡丁')">视频</span> <span class="link" onclick="showDetail(this)">详情</span><span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="5"><td>A1-06</td><td>NC-CAB-BCAI-0422-01</td><td>净白菜</td><td><span class="tag tag-green">🥬 净菜</span></td><td>22.0</td><td>18.0</td><td>王厨师</td><td>7.8</td><td>剩余40h</td><td>04-22 08:50</td><td><span class="tag tag-red">已过期</span></td><td class="td-actions"><a class="link" href="trace-timeline.html">溯源</a> <span class="link" onclick="showVideo('A1-06','净白菜')">视频</span> <span class="link" onclick="showDetail(this)">详情</span><span class="link">编辑</span></td></tr>
|
||||
<tr data-slot="6"><td>A1-07</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>4.1</td><td>—</td><td>—</td><td><span class="tag tag-gray">空闲</span></td><td class="td-actions">—</td></tr>
|
||||
<tr data-slot="7"><td>A1-08</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>4.1</td><td>—</td><td>—</td><td><span class="tag tag-gray">空闲</span></td><td class="td-actions">—</td></tr>
|
||||
<tr data-slot="8"><td>A1-09</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>4.2</td><td>—</td><td>—</td><td><span class="tag tag-gray">空闲</span></td><td class="td-actions">—</td></tr>
|
||||
@@ -413,6 +434,36 @@ function showVideo(code,name){
|
||||
document.body.appendChild(mask);
|
||||
}
|
||||
function closeVideoModal(){var m=document.getElementById('videoModal');if(m)m.remove();}
|
||||
|
||||
/* 右侧抽屉组件 */
|
||||
var Drawer={
|
||||
open:function(title,bodyHtml){
|
||||
this.close();
|
||||
var overlay=document.createElement('div');
|
||||
overlay.className='drawer-overlay';
|
||||
overlay.innerHTML='<div class="drawer"><div class="drawer__header"><div class="drawer__title">'+title+'</div><button class="drawer__close" onclick="Drawer.close()">×</button></div><div class="drawer__body">'+bodyHtml+'</div></div>';
|
||||
overlay.addEventListener('click',function(e){if(e.target===overlay)Drawer.close();});
|
||||
document.body.appendChild(overlay);
|
||||
},
|
||||
close:function(){
|
||||
var o=document.querySelector('.drawer-overlay');
|
||||
if(!o)return;
|
||||
o.classList.add('closing');
|
||||
setTimeout(function(){o.remove();},200);
|
||||
}
|
||||
};
|
||||
function showDetail(el){
|
||||
var row=el.closest('tr');
|
||||
var table=row.closest('table');
|
||||
var headers=table.querySelectorAll('thead th');
|
||||
var cells=row.querySelectorAll('td');
|
||||
var html='<div class="drawer-section"><div class="drawer-section__title">详细信息</div><div class="drawer-fields">';
|
||||
for(var i=0;i<headers.length-1;i++){
|
||||
html+='<div class="drawer-field"><span class="drawer-field__label">'+headers[i].textContent.trim()+'</span><span class="drawer-field__value">'+cells[i].innerHTML.trim()+'</span></div>';
|
||||
}
|
||||
html+='</div></div>';
|
||||
Drawer.open('保温柜详情 — '+cells[0].textContent.trim(),html);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -97,6 +97,30 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
.action-more__item:hover{background:var(--primary-light);color:var(--primary);}
|
||||
.action-more__item--danger{color:var(--danger);}
|
||||
.action-more__item--danger:hover{background:#FFF1F0;color:var(--danger);}
|
||||
/* 右侧抽屉 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;animation:modalFadeIn .2s ease;}
|
||||
.drawer-overlay.closing{animation:modalFadeOut .2s ease forwards;}
|
||||
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
|
||||
@keyframes modalFadeOut{from{opacity:1}to{opacity:0}}
|
||||
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:90vw;background:#fff;box-shadow:-6px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;z-index:1001;animation:drawerSlideIn .25s ease;}
|
||||
.drawer-overlay.closing .drawer{animation:drawerSlideOut .2s ease forwards;}
|
||||
@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
|
||||
@keyframes drawerSlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}}
|
||||
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.drawer__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;}
|
||||
.drawer__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.drawer__body{padding:0 24px 24px;overflow-y:auto;flex:1;}
|
||||
.drawer-section{margin-top:20px;}
|
||||
.drawer-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
|
||||
.drawer-section__title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--primary);border-radius:2px;}
|
||||
.drawer-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;}
|
||||
.drawer-field{display:flex;flex-direction:column;gap:2px;}
|
||||
.drawer-field__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.drawer-field__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;min-height:22px;}
|
||||
/* 顶部提示条 */
|
||||
.toast{position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-20px);background:#f6ffed;border:1px solid #b7eb8f;color:#52c41a;padding:10px 24px;border-radius:var(--radius-sm);font-size:var(--font-sm);font-weight:500;z-index:9999;box-shadow:var(--shadow-md);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;display:flex;align-items:center;gap:8px;}
|
||||
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -155,14 +179,14 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="table-card__header"><div class="table-card__title">净菜组配</div></div>
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr><th>任务编号</th><th>目标餐品</th><th>餐品规格</th><th>份数</th><th>任务截止时间</th><th>食材配方</th><th>任务来源</th><th>组配状态</th><th>负责人</th><th>完成时间</th><th>操作</th></tr></thead>
|
||||
<thead><tr><th>任务编号</th><th>目标餐品</th><th>餐品规格</th><th>份数</th><th>任务截止时间</th><th>食材配方</th><th>任务来源</th><th>组配状态</th><th>负责人</th><th>操作类型</th><th>完成时间</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>CMB-001</td><td>宫保鸡丁</td><td>标准份（300g）</td><td>50</td><td>2026-05-20 11:00</td><td><a class="link" onclick="openRecipeModal('宫保鸡丁')">食材明细</a></td><td><span class="tag tag-blue">餐线</span></td><td><span class="tag tag-green">已完成</span></td><td>李组配</td><td>2026-05-20 10:30:00</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>CMB-002</td><td>番茄炒蛋</td><td>大份（500g）</td><td>80</td><td>2026-05-20 11:00</td><td><a class="link" onclick="openRecipeModal('番茄炒蛋')">食材明细</a></td><td><span class="tag tag-blue">餐线</span></td><td><span class="tag tag-green">已完成</span></td><td>王组配</td><td>2026-05-20 10:45:00</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>CMB-003</td><td>红烧肉</td><td>标准份（300g）</td><td>60</td><td>2026-05-20 11:30</td><td><a class="link" onclick="openRecipeModal('红烧肉')">食材明细</a></td><td><span class="tag tag-blue">餐线</span></td><td><span class="tag tag-blue">组配中</span></td><td>张组配</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span> <a class="link" style="color:var(--success)">完成组配</a></td></tr>
|
||||
<tr><td>CMB-004</td><td>清蒸鱼</td><td>标准份（500g）</td><td>40</td><td>2026-05-20 12:00</td><td><a class="link" onclick="openRecipeModal('清蒸鱼')">食材明细</a></td><td><span class="tag tag-orange">点餐</span></td><td><span class="tag tag-orange">待组配</span></td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span> <a class="link">开始组配</a></td></tr>
|
||||
<tr><td>CMB-005</td><td>炒时蔬</td><td>小份（200g）</td><td>20</td><td>2026-05-20 11:00</td><td><a class="link" onclick="openRecipeModal('炒时蔬')">食材明细</a></td><td><span class="tag tag-gray">录入</span></td><td><span class="tag tag-green">已完成</span></td><td>赵组配</td><td>2026-05-20 10:50:00</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>CMB-006</td><td>豆腐</td><td>小份（200g）</td><td>35</td><td>2026-05-20 12:00</td><td><a class="link" onclick="openRecipeModal('豆腐')">食材明细</a></td><td><span class="tag tag-orange">点餐</span></td><td><span class="tag tag-orange">待组配</span></td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span> <a class="link">开始组配</a></td></tr>
|
||||
<tr><td>CMB-001</td><td>宫保鸡丁</td><td>标准份（300g）</td><td>50</td><td>2026-05-20 11:00</td><td><a class="link" onclick="openRecipeModal('宫保鸡丁')">食材明细</a></td><td><span class="tag tag-blue">餐线</span></td><td><span class="tag tag-green">已完成</span></td><td>李组配</td><td><span class="tag tag-blue">设备自动</span></td><td>2026-05-20 10:30:00</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>CMB-002</td><td>番茄炒蛋</td><td>大份（500g）</td><td>80</td><td>2026-05-20 11:00</td><td><a class="link" onclick="openRecipeModal('番茄炒蛋')">食材明细</a></td><td><span class="tag tag-blue">餐线</span></td><td><span class="tag tag-green">已完成</span></td><td>王组配</td><td><span class="tag tag-blue">设备自动</span></td><td>2026-05-20 10:45:00</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>CMB-003</td><td>红烧肉</td><td>标准份（300g）</td><td>60</td><td>2026-05-20 11:30</td><td><a class="link" onclick="openRecipeModal('红烧肉')">食材明细</a></td><td><span class="tag tag-blue">餐线</span></td><td><span class="tag tag-blue">组配中</span></td><td>张组配</td><td><span class="tag tag-green">人工录入</span></td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span> <a class="link" style="color:var(--success)" onclick="finishCombo(this)">完成组配</a></td></tr>
|
||||
<tr><td>CMB-004</td><td>清蒸鱼</td><td>标准份（500g）</td><td>40</td><td>2026-05-20 12:00</td><td><a class="link" onclick="openRecipeModal('清蒸鱼')">食材明细</a></td><td><span class="tag tag-orange">点餐</span></td><td><span class="tag tag-orange">待组配</span></td><td>—</td><td><span class="tag tag-green">人工录入</span></td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span> <a class="link" onclick="startCombo(this)">开始组配</a></td></tr>
|
||||
<tr><td>CMB-005</td><td>炒时蔬</td><td>小份（200g）</td><td>20</td><td>2026-05-20 11:00</td><td><a class="link" onclick="openRecipeModal('炒时蔬')">食材明细</a></td><td><span class="tag tag-gray">录入</span></td><td><span class="tag tag-green">已完成</span></td><td>赵组配</td><td><span class="tag tag-blue">设备自动</span></td><td>2026-05-20 10:50:00</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>CMB-006</td><td>豆腐</td><td>小份（200g）</td><td>35</td><td>2026-05-20 12:00</td><td><a class="link" onclick="openRecipeModal('豆腐')">食材明细</a></td><td><span class="tag tag-orange">点餐</span></td><td><span class="tag tag-orange">待组配</span></td><td>—</td><td><span class="tag tag-green">人工录入</span></td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span> <a class="link" onclick="startCombo(this)">开始组配</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -213,6 +237,10 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<label>任务来源<span class="required">*</span></label>
|
||||
<select><option value="">请选择</option><option>录入</option><option>点餐</option><option>餐线</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>操作类型<span class="required">*</span></label>
|
||||
<select><option value="">请选择</option><option>设备自动</option><option>人工录入</option></select>
|
||||
</div>
|
||||
<div class="form-item full" style="margin-top:8px;padding:12px 16px;background:#F8FBFF;border-radius:var(--radius-sm);border:1px dashed var(--primary);">
|
||||
<label style="color:var(--primary);font-size:12px;">💡 食材明细将根据所选餐品与规格自动计算生成，无需手动填写</label>
|
||||
</div>
|
||||
@@ -260,6 +288,88 @@ document.getElementById('modalOverlay').addEventListener('click',function(e){if(
|
||||
function openRecipeModal(name){document.getElementById('recipeModalTitle').textContent='食材明细 - '+name;document.getElementById('recipeModal').style.display='flex';}
|
||||
function closeRecipeModal(){document.getElementById('recipeModal').style.display='none';}
|
||||
document.getElementById('recipeModal').addEventListener('click',function(e){if(e.target===this)closeRecipeModal();});
|
||||
|
||||
/* 右侧抽屉组件 */
|
||||
var Drawer={
|
||||
open:function(title,bodyHtml){
|
||||
this.close();
|
||||
var overlay=document.createElement('div');
|
||||
overlay.className='drawer-overlay';
|
||||
overlay.innerHTML='<div class="drawer"><div class="drawer__header"><div class="drawer__title">'+title+'</div><button class="drawer__close" onclick="Drawer.close()">×</button></div><div class="drawer__body">'+bodyHtml+'</div></div>';
|
||||
overlay.addEventListener('click',function(e){if(e.target===overlay)Drawer.close();});
|
||||
document.body.appendChild(overlay);
|
||||
},
|
||||
close:function(){
|
||||
var o=document.querySelector('.drawer-overlay');
|
||||
if(!o)return;
|
||||
o.classList.add('closing');
|
||||
setTimeout(function(){o.remove();},200);
|
||||
}
|
||||
};
|
||||
|
||||
/* 顶部提示条 */
|
||||
var _toastTimer=null;
|
||||
function showToast(msg){
|
||||
var el=document.getElementById('globalToast');
|
||||
if(!el){
|
||||
el=document.createElement('div');
|
||||
el.id='globalToast';
|
||||
el.className='toast';
|
||||
document.body.appendChild(el);
|
||||
}
|
||||
clearTimeout(_toastTimer);
|
||||
el.innerHTML=msg;
|
||||
el.classList.remove('show');
|
||||
void el.offsetWidth;
|
||||
el.classList.add('show');
|
||||
_toastTimer=setTimeout(function(){el.classList.remove('show');},2000);
|
||||
}
|
||||
|
||||
/* 开始组配 */
|
||||
function startCombo(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var taskId=tds[0].textContent;
|
||||
// 状态列(第7列)改为"组配中"
|
||||
tds[7].innerHTML='<span class="tag tag-blue">组配中</span>';
|
||||
// 按钮替换为"完成组配"
|
||||
el.style.color='var(--success)';
|
||||
el.setAttribute('onclick','finishCombo(this)');
|
||||
el.textContent='完成组配';
|
||||
showToast('✅ '+taskId+' 已开始组配');
|
||||
}
|
||||
|
||||
/* 完成组配 */
|
||||
function finishCombo(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var taskId=tds[0].textContent;
|
||||
// 状态列改为"已完成"
|
||||
tds[7].innerHTML='<span class="tag tag-green">已完成</span>';
|
||||
// 完成时间列(第10列)填入当前时间
|
||||
var now=new Date();
|
||||
var ts=now.getFullYear()+'-'+String(now.getMonth()+1).padStart(2,'0')+'-'+String(now.getDate()).padStart(2,'0')+' '+String(now.getHours()).padStart(2,'0')+':'+String(now.getMinutes()).padStart(2,'0')+':'+String(now.getSeconds()).padStart(2,'0');
|
||||
tds[10].textContent=ts;
|
||||
// 移除按钮
|
||||
el.remove();
|
||||
showToast('✅ '+taskId+' 组配已完成');
|
||||
}
|
||||
|
||||
/* 详情抽屉 */
|
||||
function showDetail(el){
|
||||
var tr=el.closest('tr');
|
||||
var ths=tr.closest('table').querySelectorAll('thead th');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var labels=[];
|
||||
for(var i=0;i<ths.length-1;i++){labels.push(ths[i].textContent.trim());}
|
||||
var taskId=tds[0].textContent.trim();
|
||||
var html='<div class="drawer-section"><div class="drawer-section__title">基本信息</div><div class="drawer-fields">';
|
||||
for(var i=0;i<labels.length;i++){
|
||||
html+='<div class="drawer-field"><div class="drawer-field__label">'+labels[i]+'</div><div class="drawer-field__value">'+tds[i].innerHTML+'</div></div>';
|
||||
}
|
||||
html+='</div></div>';
|
||||
Drawer.open('组合详情 — '+taskId,html);
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -110,6 +110,30 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
.temp-chart__x{position:absolute;left:48px;right:16px;bottom:8px;display:flex;justify-content:space-between;font-size:11px;color:#999;}
|
||||
.temp-chart__area{width:100%;height:100%;position:relative;}
|
||||
.temp-chart__svg{width:100%;height:100%;}
|
||||
/* 右侧抽屉 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;animation:modalFadeIn .2s ease;}
|
||||
.drawer-overlay.closing{animation:modalFadeOut .2s ease forwards;}
|
||||
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
|
||||
@keyframes modalFadeOut{from{opacity:1}to{opacity:0}}
|
||||
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:90vw;background:#fff;box-shadow:-6px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;z-index:1001;animation:drawerSlideIn .25s ease;}
|
||||
.drawer-overlay.closing .drawer{animation:drawerSlideOut .2s ease forwards;}
|
||||
@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
|
||||
@keyframes drawerSlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}}
|
||||
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.drawer__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;}
|
||||
.drawer__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.drawer__body{padding:0 24px 24px;overflow-y:auto;flex:1;}
|
||||
.drawer-section{margin-top:20px;}
|
||||
.drawer-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
|
||||
.drawer-section__title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--primary);border-radius:2px;}
|
||||
.drawer-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;}
|
||||
.drawer-field{display:flex;flex-direction:column;gap:2px;}
|
||||
.drawer-field__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.drawer-field__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;min-height:22px;}
|
||||
/* 顶部提示条 */
|
||||
.toast{position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-20px);background:#f6ffed;border:1px solid #b7eb8f;color:#52c41a;padding:10px 24px;border-radius:var(--radius-sm);font-size:var(--font-sm);font-weight:500;z-index:9999;box-shadow:var(--shadow-md);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;display:flex;align-items:center;gap:8px;}
|
||||
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -171,13 +195,13 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<table>
|
||||
<thead><tr><th>烹制任务号</th><th>来源类型</th><th>组配任务号</th><th>菜品名称</th><th>餐品规格</th><th>需求份数</th><th>烹制份数</th><th>烹制日期</th><th>烹制开始</th><th>烹制结束</th><th>烹制状态</th><th>厨师</th><th>食材明细</th><th>温度过程</th><th>模型数据</th><th>生重(kg)</th><th>熟重(kg)</th><th>生熟比</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>COOK-001</td><td><span class="tag tag-blue">点餐</span></td><td>CMB-001</td><td>宫保鸡丁</td><td>标准份（300g）</td><td>50</td><td>50</td><td>2026-05-20</td><td>11:00</td><td>11:20</td><td><span class="tag tag-green">已完成</span></td><td>张厨师</td><td><a class="link" onclick="openIngredientModal('宫保鸡丁')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><a class="link" onclick="openModelModal()"><span class="tag tag-green">92分</span></a></td><td>8.5</td><td>7.2</td><td>1：0.85</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link">通知取餐</span></td></tr>
|
||||
<tr><td>COOK-002</td><td><span class="tag tag-blue">点餐</span></td><td>CMB-002</td><td>番茄炒蛋</td><td>大份（500g）</td><td>80</td><td>80</td><td>2026-05-20</td><td>11:05</td><td>11:20</td><td><span class="tag tag-green">已完成</span></td><td>李厨师</td><td><a class="link" onclick="openIngredientModal('番茄炒蛋')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><a class="link" onclick="openModelModal()"><span class="tag tag-green">88分</span></a></td><td>12.0</td><td>10.4</td><td>1：0.87</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link">通知取餐</span></td></tr>
|
||||
<tr><td>COOK-003</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-003</td><td>红烧肉</td><td>标准份（300g）</td><td>60</td><td>—</td><td>2026-05-20</td><td>11:10</td><td>—</td><td><span class="tag tag-blue">烹制中</span></td><td>王厨师</td><td><a class="link" onclick="openIngredientModal('红烧肉')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><span class="tag tag-blue">分析中</span></td><td>10.0</td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link">烹制完成</span></td></tr>
|
||||
<tr><td>COOK-004</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-004</td><td>清蒸鱼</td><td>标准份（500g）</td><td>40</td><td>—</td><td>2026-05-20</td><td>11:15</td><td>—</td><td><span class="tag tag-blue">烹制中</span></td><td>张厨师</td><td><a class="link" onclick="openIngredientModal('清蒸鱼')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><span class="tag tag-blue">分析中</span></td><td>6.5</td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link">烹制完成</span></td></tr>
|
||||
<tr><td>COOK-005</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-005</td><td>蒜蓉菠菜</td><td>标准份（300g）</td><td>100</td><td>—</td><td>2026-05-20</td><td>—</td><td>—</td><td><span class="tag tag-orange">待烹制</span></td><td>—</td><td><a class="link" onclick="openIngredientModal('蒜蓉菠菜')">食材明细</a></td><td>—</td><td>—</td><td>15.0</td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link">开始烹制</span></td></tr>
|
||||
<tr><td>COOK-006</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-005</td><td>炒时蔬</td><td>小份（200g）</td><td>20</td><td>20</td><td>2026-05-20</td><td>11:10</td><td>11:30</td><td><span class="tag tag-green">已完成</span></td><td>赵厨师</td><td><a class="link" onclick="openIngredientModal('炒时蔬')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><a class="link" onclick="openModelModal()"><span class="tag tag-green">95分</span></a></td><td>18.0</td><td>15.6</td><td>1：0.87</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link">通知取餐</span></td></tr>
|
||||
<tr><td>COOK-007</td><td><span class="tag tag-blue">点餐</span></td><td>CMB-006</td><td>豆腐</td><td>小份（200g）</td><td>35</td><td>35</td><td>2026-05-20</td><td>11:20</td><td>11:35</td><td><span class="tag tag-green">已完成</span></td><td>陈厨师</td><td><a class="link" onclick="openIngredientModal('豆腐')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><a class="link" onclick="openModelModal()"><span class="tag tag-green">78分</span></a></td><td>4.2</td><td>3.9</td><td>1：0.93</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link">通知取餐</span></td></tr>
|
||||
<tr><td>COOK-001</td><td><span class="tag tag-blue">点餐</span></td><td>CMB-001</td><td>宫保鸡丁</td><td>标准份（300g）</td><td>50</td><td>50</td><td>2026-05-20</td><td>11:00</td><td>11:20</td><td><span class="tag tag-green">已完成</span></td><td>张厨师</td><td><a class="link" onclick="openIngredientModal('宫保鸡丁')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><a class="link" onclick="openModelModal()"><span class="tag tag-green">92分</span></a></td><td>8.5</td><td>7.2</td><td>1：0.85</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link" onclick="notifyPickup(this)">通知取餐</span></td></tr>
|
||||
<tr><td>COOK-002</td><td><span class="tag tag-blue">点餐</span></td><td>CMB-002</td><td>番茄炒蛋</td><td>大份（500g）</td><td>80</td><td>80</td><td>2026-05-20</td><td>11:05</td><td>11:20</td><td><span class="tag tag-green">已完成</span></td><td>李厨师</td><td><a class="link" onclick="openIngredientModal('番茄炒蛋')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><a class="link" onclick="openModelModal()"><span class="tag tag-green">88分</span></a></td><td>12.0</td><td>10.4</td><td>1：0.87</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link" onclick="notifyPickup(this)">通知取餐</span></td></tr>
|
||||
<tr><td>COOK-003</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-003</td><td>红烧肉</td><td>标准份（300g）</td><td>60</td><td>—</td><td>2026-05-20</td><td>11:10</td><td>—</td><td><span class="tag tag-blue">烹制中</span></td><td>王厨师</td><td><a class="link" onclick="openIngredientModal('红烧肉')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><span class="tag tag-blue">分析中</span></td><td>10.0</td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link" onclick="finishCook(this)">烹制完成</span></td></tr>
|
||||
<tr><td>COOK-004</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-004</td><td>清蒸鱼</td><td>标准份（500g）</td><td>40</td><td>—</td><td>2026-05-20</td><td>11:15</td><td>—</td><td><span class="tag tag-blue">烹制中</span></td><td>张厨师</td><td><a class="link" onclick="openIngredientModal('清蒸鱼')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><span class="tag tag-blue">分析中</span></td><td>6.5</td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link" onclick="finishCook(this)">烹制完成</span></td></tr>
|
||||
<tr><td>COOK-005</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-005</td><td>蒜蓉菠菜</td><td>标准份（300g）</td><td>100</td><td>—</td><td>2026-05-20</td><td>—</td><td>—</td><td><span class="tag tag-orange">待烹制</span></td><td>—</td><td><a class="link" onclick="openIngredientModal('蒜蓉菠菜')">食材明细</a></td><td>—</td><td>—</td><td>15.0</td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link" onclick="startCook(this)">开始烹制</span></td></tr>
|
||||
<tr><td>COOK-006</td><td><span class="tag tag-gray">餐线</span></td><td>CMB-005</td><td>炒时蔬</td><td>小份（200g）</td><td>20</td><td>20</td><td>2026-05-20</td><td>11:10</td><td>11:30</td><td><span class="tag tag-green">已完成</span></td><td>赵厨师</td><td><a class="link" onclick="openIngredientModal('炒时蔬')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><a class="link" onclick="openModelModal()"><span class="tag tag-green">95分</span></a></td><td>18.0</td><td>15.6</td><td>1：0.87</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link" onclick="notifyPickup(this)">通知取餐</span></td></tr>
|
||||
<tr><td>COOK-007</td><td><span class="tag tag-blue">点餐</span></td><td>CMB-006</td><td>豆腐</td><td>小份（200g）</td><td>35</td><td>35</td><td>2026-05-20</td><td>11:20</td><td>11:35</td><td><span class="tag tag-green">已完成</span></td><td>陈厨师</td><td><a class="link" onclick="openIngredientModal('豆腐')">食材明细</a></td><td><a class="link" onclick="openTempModal()">温度曲线</a></td><td><a class="link" onclick="openModelModal()"><span class="tag tag-green">78分</span></a></td><td>4.2</td><td>3.9</td><td>1：0.93</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span><span class="link" onclick="notifyPickup(this)">通知取餐</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -298,6 +322,97 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
function openIngredientModal(name){document.getElementById('ingredientTitle').textContent='食材明细 - '+name;document.getElementById('ingredientModal').style.display='flex';}
|
||||
function openTempModal(){document.getElementById('tempModal').style.display='flex';}
|
||||
function openModelModal(){document.getElementById('modelModal').style.display='flex';}
|
||||
|
||||
/* 右侧抽屉组件 */
|
||||
var Drawer={
|
||||
open:function(title,bodyHtml){
|
||||
this.close();
|
||||
var overlay=document.createElement('div');
|
||||
overlay.className='drawer-overlay';
|
||||
overlay.innerHTML='<div class="drawer"><div class="drawer__header"><div class="drawer__title">'+title+'</div><button class="drawer__close" onclick="Drawer.close()">×</button></div><div class="drawer__body">'+bodyHtml+'</div></div>';
|
||||
overlay.addEventListener('click',function(e){if(e.target===overlay)Drawer.close();});
|
||||
document.body.appendChild(overlay);
|
||||
},
|
||||
close:function(){
|
||||
var o=document.querySelector('.drawer-overlay');
|
||||
if(!o)return;
|
||||
o.classList.add('closing');
|
||||
setTimeout(function(){o.remove();},200);
|
||||
}
|
||||
};
|
||||
|
||||
/* 顶部提示条 */
|
||||
var _toastTimer=null;
|
||||
function showToast(msg){
|
||||
var el=document.getElementById('globalToast');
|
||||
if(!el){
|
||||
el=document.createElement('div');
|
||||
el.id='globalToast';
|
||||
el.className='toast';
|
||||
document.body.appendChild(el);
|
||||
}
|
||||
clearTimeout(_toastTimer);
|
||||
el.innerHTML=msg;
|
||||
el.classList.remove('show');
|
||||
void el.offsetWidth;
|
||||
el.classList.add('show');
|
||||
_toastTimer=setTimeout(function(){el.classList.remove('show');},2000);
|
||||
}
|
||||
function _timeNow(){var d=new Date();return String(d.getHours()).padStart(2,'0')+':'+String(d.getMinutes()).padStart(2,'0');}
|
||||
|
||||
/* 开始烹制 */
|
||||
function startCook(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var taskId=tds[0].textContent;
|
||||
// 状态列(第10列)改为"烹制中"
|
||||
tds[10].innerHTML='<span class="tag tag-blue">烹制中</span>';
|
||||
// 烹制开始列(第8列)填入当前时间
|
||||
tds[8].textContent=_timeNow();
|
||||
// 按钮替换为"烹制完成"
|
||||
el.setAttribute('onclick','finishCook(this)');
|
||||
el.textContent='烹制完成';
|
||||
showToast('✅ '+taskId+' 已开始烹制');
|
||||
}
|
||||
|
||||
/* 烹制完成 */
|
||||
function finishCook(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var taskId=tds[0].textContent;
|
||||
// 状态列改为"已完成"
|
||||
tds[10].innerHTML='<span class="tag tag-green">已完成</span>';
|
||||
// 烹制结束列(第9列)填入当前时间
|
||||
tds[9].textContent=_timeNow();
|
||||
// 按钮替换为"通知取餐"
|
||||
el.setAttribute('onclick','notifyPickup(this)');
|
||||
el.textContent='通知取餐';
|
||||
showToast('✅ '+taskId+' 烹制已完成');
|
||||
}
|
||||
|
||||
/* 通知取餐 */
|
||||
function notifyPickup(el){
|
||||
var tr=el.closest('tr');
|
||||
var taskId=tr.querySelectorAll('td')[0].textContent;
|
||||
var dishName=tr.querySelectorAll('td')[3].textContent;
|
||||
showToast('✅ '+taskId+'（'+dishName+'）已通知取餐');
|
||||
}
|
||||
|
||||
/* 详情抽屉 */
|
||||
function showDetail(el){
|
||||
var tr=el.closest('tr');
|
||||
var ths=tr.closest('table').querySelectorAll('thead th');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var fields='';
|
||||
for(var i=0;i<ths.length-1;i++){
|
||||
var label=ths[i].textContent;
|
||||
var value=tds[i].innerHTML;
|
||||
fields+='<div class="drawer-field"><div class="drawer-field__label">'+label+'</div><div class="drawer-field__value">'+value+'</div></div>';
|
||||
}
|
||||
var key=tds[0].textContent;
|
||||
var bodyHtml='<div class="drawer-section"><div class="drawer-section__title">基本信息</div><div class="drawer-fields">'+fields+'</div></div>';
|
||||
Drawer.open('烹饪详情 — '+key, bodyHtml);
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -95,6 +95,27 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
.autofill-card__item{display:flex;flex-direction:column;gap:2px;}
|
||||
.autofill-card__label{font-size:11px;color:#8c8c8c;}
|
||||
.autofill-card__value{font-size:13px;color:#262626;font-weight:500;}
|
||||
/* 右侧抽屉 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;animation:modalFadeIn .2s ease;}
|
||||
.drawer-overlay.closing{animation:modalFadeOut .2s ease forwards;}
|
||||
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
|
||||
@keyframes modalFadeOut{from{opacity:1}to{opacity:0}}
|
||||
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:90vw;background:#fff;box-shadow:-6px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;z-index:1001;animation:drawerSlideIn .25s ease;}
|
||||
.drawer-overlay.closing .drawer{animation:drawerSlideOut .2s ease forwards;}
|
||||
@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
|
||||
@keyframes drawerSlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}}
|
||||
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.drawer__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;}
|
||||
.drawer__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.drawer__body{padding:0 24px 24px;overflow-y:auto;flex:1;}
|
||||
.drawer-section{margin-top:20px;}
|
||||
.drawer-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
|
||||
.drawer-section__title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--primary);border-radius:2px;}
|
||||
.drawer-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;}
|
||||
.drawer-field{display:flex;flex-direction:column;gap:2px;}
|
||||
.drawer-field__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.drawer-field__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;min-height:22px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -139,12 +160,12 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<table>
|
||||
<thead><tr><th>送达餐线</th><th>餐次</th><th>送达设备(秤台)</th><th>识别方式</th><th>菜品名称</th><th>当前余量(kg)</th><th>上餐重量(kg)</th><th>出锅时间</th><th>送达餐线时间</th><th>上餐状态</th><th>烹制任务号</th><th>出锅温度(℃)</th><th>厨师</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>A区中餐线</td><td><span class="tag tag-blue">午餐</span></td><td>00025号秤</td><td><span class="tag tag-green">🤖 自动识别</span></td><td>宫保鸡丁</td><td>12.5</td><td>38.2</td><td>11:18</td><td>11:30</td><td><span class="tag tag-green">上餐完成</span></td><td>COOK-001</td><td>82</td><td>张厨师</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>A区中餐线</td><td><span class="tag tag-blue">午餐</span></td><td>00025号秤</td><td><span class="tag tag-green">🤖 自动识别</span></td><td>番茄炒蛋</td><td>8.3</td><td>22.6</td><td>11:20</td><td>11:30</td><td><span class="tag tag-green">上餐完成</span></td><td>COOK-002</td><td>78</td><td>李厨师</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>B区中餐线</td><td><span class="tag tag-blue">午餐</span></td><td>00027号秤</td><td><span class="tag tag-blue">👤 人工选择</span></td><td>红烧肉</td><td>1.2</td><td>42.6</td><td>11:22</td><td>11:38</td><td><span class="tag tag-red">余量不足</span></td><td>COOK-003</td><td>86</td><td>王厨师</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>A区早餐线</td><td><span class="tag tag-gray">早餐</span></td><td>00022号秤</td><td><span class="tag tag-green">🤖 自动识别</span></td><td>小米粥</td><td>0</td><td>12.6</td><td>07:20</td><td>07:28</td><td><span class="tag tag-green">上餐完成</span></td><td>COOK-006</td><td>75</td><td>赵厨师</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>B区早餐线</td><td><span class="tag tag-gray">早餐</span></td><td>00023号秤</td><td><span class="tag tag-blue">👤 人工选择</span></td><td>燕麦粥</td><td>2.1</td><td>8.4</td><td>07:22</td><td>07:35</td><td><span class="tag tag-green">上餐完成</span></td><td>COOK-007</td><td>72</td><td>陈厨师</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>C区快餐线</td><td><span class="tag tag-blue">午餐</span></td><td>00028号秤</td><td><span class="tag tag-blue">👤 人工选择</span></td><td>蒜蓉菠菜</td><td>—</td><td>—</td><td>—</td><td>—</td><td><span class="tag tag-gray">待上餐</span></td><td>COOK-005</td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>A区中餐线</td><td><span class="tag tag-blue">午餐</span></td><td>00025号秤</td><td><span class="tag tag-green">🤖 自动识别</span></td><td>宫保鸡丁</td><td>12.5</td><td>38.2</td><td>11:18</td><td>11:30</td><td><span class="tag tag-green">上餐完成</span></td><td>COOK-001</td><td>82</td><td>张厨师</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>A区中餐线</td><td><span class="tag tag-blue">午餐</span></td><td>00025号秤</td><td><span class="tag tag-green">🤖 自动识别</span></td><td>番茄炒蛋</td><td>8.3</td><td>22.6</td><td>11:20</td><td>11:30</td><td><span class="tag tag-green">上餐完成</span></td><td>COOK-002</td><td>78</td><td>李厨师</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>B区中餐线</td><td><span class="tag tag-blue">午餐</span></td><td>00027号秤</td><td><span class="tag tag-blue">👤 人工选择</span></td><td>红烧肉</td><td>1.2</td><td>42.6</td><td>11:22</td><td>11:38</td><td><span class="tag tag-red">余量不足</span></td><td>COOK-003</td><td>86</td><td>王厨师</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>A区早餐线</td><td><span class="tag tag-gray">早餐</span></td><td>00022号秤</td><td><span class="tag tag-green">🤖 自动识别</span></td><td>小米粥</td><td>0</td><td>12.6</td><td>07:20</td><td>07:28</td><td><span class="tag tag-green">上餐完成</span></td><td>COOK-006</td><td>75</td><td>赵厨师</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>B区早餐线</td><td><span class="tag tag-gray">早餐</span></td><td>00023号秤</td><td><span class="tag tag-blue">👤 人工选择</span></td><td>燕麦粥</td><td>2.1</td><td>8.4</td><td>07:22</td><td>07:35</td><td><span class="tag tag-green">上餐完成</span></td><td>COOK-007</td><td>72</td><td>陈厨师</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>C区快餐线</td><td><span class="tag tag-blue">午餐</span></td><td>00028号秤</td><td><span class="tag tag-blue">👤 人工选择</span></td><td>蒜蓉菠菜</td><td>—</td><td>—</td><td>—</td><td>—</td><td><span class="tag tag-gray">待上餐</span></td><td>COOK-005</td><td>—</td><td>—</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -260,6 +281,42 @@ function onDishChange(sel){
|
||||
document.getElementById('af_recog').textContent=d.recog;
|
||||
document.getElementById('af_weight').textContent=d.weight+' kg';
|
||||
}
|
||||
|
||||
/* 右侧抽屉组件 */
|
||||
var Drawer={
|
||||
open:function(title,bodyHtml){
|
||||
this.close();
|
||||
var overlay=document.createElement('div');
|
||||
overlay.className='drawer-overlay';
|
||||
overlay.innerHTML='<div class="drawer"><div class="drawer__header"><div class="drawer__title">'+title+'</div><button class="drawer__close" onclick="Drawer.close()">×</button></div><div class="drawer__body">'+bodyHtml+'</div></div>';
|
||||
overlay.addEventListener('click',function(e){if(e.target===overlay)Drawer.close();});
|
||||
document.body.appendChild(overlay);
|
||||
},
|
||||
close:function(){
|
||||
var o=document.querySelector('.drawer-overlay');
|
||||
if(!o)return;
|
||||
o.classList.add('closing');
|
||||
setTimeout(function(){o.remove();},200);
|
||||
}
|
||||
};
|
||||
|
||||
/* 详情抽屉 —— 通用函数，根据 thead 动态生成字段 */
|
||||
function showDetail(el){
|
||||
var tr=el.closest('tr');
|
||||
var table=tr.closest('table');
|
||||
var ths=table.querySelectorAll('thead th');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var dishName='';
|
||||
var fields='';
|
||||
for(var i=0;i<ths.length-1;i++){
|
||||
var label=ths[i].textContent.trim();
|
||||
var value=tds[i]?tds[i].innerHTML.trim():'';
|
||||
if(label==='菜品名称')dishName=tds[i].textContent.trim();
|
||||
fields+='<div class="drawer-field"><div class="drawer-field__label">'+label+'</div><div class="drawer-field__value">'+value+'</div></div>';
|
||||
}
|
||||
var body='<div class="drawer-section"><div class="drawer-section__title">上餐信息</div><div class="drawer-fields">'+fields+'</div></div>';
|
||||
Drawer.open('上餐详情 — '+dishName,body);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -108,6 +108,27 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
.welfare-meta__label{font-size:12px;color:#8c8c8c;}
|
||||
.welfare-meta__value{font-size:14px;color:#262626;font-weight:500;}
|
||||
.welfare-summary{margin-top:16px;padding:12px 16px;background:#f6ffed;border-radius:6px;border:1px solid #b7eb8f;font-size:13px;color:#595959;}
|
||||
/* 右侧抽屉 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;animation:modalFadeIn .2s ease;}
|
||||
.drawer-overlay.closing{animation:modalFadeOut .2s ease forwards;}
|
||||
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
|
||||
@keyframes modalFadeOut{from{opacity:1}to{opacity:0}}
|
||||
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:90vw;background:#fff;box-shadow:-6px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;z-index:1001;animation:drawerSlideIn .25s ease;}
|
||||
.drawer-overlay.closing .drawer{animation:drawerSlideOut .2s ease forwards;}
|
||||
@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
|
||||
@keyframes drawerSlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}}
|
||||
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.drawer__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;}
|
||||
.drawer__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.drawer__body{padding:0 24px 24px;overflow-y:auto;flex:1;}
|
||||
.drawer-section{margin-top:20px;}
|
||||
.drawer-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
|
||||
.drawer-section__title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--primary);border-radius:2px;}
|
||||
.drawer-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;}
|
||||
.drawer-field{display:flex;flex-direction:column;gap:2px;}
|
||||
.drawer-field__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.drawer-field__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;min-height:22px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -171,14 +192,14 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<table>
|
||||
<thead><tr><th>处置单号</th><th>菜品名称</th><th>餐线</th><th>餐次</th><th>计划制作(kg)</th><th>实际制作(kg)</th><th>销售/取餐(kg)</th><th>余量(kg)</th><th>余量率(%)</th><th>处置方式</th><th>备注</th><th>处置数量(kg)</th><th>交叉核对状态</th><th>处置时间</th><th>处置人员</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>SUR-002</td><td>白米饭</td><td>A区中餐线</td><td>午餐</td><td>60.0</td><td>62.0</td><td>54.0</td><td class="td-surplus">8.0</td><td>12.9%</td><td>捐赠</td><td>捐赠予未央环卫</td><td>5.0</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:00</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-002</td><td>白米饭</td><td>A区中餐线</td><td>午餐</td><td>60.0</td><td>62.0</td><td>54.0</td><td class="td-surplus">8.0</td><td>12.9%</td><td><a class="link" onclick="openWelfareModal('白米饭','SUR-002','3.0')">员工福利</a></td><td>加班餐</td><td>3.0</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:00</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-004</td><td>蒜蓉菠菜</td><td>B区中餐线</td><td>午餐</td><td>15.0</td><td>14.8</td><td>10.0</td><td class="td-surplus">4.8</td><td>32.4%</td><td>废弃</td><td>叶片发黄</td><td>3.0</td><td><span class="tag tag-red">异常（损耗超标）</span></td><td>2026-04-22 15:00</td><td>李主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-004</td><td>蒜蓉菠菜</td><td>B区中餐线</td><td>午餐</td><td>15.0</td><td>14.8</td><td>10.0</td><td class="td-surplus">4.8</td><td>32.4%</td><td>加工再利用</td><td>制作蔬菜饼</td><td>1.8</td><td><span class="tag tag-red">异常（损耗超标）</span></td><td>2026-04-22 15:00</td><td>李主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-001</td><td>宫保鸡丁</td><td>A区中餐线</td><td>午餐</td><td>42.5</td><td>43.0</td><td>39.5</td><td class="td-surplus">3.5</td><td>8.1%</td><td><a class="link" onclick="openWelfareModal('宫保鸡丁','SUR-001','2.0')">员工福利</a></td><td>加班餐</td><td>2.0</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:00</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-001</td><td>宫保鸡丁</td><td>A区中餐线</td><td>午餐</td><td>42.5</td><td>43.0</td><td>39.5</td><td class="td-surplus">3.5</td><td>8.1%</td><td>捐赠</td><td>捐赠予安保部</td><td>1.5</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:00</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-005</td><td>红烧肉</td><td>B区中餐线</td><td>午餐</td><td>50.0</td><td>48.5</td><td>45.3</td><td class="td-surplus">3.2</td><td>6.6%</td><td><a class="link" onclick="openWelfareModal('红烧肉','SUR-005','3.2')">员工福利</a></td><td>加班餐</td><td>3.2</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:45</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-003</td><td>香辣大虾</td><td>C区快餐线</td><td>午餐</td><td>20.0</td><td>20.5</td><td>18.3</td><td class="td-surplus">2.2</td><td>10.7%</td><td>废弃</td><td>只剩辣椒和虾头</td><td>2.2</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:30</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-002</td><td>白米饭</td><td>A区中餐线</td><td>午餐</td><td>60.0</td><td>62.0</td><td>54.0</td><td class="td-surplus">8.0</td><td>12.9%</td><td>捐赠</td><td>捐赠予未央环卫</td><td>5.0</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:00</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-002</td><td>白米饭</td><td>A区中餐线</td><td>午餐</td><td>60.0</td><td>62.0</td><td>54.0</td><td class="td-surplus">8.0</td><td>12.9%</td><td><a class="link" onclick="openWelfareModal('白米饭','SUR-002','3.0')">员工福利</a></td><td>加班餐</td><td>3.0</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:00</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-004</td><td>蒜蓉菠菜</td><td>B区中餐线</td><td>午餐</td><td>15.0</td><td>14.8</td><td>10.0</td><td class="td-surplus">4.8</td><td>32.4%</td><td>废弃</td><td>叶片发黄</td><td>3.0</td><td><span class="tag tag-red">异常（损耗超标）</span></td><td>2026-04-22 15:00</td><td>李主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-004</td><td>蒜蓉菠菜</td><td>B区中餐线</td><td>午餐</td><td>15.0</td><td>14.8</td><td>10.0</td><td class="td-surplus">4.8</td><td>32.4%</td><td>加工再利用</td><td>制作蔬菜饼</td><td>1.8</td><td><span class="tag tag-red">异常（损耗超标）</span></td><td>2026-04-22 15:00</td><td>李主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-001</td><td>宫保鸡丁</td><td>A区中餐线</td><td>午餐</td><td>42.5</td><td>43.0</td><td>39.5</td><td class="td-surplus">3.5</td><td>8.1%</td><td><a class="link" onclick="openWelfareModal('宫保鸡丁','SUR-001','2.0')">员工福利</a></td><td>加班餐</td><td>2.0</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:00</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-001</td><td>宫保鸡丁</td><td>A区中餐线</td><td>午餐</td><td>42.5</td><td>43.0</td><td>39.5</td><td class="td-surplus">3.5</td><td>8.1%</td><td>捐赠</td><td>捐赠予安保部</td><td>1.5</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:00</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-005</td><td>红烧肉</td><td>B区中餐线</td><td>午餐</td><td>50.0</td><td>48.5</td><td>45.3</td><td class="td-surplus">3.2</td><td>6.6%</td><td><a class="link" onclick="openWelfareModal('红烧肉','SUR-005','3.2')">员工福利</a></td><td>加班餐</td><td>3.2</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:45</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
<tr><td>SUR-003</td><td>香辣大虾</td><td>C区快餐线</td><td>午餐</td><td>20.0</td><td>20.5</td><td>18.3</td><td class="td-surplus">2.2</td><td>10.7%</td><td>废弃</td><td>只剩辣椒和虾头</td><td>2.2</td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 14:30</td><td>张主管</td><td class="td-actions"><a class="link">食材溯源链路</a> <a class="link">查看视频</a> <span class="action-more"><a class="action-more__trigger">更多 ▾</a><div class="action-more__menu"><a class="action-more__item" onclick="showDetail(this)">详情</a><a class="action-more__item">编辑</a><a class="action-more__item action-more__item--danger">删除</a></div></span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -344,6 +365,31 @@ function onSurplusMethodChange(){
|
||||
document.getElementById('surplusWelfareSection').style.display=(v==='员工福利')?'block':'none';
|
||||
}
|
||||
|
||||
/* 右侧抽屉组件 */
|
||||
function showDetail(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var ths=document.querySelectorAll('.table-card table thead th');
|
||||
var firstVal=tds[0].textContent.trim();
|
||||
// 构建抽屉
|
||||
var overlay=document.createElement('div');
|
||||
overlay.className='drawer-overlay';
|
||||
var fieldsHtml='';
|
||||
for(var i=0;i<ths.length-1;i++){
|
||||
var label=ths[i].textContent.trim();
|
||||
var value=tds[i].innerHTML.trim();
|
||||
fieldsHtml+='<div class="drawer-field"><span class="drawer-field__label">'+label+'</span><span class="drawer-field__value">'+value+'</span></div>';
|
||||
}
|
||||
overlay.innerHTML='<div class="drawer"><div class="drawer__header"><span class="drawer__title">余量处置详情 — '+firstVal+'</span><button class="drawer__close" onclick="closeDrawer(this)">×</button></div><div class="drawer__body"><div class="drawer-section"><div class="drawer-section__title">基本信息</div><div class="drawer-fields">'+fieldsHtml+'</div></div></div></div>';
|
||||
document.body.appendChild(overlay);
|
||||
overlay.addEventListener('click',function(e){if(e.target===overlay)closeDrawer(overlay.querySelector('.drawer__close'));});
|
||||
}
|
||||
function closeDrawer(btn){
|
||||
var overlay=btn.closest('.drawer-overlay');
|
||||
overlay.classList.add('closing');
|
||||
setTimeout(function(){overlay.remove();},200);
|
||||
}
|
||||
|
||||
function openWelfareModal(name,code,total){
|
||||
document.getElementById('welfareTitle').textContent='员工福利取餐明细 — '+name;
|
||||
document.getElementById('welfareName').textContent=name;
|
||||
|
||||
@@ -192,6 +192,27 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
thead th:last-child,tbody td.td-actions{position:sticky;right:0;background:#fff;box-shadow:-4px 0 8px rgba(0,0,0,0.04);z-index:2;white-space:nowrap;}
|
||||
thead th:last-child{background:#FAFAFA;}
|
||||
tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
/* 右侧抽屉 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;animation:modalFadeIn .2s ease;}
|
||||
.drawer-overlay.closing{animation:modalFadeOut .2s ease forwards;}
|
||||
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
|
||||
@keyframes modalFadeOut{from{opacity:1}to{opacity:0}}
|
||||
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:90vw;background:#fff;box-shadow:-6px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;z-index:1001;animation:drawerSlideIn .25s ease;}
|
||||
.drawer-overlay.closing .drawer{animation:drawerSlideOut .2s ease forwards;}
|
||||
@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
|
||||
@keyframes drawerSlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}}
|
||||
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.drawer__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;}
|
||||
.drawer__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.drawer__body{padding:0 24px 24px;overflow-y:auto;flex:1;}
|
||||
.drawer-section{margin-top:20px;}
|
||||
.drawer-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
|
||||
.drawer-section__title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--primary);border-radius:2px;}
|
||||
.drawer-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;}
|
||||
.drawer-field{display:flex;flex-direction:column;gap:2px;}
|
||||
.drawer-field__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.drawer-field__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;min-height:22px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -315,11 +336,11 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<thead><tr><th>时间</th><th>摄像头</th><th>位置</th><th>违规类型</th><th>违规人员</th><th>状态</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>2026-04-22 11:15:20</td><td>CAM-A-04</td><td>洗手区入口</td><td>未洗手直接操作</td><td>张伟</td><td><span class="tag tag-orange">待处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">处理</span></td></tr>
|
||||
<tr><td>2026-04-22 10:26:11</td><td>CAM-B-03</td><td>分拣区-2号位</td><td>未戴厨师帽</td><td>陈刚</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-04-22 10:26:11</td><td>CAM-B-03</td><td>分拣区-2号位</td><td>未戴厨师帽</td><td>陈刚</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link" onclick="showDetail(this)">详情</span></td></tr>
|
||||
<tr><td>2026-04-22 10:12:36</td><td>CAM-A-01</td><td>炒菜区-1号位</td><td>未戴口罩</td><td>赵敏</td><td><span class="tag tag-orange">待处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">处理</span></td></tr>
|
||||
<tr><td>2026-04-21 14:38:05</td><td>CAM-A-01</td><td>炒菜区-1号位</td><td>未戴口罩</td><td>李娜</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-04-21 09:55:47</td><td>CAM-C-02</td><td>配菜区-1号位</td><td>违规使用手机</td><td>王磊</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-04-20 16:22:31</td><td>CAM-B-03</td><td>分拣区-2号位</td><td>未穿工作服</td><td>张伟</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-04-21 14:38:05</td><td>CAM-A-01</td><td>炒菜区-1号位</td><td>未戴口罩</td><td>李娜</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link" onclick="showDetail(this)">详情</span></td></tr>
|
||||
<tr><td>2026-04-21 09:55:47</td><td>CAM-C-02</td><td>配菜区-1号位</td><td>违规使用手机</td><td>王磊</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link" onclick="showDetail(this)">详情</span></td></tr>
|
||||
<tr><td>2026-04-20 16:22:31</td><td>CAM-B-03</td><td>分拣区-2号位</td><td>未穿工作服</td><td>张伟</td><td><span class="tag tag-green">已处理</span></td><td class="td-actions"><span class="link">视频回放</span> <span class="link" onclick="showDetail(this)">详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -347,11 +368,11 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<table>
|
||||
<thead><tr><th>区域</th><th>天然气浓度(ppm)</th><th>天然气状态</th><th>消防设施</th><th>温度/湿度</th><th>污废处理状态</th><th>行为安全</th><th>最近检查</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>炒菜区</td><td>0.02</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>28.6℃ / 62%</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 11:00</td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>冷库区</td><td>—</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>4.1℃ / 85%</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 11:00</td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>粗加工间</td><td>0.01</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>22.4℃ / 68%</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 10:30</td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>备餐区</td><td>0.03</td><td><span class="tag tag-orange">告警</span></td><td><span class="tag tag-green">正常</span></td><td>24.8℃ / 71%</td><td><span class="tag tag-orange">预警</span></td><td><span class="tag tag-orange">告警</span></td><td>2026-04-22 10:00</td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>洗碗间</td><td>—</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-red">异常</span></td><td>26.2℃ / 78%</td><td><span class="tag tag-red">异常</span></td><td><span class="tag tag-green">正常</span></td><td>2026-04-21 18:00</td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>炒菜区</td><td>0.02</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>28.6℃ / 62%</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 11:00</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>冷库区</td><td>—</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>4.1℃ / 85%</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 11:00</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>粗加工间</td><td>0.01</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>22.4℃ / 68%</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">正常</span></td><td>2026-04-22 10:30</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>备餐区</td><td>0.03</td><td><span class="tag tag-orange">告警</span></td><td><span class="tag tag-green">正常</span></td><td>24.8℃ / 71%</td><td><span class="tag tag-orange">预警</span></td><td><span class="tag tag-orange">告警</span></td><td>2026-04-22 10:00</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link">编辑</span></td></tr>
|
||||
<tr><td>洗碗间</td><td>—</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-red">异常</span></td><td>26.2℃ / 78%</td><td><span class="tag tag-red">异常</span></td><td><span class="tag tag-green">正常</span></td><td>2026-04-21 18:00</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link">编辑</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -405,11 +426,11 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<table>
|
||||
<thead><tr><th>人员编号</th><th>姓名</th><th>岗位</th><th>工作区域</th><th>人员照片</th><th>健康证编号</th><th>证件照片</th><th>发证日期</th><th>有效期至</th><th>有效期状态</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>EMP001</td><td>张伟</td><td>厨师</td><td>A区厨房</td><td><a class="link">📷 查看</a></td><td>HC-2025-00128</td><td><a class="link">📷 查看</a></td><td>2025-05-10</td><td>2026-05-09</td><td><span class="tag tag-orange">即将到期</span></td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EMP002</td><td>李娜</td><td>配餐员</td><td>B区厨房</td><td><a class="link">📷 查看</a></td><td>HC-2025-00176</td><td><a class="link">📷 查看</a></td><td>2025-09-12</td><td>2026-09-11</td><td><span class="tag tag-green">有效</span></td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EMP003</td><td>王磊</td><td>洗碗工</td><td>C区后厨</td><td><a class="link">📷 查看</a></td><td>HC-2024-00302</td><td><a class="link">📷 查看</a></td><td>2024-03-01</td><td>2025-02-28</td><td><span class="tag tag-red">已过期</span></td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EMP004</td><td>赵敏</td><td>厨师</td><td>A区厨房</td><td><a class="link">📷 查看</a></td><td>HC-2025-00211</td><td><a class="link">📷 查看</a></td><td>2025-11-18</td><td>2026-11-17</td><td><span class="tag tag-green">有效</span></td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EMP005</td><td>陈刚</td><td>分拣员</td><td>B区后厨</td><td><a class="link">📷 查看</a></td><td>HC-2025-00089</td><td><a class="link">📷 查看</a></td><td>2025-04-20</td><td>2026-04-19</td><td><span class="tag tag-orange">即将到期</span></td><td class="td-actions"><span class="link">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EMP001</td><td>张伟</td><td>厨师</td><td>A区厨房</td><td><a class="link">📷 查看</a></td><td>HC-2025-00128</td><td><a class="link">📷 查看</a></td><td>2025-05-10</td><td>2026-05-09</td><td><span class="tag tag-orange">即将到期</span></td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EMP002</td><td>李娜</td><td>配餐员</td><td>B区厨房</td><td><a class="link">📷 查看</a></td><td>HC-2025-00176</td><td><a class="link">📷 查看</a></td><td>2025-09-12</td><td>2026-09-11</td><td><span class="tag tag-green">有效</span></td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EMP003</td><td>王磊</td><td>洗碗工</td><td>C区后厨</td><td><a class="link">📷 查看</a></td><td>HC-2024-00302</td><td><a class="link">📷 查看</a></td><td>2024-03-01</td><td>2025-02-28</td><td><span class="tag tag-red">已过期</span></td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EMP004</td><td>赵敏</td><td>厨师</td><td>A区厨房</td><td><a class="link">📷 查看</a></td><td>HC-2025-00211</td><td><a class="link">📷 查看</a></td><td>2025-11-18</td><td>2026-11-17</td><td><span class="tag tag-green">有效</span></td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EMP005</td><td>陈刚</td><td>分拣员</td><td>B区后厨</td><td><a class="link">📷 查看</a></td><td>HC-2025-00089</td><td><a class="link">📷 查看</a></td><td>2025-04-20</td><td>2026-04-19</td><td><span class="tag tag-orange">即将到期</span></td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -488,13 +509,13 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<table>
|
||||
<thead><tr><th>记录日期</th><th>用电量(kWh)</th><th>电费(元)</th><th>用水量(m³)</th><th>水费(元)</th><th>用气量(m³)</th><th>气费(元)</th><th>合计能耗成本(元)</th><th>分摊每份餐(元)</th><th>操作</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>2026-05-07</td><td>372</td><td>¥334.8</td><td>40</td><td>¥144.0</td><td>120</td><td>¥750.0</td><td>¥1,228.8</td><td>¥0.83</td><td class="td-actions"><span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-05-06</td><td>398</td><td>¥358.2</td><td>45</td><td>¥162.0</td><td>130</td><td>¥812.5</td><td>¥1,332.7</td><td>¥0.89</td><td class="td-actions"><span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-05-05</td><td>386</td><td>¥347.4</td><td>42</td><td>¥151.2</td><td>126</td><td>¥787.5</td><td>¥1,286.1</td><td>¥0.86</td><td class="td-actions"><span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-05-04</td><td>362</td><td>¥325.8</td><td>38</td><td>¥136.8</td><td>115</td><td>¥718.8</td><td>¥1,181.4</td><td>¥0.81</td><td class="td-actions"><span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-05-03</td><td>405</td><td>¥364.5</td><td>46</td><td>¥165.6</td><td>132</td><td>¥825.0</td><td>¥1,355.1</td><td>¥0.91</td><td class="td-actions"><span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-05-02</td><td>380</td><td>¥342.0</td><td>41</td><td>¥147.6</td><td>122</td><td>¥762.5</td><td>¥1,252.1</td><td>¥0.85</td><td class="td-actions"><span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-05-01</td><td>358</td><td>¥322.2</td><td>36</td><td>¥129.6</td><td>110</td><td>¥687.5</td><td>¥1,139.3</td><td>¥0.79</td><td class="td-actions"><span class="link">详情</span></td></tr>
|
||||
<tr><td>2026-05-07</td><td>372</td><td>¥334.8</td><td>40</td><td>¥144.0</td><td>120</td><td>¥750.0</td><td>¥1,228.8</td><td>¥0.83</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span></td></tr>
|
||||
<tr><td>2026-05-06</td><td>398</td><td>¥358.2</td><td>45</td><td>¥162.0</td><td>130</td><td>¥812.5</td><td>¥1,332.7</td><td>¥0.89</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span></td></tr>
|
||||
<tr><td>2026-05-05</td><td>386</td><td>¥347.4</td><td>42</td><td>¥151.2</td><td>126</td><td>¥787.5</td><td>¥1,286.1</td><td>¥0.86</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span></td></tr>
|
||||
<tr><td>2026-05-04</td><td>362</td><td>¥325.8</td><td>38</td><td>¥136.8</td><td>115</td><td>¥718.8</td><td>¥1,181.4</td><td>¥0.81</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span></td></tr>
|
||||
<tr><td>2026-05-03</td><td>405</td><td>¥364.5</td><td>46</td><td>¥165.6</td><td>132</td><td>¥825.0</td><td>¥1,355.1</td><td>¥0.91</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span></td></tr>
|
||||
<tr><td>2026-05-02</td><td>380</td><td>¥342.0</td><td>41</td><td>¥147.6</td><td>122</td><td>¥762.5</td><td>¥1,252.1</td><td>¥0.85</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span></td></tr>
|
||||
<tr><td>2026-05-01</td><td>358</td><td>¥322.2</td><td>36</td><td>¥129.6</td><td>110</td><td>¥687.5</td><td>¥1,139.3</td><td>¥0.79</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -737,6 +758,35 @@ function cancelEnergyEdit(type){
|
||||
var btn=card.querySelector('.energy-entry-btn');
|
||||
disp.style.display='block';edit.style.display='none';btn.textContent='✏️ 录入';btn.style.color='var(--primary)';
|
||||
}
|
||||
/* 抽屉组件 */
|
||||
var Drawer={
|
||||
open:function(title,bodyHtml){
|
||||
this.close();
|
||||
var overlay=document.createElement('div');
|
||||
overlay.className='drawer-overlay';
|
||||
overlay.innerHTML='<div class="drawer"><div class="drawer__header"><div class="drawer__title">'+title+'</div><button class="drawer__close" onclick="Drawer.close()">×</button></div><div class="drawer__body">'+bodyHtml+'</div></div>';
|
||||
overlay.addEventListener('click',function(e){if(e.target===overlay)Drawer.close();});
|
||||
document.body.appendChild(overlay);
|
||||
},
|
||||
close:function(){
|
||||
var o=document.querySelector('.drawer-overlay');
|
||||
if(!o)return;
|
||||
o.classList.add('closing');
|
||||
setTimeout(function(){o.remove();},200);
|
||||
}
|
||||
};
|
||||
function showDetail(el){
|
||||
var row=el.closest('tr');
|
||||
var table=row.closest('table');
|
||||
var headers=table.querySelectorAll('thead th');
|
||||
var cells=row.querySelectorAll('td');
|
||||
var html='<div class="drawer-section"><div class="drawer-section__title">详细信息</div><div class="drawer-fields">';
|
||||
for(var i=0;i<headers.length-1;i++){
|
||||
html+='<div class="drawer-field"><span class="drawer-field__label">'+headers[i].textContent.trim()+'</span><span class="drawer-field__value">'+cells[i].innerHTML.trim()+'</span></div>';
|
||||
}
|
||||
html+='</div></div>';
|
||||
Drawer.open('详情 — '+cells[0].textContent.trim(),html);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -240,6 +240,7 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
<div class="metric-item"><label>矿物质 (mg)</label><input class="form-input" type="number" placeholder="0.0"></div>
|
||||
<div class="metric-item"><label>膳食纤维 (g)</label><input class="form-input" type="number" placeholder="0.0"></div>
|
||||
<div class="metric-item"><label>钠 (mg)</label><input class="form-input" type="number" placeholder="0.0"></div>
|
||||
<div class="metric-item"><label>营养等级</label><select class="form-select"><option value="">请选择</option><option value="达标">达标</option><option value="偏差">偏差</option><option value="未达标">未达标</option></select></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -130,6 +130,28 @@ body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei
|
||||
.detail-item__value{font-size:var(--font-sm);color:var(--text-primary);}
|
||||
.section-title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);}
|
||||
|
||||
/* 右侧抽屉 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;animation:modalFadeIn .2s ease;}
|
||||
.drawer-overlay.closing{animation:modalFadeOut .2s ease forwards;}
|
||||
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
|
||||
@keyframes modalFadeOut{from{opacity:1}to{opacity:0}}
|
||||
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:90vw;background:#fff;box-shadow:-6px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;z-index:1001;animation:drawerSlideIn .25s ease;}
|
||||
.drawer-overlay.closing .drawer{animation:drawerSlideOut .2s ease forwards;}
|
||||
@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
|
||||
@keyframes drawerSlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}}
|
||||
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.drawer__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;}
|
||||
.drawer__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.drawer__body{padding:0 24px 24px;overflow-y:auto;flex:1;}
|
||||
.drawer-section{margin-top:20px;}
|
||||
.drawer-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
|
||||
.drawer-section__title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--primary);border-radius:2px;}
|
||||
.drawer-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;}
|
||||
.drawer-field{display:flex;flex-direction:column;gap:2px;}
|
||||
.drawer-field__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.drawer-field__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;min-height:22px;}
|
||||
|
||||
/* Dialog 顶部均值区 */
|
||||
.dialog__avg{flex-shrink:0;border-bottom:1px solid var(--border);padding:16px 24px 12px;background:#FAFBFC;}
|
||||
.dialog__avg-title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);margin-bottom:10px;display:flex;align-items:center;gap:6px;}
|
||||
@@ -350,7 +372,7 @@ function renderTable(){
|
||||
+'<td>'+s.syncTime+'</td>'
|
||||
+'<td>'+s.operator+'</td>'
|
||||
+'<td><span class="num-link" onclick="openDialog('+si+')">'+s.recordIdxs.length+'</span></td>'
|
||||
+'<td class="td-actions"><span class="link" onclick="openDialog('+si+')">详情</span></td>'
|
||||
+'<td class="td-actions"><span class="link" onclick="showDetail('+si+')">详情</span></td>'
|
||||
+'</tr>';
|
||||
}).join('');
|
||||
document.getElementById('tableBody').innerHTML = html;
|
||||
@@ -615,6 +637,67 @@ function toggleSubgroup(header){ header.parentElement.classList.toggle('open');
|
||||
if(s) s.classList.add('open');
|
||||
})();
|
||||
|
||||
/* ===== 右侧抽屉组件 ===== */
|
||||
function showDetail(syncIdx){
|
||||
var s = SYNC_DATA[syncIdx];
|
||||
var recs = s.recordIdxs.map(function(i){ return RECORDS[i]; });
|
||||
|
||||
var html = '<div class="drawer-section">'
|
||||
+'<div class="drawer-section__title">同步信息</div>'
|
||||
+'<div class="drawer-fields">'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">餐品</div><div class="drawer-field__value">'+s.dish+'</div></div>'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">同步时间</div><div class="drawer-field__value">'+s.syncTime+'</div></div>'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">操作人</div><div class="drawer-field__value">'+s.operator+'</div></div>'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">已选检验记录</div><div class="drawer-field__value">'+s.recordIdxs.length+' 条</div></div>'
|
||||
+'</div></div>';
|
||||
|
||||
/* 关联检验记录列表 */
|
||||
html += '<div class="drawer-section">'
|
||||
+'<div class="drawer-section__title">关联检验记录</div>';
|
||||
recs.forEach(function(r){
|
||||
html += '<div class="drawer-fields" style="margin-bottom:12px;padding:10px;background:#FAFAFA;border-radius:var(--radius-sm);">'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">检验单号</div><div class="drawer-field__value">'+r.no+'</div></div>'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">检验时间</div><div class="drawer-field__value">'+r.time+'</div></div>'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">检验人员</div><div class="drawer-field__value">'+r.inspector+'</div></div>'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">批次</div><div class="drawer-field__value">'+r.batch+'</div></div>'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">食堂</div><div class="drawer-field__value">'+r.category+'</div></div>'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">餐线</div><div class="drawer-field__value">'+r.line+'</div></div>'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">营养检验</div><div class="drawer-field__value">'+nutriTag(r.nutri)+'</div></div>'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">味道评级</div><div class="drawer-field__value">'+gradeTag(r.tasteData.grade)+'</div></div>'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">口感评级</div><div class="drawer-field__value">'+gradeTag(r.textureData.grade)+'</div></div>'
|
||||
+'<div class="drawer-field"><div class="drawer-field__label">色泽评级</div><div class="drawer-field__value">'+gradeTag(r.colorData.grade)+'</div></div>'
|
||||
+'</div>';
|
||||
});
|
||||
html += '</div>';
|
||||
|
||||
openDrawer('同步记录详情 - ' + s.dish, html);
|
||||
}
|
||||
|
||||
function openDrawer(title, bodyHtml){
|
||||
/* 移除已有抽屉 */
|
||||
var old = document.querySelector('.drawer-overlay');
|
||||
if(old) old.remove();
|
||||
|
||||
var overlay = document.createElement('div');
|
||||
overlay.className = 'drawer-overlay';
|
||||
overlay.onclick = function(e){ if(e.target === overlay) closeDrawer(overlay); };
|
||||
overlay.innerHTML = '<div class="drawer">'
|
||||
+'<div class="drawer__header">'
|
||||
+'<span class="drawer__title">'+title+'</span>'
|
||||
+'<button class="drawer__close" onclick="closeDrawer(this.closest(\'.drawer-overlay\'))">×</button>'
|
||||
+'</div>'
|
||||
+'<div class="drawer__body">'+bodyHtml+'</div>'
|
||||
+'</div>';
|
||||
document.body.appendChild(overlay);
|
||||
}
|
||||
|
||||
function closeDrawer(overlay){
|
||||
if(!overlay) overlay = document.querySelector('.drawer-overlay');
|
||||
if(!overlay) return;
|
||||
overlay.classList.add('closing');
|
||||
setTimeout(function(){ overlay.remove(); }, 200);
|
||||
}
|
||||
|
||||
/* ===== 初始化 ===== */
|
||||
renderTable();
|
||||
</script>
|
||||
|
||||
@@ -101,6 +101,27 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60
|
||||
.form-divider{grid-column:1/-1;border:none;border-top:1px solid var(--border);margin:4px 0;}
|
||||
/* 只读字段 */
|
||||
.form-control[readonly]{background:#F5F5F5;color:var(--text-secondary);cursor:default;}
|
||||
/* 右侧抽屉 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;animation:modalFadeIn .2s ease;}
|
||||
.drawer-overlay.closing{animation:modalFadeOut .2s ease forwards;}
|
||||
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
|
||||
@keyframes modalFadeOut{from{opacity:1}to{opacity:0}}
|
||||
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:90vw;background:#fff;box-shadow:-6px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;z-index:1001;animation:drawerSlideIn .25s ease;}
|
||||
.drawer-overlay.closing .drawer{animation:drawerSlideOut .2s ease forwards;}
|
||||
@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
|
||||
@keyframes drawerSlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}}
|
||||
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.drawer__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;}
|
||||
.drawer__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.drawer__body{padding:0 24px 24px;overflow-y:auto;flex:1;}
|
||||
.drawer-section{margin-top:20px;}
|
||||
.drawer-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
|
||||
.drawer-section__title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--primary);border-radius:2px;}
|
||||
.drawer-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;}
|
||||
.drawer-field{display:flex;flex-direction:column;gap:2px;}
|
||||
.drawer-field__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.drawer-field__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;min-height:22px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -188,14 +209,14 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60
|
||||
<th>订单号</th><th>溯源码</th><th>客户名称</th><th>净菜类型</th><th>净菜/餐品</th><th>包装规格</th><th>售卖份数</th><th>计量(kg)</th><th>单价(元/kg)</th><th>小计金额</th><th>出库区域</th><th>下单时间</th><th>物流单号</th><th>订单状态</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>EXT-001</td><td>NC-INT-BOCA-20260422-01</td><td>社区便民超市</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>土豆（土豆丝）</td><td>5kg/箱</td><td>10</td><td>50</td><td>¥3.5</td><td>¥175</td><td>A仓-蔬菜区-01</td><td>2026-04-22 08:00</td><td>SF1234567890</td><td><span class="tag tag-green">已完成</span></td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-001</td><td>NC-INT-HLUB-20260422-01</td><td>社区便民超市</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>土豆（土豆块）</td><td>5kg/箱</td><td>6</td><td>30</td><td>¥3.5</td><td>¥105</td><td>A仓-蔬菜区-03</td><td>2026-04-22 08:00</td><td>SF1234567890</td><td><span class="tag tag-green">已完成</span></td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-002</td><td>NC-INT-ZLRJ-20260422-01</td><td>周边餐饮企业</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>净猪里脊</td><td>1kg/箱</td><td>5</td><td>50</td><td>¥28</td><td>¥1,400</td><td>B仓-肉类区-01</td><td>2026-04-22 09:30</td><td>SF9876543210</td><td><span class="tag tag-blue">配送中</span></td><td class="td-actions"><span class="link" style="color:var(--success)">确认收货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-003</td><td>NC-INT-JXRJ-20260422-01</td><td>周边餐饮企业</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>宫保鸡丁</td><td>标准份（500g）</td><td>40</td><td>20</td><td>¥12</td><td>¥240</td><td>B仓-肉类区-02</td><td>2026-04-22 09:30</td><td>SF9876543210</td><td><span class="tag tag-blue">配送中</span></td><td class="td-actions"><span class="link" style="color:var(--success)">确认收货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-004</td><td>NC-INT-BCAI-20260422-01</td><td>学校食堂</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>鸡肉（鸡肉块）</td><td>1kg/箱</td><td>6</td><td>60</td><td>¥2.0</td><td>¥120</td><td>A仓-蔬菜区-02</td><td>2026-04-22 10:00</td><td>—</td><td><span class="tag tag-orange">待配送</span></td><td class="td-actions"><span class="link" style="color:var(--primary)" onclick="openShipModal('EXT-004')">立即发货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-004</td><td>NC-INT-XLHU-20260422-01</td><td>学校食堂</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>净西兰花</td><td>5kg/箱</td><td>8</td><td>40</td><td>¥4.5</td><td>¥180</td><td>A仓-蔬菜区-04</td><td>2026-04-22 10:00</td><td>—</td><td><span class="tag tag-orange">待配送</span></td><td class="td-actions"><span class="link" style="color:var(--primary)" onclick="openShipModal('EXT-004')">立即发货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-005</td><td>NC-INT-QZYU-20260422-01</td><td>职工家属区团购</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>清蒸鱼</td><td>标准份（500g）</td><td>20</td><td>10</td><td>¥15</td><td>¥150</td><td>C仓-水产区-01</td><td>2026-04-22 10:30</td><td>—</td><td><span class="tag tag-gray">备货中</span></td><td class="td-actions"><span class="link" style="color:var(--success)">备货完成</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-006</td><td>NC-INT-SRBC-20260422-01</td><td>职工家属区团购</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>蒜蓉菠菜</td><td>标准份（500g）</td><td>30</td><td>15</td><td>¥8</td><td>¥120</td><td>A仓-蔬菜区-01</td><td>2026-04-22 10:30</td><td>—</td><td><span class="tag tag-gray">备货中</span></td><td class="td-actions"><span class="link" style="color:var(--success)">备货完成</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-001</td><td>NC-INT-BOCA-20260422-01</td><td>社区便民超市</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>土豆（土豆丝）</td><td>5kg/箱</td><td>10</td><td>50</td><td>¥3.5</td><td>¥175</td><td>A仓-蔬菜区-01</td><td>2026-04-22 08:00</td><td>SF1234567890</td><td><span class="tag tag-green">已完成</span></td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-001</td><td>NC-INT-HLUB-20260422-01</td><td>社区便民超市</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>土豆（土豆块）</td><td>5kg/箱</td><td>6</td><td>30</td><td>¥3.5</td><td>¥105</td><td>A仓-蔬菜区-03</td><td>2026-04-22 08:00</td><td>SF1234567890</td><td><span class="tag tag-green">已完成</span></td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-002</td><td>NC-INT-ZLRJ-20260422-01</td><td>周边餐饮企业</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>净猪里脊</td><td>1kg/箱</td><td>5</td><td>50</td><td>¥28</td><td>¥1,400</td><td>B仓-肉类区-01</td><td>2026-04-22 09:30</td><td>SF9876543210</td><td><span class="tag tag-blue">配送中</span></td><td class="td-actions"><span class="link" style="color:var(--success)" onclick="openReceiveConfirm(this)">确认收货</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-003</td><td>NC-INT-JXRJ-20260422-01</td><td>周边餐饮企业</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>宫保鸡丁</td><td>标准份（500g）</td><td>40</td><td>20</td><td>¥12</td><td>¥240</td><td>B仓-肉类区-02</td><td>2026-04-22 09:30</td><td>SF9876543210</td><td><span class="tag tag-blue">配送中</span></td><td class="td-actions"><span class="link" style="color:var(--success)" onclick="openReceiveConfirm(this)">确认收货</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-004</td><td>NC-INT-BCAI-20260422-01</td><td>学校食堂</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>鸡肉（鸡肉块）</td><td>1kg/箱</td><td>6</td><td>60</td><td>¥2.0</td><td>¥120</td><td>A仓-蔬菜区-02</td><td>2026-04-22 10:00</td><td>—</td><td><span class="tag tag-orange">待配送</span></td><td class="td-actions"><span class="link" style="color:var(--primary)" onclick="openShipModal('EXT-004')">立即发货</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-004</td><td>NC-INT-XLHU-20260422-01</td><td>学校食堂</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>净西兰花</td><td>5kg/箱</td><td>8</td><td>40</td><td>¥4.5</td><td>¥180</td><td>A仓-蔬菜区-04</td><td>2026-04-22 10:00</td><td>—</td><td><span class="tag tag-orange">待配送</span></td><td class="td-actions"><span class="link" style="color:var(--primary)" onclick="openShipModal('EXT-004')">立即发货</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-005</td><td>NC-INT-QZYU-20260422-01</td><td>职工家属区团购</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>清蒸鱼</td><td>标准份（500g）</td><td>20</td><td>10</td><td>¥15</td><td>¥150</td><td>C仓-水产区-01</td><td>2026-04-22 10:30</td><td>—</td><td><span class="tag tag-gray">备货中</span></td><td class="td-actions"><span class="link" style="color:var(--success)" onclick="openReadyConfirm(this)">备货完成</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>EXT-006</td><td>NC-INT-SRBC-20260422-01</td><td>职工家属区团购</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>蒜蓉菠菜</td><td>标准份（500g）</td><td>30</td><td>15</td><td>¥8</td><td>¥120</td><td>A仓-蔬菜区-01</td><td>2026-04-22 10:30</td><td>—</td><td><span class="tag tag-gray">备货中</span></td><td class="td-actions"><span class="link" style="color:var(--success)" onclick="openReadyConfirm(this)">备货完成</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -362,6 +383,44 @@ textarea.form-control{height:auto;padding:8px 12px;resize:vertical;min-height:60
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 确认收货二次确认弹窗 -->
|
||||
<div class="modal-mask" id="receiveModal">
|
||||
<div class="modal" style="width:420px;">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">确认收货</div>
|
||||
<button class="modal__close" onclick="closeReceiveConfirm()">×</button>
|
||||
</div>
|
||||
<div class="modal__body" style="text-align:center;padding:32px 24px;">
|
||||
<div style="font-size:40px;margin-bottom:12px;">✅</div>
|
||||
<p style="font-size:15px;color:#333;font-weight:600;margin-bottom:8px;">确认对订单 <span id="receiveOrderNo"></span> 进行收货？</p>
|
||||
<p style="font-size:13px;color:#999;line-height:1.6;">净菜/餐品：<span id="receiveFoodName" style="color:#333;font-weight:500;"></span><br>确认后订单状态将变为「已完成」</p>
|
||||
</div>
|
||||
<div class="modal__footer" style="justify-content:center;">
|
||||
<button class="btn btn-default" onclick="closeReceiveConfirm()">取消</button>
|
||||
<button class="btn btn-primary" style="background:var(--success);" onclick="doReceive()">确认收货</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 备货完成二次确认弹窗 -->
|
||||
<div class="modal-mask" id="readyModal">
|
||||
<div class="modal" style="width:420px;">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">确认备货完成</div>
|
||||
<button class="modal__close" onclick="closeReadyConfirm()">×</button>
|
||||
</div>
|
||||
<div class="modal__body" style="text-align:center;padding:32px 24px;">
|
||||
<div style="font-size:40px;margin-bottom:12px;">📦</div>
|
||||
<p style="font-size:15px;color:#333;font-weight:600;margin-bottom:8px;">确认订单 <span id="readyOrderNo"></span> 已备货完成？</p>
|
||||
<p style="font-size:13px;color:#999;line-height:1.6;">净菜/餐品：<span id="readyFoodName" style="color:#333;font-weight:500;"></span><br>确认后订单状态将变为「待配送」</p>
|
||||
</div>
|
||||
<div class="modal__footer" style="justify-content:center;">
|
||||
<button class="btn btn-default" onclick="closeReadyConfirm()">取消</button>
|
||||
<button class="btn btn-primary" style="background:var(--success);" onclick="doReady()">确认完成</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 新建订单弹窗 */
|
||||
function openCreateOrder(){
|
||||
@@ -442,6 +501,68 @@ function confirmShip(){
|
||||
alert('订单 '+document.getElementById('shipOrderNo').value+' 已发货！\n物流公司：'+company+'\n物流单号：'+trackNo);
|
||||
closeShipModal();
|
||||
}
|
||||
|
||||
/* 确认收货 */
|
||||
function openReceiveConfirm(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
document.getElementById('receiveOrderNo').textContent=tds[0].textContent;
|
||||
document.getElementById('receiveFoodName').textContent=tds[4].textContent;
|
||||
document.getElementById('receiveModal').classList.add('show');
|
||||
}
|
||||
function closeReceiveConfirm(){document.getElementById('receiveModal').classList.remove('show');}
|
||||
document.getElementById('receiveModal').addEventListener('click',function(e){if(e.target===this)closeReceiveConfirm();});
|
||||
function doReceive(){
|
||||
closeReceiveConfirm();
|
||||
alert('收货确认成功，订单状态已变为「已完成」');
|
||||
}
|
||||
|
||||
/* 备货完成 */
|
||||
function openReadyConfirm(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
document.getElementById('readyOrderNo').textContent=tds[0].textContent;
|
||||
document.getElementById('readyFoodName').textContent=tds[4].textContent;
|
||||
document.getElementById('readyModal').classList.add('show');
|
||||
}
|
||||
function closeReadyConfirm(){document.getElementById('readyModal').classList.remove('show');}
|
||||
document.getElementById('readyModal').addEventListener('click',function(e){if(e.target===this)closeReadyConfirm();});
|
||||
function doReady(){
|
||||
closeReadyConfirm();
|
||||
alert('备货已确认完成，订单状态已变为「待配送」');
|
||||
}
|
||||
|
||||
/* 右侧抽屉组件 */
|
||||
var Drawer={
|
||||
open:function(title,bodyHtml){
|
||||
this.close();
|
||||
var overlay=document.createElement('div');
|
||||
overlay.className='drawer-overlay';
|
||||
overlay.innerHTML='<div class="drawer"><div class="drawer__header"><div class="drawer__title">'+title+'</div><button class="drawer__close" onclick="Drawer.close()">×</button></div><div class="drawer__body">'+bodyHtml+'</div></div>';
|
||||
overlay.addEventListener('click',function(e){if(e.target===overlay)Drawer.close();});
|
||||
document.body.appendChild(overlay);
|
||||
},
|
||||
close:function(){
|
||||
var o=document.querySelector('.drawer-overlay');
|
||||
if(!o)return;
|
||||
o.classList.add('closing');
|
||||
setTimeout(function(){o.remove();},200);
|
||||
}
|
||||
};
|
||||
|
||||
/* 详情抽屉 */
|
||||
function showDetail(el){
|
||||
var tr=el.closest('tr');
|
||||
var ths=tr.closest('table').querySelectorAll('thead th');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var orderNo=tds[0].textContent;
|
||||
var html='<div class="drawer-section"><div class="drawer-section__title">订单信息</div><div class="drawer-fields">';
|
||||
for(var i=0;i<ths.length-1;i++){
|
||||
html+='<div class="drawer-field"><div class="drawer-field__label">'+ths[i].textContent+'</div><div class="drawer-field__value">'+tds[i].innerHTML+'</div></div>';
|
||||
}
|
||||
html+='</div></div>';
|
||||
Drawer.open('外售详情 — '+orderNo, html);
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -96,6 +96,27 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
.form-item input,.form-item select,.form-item textarea{height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font-size:var(--font-sm);color:var(--text-primary);outline:none;background:#fff;}
|
||||
.form-item input:focus,.form-item select:focus{border-color:var(--primary);}
|
||||
.form-item select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 10px center;padding-right:28px;}
|
||||
/* 右侧抽屉 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;animation:modalFadeIn .2s ease;}
|
||||
.drawer-overlay.closing{animation:modalFadeOut .2s ease forwards;}
|
||||
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
|
||||
@keyframes modalFadeOut{from{opacity:1}to{opacity:0}}
|
||||
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:90vw;background:#fff;box-shadow:-6px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;z-index:1001;animation:drawerSlideIn .25s ease;}
|
||||
.drawer-overlay.closing .drawer{animation:drawerSlideOut .2s ease forwards;}
|
||||
@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
|
||||
@keyframes drawerSlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}}
|
||||
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.drawer__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;}
|
||||
.drawer__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.drawer__body{padding:0 24px 24px;overflow-y:auto;flex:1;}
|
||||
.drawer-section{margin-top:20px;}
|
||||
.drawer-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
|
||||
.drawer-section__title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--primary);border-radius:2px;}
|
||||
.drawer-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;}
|
||||
.drawer-field{display:flex;flex-direction:column;gap:2px;}
|
||||
.drawer-field__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.drawer-field__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;min-height:22px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -165,14 +186,14 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<th>申领单号</th><th>溯源码</th><th>申领食堂</th><th>净菜类型</th><th>净菜/餐品</th><th>包装规格</th><th>申领份数</th><th>申领数量(kg)</th><th>订单状态</th><th>关联仓库区域</th><th>申领时间</th><th>预定配送时间</th><th>配送人</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>INT-001</td><td>NC-INT-BOCA-20260422-01</td><td>一号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>菠菜</td><td>500g/袋</td><td>50</td><td>25</td><td><span class="tag tag-green">已完成</span></td><td>A仓-蔬菜区-01</td><td>2026-04-22 07:30</td><td>2026-04-22 09:00</td><td>李配送</td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-001</td><td>NC-INT-BCAI-20260422-01</td><td>一号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>玉米（玉米粒）</td><td>1kg/盒</td><td>20</td><td>20</td><td><span class="tag tag-green">已完成</span></td><td>A仓-蔬菜区-02</td><td>2026-04-22 07:30</td><td>2026-04-22 09:00</td><td>李配送</td><td class="td-actions"><span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-002</td><td>NC-INT-ZLRJ-20260422-01</td><td>二号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>猪排骨</td><td>2kg/盘</td><td>20</td><td>40</td><td><span class="tag tag-blue">配送中</span></td><td>B仓-肉类区-01</td><td>2026-04-22 08:00</td><td>2026-04-22 10:00</td><td>王配送</td><td class="td-actions"><span class="link" style="color:var(--success)">确认收货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-003</td><td>NC-INT-JXRJ-20260422-01</td><td>二号食堂厨房</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>宫保鸡丁</td><td>标准份（500g）</td><td>30</td><td>15</td><td><span class="tag tag-blue">配送中</span></td><td>B仓-肉类区-02</td><td>2026-04-22 08:00</td><td>2026-04-22 10:00</td><td>王配送</td><td class="td-actions"><span class="link" style="color:var(--success)">确认收货</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-004</td><td>NC-INT-CAYO-20260422-01</td><td>三号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>草鱼（鱼片）</td><td>2kg/盘</td><td>20</td><td>40</td><td><span class="tag tag-orange">待配送</span></td><td>C仓-水产区-01</td><td>2026-04-22 08:30</td><td>2026-04-22 10:30</td><td>—</td><td class="td-actions"><span class="link" style="color:var(--primary)">立即配送</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-005</td><td>NC-INT-QZYU-20260422-01</td><td>一号食堂厨房</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>清蒸鱼</td><td>标准份（500g）</td><td>15</td><td>7.5</td><td><span class="tag tag-orange">待配送</span></td><td>C仓-水产区-02</td><td>2026-04-22 09:00</td><td>2026-04-22 11:00</td><td>—</td><td class="td-actions"><span class="link" style="color:var(--primary)">立即配送</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-006</td><td>NC-INT-TDSI-20260422-01</td><td>三号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>土豆（土豆丝）</td><td>500g/袋</td><td>40</td><td>20</td><td><span class="tag tag-gray">备货中</span></td><td>A仓-蔬菜区-03</td><td>2026-04-22 09:15</td><td>2026-04-22 11:30</td><td>—</td><td class="td-actions"><span class="link" style="color:var(--success)">备货完成</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-007</td><td>NC-INT-SRBC-20260422-01</td><td>二号食堂厨房</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>蒜蓉菠菜</td><td>标准份（500g）</td><td>25</td><td>12.5</td><td><span class="tag tag-gray">备货中</span></td><td>A仓-蔬菜区-01</td><td>2026-04-22 09:30</td><td>2026-04-22 12:00</td><td>—</td><td class="td-actions"><span class="link" style="color:var(--success)">备货完成</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-001</td><td>NC-INT-BOCA-20260422-01</td><td>一号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>菠菜</td><td>500g/袋</td><td>50</td><td>25</td><td><span class="tag tag-green">已完成</span></td><td>A仓-蔬菜区-01</td><td>2026-04-22 07:30</td><td>2026-04-22 09:00</td><td>李配送</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-001</td><td>NC-INT-BCAI-20260422-01</td><td>一号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>玉米（玉米粒）</td><td>1kg/盒</td><td>20</td><td>20</td><td><span class="tag tag-green">已完成</span></td><td>A仓-蔬菜区-02</td><td>2026-04-22 07:30</td><td>2026-04-22 09:00</td><td>李配送</td><td class="td-actions"><span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-002</td><td>NC-INT-ZLRJ-20260422-01</td><td>二号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>猪排骨</td><td>2kg/盘</td><td>20</td><td>40</td><td><span class="tag tag-blue">配送中</span></td><td>B仓-肉类区-01</td><td>2026-04-22 08:00</td><td>2026-04-22 10:00</td><td>王配送</td><td class="td-actions"><span class="link" style="color:var(--success)" onclick="openReceiveConfirm(this)">确认收货</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-003</td><td>NC-INT-JXRJ-20260422-01</td><td>二号食堂厨房</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>宫保鸡丁</td><td>标准份（500g）</td><td>30</td><td>15</td><td><span class="tag tag-blue">配送中</span></td><td>B仓-肉类区-02</td><td>2026-04-22 08:00</td><td>2026-04-22 10:00</td><td>王配送</td><td class="td-actions"><span class="link" style="color:var(--success)" onclick="openReceiveConfirm(this)">确认收货</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-004</td><td>NC-INT-CAYO-20260422-01</td><td>三号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>草鱼（鱼片）</td><td>2kg/盘</td><td>20</td><td>40</td><td><span class="tag tag-orange">待配送</span></td><td>C仓-水产区-01</td><td>2026-04-22 08:30</td><td>2026-04-22 10:30</td><td>—</td><td class="td-actions"><span class="link" style="color:var(--primary)" onclick="openDeliverModal(this)">立即配送</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-005</td><td>NC-INT-QZYU-20260422-01</td><td>一号食堂厨房</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>清蒸鱼</td><td>标准份（500g）</td><td>15</td><td>7.5</td><td><span class="tag tag-orange">待配送</span></td><td>C仓-水产区-02</td><td>2026-04-22 09:00</td><td>2026-04-22 11:00</td><td>—</td><td class="td-actions"><span class="link" style="color:var(--primary)" onclick="openDeliverModal(this)">立即配送</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-006</td><td>NC-INT-TDSI-20260422-01</td><td>三号食堂厨房</td><td><span class="tag tag-green">🥬 净菜包</span></td><td>土豆（土豆丝）</td><td>500g/袋</td><td>40</td><td>20</td><td><span class="tag tag-gray">备货中</span></td><td>A仓-蔬菜区-03</td><td>2026-04-22 09:15</td><td>2026-04-22 11:30</td><td>—</td><td class="td-actions"><span class="link" style="color:var(--success)" onclick="openReadyConfirm(this)">备货完成</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>INT-007</td><td>NC-INT-SRBC-20260422-01</td><td>二号食堂厨房</td><td><span class="tag tag-orange">🍱 餐品净菜包</span></td><td>蒜蓉菠菜</td><td>标准份（500g）</td><td>25</td><td>12.5</td><td><span class="tag tag-gray">备货中</span></td><td>A仓-蔬菜区-01</td><td>2026-04-22 09:30</td><td>2026-04-22 12:00</td><td>—</td><td class="td-actions"><span class="link" style="color:var(--success)" onclick="openReadyConfirm(this)">备货完成</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -250,6 +271,74 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 确认收货二次确认弹窗 -->
|
||||
<div class="modal-mask" id="modal-receive">
|
||||
<div class="modal" style="width:420px;">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">确认收货</div>
|
||||
<button class="modal__close" onclick="closeModal('modal-receive')">✕</button>
|
||||
</div>
|
||||
<div class="modal__body" style="text-align:center;padding:32px 24px;">
|
||||
<div style="font-size:40px;margin-bottom:12px;">✅</div>
|
||||
<p style="font-size:15px;color:#333;font-weight:600;margin-bottom:8px;">确认对申领单 <span id="receiveOrderNo"></span> 进行收货？</p>
|
||||
<p style="font-size:13px;color:#999;line-height:1.6;">净菜/餐品：<span id="receiveFoodName" style="color:#333;font-weight:500;"></span><br>确认后订单状态将变为「已完成」</p>
|
||||
</div>
|
||||
<div class="modal__footer" style="justify-content:center;">
|
||||
<button class="btn btn-default" onclick="closeModal('modal-receive')">取消</button>
|
||||
<button class="btn btn-primary" style="background:var(--success);" onclick="doReceive()">确认收货</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 立即配送弹窗 -->
|
||||
<div class="modal-mask" id="modal-deliver">
|
||||
<div class="modal" style="width:480px;">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">立即配送</div>
|
||||
<button class="modal__close" onclick="closeModal('modal-deliver')">✕</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div style="background:var(--primary-light);border-radius:var(--radius-md);padding:12px 16px;margin-bottom:20px;font-size:var(--font-sm);color:var(--primary);display:flex;align-items:center;gap:8px;">
|
||||
<span style="font-size:16px;">📋</span>
|
||||
<span>申领单号：<strong id="deliverOrderNo"></strong> ｜ 净菜/餐品：<strong id="deliverFoodName"></strong></span>
|
||||
</div>
|
||||
<div class="form-grid" style="grid-template-columns:1fr;">
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">配送人<span class="required">*</span></div>
|
||||
<input id="deliverPerson" placeholder="请输入配送人姓名">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">备注</div>
|
||||
<textarea id="deliverRemark" style="height:80px;padding:8px 12px;resize:vertical;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-sm);outline:none;" placeholder="请输入配送备注（如特殊要求、温度要求等）"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="btn btn-default" onclick="closeModal('modal-deliver')">取消</button>
|
||||
<button class="btn btn-primary" onclick="doDeliver()">确认配送</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 备货完成二次确认弹窗 -->
|
||||
<div class="modal-mask" id="modal-ready">
|
||||
<div class="modal" style="width:420px;">
|
||||
<div class="modal__header">
|
||||
<div class="modal__title">确认备货完成</div>
|
||||
<button class="modal__close" onclick="closeModal('modal-ready')">✕</button>
|
||||
</div>
|
||||
<div class="modal__body" style="text-align:center;padding:32px 24px;">
|
||||
<div style="font-size:40px;margin-bottom:12px;">📦</div>
|
||||
<p style="font-size:15px;color:#333;font-weight:600;margin-bottom:8px;">确认申领单 <span id="readyOrderNo"></span> 已备货完成？</p>
|
||||
<p style="font-size:13px;color:#999;line-height:1.6;">净菜/餐品：<span id="readyFoodName" style="color:#333;font-weight:500;"></span><br>确认后订单状态将变为「待配送」</p>
|
||||
</div>
|
||||
<div class="modal__footer" style="justify-content:center;">
|
||||
<button class="btn btn-default" onclick="closeModal('modal-ready')">取消</button>
|
||||
<button class="btn btn-primary" style="background:var(--success);" onclick="doReady()">确认完成</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 弹窗打开/关闭
|
||||
function openModal(id){document.getElementById(id).classList.add('show');}
|
||||
@@ -264,6 +353,82 @@ function toggleClaimName(){
|
||||
document.getElementById('claimNameNC').style.display=(v==='cp'?'none':'flex');
|
||||
document.getElementById('claimNameCP').style.display=(v==='cp'?'flex':'none');
|
||||
}
|
||||
|
||||
/* 确认收货 */
|
||||
function openReceiveConfirm(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
/* 列：0申领单号 4净菜/餐品 */
|
||||
document.getElementById('receiveOrderNo').textContent=tds[0].textContent;
|
||||
document.getElementById('receiveFoodName').textContent=tds[4].textContent;
|
||||
openModal('modal-receive');
|
||||
}
|
||||
function doReceive(){
|
||||
closeModal('modal-receive');
|
||||
alert('收货确认成功，订单状态已变为「已完成」');
|
||||
}
|
||||
|
||||
/* 立即配送 */
|
||||
function openDeliverModal(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
document.getElementById('deliverOrderNo').textContent=tds[0].textContent;
|
||||
document.getElementById('deliverFoodName').textContent=tds[4].textContent;
|
||||
document.getElementById('deliverPerson').value='';
|
||||
document.getElementById('deliverRemark').value='';
|
||||
openModal('modal-deliver');
|
||||
}
|
||||
function doDeliver(){
|
||||
var person=document.getElementById('deliverPerson').value.trim();
|
||||
if(!person){alert('请输入配送人姓名');return;}
|
||||
closeModal('modal-deliver');
|
||||
alert('配送任务已创建，配送人：'+person+'，订单状态已变为「配送中」');
|
||||
}
|
||||
|
||||
/* 备货完成 */
|
||||
function openReadyConfirm(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
document.getElementById('readyOrderNo').textContent=tds[0].textContent;
|
||||
document.getElementById('readyFoodName').textContent=tds[4].textContent;
|
||||
openModal('modal-ready');
|
||||
}
|
||||
function doReady(){
|
||||
closeModal('modal-ready');
|
||||
alert('备货已确认完成，订单状态已变为「待配送」');
|
||||
}
|
||||
|
||||
/* 右侧抽屉组件 */
|
||||
var Drawer={
|
||||
open:function(title,bodyHtml){
|
||||
this.close();
|
||||
var overlay=document.createElement('div');
|
||||
overlay.className='drawer-overlay';
|
||||
overlay.innerHTML='<div class="drawer"><div class="drawer__header"><div class="drawer__title">'+title+'</div><button class="drawer__close" onclick="Drawer.close()">×</button></div><div class="drawer__body">'+bodyHtml+'</div></div>';
|
||||
overlay.addEventListener('click',function(e){if(e.target===overlay)Drawer.close();});
|
||||
document.body.appendChild(overlay);
|
||||
},
|
||||
close:function(){
|
||||
var o=document.querySelector('.drawer-overlay');
|
||||
if(!o)return;
|
||||
o.classList.add('closing');
|
||||
setTimeout(function(){o.remove();},200);
|
||||
}
|
||||
};
|
||||
|
||||
/* 详情抽屉 */
|
||||
function showDetail(el){
|
||||
var tr=el.closest('tr');
|
||||
var ths=tr.closest('table').querySelectorAll('thead th');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var html='<div class="drawer-section"><div class="drawer-section__title">详细信息</div><div class="drawer-fields">';
|
||||
for(var i=0;i<ths.length-1;i++){
|
||||
html+='<div class="drawer-field"><div class="drawer-field__label">'+ths[i].textContent+'</div><div class="drawer-field__value">'+tds[i].innerHTML+'</div></div>';
|
||||
}
|
||||
html+='</div></div>';
|
||||
var key=tds[0].textContent;
|
||||
Drawer.open('净菜内供详情 — '+key, html);
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -105,6 +105,27 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
thead th:last-child,tbody td.td-actions{position:sticky;right:0;background:#fff;box-shadow:-4px 0 8px rgba(0,0,0,0.04);z-index:2;white-space:nowrap;}
|
||||
thead th:last-child{background:#FAFAFA;}
|
||||
tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
/* 右侧抽屉 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;animation:modalFadeIn .2s ease;}
|
||||
.drawer-overlay.closing{animation:modalFadeOut .2s ease forwards;}
|
||||
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
|
||||
@keyframes modalFadeOut{from{opacity:1}to{opacity:0}}
|
||||
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:90vw;background:#fff;box-shadow:-6px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;z-index:1001;animation:drawerSlideIn .25s ease;}
|
||||
.drawer-overlay.closing .drawer{animation:drawerSlideOut .2s ease forwards;}
|
||||
@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
|
||||
@keyframes drawerSlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}}
|
||||
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.drawer__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;}
|
||||
.drawer__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.drawer__body{padding:0 24px 24px;overflow-y:auto;flex:1;}
|
||||
.drawer-section{margin-top:20px;}
|
||||
.drawer-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
|
||||
.drawer-section__title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--primary);border-radius:2px;}
|
||||
.drawer-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;}
|
||||
.drawer-field{display:flex;flex-direction:column;gap:2px;}
|
||||
.drawer-field__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.drawer-field__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;min-height:22px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -177,22 +198,22 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>HYG-20260415-001</td><td>ST-FH-FA01-VG-BOCA-286K-20260415-001</td><td>菠菜</td><td>农药残留</td><td><span class="tag tag-green">合格</span></td><td>0.02mg/kg</td><td><0.1mg/kg</td><td>2026-04-15 10:00</td><td>内部检测室</td><td>李检测</td><td><span class="tag tag-blue">电子报告扫描</span></td><td>RPT-20260415-001</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openModal()">详情</span> <span class="link" onclick="openModal()">编辑</span> <span class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</span></td>
|
||||
<td>HYG-20260415-001</td><td>ST-FH-FA01-VG-BOCA-286K-20260415-001</td><td>菠菜</td><td>农药残留</td><td><span class="tag tag-green">合格</span></td><td>0.02mg/kg</td><td><0.1mg/kg</td><td>2026-04-15 10:00</td><td>内部检测室</td><td>李检测</td><td><span class="tag tag-blue">电子报告扫描</span></td><td>RPT-20260415-001</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" onclick="openModal()">编辑</span> <span class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HYG-20260415-002</td><td>ST-EX-XR01-MT-ZLRJ-080K-20260415-005</td><td>猪里脊</td><td>瘦肉精</td><td><span class="tag tag-green">合格</span></td><td>未检出</td><td>未检出</td><td>2026-04-15 10:30</td><td>内部检测室</td><td>王检测</td><td><span class="tag tag-gray">纸质OCR识别</span></td><td>RPT-20260415-002</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openModal()">详情</span> <span class="link" onclick="openModal()">编辑</span> <span class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</span></td>
|
||||
<td>HYG-20260415-002</td><td>ST-EX-XR01-MT-ZLRJ-080K-20260415-005</td><td>猪里脊</td><td>瘦肉精</td><td><span class="tag tag-green">合格</span></td><td>未检出</td><td>未检出</td><td>2026-04-15 10:30</td><td>内部检测室</td><td>王检测</td><td><span class="tag tag-gray">纸质OCR识别</span></td><td>RPT-20260415-002</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" onclick="openModal()">编辑</span> <span class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HYG-20260415-003</td><td>ST-EX-HS01-SF-CAYO-060K-20260414-001</td><td>草鱼</td><td>甲醛</td><td><span class="tag tag-red">不合格</span></td><td>0.15mg/kg</td><td><0.05mg/kg</td><td>2026-04-15 11:00</td><td>第三方检测机构</td><td>外部检测员</td><td><span class="tag tag-blue">电子报告扫描</span></td><td>RPT-20260415-003</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openModal()">详情</span> <span class="link" onclick="openModal()">编辑</span><span class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</span> <span class="link" style="color:var(--danger)">隔离处理</span></td>
|
||||
<td>HYG-20260415-003</td><td>ST-EX-HS01-SF-CAYO-060K-20260414-001</td><td>草鱼</td><td>甲醛</td><td><span class="tag tag-red">不合格</span></td><td>0.15mg/kg</td><td><0.05mg/kg</td><td>2026-04-15 11:00</td><td>第三方检测机构</td><td>外部检测员</td><td><span class="tag tag-blue">电子报告扫描</span></td><td>RPT-20260415-003</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" onclick="openModal()">编辑</span><span class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</span> <span class="link" style="color:var(--danger)" onclick="openIsolateConfirm('草鱼')">隔离处理</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HYG-20260416-004</td><td>ST-FH-FB01-VG-HLUB-420K-20260415-002</td><td>胡萝卜</td><td>重金属（铅）</td><td><span class="tag tag-green">合格</span></td><td>0.01mg/kg</td><td><0.1mg/kg</td><td>2026-04-16 09:00</td><td>内部检测室</td><td>李检测</td><td><span class="tag tag-orange">手动录入</span></td><td>RPT-20260416-004</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openModal()">详情</span> <span class="link" onclick="openModal()">编辑</span> <span class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</span></td>
|
||||
<td>HYG-20260416-004</td><td>ST-FH-FB01-VG-HLUB-420K-20260415-002</td><td>胡萝卜</td><td>重金属（铅）</td><td><span class="tag tag-green">合格</span></td><td>0.01mg/kg</td><td><0.1mg/kg</td><td>2026-04-16 09:00</td><td>内部检测室</td><td>李检测</td><td><span class="tag tag-orange">手动录入</span></td><td>RPT-20260416-004</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" onclick="openModal()">编辑</span> <span class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HYG-20260416-005</td><td>ST-EX-LY01-VG-BOCA-050K-20260415-002</td><td>菠菜（外采批）</td><td>农药残留</td><td><span class="tag tag-green">合格</span></td><td>0.03mg/kg</td><td><0.1mg/kg</td><td>2026-04-16 09:30</td><td>内部检测室</td><td>李检测</td><td><span class="tag tag-gray">纸质OCR识别</span></td><td>RPT-20260416-005</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openModal()">详情</span> <span class="link" onclick="openModal()">编辑</span> <span class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</span></td>
|
||||
<td>HYG-20260416-005</td><td>ST-EX-LY01-VG-BOCA-050K-20260415-002</td><td>菠菜（外采批）</td><td>农药残留</td><td><span class="tag tag-green">合格</span></td><td>0.03mg/kg</td><td><0.1mg/kg</td><td>2026-04-16 09:30</td><td>内部检测室</td><td>李检测</td><td><span class="tag tag-gray">纸质OCR识别</span></td><td>RPT-20260416-005</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" onclick="openModal()">编辑</span> <span class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HYG-20260416-006</td><td>ST-EX-XR01-MT-ZLRJ-080K-20260415-005</td><td>猪里脊</td><td>微生物（大肠杆菌）</td><td><span class="tag tag-green">合格</span></td><td>未检出</td><td>未检出</td><td>2026-04-16 10:00</td><td>内部检测室</td><td>王检测</td><td><span class="tag tag-blue">电子报告扫描</span></td><td>RPT-20260416-006</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openModal()">详情</span> <span class="link" onclick="openModal()">编辑</span> <span class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</span></td>
|
||||
<td>HYG-20260416-006</td><td>ST-EX-XR01-MT-ZLRJ-080K-20260415-005</td><td>猪里脊</td><td>微生物（大肠杆菌）</td><td><span class="tag tag-green">合格</span></td><td>未检出</td><td>未检出</td><td>2026-04-16 10:00</td><td>内部检测室</td><td>王检测</td><td><span class="tag tag-blue">电子报告扫描</span></td><td>RPT-20260416-006</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" onclick="openModal()">编辑</span> <span class="link" style="color:var(--danger)" onclick="if(confirm('确认删除该记录？')){}">删除</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -262,6 +283,27 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 隔离处理确认弹窗 -->
|
||||
<div class="modal-overlay" id="isolateModal" style="display:none;">
|
||||
<div class="modal" style="width:420px;">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">隔离处理确认</span>
|
||||
<span class="modal-close" onclick="closeIsolateConfirm()">×</span>
|
||||
</div>
|
||||
<div class="modal-body" style="text-align:center;padding:32px 24px;">
|
||||
<div style="width:48px;height:48px;border-radius:50%;background:#FFF7E6;display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 2L1 21h22L12 2z" fill="#FAAD14"/><path d="M12 14V9" stroke="#fff" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="17" r="1" fill="#fff"/></svg>
|
||||
</div>
|
||||
<div style="font-size:15px;font-weight:600;color:#262626;margin-bottom:8px;">是否要对该菜品（<span id="isolateFoodName"></span>）进行隔离处理？</div>
|
||||
<div style="font-size:13px;color:#8c8c8c;line-height:1.6;">隔离后对应采购单状态将变为<span style="color:var(--danger);font-weight:500;">隔离处理中</span></div>
|
||||
</div>
|
||||
<div class="modal-footer" style="justify-content:center;">
|
||||
<button class="btn btn-default" onclick="closeIsolateConfirm()">取消</button>
|
||||
<button class="btn btn-primary" style="background:var(--danger);" onclick="confirmIsolate()">确认隔离</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openVideoModal(){document.getElementById('videoModal').style.display='flex';}
|
||||
function closeVideoModal(){document.getElementById('videoModal').style.display='none';}
|
||||
@@ -269,6 +311,50 @@ document.getElementById('videoModal').addEventListener('click',function(e){if(e.
|
||||
function openModal(){document.getElementById('modalOverlay').style.display='flex';}
|
||||
function closeModal(){document.getElementById('modalOverlay').style.display='none';}
|
||||
document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
|
||||
/* 右侧抽屉组件 */
|
||||
var Drawer={
|
||||
open:function(title,bodyHtml){
|
||||
this.close();
|
||||
var overlay=document.createElement('div');
|
||||
overlay.className='drawer-overlay';
|
||||
overlay.innerHTML='<div class="drawer"><div class="drawer__header"><div class="drawer__title">'+title+'</div><button class="drawer__close" onclick="Drawer.close()">×</button></div><div class="drawer__body">'+bodyHtml+'</div></div>';
|
||||
overlay.addEventListener('click',function(e){if(e.target===overlay)Drawer.close();});
|
||||
document.body.appendChild(overlay);
|
||||
},
|
||||
close:function(){
|
||||
var o=document.querySelector('.drawer-overlay');
|
||||
if(!o)return;
|
||||
o.classList.add('closing');
|
||||
setTimeout(function(){o.remove();},200);
|
||||
}
|
||||
};
|
||||
|
||||
/* 隔离处理确认弹窗 */
|
||||
function openIsolateConfirm(foodName){
|
||||
document.getElementById('isolateFoodName').textContent=foodName;
|
||||
document.getElementById('isolateModal').style.display='flex';
|
||||
}
|
||||
function closeIsolateConfirm(){document.getElementById('isolateModal').style.display='none';}
|
||||
document.getElementById('isolateModal').addEventListener('click',function(e){if(e.target===this)closeIsolateConfirm();});
|
||||
function confirmIsolate(){
|
||||
closeIsolateConfirm();
|
||||
alert('已提交隔离处理，对应采购单状态已变为"隔离处理中"');
|
||||
}
|
||||
|
||||
/* 详情抽屉 */
|
||||
function showDetail(el){
|
||||
var tr=el.closest('tr');
|
||||
var ths=tr.closest('table').querySelectorAll('thead th');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var fields='';
|
||||
for(var i=0;i<ths.length-1;i++){
|
||||
fields+='<div class="drawer-field"><div class="drawer-field__label">'+ths[i].textContent+'</div><div class="drawer-field__value">'+tds[i].innerHTML+'</div></div>';
|
||||
}
|
||||
var title='检测详情 — '+tds[0].textContent;
|
||||
var body='<div class="drawer-section"><div class="drawer-section__title">基本信息</div><div class="drawer-fields">'+fields+'</div></div>';
|
||||
Drawer.open(title,body);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -113,6 +113,27 @@ tbody td.td-actions{white-space:nowrap;}
|
||||
.action-more .dropdown a:hover{background:var(--primary-light);color:var(--primary);}
|
||||
.action-more .dropdown a.danger{color:var(--danger);}
|
||||
.action-more .dropdown a.danger:hover{background:#FFF1F0;}
|
||||
/* 右侧抽屉 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;animation:modalFadeIn .2s ease;}
|
||||
.drawer-overlay.closing{animation:modalFadeOut .2s ease forwards;}
|
||||
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
|
||||
@keyframes modalFadeOut{from{opacity:1}to{opacity:0}}
|
||||
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:90vw;background:#fff;box-shadow:-6px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;z-index:1001;animation:drawerSlideIn .25s ease;}
|
||||
.drawer-overlay.closing .drawer{animation:drawerSlideOut .2s ease forwards;}
|
||||
@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
|
||||
@keyframes drawerSlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}}
|
||||
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.drawer__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;}
|
||||
.drawer__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.drawer__body{padding:0 24px 24px;overflow-y:auto;flex:1;}
|
||||
.drawer-section{margin-top:20px;}
|
||||
.drawer-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
|
||||
.drawer-section__title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--primary);border-radius:2px;}
|
||||
.drawer-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;}
|
||||
.drawer-field{display:flex;flex-direction:column;gap:2px;}
|
||||
.drawer-field__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.drawer-field__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;min-height:22px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -181,25 +202,25 @@ tbody td.td-actions{white-space:nowrap;}
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>PROC-001</td><td><span class="link">NC-IN-001</span></td><td>NC-PROC-BOCA-20260415-01</td><td>土豆</td><td>土豆丝</td><td>去皮/切割</td><td>100</td><td>86</td><td>86.0</td><td>李加工</td><td>2026-04-15 08:00</td><td>2026-04-15 08:45</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-green">已入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>PROC-001</td><td><span class="link">NC-IN-001</span></td><td>NC-PROC-BOCA-20260415-01</td><td>土豆</td><td>土豆丝</td><td>去皮/切割</td><td>100</td><td>86</td><td>86.0</td><td>李加工</td><td>2026-04-15 08:00</td><td>2026-04-15 08:45</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-green">已入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PROC-002</td><td><span class="link">—</span></td><td>NC-PROC-HLUB-20260415-01</td><td>土豆</td><td>土豆片</td><td>去皮/切割</td><td>140</td><td>120</td><td>85.7</td><td>王加工</td><td>2026-04-15 08:30</td><td>2026-04-15 09:20</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock()">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>PROC-002</td><td><span class="link">—</span></td><td>NC-PROC-HLUB-20260415-01</td><td>土豆</td><td>土豆片</td><td>去皮/切割</td><td>140</td><td>120</td><td>85.7</td><td>王加工</td><td>2026-04-15 08:30</td><td>2026-04-15 09:20</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock(this)">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PROC-003</td><td><span class="link">—</span></td><td>NC-PROC-XGUO-20260415-01</td><td>土豆</td><td>土豆泥</td><td>去皮/切割</td><td>56</td><td>48</td><td>85.7</td><td>李加工</td><td>2026-04-15 09:00</td><td>2026-04-15 09:40</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock()">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>PROC-003</td><td><span class="link">—</span></td><td>NC-PROC-XGUO-20260415-01</td><td>土豆</td><td>土豆泥</td><td>去皮/切割</td><td>56</td><td>48</td><td>85.7</td><td>李加工</td><td>2026-04-15 09:00</td><td>2026-04-15 09:40</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock(this)">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PROC-004</td><td><span class="link">—</span></td><td>NC-PROC-SJDOU-20260415-01</td><td>四季豆</td><td>段（5cm）</td><td>清洗</td><td>60</td><td>52</td><td>86.7</td><td>张加工</td><td>2026-04-15 09:30</td><td>2026-04-15 10:00</td><td><span class="tag tag-orange">待处理</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>PROC-004</td><td><span class="link">—</span></td><td>NC-PROC-SJDOU-20260415-01</td><td>四季豆</td><td>段（5cm）</td><td>清洗</td><td>60</td><td>52</td><td>86.7</td><td>张加工</td><td>2026-04-15 09:30</td><td>2026-04-15 10:00</td><td><span class="tag tag-orange">待处理</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PROC-005</td><td><span class="link">NC-IN-004</span></td><td>NC-PROC-BCAI-20260415-01</td><td>白菜</td><td>整棵</td><td>清洗</td><td>80</td><td>70</td><td>87.5</td><td>张加工</td><td>2026-04-15 07:30</td><td>2026-04-15 08:10</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock()">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>PROC-005</td><td><span class="link">NC-IN-004</span></td><td>NC-PROC-BCAI-20260415-01</td><td>白菜</td><td>整棵</td><td>清洗</td><td>80</td><td>70</td><td>87.5</td><td>张加工</td><td>2026-04-15 07:30</td><td>2026-04-15 08:10</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock(this)">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PROC-006</td><td><span class="link">NC-IN-005</span></td><td>NC-PROC-ZLRJ-20260415-01</td><td>猪里脊</td><td>丁（1.5cm）</td><td>切割</td><td>80</td><td>76</td><td>95.0</td><td>王加工</td><td>2026-04-15 09:30</td><td>2026-04-15 09:55</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock()">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>PROC-006</td><td><span class="link">NC-IN-005</span></td><td>NC-PROC-ZLRJ-20260415-01</td><td>猪里脊</td><td>丁（1.5cm）</td><td>切割</td><td>80</td><td>76</td><td>95.0</td><td>王加工</td><td>2026-04-15 09:30</td><td>2026-04-15 09:55</td><td><span class="tag tag-green">合格</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="confirmGenStock(this)">生成入库单</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PROC-007</td><td><span class="link">—</span></td><td>NC-PROC-ZLRJ-20260415-02</td><td>猪里脊</td><td>条（4cm）</td><td>切割</td><td>90</td><td>85</td><td>94.4</td><td>李加工</td><td>2026-04-15 10:00</td><td>2026-04-15 10:30</td><td><span class="tag tag-orange">待处理</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>PROC-007</td><td><span class="link">—</span></td><td>NC-PROC-ZLRJ-20260415-02</td><td>猪里脊</td><td>条（4cm）</td><td>切割</td><td>90</td><td>85</td><td>94.4</td><td>李加工</td><td>2026-04-15 10:00</td><td>2026-04-15 10:30</td><td><span class="tag tag-orange">待处理</span></td><td><span class="tag tag-gray">未入库</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -282,11 +303,11 @@ tbody td.td-actions{white-space:nowrap;}
|
||||
<div class="modal-body" style="text-align:center;padding:32px 24px;">
|
||||
<div style="font-size:40px;margin-bottom:12px;">📦</div>
|
||||
<p style="font-size:15px;color:#333;margin-bottom:8px;">确认将该加工批次生成净菜入库单？</p>
|
||||
<p style="font-size:13px;color:#999;">生成后将自动同步至净菜入库模块</p>
|
||||
<p style="font-size:13px;color:#999;">确认后将跳转至净菜入库页面并自动填充信息</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" onclick="closeConfirmStock()">取消</button>
|
||||
<button class="btn btn-primary" onclick="closeConfirmStock();alert('入库单已生成');">确认生成</button>
|
||||
<button class="btn btn-primary" onclick="doGenStock()">确认生成</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -298,9 +319,66 @@ document.getElementById('videoModal').addEventListener('click',function(e){if(e.
|
||||
function openModal(){document.getElementById('modalOverlay').style.display='flex';}
|
||||
function closeModal(){document.getElementById('modalOverlay').style.display='none';}
|
||||
document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
function confirmGenStock(){document.getElementById('confirmStockModal').style.display='flex';}
|
||||
/* 生成入库单 */
|
||||
var _stockRowData=null;
|
||||
function confirmGenStock(el){
|
||||
var tr=el.closest('tr');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
/* 列序：0加工批次号 1关联单号 2溯源码 3食材名称 4净菜类型 5加工步骤 6毛菜重量 7净菜重量 */
|
||||
_stockRowData={
|
||||
batch:tds[0].textContent,
|
||||
trace:tds[2].textContent,
|
||||
food:tds[3].textContent,
|
||||
cleanType:tds[4].textContent,
|
||||
weight:tds[7].textContent
|
||||
};
|
||||
document.getElementById('confirmStockModal').style.display='flex';
|
||||
}
|
||||
function closeConfirmStock(){document.getElementById('confirmStockModal').style.display='none';}
|
||||
document.getElementById('confirmStockModal').addEventListener('click',function(e){if(e.target===this)closeConfirmStock();});
|
||||
function doGenStock(){
|
||||
if(!_stockRowData)return;
|
||||
var params=new URLSearchParams();
|
||||
params.set('from','clean');
|
||||
params.set('batch',_stockRowData.batch);
|
||||
params.set('trace',_stockRowData.trace);
|
||||
params.set('food',_stockRowData.food);
|
||||
params.set('cleanType',_stockRowData.cleanType);
|
||||
params.set('weight',_stockRowData.weight);
|
||||
window.location.href='sup-in-cleanin.html?'+params.toString();
|
||||
}
|
||||
|
||||
/* 右侧抽屉组件 */
|
||||
var Drawer={
|
||||
open:function(title,bodyHtml){
|
||||
this.close();
|
||||
var overlay=document.createElement('div');
|
||||
overlay.className='drawer-overlay';
|
||||
overlay.innerHTML='<div class="drawer"><div class="drawer__header"><div class="drawer__title">'+title+'</div><button class="drawer__close" onclick="Drawer.close()">×</button></div><div class="drawer__body">'+bodyHtml+'</div></div>';
|
||||
overlay.addEventListener('click',function(e){if(e.target===overlay)Drawer.close();});
|
||||
document.body.appendChild(overlay);
|
||||
},
|
||||
close:function(){
|
||||
var o=document.querySelector('.drawer-overlay');
|
||||
if(!o)return;
|
||||
o.classList.add('closing');
|
||||
setTimeout(function(){o.remove();},200);
|
||||
}
|
||||
};
|
||||
|
||||
/* 详情抽屉 */
|
||||
function showDetail(el){
|
||||
var tr=el.closest('tr');
|
||||
var ths=tr.closest('table').querySelectorAll('thead th');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var html='<div class="drawer-section"><div class="drawer-section__title">基本信息</div><div class="drawer-fields">';
|
||||
for(var i=0;i<ths.length-1;i++){
|
||||
html+='<div class="drawer-field"><div class="drawer-field__label">'+ths[i].textContent+'</div><div class="drawer-field__value">'+tds[i].innerHTML+'</div></div>';
|
||||
}
|
||||
html+='</div></div>';
|
||||
var title='净菜加工详情 — '+tds[0].textContent;
|
||||
Drawer.open(title,html);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -113,6 +113,27 @@ tbody td.td-actions{white-space:nowrap;}
|
||||
.action-more .dropdown a:hover{background:var(--primary-light);color:var(--primary);}
|
||||
.action-more .dropdown a.danger{color:var(--danger);}
|
||||
.action-more .dropdown a.danger:hover{background:#FFF1F0;}
|
||||
/* 右侧抽屉 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;animation:modalFadeIn .2s ease;}
|
||||
.drawer-overlay.closing{animation:modalFadeOut .2s ease forwards;}
|
||||
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
|
||||
@keyframes modalFadeOut{from{opacity:1}to{opacity:0}}
|
||||
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:90vw;background:#fff;box-shadow:-6px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;z-index:1001;animation:drawerSlideIn .25s ease;}
|
||||
.drawer-overlay.closing .drawer{animation:drawerSlideOut .2s ease forwards;}
|
||||
@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
|
||||
@keyframes drawerSlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}}
|
||||
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.drawer__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;}
|
||||
.drawer__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.drawer__body{padding:0 24px 24px;overflow-y:auto;flex:1;}
|
||||
.drawer-section{margin-top:20px;}
|
||||
.drawer-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
|
||||
.drawer-section__title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--primary);border-radius:2px;}
|
||||
.drawer-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;}
|
||||
.drawer-field{display:flex;flex-direction:column;gap:2px;}
|
||||
.drawer-field__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.drawer-field__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;min-height:22px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -173,23 +194,23 @@ tbody td.td-actions{white-space:nowrap;}
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>入库单号</th><th>关联单号</th><th>溯源码</th><th>食材名称</th><th>净菜类型</th><th>入库规格</th><th>入库数量</th><th>入库重量(kg)</th><th>当前库存(kg)</th><th>操作时间</th><th>保质期至</th><th>存放区域</th><th>存放温度(℃)</th><th>操作人</th><th>操作</th>
|
||||
<th>入库单号</th><th>关联单号</th><th>溯源码</th><th>食材名称</th><th>净菜类型</th><th>入库规格</th><th>入库数量</th><th>入库重量(kg)</th><th>当前库存(kg)</th><th>操作时间</th><th>保质期至</th><th>存放区域</th><th>存放温度(℃)</th><th>操作人</th><th>操作类型</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>NC-IN-001</td><td><span class="link">PROC-001</span></td><td>NC-PROC-BOCA-20260415-01</td><td>土豆</td><td>土豆丝</td><td>袋装/500g</td><td>86</td><td>43.0</td><td>31.0</td><td>2026-04-15 09:15</td><td>2026-04-17 09:15</td><td>A仓-蔬菜区-01</td><td>4.1</td><td>李入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-001')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>NC-IN-001</td><td><span class="link">PROC-001</span></td><td>NC-PROC-BOCA-20260415-01</td><td>土豆</td><td>土豆丝</td><td>袋装/500g</td><td>86</td><td>43.0</td><td>31.0</td><td>2026-04-15 09:15</td><td>2026-04-17 09:15</td><td>A仓-蔬菜区-01</td><td>4.1</td><td>李入库</td><td><span class="tag tag-blue">设备自动</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-001')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NC-IN-002</td><td><span class="link">PROC-002</span></td><td>NC-PROC-HLUB-20260415-01</td><td>土豆</td><td>土豆片</td><td>袋装/500g</td><td>120</td><td>60.0</td><td>47.5</td><td>2026-04-15 09:45</td><td>2026-04-18 09:45</td><td>A仓-蔬菜区-02</td><td>4.2</td><td>王入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-002')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>NC-IN-002</td><td><span class="link">PROC-002</span></td><td>NC-PROC-HLUB-20260415-01</td><td>土豆</td><td>土豆片</td><td>袋装/500g</td><td>120</td><td>60.0</td><td>47.5</td><td>2026-04-15 09:45</td><td>2026-04-18 09:45</td><td>A仓-蔬菜区-02</td><td>4.2</td><td>王入库</td><td><span class="tag tag-blue">设备自动</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-002')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NC-IN-003</td><td><span class="link">PROC-003</span></td><td>NC-PROC-XGUO-20260415-01</td><td>土豆</td><td>土豆泥</td><td>盒装/300g</td><td>48</td><td>14.4</td><td>9.0</td><td>2026-04-15 11:00</td><td>2026-04-17 11:00</td><td>A仓-蔬菜区-03</td><td>4.0</td><td>李入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-003')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>NC-IN-003</td><td><span class="link">PROC-003</span></td><td>NC-PROC-XGUO-20260415-01</td><td>土豆</td><td>土豆泥</td><td>盒装/300g</td><td>48</td><td>14.4</td><td>9.0</td><td>2026-04-15 11:00</td><td>2026-04-17 11:00</td><td>A仓-蔬菜区-03</td><td>4.0</td><td>李入库</td><td><span class="tag tag-green">人工录入</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-003')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NC-IN-004</td><td><span class="link">PROC-005</span></td><td>NC-PROC-BCAI-20260415-01</td><td>白菜</td><td>整棵</td><td>散装/整棵</td><td>70</td><td>35.0</td><td>22.5</td><td>2026-04-15 11:30</td><td>2026-04-18 11:30</td><td>A仓-蔬菜区-04</td><td>3.8</td><td>张入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-004')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>NC-IN-004</td><td><span class="link">PROC-005</span></td><td>NC-PROC-BCAI-20260415-01</td><td>白菜</td><td>整棵</td><td>散装/整棵</td><td>70</td><td>35.0</td><td>22.5</td><td>2026-04-15 11:30</td><td>2026-04-18 11:30</td><td>A仓-蔬菜区-04</td><td>3.8</td><td>张入库</td><td><span class="tag tag-green">人工录入</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-004')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NC-IN-005</td><td><span class="link">PROC-006</span></td><td>NC-PROC-ZLRJ-20260415-01</td><td>猪里脊</td><td>丁（1.5cm）</td><td>袋装/400g</td><td>76</td><td>30.4</td><td>18.8</td><td>2026-04-15 12:00</td><td>2026-04-16 12:00</td><td>B仓-肉类区-01</td><td>-2.0</td><td>王入库</td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-005')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="openModal()">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
<td>NC-IN-005</td><td><span class="link">PROC-006</span></td><td>NC-PROC-ZLRJ-20260415-01</td><td>猪里脊</td><td>丁（1.5cm）</td><td>袋装/400g</td><td>76</td><td>30.4</td><td>18.8</td><td>2026-04-15 12:00</td><td>2026-04-16 12:00</td><td>B仓-肉类区-01</td><td>-2.0</td><td>王入库</td><td><span class="tag tag-blue">设备自动</span></td><td class="td-actions"><span class="link" onclick="openVideoModal()">查看视频</span> <span class="link" onclick="openOutModal('NC-IN-005')">出库明细</span> <span class="action-more"><span class="more-btn">更多 ▾</span><div class="dropdown"><a href="javascript:;" onclick="showDetail(this)">详情</a><a href="javascript:;" onclick="openModal()">编辑</a><a href="javascript:;" class="danger" onclick="if(confirm('确认删除该记录？')){}">删除</a></div></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -214,17 +235,19 @@ tbody td.td-actions{white-space:nowrap;}
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-grid">
|
||||
<div class="form-item"><label>溯源码<span class="required">*</span></label><input type="text" placeholder="请输入溯源码"></div>
|
||||
<div class="form-item"><label>食材名称</label><input type="text" placeholder="由溯源码自动带出" readonly style="background:#f5f5f5;"></div>
|
||||
<div class="form-item"><label>净菜类型</label><input type="text" placeholder="由溯源码自动带出" readonly style="background:#f5f5f5;"></div>
|
||||
<div class="form-item" id="fi-batch" style="display:none;"><label>关联加工批次</label><input id="f-batch" type="text" readonly style="background:#f5f5f5;"></div>
|
||||
<div class="form-item"><label>溯源码<span class="required">*</span></label><input id="f-trace" type="text" placeholder="请输入溯源码"></div>
|
||||
<div class="form-item"><label>食材名称</label><input id="f-food" type="text" placeholder="由溯源码自动带出" readonly style="background:#f5f5f5;"></div>
|
||||
<div class="form-item"><label>净菜类型</label><input id="f-cleanType" type="text" placeholder="由溯源码自动带出" readonly style="background:#f5f5f5;"></div>
|
||||
<div class="form-item"><label>入库规格<span class="required">*</span></label><select><option>请选择</option><option>袋装/500g</option><option>袋装/400g</option><option>盒装/300g</option><option>散装/整棵</option><option>其他</option></select></div>
|
||||
<div class="form-item"><label>入库数量<span class="required">*</span></label><input type="number" placeholder="请输入入库数量"></div>
|
||||
<div class="form-item"><label>入库重量(kg)<span class="required">*</span></label><input type="number" step="0.1" placeholder="请输入入库重量"></div>
|
||||
<div class="form-item"><label>入库重量(kg)<span class="required">*</span></label><input id="f-weight" type="number" step="0.1" placeholder="请输入入库重量"></div>
|
||||
<div class="form-item"><label>操作时间<span class="required">*</span></label><input type="datetime-local"></div>
|
||||
<div class="form-item"><label>保质期至</label><input type="datetime-local"></div>
|
||||
<div class="form-item"><label>存放区域<span class="required">*</span></label><input type="text" placeholder="请输入存放区域"></div>
|
||||
<div class="form-item"><label>存放温度(℃)</label><input type="number" step="0.1" placeholder="请输入温度"></div>
|
||||
<div class="form-item"><label>操作人<span class="required">*</span></label><input type="text" placeholder="请输入操作人"></div>
|
||||
<div class="form-item"><label>操作类型<span class="required">*</span></label><select><option>请选择</option><option>设备自动</option><option>人工录入</option></select></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
@@ -258,6 +281,38 @@ tbody td.td-actions{white-space:nowrap;}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 右侧抽屉组件 */
|
||||
var Drawer={
|
||||
open:function(title,bodyHtml){
|
||||
this.close();
|
||||
var overlay=document.createElement('div');
|
||||
overlay.className='drawer-overlay';
|
||||
overlay.innerHTML='<div class="drawer"><div class="drawer__header"><div class="drawer__title">'+title+'</div><button class="drawer__close" onclick="Drawer.close()">×</button></div><div class="drawer__body">'+bodyHtml+'</div></div>';
|
||||
overlay.addEventListener('click',function(e){if(e.target===overlay)Drawer.close();});
|
||||
document.body.appendChild(overlay);
|
||||
},
|
||||
close:function(){
|
||||
var o=document.querySelector('.drawer-overlay');
|
||||
if(!o)return;
|
||||
o.classList.add('closing');
|
||||
setTimeout(function(){o.remove();},200);
|
||||
}
|
||||
};
|
||||
|
||||
/* 详情抽屉 */
|
||||
function showDetail(el){
|
||||
var tr=el.closest('tr');
|
||||
var ths=tr.closest('table').querySelectorAll('thead th');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var html='<div class="drawer-section"><div class="drawer-section__title">基本信息</div><div class="drawer-fields">';
|
||||
for(var i=0;i<ths.length-1;i++){
|
||||
html+='<div class="drawer-field"><div class="drawer-field__label">'+ths[i].textContent+'</div><div class="drawer-field__value">'+tds[i].innerHTML+'</div></div>';
|
||||
}
|
||||
html+='</div></div>';
|
||||
var title='入库详情 — '+tds[0].textContent;
|
||||
Drawer.open(title,html);
|
||||
}
|
||||
|
||||
function openModal(){document.getElementById('modalOverlay').style.display='flex';}
|
||||
function closeModal(){document.getElementById('modalOverlay').style.display='none';}
|
||||
function openVideoModal(){alert('播放入库操作视频（原型演示）');}
|
||||
@@ -265,6 +320,28 @@ function openOutModal(id){document.getElementById('outModalOverlay').style.displ
|
||||
function closeOutModal(){document.getElementById('outModalOverlay').style.display='none';}
|
||||
document.getElementById('modalOverlay').addEventListener('click',function(e){if(e.target===this)closeModal();});
|
||||
document.getElementById('outModalOverlay').addEventListener('click',function(e){if(e.target===this)closeOutModal();});
|
||||
|
||||
/* 从净菜加工页跳转过来时，自动打开新增弹窗并填充数据 */
|
||||
(function(){
|
||||
var params=new URLSearchParams(window.location.search);
|
||||
if(params.get('from')!=='clean')return;
|
||||
/* 填充字段 */
|
||||
var batch=params.get('batch')||'';
|
||||
var trace=params.get('trace')||'';
|
||||
var food=params.get('food')||'';
|
||||
var cleanType=params.get('cleanType')||'';
|
||||
var weight=params.get('weight')||'';
|
||||
if(batch){
|
||||
document.getElementById('fi-batch').style.display='';
|
||||
document.getElementById('f-batch').value=batch;
|
||||
}
|
||||
if(trace) document.getElementById('f-trace').value=trace;
|
||||
if(food) document.getElementById('f-food').value=food;
|
||||
if(cleanType) document.getElementById('f-cleanType').value=cleanType;
|
||||
if(weight) document.getElementById('f-weight').value=weight;
|
||||
/* 自动打开弹窗 */
|
||||
openModal();
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -108,6 +108,27 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
.form-item input:focus,.form-item select:focus,.form-item textarea:focus{border-color:#1890FF;}
|
||||
.form-item textarea{height:80px;padding:8px 12px;resize:vertical;}
|
||||
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
|
||||
/* 右侧抽屉 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;animation:modalFadeIn .2s ease;}
|
||||
.drawer-overlay.closing{animation:modalFadeOut .2s ease forwards;}
|
||||
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
|
||||
@keyframes modalFadeOut{from{opacity:1}to{opacity:0}}
|
||||
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:90vw;background:#fff;box-shadow:-6px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;z-index:1001;animation:drawerSlideIn .25s ease;}
|
||||
.drawer-overlay.closing .drawer{animation:drawerSlideOut .2s ease forwards;}
|
||||
@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
|
||||
@keyframes drawerSlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}}
|
||||
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.drawer__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;}
|
||||
.drawer__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.drawer__body{padding:0 24px 24px;overflow-y:auto;flex:1;}
|
||||
.drawer-section{margin-top:20px;}
|
||||
.drawer-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
|
||||
.drawer-section__title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--primary);border-radius:2px;}
|
||||
.drawer-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;}
|
||||
.drawer-field{display:flex;flex-direction:column;gap:2px;}
|
||||
.drawer-field__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.drawer-field__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;min-height:22px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -180,19 +201,19 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>IN-20260415-001</td><td><span class="tag tag-green">设备自动</span></td><td>ST-FH-FA01-VG-BOCA-286K-20260415-001</td><td><span class="tag tag-blue">自产</span></td><td>菠菜</td><td>A区蔬菜基地</td><td>25kg/件</td><td>12件</td><td>286</td><td>2026-04-15 10:30</td><td>A仓-蔬菜区-01</td><td>张三丰</td><td class="td-actions"><span class="link" onclick="openVideo()">查看视频</span> <span class="link">编辑</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td>
|
||||
<td>IN-20260415-001</td><td><span class="tag tag-green">设备自动</span></td><td>ST-FH-FA01-VG-BOCA-286K-20260415-001</td><td><span class="tag tag-blue">自产</span></td><td>菠菜</td><td>A区蔬菜基地</td><td>25kg/件</td><td>12件</td><td>286</td><td>2026-04-15 10:30</td><td>A仓-蔬菜区-01</td><td>张三丰</td><td class="td-actions"><span class="link" onclick="openVideo()">查看视频</span> <span class="link">编辑</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>IN-20260415-002</td><td><span class="tag tag-green">设备自动</span></td><td>ST-EX-LY01-VG-BOCA-050K-20260415-002</td><td><span class="tag tag-gray">外采</span></td><td>菠菜</td><td>绿源蔬菜配送</td><td>10kg/筐</td><td>5筐</td><td>50</td><td>2026-04-15 08:30</td><td>A仓-蔬菜区-02</td><td>李三丰</td><td class="td-actions"><span class="link" onclick="openVideo()">查看视频</span> <span class="link">编辑</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td>
|
||||
<td>IN-20260415-002</td><td><span class="tag tag-green">设备自动</span></td><td>ST-EX-LY01-VG-BOCA-050K-20260415-002</td><td><span class="tag tag-gray">外采</span></td><td>菠菜</td><td>绿源蔬菜配送</td><td>10kg/筐</td><td>5筐</td><td>50</td><td>2026-04-15 08:30</td><td>A仓-蔬菜区-02</td><td>李三丰</td><td class="td-actions"><span class="link" onclick="openVideo()">查看视频</span> <span class="link">编辑</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>IN-20260415-003</td><td><span class="tag tag-orange">人工录入</span></td><td>ST-EX-XR01-MT-ZLRJ-080K-20260415-005</td><td><span class="tag tag-gray">外采</span></td><td>猪里脊</td><td>鲜肉直供公司</td><td>20kg/箱</td><td>4箱</td><td>80</td><td>2026-04-15 09:15</td><td>B仓-肉类区-01</td><td>王三丰</td><td class="td-actions"><span class="link" onclick="openVideo()">查看视频</span> <span class="link">编辑</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td>
|
||||
<td>IN-20260415-003</td><td><span class="tag tag-orange">人工录入</span></td><td>ST-EX-XR01-MT-ZLRJ-080K-20260415-005</td><td><span class="tag tag-gray">外采</span></td><td>猪里脊</td><td>鲜肉直供公司</td><td>20kg/箱</td><td>4箱</td><td>80</td><td>2026-04-15 09:15</td><td>B仓-肉类区-01</td><td>王三丰</td><td class="td-actions"><span class="link" onclick="openVideo()">查看视频</span> <span class="link">编辑</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>IN-20260415-004</td><td><span class="tag tag-orange">人工录入</span></td><td>ST-EX-HS01-SF-CAYO-060K-20260414-001</td><td><span class="tag tag-gray">外采</span></td><td>草鱼</td><td>海鲜水产配送</td><td>散装(kg)</td><td>60kg</td><td>60</td><td>2026-04-15 09:45</td><td>C仓-水产区-01</td><td>李三丰</td><td class="td-actions"><span class="link" onclick="openVideo()">查看视频</span> <span class="link">编辑</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td>
|
||||
<td>IN-20260415-004</td><td><span class="tag tag-orange">人工录入</span></td><td>ST-EX-HS01-SF-CAYO-060K-20260414-001</td><td><span class="tag tag-gray">外采</span></td><td>草鱼</td><td>海鲜水产配送</td><td>散装(kg)</td><td>60kg</td><td>60</td><td>2026-04-15 09:45</td><td>C仓-水产区-01</td><td>李三丰</td><td class="td-actions"><span class="link" onclick="openVideo()">查看视频</span> <span class="link">编辑</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>IN-20260416-005</td><td><span class="tag tag-green">设备自动</span></td><td>ST-FH-FB01-VG-HLUB-420K-20260415-002</td><td><span class="tag tag-blue">自产</span></td><td>胡萝卜</td><td>B区根茎基地</td><td>25kg/件</td><td>17件</td><td>420</td><td>2026-04-16 11:00</td><td>A仓-蔬菜区-03</td><td>张三丰</td><td class="td-actions"><span class="link" onclick="openVideo()">查看视频</span> <span class="link">编辑</span> <span class="link">详情</span> <span class="link" style="color:var(--danger)">删除</span></td>
|
||||
<td>IN-20260416-005</td><td><span class="tag tag-green">设备自动</span></td><td>ST-FH-FB01-VG-HLUB-420K-20260415-002</td><td><span class="tag tag-blue">自产</span></td><td>胡萝卜</td><td>B区根茎基地</td><td>25kg/件</td><td>17件</td><td>420</td><td>2026-04-16 11:00</td><td>A仓-蔬菜区-03</td><td>张三丰</td><td class="td-actions"><span class="link" onclick="openVideo()">查看视频</span> <span class="link">编辑</span> <span class="link" onclick="showDetail(this)">详情</span> <span class="link" style="color:var(--danger)">删除</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -281,6 +302,38 @@ document.getElementById('modalOverlay').addEventListener('click',function(e){if(
|
||||
function openVideo(){document.getElementById('videoOverlay').style.display='flex';}
|
||||
function closeVideo(){document.getElementById('videoOverlay').style.display='none';}
|
||||
document.getElementById('videoOverlay').addEventListener('click',function(e){if(e.target===this)closeVideo();});
|
||||
|
||||
/* 右侧抽屉组件 */
|
||||
var Drawer={
|
||||
open:function(title,bodyHtml){
|
||||
this.close();
|
||||
var overlay=document.createElement('div');
|
||||
overlay.className='drawer-overlay';
|
||||
overlay.innerHTML='<div class="drawer"><div class="drawer__header"><div class="drawer__title">'+title+'</div><button class="drawer__close" onclick="Drawer.close()">×</button></div><div class="drawer__body">'+bodyHtml+'</div></div>';
|
||||
overlay.addEventListener('click',function(e){if(e.target===overlay)Drawer.close();});
|
||||
document.body.appendChild(overlay);
|
||||
},
|
||||
close:function(){
|
||||
var o=document.querySelector('.drawer-overlay');
|
||||
if(!o)return;
|
||||
o.classList.add('closing');
|
||||
setTimeout(function(){o.remove();},200);
|
||||
}
|
||||
};
|
||||
|
||||
/* 详情抽屉 */
|
||||
function showDetail(el){
|
||||
var tr=el.closest('tr');
|
||||
var ths=tr.closest('table').querySelectorAll('thead th');
|
||||
var tds=tr.querySelectorAll('td');
|
||||
var html='<div class="drawer-section"><div class="drawer-section__title">入库信息</div><div class="drawer-fields">';
|
||||
for(var i=0;i<ths.length-1;i++){
|
||||
html+='<div class="drawer-field"><div class="drawer-field__label">'+ths[i].textContent+'</div><div class="drawer-field__value">'+tds[i].innerHTML+'</div></div>';
|
||||
}
|
||||
html+='</div></div>';
|
||||
var title='入库详情 — '+tds[0].textContent;
|
||||
Drawer.open(title,html);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -244,14 +244,14 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="table-card__content">
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>包装批次号</th><th>溯源码</th><th>包装餐品</th><th>包装规格</th><th>包装方式</th><th>包装份数</th><th>包含食材</th><th>包装日期</th><th>保质期至</th><th>存放温度(℃)</th><th>关联单号</th><th>包装人</th><th>终端设备</th><th>操作</th>
|
||||
<th>包装批次号</th><th>溯源码</th><th>包装餐品</th><th>包装规格</th><th>包装方式</th><th>包装份数</th><th>包含食材</th><th>包装日期</th><th>保质期至</th><th>存放温度(℃)</th><th>关联单号</th><th>包装人</th><th>终端设备</th><th>操作类型</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>BATCH-DH-20260415-01</td><td>NC-PROC-JXRJ-20260415-01</td><td>宫保鸡丁</td><td><span class="tag tag-green">标准份（500g）</span></td><td><span class="tag tag-gray">冷鲜袋</span></td><td>10</td><td>鸡胸肉 120g<br>花生 20g<br>干辣椒 5g</td><td>2026-04-15</td><td>2026-04-17</td><td>3.8</td><td>INT-001</td><td>赵配餐</td><td>PKG-T03</td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-DH-20260415-01</td><td>NC-PROC-JXRJ-20260415-01</td><td>宫保鸡丁</td><td><span class="tag tag-green">标准份（500g）</span></td><td><span class="tag tag-gray">冷鲜袋</span></td><td>10</td><td>鸡胸肉 120g<br>花生 20g<br>干辣椒 5g</td><td>2026-04-15</td><td>2026-04-17</td><td>3.8</td><td>INT-001</td><td>赵配餐</td><td>PKG-T03</td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-DH-20260415-02</td><td>NC-PROC-CAYO-20260415-01</td><td>清蒸鱼</td><td><span class="tag tag-green">标准份（500g）</span></td><td><span class="tag tag-gray">保鲜盒</span></td><td>8</td><td>草鱼 100g<br>姜片适量</td><td>2026-04-15</td><td>2026-04-17</td><td>3.5</td><td>INT-002</td><td>陈配餐</td><td>PKG-T03</td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-DH-20260415-03</td><td>NC-PROC-BOCA-20260415-01</td><td>蒜蓉菠菜</td><td><span class="tag tag-green">标准份（500g）</span></td><td><span class="tag tag-gray">冷鲜袋</span></td><td>12</td><td>净菠菜 120g<br>大蒜 8g</td><td>2026-04-15</td><td>2026-04-17</td><td>4.0</td><td>EXT-001</td><td>陈配餐</td><td>PKG-T04</td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-DH-20260415-04</td><td>NC-PROC-HLUB-20260415-01</td><td>炒胡萝卜</td><td><span class="tag tag-blue">大份（800g）</span></td><td><span class="tag tag-gray">保鲜盒</span></td><td>6</td><td>净胡萝卜 260g<br>葱姜适量</td><td>2026-04-15</td><td>2026-04-17</td><td>4.2</td><td>INT-003</td><td>赵配餐</td><td>PKG-T04</td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-DH-20260415-01</td><td>NC-PROC-JXRJ-20260415-01</td><td>宫保鸡丁</td><td><span class="tag tag-green">标准份（500g）</span></td><td><span class="tag tag-gray">冷鲜袋</span></td><td>10</td><td>鸡胸肉 120g<br>花生 20g<br>干辣椒 5g</td><td>2026-04-15</td><td>2026-04-17</td><td>3.8</td><td>INT-001</td><td>赵配餐</td><td>PKG-T03</td><td><span class="tag tag-blue">设备自动</span></td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-DH-20260415-01</td><td>NC-PROC-JXRJ-20260415-01</td><td>宫保鸡丁</td><td><span class="tag tag-green">标准份（500g）</span></td><td><span class="tag tag-gray">冷鲜袋</span></td><td>10</td><td>鸡胸肉 120g<br>花生 20g<br>干辣椒 5g</td><td>2026-04-15</td><td>2026-04-17</td><td>3.8</td><td>INT-001</td><td>赵配餐</td><td>PKG-T03</td><td><span class="tag tag-blue">设备自动</span></td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-DH-20260415-02</td><td>NC-PROC-CAYO-20260415-01</td><td>清蒸鱼</td><td><span class="tag tag-green">标准份（500g）</span></td><td><span class="tag tag-gray">保鲜盒</span></td><td>8</td><td>草鱼 100g<br>姜片适量</td><td>2026-04-15</td><td>2026-04-17</td><td>3.5</td><td>INT-002</td><td>陈配餐</td><td>PKG-T03</td><td><span class="tag tag-green">人工录入</span></td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-DH-20260415-03</td><td>NC-PROC-BOCA-20260415-01</td><td>蒜蓉菠菜</td><td><span class="tag tag-green">标准份（500g）</span></td><td><span class="tag tag-gray">冷鲜袋</span></td><td>12</td><td>净菠菜 120g<br>大蒜 8g</td><td>2026-04-15</td><td>2026-04-17</td><td>4.0</td><td>EXT-001</td><td>陈配餐</td><td>PKG-T04</td><td><span class="tag tag-green">人工录入</span></td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
<tr><td>BATCH-DH-20260415-04</td><td>NC-PROC-HLUB-20260415-01</td><td>炒胡萝卜</td><td><span class="tag tag-blue">大份（800g）</span></td><td><span class="tag tag-gray">保鲜盒</span></td><td>6</td><td>净胡萝卜 260g<br>葱姜适量</td><td>2026-04-15</td><td>2026-04-17</td><td>4.2</td><td>INT-003</td><td>赵配餐</td><td>PKG-T04</td><td><span class="tag tag-blue">设备自动</span></td><td class="td-actions"><span class="link">查看视频</span> <span class="link">编辑</span> <span class="link" style="color:var(--danger)">删除</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -421,6 +421,10 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<div class="form-item__label">终端设备</div>
|
||||
<select><option value="">请选择</option><option>PKG-T01</option><option>PKG-T02</option><option>PKG-T03</option><option>PKG-T04</option></select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__label">操作类型<span class="required">*</span></div>
|
||||
<select><option value="">请选择</option><option>设备自动</option><option>人工录入</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
|
||||
@@ -101,6 +101,27 @@ tbody tr:hover{background:#F8FBFF;}
|
||||
thead th:last-child,tbody td.td-actions{position:sticky;right:0;background:#fff;box-shadow:-4px 0 8px rgba(0,0,0,0.04);z-index:2;white-space:nowrap;}
|
||||
thead th:last-child{background:#FAFAFA;}
|
||||
tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
/* 右侧抽屉 */
|
||||
.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;animation:modalFadeIn .2s ease;}
|
||||
.drawer-overlay.closing{animation:modalFadeOut .2s ease forwards;}
|
||||
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
|
||||
@keyframes modalFadeOut{from{opacity:1}to{opacity:0}}
|
||||
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:90vw;background:#fff;box-shadow:-6px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;z-index:1001;animation:drawerSlideIn .25s ease;}
|
||||
.drawer-overlay.closing .drawer{animation:drawerSlideOut .2s ease forwards;}
|
||||
@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
|
||||
@keyframes drawerSlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}}
|
||||
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
|
||||
.drawer__title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);}
|
||||
.drawer__close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;}
|
||||
.drawer__close:hover{background:#f5f5f5;color:var(--text-primary);}
|
||||
.drawer__body{padding:0 24px 24px;overflow-y:auto;flex:1;}
|
||||
.drawer-section{margin-top:20px;}
|
||||
.drawer-section__title{font-size:var(--font-sm);font-weight:600;color:var(--text-primary);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
|
||||
.drawer-section__title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--primary);border-radius:2px;}
|
||||
.drawer-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;}
|
||||
.drawer-field{display:flex;flex-direction:column;gap:2px;}
|
||||
.drawer-field__label{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.drawer-field__value{font-size:var(--font-sm);color:var(--text-primary);font-weight:500;min-height:22px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -199,11 +220,11 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<th>食材名称</th><th>物品类型</th><th>入库单号</th><th>所在区域</th><th>入库量(kg)</th><th>已出量(kg)</th><th>在库量(kg)</th><th>入库时间</th><th>保质期至</th><th>临期预警</th><th>库存状态</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>菠菜</td><td><span class="tag tag-green">毛菜</span></td><td>IN-20260415-001</td><td>A仓-蔬菜区-01</td><td>286</td><td>61</td><td>225</td><td>2026-04-15 10:30</td><td>2026-04-18</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">充足</span></td><td class="td-actions"><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>菠菜</td><td><span class="tag tag-green">毛菜</span></td><td>IN-20260415-002</td><td>A仓-蔬菜区-02</td><td>50</td><td>20</td><td>30</td><td>2026-04-15 08:30</td><td>2026-04-18</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">充足</span></td><td class="td-actions"><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>猪里脊</td><td><span class="tag tag-blue">净菜</span></td><td>IN-20260415-003</td><td>B仓-肉类区-01</td><td>80</td><td>40</td><td>40</td><td>2026-04-15 09:15</td><td>2026-04-19</td><td><span class="tag tag-orange">临期</span></td><td><span class="tag tag-orange">不足</span></td><td class="td-actions"><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>草鱼</td><td><span class="tag tag-green">毛菜</span></td><td>IN-20260415-004</td><td>C仓-水产区-01</td><td>60</td><td>0</td><td>60</td><td>2026-04-15 09:45</td><td>2026-04-15</td><td><span class="tag tag-red">已过期</span></td><td><span class="tag tag-orange">不足</span></td><td class="td-actions"><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>胡萝卜</td><td><span class="tag tag-green">毛菜</span></td><td>IN-20260416-005</td><td>A仓-蔬菜区-03</td><td>420</td><td>0</td><td>420</td><td>2026-04-16 11:00</td><td>2026-04-23</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">充足</span></td><td class="td-actions"><span class="link">编辑</span> <span class="link">详情</span></td></tr>
|
||||
<tr><td>菠菜</td><td><span class="tag tag-green">毛菜</span></td><td>IN-20260415-001</td><td>A仓-蔬菜区-01</td><td>286</td><td>61</td><td>225</td><td>2026-04-15 10:30</td><td>2026-04-18</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">充足</span></td><td class="td-actions"><span class="link">编辑</span> <span class="link" onclick="showStockDetail(this)">详情</span></td></tr>
|
||||
<tr><td>菠菜</td><td><span class="tag tag-green">毛菜</span></td><td>IN-20260415-002</td><td>A仓-蔬菜区-02</td><td>50</td><td>20</td><td>30</td><td>2026-04-15 08:30</td><td>2026-04-18</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">充足</span></td><td class="td-actions"><span class="link">编辑</span> <span class="link" onclick="showStockDetail(this)">详情</span></td></tr>
|
||||
<tr><td>猪里脊</td><td><span class="tag tag-blue">净菜</span></td><td>IN-20260415-003</td><td>B仓-肉类区-01</td><td>80</td><td>40</td><td>40</td><td>2026-04-15 09:15</td><td>2026-04-19</td><td><span class="tag tag-orange">临期</span></td><td><span class="tag tag-orange">不足</span></td><td class="td-actions"><span class="link">编辑</span> <span class="link" onclick="showStockDetail(this)">详情</span></td></tr>
|
||||
<tr><td>草鱼</td><td><span class="tag tag-green">毛菜</span></td><td>IN-20260415-004</td><td>C仓-水产区-01</td><td>60</td><td>0</td><td>60</td><td>2026-04-15 09:45</td><td>2026-04-15</td><td><span class="tag tag-red">已过期</span></td><td><span class="tag tag-orange">不足</span></td><td class="td-actions"><span class="link">编辑</span> <span class="link" onclick="showStockDetail(this)">详情</span></td></tr>
|
||||
<tr><td>胡萝卜</td><td><span class="tag tag-green">毛菜</span></td><td>IN-20260416-005</td><td>A仓-蔬菜区-03</td><td>420</td><td>0</td><td>420</td><td>2026-04-16 11:00</td><td>2026-04-23</td><td><span class="tag tag-green">正常</span></td><td><span class="tag tag-green">充足</span></td><td class="td-actions"><span class="link">编辑</span> <span class="link" onclick="showStockDetail(this)">详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -244,13 +265,13 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>WH-A</td><td>A仓-蔬菜常温库</td><td>加工中心一楼北侧</td><td><span class="tag tag-gray">常温</span></td><td>500</td><td>张仓管</td><td>138-0000-1001</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openWhModal()">编辑</span> <span class="link" onclick="openWhModal()">详情</span></td>
|
||||
<td>WH-A</td><td>A仓-蔬菜常温库</td><td>加工中心一楼北侧</td><td><span class="tag tag-gray">常温</span></td><td>500</td><td>张仓管</td><td>138-0000-1001</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openWhModal()">编辑</span> <span class="link" onclick="showWhDetail(this)">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>WH-B</td><td>B仓-肉类冷藏库</td><td>加工中心一楼南侧</td><td><span class="tag tag-blue">冷藏(0~4℃)</span></td><td>200</td><td>王仓管</td><td>138-0000-1002</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openWhModal()">编辑</span> <span class="link" onclick="openWhModal()">详情</span></td>
|
||||
<td>WH-B</td><td>B仓-肉类冷藏库</td><td>加工中心一楼南侧</td><td><span class="tag tag-blue">冷藏(0~4℃)</span></td><td>200</td><td>王仓管</td><td>138-0000-1002</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openWhModal()">编辑</span> <span class="link" onclick="showWhDetail(this)">详情</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>WH-C</td><td>C仓-水产冷冻库</td><td>加工中心地下一层</td><td><span class="tag tag-blue">冷冻(-18℃)</span></td><td>150</td><td>李仓管</td><td>138-0000-1003</td><td><span class="tag tag-gray">空置中</span></td><td class="td-actions"><span class="link" onclick="openWhModal()">编辑</span> <span class="link" onclick="openWhModal()">详情</span></td>
|
||||
<td>WH-C</td><td>C仓-水产冷冻库</td><td>加工中心地下一层</td><td><span class="tag tag-blue">冷冻(-18℃)</span></td><td>150</td><td>李仓管</td><td>138-0000-1003</td><td><span class="tag tag-gray">空置中</span></td><td class="td-actions"><span class="link" onclick="openWhModal()">编辑</span> <span class="link" onclick="showWhDetail(this)">详情</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -289,15 +310,15 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
<th>区域编号</th><th>区域名称</th><th>所属仓库</th><th>适存品类</th><th>容量(㎥)</th><th>状态</th><th>操作</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr><td>WH-A-01</td><td>A仓-蔬菜区-01</td><td>A仓-蔬菜常温库</td><td>叶菜类</td><td>80</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="openZoneModal()">详情</span></td></tr>
|
||||
<tr><td>WH-A-02</td><td>A仓-蔬菜区-02</td><td>A仓-蔬菜常温库</td><td>叶菜类</td><td>80</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="openZoneModal()">详情</span></td></tr>
|
||||
<tr><td>WH-A-03</td><td>A仓-蔬菜区-03</td><td>A仓-蔬菜常温库</td><td>根茎类</td><td>100</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="openZoneModal()">详情</span></td></tr>
|
||||
<tr><td>WH-A-04</td><td>A仓-蔬菜区-04</td><td>A仓-蔬菜常温库</td><td>瓜果类</td><td>80</td><td><span class="tag tag-gray">空置中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="openZoneModal()">详情</span></td></tr>
|
||||
<tr><td>WH-B-01</td><td>B仓-肉类区-01</td><td>B仓-肉类冷藏库</td><td>猪肉类</td><td>60</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="openZoneModal()">详情</span></td></tr>
|
||||
<tr><td>WH-B-02</td><td>B仓-肉类区-02</td><td>B仓-肉类冷藏库</td><td>禽肉类</td><td>60</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="openZoneModal()">详情</span></td></tr>
|
||||
<tr><td>WH-B-03</td><td>B仓-肉类区-03</td><td>B仓-肉类冷藏库</td><td>蛋品类</td><td>40</td><td><span class="tag tag-gray">空置中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="openZoneModal()">详情</span></td></tr>
|
||||
<tr><td>WH-C-01</td><td>C仓-水产区-01</td><td>C仓-水产冷冻库</td><td>淡水鱼类</td><td>80</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="openZoneModal()">详情</span></td></tr>
|
||||
<tr><td>WH-C-02</td><td>C仓-水产区-02</td><td>C仓-水产冷冻库</td><td>海水产类</td><td>70</td><td><span class="tag tag-gray">空置中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="openZoneModal()">详情</span></td></tr>
|
||||
<tr><td>WH-A-01</td><td>A仓-蔬菜区-01</td><td>A仓-蔬菜常温库</td><td>叶菜类</td><td>80</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="showZoneDetail(this)">详情</span></td></tr>
|
||||
<tr><td>WH-A-02</td><td>A仓-蔬菜区-02</td><td>A仓-蔬菜常温库</td><td>叶菜类</td><td>80</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="showZoneDetail(this)">详情</span></td></tr>
|
||||
<tr><td>WH-A-03</td><td>A仓-蔬菜区-03</td><td>A仓-蔬菜常温库</td><td>根茎类</td><td>100</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="showZoneDetail(this)">详情</span></td></tr>
|
||||
<tr><td>WH-A-04</td><td>A仓-蔬菜区-04</td><td>A仓-蔬菜常温库</td><td>瓜果类</td><td>80</td><td><span class="tag tag-gray">空置中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="showZoneDetail(this)">详情</span></td></tr>
|
||||
<tr><td>WH-B-01</td><td>B仓-肉类区-01</td><td>B仓-肉类冷藏库</td><td>猪肉类</td><td>60</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="showZoneDetail(this)">详情</span></td></tr>
|
||||
<tr><td>WH-B-02</td><td>B仓-肉类区-02</td><td>B仓-肉类冷藏库</td><td>禽肉类</td><td>60</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="showZoneDetail(this)">详情</span></td></tr>
|
||||
<tr><td>WH-B-03</td><td>B仓-肉类区-03</td><td>B仓-肉类冷藏库</td><td>蛋品类</td><td>40</td><td><span class="tag tag-gray">空置中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="showZoneDetail(this)">详情</span></td></tr>
|
||||
<tr><td>WH-C-01</td><td>C仓-水产区-01</td><td>C仓-水产冷冻库</td><td>淡水鱼类</td><td>80</td><td><span class="tag tag-green">使用中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="showZoneDetail(this)">详情</span></td></tr>
|
||||
<tr><td>WH-C-02</td><td>C仓-水产区-02</td><td>C仓-水产冷冻库</td><td>海水产类</td><td>70</td><td><span class="tag tag-gray">空置中</span></td><td class="td-actions"><span class="link" onclick="openZoneModal()">编辑</span> <span class="link" onclick="showZoneDetail(this)">详情</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -312,22 +333,6 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Tab 切换
|
||||
function switchTab(idx){
|
||||
document.querySelectorAll('.page-tab').forEach((t,i)=>t.classList.toggle('active',i===idx));
|
||||
document.querySelectorAll('.tab-panel').forEach((p,i)=>p.classList.toggle('active',i===idx));
|
||||
}
|
||||
// 仓库档案弹窗
|
||||
function openWhModal(){document.getElementById('whModal').style.display='flex';}
|
||||
function closeWhModal(){document.getElementById('whModal').style.display='none';}
|
||||
document.getElementById('whModal').addEventListener('click',function(e){if(e.target===this)closeWhModal();});
|
||||
// 区域管理弹窗
|
||||
function openZoneModal(){document.getElementById('zoneModal').style.display='flex';}
|
||||
function closeZoneModal(){document.getElementById('zoneModal').style.display='none';}
|
||||
document.getElementById('zoneModal').addEventListener('click',function(e){if(e.target===this)closeZoneModal();});
|
||||
</script>
|
||||
|
||||
<!-- 仓库档案弹窗 -->
|
||||
<div class="modal-overlay" id="whModal" style="display:none;">
|
||||
<div class="modal">
|
||||
@@ -380,5 +385,97 @@ document.getElementById('zoneModal').addEventListener('click',function(e){if(e.t
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Tab 切换
|
||||
function switchTab(idx){
|
||||
document.querySelectorAll('.page-tab').forEach((t,i)=>t.classList.toggle('active',i===idx));
|
||||
document.querySelectorAll('.tab-panel').forEach((p,i)=>p.classList.toggle('active',i===idx));
|
||||
}
|
||||
// 仓库档案弹窗
|
||||
function openWhModal(){document.getElementById('whModal').style.display='flex';}
|
||||
function closeWhModal(){document.getElementById('whModal').style.display='none';}
|
||||
document.getElementById('whModal').addEventListener('click',function(e){if(e.target===this)closeWhModal();});
|
||||
// 区域管理弹窗
|
||||
function openZoneModal(){document.getElementById('zoneModal').style.display='flex';}
|
||||
function closeZoneModal(){document.getElementById('zoneModal').style.display='none';}
|
||||
document.getElementById('zoneModal').addEventListener('click',function(e){if(e.target===this)closeZoneModal();});
|
||||
|
||||
/* 右侧抽屉组件 */
|
||||
var Drawer={
|
||||
open:function(title,bodyHtml){
|
||||
this.close();
|
||||
var overlay=document.createElement('div');
|
||||
overlay.className='drawer-overlay';
|
||||
overlay.innerHTML='<div class="drawer"><div class="drawer__header"><div class="drawer__title">'+title+'</div><button class="drawer__close" onclick="Drawer.close()">×</button></div><div class="drawer__body">'+bodyHtml+'</div></div>';
|
||||
overlay.addEventListener('click',function(e){if(e.target===overlay)Drawer.close();});
|
||||
document.body.appendChild(overlay);
|
||||
},
|
||||
close:function(){
|
||||
var o=document.querySelector('.drawer-overlay');
|
||||
if(!o)return;
|
||||
o.classList.add('closing');
|
||||
setTimeout(function(){o.remove();},200);
|
||||
}
|
||||
};
|
||||
|
||||
/* 在库库存详情 */
|
||||
function showStockDetail(el){
|
||||
var row=el.closest('tr');
|
||||
var cells=row.querySelectorAll('td');
|
||||
var g=function(i){return cells[i]?cells[i].textContent.trim():'—';};
|
||||
var h=function(i){return cells[i]?cells[i].innerHTML.trim():'—';};
|
||||
var html='<div class="drawer-section"><div class="drawer-section__title">库存信息</div><div class="drawer-fields">'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">食材名称</span><span class="drawer-field__value">'+g(0)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">物品类型</span><span class="drawer-field__value">'+h(1)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">入库单号</span><span class="drawer-field__value">'+g(2)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">所在区域</span><span class="drawer-field__value">'+g(3)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">入库量(kg)</span><span class="drawer-field__value">'+g(4)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">已出量(kg)</span><span class="drawer-field__value">'+g(5)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">在库量(kg)</span><span class="drawer-field__value">'+g(6)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">入库时间</span><span class="drawer-field__value">'+g(7)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">保质期至</span><span class="drawer-field__value">'+g(8)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">临期预警</span><span class="drawer-field__value">'+h(9)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">库存状态</span><span class="drawer-field__value">'+h(10)+'</span></div>'
|
||||
+'</div></div>';
|
||||
Drawer.open('库存详情 — '+g(0)+' ('+g(2)+')',html);
|
||||
}
|
||||
|
||||
/* 仓库档案详情 */
|
||||
function showWhDetail(el){
|
||||
var row=el.closest('tr');
|
||||
var cells=row.querySelectorAll('td');
|
||||
var g=function(i){return cells[i]?cells[i].textContent.trim():'—';};
|
||||
var h=function(i){return cells[i]?cells[i].innerHTML.trim():'—';};
|
||||
var html='<div class="drawer-section"><div class="drawer-section__title">仓库信息</div><div class="drawer-fields">'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">仓库编号</span><span class="drawer-field__value">'+g(0)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">仓库名称</span><span class="drawer-field__value">'+g(1)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">位置</span><span class="drawer-field__value">'+g(2)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">温区类型</span><span class="drawer-field__value">'+h(3)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">总容量(㎥)</span><span class="drawer-field__value">'+g(4)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">负责人</span><span class="drawer-field__value">'+g(5)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">负责人电话</span><span class="drawer-field__value">'+g(6)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">状态</span><span class="drawer-field__value">'+h(7)+'</span></div>'
|
||||
+'</div></div>';
|
||||
Drawer.open('仓库详情 — '+g(1),html);
|
||||
}
|
||||
|
||||
/* 区域管理详情 */
|
||||
function showZoneDetail(el){
|
||||
var row=el.closest('tr');
|
||||
var cells=row.querySelectorAll('td');
|
||||
var g=function(i){return cells[i]?cells[i].textContent.trim():'—';};
|
||||
var h=function(i){return cells[i]?cells[i].innerHTML.trim():'—';};
|
||||
var html='<div class="drawer-section"><div class="drawer-section__title">区域信息</div><div class="drawer-fields">'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">区域编号</span><span class="drawer-field__value">'+g(0)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">区域名称</span><span class="drawer-field__value">'+g(1)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">所属仓库</span><span class="drawer-field__value">'+g(2)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">适存品类</span><span class="drawer-field__value">'+g(3)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">容量(㎥)</span><span class="drawer-field__value">'+g(4)+'</span></div>'
|
||||
+'<div class="drawer-field"><span class="drawer-field__label">状态</span><span class="drawer-field__value">'+h(5)+'</span></div>'
|
||||
+'</div></div>';
|
||||
Drawer.open('区域详情 — '+g(1),html);
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,59 +0,0 @@
|
||||
### 核心问题
|
||||
- 需要将目前后台的规划的菜单根据不同的使用群体就行归类，会影响到整个业务流程的串联！！！
|
||||
- 如何区分净菜和毛菜？是两种不同的食材？还是同一种食材人为主观判断不同的形态
|
||||
|
||||
### 一 、溯源总览
|
||||
- 溯源主线业务应该有两个分支：1.对外售净菜包或餐品净菜包的扫码溯源（涉及到溯源码的生成）2.食堂用餐后对本餐次中餐品或者食材的溯源
|
||||
- 目前的业务流程设计只有对堂食订单中按食材维度进行溯源，没有考虑扫码溯源的业务
|
||||
- 按食材溯源目前存在的问题：按单烹制中用到的食材或者是辅料并未和具体的库存-批次就行关联，靠什么去关联本餐中用到的食材溯源信息？重要！
|
||||
- 目前的库存管理分散在仓储管理和净菜进柜两部分，这两处的库存管理有什么联系？
|
||||
- 若按食材进行溯源 则每个食材的溯源链路是不同的，需要确定什么类型的食材 有哪些溯源链路节点（举例：调料类的食材 如花椒就没有净菜加工和净菜入柜等）
|
||||
- 若按食材进行溯源 溯源链路中后续的节点（按单烹制，上餐监控，营养监测，用户取餐）都是按餐品维度开展的并不是食材维度
|
||||
- 建议：堂食订单中的餐品溯源 先不要细化到食材级别，溯源链路的第一个节点就是食材信息（简单介绍每种食材的概要信息，第二个节点是净菜组配...）
|
||||
|
||||
### 二、档案
|
||||
- 档案模块下三个菜单功能已重构
|
||||
- 缺少一个用户用餐记录查看营养明细的交互（建议可复用营养管理（din-data-nutri.html）下操作项的弹窗交互）
|
||||
|
||||
### 三、绿色种采
|
||||
#### 3.1、土地环境
|
||||
- 缺少地块的种养殖记录维护入口，缺少查看监测环境的历史记录（目前只能看当前），若需要看食材的生长环境 应该看的是均值或区间（如日平均光照时长，温度区间在18-26度），可加到第二个菜单种养监控中
|
||||
- 种植作物和养殖作物是否要和食材总库中的食材关联，若不关联后续靠什么串联从种->采->供->做的业务流程（涉及到溯源）
|
||||
- 第二个菜单的种养监控菜单整改建议：两个菜单的列表都应显示种养殖的记录（和地块挂钩），操作项后跟巡检记录或者是疫苗接种记录以及环境监控的历史记录（日维度）
|
||||
|
||||
#### 3.2、收成入库
|
||||
- 目前收成入库中的设计是将采收批次和地块关联，理论上应关联的是种养殖记录（种养殖批次）
|
||||
- 入库数量单位不一定是kg，比如生猪出栏单位应该是头 ，但是生猪出栏理论上没有入库的操作（也不排除养猪场自己屠宰，自己屠宰了就需要入库）
|
||||
|
||||
#### 3.3、供商管理
|
||||
- 内部供应商为什么会和地块/养殖区绑定，产能计量kg/月没有意义， 很多作物都是一年一熟
|
||||
- 外部供应商列表上的 评价供应商作用是什么？不能在编辑中改综合评分？
|
||||
|
||||
#### 3.4、采供管理
|
||||
- 采供管理 应该区分供应商页面和食堂管理员界面，对应的操作权限不一样， 对应核心问题，采购单应该于不同群体而言有不同的状态流转
|
||||
- 采购单设计不合理，理论上一个采购单中会包含多种食材，而不是一种食材对应一个采购单
|
||||
- 如果采购单流转到内部供应商，采购数量是否要和本系统的采收入库数量做联动，比如这边采购100公斤的辣椒，收成入库就要减100公斤的辣椒库存，如果是这样就要增加出库单的业务
|
||||
- 通过食谱自动创建的采购单如何指定供应商？
|
||||
- 列表后的查看视频是看什么视频？
|
||||
|
||||
### 四、卫生供应
|
||||
#### 4.1、卫生检测
|
||||
- 卫生检测记录是否是必须关联到采购单？ 如果不关联采购单这条检验记录后续有什么业务用途
|
||||
- 具体有哪些检测项目？ 检测值和标准限值从哪里来
|
||||
- 数据来源类型字段是什么意思
|
||||
- 隔离处理按钮有什么业务用途
|
||||
- 列表后的查看视频是看什么视频？
|
||||
|
||||
#### 4.2、毛菜入库
|
||||
毛菜入库和仓储管理菜单顺序调换
|
||||
- 毛菜入库单是否必须要和采购单建立关联关系？
|
||||
- 入库的规格需要细化管理，例：入库规则是箱，但一箱中有xx盒，一盒中有xx袋，一袋中有XX克，设计到后续库存的维护
|
||||
- 目前整个系统涉及到库存概念的场景很多，如收成入库，毛菜入库，净菜入库，净菜进柜等，这些库存之前存在什么样的关联关系
|
||||
- 净菜入库和净菜进柜的区别是什么？必须先入库再近柜，就不能直接进柜？
|
||||
|
||||
#### 4.3、仓储管理
|
||||
- 仓库档案和区域管理是什么样的业务联系？
|
||||
- 在库库存是以食材维度开展还是以仓储区域维度开展？会不会存在同一个仓储区放多种食材的情况
|
||||
|
||||
#### 4.4、净菜加工
|
||||
-
|
||||
Reference in New Issue
Block a user