diff --git a/src/pages/wh/purchase-record/PurchaseRecord.vue b/src/pages/wh/purchase-record/PurchaseRecord.vue
new file mode 100644
index 0000000..4af4aa6
--- /dev/null
+++ b/src/pages/wh/purchase-record/PurchaseRecord.vue
@@ -0,0 +1,110 @@
+<template>
+  <ATablePage
+    ref="tablePage"
+    v-bind="tablePageProps">
+    <template #highFormItem="formData">
+       <ElFormItem label="采购单号">
+        <ElInput placeholder="采购单号" v-model="formData.sn"/>
+      </ElFormItem>
+       <ElFormItem label="供应商名称">
+        <ElInput placeholder="供应商名称" v-model="formData.supplierName"/>
+      </ElFormItem>
+       <ElFormItem label="商品名称">
+        <ElInput placeholder="商品名称" v-model="formData.productName"/>
+      </ElFormItem>
+    </template>
+    <template #simpleFormItem="formData">
+       <ElFormItem>
+        <ElInput placeholder="采购单号" v-model="formData.sn"/>
+      </ElFormItem>
+    </template>
+
+    <template #columns>
+        <ElTableColumn label="采购单号" prop="sn" width="150px"/>
+        <ElTableColumn label="商品名称" prop="productName"/>
+        <ElTableColumn label="规格" prop="spec"/>
+        <ElTableColumn label="采购数量" prop="quantity"/>
+        <ElTableColumn label="单位" prop="unit"/>
+        <ElTableColumn label="供应商" prop="supplierName"/>
+        <ElTableColumn label="单价" prop="unitPrice"/>
+        <ElTableColumn label="总金额" prop="totalAmount"/>
+        <ElTableColumn label="采购日期" prop="purchaseDate"/>
+    </template>
+    <PurchaseRecordForm ref="purchaseRecordForm" :research="research"/>
+    <PurchaseRecordDetail ref="purchaseRecordDetail"/>
+  </ATablePage>
+</template>
+
+<script lang="ts" setup>
+import PurchaseRecordApi from '@/pages/wh/purchase-record/purchase-record-api.ts'
+import PurchaseRecordForm from '@/pages/wh/purchase-record/PurchaseRecordForm.vue'
+import PurchaseRecordDetail from '@/pages/wh/purchase-record/PurchaseRecordDetail.vue'
+import ATablePage, {
+  type ATablePageInstance,
+  buildTablePageProps,
+} from '@/components/a-page/a-table-page/ATablePage.tsx'
+
+const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
+const purchaseRecordFormIns = useTemplateRef<InstanceType<typeof PurchaseRecordForm>>('purchaseRecordForm')
+const purchaseRecordDetailIns = useTemplateRef<InstanceType<typeof PurchaseRecordDetail>>('purchaseRecordDetail')
+
+function research() {
+  tablePageIns.value?.doSearch()
+}
+
+const tablePageProps = buildTablePageProps<PurchaseRecordTypes.SearchPurchaseRecordParam, PurchaseRecordTypes.SearchPurchaseRecordResult>({
+  searchForm: {
+    paging: PurchaseRecordApi.paging,
+  },
+  toolBar: {
+    leftTools: [
+      {
+        icon: 'Plus',
+        label: '新建',
+        action() {
+          purchaseRecordFormIns.value?.open()
+        },
+      },
+    ],
+  },
+  table: {
+    actionColumn: {
+      tableActions: [
+        {
+          tooltip: '详情',
+          icon: 'Postcard',
+          type: 'info',
+          action({row}) {
+            purchaseRecordDetailIns.value?.open(row)
+          },
+        },
+        {
+          tooltip: '编辑',
+          icon: 'Edit',
+          type: 'primary',
+          action({row}) {
+            purchaseRecordFormIns.value?.open(row)
+          },
+        },
+        {
+          icon: 'Delete',
+          loading: false,
+          type: 'danger',
+          tooltip: '删除',
+          confirm: {
+            title: '是否删除当前数据',
+          },
+          action({row}) {
+            return PurchaseRecordApi.del([ row.id! ])
+              .then(() => {
+                ElMessage.success('删除成功')
+                return true
+              })
+          },
+        },
+      ],
+    },
+  },
+})
+
+</script>
diff --git a/src/pages/wh/purchase-record/PurchaseRecordDetail.vue b/src/pages/wh/purchase-record/PurchaseRecordDetail.vue
new file mode 100644
index 0000000..3461bd8
--- /dev/null
+++ b/src/pages/wh/purchase-record/PurchaseRecordDetail.vue
@@ -0,0 +1,64 @@
+<template>
+  <ADetailPanel
+      ref="detailPanel"
+      v-bind="detailPanelProps">
+    <template #default="detailData">
+    <ElDescriptions title="采购记录" border :column="2">
+       <ElDescriptionsItem label="采购单号" prop="sn">
+        {{ detailData.sn }}
+      </ElDescriptionsItem>
+       <ElDescriptionsItem label="经办人" prop="handlerName">
+        {{ detailData.handlerName }}
+      </ElDescriptionsItem>
+       <ElDescriptionsItem label="供应商名称" prop="supplierName">
+        {{ detailData.supplierName }}
+      </ElDescriptionsItem>
+       <ElDescriptionsItem label="商品名称" prop="productName">
+        {{ detailData.productName }}
+      </ElDescriptionsItem>
+       <ElDescriptionsItem label="规格" prop="spec">
+        {{ detailData.spec }}
+      </ElDescriptionsItem>
+       <ElDescriptionsItem label="数量" prop="quantity">
+        {{ detailData.quantity }}
+      </ElDescriptionsItem>
+       <ElDescriptionsItem label="单位" prop="unit">
+        {{ detailData.unit }}
+      </ElDescriptionsItem>
+       <ElDescriptionsItem label="单价" prop="unitPrice">
+        {{ detailData.unitPrice }}
+      </ElDescriptionsItem>
+       <ElDescriptionsItem label="总金额" prop="totalAmount">
+        {{ detailData.totalAmount }}
+      </ElDescriptionsItem>
+       <ElDescriptionsItem label="采购日期" prop="purchaseDate">
+        {{ detailData.purchaseDate }}
+      </ElDescriptionsItem>
+       <ElDescriptionsItem label="备注" prop="remark" :span="2">
+        {{ detailData.remark }}
+      </ElDescriptionsItem>
+    </ElDescriptions>
+    </template>
+  </ADetailPanel>
+</template>
+
+<script lang="ts" setup>
+import PurchaseRecordApi from '@/pages/wh/purchase-record/purchase-record-api.ts'
+import ADetailPanel, {
+  type ADetailPanelInstance,
+  buildDetailPanelProps,
+} from '@/components/a-detail-panel/ADetailPanel.tsx'
+
+const detailPanelIns = useTemplateRef<ADetailPanelInstance>('detailPanel')
+const detailPanelProps = buildDetailPanelProps<PurchaseRecordTypes.SearchPurchaseRecordResult>({
+  width: '700px',
+  title: '采购记录详情',
+  detailsLoader: PurchaseRecordApi.detail,
+})
+
+defineExpose({
+  open(data: PurchaseRecordTypes.SearchPurchaseRecordResult) {
+    detailPanelIns.value?.open(data.id!)
+  },
+})
+</script>
diff --git a/src/pages/wh/purchase-record/PurchaseRecordForm.vue b/src/pages/wh/purchase-record/PurchaseRecordForm.vue
new file mode 100644
index 0000000..1972948
--- /dev/null
+++ b/src/pages/wh/purchase-record/PurchaseRecordForm.vue
@@ -0,0 +1,139 @@
+<template>
+  <AFormPanel
+      ref="formPanel"
+      v-bind="formPanelProps">
+    <template #default="formData">
+         <div class="form-items">
+       <ElFormItem label="商品名称" prop="productName">
+        <ElInput placeholder="商品名称" v-model="formData.productName" />
+      </ElFormItem>
+       <ElFormItem label="规格" prop="spec">
+        <ElInput placeholder="规格" v-model="formData.spec" />
+      </ElFormItem>
+       <ElFormItem label="采购数量" prop="quantity">
+        <ElInputNumber v-model="formData.quantity" :min="0" placeholder="采购数量" :controls="false" style="width: 100%" />
+      </ElFormItem>
+       <ElFormItem label="单位" prop="unit">
+        <ElInput placeholder="单位" v-model="formData.unit" />
+      </ElFormItem>
+       <ElFormItem label="供应商" prop="supplierName">
+        <ElInput placeholder="供应商" v-model="formData.supplierName" />
+      </ElFormItem>
+       <ElFormItem label="单价" prop="unitPrice">
+        <ElInputNumber v-model="formData.unitPrice" :min="0" placeholder="单价" :controls="false" style="width: 100%" />
+      </ElFormItem>
+       <ElFormItem label="总金额" prop="totalAmount">
+        <ElInputNumber v-model="formData.totalAmount" :min="0" placeholder="总金额" :controls="false" style="width: 100%" />
+      </ElFormItem>
+       <ElFormItem label="经办人" prop="handlerId">
+        <ElSelect v-model="formData.handlerId" placeholder="请选择经办人" filterable>
+          <ElOption v-for="user in userList" :key="user.id" :label="user.nickname" :value="user.id!"/>
+        </ElSelect>
+      </ElFormItem>
+       <ElFormItem label="采购日期" prop="purchaseDate">
+        <ElDatePicker
+          v-model="formData.purchaseDate"
+          type="datetime"
+          placeholder="选择采购日期"
+          format="YYYY-MM-DD HH:mm:ss"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          style="width: 100%"
+        />
+      </ElFormItem>
+       <ElFormItem label="备注" class="full-width">
+        <ElInput type="textarea" :rows="3" placeholder="备注" v-model="formData.remark" />
+      </ElFormItem>
+      </div>
+    </template>
+  </AFormPanel>
+</template>
+
+<script lang="ts" setup>
+import PurchaseRecordApi from '@/pages/wh/purchase-record/purchase-record-api.ts'
+import UserApi from '@/pages/sys/user/user-api.ts'
+import AFormPanel, {
+  type AFormPanelInstance,
+  buildFormPanelProps,
+} from '@/components/a-form-panel/AFormPanel.tsx'
+import Strings from '@/common/utils/strings.ts'
+
+const userList = ref<UserTypes.SearchUserResult[]>([])
+
+onMounted(() => {
+  UserApi.paging({ size: 1000, current: 1 }).then(res => {
+    userList.value = res.data.records
+  })
+})
+
+const props = withDefaults(defineProps<{
+  research?: () => void
+}>(), {
+  research: () => {
+  },
+})
+const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
+const status = ref<'add' | 'modify'>('add')
+const formPanelProps = buildFormPanelProps<PurchaseRecordTypes.SearchPurchaseRecordResult>({
+  width: '700px',
+  detailsLoader(id?: string) {
+    if (Strings.isBlank(id)) {
+      status.value = 'add'
+      return Promise.resolve()
+    } else {
+      status.value = 'modify'
+      return PurchaseRecordApi
+        .detail(id!)
+        .then(res => res.data)
+    }
+  },
+  doSubmit(data) {
+    if (status.value === 'add') {
+      return PurchaseRecordApi
+      .add(data)
+        .then(props.research)
+    } else {
+      return PurchaseRecordApi
+      .modify(data)
+        .then(props.research)
+    }
+  },
+  rules: {
+         handlerId: [{ required: true, message: '请选择经办人', trigger: 'blur' }],
+         supplierName: [{ required: true, message: '请填写供应商名称', trigger: 'blur' }],
+         productName: [{ required: true, message: '请填写商品名称', trigger: 'blur' }],
+         spec: [{ required: true, message: '请填写规格', trigger: 'blur' }],
+         quantity: [
+           { required: true, message: '请填写数量', trigger: 'blur' },
+           { pattern: /^[1-9]\d*$/, message: '采购数量必须为正整数', trigger: 'blur' }
+         ],
+         unit: [{ required: true, message: '请填写单位', trigger: 'blur' }],
+         unitPrice: [{ required: true, message: '请填写单价', trigger: 'blur' }],
+         totalAmount: [{ required: true, message: '请填写总金额', trigger: 'blur' }],
+         purchaseDate: [{ required: true, message: '请填写采购日期', trigger: 'blur' }],
+         remark: [{ required: true, message: '请填写备注', trigger: 'blur' }],
+         },
+})
+watchEffect(() => {
+  formPanelProps.title = status.value === 'add' ? '新建采购记录' : '修改采购记录信息'
+})
+defineExpose({
+  open(data?: PurchaseRecordTypes.SearchPurchaseRecordResult) {
+    formPanelIns.value?.open(data?.id)
+  },
+})
+
+</script>
+
+<style lang="stylus" scoped>
+.form-items {
+  grid-template-columns: 1fr 1fr;
+
+  :deep(.full-width) {
+    grid-column: 1 / -1;
+  }
+
+  :deep(.el-input__inner) {
+    text-align: left;
+  }
+}
+</style>
diff --git a/src/pages/wh/purchase-record/page.ts b/src/pages/wh/purchase-record/page.ts
new file mode 100644
index 0000000..e35a0b4
--- /dev/null
+++ b/src/pages/wh/purchase-record/page.ts
@@ -0,0 +1,3 @@
+export default {
+  component: () => import('@/pages/wh/purchase-record/PurchaseRecord.vue'),
+} as RouterTypes.RouteConfig
\ No newline at end of file
diff --git a/src/pages/wh/purchase-record/purchase-record-api.ts b/src/pages/wh/purchase-record/purchase-record-api.ts
new file mode 100644
index 0000000..908656a
--- /dev/null
+++ b/src/pages/wh/purchase-record/purchase-record-api.ts
@@ -0,0 +1,22 @@
+import {
+  get,
+  post
+} from '@/common/utils/http-util.ts'
+
+export default {
+  paging(data: PurchaseRecordTypes.SearchPurchaseRecordParam) {
+    return get<G.PageResult<PurchaseRecordTypes.SearchPurchaseRecordResult>>('/purchase_record/paging', data)
+  },
+  detail(id: string) {
+    return get<PurchaseRecordTypes.SearchPurchaseRecordResult>('/purchase_record/detail', {id})
+  },
+  add(data: PurchaseRecordTypes.AddPurchaseRecordParam) {
+    return post('/purchase_record/add', data)
+  },
+  modify(data: PurchaseRecordTypes.ModifyPurchaseRecordParam) {
+    return post('/purchase_record/modify', data)
+  },
+  del(ids: string[]) {
+    return post('/purchase_record/del', ids)
+  },
+}
diff --git a/src/pages/wh/purchase-record/purchase-record.d.ts b/src/pages/wh/purchase-record/purchase-record.d.ts
new file mode 100644
index 0000000..8fc9fd5
--- /dev/null
+++ b/src/pages/wh/purchase-record/purchase-record.d.ts
@@ -0,0 +1,149 @@
+export {}
+
+declare global {
+  namespace PurchaseRecordTypes {
+    interface SearchPurchaseRecordParam extends G.PageParam {
+      // Id
+      id?: string
+      // 采购单号
+      sn?: string
+      // 经办人Id
+      handlerId?: string
+      supplierName?: string
+      // 商品名称
+      productName?: string
+      // 规格
+      spec?: string
+      // 数量
+      quantity?: string
+      // 单位
+      unit?: string
+      // 单价
+      unitPrice?: string
+      // 总金额
+      totalAmount?: string
+      // 采购日期
+      purchaseDate?: string
+      // 备注
+      remark?: string
+      // 创建人 Id；sys_user.id
+      creatorId?: string
+      // 修改人 Id；sys_user.id
+      modifierId?: string
+      // 创建时间
+      createTime?: string
+      // 修改时间
+      modifyTime?: string
+      // 是否删除； 0-->未删除、1-->已删除
+      deleted?: boolean
+    }
+
+    interface SearchPurchaseRecordResult {
+      // Id
+      id?: string
+      // 采购单号
+      sn?: string
+      // 经办人Id
+      handlerId?: string
+      supplierName?: string
+      // 商品名称
+      productName?: string
+      // 规格
+      spec?: string
+      // 数量
+      quantity?: string
+      // 单位
+      unit?: string
+      // 单价
+      unitPrice?: string
+      // 总金额
+      totalAmount?: string
+      // 采购日期
+      purchaseDate?: string
+      // 备注
+      remark?: string
+      // 创建人 Id；sys_user.id
+      creatorId?: string
+      // 修改人 Id；sys_user.id
+      modifierId?: string
+      // 创建时间
+      createTime?: string
+      // 修改时间
+      modifyTime?: string
+      // 是否删除； 0-->未删除、1-->已删除
+      deleted?: boolean
+    }
+
+    interface AddPurchaseRecordParam {
+      // Id
+      id?: string
+      // 采购单号
+      sn?: string
+      // 经办人Id
+      handlerId?: string
+      supplierName?: string
+      // 商品名称
+      productName?: string
+      // 规格
+      spec?: string
+      // 数量
+      quantity?: string
+      // 单位
+      unit?: string
+      // 单价
+      unitPrice?: string
+      // 总金额
+      totalAmount?: string
+      // 采购日期
+      purchaseDate?: string
+      // 备注
+      remark?: string
+      // 创建人 Id；sys_user.id
+      creatorId?: string
+      // 修改人 Id；sys_user.id
+      modifierId?: string
+      // 创建时间
+      createTime?: string
+      // 修改时间
+      modifyTime?: string
+      // 是否删除； 0-->未删除、1-->已删除
+      deleted?: boolean
+    }
+
+    interface ModifyPurchaseRecordParam {
+      // Id
+      id?: string
+      // 采购单号
+      sn?: string
+      // 经办人Id
+      handlerId?: string
+      supplierName?: string
+      // 商品名称
+      productName?: string
+      // 规格
+      spec?: string
+      // 数量
+      quantity?: string
+      // 单位
+      unit?: string
+      // 单价
+      unitPrice?: string
+      // 总金额
+      totalAmount?: string
+      // 采购日期
+      purchaseDate?: string
+      // 备注
+      remark?: string
+      // 创建人 Id；sys_user.id
+      creatorId?: string
+      // 修改人 Id；sys_user.id
+      modifierId?: string
+      // 创建时间
+      createTime?: string
+      // 修改时间
+      modifyTime?: string
+      // 是否删除； 0-->未删除、1-->已删除
+      deleted?: boolean
+    }
+  }
+}