表单组件代码示例：FormSchema 数组解析

这段代码定义了一个名为 'formSchema' 的常量数组，它包含多个对象，每个对象代表一个表单项。每个表单项对象包含以下属性：

• 'label' (标签名)：用于表单渲染。
• 'field' (字段名)：用于表单渲染。
• 'component' (组件名)：指定表单项使用的组件，例如 'Input'、'InputNumber'、'JSwitch'、'JDictSelectTag' 和 'DatePicker'。

此外，每个表单项还可以包含 'dynamicRules' 属性，它是一个函数，用于动态生成校验规则。该函数接收 'model' 和 'schema' 两个参数，分别代表当前表单项的值和表单项的 schema 定义。函数需要返回一个校验规则数组，用于指定该表单项的校验规则。

例如，在 'deviceId'、'brand' 和 'price' 这三个表单项中，使用了 'dynamicRules' 来定义必填校验规则。

'componentProps' 属性用于指定组件的属性。例如，'DatePicker' 组件的 'showTime' 和 'valueFormat' 属性。

代码示例:

export const formSchema: FormSchema[] = [
  {
    label: '设备编号',
    field: 'deviceId',
    component: 'Input',
    dynamicRules: ({ model, schema }) => {
      return [
        { required: true, message: '请输入设备编号!' },
      ];
    },
  },
  {
    label: '品牌',
    field: 'brand',
    component: 'Input',
    dynamicRules: ({ model, schema }) => {
      return [
        { required: true, message: '请输入品牌!' },
      ];
    },
  },
  {
    label: '售价',
    field: 'price',
    component: 'Input',
    dynamicRules: ({ model, schema }) => {
      return [
        { required: true, message: '请输入售价!' },
      ];
    },
  },
  {
    label: '温度',
    field: 'temperature',
    component: 'InputNumber',
  },
  {
    label: '状态',
    field: 'status',
    component: 'JSwitch',
    componentProps: {
      options: [ 'open', 'close' ],
    },
    dynamicRules: ({ model, schema }) => {
      return [
        { required: true, message: '请输入状态!' },
      ];
    },
  },
  {
    label: '模式',
    field: 'model',
    component: 'JDictSelectTag',
    componentProps: {
      dictCode: 'device_model',
    },
  },
  {
    label: '风力',
    field: 'windForce',
    component: 'JDictSelectTag',
    componentProps: {
      dictCode: 'wind_force',
    },
  },
  {
    label: '千瓦时',
    field: 'power',
    component: 'InputNumber',
    dynamicRules: ({ model, schema }) => {
      return [
        { required: true, message: '请输入千瓦时!' },
      ];
    },
  },
  {
    label: '定时关',
    field: 'timingOff',
    component: 'DatePicker',
    componentProps: {
      showTime: true,
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
    },
  },
  {
    label: '定时开',
    field: 'timingOpen',
    component: 'DatePicker',
    componentProps: {
      showTime: true,
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
    },
  },
];

这个代码示例展示了如何使用 FormSchema 数组定义表单结构，并使用 dynamicRules 动态生成校验规则。它还演示了如何使用不同类型的组件来构建表单，并如何为这些组件配置属性。