vue2-client 1.14.94 → 1.14.95

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

@@ -18,29 +18,37 @@
     >
       <!-- 行类型，递归渲染子行 -->
       <template v-if="col.type === 'row'">
-        <render-row
-          v-for="(nestedRow, index) in col.children"
-          :row="nestedRow"
-          :key="`nested-row-${col.id}-${index}`"
-        />
+        <x-page-row-template :template="col.template">
+          <render-row
+            v-for="(nestedRow, index) in col.children"
+            :row="nestedRow"
+            :key="`nested-row-${col.id}-${index}`"
+          />
+        </x-page-row-template>
       </template>
 
       <!-- 组件类型，渲染动态组件 -->
       <template v-else>
-        <component
-          :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="`comp-child-${col.id}-${index}`"
-            />
-          </template>
-        </component>
+        <x-page-row-template :template="col.template">
+          <component
+            :ref="(el) => registerComponentRef(col.id, el)"
+            :is="resolveComponentType(col.type)"
+            v-bind="col.props"
+          >
+            <!-- 如果组件有子组件，递归渲染子行 -->
+            <template v-if="col.children && col.children.length">
+              <!-- 处理纯文本节点 -->
+              <template v-for="(nestedItem, index) in col.children">
+                <template v-if="nestedItem.text">{{ nestedItem.text }}</template>
+                <render-row
+                  v-else
+                  :row="nestedItem"
+                  :key="`comp-child-${col.id}-${index}`"
+                />
+              </template>
+            </template>
+          </component>
+        </x-page-row-template>
       </template>
     </a-col>
   </a-row>
@@ -48,17 +56,13 @@
 
 <script setup>
 import { defineProps, inject, computed } from 'vue'
+import XPageRowTemplate from './XPageRowTemplate.vue'
+
+import { resolveComponentType } from './componentTypes'
 
 // 注入注册组件方法
 const registerComponent = inject('registerComponent')
 
-// 支持的组件类型映射
-const components = {
-  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')
-}
-
 // 定义属性
 const props = defineProps({
   row: {
@@ -72,12 +76,6 @@ 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 registerComponentRef = (id, el) => {
   if (el) {

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

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <template v-if="finalTemplate === 'card'">
+      <a-card :bordered="false" class="x-page-row-template-card">
+        <slot></slot>
+      </a-card>
+    </template>
+    <template v-else>
+      <div class="simple-template-card">
+        <slot></slot>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+// 定义组件属性
+const props = defineProps({
+  template: {
+    type: String,
+    default: 'card'
+  }
+})
+
+// 计算最终使用的模板类型
+const finalTemplate = computed(() => {
+  return props.template || 'card'
+})
+</script>
+
+<style scoped lang="less">
+.x-page-row-template-card {
+  border-radius: 8px;
+}
+</style>

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

@@ -27,7 +27,8 @@ const dataContext = reactive({
   comps: componentRefMap,
   func: {
     getConfigByName
-  }
+  },
+  data: {}
 })
 
 /**
@@ -78,17 +79,16 @@ const registerComponent = (name, vm) => {
   registerComponentTotal.value++
   console.debug(`总组件数量：${componentTotal.value}，已注册数量：${registerComponentTotal.value}`)
 
-  // 初始化页面
-  if (layout.value?.onMounted && registerComponentTotal.value === 1) {
-    initPage()
-  }
-
   // 所有组件都已注册完成
   if (registerComponentTotal.value >= componentTotal.value) {
     registerEvents(layout.value.children)
+    // 初始化页面
+    initPage()
   }
 }
 provide('registerComponent', registerComponent)
+// 提供数据上下文给子组件
+provide('dataContext', dataContext)
 
 /**
  * 初始化页面
@@ -96,6 +96,7 @@ provide('registerComponent', registerComponent)
 const initPage = () => {
   if (!layout.value?.onMounted) return
 
+  console.info('开始初始化页面')
   try {
     // 使用 Function 构造函数替代 eval
     // eslint-disable-next-line no-new-func
@@ -113,8 +114,8 @@ const setComponentTotal = (children) => {
   if (!children?.length) return
 
   children.forEach((child) => {
-    // 如果不是row类型，追加组件数量
-    if (child.type !== 'row') {
+    // 如果不是row和text类型，追加组件数量
+    if (child.type !== 'row' && child.type !== 'text') {
       componentTotal.value++
     }
 
@@ -172,7 +173,7 @@ defineExpose({ init })
     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}`">
+        <a-col v-for="row in layout.children" :key="`page-col-${row.id}`" :span="24">
           <render-row :row="row"/>
         </a-col>
       </template>

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 |

package/src/pages/WorkflowDetail/WorkflowPageDetail/WorkFlowHandle.vue

@@ -38,7 +38,13 @@
             <a-card :bordered="false" :loading="loadingHistory" :body-style="{ paddingTop: 0 }">
               <!--   当前步骤历史记录   -->
               <template v-if="showTab">
-                <x-tab :compProp="{ buttonState: { add: false, edit: false, delete: false, import: false }}" :local-config="tabDesigner" :body-style="{ padding: 0 }" :tabBarGutter="24" default-active-key="workFlowTab">
+                <x-tab
+                  :compProp="{ buttonState: { add: false, edit: false, delete: false, import: false }}"
+                  :local-config="tabDesigner"
+                  :body-style="{ padding: 0 }"
+                  :tabBarGutter="24"
+                  :extra-data="{ workflowId: workflowId }"
+                  default-active-key="workFlowTab">
                   <a-tab-pane
                     :forceRender="true"
                     v-if="formCompletedDataPreview"
@@ -64,7 +70,7 @@
           <a-tab-pane key="1" tab="业务操作">
             <a-card :bordered="false" :loading="loadingHistory" :body-style="{ paddingTop: 0 }">
               <template v-if="showTab">
-                <x-tab :local-config="tabDesigner" :body-style="{ padding: 0 }" :tabBarGutter="24" default-active-key="workFlowTab">
+                <x-tab :local-config="tabDesigner" :extra-data="{ workflowId:workflowId }" :body-style="{ padding: 0 }" :tabBarGutter="24" default-active-key="workFlowTab">
                   <a-tab-pane
                     :forceRender="true"
                     v-if="showForm"
@@ -257,7 +263,7 @@ export default {
     ...mapState('account', { currUser: 'user' }),
     canSubmit () {
       // 对于超级管理员直接认为可以提交
-      if (this.currUser.ename === '1') {
+      if (this.currUser.rolesnames.indexOf('超级管理员') > -1) {
         return true
       }
       // currentStepId可能还没初始化，此处拿不到先返回false
@@ -413,7 +419,7 @@ export default {
   },
   props: {
     workflowId: {
-      type: String,
+      type: [String, Number],
       required: true
     },
     visible: {

package/src/pages/WorkflowDetail/WorkflowPageDetail/WorkFlowTimeline.vue

@@ -45,7 +45,7 @@ export default {
   name: 'WorkFlowTimeline',
   props: {
     workflowId: {
-      type: String,
+      type: [String, Number],
       required: true
     },
     currentStepId: {

package/src/pages/XPageViewExample/index.vue

@@ -6,59 +6,137 @@ const xPageViewRef = ref(null)
 
 onMounted(() => {
   xPageViewRef.value.init({
-    configValue: `{
-        "type": "page",
-        "onMounted": "function (data) {}",
-        "gutter": [16, 16],
-        "children": [
+    configValue: {
+      type: 'page',
+      onMounted: function (curr) {
+          console.warn(curr.data)
+          // 设置Tab配置数据
+          curr.data.tabData = {
+            index: 0,
+            items: [
+              // 第一组配置
+              {
+                tabConfigs: [
+                  { title: '表单列表', type: 'XFormTable', props: { serviceName: 'af-system', queryParamsName: 'crud_dictionary_manage' } },
+                  { title: '新增表单', type: 'XAddNativeForm', props: { serviceName: 'af-system', configName: 'crud_dictionary_manage_add_form' } }
+                ]
+              },
+              // 第二组配置
+              {
+                tabConfigs: [
+                  { title: '数据列表', type: 'XFormTable', props: { serviceName: 'af-system', queryParamsName: 'crud_dictionary_manage' } },
+                  { title: '编辑表单', type: 'XAddNativeForm', props: { serviceName: 'af-system', configName: 'crud_dictionary_manage_add_form' } },
+                  { title: '查看记录', type: 'XFormTable', props: { serviceName: 'af-system', queryParamsName: 'crud_dictionary_manage' } }
+                ]
+              }
+            ]
+          }
+          console.log('页面初始化完成，全局数据上下文已创建')
+      },
+      gutter: [16, 16],
+      children: [
+        {
+          id: 'controlRow',
+          type: 'row',
+          gutter: 16,
+          template: 'card',
+          children: [
+            {
+              id: 'buttonContainer',
+              span: '24',
+              type: 'row',
+              gutter: 8,
+              children: [
+                {
+                  id: 'reloadButton',
+                  span: '6',
+                  type: 'a-button',
+                  props: {
+                    type: 'primary',
+                    value: '切换Tab配置'
+                  },
+                  children: [
+                    {
+                      type: 'text',
+                      text: '切换Tab配置'
+                    }
+                  ],
+                  event: {
+                    click: function (e, context) {
+                      // 切换Tab配置
+                      const tabData = context.data.tabData
+                      tabData.index = tabData.index === 0 ? 1 : 0
+
+                      // 获取当前配置和Tab组件
+                      const currentConfig = tabData.items[tabData.index]
+                      const tabComponent = context.comps.pageTab
+
+                      if (tabComponent) {
+                        // 更新Tab组件配置
+                        tabComponent.$props.data = currentConfig.tabConfigs
+                        console.log('Tab配置已更新，当前配置索引:', tabData.index)
+
+                        // 更新状态文本
+                        const statusText = context.comps.statusText
+                        if (statusText && statusText.$el) {
+                          statusText.message = `点击按钮切换不同的Tab配置，当前是第${tabData.index + 1}组配置`
+                        }
+                      }
+                    }
+                  }
+                },
+                {
+                  id: 'statusText',
+                  span: '18',
+                  type: 'a-alert',
+                  props: {
+                    message: '点击按钮切换不同的Tab配置，当前是第1组配置',
+                    type: 'success'
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          id: 'row2',
+          type: 'row',
+          gutter: 16,
+          template: 'none',
+          children: [
             {
-                "id": "row1",
-                "type": "row",
-                "gutter": 16,
-                "children": [
+              id: 'pageTab',
+              span: '24',
+              type: 'XTab',
+              props: {
+                showTabBar: true,
+                data: [
                   {
-                    "id": "xFormTable2",
-                    "span": "12",
-                    "type": "XFormTable",
-                    "event": {
-                    },
-                    "props": {
-                      "serviceName": "af-system",
-                      "queryParamsName": "crud_dictionary_manage"
-                    },
-                    "children": [
-                    ]
+                    title: '表单列表',
+                    type: 'XFormTable',
+                    props: {
+                      serviceName: 'af-system',
+                      queryParamsName: 'crud_dictionary_manage'
+                    }
                   },
                   {
-                    "id": "xFormTable3",
-                    "span": "12",
-                    "type": "XFormTable",
-                    "event": {
-                    },
-                    "props": {
-                      "serviceName": "af-system",
-                      "queryParamsName": "crud_dictionary_manage"
-                    },
-                    "children": [
-                    ]
+                    title: '新增表单',
+                    type: 'XAddNativeForm',
+                    props: {
+                      serviceName: 'af-system',
+                      configName: 'crud_dictionary_manage_add_form'
+                    }
                   }
-                ]
-            },
-            {
-                "id": "xFormTable",
-                "type": "XFormTable",
-                "event": {
-                },
-                "props": {
-                  "serviceName": "af-system",
-                  "queryParamsName": "crud_dictionary_manage"
-                },
-                "children": [
-                ]
+                ],
+                onChange: function (oldKey, newKey, oldTab, newTab) {
+                  console.log('Tab changed:', oldKey, newKey)
+                }
+              }
             }
-        ]
-    }`,
-    // configName: 'templateManageConfig',
+          ]
+        }
+      ]
+    },
     serviceName: 'af-his'
   })
 })

package/src/pages/addressSelect/addressDemo.vue

@@ -1,24 +1,24 @@
-<template>
-  <!--  测试界面——测试地址选择新增组件-->
-  <div>
-    <a-button @click="open">打开选择地址弹窗</a-button>
-    <address-select :addressShow="showDialog"/>
-  </div>
-</template>
-
-  <script>
-  import AddressSelect from '@/pages/addressSelect'
-
-  export default {
-    components: { AddressSelect },
-    data: () => ({
-      showDialog: false
-    }),
-    methods: {
-      open () {
-        console.log('打开选择地址弹窗')
-        this.showDialog = true
-      }
-    }
-  }
-  </script>
+<template>
+  <!--  测试界面——测试地址选择新增组件-->
+  <div>
+    <a-button @click="open">打开选择地址弹窗</a-button>
+    <address-select :addressShow="showDialog"/>
+  </div>
+</template>
+
+  <script>
+  import AddressSelect from '@/pages/addressSelect'
+
+  export default {
+    components: { AddressSelect },
+    data: () => ({
+      showDialog: false
+    }),
+    methods: {
+      open () {
+        console.log('打开选择地址弹窗')
+        this.showDialog = true
+      }
+    }
+  }
+  </script>