feat: 增加关联员工弹窗

src/pages/Role/System/components/ConnectModal/index.less

@@ -0,0 +1,17 @@
+.modal-content {
+  .card {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: border-box;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 4px;
+    box-shadow: 0 0 13px 0 rgba(74, 53, 107, 0.08);
+    &:not(:last-of-type) {
+      margin-bottom: 1rem;
+    }
+  }
+}

src/pages/Role/System/components/ConnectModal/index.tsx

@@ -1,12 +1,71 @@
-import { Button, Input, Modal } from 'antd'
-import React from 'react'
+import { useRequest } from 'umi'
+import { Button, Input, message, Modal } from 'antd'
+import React, { useState, useRef, useEffect } from 'react'
+import { addRoleStaff, fetchStaffList } from '@/services/user/api'
+import './index.less'
+import { useDebounceFn } from 'ahooks'
 
 interface ConnectModalProps {
   title: string
+  dataId: string
+  onSelect?: () => void
 }
-const ConnectModal: React.FC<ConnectModalProps> = ({ title }) => {
+const ConnectModal: React.FC<ConnectModalProps> = ({ title, dataId, onSelect }) => {
+  const containerRef = useRef<HTMLDivElement>(null)
   const [visible, setVisible] = useState(false)
-  const
+  const [searchVal, setSearchVal] = useState('')
+
+  const { run: tryAddRoleStaff } = useRequest(
+    (params: API.AddRoleStaffParams) => addRoleStaff(params),
+    {
+      manual: true,
+      onSuccess: () => {
+        message.success('关联成功')
+        setVisible(false)
+      }
+    }
+  )
+
+  const {
+    run: tryQueryStaffList,
+    data,
+    noMore,
+    loadMore,
+    loadingMore
+  } = useRequest(
+    result =>
+      fetchStaffList({
+        current: result?.list.length / 10 + 1 || 1,
+        pageSize: 10,
+        search: searchVal
+      }),
+    {
+      manual: true,
+      loadMore: true,
+      ref: containerRef,
+      isNoMore: (res: API.BasicFetchResult<API.StaffItem>) => res.list.length >= res.total,
+      refreshDeps: [searchVal]
+    }
+  )
+  const { run } = useDebounceFn((value: string) => setSearchVal(value))
+  const handleSearch = () => {
+    run()
+  }
+  const { list = [] }: { list: API.StaffItem[] } = data || {}
+  useEffect(() => {
+    if (visible) {
+      tryQueryStaffList()
+    }
+  }, [visible])
+
+  const itemSelectHandler = (staffId: string) => {
+    console.log('staffId', staffId, 'dataId', dataId)
+
+    tryAddRoleStaff({ id: dataId, staffId })
+    if (onSelect) {
+      onSelect()
+    }
+  }
   return (
     <>
       <Button type="primary" onClick={() => setVisible(true)}>
@@ -15,10 +74,38 @@ const ConnectModal: React.FC<ConnectModalProps> = ({ title }) => {
       <Modal
         visible={visible}
         onCancel={() => setVisible(false)}
+        getContainer={false}
+        width="60vw"
         title={
-          <Input.Search placeholder="搜索员工（姓名）" onSearch={} onPressEnter={}></Input.Search>
+          <Input.Search
+            placeholder="搜索员工（姓名）"
+            onSearch={value => handleSearch(value)}
+            onPressEnter={e => handleSearch(e.currentTarget.value)}
+            style={{ width: '95%' }}></Input.Search>
         }>
-        <div>111</div>
+        <div ref={containerRef} className="h-60vh overflow-y-auto modal-content">
+          {list.map(item => (
+            <div className="card" key={item.staffId}>
+              <div className="w-4/3 flex justify-between">
+                <span className="w-1/5">{item.username}</span>
+                <span className="w-2/5">{item.phone}</span>
+                <span className="w-1/5">{item.position}</span>
+                <span className="w-1/5">{item.category}</span>
+              </div>
+              <div className="w-1/4 flex justify-end">
+                <span className="btn-outline" onClick={() => itemSelectHandler(item.staffId)}>
+                  选择ta
+                </span>
+              </div>
+            </div>
+          ))}
+          {noMore && <span>数据已全部加载完毕</span>}
+          {!noMore && (
+            <button type="button" onClick={loadMore} disabled={loadingMore}>
+              {loadingMore ? 'Loading more...' : 'Click to load more'}
+            </button>
+          )}
+        </div>
       </Modal>
     </>
   )