YW_Goods/src/pages/D_storeManage/D3staff/components/OutsiderModal/index.tsx

import { Form, Input, Modal } from 'antd'
import { FC } from 'react'
import { D3StaffOversiderType } from '../../types'

export interface OutsiderModalProps {
  visible: boolean
  setVisible: (v: boolean) => void
  onOk: (item: D3StaffOversiderType) => void
}

export const OutsiderModal: FC<OutsiderModalProps> = ({ visible, setVisible, onOk }) => {
  const [form] = Form.useForm()

  const handleCancel = () => {
    setVisible(false)
  }

  const handleSubmit = async () => {
    if (!(await form.validateFields())) return

    onOk(form.getFieldsValue())
    setVisible(false)
    form.resetFields()
  }

  return (
    <Modal title='外部人员' open={visible} onCancel={handleCancel} onOk={handleSubmit}>
      <Form form={form} labelCol={{ span: 5 }}>
        <Form.Item label='姓名' required rules={[{ required: true }]} name='name'>
          <Input maxLength={30} placeholder='请输入' />
        </Form.Item>
        <Form.Item label='联系方式' name='phone'>
          <Input maxLength={30} placeholder='请输入' />
        </Form.Item>
        <Form.Item label='身份证号' name='papers'>
          <Input maxLength={30} placeholder='请输入' />
        </Form.Item>
        <Form.Item label='所在单位' name='remark'>
          <Input maxLength={30} placeholder='请输入' />
        </Form.Item>
      </Form>
    </Modal>
  )
}