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

import StrengthMeter from '@/components/StrengthMeter'
import { userStore } from '@/store/mobx'
import { iUserInfo } from '@/types/setting'
import consts from '@/utils/consts'
import { Button, Form, Input, Modal, Select } from 'antd'
import { observer } from 'mobx-react'
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(() => {
    if (visible) {
                form.resetFields()

      userInfo.id ? form.setFieldsValue(userInfo) : form.resetFields()
      if (!userStore.groupList.length) {
        userStore.getGroupList()
      }
    }
  }, [ 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 && !userInfo.jlAuth?
                <>
                  <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 => {
                onCreate(values)
              })
            }}>{userInfo.id ? '提交修改' : '确认添加'}</Button>
          </div>
        }
      >
        <Form
          form={form}
          layout="vertical"
          className={styles.FormContent}
        >
          {
            userInfo.id ?
              <Form.Item name="id" hidden>
                <Input />
              </Form.Item>
              : ''
          }
          <Form.Item name="accountGroup" label="账号组" rules={[ { required: true, message: '请选择账号组' } ]}>
            <Select
              showSearch
              placeholder="请选择"
              size="small"
              optionFilterProp="children"
              filterOption={(input, option) => option && option?.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
              {
                userStore.groupList?.map(item => <Option value={item.key} key={item.key}>{item.value}</Option>)
              }
            </Select>
          </Form.Item>
          <Form.Item name="account" label="登录账号" rules={[ { required: true, message: '请输入登录账号' } ]}>
            <Input size="small" placeholder="支持英文数字组合" disabled={userInfo.id ? true : false} />
          </Form.Item>
          {
            !userInfo.id ?
              <Form.Item name="password" label="登录密码" rules={[ { required: true, message: '请输入登录密码' }, () => ({
                validator(_, value) {
                  if (value) {
                    if (/(?=.*[0-9])(?=.*[a-zA-Z]).{6,30}/.test(value)) {
                      return Promise.resolve()
                    }
                    return Promise.reject('密码必须带有字母与数字的组合且大于6位')
                  }
                  return Promise.resolve()
                }
              }) ]}>
                <StrengthMeter />
              </Form.Item>
              : ''
          }
          <Form.Item name="name" label="姓名" rules={[ { required: true, message: '请输入姓名' } ]}>
            <Input size="small" />
          </Form.Item>
          <Form.Item name="company" label="单位名称" rules={[ { required: true, message: '请输入单位名称' } ]}>
            <Input size="small" />
          </Form.Item>
          <Form.Item name="position" label="职位名称" rules={[ { required: true, message: '请输入职位名称' } ]}>
            <Input size="small" />
          </Form.Item>
          <Form.Item name="mobile" label="手机" rules={[ { required: true, message: '请输入手机号码' }, () => ({
            validator(_, value) {
              if (value) {
                if(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value)) {
                  return Promise.resolve()
                }
                return Promise.reject('请输入正确的手机号码')
              }
              return Promise.resolve()
            }
          }) ]}>
            <Input size="small" />
          </Form.Item>
          <Form.Item name="telephone" label="电话" rules={[ () => ({
            validator(_, value) {
              if (value) {
                if(/^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/.test(value)) {
                  return Promise.resolve()
                }
                return Promise.reject('请输入正确的座机号码')
              }
              return Promise.resolve()
            }
          }) ]}>
            <Input size="small" placeholder="格式000-0000000" />
          </Form.Item>
        </Form>
      </Modal>
      <PswModal visible={showPswModal} onCancel={() => setShowPswModal(false)} userInfo={userInfo} />
    </>

  )
}
export default observer(UserModal)