@tmagic/editor 1.4.8 → 1.4.10

package/src/fields/DataSourceInput.vue

@@ -0,0 +1,339 @@
+<template>
+  <component
+    v-if="disabled || isFocused"
+    :is="getConfig('components')?.autocomplete.component || 'el-autocomplete'"
+    class="tmagic-design-auto-complete"
+    ref="autocomplete"
+    v-model="state"
+    v-bind="
+      getConfig('components')?.autocomplete.props({
+        disabled,
+        size,
+        fetchSuggestions: querySearch,
+        triggerOnFocus: false,
+        clearable: true,
+      }) || {}
+    "
+    style="width: 100%"
+    @blur="blurHandler"
+    @input="inputHandler"
+    @select="selectHandler"
+  >
+    <template #suffix>
+      <Icon :icon="Coin" />
+    </template>
+    <template #default="{ item }">
+      <div style="display: flex; flex-direction: column; line-height: 1.2em">
+        <div>{{ item.text }}</div>
+        <span style="font-size: 10px; color: rgba(0, 0, 0, 0.6)">{{ item.value }}</span>
+      </div>
+    </template>
+  </component>
+  <div
+    :class="`tmagic-data-source-input-text el-input t-input t-size-${size?.[0]} el-input--${size}`"
+    @mouseup="mouseupHandler"
+    v-else
+  >
+    <div :class="`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused ? ' is-focus' : ''}`">
+      <div class="el-input__inner t-input__inner">
+        <template v-for="(item, index) in displayState">
+          <span :key="index" v-if="item.type === 'text'" style="margin-right: 2px">{{ item.value }}</span>
+          <TMagicTag :key="index" :size="size" v-if="item.type === 'var'">{{ item.value }}</TMagicTag>
+        </template>
+
+        <Icon class="tmagic-data-source-input-icon" :icon="Coin" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, nextTick, ref, watch } from 'vue';
+import { Coin } from '@element-plus/icons-vue';
+
+import { getConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
+import type { FieldProps, FormItem } from '@tmagic/form';
+import type { DataSchema, DataSourceSchema } from '@tmagic/schema';
+import { isNumber } from '@tmagic/utils';
+
+import Icon from '@editor/components/Icon.vue';
+import type { Services } from '@editor/type';
+import { getDisplayField } from '@editor/utils/data-source';
+
+defineOptions({
+  name: 'MFieldsDataSourceInput',
+});
+
+const props = withDefaults(
+  defineProps<
+    FieldProps<
+      {
+        type: 'data-source-input';
+      } & FormItem
+    >
+  >(),
+  {
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<{
+  change: [value: string];
+}>();
+
+const { dataSourceService } = inject<Services>('services') || {};
+
+const autocomplete = ref<InstanceType<typeof TMagicAutocomplete>>();
+const isFocused = ref(false);
+const state = ref('');
+const displayState = ref<{ value: string; type: 'var' | 'text' }[]>([]);
+
+const input = computed<HTMLInputElement>(() => autocomplete.value?.inputRef?.input);
+const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
+
+const setDisplayState = () => {
+  displayState.value = getDisplayField(dataSources.value, state.value);
+};
+
+watch(
+  () => props.model[props.name],
+  (value = '') => {
+    state.value = value;
+
+    setDisplayState();
+  },
+  { immediate: true },
+);
+
+const mouseupHandler = async () => {
+  const selection = globalThis.document.getSelection();
+  const anchorOffset = selection?.anchorOffset || 0;
+  const focusOffset = selection?.focusOffset || 0;
+
+  isFocused.value = true;
+  await nextTick();
+  autocomplete.value?.focus();
+
+  if (focusOffset && input.value) {
+    input.value.setSelectionRange(anchorOffset, focusOffset);
+  }
+};
+
+const blurHandler = () => {
+  isFocused.value = false;
+
+  setDisplayState();
+
+  emit('change', state.value);
+};
+
+const changeHandler = (v: string) => {
+  emit('change', v);
+};
+
+let inputText = '';
+
+const inputHandler = (v: string) => {
+  if (!v) {
+    inputText = v;
+  }
+};
+
+/**
+ * 光标位置是不是}
+ * @param selectionStart 光标位置
+ */
+const isRightCurlyBracket = (selectionStart = 0) => {
+  const lastChar = inputText.substring(selectionStart - 1, selectionStart);
+  return lastChar === '}';
+};
+
+/**
+ * 获取光标位置
+ */
+const getSelectionStart = () => {
+  let selectionStart = input.value?.selectionStart || 0;
+
+  // 输入法可能会自动补全}，如果当前光标前面一个字符是}，则光标前移一位
+  if (isRightCurlyBracket(selectionStart)) {
+    selectionStart -= 1;
+  }
+
+  return selectionStart;
+};
+
+/**
+ * 当前输入的是{
+ * @param leftCurlyBracketIndex {字符索引
+ */
+const curCharIsLeftCurlyBracket = (leftCurlyBracketIndex: number) =>
+  leftCurlyBracketIndex > 0 && leftCurlyBracketIndex === getSelectionStart() - 1;
+
+/**
+ * 当前输入的是.
+ * @param leftCurlyBracketIndex .字符索引
+ */
+const curCharIsDot = (dotIndex: number) => dotIndex > -1 && dotIndex === getSelectionStart() - 1;
+
+/**
+ * @param leftCurlyBracketIndex 左大括号字符索引
+ * @param cb 建议的方法
+ */
+const dsQuerySearch = (queryString: string, leftCurlyBracketIndex: number, cb: (data: { value: string }[]) => void) => {
+  let result: DataSourceSchema[] = [];
+
+  if (curCharIsLeftCurlyBracket(leftCurlyBracketIndex)) {
+    // 当前输入的是{
+    result = dataSources.value;
+  } else if (leftCurlyBracketIndex > 0) {
+    // 当前输入的是{xx
+    const queryName = queryString.substring(leftCurlyBracketIndex + 1).toLowerCase();
+    result = dataSources.value.filter((ds) => ds.title?.toLowerCase().includes(queryName) || ds.id.includes(queryName));
+  }
+
+  cb(
+    result.map((ds) => ({
+      value: ds.id,
+      text: ds.title,
+      type: 'dataSource',
+    })),
+  );
+};
+
+/**
+ * 字段提示
+ * @param queryString 当前输入框内的字符串
+ * @param leftAngleIndex {字符索引
+ * @param dotIndex .字符索引
+ * @param cb 建议回调
+ */
+const fieldQuerySearch = (
+  queryString: string,
+  leftAngleIndex: number,
+  dotIndex: number,
+  cb: (data: { value: string }[]) => void,
+) => {
+  let result: DataSchema[] = [];
+
+  const dsKey = queryString.substring(leftAngleIndex + 1, dotIndex);
+
+  // 可能是xx.xx.xx，存在链式调用
+  const keys = dsKey.replaceAll(/\[(\d+)\]/g, '.$1').split('.');
+
+  // 最前的是数据源id
+  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) {
+    if (isNumber(key)) {
+      key = keys.shift();
+      continue;
+    }
+
+    for (const field of fields) {
+      if (field.name === key) {
+        fields = field.fields || [];
+        key = keys.shift();
+        break;
+      }
+    }
+  }
+
+  if (curCharIsDot(dotIndex)) {
+    // 当前输入的是.
+    result = fields || [];
+  } else if (dotIndex > -1) {
+    const queryName = queryString.substring(dotIndex + 1).toLowerCase();
+    result =
+      fields.filter(
+        (field) => field.name?.toLowerCase().includes(queryName) || field.title?.toLowerCase().includes(queryName),
+      ) || [];
+  }
+
+  cb(
+    result.map((field) => ({
+      value: field.name,
+      text: field.title,
+      type: 'field',
+    })),
+  );
+};
+
+/**
+ * 数据源提示
+ * @param queryString 当前输入框内的字符串
+ * @param cb 建议回调
+ */
+const querySearch = (queryString: string, cb: (data: { value: string }[]) => void) => {
+  inputText = queryString;
+
+  const selectionStart = getSelectionStart();
+
+  const curQueryString = queryString.substring(0, selectionStart);
+
+  const fieldKeyStringLastIndex = curQueryString.lastIndexOf('.');
+  const dsKeyStringLastIndex = curQueryString.lastIndexOf('${') + 1;
+
+  const isFieldTip = fieldKeyStringLastIndex > dsKeyStringLastIndex;
+
+  if (isFieldTip) {
+    fieldQuerySearch(curQueryString, dsKeyStringLastIndex, fieldKeyStringLastIndex, cb);
+  } else {
+    dsQuerySearch(curQueryString, dsKeyStringLastIndex, cb);
+  }
+};
+
+/**
+ * 选择建议
+ * @param value 建议值
+ * @param type 建议类型，是数据源还是字段
+ */
+const selectHandler = async ({ value, type }: { value: string; type: 'dataSource' | 'field' }) => {
+  const isDataSource = type === 'dataSource';
+  const selectionStart = input.value?.selectionStart || 0;
+  let startText = inputText.substring(0, selectionStart);
+
+  const dotIndex = startText.lastIndexOf('.');
+  const leftCurlyBracketIndex = startText.lastIndexOf('${') + 1;
+
+  const endText = inputText.substring(selectionStart);
+
+  let suggestText = value;
+
+  if (isDataSource) {
+    if (!curCharIsLeftCurlyBracket(leftCurlyBracketIndex)) {
+      startText = startText.substring(0, leftCurlyBracketIndex + 1);
+    }
+
+    // 当前光标后一位是否为}，不是的话需要补上
+    if (!isRightCurlyBracket(selectionStart + 1)) {
+      suggestText = `${suggestText}}`;
+    }
+  } else if (!curCharIsDot(dotIndex)) {
+    startText = startText.substring(0, dotIndex + 1);
+  }
+
+  state.value = `${startText}${suggestText}${endText}`;
+
+  await nextTick();
+
+  // 由于选择数据源时会在后面补全}, 所以光标要前移2位
+  let newSelectionStart = 0;
+  if (isDataSource) {
+    newSelectionStart = leftCurlyBracketIndex + suggestText.length;
+  } else {
+    newSelectionStart = dotIndex + suggestText.length + 1;
+  }
+  input.value?.setSelectionRange(newSelectionStart, newSelectionStart);
+
+  changeHandler(state.value);
+};
+</script>

package/src/fields/DataSourceMethodSelect.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="m-fields-data-source-method-select">
+    <div class="data-source-method-select-container">
+      <MContainer
+        class="select"
+        :config="cascaderConfig"
+        :model="model"
+        :size="size"
+        @change="onChangeHandler"
+      ></MContainer>
+
+      <TMagicButton
+        v-if="model[name] && isCustomMethod && hasDataSourceSidePanel"
+        class="m-fields-select-action-button"
+        :size="size"
+        @click="editCodeHandler"
+      >
+        <MIcon :icon="!notEditable ? Edit : View"></MIcon>
+      </TMagicButton>
+    </div>
+
+    <CodeParams
+      v-if="paramsConfig.length"
+      name="params"
+      :model="model"
+      :size="size"
+      :disabled="disabled"
+      :params-config="paramsConfig"
+      @change="onChangeHandler"
+    ></CodeParams>
+  </div>
+</template>
+
+<script lang="ts" setup name="">
+import { computed, inject, ref } from 'vue';
+import { Edit, View } from '@element-plus/icons-vue';
+
+import { TMagicButton } from '@tmagic/design';
+import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form';
+import type { Id } from '@tmagic/schema';
+
+import CodeParams from '@editor/components/CodeParams.vue';
+import MIcon from '@editor/components/Icon.vue';
+import type { CodeParamStatement, DataSourceMethodSelectConfig, EventBus, Services } from '@editor/type';
+import { SideItemKey } from '@editor/type';
+
+defineOptions({
+  name: 'MFieldsDataSourceMethodSelect',
+});
+
+const mForm = inject<FormState | undefined>('mForm');
+const services = inject<Services>('services');
+const eventBus = inject<EventBus>('eventBus');
+
+const emit = defineEmits(['change']);
+
+const dataSourceService = services?.dataSourceService;
+
+const props = withDefaults(defineProps<FieldProps<DataSourceMethodSelectConfig>>(), {
+  disabled: false,
+});
+
+const hasDataSourceSidePanel = computed(() =>
+  (services?.uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
+);
+
+const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
+
+const dataSources = computed(() => dataSourceService?.get('dataSources'));
+
+const isCustomMethod = computed(() => {
+  const [id, name] = props.model[props.name];
+
+  const dataSource = dataSourceService?.getDataSourceById(id);
+
+  return Boolean(dataSource?.methods.find((method) => method.name === name));
+});
+
+const getParamItemsConfig = ([dataSourceId, methodName]: [Id, string] = ['', '']): CodeParamStatement[] => {
+  if (!dataSourceId) return [];
+
+  const paramStatements = dataSources.value
+    ?.find((item) => item.id === dataSourceId)
+    ?.methods?.find((item) => item.name === methodName)?.params;
+
+  if (!paramStatements) return [];
+
+  return paramStatements.map((paramState: CodeParamStatement) => ({
+    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 methodsOptions = computed(
+  () =>
+    dataSources.value
+      ?.filter((ds) => ds.methods?.length || dataSourceService?.getFormMethod(ds.type).length)
+      ?.map((ds) => ({
+        label: ds.title || ds.id,
+        value: ds.id,
+        children: [
+          ...(dataSourceService?.getFormMethod(ds.type) || []),
+          ...(ds.methods || []).map((method) => ({
+            label: method.name,
+            value: method.name,
+          })),
+        ],
+      })) || [],
+);
+
+const cascaderConfig = computed(() => ({
+  type: 'cascader',
+  name: props.name,
+  options: methodsOptions.value,
+  disable: props.disabled,
+  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 editCodeHandler = () => {
+  const [id] = props.model[props.name];
+
+  const dataSource = dataSourceService?.getDataSourceById(id);
+
+  if (!dataSource) return;
+
+  eventBus?.emit('edit-data-source', id);
+};
+</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 { type ColumnConfig, 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: 'MFieldsDataSourceMethods',
+});
+
+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: ColumnConfig[] = [
+  {
+    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>