ant 编辑回显

最新推荐文章于 2025-08-19 18:23:35 发布

原创最新推荐文章于 2025-08-19 18:23:35 发布 · 649 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs #ant

本文探讨了在Ant Design中实现编辑回显的原理，主要涉及model层和js层的操作。编辑时，通过触发接口将数据保存到model层，并实时显示出来。在model层，利用mapPropsToFields进行数据映射；而在js层，详细阐述了相关逻辑处理。

编辑原理：修改时触发接口，将数据存入model层并输出
使用mapPropsToFields

model层

import {??????} from "@/services/api";
import assign from 'object-assign';

const InitState = {
  userInfo: {
      projectName: undefined,
      projectNum: undefined, 
      projectManager: undefined,
      projectLender:undefined,
      customerName: undefined, 
      customerNum: undefined,
      status: undefined,
      projectCompanyId: undefined,
      projectDepartmentId: undefined,
    },
}
export default {
  namespace: 'addProject',
  state: {
      ...InitState
  },
  effects: {
    *modifyProjectList({payload,success,failed},{call,put}){
      const res = yield call('??????',payload);
        if (res && res.code === 0) {
          yield put({
            type: 'saveUserInfo',
            userInfo: assign({},res.data)
          })
          success(res);
        } else {
          failed(res);
        }
    }

  },
  reducers: {
    saveUserInfo(state,{ userInfo }) {
      return {
        ...state,
        userInfo
      };
    },
    clearStore(){
      return {
        ...InitState
      };
    }
  }
}

js层

@connect(({addProject}) => ({addProject}))
@Form.create({
  mapPropsToFields(props) {
    // console.log(props,"props")
    const { customerNum,customerName,projectCompanyId, projectLeader, projectDepartmentId, projectNum, projectName, projectManager , status} = props.addProject.userInfo;
    return {
      projectNum: Form.createFormField({
        ...props.addProject.userInfo.projectNum,
        value: projectNum,
      }),
      projectName: Form.createFormField({
        ...props.addProject.userInfo.projectName,
        value: projectName,
      }),
      projectLeader: Form.createFormField({
        ...props.addProject.userInfo.projectLeader,
        // eslint-disable-next-line no-undef
        value: projectLeader,
      }),
      projectCompanyId: Form.createFormField({
        ...props.addProject.userInfo.projectCompanyId,
        value: projectCompanyId,
      }),
      projectDepartmentId: Form.createFormField({
        ...props.addProject.userInfo.projectDepartmentId,
        value: projectDepartmentId,
      }),
      projectManager: Form.createFormField({
        ...props.addProject.userInfo.projectManager,
        value: projectManager,
      }),
      status: Form.createFormField({
        ...props.addProject.userInfo.status,
        value: status,
      }),
      customerName: Form.createFormField({
        ...props.addProject.userInfo.customerName,
        value: customerName,
      }),
      customerNum: Form.createFormField({
        ...props.addProject.userInfo.customerNum,
        value: customerNum,
      })
    };
  }
})
class AddProject extends Component {
  componentDidMount() {
    const { dispatch } = this.props;
    if(id !== undefined) {
      this.setState({
      },() => {
        dispatch({
          type: 'addProject/modifyProjectList',
          payload: {
            projectId:id
          },
          success: (res) => {
            const desc = res.data.delFlag === '1';
            this.setState({
              desc
            })
            message.success('用户信息查询成功');
          },
          failed:(res) => {
            message.error(res.msg);
          }
        })
      })
    }
  }
  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'addProject/clearStore'
    })
  }


  render() {
    const { form } = this.props;
    const { getFieldDecorator } = form ;
    return (
      <Fragment>
        <Card title={this.state.edit ? '修改项目' : '新建项目'}>
          <Form {...formItemLayout} onSubmit={() => {}} style={{width:520}}>
            <FormItem label='项目编码'>
            {getFieldDecorator('projectNum',{ rules: [{required: true,message: '请输入项目编码'}]})(
              <Input placeholder='请输入项目编码' disabled={this.state.edit}/>
            )}
            </FormItem>
            <FormItem label='项目名称'>
            {getFieldDecorator('projectName',{ rules: [{required: true,message: '请输入项目编码'}]})(
              <Input placeholder='请输入项目名称' disabled={this.state.edit}/>
            )}
            </FormItem>
            <FormItem label='项目经理'>
            {getFieldDecorator('projectManager',{ rules: [{message: '请输入项目经理'}]})(
                <SearchSelect type='managerUserId' placeholder='请选择项目经理'/>
            )}
            </FormItem>
            <FormItem label='负责人'>
            {getFieldDecorator('projectLeader')(
              <Input placeholder='请输入负责人'/>
            )}
            </FormItem>
            <FormItem label='项目状态'>{/* 111111 */}
            {getFieldDecorator('status', { initialValue: '1'})(
              <Radio.Group>
                <Radio key={1} value="正常">正常</Radio>
                <Radio key={2} value="关闭">关闭</Radio>
              </Radio.Group>,
            )}
            </FormItem>
            <FormItem label='项目所属部门'>
            {getFieldDecorator('projectDepartmentId',{rules: [{required: true,message: '请选择项目所属部门'}]})(
              <SearchSelect  type='deptId' placeholder='请选择项目所属部门'/>
            )}
            </FormItem>
            <FormItem label='项目所属公司'>
            {getFieldDecorator('projectCompanyId',{rules: [{required: true,message: '请选择项目所属公司'}]})(
              <SearchSelect  type='companyIds' placeholder='请选择项目所属公司'/>
            )}
            </FormItem>
            <FormItem label='客户名称'>
            {getFieldDecorator('customerName')(
              <Input placeholder='请输入客户名称' />
            )}
            </FormItem>
            <FormItem label='客户编号'>
            {getFieldDecorator('customerNum')(
              <Input placeholder='请输入客户编号' />
            )}
            </FormItem>
          </Form>
        </Card>
      </Fragment>
    );
  }
}

export default AddProject;