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

Update index.vue

This commit is contained in:
TimSpan 2025-05-07 11:38:48 +08:00
parent d8c1c0a3cd
commit 49c4525b3b
1 changed files with 255 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

262
src/views/smartRecipes/dailyRecipes/index.vue
View File

@ -1,11 +1,259 @@
<script setup lang="ts">
</script>
<!-- 每日菜谱 -->
<template>
<div>每日菜谱</div>
<div>
<TablePro
ref="tableRef"
:request-api="reqApi"
:search-form-options="searchFormOptions"
:columns="columns"
:isPageTable="true"
>
<template #headerExtra>
<n-button
strong
secondary
type="primary"
>
添加
</n-button>
<n-button style="margin-left: 10px">清空</n-button>
<n-button style="margin-left: 10px">打印</n-button>
</template>
</TablePro>
</div>
</template>
<script setup lang="tsx">
import {
TablePro,
type TableProProps,
FormPro,
type FormItemOptions,
type TableProInst,
Icon,
} from "@/components";
import { NPerformantEllipsis, NPopconfirm, NTag } from "naive-ui";
const tableRef = useTemplateRef<TableProInst>("tableRef");
const reqApi: TableType["requestApi"] = (params) => {
return new Promise((resolve) => {
resolve({
code: 200,
data: {
current: "1",
// @ts-ignore
pages: "2",
records: [
{
companyName: "南头央厨",
deptName: "南头升辉小学",
type: "午餐",
createTime: "2025-04-30",
endTime: "2025-05-18",
id: "1917456673534976001",
Monday:
"紫苏洋葱炒鸡/冬瓜炒肉片/红腰豆焖鸭/酸甜锅包肉/肉沫粉丝蒸水蛋/例汤",
Tuesday:
"紫苏洋葱炒鸡/冬瓜炒肉片/红腰豆焖鸭/酸甜锅包肉/肉沫粉丝蒸水蛋/例汤",
Wednesday:
"紫苏洋葱炒鸡/冬瓜炒肉片/红腰豆焖鸭/酸甜锅包肉/肉沫粉丝蒸水蛋/例汤",
Thursday: "",
Friday:
"紫苏洋葱炒鸡/冬瓜炒肉片/红腰豆焖鸭/酸甜锅包肉/肉沫粉丝蒸水蛋/例汤",
Saturday: "",
Sunday: "",
},
<style scoped lang="scss">
{
companyName: "南头央厨",
deptName: "南头升辉小学",
type: "午餐",
createTime: "2025-04-30",
endTime: "2025-05-18",
id: "1917456673534976001",
Monday:
"紫苏洋葱炒鸡/冬瓜炒肉片/红腰豆焖鸭/酸甜锅包肉/肉沫粉丝蒸水蛋/例汤",
Tuesday:
"紫苏洋葱炒鸡/冬瓜炒肉片/红腰豆焖鸭/酸甜锅包肉/肉沫粉丝蒸水蛋/例汤",
Wednesday: "",
Thursday: "",
Friday:
"紫苏洋葱炒鸡/冬瓜炒肉片/红腰豆焖鸭/酸甜锅包肉/肉沫粉丝蒸水蛋/例汤",
Saturday: "",
Sunday: "",
},
],
size: "10",
total: "12",
},
message: "操作成功！",
});
});
};
type TableType = TableProProps<any, any>;
const searchFormOptions = reactive<TableType["searchFormOptions"]>({
name: {
type: "input",
label: "商品名称",
},
});
</style>
const columns = ref<TableType["columns"]>([
{
key: "companyName",
title: "所属项目",
width: 200,
render: ({ companyName }) => {
return (
<NPerformantEllipsis style={{ maxWidth: "200px" }}>
{companyName}
</NPerformantEllipsis>
);
},
},
{
key: "deptName",
title: "所属客户",
},
{
key: "type",
title: "餐别",
render: ({ type }) => {
return <NTag type="success">{type}</NTag>;
},
},
{
key: "createTime",
title: "开始日期",
},
{
key: "endTime",
title: "结束日期",
},
{
key: "Monday",
title: "星期一",
width: 100,
render: ({ Monday }) => {
return (
<div>
{Monday.split("/").map(
(item: any, index: PropertyKey | undefined) => (
<NPerformantEllipsis style={{ maxWidth: "100px" }}>
{item}
</NPerformantEllipsis>
)
)}
</div>
);
},
},
{
key: "Tuesday",
title: "星期二",
width: 100,
render: ({ Tuesday }) => {
return (
<div>
{Tuesday.split("/").map(
(item: any, index: PropertyKey | undefined) => (
<NPerformantEllipsis style={{ maxWidth: "100px" }}>
{item}
</NPerformantEllipsis>
)
)}
</div>
);
},
},
{
key: "Wednesday",
title: "星期三",
width: 100,
render: ({ Wednesday }) => {
return (
<div>
{Wednesday.split("/").map(
(item: any, index: PropertyKey | undefined) => (
<NPerformantEllipsis style={{ maxWidth: "100px" }}>
{item}
</NPerformantEllipsis>
)
)}
</div>
);
},
},
{
key: "Thursday",
title: "星期四",
width: 100,
render: ({ Thursday }) => {
return (
<div>
{Thursday.split("/").map(
(item: any, index: PropertyKey | undefined) => (
<NPerformantEllipsis style={{ maxWidth: "100px" }}>
{item}
</NPerformantEllipsis>
)
)}
</div>
);
},
},
{
key: "Friday",
title: "星期五",
width: 100,
render: ({ Friday }) => {
return (
<div>
{Friday.split("/").map(
(item: any, index: PropertyKey | undefined) => (
<NPerformantEllipsis style={{ maxWidth: "100px" }}>
{item}
</NPerformantEllipsis>
)
)}
</div>
);
},
},
{
key: "Saturday",
title: "星期六",
width: 100,
render: ({ Saturday }) => {
return (
<div>
{Saturday.split("/").map(
(item: any, index: PropertyKey | undefined) => (
<NPerformantEllipsis style={{ maxWidth: "100px" }}>
{item}
</NPerformantEllipsis>
)
)}
</div>
);
},
},
{
key: "Sunday",
title: "星期日",
width: 100,
render: ({ Sunday }) => {
return (
<div>
{Sunday.split("/").map(
(item: any, index: PropertyKey | undefined) => (
<NPerformantEllipsis style={{ maxWidth: "100px" }}>
{item}
</NPerformantEllipsis>
)
)}
</div>
);
},
},
]);
</script>
<style scoped lang="scss"></style>