679 lines
16 KiB
Vue
679 lines
16 KiB
Vue
<template>
|
||
<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,
|
||
render: (value: any) => {
|
||
return (
|
||
<n-tag type="success">
|
||
{value.adaptableGroupStr}
|
||
</n-tag>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
key: "dishTypesStr",
|
||
title: "菜品类别",
|
||
width: 130,
|
||
render: (value: any) => {
|
||
return (
|
||
<n-tag type="success">
|
||
{value.dishTypesStr}
|
||
</n-tag>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
key: "spicinessStr",
|
||
title: "辣度",
|
||
width: 130,
|
||
render: (value: any) => {
|
||
return (
|
||
<n-tag type="success">
|
||
{value.spicinessStr}
|
||
</n-tag>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
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> |