feat: 客户新增联系人弹窗使用ModalForm重构

src/components/PopContent/Contacts/index.jsx

@@ -1,4 +1,4 @@
-import { Row, Col } from 'antd'
+import { Row, Col, Spin } from 'antd'
 import React, { useState, useEffect } from 'react'
 import '../index.scss'
 import ContanctForm from '@/components/PopContent/Contacts/ContanctForm.jsx'
@@ -12,12 +12,14 @@ const PopContent = props => {
   const { dispatch, shouldUpdate, visible, id = '' } = props
 
   const [state, setState] = useState({
+    loading: false,
     client: {},
     log: [],
     serviceLog: []
   })
 
   const initData = async () => {
+    setState({ ...state, loading: true })
     const {
       data: { client = {}, log = [], serviceLog = [] },
       code = -1
@@ -29,7 +31,7 @@ const PopContent = props => {
           payload: 'contact'
         })
       }
-      setState({ ...state, client, log, serviceLog })
+      setState({ ...state, client, log, serviceLog, loading: false })
     }
   }
   useEffect(() => {
@@ -41,19 +43,21 @@ const PopContent = props => {
     visible && initData()
   }, [])
   return (
-    <div className="sheet-box">
-      <Row>
-        <Col span={12} className="sheet-box-left">
-          <div className="sheet-left-panel zh-pd-right-15">
-            <ContanctForm client={state.client} />
-          </div>
-        </Col>
-        <Col span={12}>
-          <ContanctTabList />
-          <ContanctLowerList log={state.log} servicelist={state.serviceLog} />
-        </Col>
-      </Row>
-    </div>
+    <Spin spinning={state.loading}>
+      <div className="sheet-box">
+        <Row>
+          <Col span={12} className="sheet-box-left">
+            <div className="sheet-left-panel zh-pd-right-15">
+              <ContanctForm client={state.client} />
+            </div>
+          </Col>
+          <Col span={12}>
+            <ContanctTabList />
+            <ContanctLowerList log={state.log} servicelist={state.serviceLog} />
+          </Col>
+        </Row>
+      </div>
+    </Spin>
   )
 }
 

src/pages/Customer/Company/AddCompany/index.jsx

@@ -1,114 +1,77 @@
-import React from 'react'
-import { Form, Input, Modal, Row, Col, Select } from 'antd'
+import React, { useEffect } from 'react'
+import { Form, Row, Col, Button } from 'antd'
 import LazyCascader from '@/components/LazyCascader'
-import { useForm } from 'antd/lib/form/Form'
+import { ModalForm, ProFormSelect, ProFormText } from '@ant-design/pro-form'
+import { connect } from 'dva'
+import SvgIcon, { IconPark } from '@/components/SvgIcon'
 
-const index =  props => {
-  const [form] = useForm()
-  const { visible, onCancel, onConfirm, loading } = props
-  const { Option } = Select
+const AddCompany = props => {
+  const { natures, onConfirm, dispatch } = props
   const layout = {
-    labelCol: { flex: "100px" }
+    layout: 'horizontal',
+    labelCol: { flex: '100px' }
   }
+  useEffect(() => {
+    const getNatures = () => {
+      dispatch({
+        type: 'customer/fetch'
+      })
+    }
+    !natures.length && getNatures()
+  }, [])
   return (
-    <div>
-      <Modal
-        title="添加客户"
-        width={800}
-        onCancel={onCancel}
-        visible={visible}
-        confirmLoading={loading}
-        onOk={() => {
-          form.validateFields().then(values => {
-            form.resetFields()
-            onConfirm(values)
-          })
-        }}
-        >
-        <Form {...layout} form={form} name="basic">
-          <Row>
-            <Col span={24}>
-              <Form.Item
-                label="公司全称"
-                name="companyName"
-                rules={[{ required: true, message: '公司全称' }]}>
-                <Input />
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              <Form.Item label="公司地区" name="" rules={[{ message: '公司地区' }]}>
-                <LazyCascader key="LazyCascader" />
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              <Form.Item label="公司性质" name="gender" rules={[{ message: '公司性质' }]}>
-                <Select>
-                  <Option key="设计" value="设计">设计</Option>
-                  <Option key="咨询" value="咨询">咨询</Option>
-                </Select>
-              </Form.Item>
-            </Col>
-            <Col span={24}>
-              <Form.Item
-                label="公司地址"
-                name="address"
-                rules={[{ message: '公司地址' }]}>
-                <Input />
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              <Form.Item
-                label="公司传真"
-                name="fax"
-                rules={[{ message: '公司传真' }]}>
-                <Input />
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              <Form.Item
-                label="网址"
-                name="webservice"
-                rules={[{ message: '网址' }]}>
-                <Input />
-              </Form.Item>
-            </Col>
-            <Col span={24}>
-              <Form.Item
-                label="乘车路线"
-                name="ride"
-                rules={[{ message: '乘车路线' }]}>
-                <Input />
-              </Form.Item>
-            </Col>
-            <Col span={24}>
-              <Form.Item
-                label="地标建筑"
-                name="landmarks"
-                rules={[{ message: '地标建筑' }]}>
-                <Input />
-              </Form.Item>
-            </Col>
-            <Col span={24}>
-              <Form.Item
-                label="参考住宿"
-                name="stay"
-                rules={[{ message: '参考住宿' }]}>
-                <Input />
-              </Form.Item>
-            </Col>
-            <Col span={24}>
-              <Form.Item
-                label="备注"
-                name="remarks"
-                rules={[{ message: '备注' }]}>
-                <Input />
-              </Form.Item>
-            </Col>
-          </Row>
-        </Form>
-      </Modal>
-    </div>
+    <ModalForm
+      title="添加客户"
+      {...layout}
+      trigger={
+        <Button key="button" type="primary">
+          <IconPark type="plus" theme="filled" />
+          <span>客户</span>
+        </Button>
+      }
+      onFinish={async values => {
+        await onConfirm(values)
+        return true
+      }}>
+      <ProFormText
+        name="companyName"
+        label="公司全称"
+        rules={[{ required: true, message: '请输入公司全称' }]}
+      />
+      <Row>
+        <Col span={10}>
+          <Form.Item
+            label="公司地区"
+            name="district"
+            rules={[{ required: true, message: '请选择公司地区' }]}>
+            <LazyCascader />
+          </Form.Item>
+        </Col>
+        <Col span={14}>
+          <ProFormSelect label="公司性质" name="natureIds" options={natures} mode="multiple" />
+        </Col>
+      </Row>
+      <ProFormText
+        name="address"
+        label="公司地址"
+        rules={[{ required: true, message: '请填写公司地址' }]}
+      />
+      <Row>
+        <Col span={12}>
+          <ProFormText name="fax" label="公司传真" />
+        </Col>
+        <Col span={12}>
+          <ProFormText name="webservice" label="网址" />
+        </Col>
+      </Row>
+      <ProFormText name="ride" label="乘车路线" />
+      <ProFormText name="landmarks" label="地标建筑" />
+      <ProFormText name="stay" label="参考住宿" />
+      <ProFormText name="remarks" label="备注" />
+    </ModalForm>
   )
 }
 
-export default index
+export default connect(({ customer }) => ({
+  natures: customer.natures
+}))(AddCompany)

src/pages/Customer/Company/index.jsx

@@ -1,14 +1,14 @@
 import React, { useState, useEffect } from 'react'
 import ProTable from '@ant-design/pro-table'
 import useAutoTable from '@/hooks/useAutoTable'
-import SvgIcon from '@/components/SvgIcon'
-import { Button, message } from 'antd'
+import { message } from 'antd'
 import consts from '@/consts'
 import { queryCompany, apiAddCompany } from '@/services/company'
 import LazyCascader from '@/components/LazyCascader'
 import Companys from '@/components/PopContent/Companys'
 import AddCompany from '@/pages/Customer/Company/AddCompany'
 import { useModal } from '@/components/Modal'
+import { formatValues } from '@/components/LazyCascader'
 
 const Company = props => {
   const { toggleDrawer, setDrawerProps } = useModal()
@@ -39,7 +39,8 @@ const Company = props => {
   }
   const handleAddCompany = async values => {
     setAddCompany({ ...addCompany, loading: true })
-    const { code = -1 } = await apiAddCompany(values)
+    const params = formatValues(values)
+    const { code = -1 } = await apiAddCompany(params)
     if (code === consts.RET_CODE.SUCCESS) {
       message.success('新增成功')
       setState({ ...state, data: values })
@@ -50,7 +51,6 @@ const Company = props => {
   }
 
   useEffect(() => {
-    // props.getlist();
     initData()
   }, [])
   const handleSearch = value => {
@@ -75,13 +75,6 @@ const Company = props => {
     toggleDrawer()
   }
 
-  // 隐藏drawer
-  // const hideDrawer = () => {
-  //   setState({ ...state, visible: false, id: '' })
-  // }
-  // const onCreate = values => {
-  //   console.log(values)
-  // }
   const columns = [
     {
       title: '客户名称',
@@ -202,14 +195,8 @@ const Company = props => {
             onSearch: handleSearch
           },
           actions: [
-            <LazyCascader onChange={onDistrictChange} key="LazyCascader" />,
-            <Button
-              key="button"
-              type="primary"
-              onClick={() => setAddCompany({ ...addCompany, visible: true })}>
-              <SvgIcon type="icon-plus" />
-              客户
-            </Button>
+            <LazyCascader onChange={onDistrictChange} key="lazyCascader" />,
+            <AddCompany onConfirm={handleAddCompany} key="addCompanyBtn" />
           ]
         }}
         scroll={{ x, y }}
@@ -223,13 +210,6 @@ const Company = props => {
           onChange: (page, size) => initData({ page, size })
         }}
       />
-      <AddCompany
-        onConfirm={handleAddCompany}
-        loading={addCompany.loading}
-        visible={addCompany.visible}
-        onCancel={() => setAddCompany({ ...addCompany, visible: false })}
-      />
-      {/* <Companys onClose={hideDrawer} visible={state.visible} onCreate={onCreate} id={state.id} /> */}
     </div>
   )
 }

src/pages/Customer/Contact/components/ChangeCompany/index.jsx

@@ -3,7 +3,7 @@ import { IconPark } from '@/components/SvgIcon'
 import { Card, Tooltip } from 'antd'
 import React from 'react'
 import styles from './index.less'
-import SearchModal from '@/components/Modal/src/components/customerModal'
+import SearchModal from '@/pages/Customer/Contact/components/CustomerModal'
 import { apiDelCustomer } from '@/services/contact'
 import { useDispatch } from 'dva'
 import consts from '@/consts'

src/components/Modal/src/components/customerModal/index.jsx

@@ -4,7 +4,7 @@ import styles from './index.less'
 import { SearchOutlined, CloseOutlined } from '@ant-design/icons'
 import { useDebounceFn, useThrottleFn } from 'ahooks'
 import { useDispatch } from 'dva'
-import AddCustomerModal from '../addCustomerModal'
+import AddCustomerModal from '../AddCustomerModal'
 import { createCustomer, queryCustomers } from '@/services/customer'
 import consts from '@/basic/consts'
 import { formatValues } from '@/components/LazyCascader'

src/pages/Customer/Test/index.jsx

@@ -3,7 +3,7 @@ import { Button, Card, Cascader, Dropdown, Input, Menu, Select } from 'antd'
 import EditableForm from '@/components/EditableForm'
 import { useModal } from '@/components/Modal'
 import { connect } from 'dva'
-import SearchModal from '@/components/Modal/src/components/customerModal'
+import SearchModal from '@/pages/Customer/Contact/components/CustomerModal'
 import ChangeCompanyInput from '../Contact/components/ChangeCompany'
 
 const { Option } = Select

src/services/company.js

@@ -25,11 +25,9 @@ export async function apiCompanyDetail(id) {
 
 /**
  * 新增客户
- * @param {string} id 联系人记录id
+ * @param {string} data
  */
-export async function apiAddCompany(id) {
-  const params = { id }
-  const data = await request('/api/customer/add', { params })
+export async function apiAddCompany(payload) {
+  const data = await request.post('/api/customer/add', { data: payload })
   return data
 }
-