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

2025-04-06 03:57:56 +08:00 · 2023-08-10 16:04:12 +08:00 · 2023-08-10 16:04:12 +08:00 · 07c49bee4e
commit 07c49bee4e
parent e3b2594c57
6 changed files with 216 additions and 167 deletions
--- a/packages/data-source/src/DataSourceManager.ts
+++ b/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', () => {
--- a/packages/editor/src/components/CodeBlockEditor.vue
+++ b/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`;
    }
  });
--- a/packages/editor/src/fields/DataSourceFields.vue
+++ b/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',
--- a/packages/editor/src/fields/DataSourceMethods.vue
+++ b/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',
--- a/packages/editor/src/theme/code-block.scss
+++ b/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;
+  }
+}
--- a/packages/form/src/containers/Table.vue
+++ b/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">
-        <TMagicTable
-          v-if="model[modelName]"
-          ref="tMagicTable"
-          style="width: 100%"
-          :row-key="config.rowKey || 'id'"
-          :data="data"
-          :lastData="lastData"
-          :border="config.border"
-          :max-height="config.maxHeight"
-          :default-expand-all="true"
-          :key="updateKey"
-          @select="selectHandle"
-          @sort-change="sortChange"
-        >
-          <TMagicTableColumn v-if="config.itemExtra" :fixed="'left'" width="30" type="expand">
-            <template v-slot="scope">
-              <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>
+    <TMagicTooltip content="拖拽可排序" placement="left-start" :disabled="config.dropSort !== true">
+      <TMagicTable
+        v-if="model[modelName]"
+        ref="tMagicTable"
+        style="width: 100%"
+        :row-key="config.rowKey || 'id'"
+        :data="data"
+        :lastData="lastData"
+        :border="config.border"
+        :max-height="config.maxHeight"
+        :default-expand-all="true"
+        :key="updateKey"
+        @select="selectHandle"
+        @sort-change="sortChange"
+      >
+        <TMagicTableColumn v-if="config.itemExtra" :fixed="'left'" width="30" type="expand">
+          <template v-slot="scope">
+            <span v-html="itemExtra(config.itemExtra, scope.$index)" class="m-form-tip"></span>
          </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 && !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>
+        </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>
+    </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