Kaynağa Gözat

refactor(order-form): 将类型定义从constants迁移到types文件

yz 2 hafta önce
ebeveyn
işleme
d19301d30e

+ 4 - 4
src/components/order-form/material-detail-option.js

@@ -17,10 +17,10 @@ import { MaterialDetailDataSource } from './constants'
 export { MaterialDetailStatus, DEFAULT_PAGINATION_CONFIG, MATERIAL_DETAIL_STATUS_OPTIONS }
 
 /**
- * @typedef {import('./constants').MaterialDetailRecord} MaterialDetailRecord
- * @typedef {import('./constants').MaterialDetailQueryParams} MaterialDetailQueryParams
- * @typedef {import('./constants').ValidationRule} ValidationRule
- * @typedef {import('./constants').OrderFormModel} OrderFormModel
+ * @typedef {import('./types').MaterialDetailRecord} MaterialDetailRecord
+ * @typedef {import('./types').MaterialDetailQueryParams} MaterialDetailQueryParams
+ * @typedef {import('./types').ValidationRule} ValidationRule
+ * @typedef {import('./types').OrderFormModel} OrderFormModel
  */
 
 /**

+ 16 - 13
src/components/order-form/material-detail-table.vue

@@ -185,9 +185,10 @@ import {
 import { MaterialDetailDataSource } from './constants'
 
 /**
- * @typedef {import('./constants').MaterialDetailRecord} MaterialDetailRecord
- * @typedef {import('./constants').MaterialDeleteEventData} MaterialDeleteEventData
- * @typedef {import('./constants').MaterialDetailQueryParams} MaterialDetailQueryParams
+ * @typedef {import('./types').MaterialDetailRecord} MaterialDetailRecord
+ * @typedef {import('./types').MaterialUpdateEventData} MaterialUpdateEventData
+ * @typedef {import('./types').MaterialDeleteEventData} MaterialDeleteEventData
+ * @typedef {import('./types').MaterialDetailQueryParams} MaterialDetailQueryParams
  */
 
 
@@ -212,9 +213,11 @@ import { MaterialDetailDataSource } from './constants'
 
 /**
  * 物料明细表格组件
- * @description 用于展示订单的物料明细信息,支持物料导入功能(只读模式)
- * 该组件已移除所有编辑、新增、删除功能,仅支持数据展示和物料导入
- * @emits {Array<MaterialDetailItem>} material-import - 物料导入事件
+ * @description 用于展示和编辑订单的物料明细信息,支持物料导入和实时编辑功能
+ * 当物料数量、单价、税率等字段变更时,自动计算总金额和税额,并触发父组件重新计算订单总计
+ * @emits {MaterialDetailRecord[]} material-import - 物料导入事件
+ * @emits {Object} material-update - 物料明细更新事件,包含更新的行数据和索引
+ * @emits {Object} material-delete - 物料明细删除事件
  * @emits {void} refresh - 刷新事件
  */
 export default {
@@ -334,7 +337,7 @@ export default {
   watch: {
     /**
      * 监听物料明细变化
-     * @param {OrderItemRecord[]} newVal - 新的物料明细列表
+     * @param {MaterialDetailRecord[]} newVal - 新的物料明细列表
      * @returns {void}
      */
     materialDetails: {
@@ -494,7 +497,7 @@ export default {
     /**
      * 处理物料导入确认事件
      * @description 处理物料导入确认,将导入的物料数据传递给父组件并关闭弹窗
-     * @param {OrderItemRecord[]} importedMaterials - 导入的物料列表,必须为有效的物料明细数组
+     * @param {MaterialDetailRecord[]} importedMaterials - 导入的物料列表,必须为有效的物料明细数组
      * @returns {void}
      * @emits material-import
      */
@@ -668,7 +671,7 @@ export default {
 
     /**
      * 处理订单数量变更
-     * @description 当订单数量发生变化时,自动计算总金额和税额
+     * @description 当订单数量发生变化时,自动计算总金额和税额,并触发父组件重新计算订单总计
      * @param {MaterialDetailRecord} row - 行数据
      * @param {number} index - 行索引
      * @returns {void}
@@ -681,7 +684,7 @@ export default {
 
     /**
      * 处理税率变更
-     * @description 当税率发生变化时,重新计算税额
+     * @description 当税率发生变化时,重新计算税额,并触发父组件重新计算订单总计
      * @param {MaterialDetailRecord} row - 行数据
      * @param {number} index - 行索引
      * @returns {void}
@@ -693,7 +696,7 @@ export default {
 
     /**
      * 处理单价变更
-     * @description 当单价发生变化时,自动计算总金额和税额
+     * @description 当单价发生变化时,自动计算总金额和税额,并触发父组件重新计算订单总计
      * @param {MaterialDetailRecord} row - 行数据
      * @param {number} index - 行索引
      * @returns {void}
@@ -706,7 +709,7 @@ export default {
 
     /**
      * 处理税额变更
-     * @description 当税额手动修改时,反推税率
+     * @description 当税额手动修改时,反推税率,并触发父组件重新计算订单总计
      * @param {MaterialDetailRecord} row - 行数据
      * @param {number} index - 行索引
      * @returns {void}
@@ -721,7 +724,7 @@ export default {
 
     /**
      * 处理总金额变更
-     * @description 当总金额手动修改时,重新计算税额
+     * @description 当总金额手动修改时,重新计算税额,并触发父组件重新计算订单总计
      * @param {MaterialDetailRecord} row - 行数据
      * @param {number} index - 行索引
      * @returns {void}

+ 1 - 1
src/components/order-form/material-import-dialog.vue

@@ -156,7 +156,7 @@ import {
 
 /**
  * @typedef {import('./material-detail-option').MaterialDetailItem} MaterialDetailItem
- * @typedef {import('./constants').MaterialDetailQueryParams} MaterialDetailQueryParams
+ * @typedef {import('./types').MaterialDetailQueryParams} MaterialDetailQueryParams
  */
 
 /**

+ 25 - 23
src/components/order-form/order-form.vue

@@ -61,18 +61,15 @@ import { getFormOption } from './form-option'
 import MaterialDetailTable from './material-detail-table.vue'
 
 /**
- * @typedef {import('@/api/order/order-item').OrderItemRecord} OrderItemRecord
- * @typedef {import('./constants').OrderFormModel} OrderFormModel
- * @typedef {import('./constants').MaterialDetailRecord} MaterialDetailRecord
- * @typedef {import('./constants').MaterialDeleteEventData} MaterialDeleteEventData
+ * @typedef {import('./types').OrderFormModel} OrderFormModel
+ * @typedef {import('./types').MaterialDetailRecord} MaterialDetailRecord
+ * @typedef {import('./types').MaterialUpdateEventData} MaterialUpdateEventData
+ * @typedef {import('./types').MaterialDeleteEventData} MaterialDeleteEventData
  */
 
 /**
  * 订单表单组件
- * @description 基于AvueJS的订单表单组件,支持新增和编辑订单功能
- * @author 系统开发团队
- * @version 2.0.0
- * @since 2024-01-15
+ * @description 基于AvueJS的订单表单组件,支持新增和编辑订单功能,包含物料明细管理和自动计算功能
  */
 export default {
   name: 'OrderForm',
@@ -91,10 +88,10 @@ export default {
   data() {
     return {
       /**
-       * 物料明细列表
-       * @type {MaterialDetailRecord[]}
-       * @description 存储当前订单的物料明细数据,包含数据来源和删除权限标识
-       */
+     * 物料明细列表
+     * @type {MaterialDetailRecord[]}
+     * @description 存储当前订单的物料明细数据,包含数据来源和删除权限标识
+     */
       materialDetails: []
     }
   },
@@ -234,8 +231,8 @@ export default {
 
     /**
      * 处理物料明细数据变化
-     * @description 当物料明细表格数据发生变化时的回调处理
-     * @param {OrderItemRecord[]} materialDetails - 更新后的物料明细列表
+     * @description 当物料明细表格数据发生变化时的回调处理,自动重新计算订单总金额和总数量
+     * @param {MaterialDetailRecord[]} materialDetails - 更新后的物料明细列表
      * @returns {void}
      */
     handleMaterialChange(materialDetails) {
@@ -246,8 +243,8 @@ export default {
 
     /**
      * 处理物料导入事件
-     * @description 当从物料导入弹窗确认导入物料时的回调处理
-     * @param {OrderItemRecord[]} importedMaterials - 导入的物料列表
+     * @description 当从物料导入弹窗确认导入物料时的回调处理,自动重新计算订单总金额和总数量
+     * @param {MaterialDetailRecord[]} importedMaterials - 导入的物料列表
      * @returns {void}
      */
     handleMaterialImport(importedMaterials) {
@@ -262,10 +259,8 @@ export default {
 
     /**
      * 处理物料明细更新事件
-     * @description 当物料明细表格中的数据被编辑时的回调处理
-     * @param {Object} updateData - 更新数据对象
-     * @param {MaterialDetailRecord} updateData.row - 更新后的行数据
-     * @param {number} updateData.index - 行索引
+     * @description 当物料明细表格中的数据被编辑时的回调处理,自动重新计算订单总金额和总数量
+     * @param {MaterialUpdateEventData} updateData - 更新数据对象
      * @returns {void}
      */
     handleMaterialUpdate({ row, index }) {
@@ -279,23 +274,30 @@ export default {
     },
 
     /**
-     * 计算订单总金额
-     * @description 根据物料明细计算订单总金额并更新表单数据
+     * 计算订单总金额和总数量
+     * @description 根据物料明细计算订单总金额、总数量、总税额并更新表单数据
      * @returns {void}
      */
     calculateOrderTotal() {
+      // 计算订单总金额
       const totalAmount = this.materialDetails.reduce((sum, item) => {
         return sum + (Number(item.totalAmount) || 0)
       }, 0)
       
+      // 计算订单总数量
+      const totalQuantity = this.materialDetails.reduce((sum, item) => {
+        return sum + (Number(item.orderQuantity) || 0)
+      }, 0)
+      
       // 计算总税额
       const totalTaxAmount = this.materialDetails.reduce((sum, item) => {
         return sum + (Number(item.taxAmount) || 0)
       }, 0)
       
-      // 更新表单中的总金额和税额字段
+      // 更新表单中的总金额、总数量和税额字段
       if (this.formData) {
         this.$set(this.formData, 'totalAmount', Math.round(totalAmount * 100) / 100)
+        this.$set(this.formData, 'totalQuantity', Math.round(totalQuantity))
         this.$set(this.formData, 'totalTaxAmount', Math.round(totalTaxAmount * 100) / 100)
       }
     }

+ 79 - 1
src/components/order-form/types.d.ts

@@ -482,6 +482,80 @@ export interface MaterialDetailItem {
 export type OrderItemRecord = MaterialDetailItem;
 
 /**
+ * 物料明细记录类型
+ * @description 物料明细表格中使用的完整记录类型,包含所有必要字段
+ */
+export type MaterialDetailRecord = MaterialDetailItem;
+
+/**
+ * 物料明细更新事件数据
+ * @description 当物料明细发生变更时传递的事件数据
+ */
+export interface MaterialUpdateEventData {
+  /** 更新后的行数据 */
+  row: MaterialDetailRecord;
+  /** 行在表格中的索引 */
+  index: number;
+}
+
+/**
+ * 物料明细删除事件数据
+ * @description 当物料明细被删除时传递的事件数据
+ */
+export interface MaterialDeleteEventData {
+  /** 被删除的行数据 */
+  row: MaterialDetailRecord;
+  /** 行在表格中的索引 */
+  index: number;
+}
+
+/**
+ * 物料明细查询参数
+ * @description 物料明细表格查询和筛选使用的参数
+ */
+export interface MaterialDetailQueryParams {
+  /** 物料编码 */
+  itemCode?: string;
+  /** 物料名称 */
+  itemName?: string;
+  /** 主物料分类ID */
+  mainItemCategoryId?: string;
+  /** 子物料分类ID */
+  subItemCategoryId?: string;
+  /** 品牌ID */
+  brandId?: string;
+  /** 仓库ID */
+  warehouseId?: string;
+  /** 订单状态 */
+  status?: keyof typeof MaterialDetailStatus;
+  /** 页码 */
+  pageNum?: number;
+  /** 每页大小 */
+  pageSize?: number;
+}
+
+/**
+ * 验证规则接口
+ * @description 表单验证规则的类型定义
+ */
+export interface ValidationRule {
+  /** 是否必填 */
+  required?: boolean;
+  /** 验证失败消息 */
+  message: string;
+  /** 触发方式 */
+  trigger?: string;
+  /** 验证类型 */
+  type?: string;
+  /** 最小值 */
+  min?: number;
+  /** 最大值 */
+  max?: number;
+  /** 自定义验证函数 */
+  validator?: (rule: ValidationRule, value: any, callback: (error?: Error) => void) => void;
+}
+
+/**
  * 物料明细表格组件Props接口
  * @description 物料明细表格组件的属性定义
  */
@@ -498,7 +572,11 @@ export interface MaterialDetailTableEvents {
   /** 刷新事件 */
   refresh: () => void;
   /** 物料导入事件 */
-  'material-import': (materials: OrderItemRecord[]) => void;
+  'material-import': (materials: MaterialDetailRecord[]) => void;
+  /** 物料明细更新事件 */
+  'material-update': (data: MaterialUpdateEventData) => void;
+  /** 物料明细删除事件 */
+  'material-delete': (data: MaterialDeleteEventData) => void;
 }
 
 /**