vue2-client 1.14.94 → 1.14.97

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

@@ -0,0 +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>

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

@@ -0,0 +1,3 @@
+import XTab from './XTab.vue'
+
+export default XTab

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

@@ -0,0 +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
+}

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

@@ -1 +1,2 @@
 export { default } from './XPageView'
+export { default as XPageRowTemplate } from './XPageRowTemplate'

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

@@ -59,6 +59,7 @@ const initView = () => {
       "type": "row",
       "id": "row1",
       "gutter": 16,
+      "template": "card",
       "children": [
         {
           "type": "XFormTable",
@@ -75,3 +76,21 @@ const initView = () => {
   "onMounted": "function(data) { console.log('页面已加载') }"
 }
 ```
+
+### row类型的属性
+
+| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- |
+| template | row的渲染模板类型 | String | card/none | card |
+
+## 内部组件
+
+### XPageRowTemplate
+
+用于根据template属性决定是否使用卡片包装内容的组件。
+
+#### 属性
+
+| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- |
+| template | 渲染模板类型 | String | card/none | card |