ProFormList Demo 方法

import React, {useEffect, useRef} from 'react';
import ProForm, {
  ProFormGroup,
  ProFormInstance,
  ProFormList,
  ProFormMoney,
  ProFormSelect,
} from '@ant-design/pro-form';
import {getGoodsSkuByGoodsId, saveEditGoodsSku} from "@/services/oms/goods";
import {useParams} from "umi";
import {getDictionary} from "@/services/oms/common";
import {message} from "antd";
import {history} from "@@/core/history";

const SkuView: React.FC = () => {
  const formRef = useRef<ProFormInstance>();
  const params = useParams();
  // 获取商品SKU列表
  const getGoodsSkuList = async () => {
    // @ts-ignore
    const result: API.GoodsSkuItem[] = await getGoodsSkuByGoodsId({
      id: params.id,
    });
    if (result) {
      formRef?.current?.setFieldsValue({
        orderSkuList: result,
      });
    }
  }
  useEffect(() => {
    getGoodsSkuList();
  }, [params.id]);
  return (
    <ProForm
      formRef={formRef}
      onFinish={async (values) =>{
          values.id = params.id;
          if(params.id==0){
            message.success('请先填写商品基础信息');
          }else{
            try {
              const result=await saveEditGoodsSku(values);
              message.success(result.msg);
              history.push('/editGoods/'   result.id);
            } catch {
              message.success('提交失败');
            }
          }
        }}
      submitter={{
        resetButtonProps: {
          style: {
            display: 'none',
          },
        },
        submitButtonProps: {
          children: '提交编辑商品SKU',
        },
      }}
    >
      <ProFormList
        name="orderSkuList"
        copyIconProps={{
          tooltipText: '复制此行到末尾',
        }}
        deleteIconProps={{
          tooltipText: '移除本行',
        }}
      >
        <ProFormGroup key="group">
          <ProFormMoney
            name="skuAmt"
            label="销售价"
            fieldProps={{
              numberPopoverRender: true,
            }}
          />
          <ProFormMoney
            name="costAmt"
            label="结算价"
            fieldProps={{
              numberPopoverRender: true,
            }}
          />
          <ProFormSelect
            label="销售单位"
            name="saleUnit"
            rules={[{required: true, message: '请选择销售单位'}]}
            placeholder="请选择库存单位"
            fieldProps={{
              labelInValue: false,
              autoClearSearchValue: true,
              style: {
                minWidth: 180,
              },
            }}
            // @ts-ignore
            request={async ({keyWords = ''}) => {
              return await getDictionary({name: keyWords, type: "SALE_UNIT"});
            }}
          />
          <ProFormSelect
            label="结算单位"
            name="checkoutUnit"
            rules={[{required: true, message: '请选择结算单位'}]}
            placeholder="请选择结算单位"
            fieldProps={{
              labelInValue: false,
              autoClearSearchValue: true,
              style: {
                minWidth: 180,
              },
            }}
            // @ts-ignore
            request={async ({keyWords = ''}) => {
              return await getDictionary({name: keyWords, type: "SALE_UNIT"});
            }}
          />
          <ProFormSelect
            label="状态"
            name="status"
            options={[
              {
                label: '已下架',
                value: 0,
              },
              {
                label: '已上架',
                value: 1,
              },
              {
                label: '已删除',
                value: -1,
              },
            ]}
            fieldProps={{
              labelInValue: false,
              autoClearSearchValue:true,
              style: {
                minWidth: 100,
              }
            }}
            placeholder="请选择状态"
          />
        </ProFormGroup>
      </ProFormList>

    </ProForm>
  );
};

export default SkuView;

后端接口

   @SSLTag
    @AuthTag
    @ApiOperation(value = "[SSL]根据ID查询公司商品SKU集合", notes = "根据ID查询公司商品SKU集合", response = RestData.class)
    @RequestMapping(value = "/getCoGoodsSkuListById", method = RequestMethod.GET)
    public ResponseEntity<?> getCoGoodsSkuListById(
            @ApiParam(name = "id", value = "ID", required = true) @RequestParam Integer id) {
        if (id != null && id > 0) {
            List<CoGoodsSkuModel> list=coGoodsSkuDao.findCoGoodsSkuModelListByGoodsId(id);
            return new ResponseEntity<>(list, HttpStatus.OK);
        }
        return null;
    }

完成效果:

近日在学习使用ant design pro，发现没有ProFormList的使用实例，经过自己摸索勉强完成，发出来希望可以给需要的人提供帮助，互相交流学习。

这篇好文章是转载于：学新通技术网