@tmagic/editor 1.4.8 → 1.4.9

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>

package/src/fields/DataSourceMocks.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="m-editor-data-source-fields">
+    <MagicTable :data="model[name]" :columns="columns"></MagicTable>
+
+    <div class="m-editor-data-source-fields-footer">
+      <TMagicButton size="small" type="primary" :disabled="disabled" plain @click="newHandler()">添加</TMagicButton>
+    </div>
+
+    <FloatingBox
+      v-model:visible="addDialogVisible"
+      v-model:width="width"
+      v-model:height="editorHeight"
+      :title="drawerTitle"
+      :position="boxPosition"
+    >
+      <template #body>
+        <MFormBox
+          ref="addDialog"
+          label-width="120px"
+          :config="formConfig"
+          :values="formValues"
+          :parentValues="model[name]"
+          :disabled="disabled"
+          @submit="formChangeHandler"
+        ></MFormBox>
+      </template>
+    </FloatingBox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject, Ref, ref } from 'vue';
+
+import { TMagicButton, tMagicMessageBox, TMagicSwitch } from '@tmagic/design';
+import { type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
+import type { MockSchema } from '@tmagic/schema';
+import { type ColumnConfig, MagicTable } from '@tmagic/table';
+import { getDefaultValueFromFields } from '@tmagic/utils';
+
+import FloatingBox from '@editor/components/FloatingBox.vue';
+import { useNextFloatBoxPosition } from '@editor/hooks/use-next-float-box-position';
+import CodeEditor from '@editor/layouts/CodeEditor.vue';
+import { Services } from '@editor/type';
+
+import { useEditorContentHeight } from '..';
+
+defineOptions({
+  name: 'MFieldsDataSourceMocks',
+});
+
+const props = withDefaults(
+  defineProps<
+    FieldProps<{
+      type: 'data-source-mocks';
+    }>
+  >(),
+  {
+    disabled: false,
+  },
+);
+
+const emit = defineEmits(['change']);
+
+const services = inject<Services>('services');
+const width = defineModel<number>('width', { default: 670 });
+
+const drawerTitle = ref('');
+const formValues = ref<Record<string, any>>({});
+
+const formConfig: FormConfig = [
+  { name: 'index', type: 'hidden', filter: 'number', defaultValue: -1 },
+  {
+    name: 'title',
+    text: '名称',
+    rules: [
+      {
+        required: true,
+        message: '请输入字段名称',
+      },
+      {
+        required: true,
+        message: '请输入名称',
+      },
+    ],
+  },
+  {
+    name: 'description',
+    text: '描述',
+  },
+  {
+    name: 'enable',
+    text: '启用',
+    type: 'switch',
+  },
+  {
+    name: 'useInEditor',
+    text: '编辑器中使用',
+    type: 'switch',
+  },
+  {
+    name: 'data',
+    text: 'mock数据',
+    type: 'vs-code',
+    language: 'json',
+    options: inject('codeOptions', {}),
+    defaultValue: '{}',
+    height: '400px',
+    onChange: (formState: FormState | undefined, v: string | any) => {
+      if (typeof v !== 'string') return v;
+      return JSON.parse(v);
+    },
+    rules: [
+      {
+        validator: ({ value, callback }) => {
+          if (typeof value !== 'string') return callback();
+
+          try {
+            // 检测json是否存在语法错误
+            JSON.parse(value);
+
+            callback();
+          } catch (error: any) {
+            callback(error);
+          }
+        },
+      },
+    ],
+  },
+];
+
+const columns: ColumnConfig[] = [
+  {
+    type: 'expand',
+    component: CodeEditor,
+    props: (row: MockSchema) => ({
+      initValues: row.data,
+      language: 'json',
+      height: '150px',
+      options: {
+        readOnly: true,
+      },
+    }),
+  },
+  {
+    label: '名称',
+    prop: 'title',
+  },
+  {
+    label: '描述',
+    prop: 'description',
+  },
+  {
+    label: '是否启用',
+    prop: 'enable',
+    type: 'component',
+    component: TMagicSwitch,
+    props: (row: MockSchema) => ({
+      modelValue: row.enable,
+      activeValue: true,
+      inactiveValue: false,
+    }),
+    listeners: (row: MockSchema, index: number) => ({
+      'update:modelValue': (v: boolean) => {
+        toggleValue(row, 'enable', v, index);
+      },
+    }),
+  },
+  {
+    label: '编辑器中使用',
+    prop: 'useInEditor',
+    type: 'component',
+    component: TMagicSwitch,
+    props: (row: MockSchema) => ({
+      modelValue: row.useInEditor,
+      activeValue: true,
+      inactiveValue: false,
+    }),
+    listeners: (row: MockSchema, index: number) => ({
+      'update:modelValue': (v: boolean) => {
+        toggleValue(row, 'useInEditor', v, index);
+      },
+    }),
+  },
+  {
+    label: '操作',
+    fixed: 'right',
+    actions: [
+      {
+        text: '编辑',
+        handler: (row: MockSchema, index: number) => {
+          formValues.value = {
+            ...row,
+            index,
+          };
+          drawerTitle.value = `编辑${row.title}`;
+          calcBoxPosition();
+          addDialogVisible.value = true;
+        },
+      },
+      {
+        text: '删除',
+        buttonType: 'danger',
+        handler: async (row: MockSchema, index: number) => {
+          await tMagicMessageBox.confirm(`确定删除${row.title}?`, '提示');
+          props.model[props.name].splice(index, 1);
+          emit('change', props.model[props.name]);
+        },
+      },
+    ],
+  },
+];
+
+const newHandler = () => {
+  const isFirstRow = props.model[props.name].length === 0;
+  formValues.value = {
+    data: getDefaultValueFromFields(props.model.fields || []),
+    useInEditor: isFirstRow,
+    enable: isFirstRow,
+  };
+  drawerTitle.value = '新增Mock';
+  calcBoxPosition();
+  addDialogVisible.value = true;
+};
+
+const formChangeHandler = ({ index, ...value }: Record<string, any>) => {
+  if (index > -1) {
+    props.model[props.name][index] = value;
+  } else {
+    props.model[props.name].push(value);
+  }
+
+  addDialogVisible.value = false;
+
+  emit('change', props.model[props.name]);
+};
+
+const toggleValue = (row: MockSchema, key: 'enable' | 'useInEditor', value: boolean, index: number) => {
+  if (value) {
+    props.model[props.name].forEach((item: MockSchema) => {
+      item[key] = false;
+    });
+  }
+
+  formChangeHandler({
+    ...row,
+    [key]: value,
+    index,
+  });
+};
+
+const addDialogVisible = defineModel<boolean>('visible', { default: false });
+const { height: editorHeight } = useEditorContentHeight();
+const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
+const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
+</script>

package/src/fields/DataSourceSelect.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="m-fields-data-source-select">
+    <MSelect
+      :model="model"
+      :name="name"
+      :size="size"
+      :prop="prop"
+      :disabled="disabled"
+      :config="selectConfig"
+      :last-values="lastValues"
+      @change="changeHandler"
+    ></MSelect>
+
+    <TMagicButton
+      v-if="model[name] && hasDataSourceSidePanel"
+      class="m-fields-select-action-button"
+      :size="size"
+      @click="editHandler"
+      ><MIcon :icon="!notEditable ? Edit : View"></MIcon
+    ></TMagicButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { Edit, View } from '@element-plus/icons-vue';
+
+import { TMagicButton } from '@tmagic/design';
+import { type FieldProps, filterFunction, type FormState, MSelect, type SelectConfig } from '@tmagic/form';
+
+import MIcon from '@editor/components/Icon.vue';
+import type { DataSourceSelect, EventBus, Services } from '@editor/type';
+import { SideItemKey } from '@editor/type';
+
+defineOptions({
+  name: 'MFieldsDataSourceSelect',
+});
+
+const emit = defineEmits(['change']);
+
+const props = withDefaults(defineProps<FieldProps<DataSourceSelect>>(), {
+  disabled: false,
+});
+
+const mForm = inject<FormState | undefined>('mForm');
+const { dataSourceService, uiService } = inject<Services>('services') || {};
+const eventBus = inject<EventBus>('eventBus');
+
+const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
+
+const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
+
+const hasDataSourceSidePanel = computed(() =>
+  (uiService?.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
+);
+
+const selectConfig = computed<SelectConfig>(() => {
+  const { type, dataSourceType, value, ...config } = props.config;
+
+  const valueIsId = props.config.value === 'id';
+
+  return {
+    ...config,
+    type: 'select',
+    valueKey: 'dataSourceId',
+    options: dataSources.value
+      .filter((ds) => !props.config.dataSourceType || ds.type === props.config.dataSourceType)
+      .map((ds) => ({
+        value: valueIsId
+          ? ds.id
+          : {
+              isBindDataSource: true,
+              dataSourceType: ds.type,
+              dataSourceId: ds.id,
+            },
+        text: ds.title || ds.id,
+      })),
+  };
+});
+
+const changeHandler = (value: any) => {
+  emit('change', value);
+};
+
+const editHandler = () => {
+  const value = props.model[props.name];
+
+  if (!value) return;
+
+  const id = typeof value === 'string' ? value : value.dataSourceId;
+
+  const dataSource = dataSourceService?.getDataSourceById(id);
+
+  if (!dataSource) return;
+
+  eventBus?.emit('edit-data-source', id);
+};
+</script>