Update index.vue

src/views/hardwareData/index.vue

@@ -1,11 +1,170 @@
-<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: [
+            {
+              sampleNumber: "LYG00008",
+              name: "肉沫水蒸蛋",
+              date: "2025-05-08",
+              type: "午餐",
+              remark: "午餐食品留样",
+              createTime: "2025-05-07",
+              updateTime: "2025-05-07 13:20:42",
+            },
 
-<style scoped lang="scss">
+            {
+              sampleNumber: "LYG00008",
+              name: "蒜条炒肉丝",
+              date: "2025-05-08",
+              type: "午餐",
+              remark: "午餐食品留样",
+              createTime: "2025-05-07",
+              updateTime: "2025-05-07 13:20:42",
+            },
+          ],
+          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: "sampleNumber",
+      title: "留样柜",
+    },
+    {
+      key: "name",
+      title: "菜名",
+      width: 200,
+      render: ({ name }) => {
+        return (
+          <NPerformantEllipsis style={{ maxWidth: "200px" }}>
+            {name}
+          </NPerformantEllipsis>
+        );
+      },
+    },
+    {
+      key: "date",
+      title: "日期",
+    },
+    {
+      key: "type",
+      title: "餐别",
+      render: ({ type }) => {
+        return <NTag type="success">{type}</NTag>;
+      },
+    },
+    {
+      key: "remark",
+      title: "描述",
+      width: 200,
+      render: ({ remark }) => {
+        return (
+          <NPerformantEllipsis style={{ maxWidth: "200px" }}>
+            {remark}
+          </NPerformantEllipsis>
+        );
+      },
+    },
+    {
+      key: "createTime",
+      title: "创建时间",
+    },
+    {
+      key: "updateTime",
+      title: "更新时间",
+    },
+    {
+      key: "",
+      title: "操作",
+      width: 200,
+      render: (value) => {
+        return (
+          <div style={{ display: "flex" }}>
+            <n-button
+              strong
+              secondary
+              style={{ marginLeft: "10px" }}
+              type="warning"
+              onClick={() => {}}
+            >
+              修改
+            </n-button>
+
+            <NPopconfirm
+              onPositiveClick={async () => {}}
+              onNegativeClick={() => {}}
+              showIcon={false}
+            >
+              {{
+                trigger: () => (
+                  <n-button
+                    strong
+                    secondary
+                    style={{ marginLeft: "10px" }}
+                    type="error"
+                  >
+                    删除
+                  </n-button>
+                ),
+                default: () => "确认要除么？",
+              }}
+            </NPopconfirm>
+          </div>
+        );
+      },
+    },
+  ]);
+</script>
+<style scoped lang="scss"></style>