fix: 人资通讯录不完整版

src/pages/Hr/Contacts/index.tsx

@@ -1,5 +1,6 @@
 import BasicTable from '@/components/Table'
 import { PageContainer } from '@ant-design/pro-layout'
+import { Input, List, Popover, Space, Tag } from 'antd'
 import type { ColumnsType } from 'antd/lib/table'
 import React, { useEffect, useMemo, useState } from 'react'
 import { connect } from 'umi'
@@ -9,10 +10,55 @@ export type ContactsProps = {
   allStaffList: API.ContractList[]
 }
 
+const character = [
+  { id: '1', name: '全部' },
+  { id: '2', name: 'A' },
+  { id: '3', name: 'B' },
+  { id: '4', name: 'C' },
+  { id: '5', name: 'D' },
+  { id: '6', name: 'E' },
+  { id: '7', name: 'F' },
+  { id: '8', name: 'G' },
+  { id: '9', name: 'H' },
+  { id: '10', name: 'I' },
+  { id: '11', name: 'J' },
+  { id: '12', name: 'K' },
+  { id: '13', name: 'L' },
+  { id: '14', name: 'M' },
+  { id: '15', name: 'N' },
+  { id: '16', name: 'O' },
+  { id: '17', name: 'P' },
+  { id: '18', name: 'Q' },
+  { id: '19', name: 'R' },
+  { id: '20', name: 'S' },
+  { id: '21', name: 'T' },
+  { id: '22', name: 'U' },
+  { id: '23', name: 'V' },
+  { id: '24', name: 'W' },
+  { id: '25', name: 'S' },
+  { id: '26', name: 'Y' },
+  { id: '27', name: 'Z' }
+]
+
+const content = (
+  <List
+    dataSource={character}
+    renderItem={item => (
+      <List.Item>
+        <List.Item.Meta title={item.name} />
+      </List.Item>
+    )}
+  />
+)
+
 const Contacts: React.FC<ContactsProps> = props => {
   const { dispatch, allStaffList = [] } = props
   const [state, setState] = useState({
-    departmentId: '0'
+    departmentId: '0',
+    params: {
+      projectType: 1,
+      search: null
+    }
   })
   const initData = () => {
     dispatch({
@@ -34,8 +80,19 @@ const Contacts: React.FC<ContactsProps> = props => {
   const onSelect = id => {
     setState({ ...state, departmentId: id })
   }
+  const handleSearch = value => {
+    tRef.current?.reloadAndRest()
+    setState({ ...state, params: { ...state.params, search: value } })
+  }
+
   const columns: ColumnsType<API.ContractItem> = [
     {
+      title: '字母',
+      dataIndex: 'zimu',
+      search: false,
+      width: 50
+    },
+    {
       title: '工号',
       dataIndex: 'jobNumber',
       search: false,
@@ -72,12 +129,6 @@ const Contacts: React.FC<ContactsProps> = props => {
       width: 100
     },
     {
-      title: '生日',
-      dataIndex: 'birthday',
-      search: false,
-      width: 150
-    },
-    {
       title: '入职时间',
       dataIndex: 'hiredate',
       search: false,
@@ -90,7 +141,56 @@ const Contacts: React.FC<ContactsProps> = props => {
         <Organization onSelect={onSelect} />
         <div className="ml-6 shadow-hex-3e2c5a" style={{ width: 'calc(100% - 12rem)' }}>
           {allStaffList.length ? (
-            <BasicTable rowKey="id" columns={columns} dataSource={dataSource} search={false} />
+            <BasicTable
+              rowKey="id"
+              columns={columns}
+              dataSource={dataSource}
+              search={false}
+              toolbar={{
+                multipleLine: true,
+                search: (
+                  <Input.Search
+                    style={{ width: '280px' }}
+                    allowClear={true}
+                    placeholder="请输入员工名称或手机进行搜索"
+                    onSearch={handleSearch}
+                  />
+                ),
+                filter: (
+                  <div>
+                    筛选：
+                    {character?.map(item => {
+                      return (
+                        <span className="inline-flex mb-1" key={item.id}>
+                          <Tag>{item.name}</Tag>
+                        </span>
+                      )
+                    })}
+                  </div>
+                ),
+                actions: [
+                  <Space key="id">
+                    <Tag>
+                      本月寿星：
+                      <Popover content={content} title={'本月寿星：'} trigger="click" placement="bottomLeft">
+                        <span>
+                          {character?.map(item => {
+                            return <span key={item.id}>{item.name}</span>
+                          })}
+                        </span>
+                      </Popover>
+                    </Tag>
+                    <Tag>
+                      本日：
+                      <Popover content={content} title={'本日寿星：'} trigger="click" placement="bottomLeft">
+                        AAA
+                      </Popover>
+                    </Tag>
+                  </Space>
+                ],
+                settings: []
+              }}
+            />
           ) : null}
         </div>
       </div>