【实战】1 天搭完移动端 OA！Qoder+OneCode-RAD 构建 AI 低代码体系的踩坑与收获

ood/
├─ js/
│  ├─ UI.js        # 组件基类，所有自定义组件都要继承它
│  ├─ Dom.js       # DOM工具类，仅支持getSubNode、css、on等基础方法
│  ├─ mobile/      # 移动端适配，触摸事件、响应式都在这
│  └─ pc/          # PC端组件，暂时用不上
├─ css/            # CSS变量，改主题色全靠它
└─ components/     # 自定义组件目录，新建`industry/oa`放OA组件
└─ conf/           # 配置目录，含组件注册核心文件conf_widgets.js

ood.Class("ood.Mobile.OA.Notice", ["ood.UI", "ood.absList"], {
    Instance: {
        Initialize: function() {
            this.constructor.upper.prototype.Initialize.call(this);
            this._notices = [];
            this.initDom(); 
            this.bindTouchEvents(); 
        },
        
        initDom: function() {
            var profile = this.get(0);
            // 仅用Dom.js已定义的getSubNode方法获取节点，替代find
            this.$container = profile.getSubNode('CONTAINER');
            // 用Dom.js的css方法设样式，符合框架限制
            ood.Dom.css(this.$container, {
                'padding': 'var(--mobile-spacing-md)',
                'background': 'var(--mobile-bg-primary)'
            });
        },
        
        // 封装“获取兄弟节点”方法，基于Dom.js现有方法实现
        getSiblings: function(element) {
            var siblings = [];
            // 用Dom.js的parent获取父节点，children获取子节点
            var parent = ood.Dom.parent(element);
            var children = ood.Dom.children(parent, '.notice-item');
            // 过滤自身，实现兄弟节点查询
            children.forEach(child => {
                if (child !== element) siblings.push(child);
            });
            return siblings;
        },
        
        bindTouchEvents: function() {
            var self = this;
            // 用Dom.js的on方法绑定事件，符合框架规范
            ood.Dom.on(this.$container, 'touchend', '.notice-item', function(e) {
                ood.Dom.removeClass(this, 'notice-item-active');
                // 调用自定义封装的getSiblings，不直接用Dom.js未定义方法
                var siblings = self.getSiblings(this);
                siblings.forEach(sib => ood.Dom.removeClass(sib, 'notice-item-active'));
                var index = ood.Dom.data(this, 'index');
                self.onNoticeClick(self._notices[index]);
            });
        },
        
        // 其他方法：数据渲染用empty+append，符合Dom.js方法限制...
    },
    
    //  Templates、Appearances、DataModel部分不变，符合OOD规范...
});

var WIDGETS = [
    // 原有组件配置...
    // OA行业组件：通知公告
    {
        "id": "ood.Mobile.OA.Notice",          // 组件唯一ID，需与类名一致
        "key": "ood.Mobile.OA.Notice",         // 组件标识，与ID对应
        "caption": "OA通知公告",                // 设计器显示名称
        "imageClass": "ri ri-notification-line",// 图标（Remix Icon）
        "draggable": true,                     // 支持拖拽
        "type": "mobile",                      // 移动端组件
        "category": "OA行业组件",               // 组件分类
        "entry": "components/industry/oa/Notice.js", // 组件入口路径
        "iniProp": {                           // 默认属性，与DataModel对应
            "notices": [
                {
                    "id": "1",
                    "title": "关于假期安排的通知",
                    "time": "2025-04-25",
                    "summary": "根据相关规定，结合实际情况，现将假期安排通知如下...",
                    "important": true,
                    "read": false,
                    "disabled": false
                }
            ],
            "showImportantMark": true
        },
        "propPanel": [                         // 属性面板配置，用于设计器编辑
            {
                "name": "notices",
                "label": "通知数据",
                "type": "json",
                "desc": "填写通知列表数据，格式参考默认值"
            },
            {
                "name": "showImportantMark",
                "label": "显示重要标记",
                "type": "boolean",
                "default": true
            }
        ]
    },
    // OA待办事项组件配置（格式同上）...
    // 其余6个OA组件配置...
];

// index.js：OA组件库入口（符合OneCode加载规则）
(function() {
    // 确保OOD框架已加载
    if (!window.ood) {
        console.error("OOD framework is not loaded!");
        return;
    }
    
    // 组件加载顺序：先加载基础依赖，再加载业务组件
    var components = [
        'Notice', 'TodoList', 'ApprovalFlow', 
        'Schedule', 'ContactList', 'FileManager',
        'MeetingManager', 'Attendance'
    ];
    
    // 动态加载组件（基于OneCode组件路径规则）
    components.forEach(componentName => {
        var componentPath = `components/industry/oa/${componentName}.js`;
        // 调用OneCode的加载方法，确保组件正确初始化
        ood.loader.load(componentPath, function() {
            console.log(`OA component ${componentName} loaded successfully`);
        });
    });
    
    // 提供全局访问入口，方便调试
    window.OAComponents = window.OAComponents || {};
    components.forEach(componentName => {
        window.OAComponents[componentName] = ood.Class.getInstance(`ood.Mobile.OA.${componentName}`);
    });
})();