vue2-client 1.14.84 → 1.14.86

package/src/base-client/components/his/threeTestOrders/editor.vue

@@ -1,111 +1,111 @@
-<template>
-  <!-- 根据实际部署环境修改 editor.html 的路径 -->
-  <iframe
-    src="/his/editor/editor.html"
-    width="100%"
-    height="800"
-    frameborder="0"
-    @load="onIframeLoad"
-    ref="editorIframe">
-  </iframe>
-</template>
-
-<script setup>
-
-import { ref, onBeforeUnmount } from 'vue'
-
-const editorIframe = ref(null)
-const checkEditorTimer = ref(null)
-const checkCount = ref(0)
-const editor = ref(null)
-const iframeWindow = ref(null)
-// 对外暴露的获取editor方法
-const getEditor = () => {
-  if (editor.value) {
-    return editor.value
-  }
-  if (iframeWindow.value && iframeWindow.value.editor) {
-    editor.value = iframeWindow.value.editor
-    return editor.value
-  }
-  if (editorIframe.value && editorIframe.value.contentWindow && editorIframe.value.contentWindow.editor) {
-    editor.value = editorIframe.value.contentWindow.editor
-    return editor.value
-  }
-  return null
-}
-// 创建体温单方法
-const createVitalSigns = (data) => {
-  const editorObj = getEditor()
-  if (!editorObj) {
-    throw new Error('editor对象未初始化，无法创建体温单')
-  }
-  if (typeof editorObj.createVitalSigns === 'function') {
-    return editorObj.createVitalSigns(data)
-  } else {
-    throw new Error('editor对象未包含createVitalSigns方法')
-  }
-}
-
-// 检查editor对象是否已初始化
-const startEditorCheck = (frameWindow, iframe) => {
-  if (checkEditorTimer.value) {
-    clearInterval(checkEditorTimer.value)
-  }
-  checkCount.value = 0
-  checkEditorTimer.value = setInterval(() => {
-    checkCount.value++
-    try {
-      const editorObj = frameWindow.editor
-      if (editorObj && typeof editorObj.createVitalSigns === 'function') {
-        clearInterval(checkEditorTimer.value)
-        editor.value = editorObj
-        // 将editor对象暴露到全局
-        window.iframeEditor = editorObj
-        window.iframeWindow = frameWindow
-        // 触发事件
-        emit('editor-ready', editorObj)
-        emit('load', { target: iframe, editor: editorObj })
-        // 发送消息通知
-        window.parent.postMessage({ type: 'editorReady' }, '*')
-      }
-    } catch (err) {
-      console.error('检查editor对象时出错:', err)
-    }
-    if (checkCount.value >= 20) {
-      clearInterval(checkEditorTimer.value)
-      console.error('Editor 对象加载失败')
-    }
-  }, 500)
-}
-// iframe加载完成的处理
-const onIframeLoad = (e) => {
-  const iframe = e.target
-  const frameWindow = iframe.contentWindow
-  iframeWindow.value = frameWindow
-  if (!frameWindow) {
-    console.error('无法访问 iframe 内容')
-    return
-  }
-  startEditorCheck(frameWindow, iframe)
-}
-// 组件销毁前清理
-onBeforeUnmount(() => {
-  if (checkEditorTimer.value) {
-    clearInterval(checkEditorTimer.value)
-  }
-})
-// 暴露方法给父组件
-defineExpose({ getEditor, createVitalSigns })
-
-// 定义事件
-const emit = defineEmits(['editor-ready', 'load'])
-</script>
-
-<style scoped>
-iframe {
-  border: none;
-  width: 100%;
-  min-height: 800px;
-}
-</style>
+<template>
+  <!-- 根据实际部署环境修改 editor.html 的路径 -->
+  <iframe
+    src="/his/editor/editor.html"
+    width="100%"
+    height="800"
+    frameborder="0"
+    @load="onIframeLoad"
+    ref="editorIframe">
+  </iframe>
+</template>
+
+<script setup>
+
+import { ref, onBeforeUnmount } from 'vue'
+
+const editorIframe = ref(null)
+const checkEditorTimer = ref(null)
+const checkCount = ref(0)
+const editor = ref(null)
+const iframeWindow = ref(null)
+// 对外暴露的获取editor方法
+const getEditor = () => {
+  if (editor.value) {
+    return editor.value
+  }
+  if (iframeWindow.value && iframeWindow.value.editor) {
+    editor.value = iframeWindow.value.editor
+    return editor.value
+  }
+  if (editorIframe.value && editorIframe.value.contentWindow && editorIframe.value.contentWindow.editor) {
+    editor.value = editorIframe.value.contentWindow.editor
+    return editor.value
+  }
+  return null
+}
+// 创建体温单方法
+const createVitalSigns = (data) => {
+  const editorObj = getEditor()
+  if (!editorObj) {
+    throw new Error('editor对象未初始化，无法创建体温单')
+  }
+  if (typeof editorObj.createVitalSigns === 'function') {
+    return editorObj.createVitalSigns(data)
+  } else {
+    throw new Error('editor对象未包含createVitalSigns方法')
+  }
+}
+
+// 检查editor对象是否已初始化
+const startEditorCheck = (frameWindow, iframe) => {
+  if (checkEditorTimer.value) {
+    clearInterval(checkEditorTimer.value)
+  }
+  checkCount.value = 0
+  checkEditorTimer.value = setInterval(() => {
+    checkCount.value++
+    try {
+      const editorObj = frameWindow.editor
+      if (editorObj && typeof editorObj.createVitalSigns === 'function') {
+        clearInterval(checkEditorTimer.value)
+        editor.value = editorObj
+        // 将editor对象暴露到全局
+        window.iframeEditor = editorObj
+        window.iframeWindow = frameWindow
+        // 触发事件
+        emit('editor-ready', editorObj)
+        emit('load', { target: iframe, editor: editorObj })
+        // 发送消息通知
+        window.parent.postMessage({ type: 'editorReady' }, '*')
+      }
+    } catch (err) {
+      console.error('检查editor对象时出错:', err)
+    }
+    if (checkCount.value >= 20) {
+      clearInterval(checkEditorTimer.value)
+      console.error('Editor 对象加载失败')
+    }
+  }, 500)
+}
+// iframe加载完成的处理
+const onIframeLoad = (e) => {
+  const iframe = e.target
+  const frameWindow = iframe.contentWindow
+  iframeWindow.value = frameWindow
+  if (!frameWindow) {
+    console.error('无法访问 iframe 内容')
+    return
+  }
+  startEditorCheck(frameWindow, iframe)
+}
+// 组件销毁前清理
+onBeforeUnmount(() => {
+  if (checkEditorTimer.value) {
+    clearInterval(checkEditorTimer.value)
+  }
+})
+// 暴露方法给父组件
+defineExpose({ getEditor, createVitalSigns })
+
+// 定义事件
+const emit = defineEmits(['editor-ready', 'load'])
+</script>
+
+<style scoped>
+iframe {
+  border: none;
+  width: 100%;
+  min-height: 800px;
+}
+</style>

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

@@ -1,61 +1,87 @@
 <template>
-  <div class="liuli_page_render_row">
-    <a-row type="flex">
-      <!-- 对于row类型，需要遍历children -->
-      <a-col :key="`page-col-${col.id}`" v-for="col in (row.type === 'row' ? row.children : [row])" :span="col.span ? col.span : 24">
-        <template v-if="col.type === 'row'">
-          <render-row
-            v-for="(nestedRow, index) in col.children"
-            :row="nestedRow"
-            :key="`page-col-${col.id}-${index}`" />
-        </template>
+  <a-row
+    type="flex"
+    :gutter="row.gutter || 0"
+    :align="row.align || 'top'"
+    :justify="row.justify || 'start'"
+  >
+    <a-col
+      v-for="col in getColumns"
+      :key="`page-col-${col.id}`"
+      :span="col.span || 24"
+      :xs="col.xs"
+      :sm="col.sm"
+      :md="col.md"
+      :lg="col.lg"
+      :xl="col.xl"
+      :xxl="col.xxl"
+    >
+      <!-- 行类型，递归渲染子行 -->
+      <template v-if="col.type === 'row'">
+        <render-row
+          v-for="(nestedRow, index) in col.children"
+          :row="nestedRow"
+          :key="`nested-row-${col.id}-${index}`"
+        />
+      </template>
+
+      <!-- 组件类型，渲染动态组件 -->
+      <template v-else>
         <component
-          v-if="col.type !== 'row'"
-          :ref="setRef(col.id)"
-          :is="getComponentType(col.type)"
-          v-bind="col.props">
-          <template v-if="col.children">
+          :ref="(el) => registerComponentRef(col.id, el)"
+          :is="resolveComponentType(col.type)"
+          v-bind="col.props"
+        >
+          <!-- 如果组件有子组件，递归渲染子行 -->
+          <template v-if="col.children?.length">
             <render-row
               v-for="(nestedRow, index) in col.children"
               :row="nestedRow"
-              :key="`page-col-${col.id}-${index}`" />
+              :key="`comp-child-${col.id}-${index}`"
+            />
           </template>
         </component>
-      </a-col>
-    </a-row>
-  </div>
+      </template>
+    </a-col>
+  </a-row>
 </template>
 
 <script setup>
-import { defineProps, inject } from 'vue'
+import { defineProps, inject, computed } from 'vue'
 
+// 注入注册组件方法
 const registerComponent = inject('registerComponent')
 
+// 支持的组件类型映射
 const components = {
-  XTreeView: () => import('@vue2-client/base-client/components/layout/XTreeView'),
+  XFormTable: () => import('@vue2-client/base-client/components/common/XFormTable'),
   XAddNativeForm: () => import('@vue2-client/base-client/components/common/XAddNativeForm'),
   XErrorView: () => import('@vue2-client/base-client/components/layout/XPageView/XErrorView')
 }
 
-defineProps({
+// 定义属性
+const props = defineProps({
   row: {
     type: Object,
     required: true
   }
 })
 
-const getComponentType = (type) => {
+// 获取列数组
+const getColumns = computed(() => {
+  return props.row.type === 'row' ? props.row.children : [props.row]
+})
+
+// 解析组件类型
+const resolveComponentType = (type) => {
+  if (!type) return components.XErrorView
   return components[type] || components.XErrorView
 }
 
-const setRef = (id) => {
-  return (el) => {
-    if (el) {
-      console.warn(id)
-      console.warn(el)
-      registerComponent(id, el)
-      return id
-    }
+// 注册组件引用
+const registerComponentRef = (id, el) => {
+  if (el) {
+    registerComponent(id, el)
   }
 }
 </script>

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

@@ -1,11 +1,22 @@
 <script setup>
-
+// 无需使用 props
 </script>
 
 <template>
-  <div>渲染失败</div>
+  <div class="liuli-error-view">
+    <a-result status="error" title="组件渲染失败">
+      <template #extra>
+        <a-button type="primary">重试</a-button>
+      </template>
+    </a-result>
+  </div>
 </template>
 
 <style scoped lang="less">
-
+.liuli-error-view {
+  padding: 16px;
+  text-align: center;
+  color: #ff4d4f;
+  font-size: 14px;
+}
 </style>

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'