@tmagic/editor 1.3.0-alpha.12 → 1.3.0-alpha.14

package/src/services/codeBlock.ts

@@ -19,7 +19,8 @@
 import { reactive } from 'vue';
 import { keys, pick } from 'lodash-es';
 
-import { CodeBlockContent, CodeBlockDSL, Id } from '@tmagic/schema';
+import type { ColumnConfig } from '@tmagic/form';
+import type { CodeBlockContent, CodeBlockDSL, Id } from '@tmagic/schema';
 
 import type { CodeState } from '@editor/type';
 import { CODE_DRAFT_STORAGE_KEY } from '@editor/type';
@@ -29,23 +30,15 @@ import BaseService from './BaseService';
 
 class CodeBlock extends BaseService {
   private state = reactive<CodeState>({
-    isShowCodeEditor: false,
     codeDsl: null,
-    id: '',
     editable: true,
     combineIds: [],
     undeletableList: [],
+    paramsColConfig: undefined,
   });
 
   constructor() {
-    super([
-      'setCodeDslById',
-      'setCodeEditorShowStatus',
-      'setEditStatus',
-      'setCombineIds',
-      'setUndeleteableList',
-      'deleteCodeDslByIds',
-    ]);
+    super(['setCodeDslById', 'setEditStatus', 'setCombineIds', 'setUndeleteableList', 'deleteCodeDslByIds']);
   }
 
   /**
@@ -86,7 +79,7 @@ class CodeBlock extends BaseService {
    * @param {CodeBlockContent} codeConfig 代码块内容配置信息
    * @returns {void}
    */
-  public async setCodeDslById(id: Id, codeConfig: CodeBlockContent): Promise<void> {
+  public async setCodeDslById(id: Id, codeConfig: Partial<CodeBlockContent>): Promise<void> {
     const codeDsl = this.getCodeDsl();
 
     if (!codeDsl) {
@@ -97,7 +90,10 @@ class CodeBlock extends BaseService {
     if (codeConfig.content) {
       // 在保存的时候转换代码内容
       const parseDSL = getConfig('parseDSL');
-      codeConfigProcessed.content = parseDSL(codeConfig.content);
+      if (typeof codeConfig.content === 'string') {
+        codeConfig.content = parseDSL<(...args: any[]) => any>(codeConfig.content);
+      }
+      codeConfigProcessed.content = codeConfig.content;
     }
 
     const existContent = codeDsl[id] || {};
@@ -120,43 +116,6 @@ class CodeBlock extends BaseService {
     return pick(codeDsl, ids) as CodeBlockDSL;
   }
 
-  /**
-   * 设置代码编辑面板展示状态
-   * @param {boolean} status 是否展示代码编辑面板
-   * @returns {void}
-   */
-  public async setCodeEditorShowStatus(status: boolean): Promise<void> {
-    this.state.isShowCodeEditor = status;
-  }
-
-  /**
-   * 获取代码编辑面板展示状态
-   * @returns {boolean} 是否展示代码编辑面板
-   */
-  public getCodeEditorShowStatus(): boolean {
-    return this.state.isShowCodeEditor;
-  }
-
-  /**
-   * 设置代码编辑面板展示状态及展示内容
-   * @param {boolean} status 是否展示代码编辑面板
-   * @param {Id} id 代码块id
-   * @returns {void}
-   */
-  public setCodeEditorContent(status: boolean, id: Id): void {
-    if (!id) return;
-    this.setId(id);
-    this.state.isShowCodeEditor = status;
-  }
-
-  /**
-   * 获取当前选中的代码块内容
-   * @returns {CodeBlockContent | null}
-   */
-  public getCurrentDsl(): CodeBlockContent | null {
-    return this.getCodeContentById(this.state.id);
-  }
-
   /**
    * 获取编辑状态
    * @returns {boolean} 是否可编辑
@@ -174,24 +133,6 @@ class CodeBlock extends BaseService {
     this.state.editable = status;
   }
 
-  /**
-   * 设置当前选中的代码块ID
-   * @param {Id} id 代码块id
-   * @returns {void}
-   */
-  public setId(id: Id): void {
-    if (!id) return;
-    this.state.id = id;
-  }
-
-  /**
-   * 获取当前选中的代码块ID
-   * @returns {Id} id 代码块id
-   */
-  public getId(): Id {
-    return this.state.id;
-  }
-
   /**
    * 设置当前选中组件已关联绑定的代码块id数组
    * @param {string[]} ids 代码块id数组
@@ -263,11 +204,19 @@ class CodeBlock extends BaseService {
     });
   }
 
+  public setParamsColConfig(config: ColumnConfig): void {
+    this.state.paramsColConfig = config;
+  }
+
+  public getParamsColConfig(): ColumnConfig | undefined {
+    return this.state.paramsColConfig;
+  }
+
   /**
    * 生成代码块唯一id
    * @returns {Id} 代码块唯一id
    */
-  public async getUniqueId(): Promise<Id> {
+  public async getUniqueId(): Promise<string> {
     const newId = `code_${Math.random().toString(10).substring(2).substring(0, 4)}`;
     // 判断是否重复
     const dsl = await this.getCodeDsl();
@@ -277,9 +226,7 @@ class CodeBlock extends BaseService {
   }
 
   public resetState() {
-    this.state.isShowCodeEditor = false;
     this.state.codeDsl = null;
-    this.state.id = '';
     this.state.editable = true;
     this.state.combineIds = [];
     this.state.undeletableList = [];

package/src/services/dataSource.ts

@@ -11,6 +11,7 @@ import BaseService from './BaseService';
 
 interface State {
   dataSources: DataSourceSchema[];
+  editable: boolean;
   configs: Record<string, FormConfig>;
 }
 
@@ -18,6 +19,7 @@ type StateKey = keyof State;
 class DataSource extends BaseService {
   private state = reactive<State>({
     dataSources: [],
+    editable: true,
     configs: {},
   });
 

package/src/theme/code-block.scss

@@ -24,125 +24,3 @@
     display: none;
   }
 }
-
-.el-dialog.is-fullscreen.code-editor-dialog {
-  overflow: hidden;
-}
-
-.code-editor-dialog {
-  .tmagic-design-card {
-    .t-card__header {
-      display: block;
-    }
-  }
-
-  .el-dialog__body,
-  .t-dialog__body {
-    height: 90%;
-    padding-top: 10px;
-  }
-  .tmagic-design-card {
-    height: 100%;
-    background: #fff;
-    .el-card__body,
-    .t-card__body {
-      height: 100%;
-      background: #fff;
-    }
-  }
-
-  .code-editor-layout {
-    height: 100%;
-    border: 1px solid #e4e7ed;
-
-    .side-tree {
-      height: 100%;
-      overflow: auto;
-      .el-tree-node__label {
-        width: 100%;
-      }
-
-      .list-container {
-        width: 100%;
-        overflow: hidden;
-        margin-left: -10px;
-        .list-item {
-          width: 100%;
-          margin: 10px 0;
-          line-height: 30px;
-          .code-name {
-            width: 100%;
-            font-size: 14px;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-          }
-        }
-      }
-    }
-  }
-
-  .code-name-wrapper {
-    display: flex;
-    align-items: center;
-    font-size: 16px;
-    margin-bottom: 10px;
-    .code-name-label {
-      margin-right: 10px;
-    }
-    .code-name-input {
-      width: 300px;
-    }
-  }
-
-  .m-editor-code-block-editor-panel-list-mode {
-    height: 100%;
-    z-index: 10;
-    background: #fff;
-    .el-card {
-      border: 0;
-    }
-  }
-
-  .m-editor-code-block-editor-panel {
-    position: absolute;
-    top: 0;
-    left: 4px;
-    width: calc(100% - 9px);
-    height: 100%;
-    z-index: 10;
-    background: #fff;
-    .el-card {
-      border: 0;
-    }
-  }
-
-  .m-editor-wrapper {
-    height: 100%;
-    &.fullScreen {
-      height: 100%;
-      width: 100%;
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 100;
-    }
-    .m-editor-container {
-      height: calc(100% - 45px);
-    }
-    .m-editor-content-bottom {
-      height: 45px;
-      width: 100%;
-      display: flex;
-      justify-content: end;
-      background: #fff;
-      position: absolute;
-      right: 20px;
-      bottom: 0;
-      > button {
-        height: 30px;
-        margin-top: 5px;
-      }
-    }
-  }
-}

package/src/theme/code-editor.scss

@@ -1,7 +1,32 @@
 .magic-code-editor {
   width: 100%;
+}
+
+.magic-code-editor-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  &.full-screen {
+    position: fixed;
+    z-index: 10000;
+    top: 0;
+    left: 0;
+  }
+
+  .magic-code-editor-content {
+    width: 100%;
+    height: 100%;
+
+    .margin {
+      margin: 0;
+    }
+  }
 
-  .margin {
-    margin: 0;
+  .magic-code-editor-full-screen-icon {
+    position: absolute;
+    top: 5px;
+    right: 0;
+    z-index: 1;
   }
 }

package/src/theme/data-source-methods.scss

@@ -0,0 +1,13 @@
+.m-editor-data-source-methods {
+  width: 100%;
+
+  .tmagic-design-table {
+    width: 100%;
+  }
+
+  .m-editor-data-source-methods-footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 15px;
+  }
+}

package/src/theme/event.scss

@@ -19,18 +19,21 @@
     box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.12);
   }
 }
-.m-fields-code-select-col {
+.m-fields-code-select-col,
+.m-fields-data-source-method-select {
   width: 100%;
-  .code-select-container {
-    display: flex;
-    align-items: center;
-    .select {
-      flex: 10 0 100px;
-    }
-    .icon {
-      flex: 1 0 20px;
-      cursor: pointer;
-      margin-right: 5px;
-    }
+}
+
+.code-select-container,
+.data-source-method-select-container {
+  display: flex;
+  align-items: center;
+  .select {
+    flex: 10 0 100px;
+  }
+  .icon {
+    flex: 1 0 20px;
+    cursor: pointer;
+    margin-right: 5px;
   }
 }

package/src/theme/theme.scss

@@ -19,5 +19,6 @@
 @import "./dep-list.scss";
 @import "./data-source.scss";
 @import "./data-source-fields.scss";
+@import "./data-source-methods.scss";
 @import "./data-source-input.scss";
 @import "./key-value.scss";

package/src/type.ts

@@ -18,7 +18,7 @@
 
 import type { Component } from 'vue';
 
-import type { FormConfig, FormItem } from '@tmagic/form';
+import type { ColumnConfig, FilterFunction, FormConfig, FormItem } from '@tmagic/form';
 import type { CodeBlockContent, CodeBlockDSL, Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import type {
@@ -45,7 +45,7 @@ export type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> |
 export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
 
 export interface InstallOptions {
-  parseDSL: (dsl: string) => MApp;
+  parseDSL: <T = any>(dsl: string) => T;
   [key: string]: any;
 }
 
@@ -334,18 +334,15 @@ export interface ScrollViewerEvent {
 }
 
 export type CodeState = {
-  /** 是否展示代码块编辑区 */
-  isShowCodeEditor: boolean;
   /** 代码块DSL数据源 */
   codeDsl: CodeBlockDSL | null;
-  /** 当前选中的代码块id */
-  id: Id;
   /** 代码块是否可编辑 */
   editable: boolean;
   /** list模式下左侧展示的代码列表 */
   combineIds: string[];
   /** 为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除） */
   undeletableList: Id[];
+  paramsColConfig?: ColumnConfig;
 };
 
 export type HookData = {
@@ -429,6 +426,8 @@ export interface EventSelectConfig {
   compActionConfig?: FormItem;
   /** 联动代码配置 */
   codeActionConfig?: FormItem;
+  /** 联动数据源配置 */
+  dataSourceActionConfig?: FormItem;
 }
 
 export enum KeyBindingCommand {
@@ -485,3 +484,19 @@ export interface KeyBindingCacheItem {
   eventType: 'keyup' | 'keydown';
   binded: boolean;
 }
+
+export interface CodeSelectColConfig {
+  type: 'code-select-col';
+  name: string;
+  labelWidth?: number | string;
+  disabled?: boolean | FilterFunction;
+  display?: boolean | FilterFunction;
+}
+
+export interface DataSourceMethodSelectConfig {
+  type: 'data-source-method-select';
+  name: string;
+  labelWidth?: number | string;
+  disabled?: boolean | FilterFunction;
+  display?: boolean | FilterFunction;
+}

package/src/utils/data-source/index.ts

@@ -17,6 +17,17 @@ const fillConfig = (config: FormConfig): FormConfig => [
       },
     ],
   },
+  {
+    type: 'panel',
+    title: '方法定义',
+    items: [
+      {
+        name: 'methods',
+        type: 'data-source-methods',
+        defaultValue: [],
+      },
+    ],
+  },
 ];
 
 export const getFormConfig = (type: string, configs: Record<string, FormConfig>): FormConfig => {

package/src/utils/use-code-block-edit.ts

@@ -0,0 +1,84 @@
+import { nextTick, ref } from 'vue';
+import { cloneDeep } from 'lodash-es';
+
+import { tMagicMessage } from '@tmagic/design';
+import type { CodeBlockContent } from '@tmagic/schema';
+
+import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
+import type { CodeBlockService } from '@editor/services/codeBlock';
+
+export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
+  const codeConfig = ref<CodeBlockContent>();
+  const codeId = ref<string>();
+  const codeBlockEditor = ref<InstanceType<typeof CodeBlockEditor>>();
+
+  // 新增代码块
+  const createCodeBlock = async () => {
+    if (!codeBlockService) {
+      tMagicMessage.error('新增代码块失败');
+      return;
+    }
+
+    codeConfig.value = {
+      name: '代码块',
+      content: `({app, params}) => {\n  // place your code here\n}`,
+      params: [],
+    };
+
+    codeId.value = await codeBlockService.getUniqueId();
+
+    await nextTick();
+
+    codeBlockEditor.value?.show();
+  };
+
+  // 编辑代码块
+  const editCode = async (id: string) => {
+    const codeBlock = await codeBlockService?.getCodeContentById(id);
+
+    if (!codeBlock) {
+      tMagicMessage.error('获取代码块内容失败');
+      return;
+    }
+
+    let codeContent = codeBlock.content;
+
+    if (typeof codeContent !== 'string') {
+      codeContent = codeContent.toString();
+    }
+
+    codeConfig.value = {
+      ...cloneDeep(codeBlock),
+      content: codeContent,
+    };
+    codeId.value = id;
+
+    await nextTick();
+
+    codeBlockEditor.value?.show();
+  };
+
+  // 删除代码块
+  const deleteCode = async (key: string) => {
+    codeBlockService?.deleteCodeDslByIds([key]);
+  };
+
+  const submitCodeBlockHandler = async (values: CodeBlockContent) => {
+    if (!codeId.value) return;
+
+    await codeBlockService?.setCodeDslById(codeId.value, values);
+
+    codeBlockEditor.value?.hide();
+  };
+
+  return {
+    codeId,
+    codeConfig,
+    codeBlockEditor,
+
+    createCodeBlock,
+    editCode,
+    deleteCode,
+    submitCodeBlockHandler,
+  };
+};

package/src/utils/use-data-source-method.ts

@@ -0,0 +1,101 @@
+import { nextTick, ref } from 'vue';
+import { cloneDeep } from 'lodash-es';
+
+import { tMagicMessage } from '@tmagic/design';
+import type { CodeBlockContent, DataSourceSchema } from '@tmagic/schema';
+
+import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
+
+import { getConfig } from './config';
+
+export const useDataSourceMethod = () => {
+  const codeConfig = ref<CodeBlockContent>();
+  const codeBlockEditor = ref<InstanceType<typeof CodeBlockEditor>>();
+
+  const dataSource = ref<DataSourceSchema>();
+  const dataSourceMethod = ref('');
+
+  return {
+    codeConfig,
+    codeBlockEditor,
+
+    createCode: async (model: DataSourceSchema) => {
+      codeConfig.value = {
+        name: '',
+        content: `({ params, dataSource, app }) => {\n  // place your code here\n}`,
+        params: [],
+      };
+
+      await nextTick();
+
+      dataSource.value = model;
+      dataSourceMethod.value = '';
+
+      codeBlockEditor.value?.show();
+    },
+
+    editCode: async (model: DataSourceSchema, methodName: string) => {
+      const method = model.methods?.find((method) => method.name === methodName);
+
+      if (!method) {
+        tMagicMessage.error('获取数据源方法失败');
+        return;
+      }
+
+      let codeContent = method.content;
+
+      if (typeof codeContent !== 'string') {
+        codeContent = codeContent.toString();
+      }
+
+      codeConfig.value = {
+        ...cloneDeep(method),
+        content: codeContent,
+      };
+
+      await nextTick();
+
+      dataSource.value = model;
+      dataSourceMethod.value = methodName;
+
+      codeBlockEditor.value?.show();
+    },
+
+    deleteCode: async (model: DataSourceSchema, methodName: string) => {
+      if (!model.methods) return;
+
+      const index = model.methods.findIndex((method) => method.name === methodName);
+
+      if (index === -1) {
+        return;
+      }
+
+      model.methods.splice(index, 1);
+    },
+
+    submitCode: (values: CodeBlockContent) => {
+      if (!dataSource.value) return;
+
+      if (!dataSource.value.methods) {
+        dataSource.value.methods = [];
+      }
+
+      if (values.content) {
+        // 在保存的时候转换代码内容
+        const parseDSL = getConfig('parseDSL');
+        if (typeof values.content === 'string') {
+          values.content = parseDSL<(...args: any[]) => any>(values.content);
+        }
+      }
+
+      if (dataSourceMethod.value) {
+        const index = dataSource.value.methods.findIndex((method) => method.name === dataSourceMethod.value);
+        dataSource.value.methods.splice(index, 1, values);
+      } else {
+        dataSource.value.methods.push(values);
+      }
+
+      codeBlockEditor.value?.hide();
+    },
+  };
+};

package/types/components/CodeBlockEditor.vue.d.ts

@@ -0,0 +1,21 @@
+import type { CodeBlockContent } from '@tmagic/schema';
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    content: CodeBlockContent;
+    disabled?: boolean | undefined;
+}>, {
+    show(): void;
+    hide(): void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    content: CodeBlockContent;
+    disabled?: boolean | undefined;
+}>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};