vue2-client 1.15.84 → 1.15.86

package/src/base-client/components/common/XTab/XTab.vue

@@ -1,299 +1,299 @@
-<template>
-  <a-card :bordered="false" :body-style="bodyStyle">
-    <a-tabs
-      :tabBarGutter="tabBarGutter"
-      :activeKey="activeKey"
-      @change="(activeKey) => tabPaneChange(activeKey, false)"
-      :hideAdd="true"
-      :tabBarStyle="{ display: showTabBar ? 'block' : 'none' }"
-    >
-      <slot name="extraBeforeTabs"></slot>
-      <a-tab-pane
-        :forceRender="true"
-        v-for="(tab, index) in config.data"
-        :key="index"
-        :tab="tab.title"
-      >
-        <component
-          :is="tab.slotType"
-          :key="'xTabPaneComp' + index"
-          :ref="`tab_com_${tab.slotType}_${index}`"
-          :serviceName="tab.serviceName"
-          :serverName="tab.serviceName"
-          :queryParamsName="tab.slotConfig"
-          v-on="getEventHandlers(tab,index)"
-          @hook:mounted="(h)=>onComponentMounted(h,tab,index)"
-          :config-name="tab.slotConfig"
-          :env="env"
-          v-bind="compProp"
-          :extra-data="extraData"
-        />
-      </a-tab-pane>
-    </a-tabs>
-  </a-card>
-</template>
-
-<script>
-import { getConfigByName, getConfigByNameAsync, runLogic } from '@vue2-client/services/api/common'
-import { executeStrFunctionByContext } from '@vue2-client/utils/runEvalFunction'
-import { getRealKeyData } from '@vue2-client/utils/util'
-import { getMicroData, getWindow, isMicroAppEnv, microDispatch } from '@vue2-client/utils/microAppUtils'
-import { mapState } from 'vuex'
-
-export default {
-  name: 'XTab',
-  components: {
-    XFormTable: () => import('@vue2-client/base-client/components/common/XFormTable/XFormTable'),
-    XAddNativeForm: () => import('@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'),
-    XReportGrid: () => import('@vue2-client/base-client/components/common/XReportGrid/XReport.vue')
-  },
-  inject: ['isInAModal', 'getSelectedId', 'getSelectedData', 'getOutEnv', 'setGlobalData', 'getGlobalData', 'generalFunction'],
-  provide () {
-    return {
-      currUser: this.currUser,
-      getSelectedId: this.getSelectedId
-    }
-  },
-  data () {
-    return {
-      activeKey: 0,
-      // 配置
-      config: undefined,
-      attr: {},
-      showTabBar: true // 默认显示页签
-    }
-  },
-  computed: {
-    ...mapState('account', { currUser: 'user' })
-  },
-  mounted () {
-    this.activeKey = this.defaultActiveKey
-    this.tabPaneChange('initTabLoading', true)
-  },
-  methods: {
-    // 自定义函数中调用的方法  这个不能删
-    getWindow,
-    runLogic,
-    isMicroAppEnv,
-    microDispatch,
-    getMicroData,
-    getRealKeyData,
-    getConfigByName,
-    getConfigByNameAsync,
-    tabPaneChange (newKey, initStatus = false) {
-      let result = {}
-      if (this.activeKey === newKey) {
-        return
-      }
-      const oldKey = this.activeKey
-      if (this.config.changeFunc) {
-        let oldRef
-        let oldTabName
-        let newRef
-        let newTabName
-        if (!this.config.data[oldKey]) {
-          oldTabName = `tab_com_${oldKey}`
-          oldRef = this.$refs[oldTabName]
-        } else {
-          const oldTabSlotType = this.config.data[oldKey].slotType
-          oldTabName = `tab_com_${oldTabSlotType}_${oldKey}`
-          oldRef = this.$refs[oldTabName]
-        }
-        if (!this.config.data[newKey]) {
-          newTabName = `tab_com_${newKey}`
-          newRef = this.$refs[newTabName]
-        } else {
-          const newTabSlotType = this.config.data[newKey].slotType
-          newTabName = `tab_com_${newTabSlotType}_${newKey}`
-          newRef = this.$refs[newTabName]
-        }
-        const args = [
-          oldKey,
-          newKey,
-          this.config.data[oldKey],
-          this.config.data[newKey],
-          oldRef ? oldRef[0] : undefined,
-        ]
-        args.push(newTabName)
-        if (!newRef) {
-          args.push(null)
-          console.warn('新页签示例切换页签时暂未初始化，仅调用该页签初始化方法不调用切换函数')
-        } else {
-          args.push(newRef[0])
-        }
-        args.push(this.extraData)
-        result = executeStrFunctionByContext(this, this.config.changeFunc, args)
-        if (result && result.noChange) {
-          console.info('不切换页签作为按钮使用')
-        } else {
-          this.activeKey = newKey
-          if (result && result.callback && typeof result.callback === 'function') {
-            // 使用 $nextTick 等待 DOM 更新完成后再获取组件实例
-            this.$nextTick(() => {
-              const newComponent = newRef
-              if (!newComponent || !newComponent[0]) {
-                console.warn('组件实例尚未创建，等待组件mounted事件')
-                // 使用 MutationObserver 监听DOM变化
-                const observer = new MutationObserver((mutations, obs) => {
-                  const newComp = newRef
-                  if (newComp && newComp[0]) {
-                    obs.disconnect()
-                    console.log('组件已创建，执行回调')
-                    result.callback()
-                  }
-                })
-                observer.observe(this.$el, {
-                  childList: true,
-                  subtree: true
-                })
-                // 设置超时，避免无限等待
-                setTimeout(() => {
-                  observer.disconnect()
-                  console.warn('等待组件创建超时')
-                }, 500)
-
-                return
-              }
-              result.callback()
-            })
-          }
-        }
-      } else {
-        this.activeKey = newKey
-      }
-      if (initStatus) {
-        this.activeKey = this.defaultActiveKey
-      }
-    },
-    initConfig () {
-      if (this.configName) {
-        this.getConfig()
-      } else if (this.localConfig) {
-        this.config = this.localConfig
-        // 设置是否显示页签
-        this.showTabBar = this.localConfig.showTabBar !== false
-      }
-    },
-    getConfig () {
-      getConfigByName(this.configName, this.serverName, res => {
-        this.config = res
-        // 设置是否显示页签
-        this.showTabBar = res.showTabBar !== false
-      }, this.env === 'dev')
-    },
-    getEventHandlers (tab, index) {
-      const handlers = {}
-      if (!tab?.events || tab?.events?.length === 0) {
-        return handlers
-      }
-      tab.events.forEach(event => {
-        handlers[event.type] = (...args) => {
-          console.info('Event handled:', event.type, args)
-          executeStrFunctionByContext(this.$refs[`tab_com_${tab.slotType}_${index}`][0], event.customFunction, args)
-        }
-      })
-      return handlers
-    },
-    onComponentMounted (h, tab, index) {
-      console.log(`插槽组件已经初始化 slotType ${tab.slotType}，ref= tab_com_${tab.slotType}_${index} ， serviceName = ${tab.serviceName}`)
-      if (tab.slotType === 'x-add-native-form') {
-        // 建议表单需要主动调用初始化方法
-        getConfigByName(tab.slotConfig, tab.serviceName, async (res) => {
-          // 如果配置了 表单初始化logic
-          // 调用 logic 获取参数
-          let param = {}
-          let selectedId
-          if (res.paramLogicName) {
-            if (!!this.getSelectedId) {
-              selectedId = this.getSelectedId()
-              if (typeof selectedId !== 'object') {
-                selectedId = { selectedId: selectedId }
-              }
-            }
-            param = Object.assign(param, await runLogic(res.paramLogicName, selectedId, tab.serviceName))
-          }
-          this.$refs[`tab_com_${tab.slotType}_${index}`][0].init({
-            formItems: res.formJson,
-            showSubmitBtn: !this.isInAModal,
-            businessType: '新增',
-            layout: res.xAddFormLayout,
-            ...res,
-            fixedAddForm: param,
-            modifyModelData: {
-              files: param.files,
-              images: param.images
-            }
-          })
-        }, this.env === 'dev')
-      }
-    },
-  },
-  props: {
-    // 配置名
-    configName: {
-      type: String,
-      default: undefined
-    },
-    serverName: {
-      type: String,
-      default: undefined
-    },
-    env: {
-      type: String,
-      default: 'prod'
-    },
-    // 本地配置，调试用
-    localConfig: {
-      type: Object,
-      default: undefined
-    },
-    tabBarGutter: {
-      type: Number,
-      default: 10
-    },
-    bodyStyle: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    defaultActiveKey: {
-      type: String,
-      default: 0
-    },
-    // 新增compProp参数，用于穿透到动态组件
-    compProp: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    // 额外数据
-    extraData: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    }
-  },
-  watch: {
-    configName: {
-      deep: true,
-      immediate: true,
-      handler (val) {
-        this.initConfig()
-      }
-    },
-    // 如果本地配置更改了，重新初始化
-    localConfig: {
-      deep: true,
-      immediate: true,
-      handler (val) {
-        this.initConfig()
-      }
-    },
-  },
-}
-</script>
-<style scoped>
-</style>
+<template>
+  <a-card :bordered="false" :body-style="bodyStyle">
+    <a-tabs
+      :tabBarGutter="tabBarGutter"
+      :activeKey="activeKey"
+      @change="(activeKey) => tabPaneChange(activeKey, false)"
+      :hideAdd="true"
+      :tabBarStyle="{ display: showTabBar ? 'block' : 'none' }"
+    >
+      <slot name="extraBeforeTabs"></slot>
+      <a-tab-pane
+        :forceRender="true"
+        v-for="(tab, index) in config.data"
+        :key="index"
+        :tab="tab.title"
+      >
+        <component
+          :is="tab.slotType"
+          :key="'xTabPaneComp' + index"
+          :ref="`tab_com_${tab.slotType}_${index}`"
+          :serviceName="tab.serviceName"
+          :serverName="tab.serviceName"
+          :queryParamsName="tab.slotConfig"
+          v-on="getEventHandlers(tab,index)"
+          @hook:mounted="(h)=>onComponentMounted(h,tab,index)"
+          :config-name="tab.slotConfig"
+          :env="env"
+          v-bind="compProp"
+          :extra-data="extraData"
+        />
+      </a-tab-pane>
+    </a-tabs>
+  </a-card>
+</template>
+
+<script>
+import { getConfigByName, getConfigByNameAsync, runLogic } from '@vue2-client/services/api/common'
+import { executeStrFunctionByContext } from '@vue2-client/utils/runEvalFunction'
+import { getRealKeyData } from '@vue2-client/utils/util'
+import { getMicroData, getWindow, isMicroAppEnv, microDispatch } from '@vue2-client/utils/microAppUtils'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'XTab',
+  components: {
+    XFormTable: () => import('@vue2-client/base-client/components/common/XFormTable/XFormTable'),
+    XAddNativeForm: () => import('@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'),
+    XReportGrid: () => import('@vue2-client/base-client/components/common/XReportGrid/XReport.vue')
+  },
+  inject: ['isInAModal', 'getSelectedId', 'getSelectedData', 'getOutEnv', 'setGlobalData', 'getGlobalData', 'generalFunction'],
+  provide () {
+    return {
+      currUser: this.currUser,
+      getSelectedId: this.getSelectedId
+    }
+  },
+  data () {
+    return {
+      activeKey: 0,
+      // 配置
+      config: undefined,
+      attr: {},
+      showTabBar: true // 默认显示页签
+    }
+  },
+  computed: {
+    ...mapState('account', { currUser: 'user' })
+  },
+  mounted () {
+    this.activeKey = this.defaultActiveKey
+    this.tabPaneChange('initTabLoading', true)
+  },
+  methods: {
+    // 自定义函数中调用的方法  这个不能删
+    getWindow,
+    runLogic,
+    isMicroAppEnv,
+    microDispatch,
+    getMicroData,
+    getRealKeyData,
+    getConfigByName,
+    getConfigByNameAsync,
+    tabPaneChange (newKey, initStatus = false) {
+      let result = {}
+      if (this.activeKey === newKey) {
+        return
+      }
+      const oldKey = this.activeKey
+      if (this.config.changeFunc) {
+        let oldRef
+        let oldTabName
+        let newRef
+        let newTabName
+        if (!this.config.data[oldKey]) {
+          oldTabName = `tab_com_${oldKey}`
+          oldRef = this.$refs[oldTabName]
+        } else {
+          const oldTabSlotType = this.config.data[oldKey].slotType
+          oldTabName = `tab_com_${oldTabSlotType}_${oldKey}`
+          oldRef = this.$refs[oldTabName]
+        }
+        if (!this.config.data[newKey]) {
+          newTabName = `tab_com_${newKey}`
+          newRef = this.$refs[newTabName]
+        } else {
+          const newTabSlotType = this.config.data[newKey].slotType
+          newTabName = `tab_com_${newTabSlotType}_${newKey}`
+          newRef = this.$refs[newTabName]
+        }
+        const args = [
+          oldKey,
+          newKey,
+          this.config.data[oldKey],
+          this.config.data[newKey],
+          oldRef ? oldRef[0] : undefined,
+        ]
+        args.push(newTabName)
+        if (!newRef) {
+          args.push(null)
+          console.warn('新页签示例切换页签时暂未初始化，仅调用该页签初始化方法不调用切换函数')
+        } else {
+          args.push(newRef[0])
+        }
+        args.push(this.extraData)
+        result = executeStrFunctionByContext(this, this.config.changeFunc, args)
+        if (result && result.noChange) {
+          console.info('不切换页签作为按钮使用')
+        } else {
+          this.activeKey = newKey
+          if (result && result.callback && typeof result.callback === 'function') {
+            // 使用 $nextTick 等待 DOM 更新完成后再获取组件实例
+            this.$nextTick(() => {
+              const newComponent = newRef
+              if (!newComponent || !newComponent[0]) {
+                console.warn('组件实例尚未创建，等待组件mounted事件')
+                // 使用 MutationObserver 监听DOM变化
+                const observer = new MutationObserver((mutations, obs) => {
+                  const newComp = newRef
+                  if (newComp && newComp[0]) {
+                    obs.disconnect()
+                    console.log('组件已创建，执行回调')
+                    result.callback()
+                  }
+                })
+                observer.observe(this.$el, {
+                  childList: true,
+                  subtree: true
+                })
+                // 设置超时，避免无限等待
+                setTimeout(() => {
+                  observer.disconnect()
+                  console.warn('等待组件创建超时')
+                }, 500)
+
+                return
+              }
+              result.callback()
+            })
+          }
+        }
+      } else {
+        this.activeKey = newKey
+      }
+      if (initStatus) {
+        this.activeKey = this.defaultActiveKey
+      }
+    },
+    initConfig () {
+      if (this.configName) {
+        this.getConfig()
+      } else if (this.localConfig) {
+        this.config = this.localConfig
+        // 设置是否显示页签
+        this.showTabBar = this.localConfig.showTabBar !== false
+      }
+    },
+    getConfig () {
+      getConfigByName(this.configName, this.serverName, res => {
+        this.config = res
+        // 设置是否显示页签
+        this.showTabBar = res.showTabBar !== false
+      }, this.env === 'dev')
+    },
+    getEventHandlers (tab, index) {
+      const handlers = {}
+      if (!tab?.events || tab?.events?.length === 0) {
+        return handlers
+      }
+      tab.events.forEach(event => {
+        handlers[event.type] = (...args) => {
+          console.info('Event handled:', event.type, args)
+          executeStrFunctionByContext(this.$refs[`tab_com_${tab.slotType}_${index}`][0], event.customFunction, args)
+        }
+      })
+      return handlers
+    },
+    onComponentMounted (h, tab, index) {
+      console.log(`插槽组件已经初始化 slotType ${tab.slotType}，ref= tab_com_${tab.slotType}_${index} ， serviceName = ${tab.serviceName}`)
+      if (tab.slotType === 'x-add-native-form') {
+        // 建议表单需要主动调用初始化方法
+        getConfigByName(tab.slotConfig, tab.serviceName, async (res) => {
+          // 如果配置了 表单初始化logic
+          // 调用 logic 获取参数
+          let param = {}
+          let selectedId
+          if (res.paramLogicName) {
+            if (!!this.getSelectedId) {
+              selectedId = this.getSelectedId()
+              if (typeof selectedId !== 'object') {
+                selectedId = { selectedId: selectedId }
+              }
+            }
+            param = Object.assign(param, await runLogic(res.paramLogicName, selectedId, tab.serviceName))
+          }
+          this.$refs[`tab_com_${tab.slotType}_${index}`][0].init({
+            formItems: res.formJson,
+            showSubmitBtn: !this.isInAModal,
+            businessType: '新增',
+            layout: res.xAddFormLayout,
+            ...res,
+            fixedAddForm: param,
+            modifyModelData: {
+              files: param.files,
+              images: param.images
+            }
+          })
+        }, this.env === 'dev')
+      }
+    },
+  },
+  props: {
+    // 配置名
+    configName: {
+      type: String,
+      default: undefined
+    },
+    serverName: {
+      type: String,
+      default: undefined
+    },
+    env: {
+      type: String,
+      default: 'prod'
+    },
+    // 本地配置，调试用
+    localConfig: {
+      type: Object,
+      default: undefined
+    },
+    tabBarGutter: {
+      type: Number,
+      default: 10
+    },
+    bodyStyle: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    defaultActiveKey: {
+      type: String,
+      default: 0
+    },
+    // 新增compProp参数，用于穿透到动态组件
+    compProp: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 额外数据
+    extraData: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  watch: {
+    configName: {
+      deep: true,
+      immediate: true,
+      handler (val) {
+        this.initConfig()
+      }
+    },
+    // 如果本地配置更改了，重新初始化
+    localConfig: {
+      deep: true,
+      immediate: true,
+      handler (val) {
+        this.initConfig()
+      }
+    },
+  },
+}
+</script>
+<style scoped>
+</style>