EditableProTable高级使用,自定义表单,对接接口

发布时间:2024年01月12日

需求描述:
数量单元格,可以点击按钮增/减。同时输入框可以输入,最后请求接口
解决方案: 请求接口的时候做了延时请求,请求成功后,改变表单数据
在这里插入图片描述

{
      title: '数量',
      dataIndex: 'count',
      width:100,
      renderFormItem: (item:any, config, form) => {
        const recordKey = config.recordKey
        const value = form.getFieldValue([recordKey, item.dataIndex])

        const id = item.entry.id;
        const onClick = (status: string) => {
          let num = (value as any * 1)
          if(status == 'reduce') {
           
            if(value == 0) {
              message.info('数量不能再减少');
              return
            }
            num = num - 1
          }else {
            num = num + 1
          }
          if(!value) {
            message.info('请注意数量为空');
            return
          }
        
        // 请求接口
          后台接口api(id, {
            count: num,
          })
            .then(() => {
              message.success('操作成功');
              form.setFieldValue([recordKey || '', 'count'], `${num}`);

            })
            .finally(() => {
              actionRef?.current?.reload();
            });  
        }
  
        return <div  className='flex'>
          <MinusSquareFilled style={{color:'#bfbfbf'}} onClick={() => onClick('reduce')}/>
          <Input 
            size='small'  
            bordered={false}
            value={value}
            onChange={(e) => {
              const value = e.target.value as any;
         
            
              if (timeOutID?.current) {
                clearTimeout(timeOutID.current);
              }
              const timeId = setTimeout(() => {
                if (value == '') {
                  message.info('请注意数量为空');
                  return;
                }
                fetchUpReceiptItem(id, {
                  count: value * 1,
                })
                  .then(() => {
                    message.success('操作成功');
                  })
                  .finally(() => {
                    actionRef?.current?.reload();
                  });
              },1000)
              timeOutID.current = timeId;
             
            }}
             />
          <PlusSquareFilled style={{color:'#bfbfbf'}} onClick={() => onClick('add')} />
          </div>
      },
    },

关于timeOutID 变量

const timeOutID = useRef<any>(); // 延时

你会了吗?

文章来源:https://blog.csdn.net/tangxiaobao2016/article/details/135499888
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。