From 75b0d9cdf3a41348bf6e00c721bf145c0a150810 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 14 Sep 2023 20:33:11 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E6=96=B0=E5=A2=9E=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=BA=90=E6=97=B6=EF=BC=8C=E8=AE=BE=E7=BD=AE=E5=88=9D?=
 =?UTF-8?q?=E5=A7=8B=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/editorProps.ts            |  8 +----
 .../data-source/DataSourceConfigPanel.vue     | 31 +++----------------
 .../data-source/DataSourceListPanel.vue       | 17 +++++++---
 3 files changed, 18 insertions(+), 38 deletions(-)

diff --git a/packages/editor/src/editorProps.ts b/packages/editor/src/editorProps.ts
index 342fd28d..9d2cf1a5 100644
--- a/packages/editor/src/editorProps.ts
+++ b/packages/editor/src/editorProps.ts
@@ -93,12 +93,6 @@ export default {
     default: () => ({}),
   },
 
-  /** 组件的属性配置表单的dsl */
-  datasourceConfigs: {
-    type: Object as PropType<Record<string, FormConfig>>,
-    default: () => ({}),
-  },
-
   /** 添加数据源时的默认值 */
   datasourceValues: {
     type: Object as PropType<Record<string, Partial<DataSourceSchema>>>,
@@ -106,7 +100,7 @@ export default {
   },
 
   /** 数据源的属性配置表单的dsl */
-  dataScourceConfigs: {
+  datasourceConfigs: {
     type: Object as PropType<Record<string, FormConfig>>,
     default: () => ({}),
   },
diff --git a/packages/editor/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue b/packages/editor/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue
index 9c729e18..c4e69aea 100644
--- a/packages/editor/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue
+++ b/packages/editor/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue
@@ -8,7 +8,6 @@
     :config="dataSourceConfig"
     :values="initValues"
     :disabled="disabled"
-    @change="changeHandler"
     @submit="submitHandler"
     @error="errorHandler"
   ></MFormDrawer>
@@ -16,10 +15,10 @@
 
 <script setup lang="ts">
 import { computed, inject, ref, watchEffect } from 'vue';
-import { cloneDeep, mergeWith } from 'lodash-es';
 
 import { tMagicMessage } from '@tmagic/design';
-import { MFormDrawer } from '@tmagic/form';
+import { FormConfig, MFormDrawer } from '@tmagic/form';
+import { DataSourceSchema } from '@tmagic/schema';
 
 import type { Services } from '@editor/type';
 
@@ -33,42 +32,22 @@ const props = defineProps<{
   disabled: boolean;
 }>();
 
-const type = ref('base');
-
 const emit = defineEmits(['submit']);
 
 const services = inject<Services>('services');
 
 const size = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get('columnWidth').left || 0));
 
-const dataSourceConfig = computed(() => services?.dataSourceService.getFormConfig(type.value) || []);
-
 const fomDrawer = ref<InstanceType<typeof MFormDrawer>>();
 
-const initValues = ref({});
+const initValues = ref<Partial<DataSourceSchema>>({});
+const dataSourceConfig = ref<FormConfig>([]);
 
 watchEffect(() => {
   initValues.value = props.values;
-  type.value = props.values.type || 'base';
+  dataSourceConfig.value = services?.dataSourceService.getFormConfig(initValues.value.type) || [];
 });
 
-const changeHandler = (value: Record<string, any>) => {
-  if (value.type === type.value) {
-    return;
-  }
-  type.value = value.type || 'base';
-
-  initValues.value = mergeWith(
-    cloneDeep(value),
-    services?.dataSourceService.getFormValue(type.value) || {},
-    (objValue, srcValue) => {
-      if (Array.isArray(srcValue)) {
-        return srcValue;
-      }
-    },
-  );
-};
-
 const submitHandler = (values: any) => {
   emit('submit', values);
 };
diff --git a/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue b/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
index 1d5b90a2..0430041d 100644
--- a/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
+++ b/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
@@ -35,8 +35,9 @@
   </TMagicScrollbar>
 </template>
 
-<script setup lang="ts" name="MEditorDataSourceListPanel">
+<script setup lang="ts">
 import { computed, inject, ref } from 'vue';
+import { mergeWith } from 'lodash-es';
 
 import { TMagicButton, TMagicPopover, TMagicScrollbar } from '@tmagic/design';
 import type { DataSourceSchema } from '@tmagic/schema';
@@ -71,12 +72,18 @@ const datasourceTypeList = computed(() =>
 const addHandler = (type: string) => {
   if (!editDialog.value) return;
 
-  dataSourceValues.value = {
-    type,
-  };
-
   const datasourceType = datasourceTypeList.value.find((item) => item.type === type);
 
+  dataSourceValues.value = mergeWith(
+    { type, title: datasourceType?.text },
+    dataSourceService?.getFormValue(type) || {},
+    (objValue, srcValue) => {
+      if (Array.isArray(srcValue)) {
+        return srcValue;
+      }
+    },
+  );
+
   dialogTitle.value = `新增${datasourceType?.text || ''}`;
 
   editDialog.value.show();