库存盘点

src/views/personnelManagement/enterpriseStaff/index.ts

@@ -1,48 +0,0 @@
-export interface userInterface {
-  /**
-   * @snowFlakeId 头像
-   */
-  snowFlakeId?: string
-  /**
-   * @name 头像
-   */
-  avatar?: string
-  /**
-   * @name 用户名_必传
-   */
-  name: string
-  /**
-   * @sex 性别_必传
-   */
-  sex: string
-  /**
-   * @phoneNumber 手机号_必传
-   */
-  phoneNumber: string
-  /**
-   * @phoneNumber 账号状态_必传
-   */
-
-  status: string
-
-  /**
-   * @authClient 授权的客户端_必传
-   */
-
-  authClient: any[]
-  /**
-   * @deptIds 所属部门id_必传
-   */
-
-  deptIds?: any[]
-  /**
-   * @roleIds 所属角色id_必传
-   */
-
-  roleIds?: any[]
-}
-export interface passwordInterface {
-  oldPassword: string
-  newPassword: string
-  confirmPassword: string
-}

src/views/personnelManagement/enterpriseStaff/index.vue

@@ -1,9 +1,119 @@
 <template>
-  <div>库存盘点</div>
+  <div>
+    <TablePro
+      ref="tableRef"
+      :request-api="reqApi"
+      :search-form-options="searchFormOptions"
+      :columns="columns"
+      :isPageTable="true"
+    />
+  </div>
 </template>
-<script setup lang="ts">
+<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 scoped lang="scss"></style>
-
-</style>