YW_Goods/src/pages/Z_system/Z6user/UserAdd/index.tsx

import { MessageFu } from '@/utils/message'
import { Button, Cascader, Checkbox, 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'
import { getUserInfoByIdAPI, userSaveAPI } from '@/store/action/Z6user'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/store'
import { Z5_APIgetList } from '@/store/action/Z5role'
import { treeLastIdFindFatherFu } from '../data'
import { UserTableAPIType } from '@/types'

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

function UserAdd({ id, closePage, upTableList, addTableList, formOld }: Props) {
  // 角色
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(
      Z5_APIgetList({
        pageNum: 1,
        pageSize: 99999,
        searchKey: ''
      })
    )
  }, [dispatch])

  const { list: roleList } = useSelector((state: RootState) => state.Z5role.tableInfo)

  // 所属部门
  const { treeData } = useSelector((state: RootState) => state.Z4organization)

  // 设置表单初始数据（区分编辑和新增）
  const FormBoxRef = useRef<FormInstance>(null)

  const getInfoInAPIFu = useCallback(
    async (id: number) => {
      if (treeData && treeData.length) {
        const res = await getUserInfoByIdAPI(id)

        const data = res.data

        const deptId = treeLastIdFindFatherFu(treeData, data.deptId + '', 'id')

        FormBoxRef.current?.setFieldsValue({
          ...data,
          deptId
        })
      }

      // console.log("是编辑，在这里发请求拿数据", res);
    },
    [treeData]
  )

  // 没有通过校验
  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 = {
        ...values,
        id: id ? id : null
      }

      const deptIdRes = obj.deptId
      if (deptIdRes) obj.deptId = Number(deptIdRes[deptIdRes.length - 1])

      obj.isLeader = obj.isLeader ? 1 : 0

      // if (1 + 1 === 2) {
      //   console.log(123, obj)

      //   return
      // }

      const res: any = await userSaveAPI(obj)

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

        closePage()
      }
      // console.log("通过校验，点击确定");
    },
    [addTableList, closePage, formOld, 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={10} showCount placeholder='请输入内容' />
          </Form.Item>

          <Form.Item
            label='手机号'
            name='phone'
            rules={[
              { required: true, message: '请输入手机号!' },
              {
                pattern: /^1[3-9][0-9]{9}$/,
                message: '请输入正确格式的手机号!'
              }
            ]}
            getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}
          >
            <Input maxLength={11} showCount placeholder='请输入11位手机号' />
          </Form.Item>

          <div className='Z6arow'>
            <Form.Item
              label='所属部门'
              name='deptId'
              rules={[{ required: true, message: '请选择所属部门部门!' }]}
            >
              <Cascader
                allowClear={false}
                changeOnSelect
                style={{ width: 240 }}
                options={treeData}
                fieldNames={{ label: 'name', value: 'id', children: 'children' }}
                placeholder='请选择'
              />
            </Form.Item>

            <Form.Item
              label=''
              name='isLeader'
              valuePropName='checked'
              getValueFromEvent={e => (e.target.checked ? 1 : 0)}
            >
              <Checkbox>设为主管</Checkbox>
            </Form.Item>
          </div>

          <Form.Item
            label='角色'
            name='roleId'
            rules={[{ required: true, message: '请选择角色!' }]}
          >
            <Select
              style={{ width: 240 }}
              placeholder='请选择'
              options={roleList.filter(v => v.id !== 1)}
              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