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

import {
  ModalForm,
  ProFormDatePicker,
  ProFormDependency,
  ProFormSelect,
  ProFormText
} from '@ant-design/pro-form'
import ModalDrag from '@/components/DragmModal'
import { Button, Row, Col, message } from 'antd'
import { Plus } from '@icon-park/react'
import React from 'react'
import { connect } from 'umi'
import { addBusiness } from '@/services/customer'

const AddBusiness = props => {
  const { groupList = [], reload } = props
  const layout = {
    layout: 'horizontal',
    labelCol: { flex: '100px' }
  }
  return (
    <ModalForm
      {...layout}
      trigger={
        <Button type="primary" className="flex items-center">
          <Plus className="mr-1" />
          商机
        </Button>
      }
      title={<ModalDrag title={'添加商机'} />}
      onFinish={async values => {
        try {
          await addBusiness(values)
          reload()
          return true
        } catch (error) {
          message.error('添加失败，请重试')
          return false
        }
      }}>
      <ProFormText name="name" label="商机名称" required />
      <Row>
        <Col span={12}>
          <ProFormSelect
            fieldProps={{ options: groupList }}
            name="businessGroupId"
            label="商机状态组"
            required
          />
        </Col>
        <Col span={12}>
          <ProFormDependency name={['businessGroupId']}>
            {({ businessGroupId }) => (
              <ProFormSelect
                name="businessStatusId"
                label="商机状态"
                options={groupList
                  .find(item => item.value === businessGroupId)
                  ?.items?.map(i => ({ label: i.name, value: i.id }))}
                required
              />
            )}
          </ProFormDependency>
        </Col>
      </Row>
      <Row>
        <Col span={12}>
          <ProFormText name="price" label="商机金额(元)" required />
        </Col>
        <Col span={12}>
          <ProFormDatePicker name="finalTime" label="预计成交" required />
        </Col>
      </Row>
      <ProFormText name="remark" label="备注" />
    </ModalForm>
  )
}

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