refactor: gantt block (#4059)

* refactor: gantt block

* style: style improve

* fix: bug

* fix: bug
This commit is contained in:
katherinehhh 2024-04-17 11:21:03 +08:00 committed by GitHub
parent 6a0777397a
commit d25670f29f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 17 additions and 10 deletions

View File

@ -77,12 +77,13 @@ const InternalGanttBlockProvider = (props) => {
};
export const GanttBlockProvider = (props) => {
const params = { filter: props.params.filter, paginate: false, sort: props.fieldNames.start };
const params = { filter: props.params.filter, paginate: false, sort: ['id'] };
const collection = useCollection_deprecated();
if (collection?.tree) {
params['tree'] = true;
}
return (
<div aria-label="block-item-gantt" role="button">
<BlockProvider name="gantt" {...props} params={params}>
@ -143,7 +144,6 @@ export const useGanttBlockProps = () => {
}
}
}, [ctx?.service?.loading]);
console.log(tasks);
return {
fieldNames: ctx.fieldNames,
timeRange: ctx.timeRange,

View File

@ -13,6 +13,7 @@ import {
useTableBlockContext,
useToken,
withDynamicSchemaProps,
useDesignable,
} from '@nocobase/client';
import { message } from 'antd';
import { debounce } from 'lodash';
@ -99,12 +100,9 @@ export const Gantt: any = withDynamicSchemaProps((props: any) => {
const { styles } = useStyles();
const { token } = useToken();
const api = useAPIClient();
const currentTheme = api.auth.getOption('theme');
const tableRowHeight = currentTheme === 'compact' ? 45 : 55.56;
const currentTheme = JSON.parse(api.auth.getOption('theme'))?.uid;
const {
headerHeight = document.querySelector('.ant-table-thead')?.clientHeight || 0, // 与 antd 表格头部高度一致
listCellWidth = '155px',
rowHeight = tableRowHeight,
ganttHeight = 0,
preStepsCount = 1,
barFill = 60,
@ -137,6 +135,9 @@ export const Gantt: any = withDynamicSchemaProps((props: any) => {
expandAndCollapseAll,
fieldNames,
} = useProps(props); // 新版 UISchema1.0 之后)中已经废弃了 useProps这里之所以继续保留是为了兼容旧版的 UISchema
const { designable } = useDesignable();
const headerHeight = currentTheme.includes('compact') ? 45 : designable ? 65 : 55;
const rowHeight = currentTheme.includes('compact') ? 45 : 65;
const ctx = useGanttBlockContext();
const appInfo = useCurrentAppInfo();
const { t } = useTranslation();
@ -520,7 +521,10 @@ export const Gantt: any = withDynamicSchemaProps((props: any) => {
box-shadow: none !important;
}
.ant-table-row {
height: ${tableRowHeight}px;
height: ${rowHeight}px;
}
.ant-table-thead {
height: ${headerHeight}px;
}
`)}
>

View File

@ -221,7 +221,10 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
} else if (action === 'dblclick') {
!!onDoubleClick && onDoubleClick(task);
} else if (action === 'click') {
!!onClick && onClick(task);
const targetElement = event.target as HTMLElement; // 将 event.target 转换为 HTMLElement 类型
if (targetElement.tagName === 'rect') {
!!onClick && onClick(task);
}
}
// Change task event start
else if (action === 'move') {

View File

@ -5,7 +5,7 @@ const useStyles = createStyles(({ token, css }) => {
scrollWrapper: css`
overflow: auto;
position: absolute;
bottom: -4px;
bottom: -8px;
max-width: 100%;
scrollbarWidth: thin;
height: 1.2rem;

View File

@ -100,7 +100,7 @@ export const TaskItem: React.FC<TaskItemProps> = (props) => {
{taskItem}
<text
x={isProjectBar ? task.x1 : getX()}
y={isProjectBar ? task.y - 8 : isTextInside ? task.y + taskHeight * 0.5 : task.y + taskHeight * 0.65}
y={isProjectBar ? task.y - 8 : isTextInside ? task.y + taskHeight * 0.65 : task.y + taskHeight * 0.65}
className={isProjectBar ? cx('projectLabel') : isTextInside ? cx('barLabel') : cx('barLabelOutside')}
ref={textRef}
>