vue2-client 1.14.83 → 1.14.85

package/src/base-client/components/layout/XPageView/XPageView.vue

@@ -2,71 +2,89 @@
 import { getConfigByName } from '@vue2-client/services/api/common'
 import { reactive, ref, provide } from 'vue'
 import RenderRow from './RenderRow'
-import Exp500 from '@vue2-client/pages/exception/500.vue'
+import XErrorView from '@vue2-client/base-client/components/layout/XPageView/XErrorView.vue'
 
+// 页面布局配置
 const layout = ref(null)
 
-// 加载状态，0：加载中，1：已加载，2：出现错误
-const loaded = ref(0)
+// 加载状态：0-加载中，1-已加载，2-出现错误
+const loadingStatus = {
+  LOADING: 0,
+  LOADED: 1,
+  ERROR: 2
+}
+const loaded = ref(loadingStatus.LOADING)
 
-// 声明组件总数
+// 组件计数
 const componentTotal = ref(0)
-
-// 注册组件总数
 const registerComponentTotal = ref(0)
 
-// 组件注册集
+// 组件注册集合
 const componentRefMap = reactive({})
 
-// 通用参数
-const data = {
+// 数据上下文
+const dataContext = reactive({
   comps: componentRefMap,
   func: {
-    getConfigByName: getConfigByName
+    getConfigByName
   }
-}
+})
 
 /**
  * 初始化构建页面组件
- * @param params
  */
-function init (params) {
-  const {
-    configName,
-    configValue,
-    serviceName
-  } = params
-  loaded.value = 0
-  const getConfigAfter = (res) => {
-    if (res == null) {
-      loaded.value = 2
+const init = (params) => {
+  const { configName, configValue, serviceName } = params
+
+  // 重置状态
+  loaded.value = loadingStatus.LOADING
+  componentTotal.value = 0
+  registerComponentTotal.value = 0
+  Object.keys(componentRefMap).forEach(key => delete componentRefMap[key])
+
+  const processConfig = (config) => {
+    if (!config) {
+      loaded.value = loadingStatus.ERROR
       return
     }
-    layout.value = res
-    // 设置组件总量
+
+    layout.value = config
     setComponentTotal(layout.value.children)
-    loaded.value = 1
+    loaded.value = loadingStatus.LOADED
   }
+
   if (configName) {
-    getConfigByName(configName, serviceName, getConfigAfter)
+    getConfigByName(configName, serviceName, processConfig)
+  } else if (configValue) {
+    try {
+      const config = typeof configValue === 'string' ? JSON.parse(configValue) : configValue
+      processConfig(config)
+    } catch (error) {
+      console.error('配置解析错误:', error)
+      loaded.value = loadingStatus.ERROR
+    }
   } else {
-    getConfigAfter(JSON.parse(configValue))
+    loaded.value = loadingStatus.ERROR
   }
 }
 
 /**
  * 注册组件
- * @param name 组件名称
- * @param vm 组件实例
  */
-function registerComponent (name, vm) {
+const registerComponent = (name, vm) => {
+  if (!vm) return
+
   componentRefMap[name] = vm
-  registerComponentTotal.value = registerComponentTotal.value + 1
-  console.info(`总组件数量：${componentTotal.value}，已注册数量：${registerComponentTotal.value}`)
+  registerComponentTotal.value++
+  console.debug(`总组件数量：${componentTotal.value}，已注册数量：${registerComponentTotal.value}`)
+
   // 初始化页面
-  initPage()
+  if (layout.value?.onMounted && registerComponentTotal.value === 1) {
+    initPage()
+  }
+
+  // 所有组件都已注册完成
   if (registerComponentTotal.value >= componentTotal.value) {
-    // 注册事件
     registerEvents(layout.value.children)
   }
 }
@@ -75,26 +93,33 @@ provide('registerComponent', registerComponent)
 /**
  * 初始化页面
  */
-function initPage () {
-  if (layout.value.onMounted) {
-    // eslint-disable-next-line no-eval
-    const onMountedFun = eval('(' + layout.value.onMounted + ')')
-    onMountedFun(data)
+const initPage = () => {
+  if (!layout.value?.onMounted) return
+
+  try {
+    // 使用 Function 构造函数替代 eval
+    // eslint-disable-next-line no-new-func
+    const onMountedFun = new Function('data', `return (${layout.value.onMounted})(data)`)
+    onMountedFun(dataContext)
+  } catch (error) {
+    console.error('页面初始化错误:', error)
   }
 }
 
 /**
  * 设置需要注册的组件总数
- * @param children 组件集合
  */
-function setComponentTotal (children) {
+const setComponentTotal = (children) => {
+  if (!children?.length) return
+
   children.forEach((child) => {
     // 如果不是row类型，追加组件数量
     if (child.type !== 'row') {
-      componentTotal.value = componentTotal.value + 1
+      componentTotal.value++
     }
+
     // 递归追加子组件数量
-    if (child.children) {
+    if (child.children?.length) {
       setComponentTotal(child.children)
     }
   })
@@ -102,54 +127,96 @@ function setComponentTotal (children) {
 
 /**
  * 注册组件事件
- * @param children 组件集合
  */
-function registerEvents (children) {
+const registerEvents = (children) => {
+  if (!children?.length) return
+
   children.forEach((child) => {
     // 如果有事件，注册它们
     if (child.event) {
       Object.entries(child.event).forEach(([eventName, handler]) => {
-        // eslint-disable-next-line no-eval
-        const eventHandler = eval('(' + handler + ')')
-        const componentInstance = componentRefMap[child.id]
-        if (componentInstance) {
-          // 创建一个包装函数以传递额外参数
-          const wrappedHandler = function (...args) {
-            // 这里可以传递额外的参数，例如：
-            eventHandler.call(componentInstance, ...args, data)
+        try {
+          // 使用 Function 构造函数替代 eval
+          // eslint-disable-next-line no-new-func
+          const eventHandler = new Function('...args', `return (${handler})(...args)`)
+          const componentInstance = componentRefMap[child.id]
+
+          if (componentInstance) {
+            componentInstance.$on(eventName, (...args) => {
+              eventHandler.call(componentInstance, ...args, dataContext)
+            })
           }
-          componentInstance.$on(eventName, wrappedHandler)
+        } catch (error) {
+          console.error(`注册事件 ${eventName} 错误:`, error)
         }
       })
     }
 
     // 递归注册子组件的事件
-    if (child.children) {
+    if (child.children?.length) {
       registerEvents(child.children)
     }
   })
 }
 
-defineExpose({
-  init
-})
-
+// 导出组件接口
+defineExpose({ init })
 </script>
 
 <template>
-  <div class="liuli_page">
-    <div class="liuli_page_main" v-if="loaded === 1">
-      <render-row
-        v-for="row in layout.children"
-        :key="row.id"
-        :row="row"
-      />
-    </div>
-    <div class="liuli_page_error" v-else-if="loaded === 2">
-      <exp500></exp500>
-    </div>
-  </div>
+  <a-row
+    type="flex"
+    :gutter="layout?.gutter || 0"
+    :align="layout?.align || 'top'"
+    :justify="layout?.justify || 'start'"
+    class="liuli-page">
+    <template v-if="loaded === loadingStatus.LOADED">
+      <template v-if="layout.children?.length">
+        <a-col v-for="row in layout.children" :key="`page-col-${row.id}`">
+          <render-row :row="row"/>
+        </a-col>
+      </template>
+      <template v-else>
+        <div class="liuli-page__empty">
+          <a-empty description="无页面内容" />
+        </div>
+      </template>
+    </template>
+
+    <template v-else-if="loaded === loadingStatus.LOADING">
+      <div class="liuli-page__loading">
+        <a-spin tip="页面加载中..." />
+      </div>
+    </template>
+
+    <template v-else>
+      <div class="liuli-page__error">
+        <XErrorView />
+      </div>
+    </template>
+  </a-row>
 </template>
 
 <style scoped lang="less">
+.liuli-page {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  &__content {
+    min-height: 100px;
+  }
+
+  &__loading, &__error, &__empty {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    min-height: 200px;
+  }
+
+  &__error {
+    width: 100%;
+  }
+}
 </style>

package/src/base-client/components/layout/XPageView/index.js

@@ -1,3 +1 @@
-import XPageView from './XPageView'
-
-export default XPageView
+export { default } from './XPageView'

package/src/base-client/components/layout/XPageView/index.md

@@ -1,38 +1,77 @@
 # XPageView
 
-JSON配置构建页面的根容器组件
+基于 JSON 配置动态构建页面的容器组件，具有高度的灵活性和可扩展性。
 
-引用方式：
+## 使用方法
 
 ```vue
 <template>
-  <x-page-view ref="xPageView"></x-page-view>
+  <x-page-view ref="pageView" />
 </template>
-<script>
-  import XPageView from '@vue2-client/base-client/components/layout/XPageView'
-
-  export default {
-    components: {
-      XPageView
-    },
-    mounted () {
-      this.initView()
-    },
-    methods: {
-      // 初始化组件
-      initView () {
-        this.$refs.xPageView.init({
-          configName: 'templateTreeConfig',
-          serviceName: 'af-his'
-        })
-      }
-    }
-  }
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import XPageView from '@vue2-client/base-client/components/layout/XPageView'
+
+const pageView = ref(null)
+
+onMounted(() => {
+  initView()
+})
+
+const initView = () => {
+  pageView.value.init({
+    configName: 'templateTreeConfig',
+    serviceName: 'af-his'
+  })
+}
 </script>
 ```
 
 ## API
 
-| 参数           | 说明      | 类型       | 默认值 |
-|--------------|---------|----------|-----|
-| init(params) | 初始化组件   | function | -   |
+### 属性
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| - | - | - | - |
+
+### 方法
+
+| 方法名 | 说明 | 参数 |
+| --- | --- | --- |
+| init | 初始化页面组件 | `{ configName, configValue, serviceName }` |
+
+### 参数说明
+
+| 参数名 | 说明 | 类型 | 必填 |
+| --- | --- | --- | --- |
+| configName | 配置名称，用于从服务端获取配置 | String | 二选一 |
+| configValue | 配置的JSON数据，可以是字符串或对象 | String/Object | 二选一 |
+| serviceName | 服务名称 | String | 是 |
+
+## 结构化配置项
+
+```json
+{
+  "children": [
+    {
+      "type": "row",
+      "id": "row1",
+      "gutter": 16,
+      "children": [
+        {
+          "type": "XFormTable",
+          "id": "table1",
+          "span": 24,
+          "props": { ... },
+          "event": {
+            "change": "function(val, data) { console.log(val) }"
+          }
+        }
+      ]
+    }
+  ],
+  "onMounted": "function(data) { console.log('页面已加载') }"
+}
+```

package/src/pages/XPageViewExample/index.vue

@@ -8,19 +8,52 @@ onMounted(() => {
   xPageViewRef.value.init({
     configValue: `{
         "type": "page",
-        "onMounted": "function (data) {data.comps['xTreeView1'].init({configName: 'templateTreeConfig',serviceName: 'af-his',env: 'dev'})}",
+        "onMounted": "function (data) {}",
+        "gutter": [16, 16],
         "children": [
             {
-                "id": "xTreeView1",
-                "type": "XTreeView",
+                "id": "row1",
+                "type": "row",
+                "gutter": 16,
+                "children": [
+                  {
+                    "id": "xFormTable2",
+                    "span": "12",
+                    "type": "XFormTable",
+                    "event": {
+                    },
+                    "props": {
+                      "serviceName": "af-system",
+                      "queryParamsName": "crud_dictionary_manage"
+                    },
+                    "children": [
+                    ]
+                  },
+                  {
+                    "id": "xFormTable3",
+                    "span": "12",
+                    "type": "XFormTable",
+                    "event": {
+                    },
+                    "props": {
+                      "serviceName": "af-system",
+                      "queryParamsName": "crud_dictionary_manage"
+                    },
+                    "children": [
+                    ]
+                  }
+                ]
+            },
+            {
+                "id": "xFormTable",
+                "type": "XFormTable",
                 "event": {
-                    "itemChecked": "function itemChecked (node, data) { if (node.type === 'all' || node.type === 'folder') { data.comps['xTreeViewAddNativeForm1'].close();return} data.func.getConfigByName('编辑模板数据Form', 'af-his', (res) => { data.comps['xTreeViewAddNativeForm1'].init({serviceName: 'af-his',formItems: res.formJson,showSubmitBtn: false,title: '收费',businessType: '新增',getDataParams: { content: {pms_patient_id: 1,template_id: node.id}}})})}"
+                },
+                "props": {
+                  "serviceName": "af-system",
+                  "queryParamsName": "crud_dictionary_manage"
                 },
                 "children": [
-                    {
-                        "id": "xTreeViewAddNativeForm1",
-                        "type": "XAddNativeForm"
-                    }
                 ]
             }
         ]

package/src/router/async/router.map.js

@@ -66,7 +66,7 @@ routerResource.example = {
   // component: () => import('@vue2-client/base-client/components/common/XRate/demo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XForm/demo.vue'),
   // component: () => import('@vue2-client/base-client/components/his/XTimeSelect/XTimeSelectDemo.vue'),
-  component: () => import('@vue2-client/base-client/components/his/XShiftSchedule/dome.vue'),
+  component: () => import('@vue2-client/base-client/components/his/XQuestionnaire/XQuestionnaireDemo.vue'),
   // component: () => import('@vue2-client/pages/WorkflowDetail/WorkFlowDemo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XConversation/XConversationDemo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XButtons/XButtonDemo.vue'),