cldV2react/src/pages/Customer/Business/components/AddBusiness.jsx

import { ProFormDatePicker, ProFormSelect, ProFormText } from '@ant-design/pro-form'
import { Button, Row, Col, Modal, Form } from 'antd'
import { connect } from '@umijs/max'
import { addBusiness } from '@/services/customer'
import { isNullOrUnDef } from '@/utils/is'
import consts from '@/consts'

const AddBusiness = props => {
  const [formRef] = Form.useForm()
  const { visible, onCancel, groupList = [], reload } = props
  const layout = {
    layout: 'horizontal',
    labelCol: { flex: '100px' }
  }

  const handleOnOk = () => {
    formRef?.validateFields().then(async values => {
      const { code = -1 } = await addBusiness(values)
      if (code === consts.RET_CODE.SUCCESS) {
        !isNullOrUnDef(reload) && reload()
        formRef.current?.resetFields()
        setTimeout(() => {
          onCancel()
        }, 80)
      }
    })
  }
  return (
    <Modal
      title="添加商机"
      width="43vw"
      visible={visible}
      onCancel={onCancel}
      getContainer={() => document.getElementById('root')}
      footer={
        <div>
          <Button type="default" className="mr-2" onClick={onCancel}>
            取消
          </Button>
          <Button type="primary" onClick={handleOnOk}>
            确认
          </Button>
        </div>
      }>
      <Form {...layout} form={formRef}>
        <ProFormText name="name" label="商机名称" required />
        <ProFormSelect fieldProps={{ options: groupList }} name="businessGroupId" label="商机状态组" required />
        {/* <Col span={12}>
          <ProFormDependency name={['businessGroupId']}>
            {({ businessGroupId }) => (
              <ProFormSelect
                name="businessStatusId"
                label="商机状态"
                options={groupList
                  .find(item => item.value === businessGroupId)
                  ?.items?.filter(item => !item.endProcess)
                  ?.sort((a, b) => a.sort - b.sort)
                  ?.map(i => ({ label: i.name, value: i.id }))}
                required
              />
            )}
          </ProFormDependency>
        </Col> */}
        <Row>
          <Col span={12}>
            <ProFormText name="price" label="商机金额(元)" required />
          </Col>
          <Col span={12}>
            <ProFormDatePicker name="finalTime" label="预计成交" required />
          </Col>
        </Row>
        <ProFormText name="remark" label="备注" />
      </Form>
    </Modal>
  )
}

export default connect(({ business }) => ({
  groupList: business.groupList
}))(AddBusiness)