JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-06-19 12:09:25 +08:00
Code Issues Projects Releases Wiki Activity

feat(editor): 优化数据源字段选择器交互

Browse Source
This commit is contained in:
roymondchen 2024-07-02 13:02:21 +08:00
parent 882d222800
commit ef04fd31f0
1 changed files with 61 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
packages/editor/src/fields/DataSourceFieldSelect/FieldSelect.vue
View File

@ -1,44 +1,60 @@
<template> <template>
<div class="m-editor-data-source-field-select"> <div class="m-editor-data-source-field-select">
<TMagicSelect <template v-if="checkStrictly">
:model-value="selectDataSourceId" <TMagicSelect
clearable :model-value="selectDataSourceId"
filterable clearable
:size="size" filterable
:disabled="disabled" :size="size"
@change="dsChangeHandler" :disabled="disabled"
> @change="dsChangeHandler"
<component
v-for="option in dataSourcesOptions"
class="tmagic-design-option"
:key="option.value"
:is="optionComponent?.component || 'el-option'"
v-bind="
optionComponent?.props({
label: option.text,
value: option.value,
disabled: option.disabled,
}) || {
label: option.text,
value: option.value,
disabled: option.disabled,
}
"
> >
</component> <component
</TMagicSelect> v-for="option in dataSourcesOptions"
class="tmagic-design-option"
:key="option.value"
:is="optionComponent?.component || 'el-option'"
v-bind="
optionComponent?.props({
label: option.text,
value: option.value,
disabled: option.disabled,
}) || {
label: option.text,
value: option.value,
disabled: option.disabled,
}
"
>
</component>
</TMagicSelect>
<TMagicCascader
:model-value="selectFieldsId"
clearable
filterable
:size="size"
:disabled="disabled"
:options="fieldsOptions"
:props="{
checkStrictly,
}"
@change="fieldChangeHandler"
></TMagicCascader>
</template>
<TMagicCascader <TMagicCascader
:model-value="selectFieldsId" v-else
clearable clearable
filterable filterable
:size="size" :model-value="modelValue"
:disabled="disabled" :disabled="disabled"
:options="fieldsOptions" :size="size"
:options="cascaderOptions"
:props="{ :props="{
checkStrictly, checkStrictly,
}" }"
@change="fieldChangeHandler" @change="onChangeHandler"
></TMagicCascader> ></TMagicCascader>
<TMagicButton <TMagicButton
@ -132,6 +148,16 @@ const fieldsOptions = computed(() => {
return getCascaderOptionsFromFields(ds.fields, props.dataSourceFieldType); return getCascaderOptionsFromFields(ds.fields, props.dataSourceFieldType);
}); });
const cascaderOptions = computed(() => {
const options =
dataSources.value?.map((ds) => ({
label: ds.title || ds.id,
value: valueIsKey.value ? ds.id : `${DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${ds.id}`,
children: getCascaderOptionsFromFields(ds.fields, props.dataSourceFieldType),
})) || [];
return options.filter((option) => option.children.length);
});
const dsChangeHandler = (v: string) => { const dsChangeHandler = (v: string) => {
modelValue.value = [v]; modelValue.value = [v];
emit('change', modelValue.value); emit('change', modelValue.value);
@ -142,6 +168,11 @@ const fieldChangeHandler = (v: string[] = []) => {
emit('change', modelValue.value); emit('change', modelValue.value);
}; };
const onChangeHandler = (v: string[] = []) => {
modelValue.value = v;
emit('change', v);
};
const hasDataSourceSidePanel = computed(() => const hasDataSourceSidePanel = computed(() =>
(services?.uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE), (services?.uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
); );