输入框之间的联动+form表单编辑的提交取消+form表单校验

最新推荐文章于 2024-04-08 14:08:08 发布

多乐_π

最新推荐文章于 2024-04-08 14:08:08 发布

阅读量556

点赞数 1

本文链接：https://blog.csdn.net/weixin_45481456/article/details/118482552

版权

需求：

输入框1选择之后，输入框2会清空当前选项，根据输入框1的内容，输入框2个下拉选项有所改变。

编辑页面

1、页面初始化

// 编辑页,初始化的值

useEffect(() => {

    props.searchKpiDetail({

      rcmId: query.rcmId || '',

    }).then(

      (res) => { 接口套娃，在res的花括号下面

                searchForm.setFieldsValue({

                  rcmId: _.get(res, ['data', 'rcmId'])，

                  kpiAdmin: _.get(_.get(res, 'data'), 'kpiAdminList') &&

                //kpiAdminList: ["吴阳(0127)", "张博(01358)"]

              (_.get(_.get(res, 'data'), 'kpiAdminList') ).toString(),  //吴健阳(0127),张博(01358)

                  companyScopeObj: _.get(_.get(res, 'data').companyScopeObj, 'key'),

                  departScopeObj: _.get(_.get(res, 'data').departScopeObj, 'key'),

                });

                props.save({ alertList: res.data.configs });

                setAllData(_.get(res, 'data'));

                 //接口2

                props.searchDepartScope({ key: _.get(_.get(res, 'data').companyScopeObj, 'key') })

                        .then(

                        (resp) =>  { //根据输入框1的选项，取到输入框2的下拉选项的数组

                          setDepartList(_.get(resp, 'data'));

                 });

      },

    );

  }, [query && query.rcmId]);//rcmId只要变化，就会执行

2、提交

// 编辑的时候校验，编辑的保存

const baseEdit = () => {

    searchForm.validateFields().then((values) => {

      const {

        rcmId,

        companyScopeObj,

        departScopeObj,

      } = values;

      props.editKpiBasic({

        rcmId,

        companyScope: companyScopeObj,

        departScope: departScopeObj,

      }).then();

      message.success('基本信息编辑成功！');

    });

  };

3、输入框1的回调事件，输入框1选中，输入框2置空，同时下拉选项更新

const handleOptChange = (obj) => { //输入框1的回调事件

    searchForm.setFieldsValue({  // 点击输入1的回调时，置空输入框2的name值

      departScopeObj: '',

    });  

    props.searchDepartScope({ key: _.get(obj, 'companyScopeObj') }).then((resp) => {

      setDepartList(_.get(resp, 'data'));  //根据输入框1的选项，取到输入框2的下拉选项的数组

    });

  };

4、form表单重置修改内容

const handleOver = () => {

    searchForm.resetFields(); //置空编辑的表单内容

  };

return内容

return ...

 <Form

            className={styles.searchForms} layout="inline"

            form={searchForm}

            validateMessages={validateMessages}

  >

 <Form.Item name={'companyScopeObj'} label="数据范围-机构范围(公司级)" //输入框1

                 rules={[{ required: true }]} style={{ paddingLeft: '13px' }}> //必填选项

              <Select

                allowClear className={styles.formInput}

                onChange={value => handleOptChange({ companyScopeObj: value })}

              >

                {_.map(_.get(allData, 'companyScopes'), item =>

                  <Select.Option value={item.key} key={item.key}>

                    {item.name}

                  </Select.Option>,

                )}

              </Select>

  </Form.Item>

<Form.Item name={'departScopeObj'} label="数据范围-机构范围(部门级)" //输入框2

 rules={[{ required: true }]} style={{ paddingLeft: '13px' }}>

              <Select

                allowClear className={styles.formInput}

              >

                {_.map(departList, item =>

                  <Select.Option value={item.key} key={item.key}>

                    {item.name}

                  </Select.Option>,

                )}

              </Select>

   </Form.Item>

.......

<div className={styles.searchIncon}>

        <Button type="primary" onClick={handleOver}>取消</Button> 

        <Button type="primary" size="large" onClick={baseEdit} >提交</Button>

 </div>