From e4613ba0536d719c87dbab48a1f2d8d1822988b2 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 17 Oct 2023 20:21:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor,data-source):=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E6=94=AF=E6=8C=81=E5=85=B3=E8=81=94=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=BA=90=E5=AD=97=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/data-source/src/DataSourceManager.ts | 30 ++++++++++++-
 .../src/fields/DataSourceFieldSelect.vue      | 43 ++++++++++++-------
 packages/editor/src/type.ts                   |  1 +
 packages/editor/src/utils/dep.ts              | 37 +++++++++++-----
 packages/editor/src/utils/props.ts            |  1 +
 packages/utils/src/index.ts                   |  4 +-
 6 files changed, 87 insertions(+), 29 deletions(-)

diff --git a/packages/data-source/src/DataSourceManager.ts b/packages/data-source/src/DataSourceManager.ts
index 3ac12877..c990dd41 100644
--- a/packages/data-source/src/DataSourceManager.ts
+++ b/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),
diff --git a/packages/editor/src/fields/DataSourceFieldSelect.vue b/packages/editor/src/fields/DataSourceFieldSelect.vue
index 0bb6b66b..ac40d3b0 100644
--- a/packages/editor/src/fields/DataSourceFieldSelect.vue
+++ b/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);
diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts
index 55b4522b..b5b4e4c1 100644
--- a/packages/editor/src/type.ts
+++ b/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;
diff --git a/packages/editor/src/utils/dep.ts b/packages/editor/src/utils/dep.ts
index 63733012..a3ea6bbc 100644
--- a/packages/editor/src/utils/dep.ts
+++ b/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) =>
diff --git a/packages/editor/src/utils/props.ts b/packages/editor/src/utils/props.ts
index f50be9c8..1b50f9c2 100644
--- a/packages/editor/src/utils/props.ts
+++ b/packages/editor/src/utils/props.ts
@@ -245,6 +245,7 @@ export const displayTabConfig: TabPaneConfig = {
             {
               type: 'data-source-field-select',
               name: 'field',
+              value: 'key',
               label: '字段',
             },
             {
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index 08b3210a..52aff6cb 100644
--- a/packages/utils/src/index.ts
+++ b/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::';