feat: 联系人详情接入客户名称

src/components/EditableForm/editableForm.jsx

@@ -20,6 +20,7 @@ const EditableForm = ({ dataSource, columns, type, tartgetUrl }) => {
     if (!item.editCellType) {
       newItem.editCellType = 'input'
     }
+
     return newItem
   })
   return (
@@ -37,6 +38,7 @@ const EditableForm = ({ dataSource, columns, type, tartgetUrl }) => {
             // dataId={dataSource.id}
             editable={column.editable}
             editCellType={column.editCellType}
+            customCell={column.customCell}
             requestUrl={tartgetUrl}
           />
         )

src/components/EditableForm/editableFormItem.jsx

@@ -14,6 +14,7 @@ const EditableFormItem = ({
   span,
   editCellType,
   requestUrl,
+  customCell,
   dispatch
 }) => {
   const record = dataSource[dataIndex]
@@ -89,7 +90,10 @@ const EditableFormItem = ({
 
   let cell = null
 
-  if (editing) {
+  // 是否是自定义cell
+  if (editCellType === 'custom') {
+    cell = customCell
+  } else if (editing) {
     const options = (
       <>
         <Option key="男" vlaue="男">

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

@@ -1,4 +1,4 @@
-import { Input, Form, Button } from 'antd'
+import { Input, Form, Button, Spin } from 'antd'
 import React, { useState, useEffect } from 'react'
 import styles from './index.less'
 import { SearchOutlined, CloseOutlined, PlusOutlined } from '@ant-design/icons'
@@ -13,6 +13,7 @@ import { apiChangeCustomer } from '@/services/contact'
 const SearchModal = ({ clientId, onSelect }) => {
   const dispatch = useDispatch()
   const [state, setState] = useState({
+    laoding: true,
     customer: [],
     searchVal: '',
     page: 1,
@@ -22,7 +23,7 @@ const SearchModal = ({ clientId, onSelect }) => {
   const initData = async params => {
     const { data = { customer: [], total: 0 }, code = -1 } = await queryCustomers(params)
     if (code === consts.RET_CODE.SUCCESS) {
-      setState({ ...state, ...data })
+      setState({ ...state, ...data, laoding: false })
     }
   }
 
@@ -72,20 +73,22 @@ const SearchModal = ({ clientId, onSelect }) => {
         </span>
       </div>
       <div className={styles.modalContent}>
-        {state.customer.map(item => (
-          <div key={item.id} className={styles.card}>
-            <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>
+        <Spin spinning={state.laoding}>
+          {state.customer.map(item => (
+            <div key={item.id} className={styles.card}>
+              <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>
+              </div>
             </div>
-          </div>
-        ))}
+          ))}
+        </Spin>
       </div>
       <div className={styles.modalFooter}>
         <AddCustomerModal onConfirm={addConfirm} />

src/components/Modal/src/components/customerModal/index.less

@@ -13,6 +13,7 @@
     }
   }
   .modalContent {
+    height: 63vh;
     max-height: 63vh;
     padding: 1.5rem;
     overflow-y: auto;

src/components/PopContent/Contacts/ContanctForm.jsx

@@ -1,10 +1,10 @@
 import { Row, Col } from 'antd'
 import React, { useEffect } from 'react'
 import EditableForm from '@/components/EditableForm'
-// import '../Contacts/index.scss'
+import ChangeCompanyInput from '@/pages/Customer/Contact/components/ChangeCompany/'
 
 const ContanctForm = props => {
-  const { client } = props
+  const { client, clientId } = props
   const columns = [
     {
       dataIndex: 'clientName',
@@ -20,7 +20,8 @@ const ContanctForm = props => {
     {
       dataIndex: 'companyName',
       label: '客户名称',
-      editCellType: '',
+      editCellType: 'custom',
+      customCell: <ChangeCompanyInput value={client.companyName} clientId={clientId} />,
       span: 24
     },
     {

src/components/PopContent/Contacts/index.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} />
+            <ContanctForm client={state.client} clientId={id} />
           </div>
         </Col>
         <Col span={12}>

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

@@ -7,7 +7,7 @@ import SearchModal from '@/components/Modal/src/components/customerModal'
 
 const ChangeCompanyInput = props => {
   const { toggleModal, setModalProps } = useModal()
-  const { value = '' } = props
+  const { value = '', clientId } = props
   const [companyName, setCompanyName] = useState(value)
   const changeCompany = name => {
     setCompanyName(name)
@@ -15,7 +15,7 @@ const ChangeCompanyInput = props => {
   const handleConnectContract = () => {
     setModalProps({
       width: '60vw',
-      modalRender: node => <SearchModal node={node} onSelect={changeCompany} />,
+      modalRender: node => <SearchModal node={node} onSelect={changeCompany} clientId={clientId} />,
       onCancel: () => toggleModal()
     })
     toggleModal()