feat(editor,data-source): 组件配置支持关联数据源字段

packages/data-source/src/DataSourceManager.ts

@@ -21,7 +21,7 @@ import EventEmitter from 'events';
 import { cloneDeep, template } from 'lodash-es';
 
 import type { AppCore, DataSourceSchema, Id, MNode } from '@tmagic/schema';
-import { compiledCond, compiledNode } from '@tmagic/utils';
+import { compiledCond, compiledNode, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, isObject } from '@tmagic/utils';
 
 import { DataSource, HttpDataSource } from './data-sources';
 import type { DataSourceManagerData, DataSourceManagerOptions, HttpDataSourceSchema } from './types';
@@ -143,12 +143,40 @@ class DataSourceManager extends EventEmitter {
 
     return compiledNode(
       (value: any) => {
+        // 使用data-source-input等表单控件配置的字符串模板，如：`xxx${id.field}xxx`
         if (typeof value === 'string') {
           return template(value)(this.data);
         }
+
+        // 使用data-source-select等表单控件配置的数据源，如：{ isBindDataSource: true, dataSourceId: 'xxx'}
         if (value?.isBindDataSource && value.dataSourceId) {
           return this.data[value.dataSourceId];
         }
+
+        // 使用data-source-field-select等表单控件的数据源字段，如：[`${DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${id}`, 'field']
+        if (Array.isArray(value) && typeof value[0] === 'string') {
+          const [prefixId, ...fields] = value;
+          const prefixIndex = prefixId.indexOf(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX);
+
+          if (prefixIndex > -1) {
+            const dsId = prefixId.substring(prefixIndex + DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX.length);
+
+            const data = this.data[dsId];
+
+            if (!data) return value;
+
+            return fields.reduce((accumulator, currentValue: any) => {
+              if (Array.isArray(accumulator)) return accumulator;
+
+              if (isObject(accumulator)) {
+                return accumulator[currentValue];
+              }
+
+              return '';
+            }, data);
+          }
+        }
+
         return value;
       },
       cloneDeep(node),

packages/editor/src/fields/DataSourceFieldSelect.vue

@@ -12,7 +12,9 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import type { FieldProps } from '@tmagic/form';
+import type { CascaderOption, FieldProps } from '@tmagic/form';
+import type { DataSchema } from '@tmagic/schema';
+import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
 import type { DataSourceFieldSelectConfig, Services } from '@editor/type';
 
@@ -25,21 +27,30 @@ const props = withDefaults(defineProps<FieldProps<DataSourceFieldSelectConfig>>(
 
 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 getOptionChildren = (fields: DataSchema[] = []): CascaderOption[] =>
+  fields.map((field) => ({
+    label: field.title || field.name,
+    value: field.name,
+    children: field.type === 'array' ? [] : getOptionChildren(field.fields),
+  }));
+
+const cascaderConfig = computed(() => {
+  const valueIsKey = props.config.value === 'key';
+
+  return {
+    type: 'cascader',
+    name: props.name,
+    checkStrictly: !valueIsKey,
+    options: () =>
+      dataSources.value
+        ?.filter((ds) => ds.fields?.length)
+        ?.map((ds) => ({
+          label: ds.title || ds.id,
+          value: valueIsKey ? ds.id : `${DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${ds.id}`,
+          children: getOptionChildren(ds.fields),
+        })) || [],
+  };
+});
 
 const onChangeHandler = (value: any) => {
   emit('change', value);

packages/editor/src/type.ts

@@ -507,6 +507,7 @@ export interface DataSourceMethodSelectConfig {
 export interface DataSourceFieldSelectConfig {
   type: 'data-source-field-select';
   name: string;
+  value?: 'key' | 'value';
   labelWidth?: number | string;
   disabled?: boolean | FilterFunction;
   display?: boolean | FilterFunction;

packages/editor/src/utils/dep.ts

@@ -1,10 +1,11 @@
 import { isEmpty } from 'lodash-es';
 
-import { CodeBlockContent, HookType, Id } from '@tmagic/schema';
+import { type CodeBlockContent, HookType, type Id } from '@tmagic/schema';
+import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
 import dataSourceService from '@editor/services/dataSource';
 import { Target } from '@editor/services/dep';
-import { DepTargetType, HookData } from '@editor/type';
+import { DepTargetType, type HookData } from '@editor/type';
 
 export const createCodeBlockTarget = (id: Id, codeBlock: CodeBlockContent) =>
   new Target({
@@ -29,22 +30,36 @@ export const createDataSourceTarget = (id: Id) =>
   new Target({
     type: DepTargetType.DATA_SOURCE,
     id,
-    isTarget: (key: string | number, value: any) =>
+    isTarget: (key: string | number, value: any) => {
       // 关联数据源对象或者在模板在使用数据源
-      (value?.isBindDataSource && value.dataSourceId) || (typeof value === 'string' && value.includes(`${id}`)),
+      if ((value?.isBindDataSource && value.dataSourceId) || (typeof value === 'string' && value.includes(`${id}`))) {
+        return true;
+      }
+
+      // 关联数据源字段，格式为 [前缀+数据源ID, 字段名]
+      if (!Array.isArray(value) || typeof value[0] !== 'string') {
+        return false;
+      }
+
+      const [prefixId] = value;
+      const prefixIndex = prefixId.indexOf(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX);
+
+      if (prefixIndex === -1) {
+        return false;
+      }
+
+      const dsId = prefixId.substring(prefixIndex + DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX.length);
+
+      return dsId === id && Boolean(dataSourceService.getDataSourceById(id));
+    },
   });
 
 export const createDataSourceCondTarget = (id: string) =>
   new Target({
     type: DepTargetType.DATA_SOURCE_COND,
     id,
-    isTarget: (key: string | number, value: any) => {
-      if (!Array.isArray(value) || value[0] !== id) return false;
-
-      const ds = dataSourceService.getDataSourceById(id);
-
-      return Boolean(ds?.fields?.find((field) => field.name === value[1]));
-    },
+    isTarget: (key: string | number, value: any) =>
+      Array.isArray(value) && value[0] === id && Boolean(dataSourceService.getDataSourceById(id)),
   });
 
 export const createDataSourceMethodTarget = (id: string) =>

packages/editor/src/utils/props.ts

@@ -245,6 +245,7 @@ export const displayTabConfig: TabPaneConfig = {
             {
               type: 'data-source-field-select',
               name: 'field',
+              value: 'key',
               label: '字段',
             },
             {

packages/utils/src/index.ts

@@ -281,7 +281,7 @@ export const compiledNode = (
         return accumulator;
       }
 
-      if (Object.prototype.toString.call(accumulator) === '[object Object]' || Array.isArray(accumulator)) {
+      if (isObject(accumulator) || Array.isArray(accumulator)) {
         return accumulator[currentValue];
       }
 
@@ -367,3 +367,5 @@ export const getDefaultValueFromFields = (fields: DataSchema[]) => {
   });
   return data;
 };
+
+export const DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX = 'ds-field::';