fix: 通讯录的细节调整

fix: 111

fix: 去掉lodash依赖

src/pages/Hr/Contacts/index.less

@@ -0,0 +1,9 @@
+.radioWrap {
+  :global(.ant-radio-button-wrapper) {
+    background: #eff2f5;
+    border: 1px solid #eff2f5;
+  }
+  :focus-within {
+    box-shadow: none !important;
+  }
+}

src/pages/Hr/Contacts/index.tsx

@@ -8,6 +8,8 @@ import Organization from './components/Organization'
 import { queryStaffContacts } from '@/services/hr'
 import consts from '@/consts'
 import { isDevMode } from '@/utils/env'
+import styles from './index.less'
+import { debounce } from 'lodash-es'
 
 const character = [
   { value: '0', label: '全部' },
@@ -34,7 +36,7 @@ const character = [
   { value: 'u', label: 'U' },
   { value: 'v', label: 'V' },
   { value: 'w', label: 'W' },
-  { value: 's', label: 'S' },
+  { value: 'x', label: 'X' },
   { value: 'y', label: 'Y' },
   { value: 'z', label: 'Z' }
 ]
@@ -44,12 +46,13 @@ const Contacts: React.FC<ContactsProps> = () => {
     data: [],
     birthdayMonth: [],
     birthdayDay: [],
+    fullTimeCount: '',
+    internshipCount: '',
     type: null,
     params: {
       departmentId: '0',
       search: null
-    },
-    radioValue: '0'
+    }
   })
 
   const content = (
@@ -60,7 +63,7 @@ const Contacts: React.FC<ContactsProps> = () => {
       renderItem={item => (
         <div className="flex items-center py-1">
           <span
-            className="rounded-1/2 inline-block w-5 h-5 flex items-center"
+            className="rounded-1/2 inline-block w-6 h-6 flex items-center"
             style={{
               backgroundImage: `url(${
                 (isDevMode() ? 'http://cld2qa.com' : window.location.origin) +
@@ -82,8 +85,8 @@ const Contacts: React.FC<ContactsProps> = () => {
     setState({ ...state, params: { ...state.params, search: value } })
   }
 
-  const onChangeHandle = ({ target: { value } }: RadioChangeEvent) => {
-    setState({ ...state, radioValue: value, params: { ...state.params, search: value } })
+  const HandleOnchange = ({ target: { value } }: RadioChangeEvent) => {
+    setState({ ...state, params: { ...state.params, search: value } })
   }
 
   const columns: ColumnsType<API.ContractItem> = [
@@ -156,14 +159,29 @@ const Contacts: React.FC<ContactsProps> = () => {
               request={async params => {
                 const {
                   code = -1,
-                  data: { list = [], birthdayMonth = [], birthdayDay = [], total = 0 } = {
+                  data: {
+                    list = [],
+                    birthdayMonth = [],
+                    birthdayDay = [],
+                    fullTimeCount = '',
+                    internshipCount = '',
+                    total = 0
+                  } = {
                     list: [],
                     birthdayMonth: [],
                     birthdayDay: [],
+                    fullTimeCount: '',
+                    internshipCount: '',
                     total: 0
                   }
                 } = await queryStaffContacts({ ...params })
-                setState({ ...state, birthdayMonth: birthdayMonth, birthdayDay: birthdayDay })
+                setState({
+                  ...state,
+                  birthdayMonth: birthdayMonth,
+                  birthdayDay: birthdayDay,
+                  fullTimeCount: fullTimeCount,
+                  internshipCount: internshipCount
+                })
                 return {
                   data: list,
                   success: code === consts.RET_CODE.SUCCESS,
@@ -181,21 +199,34 @@ const Contacts: React.FC<ContactsProps> = () => {
                   />
                 ),
                 filter: (
-                  <div>
+                  <div className={styles.radioWrap}>
                     筛选：
                     <Radio.Group
-                      defaultValue="0"
-                      options={character}
-                      buttonStyle="solid"
-                      optionType="button"
                       size="small"
-                      onChange={onChangeHandle}
-                      value={state.radioValue}
-                    />
+                      optionType="button"
+                      buttonStyle="solid"
+                      defaultValue="0"
+                      onChange={debounce(HandleOnchange, 300)}>
+                      <Space>
+                        {character.map(item => {
+                          return (
+                            <Radio.Button key={item.value} value={item.value}>
+                              {item.label}
+                            </Radio.Button>
+                          )
+                        })}
+                      </Space>
+                    </Radio.Group>
                   </div>
                 ),
                 actions: [
                   <Space key="id">
+                    <Tag>
+                      <span className="h-30px leading-30px">全职：{state.fullTimeCount}</span>
+                    </Tag>
+                    <Tag>
+                      <span className="h-30px leading-30px">实习：{state.internshipCount}</span>
+                    </Tag>
                     {state.birthdayMonth.length ? (
                       <Tag>
                         <Popover
@@ -207,21 +238,20 @@ const Contacts: React.FC<ContactsProps> = () => {
                           trigger="click"
                           placement="bottomLeft">
                           <div className="flex items-center cursor-pointer">
-                            本月寿星：
+                            <span className="mr-2">本月寿星：</span>
                             {state.birthdayMonth?.map(item => {
                               return (
                                 <span
-                                  className="rounded-1/2 inline-block w-4 h-4"
-                                  style={{
-                                    marginLeft: -5,
-                                    backgroundImage: `url(${
+                                  key={item.id}
+                                  className="inline-block rounded-1/2 border-[#ccc] border-1 bg-[#fff] w-26px h-26px -ml-3 my-2px relative">
+                                  <img
+                                    className="rounded-1/2 w-20px h-20px absolute top-2px left-2px"
+                                    src={`${
                                       (isDevMode() ? 'http://cld2qa.com' : window.location.origin) +
                                       (item.avatar ?? consts.DEFAULT_AVATAR)
-                                    })`,
-                                    backgroundSize: 'cover'
-                                  }}
-                                  key={item.id}
-                                />
+                                    }`}
+                                  />
+                                </span>
                               )
                             })}
                           </div>
@@ -243,17 +273,16 @@ const Contacts: React.FC<ContactsProps> = () => {
                             {state.birthdayDay?.map(item => {
                               return (
                                 <span
-                                  className="rounded-1/2 inline-block w-4 h-4"
-                                  style={{
-                                    marginLeft: -5,
-                                    backgroundImage: `url(${
+                                  key={item.id}
+                                  className="inline-block rounded-1/2 border-[#ccc] border-1 bg-[#fff] w-26px h-26px -ml-3 my-2px relative">
+                                  <img
+                                    className="rounded-1/2 w-20px h-20px absolute top-2px left-2px"
+                                    src={`${
                                       (isDevMode() ? 'http://cld2qa.com' : window.location.origin) +
                                       (item.avatar ?? consts.DEFAULT_AVATAR)
-                                    })`,
-                                    backgroundSize: 'cover'
-                                  }}
-                                  key={item.id}
-                                />
+                                    }`}
+                                  />
+                                </span>
                               )
                             })}
                           </div>