model组件,因为在model中使用Form组件会导致动态删除行的时候一直是从后向前删除,所以这边用的是纯div来实现,通过变量danList来遍历里面的键实现动态的增加删除行
<Modal
title={`${Object.keys(record).length > 0 ? '编辑' : '新增'}应用`}
visible={modalVisibleZcmapp}
bodyStyle={{ paddingBottom: 0 }}
onOk={this.addOrEditRow}
draggable={false}
onCancel={this.closeModalVisibleZcmapp}
cancelText="取消"
okText="确定"
width="900px"
>
{/* <Form layout='inline'> */}
<div className={styles.minchen} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
<div style={{ width: '30%' }} >数据应用</div>
<div style={{ width: '15%' }}>数据实例数</div>
<div style={{ width: '30%' }} >实例应用</div>
<div style={{ width: '15%' }}>实例数</div>
<div style={{ width: '5%' }} />
</div>
{
danList.map((dan, ind) => {
return <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
<Select placeholder="请选择数据应用"
onChange={e => {
this.canaryAppFn(e)
}}
style={{ width: '30%' }}
value={dan.canaryAppName}
>
{
canaryAppList.map(item => {
return <Option value={[item.applicationName, item.imageId, item.applicationId, ind]} key={item.applicationName}>{item.applicationName}</Option>
})
}
</Select>
<InputNumber min={0} style={{ width: '15%' }} placeholder="请输入实例应用实例数" value={dan.canaryAppNum} onChange={(e) => { this.canaryAppNumFn(e, ind) }} />
<Select placeholder="请选择实例应用" onChange={e => this.prodAppFn(e)}
style={{ width: '30%' }}
value={dan.prodAppName}
>
{
prodAppList.map(item => (
<Option value={[item.applicationName, item.applicationId, ind]} key={item.applicationName}>{item.applicationName}</Option>
))
}
</Select>
<InputNumber min={0} placeholder="请输入实例应用数" style={{ width: '15%' }} onChange={(e) => { this.prodAppNumFn(e, ind) }} value={dan.prodAppNum} />
{
Object.keys(record).length > 0 ? <span style={{ width: '5%' }} /> : <span style={{ width: '5%' }}>
{
danList.length <= 1 ? null : <Icon type="minus" onClick={() => { this.delFn(ind) }} style={{ marginRight: "10px" }} />
}
{
danList.length - ind === 1 ?
<Icon type="plus" onClick={() => { this.addFn() }} /> : null
}
</span>
}
</div>
})
}
</Modal>
使用到的事件
// 通过imageId来获取实例应用,保存数据应用
canaryAppFn = (e) => {
const { canaryAppList, danList, prodAppList } = this.state
// console.log(e);
let index = e[3]
this.props.dispatch({
type: '***/*******',//接口路径
params: {
imageId: e[1],
projectId: projectId()
},
cb: payload => { //接口获取的参数
danList[index].canaryAppName = e[0],
danList[index].canaryAppId = e[2],
danList[index].prodAppList = payload,
// console.log(payload);
this.setState({
prodAppList: payload,
canaryAppName: e[0],
canaryAppId: e[2],
danList
})
}
})
}
// 保存实例应用的名称和id号
prodAppFn = (e) => {
const { prodAppList, danList } = this.state
let index = e[2]
// console.log(e, prodAppList);
danList[index].prodAppName = e[0],
danList[index].prodAppId = e[1],
this.setState({
prodAppId: e[1],
prodAppName: e[0],
danList,
})
}
// -删除
delFn = (index) => {
const { danList, canaryAppName } = this.state
danList.splice(index, 1);
this.setState({
danList: [...danList]
})
}
// +增加
addFn = () => {
const { danList } = this.state
danList.push({})
this.setState({
danList
})
}
// 数据实例数
canaryAppNumFn = (e, index) => {
const { danList } = this.state
danList[index].canaryAppNum = e
this.setState({
danList
})
}
//实例数
prodAppNumFn = (e, index) => {
const { danList } = this.state
danList[index].prodAppNum = e
this.setState({
danList
})
}