@tmagic/editor 1.3.0-alpha.9 → 1.3.0-beta.1

package/src/fields/DataSourceInput.vue

@@ -16,7 +16,6 @@
     "
     style="width: 100%"
     @blur="blurHandler"
-    @change="changeHandler"
     @input="inputHandler"
     @select="selectHandler"
   >
@@ -48,36 +47,34 @@
 import { computed, inject, nextTick, ref, watch } from 'vue';
 import { Coin } from '@element-plus/icons-vue';
 
-import { FieldSize, getConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
+import { getConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
+import type { FieldProps } from '@tmagic/form';
 import type { DataSchema, DataSourceSchema } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
 import type { Services } from '@editor/type';
+import { getDisplayField } from '@editor/utils/data-source';
 
 defineOptions({
   name: 'MEditorDataSourceInput',
 });
 
 const props = withDefaults(
-  defineProps<{
-    config: {
+  defineProps<
+    FieldProps<{
       type: 'data-source-input';
       name: string;
       text: string;
-    };
-    model: Record<string, any>;
-    name: string;
-    prop: string;
-    disabled: boolean;
-    lastValues?: Record<string, any>;
-    size?: FieldSize;
-  }>(),
+    }>
+  >(),
   {
     disabled: false,
   },
 );
 
-const emit = defineEmits<(e: 'change', value: string) => void>();
+const emit = defineEmits<{
+  change: [value: string];
+}>();
 
 const { dataSourceService } = inject<Services>('services') || {};
 
@@ -90,49 +87,7 @@ const input = computed<HTMLInputElement>(() => autocomplete.value?.inputRef?.inp
 const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
 
 const setDisplayState = () => {
-  displayState.value = [];
-
-  const matches = state.value.matchAll(/\$\{([\s\S]+?)\}/g);
-  let index = 0;
-  for (const match of matches) {
-    if (typeof match.index === 'undefined') break;
-
-    displayState.value.push({
-      type: 'text',
-      value: state.value.substring(index, match.index),
-    });
-
-    let dsText = '';
-    let ds: DataSourceSchema | undefined;
-    let fields: DataSchema[] | undefined;
-
-    match[1].split('.').forEach((item, index) => {
-      if (index === 0) {
-        ds = dataSources.value.find((ds) => ds.id === item);
-        dsText += ds?.title || item;
-        fields = ds?.fields;
-        return;
-      }
-
-      const field = fields?.find((field) => field.name === item);
-      fields = field?.fields;
-      dsText += `.${field?.title || item}`;
-    });
-
-    displayState.value.push({
-      type: 'var',
-      value: dsText,
-    });
-
-    index = match.index + match[0].length;
-  }
-
-  if (index < state.value.length) {
-    displayState.value.push({
-      type: 'text',
-      value: state.value.substring(index),
-    });
-  }
+  displayState.value = getDisplayField(dataSources.value, state.value);
 };
 
 watch(
@@ -155,6 +110,8 @@ const blurHandler = () => {
   isFocused.value = false;
 
   setDisplayState();
+
+  emit('change', state.value);
 };
 
 const changeHandler = (v: string) => {
@@ -246,17 +203,21 @@ const fieldQuerySearch = (
   let result: DataSchema[] = [];
 
   const dsKey = queryString.substring(leftAngleIndex + 1, dotIndex);
+
   // 可能是xx.xx.xx，存在链式调用
   const keys = dsKey.split('.');
+
   // 最前的是数据源id
-  const ds = dataSources.value.find((ds) => ds.id === keys.shift());
+  const dsId = keys.shift();
+  const ds = dataSources.value.find((ds) => ds.id === dsId);
   if (!ds) {
+    cb([]);
     return;
   }
 
   let fields = ds.fields || [];
 
-  // 后面这些事字段
+  // 后面这些是字段
   let key = keys.shift();
   while (key) {
     for (const field of fields) {
@@ -354,5 +315,7 @@ const selectHandler = async ({ value, type }: { value: string; type: 'dataSource
     newSelectionStart = dotIndex + suggestText.length + 1;
   }
   input.value?.setSelectionRange(newSelectionStart, newSelectionStart);
+
+  changeHandler(state.value);
 };
 </script>

package/src/fields/DataSourceMethodSelect.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="m-fields-data-source-method-select">
+    <div class="data-source-method-select-container">
+      <m-form-container
+        class="select"
+        :config="cascaderConfig"
+        :model="model"
+        @change="onChangeHandler"
+      ></m-form-container>
+      <Icon v-if="model[name]" class="icon" :icon="!disabled ? Edit : View" @click="editCodeHandler"></Icon>
+    </div>
+
+    <CodeParams
+      v-if="paramsConfig.length"
+      name="params"
+      :model="model"
+      :size="size"
+      :disabled="disabled"
+      :params-config="paramsConfig"
+      @change="onChangeHandler"
+    ></CodeParams>
+
+    <CodeBlockEditor
+      ref="codeBlockEditor"
+      v-if="codeConfig"
+      :disabled="disabled"
+      :content="codeConfig"
+      @submit="submitCodeBlockHandler"
+    ></CodeBlockEditor>
+  </div>
+</template>
+
+<script lang="ts" setup name="">
+import { computed, inject, ref } from 'vue';
+import { Edit, View } from '@element-plus/icons-vue';
+
+import { createValues, FieldProps } from '@tmagic/form';
+import type { CodeBlockContent, Id } from '@tmagic/schema';
+
+import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
+import CodeParams from '@editor/components/CodeParams.vue';
+import Icon from '@editor/components/Icon.vue';
+import { useDataSourceMethod } from '@editor/hooks/use-data-source-method';
+import type { CodeParamStatement, DataSourceMethodSelectConfig, Services } from '@editor/type';
+
+defineOptions({
+  name: 'MEditorDataSourceMethodSelect',
+});
+
+const services = inject<Services>('services');
+const emit = defineEmits(['change']);
+
+const props = withDefaults(defineProps<FieldProps<DataSourceMethodSelectConfig>>(), {
+  disabled: false,
+});
+
+const dataSources = computed(() => services?.dataSourceService.get('dataSources'));
+
+const getParamItemsConfig = ([dataSourceId, medthodName]: [Id, string] = ['', '']): CodeParamStatement[] => {
+  if (!dataSourceId) return [];
+
+  const paramStatements = dataSources.value
+    ?.find((item) => item.id === dataSourceId)
+    ?.methods?.find((item) => item.name === medthodName)?.params;
+
+  if (!paramStatements) return [];
+
+  return paramStatements.map((paramState: CodeParamStatement) => ({
+    labelWidth: '100px',
+    text: paramState.name,
+    ...paramState,
+  }));
+};
+
+const paramsConfig = ref<CodeParamStatement[]>(getParamItemsConfig(props.model.dataSourceMethod));
+
+const setParamsConfig = (dataSourceMethod: [Id, string], formState: any = {}) => {
+  // 通过下拉框选择的codeId变化后修正model的值，避免写入其他codeId的params
+  paramsConfig.value = dataSourceMethod ? getParamItemsConfig(dataSourceMethod) : [];
+
+  if (paramsConfig.value.length) {
+    props.model.params = createValues(formState, paramsConfig.value, {}, props.model.params);
+  } else {
+    props.model.params = {};
+  }
+};
+
+const cascaderConfig = {
+  type: 'cascader',
+  text: '数据源方法',
+  name: props.name,
+  labelWidth: '80px',
+  options: () =>
+    dataSources.value
+      ?.filter((ds) => ds.methods?.length)
+      ?.map((ds) => ({
+        label: ds.title || ds.id,
+        value: ds.id,
+        children: ds.methods?.map((method) => ({
+          label: method.name,
+          value: method.name,
+        })),
+      })) || [],
+  onChange: (formState: any, dataSourceMethod: [Id, string]) => {
+    setParamsConfig(dataSourceMethod, formState);
+
+    return dataSourceMethod;
+  },
+};
+
+/**
+ * 参数值修改更新
+ */
+const onChangeHandler = (value: any) => {
+  props.model.params = value.params;
+  emit('change', props.model);
+};
+
+const { codeBlockEditor, codeConfig, editCode, submitCode } = useDataSourceMethod();
+
+const editCodeHandler = () => {
+  const [id, name] = props.model[props.name];
+
+  const dataSource = services?.dataSourceService.getDataSourceById(id);
+
+  if (!dataSource) return;
+
+  editCode(dataSource, name);
+
+  setParamsConfig([id, name]);
+};
+
+const submitCodeBlockHandler = (value: CodeBlockContent) => {
+  submitCode(value);
+};
+</script>

package/src/fields/DataSourceMethods.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="m-editor-data-source-methods">
+    <MagicTable :data="model[name]" :columns="methodColumns"></MagicTable>
+
+    <div class="m-editor-data-source-methods-footer">
+      <TMagicButton size="small" type="primary" :disabled="disabled" plain @click="createCodeHandler"
+        >添加</TMagicButton
+      >
+    </div>
+
+    <CodeBlockEditor
+      v-if="codeConfig"
+      ref="codeBlockEditor"
+      :disabled="disabled"
+      :content="codeConfig"
+      :is-data-source="true"
+      :data-source-type="model.type"
+      @submit="submitCodeHandler"
+    ></CodeBlockEditor>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { TMagicButton } from '@tmagic/design';
+import type { FieldProps } from '@tmagic/form';
+import type { CodeBlockContent } from '@tmagic/schema';
+import { MagicTable } from '@tmagic/table';
+
+import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
+import { useDataSourceMethod } from '@editor/hooks/use-data-source-method';
+import type { CodeParamStatement } from '@editor/type';
+
+defineOptions({
+  name: 'MEditorDataSourceMethods',
+});
+
+const props = withDefaults(
+  defineProps<
+    FieldProps<{
+      type: 'data-source-methods';
+    }>
+  >(),
+  {
+    disabled: false,
+  },
+);
+
+const emit = defineEmits(['change']);
+
+const { codeConfig, codeBlockEditor, createCode, editCode, deleteCode, submitCode } = useDataSourceMethod();
+
+const methodColumns = [
+  {
+    label: '名称',
+    prop: 'name',
+  },
+  {
+    label: '描述',
+    prop: 'desc',
+  },
+  {
+    label: '执行时机',
+    prop: 'timing',
+  },
+  {
+    label: '参数',
+    prop: 'params',
+    formatter: (params: CodeParamStatement[]) => params.map((item) => item.name).join(', '),
+  },
+  {
+    label: '操作',
+    fixed: 'right',
+    actions: [
+      {
+        text: '编辑',
+        handler: (row: CodeBlockContent) => {
+          editCode(props.model, row.name);
+          emit('change', props.model[props.name]);
+        },
+      },
+      {
+        text: '删除',
+        buttonType: 'danger',
+        handler: (row: CodeBlockContent) => {
+          deleteCode(props.model, row.name);
+          emit('change', props.model[props.name]);
+        },
+      },
+    ],
+  },
+];
+
+const createCodeHandler = () => {
+  createCode(props.model);
+
+  emit('change', props.model[props.name]);
+};
+
+const submitCodeHandler = (values: CodeBlockContent) => {
+  submitCode(values);
+
+  emit('change', props.model[props.name]);
+};
+</script>

package/src/fields/DataSourceSelect.vue

@@ -14,8 +14,7 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { FieldSize } from '@tmagic/design';
-import { MSelect, SelectConfig } from '@tmagic/form';
+import { FieldProps, MSelect, SelectConfig } from '@tmagic/form';
 
 import { Services } from '../type';
 
@@ -26,21 +25,15 @@ defineOptions({
 const emit = defineEmits(['change']);
 
 const props = withDefaults(
-  defineProps<{
-    config: {
+  defineProps<
+    FieldProps<{
       type: 'data-source-select';
       name: string;
       text: string;
       placeholder: string;
       dataSourceType?: string;
-    };
-    model: Record<string, any>;
-    name: string;
-    prop: string;
-    disabled: boolean;
-    lastValues?: Record<string, any>;
-    size?: FieldSize;
-  }>(),
+    }>
+  >(),
   {
     disabled: false,
   },

package/src/fields/EventSelect.vue

@@ -3,18 +3,23 @@
     <m-form-table
       v-if="isOldVersion"
       ref="eventForm"
-      :size="props.size"
-      :model="model"
       name="events"
+      :size="size"
+      :disabled="disabled"
+      :model="model"
       :config="tableConfig"
       @change="onChangeHandler"
     ></m-form-table>
 
     <div v-else class="fullWidth">
-      <TMagicButton class="create-button" type="primary" size="small" @click="addEvent()">添加事件</TMagicButton>
+      <TMagicButton class="create-button" type="primary" :size="size" :disabled="disabled" @click="addEvent()"
+        >添加事件</TMagicButton
+      >
       <m-form-panel
         v-for="(cardItem, index) in model[name]"
         :key="index"
+        :disabled="disabled"
+        :size="size"
         :config="actionsConfig"
         :model="cardItem"
         @change="onChangeHandler"
@@ -24,9 +29,18 @@
             class="fullWidth"
             :config="eventNameConfig"
             :model="cardItem"
+            :disabled="disabled"
+            :size="size"
             @change="onChangeHandler"
           ></m-form-container>
-          <TMagicButton style="color: #f56c6c" text :icon="Delete" @click="removeEvent(index)"></TMagicButton>
+          <TMagicButton
+            style="color: #f56c6c"
+            text
+            :icon="Delete"
+            :disabled="disabled"
+            :size="size"
+            @click="removeEvent(index)"
+          ></TMagicButton>
         </template>
       </m-form-panel>
     </div>
@@ -39,22 +53,16 @@ import { Delete } from '@element-plus/icons-vue';
 import { has } from 'lodash-es';
 
 import { TMagicButton } from '@tmagic/design';
-import { FormState } from '@tmagic/form';
+import type { FieldProps, FormState } from '@tmagic/form';
 import { ActionType } from '@tmagic/schema';
 
-import type { EventSelectConfig, Services } from '@editor/type';
+import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig, Services } from '@editor/type';
 
 defineOptions({
   name: 'MEditorEventSelect',
 });
 
-const props = defineProps<{
-  config: EventSelectConfig;
-  model: any;
-  prop: string;
-  name: string;
-  size: 'small' | 'default' | 'large';
-}>();
+const props = defineProps<FieldProps<EventSelectConfig>>();
 
 const emit = defineEmits(['change']);
 
@@ -81,7 +89,7 @@ const actionTypeConfig = computed(() => {
   const defaultActionTypeConfig = {
     name: 'actionType',
     text: '联动类型',
-    labelWidth: '70px',
+    labelWidth: '80px',
     type: 'select',
     defaultValue: ActionType.COMP,
     options: () => [
@@ -93,8 +101,15 @@ const actionTypeConfig = computed(() => {
       {
         text: '代码',
         label: '代码',
+        disabled: !Object.keys(services?.codeBlockService.getCodeDsl() || {}).length,
         value: ActionType.CODE,
       },
+      {
+        text: '数据源',
+        label: '数据源',
+        disabled: !services?.dataSourceService.get('dataSources')?.filter((ds) => ds.methods?.length).length,
+        value: ActionType.DATA_SOURCE,
+      },
     ],
   };
   return { ...defaultActionTypeConfig, ...props.config.actionTypeConfig };
@@ -105,7 +120,7 @@ const targetCompConfig = computed(() => {
   const defaultTargetCompConfig = {
     name: 'to',
     text: '联动组件',
-    labelWidth: '70px',
+    labelWidth: '80px',
     type: 'ui-select',
     display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
   };
@@ -117,7 +132,7 @@ const compActionConfig = computed(() => {
   const defaultCompActionConfig = {
     name: 'method',
     text: '动作',
-    labelWidth: '70px',
+    labelWidth: '80px',
     type: 'select',
     display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
     options: (mForm: FormState, { model }: any) => {
@@ -135,14 +150,27 @@ const compActionConfig = computed(() => {
 
 // 代码联动配置
 const codeActionConfig = computed(() => {
-  const defaultCodeActionConfig = {
+  const defaultCodeActionConfig: CodeSelectColConfig = {
     type: 'code-select-col',
     labelWidth: 0,
-    display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.CODE,
+    name: 'codeId',
+    disabled: () => !services?.codeBlockService.getEditStatus(),
+    display: (mForm, { model }) => model.actionType === ActionType.CODE,
   };
   return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
 });
 
+// 数据源联动配置
+const dataSourceActionConfig = computed(() => {
+  const defaultDataSourceActionConfig: DataSourceMethodSelectConfig = {
+    type: 'data-source-method-select',
+    name: 'dataSourceMethod',
+    labelWidth: 0,
+    display: (mForm, { model }) => model.actionType === ActionType.DATA_SOURCE,
+  };
+  return { ...defaultDataSourceActionConfig, ...props.config.dataSourceActionConfig };
+});
+
 // 兼容旧的数据格式
 const tableConfig = computed(() => ({
   type: 'table',
@@ -188,7 +216,13 @@ const actionsConfig = computed(() => ({
       name: 'actions',
       expandAll: true,
       enableToggleMode: false,
-      items: [actionTypeConfig.value, targetCompConfig.value, compActionConfig.value, codeActionConfig.value],
+      items: [
+        actionTypeConfig.value,
+        targetCompConfig.value,
+        compActionConfig.value,
+        codeActionConfig.value,
+        dataSourceActionConfig.value,
+      ],
     },
   ],
 }));

package/src/fields/KeyValue.vue

@@ -21,6 +21,7 @@
         class="m-fileds-key-value-delete"
         type="danger"
         :size="size"
+        :disabled="disabled"
         circle
         plain
         :icon="Delete"
@@ -28,7 +29,9 @@
       ></TMagicButton>
     </div>
 
-    <TMagicButton type="primary" :size="size" plain :icon="Plus" @click="addHandler">添加</TMagicButton>
+    <TMagicButton type="primary" :size="size" :disabled="disabled" plain :icon="Plus" @click="addHandler"
+      >添加</TMagicButton
+    >
   </div>
 </template>
 
@@ -37,25 +40,20 @@ import { ref, watchEffect } from 'vue';
 import { Delete, Plus } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicInput } from '@tmagic/design';
+import type { FieldProps } from '@tmagic/form';
 
 defineOptions({
   name: 'MEditorKeyValue',
 });
 
 const props = withDefaults(
-  defineProps<{
-    config: {
+  defineProps<
+    FieldProps<{
       type: 'key-value';
       name: string;
       text: string;
-    };
-    model: Record<string, any>;
-    name: string;
-    prop: string;
-    disabled: boolean;
-    lastValues?: Record<string, any>;
-    size?: 'large' | 'default' | 'small';
-  }>(),
+    }>
+  >(),
   {
     disabled: false,
   },