kevinMao
/
canteen_system
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

食材管理编写

This commit is contained in:
wangyilin 2025-05-07 11:35:44 +08:00
parent d8c1c0a3cd
commit d597d2114e
3 changed files with 788 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/views/personnelManagement/departmentStructure/index.vue
View File

@ -4,6 +4,7 @@
:isPageTable="true">
<template #headerExtra>
<n-button strong secondary type="primary" @click="addDepartmentStructure"> 添加库存</n-button>
<n-button strong secondary type="primary" > 导入</n-button>
</template>
</TablePro>
</div>

175
src/views/smartRecipes/foodManagement/index.ts Normal file
View File

@ -0,0 +1,175 @@
export interface FoodItemValue {
ca?:number | string,
carbs?:number | string,
code?:string,
createTime?:string,
createUserId?:string,
createUserName?:string,
dietaryFiber?: number | string,
fat?: number | string,
fe?: number | string,
id?: string,
image?:string,
label?:number | string,
labelStr?:string,
name?:string,
power?:number | string,
primaryType?:string,
primaryTypeName?:string,
protein?:number | string,
se?: number | string,
secondaryType?:string,
secondaryTypeName?:string,
supplier?: string,
supplyCost?:number | string,
supplyProductCode?:string,
supplyProductName?:string,
updateTime?:string,
vitaminA?:number | string,
vitaminB1?: number | string,
vitaminB2?:number | string,
vitaminC?: number | string,
vitaminE?: number | string,
zn?: number | string
}
const datalist:FoodItemValue[] = [
{
ca:28,
carbs: 2,
code:"0452061",
createTime:"2024-04-10 00:15:48",
createUserId:"1",
createUserName:"系统管理员",
dietaryFiber: 1.2,
fat: 0.4,
fe: 1,
id: "1777629039623471334",
image:"https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg",
label:3,
labelStr:"果蔬",
name:"梅菜",
power:16,
primaryType:"1732325785633374210",
primaryTypeName:"蔬菜类及制品",
protein:1.8,
se: 0.53,
secondaryType:"1732327277182402562",
secondaryTypeName:"嫩茎、叶、花菜类",
supplier: "",
supplyCost:0,
supplyProductCode:"FBC10001",
supplyProductName:"甜梅菜",
updateTime:"2024-08-03 23:07:20",
vitaminA:142,
vitaminB1: 0.02,
vitaminB2:0.11,
vitaminC: 72,
vitaminE: 0.64,
zn: 0.41
},
{
ca:28,
carbs: 2,
code:"0452061",
createTime:"2024-04-10 00:15:48",
createUserId:"1",
createUserName:"系统管理员",
dietaryFiber: 1.2,
fat: 0.4,
fe: 1,
id: "1777629039623471334",
image:"https://picsum.photos/id/10/100/100",
label:3,
labelStr:"果蔬",
name:"梅菜",
power:16,
primaryType:"1732325785633374210",
primaryTypeName:"蔬菜类及制品",
protein:1.8,
se: 0.53,
secondaryType:"1732327277182402562",
secondaryTypeName:"嫩茎、叶、花菜类",
supplier: "",
supplyCost:0,
supplyProductCode:"FBC10001",
supplyProductName:"甜梅菜",
updateTime:"2024-08-03 23:07:20",
vitaminA:142,
vitaminB1: 0.02,
vitaminB2:0.11,
vitaminC: 72,
vitaminE: 0.64,
zn: 0.41
},
{
ca:28,
carbs: 2,
code:"0452061",
createTime:"2024-04-10 00:15:48",
createUserId:"1",
createUserName:"系统管理员",
dietaryFiber: 1.2,
fat: 0.4,
fe: 1,
id: "1777629039623471334",
image:"https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg",
label:3,
labelStr:"果蔬",
name:"梅菜",
power:16,
primaryType:"1732325785633374210",
primaryTypeName:"蔬菜类及制品",
protein:1.8,
se: 0.53,
secondaryType:"1732327277182402562",
secondaryTypeName:"嫩茎、叶、花菜类",
supplier: "",
supplyCost:0,
supplyProductCode:"FBC10001",
supplyProductName:"甜梅菜",
updateTime:"2024-08-03 23:07:20",
vitaminA:142,
vitaminB1: 0.02,
vitaminB2:0.11,
vitaminC: 72,
vitaminE: 0.64,
zn: 0.41
},
{
ca:28,
carbs: 2,
code:"0452061",
createTime:"2024-04-10 00:15:48",
createUserId:"1",
createUserName:"系统管理员",
dietaryFiber: 1.2,
fat: 0.4,
fe: 1,
id: "1777629039623471334",
image:"https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg",
label:3,
labelStr:"果蔬",
name:"梅菜",
power:16,
primaryType:"1732325785633374210",
primaryTypeName:"蔬菜类及制品",
protein:1.8,
se: 0.53,
secondaryType:"1732327277182402562",
secondaryTypeName:"嫩茎、叶、花菜类",
supplier: "",
supplyCost:0,
supplyProductCode:"FBC10001",
supplyProductName:"甜梅菜",
updateTime:"2024-08-03 23:07:20",
vitaminA:142,
vitaminB1: 0.02,
vitaminB2:0.11,
vitaminC: 72,
vitaminE: 0.64,
zn: 0.41
}
];
export default datalist;

617
src/views/smartRecipes/foodManagement/index.vue
View File

@ -1,11 +1,618 @@
<script setup lang="ts">
</script>
<template>
<div>食材管理</div>
<div class="departmentStructure">
<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="addDepartmentStructure"> 添加食材原料</n-button>
<n-button strong secondary type="primary"> 导入</n-button>
</template>
</TablePro>
</div>
</template>
<script setup lang="tsx">
import { NButton, useModal, type FormInst } 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 api from "@/axios";
import datalist, { type FoodItemValue } from "@/views/smartRecipes/foodManagement/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"]>({
categories: {
type: "select",
label: "食物大类",
options: [
{
value: "蛋类及制品",
label: "蛋类及制品"
},
{
value: "干豆类及制品",
label: "干豆类及制品"
},
{
value: "禽肉类及制品",
label: "禽肉类及制品"
},
{
value: "谷类及制品",
label: "谷类及制品"
},
{
value: "坚果、种子类",
label: "坚果、种子类"
},
{
value: "粮油调料",
label: "粮油调料"
},
{
value: "菌藻类",
label: "菌藻类"
},
{
value: "蔬菜类",
label: "蔬菜类"
},
{
value: "厨房用品",
label: "厨房用品"
},
{
value: "水果类",
label: "水果类"
},
{
value: "其他",
label: "其他"
}
]
},
subCategories: {
type: "select",
label: "食物小类",
options: [
{
value: "食物小类",
label: "食物小类"
}
]
},
goodsLabel: {
type: "select",
label: "标签",
options: [{
value: "谷薯",
label: "谷薯"
}, {
value: "肉蛋",
label: "肉蛋"
}, {
value: "果蔬",
label: "果蔬"
}, {
value: "豆类坚果",
label: "豆类坚果"
}, {
value: "其他",
label: "其他"
}]
},
name: {
type: "input",
label: "名称"
}
});
const columns = ref<TableType["columns"]>([
{
key: "image",
title: "食物图片",
width: 100,
render: (value: any) => {
return (
<n-avatar
round
src={value.image}
/>
);
}
},
{
key: "primaryTypeName",
title: "食物大类",
width: 100
},
{
key: "secondaryTypeName",
title: "食物小类",
width: 150
},
{
key: "name",
title: "食物名称",
width: 100
},
{
key: "labelStr",
title: "食物标签",
width: 100
},
{
key: "power",
title: "热量",
width: 60
},
{
key: "protein",
title: "蛋白质",
width: 70
},
{
key: "fat",
title: "脂肪",
width: 60
},
{
key: "carbs",
title: "碳水化合物",
width: 100
},
{
key: "dietaryFiber",
title: "不溶性膳食纤维",
width: 140
},
{
key: "vitaminA",
title: "总维生素A",
width: 100
},
{
key: "vitaminB1",
title: "维生素B₁",
width: 100
},
{
key: "vitaminB2",
title: "维生素B₂",
width: 100
},
{
key: "vitaminC",
title: "维生素C",
width: 80
},
{
key: "vitaminE",
title: "维生素E",
width: 80
},
{
key: "ca",
title: "钙",
width: 50
},
{
key: "zn",
title: "锌",
width: 80
},
{
key: "fe",
title: "铁",
width: 20
},
{
key: "createUserName",
title: "提交人",
width: 80
},
{
key: "createTime",
title: "提交时间",
width: 80
},
{
key: "updateTime",
title: "更新时间",
width: 80
},
{
key: "",
title: "操作",
fixed: "right",
render: (value: FoodItemValue) => {
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.ca = value.ca
userValue.value.carbs = value.carbs
userValue.value.fat = value.fat
userValue.value.fe = value.fe
userValue.value.power = value.power
userValue.value.se = value.se
userValue.value.vitaminA = value.vitaminA
userValue.value.vitaminC = value.vitaminC
userValue.value.vitaminE = value.vitaminE
userValue.value.vitaminB1 = value.vitaminB1
userValue.value.vitaminB2 = value.vitaminB2
userValue.value.name = value.name
userValue.value.zn = value.zn
userValue.value.dietaryFiber = value.dietaryFiber
userValue.value.protein = value.protein
userValue.value.labelStr = value.labelStr
userValue.value.primaryTypeName = value.primaryTypeName
userValue.value.secondaryTypeName = value.secondaryTypeName
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 = {
ca: "",
carbs: "",
code: "",
createTime: "",
createUserId: "",
createUserName: "",
dietaryFiber: "",
fat: "",
fe: "",
id: "",
image: "",
label: "",
labelStr: "",
name: "",
power: "",
primaryType: "",
primaryTypeName: "",
protein: "",
se: "",
secondaryType: "",
secondaryTypeName: "",
supplier: "",
supplyCost: "",
supplyProductCode: "",
supplyProductName: "",
updateTime: "",
vitaminA: "",
vitaminB1: "",
vitaminB2: "",
vitaminC: "",
vitaminE: "",
zn: ""
};
const userValue = ref<FoodItemValue>({
...userDefaultValue
});
const resetModelValue = () => {
userValue.value = { ...userDefaultValue };
};
const addUserOrUpdate = () => {
form.value?.validate().then(() => {
// loading.value = true
});
};
const formOptionsUser = reactive<FormItemOptions<FoodItemValue>>({
primaryTypeName: {
type: "select",
label: "食物大类",
required: true,
labelAlign: "center",
options: [
{
value: "蛋类及制品",
label: "蛋类及制品"
},
{
value: "干豆类及制品",
label: "干豆类及制品"
},
{
value: "禽肉类及制品",
label: "禽肉类及制品"
},
{
value: "谷类及制品",
label: "谷类及制品"
},
{
value: "坚果、种子类",
label: "坚果、种子类"
},
{
value: "粮油调料",
label: "粮油调料"
},
{
value: "菌藻类",
label: "菌藻类"
},
{
value: "蔬菜类",
label: "蔬菜类"
},
{
value: "厨房用品",
label: "厨房用品"
},
{
value: "水果类",
label: "水果类"
},
{
value: "其他",
label: "其他"
}
]
},
secondaryTypeName: {
type: "select",
label: "食物小类",
required: true,
options: [
{
value: "大豆",
label: "大豆"
},
{
value: "红豆",
label: "红豆"
},
{
value: "绿豆",
label: "绿豆"
}
]
},
name: {
type: "input",
label: "食物名称",
required: true
},
labelStr: {
type: "radioGroup",
label: "食物标签",
required: true,
options: [{
value: "谷薯",
label: "谷薯"
}, {
value: "肉蛋",
label: "肉蛋"
}, {
value: "果蔬",
label: "果蔬"
}, {
value: "豆类坚果",
label: "豆类坚果"
}, {
value: "其他",
label: "其他"
}]
},
power: {
type: "input",
label: "能量（kcal/100g）"
},
protein: {
type: "input",
label: "蛋白质（g/100g）"
},
fat: {
type: "input",
label: "脂肪（g/100g）"
},
carbs: {
type: "input",
label: "碳水化合物（g/100g）"
},
dietaryFiber: {
type: "input",
label: "不溶性膳食纤维（g/100g）"
},
vitaminA: {
type: "input",
label: "维生素A（μgRAE/100g）"
},
vitaminB1: {
type: "input",
label: "维生素B1（mg/100g）"
},
vitaminB2: {
type: "input",
label: "维生素B2（mg/100g）"
},
vitaminC: {
type: "input",
label: "维生素C（mg/100g）"
},
vitaminE: {
type: "input",
label: "维生素E（mg/100g）"
},
ca: {
type: "input",
label: "钙（mg/100g）"
},
zn: {
type: "input",
label: "锌（mg/100g）"
},
fe: {
type: "input",
label: "铁（mg/100g）"
}
});
const formOptions1User = reactive<FormItemOptions<FoodItemValue>>({
// // 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 addDepartmentStructure = () => {
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">
.departmentStructure {
//overflow-y: auto;
}
</style>