在后台管理系统中,有时候会碰到新增接口和编辑接口共用一个弹窗的时候.

一.场景

        

 在点击新增或者编辑的时候都会使用这个窗口,新增直接调用接口进行增加即可，编辑则是打开这个窗口显示当前行的数据,然后调用编辑接口。

二.处理方法

在默认的情况下,这个窗口用来处理新增。

这个时候需要定义个变量来进行区分。

代码：

 

 

 在点击编辑按钮的时候,改变mode的状态

 

可以看出通过改变mode的状态,标题实现了改变。

三.接口的分调

无论是新增还是编辑,在点击确定按钮的时候都会调用接口,这个时候,如何调对相应的接口?

还是通过mode状态来实现。

在点击新增的时候,mode的状态是'add',当点击编辑的时候,将mode的状态由'add'修改成'edit'。

if(this.mode==='add'){

调用新增的接口

}

else{

调用编辑的接口}

四.测试自己的逻辑

1.先点击新增,在点击编辑。

开始的状态：add

编辑后的状态:edit

2.先点击编辑,在新增。

开始的状态:edit

新增的状态:edit  

因此在点击新增按钮的时候,将mode状态由edit=>add

通过上面的结论,无论是新增还是编辑我都做一个状态的修改。

新增按钮==========>this.mode='add'

编辑按钮==========>this.edit='edit'

重新测试：

3.先点击新增,在点击编辑。

开始的状态：add

编辑后的状态:edit

4.先点击编辑,在新增。

开始的状态:edit

新增的状态:add

新增按钮的代码:

编辑按钮的代码:

 

 

五.全局提交时候的状态验证

代码：

 效果:

 

六.总结

在开发中,通常一个弹窗被两个接口共用,可以使用定义一个状态,从而实现接口的分调。

图示: