mirror of
https://github.com/tencentmusic/supersonic.git
synced 2025-12-12 12:37:55 +00:00
[improvement][semantic-fe] Fixing the initialization issue with the date selection component in the indicator details page when switching time granularity. (#482)
* [improvement][semantic-fe] Add model alias setting & Add view permission restrictions to the model permission management tab. [improvement][semantic-fe] Add permission control to the action buttons for the main domain; apply high sensitivity filtering to the authorization of metrics/dimensions. [improvement][semantic-fe] Optimize the editing mode in the dimension/metric/datasource components to use the modelId stored in the database for data, instead of relying on the data from the state manager. * [improvement][semantic-fe] Add time granularity setting in the data source configuration. * [improvement][semantic-fe] Dictionary import for dimension values supported in Q&A visibility * [improvement][semantic-fe] Modification of data source creation prompt wording" * [improvement][semantic-fe] metric market experience optimization * [improvement][semantic-fe] enhance the analysis of metric trends * [improvement][semantic-fe] optimize the presentation of metric trend permissions * [improvement][semantic-fe] add metric trend download functionality * [improvement][semantic-fe] fix the dimension initialization issue in metric correlation * [improvement][semantic-fe] Fix the issue of database changes not taking effect when creating based on an SQL data source. * [improvement][semantic-fe] Optimizing pagination logic and some CSS styles * [improvement][semantic-fe] Fixing the API for the indicator list by changing "current" to "pageNum" * [improvement][semantic-fe] Fixing the default value setting for the indicator list * [improvement][semantic-fe] Adding batch operations for indicators/dimensions/models * [improvement][semantic-fe] Replacing the single status update API for indicators/dimensions with a batch update API * [improvement][semantic-fe] Redesigning the indicator homepage to incorporate trend charts and table functionality for indicators * [improvement][semantic-fe] Optimizing the logic for setting dimension values and editing data sources, and adding system settings functionality * [improvement][semantic-fe] Upgrading antd version to 5.x, extracting the batch operation button component, optimizing the interaction for system settings, and expanding the configuration generation types for list-to-select component. * [improvement][semantic-fe] Adding the ability to filter dimensions based on whether they are tags or not. * [improvement][semantic-fe] Adding the ability to edit relationships between models in the canvas. * [improvement][semantic-fe] Updating the datePicker component to use dayjs instead. * [improvement][semantic-fe] Fixing the issue with passing the model ID for dimensions in the indicator market. * [improvement][semantic-fe] Fixing the abnormal state of the popup when creating a model. * [improvement][semantic-fe] Adding permission logic for bulk operations in the indicator market. * [improvement][semantic-fe] Adding the ability to download and transpose data. * [improvement][semantic-fe] Fixing the initialization issue with the date selection component in the indicator details page when switching time granularity.
This commit is contained in:
tristanliu
@@ -1,4 +1,5 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect } from 'react';
|
||||||
|
import type { Ref, ReactNode } from 'react';
|
||||||
import type { RadioChangeEvent } from 'antd';
|
import type { RadioChangeEvent } from 'antd';
|
||||||
import { QuestionCircleOutlined } from '@ant-design/icons';
|
import { QuestionCircleOutlined } from '@ant-design/icons';
|
||||||
import { objToList } from '@/utils/utils';
|
import { objToList } from '@/utils/utils';
|
||||||
@@ -44,8 +45,7 @@ const { Option } = Select;
|
|||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
initialValues?: any;
|
initialValues?: any;
|
||||||
submitFormDataState?: boolean;
|
dateRangeTypeProps: DateRangeType;
|
||||||
dateRangeTypeProps?: DateRangeType;
|
|
||||||
onDateRangeChange: (value: string[], config: any) => void;
|
onDateRangeChange: (value: string[], config: any) => void;
|
||||||
onAdvanceSettingCollapsedChange?: (collapse: boolean) => void;
|
onAdvanceSettingCollapsedChange?: (collapse: boolean) => void;
|
||||||
onShortCutClick?: (shortCutId: string) => void;
|
onShortCutClick?: (shortCutId: string) => void;
|
||||||
@@ -59,489 +59,506 @@ type Props = {
|
|||||||
disabledAdvanceSetting?: boolean;
|
disabledAdvanceSetting?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
const DynamicDate: React.FC<Props> = ({
|
const DynamicDate: React.FC<Props> = forwardRef(
|
||||||
initialValues,
|
(
|
||||||
dateRangeTypeProps,
|
{
|
||||||
submitFormDataState,
|
initialValues,
|
||||||
onDateRangeChange,
|
dateRangeTypeProps,
|
||||||
onAdvanceSettingCollapsedChange,
|
onDateRangeChange,
|
||||||
onShortCutClick,
|
onAdvanceSettingCollapsedChange,
|
||||||
onDateRangeStringAndDescChange,
|
onShortCutClick,
|
||||||
disabledAdvanceSetting = false,
|
onDateRangeStringAndDescChange,
|
||||||
}: any) => {
|
disabledAdvanceSetting = false,
|
||||||
const initAdvacedConfigPanelCollapsed = () => {
|
}: Props,
|
||||||
return !initialValues?.dateSettingType || initialValues?.shortCutId ? [] : ['1'];
|
ref: Ref<any>,
|
||||||
};
|
|
||||||
const [advancedPanelFormResetState, setAdvancedPanelFormResetState] =
|
|
||||||
useState(dateRangeTypeProps);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// 当时间粒度发生变化时重置高级设置面板
|
|
||||||
resetAdvancedPanelForm(dateRangeTypeProps);
|
|
||||||
}, [dateRangeTypeProps]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (initialValues?.dateSettingType !== DateSettingType.DYNAMIC) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
initShortCutByDateRangeChange(dateRangeTypeProps);
|
|
||||||
}, [advancedPanelFormResetState]);
|
|
||||||
|
|
||||||
const resetAdvancedPanelForm = (dateRangeType: DateRangeType) => {
|
|
||||||
const lastConfigTypeFormData = advancedPanelFormData[DynamicAdvancedConfigType.LAST];
|
|
||||||
const historyConfigTypeFormData = advancedPanelFormData[DynamicAdvancedConfigType.HISTORY];
|
|
||||||
switch (dateRangeType) {
|
|
||||||
case DateRangeType.DAY:
|
|
||||||
setAdvancedPanelFormData({
|
|
||||||
...advancedPanelFormData,
|
|
||||||
[DynamicAdvancedConfigType.LAST]: {
|
|
||||||
...lastConfigTypeFormData,
|
|
||||||
periodType: DatePeriodType.DAY,
|
|
||||||
},
|
|
||||||
[DynamicAdvancedConfigType.HISTORY]: {
|
|
||||||
...historyConfigTypeFormData,
|
|
||||||
periodType: DatePeriodType.DAY,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case DateRangeType.WEEK:
|
|
||||||
setAdvancedPanelFormData({
|
|
||||||
...advancedPanelFormData,
|
|
||||||
[DynamicAdvancedConfigType.LAST]: {
|
|
||||||
...lastConfigTypeFormData,
|
|
||||||
periodType: DatePeriodType.WEEK,
|
|
||||||
},
|
|
||||||
[DynamicAdvancedConfigType.HISTORY]: {
|
|
||||||
...historyConfigTypeFormData,
|
|
||||||
periodType: DatePeriodType.WEEK,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case DateRangeType.MONTH:
|
|
||||||
setAdvancedPanelFormData({
|
|
||||||
...advancedPanelFormData,
|
|
||||||
[DynamicAdvancedConfigType.LAST]: {
|
|
||||||
...lastConfigTypeFormData,
|
|
||||||
periodType: DatePeriodType.MONTH,
|
|
||||||
},
|
|
||||||
[DynamicAdvancedConfigType.HISTORY]: {
|
|
||||||
...historyConfigTypeFormData,
|
|
||||||
periodType: DatePeriodType.MONTH,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
setAdvancedPanelFormResetState(dateRangeType);
|
|
||||||
setAdvacedConfigPanelCollapsed([]);
|
|
||||||
};
|
|
||||||
|
|
||||||
const initAdvancedConfigType = () => {
|
|
||||||
return initialValues?.dynamicAdvancedConfigType;
|
|
||||||
};
|
|
||||||
const initAdvancedPanelFormData = () => {
|
|
||||||
let defaultConfig = {
|
|
||||||
[DynamicAdvancedConfigType.LAST]: {
|
|
||||||
number: 1,
|
|
||||||
periodType: dateRangeTypeExchangeDatePeriodTypeMap[dateRangeTypeProps],
|
|
||||||
includesCurrentPeriod: false,
|
|
||||||
},
|
|
||||||
[DynamicAdvancedConfigType.HISTORY]: {
|
|
||||||
number: 1,
|
|
||||||
periodType: dateRangeTypeExchangeDatePeriodTypeMap[dateRangeTypeProps],
|
|
||||||
},
|
|
||||||
[DynamicAdvancedConfigType.FROM_DATE_PERIOD]: {
|
|
||||||
perPeriodType: PerDatePeriodType.PERDAY,
|
|
||||||
},
|
|
||||||
[DynamicAdvancedConfigType.FROM_DATE]: { date: dayjs() },
|
|
||||||
};
|
|
||||||
if (advancedPanelFormData) {
|
|
||||||
defaultConfig = { ...advancedPanelFormData };
|
|
||||||
}
|
|
||||||
if (initialValues?.dynamicAdvancedConfigType) {
|
|
||||||
const { dynamicAdvancedConfigType } = initialValues;
|
|
||||||
const targetConfig = defaultConfig[dynamicAdvancedConfigType];
|
|
||||||
if (!targetConfig) {
|
|
||||||
return defaultConfig;
|
|
||||||
}
|
|
||||||
const mergeConfig = Object.keys(targetConfig).reduce((result, key) => {
|
|
||||||
return {
|
|
||||||
...result,
|
|
||||||
[key]: initialValues[key],
|
|
||||||
};
|
|
||||||
}, {});
|
|
||||||
defaultConfig[dynamicAdvancedConfigType] = mergeConfig;
|
|
||||||
}
|
|
||||||
return defaultConfig;
|
|
||||||
};
|
|
||||||
const initShortCutSettingChecked = () => {
|
|
||||||
return initialValues?.shortCutId || '';
|
|
||||||
};
|
|
||||||
const [advacedConfigPanelCollapsed, setAdvacedConfigPanelCollapsed] = useState<string | string[]>(
|
|
||||||
initAdvacedConfigPanelCollapsed(),
|
|
||||||
);
|
|
||||||
const [advancedConfigType, setAdvancedConfigType] = useState<
|
|
||||||
DynamicAdvancedConfigType | undefined
|
|
||||||
>(initAdvancedConfigType());
|
|
||||||
const [advancedPanelFormData, setAdvancedPanelFormData] = useState<any>(
|
|
||||||
initAdvancedPanelFormData(),
|
|
||||||
);
|
|
||||||
const [shortCutSettingChecked, setShortCutSettingChecked] = useState<string>(
|
|
||||||
initShortCutSettingChecked(),
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// 外部状态触发表单数据提交
|
|
||||||
if (submitFormDataState && advancedConfigType) {
|
|
||||||
updateAdvancedPanelFormData(
|
|
||||||
advancedPanelFormData[advancedConfigType],
|
|
||||||
advancedConfigType,
|
|
||||||
true,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}, [submitFormDataState]);
|
|
||||||
|
|
||||||
const init = () => {
|
|
||||||
setAdvacedConfigPanelCollapsed(initAdvacedConfigPanelCollapsed());
|
|
||||||
setAdvancedConfigType(initAdvancedConfigType());
|
|
||||||
setAdvancedPanelFormData(initAdvancedPanelFormData());
|
|
||||||
setShortCutSettingChecked(initShortCutSettingChecked());
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (initialValues?.dateSettingType === DateSettingType.DYNAMIC) {
|
|
||||||
init();
|
|
||||||
}
|
|
||||||
}, [initialValues]);
|
|
||||||
|
|
||||||
const handleDateRangeChange = (dateRange: string[], config: any) => {
|
|
||||||
onDateRangeChange(dateRange, {
|
|
||||||
...config,
|
|
||||||
dateSettingType: DateSettingType.DYNAMIC,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateAdvancedPanelFormData = (
|
|
||||||
formData: any,
|
|
||||||
configType: DynamicAdvancedConfigType,
|
|
||||||
emitImmediately = false,
|
|
||||||
) => {
|
) => {
|
||||||
const mergeConfigTypeData = {
|
useImperativeHandle(ref, () => ({
|
||||||
...advancedPanelFormData[configType],
|
dynamicDateUpdateAdvancedPanelFormData: () => {
|
||||||
...formData,
|
// return [...dataSource];
|
||||||
// shortCutId: shortCutSettingChecked,
|
if (advancedConfigType) {
|
||||||
dateRangeType: dateRangeTypeProps,
|
updateAdvancedPanelFormData(
|
||||||
dynamicAdvancedConfigType: configType,
|
advancedPanelFormData[advancedConfigType],
|
||||||
|
advancedConfigType,
|
||||||
|
true,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
const initAdvacedConfigPanelCollapsed = () => {
|
||||||
|
return !initialValues?.dateSettingType || initialValues?.shortCutId ? [] : ['1'];
|
||||||
};
|
};
|
||||||
const { dateRangeString, dateRangeStringDesc } = getDynamicDateRangeStringByParams(
|
const [advancedPanelFormResetState, setAdvancedPanelFormResetState] =
|
||||||
mergeConfigTypeData,
|
useState(dateRangeTypeProps);
|
||||||
configType,
|
|
||||||
{ maxPartition: dayjs().format('YYYY-MM-DD') },
|
useEffect(() => {
|
||||||
|
// 当时间粒度发生变化时重置高级设置面板
|
||||||
|
resetAdvancedPanelForm(dateRangeTypeProps);
|
||||||
|
}, [dateRangeTypeProps]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (initialValues?.dateSettingType !== DateSettingType.DYNAMIC) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
initShortCutByDateRangeChange(dateRangeTypeProps);
|
||||||
|
}, [advancedPanelFormResetState]);
|
||||||
|
|
||||||
|
const resetAdvancedPanelForm = (dateRangeType: DateRangeType) => {
|
||||||
|
const lastConfigTypeFormData = advancedPanelFormData[DynamicAdvancedConfigType.LAST];
|
||||||
|
const historyConfigTypeFormData = advancedPanelFormData[DynamicAdvancedConfigType.HISTORY];
|
||||||
|
switch (dateRangeType) {
|
||||||
|
case DateRangeType.DAY:
|
||||||
|
setAdvancedPanelFormData({
|
||||||
|
...advancedPanelFormData,
|
||||||
|
[DynamicAdvancedConfigType.LAST]: {
|
||||||
|
...lastConfigTypeFormData,
|
||||||
|
periodType: DatePeriodType.DAY,
|
||||||
|
},
|
||||||
|
[DynamicAdvancedConfigType.HISTORY]: {
|
||||||
|
...historyConfigTypeFormData,
|
||||||
|
periodType: DatePeriodType.DAY,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case DateRangeType.WEEK:
|
||||||
|
setAdvancedPanelFormData({
|
||||||
|
...advancedPanelFormData,
|
||||||
|
[DynamicAdvancedConfigType.LAST]: {
|
||||||
|
...lastConfigTypeFormData,
|
||||||
|
periodType: DatePeriodType.WEEK,
|
||||||
|
},
|
||||||
|
[DynamicAdvancedConfigType.HISTORY]: {
|
||||||
|
...historyConfigTypeFormData,
|
||||||
|
periodType: DatePeriodType.WEEK,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case DateRangeType.MONTH:
|
||||||
|
setAdvancedPanelFormData({
|
||||||
|
...advancedPanelFormData,
|
||||||
|
[DynamicAdvancedConfigType.LAST]: {
|
||||||
|
...lastConfigTypeFormData,
|
||||||
|
periodType: DatePeriodType.MONTH,
|
||||||
|
},
|
||||||
|
[DynamicAdvancedConfigType.HISTORY]: {
|
||||||
|
...historyConfigTypeFormData,
|
||||||
|
periodType: DatePeriodType.MONTH,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
setAdvancedPanelFormResetState(dateRangeType);
|
||||||
|
setAdvacedConfigPanelCollapsed([]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const initAdvancedConfigType = () => {
|
||||||
|
return initialValues?.dynamicAdvancedConfigType;
|
||||||
|
};
|
||||||
|
const initAdvancedPanelFormData = () => {
|
||||||
|
let defaultConfig = {
|
||||||
|
[DynamicAdvancedConfigType.LAST]: {
|
||||||
|
number: 1,
|
||||||
|
periodType: dateRangeTypeExchangeDatePeriodTypeMap[dateRangeTypeProps],
|
||||||
|
includesCurrentPeriod: false,
|
||||||
|
},
|
||||||
|
[DynamicAdvancedConfigType.HISTORY]: {
|
||||||
|
number: 1,
|
||||||
|
periodType: dateRangeTypeExchangeDatePeriodTypeMap[dateRangeTypeProps],
|
||||||
|
},
|
||||||
|
[DynamicAdvancedConfigType.FROM_DATE_PERIOD]: {
|
||||||
|
perPeriodType: PerDatePeriodType.PERDAY,
|
||||||
|
},
|
||||||
|
[DynamicAdvancedConfigType.FROM_DATE]: { date: dayjs() },
|
||||||
|
};
|
||||||
|
if (advancedPanelFormData) {
|
||||||
|
defaultConfig = { ...advancedPanelFormData };
|
||||||
|
}
|
||||||
|
if (initialValues?.dynamicAdvancedConfigType) {
|
||||||
|
const { dynamicAdvancedConfigType } = initialValues;
|
||||||
|
const targetConfig = defaultConfig[dynamicAdvancedConfigType];
|
||||||
|
if (!targetConfig) {
|
||||||
|
return defaultConfig;
|
||||||
|
}
|
||||||
|
const mergeConfig = Object.keys(targetConfig).reduce((result, key) => {
|
||||||
|
return {
|
||||||
|
...result,
|
||||||
|
[key]: initialValues[key],
|
||||||
|
};
|
||||||
|
}, {});
|
||||||
|
defaultConfig[dynamicAdvancedConfigType] = mergeConfig;
|
||||||
|
}
|
||||||
|
return defaultConfig;
|
||||||
|
};
|
||||||
|
const initShortCutSettingChecked = () => {
|
||||||
|
return initialValues?.shortCutId || '';
|
||||||
|
};
|
||||||
|
const [advacedConfigPanelCollapsed, setAdvacedConfigPanelCollapsed] = useState<
|
||||||
|
string | string[]
|
||||||
|
>(initAdvacedConfigPanelCollapsed());
|
||||||
|
const [advancedConfigType, setAdvancedConfigType] = useState<
|
||||||
|
DynamicAdvancedConfigType | undefined
|
||||||
|
>(initAdvancedConfigType());
|
||||||
|
const [advancedPanelFormData, setAdvancedPanelFormData] = useState<any>(
|
||||||
|
initAdvancedPanelFormData(),
|
||||||
|
);
|
||||||
|
const [shortCutSettingChecked, setShortCutSettingChecked] = useState<string>(
|
||||||
|
initShortCutSettingChecked(),
|
||||||
);
|
);
|
||||||
mergeConfigTypeData.dateRangeStringDesc = dateRangeStringDesc;
|
|
||||||
onDateRangeStringAndDescChange?.({ dateRangeString, dateRangeStringDesc });
|
|
||||||
if (emitImmediately) {
|
|
||||||
handleDateRangeChange(dateRangeString, mergeConfigTypeData);
|
|
||||||
}
|
|
||||||
setAdvancedPanelFormData({
|
|
||||||
...advancedPanelFormData,
|
|
||||||
[configType]: mergeConfigTypeData,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 根据当前时间粒度判断高级设置中时间区间选项哪些可用
|
const init = () => {
|
||||||
const isDisabledDatePeriodTypeOption = (
|
setAdvacedConfigPanelCollapsed(initAdvacedConfigPanelCollapsed());
|
||||||
datePeriodType: DatePeriodType,
|
setAdvancedConfigType(initAdvancedConfigType());
|
||||||
dateRangeType: DateRangeType,
|
setAdvancedPanelFormData(initAdvancedPanelFormData());
|
||||||
) => {
|
setShortCutSettingChecked(initShortCutSettingChecked());
|
||||||
switch (datePeriodType) {
|
};
|
||||||
case DatePeriodType.DAY:
|
|
||||||
return ![DateRangeType.DAY].includes(dateRangeType);
|
|
||||||
case DatePeriodType.WEEK:
|
|
||||||
return ![DateRangeType.DAY, DateRangeType.WEEK].includes(dateRangeType);
|
|
||||||
case DatePeriodType.MONTH:
|
|
||||||
return false;
|
|
||||||
case DatePeriodType.YEAR:
|
|
||||||
return false;
|
|
||||||
default:
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getDatePeriodTypeOptions = (dateRangeType: DateRangeType) => {
|
useEffect(() => {
|
||||||
const list = objToList(datePeriodTypeMap);
|
if (initialValues?.dateSettingType === DateSettingType.DYNAMIC) {
|
||||||
const optionList = list.reduce((result: any[], { value, label }: any) => {
|
init();
|
||||||
const isDisabled = isDisabledDatePeriodTypeOption(value, dateRangeType);
|
|
||||||
if (isDisabled) {
|
|
||||||
return result;
|
|
||||||
}
|
}
|
||||||
result.push(
|
}, [initialValues]);
|
||||||
<Option value={value} key={value}>
|
|
||||||
{label}
|
const handleDateRangeChange = (dateRange: string[], config: any) => {
|
||||||
</Option>,
|
onDateRangeChange(dateRange, {
|
||||||
|
...config,
|
||||||
|
dateSettingType: DateSettingType.DYNAMIC,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateAdvancedPanelFormData = (
|
||||||
|
formData: any,
|
||||||
|
configType: DynamicAdvancedConfigType,
|
||||||
|
emitImmediately = false,
|
||||||
|
) => {
|
||||||
|
const mergeConfigTypeData = {
|
||||||
|
...advancedPanelFormData[configType],
|
||||||
|
...formData,
|
||||||
|
// shortCutId: shortCutSettingChecked,
|
||||||
|
dateRangeType: dateRangeTypeProps,
|
||||||
|
dynamicAdvancedConfigType: configType,
|
||||||
|
};
|
||||||
|
const { dateRangeString, dateRangeStringDesc } = getDynamicDateRangeStringByParams(
|
||||||
|
mergeConfigTypeData,
|
||||||
|
configType,
|
||||||
|
{ maxPartition: dayjs().format('YYYY-MM-DD') },
|
||||||
);
|
);
|
||||||
return result;
|
mergeConfigTypeData.dateRangeStringDesc = dateRangeStringDesc;
|
||||||
}, []);
|
onDateRangeStringAndDescChange?.({ dateRangeString, dateRangeStringDesc });
|
||||||
return optionList;
|
if (emitImmediately) {
|
||||||
};
|
handleDateRangeChange(dateRangeString, mergeConfigTypeData);
|
||||||
|
}
|
||||||
|
setAdvancedPanelFormData({
|
||||||
|
...advancedPanelFormData,
|
||||||
|
[configType]: mergeConfigTypeData,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
const isAdvancedConfigTypeRadioDisabled = (type: DynamicAdvancedConfigType) => {
|
// 根据当前时间粒度判断高级设置中时间区间选项哪些可用
|
||||||
return type !== advancedConfigType;
|
const isDisabledDatePeriodTypeOption = (
|
||||||
};
|
datePeriodType: DatePeriodType,
|
||||||
|
dateRangeType: DateRangeType,
|
||||||
|
) => {
|
||||||
|
switch (datePeriodType) {
|
||||||
|
case DatePeriodType.DAY:
|
||||||
|
return ![DateRangeType.DAY].includes(dateRangeType);
|
||||||
|
case DatePeriodType.WEEK:
|
||||||
|
return ![DateRangeType.DAY, DateRangeType.WEEK].includes(dateRangeType);
|
||||||
|
case DatePeriodType.MONTH:
|
||||||
|
return false;
|
||||||
|
case DatePeriodType.YEAR:
|
||||||
|
return false;
|
||||||
|
default:
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const initShortCutByDateRangeChange = (dateRangeType: DateRangeType, emitImmediately = false) => {
|
const getDatePeriodTypeOptions = (dateRangeType: DateRangeType) => {
|
||||||
const shortCutList = SHORT_CUT_ITEM_LIST.filter((item) => {
|
const list = objToList(datePeriodTypeMap);
|
||||||
return item.dateRangeType === dateRangeType;
|
const optionList = list.reduce((result: any[], { value, label }: any) => {
|
||||||
});
|
const isDisabled = isDisabledDatePeriodTypeOption(value, dateRangeType);
|
||||||
const firstItem = shortCutList[0];
|
if (isDisabled) {
|
||||||
if (firstItem) {
|
return result;
|
||||||
handleShortCutChange(firstItem, emitImmediately);
|
}
|
||||||
}
|
result.push(
|
||||||
};
|
<Option value={value} key={value}>
|
||||||
|
{label}
|
||||||
|
</Option>,
|
||||||
|
);
|
||||||
|
return result;
|
||||||
|
}, []);
|
||||||
|
return optionList;
|
||||||
|
};
|
||||||
|
|
||||||
const handleShortCutChange = (item: any, emitImmediately = true) => {
|
const isAdvancedConfigTypeRadioDisabled = (type: DynamicAdvancedConfigType) => {
|
||||||
const { id, advancedConfigType, initData } = item;
|
return type !== advancedConfigType;
|
||||||
// 设置选中状态
|
};
|
||||||
setShortCutSettingChecked(id);
|
|
||||||
// 设置快捷选项AdvancedConfigType类型
|
|
||||||
setAdvancedConfigType(advancedConfigType);
|
|
||||||
// 更新数据至表单数据并立即向上层组件传递
|
|
||||||
updateAdvancedPanelFormData(initData, advancedConfigType, emitImmediately);
|
|
||||||
if (emitImmediately) {
|
|
||||||
// 触发快捷选项点击时间，上层组件关闭配置浮窗
|
|
||||||
onShortCutClick?.(id);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleAdvancedPanelFormChange = () => {
|
const initShortCutByDateRangeChange = (
|
||||||
// 当高级面板表单发生变化时，重置快捷选项为空
|
dateRangeType: DateRangeType,
|
||||||
setShortCutSettingChecked('');
|
emitImmediately = false,
|
||||||
};
|
) => {
|
||||||
|
const shortCutList = SHORT_CUT_ITEM_LIST.filter((item) => {
|
||||||
|
return item.dateRangeType === dateRangeType;
|
||||||
|
});
|
||||||
|
const firstItem = shortCutList[0];
|
||||||
|
if (firstItem) {
|
||||||
|
handleShortCutChange(firstItem, emitImmediately);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
const handleShortCutChange = (item: any, emitImmediately = true) => {
|
||||||
<>
|
const { id, advancedConfigType, initData } = item;
|
||||||
<div className={styles.dateShortCutSettingContent}>
|
// 设置选中状态
|
||||||
<Row>
|
setShortCutSettingChecked(id);
|
||||||
{SHORT_CUT_ITEM_LIST.map((item) => {
|
// 设置快捷选项AdvancedConfigType类型
|
||||||
const { id, text, dateRangeType } = item;
|
setAdvancedConfigType(advancedConfigType);
|
||||||
if (dateRangeType === dateRangeTypeProps) {
|
// 更新数据至表单数据并立即向上层组件传递
|
||||||
return (
|
updateAdvancedPanelFormData(initData, advancedConfigType, emitImmediately);
|
||||||
<Col key={`row-col-${id}`}>
|
if (emitImmediately) {
|
||||||
<CheckableTag
|
// 触发快捷选项点击时间，上层组件关闭配置浮窗
|
||||||
className={styles['ant-tag-checkable']}
|
onShortCutClick?.(id);
|
||||||
checked={shortCutSettingChecked === id}
|
}
|
||||||
key={`row-col-tag-${id}`}
|
};
|
||||||
onChange={() => {
|
|
||||||
handleShortCutChange(item);
|
const handleAdvancedPanelFormChange = () => {
|
||||||
}}
|
// 当高级面板表单发生变化时，重置快捷选项为空
|
||||||
>
|
setShortCutSettingChecked('');
|
||||||
<div className={styles['tag-value-box']}>{text}</div>
|
};
|
||||||
</CheckableTag>
|
|
||||||
</Col>
|
return (
|
||||||
);
|
<>
|
||||||
}
|
<div className={styles.dateShortCutSettingContent}>
|
||||||
return undefined;
|
<Row>
|
||||||
})}
|
{SHORT_CUT_ITEM_LIST.map((item) => {
|
||||||
</Row>
|
const { id, text, dateRangeType } = item;
|
||||||
</div>
|
if (dateRangeType === dateRangeTypeProps) {
|
||||||
{!disabledAdvanceSetting && (
|
return (
|
||||||
<div className={styles.dateAdvancedSettingContent}>
|
<Col key={`row-col-${id}`}>
|
||||||
<Collapse
|
<CheckableTag
|
||||||
// defaultActiveKey={['1']}
|
className={styles['ant-tag-checkable']}
|
||||||
activeKey={advacedConfigPanelCollapsed}
|
checked={shortCutSettingChecked === id}
|
||||||
onChange={(key: string | string[]) => {
|
key={`row-col-tag-${id}`}
|
||||||
setAdvacedConfigPanelCollapsed(key);
|
onChange={() => {
|
||||||
if (key.length === 0) {
|
handleShortCutChange(item);
|
||||||
onAdvanceSettingCollapsedChange?.(false);
|
}}
|
||||||
return;
|
>
|
||||||
|
<div className={styles['tag-value-box']}>{text}</div>
|
||||||
|
</CheckableTag>
|
||||||
|
</Col>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
onAdvanceSettingCollapsedChange?.(true);
|
return undefined;
|
||||||
}}
|
})}
|
||||||
bordered={false}
|
</Row>
|
||||||
ghost={true}
|
|
||||||
expandIconPosition="right"
|
|
||||||
>
|
|
||||||
<Panel
|
|
||||||
header=""
|
|
||||||
// collapsible={'disabled'}
|
|
||||||
key="1"
|
|
||||||
extra={
|
|
||||||
<Space>
|
|
||||||
<Link>高级设置</Link>
|
|
||||||
</Space>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<Space>
|
|
||||||
<div style={{ color: 'rgba(0, 0, 0, 0.85)' }}>动态时间</div>
|
|
||||||
<Tooltip
|
|
||||||
title={`日期随着时间推移而更新。 若在1月1日设置查询日期为“今天”， 则第二天的查询日期为1月2日。`}
|
|
||||||
>
|
|
||||||
<QuestionCircleOutlined />
|
|
||||||
</Tooltip>
|
|
||||||
</Space>
|
|
||||||
</div>
|
|
||||||
<Radio.Group
|
|
||||||
onChange={(e: RadioChangeEvent) => {
|
|
||||||
const configType = e.target.value;
|
|
||||||
setAdvancedConfigType(configType);
|
|
||||||
updateAdvancedPanelFormData(advancedPanelFormData[configType], configType);
|
|
||||||
handleAdvancedPanelFormChange();
|
|
||||||
}}
|
|
||||||
value={advancedConfigType}
|
|
||||||
>
|
|
||||||
<Space direction="vertical">
|
|
||||||
<Radio value={DynamicAdvancedConfigType.LAST}>
|
|
||||||
<Space size={10}>
|
|
||||||
<span className={styles.advancedSettingItemText}>最近</span>
|
|
||||||
<InputNumber
|
|
||||||
style={{ width: 120 }}
|
|
||||||
placeholder="请输入数字"
|
|
||||||
min={1}
|
|
||||||
disabled={isAdvancedConfigTypeRadioDisabled(DynamicAdvancedConfigType.LAST)}
|
|
||||||
value={advancedPanelFormData[DynamicAdvancedConfigType.LAST].number}
|
|
||||||
onChange={(value: number | null) => {
|
|
||||||
updateAdvancedPanelFormData(
|
|
||||||
{ number: value },
|
|
||||||
DynamicAdvancedConfigType.LAST,
|
|
||||||
);
|
|
||||||
handleAdvancedPanelFormChange();
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Select
|
|
||||||
// defaultValue={DatePeriodType.DAY}
|
|
||||||
style={{ width: 120 }}
|
|
||||||
disabled={isAdvancedConfigTypeRadioDisabled(DynamicAdvancedConfigType.LAST)}
|
|
||||||
value={advancedPanelFormData[DynamicAdvancedConfigType.LAST].periodType}
|
|
||||||
onClick={(e) => {
|
|
||||||
// 禁止冒泡触发Radio点击后续逻辑
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
onChange={(value: string) => {
|
|
||||||
updateAdvancedPanelFormData(
|
|
||||||
{ periodType: value },
|
|
||||||
DynamicAdvancedConfigType.LAST,
|
|
||||||
);
|
|
||||||
handleAdvancedPanelFormChange();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{getDatePeriodTypeOptions(dateRangeTypeProps)}
|
|
||||||
</Select>
|
|
||||||
<Checkbox
|
|
||||||
disabled={isAdvancedConfigTypeRadioDisabled(DynamicAdvancedConfigType.LAST)}
|
|
||||||
checked={
|
|
||||||
advancedPanelFormData[DynamicAdvancedConfigType.LAST]
|
|
||||||
.includesCurrentPeriod
|
|
||||||
}
|
|
||||||
onChange={(e) => {
|
|
||||||
const isChecked = e.target.checked;
|
|
||||||
updateAdvancedPanelFormData(
|
|
||||||
{ includesCurrentPeriod: isChecked },
|
|
||||||
DynamicAdvancedConfigType.LAST,
|
|
||||||
);
|
|
||||||
handleAdvancedPanelFormChange();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
包含
|
|
||||||
{
|
|
||||||
datePeriodTypeWordingMap[
|
|
||||||
advancedPanelFormData[DynamicAdvancedConfigType.LAST].periodType
|
|
||||||
]
|
|
||||||
}
|
|
||||||
</Checkbox>
|
|
||||||
</Space>
|
|
||||||
</Radio>
|
|
||||||
<Radio value={DynamicAdvancedConfigType.HISTORY}>
|
|
||||||
<Space size={10}>
|
|
||||||
<span className={styles.advancedSettingItemText}>过去第</span>
|
|
||||||
|
|
||||||
<InputNumber
|
|
||||||
style={{ width: 120 }}
|
|
||||||
placeholder="请输入数字"
|
|
||||||
min={1}
|
|
||||||
disabled={isAdvancedConfigTypeRadioDisabled(
|
|
||||||
DynamicAdvancedConfigType.HISTORY,
|
|
||||||
)}
|
|
||||||
value={advancedPanelFormData[DynamicAdvancedConfigType.HISTORY].number}
|
|
||||||
// defaultValue={3}
|
|
||||||
onChange={(value: number | null) => {
|
|
||||||
updateAdvancedPanelFormData(
|
|
||||||
{ number: value },
|
|
||||||
DynamicAdvancedConfigType.HISTORY,
|
|
||||||
);
|
|
||||||
handleAdvancedPanelFormChange();
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Select
|
|
||||||
// defaultValue={DatePeriodType.DAY}
|
|
||||||
style={{ width: 120 }}
|
|
||||||
disabled={isAdvancedConfigTypeRadioDisabled(
|
|
||||||
DynamicAdvancedConfigType.HISTORY,
|
|
||||||
)}
|
|
||||||
value={advancedPanelFormData[DynamicAdvancedConfigType.HISTORY].periodType}
|
|
||||||
onClick={(e) => {
|
|
||||||
// 禁止冒泡触发Radio点击后续逻辑
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
onChange={(value: string) => {
|
|
||||||
updateAdvancedPanelFormData(
|
|
||||||
{ periodType: value },
|
|
||||||
DynamicAdvancedConfigType.HISTORY,
|
|
||||||
);
|
|
||||||
handleAdvancedPanelFormChange();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{getDatePeriodTypeOptions(dateRangeTypeProps)}
|
|
||||||
</Select>
|
|
||||||
</Space>
|
|
||||||
</Radio>
|
|
||||||
<Radio value={DynamicAdvancedConfigType.FROM_DATE}>
|
|
||||||
<Space size={10}>
|
|
||||||
<span className={styles.advancedSettingItemText}>自从</span>
|
|
||||||
<DatePicker
|
|
||||||
disabled={isAdvancedConfigTypeRadioDisabled(
|
|
||||||
DynamicAdvancedConfigType.FROM_DATE,
|
|
||||||
)}
|
|
||||||
value={dayjs(
|
|
||||||
advancedPanelFormData[DynamicAdvancedConfigType.FROM_DATE].date,
|
|
||||||
)}
|
|
||||||
disabledDate={(current) => {
|
|
||||||
return current && current > dayjs().endOf('day');
|
|
||||||
}}
|
|
||||||
picker={DateRangeTypeToPickerMap[dateRangeTypeProps]}
|
|
||||||
onChange={(date, dateString) => {
|
|
||||||
if (!date) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const picker = DateRangeTypeToPickerMap[dateRangeTypeProps];
|
|
||||||
|
|
||||||
if (picker === DateRangePicker.WEEK) {
|
|
||||||
date.startOf('week').format('YYYY-MM-DD');
|
|
||||||
}
|
|
||||||
if (picker === DateRangePicker.MONTH) {
|
|
||||||
date.startOf('month').format('YYYY-MM-DD');
|
|
||||||
}
|
|
||||||
updateAdvancedPanelFormData(
|
|
||||||
{ date },
|
|
||||||
DynamicAdvancedConfigType.FROM_DATE,
|
|
||||||
);
|
|
||||||
handleAdvancedPanelFormChange();
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
至此刻
|
|
||||||
</Space>
|
|
||||||
</Radio>
|
|
||||||
</Space>
|
|
||||||
</Radio.Group>
|
|
||||||
</Panel>
|
|
||||||
</Collapse>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
{!disabledAdvanceSetting && (
|
||||||
</>
|
<div className={styles.dateAdvancedSettingContent}>
|
||||||
);
|
<Collapse
|
||||||
};
|
// defaultActiveKey={['1']}
|
||||||
|
activeKey={advacedConfigPanelCollapsed}
|
||||||
|
onChange={(key: string | string[]) => {
|
||||||
|
setAdvacedConfigPanelCollapsed(key);
|
||||||
|
if (key.length === 0) {
|
||||||
|
onAdvanceSettingCollapsedChange?.(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
onAdvanceSettingCollapsedChange?.(true);
|
||||||
|
}}
|
||||||
|
bordered={false}
|
||||||
|
ghost={true}
|
||||||
|
expandIconPosition="right"
|
||||||
|
>
|
||||||
|
<Panel
|
||||||
|
header=""
|
||||||
|
// collapsible={'disabled'}
|
||||||
|
key="1"
|
||||||
|
extra={
|
||||||
|
<Space>
|
||||||
|
<Link>高级设置</Link>
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<Space>
|
||||||
|
<div style={{ color: 'rgba(0, 0, 0, 0.85)' }}>动态时间</div>
|
||||||
|
<Tooltip
|
||||||
|
title={`日期随着时间推移而更新。 若在1月1日设置查询日期为“今天”， 则第二天的查询日期为1月2日。`}
|
||||||
|
>
|
||||||
|
<QuestionCircleOutlined />
|
||||||
|
</Tooltip>
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
|
<Radio.Group
|
||||||
|
onChange={(e: RadioChangeEvent) => {
|
||||||
|
const configType = e.target.value;
|
||||||
|
setAdvancedConfigType(configType);
|
||||||
|
updateAdvancedPanelFormData(advancedPanelFormData[configType], configType);
|
||||||
|
handleAdvancedPanelFormChange();
|
||||||
|
}}
|
||||||
|
value={advancedConfigType}
|
||||||
|
>
|
||||||
|
<Space direction="vertical">
|
||||||
|
<Radio value={DynamicAdvancedConfigType.LAST}>
|
||||||
|
<Space size={10}>
|
||||||
|
<span className={styles.advancedSettingItemText}>最近</span>
|
||||||
|
<InputNumber
|
||||||
|
style={{ width: 120 }}
|
||||||
|
placeholder="请输入数字"
|
||||||
|
min={1}
|
||||||
|
disabled={isAdvancedConfigTypeRadioDisabled(
|
||||||
|
DynamicAdvancedConfigType.LAST,
|
||||||
|
)}
|
||||||
|
value={advancedPanelFormData[DynamicAdvancedConfigType.LAST].number}
|
||||||
|
onChange={(value: number | null) => {
|
||||||
|
updateAdvancedPanelFormData(
|
||||||
|
{ number: value },
|
||||||
|
DynamicAdvancedConfigType.LAST,
|
||||||
|
);
|
||||||
|
handleAdvancedPanelFormChange();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
// defaultValue={DatePeriodType.DAY}
|
||||||
|
style={{ width: 120 }}
|
||||||
|
disabled={isAdvancedConfigTypeRadioDisabled(
|
||||||
|
DynamicAdvancedConfigType.LAST,
|
||||||
|
)}
|
||||||
|
value={advancedPanelFormData[DynamicAdvancedConfigType.LAST].periodType}
|
||||||
|
onClick={(e) => {
|
||||||
|
// 禁止冒泡触发Radio点击后续逻辑
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
}}
|
||||||
|
onChange={(value: string) => {
|
||||||
|
updateAdvancedPanelFormData(
|
||||||
|
{ periodType: value },
|
||||||
|
DynamicAdvancedConfigType.LAST,
|
||||||
|
);
|
||||||
|
handleAdvancedPanelFormChange();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{getDatePeriodTypeOptions(dateRangeTypeProps)}
|
||||||
|
</Select>
|
||||||
|
<Checkbox
|
||||||
|
disabled={isAdvancedConfigTypeRadioDisabled(
|
||||||
|
DynamicAdvancedConfigType.LAST,
|
||||||
|
)}
|
||||||
|
checked={
|
||||||
|
advancedPanelFormData[DynamicAdvancedConfigType.LAST]
|
||||||
|
.includesCurrentPeriod
|
||||||
|
}
|
||||||
|
onChange={(e) => {
|
||||||
|
const isChecked = e.target.checked;
|
||||||
|
updateAdvancedPanelFormData(
|
||||||
|
{ includesCurrentPeriod: isChecked },
|
||||||
|
DynamicAdvancedConfigType.LAST,
|
||||||
|
);
|
||||||
|
handleAdvancedPanelFormChange();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
包含
|
||||||
|
{
|
||||||
|
datePeriodTypeWordingMap[
|
||||||
|
advancedPanelFormData[DynamicAdvancedConfigType.LAST].periodType
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</Checkbox>
|
||||||
|
</Space>
|
||||||
|
</Radio>
|
||||||
|
<Radio value={DynamicAdvancedConfigType.HISTORY}>
|
||||||
|
<Space size={10}>
|
||||||
|
<span className={styles.advancedSettingItemText}>过去第</span>
|
||||||
|
|
||||||
|
<InputNumber
|
||||||
|
style={{ width: 120 }}
|
||||||
|
placeholder="请输入数字"
|
||||||
|
min={1}
|
||||||
|
disabled={isAdvancedConfigTypeRadioDisabled(
|
||||||
|
DynamicAdvancedConfigType.HISTORY,
|
||||||
|
)}
|
||||||
|
value={advancedPanelFormData[DynamicAdvancedConfigType.HISTORY].number}
|
||||||
|
// defaultValue={3}
|
||||||
|
onChange={(value: number | null) => {
|
||||||
|
updateAdvancedPanelFormData(
|
||||||
|
{ number: value },
|
||||||
|
DynamicAdvancedConfigType.HISTORY,
|
||||||
|
);
|
||||||
|
handleAdvancedPanelFormChange();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
// defaultValue={DatePeriodType.DAY}
|
||||||
|
style={{ width: 120 }}
|
||||||
|
disabled={isAdvancedConfigTypeRadioDisabled(
|
||||||
|
DynamicAdvancedConfigType.HISTORY,
|
||||||
|
)}
|
||||||
|
value={
|
||||||
|
advancedPanelFormData[DynamicAdvancedConfigType.HISTORY].periodType
|
||||||
|
}
|
||||||
|
onClick={(e) => {
|
||||||
|
// 禁止冒泡触发Radio点击后续逻辑
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
}}
|
||||||
|
onChange={(value: string) => {
|
||||||
|
updateAdvancedPanelFormData(
|
||||||
|
{ periodType: value },
|
||||||
|
DynamicAdvancedConfigType.HISTORY,
|
||||||
|
);
|
||||||
|
handleAdvancedPanelFormChange();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{getDatePeriodTypeOptions(dateRangeTypeProps)}
|
||||||
|
</Select>
|
||||||
|
</Space>
|
||||||
|
</Radio>
|
||||||
|
<Radio value={DynamicAdvancedConfigType.FROM_DATE}>
|
||||||
|
<Space size={10}>
|
||||||
|
<span className={styles.advancedSettingItemText}>自从</span>
|
||||||
|
<DatePicker
|
||||||
|
disabled={isAdvancedConfigTypeRadioDisabled(
|
||||||
|
DynamicAdvancedConfigType.FROM_DATE,
|
||||||
|
)}
|
||||||
|
value={dayjs(
|
||||||
|
advancedPanelFormData[DynamicAdvancedConfigType.FROM_DATE].date,
|
||||||
|
)}
|
||||||
|
disabledDate={(current) => {
|
||||||
|
return current && current > dayjs().endOf('day');
|
||||||
|
}}
|
||||||
|
picker={DateRangeTypeToPickerMap[dateRangeTypeProps]}
|
||||||
|
onChange={(date, dateString) => {
|
||||||
|
if (!date) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const picker = DateRangeTypeToPickerMap[dateRangeTypeProps];
|
||||||
|
|
||||||
|
if (picker === DateRangePicker.WEEK) {
|
||||||
|
date.startOf('week').format('YYYY-MM-DD');
|
||||||
|
}
|
||||||
|
if (picker === DateRangePicker.MONTH) {
|
||||||
|
date.startOf('month').format('YYYY-MM-DD');
|
||||||
|
}
|
||||||
|
updateAdvancedPanelFormData(
|
||||||
|
{ date },
|
||||||
|
DynamicAdvancedConfigType.FROM_DATE,
|
||||||
|
);
|
||||||
|
handleAdvancedPanelFormChange();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
至此刻
|
||||||
|
</Space>
|
||||||
|
</Radio>
|
||||||
|
</Space>
|
||||||
|
</Radio.Group>
|
||||||
|
</Panel>
|
||||||
|
</Collapse>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
export default DynamicDate;
|
export default DynamicDate;
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect, useRef } from 'react';
|
||||||
import { InfoCircleOutlined, CalendarOutlined, QuestionCircleOutlined } from '@ant-design/icons';
|
import { InfoCircleOutlined, CalendarOutlined, QuestionCircleOutlined } from '@ant-design/icons';
|
||||||
import { Input, Tooltip, Popover, Space, Button, Select, Row, Col, Tag } from 'antd';
|
import { Input, Tooltip, Popover, Space, Button, Select, Row, Col, Tag } from 'antd';
|
||||||
import styles from './style.less';
|
import styles from './style.less';
|
||||||
@@ -36,6 +36,8 @@ const MDatePicker: React.FC<Props> = ({
|
|||||||
onDateRangeTypeChange,
|
onDateRangeTypeChange,
|
||||||
onInit,
|
onInit,
|
||||||
}: any) => {
|
}: any) => {
|
||||||
|
const dynamicDateRef = useRef<any>({});
|
||||||
|
|
||||||
const getDynamicDefaultConfig = (dateRangeType: DateRangeType) => {
|
const getDynamicDefaultConfig = (dateRangeType: DateRangeType) => {
|
||||||
const dynamicDefaultConfig = {
|
const dynamicDefaultConfig = {
|
||||||
shortCutId: 'last7Days',
|
shortCutId: 'last7Days',
|
||||||
@@ -95,7 +97,6 @@ const MDatePicker: React.FC<Props> = ({
|
|||||||
const [dateRangesParams] = useState(() => {
|
const [dateRangesParams] = useState(() => {
|
||||||
return initialValues ? generatorDateRangesParams(initialValues) : {};
|
return initialValues ? generatorDateRangesParams(initialValues) : {};
|
||||||
});
|
});
|
||||||
const [confirmBtnClickState, setConfirmBtnClickState] = useState(false);
|
|
||||||
|
|
||||||
const [visible, setVisible] = useState(false);
|
const [visible, setVisible] = useState(false);
|
||||||
|
|
||||||
@@ -153,9 +154,9 @@ const MDatePicker: React.FC<Props> = ({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
useEffect(() => {
|
// useEffect(() => {
|
||||||
onInit?.({ dateRange: currentDateRange });
|
// onInit?.({ dateRange: currentDateRange });
|
||||||
}, []);
|
// }, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setSelectedDateRangeString(getSelectedDateRangeString());
|
setSelectedDateRangeString(getSelectedDateRangeString());
|
||||||
@@ -255,12 +256,6 @@ const MDatePicker: React.FC<Props> = ({
|
|||||||
initDefaultDynamicData({ latestDateMap });
|
initDefaultDynamicData({ latestDateMap });
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (visible) {
|
|
||||||
setConfirmBtnClickState(false);
|
|
||||||
}
|
|
||||||
}, [visible]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const { dateRange } = dateRangesParams;
|
const { dateRange } = dateRangesParams;
|
||||||
setDateRangeStringShow(getDateRangeStringShow(dateRange));
|
setDateRangeStringShow(getDateRangeStringShow(dateRange));
|
||||||
@@ -310,7 +305,6 @@ const MDatePicker: React.FC<Props> = ({
|
|||||||
</Row>
|
</Row>
|
||||||
</div>
|
</div>
|
||||||
</ProCard>
|
</ProCard>
|
||||||
|
|
||||||
<ProCard
|
<ProCard
|
||||||
className={styles.dateProCard}
|
className={styles.dateProCard}
|
||||||
title={'快捷选项'}
|
title={'快捷选项'}
|
||||||
@@ -320,10 +314,10 @@ const MDatePicker: React.FC<Props> = ({
|
|||||||
// extra="2019年9月28日"
|
// extra="2019年9月28日"
|
||||||
>
|
>
|
||||||
<DynamicDate
|
<DynamicDate
|
||||||
|
ref={dynamicDateRef}
|
||||||
disabledAdvanceSetting={disabledAdvanceSetting}
|
disabledAdvanceSetting={disabledAdvanceSetting}
|
||||||
initialValues={dynamicParams}
|
initialValues={dynamicParams}
|
||||||
dateRangeTypeProps={dateRangeType}
|
dateRangeTypeProps={dateRangeType}
|
||||||
submitFormDataState={confirmBtnClickState}
|
|
||||||
onDateRangeChange={handleDateRangeChange}
|
onDateRangeChange={handleDateRangeChange}
|
||||||
onDateRangeStringAndDescChange={({ dateRangeString }) => {
|
onDateRangeStringAndDescChange={({ dateRangeString }) => {
|
||||||
setCurrentDateRange(dateRangeString);
|
setCurrentDateRange(dateRangeString);
|
||||||
@@ -333,7 +327,6 @@ const MDatePicker: React.FC<Props> = ({
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</ProCard>
|
</ProCard>
|
||||||
|
|
||||||
<ProCard
|
<ProCard
|
||||||
className={styles.dateProCard}
|
className={styles.dateProCard}
|
||||||
title={
|
title={
|
||||||
@@ -354,7 +347,6 @@ const MDatePicker: React.FC<Props> = ({
|
|||||||
onDateRangeChange={handleDateRangeChange}
|
onDateRangeChange={handleDateRangeChange}
|
||||||
/>
|
/>
|
||||||
</ProCard>
|
</ProCard>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
@@ -372,7 +364,7 @@ const MDatePicker: React.FC<Props> = ({
|
|||||||
type="primary"
|
type="primary"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (currentDateSettingType === DateSettingType.DYNAMIC) {
|
if (currentDateSettingType === DateSettingType.DYNAMIC) {
|
||||||
setConfirmBtnClickState(true);
|
dynamicDateRef.current.dynamicDateUpdateAdvancedPanelFormData();
|
||||||
}
|
}
|
||||||
setVisible(false);
|
setVisible(false);
|
||||||
}}
|
}}
|
||||||
@@ -394,7 +386,7 @@ const MDatePicker: React.FC<Props> = ({
|
|||||||
<Space direction="vertical">
|
<Space direction="vertical">
|
||||||
<Popover
|
<Popover
|
||||||
content={content}
|
content={content}
|
||||||
// destroyTooltipOnHide={true}
|
destroyTooltipOnHide={false}
|
||||||
// title="Title"
|
// title="Title"
|
||||||
open={visible}
|
open={visible}
|
||||||
trigger="click"
|
trigger="click"
|
||||||
|
|||||||
Reference in New Issue
Block a user