=
columns.splice(hoverIndex, 0, draggedItem);
});
setCurrentConfig(newCurrentConfig);
- } else {
- // const placeholder = {
- // uid: CHARTCONFIG_FIELD_PLACEHOLDER_UID,
- // colName: 'Placeholder',
- // category: 'field',
- // type: 'STRING',
- // } as any;
- // const newCurrentConfig = updateBy(currentConfig, draft => {
- // const columns = draft.rows || [];
- // if (dragIndex) {
- // columns.splice(dragIndex, 1);
- // }
- // columns.splice(hoverIndex, 0, placeholder);
- // });
- // setCurrentConfig(newCurrentConfig);
}
};
diff --git a/frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartDraggable/DateLevelFieldContainer.tsx b/frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartDraggable/DateLevelFieldContainer.tsx
index 9eb46986ae682eb01885dd64ab869f65ddcafbe4..ffc194ad6ded2bd46c2cb04803070e67df9e83a5 100644
--- a/frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartDraggable/DateLevelFieldContainer.tsx
+++ b/frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartDraggable/DateLevelFieldContainer.tsx
@@ -7,6 +7,7 @@ import { useDrag } from 'react-dnd';
import styled from 'styled-components/macro';
import { FONT_SIZE_TITLE, INFO } from 'styles/StyleConstants';
import { dateLevelFieldsProps } from '../../../../slice/types';
+import { handleDateLevelsName } from '../../utils';
function DateLevelFieldContainer({
onClearCheckedList,
@@ -43,7 +44,9 @@ function DateLevelFieldContainer({
{}
- {folderRole === ColumnRole.Hierarchy ? item?.name : item?.displayName}
+ {folderRole === ColumnRole.Hierarchy
+ ? handleDateLevelsName(item)
+ : item?.displayName}
diff --git a/frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartFieldAction/DateLevelAction/DateLevelMenuItems.tsx b/frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartFieldAction/DateLevelAction/DateLevelMenuItems.tsx
index 265faabf468581c5742632508e3866e545c4a812..bf1ce0185764074a7ccff2343fc289e9ce2a9cbf 100644
--- a/frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartFieldAction/DateLevelAction/DateLevelMenuItems.tsx
+++ b/frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartFieldAction/DateLevelAction/DateLevelMenuItems.tsx
@@ -26,6 +26,7 @@ import { FieldTemplate } from 'app/pages/ChartWorkbenchPage/components/ChartOper
import { ChartDataViewMeta } from 'app/types/ChartDataViewMeta';
import { getAllColumnInMeta } from 'app/utils/chartHelper';
import { updateBy } from 'app/utils/mutation';
+import { DATE_LEVEL_DELIMITER } from 'globalConstants';
import React, { memo, useCallback } from 'react';
import { DATE_LEVELS } from '../../../../../slice/constant';
interface DateLevelMenuItemsProps {
@@ -68,7 +69,7 @@ const DateLevelMenuItems = memo(
return onChange({
...config,
- colName: `${config.field}（${selectedConfig.colName}）`,
+ colName: selectedConfig.colName,
expression: selectedConfig.expression,
[RUNTIME_DATE_LEVEL_KEY]: null,
});
@@ -86,7 +87,7 @@ const DateLevelMenuItems = memo(
draft.field = config.colName;
draft.category =
ChartDataViewFieldCategory.DateLevelComputedField;
- draft.colName = `${draft.colName}（${selectedConfig.colName}）`;
+ draft.colName = selectedConfig.colName;
draft[RUNTIME_DATE_LEVEL_KEY] = null;
}),
);
@@ -118,14 +119,12 @@ const DateLevelMenuItems = memo(
config.category === ChartDataViewFieldCategory.Field
? config.colName
: config.field;
-
const row = getAllColumnInMeta(metas)?.find(
v => v.name === configColName,
);
const expression = `${item.expression}(${FieldTemplate(
row?.path,
)})`;
-
return (
handleChangeFn({
category: ChartDataViewFieldCategory.DateLevelComputedField,
- colName: item.name,
+ colName:
+ configColName + DATE_LEVEL_DELIMITER + item.expression,
expression,
})
}
diff --git a/frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/utils.ts b/frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/utils.ts
index a3c287e0d0e67e9f931caf91be6ccf331aabb858..97607a901e971384ccb0895dfcf5edec018c7ec8 100644
--- a/frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/utils.ts
+++ b/frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/utils.ts
@@ -22,6 +22,8 @@ import { ColumnRole } from 'app/pages/MainPage/pages/ViewPage/slice/types';
import { ChartDataSectionField } from 'app/types/ChartConfig';
import { ChartDataViewMeta } from 'app/types/ChartDataViewMeta';
import { updateBy } from 'app/utils/mutation';
+import { DATE_LEVEL_DELIMITER } from 'globalConstants';
+import i18n from 'i18next';
import { CloneValueDeep } from 'utils/object';
import { DATE_LEVELS } from '../../slice/constant';
@@ -103,7 +105,7 @@ export const buildDateLevelFields = (args: {
availableSourceFunctions.includes(item.expression)
) {
return {
- name: v.name + `（${item.name}）`,
+ name: v.name + DATE_LEVEL_DELIMITER + item.expression,
field: v.name,
type: item.type,
category: item.category,
@@ -217,3 +219,16 @@ export const findSameFieldInView = (
return false;
};
+
+export const handleDateLevelsName = (col: {
+ name: string;
+ category: string;
+}): string => {
+ if (col.category === ChartDataViewFieldCategory.DateLevelComputedField) {
+ const prefix = 'viz.workbench.dataview.';
+ const colList = col.name.split(DATE_LEVEL_DELIMITER);
+ return `${colList[0]}（${i18n.t(prefix + colList[1])}）`;
+ } else {
+ return col.name;
+ }
+};
diff --git a/frontend/src/app/pages/DashBoardPage/actions/widgetAction.ts b/frontend/src/app/pages/DashBoardPage/actions/widgetAction.ts
index 8450a4693e6a7c8d323ebc12649cba70b24423b7..4769db87d4dfd0c6a4b8961341809cf765471b2e 100644
--- a/frontend/src/app/pages/DashBoardPage/actions/widgetAction.ts
+++ b/frontend/src/app/pages/DashBoardPage/actions/widgetAction.ts
@@ -304,11 +304,10 @@ export const widgetLinkEventAction =
sourceWidgetId: widget.id,
widgetId: targetWidget.id,
option: widgetInfo,
- extraFilters: isUnSelectedAll
- ? controllerFilters || []
- : (clickFilters || [])
- .concat(controllerFilters || [])
- .concat(sourceLinkAndControllerFilterByRule || []),
+ extraFilters: controllerFilters,
+ tempFilters: isUnSelectedAll
+ ? []
+ : (clickFilters || []).concat(sourceLinkAndControllerFilterByRule),
variableParams: isUnSelectedAll
? variableParams || {}
: Object.assign(
@@ -446,34 +445,13 @@ export const widgetChartClickAction =
history: any;
}) =>
dispatch => {
- const { boardId, editing, renderMode, widget, params, history } = obj;
+ const { boardId, editing, renderMode, widget, params } = obj;
//is tableChart
tablePagingAndSortEventListener(params, p => {
dispatch(
tableChartClickAction(boardId, editing, renderMode, widget, params),
);
});
- // jump
- const jumpConfig = widget.config?.jumpConfig;
- if (jumpConfig && jumpConfig.open) {
- dispatch(
- widgetClickJumpAction({
- renderMode,
- widget,
- params,
- history,
- }),
- );
- return;
- }
- // linkage
- const linkageConfig = widget.config.linkageConfig;
- if (linkageConfig?.open && widget.relations.length) {
- dispatch(
- widgetClickLinkageAction(boardId, editing, renderMode, widget, params),
- );
- return;
- }
};
export const widgetLinkEventActionCreator =
diff --git a/frontend/src/app/pages/DashBoardPage/components/WidgetManager/index.tsx b/frontend/src/app/pages/DashBoardPage/components/WidgetManager/index.tsx
index 54b5f11a9584d32fca4c24a36c327c9ae52558ce..cd3397c970231e8f8b0faddcd05351f3fb49240e 100644
--- a/frontend/src/app/pages/DashBoardPage/components/WidgetManager/index.tsx
+++ b/frontend/src/app/pages/DashBoardPage/components/WidgetManager/index.tsx
@@ -18,6 +18,7 @@
import type { WidgetProto } from '../../types/widgetTypes';
import checkboxGroupProto from '../Widgets/ControllerWidget/config/checkboxGroup';
import dropdownListProto from '../Widgets/ControllerWidget/config/dropdownList';
+import dropDownTree from '../Widgets/ControllerWidget/config/dropDownTree';
import multiDropdownListProto from '../Widgets/ControllerWidget/config/multiDropdownList';
import radioGroupProto from '../Widgets/ControllerWidget/config/radioGroup';
import rangeTimeProto from '../Widgets/ControllerWidget/config/rangeTimeProto';
@@ -56,6 +57,7 @@ const protoList: WidgetProto[] = [
radioGroupProto,
textProto,
timeProto,
+ dropDownTree,
rangeTimeProto,
rangeValueProto,
valueProto,
diff --git a/frontend/src/app/pages/DashBoardPage/components/WidgetManager/utils/init.ts b/frontend/src/app/pages/DashBoardPage/components/WidgetManager/utils/init.ts
index f55e900c365d3584c1fc46a0664054101b660f25..cd09ceae8c03aff9f36c9eafc5844c844222e81f 100644
--- a/frontend/src/app/pages/DashBoardPage/components/WidgetManager/utils/init.ts
+++ b/frontend/src/app/pages/DashBoardPage/components/WidgetManager/utils/init.ts
@@ -456,7 +456,7 @@ export const initBorderTpl = () => {
return borderTpl;
};
-// TODO(Stephen): set width/height same as free widget?
+// TODO(Stephen): to be check if width/height setting same as free widget?
export const initAutoWidgetRect = (): RectConfig => ({
x: 0,
y: 0,
diff --git a/frontend/src/app/pages/DashBoardPage/components/WidgetMapper/WidgetMapper.tsx b/frontend/src/app/pages/DashBoardPage/components/WidgetMapper/WidgetMapper.tsx
index e1a405f25df6051c218d2ae878005a6cbf9bcb5e..6cad8b5d644f2d0ef17115cd2059217e74810137 100644
--- a/frontend/src/app/pages/DashBoardPage/components/WidgetMapper/WidgetMapper.tsx
+++ b/frontend/src/app/pages/DashBoardPage/components/WidgetMapper/WidgetMapper.tsx
@@ -84,6 +84,7 @@ export const WidgetMapper: React.FC<{
case ORIGINAL_TYPE_MAP.rangeValue:
case ORIGINAL_TYPE_MAP.value:
case ORIGINAL_TYPE_MAP.slider:
+ case ORIGINAL_TYPE_MAP.dropDownTree:
return (
void;
+ label?: React.ReactNode;
+ name?: string;
+ required?: boolean;
+ parentField?: string[];
+}
+
+export const TreeControllerForm: React.FC = memo(
+ ({ label, name, required, ...rest }) => {
+ return (
+
+
+
+ );
+ },
+);
+export const TreeSelectController: React.FC = memo(
+ ({ treeData, onChange, value }) => {
+ const t = useI18NPrefix(`viz.common.enum.controllerPlaceHolders`);
+ const handleonChange = useCallback(
+ checkedObj => {
+ onChange(checkedObj?.checked);
+ },
+ [onChange],
+ );
+
+ return (
+ {
+ return (
+ {
+ return node.title || node.key;
+ }}
+ treeData={treeData}
+ />
+ );
+ }}
+ />
+ );
+ },
+);
+const StyledTreeSelect = styled(TreeSelect)`
+ display: block;
+
+ &.ant-select .ant-select-selector {
+ background-color: transparent !important;
+ }
+`;
diff --git a/frontend/src/app/pages/DashBoardPage/components/Widgets/ControllerWidget/ControllerWidgetCore.tsx b/frontend/src/app/pages/DashBoardPage/components/Widgets/ControllerWidget/ControllerWidgetCore.tsx
index 97899932421d0198dfeb995f1d068079ee74f024..c4a467ba5cf29c496c69d15a9bb94600bd6bc0ab 100644
--- a/frontend/src/app/pages/DashBoardPage/components/Widgets/ControllerWidget/ControllerWidgetCore.tsx
+++ b/frontend/src/app/pages/DashBoardPage/components/Widgets/ControllerWidget/ControllerWidgetCore.tsx
@@ -31,6 +31,7 @@ import produce from 'immer';
import React, { memo, useCallback, useContext, useMemo } from 'react';
import styled from 'styled-components/macro';
import { isEmpty } from 'utils/object';
+import { convertToTree } from '../../../utils/widget';
import { WidgetActionContext } from '../../ActionProvider/WidgetActionProvider';
import { WidgetTitle } from '../../WidgetComponents/WidgetTitle';
import { getWidgetTitle } from '../../WidgetManager/utils/utils';
@@ -46,6 +47,7 @@ import { SelectControllerForm } from './Controller/SelectController';
import { SlideControllerForm } from './Controller/SliderController';
import { TextControllerForm } from './Controller/TextController';
import { TimeControllerForm } from './Controller/TimeController';
+import { TreeControllerForm } from './Controller/TreeController';
export const ControllerWidgetCore: React.FC<{}> = memo(() => {
const widget = useContext(WidgetContext);
@@ -72,6 +74,8 @@ export const ControllerWidgetCore: React.FC<{}> = memo(() => {
controllerValues,
valueOptions,
valueOptionType,
+ parentField,
+ treeType,
// sqlOperator,
} = useMemo(() => config as ControllerConfig, [config]);
const title = getWidgetTitle(widget.config.customConfig.props);
@@ -100,7 +104,11 @@ export const ControllerWidgetCore: React.FC<{}> = memo(() => {
}, [title]);
const optionRows = useMemo(() => {
const dataRows = dataset?.rows || [];
+
if (valueOptionType === 'common') {
+ if (parentField?.length) {
+ return convertToTree(dataRows, treeType);
+ }
return dataRows.map(ele => {
const item: RelationFilterValue = {
key: ele?.[0],
@@ -114,7 +122,7 @@ export const ControllerWidgetCore: React.FC<{}> = memo(() => {
} else {
return [];
}
- }, [dataset?.rows, valueOptionType, valueOptions]);
+ }, [dataset?.rows, valueOptionType, valueOptions, parentField, treeType]);
const onControllerChange = useCallback(() => {
form.submit();
@@ -349,6 +357,18 @@ export const ControllerWidgetCore: React.FC<{}> = memo(() => {
/>
);
+ case ControllerFacadeTypes.DropDownTree:
+ form.setFieldsValue({ value: controllerValues });
+ return (
+
+ );
+
default:
break;
}
@@ -361,6 +381,7 @@ export const ControllerWidgetCore: React.FC<{}> = memo(() => {
leftControlLabel,
config,
controllerDate,
+ parentField,
onRangeTimeChange,
onTimeChange,
]);
diff --git a/frontend/src/app/pages/DashBoardPage/components/Widgets/ControllerWidget/config/dropDownTree.ts b/frontend/src/app/pages/DashBoardPage/components/Widgets/ControllerWidget/config/dropDownTree.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cef2193c58b5ca6db74b541c71872494f0bc2a8f
--- /dev/null
+++ b/frontend/src/app/pages/DashBoardPage/components/Widgets/ControllerWidget/config/dropDownTree.ts
@@ -0,0 +1,133 @@
+/**
+ * Datart
+ *
+ * Copyright 2021
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ORIGINAL_TYPE_MAP } from 'app/pages/DashBoardPage/constants';
+import {
+ WidgetMeta,
+ WidgetProto,
+ WidgetToolkit,
+} from 'app/pages/DashBoardPage/types/widgetTypes';
+import { WHITE } from 'styles/StyleConstants';
+import { controlWidgetTpl, getControlDropDownList } from '.';
+import {
+ ImmediateQueryI18N,
+ initBackgroundTpl,
+ initBorderTpl,
+ initLoopFetchTpl,
+ initPaddingTpl,
+ initWidgetName,
+ LoopFetchI18N,
+ PaddingI18N,
+ TitleI18N,
+} from '../../../WidgetManager/utils/init';
+
+const NameI18N = {
+ zh: '下拉树',
+ en: 'Dropdown tree',
+};
+export const widgetMeta: WidgetMeta = {
+ icon: 'control-widget',
+ originalType: ORIGINAL_TYPE_MAP.dropDownTree,
+ canWrapped: true,
+ controllable: true,
+ linkable: false,
+ canFullScreen: false,
+ singleton: false,
+
+ i18ns: [
+ {
+ lang: 'zh-CN',
+ translation: {
+ desc: '',
+ widgetName: NameI18N.zh,
+ action: {},
+ title: TitleI18N.zh,
+ immediateQuery: ImmediateQueryI18N.zh,
+ background: { backgroundGroup: '背景' },
+ padding: PaddingI18N.zh,
+ loopFetch: LoopFetchI18N.zh,
+ border: { borderGroup: '边框' },
+ },
+ },
+ {
+ lang: 'en-US',
+ translation: {
+ desc: '',
+ widgetName: NameI18N.en,
+ action: {},
+ title: TitleI18N.en,
+ immediateQuery: ImmediateQueryI18N.en,
+ background: { backgroundGroup: 'Background' },
+ padding: PaddingI18N.en,
+ loopFetch: LoopFetchI18N.en,
+ border: { borderGroup: 'Border' },
+ },
+ },
+ ],
+};
+
+export const widgetToolkit: WidgetToolkit = {
+ create: opt => {
+ const widget = controlWidgetTpl(opt);
+ widget.id = widgetMeta.originalType + widget.id;
+ widget.config.originalType = widgetMeta.originalType;
+ widget.config.rect.height = 40;
+ const addProps = [
+ { ...initBackgroundTpl(WHITE) },
+ { ...initPaddingTpl() },
+ { ...initBorderTpl() },
+ { ...initLoopFetchTpl() },
+ ];
+ widget.config.customConfig.props?.forEach(ele => {
+ if (ele.key === 'titleGroup') {
+ ele.rows?.forEach(row => {
+ if (row.key === 'showTitle') {
+ row.value = true;
+ }
+ });
+ }
+ });
+ widget.config.customConfig.props =
+ widget.config.customConfig.props?.concat(addProps);
+ return widget;
+ },
+ getName(key) {
+ return initWidgetName(NameI18N, key);
+ },
+ getDropDownList(...arg) {
+ return getControlDropDownList(true);
+ },
+ edit() {},
+ save() {},
+ // lock() {},
+ // unlock() {},
+ // copy() {},
+ // paste() {},
+ // delete() {},
+ // changeTitle() {},
+ // getMeta() {},
+ // getWidgetName() {},
+ // //
+};
+
+const dropDownTree: WidgetProto = {
+ originalType: widgetMeta.originalType,
+ meta: widgetMeta,
+ toolkit: widgetToolkit,
+};
+export default dropDownTree;
diff --git a/frontend/src/app/pages/DashBoardPage/components/Widgets/DataChartWidget/DataChartWidgetCore.tsx b/frontend/src/app/pages/DashBoardPage/components/Widgets/DataChartWidget/DataChartWidgetCore.tsx
index 0d97e53aafe51adc73218790914ba6585efbd715..80e10c2767b1b3234247c52a2a57a2a55051f8ec 100644
--- a/frontend/src/app/pages/DashBoardPage/components/Widgets/DataChartWidget/DataChartWidgetCore.tsx
+++ b/frontend/src/app/pages/DashBoardPage/components/Widgets/DataChartWidget/DataChartWidgetCore.tsx
@@ -23,6 +23,7 @@ import { InteractionMouseEvent } from 'app/components/FormGenerator/constants';
import {
ChartDataSectionType,
ChartDataViewFieldCategory,
+ ChartInteractionEvent,
} from 'app/constants';
import ChartDrillContext from 'app/contexts/ChartDrillContext';
import { useCacheWidthHeight } from 'app/hooks/useCacheWidthHeight';
@@ -455,6 +456,14 @@ export const DataChartWidgetCore: React.FC<{}> = memo(() => {
if (!params) {
return;
}
+
+ if (
+ params?.interactionType === ChartInteractionEvent.PagingOrSort
+ ) {
+ onWidgetChartClick(widgetRef.current, params);
+ return;
+ }
+
handleDrillThroughEvent(
buildDrillThroughEventParams(
params,
@@ -481,7 +490,6 @@ export const DataChartWidgetCore: React.FC<{}> = memo(() => {
chartSelectionEventListener(params, p => {
changeSelectedItems(dispatch, renderMode, p, wid);
});
- onWidgetChartClick(widgetRef.current, params);
},
},
{
diff --git a/frontend/src/app/pages/DashBoardPage/constants.ts b/frontend/src/app/pages/DashBoardPage/constants.ts
index 2083ba89d0e287b78631d2410191c66e9bc25161..b2b934420823b4b4018e0114a4d99a1f03a3512e 100644
--- a/frontend/src/app/pages/DashBoardPage/constants.ts
+++ b/frontend/src/app/pages/DashBoardPage/constants.ts
@@ -98,6 +98,7 @@ export const ORIGINAL_TYPE_MAP = {
rangeValue: ControllerFacadeTypes.RangeValue,
value: ControllerFacadeTypes.Value,
slider: ControllerFacadeTypes.Slider,
+ dropDownTree: ControllerFacadeTypes.DropDownTree,
// custom: 'custom', TODO:
};
@@ -287,6 +288,10 @@ export const SQL_OPERATOR_OPTIONS_TYPES = {
FilterSqlOperator.LessThanOrEqual,
FilterSqlOperator.GreaterThanOrEqual,
],
+ [ControllerFacadeTypes.DropDownTree]: [
+ FilterSqlOperator.In,
+ FilterSqlOperator.NotIn,
+ ],
};
export const WIDGET_TITLE_ALIGN_OPTIONS = [
diff --git a/frontend/src/app/pages/DashBoardPage/pages/Board/slice/asyncActions.ts b/frontend/src/app/pages/DashBoardPage/pages/Board/slice/asyncActions.ts
index 0d8841a10558bf1bc886663a0a054e31faaf6994..5bfd1b8cd7fe4c7efc113d0ef506bd7838d19686 100644
--- a/frontend/src/app/pages/DashBoardPage/pages/Board/slice/asyncActions.ts
+++ b/frontend/src/app/pages/DashBoardPage/pages/Board/slice/asyncActions.ts
@@ -16,6 +16,7 @@
* limitations under the License.
*/
import { DownloadFileType } from 'app/constants';
+import migrateWidgetChartConfig from 'app/migration/BoardConfig/migrateWidgetChartConfig';
import { migrateWidgets } from 'app/migration/BoardConfig/migrateWidgets';
import { FilterSearchParamsWithMatch } from 'app/pages/MainPage/pages/VizPage/slice/types';
import { mainActions } from 'app/pages/MainPage/slice';
@@ -64,10 +65,9 @@ export const handleServerBoardAction =
datacharts,
serverViews,
);
- const migratedWidgets = migrateWidgets(
- serverWidgets,
- dashboard.config.type,
- );
+ let migratedWidgets = migrateWidgets(serverWidgets, dashboard.config.type);
+ migratedWidgets = migrateWidgetChartConfig(migratedWidgets);
+
const { widgetMap, wrappedDataCharts, controllerWidgets } = getWidgetMap(
migratedWidgets,
dataCharts,
diff --git a/frontend/src/app/pages/DashBoardPage/pages/Board/slice/thunk.ts b/frontend/src/app/pages/DashBoardPage/pages/Board/slice/thunk.ts
index c3a32b69778ff8b152fca655f781a47788f2b3be..a434bd9de18d6886d1ccc7812c28040539b17cdc 100644
--- a/frontend/src/app/pages/DashBoardPage/pages/Board/slice/thunk.ts
+++ b/frontend/src/app/pages/DashBoardPage/pages/Board/slice/thunk.ts
@@ -224,6 +224,7 @@ export const syncBoardWidgetChartDataAsync = createAsyncThunk<
widgetId: string;
option?: getDataOption;
extraFilters?: PendingChartDataRequestFilter[];
+ tempFilters?: PendingChartDataRequestFilter[];
variableParams?: Record;
} & {
executeToken?: any;
@@ -238,6 +239,7 @@ export const syncBoardWidgetChartDataAsync = createAsyncThunk<
widgetId,
option,
extraFilters,
+ tempFilters,
variableParams,
executeToken,
},
@@ -273,7 +275,7 @@ export const syncBoardWidgetChartDataAsync = createAsyncThunk<
)
.addVariableParams(variableParams)
.addExtraSorters(option?.sorters as any[])
- .addRuntimeFilters(extraFilters)
+ .addRuntimeFilters((extraFilters || []).concat(tempFilters || []))
.addDrillOption(drillOption)
.build();
@@ -295,6 +297,7 @@ export const syncBoardWidgetChartDataAsync = createAsyncThunk<
linkInfo: {
sourceWidgetId,
filters: extraFilters,
+ tempFilters: tempFilters,
variables: variableParams,
},
}),
@@ -494,10 +497,16 @@ export const getControllerOptions = createAsyncThunk<
const [viewId, ...columns] = config.assistViewFields;
+ const parentField = config?.parentField;
+
const executeToken = executeTokenMap?.[viewId];
const view = viewMap[viewId];
if (!view) return null;
+ if (parentField) {
+ columns.push(...parentField);
+ }
+
const requestParams = getControlOptionQueryParams({
view,
columns: columns,
diff --git a/frontend/src/app/pages/DashBoardPage/pages/Board/slice/types.ts b/frontend/src/app/pages/DashBoardPage/pages/Board/slice/types.ts
index a12692dce709f84f5848d73d839522c5cfe3940f..c1a8fa7f59aef1a360a5b1d944711d927f45e1e8 100644
--- a/frontend/src/app/pages/DashBoardPage/pages/Board/slice/types.ts
+++ b/frontend/src/app/pages/DashBoardPage/pages/Board/slice/types.ts
@@ -445,5 +445,6 @@ export type WidgetErrorType = 'request' | 'interaction';
export type WidgetLinkInfo = {
sourceWidgetId?: string;
filters?: PendingChartDataRequestFilter[];
+ tempFilters?: PendingChartDataRequestFilter[];
variables?: Record;
};
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/AutoEditor/AutoBoardEditor.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/AutoEditor/AutoBoardEditor.tsx
index f1c8ce21aa2fbc25d3c4348dc7333ada4f39d56e..46143a15173698d43165d2ff3d97fe8a0c46de74 100644
--- a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/AutoEditor/AutoBoardEditor.tsx
+++ b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/AutoEditor/AutoBoardEditor.tsx
@@ -201,7 +201,6 @@ const Wrapper = styled.div<{}>`
align-items: center;
width: 100px;
min-height: 0;
- overflow-y: auto;
.react-resizable-handle {
z-index: ${LEVEL_100};
@@ -216,6 +215,7 @@ const StyledContainer = styled(StyledBackground)<{ curWH: number[] }>`
display: flex;
flex-direction: column;
min-height: 0;
+ overflow-y: auto;
&.desktop {
flex: 1;
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/FreeEditor/WidgetOfFreeEdit.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/FreeEditor/WidgetOfFreeEdit.tsx
index a79f83ff2d56832391ff173673a6c37072e55575..e89bb3013036f8d92b49e1db364d1bcd59f43767 100644
--- a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/FreeEditor/WidgetOfFreeEdit.tsx
+++ b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/FreeEditor/WidgetOfFreeEdit.tsx
@@ -80,13 +80,16 @@ export const WidgetOfFreeEdit: React.FC<{}> = () => {
[widget.id],
);
const moveEnd = useCallback(() => {
+ if (!selectedIds.includes(widget.id)) {
+ return;
+ }
const nextRect = {
...widget.config.rect,
x: Number(curXY[0].toFixed(1)),
y: Number(curXY[1].toFixed(1)),
};
onEditFreeWidgetRect(nextRect, widget.id, false);
- }, [curXY, onEditFreeWidgetRect, widget.config.rect, widget.id]);
+ }, [curXY, onEditFreeWidgetRect, selectedIds, widget.config.rect, widget.id]);
useEffect(() => {
widgetMove.on(move);
widgetMoveEnd.on(moveEnd);
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/BoardToolBar/AddChart/AddChart.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/BoardToolBar/AddChart/AddChart.tsx
index 2c835810e1805a5f8ce8e617dd66e278148d2f03..d99bb55cf166c374e56dadbd6521f3903ba8d1fc 100644
--- a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/BoardToolBar/AddChart/AddChart.tsx
+++ b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/BoardToolBar/AddChart/AddChart.tsx
@@ -86,7 +86,7 @@ export const AddChart = () => {
/>
{widgetChartVisible && (
= () => {
// type: ControllerFacadeTypes.RadioGroup,
// disabled: false,
// },
- // {
- // name: '多选下拉树',
- // icon: '',
- // type: ControllerFacadeTypes.RadioGroup,
- // disabled: false,
- // },
+ {
+ icon: '',
+ type: ControllerFacadeTypes.DropDownTree,
+ },
];
const dateControllers: ButtonItemType[] = [
{
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSet.tsx/RadioStyle/RadioStyleForm.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSetter/RadioStyle/RadioStyleForm.tsx
similarity index 100%
rename from frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSet.tsx/RadioStyle/RadioStyleForm.tsx
rename to frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSetter/RadioStyle/RadioStyleForm.tsx
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSet.tsx/RadioStyle/RadioStyleSet.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSetter/RadioStyle/RadioStyleSet.tsx
similarity index 100%
rename from frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSet.tsx/RadioStyle/RadioStyleSet.tsx
rename to frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSetter/RadioStyle/RadioStyleSet.tsx
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSet.tsx/SliderStyle/SliderMarks.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSetter/SliderStyle/SliderMarks.tsx
similarity index 100%
rename from frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSet.tsx/SliderStyle/SliderMarks.tsx
rename to frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSetter/SliderStyle/SliderMarks.tsx
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSet.tsx/SliderStyle/SliderStep.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSetter/SliderStyle/SliderStep.tsx
similarity index 100%
rename from frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSet.tsx/SliderStyle/SliderStep.tsx
rename to frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSetter/SliderStyle/SliderStep.tsx
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSet.tsx/SqlOperator/SqlOperatorForm.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSetter/SqlOperator/SqlOperatorForm.tsx
similarity index 100%
rename from frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSet.tsx/SqlOperator/SqlOperatorForm.tsx
rename to frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSetter/SqlOperator/SqlOperatorForm.tsx
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSet.tsx/SqlOperator/SqlOperatorSet.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSetter/SqlOperator/SqlOperatorSet.tsx
similarity index 100%
rename from frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSet.tsx/SqlOperator/SqlOperatorSet.tsx
rename to frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSetter/SqlOperator/SqlOperatorSet.tsx
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSet.tsx/SqlOperator/index.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSetter/SqlOperator/index.tsx
similarity index 100%
rename from frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSet.tsx/SqlOperator/index.tsx
rename to frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/OtherSetter/SqlOperator/index.tsx
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/TimeSetter/TimeSetter.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/TimeSetter/TimeSetter.tsx
index 193b8444506dadec13e1408ae26bbeabfdf40c09..13fd57f4b42530a72440ec42b9028628631f151b 100644
--- a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/TimeSetter/TimeSetter.tsx
+++ b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/TimeSetter/TimeSetter.tsx
@@ -199,6 +199,7 @@ export const TimeSetter: React.FC<{
);
}, []);
+
return (
{() => {
@@ -247,6 +248,7 @@ export const TimeSetter: React.FC<{
validateTrigger={['onChange', 'onBlur']}
shouldUpdate
rules={[{ required: true, validator: RangeTimeValidator }]}
+ style={{ marginBottom: 0 }}
>
{renderROE(StartTimeROEName, onStartRelativeChange)}
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/TreeSetter/TreeSetter.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/TreeSetter/TreeSetter.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..671d9c168c8ae85f0362773dcbb52b0f83df0012
--- /dev/null
+++ b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/TreeSetter/TreeSetter.tsx
@@ -0,0 +1,59 @@
+/**
+ * Datart
+ *
+ * Copyright 2021
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Select } from 'antd';
+import useI18NPrefix from 'app/hooks/useI18NPrefix';
+import styled from 'styled-components/macro';
+
+export interface TreeSetterProps {
+ onChange?: (value: string | string[]) => void;
+ value?: string;
+ style: object;
+ mode?: 'multiple' | 'tags';
+ viewFieldList;
+}
+
+function TreeSetter({
+ viewFieldList,
+ value: val,
+ style,
+ mode,
+ onChange,
+}: TreeSetterProps) {
+ const tc = useI18NPrefix(`viz.control`);
+ return (
+
+
+
+ );
+}
+
+const TreeSetterWrapper = styled.div``;
+
+export default TreeSetter;
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/TreeSetter/index.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/TreeSetter/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d87775837583b2a0cfe490d55ef86b6542d3237f
--- /dev/null
+++ b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/TreeSetter/index.tsx
@@ -0,0 +1,20 @@
+/**
+ * Datart
+ *
+ * Copyright 2021
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import TreeSetter from './TreeSetter';
+
+export default TreeSetter;
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/TreeTypeSetter/TreeTypeSetter.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/TreeTypeSetter/TreeTypeSetter.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5c7eecb04a95ae9e7835453025f5497f92d3ef5c
--- /dev/null
+++ b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/TreeTypeSetter/TreeTypeSetter.tsx
@@ -0,0 +1,73 @@
+/**
+ * Datart
+ *
+ * Copyright 2021
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { Form, FormInstance, Radio, Tooltip } from 'antd';
+import useI18NPrefix from 'app/hooks/useI18NPrefix';
+import { ControllerWidgetContent } from 'app/pages/DashBoardPage/pages/Board/slice/types';
+import { useCallback } from 'react';
+import { ControllerConfig } from '../../../types';
+
+export interface TreeTypeSetterProps {
+ form: FormInstance | undefined;
+}
+
+function TreeTypeSetter({ form }: TreeTypeSetterProps) {
+ const t = useI18NPrefix('viz.control');
+
+ const getControllerConfig = useCallback(() => {
+ return form?.getFieldValue('config') as ControllerConfig;
+ }, [form]);
+
+ const handleChangeFn = useCallback(() => {
+ form?.setFieldsValue({
+ config: {
+ ...getControllerConfig,
+ parentField: undefined,
+ controllerValues: [],
+ valueOptions: [],
+ assistViewFields: [],
+ },
+ });
+ }, [form, getControllerConfig]);
+
+ return (
+
+
+
+ {t('treeControl') + ' '}
+
+
+
+
+
+
+ {t('treeSelect') + ' '}
+
+
+
+
+
+
+ );
+}
+
+export default TreeTypeSetter;
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/TreeTypeSetter/index.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/TreeTypeSetter/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cff87028dbfd435c0916bafb0b07739b9aefc960
--- /dev/null
+++ b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/TreeTypeSetter/index.tsx
@@ -0,0 +1,20 @@
+/**
+ * Datart
+ *
+ * Copyright 2021
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import TreeTypeSetter from './TreeTypeSetter';
+
+export default TreeTypeSetter;
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/ValuesOptionsSetter/CustomOptions.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/ValuesOptionsSetter/CustomOptions.tsx
index 9cae2291677445cdcc513bf6f27d35577319390e..9eadbefc8d72ad895f6fc756bb23c4bafeff7369 100644
--- a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/ValuesOptionsSetter/CustomOptions.tsx
+++ b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/ValuesOptionsSetter/CustomOptions.tsx
@@ -37,6 +37,7 @@ export const CustomOptions: React.FC = memo(
setRows(rows);
const config = getControllerConfig();
const valueOptions = [...rows.slice()];
+
form?.setFieldsValue({
config: {
...config,
@@ -56,7 +57,12 @@ export const CustomOptions: React.FC = memo(
(row: RelationFilterValue) => {
const newRows = [...rows];
const targetIndex = newRows.findIndex(r => r.index === row.index);
- newRows.splice(targetIndex, 1, row);
+
+ if (row.childIndex !== undefined) {
+ newRows[targetIndex]?.children?.splice(row.childIndex, 1, row);
+ } else {
+ newRows.splice(targetIndex, 1, row);
+ }
onChangeFilterOptions(newRows);
},
[onChangeFilterOptions, rows],
@@ -132,6 +138,7 @@ export const CustomOptions: React.FC = memo(
if (!col.editable) {
return col;
}
+
return {
...col,
onCell: (record: RelationFilterValue) => ({
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/ValuesOptionsSetter/ValuesOptionsSetter.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/ValuesOptionsSetter/ValuesOptionsSetter.tsx
index 7a013198a5f93185398a16a688d0633c12e04953..74f95d601b491e631a1276eb73ad31785ea465ad 100644
--- a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/ValuesOptionsSetter/ValuesOptionsSetter.tsx
+++ b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/ValuesOptionsSetter/ValuesOptionsSetter.tsx
@@ -16,7 +16,15 @@
* limitations under the License.
*/
-import { Form, FormInstance, Radio, Select, Space } from 'antd';
+import {
+ Form,
+ FormInstance,
+ Radio,
+ Select,
+ Space,
+ Tree,
+ TreeSelect,
+} from 'antd';
import { CascaderOptionType } from 'antd/lib/cascader';
import { ControllerFacadeTypes } from 'app/constants';
import useI18NPrefix from 'app/hooks/useI18NPrefix';
@@ -45,7 +53,9 @@ import {
} from 'react';
import styled from 'styled-components/macro';
import { request2 } from 'utils/request';
+import { convertToTree } from '../../../../../../../utils/widget';
import { ControllerConfig } from '../../../types';
+import TreeSetter from '../TreeSetter';
import { AssistViewFields } from './AssistViewFields';
import { CustomOptions } from './CustomOptions';
@@ -69,6 +79,10 @@ const ValuesOptionsSetter: FC<{
const [labelKey, setLabelKey] = useState();
const [viewList, setViewList] = useState([]);
+ const isTree = useMemo(() => {
+ return controllerType === ControllerFacadeTypes.DropDownTree;
+ }, [controllerType]);
+
const getViewList = useCallback(async orgId => {
const { data } = await request2(`/views?orgId=${orgId}`);
const views = data.map(item => {
@@ -84,8 +98,19 @@ const ValuesOptionsSetter: FC<{
return form?.getFieldValue('config') as ControllerConfig;
}, [form]);
+ const getParentField = useCallback(() => {
+ return form?.getFieldValue('config')?.parentField as string[];
+ }, [form]);
+
+ const getTreeType = useCallback(() => {
+ return form?.getFieldValue('config')?.treeType as string;
+ }, [form]);
+
const isMultiple = useMemo(() => {
- return controllerType === ControllerFacadeTypes.MultiDropdownList;
+ return (
+ controllerType === ControllerFacadeTypes.MultiDropdownList ||
+ controllerType === ControllerFacadeTypes.DropDownTree
+ );
}, [controllerType]);
const convertToList = useCallback(collection => {
@@ -136,14 +161,15 @@ const ValuesOptionsSetter: FC<{
const onTargetKeyChange = useCallback(
nextTargetKeys => {
- setTargetKeys(nextTargetKeys);
- const nextControllerOpt: ControllerConfig = {
- ...getControllerConfig(),
- controllerValues: nextTargetKeys,
- };
+ const config: ControllerConfig = getControllerConfig();
+
form?.setFieldsValue({
- config: nextControllerOpt,
+ config: {
+ ...config,
+ controllerValues: nextTargetKeys,
+ },
});
+ setTargetKeys(nextTargetKeys);
},
[form, getControllerConfig],
);
@@ -161,17 +187,51 @@ const ValuesOptionsSetter: FC<{
[],
);
+ const getViewData = useCallback(
+ async (value: string[], type?) => {
+ const { option: options, dataView } = await getViewOption(value[0]);
+ setLabelOptions(options);
+
+ if (type !== 'view') {
+ const [viewId, ...columns] = value;
+ const parentField = getParentField();
+ const treeType = getTreeType();
+
+ if (parentField) {
+ columns.push(...parentField);
+ }
+ const dataset = await fetchNewDataset(viewId, columns, dataView);
+
+ setOptionValues(
+ parentField?.length > 0
+ ? convertToTree(dataset?.rows, treeType)
+ : convertToList(dataset?.rows),
+ );
+ }
+ },
+ [
+ convertToList,
+ fetchNewDataset,
+ getParentField,
+ getViewOption,
+ getTreeType,
+ ],
+ );
+
const onViewFieldChange = useCallback(
async (value: string[], type?) => {
setOptionValues([]);
setTargetKeys([]);
setLabelOptions([]);
+ setLabelKey(undefined);
+ const config = getControllerConfig();
if (!value || !value?.[0]) {
form?.setFieldsValue({
config: {
- ...getControllerConfig(),
+ ...config,
assistViewFields: [],
controllerValues: [],
+ parentField: undefined,
},
});
return;
@@ -179,22 +239,15 @@ const ValuesOptionsSetter: FC<{
form?.setFieldsValue({
config: {
- ...getControllerConfig(),
+ ...config,
assistViewFields: value,
controllerValues: [],
+ parentField: undefined,
},
});
-
- const { option: options, dataView } = await getViewOption(value[0]);
- setLabelOptions(options);
-
- if (type !== 'view') {
- const [viewId, ...columns] = value;
- const dataset = await fetchNewDataset(viewId, columns, dataView);
- setOptionValues(convertToList(dataset?.rows));
- }
+ getViewData(value, type);
},
- [convertToList, fetchNewDataset, form, getControllerConfig, getViewOption],
+ [form, getControllerConfig, getViewData],
);
const onLabelChange = useCallback(
@@ -212,19 +265,27 @@ const ValuesOptionsSetter: FC<{
form?.setFieldsValue({
config: nextControllerOpt,
});
- onViewFieldChange(nextAssistViewFields);
+ getViewData(nextAssistViewFields);
},
- [form, getControllerConfig, onViewFieldChange],
+ [form, getControllerConfig, getViewData],
);
const onInitOptions = useCallback(
- async (value: string[]) => {
+ async (value: string[], parentField?: string[]) => {
const [viewId, ...columns] = value;
const { option: options, dataView } = await getViewOption(viewId);
+ if (parentField) {
+ columns.push(...parentField);
+ }
const dataset = await fetchNewDataset(viewId, columns, dataView);
const config: ControllerConfig = getControllerConfig();
+ const treeType = getTreeType();
- setOptionValues(convertToList(dataset?.rows));
+ setOptionValues(
+ parentField
+ ? convertToTree(dataset?.rows, treeType)
+ : convertToList(dataset?.rows),
+ );
setLabelOptions(options);
if (config.valueOptionType === 'common') {
@@ -234,7 +295,13 @@ const ValuesOptionsSetter: FC<{
}
}
},
- [convertToList, fetchNewDataset, getControllerConfig, getViewOption],
+ [
+ convertToList,
+ fetchNewDataset,
+ getControllerConfig,
+ getViewOption,
+ getTreeType,
+ ],
);
const updateOptions = useCallback(() => {
@@ -246,8 +313,9 @@ const ValuesOptionsSetter: FC<{
}
const assistViewFields = config?.assistViewFields;
+ const parentField = config?.parentField;
if (assistViewFields && assistViewFields[0] && assistViewFields[1]) {
- onInitOptions(assistViewFields);
+ onInitOptions(assistViewFields, parentField);
}
}, [form, getControllerConfig, onInitOptions]);
@@ -255,6 +323,20 @@ const ValuesOptionsSetter: FC<{
return getControllerConfig()?.valueOptionType as ValueOptionType;
}, [getControllerConfig]);
+ const onParentFieldChange = useCallback(
+ (val: string | string[]) => {
+ const config: ControllerConfig = getControllerConfig();
+ form?.setFieldsValue({
+ config: {
+ ...config,
+ parentField: Array.isArray(val) ? val : [val],
+ },
+ });
+ getViewData(config.assistViewFields || []);
+ },
+ [getControllerConfig, getViewData, form],
+ );
+
useEffect(() => {
setTimeout(() => {
updateOptions();
@@ -300,51 +382,106 @@ const ValuesOptionsSetter: FC<{
style={{ margin: '6px 0' }}
/>
+ {isTree && (
+
+
+
+ )}
+
{getOptionType() === 'common' && (
-
-
+ {item.label}
+
+ ))}
+