From 49c4525b3b68193e4944e016f5361d82766c765b Mon Sep 17 00:00:00 2001
From: TimSpan <cat20201314@163.com>
Date: Wed, 7 May 2025 11:38:48 +0800
Subject: [PATCH] Update index.vue

---
 src/views/smartRecipes/dailyRecipes/index.vue | 262 +++++++++++++++++-
 1 file changed, 255 insertions(+), 7 deletions(-)

diff --git a/src/views/smartRecipes/dailyRecipes/index.vue b/src/views/smartRecipes/dailyRecipes/index.vue
index 3098007..0c1438e 100644
--- a/src/views/smartRecipes/dailyRecipes/index.vue
+++ b/src/views/smartRecipes/dailyRecipes/index.vue
@@ -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>
\ No newline at end of file
+  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>