|
@@ -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
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
+}
|