Merge pull request #3 from Little-LittleProgrammer/feature/1.1.2

Feature/1.1.2 完善 显示条件控制

Author: Little-LittleProgrammer

README.md

@@ -10,18 +10,13 @@ declare module 'vue' {
     CompList: typeof import('./src/components/classic/sidebar/comp-list/index.vue')['default']
     Preview: typeof import('./src/components/pagePreview/preview.vue')['default']
     PropsList: typeof import('./src/components/classic/sidebar/props-list/index.vue')['default']
-    QAntdDrawer: typeof import('@quantum-design/vue3-antd-pc-ui/es')['QAntdDrawer']
-    QAntdDropdown: typeof import('@quantum-design/vue3-antd-pc-ui/es')['QAntdDropdown']
     QAntdForm: typeof import('@quantum-design/vue3-antd-pc-ui/es')['QAntdForm']
     QAntdIcon: typeof import('@quantum-design/vue3-antd-pc-ui/es')['QAntdIcon']
     QAntdKeepAliveTabs: typeof import('@quantum-design/vue3-antd-pc-ui/es')['QAntdKeepAliveTabs']
     QAntdSearch: typeof import('@quantum-design/vue3-antd-pc-ui/es')['QAntdSearch']
     QAntdSetting: typeof import('@quantum-design/vue3-antd-pc-ui/es')['QAntdSetting']
-    QAntdTable: typeof import('@quantum-design/vue3-antd-pc-ui/es')['QAntdTable']
-    QAntdTableAction: typeof import('@quantum-design/vue3-antd-pc-ui/es')['QAntdTableAction']
     QAntdThemeModeButton: typeof import('@quantum-design/vue3-antd-pc-ui/es')['QAntdThemeModeButton']
     QBreadcrumb: typeof import('@quantum-design/vue3-pc-ui/es')['QBreadcrumb']
-    QCodeEditor: typeof import('@quantum-design/vue3-pc-ui/es')['QCodeEditor']
     QLoading: typeof import('@quantum-design/vue3-pc-ui/es')['QLoading']
     QmAside: typeof import('./src/components/layout/qm-aside.vue')['default']
     QmAuthority: typeof import('./src/components/qm-authority/index.vue')['default']

apps/playground/components.d.ts

@@ -476,7 +476,18 @@ export const testSchemasV2: ISchemasRoot = {
                                         event: 'openOverlay'
                                     }
                                 ]
-                            }
+                            },
+                            ifShow: [
+                                {
+                                    field: [
+                                        'ds_2rp3',
+                                        'commonNumber'
+                                    ],
+                                    op: '>',
+                                    value: 1001,
+                                    range: []
+                                }
+                            ]
                         }
                     ]
                 },

apps/playground/src/views/editor/init-schemas.ts

@@ -316,17 +316,12 @@ export function trigger(sourceManage: ISourceManage, dataSourceId: Id, fieldId?:
 ```typescript
 // 在 App.vue 中监听 update-data 事件
 app?.dataSourceManager?.on('update-data', (nodes: ISchemasNode[], sourceId: string, data: any) => {
-    // 创建页面配置的深拷贝
-    const newPageConfig = js_utils_deep_copy(pageConfig.value);
-
+    // 直接在原有数据上进行更新，确保响应式系统能正确检测变化
     nodes.forEach((node) => {
-        // 在拷贝的数据上进行更新
-        replaceChildNode(node, [newPageConfig]);
+        replaceChildNode(reactive(node) as ISchemasNode, [pageConfig.value as ISchemasNode]);
     });
 
-    // 重新赋值整个配置对象来触发响应式更新
-    pageConfig.value = newPageConfig;
-    updateKey.value++;
+    console.log('最终的pageConfig', pageConfig.value);
 
     if (!app) return;
 

apps/quantum-docs/docs/theory/data-source.md

@@ -30,7 +30,7 @@ interface IAppOptionsConfig {
     designWidth?: number; // 设计稿宽度
     ua?: string; // 用户代理字符串
     curPage?: Id; // 当前页面ID
-    platform?: 'mobile' | 'pc'; // 平台类型
+    platform?: 'mobile' | 'pc' | 'editor'; // 平台类型
     disabledFlexible?: boolean; // 是否禁用移动端适配
     transformStyle?: (style: Record<string, any>) => Record<string, any>; // 样式转换函数
     request?: IRequestFunction; // 自定义请求函数

packages/core/src/app.ts

@@ -3,6 +3,7 @@ import { LowCodeRoot } from './app';
 import { LowCodePage } from './page';
 import { Subscribe, isFunction, isObject, compiledNode, isArray, stringToBoolean } from '@quantum-lowcode/utils';
 import {template} from 'lodash-es';
+import { compliedConditions } from '@quantum-lowcode/data';
 
 /**
  * 节点构造选项接口
@@ -121,6 +122,9 @@ export class LowCodeNode extends Subscribe {
                     });
                 }
             }
+            if (this.root.dataSourceManager?.data) {
+                data.showResult = compliedConditions(data, this.root.dataSourceManager?.data);
+            }
         }
     }
 

packages/core/src/node.ts

@@ -3,6 +3,8 @@ export {DataSourceManager} from './src/data-source-manager';
 export {DataSource} from './src/data-source/base';
 export {HttpDataSource} from './src/data-source/http';
 
+export { compliedConditions } from './src/utils/tools';
+
 export {createDataSourceManager} from './src';
 
 export type * from './src/types';

packages/data-source/index.ts

@@ -80,7 +80,7 @@ export function trigger(sourceManage: ISourceManage, dataSourceId: Id, fieldId?:
                     js_utils_edit_attr(key, rawValue, curNode);
                     break;
                 case 'cond':
-                    // 触发条件依赖 TODO123
+                    // 触发条件依赖 TODO
                     curNode.showResult = compliedConditions(curNode, data);
                     break;
                 default:

packages/data-source/src/utils/deps.ts

@@ -2,31 +2,37 @@ import type { ISchemasNode } from '@quantum-lowcode/schemas';
 import { compliedCondition, isArray, js_utils_find_attr } from '@quantum-lowcode/utils';
 import type { IDataSourceManagerData } from '../types';
 
+/**
+ * 校验节点是否满足所有显示条件（ifShow），所有条件都满足才会显示
+ * @param node 节点
+ * @param data 所有数据源的数据
+ * @returns 是否显示
+ */
 export function compliedConditions(node: ISchemasNode, data: IDataSourceManagerData) {
-    if (!node.ifShow || !isArray(node.ifShow) || !node.ifShow.length) return true;
-
+    if (!node.ifShow || !isArray(node.ifShow) || !node.ifShow.length || !data) return true;
     for (const cond of node.ifShow) {
-        let result = true;
-        const { op, value, range, field, } = cond;
+        const { op, value, range, field } = cond;
+
+        if (!field || !field.length) {
+            return false;
+        }
         const [sourceId, ...fid] = field;
+        if (!sourceId) {
+            return false;
+        }
 
         const dsData = data[sourceId];
 
-        if (!dsData || !field.length) {
-            break;
+        if (!dsData) {
+            return false;
         }
 
         const fieldValue = js_utils_find_attr(dsData, fid.join('.'));
 
         if (!compliedCondition(op, fieldValue, value, range)) {
-            result = false;
-            break;
-        }
-
-        if (result) {
-            return true;
+            return false;
         }
     }
 
-    return false;
+    return true;
 }

packages/data-source/src/utils/tools.ts

@@ -27,7 +27,7 @@
                     </template>
                 </div>
             </slot>
-            
+
         </div>
         <div class="q-editor-nav-menu-right">
             <slot name=right></slot>
@@ -42,15 +42,15 @@ import { NodeType } from '@quantum-lowcode/schemas';
 import { Divider, Button, Tooltip } from 'ant-design-vue';
 import { isFunction } from '@quantum-lowcode/utils';
 defineOptions({
-    name: 'QEditorNavMenu',
+    name: 'QEditorNavMenu'
 });
 
 const props = withDefaults(
     defineProps<{
         btnList?: IMenuItem[];
     }>(),
     {
-        btnList: () => [],
+        btnList: () => []
     }
 );
 
@@ -63,18 +63,18 @@ const workspaceCenter = computed((): number => uiService?.get('workspaceCenter')
 
 const leftStyle = computed(() => {
     if (workspaceLeft.value === 1) {
-        return {flex: 1}
+        return {flex: 1};
     }
     return {
-        width: workspaceLeft.value + 'px',
-    }
-})
+        width: workspaceLeft.value + 'px'
+    };
+});
 const getCenterStyle = computed(() => {
-		if (workspaceCenter.value === 1) {
-			return { flex: 1 };
-		}
-		return { width: workspaceCenter.value + 'px' };
-	});
+    if (workspaceCenter.value === 1) {
+        return { flex: 1 };
+    }
+    return { width: workspaceCenter.value + 'px' };
+});
 
 const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
 const ctrl = isMac ? 'Command' : 'Ctrl';
@@ -86,7 +86,7 @@ function get_config(item: IMenuItem) {
     const config:IMenuButton[] = [];
     switch (item) {
         case '/':
-            config.push({type: 'divider', });
+            config.push({type: 'divider' });
             break;
         case 'zoom':
             config.push(
@@ -106,7 +106,7 @@ function get_config(item: IMenuItem) {
                 onClick: () => {
                     const node = services?.editorService.get('node');
                     node && services?.editorService.delete(node);
-                },
+                }
             });
             break;
         case 'undo':
@@ -115,7 +115,7 @@ function get_config(item: IMenuItem) {
                 icon: 'ArrowLeftOutlined',
                 tooltip: `后退(${ctrl}+z)`,
                 disabled: () => !services?.historyService.state.canUndo,
-                onClick: () => services?.editorService.undo(),
+                onClick: () => services?.editorService.undo()
             });
             break;
         case 'redo':
@@ -125,45 +125,45 @@ function get_config(item: IMenuItem) {
                 icon: 'ArrowRightOutlined',
                 tooltip: `前进(${ctrl}+Shift+z)`,
                 disabled: () => !services?.historyService.state.canRedo,
-                onClick: () => services?.editorService.redo(),
+                onClick: () => services?.editorService.redo()
             });
             break;
         case 'zoom-in':
             config.push({
                 type: 'button',
                 icon: 'ZoomInOutlined',
                 tooltip: `放大(${ctrl}+=)`,
-                onClick: () => uiService?.zoom(0.1),
+                onClick: () => uiService?.zoom(0.1)
             });
             break;
         case 'zoom-out':
             config.push({
                 type: 'button',
                 icon: 'ZoomOutOutlined',
                 tooltip: `縮小(${ctrl}+-)`,
-                onClick: () => uiService?.zoom(-0.1),
+                onClick: () => uiService?.zoom(-0.1)
             });
             break;
         case 'scale-to-fit':
             config.push({
                 type: 'button',
                 icon: 'BorderInnerOutlined',
                 tooltip: `缩放以适应(${ctrl}+0)`,
-                onClick: async() => uiService?.set('zoom', await uiService.calcZoom()),
+                onClick: async() => uiService?.set('zoom', await uiService.calcZoom())
             });
             break;
         case 'scale-to-original':
             config.push({
                 type: 'button',
                 icon: 'BorderOuterOutlined',
                 tooltip: `缩放到实际大小(${ctrl}+1)`,
-                onClick: () => uiService?.set('zoom', 1),
+                onClick: () => uiService?.set('zoom', 1)
             });
             break;
         default:
             config.push({
                 type: 'text',
-                text: item,
+                text: item
             });
             break;
     }