resolver-egretimp-plus 0.1.18 → 0.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "resolver-egretimp-plus",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "description": "交付体验渲染",
   "main": "./dist/web/index.js",
   "module": "./dist/web/index.js",

package/src/bpm/bpmInstance.js

@@ -316,6 +316,16 @@ export class Bpm {
       })
     })
   }
+  insertBtn(btns, position = 3) {
+    this.getSdkInstance().then((instance) => {
+      console.log('insert btns==:', btns, position)
+      instance?.getCustomApi()?.insertBtnForToolbar({
+        // 按钮插入位置
+        position,
+        btns,
+      })
+    })
+  }
   destroy() {
     window.removeEventListener("message", this.messageListener)
     this.sdkInstance = null

package/src/components/packages-web/CustomComponentCycleTabPane.vue

@@ -1,7 +1,17 @@
 <template>
   <TabPane v-for="(pageMetaList, $index) in (multiPmPageMetaList || [])" v-bind="{...tabPaneProps}" :key="pageMetaListKeys[pageMetaList.id]" :label="`${lang.indexOf('zh') > -1 ? props.config?.metaNameZh : props.config?.metaNameEn}-${$index}`" :name="`${props.config?.metaCode}-${$index}`">
     <template #label v-if="labelRenderContentFn || pageMetaList.filter(config => config.collapseSlot).length">
-      <component :is="labelRenderContentFn(getLableRenderParams(modelValue?.[$index]))" v-if="labelRenderContentFn"></component>
+      <component
+        v-if="labelRenderContentFn"
+        :is="labelRenderContentFn(
+          getLableRenderParams(
+            modelValue?.[$index],
+            props.activeNames === `${props.config?.metaCode}-${$index}`,
+            multiPmPageMetaList.length,
+            $index
+          )
+        )"
+        ></component>
       <Renderer v-else :modelValue="modelValue?.[$index]" :rowScope="{row: modelValue?.[$index], $index}" @update:modelValues="onUpdateModelValue($event, $index)" :config="pageMetaList.filter(config => config.collapseSlot)"></Renderer>
     </template>
     <ElRow>
@@ -20,6 +30,7 @@ import { h } from 'vue'
 const props = defineProps({
   ...commonPropsType,
   ...ElTabPane.props,
+  activeNames: String,
 })
 
 const modelValue = defineModel()
@@ -100,10 +111,13 @@ const labelRenderContentFn = computed(() => {
     return null
   }
 })
-function getLableRenderParams(tabPaneData) {
+function getLableRenderParams(tabPaneData, isActive, total, idx) {
   return {
     config: props.config,
-    tabPaneData
+    tabPaneData,
+    isActive,
+    total,
+    currentIndex: idx
   }
 }
 </script>

package/src/components/packages-web/CustomComponentNativeTabPane.vue

@@ -0,0 +1,70 @@
+<template>
+  <TabPane v-bind="{...attrs, ...tabPaneProps, ...polyProps}">
+    <template #label v-if="labelRenderContent || slotsPageMetalist.length">
+      <component :is="labelRenderContent" v-if="labelRenderContent"></component>
+      <Renderer v-else :config="slotsPageMetalist" v-model="props.refValue.value"></Renderer>
+    </template>
+    <ElRow>
+      <Renderer :config="(props.config.pmPageMetaList || []).filter(config => !config.collapseSlot)" v-model="props.refValue.value"></Renderer>
+    </ElRow>
+    <template v-for="(_, key) in slots" :key="key" v-slot:[key]="scope">
+      <slot :name="key" v-bind="scope"></slot>
+    </template>
+  </TabPane>
+</template>
+<script setup>
+import { ElTabPane, ElRow } from 'element-plus'
+import Renderer from '../../renderer.jsx'
+import { computed, inject, useAttrs, useSlots } from 'vue'
+import { commonPropsType } from '../../utils/index.js'
+import { TabPane } from '../tabs'
+import { h } from 'vue'
+
+const slots = useSlots()
+const props = defineProps({
+  ...commonPropsType,
+  ...TabPane.props,
+  hidden: [String, Boolean, Number],
+  activeNames: String,
+})
+const attrs = useAttrs()
+
+const slotsPageMetalist = computed(() => {
+  return (props.config.pmPageMetaList || []).filter(config => config.collapseSlot)
+})
+
+const lang = inject('lang')
+const polyProps = computed(() => {
+  return {
+    label: lang.value.indexOf('zh') > -1 ? props.config?.metaNameZh : props.config?.metaNameEn,
+    name: props.config?.metaCode
+  }
+})
+const tabPaneProps = computed(() => {
+  const ret = Object.keys(TabPane.props).reduce((ret, key) => {
+    ret[key] = props[key]
+    return ret
+  }, {})
+  if (typeof ret.hidden !== 'boolean') {
+    ret.hidden = ret.hidden == '1'
+  }
+  return ret
+})
+
+// 自定义渲染label方法
+const labelRenderContent = computed(() => {
+  const context = props.config?.labelRender?.(getLableRenderParams())
+  if (typeof context === 'string') {
+    return h('span', context)
+  } else {
+    return context
+  }
+})
+function getLableRenderParams() {
+  return {
+    config: props.config,
+    tabPaneData: props.refValue.value,
+    isActive: props.activeNames === props.config?.metaCode,
+  }
+}
+</script>

package/src/components/packages-web/CustomComponentTabPane.vue

@@ -1,68 +1,20 @@
 <template>
-  <TabPane v-bind="{...attrs, ...tabPaneProps, ...polyProps}">
-    <template #label v-if="labelRenderContent || slotsPageMetalist.length">
-      <component :is="labelRenderContent" v-if="labelRenderContent"></component>
-      <Renderer v-else :config="slotsPageMetalist" v-model="props.refValue.value"></Renderer>
-    </template>
-    <ElRow>
-      <Renderer :config="(props.config.pmPageMetaList || []).filter(config => !config.collapseSlot)" v-model="props.refValue.value"></Renderer>
-    </ElRow>
-    <template v-for="(_, key) in slots" :key="key" v-slot:[key]="scope">
-      <slot :name="key" v-bind="scope"></slot>
-    </template>
-  </TabPane>
+  <component :is="comp" v-bind="attrs"></component>
 </template>
 <script setup>
-import { ElTabPane, ElRow } from 'element-plus'
-import Renderer from '../../renderer.jsx'
-import { computed, inject, useAttrs, useSlots } from 'vue'
-import { commonPropsType } from '../../utils/index.js'
-import { TabPane } from '../tabs'
-import { h } from 'vue'
+import { useAttrs } from 'vue'
+import CustomComponentCycleTabPane from './CustomComponentCycleTabPane.vue'
+import CustomComponentNativeTabPane from './CustomComponentNativeTabPane.vue'
+import { computed } from 'vue'
 
-const slots = useSlots()
-const props = defineProps({
-  ...commonPropsType,
-  ...TabPane.props,
-  hidden: [String, Boolean, Number]
-})
 const attrs = useAttrs()
-
-const slotsPageMetalist = computed(() => {
-  return (props.config.pmPageMetaList || []).filter(config => config.collapseSlot)
-})
-
-const lang = inject('lang')
-const polyProps = computed(() => {
-  return {
-    label: lang.value.indexOf('zh') > -1 ? props.config?.metaNameZh : props.config?.metaNameEn,
-    name: props.config?.metaCode
-  }
-})
-const tabPaneProps = computed(() => {
-  const ret = Object.keys(TabPane.props).reduce((ret, key) => {
-    ret[key] = props[key]
-    return ret
-  }, {})
-  if (typeof ret.hidden !== 'boolean') {
-    ret.hidden = ret.hidden == '1'
+const props = defineProps({
+  isCycle: {
+    type: [String, Number],
+    default: '0'
   }
-  return ret
 })
-
-// 自定义渲染label方法
-const labelRenderContent = computed(() => {
-  const context = props.config?.labelRender?.(getLableRenderParams())
-  if (typeof context === 'string') {
-    return h('span', context)
-  } else {
-    return context
-  }
+const comp = computed(() => {
+  return props.isCycle == '1' ? CustomComponentCycleTabPane : CustomComponentNativeTabPane
 })
-function getLableRenderParams() {
-  return {
-    config: props.config,
-    tabPaneData: props.refValue.value
-  }
-}
 </script>

package/src/components/packages-web/CustomComponentTabs.vue

@@ -1,6 +1,6 @@
 <template>
   <Tabs :class="[`tabs-level-${level}`, isHeaderAuto ? 'tabpane-auto-header' : '',  fullBorder ? 'full-border' : '']" v-bind="transTabsProps" v-model="activeNames">
-    <Renderer :config="tabpanes" v-model="props.refValue.value"></Renderer>
+    <Renderer :activeNames="activeNames" :config="tabpanes" v-model="props.refValue.value"></Renderer>
     <template v-for="(_, key) in slots" :key="key" v-slot:[key]="scope">
       <slot :name="key" v-bind="scope"></slot>
     </template>
@@ -19,6 +19,10 @@ const slots = useSlots()
 const props = defineProps({
   ...ElTabs.props,
   ...commonPropsType,
+  showBar: {
+    type: Boolean,
+    default: true
+  },
 })
 const attrs = useAttrs()
 const tabsProps = computed(() => {
@@ -37,26 +41,36 @@ const activeNames = computed({
   get() {
     const currentTab = tabpanes.value.find(tab => tab.defaultShowFlag == '1')
     const currentCycleTab = tabpanes.value.find(tab => tab.currentCode)
-    return (currentTab && currentTab.metaCode)
-      || (currentCycleTab && currentCycleTab.currentCode)
-      || (tabpanes.value[0] && (tabpanes.value[0].metaType === 'CustomComponentTabPane' && tabpanes.value[0].metaCode) || (tabpanes.value[0].metaType === 'CustomComponentCycleTabPane' && `${tabpanes.value[0].metaCode}-0`))
+    if (currentTab) {
+      return currentTab?.isCycle == '1' ? `${currentTab.metaCode}-0` : currentTab.metaCode
+    }
+    if (currentCycleTab) {
+      return currentCycleTab.currentCode
+    }
+    if (tabpanes.value[0]) {
+      if (assertMetaType(tabpanes.value[0], 'CustomComponentCycleTabPane') || tabpanes.value[0]?.isCycle == '1') {
+        return `${tabpanes.value[0].metaCode}-0`
+      } else {
+        return tabpanes.value[0].metaCode
+      }
+    }
   },
   set(val) {
     tabpanes.value.forEach(tab => {
-      if (tab.metaType === 'CustomComponentTabPane') {
+      if (assertMetaType(tab, 'CustomComponentCycleTabPane') || tab?.isCycle == '1') {
+        if (/^cycleTabpane-(\d+)$/.test(val)) {
+          tab.currentCode = val
+        } else {
+          tab.currentCode = ''
+        }
+      } else if (tab.metaType === 'CustomComponentTabPane') {
         if (tab.metaCode === val) {
           tab.defaultShowFlag = '1'
         } else {
           tab.defaultShowFlag = '0'
         }
       }
-      if (tab.metaType === 'CustomComponentCycleTabPane') {
-        if (new RegExp(`^${tab.metaCode}-(\d+)$`).test(val)) {
-          tab.currentCode = val
-        } else {
-          tab.currentCode = ''
-        }
-      }
+      
     })
   }
 })
@@ -64,7 +78,7 @@ const isHeaderAuto = computed(() => {
   return props.config.autoHeader == '1'
 })
 const level = computed(() => {
-  return props.config.level || tabpanes.value.find(tabpane => hasOwn(tabpane, 'level'))?.level || 1
+  return props.config.level ?? tabpanes.value.find(tabpane => hasOwn(tabpane, 'level'))?.level ?? 1
 })
 const transTabsProps = computed(() => {
   const polyProps = level.value == 1 ? {
@@ -76,7 +90,8 @@ const transTabsProps = computed(() => {
   } : {}
   return {
     ...tabsProps.value,
-    ...polyProps
+    ...polyProps,
+    showBar: props.showBar,
   }
 })
 /**
@@ -86,6 +101,10 @@ const fullBorder = computed(() => {
   return tabpanes.value.length === 1 && level.value == 1
 })
 
+function assertMetaType(config, metaType) {
+  return config.renderby === metaType || config.metaType === metaType
+}
+
 defineExpose({
   setActiveTab(tabMetaCode) {
     activeNames.value = tabMetaCode

package/src/components/tabs/src/tab-nav.jsx

@@ -52,6 +52,10 @@ export const tabNavProps = buildProps({
     values: ['card', 'border-card', ''],
     default: '',
   },
+  showBar: {
+    type: Boolean,
+    default: true
+  },
   stretch: Boolean,
 })
 
@@ -379,10 +383,11 @@ const TabNav = defineComponent({
             ns.e('nav-wrap'),
             ns.is('scrollable', !!scrollable.value),
             ns.is(rootTabs.props.tabPosition),
+            !props.showBar ? 'hidden-bar' : ''
           ]}
         >
           {scrollBtn}
-          <div class={ns.e('nav-scroll')} ref={navScroll$}>
+          <div class={[ns.e('nav-scroll')]} ref={navScroll$}>
             <div
               class={[
                 ns.e('nav'),
@@ -399,7 +404,7 @@ const TabNav = defineComponent({
               onKeydown={changeTab}
             >
               {...[
-                !props.type ? (
+                !props.type && props.showBar ? (
                   <TabBar ref={tabBarRef} tabs={[...props.panes]} />
                 ) : null,
                 tabs,

package/src/components/tabs/src/tabs.jsx

@@ -49,6 +49,10 @@ export const tabsProps = buildProps({
     type: Function,
     default: () => true,
   },
+  showBar: {
+    type: Boolean,
+    default: true
+  },
   stretch: Boolean,
 })
 // export type TabsProps = ExtractPropTypes<typeof tabsProps>
@@ -177,6 +181,7 @@ const Tabs = defineComponent({
             ref={nav$}
             currentName={currentName.value}
             editable={props.editable}
+            showBar={props.showBar}
             type={props.type}
             panes={panes.value}
             stretch={props.stretch}
@@ -203,8 +208,8 @@ const Tabs = defineComponent({
           ]}
         >
           {...props.tabPosition !== 'bottom'
-            ? [header, panels]
-            : [panels, header]}
+            ? [panels, header]
+            : [header, panels]}
         </div>
       )
     }

package/src/index.jsx

@@ -7,7 +7,7 @@ import { MODE } from "./utils/const.js"
 import { generateRequester } from "./utils/request.js"
 import { executeLoadServices, resetConfigEventInit } from "./components/helper/resolver.js"
 import { createEmptyCopy, deepMerge } from "./utils/index.js"
-import { initBpm, SUBMIT_TYPE } from "./bpm/bpmInstance.js"
+import { initBpm, SUBMIT_TYPE, bpmInstance } from "./bpm/bpmInstance.js"
 // import { RuleExecuter } from "./rulesImp/index.js"
 export default {
   name: 'Resolver',
@@ -171,6 +171,14 @@ export default {
     bpmConfigs: {
       type: Object,
       default: {}
+    },
+    bpmBtns: {
+      type: Array,
+      default: [],
+    },
+    bpmBtnPosition: {
+      type: Number,
+      default: 3
     }
   },
   emits: ['update:modelValue', 'rootStoreChange'],
@@ -359,6 +367,9 @@ export default {
         return props.requestTraceId
       },
       toExecuteLoadServices,
+      getBpmInstance() {
+        return bpmInstance
+      }
     })
 
     const modelValue = computed({
@@ -377,6 +388,7 @@ export default {
           toExecuteLoadServices,
           bpmSubmitBtn: props.bpmSubmitBtn
         })
+        bpmInstance?.insertBtn?.(props.bpmBtns, props.bpmBtnPosition)
       }
     })
     return () => {

package/src/rules/eventsSupplement.js

@@ -90,7 +90,6 @@ const allInitEvents = {
     const isReplace = /^_replace:/.test(targetObjVal)
     if (isReplace) {
       targetObjVal = replaceDefValue(targetObjVal?.replace(/^_replace:/, ''), {config, dynamicMapComp})
-      
     }
     let val = ''
     try {
@@ -563,7 +562,7 @@ export function runEvent(events, isInit, tabpanelCode, rule) {
     const { eventId } = event
     const eventCode = eventsMap[eventId]
     // const { eventCode } = event
-    console.log('evnet===:', event)
+    console.log('evnet===:', eventCode, event)
     return allInitEvents[eventCode] && allInitEvents[eventCode].call(this, event, isInit, tabpanelCode, rule)
     // return {
     //   eventId,

package/src/theme/element/components/tabs.scss

@@ -3,7 +3,12 @@
 
 .resolver-tabs {
   // 这个是渲染器里面tabs
-  display: block;
+  // display: block;
+}
+.hidden-bar {
+  &::after {
+    display: none;
+  }
 }
 .el-tabs {
   // display: block;
@@ -13,6 +18,10 @@
     padding: var(--prmary-marign-second) var(--prmary-marign) var(--prmary-marign) var(--prmary-marign);
   }
 }
+.el-tabs__item {
+  min-height: var(--el-tabs-header-height);
+  height: unset;
+}
 .tabs-level-1 {
   --el-tabs-header-height: 49px;
   &.full-border {

package/src/utils/valid.js

@@ -18,29 +18,47 @@ function validFailAction(errInfo, dynamicMapComp) {
     let oneKey = errKyes[0]
     const referComps = []
     while (oneKey.indexOf('->') > -1) {
-      const compInfo = dynamicMapComp[oneKey]
-      compInfo && referComps.unshift(compInfo)
+      let idx = -1
+      let code = ''
+      const matchs = oneKey?.match(/^(.+)\[(\d+)\]$/)
+      if (matchs) {
+        idx = parseInt(matchs[2])
+        code = matchs[1]
+      } else {
+        code = oneKey
+      }
+
+      const compInfo = dynamicMapComp[code]
+      compInfo && referComps.unshift({
+        compInfo,
+        cycleIdx: idx
+      })
       oneKey = oneKey?.split('->')?.slice(0, -1)?.join('->') || ''
-      // oneKey = oneKey.replace(/->[^(->)]+$/, '')
-      // oneKey = oneKey.replace(/\[\d+\]$/, '')
     }
     const compInfo = dynamicMapComp[oneKey]
-    compInfo && referComps.unshift(compInfo)
-    referComps.forEach((comp, idx) => {
-      validFail(comp, referComps?.[idx + 1])
+    compInfo && referComps.unshift({
+      compInfo,
+      cycleIdx: -1
+    })
+    referComps.forEach(({compInfo, cycleIdx}) => {
+      validFail(compInfo, cycleIdx)
     })
     // 组件对应的页面展示更新后才能获取到校验住的元素
     setTimeout(() => {
-      const fouceErrEle = document.querySelector('.el-form-item__error')
-      const fouceEle = fouceErrEle.parentElement
-      fouceEle && fouceEle.scrollIntoView({ behavior: 'smooth' })
+      const {compInfo: config} = referComps.pop()
+      const veiwEl = config?.wrapVm?.vnode?.el
+      veiwEl && veiwEl.scrollIntoView({ behavior: 'smooth' })
+
+      // const fouceErrEle = document.querySelector('.el-form-item__error')
+      // const fouceEle = fouceErrEle.parentElement
+      // fouceEle && fouceEle.scrollIntoView({ behavior: 'smooth' })
     }, 200)
   }
 }
 // 校验不通过的时候，需要进行一下组件配置的调整，
 // 标签组件，需要进行聚焦当前页面
 // component组件，需要打开折叠
-function validFail(config, nextConfig) {
+function validFail(config, cycleIdx) {
   const type = config.renderby || config.metaType
   switch (type) {
     case 'CustomComponentTabPane':
@@ -49,16 +67,15 @@ function validFail(config, nextConfig) {
         if (tab.metaType === 'CustomComponentTabPane') {
           tab.defaultShowFlag = '0'
         }
-        if (tab.metaType === 'CustomComponentCycleTabPane') {
+        if (tab.metaType === 'CustomComponentCycleTabPane' || tab?.isCycle == '1') {
           tab.currentCode = ''
         }
       })
-      if (type === 'CustomComponentTabPane') {
+      if (type === 'CustomComponentTabPane' && config?.isCycle != '1') {
         config.defaultShowFlag = '1'
       }
-      if (type === 'CustomComponentCycleTabPane') {
-        const rowIdx = nextConfig?.rowIndex
-        config.currentCode = `${config.metaCode}-${rowIdx}`
+      if (type === 'CustomComponentCycleTabPane' || config?.isCycle == '1') {
+        config.currentCode = `${config.metaCode}-${cycleIdx}`
       }
       break
     case 'CustomComponentCollapse':