From 0b476486503e9ee5369696ca5d358c43bedf6da3 Mon Sep 17 00:00:00 2001
From: nehc <934298133@qq.com>
Date: Tue, 22 Jul 2025 19:11:10 +0800
Subject: [PATCH 01/11] =?UTF-8?q?feat(@vben/web-antd):=20erp-=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E9=87=87=E8=B4=AD=E8=AE=A2=E5=8D=95=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增采购订单列表页面
- 添加采购订单表单和子表单组件
- 实现采购订单的查询、创建、编辑和删除功能
- 优化采购订单的审批和反审批操作- 增加采购订单的导出功能
---
 .../src/api/erp/purchase/order/index.ts       |  76 +++-
 .../web-antd/src/api/erp/stock/stock/index.ts |   9 +
 .../order/components/PurchaseOrderForm.vue    | 338 +++++++++++++++
 .../components/PurchaseOrderItemForm.vue      | 386 ++++++++++++++++++
 .../src/views/erp/purchase/order/data.ts      | 209 ++++++++++
 .../src/views/erp/purchase/order/index.vue    | 253 +++++++++++-
 6 files changed, 1233 insertions(+), 38 deletions(-)
 create mode 100644 apps/web-antd/src/views/erp/purchase/order/components/PurchaseOrderForm.vue
 create mode 100644 apps/web-antd/src/views/erp/purchase/order/components/PurchaseOrderItemForm.vue
 create mode 100644 apps/web-antd/src/views/erp/purchase/order/data.ts

diff --git a/apps/web-antd/src/api/erp/purchase/order/index.ts b/apps/web-antd/src/api/erp/purchase/order/index.ts
index 69c9a551..58193131 100644
--- a/apps/web-antd/src/api/erp/purchase/order/index.ts
+++ b/apps/web-antd/src/api/erp/purchase/order/index.ts
@@ -2,34 +2,71 @@ import type { PageParam, PageResult } from '@vben/request';
 
 import { requestClient } from '#/api/request';
 
-export namespace ErpPurchaseOrderApi {
+export namespace PurchaseOrderApi {
+  /** 采购订单产品信息 */
+  export interface PurchaseOrderItem {
+    id?: number;
+    productId?: number;
+    productName?: string;
+    productBarCode?: string;
+    productUnitId?: number;
+    productUnitName?: string;
+    productPrice?: number;
+    count?: number;
+    totalPrice?: number;
+    taxPercent?: number;
+    taxPrice?: number;
+    totalTaxPrice?: number;
+    remark?: string;
+    stockCount?: number;
+  }
+
   /** ERP 采购订单信息 */
   export interface PurchaseOrder {
-    id?: number; // 订单工单编号
-    no: string; // 采购订单号
-    supplierId: number; // 供应商编号
-    orderTime: Date; // 订单时间
-    totalCount: number; // 合计数量
-    totalPrice: number; // 合计金额，单位：元
-    status: number; // 状态
-    remark: string; // 备注
-    inCount: number; // 采购入库数量
-    returnCount: number; // 采购退货数量
+    id?: number;
+    no?: string;
+    supplierId?: number;
+    supplierName?: string;
+    orderTime?: Date | string;
+    totalCount?: number;
+    totalPrice?: number;
+    totalProductPrice?: number;
+    discountPercent?: number;
+    discountPrice?: number;
+    depositPrice?: number;
+    accountId?: number;
+    status?: number;
+    remark?: string;
+    fileUrl?: string;
+    inCount?: number;
+    returnCount?: number;
+    inStatus?: number;
+    returnStatus?: number;
+    productNames?: string;
+    creatorName?: string;
+    createTime?: Date;
+    items?: PurchaseOrderItem[];
   }
 
   /** 采购订单分页查询参数 */
   export interface PurchaseOrderPageParam extends PageParam {
     no?: string;
     supplierId?: number;
+    productId?: number;
+    orderTime?: string[];
     status?: number;
+    remark?: string;
+    creator?: string;
+    inStatus?: number;
+    returnStatus?: number;
   }
 }
 
 /** 查询采购订单分页 */
 export function getPurchaseOrderPage(
-  params: ErpPurchaseOrderApi.PurchaseOrderPageParam,
+  params: PurchaseOrderApi.PurchaseOrderPageParam,
 ) {
-  return requestClient.get<PageResult<ErpPurchaseOrderApi.PurchaseOrder>>(
+  return requestClient.get<PageResult<PurchaseOrderApi.PurchaseOrder>>(
     '/erp/purchase-order/page',
     { params },
   );
@@ -37,18 +74,18 @@ export function getPurchaseOrderPage(
 
 /** 查询采购订单详情 */
 export function getPurchaseOrder(id: number) {
-  return requestClient.get<ErpPurchaseOrderApi.PurchaseOrder>(
+  return requestClient.get<PurchaseOrderApi.PurchaseOrder>(
     `/erp/purchase-order/get?id=${id}`,
   );
 }
 
 /** 新增采购订单 */
-export function createPurchaseOrder(data: ErpPurchaseOrderApi.PurchaseOrder) {
+export function createPurchaseOrder(data: PurchaseOrderApi.PurchaseOrder) {
   return requestClient.post('/erp/purchase-order/create', data);
 }
 
 /** 修改采购订单 */
-export function updatePurchaseOrder(data: ErpPurchaseOrderApi.PurchaseOrder) {
+export function updatePurchaseOrder(data: PurchaseOrderApi.PurchaseOrder) {
   return requestClient.put('/erp/purchase-order/update', data);
 }
 
@@ -60,7 +97,12 @@ export function updatePurchaseOrderStatus(id: number, status: number) {
 }
 
 /** 删除采购订单 */
-export function deletePurchaseOrder(ids: number[]) {
+export function deletePurchaseOrder(id: number) {
+  return requestClient.delete(`/erp/purchase-order/delete?id=${id}`);
+}
+
+/** 批量删除采购订单 */
+export function deletePurchaseOrderList(ids: number[]) {
   return requestClient.delete('/erp/purchase-order/delete', {
     params: { ids: ids.join(',') },
   });
diff --git a/apps/web-antd/src/api/erp/stock/stock/index.ts b/apps/web-antd/src/api/erp/stock/stock/index.ts
index 57d4ec22..2d33726a 100644
--- a/apps/web-antd/src/api/erp/stock/stock/index.ts
+++ b/apps/web-antd/src/api/erp/stock/stock/index.ts
@@ -60,6 +60,15 @@ export function getStockCount(productId: number) {
   });
 }
 
+/**
+ * 根据产品ID获得库存数量
+ */
+export function getStockCountByProductId(productId: number) {
+  return requestClient.get<number>('/erp/stock/get-count', {
+    params: { productId },
+  });
+}
+
 /**
  * 导出产品库存 Excel
  */
diff --git a/apps/web-antd/src/views/erp/purchase/order/components/PurchaseOrderForm.vue b/apps/web-antd/src/views/erp/purchase/order/components/PurchaseOrderForm.vue
new file mode 100644
index 00000000..381af577
--- /dev/null
+++ b/apps/web-antd/src/views/erp/purchase/order/components/PurchaseOrderForm.vue
@@ -0,0 +1,338 @@
+<script lang="ts" setup>
+import type { PurchaseOrderApi } from '#/api/erp/purchase/order';
+
+import { computed, nextTick, reactive, ref, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import {
+  erpPriceInputFormatter,
+  erpPriceMultiply,
+  formatDateTime,
+} from '@vben/utils';
+
+import {
+  Button,
+  Col,
+  DatePicker,
+  Form,
+  Input,
+  InputNumber,
+  message,
+  Row,
+  Select,
+  Textarea,
+} from 'ant-design-vue';
+
+import { getAccountSimpleList } from '#/api/erp/finance/account';
+import {
+  createPurchaseOrder,
+  getPurchaseOrder,
+  updatePurchaseOrder,
+} from '#/api/erp/purchase/order';
+import { getSupplierSimpleList } from '#/api/erp/purchase/supplier';
+import { getSimpleUserList } from '#/api/system/user';
+
+import PurchaseOrderItemForm from './PurchaseOrderItemForm.vue';
+
+interface Props {
+  type: string;
+  id?: number;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+  success: [];
+}>();
+
+const [Modal, modalApi] = useVbenModal({
+  title: computed(() => {
+    if (props.type === 'create') return '添加采购订单';
+    if (props.type === 'update') return '编辑采购订单';
+    return '采购订单详情';
+  }),
+  width: '80%',
+});
+
+const formLoading = ref(false);
+const formType = ref('');
+const formData = ref<PurchaseOrderApi.PurchaseOrder>({
+  id: undefined,
+  no: undefined,
+  supplierId: undefined,
+  orderTime: undefined,
+  remark: undefined,
+  fileUrl: undefined,
+  discountPercent: 0,
+  discountPrice: 0,
+  totalPrice: 0,
+  accountId: undefined,
+  depositPrice: 0,
+  status: 10,
+  items: [],
+});
+
+const formRules = reactive({
+  supplierId: [{ required: true, message: '供应商不能为空', trigger: 'blur' }],
+  orderTime: [{ required: true, message: '订单时间不能为空', trigger: 'blur' }],
+});
+
+const formRef = ref();
+const supplierList = ref<any[]>([]);
+const userList = ref<any[]>([]);
+const accountList = ref<any[]>([]);
+const itemFormRef = ref();
+
+/** 计算 discountPrice、totalPrice 价格 */
+watch(
+  () => [formData.value.items, formData.value.discountPercent],
+  () => {
+    if (!formData.value.items) {
+      return;
+    }
+    // 计算 discountPrice 价格
+    let totalPrice = 0;
+    formData.value.items.forEach((item) => {
+      totalPrice += item.totalPrice || 0;
+    });
+    formData.value.discountPrice = erpPriceMultiply(
+      totalPrice,
+      formData.value.discountPercent / 100,
+    );
+    formData.value.totalPrice = totalPrice - formData.value.discountPrice;
+  },
+  { deep: true },
+);
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  modalApi.open();
+  resetForm();
+  formType.value = type;
+  formData.value.id = id;
+  formLoading.value = true;
+  try {
+    // 加载供应商、用户、账户列表
+    supplierList.value = await getSupplierSimpleList();
+    userList.value = await getSimpleUserList();
+    accountList.value = await getAccountSimpleList();
+    // 修改时，设置数据
+    if (id) {
+      const res = await getPurchaseOrder(id);
+      formData.value = res;
+      formData.value.orderTime = formatDateTime(formData.value.orderTime);
+    }
+  } finally {
+    formLoading.value = false;
+  }
+  // 加载产品列表
+  await nextTick();
+  itemFormRef.value?.init(formData.value.items || []);
+};
+
+/** 提交表单 */
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value?.validate();
+  await itemFormRef.value?.validate();
+  formLoading.value = true;
+  try {
+    const data = formData.value as any;
+    data.items = itemFormRef.value?.getData();
+    if (formType.value === 'create') {
+      await createPurchaseOrder(data);
+      message.success('新增成功');
+    } else {
+      await updatePurchaseOrder(data);
+      message.success('更新成功');
+    }
+    modalApi.close();
+    emit('success');
+  } finally {
+    formLoading.value = false;
+  }
+};
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    no: undefined,
+    supplierId: undefined,
+    orderTime: undefined,
+    remark: undefined,
+    fileUrl: undefined,
+    discountPercent: 0,
+    discountPrice: 0,
+    totalPrice: 0,
+    accountId: undefined,
+    depositPrice: 0,
+    status: 10,
+    items: [],
+  };
+  formRef.value?.resetFields();
+};
+
+defineExpose({ open });
+</script>
+
+<template>
+  <Modal>
+    <Form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      :label-col="{ span: 4 }"
+      :wrapper-col="{ span: 20 }"
+      label-align="left"
+    >
+      <Row :gutter="16">
+        <Col :span="12">
+          <Form.Item label="供应商" name="supplierId">
+            <Select
+              v-model:value="formData.supplierId"
+              placeholder="请选择供应商"
+              allow-clear
+              show-search
+              :disabled="formType === 'detail'"
+            >
+              <Select.Option
+                v-for="item in supplierList"
+                :key="item.id"
+                :value="item.id"
+              >
+                {{ item.name }}
+              </Select.Option>
+            </Select>
+          </Form.Item>
+        </Col>
+        <Col :span="12">
+          <Form.Item label="订单时间" name="orderTime">
+            <DatePicker
+              v-model:value="formData.orderTime"
+              type="datetime"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择订单时间"
+              :disabled="formType === 'detail'"
+              class="w-full"
+            />
+          </Form.Item>
+        </Col>
+      </Row>
+      <Row :gutter="16">
+        <Col :span="12">
+          <Form.Item label="备注" name="remark">
+            <Textarea
+              v-model:value="formData.remark"
+              placeholder="请输入备注"
+              :disabled="formType === 'detail'"
+            />
+          </Form.Item>
+        </Col>
+        <Col :span="12">
+          <Form.Item label="附件" name="fileUrl">
+            <Input
+              v-model:value="formData.fileUrl"
+              placeholder="请输入附件地址"
+              :disabled="formType === 'detail'"
+            />
+          </Form.Item>
+        </Col>
+      </Row>
+    </Form>
+
+    <!-- 子表的表单 -->
+    <PurchaseOrderItemForm
+      ref="itemFormRef"
+      :items="formData.items"
+      :disabled="formType === 'detail'"
+    />
+
+    <Form
+      :model="formData"
+      :label-col="{ span: 4 }"
+      :wrapper-col="{ span: 20 }"
+      label-align="left"
+    >
+      <Row :gutter="16">
+        <Col :span="12">
+          <Form.Item label="优惠率(%)">
+            <InputNumber
+              v-model:value="formData.discountPercent"
+              :formatter="erpPriceInputFormatter"
+              placeholder="请输入优惠率"
+              :disabled="formType === 'detail'"
+              class="w-full"
+            />
+          </Form.Item>
+        </Col>
+        <Col :span="12">
+          <Form.Item label="付款优惠">
+            <InputNumber
+              v-model:value="formData.discountPrice"
+              :formatter="erpPriceInputFormatter"
+              placeholder="请输入付款优惠"
+              :disabled="true"
+              class="w-full"
+            />
+          </Form.Item>
+        </Col>
+      </Row>
+      <Row :gutter="16">
+        <Col :span="12">
+          <Form.Item label="优惠后金额">
+            <InputNumber
+              v-model:value="formData.totalPrice"
+              :formatter="erpPriceInputFormatter"
+              placeholder="请输入优惠后金额"
+              :disabled="true"
+              class="w-full"
+            />
+          </Form.Item>
+        </Col>
+        <Col :span="12">
+          <Form.Item label="结算账户">
+            <Select
+              v-model:value="formData.accountId"
+              placeholder="请选择结算账户"
+              allow-clear
+              :disabled="formType === 'detail'"
+            >
+              <Select.Option
+                v-for="item in accountList"
+                :key="item.id"
+                :value="item.id"
+              >
+                {{ item.name }}
+              </Select.Option>
+            </Select>
+          </Form.Item>
+        </Col>
+      </Row>
+      <Row :gutter="16">
+        <Col :span="12">
+          <Form.Item label="支付订金">
+            <InputNumber
+              v-model:value="formData.depositPrice"
+              :formatter="erpPriceInputFormatter"
+              placeholder="请输入支付订金"
+              :disabled="formType === 'detail'"
+              class="w-full"
+            />
+          </Form.Item>
+        </Col>
+      </Row>
+    </Form>
+
+    <template #footer>
+      <Button @click="modalApi.close()">取消</Button>
+      <Button
+        v-if="formType !== 'detail'"
+        :loading="formLoading"
+        type="primary"
+        @click="submitForm"
+      >
+        确定
+      </Button>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/erp/purchase/order/components/PurchaseOrderItemForm.vue b/apps/web-antd/src/views/erp/purchase/order/components/PurchaseOrderItemForm.vue
new file mode 100644
index 00000000..8ef59568
--- /dev/null
+++ b/apps/web-antd/src/views/erp/purchase/order/components/PurchaseOrderItemForm.vue
@@ -0,0 +1,386 @@
+<script lang="ts" setup>
+import type { PurchaseOrderApi } from '#/api/erp/purchase/order';
+
+import { onMounted, ref, watch } from 'vue';
+
+import {
+  erpCountInputFormatter,
+  erpPriceInputFormatter,
+  erpPriceMultiply,
+} from '@vben/utils';
+
+import { Button, InputNumber, Select, Table, Textarea } from 'ant-design-vue';
+
+import { getProductSimpleList } from '#/api/erp/product/product';
+import { getStockCountByProductId } from '#/api/erp/stock/stock';
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  disabled: false,
+});
+
+// 计算数组总和的工具函数
+const getSumValue = (values: (number | undefined)[]): number => {
+  return values.reduce((sum, value) => sum + (value || 0), 0);
+};
+
+interface Props {
+  items?: PurchaseOrderApi.PurchaseOrderItem[];
+  disabled?: boolean;
+}
+
+const formData = ref<PurchaseOrderApi.PurchaseOrderItem[]>([]);
+const productList = ref<any[]>([]);
+
+/** 监听 props.items 变化，重新设置 formData */
+watch(
+  () => props.items,
+  (val) => {
+    formData.value = val || [];
+  },
+  { immediate: true },
+);
+
+/** 监听 formData 变化，计算相关价格 */
+watch(
+  formData,
+  (val) => {
+    if (!val) return;
+    val.forEach((item) => {
+      if (item.productPrice && item.count) {
+        item.totalPrice = erpPriceMultiply(item.productPrice, item.count);
+        item.taxPrice = erpPriceMultiply(
+          item.totalPrice,
+          (item.taxPercent || 0) / 100,
+        );
+        item.totalTaxPrice = item.totalPrice + item.taxPrice;
+      }
+    });
+  },
+  { deep: true },
+);
+
+/** 表格列定义 */
+const columns = [
+  {
+    title: '产品名称',
+    dataIndex: 'productId',
+    key: 'productId',
+    width: 200,
+  },
+  {
+    title: '库存',
+    dataIndex: 'stockCount',
+    key: 'stockCount',
+    width: 80,
+  },
+  {
+    title: '条码',
+    dataIndex: 'productBarCode',
+    key: 'productBarCode',
+    width: 120,
+  },
+  {
+    title: '单位',
+    dataIndex: 'productUnitName',
+    key: 'productUnitName',
+    width: 80,
+  },
+  {
+    title: '数量',
+    dataIndex: 'count',
+    key: 'count',
+    width: 120,
+  },
+  {
+    title: '产品单价',
+    dataIndex: 'productPrice',
+    key: 'productPrice',
+    width: 120,
+  },
+  {
+    title: '金额',
+    dataIndex: 'totalPrice',
+    key: 'totalPrice',
+    width: 120,
+  },
+  {
+    title: '税率(%)',
+    dataIndex: 'taxPercent',
+    key: 'taxPercent',
+    width: 100,
+  },
+  {
+    title: '税额',
+    dataIndex: 'taxPrice',
+    key: 'taxPrice',
+    width: 120,
+  },
+  {
+    title: '税额合计',
+    dataIndex: 'totalTaxPrice',
+    key: 'totalTaxPrice',
+    width: 120,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    key: 'remark',
+    width: 150,
+  },
+  {
+    title: '操作',
+    key: 'operation',
+    width: 80,
+  },
+];
+
+/** 合计行 */
+const getSummaries = () => {
+  const sums: any = {};
+  sums.productId = '合计';
+  sums.count = getSumValue(formData.value.map((item) => item.count));
+  sums.totalPrice = getSumValue(formData.value.map((item) => item.totalPrice));
+  sums.taxPrice = getSumValue(formData.value.map((item) => item.taxPrice));
+  sums.totalTaxPrice = getSumValue(
+    formData.value.map((item) => item.totalTaxPrice),
+  );
+  return sums;
+};
+
+/** 新增行 */
+const handleAdd = () => {
+  const row = {
+    id: undefined,
+    productId: undefined,
+    productUnitId: undefined,
+    productPrice: undefined,
+    count: 1,
+    totalPrice: undefined,
+    taxPercent: 0,
+    taxPrice: 0,
+    totalTaxPrice: 0,
+    remark: undefined,
+    // 显示字段
+    productName: undefined,
+    productBarCode: undefined,
+    productUnitName: undefined,
+    stockCount: 0,
+  };
+  formData.value.push(row);
+};
+
+/** 删除行 */
+const handleDelete = (index: number) => {
+  formData.value.splice(index, 1);
+};
+
+/** 产品变更 */
+const onChangeProduct = async (productId: number, index: number) => {
+  // 获得产品
+  const product = productList.value.find((item) => item.id === productId);
+  if (!product) {
+    return;
+  }
+  // 设置产品信息
+  formData.value[index].productUnitId = product.unitId;
+  formData.value[index].productBarCode = product.barCode;
+  formData.value[index].productUnitName = product.unitName;
+  formData.value[index].productPrice = product.purchasePrice;
+  // 加载库存
+  await setStockCount(index);
+};
+
+/** 设置库存 */
+const setStockCount = async (index: number) => {
+  const row = formData.value[index];
+  if (!row.productId) {
+    row.stockCount = 0;
+    return;
+  }
+  const stockCount = await getStockCountByProductId(row.productId);
+  row.stockCount = stockCount || 0;
+};
+
+/** 表单校验 */
+const validate = async () => {
+  // 校验表单
+  for (let i = 0; i < formData.value.length; i++) {
+    const item = formData.value[i];
+    if (!item.productId) {
+      throw new Error(`第 ${i + 1} 行：产品不能为空`);
+    }
+    if (!item.count || item.count <= 0) {
+      throw new Error(`第 ${i + 1} 行：产品数量不能为空`);
+    }
+    if (!item.productPrice || item.productPrice <= 0) {
+      throw new Error(`第 ${i + 1} 行：产品单价不能为空`);
+    }
+  }
+};
+
+/** 获取表单数据 */
+const getData = () => {
+  return formData.value;
+};
+
+/** 初始化 */
+const init = (items: PurchaseOrderApi.PurchaseOrderItem[]) => {
+  formData.value = items || [];
+  // 如果没有数据，默认添加一行
+  if (formData.value.length === 0) {
+    handleAdd();
+  }
+};
+
+/** 组件挂载时 */
+onMounted(async () => {
+  // 加载产品列表
+  productList.value = await getProductSimpleList();
+  // 默认添加一行
+  if (formData.value.length === 0) {
+    handleAdd();
+  }
+});
+
+defineExpose({ validate, getData, init });
+</script>
+
+<template>
+  <div>
+    <div class="mb-4">
+      <Button v-if="!disabled" type="primary" @click="handleAdd" class="mb-2">
+        添加产品
+      </Button>
+    </div>
+
+    <Table
+      :columns="columns"
+      :data-source="formData"
+      :pagination="false"
+      bordered
+      size="small"
+      :scroll="{ x: 1400 }"
+    >
+      <template #bodyCell="{ column, record, index }">
+        <template v-if="column.dataIndex === 'productId'">
+          <Select
+            v-model:value="record.productId"
+            placeholder="请选择产品"
+            allow-clear
+            show-search
+            :disabled="disabled"
+            @change="onChangeProduct($event, index)"
+            class="w-full"
+          >
+            <Select.Option
+              v-for="item in productList"
+              :key="item.id"
+              :value="item.id"
+            >
+              {{ item.name }}
+            </Select.Option>
+          </Select>
+        </template>
+        <template v-else-if="column.dataIndex === 'stockCount'">
+          <span>{{ record.stockCount || 0 }}</span>
+        </template>
+        <template v-else-if="column.dataIndex === 'productBarCode'">
+          <span>{{ record.productBarCode }}</span>
+        </template>
+        <template v-else-if="column.dataIndex === 'productUnitName'">
+          <span>{{ record.productUnitName }}</span>
+        </template>
+        <template v-else-if="column.dataIndex === 'count'">
+          <InputNumber
+            v-model:value="record.count"
+            :formatter="erpCountInputFormatter"
+            placeholder="请输入数量"
+            :disabled="disabled"
+            :min="1"
+            class="w-full"
+          />
+        </template>
+        <template v-else-if="column.dataIndex === 'productPrice'">
+          <InputNumber
+            v-model:value="record.productPrice"
+            :formatter="erpPriceInputFormatter"
+            placeholder="请输入单价"
+            :disabled="disabled"
+            :min="0"
+            class="w-full"
+          />
+        </template>
+        <template v-else-if="column.dataIndex === 'totalPrice'">
+          <InputNumber
+            v-model:value="record.totalPrice"
+            :formatter="erpPriceInputFormatter"
+            placeholder="金额"
+            :disabled="true"
+            class="w-full"
+          />
+        </template>
+        <template v-else-if="column.dataIndex === 'taxPercent'">
+          <InputNumber
+            v-model:value="record.taxPercent"
+            placeholder="请输入税率"
+            :disabled="disabled"
+            :min="0"
+            :max="100"
+            class="w-full"
+          />
+        </template>
+        <template v-else-if="column.dataIndex === 'taxPrice'">
+          <InputNumber
+            v-model:value="record.taxPrice"
+            :formatter="erpPriceInputFormatter"
+            placeholder="税额"
+            :disabled="true"
+            class="w-full"
+          />
+        </template>
+        <template v-else-if="column.dataIndex === 'totalTaxPrice'">
+          <InputNumber
+            v-model:value="record.totalTaxPrice"
+            :formatter="erpPriceInputFormatter"
+            placeholder="税额合计"
+            :disabled="true"
+            class="w-full"
+          />
+        </template>
+        <template v-else-if="column.dataIndex === 'remark'">
+          <Textarea
+            v-model:value="record.remark"
+            placeholder="请输入备注"
+            :disabled="disabled"
+            :rows="1"
+          />
+        </template>
+        <template v-else-if="column.key === 'operation'">
+          <Button
+            v-if="!disabled"
+            type="link"
+            danger
+            size="small"
+            @click="handleDelete(index)"
+          >
+            删除
+          </Button>
+        </template>
+      </template>
+    </Table>
+
+    <!-- 合计行 -->
+    <div class="mt-2 border bg-gray-50 p-2">
+      <div class="flex justify-between text-sm">
+        <span class="font-medium">合计：</span>
+        <div class="flex space-x-4">
+          <span>数量：{{ getSummaries().count }}</span>
+          <span>金额：{{ getSummaries().totalPrice }}</span>
+          <span>税额：{{ getSummaries().taxPrice }}</span>
+          <span>税额合计：{{ getSummaries().totalTaxPrice }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/erp/purchase/order/data.ts b/apps/web-antd/src/views/erp/purchase/order/data.ts
new file mode 100644
index 00000000..045c038e
--- /dev/null
+++ b/apps/web-antd/src/views/erp/purchase/order/data.ts
@@ -0,0 +1,209 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+
+import { getProductSimpleList } from '#/api/erp/product/product';
+import { getSupplierSimpleList } from '#/api/erp/purchase/supplier';
+import { getSimpleUserList } from '#/api/system/user';
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'no',
+      label: '订单单号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入订单单号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getProductSimpleList,
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+        placeholder: '请选择产品',
+        allowClear: true,
+        showSearch: true,
+      },
+    },
+    {
+      fieldName: 'orderTime',
+      label: '订单时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'supplierId',
+      label: '供应商',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSupplierSimpleList,
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+        placeholder: '请选择供应商',
+        allowClear: true,
+        showSearch: true,
+      },
+    },
+    {
+      fieldName: 'creator',
+      label: '创建人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
+        placeholder: '请选择创建人',
+        allowClear: true,
+        showSearch: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.ERP_AUDIT_STATUS, 'number'),
+        placeholder: '请选择状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入备注',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'inStatus',
+      label: '入库状态',
+      component: 'Select',
+      componentProps: {
+        options: [
+          { label: '未入库', value: 0 },
+          { label: '部分入库', value: 1 },
+          { label: '全部入库', value: 2 },
+        ],
+        placeholder: '请选择入库状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'returnStatus',
+      label: '退货状态',
+      component: 'Select',
+      componentProps: {
+        options: [
+          { label: '未退货', value: 0 },
+          { label: '部分退货', value: 1 },
+          { label: '全部退货', value: 2 },
+        ],
+        placeholder: '请选择退货状态',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns(): VxeGridPropTypes.Columns {
+  return [
+    {
+      type: 'checkbox',
+      width: 60,
+      fixed: 'left',
+    },
+    {
+      field: 'no',
+      title: '订单单号',
+      fixed: 'left',
+      minWidth: 180,
+    },
+    {
+      field: 'productNames',
+      title: '产品信息',
+      minWidth: 200,
+    },
+    {
+      field: 'supplierName',
+      title: '供应商',
+      minWidth: 120,
+    },
+    {
+      field: 'orderTime',
+      title: '订单时间',
+      formatter: 'formatDateTime',
+      minWidth: 160,
+    },
+    {
+      field: 'creatorName',
+      title: '创建人',
+      minWidth: 100,
+    },
+    {
+      field: 'totalCount',
+      title: '总数量',
+      minWidth: 100,
+    },
+    {
+      field: 'inCount',
+      title: '入库数量',
+      minWidth: 100,
+    },
+    {
+      field: 'returnCount',
+      title: '退货数量',
+      minWidth: 100,
+    },
+    {
+      field: 'totalProductPrice',
+      title: '金额合计',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'totalPrice',
+      title: '含税金额',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'depositPrice',
+      title: '支付订金',
+      formatter: 'formatAmount2',
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
+      },
+      minWidth: 100,
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/erp/purchase/order/index.vue b/apps/web-antd/src/views/erp/purchase/order/index.vue
index e7c22293..eecfc698 100644
--- a/apps/web-antd/src/views/erp/purchase/order/index.vue
+++ b/apps/web-antd/src/views/erp/purchase/order/index.vue
@@ -1,34 +1,245 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { PurchaseOrderApi } from '#/api/erp/purchase/order';
 
-import { Button } from 'ant-design-vue';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deletePurchaseOrderList,
+  exportPurchaseOrder,
+  getPurchaseOrderPage,
+  updatePurchaseOrderStatus,
+} from '#/api/erp/purchase/order';
+import { $t } from '#/locales';
+
+import PurchaseOrderForm from './components/PurchaseOrderForm.vue';
+import { useGridColumns, useGridFormSchema } from './data';
+
+/** ERP 采购订单列表 */
+defineOptions({ name: 'ErpPurchaseOrder' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: PurchaseOrderForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+const { push } = useRouter();
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: PurchaseOrderApi.PurchaseOrder[];
+}) {
+  checkedIds.value = records.map((item) => item.id);
+}
+
+/** 详情 */
+function handleDetail(row: PurchaseOrderApi.PurchaseOrder) {
+  push({ name: 'ErpPurchaseOrderDetail', params: { id: row.id } });
+}
+
+/** 新增 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑 */
+function handleEdit(row: PurchaseOrderApi.PurchaseOrder) {
+  formModalApi.setData({ type: 'edit', id: row.id }).open();
+}
+
+/** 删除 */
+function handleDelete(row: PurchaseOrderApi.PurchaseOrder) {
+  handleBatchDelete([row.id]);
+}
+
+/** 批量删除 */
+async function handleBatchDelete() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await deletePurchaseOrderList(checkedIds.value);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess'),
+      key: 'action_process_msg',
+    });
+    onRefresh();
+  } catch {
+    // 处理错误
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 审批/反审批操作 */
+function handleUpdateStatus(
+  row: PurchaseOrderApi.PurchaseOrder,
+  status: number,
+) {
+  const hideLoading = message.loading({
+    content: `确定${status === 20 ? '审批' : '反审批'}该订单吗？`,
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  updatePurchaseOrderStatus(row.id, status)
+    .then(() => {
+      message.success({
+        content: `${status === 20 ? '审批' : '反审批'}成功`,
+        key: 'action_process_msg',
+      });
+      onRefresh();
+    })
+    .catch(() => {
+      // 处理错误
+    })
+    .finally(() => {
+      hideLoading();
+    });
+}
+
+/** 导出 */
+async function handleExport() {
+  try {
+    const formValues = gridApi.getFormData();
+    const data = await exportPurchaseOrder(formValues);
+    downloadFileFromBlobPart({ fileName: '采购订单.xls', source: data });
+  } catch {
+    // 处理错误
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getPurchaseOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<PurchaseOrderApi.PurchaseOrder>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
 </script>
 
 <template>
-  <Page>
+  <Page auto-content-height>
     <template #doc>
       <DocAlert
         title="【采购】采购订单、入库、退货"
         url="https://doc.iocoder.cn/erp/purchase/"
       />
     </template>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/purchase/order/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/purchase/order/index
-      代码，pull request 贡献给我们！
-    </Button>
+
+    <FormModal @success="onRefresh" />
+
+    <Grid table-title="采购订单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['采购订单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['erp:purchase-order:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['erp:purchase-order:export'],
+              onClick: handleExport,
+            },
+            {
+              label: '批量删除',
+              type: 'primary',
+              danger: true,
+              disabled: isEmpty(checkedIds),
+              icon: ACTION_ICON.DELETE,
+              auth: ['erp:purchase-order:delete'],
+              onClick: handleBatchDelete,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              auth: ['erp:purchase-order:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['erp:purchase-order:update'],
+              ifShow: () => row.status !== 20,
+              onClick: handleEdit.bind(null, row),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: row.status === 10 ? '审批' : '反审批',
+              type: 'link',
+              auth: ['erp:purchase-order:update-status'],
+              onClick: handleUpdateStatus.bind(
+                null,
+                row,
+                row.status === 10 ? 20 : 10,
+              ),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              color: 'error',
+              auth: ['erp:purchase-order:delete'],
+              onClick: handleDelete.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>

From 1cad71f3bf9a287143a46cd5470afe0f85eba8af Mon Sep 17 00:00:00 2001
From: nehc <934298133@qq.com>
Date: Wed, 23 Jul 2025 11:10:48 +0800
Subject: [PATCH 02/11] =?UTF-8?q?feat(@vben/web-antd):=20erp-=E5=8C=BA?=
 =?UTF-8?q?=E5=88=86=E9=87=87=E8=B4=AD=E5=AF=B9=E8=B1=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修改命名空间 PurchaseOrderApi 为 ErpPurchaseOrderApi
- 为接口属性添加注释，明确其含义和单位
- 更新相关视图和组件中的导入和使用
---
 .../src/api/erp/purchase/order/index.ts       | 89 ++++++++++---------
 .../order/components/PurchaseOrderForm.vue    |  4 +-
 .../components/PurchaseOrderItemForm.vue      |  8 +-
 .../src/views/erp/purchase/order/index.vue    | 14 +--
 4 files changed, 58 insertions(+), 57 deletions(-)

diff --git a/apps/web-antd/src/api/erp/purchase/order/index.ts b/apps/web-antd/src/api/erp/purchase/order/index.ts
index 58193131..247dd61b 100644
--- a/apps/web-antd/src/api/erp/purchase/order/index.ts
+++ b/apps/web-antd/src/api/erp/purchase/order/index.ts
@@ -2,50 +2,51 @@ import type { PageParam, PageResult } from '@vben/request';
 
 import { requestClient } from '#/api/request';
 
-export namespace PurchaseOrderApi {
-  /** 采购订单产品信息 */
+export namespace ErpPurchaseOrderApi {
+  /** ERP 采购订单项信息 */
   export interface PurchaseOrderItem {
-    id?: number;
-    productId?: number;
-    productName?: string;
-    productBarCode?: string;
-    productUnitId?: number;
-    productUnitName?: string;
-    productPrice?: number;
-    count?: number;
-    totalPrice?: number;
-    taxPercent?: number;
-    taxPrice?: number;
-    totalTaxPrice?: number;
-    remark?: string;
-    stockCount?: number;
+    id?: number; // 订单项编号
+    orderId?: number; // 采购订单编号
+    productId?: number; // 产品编号
+    productName?: string; // 产品名称
+    productBarCode?: string; // 产品条码
+    productUnitId?: number; // 产品单位编号
+    productUnitName?: string; // 产品单位名称
+    productPrice?: number; // 产品单价，单位：元
+    count?: number; // 数量
+    totalPrice?: number; // 总价，单位：元
+    taxPercent?: number; // 税率，百分比
+    taxPrice?: number; // 税额，单位：元
+    totalTaxPrice?: number; // 含税总价，单位：元
+    remark?: string; // 备注
+    stockCount?: number; // 库存数量（显示字段）
   }
 
   /** ERP 采购订单信息 */
   export interface PurchaseOrder {
-    id?: number;
-    no?: string;
-    supplierId?: number;
-    supplierName?: string;
-    orderTime?: Date | string;
-    totalCount?: number;
-    totalPrice?: number;
-    totalProductPrice?: number;
-    discountPercent?: number;
-    discountPrice?: number;
-    depositPrice?: number;
-    accountId?: number;
-    status?: number;
-    remark?: string;
-    fileUrl?: string;
-    inCount?: number;
-    returnCount?: number;
-    inStatus?: number;
-    returnStatus?: number;
-    productNames?: string;
-    creatorName?: string;
-    createTime?: Date;
-    items?: PurchaseOrderItem[];
+    id?: number; // 订单工单编号
+    no?: string; // 采购订单号
+    supplierId?: number; // 供应商编号
+    supplierName?: string; // 供应商名称
+    orderTime?: Date | string; // 订单时间
+    totalCount?: number; // 合计数量
+    totalPrice?: number; // 合计金额，单位：元
+    totalProductPrice?: number; // 产品金额，单位：元
+    discountPercent?: number; // 优惠率，百分比
+    discountPrice?: number; // 优惠金额，单位：元
+    depositPrice?: number; // 定金金额，单位：元
+    accountId?: number; // 结算账户编号
+    status?: number; // 状态
+    remark?: string; // 备注
+    fileUrl?: string; // 附件地址
+    inCount?: number; // 采购入库数量
+    returnCount?: number; // 采购退货数量
+    inStatus?: number; // 入库状态
+    returnStatus?: number; // 退货状态
+    productNames?: string; // 产品名称列表
+    creatorName?: string; // 创建人名称
+    createTime?: Date; // 创建时间
+    items?: PurchaseOrderItem[]; // 订单项列表
   }
 
   /** 采购订单分页查询参数 */
@@ -64,9 +65,9 @@ export namespace PurchaseOrderApi {
 
 /** 查询采购订单分页 */
 export function getPurchaseOrderPage(
-  params: PurchaseOrderApi.PurchaseOrderPageParam,
+  params: ErpPurchaseOrderApi.PurchaseOrderPageParam,
 ) {
-  return requestClient.get<PageResult<PurchaseOrderApi.PurchaseOrder>>(
+  return requestClient.get<PageResult<ErpPurchaseOrderApi.PurchaseOrder>>(
     '/erp/purchase-order/page',
     { params },
   );
@@ -74,18 +75,18 @@ export function getPurchaseOrderPage(
 
 /** 查询采购订单详情 */
 export function getPurchaseOrder(id: number) {
-  return requestClient.get<PurchaseOrderApi.PurchaseOrder>(
+  return requestClient.get<ErpPurchaseOrderApi.PurchaseOrder>(
     `/erp/purchase-order/get?id=${id}`,
   );
 }
 
 /** 新增采购订单 */
-export function createPurchaseOrder(data: PurchaseOrderApi.PurchaseOrder) {
+export function createPurchaseOrder(data: ErpPurchaseOrderApi.PurchaseOrder) {
   return requestClient.post('/erp/purchase-order/create', data);
 }
 
 /** 修改采购订单 */
-export function updatePurchaseOrder(data: PurchaseOrderApi.PurchaseOrder) {
+export function updatePurchaseOrder(data: ErpPurchaseOrderApi.PurchaseOrder) {
   return requestClient.put('/erp/purchase-order/update', data);
 }
 
diff --git a/apps/web-antd/src/views/erp/purchase/order/components/PurchaseOrderForm.vue b/apps/web-antd/src/views/erp/purchase/order/components/PurchaseOrderForm.vue
index 381af577..2c7d8635 100644
--- a/apps/web-antd/src/views/erp/purchase/order/components/PurchaseOrderForm.vue
+++ b/apps/web-antd/src/views/erp/purchase/order/components/PurchaseOrderForm.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { PurchaseOrderApi } from '#/api/erp/purchase/order';
+import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
 
 import { computed, nextTick, reactive, ref, watch } from 'vue';
 
@@ -55,7 +55,7 @@ const [Modal, modalApi] = useVbenModal({
 
 const formLoading = ref(false);
 const formType = ref('');
-const formData = ref<PurchaseOrderApi.PurchaseOrder>({
+const formData = ref<ErpPurchaseOrderApi.PurchaseOrder>({
   id: undefined,
   no: undefined,
   supplierId: undefined,
diff --git a/apps/web-antd/src/views/erp/purchase/order/components/PurchaseOrderItemForm.vue b/apps/web-antd/src/views/erp/purchase/order/components/PurchaseOrderItemForm.vue
index 8ef59568..e89ada9c 100644
--- a/apps/web-antd/src/views/erp/purchase/order/components/PurchaseOrderItemForm.vue
+++ b/apps/web-antd/src/views/erp/purchase/order/components/PurchaseOrderItemForm.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { PurchaseOrderApi } from '#/api/erp/purchase/order';
+import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
 
 import { onMounted, ref, watch } from 'vue';
 
@@ -25,11 +25,11 @@ const getSumValue = (values: (number | undefined)[]): number => {
 };
 
 interface Props {
-  items?: PurchaseOrderApi.PurchaseOrderItem[];
+  items?: ErpPurchaseOrderApi.PurchaseOrderItem[];
   disabled?: boolean;
 }
 
-const formData = ref<PurchaseOrderApi.PurchaseOrderItem[]>([]);
+const formData = ref<ErpPurchaseOrderApi.PurchaseOrderItem[]>([]);
 const productList = ref<any[]>([]);
 
 /** 监听 props.items 变化，重新设置 formData */
@@ -225,7 +225,7 @@ const getData = () => {
 };
 
 /** 初始化 */
-const init = (items: PurchaseOrderApi.PurchaseOrderItem[]) => {
+const init = (items: ErpPurchaseOrderApi.PurchaseOrderItem[]) => {
   formData.value = items || [];
   // 如果没有数据，默认添加一行
   if (formData.value.length === 0) {
diff --git a/apps/web-antd/src/views/erp/purchase/order/index.vue b/apps/web-antd/src/views/erp/purchase/order/index.vue
index eecfc698..892f1335 100644
--- a/apps/web-antd/src/views/erp/purchase/order/index.vue
+++ b/apps/web-antd/src/views/erp/purchase/order/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { PurchaseOrderApi } from '#/api/erp/purchase/order';
+import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
 
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
@@ -41,13 +41,13 @@ const checkedIds = ref<number[]>([]);
 function handleRowCheckboxChange({
   records,
 }: {
-  records: PurchaseOrderApi.PurchaseOrder[];
+  records: ErpPurchaseOrderApi.PurchaseOrder[];
 }) {
   checkedIds.value = records.map((item) => item.id);
 }
 
 /** 详情 */
-function handleDetail(row: PurchaseOrderApi.PurchaseOrder) {
+function handleDetail(row: ErpPurchaseOrderApi.PurchaseOrder) {
   push({ name: 'ErpPurchaseOrderDetail', params: { id: row.id } });
 }
 
@@ -57,12 +57,12 @@ function handleCreate() {
 }
 
 /** 编辑 */
-function handleEdit(row: PurchaseOrderApi.PurchaseOrder) {
+function handleEdit(row: ErpPurchaseOrderApi.PurchaseOrder) {
   formModalApi.setData({ type: 'edit', id: row.id }).open();
 }
 
 /** 删除 */
-function handleDelete(row: PurchaseOrderApi.PurchaseOrder) {
+function handleDelete(row: ErpPurchaseOrderApi.PurchaseOrder) {
   handleBatchDelete([row.id]);
 }
 
@@ -89,7 +89,7 @@ async function handleBatchDelete() {
 
 /** 审批/反审批操作 */
 function handleUpdateStatus(
-  row: PurchaseOrderApi.PurchaseOrder,
+  row: ErpPurchaseOrderApi.PurchaseOrder,
   status: number,
 ) {
   const hideLoading = message.loading({
@@ -151,7 +151,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions<PurchaseOrderApi.PurchaseOrder>,
+  } as VxeTableGridOptions<ErpPurchaseOrderApi.PurchaseOrder>,
   gridEvents: {
     checkboxAll: handleRowCheckboxChange,
     checkboxChange: handleRowCheckboxChange,

From 7c2c249e5d2de6b23669e16d511a9b0f6754b32d Mon Sep 17 00:00:00 2001
From: nehc <934298133@qq.com>
Date: Wed, 23 Jul 2025 17:02:38 +0800
Subject: [PATCH 03/11] =?UTF-8?q?feat(@vben/web-antd):=20erp-=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=E9=87=87=E8=B4=AD=E8=AE=A2=E5=8D=95=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 更新表单组件，使用已有的 VbenForm 组件
- 优化表单字段定义，使用 useFormSchema 函数统一管理
- 重构表格组件，使用 VxeTable
- 优化数据处理逻辑，提高代码复用性和可维护性
- 调整界面布局和样式，提升用户体验
---
 .../order/components/PurchaseOrderForm.vue    | 338 ------------------
 .../src/views/erp/purchase/order/data.ts      | 313 +++++++++++++---
 .../src/views/erp/purchase/order/index.vue    |   2 +-
 .../PurchaseOrderItemForm.vue                 |   0
 .../views/erp/purchase/order/modules/form.vue | 139 +++++++
 5 files changed, 399 insertions(+), 393 deletions(-)
 delete mode 100644 apps/web-antd/src/views/erp/purchase/order/components/PurchaseOrderForm.vue
 rename apps/web-antd/src/views/erp/purchase/order/{components => modules}/PurchaseOrderItemForm.vue (100%)
 create mode 100644 apps/web-antd/src/views/erp/purchase/order/modules/form.vue

diff --git a/apps/web-antd/src/views/erp/purchase/order/components/PurchaseOrderForm.vue b/apps/web-antd/src/views/erp/purchase/order/components/PurchaseOrderForm.vue
deleted file mode 100644
index 2c7d8635..00000000
--- a/apps/web-antd/src/views/erp/purchase/order/components/PurchaseOrderForm.vue
+++ /dev/null
@@ -1,338 +0,0 @@
-<script lang="ts" setup>
-import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
-
-import { computed, nextTick, reactive, ref, watch } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
-import {
-  erpPriceInputFormatter,
-  erpPriceMultiply,
-  formatDateTime,
-} from '@vben/utils';
-
-import {
-  Button,
-  Col,
-  DatePicker,
-  Form,
-  Input,
-  InputNumber,
-  message,
-  Row,
-  Select,
-  Textarea,
-} from 'ant-design-vue';
-
-import { getAccountSimpleList } from '#/api/erp/finance/account';
-import {
-  createPurchaseOrder,
-  getPurchaseOrder,
-  updatePurchaseOrder,
-} from '#/api/erp/purchase/order';
-import { getSupplierSimpleList } from '#/api/erp/purchase/supplier';
-import { getSimpleUserList } from '#/api/system/user';
-
-import PurchaseOrderItemForm from './PurchaseOrderItemForm.vue';
-
-interface Props {
-  type: string;
-  id?: number;
-}
-
-const props = defineProps<Props>();
-const emit = defineEmits<{
-  success: [];
-}>();
-
-const [Modal, modalApi] = useVbenModal({
-  title: computed(() => {
-    if (props.type === 'create') return '添加采购订单';
-    if (props.type === 'update') return '编辑采购订单';
-    return '采购订单详情';
-  }),
-  width: '80%',
-});
-
-const formLoading = ref(false);
-const formType = ref('');
-const formData = ref<ErpPurchaseOrderApi.PurchaseOrder>({
-  id: undefined,
-  no: undefined,
-  supplierId: undefined,
-  orderTime: undefined,
-  remark: undefined,
-  fileUrl: undefined,
-  discountPercent: 0,
-  discountPrice: 0,
-  totalPrice: 0,
-  accountId: undefined,
-  depositPrice: 0,
-  status: 10,
-  items: [],
-});
-
-const formRules = reactive({
-  supplierId: [{ required: true, message: '供应商不能为空', trigger: 'blur' }],
-  orderTime: [{ required: true, message: '订单时间不能为空', trigger: 'blur' }],
-});
-
-const formRef = ref();
-const supplierList = ref<any[]>([]);
-const userList = ref<any[]>([]);
-const accountList = ref<any[]>([]);
-const itemFormRef = ref();
-
-/** 计算 discountPrice、totalPrice 价格 */
-watch(
-  () => [formData.value.items, formData.value.discountPercent],
-  () => {
-    if (!formData.value.items) {
-      return;
-    }
-    // 计算 discountPrice 价格
-    let totalPrice = 0;
-    formData.value.items.forEach((item) => {
-      totalPrice += item.totalPrice || 0;
-    });
-    formData.value.discountPrice = erpPriceMultiply(
-      totalPrice,
-      formData.value.discountPercent / 100,
-    );
-    formData.value.totalPrice = totalPrice - formData.value.discountPrice;
-  },
-  { deep: true },
-);
-
-/** 打开弹窗 */
-const open = async (type: string, id?: number) => {
-  modalApi.open();
-  resetForm();
-  formType.value = type;
-  formData.value.id = id;
-  formLoading.value = true;
-  try {
-    // 加载供应商、用户、账户列表
-    supplierList.value = await getSupplierSimpleList();
-    userList.value = await getSimpleUserList();
-    accountList.value = await getAccountSimpleList();
-    // 修改时，设置数据
-    if (id) {
-      const res = await getPurchaseOrder(id);
-      formData.value = res;
-      formData.value.orderTime = formatDateTime(formData.value.orderTime);
-    }
-  } finally {
-    formLoading.value = false;
-  }
-  // 加载产品列表
-  await nextTick();
-  itemFormRef.value?.init(formData.value.items || []);
-};
-
-/** 提交表单 */
-const submitForm = async () => {
-  // 校验表单
-  await formRef.value?.validate();
-  await itemFormRef.value?.validate();
-  formLoading.value = true;
-  try {
-    const data = formData.value as any;
-    data.items = itemFormRef.value?.getData();
-    if (formType.value === 'create') {
-      await createPurchaseOrder(data);
-      message.success('新增成功');
-    } else {
-      await updatePurchaseOrder(data);
-      message.success('更新成功');
-    }
-    modalApi.close();
-    emit('success');
-  } finally {
-    formLoading.value = false;
-  }
-};
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: undefined,
-    no: undefined,
-    supplierId: undefined,
-    orderTime: undefined,
-    remark: undefined,
-    fileUrl: undefined,
-    discountPercent: 0,
-    discountPrice: 0,
-    totalPrice: 0,
-    accountId: undefined,
-    depositPrice: 0,
-    status: 10,
-    items: [],
-  };
-  formRef.value?.resetFields();
-};
-
-defineExpose({ open });
-</script>
-
-<template>
-  <Modal>
-    <Form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      :label-col="{ span: 4 }"
-      :wrapper-col="{ span: 20 }"
-      label-align="left"
-    >
-      <Row :gutter="16">
-        <Col :span="12">
-          <Form.Item label="供应商" name="supplierId">
-            <Select
-              v-model:value="formData.supplierId"
-              placeholder="请选择供应商"
-              allow-clear
-              show-search
-              :disabled="formType === 'detail'"
-            >
-              <Select.Option
-                v-for="item in supplierList"
-                :key="item.id"
-                :value="item.id"
-              >
-                {{ item.name }}
-              </Select.Option>
-            </Select>
-          </Form.Item>
-        </Col>
-        <Col :span="12">
-          <Form.Item label="订单时间" name="orderTime">
-            <DatePicker
-              v-model:value="formData.orderTime"
-              type="datetime"
-              value-format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择订单时间"
-              :disabled="formType === 'detail'"
-              class="w-full"
-            />
-          </Form.Item>
-        </Col>
-      </Row>
-      <Row :gutter="16">
-        <Col :span="12">
-          <Form.Item label="备注" name="remark">
-            <Textarea
-              v-model:value="formData.remark"
-              placeholder="请输入备注"
-              :disabled="formType === 'detail'"
-            />
-          </Form.Item>
-        </Col>
-        <Col :span="12">
-          <Form.Item label="附件" name="fileUrl">
-            <Input
-              v-model:value="formData.fileUrl"
-              placeholder="请输入附件地址"
-              :disabled="formType === 'detail'"
-            />
-          </Form.Item>
-        </Col>
-      </Row>
-    </Form>
-
-    <!-- 子表的表单 -->
-    <PurchaseOrderItemForm
-      ref="itemFormRef"
-      :items="formData.items"
-      :disabled="formType === 'detail'"
-    />
-
-    <Form
-      :model="formData"
-      :label-col="{ span: 4 }"
-      :wrapper-col="{ span: 20 }"
-      label-align="left"
-    >
-      <Row :gutter="16">
-        <Col :span="12">
-          <Form.Item label="优惠率(%)">
-            <InputNumber
-              v-model:value="formData.discountPercent"
-              :formatter="erpPriceInputFormatter"
-              placeholder="请输入优惠率"
-              :disabled="formType === 'detail'"
-              class="w-full"
-            />
-          </Form.Item>
-        </Col>
-        <Col :span="12">
-          <Form.Item label="付款优惠">
-            <InputNumber
-              v-model:value="formData.discountPrice"
-              :formatter="erpPriceInputFormatter"
-              placeholder="请输入付款优惠"
-              :disabled="true"
-              class="w-full"
-            />
-          </Form.Item>
-        </Col>
-      </Row>
-      <Row :gutter="16">
-        <Col :span="12">
-          <Form.Item label="优惠后金额">
-            <InputNumber
-              v-model:value="formData.totalPrice"
-              :formatter="erpPriceInputFormatter"
-              placeholder="请输入优惠后金额"
-              :disabled="true"
-              class="w-full"
-            />
-          </Form.Item>
-        </Col>
-        <Col :span="12">
-          <Form.Item label="结算账户">
-            <Select
-              v-model:value="formData.accountId"
-              placeholder="请选择结算账户"
-              allow-clear
-              :disabled="formType === 'detail'"
-            >
-              <Select.Option
-                v-for="item in accountList"
-                :key="item.id"
-                :value="item.id"
-              >
-                {{ item.name }}
-              </Select.Option>
-            </Select>
-          </Form.Item>
-        </Col>
-      </Row>
-      <Row :gutter="16">
-        <Col :span="12">
-          <Form.Item label="支付订金">
-            <InputNumber
-              v-model:value="formData.depositPrice"
-              :formatter="erpPriceInputFormatter"
-              placeholder="请输入支付订金"
-              :disabled="formType === 'detail'"
-              class="w-full"
-            />
-          </Form.Item>
-        </Col>
-      </Row>
-    </Form>
-
-    <template #footer>
-      <Button @click="modalApi.close()">取消</Button>
-      <Button
-        v-if="formType !== 'detail'"
-        :loading="formLoading"
-        type="primary"
-        @click="submitForm"
-      >
-        确定
-      </Button>
-    </template>
-  </Modal>
-</template>
diff --git a/apps/web-antd/src/views/erp/purchase/order/data.ts b/apps/web-antd/src/views/erp/purchase/order/data.ts
index 045c038e..897d25ee 100644
--- a/apps/web-antd/src/views/erp/purchase/order/data.ts
+++ b/apps/web-antd/src/views/erp/purchase/order/data.ts
@@ -1,10 +1,132 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
+import { erpCountInputFormatter, erpPriceInputFormatter } from '@vben/utils';
+
+import { getAccountSimpleList } from '#/api/erp/finance/account';
 import { getProductSimpleList } from '#/api/erp/product/product';
 import { getSupplierSimpleList } from '#/api/erp/purchase/supplier';
 import { getSimpleUserList } from '#/api/system/user';
-import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+import { DICT_TYPE, getDictOptions } from '#/utils';
+
+/** 表单的配置项 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择供应商',
+        allowClear: true,
+        showSearch: true,
+        api: getSupplierSimpleList,
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+      },
+      fieldName: 'supplierId',
+      label: '供应商',
+      rules: 'required',
+    },
+    {
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '选择订单时间',
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        style: { width: '100%' },
+      },
+      fieldName: 'orderTime',
+      label: '订单时间',
+      rules: 'required',
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        autoSize: { minRows: 2, maxRows: 4 },
+        class: 'w-full',
+      },
+      fieldName: 'remark',
+      label: '备注',
+      formItemClass: 'col-span-2',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入附件地址',
+        class: 'w-full',
+      },
+      fieldName: 'fileUrl',
+      label: '附件',
+      formItemClass: 'col-span-2',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入优惠率',
+        min: 0,
+        max: 100,
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        style: { width: '100%' },
+      },
+      fieldName: 'discountPercent',
+      label: '优惠率(%)',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '付款优惠',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        disabled: true,
+        style: { width: '100%' },
+      },
+      fieldName: 'discountPrice',
+      label: '付款优惠',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '优惠后金额',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        disabled: true,
+        style: { width: '100%' },
+      },
+      fieldName: 'totalPrice',
+      label: '优惠后金额',
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择结算账户',
+        allowClear: true,
+        showSearch: true,
+        api: getAccountSimpleList,
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+      },
+      fieldName: 'accountId',
+      label: '结算账户',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入支付订金',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        style: { width: '100%' },
+      },
+      fieldName: 'depositPrice',
+      label: '支付订金',
+    },
+  ];
+}
 
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
@@ -23,14 +145,14 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '产品',
       component: 'ApiSelect',
       componentProps: {
+        placeholder: '请选择产品',
+        allowClear: true,
+        showSearch: true,
         api: getProductSimpleList,
         fieldNames: {
           label: 'name',
           value: 'id',
         },
-        placeholder: '请选择产品',
-        allowClear: true,
-        showSearch: true,
       },
     },
     {
@@ -38,8 +160,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '订单时间',
       component: 'RangePicker',
       componentProps: {
-        ...getRangePickerDefaultProps(),
-        allowClear: true,
+        placeholder: ['开始时间', '结束时间'],
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
       },
     },
     {
@@ -47,14 +171,14 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '供应商',
       component: 'ApiSelect',
       componentProps: {
+        placeholder: '请选择供应商',
+        allowClear: true,
+        showSearch: true,
         api: getSupplierSimpleList,
         fieldNames: {
           label: 'name',
           value: 'id',
         },
-        placeholder: '请选择供应商',
-        allowClear: true,
-        showSearch: true,
       },
     },
     {
@@ -62,14 +186,14 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '创建人',
       component: 'ApiSelect',
       componentProps: {
+        placeholder: '请选择创建人',
+        allowClear: true,
+        showSearch: true,
         api: getSimpleUserList,
         fieldNames: {
           label: 'nickname',
           value: 'id',
         },
-        placeholder: '请选择创建人',
-        allowClear: true,
-        showSearch: true,
       },
     },
     {
@@ -82,29 +206,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
         allowClear: true,
       },
     },
-    {
-      fieldName: 'remark',
-      label: '备注',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入备注',
-        allowClear: true,
-      },
-    },
-    {
-      fieldName: 'inStatus',
-      label: '入库状态',
-      component: 'Select',
-      componentProps: {
-        options: [
-          { label: '未入库', value: 0 },
-          { label: '部分入库', value: 1 },
-          { label: '全部入库', value: 2 },
-        ],
-        placeholder: '请选择入库状态',
-        allowClear: true,
-      },
-    },
     {
       fieldName: 'returnStatus',
       label: '退货状态',
@@ -122,73 +223,68 @@ export function useGridFormSchema(): VbenFormSchema[] {
   ];
 }
 
-/** 表格列配置 */
-export function useGridColumns(): VxeGridPropTypes.Columns {
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
       type: 'checkbox',
-      width: 60,
+      width: 50,
       fixed: 'left',
     },
     {
       field: 'no',
       title: '订单单号',
+      width: 260,
       fixed: 'left',
-      minWidth: 180,
     },
     {
       field: 'productNames',
       title: '产品信息',
-      minWidth: 200,
+      showOverflow: 'tooltip',
     },
     {
       field: 'supplierName',
       title: '供应商',
-      minWidth: 120,
     },
     {
       field: 'orderTime',
       title: '订单时间',
+      width: 160,
       formatter: 'formatDateTime',
-      minWidth: 160,
     },
     {
       field: 'creatorName',
       title: '创建人',
-      minWidth: 100,
     },
     {
       field: 'totalCount',
       title: '总数量',
-      minWidth: 100,
+      formatter: 'formatNumber',
     },
     {
       field: 'inCount',
       title: '入库数量',
-      minWidth: 100,
+      formatter: 'formatNumber',
     },
     {
       field: 'returnCount',
       title: '退货数量',
-      minWidth: 100,
+      formatter: 'formatNumber',
     },
     {
       field: 'totalProductPrice',
       title: '金额合计',
-      formatter: 'formatAmount2',
-      minWidth: 120,
+      formatter: 'formatNumber',
     },
     {
       field: 'totalPrice',
       title: '含税金额',
-      formatter: 'formatAmount2',
-      minWidth: 120,
+      formatter: 'formatNumber',
     },
     {
       field: 'depositPrice',
       title: '支付订金',
-      formatter: 'formatAmount2',
-      minWidth: 120,
+      formatter: 'formatNumber',
     },
     {
       field: 'status',
@@ -197,7 +293,6 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
         name: 'CellDict',
         props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
       },
-      minWidth: 100,
     },
     {
       title: '操作',
@@ -207,3 +302,113 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
     },
   ];
 }
+
+/** 采购订单明细项表单配置 */
+export function useItemFormSchema(
+  onProductChange?: (productId: number) => void,
+): VbenFormSchema[] {
+  return [
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择产品',
+        allowClear: true,
+        showSearch: true,
+        api: getProductSimpleList,
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+        },
+        onChange: onProductChange,
+      },
+      fieldName: 'productId',
+      label: '产品名称',
+      rules: 'required',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入数量',
+        min: 1,
+        precision: 2,
+        formatter: erpCountInputFormatter,
+        style: { width: '100%' },
+      },
+      fieldName: 'count',
+      label: '数量',
+      rules: 'required',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入单价',
+        min: 0,
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        style: { width: '100%' },
+      },
+      fieldName: 'productPrice',
+      label: '产品单价',
+      rules: 'required',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '金额',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        disabled: true,
+        style: { width: '100%' },
+      },
+      fieldName: 'totalPrice',
+      label: '金额',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入税率',
+        min: 0,
+        max: 100,
+        precision: 2,
+        style: { width: '100%' },
+      },
+      fieldName: 'taxPercent',
+      label: '税率(%)',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '税额',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        disabled: true,
+        style: { width: '100%' },
+      },
+      fieldName: 'taxPrice',
+      label: '税额',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '税额合计',
+        precision: 2,
+        formatter: erpPriceInputFormatter,
+        disabled: true,
+        style: { width: '100%' },
+      },
+      fieldName: 'totalTaxPrice',
+      label: '税额合计',
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        autoSize: { minRows: 2, maxRows: 4 },
+        class: 'w-full',
+      },
+      fieldName: 'remark',
+      label: '备注',
+      formItemClass: 'col-span-2',
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/erp/purchase/order/index.vue b/apps/web-antd/src/views/erp/purchase/order/index.vue
index 892f1335..f491b0f4 100644
--- a/apps/web-antd/src/views/erp/purchase/order/index.vue
+++ b/apps/web-antd/src/views/erp/purchase/order/index.vue
@@ -19,8 +19,8 @@ import {
 } from '#/api/erp/purchase/order';
 import { $t } from '#/locales';
 
-import PurchaseOrderForm from './components/PurchaseOrderForm.vue';
 import { useGridColumns, useGridFormSchema } from './data';
+import PurchaseOrderForm from './modules/form.vue';
 
 /** ERP 采购订单列表 */
 defineOptions({ name: 'ErpPurchaseOrder' });
diff --git a/apps/web-antd/src/views/erp/purchase/order/components/PurchaseOrderItemForm.vue b/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
similarity index 100%
rename from apps/web-antd/src/views/erp/purchase/order/components/PurchaseOrderItemForm.vue
rename to apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
diff --git a/apps/web-antd/src/views/erp/purchase/order/modules/form.vue b/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
new file mode 100644
index 00000000..67f4ee2f
--- /dev/null
+++ b/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
@@ -0,0 +1,139 @@
+<script lang="ts" setup>
+import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
+
+import { computed, ref, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { erpPriceMultiply, formatDateTime } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createPurchaseOrder,
+  getPurchaseOrder,
+  updatePurchaseOrder,
+} from '#/api/erp/purchase/order';
+
+import { useFormSchema } from '../data';
+import PurchaseOrderItemForm from './PurchaseOrderItemForm.vue';
+
+const emit = defineEmits(['success']);
+const formData = ref<ErpPurchaseOrderApi.PurchaseOrder>();
+const formType = ref('');
+const itemFormRef = ref();
+
+const getTitle = computed(() => {
+  if (formType.value === 'create') return '添加采购订单';
+  if (formType.value === 'update') return '编辑采购订单';
+  return '采购订单详情';
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+/** 计算 discountPrice、totalPrice 价格 */
+watch(
+  () => [formData.value?.items, formData.value?.discountPercent],
+  () => {
+    if (!formData.value?.items) {
+      return;
+    }
+    // 计算 discountPrice 价格
+    let totalPrice = 0;
+    formData.value.items.forEach((item) => {
+      totalPrice += item.totalPrice || 0;
+    });
+    formData.value.discountPrice = erpPriceMultiply(
+      totalPrice,
+      formData.value.discountPercent / 100,
+    );
+    formData.value.totalPrice = totalPrice - formData.value.discountPrice;
+    // 更新表单值
+    formApi.setValues({
+      discountPrice: formData.value.discountPrice,
+      totalPrice: formData.value.totalPrice,
+    });
+  },
+  { deep: true },
+);
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    await itemFormRef.value?.validate();
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as ErpPurchaseOrderApi.PurchaseOrder;
+    data.items = itemFormRef.value?.getData();
+    try {
+      await (formType.value === 'create'
+        ? createPurchaseOrder(data)
+        : updatePurchaseOrder(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success(formType.value === 'create' ? '新增成功' : '更新成功');
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type: string }>();
+    if (!data || !data.id) {
+      return;
+    }
+    formType.value = data.type;
+    modalApi.lock();
+    try {
+      formData.value = await getPurchaseOrder(data.id);
+      formData.value.orderTime = formatDateTime(formData.value.orderTime);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+      // 初始化子表单
+      itemFormRef.value?.init(formData.value.items || []);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+defineExpose({ modalApi });
+</script>
+
+<template>
+  <Modal
+    v-bind="$attrs"
+    :title="getTitle"
+    class="w-1/2"
+    :closable="true"
+    :mask-closable="true"
+  >
+    <Form />
+
+    <!-- 子表的表单 -->
+    <PurchaseOrderItemForm
+      ref="itemFormRef"
+      :items="formData?.items || []"
+      :disabled="formType === 'detail'"
+    />
+  </Modal>
+</template>

From f9407ca8bcd2beeb533ad4e35c5ff8a1e7a18e88 Mon Sep 17 00:00:00 2001
From: nehc <934298133@qq.com>
Date: Wed, 23 Jul 2025 22:26:42 +0800
Subject: [PATCH 04/11] =?UTF-8?q?feat(@vben/web-antd):=20erp-=E9=87=87?=
 =?UTF-8?q?=E8=B4=AD=E8=AE=A2=E5=8D=95=E6=98=8E=E7=BB=86=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 优化了产品变更、价格计算和表单验证逻辑
- 更新了表格列定义和单元格模板
- 删除了冗余的组件挂载逻辑
---
 .../order/modules/PurchaseOrderItemForm.vue   | 383 ++++++++----------
 .../views/erp/purchase/order/modules/form.vue |  20 +-
 2 files changed, 186 insertions(+), 217 deletions(-)

diff --git a/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue b/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
index e89ada9c..158549f4 100644
--- a/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
+++ b/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
@@ -1,15 +1,11 @@
 <script lang="ts" setup>
 import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
 
-import { onMounted, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 
-import {
-  erpCountInputFormatter,
-  erpPriceInputFormatter,
-  erpPriceMultiply,
-} from '@vben/utils';
+import { erpPriceMultiply } from '@vben/utils';
 
-import { Button, InputNumber, Select, Table, Textarea } from 'ant-design-vue';
+import { Button, Input, InputNumber, Select, Table } from 'ant-design-vue';
 
 import { getProductSimpleList } from '#/api/erp/product/product';
 import { getStockCountByProductId } from '#/api/erp/stock/stock';
@@ -19,11 +15,6 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
 });
 
-// 计算数组总和的工具函数
-const getSumValue = (values: (number | undefined)[]): number => {
-  return values.reduce((sum, value) => sum + (value || 0), 0);
-};
-
 interface Props {
   items?: ErpPurchaseOrderApi.PurchaseOrderItem[];
   disabled?: boolean;
@@ -32,7 +23,6 @@ interface Props {
 const formData = ref<ErpPurchaseOrderApi.PurchaseOrderItem[]>([]);
 const productList = ref<any[]>([]);
 
-/** 监听 props.items 变化，重新设置 formData */
 watch(
   () => props.items,
   (val) => {
@@ -41,39 +31,87 @@ watch(
   { immediate: true },
 );
 
-/** 监听 formData 变化，计算相关价格 */
-watch(
-  formData,
-  (val) => {
-    if (!val) return;
-    val.forEach((item) => {
-      if (item.productPrice && item.count) {
-        item.totalPrice = erpPriceMultiply(item.productPrice, item.count);
-        item.taxPrice = erpPriceMultiply(
-          item.totalPrice,
-          (item.taxPercent || 0) / 100,
-        );
-        item.totalTaxPrice = item.totalPrice + item.taxPrice;
-      }
-    });
-  },
-  { deep: true },
-);
+// 初始化时加载产品列表
+const initProductList = async () => {
+  if (productList.value.length === 0) {
+    productList.value = await getProductSimpleList();
+  }
+};
+
+// 组件挂载时加载产品列表
+initProductList();
+
+const onChangeProduct = async (productId: number, index: number) => {
+  const product = productList.value.find((item) => item.id === productId);
+  if (!product) return;
+
+  const stockCount = await getStockCountByProductId(productId);
+
+  const item = formData.value[index];
+  if (item) {
+    item.productId = productId;
+    item.productUnitId = product.unitId;
+    item.productBarCode = product.barCode;
+    item.productUnitName = product.unitName;
+    item.productName = product.name;
+    item.stockCount = stockCount || 0;
+    item.productPrice = product.purchasePrice;
+
+    calculatePrice(index);
+  }
+};
+
+const calculatePrice = (index: number) => {
+  const item = formData.value[index];
+  if (item && item.productPrice && item.count) {
+    item.totalProductPrice = erpPriceMultiply(item.productPrice, item.count);
+    item.taxPrice = erpPriceMultiply(
+      item.totalProductPrice,
+      (item.taxPercent || 0) / 100,
+    );
+    item.totalPrice = item.totalProductPrice + item.taxPrice;
+  }
+};
+
+const onCountChange = (value: null | number, index: number) => {
+  const item = formData.value[index];
+  if (item) {
+    item.count = value || 0;
+    calculatePrice(index);
+  }
+};
+
+const onPriceChange = (value: null | number, index: number) => {
+  const item = formData.value[index];
+  if (item) {
+    item.productPrice = value || 0;
+    calculatePrice(index);
+  }
+};
+
+const onTaxPercentChange = (value: null | number, index: number) => {
+  const item = formData.value[index];
+  if (item) {
+    item.taxPercent = value || 0;
+    calculatePrice(index);
+  }
+};
+
+const onRemarkChange = (value: string, index: number) => {
+  const item = formData.value[index];
+  if (item) {
+    item.remark = value;
+  }
+};
 
-/** 表格列定义 */
 const columns = [
   {
     title: '产品名称',
-    dataIndex: 'productId',
-    key: 'productId',
+    dataIndex: 'productName',
+    key: 'productName',
     width: 200,
   },
-  {
-    title: '库存',
-    dataIndex: 'stockCount',
-    key: 'stockCount',
-    width: 80,
-  },
+  { title: '库存', dataIndex: 'stockCount', key: 'stockCount', width: 80 },
   {
     title: '条码',
     dataIndex: 'productBarCode',
@@ -86,12 +124,7 @@ const columns = [
     key: 'productUnitName',
     width: 80,
   },
-  {
-    title: '数量',
-    dataIndex: 'count',
-    key: 'count',
-    width: 120,
-  },
+  { title: '数量', dataIndex: 'count', key: 'count', width: 120 },
   {
     title: '产品单价',
     dataIndex: 'productPrice',
@@ -100,111 +133,72 @@ const columns = [
   },
   {
     title: '金额',
-    dataIndex: 'totalPrice',
-    key: 'totalPrice',
+    dataIndex: 'totalProductPrice',
+    key: 'totalProductPrice',
     width: 120,
   },
-  {
-    title: '税率(%)',
-    dataIndex: 'taxPercent',
-    key: 'taxPercent',
-    width: 100,
-  },
-  {
-    title: '税额',
-    dataIndex: 'taxPrice',
-    key: 'taxPrice',
-    width: 120,
-  },
-  {
-    title: '税额合计',
-    dataIndex: 'totalTaxPrice',
-    key: 'totalTaxPrice',
-    width: 120,
-  },
-  {
-    title: '备注',
-    dataIndex: 'remark',
-    key: 'remark',
-    width: 150,
-  },
-  {
-    title: '操作',
-    key: 'operation',
-    width: 80,
-  },
+  { title: '税率(%)', dataIndex: 'taxPercent', key: 'taxPercent', width: 100 },
+  { title: '税额', dataIndex: 'taxPrice', key: 'taxPrice', width: 120 },
+  { title: '税额合计', dataIndex: 'totalPrice', key: 'totalPrice', width: 120 },
+  { title: '备注', dataIndex: 'remark', key: 'remark', width: 150 },
+  { title: '操作', key: 'operation', width: 120 },
 ];
 
-/** 合计行 */
-const getSummaries = () => {
-  const sums: any = {};
-  sums.productId = '合计';
-  sums.count = getSumValue(formData.value.map((item) => item.count));
-  sums.totalPrice = getSumValue(formData.value.map((item) => item.totalPrice));
-  sums.taxPrice = getSumValue(formData.value.map((item) => item.taxPrice));
-  sums.totalTaxPrice = getSumValue(
-    formData.value.map((item) => item.totalTaxPrice),
-  );
+const getSummaries = (): {
+  count: number;
+  productName: string;
+  taxPrice: number;
+  totalPrice: number;
+  totalProductPrice: number;
+} => {
+  const sums = {
+    productName: '合计',
+    count: formData.value.reduce((sum, item) => sum + (item.count || 0), 0),
+    totalProductPrice: formData.value.reduce(
+      (sum, item) => sum + (item.totalProductPrice || 0),
+      0,
+    ),
+    taxPrice: formData.value.reduce(
+      (sum, item) => sum + (item.taxPrice || 0),
+      0,
+    ),
+    totalPrice: formData.value.reduce(
+      (sum, item) => sum + (item.totalPrice || 0),
+      0,
+    ),
+  };
   return sums;
 };
 
-/** 新增行 */
-const handleAdd = () => {
-  const row = {
+const handleAdd = async () => {
+  await initProductList();
+
+  const newItem: ErpPurchaseOrderApi.PurchaseOrderItem = {
     id: undefined,
+    orderId: undefined,
     productId: undefined,
     productUnitId: undefined,
     productPrice: undefined,
     count: 1,
-    totalPrice: undefined,
+    totalProductPrice: 0,
     taxPercent: 0,
     taxPrice: 0,
-    totalTaxPrice: 0,
+    totalPrice: 0,
     remark: undefined,
-    // 显示字段
     productName: undefined,
     productBarCode: undefined,
     productUnitName: undefined,
     stockCount: 0,
   };
-  formData.value.push(row);
+
+  formData.value.push(newItem);
 };
 
-/** 删除行 */
 const handleDelete = (index: number) => {
   formData.value.splice(index, 1);
 };
 
-/** 产品变更 */
-const onChangeProduct = async (productId: number, index: number) => {
-  // 获得产品
-  const product = productList.value.find((item) => item.id === productId);
-  if (!product) {
-    return;
-  }
-  // 设置产品信息
-  formData.value[index].productUnitId = product.unitId;
-  formData.value[index].productBarCode = product.barCode;
-  formData.value[index].productUnitName = product.unitName;
-  formData.value[index].productPrice = product.purchasePrice;
-  // 加载库存
-  await setStockCount(index);
-};
-
-/** 设置库存 */
-const setStockCount = async (index: number) => {
-  const row = formData.value[index];
-  if (!row.productId) {
-    row.stockCount = 0;
-    return;
-  }
-  const stockCount = await getStockCountByProductId(row.productId);
-  row.stockCount = stockCount || 0;
-};
-
-/** 表单校验 */
-const validate = async () => {
-  // 校验表单
+const validate = async (): Promise<void> => {
   for (let i = 0; i < formData.value.length; i++) {
     const item = formData.value[i];
     if (!item.productId) {
@@ -219,30 +213,13 @@ const validate = async () => {
   }
 };
 
-/** 获取表单数据 */
-const getData = () => {
-  return formData.value;
-};
-
-/** 初始化 */
-const init = (items: ErpPurchaseOrderApi.PurchaseOrderItem[]) => {
+const getData = (): ErpPurchaseOrderApi.PurchaseOrderItem[] => formData.value;
+const init = (
+  items: ErpPurchaseOrderApi.PurchaseOrderItem[] | undefined,
+): void => {
   formData.value = items || [];
-  // 如果没有数据，默认添加一行
-  if (formData.value.length === 0) {
-    handleAdd();
-  }
 };
 
-/** 组件挂载时 */
-onMounted(async () => {
-  // 加载产品列表
-  productList.value = await getProductSimpleList();
-  // 默认添加一行
-  if (formData.value.length === 0) {
-    handleAdd();
-  }
-});
-
 defineExpose({ validate, getData, init });
 </script>
 
@@ -263,100 +240,84 @@ defineExpose({ validate, getData, init });
       :scroll="{ x: 1400 }"
     >
       <template #bodyCell="{ column, record, index }">
-        <template v-if="column.dataIndex === 'productId'">
+        <!-- 产品名称 -->
+        <template v-if="column.key === 'productName'">
           <Select
+            v-if="!disabled"
             v-model:value="record.productId"
             placeholder="请选择产品"
-            allow-clear
             show-search
-            :disabled="disabled"
-            @change="onChangeProduct($event, index)"
+            :filter-option="false"
+            @change="(value) => onChangeProduct(value, index)"
             class="w-full"
           >
             <Select.Option
-              v-for="item in productList"
-              :key="item.id"
-              :value="item.id"
+              v-for="product in productList"
+              :key="product.id"
+              :value="product.id"
             >
-              {{ item.name }}
+              {{ product.name }}
             </Select.Option>
           </Select>
+          <span v-else>{{ record.productName || '-' }}</span>
         </template>
-        <template v-else-if="column.dataIndex === 'stockCount'">
-          <span>{{ record.stockCount || 0 }}</span>
-        </template>
-        <template v-else-if="column.dataIndex === 'productBarCode'">
-          <span>{{ record.productBarCode }}</span>
-        </template>
-        <template v-else-if="column.dataIndex === 'productUnitName'">
-          <span>{{ record.productUnitName }}</span>
-        </template>
-        <template v-else-if="column.dataIndex === 'count'">
+
+        <!-- 数量 -->
+        <template v-if="column.key === 'count'">
           <InputNumber
+            v-if="!disabled"
             v-model:value="record.count"
-            :formatter="erpCountInputFormatter"
-            placeholder="请输入数量"
-            :disabled="disabled"
-            :min="1"
-            class="w-full"
-          />
-        </template>
-        <template v-else-if="column.dataIndex === 'productPrice'">
-          <InputNumber
-            v-model:value="record.productPrice"
-            :formatter="erpPriceInputFormatter"
-            placeholder="请输入单价"
-            :disabled="disabled"
             :min="0"
+            :precision="2"
+            @change="(value: number | null) => onCountChange(value, index)"
             class="w-full"
           />
+          <span v-else>{{ record.count || '-' }}</span>
         </template>
-        <template v-else-if="column.dataIndex === 'totalPrice'">
+
+        <!-- 产品单价 -->
+        <template v-if="column.key === 'productPrice'">
           <InputNumber
-            v-model:value="record.totalPrice"
-            :formatter="erpPriceInputFormatter"
-            placeholder="金额"
-            :disabled="true"
+            v-if="!disabled"
+            v-model:value="record.productPrice"
+            :min="0"
+            :precision="2"
+            @change="(value: number | null) => onPriceChange(value, index)"
             class="w-full"
           />
+          <span v-else>{{ record.productPrice || '-' }}</span>
         </template>
-        <template v-else-if="column.dataIndex === 'taxPercent'">
+
+        <!-- 税率 -->
+        <template v-if="column.key === 'taxPercent'">
           <InputNumber
+            v-if="!disabled"
             v-model:value="record.taxPercent"
-            placeholder="请输入税率"
-            :disabled="disabled"
             :min="0"
             :max="100"
+            :precision="2"
+            @change="(value: number | null) => onTaxPercentChange(value, index)"
             class="w-full"
           />
+          <span v-else>{{ record.taxPercent || '-' }}</span>
         </template>
-        <template v-else-if="column.dataIndex === 'taxPrice'">
-          <InputNumber
-            v-model:value="record.taxPrice"
-            :formatter="erpPriceInputFormatter"
-            placeholder="税额"
-            :disabled="true"
-            class="w-full"
-          />
-        </template>
-        <template v-else-if="column.dataIndex === 'totalTaxPrice'">
-          <InputNumber
-            v-model:value="record.totalTaxPrice"
-            :formatter="erpPriceInputFormatter"
-            placeholder="税额合计"
-            :disabled="true"
-            class="w-full"
-          />
-        </template>
-        <template v-else-if="column.dataIndex === 'remark'">
-          <Textarea
+
+        <!-- 备注 -->
+        <template v-if="column.key === 'remark'">
+          <Input
+            v-if="!disabled"
             v-model:value="record.remark"
-            placeholder="请输入备注"
-            :disabled="disabled"
-            :rows="1"
+            @change="
+              (e: Event) =>
+                onRemarkChange((e.target as HTMLInputElement).value, index)
+            "
+            class="w-full"
           />
+          <span v-else>{{ record.remark || '-' }}</span>
         </template>
-        <template v-else-if="column.key === 'operation'">
+
+        <!-- 操作 -->
+        <template v-if="column.key === 'operation'">
           <Button
             v-if="!disabled"
             type="link"
@@ -376,9 +337,9 @@ defineExpose({ validate, getData, init });
         <span class="font-medium">合计：</span>
         <div class="flex space-x-4">
           <span>数量：{{ getSummaries().count }}</span>
-          <span>金额：{{ getSummaries().totalPrice }}</span>
+          <span>金额：{{ getSummaries().totalProductPrice }}</span>
           <span>税额：{{ getSummaries().taxPrice }}</span>
-          <span>税额合计：{{ getSummaries().totalTaxPrice }}</span>
+          <span>税额合计：{{ getSummaries().totalPrice }}</span>
         </div>
       </div>
     </div>
diff --git a/apps/web-antd/src/views/erp/purchase/order/modules/form.vue b/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
index 67f4ee2f..93d62604 100644
--- a/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
+++ b/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
@@ -129,11 +129,19 @@ defineExpose({ modalApi });
   >
     <Form />
 
-    <!-- 子表的表单 -->
-    <PurchaseOrderItemForm
-      ref="itemFormRef"
-      :items="formData?.items || []"
-      :disabled="formType === 'detail'"
-    />
+    <!-- Tab卡片 -->
+    <div class="mt-4 rounded-lg border border-gray-200 p-2">
+      <a-tabs default-active-key="1">
+        <a-tab-pane key="1" tab="订单产品清单">
+          <div class="p-4">
+            <PurchaseOrderItemForm
+              ref="itemFormRef"
+              :items="formData?.items || []"
+              :disabled="formType === 'detail'"
+            />
+          </div>
+        </a-tab-pane>
+      </a-tabs>
+    </div>
   </Modal>
 </template>

From a24f08cbb0f1b73bd77336a3b9910758b91cdb77 Mon Sep 17 00:00:00 2001
From: nehc <934298133@qq.com>
Date: Thu, 24 Jul 2025 15:34:59 +0800
Subject: [PATCH 05/11] =?UTF-8?q?feat(@vben/web-antd):=20erp-=E9=87=87?=
 =?UTF-8?q?=E8=B4=AD=E8=AE=A2=E5=8D=95=E6=98=8E=E7=BB=86=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用 useVbenVxeGrid 重构
---
 .../src/views/erp/purchase/order/data.ts      |  76 +++
 .../order/modules/PurchaseOrderItemForm.vue   | 450 ++++++++----------
 .../views/erp/purchase/order/modules/form.vue |   7 +
 3 files changed, 273 insertions(+), 260 deletions(-)

diff --git a/apps/web-antd/src/views/erp/purchase/order/data.ts b/apps/web-antd/src/views/erp/purchase/order/data.ts
index 897d25ee..60f9e295 100644
--- a/apps/web-antd/src/views/erp/purchase/order/data.ts
+++ b/apps/web-antd/src/views/erp/purchase/order/data.ts
@@ -128,6 +128,82 @@ export function useFormSchema(): VbenFormSchema[] {
   ];
 }
 
+/** 采购订单项表格列定义 */
+export function usePurchaseOrderItemTableColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'seq', title: '序号', minWidth: 50 },
+    {
+      field: 'productId',
+      title: '产品名称',
+      minWidth: 200,
+      slots: { default: 'productId' },
+    },
+    {
+      field: 'stockCount',
+      title: '库存',
+      minWidth: 80,
+    },
+    {
+      field: 'productBarCode',
+      title: '条码',
+      minWidth: 120,
+    },
+    {
+      field: 'productUnitName',
+      title: '单位',
+      minWidth: 80,
+    },
+    {
+      field: 'count',
+      title: '数量',
+      minWidth: 120,
+      slots: { default: 'count' },
+    },
+    {
+      field: 'productPrice',
+      title: '产品单价',
+      minWidth: 120,
+      slots: { default: 'productPrice' },
+    },
+    {
+      field: 'totalProductPrice',
+      title: '金额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'taxPercent',
+      title: '税率(%)',
+      minWidth: 100,
+      slots: { default: 'taxPercent' },
+    },
+    {
+      field: 'taxPrice',
+      title: '税额',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'totalPrice',
+      title: '税额合计',
+      minWidth: 120,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+      slots: { default: 'remark' },
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
diff --git a/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue b/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
index 158549f4..f1725432 100644
--- a/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
+++ b/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
@@ -1,148 +1,127 @@
 <script lang="ts" setup>
 import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
 
-import { ref, watch } from 'vue';
+import { nextTick, onMounted, ref, watch } from 'vue';
 
 import { erpPriceMultiply } from '@vben/utils';
 
-import { Button, Input, InputNumber, Select, Table } from 'ant-design-vue';
+import { Input, InputNumber, Select } from 'ant-design-vue';
 
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getProductSimpleList } from '#/api/erp/product/product';
 import { getStockCountByProductId } from '#/api/erp/stock/stock';
 
+import { usePurchaseOrderItemTableColumns } from '../data';
+
 const props = withDefaults(defineProps<Props>(), {
   items: () => [],
   disabled: false,
 });
 
+const emit = defineEmits(['update:items']);
+
 interface Props {
   items?: ErpPurchaseOrderApi.PurchaseOrderItem[];
   disabled?: boolean;
 }
 
-const formData = ref<ErpPurchaseOrderApi.PurchaseOrderItem[]>([]);
-const productList = ref<any[]>([]);
+const tableData = ref<ErpPurchaseOrderApi.PurchaseOrderItem[]>([]);
+const productOptions = ref<any[]>([]);
 
+/** 表格配置 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    editConfig: {
+      trigger: 'click',
+      mode: 'cell',
+    },
+    columns: usePurchaseOrderItemTableColumns(),
+    data: tableData.value,
+    border: true,
+    showOverflow: true,
+    autoResize: true,
+    keepSource: true,
+    rowConfig: {
+      keyField: 'id',
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+/** 监听外部传入的列数据 */
 watch(
   () => props.items,
-  (val) => {
-    formData.value = val || [];
+  async (items) => {
+    if (!items) {
+      return;
+    }
+    await nextTick();
+    tableData.value = items;
+    gridApi.grid.reloadData(tableData.value);
+  },
+  {
+    immediate: true,
   },
-  { immediate: true },
 );
 
-// 初始化时加载产品列表
-const initProductList = async () => {
-  if (productList.value.length === 0) {
-    productList.value = await getProductSimpleList();
+/** 初始化 */
+onMounted(async () => {
+  productOptions.value = await getProductSimpleList();
+});
+
+function handleAdd() {
+  gridApi.grid.insertAt(null, -1);
+}
+
+function handleDelete(row: ErpPurchaseOrderApi.PurchaseOrderItem) {
+  gridApi.grid.remove(row);
+}
+
+async function handleProductChange(productId: any, row: any) {
+  const product = productOptions.value.find((p) => p.id === productId);
+  if (!product) {
+    return;
   }
-};
-
-// 组件挂载时加载产品列表
-initProductList();
-
-const onChangeProduct = async (productId: number, index: number) => {
-  const product = productList.value.find((item) => item.id === productId);
-  if (!product) return;
 
   const stockCount = await getStockCountByProductId(productId);
 
-  const item = formData.value[index];
-  if (item) {
-    item.productId = productId;
-    item.productUnitId = product.unitId;
-    item.productBarCode = product.barCode;
-    item.productUnitName = product.unitName;
-    item.productName = product.name;
-    item.stockCount = stockCount || 0;
-    item.productPrice = product.purchasePrice;
+  row.productId = productId;
+  row.productUnitId = product.unitId;
+  row.productBarCode = product.barCode;
+  row.productUnitName = product.unitName;
+  row.productName = product.name;
+  row.stockCount = stockCount || 0;
+  row.productPrice = product.purchasePrice;
+  row.count = row.count || 1;
 
-    calculatePrice(index);
+  handlePriceChange(row);
+}
+
+function handlePriceChange(row: any) {
+  if (row.productPrice && row.count) {
+    row.totalProductPrice = erpPriceMultiply(row.productPrice, row.count) ?? 0;
+    row.taxPrice =
+      erpPriceMultiply(row.totalProductPrice, (row.taxPercent || 0) / 100) ?? 0;
+    row.totalPrice = row.totalProductPrice + row.taxPrice;
   }
-};
+  handleUpdateValue(row);
+}
 
-const calculatePrice = (index: number) => {
-  const item = formData.value[index];
-  if (item && item.productPrice && item.count) {
-    item.totalProductPrice = erpPriceMultiply(item.productPrice, item.count);
-    item.taxPrice = erpPriceMultiply(
-      item.totalProductPrice,
-      (item.taxPercent || 0) / 100,
-    );
-    item.totalPrice = item.totalProductPrice + item.taxPrice;
+function handleUpdateValue(row: any) {
+  const index = tableData.value.findIndex((item) => item.id === row.id);
+  if (index === -1) {
+    row.id = tableData.value.length + 1;
+    tableData.value.push(row);
+  } else {
+    tableData.value[index] = row;
   }
-};
-
-const onCountChange = (value: null | number, index: number) => {
-  const item = formData.value[index];
-  if (item) {
-    item.count = value || 0;
-    calculatePrice(index);
-  }
-};
-
-const onPriceChange = (value: null | number, index: number) => {
-  const item = formData.value[index];
-  if (item) {
-    item.productPrice = value || 0;
-    calculatePrice(index);
-  }
-};
-
-const onTaxPercentChange = (value: null | number, index: number) => {
-  const item = formData.value[index];
-  if (item) {
-    item.taxPercent = value || 0;
-    calculatePrice(index);
-  }
-};
-
-const onRemarkChange = (value: string, index: number) => {
-  const item = formData.value[index];
-  if (item) {
-    item.remark = value;
-  }
-};
-
-const columns = [
-  {
-    title: '产品名称',
-    dataIndex: 'productName',
-    key: 'productName',
-    width: 200,
-  },
-  { title: '库存', dataIndex: 'stockCount', key: 'stockCount', width: 80 },
-  {
-    title: '条码',
-    dataIndex: 'productBarCode',
-    key: 'productBarCode',
-    width: 120,
-  },
-  {
-    title: '单位',
-    dataIndex: 'productUnitName',
-    key: 'productUnitName',
-    width: 80,
-  },
-  { title: '数量', dataIndex: 'count', key: 'count', width: 120 },
-  {
-    title: '产品单价',
-    dataIndex: 'productPrice',
-    key: 'productPrice',
-    width: 120,
-  },
-  {
-    title: '金额',
-    dataIndex: 'totalProductPrice',
-    key: 'totalProductPrice',
-    width: 120,
-  },
-  { title: '税率(%)', dataIndex: 'taxPercent', key: 'taxPercent', width: 100 },
-  { title: '税额', dataIndex: 'taxPrice', key: 'taxPrice', width: 120 },
-  { title: '税额合计', dataIndex: 'totalPrice', key: 'totalPrice', width: 120 },
-  { title: '备注', dataIndex: 'remark', key: 'remark', width: 150 },
-  { title: '操作', key: 'operation', width: 120 },
-];
+  emit('update:items', tableData.value);
+}
 
 const getSummaries = (): {
   count: number;
@@ -153,16 +132,16 @@ const getSummaries = (): {
 } => {
   const sums = {
     productName: '合计',
-    count: formData.value.reduce((sum, item) => sum + (item.count || 0), 0),
-    totalProductPrice: formData.value.reduce(
+    count: tableData.value.reduce((sum, item) => sum + (item.count || 0), 0),
+    totalProductPrice: tableData.value.reduce(
       (sum, item) => sum + (item.totalProductPrice || 0),
       0,
     ),
-    taxPrice: formData.value.reduce(
+    taxPrice: tableData.value.reduce(
       (sum, item) => sum + (item.taxPrice || 0),
       0,
     ),
-    totalPrice: formData.value.reduce(
+    totalPrice: tableData.value.reduce(
       (sum, item) => sum + (item.totalPrice || 0),
       0,
     ),
@@ -170,37 +149,9 @@ const getSummaries = (): {
   return sums;
 };
 
-const handleAdd = async () => {
-  await initProductList();
-
-  const newItem: ErpPurchaseOrderApi.PurchaseOrderItem = {
-    id: undefined,
-    orderId: undefined,
-    productId: undefined,
-    productUnitId: undefined,
-    productPrice: undefined,
-    count: 1,
-    totalProductPrice: 0,
-    taxPercent: 0,
-    taxPrice: 0,
-    totalPrice: 0,
-    remark: undefined,
-    productName: undefined,
-    productBarCode: undefined,
-    productUnitName: undefined,
-    stockCount: 0,
-  };
-
-  formData.value.push(newItem);
-};
-
-const handleDelete = (index: number) => {
-  formData.value.splice(index, 1);
-};
-
 const validate = async (): Promise<void> => {
-  for (let i = 0; i < formData.value.length; i++) {
-    const item = formData.value[i];
+  for (let i = 0; i < tableData.value.length; i++) {
+    const item = tableData.value[i];
     if (!item.productId) {
       throw new Error(`第 ${i + 1} 行：产品不能为空`);
     }
@@ -213,135 +164,114 @@ const validate = async (): Promise<void> => {
   }
 };
 
-const getData = (): ErpPurchaseOrderApi.PurchaseOrderItem[] => formData.value;
+const getData = (): ErpPurchaseOrderApi.PurchaseOrderItem[] => tableData.value;
 const init = (
   items: ErpPurchaseOrderApi.PurchaseOrderItem[] | undefined,
 ): void => {
-  formData.value = items || [];
+  tableData.value = items || [];
+  gridApi.grid.reloadData(tableData.value);
 };
 
 defineExpose({ validate, getData, init });
 </script>
 
 <template>
-  <div>
-    <div class="mb-4">
-      <Button v-if="!disabled" type="primary" @click="handleAdd" class="mb-2">
-        添加产品
-      </Button>
-    </div>
+  <Grid class="w-full">
+    <template #productId="{ row }">
+      <Select
+        v-if="!disabled"
+        v-model:value="row.productId"
+        :options="productOptions"
+        :field-names="{ label: 'name', value: 'id' }"
+        style="width: 100%"
+        placeholder="请选择产品"
+        show-search
+        @change="handleProductChange($event, row)"
+      />
+      <span v-else>{{ row.productName || '-' }}</span>
+    </template>
 
-    <Table
-      :columns="columns"
-      :data-source="formData"
-      :pagination="false"
-      bordered
-      size="small"
-      :scroll="{ x: 1400 }"
-    >
-      <template #bodyCell="{ column, record, index }">
-        <!-- 产品名称 -->
-        <template v-if="column.key === 'productName'">
-          <Select
-            v-if="!disabled"
-            v-model:value="record.productId"
-            placeholder="请选择产品"
-            show-search
-            :filter-option="false"
-            @change="(value) => onChangeProduct(value, index)"
-            class="w-full"
-          >
-            <Select.Option
-              v-for="product in productList"
-              :key="product.id"
-              :value="product.id"
-            >
-              {{ product.name }}
-            </Select.Option>
-          </Select>
-          <span v-else>{{ record.productName || '-' }}</span>
-        </template>
+    <template #count="{ row }">
+      <InputNumber
+        v-if="!disabled"
+        v-model:value="row.count"
+        :min="0"
+        :precision="2"
+        @change="handlePriceChange(row)"
+      />
+      <span v-else>{{ row.count || '-' }}</span>
+    </template>
 
-        <!-- 数量 -->
-        <template v-if="column.key === 'count'">
-          <InputNumber
-            v-if="!disabled"
-            v-model:value="record.count"
-            :min="0"
-            :precision="2"
-            @change="(value: number | null) => onCountChange(value, index)"
-            class="w-full"
-          />
-          <span v-else>{{ record.count || '-' }}</span>
-        </template>
+    <template #productPrice="{ row }">
+      <InputNumber
+        v-if="!disabled"
+        v-model:value="row.productPrice"
+        :min="0"
+        :precision="2"
+        @change="handlePriceChange(row)"
+      />
+      <span v-else>{{ row.productPrice || '-' }}</span>
+    </template>
 
-        <!-- 产品单价 -->
-        <template v-if="column.key === 'productPrice'">
-          <InputNumber
-            v-if="!disabled"
-            v-model:value="record.productPrice"
-            :min="0"
-            :precision="2"
-            @change="(value: number | null) => onPriceChange(value, index)"
-            class="w-full"
-          />
-          <span v-else>{{ record.productPrice || '-' }}</span>
-        </template>
+    <template #taxPercent="{ row }">
+      <InputNumber
+        v-if="!disabled"
+        v-model:value="row.taxPercent"
+        :min="0"
+        :max="100"
+        :precision="2"
+        @change="handlePriceChange(row)"
+      />
+      <span v-else>{{ row.taxPercent || '-' }}</span>
+    </template>
 
-        <!-- 税率 -->
-        <template v-if="column.key === 'taxPercent'">
-          <InputNumber
-            v-if="!disabled"
-            v-model:value="record.taxPercent"
-            :min="0"
-            :max="100"
-            :precision="2"
-            @change="(value: number | null) => onTaxPercentChange(value, index)"
-            class="w-full"
-          />
-          <span v-else>{{ record.taxPercent || '-' }}</span>
-        </template>
+    <template #remark="{ row }">
+      <Input v-if="!disabled" v-model:value="row.remark" class="w-full" />
+      <span v-else>{{ row.remark || '-' }}</span>
+    </template>
 
-        <!-- 备注 -->
-        <template v-if="column.key === 'remark'">
-          <Input
-            v-if="!disabled"
-            v-model:value="record.remark"
-            @change="
-              (e: Event) =>
-                onRemarkChange((e.target as HTMLInputElement).value, index)
-            "
-            class="w-full"
-          />
-          <span v-else>{{ record.remark || '-' }}</span>
-        </template>
-
-        <!-- 操作 -->
-        <template v-if="column.key === 'operation'">
-          <Button
-            v-if="!disabled"
-            type="link"
-            danger
-            size="small"
-            @click="handleDelete(index)"
-          >
-            删除
-          </Button>
-        </template>
-      </template>
-    </Table>
-
-    <!-- 合计行 -->
-    <div class="mt-2 border bg-gray-50 p-2">
-      <div class="flex justify-between text-sm">
-        <span class="font-medium">合计：</span>
-        <div class="flex space-x-4">
-          <span>数量：{{ getSummaries().count }}</span>
-          <span>金额：{{ getSummaries().totalProductPrice }}</span>
-          <span>税额：{{ getSummaries().taxPrice }}</span>
-          <span>税额合计：{{ getSummaries().totalPrice }}</span>
+    <template #bottom>
+      <!-- 合计行 -->
+      <div class="mt-2 border bg-gray-50 p-2">
+        <div class="flex justify-between text-sm">
+          <span class="font-medium">合计：</span>
+          <div class="flex space-x-4">
+            <span>数量：{{ getSummaries().count }}</span>
+            <span>金额：{{ getSummaries().totalProductPrice }}</span>
+            <span>税额：{{ getSummaries().taxPrice }}</span>
+            <span>税额合计：{{ getSummaries().totalPrice }}</span>
+          </div>
         </div>
       </div>
-    </div>
-  </div>
+
+      <TableAction
+        v-if="!disabled"
+        class="mt-4 flex justify-center"
+        :actions="[
+          {
+            label: '添加产品',
+            type: 'default',
+            onClick: handleAdd,
+          },
+        ]"
+      />
+    </template>
+
+    <template #actions="{ row }">
+      <TableAction
+        v-if="!disabled"
+        :actions="[
+          {
+            label: '删除',
+            type: 'link',
+            danger: true,
+            popConfirm: {
+              title: '确认删除该产品吗？',
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </template>
+  </Grid>
 </template>
diff --git a/apps/web-antd/src/views/erp/purchase/order/modules/form.vue b/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
index 93d62604..fc56e02d 100644
--- a/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
+++ b/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
@@ -67,6 +67,12 @@ watch(
   { deep: true },
 );
 
+const handleUpdateItems = (items: ErpPurchaseOrderApi.PurchaseOrderItem[]) => {
+  if (formData.value) {
+    formData.value.items = items;
+  }
+};
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -138,6 +144,7 @@ defineExpose({ modalApi });
               ref="itemFormRef"
               :items="formData?.items || []"
               :disabled="formType === 'detail'"
+              @update:items="handleUpdateItems"
             />
           </div>
         </a-tab-pane>

From 83010b659029a690457b4b940f91d4756b40bfc7 Mon Sep 17 00:00:00 2001
From: nehc <934298133@qq.com>
Date: Thu, 24 Jul 2025 15:44:00 +0800
Subject: [PATCH 06/11] =?UTF-8?q?style(@vben/web-antd):=20erp-=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E9=87=87=E8=B4=AD=E8=AE=A2=E5=8D=95=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 更新 Tab 卡片样式，使用 border 和 bg-card 类
- 修改合计行样式，使用 rounded、border、bg-muted 和 text-muted-foreground 类
- 调整字体颜色，使用 text-foreground 类
---
 .../erp/purchase/order/modules/PurchaseOrderItemForm.vue    | 6 +++---
 apps/web-antd/src/views/erp/purchase/order/modules/form.vue | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue b/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
index f1725432..977d52a2 100644
--- a/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
+++ b/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
@@ -232,9 +232,9 @@ defineExpose({ validate, getData, init });
 
     <template #bottom>
       <!-- 合计行 -->
-      <div class="mt-2 border bg-gray-50 p-2">
-        <div class="flex justify-between text-sm">
-          <span class="font-medium">合计：</span>
+      <div class="border-border bg-muted mt-2 rounded border p-2">
+        <div class="text-muted-foreground flex justify-between text-sm">
+          <span class="text-foreground font-medium">合计：</span>
           <div class="flex space-x-4">
             <span>数量：{{ getSummaries().count }}</span>
             <span>金额：{{ getSummaries().totalProductPrice }}</span>
diff --git a/apps/web-antd/src/views/erp/purchase/order/modules/form.vue b/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
index fc56e02d..cc3fe0c0 100644
--- a/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
+++ b/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
@@ -136,7 +136,7 @@ defineExpose({ modalApi });
     <Form />
 
     <!-- Tab卡片 -->
-    <div class="mt-4 rounded-lg border border-gray-200 p-2">
+    <div class="border-border bg-card mt-4 rounded-lg border p-2">
       <a-tabs default-active-key="1">
         <a-tab-pane key="1" tab="订单产品清单">
           <div class="p-4">

From e319888240b618d3f6230cb5341020acfa95ebf9 Mon Sep 17 00:00:00 2001
From: nehc <934298133@qq.com>
Date: Thu, 24 Jul 2025 17:13:15 +0800
Subject: [PATCH 07/11] =?UTF-8?q?feat(@vben/web-antd):=20erp-=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E9=87=87=E8=B4=AD=E8=AE=A2=E5=8D=95=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=92=8C=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加订单单号字段并设置为只读
- 将附件上传组件替换为 FileUpload
- 新增产品清单字段
- 调整表单项的布局和样式
- 优化订单产品清单的展示方式
---
 .../src/views/erp/purchase/order/data.ts      | 38 ++++++++++++++++---
 .../order/modules/PurchaseOrderItemForm.vue   |  1 +
 .../views/erp/purchase/order/modules/form.vue | 34 ++++++++---------
 3 files changed, 49 insertions(+), 24 deletions(-)

diff --git a/apps/web-antd/src/views/erp/purchase/order/data.ts b/apps/web-antd/src/views/erp/purchase/order/data.ts
index 60f9e295..7a3ea19c 100644
--- a/apps/web-antd/src/views/erp/purchase/order/data.ts
+++ b/apps/web-antd/src/views/erp/purchase/order/data.ts
@@ -12,6 +12,15 @@ import { DICT_TYPE, getDictOptions } from '#/utils';
 /** 表单的配置项 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '系统自动生成',
+        disabled: true,
+      },
+      fieldName: 'no',
+      label: '订单单号',
+    },
     {
       component: 'ApiSelect',
       componentProps: {
@@ -50,17 +59,35 @@ export function useFormSchema(): VbenFormSchema[] {
       },
       fieldName: 'remark',
       label: '备注',
-      formItemClass: 'col-span-2',
+      formItemClass: 'col-span-3',
     },
     {
-      component: 'Input',
+      component: 'FileUpload',
       componentProps: {
-        placeholder: '请输入附件地址',
-        class: 'w-full',
+        maxNumber: 5,
+        maxSize: 10,
+        accept: [
+          'pdf',
+          'doc',
+          'docx',
+          'xls',
+          'xlsx',
+          'txt',
+          'jpg',
+          'jpeg',
+          'png',
+        ],
+        showDescription: true,
       },
       fieldName: 'fileUrl',
       label: '附件',
-      formItemClass: 'col-span-2',
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'product',
+      label: '产品清单',
+      component: 'Input',
+      formItemClass: 'col-span-3',
     },
     {
       component: 'InputNumber',
@@ -214,6 +241,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入订单单号',
         allowClear: true,
+        disabled: true,
       },
     },
     {
diff --git a/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue b/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
index 977d52a2..2849755b 100644
--- a/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
+++ b/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
@@ -40,6 +40,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     border: true,
     showOverflow: true,
     autoResize: true,
+    minHeight: 250,
     keepSource: true,
     rowConfig: {
       keyField: 'id',
diff --git a/apps/web-antd/src/views/erp/purchase/order/modules/form.vue b/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
index cc3fe0c0..621d0f38 100644
--- a/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
+++ b/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
@@ -34,9 +34,10 @@ const [Form, formApi] = useVbenForm({
     componentProps: {
       class: 'w-full',
     },
+    labelWidth: 120,
   },
-  wrapperClass: 'grid-cols-2',
-  layout: 'horizontal',
+  wrapperClass: 'grid-cols-3',
+  layout: 'vertical',
   schema: useFormSchema(),
   showDefaultActions: false,
 });
@@ -133,22 +134,17 @@ defineExpose({ modalApi });
     :closable="true"
     :mask-closable="true"
   >
-    <Form />
-
-    <!-- Tab卡片 -->
-    <div class="border-border bg-card mt-4 rounded-lg border p-2">
-      <a-tabs default-active-key="1">
-        <a-tab-pane key="1" tab="订单产品清单">
-          <div class="p-4">
-            <PurchaseOrderItemForm
-              ref="itemFormRef"
-              :items="formData?.items || []"
-              :disabled="formType === 'detail'"
-              @update:items="handleUpdateItems"
-            />
-          </div>
-        </a-tab-pane>
-      </a-tabs>
-    </div>
+    <Form class="mx-3">
+      <template #product="slotProps">
+        <PurchaseOrderItemForm
+          v-bind="slotProps"
+          ref="itemFormRef"
+          class="w-full"
+          :items="formData?.items || []"
+          :disabled="formType === 'detail'"
+          @update:items="handleUpdateItems"
+        />
+      </template>
+    </Form>
   </Modal>
 </template>

From 8a7239ce2435d25d6810b4e4c31552406c06dfbe Mon Sep 17 00:00:00 2001
From: nehc <934298133@qq.com>
Date: Fri, 25 Jul 2025 19:20:39 +0800
Subject: [PATCH 08/11] =?UTF-8?q?feat(@vben/web-antd):=20erp-=E9=87=87?=
 =?UTF-8?q?=E8=B4=AD=E8=AE=A2=E5=8D=95=E8=A1=A8=E5=8D=95=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用 handleValuesChange
- 优化 discountPrice 和 totalPrice 的计算逻辑
- 改进子表单的验证和数据处理
- 统一数值格式化处理
- 优化表格数据的更新方式
---
 .../crm/product/modules/product-table.vue     |  2 +-
 .../src/views/erp/purchase/order/data.ts      |  6 +-
 .../order/modules/PurchaseOrderItemForm.vue   | 70 ++++++++++++++-----
 .../views/erp/purchase/order/modules/form.vue | 69 ++++++++++--------
 4 files changed, 97 insertions(+), 50 deletions(-)

diff --git a/apps/web-antd/src/views/crm/product/modules/product-table.vue b/apps/web-antd/src/views/crm/product/modules/product-table.vue
index 4b01eacd..9518396d 100644
--- a/apps/web-antd/src/views/crm/product/modules/product-table.vue
+++ b/apps/web-antd/src/views/crm/product/modules/product-table.vue
@@ -66,7 +66,7 @@ function handleUpdateValue(row: any) {
   } else {
     tableData.value[index] = row;
   }
-  emit('update:products', tableData.value);
+  emit('update:products', [...tableData.value]);
 }
 
 /** 表格配置 */
diff --git a/apps/web-antd/src/views/erp/purchase/order/data.ts b/apps/web-antd/src/views/erp/purchase/order/data.ts
index 7a3ea19c..9a037f94 100644
--- a/apps/web-antd/src/views/erp/purchase/order/data.ts
+++ b/apps/web-antd/src/views/erp/purchase/order/data.ts
@@ -3,6 +3,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { erpCountInputFormatter, erpPriceInputFormatter } from '@vben/utils';
 
+import { z } from '#/adapter/form';
 import { getAccountSimpleList } from '#/api/erp/finance/account';
 import { getProductSimpleList } from '#/api/erp/product/product';
 import { getSupplierSimpleList } from '#/api/erp/purchase/supplier';
@@ -96,11 +97,11 @@ export function useFormSchema(): VbenFormSchema[] {
         min: 0,
         max: 100,
         precision: 2,
-        formatter: erpPriceInputFormatter,
         style: { width: '100%' },
       },
       fieldName: 'discountPercent',
       label: '优惠率(%)',
+      rules: z.number().min(0).optional(),
     },
     {
       component: 'InputNumber',
@@ -146,11 +147,12 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入支付订金',
         precision: 2,
-        formatter: erpPriceInputFormatter,
         style: { width: '100%' },
+        min: 0,
       },
       fieldName: 'depositPrice',
       label: '支付订金',
+      rules: z.number().min(0).optional(),
     },
   ];
 }
diff --git a/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue b/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
index 2849755b..7bcede09 100644
--- a/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
+++ b/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
@@ -16,13 +16,19 @@ import { usePurchaseOrderItemTableColumns } from '../data';
 const props = withDefaults(defineProps<Props>(), {
   items: () => [],
   disabled: false,
+  discountPercent: 0,
 });
 
-const emit = defineEmits(['update:items']);
+const emit = defineEmits([
+  'update:items',
+  'update:discount-price',
+  'update:total-price',
+]);
 
 interface Props {
   items?: ErpPurchaseOrderApi.PurchaseOrderItem[];
   disabled?: boolean;
+  discountPercent?: number;
 }
 
 const tableData = ref<ErpPurchaseOrderApi.PurchaseOrderItem[]>([]);
@@ -62,7 +68,8 @@ watch(
       return;
     }
     await nextTick();
-    tableData.value = items;
+    tableData.value = [...items];
+    await nextTick();
     gridApi.grid.reloadData(tableData.value);
   },
   {
@@ -70,6 +77,30 @@ watch(
   },
 );
 
+/** 计算 discountPrice、totalPrice 价格 */
+watch(
+  () => [tableData.value, props.discountPercent],
+  () => {
+    if (!tableData.value || tableData.value.length === 0) {
+      return;
+    }
+    const totalPrice = tableData.value.reduce(
+      (prev, curr) => prev + (curr.totalPrice || 0),
+      0,
+    );
+    const discountPrice =
+      props.discountPercent === null
+        ? 0
+        : erpPriceMultiply(totalPrice, props.discountPercent / 100);
+    const finalTotalPrice = totalPrice - discountPrice;
+
+    // 发送计算结果给父组件
+    emit('update:discount-price', discountPrice);
+    emit('update:total-price', finalTotalPrice);
+  },
+  { deep: true },
+);
+
 /** 初始化 */
 onMounted(async () => {
   productOptions.value = await getProductSimpleList();
@@ -81,6 +112,11 @@ function handleAdd() {
 
 function handleDelete(row: ErpPurchaseOrderApi.PurchaseOrderItem) {
   gridApi.grid.remove(row);
+  const index = tableData.value.findIndex((item) => item.id === row.id);
+  if (index !== -1) {
+    tableData.value.splice(index, 1);
+  }
+  emit('update:items', [...tableData.value]);
 }
 
 async function handleProductChange(productId: any, row: any) {
@@ -121,7 +157,7 @@ function handleUpdateValue(row: any) {
   } else {
     tableData.value[index] = row;
   }
-  emit('update:items', tableData.value);
+  emit('update:items', [...tableData.value]);
 }
 
 const getSummaries = (): {
@@ -131,7 +167,7 @@ const getSummaries = (): {
   totalPrice: number;
   totalProductPrice: number;
 } => {
-  const sums = {
+  return {
     productName: '合计',
     count: tableData.value.reduce((sum, item) => sum + (item.count || 0), 0),
     totalProductPrice: tableData.value.reduce(
@@ -147,20 +183,21 @@ const getSummaries = (): {
       0,
     ),
   };
-  return sums;
 };
 
 const validate = async (): Promise<void> => {
   for (let i = 0; i < tableData.value.length; i++) {
     const item = tableData.value[i];
-    if (!item.productId) {
-      throw new Error(`第 ${i + 1} 行：产品不能为空`);
-    }
-    if (!item.count || item.count <= 0) {
-      throw new Error(`第 ${i + 1} 行：产品数量不能为空`);
-    }
-    if (!item.productPrice || item.productPrice <= 0) {
-      throw new Error(`第 ${i + 1} 行：产品单价不能为空`);
+    if (item) {
+      if (!item.productId) {
+        throw new Error(`第 ${i + 1} 行：产品不能为空`);
+      }
+      if (!item.count || item.count <= 0) {
+        throw new Error(`第 ${i + 1} 行：产品数量不能为空`);
+      }
+      if (!item.productPrice || item.productPrice <= 0) {
+        throw new Error(`第 ${i + 1} 行：产品单价不能为空`);
+      }
     }
   }
 };
@@ -169,8 +206,10 @@ const getData = (): ErpPurchaseOrderApi.PurchaseOrderItem[] => tableData.value;
 const init = (
   items: ErpPurchaseOrderApi.PurchaseOrderItem[] | undefined,
 ): void => {
-  tableData.value = items || [];
-  gridApi.grid.reloadData(tableData.value);
+  tableData.value = items ? [...items] : [];
+  nextTick(() => {
+    gridApi.grid.reloadData(tableData.value);
+  });
 };
 
 defineExpose({ validate, getData, init });
@@ -232,7 +271,6 @@ defineExpose({ validate, getData, init });
     </template>
 
     <template #bottom>
-      <!-- 合计行 -->
       <div class="border-border bg-muted mt-2 rounded border p-2">
         <div class="text-muted-foreground flex justify-between text-sm">
           <span class="text-foreground font-medium">合计：</span>
diff --git a/apps/web-antd/src/views/erp/purchase/order/modules/form.vue b/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
index 621d0f38..87611521 100644
--- a/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
+++ b/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
 
-import { computed, ref, watch } from 'vue';
+import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
-import { erpPriceMultiply, formatDateTime } from '@vben/utils';
+import { formatDateTime } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
@@ -40,52 +40,56 @@ const [Form, formApi] = useVbenForm({
   layout: 'vertical',
   schema: useFormSchema(),
   showDefaultActions: false,
+  handleValuesChange: (values, changedFields) => {
+    if (formData.value && changedFields.includes('discountPercent')) {
+      formData.value.discountPercent = values.discountPercent;
+    }
+  },
 });
 
-/** 计算 discountPrice、totalPrice 价格 */
-watch(
-  () => [formData.value?.items, formData.value?.discountPercent],
-  () => {
-    if (!formData.value?.items) {
-      return;
-    }
-    // 计算 discountPrice 价格
-    let totalPrice = 0;
-    formData.value.items.forEach((item) => {
-      totalPrice += item.totalPrice || 0;
-    });
-    formData.value.discountPrice = erpPriceMultiply(
-      totalPrice,
-      formData.value.discountPercent / 100,
-    );
-    formData.value.totalPrice = totalPrice - formData.value.discountPrice;
-    // 更新表单值
-    formApi.setValues({
-      discountPrice: formData.value.discountPrice,
-      totalPrice: formData.value.totalPrice,
-    });
-  },
-  { deep: true },
-);
-
 const handleUpdateItems = (items: ErpPurchaseOrderApi.PurchaseOrderItem[]) => {
+  formData.value = modalApi.getData<ErpPurchaseOrderApi.PurchaseOrder>();
   if (formData.value) {
     formData.value.items = items;
   }
 };
 
+const handleUpdateDiscountPrice = (discountPrice: number) => {
+  if (formData.value) {
+    formData.value.discountPrice = discountPrice;
+    formApi.setValues({
+      discountPrice: formData.value.discountPrice,
+    });
+  }
+};
+
+const handleUpdateTotalPrice = (totalPrice: number) => {
+  if (formData.value) {
+    formData.value.totalPrice = totalPrice;
+    formApi.setValues({
+      totalPrice: formData.value.totalPrice,
+    });
+  }
+};
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
-    await itemFormRef.value?.validate();
+    // 验证子表单
+    if (itemFormRef.value && typeof itemFormRef.value.validate === 'function') {
+      await itemFormRef.value.validate();
+    }
     modalApi.lock();
     // 提交表单
     const data =
       (await formApi.getValues()) as ErpPurchaseOrderApi.PurchaseOrder;
-    data.items = itemFormRef.value?.getData();
+    data.items =
+      itemFormRef.value && typeof itemFormRef.value.getData === 'function'
+        ? itemFormRef.value.getData()
+        : [];
     try {
       await (formType.value === 'create'
         ? createPurchaseOrder(data)
@@ -140,9 +144,12 @@ defineExpose({ modalApi });
           v-bind="slotProps"
           ref="itemFormRef"
           class="w-full"
-          :items="formData?.items || []"
+          :items="formData?.items ?? []"
           :disabled="formType === 'detail'"
+          :discount-percent="formData?.discountPercent ?? 0"
           @update:items="handleUpdateItems"
+          @update:discount-price="handleUpdateDiscountPrice"
+          @update:total-price="handleUpdateTotalPrice"
         />
       </template>
     </Form>

From f242f1c37db3cc2108d6b793ded75b0310cfc707 Mon Sep 17 00:00:00 2001
From: nehc <934298133@qq.com>
Date: Sat, 26 Jul 2025 17:36:59 +0800
Subject: [PATCH 09/11] =?UTF-8?q?feat(@vben/web-antd):=20erp-=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E4=B8=8A=E4=BC=A0=E9=99=84=E4=BB=B6=E5=8F=8A=E9=AA=8C?=
 =?UTF-8?q?=E8=AF=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修改订单时间格式为 timestamp
- 限制文件上传数量为 1
- 调整表格列宽和显示逻辑
- 优化子表单验证和提交逻辑
- 修复文件上传组件的兼容性问题
- 优化产品清单的初始化和验证
---
 .../src/views/erp/purchase/order/data.ts      | 19 +++--
 .../order/modules/PurchaseOrderItemForm.vue   | 66 +++++++++++----
 .../views/erp/purchase/order/modules/form.vue | 84 ++++++++++++++++---
 3 files changed, 138 insertions(+), 31 deletions(-)

diff --git a/apps/web-antd/src/views/erp/purchase/order/data.ts b/apps/web-antd/src/views/erp/purchase/order/data.ts
index 9a037f94..a623680c 100644
--- a/apps/web-antd/src/views/erp/purchase/order/data.ts
+++ b/apps/web-antd/src/views/erp/purchase/order/data.ts
@@ -44,7 +44,7 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '选择订单时间',
         showTime: true,
         format: 'YYYY-MM-DD HH:mm:ss',
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
         style: { width: '100%' },
       },
       fieldName: 'orderTime',
@@ -65,7 +65,7 @@ export function useFormSchema(): VbenFormSchema[] {
     {
       component: 'FileUpload',
       componentProps: {
-        maxNumber: 5,
+        maxNumber: 1,
         maxSize: 10,
         accept: [
           'pdf',
@@ -340,17 +340,19 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'no',
       title: '订单单号',
-      width: 260,
+      width: 200,
       fixed: 'left',
     },
     {
       field: 'productNames',
       title: '产品信息',
       showOverflow: 'tooltip',
+      minWidth: 120,
     },
     {
       field: 'supplierName',
       title: '供应商',
+      minWidth: 120,
     },
     {
       field: 'orderTime',
@@ -361,40 +363,45 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'creatorName',
       title: '创建人',
+      minWidth: 120,
     },
     {
       field: 'totalCount',
       title: '总数量',
-      formatter: 'formatNumber',
+      minWidth: 120,
     },
     {
       field: 'inCount',
       title: '入库数量',
-      formatter: 'formatNumber',
+      minWidth: 120,
     },
     {
       field: 'returnCount',
       title: '退货数量',
-      formatter: 'formatNumber',
+      minWidth: 120,
     },
     {
       field: 'totalProductPrice',
       title: '金额合计',
       formatter: 'formatNumber',
+      minWidth: 120,
     },
     {
       field: 'totalPrice',
       title: '含税金额',
       formatter: 'formatNumber',
+      minWidth: 120,
     },
     {
       field: 'depositPrice',
       title: '支付订金',
       formatter: 'formatNumber',
+      minWidth: 120,
     },
     {
       field: 'status',
       title: '状态',
+      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.ERP_AUDIT_STATUS },
diff --git a/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue b/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
index 7bcede09..6ecde04c 100644
--- a/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
+++ b/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
@@ -58,6 +58,16 @@ const [Grid, gridApi] = useVbenVxeGrid({
       enabled: false,
     },
   },
+  gridEvents: {
+    // editClosed: ({ row }) => {
+    //   // 当单元格编辑完成时，同步更新tableData
+    //   const index = tableData.value.findIndex((item) => item.id === row.id);
+    //   if (index !== -1) {
+    //     tableData.value[index] = { ...row };
+    //     emit('update:items', [...tableData.value]);
+    //   }
+    // },
+  },
 });
 
 /** 监听外部传入的列数据 */
@@ -107,7 +117,25 @@ onMounted(async () => {
 });
 
 function handleAdd() {
-  gridApi.grid.insertAt(null, -1);
+  const newRow = {
+    id: tableData.value.length + 1,
+    productId: null,
+    productName: '',
+    productUnitId: null,
+    productUnitName: '',
+    productBarCode: '',
+    count: 1,
+    productPrice: 0,
+    totalProductPrice: 0,
+    taxPercent: 0,
+    taxPrice: 0,
+    totalPrice: 0,
+    stockCount: 0,
+    remark: '',
+  };
+  tableData.value.push(newRow);
+  gridApi.grid.insertAt(newRow, -1);
+  emit('update:items', [...tableData.value]);
 }
 
 function handleDelete(row: ErpPurchaseOrderApi.PurchaseOrderItem) {
@@ -185,20 +213,26 @@ const getSummaries = (): {
   };
 };
 
-const validate = async (): Promise<void> => {
-  for (let i = 0; i < tableData.value.length; i++) {
-    const item = tableData.value[i];
-    if (item) {
-      if (!item.productId) {
-        throw new Error(`第 ${i + 1} 行：产品不能为空`);
-      }
-      if (!item.count || item.count <= 0) {
-        throw new Error(`第 ${i + 1} 行：产品数量不能为空`);
-      }
-      if (!item.productPrice || item.productPrice <= 0) {
-        throw new Error(`第 ${i + 1} 行：产品单价不能为空`);
+const validate = async (): Promise<boolean> => {
+  try {
+    for (let i = 0; i < tableData.value.length; i++) {
+      const item = tableData.value[i];
+      if (item) {
+        if (!item.productId) {
+          throw new Error(`第 ${i + 1} 行：产品不能为空`);
+        }
+        if (!item.count || item.count <= 0) {
+          throw new Error(`第 ${i + 1} 行：产品数量不能为空`);
+        }
+        if (!item.productPrice || item.productPrice <= 0) {
+          throw new Error(`第 ${i + 1} 行：产品单价不能为空`);
+        }
       }
     }
+    return true;
+  } catch (error) {
+    console.error('验证失败:', error);
+    throw error;
   }
 };
 
@@ -212,7 +246,11 @@ const init = (
   });
 };
 
-defineExpose({ validate, getData, init });
+defineExpose({
+  validate,
+  getData,
+  init,
+});
 </script>
 
 <template>
diff --git a/apps/web-antd/src/views/erp/purchase/order/modules/form.vue b/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
index 87611521..9b605f24 100644
--- a/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
+++ b/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
 
-import { computed, ref } from 'vue';
+import { computed, nextTick, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
-import { formatDateTime } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
@@ -72,6 +71,9 @@ const handleUpdateTotalPrice = (totalPrice: number) => {
   }
 };
 
+/**
+ * 创建或更新采购订单
+ */
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -79,17 +81,49 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 验证子表单
-    if (itemFormRef.value && typeof itemFormRef.value.validate === 'function') {
-      await itemFormRef.value.validate();
+    await nextTick(); // 确保组件已经挂载
+
+    // 获取组件实例 - itemFormRef.value 是数组，需要访问第一个元素
+    const itemFormInstance = Array.isArray(itemFormRef.value)
+      ? itemFormRef.value[0]
+      : itemFormRef.value;
+    if (itemFormInstance && typeof itemFormInstance.validate === 'function') {
+      try {
+        const isValid = await itemFormInstance.validate();
+        if (!isValid) {
+          message.error('子表单验证失败');
+          return;
+        }
+      } catch (error) {
+        message.error(error.message || '子表单验证失败');
+        return;
+      }
+    } else {
+      message.error('子表单验证方法不存在');
+      return;
     }
+
+    // 验证产品清单不能为空
+    if (!formData.value?.items || formData.value.items.length === 0) {
+      message.error('产品清单不能为空，请至少添加一个产品');
+      return;
+    }
+
     modalApi.lock();
     // 提交表单
     const data =
       (await formApi.getValues()) as ErpPurchaseOrderApi.PurchaseOrder;
-    data.items =
-      itemFormRef.value && typeof itemFormRef.value.getData === 'function'
-        ? itemFormRef.value.getData()
-        : [];
+    data.items = formData.value?.items;
+    if (data.items) {
+      data.items = data.items.map((item) => {
+        const { ...itemWithoutId } = item;
+        return itemWithoutId;
+      });
+    }
+    // 将文件数组转换为字符串
+    if (data.fileUrl && Array.isArray(data.fileUrl)) {
+      data.fileUrl = data.fileUrl.length > 0 ? data.fileUrl[0] : '';
+    }
     try {
       await (formType.value === 'create'
         ? createPurchaseOrder(data)
@@ -109,18 +143,46 @@ const [Modal, modalApi] = useVbenModal({
     }
     // 加载数据
     const data = modalApi.getData<{ id?: number; type: string }>();
-    if (!data || !data.id) {
+    if (!data) {
       return;
     }
     formType.value = data.type;
+
+    if (!data.id) {
+      // 初始化空的表单数据
+      formData.value = { items: [] } as ErpPurchaseOrderApi.PurchaseOrder;
+      await nextTick();
+      const itemFormInstance = Array.isArray(itemFormRef.value)
+        ? itemFormRef.value[0]
+        : itemFormRef.value;
+      if (itemFormInstance && typeof itemFormInstance.init === 'function') {
+        itemFormInstance.init([]);
+      }
+      return;
+    }
+
     modalApi.lock();
     try {
       formData.value = await getPurchaseOrder(data.id);
-      formData.value.orderTime = formatDateTime(formData.value.orderTime);
+      // 将字符串形式的文件URL转换为数组形式以适配FileUpload组件
+      if (
+        formData.value.fileUrl &&
+        typeof formData.value.fileUrl === 'string'
+      ) {
+        formData.value.fileUrl = formData.value.fileUrl
+          ? [formData.value.fileUrl]
+          : [];
+      }
       // 设置到 values
       await formApi.setValues(formData.value);
       // 初始化子表单
-      itemFormRef.value?.init(formData.value.items || []);
+      await nextTick();
+      const itemFormInstance = Array.isArray(itemFormRef.value)
+        ? itemFormRef.value[0]
+        : itemFormRef.value;
+      if (itemFormInstance && typeof itemFormInstance.init === 'function') {
+        itemFormInstance.init(formData.value.items || []);
+      }
     } finally {
       modalApi.unlock();
     }

From b3a2d29a3b9dad88429af4b946b58532ec940f44 Mon Sep 17 00:00:00 2001
From: nehc <934298133@qq.com>
Date: Mon, 28 Jul 2025 14:03:25 +0800
Subject: [PATCH 10/11] =?UTF-8?q?feat(@vben/web-antd):=20erp-=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E9=87=87=E8=B4=AD=E8=AE=A2=E5=8D=95=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除采购订单明细项表单配置
- 调整采购订单表格列定义
- 优化采购订单删除操作，增加加载提示和错误处理
- 添加采购订单详情页面
- 重新计算采购订单项的价格字段
- 调整采购订单状态更新和删除的交互方式，增加二次确认
---
 .../src/api/erp/purchase/order/index.ts       |   1 +
 .../src/views/erp/purchase/order/data.ts      | 126 ++----------------
 .../src/views/erp/purchase/order/index.vue    |  49 +++++--
 .../order/modules/PurchaseOrderItemForm.vue   |  30 +++--
 .../views/erp/purchase/order/modules/form.vue |  11 +-
 5 files changed, 70 insertions(+), 147 deletions(-)

diff --git a/apps/web-antd/src/api/erp/purchase/order/index.ts b/apps/web-antd/src/api/erp/purchase/order/index.ts
index 247dd61b..ae84c243 100644
--- a/apps/web-antd/src/api/erp/purchase/order/index.ts
+++ b/apps/web-antd/src/api/erp/purchase/order/index.ts
@@ -13,6 +13,7 @@ export namespace ErpPurchaseOrderApi {
     productUnitId?: number; // 产品单位编号
     productUnitName?: string; // 产品单位名称
     productPrice?: number; // 产品单价，单位：元
+    totalProductPrice?: number; // 产品总价，单位：元
     count?: number; // 数量
     totalPrice?: number; // 总价，单位：元
     taxPercent?: number; // 税率，百分比
diff --git a/apps/web-antd/src/views/erp/purchase/order/data.ts b/apps/web-antd/src/views/erp/purchase/order/data.ts
index a623680c..0aa86f65 100644
--- a/apps/web-antd/src/views/erp/purchase/order/data.ts
+++ b/apps/web-antd/src/views/erp/purchase/order/data.ts
@@ -1,7 +1,7 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { erpCountInputFormatter, erpPriceInputFormatter } from '@vben/utils';
+import { erpPriceInputFormatter } from '@vben/utils';
 
 import { z } from '#/adapter/form';
 import { getAccountSimpleList } from '#/api/erp/finance/account';
@@ -13,6 +13,16 @@ import { DICT_TYPE, getDictOptions } from '#/utils';
 /** 表单的配置项 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
+    {
+      component: 'Input',
+      componentProps: {
+        style: { display: 'none' },
+      },
+      fieldName: 'id',
+      label: 'ID',
+      hideLabel: true,
+      formItemClass: 'hidden',
+    },
     {
       component: 'Input',
       componentProps: {
@@ -160,7 +170,7 @@ export function useFormSchema(): VbenFormSchema[] {
 /** 采购订单项表格列定义 */
 export function usePurchaseOrderItemTableColumns(): VxeTableGridOptions['columns'] {
   return [
-    { type: 'seq', title: '序号', minWidth: 50 },
+    { type: 'seq', title: '序号', minWidth: 50, fixed: 'left' },
     {
       field: 'productId',
       title: '产品名称',
@@ -226,7 +236,7 @@ export function usePurchaseOrderItemTableColumns(): VxeTableGridOptions['columns
     },
     {
       title: '操作',
-      width: 120,
+      width: 50,
       fixed: 'right',
       slots: { default: 'actions' },
     },
@@ -415,113 +425,3 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
   ];
 }
-
-/** 采购订单明细项表单配置 */
-export function useItemFormSchema(
-  onProductChange?: (productId: number) => void,
-): VbenFormSchema[] {
-  return [
-    {
-      component: 'ApiSelect',
-      componentProps: {
-        placeholder: '请选择产品',
-        allowClear: true,
-        showSearch: true,
-        api: getProductSimpleList,
-        fieldNames: {
-          label: 'name',
-          value: 'id',
-        },
-        onChange: onProductChange,
-      },
-      fieldName: 'productId',
-      label: '产品名称',
-      rules: 'required',
-    },
-    {
-      component: 'InputNumber',
-      componentProps: {
-        placeholder: '请输入数量',
-        min: 1,
-        precision: 2,
-        formatter: erpCountInputFormatter,
-        style: { width: '100%' },
-      },
-      fieldName: 'count',
-      label: '数量',
-      rules: 'required',
-    },
-    {
-      component: 'InputNumber',
-      componentProps: {
-        placeholder: '请输入单价',
-        min: 0,
-        precision: 2,
-        formatter: erpPriceInputFormatter,
-        style: { width: '100%' },
-      },
-      fieldName: 'productPrice',
-      label: '产品单价',
-      rules: 'required',
-    },
-    {
-      component: 'InputNumber',
-      componentProps: {
-        placeholder: '金额',
-        precision: 2,
-        formatter: erpPriceInputFormatter,
-        disabled: true,
-        style: { width: '100%' },
-      },
-      fieldName: 'totalPrice',
-      label: '金额',
-    },
-    {
-      component: 'InputNumber',
-      componentProps: {
-        placeholder: '请输入税率',
-        min: 0,
-        max: 100,
-        precision: 2,
-        style: { width: '100%' },
-      },
-      fieldName: 'taxPercent',
-      label: '税率(%)',
-    },
-    {
-      component: 'InputNumber',
-      componentProps: {
-        placeholder: '税额',
-        precision: 2,
-        formatter: erpPriceInputFormatter,
-        disabled: true,
-        style: { width: '100%' },
-      },
-      fieldName: 'taxPrice',
-      label: '税额',
-    },
-    {
-      component: 'InputNumber',
-      componentProps: {
-        placeholder: '税额合计',
-        precision: 2,
-        formatter: erpPriceInputFormatter,
-        disabled: true,
-        style: { width: '100%' },
-      },
-      fieldName: 'totalTaxPrice',
-      label: '税额合计',
-    },
-    {
-      component: 'Textarea',
-      componentProps: {
-        placeholder: '请输入备注',
-        autoSize: { minRows: 2, maxRows: 4 },
-        class: 'w-full',
-      },
-      fieldName: 'remark',
-      label: '备注',
-      formItemClass: 'col-span-2',
-    },
-  ];
-}
diff --git a/apps/web-antd/src/views/erp/purchase/order/index.vue b/apps/web-antd/src/views/erp/purchase/order/index.vue
index f491b0f4..bc9552c8 100644
--- a/apps/web-antd/src/views/erp/purchase/order/index.vue
+++ b/apps/web-antd/src/views/erp/purchase/order/index.vue
@@ -3,7 +3,6 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';
 
 import { ref } from 'vue';
-import { useRouter } from 'vue-router';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
@@ -12,6 +11,7 @@ import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
+  deletePurchaseOrder,
   deletePurchaseOrderList,
   exportPurchaseOrder,
   getPurchaseOrderPage,
@@ -35,8 +35,6 @@ function onRefresh() {
   gridApi.query();
 }
 
-const { push } = useRouter();
-
 const checkedIds = ref<number[]>([]);
 function handleRowCheckboxChange({
   records,
@@ -48,7 +46,7 @@ function handleRowCheckboxChange({
 
 /** 详情 */
 function handleDetail(row: ErpPurchaseOrderApi.PurchaseOrder) {
-  push({ name: 'ErpPurchaseOrderDetail', params: { id: row.id } });
+  formModalApi.setData({ type: 'detail', id: row.id }).open();
 }
 
 /** 新增 */
@@ -62,8 +60,24 @@ function handleEdit(row: ErpPurchaseOrderApi.PurchaseOrder) {
 }
 
 /** 删除 */
-function handleDelete(row: ErpPurchaseOrderApi.PurchaseOrder) {
-  handleBatchDelete([row.id]);
+async function handleDelete(row: ErpPurchaseOrderApi.PurchaseOrder) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    if (row.id) await deletePurchaseOrder(row.id);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess'),
+      key: 'action_process_msg',
+    });
+    onRefresh();
+  } catch {
+    // 处理错误
+  } finally {
+    hideLoading();
+  }
 }
 
 /** 批量删除 */
@@ -195,7 +209,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
               disabled: isEmpty(checkedIds),
               icon: ACTION_ICON.DELETE,
               auth: ['erp:purchase-order:delete'],
-              onClick: handleBatchDelete,
+              popConfirm: {
+                title: `是否删除所选中数据？`,
+                confirm: handleBatchDelete,
+              },
             },
           ]"
         />
@@ -224,18 +241,26 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: row.status === 10 ? '审批' : '反审批',
               type: 'link',
               auth: ['erp:purchase-order:update-status'],
-              onClick: handleUpdateStatus.bind(
-                null,
-                row,
-                row.status === 10 ? 20 : 10,
-              ),
+              popConfirm: {
+                title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
+                confirm: handleUpdateStatus.bind(
+                  null,
+                  row,
+                  row.status === 10 ? 20 : 10,
+                ),
+              },
             },
             {
               label: $t('common.delete'),
               type: 'link',
+              danger: true,
               color: 'error',
               auth: ['erp:purchase-order:delete'],
               onClick: handleDelete.bind(null, row),
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: handleDelete.bind(null, row),
+              },
             },
           ]"
         />
diff --git a/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue b/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
index 6ecde04c..03beaa53 100644
--- a/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
+++ b/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
@@ -58,16 +58,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
       enabled: false,
     },
   },
-  gridEvents: {
-    // editClosed: ({ row }) => {
-    //   // 当单元格编辑完成时，同步更新tableData
-    //   const index = tableData.value.findIndex((item) => item.id === row.id);
-    //   if (index !== -1) {
-    //     tableData.value[index] = { ...row };
-    //     emit('update:items', [...tableData.value]);
-    //   }
-    // },
-  },
 });
 
 /** 监听外部传入的列数据 */
@@ -118,7 +108,6 @@ onMounted(async () => {
 
 function handleAdd() {
   const newRow = {
-    id: tableData.value.length + 1,
     productId: null,
     productName: '',
     productUnitId: null,
@@ -180,7 +169,6 @@ function handlePriceChange(row: any) {
 function handleUpdateValue(row: any) {
   const index = tableData.value.findIndex((item) => item.id === row.id);
   if (index === -1) {
-    row.id = tableData.value.length + 1;
     tableData.value.push(row);
   } else {
     tableData.value[index] = row;
@@ -240,7 +228,23 @@ const getData = (): ErpPurchaseOrderApi.PurchaseOrderItem[] => tableData.value;
 const init = (
   items: ErpPurchaseOrderApi.PurchaseOrderItem[] | undefined,
 ): void => {
-  tableData.value = items ? [...items] : [];
+  tableData.value =
+    items && items.length > 0
+      ? items.map((item) => {
+          const newItem = { ...item };
+          if (newItem.productPrice && newItem.count) {
+            newItem.totalProductPrice =
+              erpPriceMultiply(newItem.productPrice, newItem.count) ?? 0;
+            newItem.taxPrice =
+              erpPriceMultiply(
+                newItem.totalProductPrice,
+                (newItem.taxPercent || 0) / 100,
+              ) ?? 0;
+            newItem.totalPrice = newItem.totalProductPrice + newItem.taxPrice;
+          }
+          return newItem;
+        })
+      : [];
   nextTick(() => {
     gridApi.grid.reloadData(tableData.value);
   });
diff --git a/apps/web-antd/src/views/erp/purchase/order/modules/form.vue b/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
index 9b605f24..d1399bfa 100644
--- a/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
+++ b/apps/web-antd/src/views/erp/purchase/order/modules/form.vue
@@ -80,10 +80,8 @@ const [Modal, modalApi] = useVbenModal({
     if (!valid) {
       return;
     }
-    // 验证子表单
-    await nextTick(); // 确保组件已经挂载
+    await nextTick();
 
-    // 获取组件实例 - itemFormRef.value 是数组，需要访问第一个元素
     const itemFormInstance = Array.isArray(itemFormRef.value)
       ? itemFormRef.value[0]
       : itemFormRef.value;
@@ -114,12 +112,6 @@ const [Modal, modalApi] = useVbenModal({
     const data =
       (await formApi.getValues()) as ErpPurchaseOrderApi.PurchaseOrder;
     data.items = formData.value?.items;
-    if (data.items) {
-      data.items = data.items.map((item) => {
-        const { ...itemWithoutId } = item;
-        return itemWithoutId;
-      });
-    }
     // 将文件数组转换为字符串
     if (data.fileUrl && Array.isArray(data.fileUrl)) {
       data.fileUrl = data.fileUrl.length > 0 ? data.fileUrl[0] : '';
@@ -199,6 +191,7 @@ defineExpose({ modalApi });
     class="w-1/2"
     :closable="true"
     :mask-closable="true"
+    :show-confirm-button="formType !== 'detail'"
   >
     <Form class="mx-3">
       <template #product="slotProps">

From b3942bb8ff772f14cec9bc045a348ee9d1271bd2 Mon Sep 17 00:00:00 2001
From: nehc <934298133@qq.com>
Date: Mon, 28 Jul 2025 14:45:47 +0800
Subject: [PATCH 11/11] =?UTF-8?q?feat(@vben/web-antd):=20erp-=E7=A7=BB?=
 =?UTF-8?q?=E9=99=A4=E9=87=8D=E5=A4=8D=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

-移除了 stock API 中的 getStockCountByProductId 函数
-将 getStockCount 函数的使用范围从 product 模块扩展到 purchase 模块
- 更新了 PurchaseOrderItemForm 组件中的库存查询逻辑
---
 apps/web-antd/src/api/erp/stock/stock/index.ts           | 9 ---------
 .../erp/purchase/order/modules/PurchaseOrderItemForm.vue | 4 ++--
 2 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/apps/web-antd/src/api/erp/stock/stock/index.ts b/apps/web-antd/src/api/erp/stock/stock/index.ts
index 2d33726a..57d4ec22 100644
--- a/apps/web-antd/src/api/erp/stock/stock/index.ts
+++ b/apps/web-antd/src/api/erp/stock/stock/index.ts
@@ -60,15 +60,6 @@ export function getStockCount(productId: number) {
   });
 }
 
-/**
- * 根据产品ID获得库存数量
- */
-export function getStockCountByProductId(productId: number) {
-  return requestClient.get<number>('/erp/stock/get-count', {
-    params: { productId },
-  });
-}
-
 /**
  * 导出产品库存 Excel
  */
diff --git a/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue b/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
index 03beaa53..7eae56d1 100644
--- a/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
+++ b/apps/web-antd/src/views/erp/purchase/order/modules/PurchaseOrderItemForm.vue
@@ -9,7 +9,7 @@ import { Input, InputNumber, Select } from 'ant-design-vue';
 
 import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getProductSimpleList } from '#/api/erp/product/product';
-import { getStockCountByProductId } from '#/api/erp/stock/stock';
+import { getStockCount } from '#/api/erp/stock/stock';
 
 import { usePurchaseOrderItemTableColumns } from '../data';
 
@@ -142,7 +142,7 @@ async function handleProductChange(productId: any, row: any) {
     return;
   }
 
-  const stockCount = await getStockCountByProductId(productId);
+  const stockCount = await getStockCount(productId);
 
   row.productId = productId;
   row.productUnitId = product.unitId;