yixiong/platform-prototype
17
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 更新食谱记录页面

Browse Source
This commit is contained in:
liuyunqin
2026-07-13 09:48:40 +08:00
parent adc2fb7c3e
commit a11702f727
1 changed files with 87 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-admin/weight-management/recipe-record.html
+87 -6
View File
@@ -116,6 +116,11 @@ tbody tr:hover{background:#F8FBFF;}
.food-item__remove{width:28px;height:28px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-placeholder);font-size:14px;flex-shrink:0;transition:all .15s;}
.food-item__remove:hover{color:var(--danger);border-color:var(--danger);}
.food-item:only-child .food-item__remove{display:none;}
/* 操作列链接按钮 */
.action-link{cursor:pointer;border:none;background:none;font-size:var(--font-xs);padding:2px 6px;border-radius:2px;transition:all .15s;text-decoration:none;}
.action-link--edit{color:var(--primary);}.action-link--edit:hover{background:var(--primary-light);}
.action-link--danger{color:var(--danger);}.action-link--danger:hover{background:#FFF1F0;}
</style>
</head>
<body>
@@ -218,6 +223,7 @@ tbody tr:hover{background:#F8FBFF;}
<th>用餐日期</th>
<th>餐次</th>
<th>餐品名称</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tableBody"></tbody>
@@ -326,6 +332,7 @@ var foodMap = {
function buildMockData(){
var data = [];
var units = ['第四采油厂','采油一厂','采油二厂','采气一厂'];
var idCounter = 0;
// 生成近7天的食谱记录
var today = new Date();
for(var d=0;d<7;d++){
@@ -344,6 +351,7 @@ function buildMockData(){
var shuffledFoods = foods.slice().sort(function(){return Math.random()-0.5;});
var foodStr = shuffledFoods.slice(0, foodCount).join('、');
data.push({
id: ++idCounter,
unit: unit,
canteen: shuffledCanteens[c],
date: dateStr,
@@ -361,6 +369,7 @@ var allData = buildMockData();
var filteredData = allData.slice();
var pageSize = 10;
var currentPage = 0;
var editingId = null; // 当前编辑的记录ID，null表示新增模式
/* ===== 筛选 ===== */
function applyFilter(){
@@ -405,7 +414,7 @@ function renderTable(){
document.getElementById('tableCount').textContent = '共 ' + filteredData.length + ' 条记录';
document.getElementById('pageNum').textContent = '第 ' + (currentPage + 1) + '/' + totalPages + ' 页';
if(filteredData.length === 0){
tbody.innerHTML = '<tr><td colspan="5" class="td-empty">暂无匹配数据</td></tr>';
tbody.innerHTML = '<tr><td colspan="6" class="td-empty">暂无匹配数据</td></tr>';
return;
}
var html = '';
@@ -416,6 +425,7 @@ function renderTable(){
html += '<td>'+d.date+'</td>';
html += '<td>'+d.meal+'</td>';
html += '<td>'+esc(d.food)+'</td>';
html += '<td><button class="action-link action-link--edit" onclick="editRecord('+d.id+')">编辑</button><button class="action-link action-link--danger" onclick="deleteRecord('+d.id+')">删除</button></td>';
html += '</tr>';
});
tbody.innerHTML = html;
@@ -432,6 +442,8 @@ function goPage(delta){
/* ===== 新增记录弹窗 ===== */
function openAddDialog(){
editingId = null;
document.querySelector('#addOverlay .record-dialog__title').textContent = '新增食谱记录';
// 预填日期为今天
var today = new Date();
document.getElementById('addDate').value = today.getFullYear()+'-'+('0'+(today.getMonth()+1)).slice(-2)+'-'+('0'+today.getDate()).slice(-2);
@@ -441,6 +453,7 @@ function openAddDialog(){
}
function closeAddDialog(){
editingId = null;
document.getElementById('addOverlay').classList.remove('show');
// 清空表单
document.getElementById('addUnit').value = '';
@@ -490,17 +503,85 @@ function submitAdd(){
if(v) foods.push(v);
});
if(foods.length === 0){ showToast('请输入至少一个餐品名称'); return; }
// 多个餐品用顿号合并为一条记录
allData.unshift({unit:unit, canteen:canteen, date:date, meal:meal, food:foods.join('、')});
closeAddDialog();
applyFilter();
showToast('新增记录成功');
var foodStr = foods.join('、');
if(editingId !== null){
// 编辑模式：更新已有记录
for(var i=0;i<allData.length;i++){
if(allData[i].id === editingId){
allData[i].unit = unit;
allData[i].canteen = canteen;
allData[i].date = date;
allData[i].meal = meal;
allData[i].food = foodStr;
break;
}
}
closeAddDialog();
applyFilter();
showToast('编辑记录成功');
} else {
// 新增模式
// 生成新ID：当前最大ID+1
var maxId = 0;
allData.forEach(function(d){ if(d.id > maxId) maxId = d.id; });
allData.unshift({id: maxId+1, unit:unit, canteen:canteen, date:date, meal:meal, food:foodStr});
closeAddDialog();
applyFilter();
showToast('新增记录成功');
}
}
document.getElementById('addOverlay').addEventListener('click',function(e){
if(e.target === this) closeAddDialog();
});
/* ===== 编辑记录 ===== */
function editRecord(id){
// 查找记录
var record = null;
for(var i=0;i<allData.length;i++){
if(allData[i].id === id){ record = allData[i]; break; }
}
if(!record){ showToast('记录不存在'); return; }
editingId = id;
document.querySelector('#addOverlay .record-dialog__title').textContent = '编辑食谱记录';
// 预填表单
document.getElementById('addUnit').value = record.unit;
document.getElementById('addCanteen').value = record.canteen;
document.getElementById('addDate').value = record.date;
document.getElementById('addMeal').value = record.meal;
// 拆分餐品回显
var foods = record.food.split('、');
var list = document.getElementById('foodList');
list.innerHTML = '';
foods.forEach(function(f, idx){
var div = document.createElement('div');
div.className = 'food-item';
div.innerHTML = '<input class="form-input" value="'+esc(f)+'" placeholder="请输入餐品名称"><button type="button" class="food-item__remove" onclick="removeFoodItem(this)" title="删除">✕</button>';
list.appendChild(div);
});
// 只有一个时隐藏删除按钮
if(foods.length <= 1){
var btn = list.querySelector('.food-item__remove');
if(btn) btn.style.display = 'none';
}
document.getElementById('addOverlay').classList.add('show');
}
/* ===== 删除记录 ===== */
function deleteRecord(id){
if(!confirm('确定要删除这条食谱记录吗？删除后不可恢复。')) return;
for(var i=0;i<allData.length;i++){
if(allData[i].id === id){
allData.splice(i,1);
break;
}
}
applyFilter();
showToast('删除记录成功');
}
/* ===== 工具函数 ===== */
function esc(s){return String(s||'').replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}