management/src/pages/Management/Setting/components/Modal.tsx

import { iUserInfo } from '@/types/setting'
import consts from '@/utils/consts'
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons'
import { Button, Form, Input, Modal, Select } from 'antd'
import React, { useEffect, useState } from 'react'
import { apiAccountDelete } from '../api'
import styles from '../index.module.scss'
import PswModal from './PswModal'
const { Option } = Select
export interface iUserModal {
  visible: boolean
  loading: boolean
  userInfo: iUserInfo
  onCreate: (values: any) => void
  onCancel: () => void
  initData: () => void
}
const userModal:React.FC<iUserModal> = ({ visible, loading, onCreate, onCancel, userInfo, initData }) => {
  const [ form ] = Form.useForm()
  const [ delLoading, setDelLoading ] = useState<boolean>(false)
  const [ showPswModal, setShowPswModal ] = useState<boolean>(false)
  useEffect(() => {
    form.setFieldsValue(userInfo)
  }, [ visible ])
  const delBtnHandler = async () => {
    setDelLoading(true)
    const { code = -1 } = await apiAccountDelete(userInfo.id)
    if (code === consts.RET_CODE.SUCCESS) {
      onCancel()
      initData()
    }
    setDelLoading(false)
  }
  return (
    <>
      <Modal
        getContainer={false}
        visible={visible}
        title={userInfo.id ? '编辑账号' : '新增账号'}
        onCancel={onCancel}
        footer={
          <div>
            {
              userInfo.id ?
              <>
                <Button size="small" danger onClick={() => delBtnHandler()} loading={delLoading}>删除账号</Button>
                <Button size="small" type="primary" ghost onClick={() => {
                  onCancel()
                  setShowPswModal(true)
                }}>修改账号/密码</Button>
              </>
              : ''
            }
            <Button size="small" className={styles.grayBtn} onClick={() => onCancel()}>关闭</Button>
            <Button size="small" type="primary" loading={loading} onClick={() => {
              form.validateFields().then(values => {
                form.resetFields()
                onCreate(values)
              })
            }}>{userInfo.id ? '提交修改' : '确认添加'}</Button>
          </div>
        }
    >
    <Form
      form={form}
      layout="vertical"
      className={styles.FormContent}
    >
      {
        userInfo.id ?
        <Form.Item name="id" hidden>
          <Input></Input>
        </Form.Item>
        : ''
      }
      <Form.Item name="accountGroup" label="账号组" rules={[ { required: true, message: '请选择账号组' } ]}>
        <Select
          showSearch
          placeholder="请选择"
          size="small"
          optionFilterProp="children"
          filterOption={(input, option) => option?.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
          <Option value={1}>建设单位</Option>
          <Option value={2}>监理单位</Option>
          <Option value={3}>施工单位</Option>
          <Option value={4}>设计单位</Option>
        </Select>
      </Form.Item>
      <Form.Item name="account" label="登录账号" rules={[ { required: true, message: '请输入登录账号' } ]}>
        <Input size="small" placeholder="支持英文数字组合" disabled={userInfo.id ? true : false}></Input>
      </Form.Item>
      {
        !userInfo.id ?
        <Form.Item name="password" label="登录密码" rules={[ { required: true, message: '请输入登录密码' } ]}>
          <Input.Password
            placeholder="密码支持英文数字及符号"
            addonAfter={<span>随机密码</span>}
            iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
          />
        </Form.Item>
        : ''
      }
      <Form.Item name="name" label="姓名" rules={[ { required: true, message: '请输入姓名' } ]}>
        <Input size="small"></Input>
      </Form.Item>
      <Form.Item name="company" label="单位名称" rules={[ { required: true, message: '请输入单位名称' } ]}>
        <Input size="small"></Input>
      </Form.Item>
      <Form.Item name="position" label="职位名称" rules={[ { required: true, message: '请输入职位名称' } ]}>
        <Input size="small"></Input>
      </Form.Item>
      <Form.Item name="mobile" label="手机" rules={[ { required: true, message: '请输入手机号码' } ]}>
        <Input size="small"></Input>
      </Form.Item>
      <Form.Item name="telephone" label="电话">
        <Input size="small" placeholder="格式000-0000000"></Input>
      </Form.Item>
    </Form>
  </Modal>
      <PswModal visible={showPswModal} onCancel={() => setShowPswModal(false)} userInfo={userInfo}></PswModal>
    </>

  )
}
export default userModal