合并

src/pages/channel/InviteClients.jsx

 function handleChange(value) {
   console.log(`selected ${value}`);
 }
-
-// const dataSource = [
-//   {
-//     key: '1',
-//     img: 'http://img0.imgtn.bdimg.com/it/u=4246326797,2657995307&fm=26&gp=0.jpg',
-//     name: '123',
-//     age: 32,
-//     address: '西湖区湖底公园1号',
-//   },
-//   {
-//     key: '2',
-//     img: '',
-//     age: 42,
-//     address: '西湖区湖底公园1号',
-//   },
-// ];
-
 const columns = [
   {
     title: '头像',
       setData(data)
   })
   }
-  // value 的值
-  // eslint-disable-next-line no-shadow
-  function handleChange(value) {
-    // setQueryData({ ...queryData, channelId: value });
-    localStorage.setItem('value', value);
-  }
-  // 查询
-  function queryList() {
-    getList({ pageNum: 1, pageSize: 10 })
-  }
-
-
   // 分页
   function onChange(pageNumber) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
       getList({ pageNum: pageNumber, pageSize: 9 })
   }
-
   return (
     <>
       <div className={channels.searchBox}>

src/pages/customer/independentList/index.jsx

 const { Option } = Select;
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const { Meta } = Card;
-
+/**
+ * 推荐客户
+ */
 class ModalTable extends React.Component {
   constructor(props) {
     super(props);
     );
   }
 }
+
+
+/**
+ * 邀请客户
+ */
+class InviteTable extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+       dataSource: { records: [] },
+       visibleData: { visible: false, customerId: '', realtyConsultant: '' },
+    }
+  }
+
+  // 挂载之后
+  componentDidMount() {
+    const { customerId } = this.state.visibleData
+    this.getList({ id: customerId, pageNumber: 1, pageSize: 5 })
+  }
+
+  componentDidUpdate(preProps, preState) {
+    const { customerId } = this.state.visibleData
+    if (this.props.visibleData.customerId !== preState.visibleData.customerId) {
+      this.getList({ id: customerId, pageNumber: 1, pageSize: 5 })
+      this.setState({ visibleData: this.props.visibleData });
+    }
+  }
+
+  // 弹框确定按钮
+  // eslint-disable-next-line react/sort-comp
+  handleOk() {
+    this.setState({ visibleData: { visible: false, customerId: '', realtyConsultant: '' } })
+  }
+
+  // 弹框取消按钮
+  handleCancel() {
+    this.setState({ visibleData: { visible: false, customerId: '', realtyConsultant: '' } })
+  }
+
+  getList(params) {
+     const { customerId } = this.props.visibleData
+    if (customerId === '' || customerId === undefined) {
+      return
+    }
+    request({ ...apis.customer.InviteClientsList, params: { ...params } }).then(res => {
+      this.setState({ dataSource: res })
+    }).catch(err => {
+      // eslint-disable-next-line no-unused-expressions
+      <Alert
+        style={{
+          marginBottom: 24,
+        }}
+        message={err}
+        type="error"
+        showIcon
+      />
+    })
+  }
+
+   // 分页
+  onChange(pageNum) {
+    this.getList({ pageNumber: pageNum, pageSize: 5 })
+  }
+
+  render() {
+    const columns = [
+      {
+        title: '头像',
+        dataIndex: 'img',
+        key: 'img',
+        align: 'center',
+        render: (text, record) => <img src={record.avatarurl}  width = {50} height = {50}/>,
+      },
+      {
+        title: '用户姓名',
+        dataIndex: 'name',
+        key: 'name',
+        align: 'center',
+        render: text => <a>{text}</a>,
+      },
+      {
+        title: '电话',
+        dataIndex: 'tel',
+        key: 'tel',
+        align: 'center',
+      },
+      {
+        title: '性别',
+        dataIndex: 'sex',
+        key: 'sex',
+        align: 'center',
+        render: (text, list) => <span>{ list.sex === 1 ? '男' : '女' }</span>,
+      },
+    ]
+    return (
+      <>
+        <Modal
+            title="推荐客户"
+            destroyOnClose="true"
+            width={900}
+            footer={null}
+            visible={this.state.visibleData.visible}
+            // onOk={() => this.handleOk()}
+            onCancel={(e) => this.handleCancel(e)}
+          >
+            <Table dataSource={this.state.dataSource.records} columns={columns} pagination={{ total: this.state.dataSource.total, onChange: e => this.onChange(e) }} />
+          </Modal>
+      </>
+    );
+  }
+}
+
 /**
  *
- *
+ *主题列表
  * @param {*} props
  * @returns
  */
   }
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const [gVisibleData, setGVisibleData] = useState({ visible: false, customerId: '', realtyConsultant: '' })
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [gInviteData, setGInviteData] = useState({ visible: false, customerId: '', realtyConsultant: '' })
   // Change 事件
   function handleSelectChange(e) {
     // eslint-disable-next-line no-console
   }
   function gM(row) {
     setGVisibleData({ visible: true, customerId: row.personId, realtyConsultant: row.realtyConsultant })
+
+    setGInviteData({ visible: false })
+  }
+
+  function Invite(row) {
+    setGInviteData({ visible: true, customerId: row.personId, realtyConsultant: row.realtyConsultant })
+
+    setGVisibleData({ visible: false })
   }
 
   // 分页
             <>
               <sapn style={{ color: 'rgba(239,39,58,1)' }}>查看详细</sapn>
               &nbsp;&nbsp;&nbsp;&nbsp;
-              <sapn style={{ color: 'rgba(239,39,58,1)' }}>邀请经纪人</sapn>
+              <sapn style={{ color: 'rgba(239,39,58,1)' }} onClick={() => Invite(record)}>邀请经纪人</sapn>
               &nbsp;&nbsp;&nbsp;&nbsp;
               <sapn style={{ color: 'rgba(239,39,58,1)' }} onClick={() => gM(record)}>推荐客户</sapn>
             </>
       <Table dataSource={dataSource.records} columns={columns} pagination={{ total: dataSource.total, onChange }} />
             {/* 调整归属 */}
         <ModalTable visibleData={gVisibleData} />
+        <InviteTable visibleData={gInviteData} />
     </>
   );
 }

src/services/apis.js

       method: 'GET',
       url: `${prefix}/customer/recommend/id`,
     },
+    InviteClientsList: {
+      method: 'GET',
+      url: `${prefix}/channel/InviteClientsList`,
+    },
   },
 }