gubersail-platform-ui/src/components/forecast-form/form-option.js

import { APPROVAL_STATUS_OPTIONS } from '@/constants/forecast'

/**
 * 销售预测表单配置
 * @description 基于AvueJS的销售预测表单配置，支持新增和编辑销售预测功能
 */

/**
 * 月份选项
 * @type {Array<SelectOption<number>>}
 */
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
      }
    })
  })
}