ProComponets使用总结

ProForm内部使用

ProFormSelcet三种使用方式

1.第一种方式  这种方式一般用于服务器请求数据
<ProFormSelect
        width="md"
        fieldProps={{
          labelInValue: true,
        }}
        request={async () => [
          { label: '全部', value: 'all' },
          { label: '未解决', value: 'open' },
          { label: '已解决', value: 'closed' },
          { label: '解决中', value: 'processing' },
        ]}
        name="useMode"
        label="合同约定生效方式"
      />

2.第二种方式   为了和table达到工程化方式统一
<ProFormSelect
        name="select-multiple"
        label="Select[multiple]"
        valueEnum={{
          red: 'Red',
          green: 'Green',
          blue: 'Blue',
        }}
        fieldProps={{
          mode: 'multiple',
        }}
        placeholder="Please select favorite colors"
        rules={[{ required: true, message: 'Please select your favorite colors!', type: 'array' }]}
      />

3.第三种方式 默认使用options方式
<ProFormSelect.SearchSelect
          name="userQuery"
          label="查询选择器"
          options={[
            { label: '全部', value: 'all' },
            { label: '未解决', value: 'open' },
            { label: '已解决', value: 'closed' },
            { label: '解决中', value: 'processing' },
          ]}
        />

ProFormDatePicker和ProFormDateTimePicker

ProFormDatePicker可以配置时间相当于ProFormDateTimePicker

<ProFormDatePicker
                    name="fixedTime"
                    width={width}
                    label="解决时间"
                    fieldProps={{
                        showTime: { format: 'HH:mm' },
                        format: 'YYYY-MM-DD HH:mm',
                    }}
                />
                
<ProFormDateTimePicker
                            width={layout}
                            name="faultTime"
                            label="发生日期"
                            rules={[
                                {
                                    required: true,
                                    message: '发生日期不能为空！',
                                },
                            ]}
                        />