zsy3-web/src/pages/system/auth/user/components/AddModal.tsx

import { memo, useEffect, useState } from 'react'
import { LockFlag } from '#/enum'
import { toast } from 'sonner'
import { fetchTree } from '@/api/services/dept'
import { fetchPostList } from '@/api/services/post'
import { deptRoleList } from '@/api/services/role'
import { addUser } from '@/api/services/user'
import { Col, Form, Input, Modal, Radio, Row, Select, TreeSelect } from 'antd'

export type AddModalProps = {
  show: boolean
  onCancel: VoidFunction
  getList: VoidFunction
}

const formData: Partial<API.AddUserParams> = {}

export const AddModal = memo(({ show = false, onCancel, getList }: AddModalProps) => {
  // 查询部门树
  const [treeDeptData, setTreeDeptData] = useState<API.DeptTreeResult>([])
  const getDeptTree = async () => {
    const res = await fetchTree()
    if (res?.code === '2000') {
      setTreeDeptData(res.data)
    }
  }
  // 查询岗位列表
  const [postOptions, setPostOptions] = useState<API.PostListResult>([])
  const getPostList = async () => {
    const res = await fetchPostList()
    if (res?.code === '2000') {
      setPostOptions(res.data)
    }
  }
  // 查询角色列表
  const [rolesOptions, setRolesOptions] = useState<API.RoleListResult>([])
  const getRoleList = async () => {
    const res = await deptRoleList()
    if (res?.code === '2000') {
      setRolesOptions(res.data)
    }
  }
  useEffect(() => {
    getDeptTree()
    getPostList()
    getRoleList()
  }, [])

  const [form] = Form.useForm()
  const onOkFn = () => {
    form.validateFields().then((values) => {
      console.log(values)
      addUser(values as API.AddUserParams).then((res) => {
        if (res) {
          console.log(res)
          getList()
          onCancelFn()
          toast.success('创建成功', {
            position: 'top-center'
          })
        }
      })
    })
  }
  const onCancelFn = () => {
    form.resetFields()
    onCancel()
  }
  return (
    <Modal title='新增' open={show} width={900} onOk={onOkFn} onCancel={onCancelFn}>
      {/* 表单名称，会作为表单字段 id 前缀使用，不加可能会造成表单id冲突 */}
      <Form name='addUserModalForm' initialValues={formData} form={form} layout='vertical'>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item<API.AddUserParams>
              label='用户名'
              name='username'
              rules={[
                {
                  required: true,
                  message: '请输入用户名'
                },
                {
                  min: 3,
                  max: 20,
                  message: '长度在 3 到 20 个字符'
                }
              ]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item<API.AddUserParams>
              label='密码'
              name='password'
              rules={[
                {
                  required: true,
                  message: '请输入密码'
                }
              ]}>
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item<API.AddUserParams>
              label='真实姓名'
              name='realName'
              rules={[
                {
                  required: true,
                  message: '请输入真实姓名'
                }
              ]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item<API.AddUserParams>
              label='所属部门'
              name='deptId'
              rules={[
                {
                  required: true,
                  message: '请选择部门'
                }
              ]}>
              <TreeSelect
                fieldNames={{
                  label: 'name',
                  value: 'id',
                  children: 'children'
                }}
                allowClear
                treeData={treeDeptData}
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item<API.AddUserParams>
              label='手机号'
              name='phone'
              rules={[
                {
                  required: true,
                  message: '请输入手机号'
                }
              ]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item<API.AddUserParams>
              label='邮箱'
              name='email'
              rules={[
                {
                  required: true,
                  message: '请输入邮箱'
                }
              ]}>
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item<API.AddUserParams>
              label='岗位'
              name='postIds'
              rules={[
                {
                  required: true,
                  message: '请选择岗位'
                }
              ]}>
              <Select
                mode='multiple'
                fieldNames={{
                  label: 'postName',
                  value: 'postId'
                }}
                allowClear
                options={postOptions}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item<API.AddUserParams>
              label='角色'
              name='roleIds'
              rules={[
                {
                  required: true,
                  message: '请选择角色'
                }
              ]}>
              <Select
                mode='multiple'
                fieldNames={{
                  label: 'roleName',
                  value: 'roleId'
                }}
                allowClear
                options={rolesOptions}
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item<API.AddUserParams>
              label='状态'
              name='lockFlag'
              rules={[
                {
                  required: true,
                  message: '请选择状态'
                }
              ]}>
              <Radio.Group optionType='button' buttonStyle='solid'>
                <Radio value={LockFlag.OK}>有效</Radio>
                <Radio value={LockFlag.LOCKED}>锁定</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  )
})