management/src/pages/Quality/Content/List/modal.tsx

import DatePicker from '@/components/DatePicker'
import { tenderStore } from '@/store/mobx'
import { handleAutoCode } from '@/utils/util'
import { Form, Input, message, Modal } from 'antd'
import locale from 'antd/es/date-picker/locale/zh_CN'
import React, { useEffect } from 'react'
import styles from './index.module.scss'
interface iQualityCreateFormProps {
  visible: boolean;
  loading: boolean;
  onCreate: (values: any) => void;
  onCancel: () => void;
}

const QualityCreateForm: React.FC<iQualityCreateFormProps> = ({
  visible,
  loading,
  onCreate,
  onCancel
}) => {
  const [ form ] = Form.useForm()
  const autoCode = async () => {
    const ruleArr = await handleAutoCode(tenderStore.bid, 'qualityRule')
    if (!ruleArr || !ruleArr.length) {
      return message.error('未设置编号规则')
    }
    form.setFieldsValue({ code: ruleArr.join('-') })
  }
  useEffect(() => {
    if (visible) {
      form.setFieldsValue({ bidsectionId: tenderStore.bid })
      form.resetFields([ 'code', 'inspection', 'createTime', 'position' ])
    }

  }, [ visible ])
  return (
    <Modal
      getContainer={false}
      visible={visible}
      title="新建质量巡检"
      okText="确认添加"
      cancelText="取消"
      onCancel={onCancel}
      confirmLoading={loading}
      okButtonProps={{ size: 'small' }}
      cancelButtonProps={{ size: 'small' }}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            // form.resetFields()
            onCreate(values)
          })
          .catch(info => {
            console.log('Validate Failed:', info)
          })
      }}
    >
      <Form form={form} layout="vertical" size="middle" className={styles.SafeModalForm}>
        <Form.Item name="bidsectionId" hidden>
          <Input />
        </Form.Item>
        {/* <span className={[ styles.position, "pi-link-blue" ].join(" ")}>部位设置</span> */}
        {/* <Form.Item name="position" label="部位" rules={[ { required: true, message: '请选择' } ]}> */}
          {/* <span className={[ styles.position, "pi-link-blue" ].join(" ")}>部位设置</span> */}
          {/* <Input /> */}
        {/* </Form.Item> */}
        <Form.Item name="code" label="安全编号" rules={[ { required: true, message: '请输入/生成安全编号' } ]}>
          <Input addonAfter={<span className="pi-pd-lr-11"onClick={() => autoCode()}>自动编号</span>}/>
        </Form.Item>
        <Form.Item name="inspection" label="检查项" rules={[ { required: true, message: '请填写检查项' } ]}>
          <Input placeholder="请填写巡检项"/>
        </Form.Item>
        <Form.Item name="createTime" label="日期" rules={[ { required: true, message: '请选择日期' } ]}>
          <DatePicker locale={locale} allowClear className="pi-width-100P" />
        </Form.Item>
        <div className={styles.warningFooter}>添加后再补充完善其余信息</div>
      </Form>
    </Modal>
  )
}


export default QualityCreateForm