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,162 +1,160 @@
 <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">
-      <TMagicTooltip content="拖拽可排序" placement="left-start" :disabled="config.dropSort !== true">
+      <TMagicTable
-        <TMagicTable
+        v-if="model[modelName]"
-          v-if="model[modelName]"
+        ref="tMagicTable"
-          ref="tMagicTable"
+        style="width: 100%"
-          style="width: 100%"
+        :row-key="config.rowKey || 'id'"
-          :row-key="config.rowKey || 'id'"
+        :data="data"
-          :data="data"
+        :lastData="lastData"
-          :lastData="lastData"
+        :border="config.border"
-          :border="config.border"
+        :max-height="config.maxHeight"
-          :max-height="config.maxHeight"
+        :default-expand-all="true"
-          :default-expand-all="true"
+        :key="updateKey"
-          :key="updateKey"
+        @select="selectHandle"
-          @select="selectHandle"
+        @sort-change="sortChange"
-          @sort-change="sortChange"
+      >
-        >
+        <TMagicTableColumn v-if="config.itemExtra" :fixed="'left'" width="30" type="expand">
-          <TMagicTableColumn v-if="config.itemExtra" :fixed="'left'" width="30" type="expand">
+          <template v-slot="scope">
-            <template v-slot="scope">
+            <span v-html="itemExtra(config.itemExtra, scope.$index)" class="m-form-tip"></span>
-              <span v-html="itemExtra(config.itemExtra, scope.$index)" class="m-form-tip"></span>
-            </template>
-          </TMagicTableColumn>
-
-          <TMagicTableColumn
-            label="操作"
-            :width="config.operateColWidth || 55"
-            align="center"
-            :fixed="config.fixed === false ? undefined : 'left'"
-          >
-            <template v-slot="scope">
-              <slot name="operateCol" :scope="scope"></slot>
-              <TMagicIcon
-                v-show="showDelete(scope.$index + 1 + pagecontext * pagesize - 1)"
-                class="m-table-delete-icon"
-                @click="removeHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
-                ><Delete
-              /></TMagicIcon>
-            </template>
-          </TMagicTableColumn>
-
-          <TMagicTableColumn v-if="sort && model[modelName] && model[modelName].length > 1" label="排序" width="60">
-            <template v-slot="scope">
-              <TMagicTooltip
-                v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== 0"
-                content="点击上移，双击置顶"
-                placement="top"
-              >
-                <TMagicButton
-                  plain
-                  size="small"
-                  type="primary"
-                  :icon="ArrowUp"
-                  :disabled="disabled"
-                  text
-                  @click="upHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
-                  @dblclick="topHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
-                ></TMagicButton>
-              </TMagicTooltip>
-              <TMagicTooltip
-                v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== model[modelName].length - 1"
-                content="点击下移，双击置底"
-                placement="top"
-              >
-                <TMagicButton
-                  plain
-                  size="small"
-                  type="primary"
-                  :icon="ArrowDown"
-                  :disabled="disabled"
-                  text
-                  @click="downHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
-                  @dblclick="bottomHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
-                ></TMagicButton>
-              </TMagicTooltip>
-            </template>
-          </TMagicTableColumn>
-
-          <TMagicTableColumn
-            v-if="selection"
-            align="center"
-            header-align="center"
-            type="selection"
-            width="45"
-          ></TMagicTableColumn>
-
-          <TMagicTableColumn width="60" label="序号" v-if="showIndex && config.showIndex">
-            <template v-slot="scope">{{ scope.$index + 1 + pagecontext * pagesize }}</template>
-          </TMagicTableColumn>
-
-          <template v-for="(column, index) in config.items">
-            <TMagicTableColumn
-              v-if="column.type !== 'hidden' && display(column.display)"
-              :prop="column.name"
-              :width="column.width"
-              :label="column.label"
-              :sortable="column.sortable"
-              :sort-orders="['ascending', 'descending']"
-              :key="column[mForm?.keyProp || '__key'] ?? index"
-              :class-name="config.dropSort === true ? 'el-table__column--dropable' : ''"
-            >
-              <template #default="scope">
-                <Container
-                  v-if="scope.$index > -1"
-                  labelWidth="0"
-                  :disabled="disabled"
-                  :prop="getProp(scope.$index)"
-                  :rules="column.rules"
-                  :config="makeConfig(column, scope.row)"
-                  :model="scope.row"
-                  :lastValues="lastData[scope.$index]"
-                  :is-compare="isCompare"
-                  :size="size"
-                  @change="$emit('change', model[modelName])"
-                  @addDiffCount="onAddDiffCount()"
-                ></Container>
-              </template>
-            </TMagicTableColumn>
           </template>
-        </TMagicTable>
+        </TMagicTableColumn>
-      </TMagicTooltip>
+
-      <slot></slot>
+        <TMagicTableColumn
-      <TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
+          label="操作"
-        >新增一行</TMagicButton
+          :width="config.operateColWidth || 55"
-      >
+          align="center"
-      &nbsp;
+          :fixed="config.fixed === false ? undefined : 'left'"
-      <TMagicButton
+        >
-        :icon="Grid"
+          <template v-slot="scope">
-        size="small"
+            <slot name="operateCol" :scope="scope"></slot>
-        type="primary"
+            <TMagicIcon
-        @click="toggleMode"
+              v-show="showDelete(scope.$index + 1 + pagecontext * pagesize - 1)"
-        v-if="enableToggleMode && !isFullscreen"
+              class="m-table-delete-icon"
-        >展开配置</TMagicButton
+              @click="removeHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
-      >
+              ><Delete
-      <TMagicButton
+            /></TMagicIcon>
-        :icon="FullScreen"
+          </template>
-        size="small"
+        </TMagicTableColumn>
-        type="primary"
+
-        @click="toggleFullscreen"
+        <TMagicTableColumn v-if="sort && model[modelName] && model[modelName].length > 1" label="排序" width="60">
-        v-if="config.enableFullscreen !== false"
+          <template v-slot="scope">
-      >
+            <TMagicTooltip
-        {{ isFullscreen ? '退出全屏' : '全屏编辑' }}
+              v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== 0"
-      </TMagicButton>
+              content="点击上移，双击置顶"
-      <TMagicUpload
+              placement="top"
-        v-if="importable"
+            >
-        style="display: inline-block"
+              <TMagicButton
-        ref="excelBtn"
+                plain
-        action="/noop"
+                size="small"
-        :disabled="disabled"
+                type="primary"
-        :on-change="excelHandler"
+                :icon="ArrowUp"
-        :auto-upload="false"
+                :disabled="disabled"
-      >
+                text
-        <TMagicButton size="small" type="success" :disabled="disabled" plain>导入EXCEL</TMagicButton> </TMagicUpload
+                @click="upHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
-      >&nbsp;
+                @dblclick="topHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
-      <TMagicButton v-if="importable" size="small" type="warning" :disabled="disabled" plain @click="clearHandler()"
+              ></TMagicButton>
-        >清空</TMagicButton
+            </TMagicTooltip>
-      >
+            <TMagicTooltip
-    </div>
+              v-if="scope.$index + 1 + pagecontext * pagesize - 1 !== model[modelName].length - 1"
+              content="点击下移，双击置底"
+              placement="top"
+            >
+              <TMagicButton
+                plain
+                size="small"
+                type="primary"
+                :icon="ArrowDown"
+                :disabled="disabled"
+                text
+                @click="downHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
+                @dblclick="bottomHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
+              ></TMagicButton>
+            </TMagicTooltip>
+          </template>
+        </TMagicTableColumn>
+
+        <TMagicTableColumn
+          v-if="selection"
+          align="center"
+          header-align="center"
+          type="selection"
+          width="45"
+        ></TMagicTableColumn>
+
+        <TMagicTableColumn width="60" label="序号" v-if="showIndex && config.showIndex">
+          <template v-slot="scope">{{ scope.$index + 1 + pagecontext * pagesize }}</template>
+        </TMagicTableColumn>
+
+        <template v-for="(column, index) in config.items">
+          <TMagicTableColumn
+            v-if="column.type !== 'hidden' && display(column.display)"
+            :prop="column.name"
+            :width="column.width"
+            :label="column.label"
+            :sortable="column.sortable"
+            :sort-orders="['ascending', 'descending']"
+            :key="column[mForm?.keyProp || '__key'] ?? index"
+            :class-name="config.dropSort === true ? 'el-table__column--dropable' : ''"
+          >
+            <template #default="scope">
+              <Container
+                v-if="scope.$index > -1"
+                labelWidth="0"
+                :disabled="disabled"
+                :prop="getProp(scope.$index)"
+                :rules="column.rules"
+                :config="makeConfig(column, scope.row)"
+                :model="scope.row"
+                :lastValues="lastData[scope.$index]"
+                :is-compare="isCompare"
+                :size="size"
+                @change="$emit('change', model[modelName])"
+                @addDiffCount="onAddDiffCount()"
+              ></Container>
+            </template>
+          </TMagicTableColumn>
+        </template>
+      </TMagicTable>
+    </TMagicTooltip>
+    <slot></slot>
+    <TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
+      >新增一行</TMagicButton
+    >
+    &nbsp;
+    <TMagicButton
+      :icon="Grid"
+      size="small"
+      type="primary"
+      @click="toggleMode"
+      v-if="enableToggleMode && config.enableToggleMode !== false && !isFullscreen"
+      >展开配置</TMagicButton
+    >
+    <TMagicButton
+      :icon="FullScreen"
+      size="small"
+      type="primary"
+      @click="toggleFullscreen"
+      v-if="config.enableFullscreen !== false"
+    >
+      {{ isFullscreen ? '退出全屏' : '全屏编辑' }}
+    </TMagicButton>
+    <TMagicUpload
+      v-if="importable"
+      style="display: inline-block"
+      ref="excelBtn"
+      action="/noop"
+      :disabled="disabled"
+      :on-change="excelHandler"
+      :auto-upload="false"
+    >
+      <TMagicButton size="small" type="success" :disabled="disabled" plain>导入EXCEL</TMagicButton> </TMagicUpload
+    >&nbsp;
+    <TMagicButton v-if="importable" size="small" type="warning" :disabled="disabled" plain @click="clearHandler()"
+      >清空</TMagicButton
+    >
 
     <div class="bottom" style="text-align: right" v-if="config.pagination">
       <TMagicPagination