refactor(order-form): 重构物料明细状态处理逻辑

src/components/order-form/constants.js

@@ -3,6 +3,14 @@
  * @description 定义订单表单组件使用的枚举值和常量
  */
 
+// 导入明细管理中的状态定义和工具函数
+import { 
+  ORDER_ITEM_STATUS,
+  getOrderItemStatusLabel,
+  getOrderItemStatusTagType,
+  getOrderItemStatusColor
+} from '@/constants/order'
+
 /**
  * 订单类型枚举
  * @readonly
@@ -38,22 +46,15 @@ export const OrderStatus = {
 }
 
 /**
- * 物料明细状态枚举
+ * 物料明细状态枚举 - 使用明细管理中的标准状态定义
  * @readonly
- * @enum {string}
+ * @enum {number}
  */
-export const MaterialDetailStatus = {
-  /** 待确认 */
-  PENDING: '0',
-  /** 已确认 */
-  CONFIRMED: '1',
-  /** 已取消 */
-  CANCELLED: '2'
-}
+export const MaterialDetailStatus = ORDER_ITEM_STATUS
 
 /**
  * 订单类型选项列表
- * @type {Array<{label: string, value: number}>}
+ * @type {ReadonlyArray<{readonly label: string, readonly value: 1|2|3}>}
  */
 export const ORDER_TYPE_OPTIONS = [
   { label: '普通订单', value: OrderType.NORMAL },
@@ -63,7 +64,7 @@ export const ORDER_TYPE_OPTIONS = [
 
 /**
  * 订单状态选项列表
- * @type {Array<{label: string, value: number}>}
+ * @type {ReadonlyArray<{readonly label: string, readonly value: 0|1|2|3|4|5}>}
  */
 export const ORDER_STATUS_OPTIONS = [
   { label: '草稿', value: OrderStatus.DRAFT },
@@ -77,7 +78,7 @@ export const ORDER_STATUS_OPTIONS = [
 /**
  * 默认分页配置
  * @description 通用的AvueJS分页配置，可在多个组件中复用
- * @type {Object}
+ * @type {Readonly<{pageSize: 10, pageSizes: ReadonlyArray<5|10|20|50>, layout: string}>}
  */
 export const DEFAULT_PAGINATION_CONFIG = {
   pageSize: 10,
@@ -86,11 +87,19 @@ export const DEFAULT_PAGINATION_CONFIG = {
 }
 
 /**
- * 物料明细状态选项列表
- * @type {Array<{label: string, value: string}>}
+ * 物料明细状态选项列表 - 与明细管理保持一致
+ * @type {ReadonlyArray<{readonly label: string, readonly value: 0 | 1 | 2 | 3}>}
  */
 export const MATERIAL_DETAIL_STATUS_OPTIONS = [
-  { label: '待确认', value: MaterialDetailStatus.PENDING },
+  { label: '未确认', value: MaterialDetailStatus.UNCONFIRMED },
   { label: '已确认', value: MaterialDetailStatus.CONFIRMED },
-  { label: '已取消', value: MaterialDetailStatus.CANCELLED }
-]
+  { label: '部分发货', value: MaterialDetailStatus.PARTIAL_SHIPPED },
+  { label: '已完成', value: MaterialDetailStatus.COMPLETED }
+]
+
+// 导出明细状态工具函数供其他组件使用
+export { 
+  getOrderItemStatusLabel as getMaterialDetailStatusLabel,
+  getOrderItemStatusTagType as getMaterialDetailStatusTagType,
+  getOrderItemStatusColor as getMaterialDetailStatusColor
+}

src/components/order-form/form-option.js

@@ -1,4 +1,4 @@
-import { ORDER_TYPE_OPTIONS, ORDER_STATUS_OPTIONS } from '@/constants'
+import { ORDER_TYPE_OPTIONS, ORDER_STATUS_OPTIONS } from './constants'
 
 /**
  * AvueJS 表单字段配置接口

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

@@ -4,10 +4,10 @@
  */
 
 // 从constants.js导入常量
-import { 
-  MaterialDetailStatus, 
-  DEFAULT_PAGINATION_CONFIG, 
-  MATERIAL_DETAIL_STATUS_OPTIONS 
+import {
+  MaterialDetailStatus,
+  DEFAULT_PAGINATION_CONFIG,
+  MATERIAL_DETAIL_STATUS_OPTIONS
 } from './constants'
 
 // 重新导出常量供其他模块使用
@@ -139,12 +139,12 @@ export function getMaterialDetailOption() {
       },
       {
         label: '规格型号',
-        prop: 'specification',
+        prop: 'specs',
         width: 120
       },
       {
         label: '主物料分类',
-        prop: 'mainCategoryName',
+        prop: 'mainItemCategoryName',
         width: 120
       },
       {

src/components/order-form/material-detail-table.vue

@@ -47,10 +47,10 @@
         <!-- 明细状态列自定义渲染 -->
         <template slot="detailStatus" slot-scope="{ row }">
           <el-tag
-            :type="getStatusTagType(row.detailStatus)"
+            :type="getStatusTagType(row.status)"
             size="mini"
           >
-            {{ getStatusText(row.detailStatus) }}
+            {{ getStatusText(row.status) }}
           </el-tag>
         </template>
       </avue-crud>
@@ -70,30 +70,47 @@
 
 <script>
 import { getMaterialDetailOption, DEFAULT_PAGINATION_CONFIG } from './material-detail-option'
-import { MaterialDetailStatus } from './constants'
+import {
+  MaterialDetailStatus,
+  getMaterialDetailStatusLabel,
+  getMaterialDetailStatusTagType,
+  getMaterialDetailStatusColor
+} from './constants'
 import MaterialImportDialog from './material-import-dialog.vue'
 import { formatAmount } from './utils'
-// 类型定义在JSDoc注释中提供，无需导入
 
 /**
- * 状态标签类型映射常量
- * @type {Object} 物料明细状态对应的标签类型
+ * 物料明细记录类型定义
+ * @typedef {Object} MaterialDetailRecord
+ * @property {string} id - 明细ID
+ * @property {string} itemCode - 物料编码
+ * @property {string} itemName - 物料名称
+ * @property {string} specs - 规格型号
+ * @property {string} unit - 计量单位
+ * @property {number} quantity - 数量
+ * @property {number} unitPrice - 单价
+ * @property {number} totalAmount - 总金额
+ * @property {0|1|2|3} detailStatus - 明细状态
+ * @property {string} [remark] - 备注
  */
-const STATUS_TAG_TYPE_MAP = {
-  [MaterialDetailStatus.PENDING]: 'warning',   // 待确认
-  [MaterialDetailStatus.CONFIRMED]: 'success', // 已确认
-  [MaterialDetailStatus.CANCELLED]: 'danger'   // 已取消
-}
 
 /**
- * 状态文本映射常量
- * @type {Object} 物料明细状态对应的文本描述
+ * 分页配置类型定义
+ * @typedef {Object} PaginationConfig
+ * @property {number} currentPage - 当前页码，从1开始
+ * @property {number} pageSize - 每页显示条数
+ * @property {number} total - 总记录数
  */
-const STATUS_TEXT_MAP = {
-  [MaterialDetailStatus.PENDING]: '待确认',
-  [MaterialDetailStatus.CONFIRMED]: '已确认',
-  [MaterialDetailStatus.CANCELLED]: '已取消'
-}
+
+/**
+ * 组件数据类型定义
+ * @typedef {Object} MaterialDetailTableData
+ * @property {Partial<MaterialDetailRecord>} formData - 表单数据
+ * @property {PaginationConfig} page - 分页配置
+ * @property {boolean} importDialogVisible - 导入弹窗显示状态
+ */
+
+// 状态处理已统一使用明细管理中的工具函数，无需本地映射常量
 
 /**
  * 物料明细表格组件
@@ -107,7 +124,7 @@ export default {
   components: {
     MaterialImportDialog
   },
-  
+
   /**
    * 组件属性定义
    * @description 定义组件接收的外部属性
@@ -125,15 +142,15 @@ export default {
 
     /**
      * 物料明细列表 - 要展示的物料明细数据
-     * @type {Array} 物料明细数据数组，每个元素包含物料的详细信息
+     * @type {MaterialDetailRecord[]} 物料明细数据数组，每个元素包含物料的详细信息
      */
     materialDetails: {
       type: Array,
       required: true,
       default: () => [],
-      validator: (value) => Array.isArray(value) && value.every(item => 
-        typeof item === 'object' && item !== null && 
-        typeof item.id === 'string' && 
+      validator: (value) => Array.isArray(value) && value.every(item =>
+        typeof item === 'object' && item !== null &&
+        typeof item.id === 'string' &&
         typeof item.itemCode === 'string'
       )
     }
@@ -141,22 +158,19 @@ export default {
 
   /**
    * 组件数据
-   * @returns {Object} 组件响应式数据对象
+   * @returns {MaterialDetailTableData} 组件响应式数据对象
    */
   data() {
     return {
       /**
        * 表单数据 - 当前编辑行的数据
-       * @type {Object} 物料明细表单数据对象
+       * @type {Partial<MaterialDetailRecord>} 物料明细表单数据对象
        */
       formData: {},
 
       /**
        * 分页配置 - AvueJS表格分页相关配置
-       * @type {Object} 包含currentPage、pageSize、total等属性的分页配置对象
-       * @property {number} currentPage - 当前页码，从1开始
-       * @property {number} pageSize - 每页显示条数
-       * @property {number} total - 总记录数
+       * @type {PaginationConfig} 包含currentPage、pageSize、total等属性的分页配置对象
        */
       page: {
         currentPage: 1,
@@ -186,7 +200,7 @@ export default {
 
     /**
      * 当前页显示的数据 - 根据分页配置计算当前页应显示的数据
-     * @returns {Array} 当前页的物料明细数据
+     * @returns {MaterialDetailRecord[]} 当前页的物料明细数据
      */
     currentPageData() {
       const { currentPage, pageSize } = this.page
@@ -293,27 +307,27 @@ export default {
     /**
      * 获取状态标签类型
      * @description 根据物料明细状态值返回对应的Element UI标签类型
-     * @param {MaterialDetailStatus} status - 物料明细状态值
-     * @returns {TagType} Element UI标签类型
+     * @param {number} status - 物料明细状态值
+     * @returns {string} Element UI标签类型
      * @example
-     * getStatusTagType('0') // 返回 'warning'
-     * getStatusTagType('1') // 返回 'success'
+     * getStatusTagType(0) // 返回 'warning'
+     * getStatusTagType(1) // 返回 'success'
      */
     getStatusTagType(status) {
-      return STATUS_TAG_TYPE_MAP[status] || 'info'
+      return getMaterialDetailStatusTagType(status)
     },
 
     /**
      * 获取状态文本
      * @description 根据物料明细状态值返回对应的中文描述
-     * @param {MaterialDetailStatus} status - 物料明细状态值
+     * @param {number} status - 物料明细状态值
      * @returns {string} 状态的中文描述文本
      * @example
-     * getStatusText('0') // 返回 '待确认'
-     * getStatusText('1') // 返回 '已确认'
+     * getStatusText(0) // 返回 '待确认'
+     * getStatusText(1) // 返回 '已确认'
      */
     getStatusText(status) {
-      return STATUS_TEXT_MAP[status] || '未知'
+      return getMaterialDetailStatusLabel(status)
     }
   }
 }

src/components/order-form/order-form-mixin.js

@@ -496,11 +496,11 @@ export default {
 
     /**
      * 验证表单字段
-     * @description 封装表单验证逻辑，提供更清晰的异步处理
+     * @description 验证AvueJS表单的所有字段，确保数据有效性
      * @returns {Promise<boolean>} 验证结果
      * @private
      */
-    validateFormFields() {
+    async validateFormFields() {
       return new Promise((resolve) => {
         this.$refs.orderForm.validate((valid) => {
           resolve(Boolean(valid))