@ibiz-template/vue3-components 0.7.41-alpha.13 → 0.7.41-alpha.130

package/lib/control/drtab/drtab.cjs

@@ -47,7 +47,8 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
      * @description 隐藏编辑项
      */
     hideEditItem: {
-      type: Boolean
+      type: Boolean,
+      default: void 0
     }
   },
   setup() {
@@ -56,13 +57,17 @@ 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 {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c);
     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", () => {
@@ -78,12 +83,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 = "";
@@ -123,22 +141,47 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
     const renderDropdownList = () => {
       return vue.createVNode(vue.resolveComponent("el-dropdown"), {
         "trigger": "click",
-        "class": ns.b("dropdown-list"),
-        "popper-class": ns.be("dropdown-list", "popper"),
-        "onCommand": onTabChange
+        "onCommand": onTabChange,
+        "style": semanticStyle("dropdown", {
+          item: activeTab.value
+        }),
+        "popper-class": [semanticClass("popup"), ns.be("dropdown-list", "popper")],
+        "popper-style": semanticStyle("popup"),
+        "class": [ns.b("dropdown-list"), ns.e("dropdown"), semanticClass("dropdown", {
+          item: activeTab.value
+        })]
       }, {
         default: () => {
           var _a2, _b, _c;
           return vue.createVNode("div", {
             "class": ns.be("dropdown-list", "trigger")
           }, [((_a2 = activeTab.value) == null ? void 0 : _a2.sysImage) && vue.createVNode(vue.resolveComponent("iBizIcon"), {
+            "class": [ns.em("dropdown", "icon"), semanticClass("dropdown.icon", {
+              item: activeTab.value
+            })],
+            "style": semanticStyle("dropdown.icon", {
+              item: activeTab.value
+            }),
             "icon": activeTab.value.sysImage
           }, 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],
+            "class": [ns.em("dropdown", "caption"), semanticClass("dropdown.caption", {
+              item: activeTab.value
+            })],
+            "style": semanticStyle("dropdown.caption", {
+              item: activeTab.value
+            })
+          }, [(_b = activeTab.value) == null ? void 0 : _b.caption]), ((_c = activeTab.value) == null ? void 0 : _c.counterId) && vue.createVNode(vue.resolveComponent("iBizBadge"), {
+            "class": [ns.em("dropdown", "counter"), semanticClass("dropdown.counter", {
+              item: activeTab.value,
+              counter: counterData.value
+            })],
+            "style": semanticStyle("dropdown.counter", {
+              item: activeTab.value,
+              counter: counterData.value
+            }),
+            "value": counterData.value[activeTab.value.counterId],
             "counterMode": activeTab.value.counterMode
-          }, null)]), vue.createVNode("ion-icon", {
+          }, null), vue.createVNode("ion-icon", {
             "name": "chevron-down-outline"
           }, null)]);
         },
@@ -148,19 +191,41 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
           }, [c.state.drTabPages.map((tab) => {
             if (!tab.hidden) {
               return vue.createVNode(vue.resolveComponent("el-dropdown-item"), {
-                "class": [ns.bem("dropdown-list", "popper", "item"), ns.is("active", tab.tag === c.state.activeName)],
+                "class": [ns.e("item"), semanticClass("item", {
+                  item: tab
+                }), ns.bem("dropdown-list", "popper", "item"), ns.is("active", tab.tag === c.state.activeName)],
+                "style": semanticStyle("item", {
+                  item: tab
+                }),
                 "command": tab.tag,
                 "disabled": tab.disabled
               }, {
                 default: () => [tab.sysImage && vue.createVNode(vue.resolveComponent("iBizIcon"), {
-                  "icon": tab.sysImage
+                  "icon": tab.sysImage,
+                  "class": [ns.em("item", "icon"), semanticClass("item.icon", {
+                    item: tab
+                  })],
+                  "style": semanticStyle("item.icon", {
+                    item: tab
+                  })
                 }, null), vue.createVNode("span", {
-                  "class": "caption"
+                  "class": ["caption", ns.em("item", "caption"), semanticClass("item.caption", {
+                    item: tab
+                  })],
+                  "style": semanticStyle("item.caption", {
+                    item: tab
+                  })
                 }, [tab.caption]), tab.counterId && vue.createVNode(vue.resolveComponent("iBizBadge"), {
-                  "value": counterData[tab.counterId],
+                  "class": [ns.em("item", "counter"), ns.bem("dropdown-list", "popper", "counter"), semanticClass("item.counter", {
+                    item: tab,
+                    counter: counterData.value
+                  })],
+                  "style": semanticStyle("item.counter", {
+                    item: tab,
+                    counter: counterData.value
+                  }),
+                  "value": counterData.value[tab.counterId],
                   "counterMode": tab.counterMode
-                }, null), tab.tag === c.state.activeName && vue.createVNode("ion-icon", {
-                  "name": "checkmark-outline"
                 }, null)]
               });
             }
@@ -172,12 +237,14 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
     return {
       c,
       ns,
+      moreItems,
       activeTab,
       controlRef,
       counterData,
-      visibleItems,
-      moreItems,
       tabPosition,
+      visibleItems,
+      semanticClass,
+      semanticStyle,
       onTabChange,
       handleTabChange,
       renderDropdownList
@@ -190,26 +257,33 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
     } = this.c.state;
     if (this.tabPosition === "flow_noheader" || this.tabPosition === "flow") {
       return vue.createVNode(flowDrtab.FlowDrtab, {
-        "pagesstate": this.visibleItems,
+        "class": this.semanticClass("root"),
+        "style": this.semanticStyle("root"),
+        "semanticClass": this.semanticClass,
+        "semanticStyle": this.semanticStyle,
+        "pagesState": this.visibleItems,
         "drtabpages": this.modelData.dedrtabPages,
         "context": this.c.context,
         "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) || {};
     const more = vue.createVNode(vue.resolveComponent("el-dropdown"), {
       "trigger": "click",
-      "class": this.ns.b("more-dropdown"),
-      "popper-class": this.ns.b("more-dropdown-popper")
+      "style": this.semanticStyle("more"),
+      "popper-class": [this.semanticClass("popup"), this.ns.b("more-dropdown-popper")],
+      "popper-style": this.semanticStyle("popup"),
+      "class": [this.ns.b("more-dropdown"), this.semanticClass("more")]
     }, {
       default: () => {
         return vue.createVNode("div", {
           "class": this.ns.be("more-dropdown", "link"),
           "onClick": (e) => e.stopPropagation()
-        }, [vue.createVNode("span", null, [ibiz.i18n.t("app.more"), vue.createTextVNode(" ")]), vue.createVNode("svg", {
+        }, [vue.createVNode("span", null, [ibiz.i18n.t("app.more")]), vue.createVNode("svg", {
           "viewBox": "0 0 16 16",
           "xmlns": "http://www.w3.org/2000/svg",
           "height": "1em",
@@ -226,16 +300,28 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
           default: () => {
             return this.moreItems.map((item) => {
               return vue.createVNode(vue.resolveComponent("el-dropdown-item"), {
-                "class": [this.c.state.activeName === item.tag ? this.ns.be("more-dropdown-popper", "active") : ""],
+                "class": [this.c.state.activeName === item.tag ? this.ns.be("more-dropdown-popper", "active") : "", this.ns.bem("more-dropdown-popper", "label", "item"), this.ns.e("item"), this.semanticClass("item", {
+                  item
+                })],
+                "style": this.semanticStyle("item", {
+                  item
+                }),
                 "onClick": () => this.onTabChange(item.tag)
               }, {
                 default: () => [vue.createVNode("span", {
                   "class": [this.ns.be("more-dropdown-popper", "label")]
                 }, [vue.createVNode("span", {
-                  "class": this.ns.bem("more-dropdown-popper", "label", "text"),
+                  "class": [this.ns.em("item", "caption"), this.ns.bem("more-dropdown-popper", "label", "text")],
                   "title": core.showTitle(item.caption || "")
                 }, [item.caption || ""]), item.counterId && this.counterData[item.counterId] != null && vue.createVNode(vue.resolveComponent("iBizBadge"), {
-                  "class": this.ns.bem("more-dropdown-popper", "label", "counter"),
+                  "class": [this.ns.bem("more-dropdown-popper", "label", "counter"), this.ns.em("item", "counter"), this.semanticClass("item.counter", {
+                    item,
+                    counter: this.counterData
+                  })],
+                  "style": this.semanticStyle("item.counter", {
+                    item,
+                    counter: this.counterData
+                  }),
                   "value": this.counterData[item.counterId],
                   "counterMode": item.counterMode
                 }, null)])]
@@ -248,12 +334,16 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
     return vue.createVNode(vue.resolveComponent("iBizControlBase"), {
       "ref": "controlRef",
       "controller": this.c,
-      "class": [this.ns.b(), this.moreItems.length > 0 ? this.ns.b("more") : ""]
+      "class": [this.ns.b(), this.semanticClass("root"), this.moreItems.length > 0 ? this.ns.b("more") : ""],
+      "style": this.semanticStyle("root")
     }, {
       default: () => [isCreated && isCalculatedPermission && this.tabPosition === "top_dropdownlist" ? this.renderDropdownList() : vue.createVNode(vue.resolveComponent("el-tabs"), {
+        "tabPosition": this.tabPosition,
         "modelValue": this.c.state.activeName,
         "onUpdate:modelValue": ($event) => this.c.state.activeName = $event,
-        "onTabChange": this.handleTabChange
+        "onTabChange": this.handleTabChange,
+        "style": this.semanticStyle("content"),
+        "class": [this.ns.e("content"), this.semanticClass("content")]
       }, {
         default: () => [this.visibleItems.map((tab) => {
           const counterNum = tab.counterId ? this.counterData[tab.counterId] : void 0;
@@ -266,14 +356,36 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
             }, {
               label: () => {
                 return vue.createVNode("span", {
-                  "class": this.ns.b("label")
+                  "class": [this.ns.b("label"), this.ns.e("item"), this.semanticClass("item", {
+                    item: tab
+                  })],
+                  "style": this.semanticStyle("item", {
+                    item: tab
+                  })
                 }, [tab.sysImage && vue.createVNode(vue.resolveComponent("iBizIcon"), {
-                  "class": this.ns.be("label", "icon"),
+                  "class": [this.ns.be("label", "icon"), this.ns.em("item", "icon"), this.semanticClass("item.icon", {
+                    item: tab
+                  })],
+                  "style": this.semanticStyle("item.icon", {
+                    item: tab
+                  }),
                   "icon": tab.sysImage
                 }, null), vue.createVNode("span", {
-                  "class": this.ns.be("label", "text")
+                  "class": [this.ns.be("label", "text"), this.ns.em("item", "caption"), this.semanticClass("item.caption", {
+                    item: tab
+                  })],
+                  "style": this.semanticStyle("item.caption", {
+                    item: tab
+                  })
                 }, [tab.caption]), !ramda.isNil(counterNum) && vue.createVNode(vue.resolveComponent("iBizBadge"), {
-                  "class": this.ns.e("counter"),
+                  "class": [this.ns.e("counter"), this.ns.em("item", "counter"), this.semanticClass("item.counter", {
+                    item: tab,
+                    counter: this.counterData
+                  })],
+                  "style": this.semanticStyle("item.counter", {
+                    item: tab,
+                    counter: this.counterData
+                  }),
                   "value": counterNum,
                   "counterMode": tab.counterMode
                 }, null)]);

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;
@@ -33,6 +34,12 @@ class DRTabController extends runtime.ControlController {
      * @memberof DRTabController
      */
     __publicField(this, "srfCacheKeyTempl", "");
+    /**
+     * @description 显示位置
+     * @type {(string | undefined)}
+     * @memberof DRTabController
+     */
+    __publicField(this, "tabPosition");
     /**
      * Router 对象
      *
@@ -84,6 +91,49 @@ class DRTabController extends runtime.ControlController {
     const userId = this.context.srfuserid;
     return "".concat(userId, "_").concat(this.view.model.codeName, "_").concat(this.model.codeName);
   }
+  /**
+   * @description 是否启用折叠
+   * @readonly
+   * @type {boolean}
+   * @memberof DRTabController
+   */
+  get enableCollapse() {
+    return this.controlParams.enablecollapse === "true";
+  }
+  /**
+   * 是否启用锚点栏
+   *
+   * @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,6 +163,8 @@ class DRTabController extends runtime.ControlController {
     super.initState();
     this.state.drTabPages = [];
     this.state.showMore = false;
+    this.state.expandedKeys = [];
+    this.state.expViewParams = {};
     this.state.hideEditItem = !!this.model.hideEditItem;
   }
   /**
@@ -122,6 +174,8 @@ class DRTabController extends runtime.ControlController {
    * @memberof DRTabController
    */
   async onCreated() {
+    var _a;
+    this.tabPosition = (_a = this.view.model.tabLayout) == null ? void 0 : _a.toLowerCase();
     await super.onCreated();
     await this.initCounter();
     this.srfCacheKeyTempl = this.controlParams.srfcachekeytempl || "";
@@ -139,6 +193,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 +292,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 +313,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");
+    }
   }
   /**
    * 处理表单数据变更
@@ -282,21 +361,11 @@ class DRTabController extends runtime.ControlController {
    * @memberof DRTabController
    */
   initDRTabPages() {
-    const {
-      editItemCaption,
-      editItemCapLanguageRes,
-      editItemSysImage,
-      uniqueTag,
-      dedrtabPages
-    } = this.model;
+    const { uniqueTag, dedrtabPages, editItemCaption, editItemSysImage } = this.model;
     const drTabPages = [];
-    let caption = editItemCaption;
-    if (editItemCapLanguageRes) {
-      caption = ibiz.i18n.t(editItemCapLanguageRes.lanResTag, editItemCaption);
-    }
     if (!this.state.hideEditItem) {
       drTabPages.push({
-        caption,
+        caption: editItemCaption,
         tag: uniqueTag,
         hidden: !!this.state.hideEditItem,
         disabled: false,
@@ -305,10 +374,6 @@ class DRTabController extends runtime.ControlController {
       });
     }
     dedrtabPages == null ? void 0 : dedrtabPages.forEach((item) => {
-      let itemCaption = item.caption;
-      if (item.capLanguageRes) {
-        itemCaption = ibiz.i18n.t(item.capLanguageRes.lanResTag, item.caption);
-      }
       const {
         enableMode,
         dataAccessAction,
@@ -316,9 +381,9 @@ class DRTabController extends runtime.ControlController {
         testScriptCode,
         counterMode
       } = item;
-      drTabPages.push({
+      const drTabPage = {
         tag: item.id,
-        caption: itemCaption,
+        caption: item.caption,
         sysImage: item.sysImage,
         hidden: false,
         disabled: false,
@@ -328,7 +393,15 @@ class DRTabController extends runtime.ControlController {
         testAppDELogicId,
         testScriptCode,
         counterMode
-      });
+      };
+      if (this.tabPosition === "flow_noheader" || this.tabPosition === "flow") {
+        const { context, params } = this.prepareParams(item);
+        Object.assign(drTabPage, {
+          context,
+          params
+        });
+      }
+      drTabPages.push(drTabPage);
     });
     this.state.drTabPages = drTabPages;
     this.state.defaultName = drTabPages[0].tag;
@@ -341,6 +414,8 @@ class DRTabController extends runtime.ControlController {
         this.state.activeName = activeName;
       }
     }
+    if (this.enableCollapse)
+      this.state.expandedKeys = this.state.drTabPages.map((tab) => tab.tag);
     const isRoutePushed = !!this.routeDepth && runtime.hasSubRoute(this.routeDepth);
     this.handleTabChange(isRoutePushed);
   }
@@ -405,12 +480,12 @@ class DRTabController extends runtime.ControlController {
   /**
    * 准备参数
    *
-   * @param {IDEDRCtrlItem} drTabPages 关系分页
+   * @param {IDEDRCtrlItem} drTabPage 关系分页
    * @return {*}
    * @memberof DRTabController
    */
-  prepareParams(drTabPages) {
-    const { navigateContexts, navigateParams } = drTabPages;
+  prepareParams(drTabPage) {
+    const { navigateContexts, navigateParams } = drTabPage;
     const model = {
       navContexts: navigateContexts,
       navParams: navigateParams
@@ -422,9 +497,13 @@ class DRTabController extends runtime.ControlController {
     };
     const { resultContext, resultParams } = runtime.calcNavParams(model, originParams);
     const context = Object.assign(this.context.clone(), resultContext, {
-      currentSrfNav: drTabPages.id
+      currentSrfNav: drTabPage.id
     });
-    const params = { ...this.params, ...resultParams };
+    const params = {
+      ...this.params,
+      ...resultParams,
+      ...this.state.expViewParams
+    };
     return { context, params };
   }
   /**
@@ -432,20 +511,20 @@ class DRTabController extends runtime.ControlController {
    *
    * @author lxm
    * @date 2023-12-21 05:40:07
-   * @param {IDEDRCtrlItem} drTabPages
+   * @param {IDEDRCtrlItem} drTabPage
    * @param {boolean} [isRoutePushed=false]
    * @return {*}  {Promise<void>}
    */
-  async openNavPosView(drTabPages, isRoutePushed = false, navViewKey) {
+  async openNavPosView(drTabPage, isRoutePushed = false, navViewKey) {
     var _a;
-    const { context, params } = this.prepareParams(drTabPages);
-    if (!drTabPages.appViewId)
+    const { context, params } = this.prepareParams(drTabPage);
+    if (!drTabPage.appViewId)
       return;
     (_a = this.navPos) == null ? void 0 : _a.openView({
-      key: navViewKey || drTabPages.id,
+      key: navViewKey || drTabPage.id,
       context,
       params,
-      viewId: drTabPages.appViewId,
+      viewId: drTabPage.appViewId,
       isRoutePushed
     });
   }
@@ -457,6 +536,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) {
@@ -478,6 +559,20 @@ class DRTabController extends runtime.ControlController {
    */
   async refresh() {
     var _a;
+    if (this.tabPosition === "flow_noheader" || this.tabPosition === "flow") {
+      this.state.drTabPages.forEach((tabPageState) => {
+        var _a2;
+        const dedrtabPage = (_a2 = this.model.dedrtabPages) == null ? void 0 : _a2.find(
+          (item) => item.id === tabPageState.tag
+        );
+        if (dedrtabPage) {
+          const { context, params } = this.prepareParams(dedrtabPage);
+          tabPageState.context = context;
+          tabPageState.params = params;
+        }
+      });
+      return;
+    }
     const { activeName } = this.state;
     const drBarItem = (_a = this.model.dedrtabPages) == null ? void 0 : _a.find(
       (item) => item.id === activeName
@@ -507,6 +602,45 @@ class DRTabController extends runtime.ControlController {
       this.counter.destroy();
     }
   }
+  /**
+   * @description 设置激活项
+   * @param {string} name
+   * @memberof DRTabController
+   */
+  setActive(name) {
+    this.state.activeName = name;
+    this.handleTabChange();
+  }
+  /**
+   * @description 转换各类多语言
+   * @protected
+   * @memberof DRTabController
+   */
+  convertMultipleLanguages() {
+    const { editItemCapLanguageRes, dedrtabPages } = this.model;
+    if (editItemCapLanguageRes && editItemCapLanguageRes.lanResTag)
+      this.model.editItemCaption = ibiz.i18n.t(
+        editItemCapLanguageRes.lanResTag,
+        this.model.editItemCaption
+      );
+    dedrtabPages == null ? void 0 : dedrtabPages.forEach((page) => {
+      if (page.capLanguageRes && page.capLanguageRes.lanResTag)
+        page.caption = ibiz.i18n.t(page.capLanguageRes.lanResTag, page.caption);
+    });
+  }
+  /**
+   * @description 折叠改变
+   * @param {string} id
+   * @memberof DRTabController
+   */
+  onCollapseChange(id) {
+    const index = this.state.expandedKeys.findIndex((key) => key === id);
+    if (index > -1) {
+      this.state.expandedKeys.splice(index, 1);
+    } else {
+      this.state.expandedKeys.push(id);
+    }
+  }
 }
 
 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-bg-color:transparent;--ibiz-control-drtab-padding:var(--ibiz-spacing-none);--ibiz-control-drtab-content-gap:var(--ibiz-spacing-none);--ibiz-control-drtab-item-hover-bg-color:transparent;--ibiz-control-drtab-item-gap:var(--ibiz-spacing-tight);--ibiz-control-drtab-item-active-color:var(--ibiz-color-primary);--ibiz-control-drtab-item-font-size:var(--ibiz-font-size-regular);--ibiz-control-drtab-item-text-color:var(--ibiz-color-text-2);--ibiz-control-drtab-item-hover-color:var(--ibiz-color-text-0);--ibiz-control-drtab-more-gap:var(--ibiz-spacing-extra-tight);--ibiz-control-drtab-more-font-size:var(--ibiz-font-size-regular);--ibiz-control-drtab-more-text-color:var(--ibiz-color-text-2);--ibiz-control-drtab-more-hover-color:var(--ibiz-color-text-0);--ibiz-control-drtab-dropdown-gap:var(--ibiz-spacing-tight);--ibiz-control-drtab-dropdown-padding:var(--ibiz-spacing-tight);--ibiz-control-drtab-dropdown-text-color:var(--ibiz-color-text-0);--ibiz-control-drtab-dropdown-font-size:var(--ibiz-font-size-header-5);padding:var(--ibiz-control-drtab-padding);background-color:var(--ibiz-control-drtab-bg-color)}.ibiz-control-drtab__counter{margin-left:var(--ibiz-control-drtab-item-gap)}.ibiz-control-drtab .el-tabs .el-tabs__header{margin:var(--ibiz-control-drtab-content-gap)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap{margin:var(--ibiz-control-drtab-content-gap)}.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-item-active-color)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item{font-size:var(--ibiz-control-drtab-item-font-size);color:var(--ibiz-control-drtab-item-text-color)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item:hover{color:var(--ibiz-control-drtab-item-hover-color);background-color:var(--ibiz-control-drtab-item-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-item-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-control-drtab-item-gap)}.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;gap:var(--ibiz-control-drtab-more-gap);align-items:center;font-size:var(--ibiz-control-drtab-more-font-size);color:var(--ibiz-control-drtab-more-text-color)}.ibiz-control-drtab-more-dropdown__link:hover{color:var(--ibiz-control-drtab-more-hover-color)}.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-item-gap:var(--ibiz-spacing-tight);--ibiz-control-drtab-more-item-active-bg-color:var(--ibiz-color-primary-active);--ibiz-control-drtab-more-item-counter-min-width:20px}.ibiz-control-drtab-more-dropdown-popper__active{background-color:var(--ibiz-control-drtab-more-item-active-bg-color)}.ibiz-control-drtab-more-dropdown-popper__label{display:flex;gap:var(--ibiz-control-drtab-more-item-gap);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:var(--ibiz-control-drtab-more-item-counter-min-width)}.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-control-drtab-more-item-active-bg-color)}.ibiz-control-drtab-dropdown-list__trigger{display:flex;gap:var(--ibiz-control-drtab-dropdown-gap);align-items:center;padding:var(--ibiz-control-drtab-dropdown-padding);font-size:var(--ibiz-control-drtab-dropdown-font-size);color:var(--ibiz-control-drtab-dropdown-text-color);cursor:pointer}.ibiz-control-drtab-dropdown-list__popper{min-width:150px;max-width:220px;--ibiz-control-drtab-dropdown-item-bg-color:transparent;--ibiz-control-drtab-dropdown-item-gap:var(--ibiz-spacing-tight);--ibiz-control-drtab-dropdown-item-text-color:var(--ibiz-color-text-0);--ibiz-control-drtab-dropdown-item-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-drtab-dropdown-item-active-bg-color:var(--ibiz-color-fill-0);--ibiz-control-drtab-dropdown-item-icon-size:var(--ibiz-width-icon-medium);--ibiz-control-drtab-dropdown-item-icon-color:var(--ibiz-color-primary);--ibiz-control-drtab-dropdown-item-counter-size:var(--ibiz-width-icon-medium);--ibiz-control-drtab-dropdown-item-counter-font-size:var(--ibiz-font-size-small)}.ibiz-control-drtab-dropdown-list__popper--content{max-height:26vh;overflow:auto}.ibiz-control-drtab-dropdown-list__popper--item{display:flex;gap:var(--ibiz-control-drtab-dropdown-item-gap);align-items:center}.ibiz-control-drtab-dropdown-list__popper--item .caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-drtab-dropdown-list__popper--item ion-icon{font-size:var(--ibiz-control-drtab-dropdown-item-icon-size);color:var(--ibiz-control-drtab-dropdown-item-icon-color)}.ibiz-control-drtab-dropdown-list__popper--item.is-active{background-color:var(--ibiz-control-drtab-dropdown-item-active-bg-color)!important}.ibiz-control-drtab-dropdown-list__popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list{background-color:var(--ibiz-control-drtab-dropdown-item-bg-color)}.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-control-drtab-dropdown-item-text-color);background-color:var(--ibiz-control-drtab-dropdown-item-bg-color)}.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-control-drtab-dropdown-item-hover-bg-color)}