fix(editor): 数据源列表中依赖的key会重复出现

Tencent · Nov 3, 2023 · 2d5b772 · 2d5b772
1 parent 8013997
commit 2d5b772
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 19 deletions.
diff --git a/packages/editor/src/layouts/sidebar/data-source/DataSourceList.vue b/packages/editor/src/layouts/sidebar/data-source/DataSourceList.vue
@@ -75,28 +75,37 @@ const getNodeTreeConfig = (id: string, dep: Dep[string], type?: string) => ({
   children: getKeyTreeConfig(dep, type),
 });
 
+/**
+ * 生成tree中依赖节点的数据
+ * @param children 节点
+ * @param deps 依赖
+ * @param type 依赖类型
+ */
+const mergeChildren = (children: any[], deps: Dep, type?: string) => {
+  Object.entries(deps).forEach(([id, dep]) => {
+    // 已经生成过的节点
+    const nodeItem = children.find((item) => item.id === id);
+    // 节点存在，则追加依赖的key
+    if (nodeItem) {
+      nodeItem.children = nodeItem.children.concat(getKeyTreeConfig(dep, type));
+    } else {
+      // 节点不存在，则生成
+      children.push(getNodeTreeConfig(id, dep, type));
+    }
+  });
+};
+
 const list = computed(() =>
   dataSources.value.map((ds) => {
     const dsDeps = dsDep.value[ds.id].deps;
     const dsMethodDeps = dsMethodDep.value[ds.id].deps;
     const dsCondDeps = dsCondDep.value[ds.id].deps;
 
     const children: any[] = [];
-
-    const mergeChildren = (deps: Dep, type?: string) => {
-      Object.entries(deps).forEach(([id, dep]) => {
-        const nodeItem = children.find((item) => item.id === id);
-        if (nodeItem) {
-          nodeItem.children = nodeItem.children.concat(getKeyTreeConfig(dep, type));
-        } else {
-          children.push(getNodeTreeConfig(id, dep, type));
-        }
-      });
-    };
-
-    mergeChildren(dsDeps);
-    mergeChildren(dsMethodDeps, 'method');
-    mergeChildren(dsCondDeps, 'cond');
+    // 数据源依赖分为三种类型：key/node、method、cond，是分开存储，这里将其合并展示
+    mergeChildren(children, dsDeps);
+    mergeChildren(children, dsMethodDeps, 'method');
+    mergeChildren(children, dsCondDeps, 'cond');
 
     return {
       id: ds.id,

diff --git a/packages/editor/src/services/dep.ts b/packages/editor/src/services/dep.ts
@@ -299,7 +299,7 @@ export class Watcher extends EventEmitter {
         const keyIsItems = key === 'items';
         const fullKey = prop ? `${prop}.${key}` : key;
 
-        if (target.isTarget(key, value)) {
+        if (target.isTarget(fullKey, value)) {
           target.updateDep(node, fullKey);
           this.emit('update-dep', node, fullKey);
         } else if (!keyIsItems && Array.isArray(value)) {

diff --git a/packages/editor/src/utils/dep.ts b/packages/editor/src/utils/dep.ts
@@ -58,8 +58,13 @@ export const createDataSourceCondTarget = (id: string) =>
   new Target({
     type: DepTargetType.DATA_SOURCE_COND,
     id,
-    isTarget: (key: string | number, value: any) =>
-      Array.isArray(value) && value[0] === id && Boolean(dataSourceService.getDataSourceById(id)),
+    isTarget: (key: string | number, value: any) => {
+      if (!Array.isArray(value) || value[0] !== id || !`${key}`.startsWith('displayConds')) return false;
+
+      const ds = dataSourceService.getDataSourceById(id);
+
+      return Boolean(ds?.fields?.find((field) => field.name === value[1]));
+    },
   });
 
 export const createDataSourceMethodTarget = (id: string) =>

diff --git a/packages/editor/tests/unit/services/dep.spec.ts b/packages/editor/tests/unit/services/dep.spec.ts
@@ -96,7 +96,7 @@ describe('depService', () => {
         type: 'target',
         id: 'collect_2',
         name: 'test2',
-        isTarget: (key: string | number, value: any) => key === 'text1' && value === 'text',
+        isTarget: (key: string | number, value: any) => `${key}`.includes('text1') && value === 'text',
       }),
     );