import { APPROVAL_STATUS_OPTIONS } from '@/constants/forecast' /** * 销售预测表单配置 * @description 基于AvueJS的销售预测表单配置,支持新增和编辑销售预测功能 */ /** * 月份选项 * @type {Array>} */ const MONTH_OPTIONS = [ { label: '1月', value: 1 }, { label: '2月', value: 2 }, { label: '3月', value: 3 }, { label: '4月', value: 4 }, { label: '5月', value: 5 }, { label: '6月', value: 6 }, { label: '7月', value: 7 }, { label: '8月', value: 8 }, { label: '9月', value: 9 }, { label: '10月', value: 10 }, { label: '11月', value: 11 }, { label: '12月', value: 12 } ] /** * 销售预测表单基础配置 * @type {import('./types').FormOption} */ export const forecastFormOption = { // 基础配置 submitBtn: false, // 不显示默认提交按钮 emptyBtn: false, // 不显示默认清空按钮 labelWidth: 120, // 标签宽度 column: [], // 列配置,将在运行时动态设置 gutter: 20, // 栅格间隔 menuBtn: false, // 不显示菜单按钮 size: 'small', // 使用小尺寸组件 // 分组配置 group: [ { label: '基本信息', icon: 'el-icon-document', prop: 'basic', column: [ { label: '预测编码', prop: 'forecastCode', type: 'input', span: 12, placeholder: '请输入预测编码', disabled: true, display: false, // 新增时不显示 rules: [{ required: true, message: '请输入预测编码', trigger: 'blur' }] }, { label: '年份', prop: 'year', type: 'year', span: 12, placeholder: '请选择年份', valueFormat: 'yyyy', rules: [{ required: true, message: '请选择年份', trigger: 'change' }] }, { label: '月份', prop: 'month', type: 'select', span: 12, placeholder: '请选择月份', dicData: MONTH_OPTIONS, rules: [{ required: true, message: '请选择月份', trigger: 'change' }] }, { label: '客户', prop: 'customerId', type: 'select', span: 12, slot: true, placeholder: '请选择客户', display: false, rules: [{ required: true, message: '请选择客户', trigger: 'change' }] }, { label: '客户编码', prop: 'customerCode', type: 'input', span: 12, placeholder: '选择客户后自动填充', disabled: true, display: false }, { label: '客户名称', prop: 'customerName', type: 'input', span: 12, placeholder: '选择客户后自动填充', disabled: true } ] }, { label: '产品信息', icon: 'el-icon-goods', prop: 'product', column: [ { label: '品牌ID', prop: 'brandId', type: 'input', span: 12, placeholder: '请输入品牌ID', rules: [{ required: true, message: '请输入品牌ID', trigger: 'blur' }] }, { label: '品牌编码', prop: 'brandCode', type: 'input', span: 12, placeholder: '请输入品牌编码', rules: [{ required: true, message: '请输入品牌编码', trigger: 'blur' }] }, { label: '品牌名称', prop: 'brandName', type: 'input', span: 12, placeholder: '请输入品牌名称', rules: [{ required: true, message: '请输入品牌名称', trigger: 'blur' }] }, { label: '物料', prop: 'itemId', type: 'select', span: 12, slot: true, placeholder: '请选择物料', rules: [{ required: true, message: '请选择物料', trigger: 'change' }] }, { label: '物料编码', prop: 'itemCode', type: 'input', span: 12, placeholder: '选择物料后自动填充', disabled: true }, { label: '物料名称', prop: 'itemName', type: 'input', span: 12, placeholder: '选择物料后自动填充', disabled: true }, { label: '物料规格', prop: 'itemSpecs', type: 'input', span: 12, placeholder: '选择物料后自动填充', disabled: true }, { label: '当前库存', prop: 'currentInventory', type: 'number', span: 12, placeholder: '请输入当前库存', min: 0, precision: 0, step: 1, controlsPosition: 'right', rules: [{ required: true, message: '请输入当前库存', trigger: 'blur' }, { type: 'number', min: 0, message: '当前库存不能小于0', trigger: 'blur' }] }, { label: '预测数量', prop: 'forecastQuantity', type: 'number', span: 12, placeholder: '请输入预测数量', min: 1, precision: 0, step: 1, controlsPosition: 'right', rules: [{ required: true, message: '请输入预测数量', trigger: 'blur' }, { type: 'number', min: 1, message: '预测数量不能小于1', trigger: 'blur' }] } ] }, { label: '审批信息', icon: 'el-icon-check', prop: 'approval', display: false, // 新增时不显示 column: [ { label: '审批状态', prop: 'approvalStatus', type: 'select', span: 8, placeholder: '审批状态', dicData: APPROVAL_STATUS_OPTIONS, disabled: true }, { label: '审批人', prop: 'approver', type: 'input', span: 8, placeholder: '审批人', disabled: true }, { label: '审批时间', prop: 'approvalTime', type: 'datetime', span: 8, placeholder: '审批时间', disabled: true, valueFormat: 'yyyy-MM-dd HH:mm:ss' }, { label: '审批备注', prop: 'approvalRemark', type: 'textarea', span: 24, placeholder: '审批备注', disabled: true, minRows: 2, maxRows: 4 } ] } ] } /** * 获取表单配置 * @description 根据编辑模式动态生成AvueJS表单配置,支持字段显示/隐藏和禁用状态调整 * @param {boolean} [isEdit=false] - 是否为编辑模式 * @returns {import('./types').FormOption} AvueJS表单配置对象 * @throws {Error} 当配置对象结构异常时抛出错误 * @example * // 获取新增模式的表单配置 * const createOption = getFormOption(false) * * // 获取编辑模式的表单配置 * const editOption = getFormOption(true) */ export function getFormOption(isEdit = false) { // 深拷贝配置对象 const option = JSON.parse(JSON.stringify(forecastFormOption)) if (isEdit) { adjustFieldsForEditMode(option) } else { adjustFieldsForCreateMode(option) } return option } /** * 调整编辑模式下的字段配置 * @description 修改表单配置以适应编辑模式,显示审批信息、预测编码,禁用关键字段 * @param {import('./types').FormOption} option - 表单配置对象 * @returns {void} 直接修改传入的配置对象,无返回值 * @private */ function adjustFieldsForEditMode(option) { option.group?.forEach(group => { // 显示审批信息分组 if (group.prop === 'approval') { group.display = true } group.column.forEach(field => { // 显示预测编码字段 if (field.prop === 'forecastCode') { field.display = true } // 年份和月份在编辑模式下禁用 if (field.prop === 'year' || field.prop === 'month') { field.disabled = true } // 品牌在编辑模式下禁用 if (field.prop === 'brandId') { field.disabled = true } }) }) } /** * 调整新增模式下的字段配置 * @description 修改表单配置以适应新增模式,隐藏审批信息和预测编码字段 * @param {import('./types').FormOption} option - 表单配置对象 * @returns {void} 直接修改传入的配置对象,无返回值 * @private */ function adjustFieldsForCreateMode(option) { option.group?.forEach(group => { // 隐藏审批信息分组 if (group.prop === 'approval') { group.display = false } group.column.forEach(field => { // 隐藏预测编码字段 if (field.prop === 'forecastCode') { field.display = false } }) }) }