vue2-client 1.10.35 → 1.11.2

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

@@ -1,233 +1,233 @@
-<template>
-  <a-card :bordered="false">
-    <a-tabs :tabBarGutter="10" :activeKey="activeKey" @change="tabPaneChange">
-      <a-tab-pane
-        :forceRender="true"
-        v-for="(tab, index) in config.data"
-        :key="index"
-        :tab="tab.title"
-      >
-        <component
-          :is="tab.slotType"
-          :key="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"
-        />
-      </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'],
-  provide () {
-    return {
-      currUser: this.currUser,
-      getSelectedId: this.getSelectedId
-    }
-  },
-  data () {
-    return {
-      activeKey: 0,
-      // 配置
-      config: undefined,
-      attr: {}
-    }
-  },
-  computed: {
-    ...mapState('account', { currUser: 'user' })
-  },
-  methods: {
-    // 自定义函数中调用的方法  这个不能删
-    getWindow,
-    runLogic,
-    isMicroAppEnv,
-    microDispatch,
-    getMicroData,
-    getRealKeyData,
-    getConfigByName,
-    getConfigByNameAsync,
-    tabPaneChange (newKey) {
-      let result = {}
-      if (this.activeKey === newKey) {
-        return
-      }
-      const oldKey = this.activeKey
-      if (this.config.changeFunc) {
-        const args = [
-          oldKey,
-          newKey,
-          this.config.data[oldKey],
-          this.config.data[newKey],
-          `tab_com_${this.config.data[oldKey].slotType}_${oldKey}`,
-          `tab_com_${this.config.data[newKey].slotType}_${newKey}`,
-          this.$refs[`tab_com_${this.config.data[oldKey].slotType}_${oldKey}`][0]
-        ]
-        if (!this.$refs[`tab_com_${this.config.data[newKey].slotType}_${newKey}`]) {
-          args.push(null)
-          console.warn('新页签示例切换页签时暂未初始化，仅调用该页签初始化方法不调用切换函数')
-        } else {
-          args.push(this.$refs[`tab_com_${this.config.data[newKey].slotType}_${newKey}`][0])
-        }
-        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 = this.$refs[`tab_com_${this.config.data[newKey].slotType}_${newKey}`]
-              if (!newComponent || !newComponent[0]) {
-                console.warn('组件实例尚未创建，等待组件mounted事件')
-                // 使用 MutationObserver 监听DOM变化
-                const observer = new MutationObserver((mutations, obs) => {
-                  const newComp = this.$refs[`tab_com_${this.config.data[newKey].slotType}_${newKey}`]
-                  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
-      }
-    },
-    initConfig () {
-      if (this.configName) {
-        this.getConfig()
-      } else if (this.localConfig) {
-        this.config = this.localConfig
-      }
-    },
-    getConfig () {
-      getConfigByName(this.configName, this.serverName, res => {
-        this.config = res
-      }, 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
-    },
-  },
-  watch: {
-    configName: {
-      deep: true,
-      immediate: true,
-      handler (val) {
-        this.initConfig()
-      }
-    },
-    // 如果本地配置更改了，重新初始化
-    localConfig: {
-      deep: true,
-      immediate: true,
-      handler (val) {
-        this.initConfig()
-      }
-    },
-  },
-}
-</script>
-<style scoped>
-:deep(.ant-tabs-bar) {
-  margin: 0
-}
-</style>
+<template>
+  <a-card :bordered="false">
+    <a-tabs :tabBarGutter="10" :activeKey="activeKey" @change="tabPaneChange">
+      <a-tab-pane
+        :forceRender="true"
+        v-for="(tab, index) in config.data"
+        :key="index"
+        :tab="tab.title"
+      >
+        <component
+          :is="tab.slotType"
+          :key="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"
+        />
+      </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'],
+  provide () {
+    return {
+      currUser: this.currUser,
+      getSelectedId: this.getSelectedId
+    }
+  },
+  data () {
+    return {
+      activeKey: 0,
+      // 配置
+      config: undefined,
+      attr: {}
+    }
+  },
+  computed: {
+    ...mapState('account', { currUser: 'user' })
+  },
+  methods: {
+    // 自定义函数中调用的方法  这个不能删
+    getWindow,
+    runLogic,
+    isMicroAppEnv,
+    microDispatch,
+    getMicroData,
+    getRealKeyData,
+    getConfigByName,
+    getConfigByNameAsync,
+    tabPaneChange (newKey) {
+      let result = {}
+      if (this.activeKey === newKey) {
+        return
+      }
+      const oldKey = this.activeKey
+      if (this.config.changeFunc) {
+        const args = [
+          oldKey,
+          newKey,
+          this.config.data[oldKey],
+          this.config.data[newKey],
+          `tab_com_${this.config.data[oldKey].slotType}_${oldKey}`,
+          `tab_com_${this.config.data[newKey].slotType}_${newKey}`,
+          this.$refs[`tab_com_${this.config.data[oldKey].slotType}_${oldKey}`][0]
+        ]
+        if (!this.$refs[`tab_com_${this.config.data[newKey].slotType}_${newKey}`]) {
+          args.push(null)
+          console.warn('新页签示例切换页签时暂未初始化，仅调用该页签初始化方法不调用切换函数')
+        } else {
+          args.push(this.$refs[`tab_com_${this.config.data[newKey].slotType}_${newKey}`][0])
+        }
+        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 = this.$refs[`tab_com_${this.config.data[newKey].slotType}_${newKey}`]
+              if (!newComponent || !newComponent[0]) {
+                console.warn('组件实例尚未创建，等待组件mounted事件')
+                // 使用 MutationObserver 监听DOM变化
+                const observer = new MutationObserver((mutations, obs) => {
+                  const newComp = this.$refs[`tab_com_${this.config.data[newKey].slotType}_${newKey}`]
+                  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
+      }
+    },
+    initConfig () {
+      if (this.configName) {
+        this.getConfig()
+      } else if (this.localConfig) {
+        this.config = this.localConfig
+      }
+    },
+    getConfig () {
+      getConfigByName(this.configName, this.serverName, res => {
+        this.config = res
+      }, 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
+    },
+  },
+  watch: {
+    configName: {
+      deep: true,
+      immediate: true,
+      handler (val) {
+        this.initConfig()
+      }
+    },
+    // 如果本地配置更改了，重新初始化
+    localConfig: {
+      deep: true,
+      immediate: true,
+      handler (val) {
+        this.initConfig()
+      }
+    },
+  },
+}
+</script>
+<style scoped>
+:deep(.ant-tabs-bar) {
+  margin: 0
+}
+</style>