vue2-client 1.15.10 → 1.15.12

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

@@ -1,223 +1,223 @@
-<script setup>
-import { getConfigByName } from '@vue2-client/services/api/common'
-import { reactive, ref, provide } from 'vue'
-import RenderRow from './RenderRow'
-import XErrorView from '@vue2-client/base-client/components/layout/XPageView/XErrorView.vue'
-
-// 页面布局配置
-const layout = ref(null)
-
-// 加载状态：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 dataContext = reactive({
-  comps: componentRefMap,
-  func: {
-    getConfigByName
-  },
-  data: {}
-})
-
-/**
- * 初始化构建页面组件
- */
-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 = config
-    setComponentTotal(layout.value.children)
-    loaded.value = loadingStatus.LOADED
-  }
-
-  if (configName) {
-    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 {
-    loaded.value = loadingStatus.ERROR
-  }
-}
-
-/**
- * 注册组件
- */
-const registerComponent = (name, vm) => {
-  if (!vm) return
-
-  componentRefMap[name] = vm
-  registerComponentTotal.value++
-  console.debug(`总组件数量：${componentTotal.value}，已注册数量：${registerComponentTotal.value}`)
-
-  // 所有组件都已注册完成
-  if (registerComponentTotal.value >= componentTotal.value) {
-    registerEvents(layout.value.children)
-    // 初始化页面
-    initPage()
-  }
-}
-provide('registerComponent', registerComponent)
-// 提供数据上下文给子组件
-provide('dataContext', dataContext)
-
-/**
- * 初始化页面
- */
-const initPage = () => {
-  if (!layout.value?.onMounted) return
-
-  console.info('开始初始化页面')
-  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)
-  }
-}
-
-/**
- * 设置需要注册的组件总数
- */
-const setComponentTotal = (children) => {
-  if (!children?.length) return
-
-  children.forEach((child) => {
-    // 如果不是row和text类型，追加组件数量
-    if (child.type !== 'row' && child.type !== 'text') {
-      componentTotal.value++
-    }
-
-    // 递归追加子组件数量
-    if (child.children?.length) {
-      setComponentTotal(child.children)
-    }
-  })
-}
-
-/**
- * 注册组件事件
- */
-const registerEvents = (children) => {
-  if (!children?.length) return
-
-  children.forEach((child) => {
-    // 如果有事件，注册它们
-    if (child.event) {
-      Object.entries(child.event).forEach(([eventName, handler]) => {
-        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)
-            })
-          }
-        } catch (error) {
-          console.error(`注册事件 ${eventName} 错误:`, error)
-        }
-      })
-    }
-
-    // 递归注册子组件的事件
-    if (child.children?.length) {
-      registerEvents(child.children)
-    }
-  })
-}
-
-// 导出组件接口
-defineExpose({ init })
-</script>
-
-<template>
-  <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}`" :span="24">
-          <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>
+<script setup>
+import { getConfigByName } from '@vue2-client/services/api/common'
+import { reactive, ref, provide } from 'vue'
+import RenderRow from './RenderRow'
+import XErrorView from '@vue2-client/base-client/components/layout/XPageView/XErrorView.vue'
+
+// 页面布局配置
+const layout = ref(null)
+
+// 加载状态：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 dataContext = reactive({
+  comps: componentRefMap,
+  func: {
+    getConfigByName
+  },
+  data: {}
+})
+
+/**
+ * 初始化构建页面组件
+ */
+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 = config
+    setComponentTotal(layout.value.children)
+    loaded.value = loadingStatus.LOADED
+  }
+
+  if (configName) {
+    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 {
+    loaded.value = loadingStatus.ERROR
+  }
+}
+
+/**
+ * 注册组件
+ */
+const registerComponent = (name, vm) => {
+  if (!vm) return
+
+  componentRefMap[name] = vm
+  registerComponentTotal.value++
+  console.debug(`总组件数量：${componentTotal.value}，已注册数量：${registerComponentTotal.value}`)
+
+  // 所有组件都已注册完成
+  if (registerComponentTotal.value >= componentTotal.value) {
+    registerEvents(layout.value.children)
+    // 初始化页面
+    initPage()
+  }
+}
+provide('registerComponent', registerComponent)
+// 提供数据上下文给子组件
+provide('dataContext', dataContext)
+
+/**
+ * 初始化页面
+ */
+const initPage = () => {
+  if (!layout.value?.onMounted) return
+
+  console.info('开始初始化页面')
+  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)
+  }
+}
+
+/**
+ * 设置需要注册的组件总数
+ */
+const setComponentTotal = (children) => {
+  if (!children?.length) return
+
+  children.forEach((child) => {
+    // 如果不是row和text类型，追加组件数量
+    if (child.type !== 'row' && child.type !== 'text') {
+      componentTotal.value++
+    }
+
+    // 递归追加子组件数量
+    if (child.children?.length) {
+      setComponentTotal(child.children)
+    }
+  })
+}
+
+/**
+ * 注册组件事件
+ */
+const registerEvents = (children) => {
+  if (!children?.length) return
+
+  children.forEach((child) => {
+    // 如果有事件，注册它们
+    if (child.event) {
+      Object.entries(child.event).forEach(([eventName, handler]) => {
+        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)
+            })
+          }
+        } catch (error) {
+          console.error(`注册事件 ${eventName} 错误:`, error)
+        }
+      })
+    }
+
+    // 递归注册子组件的事件
+    if (child.children?.length) {
+      registerEvents(child.children)
+    }
+  })
+}
+
+// 导出组件接口
+defineExpose({ init })
+</script>
+
+<template>
+  <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}`" :span="24">
+          <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/XTab/XTab.vue

@@ -1,96 +1,96 @@
-<template>
-  <a-card :bordered="false" :body-style="bodyStyle">
-    <a-tabs
-      :tabBarGutter="tabBarGutter"
-      :activeKey="activeKey"
-      @change="tabPaneChange"
-      :hideAdd="true"
-      :tabBarStyle="{ display: showTabBar ? 'block' : 'none' }"
-    >
-      <slot name="extraBeforeTabs"></slot>
-      <a-tab-pane
-        :forceRender="true"
-        v-for="(tab, index) in data"
-        :key="index"
-        :tab="tab.title"
-      >
-        <component
-          :is="resolveComponentType(tab.type)"
-          :key="`xTabPaneComp${index}`"
-          :ref="`tab_comp_${index}`"
-          v-bind="tab.props || {}"
-        />
-      </a-tab-pane>
-    </a-tabs>
-  </a-card>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { resolveComponentType } from '../componentTypes'
-
-const props = defineProps({
-  // 标签页数据
-  data: {
-    type: Array,
-    required: true
-  },
-  // 是否显示标签栏
-  showTabBar: {
-    type: Boolean,
-    default: true
-  },
-  // 标签页切换时的回调函数
-  onChange: {
-    type: [String, Function],
-    default: null
-  },
-  // Tab间距
-  tabBarGutter: {
-    type: Number,
-    default: 10
-  },
-  // 卡片样式
-  bodyStyle: {
-    type: Object,
-    default: () => ({})
-  },
-  // 默认激活的标签页
-  defaultActiveKey: {
-    type: [String, Number],
-    default: 0
-  }
-})
-
-// 激活的标签页
-const activeKey = ref(0)
-
-// 切换标签页
-const tabPaneChange = (newKey) => {
-  if (activeKey.value === newKey) return
-
-  const oldKey = activeKey.value
-  activeKey.value = newKey
-
-  // 触发标签页切换事件
-  if (props.onChange) {
-    try {
-      if (props.onChange instanceof Function) {
-        props.onChange(oldKey, newKey, props.data[oldKey], props.data[newKey])
-      } else {
-        // 创建一个安全的函数执行环境
-        // eslint-disable-next-line no-new-func
-        const onChange = new Function('oldKey', 'newKey', 'oldTab', 'newTab', `return (${props.onChange})(oldKey, newKey, oldTab, newTab)`)
-        onChange(oldKey, newKey, props.data[oldKey], props.data[newKey])
-      }
-    } catch (error) {
-      console.error('执行标签页切换回调错误:', error)
-    }
-  }
-}
-
-// 生命周期
-onMounted(() => {
-  activeKey.value = props.defaultActiveKey
-})
-</script>
+<template>
+  <a-card :bordered="false" :body-style="bodyStyle">
+    <a-tabs
+      :tabBarGutter="tabBarGutter"
+      :activeKey="activeKey"
+      @change="tabPaneChange"
+      :hideAdd="true"
+      :tabBarStyle="{ display: showTabBar ? 'block' : 'none' }"
+    >
+      <slot name="extraBeforeTabs"></slot>
+      <a-tab-pane
+        :forceRender="true"
+        v-for="(tab, index) in data"
+        :key="index"
+        :tab="tab.title"
+      >
+        <component
+          :is="resolveComponentType(tab.type)"
+          :key="`xTabPaneComp${index}`"
+          :ref="`tab_comp_${index}`"
+          v-bind="tab.props || {}"
+        />
+      </a-tab-pane>
+    </a-tabs>
+  </a-card>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { resolveComponentType } from '../componentTypes'
+
+const props = defineProps({
+  // 标签页数据
+  data: {
+    type: Array,
+    required: true
+  },
+  // 是否显示标签栏
+  showTabBar: {
+    type: Boolean,
+    default: true
+  },
+  // 标签页切换时的回调函数
+  onChange: {
+    type: [String, Function],
+    default: null
+  },
+  // Tab间距
+  tabBarGutter: {
+    type: Number,
+    default: 10
+  },
+  // 卡片样式
+  bodyStyle: {
+    type: Object,
+    default: () => ({})
+  },
+  // 默认激活的标签页
+  defaultActiveKey: {
+    type: [String, Number],
+    default: 0
+  }
+})
+
+// 激活的标签页
+const activeKey = ref(0)
+
+// 切换标签页
+const tabPaneChange = (newKey) => {
+  if (activeKey.value === newKey) return
+
+  const oldKey = activeKey.value
+  activeKey.value = newKey
+
+  // 触发标签页切换事件
+  if (props.onChange) {
+    try {
+      if (props.onChange instanceof Function) {
+        props.onChange(oldKey, newKey, props.data[oldKey], props.data[newKey])
+      } else {
+        // 创建一个安全的函数执行环境
+        // eslint-disable-next-line no-new-func
+        const onChange = new Function('oldKey', 'newKey', 'oldTab', 'newTab', `return (${props.onChange})(oldKey, newKey, oldTab, newTab)`)
+        onChange(oldKey, newKey, props.data[oldKey], props.data[newKey])
+      }
+    } catch (error) {
+      console.error('执行标签页切换回调错误:', error)
+    }
+  }
+}
+
+// 生命周期
+onMounted(() => {
+  activeKey.value = props.defaultActiveKey
+})
+</script>

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

@@ -1,22 +1,22 @@
-// 支持的组件类型映射
-export const components = {
-  XTab: () => import('@vue2-client/base-client/components/layout/XPageView/XTab'),
-  XFormTable: () => import('@vue2-client/base-client/components/common/XFormTable'),
-  XAddNativeForm: () => import('@vue2-client/base-client/components/common/XAddNativeForm'),
-  XReportGrid: () => import('@vue2-client/base-client/components/common/XReportGrid/XReport.vue'),
-  XErrorView: () => import('@vue2-client/base-client/components/layout/XPageView/XErrorView'),
-  // 全局组件不需要导入，直接返回null，让Vue使用全局注册的组件
-}
-
-// 组件类型解析函数
-export const resolveComponentType = (type) => {
-  if (!type) return components.XErrorView
-
-  // 如果是Ant Design Vue组件（以'a-'开头），直接返回原名称
-  if (type.startsWith('a-')) {
-    return type
-  }
-
-  // 否则从已注册的组件集合中查找
-  return components[type] || components.XErrorView
-}
+// 支持的组件类型映射
+export const components = {
+  XTab: () => import('@vue2-client/base-client/components/layout/XPageView/XTab'),
+  XFormTable: () => import('@vue2-client/base-client/components/common/XFormTable'),
+  XAddNativeForm: () => import('@vue2-client/base-client/components/common/XAddNativeForm'),
+  XReportGrid: () => import('@vue2-client/base-client/components/common/XReportGrid/XReport.vue'),
+  XErrorView: () => import('@vue2-client/base-client/components/layout/XPageView/XErrorView'),
+  // 全局组件不需要导入，直接返回null，让Vue使用全局注册的组件
+}
+
+// 组件类型解析函数
+export const resolveComponentType = (type) => {
+  if (!type) return components.XErrorView
+
+  // 如果是Ant Design Vue组件（以'a-'开头），直接返回原名称
+  if (type.startsWith('a-')) {
+    return type
+  }
+
+  // 否则从已注册的组件集合中查找
+  return components[type] || components.XErrorView
+}