fix(editor): 绑定关系组件增加option来源的默认逻辑

Tencent · Sep 22, 2022 · ddd22ff · ddd22ff
1 parent 8b9ac82
commit ddd22ff
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 19 deletions.
diff --git a/packages/editor/src/fields/CodeSelect.vue b/packages/editor/src/fields/CodeSelect.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="m-fields-code-select">
     <m-fields-select
-      :config="config.selectConfig"
+      :config="selectConfig"
       :model="model"
       :prop="prop"
       :name="name"
@@ -20,8 +20,9 @@
 </template>
 
 <script lang="ts" setup>
-import { defineEmits, defineProps, inject } from 'vue';
+import { computed, defineEmits, defineProps, inject } from 'vue';
 import { View } from '@element-plus/icons-vue';
+import { map } from 'lodash-es';
 
 import { SelectConfig } from '@tmagic/form';
 
@@ -41,6 +42,27 @@ const props = defineProps<{
   size: string;
 }>();
 
+const selectConfig = computed(() => {
+  const defaultConfig = {
+    multiple: true,
+    options: async () => {
+      const codeDsl = await services?.codeBlockService.getCodeDsl();
+      if (codeDsl) {
+        return map(codeDsl, (value, key) => ({
+          text: `${value.name}（${key}）`,
+          label: `${value.name}（${key}）`,
+          value: key,
+        }));
+      }
+      return [];
+    },
+  };
+  return {
+    ...defaultConfig,
+    ...props.config.selectConfig,
+  };
+});
+
 const changeHandler = async (value: any) => {
   // 记录组件与代码块的绑定关系
   const { id = '' } = services?.editorService.get('node') || {};

diff --git a/packages/editor/src/utils/props.ts b/packages/editor/src/utils/props.ts
@@ -16,11 +16,8 @@
  * limitations under the License.
  */
 
-import { map } from 'lodash-es';
-
 import { FormConfig, FormState } from '@tmagic/form';
 
-import codeBlockService from '../services/codeBlock';
 import editorService from '../services/editor';
 import eventsService from '../services/events';
 
@@ -231,20 +228,6 @@ export const fillConfig = (config: FormConfig = []) => [
             text: 'created',
             type: 'code-select',
             labelWidth: '100px',
-            selectConfig: {
-              multiple: true,
-              options: async () => {
-                const codeDsl = await codeBlockService.getCodeDsl();
-                if (codeDsl) {
-                  return map(codeDsl, (value, key) => ({
-                    text: `${value.name}（${key}）`,
-                    label: `${value.name}（${key}）`,
-                    value: key,
-                  }));
-                }
-                return [];
-              },
-            },
           },
         ],
       },