@ibiz-template/vue3-components 0.7.41-alpha.5 → 0.7.41-alpha.51

package/lib/control/drtab/drtab.cjs

@@ -8,8 +8,8 @@ var ramda = require('ramda');
 var core = require('@ibiz-template/core');
 var drtab_controller = require('./drtab.controller.cjs');
 var drtabControl_util = require('./drtab-control.util.cjs');
-require('./drtab.css');
 var flowDrtab = require('./flow-drtab.cjs');
+require('./drtab.css');
 
 "use strict";
 const DRTabControl = /* @__PURE__ */ vue.defineComponent({
@@ -42,6 +42,13 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
      */
     provider: {
       type: Object
+    },
+    /**
+     * @description 隐藏编辑项
+     */
+    hideEditItem: {
+      type: Boolean,
+      default: void 0
     }
   },
   setup() {
@@ -50,13 +57,13 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
     const ns = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     const router = vueRouter.useRouter();
     const controlRef = vue.ref();
-    const counterData = vue.reactive({});
+    const counterData = vue.ref({});
     const {
       visibleItems,
       moreItems
     } = drtabControl_util.useAppDRTab(c, controlRef, counterData);
     const fn = (counter) => {
-      Object.assign(counterData, counter);
+      counterData.value = counter;
     };
     const tabPosition = ((_a = c.view.model.tabLayout) == null ? void 0 : _a.toLowerCase()) || "top";
     c.evt.on("onCreated", () => {
@@ -72,12 +79,25 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
       (_a2 = c.counter) == null ? void 0 : _a2.offChange(fn);
     });
     c.setRouter(router);
+    const emitChange = () => {
+      const {
+        activeName
+      } = c.state;
+      const drTabItem = c.state.drTabPages.find((item) => item.tag === activeName);
+      if (drTabItem) {
+        c.evt.emit("onTabChange", {
+          data: drTabItem
+        });
+      }
+    };
     const handleTabChange = () => {
       c.handleTabChange();
+      emitChange();
     };
     const onTabChange = (key) => {
       c.state.activeName = key;
       c.handleTabChange();
+      emitChange();
     };
     const route = vueRouter.useRoute();
     let expViewRoutePath = "";
@@ -130,7 +150,7 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
           }, null), vue.createVNode("div", {
             "class": "caption"
           }, [(_b = activeTab.value) == null ? void 0 : _b.caption, ((_c = activeTab.value) == null ? void 0 : _c.counterId) && vue.createVNode(vue.resolveComponent("iBizBadge"), {
-            "value": counterData[activeTab.value.counterId],
+            "value": counterData.value[activeTab.value.counterId],
             "counterMode": activeTab.value.counterMode
           }, null)]), vue.createVNode("ion-icon", {
             "name": "chevron-down-outline"
@@ -151,7 +171,7 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
                 }, null), vue.createVNode("span", {
                   "class": "caption"
                 }, [tab.caption]), tab.counterId && vue.createVNode(vue.resolveComponent("iBizBadge"), {
-                  "value": counterData[tab.counterId],
+                  "value": counterData.value[tab.counterId],
                   "counterMode": tab.counterMode
                 }, null), tab.tag === c.state.activeName && vue.createVNode("ion-icon", {
                   "name": "checkmark-outline"
@@ -190,7 +210,8 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
         "params": this.c.params,
         "showHeader": this.tabPosition === "flow",
         "counterData": this.counterData,
-        "activeTab": this.activeTab
+        "activeTab": this.activeTab,
+        "controller": this.c
       }, null);
     }
     const moreTab = this.moreItems.find((tab) => tab.tag === this.c.state.activeName) || {};
@@ -247,6 +268,7 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
       default: () => [isCreated && isCalculatedPermission && this.tabPosition === "top_dropdownlist" ? this.renderDropdownList() : vue.createVNode(vue.resolveComponent("el-tabs"), {
         "modelValue": this.c.state.activeName,
         "onUpdate:modelValue": ($event) => this.c.state.activeName = $event,
+        "tabPosition": this.tabPosition,
         "onTabChange": this.handleTabChange
       }, {
         default: () => [this.visibleItems.map((tab) => {

package/lib/control/drtab/drtab.controller.cjs

@@ -3,6 +3,7 @@
 var qxUtil = require('qx-util');
 var runtime = require('@ibiz-template/runtime');
 var vue3Util = require('@ibiz-template/vue3-util');
+var ramda = require('ramda');
 
 "use strict";
 var __defProp = Object.defineProperty;
@@ -84,6 +85,40 @@ class DRTabController extends runtime.ControlController {
     const userId = this.context.srfuserid;
     return "".concat(userId, "_").concat(this.view.model.codeName, "_").concat(this.model.codeName);
   }
+  /**
+   * 是否启用锚点栏
+   *
+   * @readonly
+   * @type {boolean}
+   * @memberof DRTabController
+   */
+  get enableAnchor() {
+    if (this.controlParams.enablenavbar) {
+      return this.controlParams.enablenavbar === "true";
+    }
+    return ibiz.config.drtab.enableNavbar;
+  }
+  /**
+   * 导航栏位置
+   *
+   * @readonly
+   * @type {string}
+   * @memberof DRTabController
+   */
+  get navbarpos() {
+    var _a;
+    return ((_a = this.controlParams.navbarpos) == null ? void 0 : _a.toLowerCase()) || ibiz.config.drtab.navbarPos.toLowerCase();
+  }
+  /**
+   * 导航栏宽度
+   *
+   * @readonly
+   * @type {string}
+   * @memberof DRTabController
+   */
+  get navbarwidth() {
+    return this.controlParams.navbarwidth || ibiz.config.drtab.navbarWidth;
+  }
   /**
    * 设置 Router 对象
    *
@@ -113,7 +148,7 @@ class DRTabController extends runtime.ControlController {
     super.initState();
     this.state.drTabPages = [];
     this.state.showMore = false;
-    this.state.hideEditItem = !Object.is(this.model.hideEditItem, false);
+    this.state.hideEditItem = !!this.model.hideEditItem;
   }
   /**
    * 创建完成
@@ -139,6 +174,8 @@ class DRTabController extends runtime.ControlController {
    * @date 2024-05-16 17:05:01
    */
   calcItemStateByCounter() {
+    if (!this.state.activated)
+      return;
     this.state.drTabPages.forEach((item) => {
       const visible = runtime.calcItemVisibleByCounter(item, this.counter);
       if (visible !== void 0) {
@@ -236,10 +273,15 @@ class DRTabController extends runtime.ControlController {
         const data = event.data[0];
         this.view.state.srfactiveviewdata = data;
         if (Object.prototype.hasOwnProperty.call(data, "srfreadonly")) {
-          this.view.context.srfreadonly = data.srfreadonly;
+          if (data.srfreadonly) {
+            this.view.context.srfreadonly = true;
+          } else if (ramda.isNil(this.view.context.srfreadonly)) {
+            this.view.context.srfreadonly = false;
+          }
         }
         await this.calcDrTabPagesState();
         this.handleFormChange();
+        this.doDefaultSelect();
       });
       this.form.evt.on("onLoadDraftSuccess", () => {
         this.handleFormChange();
@@ -252,6 +294,24 @@ class DRTabController extends runtime.ControlController {
     if (!this.form) {
       await this.calcDrTabPagesState();
     }
+    if (this.form && this.form.state.isLoaded) {
+      this.doDefaultSelect();
+    }
+  }
+  /**
+   * @description 处理第一次的默认选中
+   * @memberof DRTabController
+   */
+  doDefaultSelect() {
+    var _a;
+    const viewForm = (_a = this.view.layoutPanel) == null ? void 0 : _a.panelItems.view_form;
+    if (viewForm) {
+      viewForm.state.visible = false;
+      viewForm.state.keepAlive = false;
+    }
+    if (!this.state.hideEditItem && this.state.activeName === this.model.uniqueTag) {
+      this.setVisible("form");
+    }
   }
   /**
    * 处理表单数据变更
@@ -296,16 +356,13 @@ class DRTabController extends runtime.ControlController {
     }
     if (!this.state.hideEditItem) {
       drTabPages.push({
-        tag: uniqueTag,
         caption,
+        tag: uniqueTag,
         hidden: !!this.state.hideEditItem,
         disabled: false,
         sysImage: editItemSysImage,
         fullPath: this.routeDepth ? vue3Util.getNestedRoutePath(this.router.currentRoute.value, this.routeDepth) : ""
       });
-      this.state.defaultName = "";
-    } else {
-      this.state.defaultName = (dedrtabPages == null ? void 0 : dedrtabPages[0].id) || "";
     }
     dedrtabPages == null ? void 0 : dedrtabPages.forEach((item) => {
       let itemCaption = item.caption;
@@ -334,6 +391,7 @@ class DRTabController extends runtime.ControlController {
       });
     });
     this.state.drTabPages = drTabPages;
+    this.state.defaultName = drTabPages[0].tag;
     if (this.view.state.srfnav) {
       this.state.activeName = this.view.state.srfnav;
     } else {
@@ -459,6 +517,8 @@ class DRTabController extends runtime.ControlController {
    * @return {*}  {Promise<void>}
    */
   async initCounter() {
+    if (this.state.isCounterDisabled)
+      return;
     const { appCounterRefs } = this.model;
     const appCounterRef = appCounterRefs == null ? void 0 : appCounterRefs[0];
     if (appCounterRef) {
@@ -509,6 +569,15 @@ class DRTabController extends runtime.ControlController {
       this.counter.destroy();
     }
   }
+  /**
+   * @description 设置激活项
+   * @param {string} name
+   * @memberof DRTabController
+   */
+  setActive(name) {
+    this.state.activeName = name;
+    this.handleTabChange();
+  }
 }
 
 exports.DRTabController = DRTabController;

package/lib/control/drtab/drtab.css

@@ -1 +1 @@
-.ibiz-control-drtab{--ibiz-control-drtab-active-color:var(--ibiz-color-primary);--ibiz-control-drtab-hover-color:var(--ibiz-color-text-0);--ibiz-control-drtab-hover-bg-color:transparent}.ibiz-control-drtab__counter{margin-left:var(--ibiz-spacing-tight)}.ibiz-control-drtab .el-tabs .el-tabs__header{margin:var(--ibiz-spacing-none)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap{margin:var(--ibiz-spacing-none)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__active-bar{background-color:var(--ibiz-control-drtab-active-color)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item{font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-text-2)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item:hover{color:var(--ibiz-control-drtab-hover-color);background-color:var(--ibiz-control-drtab-hover-bg-color)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item.is-active{color:var(--ibiz-control-drtab-active-color)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item.is-top:last-child{padding-right:var(--ibiz-spacing-none)}.ibiz-control-drtab .el-tabs.el-tabs--bottom .el-tabs__nav-scroll,.ibiz-control-drtab .el-tabs.el-tabs--top .el-tabs__nav-scroll{padding:0 var(--ibiz-spacing-base)}.ibiz-control-drtab .el-tabs__item{padding:0 var(--ibiz-spacing-base)}.ibiz-control-drtab .el-tabs__nav-next,.ibiz-control-drtab .el-tabs__nav-prev{line-height:var(--el-tabs-header-height)}.ibiz-control-drtab-label__icon{margin-right:var(--ibiz-spacing-tight)}.ibiz-control-drtab-more .el-tabs.el-tabs.el-tabs--top .el-tabs__header .el-tabs__nav-next,.ibiz-control-drtab-more .el-tabs.el-tabs.el-tabs--top .el-tabs__header .el-tabs__nav-prev{display:none}.ibiz-control-drtab-more .el-tabs.el-tabs.el-tabs--top .el-tabs__nav-wrap.is-scrollable{padding:var(--ibiz-spacing-none)}.ibiz-control-drtab-more-dropdown{height:100%}.ibiz-control-drtab-more-dropdown__link{position:relative;display:flex;align-items:center;font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-text-2)}.ibiz-control-drtab-more-dropdown__link svg{color:var(--ibiz-color-text-2);fill:var(--ibiz-color-text-2)}.ibiz-control-drtab-more-dropdown__link:hover{color:var(--ibiz-color-text-0)}.ibiz-control-drtab-more-dropdown__link:hover svg{color:var(--ibiz-color-text-0);fill:var(--ibiz-color-text-0)}.ibiz-control-drtab-more-dropdown__link::after{position:absolute;left:-16px;display:inline-block;width:100%;height:100%;content:""}.ibiz-control-drtab-more-dropdown-popper{width:240px}.ibiz-control-drtab-more-dropdown-popper__active{background-color:var(--ibiz-color-primary-active)}.ibiz-control-drtab-more-dropdown-popper__label{display:flex;align-items:center;width:100%;overflow:hidden}.ibiz-control-drtab-more-dropdown-popper__label--text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-drtab-more-dropdown-popper__label--counter{min-width:20px;margin-left:var(--ibiz-spacing-tight)}.ibiz-control-drtab-more-dropdown-popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .ibiz-control-drtab-more-dropdown-popper__active.el-dropdown-menu__item{background-color:var(--ibiz-color-primary-active)}.ibiz-control-drtab-dropdown-list .ibiz-badge{width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);display:flex;align-items:center;justify-content:center;font-size:var(--ibiz-font-size-small)}.ibiz-control-drtab-dropdown-list__trigger{display:flex;cursor:pointer;align-items:center;font-size:var(--ibiz-font-size-header-5)}.ibiz-control-drtab-dropdown-list__trigger .caption{position:relative;padding:var(--ibiz-spacing-tight)}.ibiz-control-drtab-dropdown-list__trigger .caption .ibiz-badge{top:0;right:-6px;position:absolute}.ibiz-control-drtab-dropdown-list__popper{max-width:220px;min-width:150px}.ibiz-control-drtab-dropdown-list__popper--content{max-height:26vh;overflow:auto}.ibiz-control-drtab-dropdown-list__popper--item{display:flex;align-items:center}.ibiz-control-drtab-dropdown-list__popper--item .caption{padding-right:var(--ibiz-spacing-tight);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-drtab-dropdown-list__popper--item .ibiz-badge{width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);display:flex;align-items:center;justify-content:center;font-size:var(--ibiz-font-size-small);margin-right:var(--ibiz-spacing-tight)}.ibiz-control-drtab-dropdown-list__popper--item ion-icon{color:var(--ibiz-color-primary);font-size:var(--ibiz-width-icon-medium)}.ibiz-control-drtab-dropdown-list__popper--item.is-active{background-color:var(--ibiz-color-fill-0)!important}.ibiz-control-drtab-dropdown-list__popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list{background-color:transparent}.ibiz-control-drtab-dropdown-list__popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item{min-height:38px;color:var(--ibiz-color-text-0);background-color:transparent}.ibiz-control-drtab-dropdown-list__popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item:hover{background-color:var(--ibiz-color-fill-0)}
+.ibiz-control-drtab{--ibiz-control-drtab-active-color:var(--ibiz-color-primary);--ibiz-control-drtab-hover-color:var(--ibiz-color-text-0);--ibiz-control-drtab-hover-bg-color:transparent}.ibiz-control-drtab__counter{margin-left:var(--ibiz-spacing-tight)}.ibiz-control-drtab .el-tabs .el-tabs__header{margin:var(--ibiz-spacing-none)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap{margin:var(--ibiz-spacing-none)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__active-bar{background-color:var(--ibiz-control-drtab-active-color)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item{font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-text-2)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item:hover{color:var(--ibiz-control-drtab-hover-color);background-color:var(--ibiz-control-drtab-hover-bg-color)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item.is-active{color:var(--ibiz-control-drtab-active-color)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item.is-top:last-child{padding-right:var(--ibiz-spacing-none)}.ibiz-control-drtab .el-tabs.el-tabs--bottom .el-tabs__nav-scroll,.ibiz-control-drtab .el-tabs.el-tabs--top .el-tabs__nav-scroll{padding:0 var(--ibiz-spacing-base)}.ibiz-control-drtab .el-tabs__item{padding:0 var(--ibiz-spacing-base)}.ibiz-control-drtab .el-tabs__nav-next,.ibiz-control-drtab .el-tabs__nav-prev{line-height:var(--el-tabs-header-height)}.ibiz-control-drtab .ibiz-badge{text-align:center}.ibiz-control-drtab-label__icon{margin-right:var(--ibiz-spacing-tight)}.ibiz-control-drtab-more .el-tabs.el-tabs.el-tabs--top .el-tabs__header .el-tabs__nav-next,.ibiz-control-drtab-more .el-tabs.el-tabs.el-tabs--top .el-tabs__header .el-tabs__nav-prev{display:none}.ibiz-control-drtab-more .el-tabs.el-tabs.el-tabs--top .el-tabs__nav-wrap.is-scrollable{padding:var(--ibiz-spacing-none)}.ibiz-control-drtab-more-dropdown{height:100%}.ibiz-control-drtab-more-dropdown__link{position:relative;display:flex;align-items:center;font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-text-2)}.ibiz-control-drtab-more-dropdown__link svg{color:var(--ibiz-color-text-2);fill:var(--ibiz-color-text-2)}.ibiz-control-drtab-more-dropdown__link:hover{color:var(--ibiz-color-text-0)}.ibiz-control-drtab-more-dropdown__link:hover svg{color:var(--ibiz-color-text-0);fill:var(--ibiz-color-text-0)}.ibiz-control-drtab-more-dropdown__link::after{position:absolute;left:-16px;display:inline-block;width:100%;height:100%;content:""}.ibiz-control-drtab-more-dropdown-popper{width:240px}.ibiz-control-drtab-more-dropdown-popper__active{background-color:var(--ibiz-color-primary-active)}.ibiz-control-drtab-more-dropdown-popper__label{display:flex;align-items:center;width:100%;overflow:hidden}.ibiz-control-drtab-more-dropdown-popper__label--text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-drtab-more-dropdown-popper__label--counter{min-width:20px;margin-left:var(--ibiz-spacing-tight)}.ibiz-control-drtab-more-dropdown-popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .ibiz-control-drtab-more-dropdown-popper__active.el-dropdown-menu__item{background-color:var(--ibiz-color-primary-active)}.ibiz-control-drtab-dropdown-list .ibiz-badge{display:flex;align-items:center;justify-content:center;width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);font-size:var(--ibiz-font-size-small)}.ibiz-control-drtab-dropdown-list__trigger{display:flex;align-items:center;font-size:var(--ibiz-font-size-header-5);cursor:pointer}.ibiz-control-drtab-dropdown-list__trigger .caption{position:relative;padding:var(--ibiz-spacing-tight)}.ibiz-control-drtab-dropdown-list__trigger .caption .ibiz-badge{position:absolute;top:0;right:-6px}.ibiz-control-drtab-dropdown-list__popper{min-width:150px;max-width:220px}.ibiz-control-drtab-dropdown-list__popper--content{max-height:26vh;overflow:auto}.ibiz-control-drtab-dropdown-list__popper--item{display:flex;align-items:center}.ibiz-control-drtab-dropdown-list__popper--item .caption{padding-right:var(--ibiz-spacing-tight);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-drtab-dropdown-list__popper--item .ibiz-badge{display:flex;align-items:center;justify-content:center;width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);margin-right:var(--ibiz-spacing-tight);font-size:var(--ibiz-font-size-small)}.ibiz-control-drtab-dropdown-list__popper--item ion-icon{font-size:var(--ibiz-width-icon-medium);color:var(--ibiz-color-primary)}.ibiz-control-drtab-dropdown-list__popper--item.is-active{background-color:var(--ibiz-color-fill-0)!important}.ibiz-control-drtab-dropdown-list__popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list{background-color:transparent}.ibiz-control-drtab-dropdown-list__popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item{min-height:38px;color:var(--ibiz-color-text-0);background-color:transparent}.ibiz-control-drtab-dropdown-list__popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item:hover{background-color:var(--ibiz-color-fill-0)}

package/lib/control/drtab/flow-drtab.cjs

@@ -41,28 +41,152 @@ const FlowDrtab = /* @__PURE__ */ vue.defineComponent({
       type: Object,
       default: () => {
       }
+    },
+    controller: {
+      type: Object,
+      default: () => {
+      }
     }
   },
   setup(props) {
     const ns = vue3Util.useNamespace("flow-drtab");
     const uuid = qxUtil.createUUID();
+    const c = props.controller;
     const navtag = vue.ref("");
     const viewList = vue.ref([]);
+    const navbarpos = vue.ref();
+    const navBarWidth = vue.ref(200);
+    const visibleViews = [];
+    const scrollTop = vue.ref(0);
+    const navbarRef = vue.ref();
+    const completedViews = vue.ref(0);
+    const tempTimer = vue.ref();
+    const tempTarget = vue.ref();
+    navbarpos.value = c.navbarpos;
+    navBarWidth.value = c.navbarwidth;
+    const allVisibleViews = vue.computed(() => {
+      return props.pagesstate.filter((item) => {
+        const target = props.drtabpages.find((page) => {
+          return page.id === item.tag;
+        });
+        return target && !item.hidden;
+      }).length;
+    });
+    const allNavTags = vue.computed(() => {
+      if (props.pagesstate) {
+        return props.pagesstate.map((item) => {
+          const target = props.drtabpages.find((page) => {
+            return page.id === item.tag;
+          });
+          return "".concat(target == null ? void 0 : target.appViewId, "_").concat(item.tag);
+        });
+      }
+      return [];
+    });
     const scrollToTarget = () => {
       if (navtag.value) {
-        const el = document.getElementById("".concat(uuid, "_").concat(navtag.value));
+        const el = document.getElementById("".concat(navtag.value));
         if (el) {
           el.scrollIntoView();
         }
       }
     };
-    const onViewMounted = () => {
-      scrollToTarget();
+    const isFullyVisible = (element, container) => {
+      const containerRect = container.getBoundingClientRect();
+      const elementRect = element.getBoundingClientRect();
+      return (
+        // 元素顶部不超出容器顶部
+        elementRect.top >= containerRect.top && // 元素底部不超出容器底部
+        elementRect.bottom <= containerRect.bottom && // 元素左侧不超出容器左侧
+        elementRect.left >= containerRect.left && // 元素右侧不超出容器右侧
+        elementRect.right <= containerRect.right
+      );
+    };
+    const scrollToTargetNavItem = () => {
+      const anchor = document.getElementById("navbar_".concat(navtag.value));
+      if (anchor && navbarRef.value && !isFullyVisible(anchor, navbarRef.value)) {
+        anchor.scrollIntoView({
+          behavior: "smooth"
+        });
+      }
+    };
+    const computeSelectItem = () => {
+      if (visibleViews.length > 0) {
+        navtag.value = visibleViews[0];
+      }
+      if (tempTarget.value) {
+        clearTimeout(tempTimer.value);
+        tempTimer.value = setTimeout(() => {
+          navtag.value = tempTarget.value;
+          scrollToTargetNavItem();
+          tempTarget.value = "";
+        }, 200);
+      } else {
+        scrollToTargetNavItem();
+      }
+    };
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        var _a, _b;
+        if (entry.isIntersecting) {
+          if (entry.target && entry.target.id) {
+            if (visibleViews.length > 0) {
+              const curIndex = (_a = allNavTags.value) == null ? void 0 : _a.findIndex((tag) => tag === entry.target.id);
+              const index = (_b = allNavTags.value) == null ? void 0 : _b.findIndex((tag) => tag === visibleViews[0]);
+              if (curIndex < index) {
+                visibleViews.unshift(entry.target.id);
+              } else {
+                visibleViews.push(entry.target.id);
+              }
+            } else {
+              visibleViews.push(entry.target.id);
+            }
+          }
+        } else if (entry.target && entry.target.id) {
+          const index = visibleViews.indexOf(entry.target.id);
+          if (index >= 0) {
+            visibleViews.splice(index, 1);
+          }
+        }
+      });
+      visibleViews.sort((a, b) => {
+        var _a, _b;
+        const aIndex = (_a = allNavTags.value) == null ? void 0 : _a.findIndex((tag) => tag === a);
+        const bIndex = (_b = allNavTags.value) == null ? void 0 : _b.findIndex((tag) => tag === b);
+        return aIndex - bIndex;
+      });
+      if (allVisibleViews.value !== completedViews.value || !c.enableAnchor) {
+        return;
+      }
+      computeSelectItem();
+    });
+    const onViewMounted = (item) => {
+      const target = props.drtabpages.find((page) => {
+        return page.id === item.tag;
+      });
+      completedViews.value += 1;
+      if (completedViews.value === allVisibleViews.value && !navtag.value) {
+        navtag.value = "".concat(target == null ? void 0 : target.appViewId, "_").concat(props.pagesstate[0].tag);
+      }
+      const el = document.getElementById("".concat(target == null ? void 0 : target.appViewId, "_").concat(item.tag));
+      if (el) {
+        observer.observe(el);
+      }
+      if (completedViews.value === allVisibleViews.value && props.activeTab && props.activeTab.tag !== props.drtabpages[0].id) {
+        vue.nextTick(() => {
+          scrollToTarget();
+        });
+      }
     };
     vue.watch(() => props.activeTab, (newVal, oldVal) => {
       if (newVal && newVal.tag !== (oldVal == null ? void 0 : oldVal.tag)) {
-        navtag.value = newVal.tag;
-        scrollToTarget();
+        const target = props.drtabpages.find((page) => {
+          return page.id === newVal.tag;
+        });
+        navtag.value = "".concat(target == null ? void 0 : target.appViewId, "_").concat(newVal.tag);
+        if (newVal.tag !== props.drtabpages[0].id) {
+          scrollToTarget();
+        }
       }
     }, {
       deep: true,
@@ -85,6 +209,14 @@ const FlowDrtab = /* @__PURE__ */ vue.defineComponent({
       deep: true,
       immediate: true
     });
+    vue.onActivated(() => {
+      vue.nextTick(() => {
+        const el = document.getElementById("".concat(uuid));
+        if (el) {
+          el.scrollTop = scrollTop.value;
+        }
+      });
+    });
     const calcStyle = (tag) => {
       const target = viewList.value.find((item) => {
         return item.id === tag;
@@ -96,14 +228,68 @@ const FlowDrtab = /* @__PURE__ */ vue.defineComponent({
         };
       }
     };
+    const onClickBar = (item) => {
+      const target = props.drtabpages.find((page) => {
+        return page.id === item.tag;
+      });
+      tempTarget.value = "".concat(target == null ? void 0 : target.appViewId, "_").concat(item.tag);
+      const el = document.getElementById("".concat(target == null ? void 0 : target.appViewId, "_").concat(item.tag));
+      if (el) {
+        el.scrollIntoView({
+          behavior: "smooth"
+        });
+        if (visibleViews.includes(tempTarget.value)) {
+          navtag.value = tempTarget.value;
+        }
+      }
+    };
+    const renderAnchorBar = () => {
+      if (c.enableAnchor) {
+        return vue.createVNode("div", {
+          "class": [ns.e("anchor-bar"), ns.is(navbarpos.value, true)],
+          "style": {
+            width: "".concat(navBarWidth.value, "px")
+          }
+        }, [vue.createVNode("div", {
+          "class": [ns.e("anchor-items"), ns.is(navbarpos.value)],
+          "ref": (el) => {
+            navbarRef.value = el;
+          }
+        }, [props.pagesstate.map((item) => {
+          const target = props.drtabpages.find((page) => {
+            return page.id === item.tag;
+          });
+          if (!target || item.hidden) {
+            return null;
+          }
+          return vue.createVNode("div", {
+            "class": [ns.e("anchor-item"), ns.is("active", "".concat(target == null ? void 0 : target.appViewId, "_").concat(item.tag) === navtag.value)],
+            "id": "navbar_".concat(target.appViewId, "_").concat(item.tag),
+            "onClick": () => onClickBar(item)
+          }, [item.caption]);
+        })])]);
+      }
+    };
+    const handleScroll = () => {
+      const el = document.getElementById("".concat(uuid));
+      if (el) {
+        scrollTop.value = el.scrollTop;
+      }
+    };
     return {
+      c,
       ns,
       uuid,
+      navbarpos,
       onViewMounted,
-      calcStyle
+      navBarWidth,
+      calcStyle,
+      renderAnchorBar,
+      handleScroll
     };
   },
   render() {
+    var _a, _b;
     const tabs = this.pagesstate.map((item) => {
       const counterNum = item.counterId ? this.counterData[item.counterId] : void 0;
       const viewShell = vue.resolveComponent("IBizViewShell");
@@ -114,7 +300,7 @@ const FlowDrtab = /* @__PURE__ */ vue.defineComponent({
         return null;
       }
       return vue.createVNode("div", {
-        "id": "".concat(this.uuid, "_").concat(item.tag),
+        "id": "".concat(target.appViewId, "_").concat(item.tag),
         "class": this.ns.e("tab-item")
       }, [this.showHeader && vue.createVNode("div", {
         "class": this.ns.em("tab-item", "label")
@@ -134,12 +320,19 @@ const FlowDrtab = /* @__PURE__ */ vue.defineComponent({
         context: this.context,
         params: this.params,
         viewId: target.appViewId,
-        onMounted: this.onViewMounted
+        onMounted: () => this.onViewMounted(item)
       })])]);
     });
     return vue.createVNode("div", {
-      "class": this.ns.b()
-    }, [tabs]);
+      "class": [this.ns.b(), this.ns.m(this.navbarpos), this.ns.is("left", (_a = this.navbarpos) == null ? void 0 : _a.includes("left")), this.ns.is("right", (_b = this.navbarpos) == null ? void 0 : _b.includes("right")), this.ns.is("enable-anchor", this.c.enableAnchor)],
+      "onScroll": this.handleScroll,
+      "id": this.uuid
+    }, [this.renderAnchorBar(), vue.createVNode("div", {
+      "class": this.ns.e("container"),
+      "style": {
+        "--navbarwidth": "".concat(this.navBarWidth, "px")
+      }
+    }, [tabs])]);
   }
 });
 

package/lib/control/drtab/flow-drtab.css

@@ -1 +1 @@
-.ibiz-flow-drtab{display:flex;flex-direction:column;gap:var(--ibiz-spacing-base);background-color:var(--ibiz-color-bg-0)}.ibiz-flow-drtab__tab-item{margin-right:var(--ibiz-spacing-base);background-color:var(--ibiz-color-bg-1);border-radius:var(--ibiz-border-radius-medium)}.ibiz-flow-drtab__tab-item--label{padding:var(--ibiz-spacing-base);font-size:var(--ibiz-font-size-header-5);border-bottom:1px solid var(--ibiz-color-fill-1)}.ibiz-flow-drtab__tab-item--tab-view{padding:var(--ibiz-spacing-tight) 0}.ibiz-flow-drtab__counter{font-size:var(--ibiz-font-size-regular);text-align:center}
+.ibiz-flow-drtab{width:100%;height:100%;overflow:hidden;background-color:var(--ibiz-color-bg-0)}.ibiz-flow-drtab__container{height:100%;overflow:auto}.ibiz-flow-drtab__tab-item{background-color:var(--ibiz-color-bg-1);border-radius:var(--ibiz-border-radius-medium)}.ibiz-flow-drtab__tab-item--label{padding:var(--ibiz-spacing-base);font-size:var(--ibiz-font-size-header-5);border-bottom:1px solid var(--ibiz-color-fill-1)}.ibiz-flow-drtab__tab-item--tab-view{padding:var(--ibiz-spacing-tight) 0}.ibiz-flow-drtab__tab-item+.ibiz-flow-drtab__tab-item{margin-top:var(--ibiz-spacing-base)}.ibiz-flow-drtab__counter{font-size:var(--ibiz-font-size-regular);text-align:center}.ibiz-flow-drtab .ibiz-flow-drtab{background-color:inherit}.ibiz-flow-drtab.is-enable-anchor{display:flex;gap:var(--ibiz-spacing-base)}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__container{flex:1}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-bar{display:flex;min-width:200px;padding:var(--ibiz-spacing-base) 0;font-size:var(--ibiz-font-size-regular);background-color:var(--ibiz-color-bg-1);border-radius:var(--ibiz-border-radius-medium)}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-bar.is-topleft{align-items:start}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-bar.is-bottomleft{align-items:end}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-bar.is-topright{flex-direction:row-reverse;align-items:start}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-bar.is-bottomright{flex-direction:row-reverse;align-items:end}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-bar.is-middleleft{align-items:center}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-bar.is-middleright{flex-direction:row-reverse;align-items:center}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-items{width:100%;max-height:100%;overflow:auto}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-item{width:100%;height:32px;padding:0 var(--ibiz-spacing-base);overflow:hidden;line-height:32px;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-item:hover{color:var(--ibiz-color-primary)}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-item.is-active{position:relative;color:var(--ibiz-color-primary)}.ibiz-flow-drtab.is-enable-anchor .ibiz-flow-drtab__anchor-item.is-active::before{position:absolute;top:0;left:0;width:4px;height:100%;content:"";background-color:var(--ibiz-color-primary);border-radius:2px}.ibiz-flow-drtab.is-enable-anchor.is-left{flex-direction:row;overflow:auto}.ibiz-flow-drtab.is-enable-anchor.is-left>.ibiz-flow-drtab__container{--navbarwidth:200px;flex:1 0;width:calc(100% - var(--navbarwidth) - 2 * var(--ibiz-spacing-base));overflow:unset}.ibiz-flow-drtab.is-enable-anchor.is-left .ibiz-flow-drtab__anchor-bar{position:sticky;top:0}.ibiz-flow-drtab.is-enable-anchor.is-left .ibiz-flow-drtab__anchor-items::-webkit-scrollbar{display:none}.ibiz-flow-drtab.is-enable-anchor.is-right{flex-direction:row-reverse;overflow:auto}.ibiz-flow-drtab.is-enable-anchor.is-right>.ibiz-flow-drtab__container{--navbarwidth:200px;flex:1 0;width:calc(100% - var(--navbarwidth) - 2 * var(--ibiz-spacing-base));overflow:unset}.ibiz-flow-drtab.is-enable-anchor.is-right .ibiz-flow-drtab__anchor-bar{position:sticky;top:0}.ibiz-flow-drtab.is-enable-anchor.is-right .ibiz-flow-drtab__anchor-items::-webkit-scrollbar{display:none}

package/lib/control/form/edit-form/edit-form.cjs

@@ -62,6 +62,20 @@ const EditFormControl = /* @__PURE__ */ vue.defineComponent({
     loadDefault: {
       type: Boolean,
       default: true
+    },
+    /**
+     * @description 简单模式下传入的数据索引
+     */
+    simpleDataIndex: {
+      type: Number,
+      required: false
+    },
+    /**
+     * @description 多数据部件表单模式下传入的表单索引
+     */
+    mdCtrlFormIndex: {
+      type: Number,
+      required: false
     }
   },
   setup(props) {
@@ -73,6 +87,9 @@ const EditFormControl = /* @__PURE__ */ vue.defineComponent({
     const anchorList = vue.ref([]);
     const anchorTargetRef = vue.ref();
     if (props.isSimple) {
+      if (props.simpleDataIndex || props.simpleDataIndex === 0) {
+        c.setSimpleDataIndex(props.simpleDataIndex);
+      }
       c.evt.on("onMounted", () => {
         c.setSimpleData(props.data || {});
       });
@@ -88,6 +105,9 @@ const EditFormControl = /* @__PURE__ */ vue.defineComponent({
         deep: true
       });
     }
+    if (props.mdCtrlFormIndex || props.mdCtrlFormIndex === 0) {
+      c.setMdCtrlFormIndex(props.mdCtrlFormIndex);
+    }
     c.evt.on("onCreated", () => {
       const keys = Object.keys(c.details);
       keys.forEach((key) => {

package/lib/control/form/form/form.cjs

@@ -25,6 +25,7 @@ const FormControl = /* @__PURE__ */ vue.defineComponent({
   }) {
     const ns = vue3Util.useNamespace("control-form");
     const c = props.controller;
+    vue3Util.useControlPopoverzIndex(c);
     const slotProps = {
       form: c
     };
@@ -53,7 +54,8 @@ const FormControl = /* @__PURE__ */ vue.defineComponent({
         return vue.renderSlot(slots, detailId, {
           model: detail,
           data: c.state.data,
-          value: c.state.data[detailId]
+          value: c.state.data[detailId],
+          controller: c.details[detailId]
         });
       }
       const childSlots = {};

package/lib/control/form/form/index.cjs

@@ -15,6 +15,7 @@ var index$6 = require('../form-detail/form-rawitem/index.cjs');
 var index$7 = require('../form-detail/form-tab-panel/index.cjs');
 var index$8 = require('../form-detail/form-tab-page/index.cjs');
 var index$9 = require('../form-detail/form-button-list/index.cjs');
+var index$a = require('../form-detail/form-iframe/index.cjs');
 
 "use strict";
 const IBizFormControl = vue3Util.withInstall(form.FormControl, function(v) {
@@ -29,6 +30,7 @@ const IBizFormControl = vue3Util.withInstall(form.FormControl, function(v) {
   v.use(index$7.IBizFormTabPanel);
   v.use(index$8.IBizFormTabPage);
   v.use(index$9.IBizFormButtonList);
+  v.use(index$a.IBizFormIFrame);
 });
 
 exports.IBizFormControl = IBizFormControl;