Просмотр исходного кода

fix: 修复通讯录生日列表的显示相关

fix: 修复通讯库寿星的列表高度显示问题
outaozhen 4 лет назад
Родитель
Сommit
326dd0686b
2 измененных файлов с 70 добавлено и 65 удалено
  1. 67 62
      src/pages/Hr/Contacts/index.tsx
  2. 3 3
      src/pages/Workbench/Dashboard/index.tsx

+ 67 - 62
src/pages/Hr/Contacts/index.tsx

@@ -54,13 +54,14 @@ const Contacts: React.FC<ContactsProps> = () => {
 
   const content = (
     <List
+      itemLayout="horizontal"
+      style={{ maxHeight: '200px', overflow: 'auto' }}
       dataSource={state.type === 'birthdayMonth' ? state.birthdayMonth : state.birthdayDay}
       renderItem={item => (
-        <div className="flex items-center">
+        <div className="flex items-center py-1">
           <span
             className="rounded-1/2 inline-block w-5 h-5 flex items-center"
             style={{
-              marginLeft: -2,
               backgroundImage: `url(${
                 (isDevMode() ? 'http://cld2qa.com' : window.location.origin) +
                 (item.avatar ?? consts.DEFAULT_AVATAR)
@@ -189,66 +190,70 @@ const Contacts: React.FC<ContactsProps> = () => {
                 ),
                 actions: [
                   <Space key="id">
-                    <Tag>
-                      <Popover
-                        onClick={() => {
-                          setState({ ...state, type: 'birthdayMonth' })
-                        }}
-                        content={content}
-                        title={'本月寿星:'}
-                        trigger="click"
-                        placement="bottomLeft">
-                        <div className="flex items-center cursor-pointer">
-                          本月寿星:
-                          {state.birthdayMonth?.map(item => {
-                            return (
-                              <span
-                                className="rounded-1/2 inline-block w-4 h-4"
-                                style={{
-                                  marginLeft: -2,
-                                  backgroundImage: `url(${
-                                    (isDevMode() ? 'http://cld2qa.com' : window.location.origin) +
-                                    (item.avatar ?? consts.DEFAULT_AVATAR)
-                                  })`,
-                                  backgroundSize: 'cover'
-                                }}
-                                key={item.id}
-                              />
-                            )
-                          })}
-                        </div>
-                      </Popover>
-                    </Tag>
-                    <Tag>
-                      <Popover
-                        onClick={() => {
-                          setState({ ...state, type: 'birthdayDay' })
-                        }}
-                        content={content}
-                        title={'本日寿星:'}
-                        trigger="click"
-                        placement="bottomLeft">
-                        <div className="flex items-center cursor-pointer">
-                          本日:
-                          {state.birthdayDay?.map(item => {
-                            return (
-                              <span
-                                className="rounded-1/2 inline-block w-4 h-4"
-                                style={{
-                                  marginLeft: -2,
-                                  backgroundImage: `url(${
-                                    (isDevMode() ? 'http://cld2qa.com' : window.location.origin) +
-                                    (item.avatar ?? consts.DEFAULT_AVATAR)
-                                  })`,
-                                  backgroundSize: 'cover'
-                                }}
-                                key={item.id}
-                              />
-                            )
-                          })}
-                        </div>
-                      </Popover>
-                    </Tag>
+                    {state.birthdayMonth.length ? (
+                      <Tag>
+                        <Popover
+                          onClick={() => {
+                            setState({ ...state, type: 'birthdayMonth' })
+                          }}
+                          content={content}
+                          title={'本月寿星:'}
+                          trigger="click"
+                          placement="bottomLeft">
+                          <div className="flex items-center cursor-pointer">
+                            本月寿星:
+                            {state.birthdayMonth?.map(item => {
+                              return (
+                                <span
+                                  className="rounded-1/2 inline-block w-4 h-4"
+                                  style={{
+                                    marginLeft: -5,
+                                    backgroundImage: `url(${
+                                      (isDevMode() ? 'http://cld2qa.com' : window.location.origin) +
+                                      (item.avatar ?? consts.DEFAULT_AVATAR)
+                                    })`,
+                                    backgroundSize: 'cover'
+                                  }}
+                                  key={item.id}
+                                />
+                              )
+                            })}
+                          </div>
+                        </Popover>
+                      </Tag>
+                    ) : null}
+                    {state.birthdayDay.length ? (
+                      <Tag>
+                        <Popover
+                          onClick={() => {
+                            setState({ ...state, type: 'birthdayDay' })
+                          }}
+                          content={content}
+                          title={'本日寿星:'}
+                          trigger="click"
+                          placement="bottomLeft">
+                          <div className="flex items-center cursor-pointer">
+                            本日:
+                            {state.birthdayDay?.map(item => {
+                              return (
+                                <span
+                                  className="rounded-1/2 inline-block w-4 h-4"
+                                  style={{
+                                    marginLeft: -5,
+                                    backgroundImage: `url(${
+                                      (isDevMode() ? 'http://cld2qa.com' : window.location.origin) +
+                                      (item.avatar ?? consts.DEFAULT_AVATAR)
+                                    })`,
+                                    backgroundSize: 'cover'
+                                  }}
+                                  key={item.id}
+                                />
+                              )
+                            })}
+                          </div>
+                        </Popover>
+                      </Tag>
+                    ) : null}
                   </Space>
                 ]
               }}

+ 3 - 3
src/pages/Workbench/Dashboard/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect, useRef, CSSProperties } from 'react'
 import ProTable from '@ant-design/pro-table'
 import { Row, Col, Select, Card, Skeleton, TreeSelect } from 'antd'
 import { AddressBook, City, Comment } from '@icon-park/react'
@@ -60,10 +60,10 @@ const Dashboard = ({ dispatch, departments = [] }) => {
     dispatchModal('M_REMINDER_LIST', { dataType, reminderCyclical })
   }
   // 展示卡片详情
-  const handleRatioCard = (dataType, bodyStyleName) => {
+  const handleRatioCard = (dataType: CardTypeMap, bodyStyle: CSSProperties) => {
     dispatchModal('M_RATIO_PANELS', {
       dataType,
-      bodyStyle: bodyStyleName,
+      bodyStyle,
       staffIds: state.params.staffIds,
       retioCyclical: state.params.cyclical,
       dataPermission: state.params.dataPermission