菜品管理编写
This commit is contained in:
parent
6076942710
commit
6c29e263d8
|
|
@ -0,0 +1,145 @@
|
||||||
|
export interface DishesValue {
|
||||||
|
adaptableGroup?:string,
|
||||||
|
adaptableGroupStr?: any,
|
||||||
|
appraise?:string,
|
||||||
|
beansNuts?:number | string,
|
||||||
|
cerealsPotato?: number | string,
|
||||||
|
code? :string,
|
||||||
|
cost?:number | string,
|
||||||
|
createTime?:string,
|
||||||
|
deptId?:string,
|
||||||
|
deptName?:string,
|
||||||
|
dishTypes? : string,
|
||||||
|
dishTypesStr? :any,
|
||||||
|
essentials?:string,
|
||||||
|
fat?: number | string,
|
||||||
|
fruitsVegetables?:number | string,
|
||||||
|
image?:string,
|
||||||
|
meatEgg?:number | string,
|
||||||
|
name? :string,
|
||||||
|
percentage?:string,
|
||||||
|
power?:number | string,
|
||||||
|
protein?:number | string,
|
||||||
|
spiciness?:number | string,
|
||||||
|
spicinessStr?:string,
|
||||||
|
updateTime?:string,
|
||||||
|
user?:string,
|
||||||
|
userName?:string,
|
||||||
|
}
|
||||||
|
|
||||||
|
const datalist:DishesValue[] = [
|
||||||
|
{
|
||||||
|
adaptableGroup:"0,1",
|
||||||
|
adaptableGroupStr:["小学", "初中"],
|
||||||
|
appraise:"1.西红柿炒蛋酸甜有营养！补充维生素C，对皮肤好，还能让我们肠胃通畅，鸡蛋中含有丰富的叶黄素和玉米黄素等抗氧化物质,可以帮助保护眼睛健康,对我们眼睛有益处。的维生素也可以帮助我们提高免疫力，让我们更强壮。3.世界之大不过一碗西红柿炒鸡蛋，酸甜开胃，营养美味。西红柿和鸡蛋中都含有丰富的维生素和矿物质，如维生素A、维生素C、维生素E、钾、钙等，这些营养物质有助于促进身体的正常运转。",
|
||||||
|
beansNuts:0,
|
||||||
|
cerealsPotato: 0,
|
||||||
|
code :"WY-D002",
|
||||||
|
cost:0.74,
|
||||||
|
createTime:"2024-04-10 02:56:27",
|
||||||
|
deptId:"24",
|
||||||
|
deptName:"总部",
|
||||||
|
dishTypes : "1",
|
||||||
|
dishTypesStr :["副荤"],
|
||||||
|
essentials:"1.鸡蛋打散，炒熟备用。\n2.热锅烧油，放入西红柿翻炒。\n3.加入盐，白糖，鸡精炒熟。\n4.放入鸡蛋，翻拌均匀。\n5.生粉加水调匀，淋入锅中，收汁出锅。",
|
||||||
|
fat: 2.72,
|
||||||
|
fruitsVegetables:70,
|
||||||
|
image:"https://file.wy2020.com/admin/weiyi/img/vip/nutri/dish/cbf28b18d47a4c378ad7c702dc9da6f8_1280w_956h.jpg?x-image-process=image/resize,m_lfit,h_25,w_25",
|
||||||
|
meatEgg:30,
|
||||||
|
name :"西红柿炒鸡蛋",
|
||||||
|
percentage:"西红柿70% ：鸡蛋30%",
|
||||||
|
power:52.2,
|
||||||
|
protein:4.56,
|
||||||
|
spiciness:0,
|
||||||
|
spicinessStr:"不辣",
|
||||||
|
updateTime:"2025-05-07 14:53:44",
|
||||||
|
user:"1",
|
||||||
|
userName:"系统管理员",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
adaptableGroup:"0,1",
|
||||||
|
adaptableGroupStr:["小学", "初中"],
|
||||||
|
appraise:"1.西红柿炒蛋酸甜有营养！补充维生素C，对皮肤好，还能让我们肠胃通畅，鸡蛋中含有丰富的叶黄素和玉米黄素等抗氧化物质,可以帮助保护眼睛健康,对我们眼睛有益处。的维生素也可以帮助我们提高免疫力，让我们更强壮。3.世界之大不过一碗西红柿炒鸡蛋，酸甜开胃，营养美味。西红柿和鸡蛋中都含有丰富的维生素和矿物质，如维生素A、维生素C、维生素E、钾、钙等，这些营养物质有助于促进身体的正常运转。",
|
||||||
|
beansNuts:0,
|
||||||
|
cerealsPotato: 0,
|
||||||
|
code :"WY-D002",
|
||||||
|
cost:0.74,
|
||||||
|
createTime:"2024-04-10 02:56:27",
|
||||||
|
deptId:"24",
|
||||||
|
deptName:"总部",
|
||||||
|
dishTypes : "1",
|
||||||
|
dishTypesStr :["副荤"],
|
||||||
|
essentials:"1.鸡蛋打散，炒熟备用。\n2.热锅烧油，放入西红柿翻炒。\n3.加入盐，白糖，鸡精炒熟。\n4.放入鸡蛋，翻拌均匀。\n5.生粉加水调匀，淋入锅中，收汁出锅。",
|
||||||
|
fat: 2.72,
|
||||||
|
fruitsVegetables:70,
|
||||||
|
image:"https://file.wy2020.com/admin/weiyi/img/vip/nutri/dish/cbf28b18d47a4c378ad7c702dc9da6f8_1280w_956h.jpg?x-image-process=image/resize,m_lfit,h_25,w_25",
|
||||||
|
meatEgg:30,
|
||||||
|
name :"西红柿炒鸡蛋",
|
||||||
|
percentage:"西红柿70% ：鸡蛋30%",
|
||||||
|
power:52.2,
|
||||||
|
protein:4.56,
|
||||||
|
spiciness:0,
|
||||||
|
spicinessStr:"不辣",
|
||||||
|
updateTime:"2025-05-07 14:53:44",
|
||||||
|
user:"1",
|
||||||
|
userName:"系统管理员",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
adaptableGroup:"0,1",
|
||||||
|
adaptableGroupStr:["小学", "初中"],
|
||||||
|
appraise:"1.西红柿炒蛋酸甜有营养！补充维生素C，对皮肤好，还能让我们肠胃通畅，鸡蛋中含有丰富的叶黄素和玉米黄素等抗氧化物质,可以帮助保护眼睛健康,对我们眼睛有益处。的维生素也可以帮助我们提高免疫力，让我们更强壮。3.世界之大不过一碗西红柿炒鸡蛋，酸甜开胃，营养美味。西红柿和鸡蛋中都含有丰富的维生素和矿物质，如维生素A、维生素C、维生素E、钾、钙等，这些营养物质有助于促进身体的正常运转。",
|
||||||
|
beansNuts:0,
|
||||||
|
cerealsPotato: 0,
|
||||||
|
code :"WY-D002",
|
||||||
|
cost:0.74,
|
||||||
|
createTime:"2024-04-10 02:56:27",
|
||||||
|
deptId:"24",
|
||||||
|
deptName:"总部",
|
||||||
|
dishTypes : "1",
|
||||||
|
dishTypesStr :["副荤"],
|
||||||
|
essentials:"1.鸡蛋打散，炒熟备用。\n2.热锅烧油，放入西红柿翻炒。\n3.加入盐，白糖，鸡精炒熟。\n4.放入鸡蛋，翻拌均匀。\n5.生粉加水调匀，淋入锅中，收汁出锅。",
|
||||||
|
fat: 2.72,
|
||||||
|
fruitsVegetables:70,
|
||||||
|
image:"https://file.wy2020.com/admin/weiyi/img/vip/nutri/dish/cbf28b18d47a4c378ad7c702dc9da6f8_1280w_956h.jpg?x-image-process=image/resize,m_lfit,h_25,w_25",
|
||||||
|
meatEgg:30,
|
||||||
|
name :"西红柿炒鸡蛋",
|
||||||
|
percentage:"西红柿70% ：鸡蛋30%",
|
||||||
|
power:52.2,
|
||||||
|
protein:4.56,
|
||||||
|
spiciness:0,
|
||||||
|
spicinessStr:"不辣",
|
||||||
|
updateTime:"2025-05-07 14:53:44",
|
||||||
|
user:"1",
|
||||||
|
userName:"系统管理员",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
adaptableGroup:"0,1",
|
||||||
|
adaptableGroupStr:["小学", "初中"],
|
||||||
|
appraise:"1.西红柿炒蛋酸甜有营养！补充维生素C，对皮肤好，还能让我们肠胃通畅，鸡蛋中含有丰富的叶黄素和玉米黄素等抗氧化物质,可以帮助保护眼睛健康,对我们眼睛有益处。的维生素也可以帮助我们提高免疫力，让我们更强壮。3.世界之大不过一碗西红柿炒鸡蛋，酸甜开胃，营养美味。西红柿和鸡蛋中都含有丰富的维生素和矿物质，如维生素A、维生素C、维生素E、钾、钙等，这些营养物质有助于促进身体的正常运转。",
|
||||||
|
beansNuts:0,
|
||||||
|
cerealsPotato: 0,
|
||||||
|
code :"WY-D002",
|
||||||
|
cost:0.74,
|
||||||
|
createTime:"2024-04-10 02:56:27",
|
||||||
|
deptId:"24",
|
||||||
|
deptName:"总部",
|
||||||
|
dishTypes : "1",
|
||||||
|
dishTypesStr :["副荤"],
|
||||||
|
essentials:"1.鸡蛋打散，炒熟备用。\n2.热锅烧油，放入西红柿翻炒。\n3.加入盐，白糖，鸡精炒熟。\n4.放入鸡蛋，翻拌均匀。\n5.生粉加水调匀，淋入锅中，收汁出锅。",
|
||||||
|
fat: 2.72,
|
||||||
|
fruitsVegetables:70,
|
||||||
|
image:"https://file.wy2020.com/admin/weiyi/img/vip/nutri/dish/cbf28b18d47a4c378ad7c702dc9da6f8_1280w_956h.jpg?x-image-process=image/resize,m_lfit,h_25,w_25",
|
||||||
|
meatEgg:30,
|
||||||
|
name :"西红柿炒鸡蛋",
|
||||||
|
percentage:"西红柿70% ：鸡蛋30%",
|
||||||
|
power:52.2,
|
||||||
|
protein:4.56,
|
||||||
|
spiciness:0,
|
||||||
|
spicinessStr:"不辣",
|
||||||
|
updateTime:"2025-05-07 14:53:44",
|
||||||
|
user:"1",
|
||||||
|
userName:"系统管理员",
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export default datalist;
|
||||||
|
|
@ -1,11 +1,658 @@
|
||||||
<script setup lang="ts">
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>菜品管理</div>
|
<div class="dishesManagement">
|
||||||
|
<TablePro ref="tableRef" :request-api="reqApi" :search-form-options="searchFormOptions" :columns="columns"
|
||||||
|
:single-line="false"
|
||||||
|
:isPageTable="true">
|
||||||
|
<template #headerExtra>
|
||||||
|
<n-button strong secondary type="primary" @click="addDishes"> 添加菜品</n-button>
|
||||||
|
<n-button strong secondary type="primary"> 导入</n-button>
|
||||||
|
</template>
|
||||||
|
</TablePro>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
<script setup lang="tsx">
|
||||||
|
import { NButton, useModal, type FormInst, NPerformantEllipsis } from "naive-ui";
|
||||||
|
import { reactive, ref } from "vue";
|
||||||
|
import type { modelDefaultValue } from "@/views/personnelManagement/departmentStructure/index.ts";
|
||||||
|
import { TablePro, type TableProProps, FormPro, type FormItemOptions, type TableProInst } from "@/components";
|
||||||
|
|
||||||
|
type TableType = TableProProps<any, any>
|
||||||
|
|
||||||
|
|
||||||
|
import datalist, { type DishesValue } from "@/views/smartRecipes/dishesManagement/index.ts";
|
||||||
|
import CustomImageUpload from "@/components/customImageUpload/index.vue";
|
||||||
|
|
||||||
|
const modal = useModal();
|
||||||
|
const form = ref<FormInst | null>(null);
|
||||||
|
const reqApi: TableType["requestApi"] = (params) => {
|
||||||
|
return new Promise((resolve: any) => {
|
||||||
|
resolve({
|
||||||
|
code: 200,
|
||||||
|
data: {
|
||||||
|
pages: "2",
|
||||||
|
current: "1",
|
||||||
|
records: datalist,
|
||||||
|
size: "5",
|
||||||
|
total: "10"
|
||||||
|
},
|
||||||
|
success: "成功"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const searchFormOptions = reactive<TableType["searchFormOptions"]>({
|
||||||
|
groups: {
|
||||||
|
type: "select",
|
||||||
|
label: "适应群体",
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
value: "小学",
|
||||||
|
label: "小学"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "初中",
|
||||||
|
label: "初中"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "高中及以上",
|
||||||
|
label: "高中及以上"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "成人男",
|
||||||
|
label: "成人男"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "成人女",
|
||||||
|
label: "成人女"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "高龄老人",
|
||||||
|
label: "高龄老人"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "三高人群",
|
||||||
|
label: "三高人群"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "糖尿病人群",
|
||||||
|
label: "糖尿病人群"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "痛风人群",
|
||||||
|
label: "痛风人群"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "肝肾障碍",
|
||||||
|
label: "肝肾障碍"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
dishesCategory: {
|
||||||
|
type: "select",
|
||||||
|
label: "菜品类别",
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
value: "主荤",
|
||||||
|
label: "主荤"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "副荤",
|
||||||
|
label: "副荤"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "素菜",
|
||||||
|
label: "素菜"
|
||||||
|
}, {
|
||||||
|
value: "小菜",
|
||||||
|
label: "小菜"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "水果",
|
||||||
|
label: "水果"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "坚果",
|
||||||
|
label: "坚果"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "汤饮",
|
||||||
|
label: "汤饮"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
spicinessStr: {
|
||||||
|
type: "select",
|
||||||
|
label: "辣度",
|
||||||
|
options: [{
|
||||||
|
value: "不辣",
|
||||||
|
label: "不辣"
|
||||||
|
}, {
|
||||||
|
value: "微辣",
|
||||||
|
label: "微辣"
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
type: "input",
|
||||||
|
label: "菜品名称"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const columns = ref<TableType["columns"]>([
|
||||||
|
{
|
||||||
|
key: "name",
|
||||||
|
title: "菜品名称",
|
||||||
|
width: 130
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "adaptableGroupStr",
|
||||||
|
title: "适应人群",
|
||||||
|
width: 130
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "dishTypesStr",
|
||||||
|
title: "菜品类别",
|
||||||
|
width: 130
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "spicinessStr",
|
||||||
|
title: "辣度",
|
||||||
|
width: 130
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "image",
|
||||||
|
title: "菜品图片",
|
||||||
|
width: 100,
|
||||||
|
render: (value: any) => {
|
||||||
|
return (
|
||||||
|
<n-avatar
|
||||||
|
round
|
||||||
|
src={value.image}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "percentage",
|
||||||
|
title: "食物占比",
|
||||||
|
width: 130
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "cerealsPotato",
|
||||||
|
title: "谷薯含量",
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "meatEgg",
|
||||||
|
title: "肉蛋含量",
|
||||||
|
width: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "fruitsVegetables",
|
||||||
|
title: "果蔬含量",
|
||||||
|
width: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "beansNuts",
|
||||||
|
title: "豆类坚果类",
|
||||||
|
width: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "power",
|
||||||
|
title: "能量",
|
||||||
|
width: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "protein",
|
||||||
|
title: "蛋白质",
|
||||||
|
width: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "fat",
|
||||||
|
title: "脂肪",
|
||||||
|
width: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "appraise",
|
||||||
|
title: "营养师评语",
|
||||||
|
width: 130,
|
||||||
|
render: ({ appraise }) => (
|
||||||
|
<div>
|
||||||
|
{appraise.split("/").map((item: string, index: number) => (
|
||||||
|
<NPerformantEllipsis
|
||||||
|
key={index}
|
||||||
|
style={{ maxWidth: "100px" }}
|
||||||
|
// 关键配置 👇
|
||||||
|
tooltip={{
|
||||||
|
contentStyle: {
|
||||||
|
whiteSpace: "pre-line", // 允许换行
|
||||||
|
maxWidth: "200px" // 限制提示框宽度
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item.replace(/\s/g, "\n")} {/* 将空格转为换行 */}
|
||||||
|
</NPerformantEllipsis>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "essentials",
|
||||||
|
title: "制作要点",
|
||||||
|
width: 130,
|
||||||
|
render: ({ essentials }) => (
|
||||||
|
<div>
|
||||||
|
{essentials.split("/").map((item: string, index: number) => (
|
||||||
|
<NPerformantEllipsis
|
||||||
|
key={index}
|
||||||
|
style={{ maxWidth: "100px" }}
|
||||||
|
// 关键配置 👇
|
||||||
|
tooltip={{
|
||||||
|
contentStyle: {
|
||||||
|
whiteSpace: "pre-line", // 允许换行
|
||||||
|
maxWidth: "200px" // 限制提示框宽度
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item.replace(/\s/g, "\n")} {/* 将空格转为换行 */}
|
||||||
|
</NPerformantEllipsis>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "createTime",
|
||||||
|
title: "提交时间",
|
||||||
|
width: 130
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "updateTime",
|
||||||
|
title: "更新时间",
|
||||||
|
width: 130
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "",
|
||||||
|
title: "操作",
|
||||||
|
width: 150,
|
||||||
|
fixed: "right",
|
||||||
|
render: (value: DishesValue) => {
|
||||||
|
return (
|
||||||
|
<div style={{ display: "flex" }}>
|
||||||
|
<n-button
|
||||||
|
strong
|
||||||
|
secondary
|
||||||
|
style={{ marginLeft: "10px" }}
|
||||||
|
type="warning"
|
||||||
|
onClick={() => {
|
||||||
|
console.log(value, "000");
|
||||||
|
title.value = `修改食材原料`;
|
||||||
|
userValue.value.image = value.image;
|
||||||
|
userValue.value.name = value.name;
|
||||||
|
userValue.value.adaptableGroupStr = value.adaptableGroupStr;
|
||||||
|
userValue.value.dishTypesStr = value.dishTypesStr;
|
||||||
|
userValue.value.spicinessStr = value.spicinessStr;
|
||||||
|
userValue.value.power = value.power;
|
||||||
|
userValue.value.fat = value.fat;
|
||||||
|
userValue.value.meatEgg = value.meatEgg;
|
||||||
|
userValue.value.percentage = value.percentage;
|
||||||
|
userValue.value.protein = value.protein;
|
||||||
|
userValue.value.cerealsPotato = value.cerealsPotato;
|
||||||
|
userValue.value.fruitsVegetables = value.fruitsVegetables;
|
||||||
|
userValue.value.beansNuts = value.beansNuts;
|
||||||
|
userValue.value.essentials = value.essentials;
|
||||||
|
userValue.value.appraise = value.appraise;
|
||||||
|
modalRef.value = modal.create({
|
||||||
|
title: title.value,
|
||||||
|
preset: "card",
|
||||||
|
style: {
|
||||||
|
width: "1000px"
|
||||||
|
},
|
||||||
|
content: () => (
|
||||||
|
<div style="height:600px;overflow-y: auto;scrollbar-width: none;">
|
||||||
|
<FormPro labelPlacement={"top"} ref={form} v-model:value={userValue.value}
|
||||||
|
form-item-options={formOptions1User}
|
||||||
|
gridProps={{ cols: 1, xGap: 8, itemResponsive: true }}>
|
||||||
|
</FormPro>
|
||||||
|
<FormPro labelPlacement={"top"} ref={form} v-model:value={userValue.value}
|
||||||
|
form-item-options={formOptionsUser}
|
||||||
|
gridProps={{ cols: 2, xGap: 16, itemResponsive: true }}>
|
||||||
|
</FormPro>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
),
|
||||||
|
footer: () => (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "flex-end"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<n-button
|
||||||
|
loading={loading.value}
|
||||||
|
style={{ marginRight: "10px" }}
|
||||||
|
type="primary"
|
||||||
|
onClick={() => {
|
||||||
|
modalRef.value.destroy();
|
||||||
|
resetModelValue();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
确认
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
onClick={() => {
|
||||||
|
modalRef.value.destroy();
|
||||||
|
resetModelValue();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</n-button>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
onAfterLeave: () => {
|
||||||
|
resetModelValue();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>编辑
|
||||||
|
</n-button>
|
||||||
|
<n-button type="error" style={{ margin: "0 10px" }}>
|
||||||
|
删除
|
||||||
|
</n-button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
]);
|
||||||
|
const userDefaultValue = {
|
||||||
|
adaptableGroup: "",
|
||||||
|
adaptableGroupStr: "",
|
||||||
|
appraise: "",
|
||||||
|
beansNuts: "",
|
||||||
|
cerealsPotato: "",
|
||||||
|
code: "",
|
||||||
|
cost: "",
|
||||||
|
createTime: "",
|
||||||
|
deptId: "",
|
||||||
|
deptName: "",
|
||||||
|
dishTypes: "",
|
||||||
|
dishTypesStr: "",
|
||||||
|
essentials: "",
|
||||||
|
fat: "",
|
||||||
|
fruitsVegetables: "",
|
||||||
|
image: "",
|
||||||
|
meatEgg: "",
|
||||||
|
name: "",
|
||||||
|
percentage: "",
|
||||||
|
power: "",
|
||||||
|
protein: "",
|
||||||
|
spiciness: "",
|
||||||
|
spicinessStr: "",
|
||||||
|
updateTime: "",
|
||||||
|
user: "",
|
||||||
|
userName: ""
|
||||||
|
};
|
||||||
|
|
||||||
|
const userValue = ref<DishesValue>({
|
||||||
|
...userDefaultValue
|
||||||
|
});
|
||||||
|
|
||||||
|
const resetModelValue = () => {
|
||||||
|
userValue.value = { ...userDefaultValue };
|
||||||
|
};
|
||||||
|
|
||||||
|
const addUserOrUpdate = () => {
|
||||||
|
form.value?.validate().then(() => {
|
||||||
|
// loading.value = true
|
||||||
|
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const formOptionsUser = reactive<FormItemOptions<DishesValue>>({
|
||||||
|
name: {
|
||||||
|
type: "input",
|
||||||
|
label: "菜品名称",
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
adaptableGroupStr: {
|
||||||
|
type: "select",
|
||||||
|
label: "适应群体",
|
||||||
|
required: true,
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
value: "小学",
|
||||||
|
label: "小学"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "初中",
|
||||||
|
label: "初中"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "高中及以上",
|
||||||
|
label: "高中及以上"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "成人男",
|
||||||
|
label: "成人男"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "成人女",
|
||||||
|
label: "成人女"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "高龄老人",
|
||||||
|
label: "高龄老人"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "三高人群",
|
||||||
|
label: "三高人群"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "糖尿病人群",
|
||||||
|
label: "糖尿病人群"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "痛风人群",
|
||||||
|
label: "痛风人群"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "肝肾障碍",
|
||||||
|
label: "肝肾障碍"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
dishTypesStr: {
|
||||||
|
type: "select",
|
||||||
|
label: "菜品类别",
|
||||||
|
required: true,
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
value: "主荤",
|
||||||
|
label: "主荤"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "副荤",
|
||||||
|
label: "副荤"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "素菜",
|
||||||
|
label: "素菜"
|
||||||
|
}, {
|
||||||
|
value: "小菜",
|
||||||
|
label: "小菜"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "水果",
|
||||||
|
label: "水果"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "坚果",
|
||||||
|
label: "坚果"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "汤饮",
|
||||||
|
label: "汤饮"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
spicinessStr: {
|
||||||
|
type: "radioGroup",
|
||||||
|
label: "辣度",
|
||||||
|
required: true,
|
||||||
|
options: [{
|
||||||
|
value: "不辣",
|
||||||
|
label: "不辣"
|
||||||
|
}, {
|
||||||
|
value: "微辣",
|
||||||
|
label: "微辣"
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
cerealsPotato:{
|
||||||
|
type:'input',
|
||||||
|
label:'谷薯含量（g/100g）',
|
||||||
|
componentsProps: {
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
meatEgg:{
|
||||||
|
type:'input',
|
||||||
|
label:'肉蛋含量（g/100g）',
|
||||||
|
componentsProps: {
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fruitsVegetables:{
|
||||||
|
type:'input',
|
||||||
|
label:'果蔬含量（g/100g）',
|
||||||
|
componentsProps: {
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
beansNuts:{
|
||||||
|
type:'input',
|
||||||
|
label:'豆类坚果类（g/100g）',
|
||||||
|
componentsProps: {
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
power:{
|
||||||
|
type:'input',
|
||||||
|
label:'能量（kcal/100g）',
|
||||||
|
componentsProps: {
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
protein:{
|
||||||
|
type:'input',
|
||||||
|
label:'蛋白质（g/100g）',
|
||||||
|
componentsProps: {
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
percentage:{
|
||||||
|
type:'input',
|
||||||
|
label:'食物占比',
|
||||||
|
componentsProps: {
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fat:{
|
||||||
|
type:'input',
|
||||||
|
label:'脂肪（g/100g）',
|
||||||
|
componentsProps: {
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
appraise:{
|
||||||
|
type:'input',
|
||||||
|
label:'营养师评语',
|
||||||
|
componentsProps: {
|
||||||
|
type:'textarea'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
essentials:{
|
||||||
|
type:'input',
|
||||||
|
label:'制作要点',
|
||||||
|
componentsProps: {
|
||||||
|
type:'textarea'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const formOptions1User = reactive<FormItemOptions<DishesValue>>({
|
||||||
|
// // form表单
|
||||||
|
image: {
|
||||||
|
type: "custom",
|
||||||
|
label: "",
|
||||||
|
customRender: (modelValue) => {
|
||||||
|
return (
|
||||||
|
<div style="margin: auto;text-align: center">
|
||||||
|
<div>
|
||||||
|
<n-image
|
||||||
|
width="150"
|
||||||
|
height="150"
|
||||||
|
src={modelValue.image}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
菜品图片
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const loading = ref<boolean>(false);
|
||||||
|
const modalRef = ref();
|
||||||
|
const title = ref("添加食材原料");
|
||||||
|
const addDishes = () => {
|
||||||
|
modalRef.value = modal.create({
|
||||||
|
title: title.value,
|
||||||
|
preset: "card",
|
||||||
|
style: {
|
||||||
|
width: "1000px"
|
||||||
|
},
|
||||||
|
content: () => (
|
||||||
|
<div style="height:600px;overflow-y: auto;scrollbar-width: none;">
|
||||||
|
<FormPro labelPlacement={"top"} ref={form} v-model:value={userValue.value}
|
||||||
|
form-item-options={formOptions1User} gridProps={{ cols: 1, xGap: 8, itemResponsive: true }}>
|
||||||
|
</FormPro>
|
||||||
|
<FormPro labelPlacement={"top"} ref={form} v-model:value={userValue.value}
|
||||||
|
form-item-options={formOptionsUser} gridProps={{ cols: 2, xGap: 16, itemResponsive: true }}>
|
||||||
|
</FormPro>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
),
|
||||||
|
footer: () => (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "flex-end"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<n-button
|
||||||
|
loading={loading.value}
|
||||||
|
style={{ marginRight: "10px" }}
|
||||||
|
type="primary"
|
||||||
|
onClick={() => {
|
||||||
|
addUserOrUpdate();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
确认
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
onClick={() => {
|
||||||
|
modalRef.value.destroy();
|
||||||
|
resetModelValue();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</n-button>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
onAfterLeave: () => {
|
||||||
|
resetModelValue();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
//.dishesManagement {
|
||||||
|
// //overflow-y: auto;
|
||||||
|
//
|
||||||
|
//}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -611,8 +611,8 @@
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.departmentStructure {
|
//.departmentStructure {
|
||||||
//overflow-y: auto;
|
// //overflow-y: auto;
|
||||||
|
//
|
||||||
}
|
//}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue