qingDao_goods/src/pages/Z1user/UserAdd/index.tsx

import { getUserInfoByIdAPI, userSaveAPI } from '@/store/action/Z1user'
import { SaveUserType } from '@/types'
import { MessageFu } from '@/utils/message'
import { Button, Form, FormInstance, Input, Modal, Select } from 'antd'
import React, { useCallback, useEffect, useRef } from 'react'
import styles from './index.module.scss'
import MyPopconfirm from '@/components/MyPopconfirm'

type Props = {
  id: any
  closePage: () => void
  upTableList: () => void
  addTableList: () => void
}

function UserAdd({ id, closePage, upTableList, addTableList }: Props) {
  // 设置表单初始数据（区分编辑和新增）
  const FormBoxRef = useRef<FormInstance>(null)

  const getInfoInAPIFu = useCallback(async (id: number) => {
    const res = await getUserInfoByIdAPI(id)
    FormBoxRef.current?.setFieldsValue(res.data)
    // console.log("是编辑，在这里发请求拿数据", res);
  }, [])

  // 没有通过校验
  const onFinishFailed = useCallback(() => {
    // return MessageFu.warning("有表单不符号规则!");
  }, [])

  useEffect(() => {
    if (id) getInfoInAPIFu(id)
    else {
      FormBoxRef.current?.setFieldsValue({})
    }
  }, [getInfoInAPIFu, id])

  // 通过校验点击确定
  const onFinish = useCallback(
    async (values: any) => {
      const obj: SaveUserType = {
        ...values,
        id: id ? id : null
      }

      const res: any = await userSaveAPI(obj)

      if (res.code === 0) {
        MessageFu.success(id ? '编辑成功!' : '新增成功!')
        if (id) upTableList()
        else addTableList()

        closePage()
      }
      // console.log("通过校验，点击确定");
    },
    [addTableList, closePage, id, upTableList]
  )

  return (
    <Modal
      wrapClassName={styles.userAdd}
      destroyOnClose
      open={true}
      title={id ? '编辑用户' : '新增用户'}
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className='userAddMain'>
        <Form
          scrollToFirstError={true}
          ref={FormBoxRef}
          name='basic'
          labelCol={{ span: 5 }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete='off'
        >
          <Form.Item
            label='账号名'
            name='userName'
            rules={[
              { required: true, message: '请输入账号名!' },
              { min: 6, message: '最少6个字!' }
            ]}
            getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}
          >
            <Input disabled={id} maxLength={15} showCount placeholder='请输入内容' />
          </Form.Item>

          <Form.Item
            label='真实姓名'
            name='realName'
            // rules={[{ required: true, message: "请输入真实姓名!" }]}
            getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}
          >
            <Input maxLength={8} showCount placeholder='请输入内容' />
          </Form.Item>

          <Form.Item
            label='角色'
            name='roleId'
            rules={[{ required: true, message: '请选择角色!' }]}
          >
            <Select
              style={{ width: 240 }}
              placeholder='请选择'
              // 待完善sg -角色
              options={[]}
              fieldNames={{ value: 'id', label: 'roleName' }}
            />
          </Form.Item>

          {id ? null : <div className='passTit'>* 默认密码 Aa147852</div>}

          {/* 确定和取消按钮 */}
          <br />
          <Form.Item wrapperCol={{ offset: 9, span: 16 }}>
            <Button type='primary' htmlType='submit'>
              提交
            </Button>
            &emsp;
            <MyPopconfirm txtK='取消' onConfirm={closePage} />
          </Form.Item>
        </Form>
      </div>
    </Modal>
  )
}

const MemoUserAdd = React.memo(UserAdd)

export default MemoUserAdd