Skip to content

Commit c6bb026

Browse files
SoarBlueSkySoarBlueSky
authored
Merge pull request #2126 from scottsut/dev
refactor: Tree select improvement
2 parents 71708f5 + 74587ec commit c6bb026

File tree

14 files changed

+134
-98
lines changed

14 files changed

+134
-98
lines changed

‎frontend/src/app/pages/DashBoardPage/components/Widgets/ControllerWidget/Controller/TreeController.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export interface TreeControllerFormProps {
2929
label?: React.ReactNode;
3030
name?: string;
3131
required?: boolean;
32-
parentField?: string[];
32+
parentFields?: string[];
3333
}
3434

3535
export const TreeControllerForm: React.FC<TreeControllerFormProps> = memo(

‎frontend/src/app/pages/DashBoardPage/components/Widgets/ControllerWidget/ControllerWidgetCore.tsx‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,8 @@ export const ControllerWidgetCore: React.FC<{}> = memo(() => {
7474
controllerValues,
7575
valueOptions,
7676
valueOptionType,
77-
parentField,
78-
treeType,
77+
parentFields,
78+
buildingMethod,
7979
// sqlOperator,
8080
} = useMemo(() => config as ControllerConfig, [config]);
8181
const title = getWidgetTitle(widget.config.customConfig.props);
@@ -106,8 +106,8 @@ export const ControllerWidgetCore: React.FC<{}> = memo(() => {
106106
const dataRows = dataset?.rows || [];
107107

108108
if (valueOptionType === 'common') {
109-
if (parentField?.length) {
110-
return convertToTree(dataRows, treeType);
109+
if (parentFields?.length) {
110+
return convertToTree(dataRows, buildingMethod);
111111
}
112112
return dataRows.map(ele => {
113113
const item: RelationFilterValue = {
@@ -122,7 +122,13 @@ export const ControllerWidgetCore: React.FC<{}> = memo(() => {
122122
} else {
123123
return [];
124124
}
125-
}, [dataset?.rows, valueOptionType, valueOptions, parentField, treeType]);
125+
}, [
126+
dataset?.rows,
127+
valueOptionType,
128+
valueOptions,
129+
parentFields,
130+
buildingMethod,
131+
]);
126132

127133
const onControllerChange = useCallback(() => {
128134
form.submit();
@@ -361,7 +367,7 @@ export const ControllerWidgetCore: React.FC<{}> = memo(() => {
361367
form.setFieldsValue({ value: controllerValues });
362368
return (
363369
<TreeControllerForm
364-
parentField={parentField}
370+
parentFields={parentFields}
365371
onChange={onControllerChange}
366372
treeData={optionRows}
367373
name={'value'}
@@ -381,7 +387,7 @@ export const ControllerWidgetCore: React.FC<{}> = memo(() => {
381387
leftControlLabel,
382388
config,
383389
controllerDate,
384-
parentField,
390+
parentFields,
385391
onRangeTimeChange,
386392
onTimeChange,
387393
]);

‎frontend/src/app/pages/DashBoardPage/pages/Board/slice/thunk.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -497,14 +497,14 @@ export const getControllerOptions = createAsyncThunk<
497497

498498
const [viewId, ...columns] = config.assistViewFields;
499499

500-
const parentField = config?.parentField;
500+
const parentFields = config?.parentFields;
501501

502502
const executeToken = executeTokenMap?.[viewId];
503503

504504
const view = viewMap[viewId];
505505
if (!view) return null;
506-
if (parentField) {
507-
columns.push(...parentField);
506+
if (parentFields) {
507+
columns.push(...parentFields);
508508
}
509509

510510
const requestParams = getControlOptionQueryParams({

‎frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/TreeSetter/TreeSetter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ function TreeSetter({
4343
mode={mode}
4444
optionFilterProp={'label'}
4545
onChange={onChange}
46-
placeholder={tc('parentFieldId')}
46+
placeholder={mode ? tc('parentFieldsHierarchy') : tc('parentFields')}
4747
showSearch
4848
allowClear
4949
options={viewFieldList}

‎frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/TreeTypeSetter/TreeTypeSetter.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ function TreeTypeSetter({ form }: TreeTypeSetterProps) {
3737
form?.setFieldsValue({
3838
config: {
3939
...getControllerConfig,
40-
parentField: undefined,
40+
parentFields: undefined,
4141
controllerValues: [],
4242
valueOptions: [],
4343
assistViewFields: [],
@@ -48,20 +48,20 @@ function TreeTypeSetter({ form }: TreeTypeSetterProps) {
4848
return (
4949
<Form.Item
5050
shouldUpdate
51-
label={t('treeSelectType')}
52-
name={['config', 'treeType']}
51+
label={t('treeBuildingMethod')}
52+
name={['config', 'buildingMethod']}
5353
>
5454
<Radio.Group onChange={handleChangeFn}>
55-
<Radio.Button value="treeControl">
56-
{t('treeControl') + ' '}
57-
<Tooltip title={t('treeControlTip')}>
55+
<Radio.Button value="byParent">
56+
{t('byParent') + ' '}
57+
<Tooltip title={t('byParentTip')}>
5858
<QuestionCircleOutlined />
5959
</Tooltip>
6060
</Radio.Button>
6161

62-
<Radio.Button value="treeSelect">
63-
{t('treeSelect') + ' '}
64-
<Tooltip title={t('treeSelectTip')}>
62+
<Radio.Button value="byHierarchy">
63+
{t('byHierarchy') + ' '}
64+
<Tooltip title={t('byHierarchyTip')}>
6565
<QuestionCircleOutlined />
6666
</Tooltip>
6767
</Radio.Button>

‎frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/ValuesOptionsSetter/AssistViewFields.tsx‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,20 @@ import styled from 'styled-components/macro';
2323
export interface AssistViewFieldsProps {
2424
onChange?: (value: string[], type) => void;
2525
value?: string[];
26+
isHierarchyTree?: boolean;
2627
style: object;
2728
viewList;
2829
viewFieldList;
2930
}
3031
export const AssistViewFields: React.FC<AssistViewFieldsProps> = memo(
31-
({ onChange, value: propsValue, style, viewList, viewFieldList }) => {
32+
({
33+
onChange,
34+
value: propsValue,
35+
isHierarchyTree,
36+
style,
37+
viewList,
38+
viewFieldList,
39+
}) => {
3240
const tc = useI18NPrefix(`viz.control`);
3341
const [val, setVal] = useState<string[]>([]);
3442

@@ -56,17 +64,19 @@ export const AssistViewFields: React.FC<AssistViewFieldsProps> = memo(
5664
}}
5765
options={viewList}
5866
></Select>
59-
<Select
60-
optionFilterProp={'label'}
61-
onChange={value => {
62-
handleOnChange([val?.[0] || '', value], 'viewField');
63-
}}
64-
placeholder={tc('selectViewField')}
65-
showSearch
66-
value={val?.[1]}
67-
loading={!viewFieldList}
68-
options={viewFieldList}
69-
></Select>
67+
{!isHierarchyTree && (
68+
<Select
69+
optionFilterProp={'label'}
70+
onChange={value => {
71+
handleOnChange([val?.[0] || '', value], 'viewField');
72+
}}
73+
placeholder={tc('selectViewField')}
74+
showSearch
75+
value={val?.[1]}
76+
loading={!viewFieldList}
77+
options={viewFieldList}
78+
></Select>
79+
)}
7080
</StyleSpace>
7181
);
7282
},

‎frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/ValuesOptionsSetter/ValuesOptionsSetter.tsx‎

Lines changed: 55 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -98,12 +98,12 @@ const ValuesOptionsSetter: FC<{
9898
return form?.getFieldValue('config') as ControllerConfig;
9999
}, [form]);
100100

101-
const getParentField = useCallback(() => {
102-
return form?.getFieldValue('config')?.parentField as string[];
101+
const getParentFields = useCallback(() => {
102+
return form?.getFieldValue('config')?.parentFields as string[];
103103
}, [form]);
104104

105-
const getTreeType = useCallback(() => {
106-
return form?.getFieldValue('config')?.treeType as string;
105+
const getTreeBuildingMethod = useCallback(() => {
106+
return form?.getFieldValue('config')?.buildingMethod as string;
107107
}, [form]);
108108

109109
const isMultiple = useMemo(() => {
@@ -194,27 +194,27 @@ const ValuesOptionsSetter: FC<{
194194

195195
if (type !== 'view') {
196196
const [viewId, ...columns] = value;
197-
const parentField = getParentField();
198-
const treeType = getTreeType();
197+
const parentFields = getParentFields();
198+
const buildingMethod = getTreeBuildingMethod();
199199

200-
if (parentField) {
201-
columns.push(...parentField);
200+
if (parentFields) {
201+
columns.push(...parentFields);
202202
}
203203
const dataset = await fetchNewDataset(viewId, columns, dataView);
204204

205205
setOptionValues(
206-
parentField?.length > 0
207-
? convertToTree(dataset?.rows, treeType)
206+
parentFields?.length > 0
207+
? convertToTree(dataset?.rows, buildingMethod)
208208
: convertToList(dataset?.rows),
209209
);
210210
}
211211
},
212212
[
213213
convertToList,
214214
fetchNewDataset,
215-
getParentField,
215+
getParentFields,
216216
getViewOption,
217-
getTreeType,
217+
getTreeBuildingMethod,
218218
],
219219
);
220220

@@ -231,7 +231,7 @@ const ValuesOptionsSetter: FC<{
231231
...config,
232232
assistViewFields: [],
233233
controllerValues: [],
234-
parentField: undefined,
234+
parentFields: undefined,
235235
},
236236
});
237237
return;
@@ -242,7 +242,7 @@ const ValuesOptionsSetter: FC<{
242242
...config,
243243
assistViewFields: value,
244244
controllerValues: [],
245-
parentField: undefined,
245+
parentFields: undefined,
246246
},
247247
});
248248
getViewData(value, type);
@@ -271,19 +271,19 @@ const ValuesOptionsSetter: FC<{
271271
);
272272

273273
const onInitOptions = useCallback(
274-
async (value: string[], parentField?: string[]) => {
274+
async (value: string[], parentFields?: string[]) => {
275275
const [viewId, ...columns] = value;
276276
const { option: options, dataView } = await getViewOption(viewId);
277-
if (parentField) {
278-
columns.push(...parentField);
277+
if (parentFields) {
278+
columns.push(...parentFields);
279279
}
280280
const dataset = await fetchNewDataset(viewId, columns, dataView);
281281
const config: ControllerConfig = getControllerConfig();
282-
const treeType = getTreeType();
282+
const buildingMethod = getTreeBuildingMethod();
283283

284284
setOptionValues(
285-
parentField
286-
? convertToTree(dataset?.rows, treeType)
285+
parentFields
286+
? convertToTree(dataset?.rows, buildingMethod)
287287
: convertToList(dataset?.rows),
288288
);
289289
setLabelOptions(options);
@@ -300,7 +300,7 @@ const ValuesOptionsSetter: FC<{
300300
fetchNewDataset,
301301
getControllerConfig,
302302
getViewOption,
303-
getTreeType,
303+
getTreeBuildingMethod,
304304
],
305305
);
306306

@@ -313,28 +313,40 @@ const ValuesOptionsSetter: FC<{
313313
}
314314

315315
const assistViewFields = config?.assistViewFields;
316-
const parentField = config?.parentField;
316+
const parentFields = config?.parentFields;
317317
if (assistViewFields && assistViewFields[0] && assistViewFields[1]) {
318-
onInitOptions(assistViewFields, parentField);
318+
onInitOptions(assistViewFields, parentFields);
319319
}
320320
}, [form, getControllerConfig, onInitOptions]);
321321

322322
const getOptionType = useCallback(() => {
323323
return getControllerConfig()?.valueOptionType as ValueOptionType;
324324
}, [getControllerConfig]);
325325

326-
const onParentFieldChange = useCallback(
326+
const onParentFieldsChange = useCallback(
327327
(val: string | string[]) => {
328-
const config: ControllerConfig = getControllerConfig();
329-
form?.setFieldsValue({
330-
config: {
331-
...config,
332-
parentField: Array.isArray(val) ? val : [val],
333-
},
334-
});
335-
getViewData(config.assistViewFields || []);
328+
let mergedConfig: ControllerConfig = {
329+
...getControllerConfig(),
330+
parentFields: Array.isArray(val) ? val : [val],
331+
};
332+
333+
if (getTreeBuildingMethod() === 'byHierarchy') {
334+
mergedConfig.assistViewFields = mergedConfig.assistViewFields!.slice(
335+
0,
336+
1,
337+
);
338+
339+
if ((val as string[]).length) {
340+
mergedConfig.assistViewFields = mergedConfig.assistViewFields.concat(
341+
(val as string[])[0],
342+
);
343+
}
344+
}
345+
346+
form?.setFieldsValue({ config: mergedConfig });
347+
getViewData(mergedConfig.assistViewFields || []);
336348
},
337-
[getControllerConfig, getViewData, form],
349+
[getControllerConfig, getTreeBuildingMethod, getViewData, form],
338350
);
339351

340352
useEffect(() => {
@@ -380,16 +392,21 @@ const ValuesOptionsSetter: FC<{
380392
onChange={onViewFieldChange}
381393
viewList={viewList}
382394
viewFieldList={labelOptions}
395+
isHierarchyTree={
396+
isTree && getTreeBuildingMethod() === 'byHierarchy'
397+
}
383398
style={{ margin: '6px 0' }}
384399
/>
385400
</Form.Item>
386401
{isTree && (
387-
<Form.Item name={['config', 'parentField']} noStyle>
402+
<Form.Item name={['config', 'parentFields']} noStyle>
388403
<TreeSetter
389404
mode={
390-
getTreeType() === 'treeSelect' ? 'multiple' : undefined
405+
getTreeBuildingMethod() === 'byHierarchy'
406+
? 'multiple'
407+
: undefined
391408
}
392-
onChange={onParentFieldChange}
409+
onChange={onParentFieldsChange}
393410
viewFieldList={labelOptions}
394411
style={{ margin: '6px 0' }}
395412
/>
@@ -398,7 +415,7 @@ const ValuesOptionsSetter: FC<{
398415

399416
{getOptionType() === 'common' && (
400417
<Space direction="vertical" style={{ width: '100%' }}>
401-
{!(isTree && getTreeType() === 'treeSelect') && (
418+
{!(isTree && getTreeBuildingMethod() === 'byHierarchy') && (
402419
<Select
403420
showSearch
404421
placeholder={tc('optionLabelField')}
@@ -418,7 +435,7 @@ const ValuesOptionsSetter: FC<{
418435
</Select>
419436
)}
420437
<Form.Item name={['config', 'controllerValues']}>
421-
{getParentField()?.length ? (
438+
{getParentFields()?.length ? (
422439
<TreeSelect
423440
placeholder={tc('selectDefaultValue')}
424441
multiple

‎frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/types.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@ export interface ControllerConfig {
4141
canChangeSqlOperator?: boolean; // 是否显示 sqlOperator 切换
4242
assistViewFields?: string[]; //辅助添加view字段
4343
controllerDate?: ControllerDate; //存储时间
44-
parentField?: string[]; //父节点字段
45-
treeType?: 'treeControl' | 'treeSelect'; //树控制器类型
44+
parentFields?: string[]; //父节点字段
45+
buildingMethod?: 'byParent' | 'byHierarchy'; //树控制器类型
4646

4747
minValue?: number; // slider min
4848
maxValue?: number; // slider max

0 commit comments

Comments
 (0)