From ef04fd31f0a348070c5e42b5c7c5caa724066b21 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 2 Jul 2024 13:02:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E4=BC=98=E5=8C=96=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=BA=90=E5=AD=97=E6=AE=B5=E9=80=89=E6=8B=A9=E5=99=A8?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DataSourceFieldSelect/FieldSelect.vue     | 91 +++++++++++++------
 1 file changed, 61 insertions(+), 30 deletions(-)

diff --git a/packages/editor/src/fields/DataSourceFieldSelect/FieldSelect.vue b/packages/editor/src/fields/DataSourceFieldSelect/FieldSelect.vue
index 85898f61..f8886dbc 100644
--- a/packages/editor/src/fields/DataSourceFieldSelect/FieldSelect.vue
+++ b/packages/editor/src/fields/DataSourceFieldSelect/FieldSelect.vue
@@ -1,44 +1,60 @@
 <template>
   <div class="m-editor-data-source-field-select">
-    <TMagicSelect
-      :model-value="selectDataSourceId"
-      clearable
-      filterable
-      :size="size"
-      :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,
-          }
-        "
+    <template v-if="checkStrictly">
+      <TMagicSelect
+        :model-value="selectDataSourceId"
+        clearable
+        filterable
+        :size="size"
+        :disabled="disabled"
+        @change="dsChangeHandler"
       >
-      </component>
-    </TMagicSelect>
+        <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>
+      </TMagicSelect>
+
+      <TMagicCascader
+        :model-value="selectFieldsId"
+        clearable
+        filterable
+        :size="size"
+        :disabled="disabled"
+        :options="fieldsOptions"
+        :props="{
+          checkStrictly,
+        }"
+        @change="fieldChangeHandler"
+      ></TMagicCascader>
+    </template>
 
     <TMagicCascader
-      :model-value="selectFieldsId"
+      v-else
       clearable
       filterable
-      :size="size"
+      :model-value="modelValue"
       :disabled="disabled"
-      :options="fieldsOptions"
+      :size="size"
+      :options="cascaderOptions"
       :props="{
         checkStrictly,
       }"
-      @change="fieldChangeHandler"
+      @change="onChangeHandler"
     ></TMagicCascader>
 
     <TMagicButton
@@ -132,6 +148,16 @@ const fieldsOptions = computed(() => {
   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) => {
   modelValue.value = [v];
   emit('change', modelValue.value);
@@ -142,6 +168,11 @@ const fieldChangeHandler = (v: string[] = []) => {
   emit('change', modelValue.value);
 };
 
+const onChangeHandler = (v: string[] = []) => {
+  modelValue.value = v;
+  emit('change', v);
+};
+
 const hasDataSourceSidePanel = computed(() =>
   (services?.uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
 );