|
|
@@ -1,125 +1,217 @@
|
|
|
<template>
|
|
|
<div class="foods admin-page">
|
|
|
- <el-card>
|
|
|
+ <el-card shadow="never">
|
|
|
<div slot="header" class="admin-page-header">
|
|
|
- <span class="admin-page-title">食材管理</span>
|
|
|
- <div>
|
|
|
- <el-button type="primary" size="mini" @click="openCreate">新建食材</el-button>
|
|
|
- <el-input v-model="keyword" placeholder="搜索..." prefix-icon="el-icon-search" clearable @keyup.enter.native="handleSearch" @clear="handleSearch" />
|
|
|
+ <span class="admin-page-title">
|
|
|
+ <i class="el-icon-apple" style="color: #67c23a; margin-right: 8px;"></i>
|
|
|
+ 食材管理
|
|
|
+ </span>
|
|
|
+ <div class="header-actions">
|
|
|
+ <el-input
|
|
|
+ v-model="keyword"
|
|
|
+ placeholder="搜索食材名称..."
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ clearable
|
|
|
+ size="mini"
|
|
|
+ style="width: 200px; margin-right: 8px;"
|
|
|
+ @keyup.enter.native="handleSearch"
|
|
|
+ @clear="handleSearch"
|
|
|
+ />
|
|
|
<el-select
|
|
|
v-model="categoryFilter"
|
|
|
placeholder="分类筛选"
|
|
|
size="mini"
|
|
|
clearable
|
|
|
- @change="loadList"
|
|
|
+ style="width: 140px; margin-right: 8px;"
|
|
|
+ @change="handleSearch"
|
|
|
>
|
|
|
<el-option label="全部分类" value="" />
|
|
|
- <el-option label="蔬菜" value="蔬菜" />
|
|
|
- <el-option label="水果" value="水果" />
|
|
|
- <el-option label="肉类" value="肉类" />
|
|
|
- <el-option label="水产" value="水产" />
|
|
|
- <el-option label="蛋奶" value="蛋奶" />
|
|
|
- <el-option label="豆类" value="豆类" />
|
|
|
- <el-option label="谷物" value="谷物" />
|
|
|
- <el-option label="坚果" value="坚果" />
|
|
|
- <el-option label="调味品" value="调味品" />
|
|
|
- <el-option label="其他" value="其他" />
|
|
|
+ <el-option v-for="opt in categoryOptions" :key="opt" :label="opt" :value="opt" />
|
|
|
</el-select>
|
|
|
+ <el-button type="primary" size="mini" icon="el-icon-plus" @click="openCreate">新建食材</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="table-scroll-wrap-lg">
|
|
|
- <el-table :max-height="tableHeight" :data="list" v-loading="loading" border stripe>
|
|
|
- <el-table-column prop="id" label="ID" width="80" />
|
|
|
- <el-table-column prop="name" label="名称" />
|
|
|
- <el-table-column prop="category" label="分类" width="100" />
|
|
|
- <el-table-column prop="calories" label="热量(kcal)" width="100" />
|
|
|
- <el-table-column prop="protein" label="蛋白质(g)" width="100" />
|
|
|
- <el-table-column prop="carbs" label="碳水(g)" width="100" />
|
|
|
- <el-table-column prop="fat" label="脂肪(g)" width="100" />
|
|
|
- <el-table-column prop="fiber" label="膳食纤维(g)" width="100" />
|
|
|
- <el-table-column prop="energyKj" label="能量(kJ)" width="100" />
|
|
|
- <el-table-column prop="starch" label="淀粉(g)" width="100" />
|
|
|
- <el-table-column prop="cholesterol" label="胆固醇(mg)" width="100" />
|
|
|
- <el-table-column label="应季月份" width="180">
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ :data="list"
|
|
|
+ v-loading="loading"
|
|
|
+ border
|
|
|
+ stripe
|
|
|
+ size="mini"
|
|
|
+ style="width: 100%"
|
|
|
+ :max-height="tableHeight"
|
|
|
+ >
|
|
|
+ <el-table-column type="index" label="#" width="50" align="center" />
|
|
|
+ <el-table-column prop="name" label="名称" min-width="120" fixed>
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <span style="font-weight: 500;">{{ row.name }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="category" label="分类" width="120" align="center">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-tag :type="categoryTagType(row.category)" size="mini" effect="plain">
|
|
|
+ {{ row.category }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="热量" width="100" align="right">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <span class="num-val">{{ row.calories != null ? row.calories : '-' }}</span>
|
|
|
+ <span class="num-unit">kcal</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="蛋白质" width="90" align="right">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <span class="num-val">{{ row.protein != null ? row.protein : '-' }}</span>
|
|
|
+ <span class="num-unit">g</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="脂肪" width="80" align="right">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <span class="num-val">{{ row.fat != null ? row.fat : '-' }}</span>
|
|
|
+ <span class="num-unit">g</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="碳水" width="80" align="right">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <span class="num-val">{{ row.carbs != null ? row.carbs : '-' }}</span>
|
|
|
+ <span class="num-unit">g</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="膳食纤维" width="90" align="right">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <span class="num-val">{{ row.fiber != null ? row.fiber : '-' }}</span>
|
|
|
+ <span class="num-unit">g</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="能量(kJ)" width="90" align="right">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <span class="num-val">{{ row.energyKj != null ? row.energyKj : '-' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="胆固醇" width="90" align="right">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <span v-if="row.cholesterol != null" class="num-val">{{ row.cholesterol }}<span class="num-unit">mg</span></span>
|
|
|
+ <span v-else>-</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="status" label="状态" width="80" align="center">
|
|
|
<template slot-scope="{ row }">
|
|
|
- <span v-if="row.months && row.months.length">{{ row.months.map(function(m) { return m + '月' }).join('、') }}</span>
|
|
|
- <span v-else style="color:#999">未设置</span>
|
|
|
+ <el-tag :type="row.status === 'active' ? 'success' : 'info'" size="mini" effect="dark">
|
|
|
+ {{ row.status === 'active' ? '启用' : '停用' }}
|
|
|
+ </el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="status" label="状态" width="80" />
|
|
|
- <el-table-column label="操作" width="200" fixed="right">
|
|
|
+ <el-table-column label="操作" width="180" fixed="right" align="center">
|
|
|
<template slot-scope="{ row }">
|
|
|
- <el-button size="mini" type="primary" @click="editItem(row)">编辑</el-button>
|
|
|
+ <el-button size="mini" type="primary" plain @click="editItem(row)">编辑</el-button>
|
|
|
<el-dropdown trigger="hover" @command="(cmd) => handleActionCmd(row, cmd)">
|
|
|
- <el-button size="mini">
|
|
|
+ <el-button size="mini" plain>
|
|
|
更多<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
</el-button>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
- <el-dropdown-item command="delete" icon="el-icon-delete">删除</el-dropdown-item>
|
|
|
+ <el-dropdown-item command="detail" icon="el-icon-view">查看详情</el-dropdown-item>
|
|
|
+ <el-dropdown-item command="delete" icon="el-icon-delete" divided style="color: #f56c6c;">删除</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- </el-table>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <div class="pagination-wrap">
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="page"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ :page-size="size"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="total"
|
|
|
+ />
|
|
|
</div>
|
|
|
</el-card>
|
|
|
|
|
|
- <el-dialog :title="editId ? '编辑食材' : '新建食材'" :visible.sync="dialogVisible" width="600px">
|
|
|
- <el-form label-width="120px">
|
|
|
- <el-form-item label="名称">
|
|
|
- <el-input v-model="form.name" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="分类">
|
|
|
- <el-select v-model="form.category" style="width:100%">
|
|
|
- <el-option label="蔬菜" value="蔬菜" />
|
|
|
- <el-option label="水果" value="水果" />
|
|
|
- <el-option label="肉类" value="肉类" />
|
|
|
- <el-option label="水产" value="水产" />
|
|
|
- <el-option label="蛋奶" value="蛋奶" />
|
|
|
- <el-option label="豆类" value="豆类" />
|
|
|
- <el-option label="谷物" value="谷物" />
|
|
|
- <el-option label="坚果" value="坚果" />
|
|
|
- <el-option label="调味品" value="调味品" />
|
|
|
- <el-option label="其他" value="其他" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="热量(kcal/100g)">
|
|
|
- <el-input-number v-model="form.calories" :min="0" style="width:100%" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="蛋白质(g)">
|
|
|
- <el-input-number v-model="form.protein" :min="0" :precision="1" style="width:100%" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="碳水(g)">
|
|
|
- <el-input-number v-model="form.carbs" :min="0" :precision="1" style="width:100%" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="脂肪(g)">
|
|
|
- <el-input-number v-model="form.fat" :min="0" :precision="1" style="width:100%" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="膳食纤维(g)">
|
|
|
- <el-input-number v-model="form.fiber" :min="0" :precision="1" style="width:100%" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="能量(kJ/100g)">
|
|
|
- <el-input-number v-model="form.energyKj" :min="0" style="width:100%" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="淀粉(g/100g)">
|
|
|
- <el-input-number v-model="form.starch" :min="0" :precision="1" style="width:100%" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="胆固醇(mg/100g)">
|
|
|
- <el-input-number v-model="form.cholesterol" :min="0" :precision="1" style="width:100%" />
|
|
|
- </el-form-item>
|
|
|
+ <!-- 编辑/新建对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ :title="editId ? '编辑食材' : '新建食材'"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="680px"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ >
|
|
|
+ <el-form label-width="130px" size="small">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="名称">
|
|
|
+ <el-input v-model="form.name" placeholder="食材名称" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="分类">
|
|
|
+ <el-select v-model="form.category" style="width:100%" placeholder="选择分类">
|
|
|
+ <el-option v-for="opt in categoryOptions" :key="opt" :label="opt" :value="opt" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="热量(kcal/100g)">
|
|
|
+ <el-input-number v-model="form.calories" :min="0" :precision="1" style="width:100%" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="能量(kJ/100g)">
|
|
|
+ <el-input-number v-model="form.energyKj" :min="0" :precision="1" style="width:100%" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="蛋白质(g)">
|
|
|
+ <el-input-number v-model="form.protein" :min="0" :precision="1" style="width:100%" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="碳水(g)">
|
|
|
+ <el-input-number v-model="form.carbs" :min="0" :precision="1" style="width:100%" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="脂肪(g)">
|
|
|
+ <el-input-number v-model="form.fat" :min="0" :precision="1" style="width:100%" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="膳食纤维(g)">
|
|
|
+ <el-input-number v-model="form.fiber" :min="0" :precision="1" style="width:100%" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="淀粉(g)">
|
|
|
+ <el-input-number v-model="form.starch" :min="0" :precision="1" style="width:100%" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="胆固醇(mg)">
|
|
|
+ <el-input-number v-model="form.cholesterol" :min="0" :precision="1" style="width:100%" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
<el-form-item label="单位">
|
|
|
- <el-input v-model="form.unit" placeholder="如: 克、个、份" />
|
|
|
+ <el-input v-model="form.unit" placeholder="如: 克、个、份" style="width: 200px;" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="应季月份">
|
|
|
<el-checkbox-group v-model="form.months">
|
|
|
- <el-checkbox v-for="m in 12" :key="m" :label="m">{{ m }}月</el-checkbox>
|
|
|
+ <el-checkbox v-for="m in 12" :key="m" :label="m" border size="mini">{{ m }}月</el-checkbox>
|
|
|
</el-checkbox-group>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="状态">
|
|
|
- <el-select v-model="form.status" style="width:100%">
|
|
|
- <el-option label="启用" value="active" />
|
|
|
- <el-option label="停用" value="inactive" />
|
|
|
- </el-select>
|
|
|
+ <el-radio-group v-model="form.status">
|
|
|
+ <el-radio label="active">启用</el-radio>
|
|
|
+ <el-radio label="inactive">停用</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<div slot="footer">
|
|
|
@@ -127,45 +219,79 @@
|
|
|
<el-button type="primary" :loading="submitting" @click="saveItem">保存</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
+
|
|
|
+ <!-- 详情对话框 -->
|
|
|
+ <el-dialog title="食材详情" :visible.sync="detailVisible" width="500px">
|
|
|
+ <el-descriptions :column="2" border size="small" v-if="detailData">
|
|
|
+ <el-descriptions-item label="名称" :span="2">{{ detailData.name }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="分类">{{ detailData.category }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="状态">
|
|
|
+ <el-tag :type="detailData.status === 'active' ? 'success' : 'info'" size="mini">{{ detailData.status === 'active' ? '启用' : '停用' }}</el-tag>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="热量(kcal)">{{ detailData.calories || '-' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="能量(kJ)">{{ detailData.energyKj || '-' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="蛋白质(g)">{{ detailData.protein || '-' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="脂肪(g)">{{ detailData.fat || '-' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="碳水(g)">{{ detailData.carbs || '-' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="膳食纤维(g)">{{ detailData.fiber || '-' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="淀粉(g)">{{ detailData.starch || '-' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="胆固醇(mg)">{{ detailData.cholesterol || '-' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="单位">{{ detailData.unit || '-' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="排序">{{ detailData.sortOrder != null ? detailData.sortOrder : '-' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="应季月份" :span="2">
|
|
|
+ <span v-if="detailData.months && detailData.months.length">{{ detailData.months.map(function(m) { return m + '月' }).join('、') }}</span>
|
|
|
+ <span v-else style="color:#999">未设置</span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getFoodDetail, saveFoodMonths } from '@/api/admin'
|
|
|
+import { getFoodList, createFood, updateFood, deleteFood, getFoodDetail, saveFoodMonths } from '@/api/admin'
|
|
|
|
|
|
export default {
|
|
|
name: 'Foods',
|
|
|
- computed: {
|
|
|
- tableHeight() {
|
|
|
- return window.innerHeight - 340
|
|
|
- }
|
|
|
- },
|
|
|
data() {
|
|
|
return {
|
|
|
submitting: false,
|
|
|
loading: false,
|
|
|
list: [],
|
|
|
- dialogVisible: false,
|
|
|
+ total: 0,
|
|
|
+ page: 1,
|
|
|
+ size: 20,
|
|
|
categoryFilter: '',
|
|
|
keyword: '',
|
|
|
editId: null,
|
|
|
+ dialogVisible: false,
|
|
|
+ detailVisible: false,
|
|
|
+ detailData: null,
|
|
|
+ categoryOptions: [
|
|
|
+ '蔬菜', '水果', '水产品', '肉类', '干果',
|
|
|
+ '主食', '豆类及豆制品', '蛋类', '乳制品', '快餐', '汤'
|
|
|
+ ],
|
|
|
form: {
|
|
|
name: '',
|
|
|
category: '',
|
|
|
- calories: 0,
|
|
|
- protein: 0,
|
|
|
- carbs: 0,
|
|
|
- fat: 0,
|
|
|
- fiber: 0,
|
|
|
- energyKj: 0,
|
|
|
- starch: 0,
|
|
|
- cholesterol: 0,
|
|
|
+ calories: null,
|
|
|
+ protein: null,
|
|
|
+ carbs: null,
|
|
|
+ fat: null,
|
|
|
+ fiber: null,
|
|
|
+ energyKj: null,
|
|
|
+ starch: null,
|
|
|
+ cholesterol: null,
|
|
|
unit: '克',
|
|
|
status: 'active',
|
|
|
months: []
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ tableHeight() {
|
|
|
+ return window.innerHeight - 340
|
|
|
+ }
|
|
|
+ },
|
|
|
created() {
|
|
|
this.loadList()
|
|
|
},
|
|
|
@@ -173,13 +299,14 @@ export default {
|
|
|
async loadList() {
|
|
|
this.loading = true
|
|
|
try {
|
|
|
- const baseURL = process.env.VUE_APP_BASE_API || ''
|
|
|
- const token = localStorage.getItem('token')
|
|
|
- const axios = this.$axios || (await import('axios')).default
|
|
|
- const res = await axios.post(baseURL + '/api/admin/foods/list', { category: this.categoryFilter || undefined, keyword: this.keyword || undefined }, {
|
|
|
- headers: { Authorization: 'Bearer ' + token }
|
|
|
+ const res = await getFoodList({
|
|
|
+ page: this.page,
|
|
|
+ size: this.size,
|
|
|
+ category: this.categoryFilter || undefined,
|
|
|
+ keyword: this.keyword || undefined
|
|
|
})
|
|
|
- this.list = res.data && res.data.data || []
|
|
|
+ this.list = res.data && res.data.records || []
|
|
|
+ this.total = res.data && res.data.total || 0
|
|
|
} catch (e) {
|
|
|
this.$message && this.$message.error && this.$message.error('加载失败')
|
|
|
} finally {
|
|
|
@@ -190,9 +317,18 @@ export default {
|
|
|
this.page = 1
|
|
|
this.loadList()
|
|
|
},
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.size = val
|
|
|
+ this.page = 1
|
|
|
+ this.loadList()
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.page = val
|
|
|
+ this.loadList()
|
|
|
+ },
|
|
|
openCreate() {
|
|
|
this.editId = null
|
|
|
- this.form = { name: '', category: '', calories: 0, protein: 0, carbs: 0, fat: 0, fiber: 0, energyKj: 0, starch: 0, cholesterol: 0, unit: '克', status: 'active', months: [] }
|
|
|
+ this.form = { name: '', category: '', calories: null, protein: null, carbs: null, fat: null, fiber: null, energyKj: null, starch: null, cholesterol: null, unit: '克', status: 'active', months: [] }
|
|
|
this.dialogVisible = true
|
|
|
},
|
|
|
async editItem(row) {
|
|
|
@@ -200,22 +336,23 @@ export default {
|
|
|
this.form = {
|
|
|
name: row.name || '',
|
|
|
category: row.category || '',
|
|
|
- calories: row.calories || 0,
|
|
|
- protein: row.protein || 0,
|
|
|
- carbs: row.carbs || 0,
|
|
|
- fat: row.fat || 0,
|
|
|
- fiber: row.fiber || 0,
|
|
|
- energyKj: row.energyKj || 0,
|
|
|
- starch: row.starch || 0,
|
|
|
- cholesterol: row.cholesterol || 0,
|
|
|
+ calories: row.calories,
|
|
|
+ protein: row.protein,
|
|
|
+ carbs: row.carbs,
|
|
|
+ fat: row.fat,
|
|
|
+ fiber: row.fiber,
|
|
|
+ energyKj: row.energyKj,
|
|
|
+ starch: row.starch,
|
|
|
+ cholesterol: row.cholesterol,
|
|
|
unit: row.unit || '克',
|
|
|
status: row.status || 'active',
|
|
|
months: []
|
|
|
}
|
|
|
+ // Load months for editing
|
|
|
try {
|
|
|
const res = await getFoodDetail(row.id)
|
|
|
- if (res.data && res.data.months) {
|
|
|
- this.form.months = res.data.months
|
|
|
+ if (res.data && res.data.data && res.data.data.months) {
|
|
|
+ this.form.months = res.data.data.months
|
|
|
}
|
|
|
} catch (e) {
|
|
|
// months stay empty
|
|
|
@@ -223,64 +360,113 @@ export default {
|
|
|
this.dialogVisible = true
|
|
|
},
|
|
|
async saveItem() {
|
|
|
+ this.submitting = true
|
|
|
try {
|
|
|
- const baseURL = process.env.VUE_APP_BASE_API || ''
|
|
|
- const token = localStorage.getItem('token')
|
|
|
- const axios = this.$axios || (await import('axios')).default
|
|
|
const data = { ...this.form }
|
|
|
const months = data.months
|
|
|
delete data.months
|
|
|
let foodId = this.editId
|
|
|
if (foodId) {
|
|
|
data.id = foodId
|
|
|
- await axios.post(baseURL + '/api/admin/foods/update', data, {
|
|
|
- headers: { Authorization: 'Bearer ' + token }
|
|
|
- })
|
|
|
- this.$message && this.$message.success && this.$message.success('更新成功')
|
|
|
+ await updateFood(data)
|
|
|
+ this.$message.success('更新成功')
|
|
|
} else {
|
|
|
- const res = await axios.post(baseURL + '/api/admin/foods/create', data, {
|
|
|
- headers: { Authorization: 'Bearer ' + token }
|
|
|
- })
|
|
|
+ const res = await createFood(data)
|
|
|
foodId = res.data && res.data.data && res.data.data.id
|
|
|
- this.$message && this.$message.success && this.$message.success('创建成功')
|
|
|
+ this.$message.success('创建成功')
|
|
|
}
|
|
|
// Save seasonal months
|
|
|
if (foodId && months && months.length > 0) {
|
|
|
try {
|
|
|
await saveFoodMonths(foodId, months)
|
|
|
} catch (e) {
|
|
|
- this.$message && this.$message.warning && this.$message.warning('应季月份保存失败')
|
|
|
+ this.$message.warning('应季月份保存失败')
|
|
|
}
|
|
|
}
|
|
|
this.dialogVisible = false
|
|
|
this.loadList()
|
|
|
} catch (e) {
|
|
|
- this.$message && this.$message.error && this.$message.error('保存失败')
|
|
|
+ this.$message.error('保存失败')
|
|
|
+ } finally {
|
|
|
+ this.submitting = false
|
|
|
}
|
|
|
},
|
|
|
- async deleteItem(row) {
|
|
|
+ deleteItem(row) {
|
|
|
this.$confirm('确定删除 "' + row.name + '" 吗?', '提示', { type: 'warning' }).then(async () => {
|
|
|
try {
|
|
|
- const baseURL = process.env.VUE_APP_BASE_API || ''
|
|
|
- const token = localStorage.getItem('token')
|
|
|
- const axios = this.$axios || (await import('axios')).default
|
|
|
- await axios.post(baseURL + '/api/admin/foods/delete', { id: row.id }, {
|
|
|
- headers: { Authorization: 'Bearer ' + token }
|
|
|
- })
|
|
|
- this.$message && this.$message.success && this.$message.success('删除成功')
|
|
|
+ await deleteFood(row.id)
|
|
|
+ this.$message.success('删除成功')
|
|
|
this.loadList()
|
|
|
} catch (e) {
|
|
|
- this.$message && this.$message.error && this.$message.error('删除失败')
|
|
|
+ this.$message.error('删除失败')
|
|
|
}
|
|
|
}).catch(() => {})
|
|
|
},
|
|
|
+ showDetail(row) {
|
|
|
+ this.detailData = row
|
|
|
+ this.detailVisible = true
|
|
|
+ },
|
|
|
handleActionCmd(row, cmd) {
|
|
|
switch (cmd) {
|
|
|
case 'delete':
|
|
|
this.deleteItem(row)
|
|
|
break
|
|
|
+ case 'detail':
|
|
|
+ this.showDetail(row)
|
|
|
+ break
|
|
|
}
|
|
|
+ },
|
|
|
+ categoryTagType(category) {
|
|
|
+ const map = {
|
|
|
+ '蔬菜': 'success',
|
|
|
+ '水果': 'warning',
|
|
|
+ '水产品': 'primary',
|
|
|
+ '肉类': 'danger',
|
|
|
+ '干果': 'warning',
|
|
|
+ '主食': '',
|
|
|
+ '豆类及豆制品': 'success',
|
|
|
+ '蛋类': 'danger',
|
|
|
+ '乳制品': 'primary',
|
|
|
+ '快餐': 'info',
|
|
|
+ '汤': ''
|
|
|
+ }
|
|
|
+ return map[category] || ''
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.header-actions {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.pagination-wrap {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding: 16px 0 0;
|
|
|
+}
|
|
|
+
|
|
|
+.num-val {
|
|
|
+ font-weight: 500;
|
|
|
+ font-family: 'Helvetica Neue', Arial, sans-serif;
|
|
|
+}
|
|
|
+
|
|
|
+.num-unit {
|
|
|
+ font-size: 11px;
|
|
|
+ color: #999;
|
|
|
+ margin-left: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-checkbox.is-bordered {
|
|
|
+ margin-right: 6px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-descriptions {
|
|
|
+ margin-top: 8px;
|
|
|
+}
|
|
|
+</style>
|