Parcourir la source

refactor(订单表单): 使用smallwei__avue类型定义替换自定义类型

yz il y a 2 semaines
Parent
commit
e24bf605ce

+ 12 - 48
src/components/order-form/form-option.js

@@ -1,46 +1,10 @@
 import { ORDER_TYPE_OPTIONS, ORDER_STATUS_OPTIONS } from '@/constants/order'
+// 使用@types/smallwei__avue库中的类型定义
+// AvueFormColumn, AvueFormGroup, AvueFormOption 类型已在@types/smallwei__avue/form.d.ts中定义
 
 /**
- * AvueJS 表单字段配置接口
- * @typedef {Object} AvueFormColumn
- * @property {string} label - 字段标签
- * @property {string} prop - 字段属性名
- * @property {'input'|'select'|'number'|'textarea'|'date'|'datetime'} type - 字段类型
- * @property {number} span - 栅格占位格数(1-24)
- * @property {string} [placeholder] - 占位符文本
- * @property {boolean} [required] - 是否必填
- * @property {boolean} [disabled] - 是否禁用
- * @property {boolean} [display] - 是否显示
- * @property {number} [precision] - 数字精度
- * @property {string} [prepend] - 前置内容
- * @property {number} [minRows] - 最小行数(textarea)
- * @property {number} [maxRows] - 最大行数(textarea)
- * @property {number} [maxlength] - 最大长度
- * @property {boolean} [showWordLimit] - 是否显示字数统计
- * @property {RegExp} [pattern] - 正则验证模式
- * @property {Array<{label: string, value: string|number}>} [dicData] - 选项数据
- * @property {Array<{required?: boolean, message: string, trigger: string, type?: string, min?: number, pattern?: RegExp}>} [rules] - 验证规则
- */
-
-/**
- * AvueJS 表单分组配置接口
- * @typedef {Object} AvueFormGroup
- * @property {string} label - 分组标签
- * @property {string} icon - 分组图标
- * @property {string} prop - 分组属性名
- * @property {Array<AvueFormColumn>} column - 分组内的字段配置
- */
-
-/**
- * AvueJS 表单完整配置接口
- * @typedef {Object} AvueFormOption
- * @property {boolean} submitBtn - 是否显示提交按钮
- * @property {boolean} emptyBtn - 是否显示清空按钮
- * @property {number} labelWidth - 标签宽度(px)
- * @property {number} gutter - 栅格间隔(px)
- * @property {boolean} menuBtn - 是否显示菜单按钮
- * @property {'small'|'medium'|'mini'} [size] - 组件尺寸
- * @property {Array<AvueFormGroup>} group - 表单分组配置
+ * @typedef {import('./types').OrderFormModel} OrderFormModel
+ * @typedef {import('@types/smallwei__avue/form').AvueFormOption<OrderFormModel>} AvueFormOption
  */
 
 /**
@@ -56,7 +20,7 @@ export const orderFormOption = {
   gutter: 20,       // 栅格间隔
   menuBtn: false,   // 不显示菜单按钮
   size: 'small',    // 使用小尺寸组件,与示例HTML保持一致
-  
+
   // 表单分组配置
   group: [
     {
@@ -305,21 +269,21 @@ export const orderFormOption = {
  * 根据编辑模式动态调整表单配置
  * @description 基于业务逻辑动态调整表单字段的显示和编辑状态
  * @param {boolean} [isEdit=false] - 是否为编辑模式
- * @returns {AvueFormOption} 调整后的表单配置对象
+ * @returns {AvueFormOption<OrderFormModel>} 调整后的表单配置对象
  * @throws {Error} 当配置对象结构异常时抛出错误
  * @example
  * // 获取新增模式的表单配置
  * const createOption = getFormOption(false)
- * 
+ *
  * // 获取编辑模式的表单配置
  * const editOption = getFormOption(true)
  */
 export function getFormOption(isEdit = false) {
   try {
     // 深拷贝配置对象,避免修改原始配置
-    /** @type {AvueFormOption} */
+    /** @type {AvueFormOption<OrderFormModel>} */
     const option = JSON.parse(JSON.stringify(orderFormOption))
-    
+
     if (isEdit) {
       // 编辑模式下的字段调整
       adjustFieldsForEditMode(option)
@@ -327,7 +291,7 @@ export function getFormOption(isEdit = false) {
       // 新增模式下的字段调整
       adjustFieldsForCreateMode(option)
     }
-    
+
     return option
   } catch (error) {
     throw new Error(`表单配置生成失败: ${error.message}`)
@@ -349,7 +313,7 @@ function adjustFieldsForEditMode(option) {
       orderCodeField.disabled = true
     }
   }
-  
+
   // 编辑模式下显示订单状态字段
   const otherGroup = option.group.find(group => group.prop === 'other')
   if (otherGroup) {
@@ -375,4 +339,4 @@ function adjustFieldsForCreateMode(option) {
       orderCodeField.display = false
     }
   }
-}
+}

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

@@ -22,66 +22,21 @@ export { MaterialDetailStatus, DEFAULT_PAGINATION_CONFIG, MATERIAL_DETAIL_STATUS
  */
 
 /**
- * @typedef {import('@smallwei/avue').AvueCrudOption} AvueCrudOption
- * @typedef {import('@smallwei/avue').AvueCrudColumn} AvueCrudColumn
+ * @typedef {import('smallwei__avue/crud').AvueCrudOption<MaterialDetailRecord>} AvueCrudOption
+ * @typedef {import('smallwei__avue/crud').AvueCrudColumn<MaterialDetailRecord>} AvueCrudColumn
+ * @typedef {import('smallwei__avue/crud').PageOption} PageOption
  */
 
-/**
- * AvueJS分页配置选项类型定义
- * @typedef {Object} AvuePaginationOption
- * @description AvueJS表格分页配置对象
- * @property {number} pageSize - 每页显示条数,默认10
- * @property {number[]} pageSizes - 每页显示个数选择器的选项设置
- * @property {string} layout - 组件布局,子组件名用逗号分隔
- */
+// 使用@types/smallwei__avue库中的类型定义,不再需要自定义以下类型:
+// - AvuePaginationOption (使用PageOption代替)
+// - AvueTableOption (使用AvueCrudOption代替)
+// - AvueColumnOption (使用AvueCrudColumn代替)
 
-/**
- * AvueJS表格配置选项类型定义
- * @typedef {Object} AvueTableOption
- * @description 物料明细表格的AvueJS配置对象
- * @property {boolean} border - 是否显示边框
- * @property {boolean} index - 是否显示序号列
- * @property {string} indexLabel - 序号列标题
- * @property {boolean} stripe - 是否显示斑马纹
- * @property {'left'|'center'|'right'} menuAlign - 操作列对齐方式
- * @property {'left'|'center'|'right'} align - 表格内容对齐方式
- * @property {boolean} [refreshBtn] - 是否显示刷新按钮
- * @property {boolean} [columnBtn] - 是否显示列设置按钮
- * @property {boolean} searchShow - 是否显示搜索区域
- * @property {boolean} addBtn - 是否显示新增按钮
- * @property {boolean} editBtn - 是否显示编辑按钮
- * @property {boolean} delBtn - 是否显示删除按钮
- * @property {boolean} viewBtn - 是否显示查看按钮
- * @property {boolean} [selection] - 是否显示多选框
- * @property {boolean} [reserveSelection] - 是否保留选择状态
- * @property {string} [height] - 表格高度
- * @property {string} [calcHeight] - 计算高度的偏移量
- * @property {AvuePaginationOption|boolean} page - 分页配置,true启用默认分页,对象为详细配置
- * @property {AvueColumnOption[]} column - 列配置数组
- */
-
-/**
- * AvueJS列配置选项类型定义
- * @typedef {Object} AvueColumnOption
- * @description 表格列的配置对象
- * @property {string} label - 列标题
- * @property {string} prop - 列属性名
- * @property {'text'|'number'|'select'|'date'|'datetime'} [type] - 列类型
- * @property {number} [minWidth] - 最小宽度
- * @property {number} [width] - 固定宽度
- * @property {boolean} [sortable] - 是否可排序
- * @property {'left'|'center'|'right'} [align] - 对齐方式
- * @property {boolean} [overHidden] - 是否隐藏溢出内容
- * @property {boolean} [hide] - 是否隐藏列
- * @property {number} [precision] - 数字精度
- * @property {{label: string, value: string|number}[]} [dicData] - 字典数据
- * @property {ValidationRule[]} [rules] - 验证规则
- */
 
 /**
  * 获取物料明细表格配置
  * @param {boolean} [isEditMode=false] - 是否为编辑模式
- * @returns {AvueTableOption} AvueJS表格配置对象
+ * @returns {AvueCrudOption<MaterialDetailRecord>} AvueJS表格配置对象
  */
 export function getMaterialDetailOption(isEditMode = false) {
   return {

+ 6 - 9
src/components/order-form/material-detail-table.vue

@@ -190,23 +190,20 @@ import {
  * @typedef {import('./types').MaterialUpdateEventData} MaterialUpdateEventData
  * @typedef {import('./types').MaterialDeleteEventData} MaterialDeleteEventData
  * @typedef {import('./types').MaterialDetailQueryParams} MaterialDetailQueryParams
+ * @typedef {import('smallwei__avue/crud').AvueCrudOption<MaterialDetailRecord>} AvueCrudOption
+ * @typedef {import('smallwei__avue/crud').AvueCrudColumn<MaterialDetailRecord>} AvueCrudColumn
+ * @typedef {import('smallwei__avue/crud').PageOption} PageOption
  */
 
 
 
-/**
- * 分页配置类型定义
- * @typedef {Object} PaginationConfig
- * @property {number} currentPage - 当前页码,从1开始
- * @property {number} pageSize - 每页显示条数
- * @property {number} total - 总记录数
- */
+// 使用@types/smallwei__avue/crud中的PageOption类型代替PaginationConfig
 
 /**
  * 组件数据类型定义
  * @typedef {Object} MaterialDetailTableData
  * @property {Partial<MaterialDetailRecord>} formData - 表单数据
- * @property {PaginationConfig} page - 分页配置
+ * @property {PageOption} page - 分页配置
  * @property {boolean} importDialogVisible - 导入弹窗显示状态
  */
 
@@ -319,7 +316,7 @@ export default {
   computed: {
     /**
      * 表格配置选项 - 获取AvueJS表格的配置对象
-     * @returns {AvueTableOption} AvueJS表格配置对象,根据编辑模式配置
+     * @returns {AvueCrudOption<MaterialDetailRecord>} AvueJS表格配置对象,根据编辑模式配置
      */
     tableOption() {
       return getMaterialDetailOption(this.editMode)

+ 6 - 1
src/components/order-form/order-form-mixin.js

@@ -48,9 +48,14 @@ import {
 
 /**
  * @typedef {import('./types').OrderFormModel} OrderFormModel
- * @description 订单表单数据模型类型
+ * @typedef {import('smallwei__avue/form').AvueFormOption<OrderFormModel>} AvueFormOption
+ * @typedef {import('smallwei__avue/form').AvueFormColumn<OrderFormModel>} AvueFormColumn
+ * @typedef {import('smallwei__avue/form').AvueFormGroup<OrderFormModel>} AvueFormGroup
+ * @typedef {import('smallwei__avue/crud').PageOption} PageOption
  */
 
+
+
 /**
  * @typedef {import('./types').MaterialDeleteEventData} MaterialDeleteEventData
  * @description 物料删除事件数据类型

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

@@ -47,7 +47,7 @@
             @customer-selected="handleCustomerSelected"
           />
         </template>
-        
+
         <!-- 自定义地址选择组件 -->
         <template #addressId="{ value, column }">
           <address-select
@@ -89,6 +89,9 @@ import { CUSTOMER_SELECT_EVENTS, ADDRESS_SELECT_EVENTS, MATERIAL_DETAIL_EVENTS }
  * @typedef {import('./types').MaterialDetailRecord} MaterialDetailRecord
  * @typedef {import('./types').MaterialUpdateEventData} MaterialUpdateEventData
  * @typedef {import('./types').MaterialDeleteEventData} MaterialDeleteEventData
+ * @typedef {import('smallwei__avue/form').AvueFormOption<OrderFormModel>} AvueFormOption
+ * @typedef {import('smallwei__avue/form').AvueFormColumn<OrderFormModel>} AvueFormColumn
+ * @typedef {import('smallwei__avue/form').AvueFormGroup<OrderFormModel>} AvueFormGroup
  */
 
 /**
@@ -119,7 +122,7 @@ export default {
      * @description 存储当前订单的物料明细数据,包含数据来源和删除权限标识
      */
       materialDetails: [],
-      
+
       // 事件常量,用于模板中的动态事件绑定
       CUSTOMER_SELECT_EVENTS,
       ADDRESS_SELECT_EVENTS,
@@ -231,7 +234,7 @@ export default {
       },
       immediate: true
     },
-    
+
     /**
      * 监听表单数据变化,用于地址回显
      * @description 当表单数据中的客户编码和地址相关字段都有值时,触发地址选择组件的回显
@@ -362,7 +365,7 @@ export default {
         this.$set(this.formData, 'customerId', customerData.customerId)
         this.$set(this.formData, 'customerCode', customerData.customerCode)
         this.$set(this.formData, 'customerName', customerData.customerName)
-        
+
         // 清空地址相关字段
         this.$set(this.formData, 'addressId', '')
         this.$set(this.formData, 'receiverName', '')
@@ -371,7 +374,7 @@ export default {
         this.$set(this.formData, 'receiverAddress', '')
       }
     },
-    
+
     /**
      * 处理地址选择事件
      * @description 当地址选择组件选择地址时的回调处理,自动填充收货人相关信息
@@ -395,7 +398,7 @@ export default {
         this.$set(this.formData, 'receiverAddress', addressData.detailAddress || '')
       }
     },
-    
+
     /**
      * 处理地址回显
      * @description 在编辑模式下,根据表单中的地址信息在地址选择组件中进行回显
@@ -405,7 +408,7 @@ export default {
       // 查找地址选择组件的引用
       const addressSelectRefs = this.$refs.orderForm?.$refs?.addressId
       const addressSelectComponent = Array.isArray(addressSelectRefs) ? addressSelectRefs[0] : addressSelectRefs
-      
+
       if (addressSelectComponent && typeof addressSelectComponent.setEchoValue === 'function') {
         // 构建地址信息对象用于匹配
         const addressInfo = {
@@ -414,7 +417,7 @@ export default {
           regionName: this.formData.receiverRegion,
           detailAddress: this.formData.receiverAddress
         }
-        
+
         // 调用地址选择组件的回显方法
         addressSelectComponent.setEchoValue(addressInfo)
       }

+ 14 - 100
src/components/order-form/types.d.ts

@@ -130,64 +130,17 @@ export type OrderTypeOption = SelectOption<OrderType>;
  */
 export type OrderStatusOption = SelectOption<OrderStatus>;
 
-/**
- * AvueJS表单列配置接口
- * @description 定义表单字段的详细配置
- */
-export interface AvueFormColumn {
-  /** 字段标识 */
-  prop: string
-  /** 字段标签 */
-  label: string
-  /** 字段类型 */
-  type?: 'input' | 'select' | 'date' | 'datetime' | 'number' | 'textarea' | 'switch' | 'radio' | 'checkbox'
-  /** 字段跨度 */
-  span?: number
-  /** 是否必填 */
-  required?: boolean
-  /** 验证规则 */
-  rules?: AvueFormRule[]
-  /** 字段提示 */
-  tip?: string
-  /** 字段占位符 */
-  placeholder?: string
-  /** 是否禁用 */
-  disabled?: boolean
-  /** 是否只读 */
-  readonly?: boolean
-  /** 是否显示 */
-  display?: boolean
-  /** 字典数据 */
-  dicData?: AvueDicData[]
-  /** 字典URL */
-  dicUrl?: string
-  /** 默认值 */
-  value?: any
-  /** 最大长度 */
-  maxlength?: number
-  /** 最小值 */
-  min?: number
-  /** 最大值 */
-  max?: number
-  /** 精度 */
-  precision?: number
-  /** 步长 */
-  step?: number
-  /** 日期格式 */
-  format?: string
-  /** 值格式 */
-  valueFormat?: string
-}
+// 使用@types/smallwei__avue库中的类型定义
+import { AvueFormColumn, AvueFormGroup, AvueFormOption } from '@types/smallwei__avue/form';
+import { AvueCrudColumn, AvueCrudDefaults, PageOption } from '@types/smallwei__avue/crud';
+import { DicItem, DicProps } from '@types/smallwei__avue/dic';
+
+// 为了兼容现有代码,定义一些类型别名
+type AvueDicData = DicItem;
+type AvueFormRule = import('async-validator').RuleItem;
 
 /**
- * AvueJS表单分组配置接口
- */
-export interface AvueFormGroup {
-  /** 分组标题 */
-  title: string;
-  /** 分组图标 */
-  icon?: string;
-  /** 是否可折叠 */
+ * 是否可折叠 */
   collapse?: boolean;
   /** 默认是否展开 */
   active?: boolean;
@@ -195,30 +148,7 @@ export interface AvueFormGroup {
   column: AvueFormColumn[];
 }
 
-/**
- * AvueJS表单配置选项接口
- * @description 定义AvueJS表单组件的配置结构
- */
-export interface AvueFormOption {
-  /** 表单列配置 */
-  column: AvueFormColumn[]
-  /** 表单标签宽度 */
-  labelWidth?: number
-  /** 表单标签位置 */
-  labelPosition?: 'left' | 'right' | 'top'
-  /** 表单大小 */
-  size?: 'medium' | 'small' | 'mini'
-  /** 是否显示提交按钮 */
-  submitBtn?: boolean
-  /** 是否显示清空按钮 */
-  emptyBtn?: boolean
-  /** 表单分组配置 */
-  group?: AvueFormGroup[]
-  /** 表单菜单配置 */
-  menuBtn?: boolean
-  /** 表单菜单位置 */
-  menuPosition?: 'left' | 'center' | 'right'
-}
+// AvueFormOption 类型已在@types/smallwei__avue/form.d.ts中定义
 
 /**
  * 订单表单混入数据类型
@@ -267,26 +197,8 @@ export interface PaginationData<T = any> {
   pages: number;
 }
 
-/**
- * AvueJS分页配置接口
- * @description 用于AvueJS表格组件的分页配置
- */
-export interface AvuePaginationConfig {
-  /** 当前页码,从1开始 */
-  currentPage: number;
-  /** 每页显示条数 */
-  pageSize: number;
-  /** 总记录数 */
-  total: number;
-  /** 页码按钮的数量,当总页数超过该值时会折叠 */
-  pagerCount?: number;
-  /** 是否为分页按钮添加背景色 */
-  background?: boolean;
-  /** 组件布局,子组件名用逗号分隔 */
-  layout?: string;
-  /** 每页显示个数选择器的选项设置 */
-  pageSizes?: number[];
-}
+// 使用@types/smallwei__avue库中的PageOption类型代替AvuePaginationConfig
+// PageOption 类型已在@types/smallwei__avue/crud.d.ts中定义
 
 /**
  * 订单详情API响应类型
@@ -497,6 +409,8 @@ export interface MaterialDetailItem {
   createTime: string;
   /** 更新时间,ISO 8601格式 */
   updateTime: string;
+  /** 数据来源 */
+  dataSource?: string;
 }
 
 /**