菜品管理编写
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>
|
||||
<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>
|
||||
<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">
|
||||
|
||||
//.dishesManagement {
|
||||
// //overflow-y: auto;
|
||||
//
|
||||
//}
|
||||
</style>
|
||||
|
|
@ -611,8 +611,8 @@
|
|||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.departmentStructure {
|
||||
//overflow-y: auto;
|
||||
|
||||
}
|
||||
//.departmentStructure {
|
||||
// //overflow-y: auto;
|
||||
//
|
||||
//}
|
||||
</style>
|
||||
Loading…
Reference in New Issue