소스 검색

refactor(订单表单): 统一组件事件名为常量并集中管理

yz 3 주 전
부모
커밋
e72c06ce96

+ 8 - 7
src/components/order-form/address-select.vue

@@ -27,6 +27,7 @@
 
 <script>
 import { getList } from '@/api/order/address'
+import { COMMON_EVENTS, ADDRESS_SELECT_EVENTS } from './events'
 
 /**
  * @typedef {import('@/api/types/address').CustomerAddressRecord} CustomerAddressRecord
@@ -217,7 +218,7 @@ export default {
      * @param {string|number} newVal - 新的值
      */
     currentValue(newVal) {
-      this.$emit('input', newVal)
+      this.$emit(COMMON_EVENTS.INPUT, newVal)
     },
     /**
      * 监听customerCode变化
@@ -366,7 +367,7 @@ export default {
      */
     handleChange(value) {
       this.currentValue = value
-      this.$emit('change', value)
+      this.$emit(COMMON_EVENTS.CHANGE, value)
       
       /** @type {AddressSelectOption|undefined} */
       const selectedAddress = this.addressOptions.find(item => item.id == value)
@@ -384,7 +385,7 @@ export default {
           addressData: selectedAddress.addressData
         }
         
-        this.$emit('address-selected', addressData)
+        this.$emit(ADDRESS_SELECT_EVENTS.ADDRESS_SELECTED, addressData)
       } else {
         // 如果没有找到对应的地址,发送空数据
         this.emitEmptyAddressData()
@@ -409,7 +410,7 @@ export default {
         postalCode: ''
       }
       
-      this.$emit('address-selected', emptyData)
+      this.$emit(ADDRESS_SELECT_EVENTS.ADDRESS_SELECTED, emptyData)
     },
     
     /**
@@ -419,7 +420,7 @@ export default {
      */
     handleClear() {
       this.currentValue = ''
-      this.$emit('clear')
+      this.$emit(COMMON_EVENTS.CLEAR)
       this.emitEmptyAddressData()
     },
     
@@ -429,7 +430,7 @@ export default {
      * @returns {void}
      */
     handleFocus() {
-      this.$emit('focus')
+      this.$emit(COMMON_EVENTS.FOCUS)
     },
     
     /**
@@ -438,7 +439,7 @@ export default {
      * @returns {void}
      */
     handleBlur() {
-      this.$emit('blur')
+      this.$emit(COMMON_EVENTS.BLUR)
     }
   }
 }

+ 9 - 8
src/components/order-form/customer-select.vue

@@ -29,6 +29,7 @@
 
 <script>
 import { getCustomerList } from '@/api/common/customer'
+import { COMMON_EVENTS, CUSTOMER_SELECT_EVENTS } from './events'
 
 /**
  * @typedef {import('@/api/types/customer').CustomerRecord} CustomerRecord
@@ -165,7 +166,7 @@ export default {
      * @param {string|number} newVal - 新的值
      */
     currentValue(newVal) {
-      this.$emit('input', newVal)
+      this.$emit(COMMON_EVENTS.INPUT, newVal)
     }
   },
   
@@ -329,7 +330,7 @@ export default {
      */
     handleChange(value) {
       this.currentValue = value
-      this.$emit('change', value)
+      this.$emit(COMMON_EVENTS.CHANGE, value)
       
       // 查找选中的客户对象
       /** @type {CustomerRecord|undefined} */
@@ -337,7 +338,7 @@ export default {
       
       if (selectedCustomer) {
         // 发送客户选择事件,包含完整的客户信息
-        this.$emit('customer-selected', {
+        this.$emit(CUSTOMER_SELECT_EVENTS.CUSTOMER_SELECTED, {
           customerId: selectedCustomer.Customer_ID,
           customerCode: selectedCustomer.Customer_CODE,
           customerName: selectedCustomer.Customer_NAME,
@@ -345,7 +346,7 @@ export default {
         })
       } else {
         // 如果没有找到对应的客户,发送空数据
-        this.$emit('customer-selected', {
+        this.$emit(CUSTOMER_SELECT_EVENTS.CUSTOMER_SELECTED, {
           customerId: '',
           customerCode: '',
           customerName: '',
@@ -360,8 +361,8 @@ export default {
     handleClear() {
       this.currentValue = ''
       this.options = []
-      this.$emit('clear')
-      this.$emit('customer-selected', {
+      this.$emit(COMMON_EVENTS.CLEAR)
+      this.$emit(CUSTOMER_SELECT_EVENTS.CUSTOMER_SELECTED, {
         customerId: '',
         customerCode: '',
         customerName: ''
@@ -372,14 +373,14 @@ export default {
      * 获得焦点处理
      */
     handleFocus() {
-      this.$emit('focus')
+      this.$emit(COMMON_EVENTS.FOCUS)
     },
     
     /**
      * 失去焦点处理
      */
     handleBlur() {
-      this.$emit('blur')
+      this.$emit(COMMON_EVENTS.BLUR)
     }
   }
 }

+ 135 - 0
src/components/order-form/events.js

@@ -0,0 +1,135 @@
+/**
+ * @fileoverview 订单表单模块事件常量定义
+ * @description 定义订单表单组件使用的所有事件名常量,确保事件名的一致性和可维护性
+ */
+
+/**
+ * 通用事件常量
+ * @readonly
+ * @enum {string}
+ */
+export const COMMON_EVENTS = {
+  /** 输入事件 */
+  INPUT: 'input',
+  /** 变更事件 */
+  CHANGE: 'change',
+  /** 清空事件 */
+  CLEAR: 'clear',
+  /** 获得焦点事件 */
+  FOCUS: 'focus',
+  /** 失去焦点事件 */
+  BLUR: 'blur'
+}
+
+/**
+ * 对话框事件常量
+ * @readonly
+ * @enum {string}
+ */
+export const DIALOG_EVENTS = {
+  /** 更新可见性事件 */
+  UPDATE_VISIBLE: 'update:visible',
+  /** 确认事件 */
+  CONFIRM: 'confirm',
+  /** 取消事件 */
+  CANCEL: 'cancel'
+}
+
+/**
+ * 客户选择组件事件常量
+ * @readonly
+ * @enum {string}
+ */
+export const CUSTOMER_SELECT_EVENTS = {
+  /** 客户选择事件 */
+  CUSTOMER_SELECTED: 'customer-selected'
+}
+
+/**
+ * 地址选择组件事件常量
+ * @readonly
+ * @enum {string}
+ */
+export const ADDRESS_SELECT_EVENTS = {
+  /** 地址选择事件 */
+  ADDRESS_SELECTED: 'address-selected'
+}
+
+/**
+ * 物料明细表格事件常量
+ * @readonly
+ * @enum {string}
+ */
+export const MATERIAL_DETAIL_EVENTS = {
+  /** 刷新事件 */
+  REFRESH: 'refresh',
+  /** 物料导入事件 */
+  MATERIAL_IMPORT: 'material-import',
+  /** 物料删除事件 */
+  MATERIAL_DELETE: 'material-delete',
+  /** 物料更新事件 */
+  MATERIAL_UPDATE: 'material-update'
+}
+
+/**
+ * 订单表单事件常量
+ * @readonly
+ * @enum {string}
+ */
+export const ORDER_FORM_EVENTS = {
+  /** 返回事件 */
+  BACK: 'back',
+  /** 保存成功事件 */
+  SAVE_SUCCESS: 'save-success'
+}
+
+/**
+ * 所有事件常量的集合
+ * @description 将所有事件常量合并为一个对象,便于统一导入和使用
+ * @readonly
+ */
+export const ALL_EVENTS = {
+  ...COMMON_EVENTS,
+  ...DIALOG_EVENTS,
+  ...CUSTOMER_SELECT_EVENTS,
+  ...ADDRESS_SELECT_EVENTS,
+  ...MATERIAL_DETAIL_EVENTS,
+  ...ORDER_FORM_EVENTS
+}
+
+// ==================== JSDoc 类型定义 ====================
+
+/**
+ * 通用事件类型
+ * @typedef {'input'|'change'|'clear'|'focus'|'blur'} CommonEventType
+ */
+
+/**
+ * 对话框事件类型
+ * @typedef {'update:visible'|'confirm'|'cancel'} DialogEventType
+ */
+
+/**
+ * 客户选择事件类型
+ * @typedef {'customer-selected'} CustomerSelectEventType
+ */
+
+/**
+ * 地址选择事件类型
+ * @typedef {'address-selected'} AddressSelectEventType
+ */
+
+/**
+ * 物料明细事件类型
+ * @typedef {'refresh'|'material-import'|'material-delete'|'material-update'} MaterialDetailEventType
+ */
+
+/**
+ * 订单表单事件类型
+ * @typedef {'back'|'save-success'} OrderFormEventType
+ */
+
+/**
+ * 所有事件类型的联合类型
+ * @typedef {CommonEventType|DialogEventType|CustomerSelectEventType|AddressSelectEventType|MaterialDetailEventType|OrderFormEventType} AllEventType
+ */

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

@@ -149,7 +149,7 @@
       ref="materialImportDialog"
       :visible.sync="importDialogVisible"
       @confirm="handleImportConfirm"
-      @cancel="handleImportCancel"
+        @cancel="handleImportCancel"
     />
 
 
@@ -169,6 +169,7 @@ import {
   getMaterialDetailStatusTagType,
   getMaterialDetailStatusColor
 } from './constants'
+import { MATERIAL_DETAIL_EVENTS, DIALOG_EVENTS } from './events'
 import MaterialImportDialog from './material-import-dialog.vue'
 import {
   formatAmount,
@@ -294,6 +295,11 @@ export default {
       importDialogVisible: false,
 
       /**
+       * 事件常量
+       */
+      DIALOG_EVENTS,
+
+      /**
        * 正在编辑的行数据 - 用于记录编辑前的状态
        * @type {MaterialDetailRecord|null}
        */
@@ -491,7 +497,7 @@ export default {
      * @emits refresh
      */
     handleRefresh() {
-      this.$emit('refresh')
+      this.$emit(MATERIAL_DETAIL_EVENTS.REFRESH)
     },
 
     /**
@@ -506,7 +512,7 @@ export default {
         this.$message.warning('导入的物料数据格式不正确')
         return
       }
-      this.$emit('material-import', importedMaterials)
+      this.$emit(MATERIAL_DETAIL_EVENTS.MATERIAL_IMPORT, importedMaterials)
       this.importDialogVisible = false
     },
 
@@ -621,7 +627,7 @@ export default {
          )
 
          // 触发删除事件,传递物料记录和索引
-         this.$emit('material-delete', { row, index })
+         this.$emit(MATERIAL_DETAIL_EVENTS.MATERIAL_DELETE, { row, index })
          this.$message.success('物料删除成功')
        } catch (error) {
          // 用户取消删除操作
@@ -657,7 +663,7 @@ export default {
         const calculatedRow = this.calculateAmounts(row)
 
         // 触发更新事件,传递计算后的数据
-        this.$emit('material-update', { row: calculatedRow, index })
+        this.$emit(MATERIAL_DETAIL_EVENTS.MATERIAL_UPDATE, { row: calculatedRow, index })
 
         // 完成编辑
         done(calculatedRow)
@@ -692,7 +698,7 @@ export default {
     handleQuantityChange(row, index) {
       const calculatedRow = this.calculateAmounts(row)
       Object.assign(row, calculatedRow)
-      this.$emit('material-update', { row, index })
+      this.$emit(MATERIAL_DETAIL_EVENTS.MATERIAL_UPDATE, { row, index })
     },
 
     /**
@@ -795,7 +801,7 @@ export default {
         Object.assign(row, calculatedRow)
 
         // 触发更新事件
-        this.$emit('material-update', { row: calculatedRow, index: this.getCurrentRowIndex(row) })
+        this.$emit(MATERIAL_DETAIL_EVENTS.MATERIAL_UPDATE, { row: calculatedRow, index: this.getCurrentRowIndex(row) })
       }
     },
 

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

@@ -153,6 +153,7 @@ import {
   preciseRound,
   validateNumber
 } from './number-format-utils'
+import { DIALOG_EVENTS } from './events'
 
 /**
  * @typedef {import('./material-detail-option').MaterialDetailItem} MaterialDetailItem
@@ -317,7 +318,7 @@ export default {
      * @param {boolean} newVal - 新的显示状态
      */
     dialogVisible(newVal) {
-      this.$emit('update:visible', newVal)
+      this.$emit(DIALOG_EVENTS.UPDATE_VISIBLE, newVal)
     }
   },
 
@@ -522,13 +523,13 @@ export default {
             taxRate: 0, // 默认税率为0,2位浮点型
             taxAmount: 0, // 默认税额为0,2位小数
             totalAmount: 0, // 默认总金额为0,2位小数
-            status: MaterialDetailStatus.UNCONFIRMED,
+            itemStatus: MaterialDetailStatus.UNCONFIRMED,
             createTime: new Date().toISOString(),
             updateTime: new Date().toISOString()
           }
         })
 
-        this.$emit('confirm', importedMaterials)
+        this.$emit(DIALOG_EVENTS.CONFIRM, importedMaterials)
         this.dialogVisible = false
       } catch (error) {
         this.$message.error('导入物料失败,请重试')
@@ -542,7 +543,7 @@ export default {
      */
     handleCancel() {
       this.dialogVisible = false
-      this.$emit('cancel')
+      this.$emit(DIALOG_EVENTS.CANCEL)
     },
 
     /**

+ 3 - 2
src/components/order-form/order-form-mixin.js

@@ -20,6 +20,7 @@ import {
 import {
   MaterialDetailDataSource
 } from './constants'
+import { ORDER_FORM_EVENTS } from './events'
 
 // 数字格式化工具导入
 import {
@@ -614,7 +615,7 @@ export default {
        * @event back
        * @description 用户点击返回按钮时触发
        */
-      this.$emit('back')
+      this.$emit(ORDER_FORM_EVENTS.BACK)
     },
 
     /**
@@ -661,7 +662,7 @@ export default {
          * @param {Object} data - 保存后的订单数据
          * @description 订单保存成功后触发,携带最新的订单数据
          */
-        this.$emit('save-success', response.data.data)
+        this.$emit(ORDER_FORM_EVENTS.SAVE_SUCCESS, response.data.data)
 
         // 返回列表
         this.handleBack()

+ 8 - 2
src/components/order-form/order-form.vue

@@ -66,7 +66,7 @@
           :order-id="orderId"
           :edit-mode="true"
           :material-details="materialDetails"
-          @material-change="handleMaterialChange"
+          @refresh="handleMaterialChange"
           @material-import="handleMaterialImport"
           @material-delete="handleMaterialDelete"
           @material-update="handleMaterialUpdate"
@@ -82,6 +82,7 @@ import { getFormOption } from './form-option'
 import MaterialDetailTable from './material-detail-table.vue'
 import CustomerSelect from './customer-select.vue'
 import AddressSelect from './address-select.vue'
+import { CUSTOMER_SELECT_EVENTS, ADDRESS_SELECT_EVENTS, MATERIAL_DETAIL_EVENTS } from './events'
 
 /**
  * @typedef {import('./types').OrderFormModel} OrderFormModel
@@ -117,7 +118,12 @@ export default {
      * @type {MaterialDetailRecord[]}
      * @description 存储当前订单的物料明细数据,包含数据来源和删除权限标识
      */
-      materialDetails: []
+      materialDetails: [],
+      
+      // 事件常量,用于模板中的动态事件绑定
+      CUSTOMER_SELECT_EVENTS,
+      ADDRESS_SELECT_EVENTS,
+      MATERIAL_DETAIL_EVENTS
     }
   },
 

+ 5 - 1
src/views/order/order/index-avue.vue

@@ -132,6 +132,7 @@ import {
 import OrderItemManagement from '@/components/order-item-management'
 import OrderItemTable from '@/components/order-item-table'
 import OrderForm from '@/components/order-form/order-form.vue'
+import { ORDER_FORM_EVENTS } from '@/components/order-form/events'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -159,7 +160,10 @@ export default {
       // 订单表单相关状态
       orderFormVisible: false,
       isEditMode: false,
-      editOrderId: null
+      editOrderId: null,
+      
+      // 事件常量
+      ORDER_FORM_EVENTS
     }
   },
   computed: {