canteen_system/src/views/personnelManagement/enterpriseStaff/index.vue

<template>
  <div>
    <TablePro
      ref="tableRef"
      :request-api="reqApi"
      :search-form-options="searchFormOptions"
      :columns="columns"
      :isPageTable="true"
    />
  </div>
</template>
<script setup lang="tsx">
  import {
    TablePro,
    type TableProProps,
    FormPro,
    type FormItemOptions,
    type TableProInst,
    Icon,
  } from "@/components";
  import { NPerformantEllipsis, 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: [
            {
              goods_name: "菠菜",
              company: "长沙xxx食品有限公司",
              out_and_in: "70/80",
              num: 78,
              time: "2025-3-16",
              handlers: "李xx",
            },
            {
              goods_name: "菠菜",
              company: "长沙xxx食品有限公司",
              out_and_in: "70/80",
              num: 78,
              time: "2025-3-16",
              handlers: "李xx",
            },
          ],
          size: "10",
          total: "12",
        },
        message: "操作成功！",
      });
    });
  };
  type TableType = TableProProps<any, any>;
  const searchFormOptions = reactive<TableType["searchFormOptions"]>({
    name: {
      type: "input",
      label: "姓名",
    },
  });
  const columns = ref<TableType["columns"]>([
    // {
    //   key: "index",
    //   title: "序号",
    //   width: 20,
    //   render: (_rowData: object, _rowIndex: number) => {
    //     return _rowIndex + 1;
    //   },
    // },

    {
      key: "goods_name",
      title: "商品名称",
      width: 70,
      render: ({ goods_name }) => {
        return (
          <NPerformantEllipsis style={{ maxWidth: "70px" }}>
            {goods_name}
          </NPerformantEllipsis>
        );
      },
    },
    {
      key: "company",
      title: "商品名称",
      width: 200,
      render: ({ company }) => {
        return (
          <NPerformantEllipsis style={{ maxWidth: "200px" }}>
            {company}
          </NPerformantEllipsis>
        );
      },
    },
    {
      key: "out_and_in",
      title: "出/入库",
      width: 70,
    },
    {
      key: "num",
      title: "数量",
      width: 70,
    },
    {
      key: "time",
      title: "时间",
      width: 70,
    },
    {
      key: "handlers",
      title: "操作者",
      width: 100,
    },
  ]);
</script>
<style scoped lang="scss"></style>