antdpro增加修改封装

最新推荐文章于 2024-01-04 20:52:51 发布

sinreyeah

最新推荐文章于 2024-01-04 20:52:51 发布

阅读量266

点赞数

文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/sinreyeah/article/details/126786380

版权

该博客介绍了如何使用React创建一个合并了增加和修改功能的表单组件。组件通过接收到的ID来判断是编辑还是添加用户，并显示相应的表单。表单使用了Ant Design Pro库，包括输入验证、用户详情获取、提交处理等功能，实现了用户信息的增删改操作。

摘要由CSDN通过智能技术生成

import {ClientModel} from "@/pages/Client/Model";
import {Button, message, Select, Skeleton} from "antd";
import {ModalForm, ProForm, ProFormText} from "@ant-design/pro-components";
import {showClient, updateClient} from "@/services/ant-design-pro/client";
import {useEffect, useState} from "react";
import {values} from "lodash";
import {AdminObj} from "@/pages/Plugin";
import {showAdmins, updateAdmin} from "@/services/ant-design-pro/plugin";
import {UserObj} from "@/pages/Alumnus";
import {addUser, showUsers, updateUser} from "@/services/ant-design-pro/user";
import {ProjectData} from "@/pages/Project/Model";

interface Userobj{
  name: string,
  password: string,
  sex: string,
  mobile: string
  job: string,
  city: string,
  province: string
}
const {Option} = Select;

const CreateOrEdit = (props: { visible: any; isShowModal: any; actionRef: any; editId: any; setCurrent: any; }) => {
  const {visible, isShowModal, actionRef, editId, setCurrent} = props
  const [initialValue,setInitialValue]=useState<Partial<UserObj> | undefined>(undefined);
  const type= editId!==undefined?'编辑':'添加'
  console.log(editId)
  console.log(isShowModal)
  useEffect( () => {
    //获取用户详情
    const showUser=async (id: any)=>{
      if (editId !== undefined) {
        const res = await showUsers({id},id)
        setInitialValue({
          userId: res.userId,
          className:res.className,
          name: res.name,
          password: res.password,
          sex: res.sex,
          mobile: res.mobile,
          job: res.job,
          city: res.city,
          province: res.province
        })
      }
    }
    showUser(editId)
  }, [])


const handleSubmit = async (values:UserObj) => {
  let res={}
  let ProjectData={}
if (editId===undefined){

  ProjectData = {
    userId:Number(values.userId),
    className:values.className,
    name: values.name,
    password: values.password,
    sex: values.sex,
    mobile: values.mobile,
    job: values.job,
    province: values.province,
    city: values.city,
  };
  res = await addUser(ProjectData);
}else {
  const clientObj: UserObj = {
    userId: initialValue?.userId,
    className:initialValue?.className,
    name: values.name,
    password: values.password,
    sex: values.sex,
    mobile: values.mobile,
    job: values.job,
    city: values.city,
    province: values.province
  }
 res = await updateUser(clientObj);
}
  if (res===true){
    actionRef.current.reload()
    message.success(`${type}成功 `);
    isShowModal(false)
  }
}
  return (
    <ModalForm<UserObj>
      width='550px'
      visible={visible}

      labelCol={{span: 8}}
      wrapperCol={{span: 10}}
      layout='horizontal'
      title={type}
      modalProps={{
        onOk: () => {
        },
        destroyOnClose: true,
        onCancel:()=>{
          isShowModal(false)
        }
      }}
      onFinish={async (values) => {
        handleSubmit(values)
        return true
      }}

    >
      {
        initialValue === undefined && editId!==undefined ? <Skeleton avatar paragraph={{rows: 4}}/> :

          <ProForm.Group style={{display: 'flex', justifyContent: 'space-between', width: 500}}>
            {
              editId!==undefined?'':
                <ProFormText
                  style={{width: 120}}
                  rules={[{required: true}]}
                  label="学号"
                  required
                  width="xl"
                  name="userId"
                  tooltip="最长为24位"
                  placeholder="请输入客户端名称"
                />
            }
            {
              editId!==undefined?'':
              <ProFormText

              style={{width: 120}}
              rules={[{required: true}]}
              label="班级编号"
              required
              width="xl"
              name="className"
              tooltip="最长为24位"
              placeholder="请输入客户端名称"
              />
            }
            <ProFormText
              style={{width: 120}}
              rules={[{required: true}]}
              label="姓名"
              required
              width="xl"
              name="name"
              tooltip="最长为24位"
              // placeholder="请输入角色名称"
              initialValue={initialValue?.name || ''}


            />
            <ProFormText
              style={{ width: 120 }}
              rules={[{required: true}]}
              label="密码"
              required
              width="xl"
              name="password"
              tooltip="最长为24位"
              placeholder="请输入密码"
              initialValue={initialValue?.password || ''}
              // disabled={true}
            />
            <ProFormText
              style={{ width: 120 }}
              rules={[{required: true}]}
              label="性别"
              required
              width="xl"
              name="sex"
              tooltip="最长为24位"
              placeholder="请输入密码"
              initialValue={initialValue?.sex || ''}
              // disabled={true}
            />
            <ProFormText
              style={{ width: 120 }}
              rules={[{required: true}]}
              label="手机号码"
              required
              width="xl"
              name="mobile"
              tooltip="最长为24位"
              placeholder="请输入密码"
              initialValue={initialValue?.mobile || ''}
              // disabled={true}
            />
            <ProFormText
              style={{ width: 120 }}
              rules={[{required: true}]}
              label="工作"
              required
              width="xl"
              name="job"
              tooltip="最长为24位"
              placeholder="请输入密码"
              initialValue={initialValue?.job || ''}
              // disabled={true}
            />
            <ProFormText
              style={{ width: 120 }}
              rules={[{required: true}]}
              label="省份"
              required
              width="xl"
              name="province"
              tooltip="最长为24位"
              placeholder="请输入密码"
              initialValue={initialValue?.province || ''}
              // disabled={true}
            />
            <ProFormText
              style={{ width: 120 }}
              rules={[{required: true}]}
              label="城市"
              required
              width="xl"
              name="city"
              tooltip="最长为24位"
              placeholder="请输入密码"
              initialValue={initialValue?.city || ''}
              // disabled={true}
            />
          </ProForm.Group>
      }
    </ModalForm>
  )
}
export default CreateOrEdit

此CreateOrEdit组件

将增加和修改合并为一个form表单

主要从父类传一个id过去，通过id判断，表单展开通过状态判断

index.tsx:

 visible ? <CreateOrEdit
          // setCurrent={record}
          visible={visible}
          isShowModal={isShowModal}
          actionRef={actionRef}
          editId={editId}
        /> : '',