feat(@vben/web-antd): erp-添加采购订单功能

- 新增采购订单列表页面
- 添加采购订单表单和子表单组件
- 实现采购订单的查询、创建、编辑和删除功能
- 优化采购订单的审批和反审批操作- 增加采购订单的导出功能

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; // 订单工单编号
+    id?: number;
-    no: string; // 采购订单号
+    no?: string;
-    supplierId: number; // 供应商编号
+    supplierId?: number;
-    orderTime: Date; // 订单时间
+    supplierName?: string;
-    totalCount: number; // 合计数量
+    orderTime?: Date | string;
-    totalPrice: number; // 合计金额，单位：元
+    totalCount?: number;
-    status: number; // 状态
+    totalPrice?: number;
-    remark: string; // 备注
+    totalProductPrice?: number;
-    inCount: number; // 采购入库数量
+    discountPercent?: number;
-    returnCount: 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(',') },
   });

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
  */

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>

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>

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' },
+    },
+  ];
+}

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
+    <FormModal @success="onRefresh" />
-      type="link"
+
-      target="_blank"
+    <Grid table-title="采购订单列表">
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
+      <template #toolbar-tools>
-    >
+        <TableAction
-      该功能支持 Vue3 + element-plus 版本！
+          :actions="[
-    </Button>
+            {
-    <br />
+              label: $t('ui.actionTitle.create', ['采购订单']),
-    <Button
+              type: 'primary',
-      type="link"
+              icon: ACTION_ICON.ADD,
-      target="_blank"
+              auth: ['erp:purchase-order:create'],
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/purchase/order/index"
+              onClick: handleCreate,
-    >
+            },
-      可参考
+            {
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/erp/purchase/order/index
+              label: $t('ui.actionTitle.export'),
-      代码，pull request 贡献给我们！
+              type: 'primary',
-    </Button>
+              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>