feat(editor,data-source): 支持数据源方法配置执行时机

packages/data-source/src/DataSourceManager.ts

@@ -81,8 +81,24 @@ class DataSourceManager extends EventEmitter {
 
     this.data[ds.id] = ds.data;
 
+    ds.getMethods().forEach((method) => {
+      if (method.timing === 'beforeInit') {
+        if (typeof method.content === 'function') {
+          method.content({ params: {}, dataSource: ds });
+        }
+      }
+    });
+
     ds.init().then(() => {
       this.data[ds.id] = ds.data;
+
+      ds.getMethods().forEach((method) => {
+        if (method.timing === 'afterInit') {
+          if (typeof method.content === 'function') {
+            method.content({ params: {}, dataSource: ds });
+          }
+        }
+      });
     });
 
     ds.on('change', () => {

packages/editor/src/components/CodeBlockEditor.vue

@@ -1,5 +1,6 @@
 <template>
   <MFormDrawer
+    class="m-editor-code-block-editor"
     ref="fomDrawer"
     label-width="80px"
     :close-on-press-escape="false"
@@ -28,9 +29,10 @@ defineOptions({
   name: 'MEditorCodeBlockEditor',
 });
 
-defineProps<{
+const props = defineProps<{
   content: CodeBlockContent;
   disabled?: boolean;
+  isDataSource?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -40,7 +42,9 @@ const emit = defineEmits<{
 const services = inject<Services>('services');
 
 const columnWidth = computed(() => services?.uiService.get('columnWidth'));
-const size = computed(() => (columnWidth.value ? columnWidth.value.center + columnWidth.value.right : 600));
+const size = computed(() =>
+  columnWidth.value ? columnWidth.value.center + columnWidth.value.right - (props.isDataSource ? 100 : 0) : 600,
+);
 
 const codeEditorHeight = ref('600px');
 
@@ -80,16 +84,26 @@ const functionConfig = computed(() => [
     name: 'name',
   },
   {
-    text: '注释',
+    text: '描述',
     name: 'desc',
   },
+  {
+    text: '执行时机',
+    name: 'timing',
+    type: 'select',
+    options: [
+      { text: '初始化前', value: 'beforeInit' },
+      { text: '初始化后', value: 'afterInit' },
+    ],
+    display: () => props.isDataSource,
+  },
   {
     type: 'table',
     border: true,
     text: '参数',
     enableFullscreen: false,
+    enableToggleMode: false,
     name: 'params',
-    maxHeight: '300px',
     dropSort: false,
     items: [
       {
@@ -99,7 +113,7 @@ const functionConfig = computed(() => [
       },
       {
         type: 'text',
-        label: '注释',
+        label: '描述',
         name: 'extra',
       },
       services?.codeBlockService.getParamsColConfig() || defaultParamColConfig,
@@ -138,7 +152,7 @@ const fomDrawer = ref<InstanceType<typeof MFormDrawer>>();
 const openHandler = () => {
   setTimeout(() => {
     if (fomDrawer.value) {
-      const height = fomDrawer.value?.bodyHeight - 468;
+      const height = fomDrawer.value?.bodyHeight - 348 - (props.isDataSource ? 50 : 0);
       codeEditorHeight.value = `${height > 100 ? height : 600}px`;
     }
   });

packages/editor/src/fields/DataSourceFields.vue

@@ -6,15 +6,16 @@
       <TMagicButton size="small" type="primary" :disabled="disabled" plain @click="newHandler()">添加</TMagicButton>
     </div>
 
-    <MFormDialog
+    <MFormDrawer
       ref="addDialog"
+      label-width="80px"
       :title="filedTitle"
       :config="dataSourceFieldsConfig"
       :values="fieldValues"
       :parentValues="model[name]"
       :disabled="disabled"
       @submit="fieldChange"
-    ></MFormDialog>
+    ></MFormDrawer>
   </div>
 </template>
 
@@ -22,7 +23,7 @@
 import { ref } from 'vue';
 
 import { TMagicButton, tMagicMessageBox } from '@tmagic/design';
-import { FieldProps, FormConfig, FormState, MFormDialog } from '@tmagic/form';
+import { FieldProps, FormConfig, FormState, MFormDrawer } from '@tmagic/form';
 import { MagicTable } from '@tmagic/table';
 
 defineOptions({
@@ -42,7 +43,7 @@ const props = withDefaults(
 
 const emit = defineEmits(['change']);
 
-const addDialog = ref<InstanceType<typeof MFormDialog>>();
+const addDialog = ref<InstanceType<typeof MFormDrawer>>();
 const fieldValues = ref<Record<string, any>>({});
 const filedTitle = ref('');
 
@@ -77,6 +78,10 @@ const fieldColumns = [
     label: '属性描述',
     prop: 'desc',
   },
+  {
+    label: '默认值',
+    prop: 'defaultValue',
+  },
   {
     label: '操作',
     fixed: 'right',
@@ -154,6 +159,7 @@ const dataSourceFieldsConfig: FormConfig = [
   {
     name: 'description',
     text: '描述',
+    type: 'textarea',
   },
   {
     name: 'defaultValue',

packages/editor/src/fields/DataSourceMethods.vue

@@ -9,10 +9,11 @@
     </div>
 
     <CodeBlockEditor
-      ref="codeBlockEditor"
       v-if="codeConfig"
+      ref="codeBlockEditor"
       :disabled="disabled"
       :content="codeConfig"
+      :is-data-source="true"
       @submit="submitCodeHandler"
     ></CodeBlockEditor>
   </div>
@@ -53,9 +54,13 @@ const methodColumns = [
     prop: 'name',
   },
   {
-    label: '注释',
+    label: '描述',
     prop: 'desc',
   },
+  {
+    label: '执行时机',
+    prop: 'timing',
+  },
   {
     label: '参数',
     prop: 'params',

packages/editor/src/theme/code-block.scss

@@ -24,3 +24,13 @@
     display: none;
   }
 }
+
+.m-editor-code-block-editor {
+  .tmagic-design-table {
+    height: 180px;
+  }
+
+  .el-drawer__body {
+    padding: 10px 20px;
+  }
+}

packages/form/src/containers/Table.vue

@@ -1,7 +1,6 @@
 <template>
   <div ref="mTable" class="m-fields-table" :class="{ 'm-fields-table-item-extra': config.itemExtra }">
     <span v-if="config.extra" style="color: rgba(0, 0, 0, 0.45)" v-html="config.extra"></span>
-    <div class="el-form-item__content">
     <TMagicTooltip content="拖拽可排序" placement="left-start" :disabled="config.dropSort !== true">
       <TMagicTable
         v-if="model[modelName]"
@@ -130,7 +129,7 @@
       size="small"
       type="primary"
       @click="toggleMode"
-        v-if="enableToggleMode && !isFullscreen"
+      v-if="enableToggleMode && config.enableToggleMode !== false && !isFullscreen"
       >展开配置</TMagicButton
     >
     <TMagicButton
@@ -156,7 +155,6 @@
     <TMagicButton v-if="importable" size="small" type="warning" :disabled="disabled" plain @click="clearHandler()"
       >清空</TMagicButton
     >
-    </div>
 
     <div class="bottom" style="text-align: right" v-if="config.pagination">
       <TMagicPagination