ocpview-plus 1.2.7 → 1.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ocpview-plus",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "title": "ocpviewPlus",
   "description": "A high quality Service UI components Library with Vue.js",
   "homepage": "",

package/src/components/masterplate/billdetailform.vue

@@ -219,6 +219,159 @@ export default {
     },
 
     methods:{
+        loadDynamicConfig() {
+            try {
+                const postData = {
+                    modulecode: this.myConfig.modulecode,
+                    moduleid: this.myConfig.modulecode
+                };
+
+                this.asyncPost(
+                    this.uiconfig.resources,
+                    "uiconfigs.getPageConfig",
+                    postData,
+                    (data) => {
+                        if (!data || !this.uiconfig) {
+                            console.log('1 没有配置数据')
+                            return;
+                        }
+
+                        this.mergeDynamicConfig(
+                            this.uiconfig,
+                            data
+                        );
+                    }
+                    ,function(data) {
+                        console.error(data)
+                    },function(data) {
+                        console.error(data)
+                    });
+            } catch (e) {
+                console.error('动态配置加载失败', e);
+            }
+        },
+
+        /**
+         * 通用递归合并配置
+         * @param {Object} localConfig 本地 config（this.uiconfig）
+         * @param {Object} serverConfig 接口返回 config
+         */
+
+        mergeDynamicConfig(localConfig, serverConfig) {
+            if (!localConfig || !serverConfig) {
+                console.log('1 没有配置数据')
+                return;
+            }
+
+            // ✅ 1️⃣ 处理 billQueryConfig
+            if (
+                localConfig.billQueryConfig.gridConfig.items &&
+                serverConfig.billQueryConfig.gridConfig.items
+            ) {
+                this.mergeFlatItems(
+                    localConfig.billQueryConfig.gridConfig.items,
+                    serverConfig.billQueryConfig.gridConfig.items
+                );
+            }
+
+            // ✅ 2️⃣ 处理 detailConfig
+            if (localConfig.detailConfig && serverConfig.detailConfig) {
+                this.mergeDetailConfig(
+                    localConfig.detailConfig,
+                    serverConfig.detailConfig
+                );
+            }
+        },
+
+        mergeDetailConfig(localDetail, serverDetail) {
+
+            // ✅ formsConfig
+            if (
+                localDetail.formsConfig.items &&
+                serverDetail.formsConfig.items
+            ) {
+                this.mergeContainerItems(
+                    localDetail.formsConfig.items,
+                    serverDetail.formsConfig.items
+                );
+            }
+
+            // ✅ billDetailConfig
+            if (
+                localDetail.billDetailConfig.items &&
+                serverDetail.billDetailConfig.items
+            ) {
+                this.mergeContainerItems(
+                    localDetail.billDetailConfig.items,
+                    serverDetail.billDetailConfig.items
+                );
+            }
+        },
+
+        mergeContainerItems(localContainers, serverContainers) {
+
+            const containerMap = this.buildItemMap(localContainers);
+
+            serverContainers.forEach(serverContainer => {
+
+                const localContainer = containerMap.get(serverContainer.name);
+                if (!localContainer) {
+                    console.log('2 没有配置localcontainer')
+                    return;
+                }
+
+                // ✅ 合并容器自身属性
+                Object.assign(localContainer, serverContainer);
+
+                // ✅ 如果有子字段
+                if (
+                    Array.isArray(localContainer.items) &&
+                    Array.isArray(serverContainer.items)
+                ) {
+                    this.mergeFlatItems(
+                        localContainer.items,
+                        serverContainer.items
+                    );
+                }
+            });
+        },
+
+        mergeFlatItems(localItems, serverItems) {
+            const fieldMap = this.buildItemMap(localItems);
+
+            serverItems.forEach(serverItem => {
+                const localItem = fieldMap.get(serverItem.name);
+                console.log(serverItem.name, localItem)
+                if (localItem) {
+                    console.log('合并前', localItem)
+                    Object.assign(localItem, serverItem);
+                    console.log('merge后', JSON.stringify(this.uiconfig))
+                    this.uiconfig = Object.assign({}, this.uiconfig);
+                }
+            });
+        },
+
+        buildItemMap(items, map = new Map()) {
+            if (!Array.isArray(items)) return map;
+
+            items.forEach(item => {
+                if (!item) {
+                    console.log('3 没有配置数据')
+                    return;
+                }
+
+                if (item.name) {
+                    map.set(item.name, item);
+                }
+
+                if (Array.isArray(item.items)) {
+                    this.buildItemMap(item.items, map);
+                }
+            });
+
+            return map;
+        },
+
         getCurlAnchorData() {
             let tmp = [];
             this.anchorData.forEach(el => {

package/src/components/masterplate/lefttreerightdetails.vue

@@ -460,7 +460,7 @@ export default {
                 this.$refs.form.setReadOnly(true);
                 let temp = this.$refs.form.getData();
                 this.treeSeletedNode =[temp];
-                //this.initTree(true);
+                // this.initTree(true);
                 this.$refs.tree.updateNode(temp,'U');
                 if (!this.showTree) {
                     this.$refs.grid.refurbish();

package/src/components/tree/CompatTree.vue

@@ -1,52 +1,297 @@
+<template>
+    <Tree
+        ref="tree"
+        :data="innerData"
+        v-bind="$attrs"
+    >
+        <template #title="slotProps">
+            <component :is="{ render: () => renderWrapper(slotProps) }" />
+        </template>
+    </Tree>
+</template>
+
 <script>
-import { h } from 'vue'
-import { Tree } from 'view-ui-plus'
+import { h } from "vue"
+import { Tree } from "view-ui-plus"
 
 export default {
-    name: 'CompatTree',
 
-    components: {
-        Tree
-    },
+    name: "CompatTree",
+
+    components: { Tree },
 
     props: {
+
         data: {
             type: Array,
-            required: true
+            default: () => []
         },
+
         render: {
             type: Function,
             default: null
         }
+
+    },
+
+
+    data() {
+
+        return {
+
+            innerData: []
+
+        }
+
+    },
+
+    watch: {
+
+        // ⚠️ 不使用 deep watch，否则树结构会卡死
+        data: {
+
+            immediate: true,
+
+            handler(val) {
+
+                if (Array.isArray(val)) {
+                    console.log("watch data triggered")
+                    // 复制引用，避免父子互相影响
+                    this.innerData = [...val]
+
+                } else {
+
+                    this.innerData = []
+
+                }
+
+            }
+
+        }
+
+    },
+
+    computed: {
+
+        /**
+         * Vue2 Tree flatState 兼容
+         */
+        flatState() {
+
+            const list = []
+            console.log("flatState computing")
+            const walk = (nodes) => {
+
+                if (!Array.isArray(nodes)) return
+
+                for (const n of nodes) {
+
+                    list.push({ node: n })
+
+                    if (Array.isArray(n.children)) {
+
+                        walk(n.children)
+
+                    }
+
+                }
+
+            }
+
+            walk(this.innerData)
+
+            return list
+
+        }
+
     },
 
     methods: {
 
-        // 👇 renderWrapper 就放在这里（methods 里）
+        /**
+         * Vue2 render(h) 兼容
+         */
         renderWrapper(slotProps) {
+
             const nodeRender =
                 slotProps.data.render || this.render
 
             if (!nodeRender) {
+
                 return slotProps.data.title
+
             }
 
-            return nodeRender(h, slotProps)
+            return nodeRender(h, {
+                root: slotProps.root,
+                node: slotProps.node,
+                data: slotProps.data
+            })
+
+        },
+
+        /**
+         * 获取选中节点
+         */
+        getSelectedNodes() {
+
+            return this.$refs.tree?.getSelectedNodes?.() || []
+
+        },
+
+        /**
+         * 获取checkbox节点
+         */
+        getCheckedNodes() {
+
+            return this.$refs.tree?.getCheckedNodes?.() || []
+
+        },
+
+        /**
+         * 全部展开
+         */
+        expandAll() {
+
+            this.$refs.tree?.expandAll?.()
+
+        },
+
+        /**
+         * 全部收起
+         */
+        collapseAll() {
+
+            this.$refs.tree?.collapseAll?.()
+
+        },
+
+        /**
+         * 设置树数据
+         */
+        setData(data) {
+
+            this.innerData =
+                Array.isArray(data)
+                    ? [...data]
+                    : []
+
+
+        },
+
+        /**
+         * 刷新树
+         */
+        refurbish() {
+
+            const tmp = [...this.innerData]
+
+            this.innerData = []
+
+            this.$nextTick(() => {
+
+                this.innerData = tmp
+
+            })
+
+        },
+
+        /**
+         * 获取root节点
+         */
+        getRootNodes() {
+
+            return this.innerData
+
+        },
+
+        /**
+         * 更新节点
+         */
+        updateNode(data, flag) {
+
+            const idField = "id"
+            console.log("updateNode called", data, flag)
+            const findNode = (list, id) => {
+
+                for (const node of list) {
+
+                    if (node[idField] === id) {
+
+                        return node
+
+                    }
+
+                    if (Array.isArray(node.children)) {
+
+                        const res =
+                            findNode(node.children, id)
+
+                        if (res) return res
+
+                    }
+
+                }
+
+                return null
+
+            }
+
+            if (flag === "U") {
+
+                const node =
+                    findNode(this.innerData, data[idField])
+
+                if (node) {
+
+                    Object.assign(node, data)
+
+                }
+
+            }
+
+            if (flag === "D") {
+
+                const removeNode = (list, id) => {
+
+                    const index =
+                        list.findIndex(
+                            n => n[idField] === id
+                        )
+
+                    if (index > -1) {
+
+                        list.splice(index, 1)
+
+                        return true
+
+                    }
+
+                    for (const n of list) {
+
+                        if (
+                            Array.isArray(n.children) &&
+                            removeNode(n.children, id)
+                        ) {
+
+                            return true
+
+                        }
+
+                    }
+
+                    return false
+
+                }
+
+                removeNode(this.innerData, data[idField])
+
+            }
+
+
         }
 
     }
+
 }
 </script>
-
-<template>
-    <Tree :data="data" selectable>
-        <template #title="slotProps">
-            <!-- 这里调用 renderWrapper -->
-            <component
-                :is="{
-          render: () => renderWrapper(slotProps)
-        }"
-            />
-        </template>
-    </Tree>
-</template>