pro-components
pro-components copied to clipboard
ant-design
🐛[BUG]官方demo Schema Form convertValue 存在Bug
提问前先看看：
🐛 bug 描述
Schema Form convertValue配置后触发onChange的结果与正常预期不符
📷 复现步骤
1.打开复现地址 2.在第二个formItem 标题【{dataIndex:"title"}】 输入框打开中文输入法输入文字 复现地址 https://procomponents.ant.design/components/schema-form#%E4%BB%A3%E7%A0%81%E7%A4%BA%E4%BE%8B
🏞 期望结果
onchange只修改value值 如：return 标题：${value};onchange时不要给value叠加很多 标题：
💻 复现代码
import type { ProFormColumnsType, ProFormLayoutType } from '@ant-design/pro-components'; import { BetaSchemaForm, ProFormSelect } from '@ant-design/pro-components'; import { Alert, DatePicker, Space } from 'antd'; import moment from 'moment'; import { useState } from 'react';
const valueEnum = { all: { text: '全部', status: 'Default' }, open: { text: '未解决', status: 'Error', }, closed: { text: '已解决', status: 'Success', disabled: true, }, processing: { text: '解决中', status: 'Processing', }, };
type DataItem = { name: string; state: string; };
const columns: ProFormColumnsType<DataItem>[] = [
{
title: '标题',
dataIndex: 'title',
formItemProps: {
rules: [
{
required: true,
message: '此项为必填项',
},
],
},
width: 'md',
colProps: {
xs: 24,
md: 12,
},
initialValue: '默认值',
convertValue: (value) => { //////////////////////////////////////////////////// 此处存在问题 /////////////////////////////////////////////////////////
return 标题：${value};
},
transform: (value) => {
return {
title: ${value}-转换,
};
},
},
{
title: '状态',
dataIndex: 'state',
valueType: 'select',
valueEnum,
width: 'md',
colProps: {
xs: 24,
md: 12,
},
},
{
title: '标签',
dataIndex: 'labels',
width: 'md',
colProps: {
xs: 12,
md: 4,
},
},
{
valueType: 'switch',
title: '开关',
dataIndex: 'Switch',
fieldProps: {
style: {
width: '200px',
},
},
width: 'md',
colProps: {
xs: 12,
md: 20,
},
},
{
title: '创建时间',
key: 'showTime',
dataIndex: 'createName',
initialValue: [moment().add(-1, 'm'), moment()],
renderFormItem: () => <DatePicker.RangePicker />,
width: 'md',
colProps: {
xs: 24,
md: 12,
},
},
{
title: '更新时间',
dataIndex: 'updateName',
initialValue: [moment().add(-1, 'm'), moment()],
renderFormItem: () => <DatePicker.RangePicker />,
width: 'md',
colProps: {
xs: 24,
md: 12,
},
},
{
title: '分组',
valueType: 'group',
columns: [
{
title: '状态',
dataIndex: 'groupState',
valueType: 'select',
width: 'xs',
colProps: {
xs: 12,
},
valueEnum,
},
{
title: '标题',
width: 'md',
dataIndex: 'groupTitle',
colProps: {
xs: 12,
},
formItemProps: {
rules: [
{
required: true,
message: '此项为必填项',
},
],
},
},
],
},
{
title: '列表',
valueType: 'formList',
dataIndex: 'list',
initialValue: [{ state: 'all', title: '标题' }],
colProps: {
xs: 24,
sm: 12,
},
columns: [
{
valueType: 'group',
columns: [
{
title: '状态',
dataIndex: 'state',
valueType: 'select',
colProps: {
xs: 24,
sm: 12,
},
width: 'xs',
valueEnum,
},
{
title: '标题',
dataIndex: 'title',
width: 'md',
formItemProps: {
rules: [
{
required: true,
message: '此项为必填项',
},
],
},
colProps: {
xs: 24,
sm: 12,
},
},
],
},
{
valueType: 'dateTime',
initialValue: new Date(),
dataIndex: 'currentTime',
width: 'md',
},
],
},
{
title: 'FormSet',
valueType: 'formSet',
dataIndex: 'formSet',
colProps: {
xs: 24,
sm: 12,
},
rowProps: {
gutter: [16, 0],
},
columns: [
{
title: '状态',
dataIndex: 'groupState',
valueType: 'select',
width: 'md',
valueEnum,
},
{
width: 'xs',
title: '标题',
dataIndex: 'groupTitle',
tip: '标题过长会自动收缩',
formItemProps: {
rules: [
{
required: true,
message: '此项为必填项',
},
],
},
},
],
},
{
title: '创建时间',
dataIndex: 'created_at',
valueType: 'dateRange',
width: 'md',
colProps: {
span: 24,
},
transform: (value) => {
return {
startTime: value[0],
endTime: value[1],
};
},
},
];
export default () => { const [layoutType, setLayoutType] = useState<ProFormLayoutType>('Form'); return ( <> <Space style={{ width: '100%', }} direction="vertical" > <Alert type="warning" message="QueryFilter 和 lightFilter 暂不支持grid模式" style={{ marginBottom: 24, }} /> <ProFormSelect label="布局方式" options={[ 'Form', 'ModalForm', 'DrawerForm', 'LightFilter', 'QueryFilter', 'StepsForm', 'StepForm', 'Embed', ]} fieldProps={{ value: layoutType, onChange: (e) => setLayoutType(e), }} /> </Space> <BetaSchemaForm<DataItem> trigger={点击我} layoutType={layoutType} steps={[ { title: 'ProComponent', }, ]} rowProps={{ gutter: [16, 16], }} colProps={{ span: 12, }} grid={layoutType !== 'LightFilter' && layoutType !== 'QueryFilter'} onFinish={async (values) => { console.log(values); }} columns={(layoutType === 'StepsForm' ? [columns] : columns) as any} /> </> ); };
© 版本信息
- ProComponents 版本: 1.1.1
- umi 版本 4.0.0
- 浏览器环境 chrome 版本 104.0.5112.101（正式版本） (arm64)
- 开发环境 mac OS
🚑 其他信息
当表单项类型为date时，修改日期后 convertValue函数参数value的值异常。
代码：
convertValue: (value: any) => { // 获取时转化值，一般用于将数据格式化为组件接收的格式 return convertValueFun(item, value); },
版本：ProComponents [2.3.34]
TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方员会在一定时间后继续继续处理。
感谢反馈，根据你提供的信息，我们进行了相关代码测试，在 ProComponents [2.3.34] 版本中存在你所说的日期数据格式化异常问题。我们已经在代码中修复该问题，您可以在 ProComponents [2.3.41] 版本中测试此问题是否已被修复，如果您在这个版本中仍然遇到问题，请及时与我们联系。 修复后的代码如下：
convertValue: (value, form) => {
// 获取时转化值，一般用于将数据格式化为组件接收的格式
const { valueType } = item;
const isString = valueType === 'dateTime' || valueType === 'dateRange' || valueType === 'time' || valueType === 'timeRange';
if (isString) {
return form?.getFieldValue?.(item.dataIndex)?.format?.('YYYY-MM-DD HH:mm:ss');
}
return value;
},
同时我们还更新了相关文档，您可以参考以下文档来学习如何配置您的 ProFormColumnsType 日期类型的转换:
convertValue: (value) => {
return `标题：${value}`;
},
这个是设计，你要自己处理这个多余的标题，value 会变成返回值，组件不知道你返回了什么