@tmagic/editor 1.3.0-alpha.8 → 1.3.0-beta.0

package/src/fields/CodeSelectCol.vue

@@ -9,10 +9,26 @@
         @change="onParamsChangeHandler"
       ></m-form-container>
       <!-- 查看/编辑按钮 -->
-      <Icon class="icon" :icon="editable ? Edit : View" @click="editCode"></Icon>
+      <Icon v-if="model[name]" class="icon" :icon="!disabled ? Edit : View" @click="editCode(model[name])"></Icon>
     </div>
+
     <!-- 参数填写框 -->
-    <m-form-container :config="codeParamsConfig" :model="model" @change="onParamsChangeHandler"></m-form-container>
+    <CodeParams
+      v-if="paramsConfig.length"
+      name="params"
+      :model="model"
+      :size="size"
+      :params-config="paramsConfig"
+      @change="onParamsChangeHandler"
+    ></CodeParams>
+
+    <CodeBlockEditor
+      ref="codeBlockEditor"
+      v-if="codeConfig"
+      :disabled="disabled"
+      :content="codeConfig"
+      @submit="submitCodeBlockHandler"
+    ></CodeBlockEditor>
   </div>
 </template>
 
@@ -21,45 +37,61 @@ import { computed, inject, ref, watch } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 import { isEmpty, map } from 'lodash-es';
 
-import { createValues, FieldsetConfig, FormState } from '@tmagic/form';
-import { Id } from '@tmagic/schema';
+import { createValues, FieldProps } from '@tmagic/form';
+import type { 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 type { CodeParamStatement, Services } from '@editor/type';
+import { useCodeBlockEdit } from '@editor/hooks/use-code-block-edit';
+import type { CodeParamStatement, CodeSelectColConfig, Services } from '@editor/type';
 
 defineOptions({
   name: 'MEditorCodeSelectCol',
 });
 
 const services = inject<Services>('services');
-const mForm = inject<FormState>('mForm');
 const emit = defineEmits(['change']);
 
-const props = withDefaults(
-  defineProps<{
-    config: any;
-    model: any;
-    prop: string;
-    name: string;
-    size: 'small' | 'default' | 'large';
-  }>(),
-  {},
-);
-const codeDsl = computed(() => services?.codeBlockService.getCodeDsl());
-const editable = computed(() => services?.codeBlockService.getEditStatus());
-const codeParamsConfig = ref<FieldsetConfig>({
-  type: 'fieldset',
-  items: [],
-  legend: '参数',
-  labelWidth: '70px',
-  name: 'params',
-  display: false,
+const props = withDefaults(defineProps<FieldProps<CodeSelectColConfig>>(), {
+  disabled: false,
 });
+
+/**
+ * 根据代码块id获取代码块参数配置
+ * @param codeId 代码块ID
+ */
+const getParamItemsConfig = (codeId?: Id): CodeParamStatement[] => {
+  if (!codeDsl.value || !codeId) return [];
+
+  const paramStatements = codeDsl.value[codeId]?.params;
+
+  if (isEmpty(paramStatements)) return [];
+
+  return paramStatements.map((paramState: CodeParamStatement) => ({
+    labelWidth: '100px',
+    text: paramState.name,
+    ...paramState,
+  }));
+};
+
+const codeDsl = computed(() => services?.codeBlockService.getCodeDsl());
+const paramsConfig = ref<CodeParamStatement[]>(getParamItemsConfig(props.model[props.name]));
+
+watch(
+  () => props.model[props.name],
+  (v, preV) => {
+    if (v !== preV) {
+      paramsConfig.value = getParamItemsConfig(v);
+    }
+  },
+);
+
 const selectConfig = {
   type: 'select',
   text: '代码块',
-  name: 'codeId',
-  labelWidth: '70px',
+  name: props.name,
+  labelWidth: '80px',
   options: () => {
     if (codeDsl.value) {
       return map(codeDsl.value, (value, key) => ({
@@ -72,68 +104,25 @@ const selectConfig = {
   },
   onChange: (formState: any, codeId: Id, { model }: any) => {
     // 通过下拉框选择的codeId变化后修正model的值，避免写入其他codeId的params
-    model.params = {};
-  },
-};
+    paramsConfig.value = getParamItemsConfig(codeId);
 
-/**
- * 根据代码块id获取代码块参数配置
- * @param codeId 代码块ID
- */
-const getParamItemsConfig = (codeId: Id): CodeParamStatement[] => {
-  if (!codeDsl.value) return [];
-  const paramStatements = codeDsl.value[codeId]?.params;
-  if (isEmpty(paramStatements)) return [];
-  return paramStatements.map((paramState: CodeParamStatement) => ({
-    labelWidth: '100px',
-    text: paramState.name,
-    ...paramState,
-  }));
-};
+    if (paramsConfig.value.length) {
+      model.params = createValues(formState, paramsConfig.value, {}, model.params);
+    } else {
+      model.params = {};
+    }
 
-/**
- * 根据代码块id获取参数fieldset表单配置
- * @param codeId 代码块ID
- */
-const getCodeParamsConfig = (codeId: Id) => {
-  const paramsConfig = getParamItemsConfig(codeId);
-  // 如果参数没有填值，则使用createValues补全空值
-  if (!props.model.params || isEmpty(props.model.params)) {
-    props.model.params = {};
-    createValues(mForm, paramsConfig, {}, props.model.params);
-  }
-  codeParamsConfig.value = {
-    type: 'fieldset',
-    items: paramsConfig,
-    legend: '参数',
-    labelWidth: '70px',
-    name: 'params',
-    display: !isEmpty(paramsConfig),
-  };
+    return codeId;
+  },
 };
 
 /**
  * 参数值修改更新
  */
-const onParamsChangeHandler = () => {
+const onParamsChangeHandler = (value: any) => {
+  props.model.params = value.params;
   emit('change', props.model);
 };
 
-// 监听代码块顺序变化以及下拉选择的变化，并更新参数配置
-// TODO onchange在watch之前触发
-watch(
-  () => props.model.codeId,
-  (codeId: Id) => {
-    if (!codeId) return;
-    getCodeParamsConfig(codeId);
-  },
-  {
-    immediate: true,
-  },
-);
-
-// 打开代码编辑框
-const editCode = () => {
-  services?.codeBlockService.setCodeEditorContent(true, props.model.codeId);
-};
+const { codeBlockEditor, codeConfig, editCode, submitCodeBlockHandler } = useCodeBlockEdit(services?.codeBlockService);
 </script>

package/src/fields/DataSourceFieldSelect.vue

@@ -0,0 +1,47 @@
+<template>
+  <m-form-container
+    :config="{
+      ...config,
+      ...cascaderConfig,
+    }"
+    :model="model"
+    @change="onChangeHandler"
+  ></m-form-container>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import type { FieldProps } from '@tmagic/form';
+
+import type { DataSourceFieldSelectConfig, Services } from '@editor/type';
+
+const services = inject<Services>('services');
+const emit = defineEmits(['change']);
+
+const props = withDefaults(defineProps<FieldProps<DataSourceFieldSelectConfig>>(), {
+  disabled: false,
+});
+
+const dataSources = computed(() => services?.dataSourceService.get('dataSources'));
+
+const cascaderConfig = {
+  type: 'cascader',
+  name: props.name,
+  options: () =>
+    dataSources.value
+      ?.filter((ds) => ds.fields?.length)
+      ?.map((ds) => ({
+        label: ds.title || ds.id,
+        value: ds.id,
+        children: ds.fields?.map((field) => ({
+          label: field.title,
+          value: field.name,
+        })),
+      })) || [],
+};
+
+const onChangeHandler = (value: any) => {
+  emit('change', value);
+};
+</script>

package/src/fields/DataSourceFields.vue

@@ -1,43 +1,44 @@
 <template>
   <div class="m-editor-data-source-fields">
-    <MagicTable :data="model[name]" :columns="filedColumns"></MagicTable>
+    <MagicTable :data="model[name]" :columns="fieldColumns"></MagicTable>
 
     <div class="m-editor-data-source-fields-footer">
       <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"
+      :width="width"
       @submit="fieldChange"
-    ></MFormDialog>
+    ></MFormDrawer>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, inject, ref } from 'vue';
 
 import { TMagicButton, tMagicMessageBox } from '@tmagic/design';
-import { FormConfig, FormState, MFormDialog } from '@tmagic/form';
+import { type FieldProps, type FormConfig, type FormState, MFormDrawer } from '@tmagic/form';
 import { MagicTable } from '@tmagic/table';
 
+import type { Services } from '@editor/type';
+
 defineOptions({
   name: 'MEditorDataSourceFields',
 });
 
 const props = withDefaults(
-  defineProps<{
-    config: {
+  defineProps<
+    FieldProps<{
       type: 'data-source-fields';
-    };
-    model: any;
-    prop: string;
-    disabled: boolean;
-    name: string;
-  }>(),
+    }>
+  >(),
   {
     disabled: false,
   },
@@ -45,32 +46,33 @@ const props = withDefaults(
 
 const emit = defineEmits(['change']);
 
-const addDialog = ref<InstanceType<typeof MFormDialog>>();
+const services = inject<Services>('services');
+
+const addDialog = ref<InstanceType<typeof MFormDrawer>>();
 const fieldValues = ref<Record<string, any>>({});
 const filedTitle = ref('');
 
+const width = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get('columnWidth').left || 0));
+
 const newHandler = () => {
-  if (!addDialog.value) return;
   fieldValues.value = {};
   filedTitle.value = '新增属性';
-  addDialog.value.dialogVisible = true;
+  addDialog.value?.show();
 };
 
 const fieldChange = ({ index, ...value }: Record<string, any>) => {
-  if (!addDialog.value) return;
-
   if (index > -1) {
     props.model[props.name][index] = value;
   } else {
     props.model[props.name].push(value);
   }
 
-  addDialog.value.dialogVisible = false;
+  addDialog.value?.hide();
 
   emit('change', props.model[props.name]);
 };
 
-const filedColumns = [
+const fieldColumns = [
   {
     label: '属性名称',
     prop: 'title',
@@ -83,6 +85,10 @@ const filedColumns = [
     label: '属性描述',
     prop: 'desc',
   },
+  {
+    label: '默认值',
+    prop: 'defaultValue',
+  },
   {
     label: '操作',
     fixed: 'right',
@@ -90,13 +96,12 @@ const filedColumns = [
       {
         text: '编辑',
         handler: (row: Record<string, any>, index: number) => {
-          if (!addDialog.value) return;
           fieldValues.value = {
             ...row,
             index,
           };
           filedTitle.value = `编辑${row.title}`;
-          addDialog.value.dialogVisible = true;
+          addDialog.value?.show();
         },
       },
       {
@@ -161,6 +166,7 @@ const dataSourceFieldsConfig: FormConfig = [
   {
     name: 'description',
     text: '描述',
+    type: 'textarea',
   },
   {
     name: 'defaultValue',

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>