fix: 修复客户名称功能逻辑错误

src/components/Modal/src/components/addCustomerModal/index.jsx

@@ -5,22 +5,20 @@ import LazyCascader from '@/components/LazyCascader'
 import { ModalForm, ProFormText, ProFormCheckbox } from '@ant-design/pro-form'
 import { PlusOutlined } from '@ant-design/icons'
 import consts from '@/consts'
-import { queryNatures } from '@/services/contact'
+import { connect } from 'dva'
 
-const AddCustomerModal = ({ clientId, onConfirm }) => {
+const AddCustomerModal = ({ clientId, onConfirm, dispatch, natures }) => {
   const formRef = useRef()
   const [modalVisible, setModalVisible] = useState(false)
-  const [natures, setNatures] = useState([])
   const layout = {
     layout: 'horizontal',
     labelCol: { flex: '100px' }
   }
   useEffect(() => {
-    const getNatures = async () => {
-      const { code = -1, data = [] } = await queryNatures()
-      if (code === consts.RET_CODE.SUCCESS) {
-        setNatures(data)
-      }
+    const getNatures = () => {
+      dispatch({
+        type: 'customer/fetch'
+      })
     }
     !natures.length && getNatures()
   }, [])
@@ -53,12 +51,8 @@ const AddCustomerModal = ({ clientId, onConfirm }) => {
         </Button>
       }
       onFinish={async values => {
-        // await waitTime(2000);
-        const { code = -1, msg = '请求失败' } = await onConfirm(values)
-        if (code === consts.RET_CODE.SUCCESS) {
-          return true
-        }
-        return message.error(msg)
+        await onConfirm(values)
+        return true
       }}>
       <ProFormText
         name="companyName"
@@ -92,4 +86,6 @@ const AddCustomerModal = ({ clientId, onConfirm }) => {
   )
 }
 
-export default AddCustomerModal
+export default connect(({ customer }) => ({
+  natures: customer.natures
+}))(AddCustomerModal)

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

@@ -1,4 +1,4 @@
-import { Input, Form, Button, Spin } from 'antd'
+import { Input, Form, Button, Spin, message } from 'antd'
 import React, { useState, useEffect } from 'react'
 import styles from './index.less'
 import { SearchOutlined, CloseOutlined, PlusOutlined } from '@ant-design/icons'
@@ -44,18 +44,24 @@ const SearchModal = ({ clientId, onSelect }) => {
 
   const addConfirm = async values => {
     const payload = formatValues(values)
-
-    const { code = -1 } = await createCustomer(payload)
+    const { code = -1, msg = '新增成功' } = await createCustomer(payload)
     if (code === consts.RET_CODE.SUCCESS) {
-      initData()
+      if (Object.hasOwnProperty.call(values, 'clientId')) {
+        message.success('新增成功并且成功绑定')
+        onSelect(values.companyName)
+        closeModal()
+      } else {
+        message.success(msg)
+        initData()
+      }
     }
   }
 
   // 联系人关联客户
-  const connectCustomer = async (customerId, companyName) => {
+  const connectCustomer = async customerId => {
     const { code = -1 } = await apiChangeCustomer({ id: clientId, customerId })
     if (code === consts.RET_CODE.SUCCESS) {
-      onSelect(companyName)
+      onSelect()
       closeModal()
     }
   }
@@ -79,10 +85,7 @@ const SearchModal = ({ clientId, onSelect }) => {
               <div className="zh-flex-sub">{item.companyName}</div>
               <div className="zh-flex-sub zh-justify-between">
                 <span>{item.local}</span>
-                <Button
-                  type="primary"
-                  size="small"
-                  onClick={() => connectCustomer(item.id, item.companyName)}>
+                <Button type="primary" size="small" onClick={() => connectCustomer(item.id)}>
                   关联
                 </Button>
               </div>
@@ -91,7 +94,7 @@ const SearchModal = ({ clientId, onSelect }) => {
         </Spin>
       </div>
       <div className={styles.modalFooter}>
-        <AddCustomerModal onConfirm={addConfirm} />
+        <AddCustomerModal onConfirm={addConfirm} clientId={clientId} />
       </div>
     </div>
   )

src/components/PopContent/Contacts/ContanctForm.jsx

@@ -1,10 +1,16 @@
 import { Row, Col } from 'antd'
-import React, { useEffect } from 'react'
+import React from 'react'
 import EditableForm from '@/components/EditableForm'
 import ChangeCompanyInput from '@/pages/Customer/Contact/components/ChangeCompany/'
 
 const ContanctForm = props => {
-  const { client, clientId } = props
+  const { client } = props
+  const changeCopInputData = {
+    customerName: client.companyName,
+    customerId: client.companyId,
+    clientName: client.clientName,
+    clientId: client.id
+  }
   const columns = [
     {
       dataIndex: 'clientName',
@@ -21,7 +27,7 @@ const ContanctForm = props => {
       dataIndex: 'companyName',
       label: '客户名称',
       editCellType: 'custom',
-      customCell: <ChangeCompanyInput value={client.companyName} clientId={clientId} />,
+      customCell: <ChangeCompanyInput dataSource={changeCopInputData} />,
       span: 24
     },
     {

src/components/PopContent/Contacts/index.jsx

@@ -1,4 +1,4 @@
-import { Drawer, Row, Col } from 'antd'
+import { Row, Col } from 'antd'
 import React, { useState, useEffect } from 'react'
 import '../index.scss'
 import ContanctForm from '@/components/PopContent/Contacts/ContanctForm.jsx'
@@ -42,7 +42,7 @@ const PopContent = props => {
       <Row>
         <Col span={12} className="sheet-box-left">
           <div className="sheet-left-panel zh-pd-right-15">
-            <ContanctForm client={state.client} clientId={id} />
+            <ContanctForm client={state.client} />
           </div>
         </Col>
         <Col span={12}>

src/models/customer.js

@@ -1,32 +1,31 @@
-// import consts from '@/consts'
-// import { queryCustomers } from '@/services/customer'
+import consts from '@/consts'
+import { queryNatures } from '@/services/contact'
 
-// export default {
-//   namespace: 'customer',
-//   state: {
-//     customer: [], // 客户列表
-//     total: 0
-//   },
-//   effects: {
-//     *fetch({ payload }, { call, put }) {
-//       const response = yield call(queryCustomers, payload)
-//       if (response && response.code === consts.RET_CODE.SUCCESS) {
-//         yield put({
-//           type: 'changeState',
-//           payload: {
-//             data: response.data
-//           }
-//         })
-//       }
-//     }
-//   },
-//   reducers: {
-//     // 通用reducer
-//     changeState(state, action) {
-//       return {
-//         ...state,
-//         ...action.payload
-//       }
-//     }
-//   }
-// }
+export default {
+  namespace: 'customer',
+  state: {
+    natures: [] // 客户性质列表
+  },
+  effects: {
+    *fetch({ payload }, { call, put }) {
+      const response = yield call(queryNatures, payload)
+      if (response && response.code === consts.RET_CODE.SUCCESS) {
+        yield put({
+          type: 'changeState',
+          payload: {
+            data: response.data
+          }
+        })
+      }
+    }
+  },
+  reducers: {
+    // 通用reducer
+    changeState(state, action) {
+      return {
+        ...state,
+        natures: action.payload.data
+      }
+    }
+  }
+}

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

@@ -1,44 +1,81 @@
 import { useModal } from '@/components/Modal'
 import { IconPark } from '@/components/SvgIcon'
 import { Card, Tooltip } from 'antd'
-import React, { useState } from 'react'
+import React from 'react'
 import styles from './index.less'
 import SearchModal from '@/components/Modal/src/components/customerModal'
+import { apiDelCustomer } from '@/services/contact'
+import { useDispatch } from 'dva'
 
 const ChangeCompanyInput = props => {
+  const dispatch = useDispatch()
   const { toggleModal, setModalProps } = useModal()
-  const { value = '', clientId } = props
-  const [companyName, setCompanyName] = useState(value)
-  const changeCompany = name => {
-    setCompanyName(name)
+  const {
+    dataSource: { customerId, clientId, customerName, clientName }
+  } = props
+  // const [companyName, setCompanyName] = useState('')
+  // useEffect(() => {
+  //   setCompanyName(customerName)
+  // }, [customerName])
+  // const changeCompany = name => {
+  //   setCompanyName(name)
+  // }
+  const refreshClient = () => {
+    dispatch({
+      type: 'refresh/commitAction',
+      payload: 'contact'
+    })
   }
-  const handleConnectContract = () => {
+  const handleConnectCustomer = () => {
     setModalProps({
       width: '60vw',
-      modalRender: node => <SearchModal node={node} onSelect={changeCompany} clientId={clientId} />,
+      modalRender: node => <SearchModal onSelect={refreshClient} node={node} clientId={clientId} />,
       onCancel: () => toggleModal()
     })
     toggleModal()
   }
   const notValueRender = (
-    <div onClick={handleConnectContract} className={styles.notCompanyContent}>
+    <div onClick={handleConnectCustomer} className={styles.notCompanyContent}>
       {/* style={{ transform: 'rotate(-90deg)' }} */}
       <IconPark type="link-one" size="14" />
       <span className="zh-mg-left-5">关联客户</span>
     </div>
   )
 
+  const removeCustomer = () => {
+    setModalProps({
+      title: '确认移除',
+      children: (
+        <p>
+          为联系人<span className="zh-mg-lr-3 zh-fw-600">{clientName}</span>移除
+          <span className="zh-mg-lr-3 zh-fw-600">{customerName}</span>
+        </p>
+      ),
+      onOk: async () => {
+        await apiDelCustomer({ id: clientId, customerId })
+        refreshClient()
+        toggleModal()
+      },
+      onCancel: () => toggleModal()
+    })
+    toggleModal()
+  }
+
   const normalValueRender = (
     <Card size="small">
       <div className="zh-flex-row zh-justify-between">
-        <div className={styles.nameContent}>{companyName}</div>
+        <div className={styles.nameContent}>{customerName}</div>
         <div>
           <Tooltip placement="left" title="移除客户">
-            <span className={styles.unlinkIcon}>
+            <span className={styles.unlinkIcon} onClick={removeCustomer}>
               <IconPark type="link-interrupt" />
             </span>
           </Tooltip>
-          <Tooltip placement="left" title="移除客户" className="zh-mg-left-5">
+          <Tooltip
+            placement="left"
+            title="更换客户"
+            className="zh-mg-left-5"
+            onClick={handleConnectCustomer}>
             <span className={styles.switchIcon}>
               <IconPark type="switch" />
             </span>
@@ -48,7 +85,7 @@ const ChangeCompanyInput = props => {
     </Card>
   )
   return (
-    <div className={styles.companyInput}>{companyName ? normalValueRender : notValueRender}</div>
+    <div className={styles.companyInput}>{customerId ? normalValueRender : notValueRender}</div>
   )
 }
 

src/pages/Customer/Test/index.jsx

@@ -1,13 +1,14 @@
-import React, { useRef } from 'react'
-import { Button, Card, Cascader, Input } from 'antd'
+import React, { useEffect, useRef } from 'react'
+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 ChangeCompanyInput from '../Contact/components/ChangeCompany'
 
-const Test = () => {
-  const { toggleModal, setModalProps, dispatch } = useModal()
+const { Option } = Select
+const Test = ({ natures, dispatch }) => {
+  const { toggleModal, setModalProps } = useModal()
 
   const iRef = useRef(null)
   const options = [
@@ -75,14 +76,42 @@ const Test = () => {
     toggleModal()
   }
 
+  useEffect(() => {
+    const initNatures = () => {
+      dispatch({
+        type: 'customer/fetch'
+      })
+    }
+    !natures.length && initNatures()
+  }, [])
+
+  const customOptions = originNode => {
+    return originNode
+  }
+
+  const menu = (
+    <Menu>
+      <Menu.Item key="1">1st menu item</Menu.Item>
+      <Menu.Item key="2">2nd menu item</Menu.Item>
+      <Menu.Item key="3">3rd menu item</Menu.Item>
+    </Menu>
+  )
+
   return (
     <Card bordered={false}>
-      <EditableForm dataSource={record} columns={columns} />
-      <Button onClick={onClick}>click</Button>
-      <Cascader ref={iRef} options={options} />
-      <ChangeCompanyInput />
+      {/* <EditableForm dataSource={record} columns={columns} /> */}
+      {/* <Button onClick={onClick}>click</Button> */}
+      {/* <Cascader ref={iRef} options={options} /> */}
+      {/* <ChangeCompanyInput /> */}
+      <div className="zh-width-100P">
+        <Dropdown overlay={menu} trigger={['click']}>
+          <Input />
+        </Dropdown>
+      </div>
     </Card>
   )
 }
 
-export default connect()(Test)
+export default connect(({ customer }) => ({
+  natures: customer.natures
+}))(Test)

src/services/contact.js

@@ -52,6 +52,16 @@ export async function apiChangeCustomer(payload) {
 }
 
 /**
+ * 移除联系人的客户关系
+ * @param {*} payload
+ * @returns
+ */
+export async function apiDelCustomer(payload) {
+  const data = await request.post('/api/client/customer/delete', { data: { ...payload } })
+  return data
+}
+
+/**
  * 获取客户性质列表
  * @returns
  */