@ibiz-template/vue3-components 0.4.8-dev.0 → 0.4.9

package/es/control/kanban/kanban.mjs

@@ -0,0 +1,237 @@
+import { computed, resolveComponent, createVNode, defineComponent } from 'vue';
+import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
+import draggable from 'vuedraggable';
+import { KanbanController } from '@ibiz-template/runtime';
+import './kanban.css';
+
+"use strict";
+const KanbanControl = /* @__PURE__ */ defineComponent({
+  name: "IBizKanbanControl",
+  components: {
+    draggable
+  },
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    context: {
+      type: Object,
+      required: true
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    },
+    provider: {
+      type: Object
+    },
+    mdctrlActiveMode: {
+      type: Number,
+      default: void 0
+    },
+    singleSelect: {
+      type: Boolean,
+      default: void 0
+    },
+    loadDefault: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props) {
+    var _a;
+    const c = useControlController((...args) => new KanbanController(...args));
+    const ns = useNamespace(`control-${c.model.controlType.toLowerCase()}`);
+    const disabled = computed(() => {
+      return !c.state.draggable || c.state.updating;
+    });
+    const groupClass = ((_a = c.model.groupSysCss) == null ? void 0 : _a.cssName) || "";
+    const groupStyle = {};
+    switch (c.model.groupLayout) {
+      case "ROW":
+        groupStyle.width = `${c.model.groupWidth || 300}px`;
+        groupStyle.height = "100%";
+        break;
+      case "COLUMN":
+        groupStyle.width = "100%";
+        groupStyle.height = `${c.model.height || 500}px`;
+        break;
+      default:
+    }
+    const onRowClick = (item, event) => {
+      event.stopPropagation();
+      return c.onRowClick(item);
+    };
+    const onDbRowClick = (item, event) => {
+      event.stopPropagation();
+      return c.onDbRowClick(item);
+    };
+    const renderPanelItemLayout = (item, modelData) => {
+      const {
+        context,
+        params
+      } = c;
+      return createVNode(resolveComponent("iBizControlShell"), {
+        "data": item,
+        "modelData": modelData,
+        "context": context,
+        "params": params
+      }, null);
+    };
+    const renderItemAction = (item) => {
+      var _a2;
+      return createVNode(resolveComponent("iBizActionToolbar"), {
+        "class": ns.bem("item", "bottom", "actions"),
+        "action-details": (_a2 = c.getOptItemModel().deuiactionGroup) == null ? void 0 : _a2.uiactionGroupDetails,
+        "actions-state": c.getOptItemAction(item),
+        "onActionClick": (detail, event) => c.onActionClick(detail, item, event)
+      }, null);
+    };
+    const renderDefaultItem = (item) => {
+      return [createVNode("div", {
+        "class": ns.be("item", "top")
+      }, [createVNode("div", {
+        "class": ns.bem("item", "top", "title")
+      }, [item.srfmajortext]), createVNode("div", {
+        "class": ns.bem("item", "top", "description")
+      }, [item.content])]), c.getOptItemModel() ? createVNode("div", {
+        "class": ns.be("item", "bottom")
+      }, [renderItemAction(item)]) : null];
+    };
+    const renderCard = (item) => {
+      const findIndex = c.state.selectedData.findIndex((data) => {
+        return data.srfkey === item.srfkey;
+      });
+      const cardClass = [ns.b("item"), ns.is("selected", findIndex !== -1), ns.is("disabled", disabled.value)];
+      const cardStyle = {};
+      if (c.model.cardWidth) {
+        cardStyle.width = `${c.model.cardWidth}px`;
+      }
+      if (c.model.cardHeight) {
+        cardStyle.height = `${c.model.cardHeight}px`;
+      }
+      const panel = props.modelData.itemLayoutPanel;
+      return createVNode(resolveComponent("el-card"), {
+        "shadow": "hover",
+        "class": cardClass,
+        "body-style": cardStyle,
+        "onClick": (event) => onRowClick(item, event),
+        "onDblclick": (event) => onDbRowClick(item, event)
+      }, {
+        default: () => [panel ? renderPanelItemLayout(item, panel) : renderDefaultItem(item)]
+      });
+    };
+    const renderNoData = () => {
+      if (!c.state.isLoaded) {
+        return;
+      }
+      return createVNode(resolveComponent("iBizNoData"), {
+        "text": c.model.emptyText,
+        "emptyTextLanguageRes": c.model.emptyTextLanguageRes
+      }, null);
+    };
+    let cacheInfo = null;
+    const onChange = (evt, groupKey) => {
+      if (evt.moved) {
+        c.onDragChange({
+          from: groupKey,
+          to: groupKey,
+          fromIndex: evt.moved.oldIndex,
+          toIndex: evt.moved.newIndex
+        });
+      }
+      if (evt.added) {
+        cacheInfo = {
+          to: groupKey,
+          toIndex: evt.added.newIndex
+        };
+      }
+      if (evt.removed) {
+        if (cacheInfo) {
+          cacheInfo.from = groupKey;
+          cacheInfo.fromIndex = evt.removed.oldIndex;
+          c.onDragChange(cacheInfo);
+        }
+        cacheInfo = null;
+      }
+    };
+    const renderGroup = (group) => {
+      return createVNode("div", {
+        "class": [ns.b("group"), groupClass],
+        "style": groupStyle
+      }, [createVNode("div", {
+        "style": {},
+        "class": ns.be("group", "header")
+      }, [createVNode("span", {
+        "class": ns.be("group", "header-caption")
+      }, [group.caption]), createVNode("span", {
+        "class": ns.be("group", "header-right")
+      }, [c.enableNew && createVNode(resolveComponent("el-button"), {
+        "class": ns.be("group", "header-new"),
+        "text": true,
+        "circle": true,
+        "onClick": (event) => {
+          c.onClickNew(event, group.key);
+        }
+      }, {
+        default: () => [createVNode("ion-icon", {
+          "name": "add-outline",
+          "title": "\u65B0\u5EFA"
+        }, null)]
+      }), c.model.groupUIActionGroup && group.groupActionGroupState && createVNode(resolveComponent("iBizActionToolbar"), {
+        "class": ns.be("group", "header-actions"),
+        "action-details": c.model.groupUIActionGroup.uiactionGroupDetails,
+        "caption": "...",
+        "mode": "dropdown",
+        "actions-state": c.state.groupActionGroupState,
+        "onActionClick": (detail, event) => {
+          c.onGroupToolbarClick(detail, event, group);
+        }
+      }, null)])]), createVNode(draggable, {
+        "class": ns.be("group", "list"),
+        "modelValue": group.children,
+        "group": c.model.id,
+        "itemKey": "srfkey",
+        "disabled": disabled.value,
+        "onChange": (evt) => onChange(evt, group.key)
+      }, {
+        item: ({
+          element
+        }) => {
+          return renderCard(element);
+        },
+        header: () => {
+          if (group.children.length) {
+            return null;
+          }
+          return createVNode("div", {
+            "class": ns.be("group", "list")
+          }, [renderNoData()]);
+        }
+      })]);
+    };
+    return {
+      c,
+      ns,
+      renderGroup
+    };
+  },
+  render() {
+    var _a;
+    const {
+      groups,
+      isCreated
+    } = this.c.state;
+    return createVNode(resolveComponent("iBizControlBase"), {
+      "controller": this.c,
+      "class": [this.ns.m((_a = this.modelData.groupLayout) == null ? void 0 : _a.toLowerCase())]
+    }, {
+      default: () => [isCreated && groups.length > 0 && groups.map((group) => {
+        return this.renderGroup(group);
+      })]
+    });
+  }
+});
+
+export { KanbanControl };

package/es/control/kanban/kanban.provider.mjs

@@ -0,0 +1,14 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class KanbanProvider {
+  constructor() {
+    __publicField(this, "component", "IBizKanbanControl");
+  }
+}
+
+export { KanbanProvider };

package/es/control/list/index.mjs

@@ -0,0 +1,12 @@
+import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { ListControl } from './list.mjs';
+import { ListProvider } from './list.provider.mjs';
+
+"use strict";
+const IBizListControl = withInstall(ListControl, function(v) {
+  v.component(ListControl.name, ListControl);
+  registerControlProvider(ControlType.LIST, () => new ListProvider());
+});
+
+export { IBizListControl, IBizListControl as default };

package/es/control/list/list.css

@@ -0,0 +1 @@
+.ibiz-control-list-item{--ibiz-control-list-text-color:var(--ibiz-color-text-0);--ibiz-control-list-load-more-color:var(--ibiz-color-text-2);--ibiz-control-list-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-list-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-list-font-weight:var(--ibiz-font-weight-regular);--ibiz-control-list-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-tight);min-height:var(--ibiz-control-list-item-height);padding:var(--ibiz-control-list-padding);font-weight:var(--ibiz-control-list-font-weight);color:var(--ibiz-control-list-text-color);cursor:pointer}.ibiz-control-list-item:hover{background-color:var(--ibiz-control-list-hover-bg-color)}.ibiz-control-list-item.is-active{background-color:var(--ibiz-control-list-active-bg-color)}.ibiz-control-list{--ibiz-control-list-text-color:var(--ibiz-color-text-0);--ibiz-control-list-load-more-color:var(--ibiz-color-text-2);--ibiz-control-list-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-list-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-list-font-weight:var(--ibiz-font-weight-regular);--ibiz-control-list-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-tight);display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;height:100%}.ibiz-control-list__load-more{color:var(--ibiz-control-list-load-more-color);text-align:center;cursor:pointer}.ibiz-control-list .ibiz-control-list-content{flex-grow:1}.ibiz-control-list-scroll{height:100%;overflow:auto}

package/es/control/list/list.mjs

@@ -0,0 +1,229 @@
+import { isVNode, computed, resolveComponent, createVNode, createTextVNode, resolveDirective, withDirectives, defineComponent } from 'vue';
+import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
+import { isNil } from 'lodash-es';
+import { ListController } from '@ibiz-template/runtime';
+import './list.css';
+import '../../util/index.mjs';
+import { usePagination } from '../../util/pagination/use-pagination.mjs';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const ListControl = /* @__PURE__ */ defineComponent({
+  name: "IBizListControl",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    context: {
+      type: Object,
+      required: true
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    },
+    provider: {
+      type: Object
+    },
+    /**
+     * 部件行数据默认激活模式
+     * - 0 不激活
+     * - 1 单击激活
+     * - 2 双击激活(默认值)
+     *
+     * @type {(number | 0 | 1 | 2)}
+     */
+    mdctrlActiveMode: {
+      type: Number,
+      default: void 0
+    },
+    /**
+     * 是否为单选
+     * - true 单选
+     * - false 多选
+     *
+     * @type {(Boolean)}
+     */
+    singleSelect: {
+      type: Boolean,
+      default: void 0
+    },
+    isSimple: {
+      type: Boolean,
+      required: false
+    },
+    loadDefault: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props) {
+    const c = useControlController((...args) => new ListController(...args));
+    const ns = useNamespace(`control-${c.model.controlType.toLowerCase()}`);
+    const {
+      onPageChange,
+      onPageRefresh,
+      onPageSizeChange
+    } = usePagination(c);
+    const isLodeMoreDisabled = computed(() => {
+      if (c.model.enablePagingBar === true) {
+        return true;
+      }
+      return c.state.items.length >= c.state.total || c.state.isLoading || c.state.total <= c.state.size;
+    });
+    const renderPanelItem = (item, modelData) => {
+      const {
+        context,
+        params
+      } = c;
+      const findIndex = c.state.selectedData.findIndex((data) => {
+        return data.srfkey === item.srfkey;
+      });
+      const itemClass = [ns.b("item"), ns.is("active", findIndex !== -1)];
+      return createVNode(resolveComponent("iBizControlShell"), {
+        "class": itemClass,
+        "data": item,
+        "modelData": modelData,
+        "context": context,
+        "params": params,
+        "onClick": () => c.onRowClick(item),
+        "onDblclick": () => c.onDbRowClick(item)
+      }, null);
+    };
+    const renderDefaultItem = (item) => {
+      const findIndex = c.state.selectedData.findIndex((data) => {
+        return data.srfkey === item.srfkey;
+      });
+      const itemClass = [ns.b("item"), ns.is("active", findIndex !== -1)];
+      return createVNode("div", {
+        "class": itemClass,
+        "key": item.srfkey,
+        "onClick": () => c.onRowClick(item),
+        "onDblclick": () => c.onDbRowClick(item)
+      }, [`${isNil(item.srfmajortext) ? "" : item.srfmajortext}`]);
+    };
+    const renderGroup = (group) => {
+      const panel = props.modelData.itemLayoutPanel;
+      return createVNode(resolveComponent("el-collapse-item"), {
+        "title": group.caption,
+        "class": ns.be("group-content", "item")
+      }, {
+        default: () => [group.children.length > 0 ? group.children.map((item) => {
+          return panel ? renderPanelItem(item, panel) : renderDefaultItem(item);
+        }) : createVNode("div", {
+          "class": ns.bem("group-content", "item", "empty")
+        }, [createTextVNode("\u65E0\u6570\u636E")])]
+      });
+    };
+    const renderListContent = () => {
+      if (c.model.enableGroup && !c.state.isSimple) {
+        return createVNode(resolveComponent("el-collapse"), {
+          "class": [ns.b("group-content"), ns.b("content")]
+        }, {
+          default: () => {
+            var _a;
+            return [(_a = c.state.groups) == null ? void 0 : _a.map((group) => {
+              return createVNode("div", {
+                "class": [ns.b("scroll-item")]
+              }, [renderGroup(group)]);
+            })];
+          }
+        });
+      }
+      const panel = props.modelData.itemLayoutPanel;
+      return withDirectives(createVNode("div", {
+        "class": [ns.b("scroll"), ns.b("content")],
+        "infinite-scroll-distance": 10,
+        "infinite-scroll-disabled": isLodeMoreDisabled.value
+      }, [c.state.items.map((item) => {
+        return createVNode("div", {
+          "class": [ns.b("scroll-item")]
+        }, [panel ? renderPanelItem(item, panel) : renderDefaultItem(item)]);
+      })]), [[resolveDirective("infinite-scroll"), () => c.loadMore()]]);
+    };
+    const renderQuickToolBar = () => {
+      var _a;
+      const ctrlModel = (_a = c.model.controls) == null ? void 0 : _a.find((item) => {
+        return item.name === `${c.model.name}_quicktoolbar`;
+      });
+      if (!ctrlModel) {
+        return;
+      }
+      return createVNode(resolveComponent("iBizToolbarControl"), {
+        "modelData": ctrlModel,
+        "context": c.context,
+        "params": c.params
+      }, null);
+    };
+    const renderBatchToolBar = () => {
+      var _a;
+      const ctrlModel = (_a = c.model.controls) == null ? void 0 : _a.find((item) => {
+        return item.name === `${c.model.name}_batchtoolbar`;
+      });
+      if (!ctrlModel) {
+        return;
+      }
+      return createVNode("div", {
+        "class": ns.b("batchtoolbar")
+      }, [createVNode(resolveComponent("iBizToolbarControl"), {
+        "modelData": ctrlModel,
+        "context": c.context,
+        "params": c.params
+      }, null)]);
+    };
+    const renderNoData = () => {
+      let _slot;
+      const {
+        isLoaded
+      } = c.state;
+      if (!isLoaded) {
+        return;
+      }
+      return isLoaded && createVNode(resolveComponent("iBizNoData"), {
+        "class": ns.b("content"),
+        "text": c.model.emptyText,
+        "emptyTextLanguageRes": c.model.emptyTextLanguageRes
+      }, _isSlot(_slot = renderQuickToolBar()) ? _slot : {
+        default: () => [_slot]
+      });
+    };
+    return {
+      c,
+      ns,
+      renderListContent,
+      renderNoData,
+      renderBatchToolBar,
+      onPageChange,
+      onPageRefresh,
+      onPageSizeChange
+    };
+  },
+  render() {
+    const {
+      enablePagingBar
+    } = this.c.model;
+    let content = null;
+    if (this.c.state.isCreated) {
+      content = [this.c.state.items.length > 0 ? this.renderListContent() : this.renderNoData(), this.renderBatchToolBar(), enablePagingBar ? createVNode(resolveComponent("iBizPagination"), {
+        "class": this.ns.e("pagination"),
+        "total": this.c.state.total,
+        "curPage": this.c.state.curPage,
+        "size": this.c.state.size,
+        "onChange": this.onPageChange,
+        "onPageSizeChange": this.onPageSizeChange,
+        "onPageRefresh": this.onPageRefresh
+      }, null) : null];
+    }
+    return createVNode(resolveComponent("iBizControlBase"), {
+      "class": [this.ns.is("enable-page", !!enablePagingBar)],
+      "controller": this.c
+    }, _isSlot(content) ? content : {
+      default: () => [content]
+    });
+  }
+});
+
+export { ListControl };

package/es/control/list/list.provider.mjs

@@ -0,0 +1,14 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class ListProvider {
+  constructor() {
+    __publicField(this, "component", "IBizListControl");
+  }
+}
+
+export { ListProvider };

package/es/control/map/index.mjs

@@ -0,0 +1,13 @@
+import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
+import MapControl from './map.mjs';
+import { MapProvider } from './map.provider.mjs';
+
+"use strict";
+const IBizMapControl = {
+  install(v) {
+    v.component(MapControl.name, MapControl);
+    registerControlProvider(ControlType.MAP, () => new MapProvider());
+  }
+};
+
+export { IBizMapControl, IBizMapControl as default };

package/es/control/map/map.css

@@ -0,0 +1 @@
+.ibiz-control-map{width:100%;height:100%}.ibiz-control-map__map{width:100%;height:100%}

package/es/control/map/map.mjs

@@ -0,0 +1,78 @@
+import { ref, computed, resolveComponent, createVNode, defineComponent } from 'vue';
+import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
+import './map.css';
+import { MapController } from '@ibiz-template/runtime';
+
+"use strict";
+const MapControl = /* @__PURE__ */ defineComponent({
+  name: "IBizMapControl",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    context: {
+      type: Object,
+      required: true
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    },
+    provider: {
+      type: Object
+    },
+    mdctrlActiveMode: {
+      type: Number,
+      default: void 0
+    },
+    loadDefault: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup() {
+    const c = useControlController((...args) => new MapController(...args));
+    const ns = useNamespace(`control-${c.model.controlType.toLowerCase()}`);
+    const mapRef = ref();
+    const mapOpts = computed(() => {
+      return {
+        strAreaCode: c.state.strAreaCode,
+        defaultAreaCode: c.state.defaultAreaCode,
+        jsonBaseUrl: c.state.jsonBaseUrl
+      };
+    });
+    return {
+      c,
+      ns,
+      mapRef,
+      mapOpts
+    };
+  },
+  render() {
+    const {
+      state
+    } = this.c;
+    return createVNode(resolveComponent("iBizControlBase"), {
+      "controller": this.c
+    }, {
+      default: () => [state.isLoaded && createVNode(resolveComponent("iBizMapChart"), {
+        "areaData": state.areaData,
+        "pointData": state.pointData,
+        "options": this.mapOpts,
+        "class": this.ns.e("map"),
+        "onMapChange": (e) => {
+          this.c.onMapChange(e.areaCode);
+        },
+        "onPointChange": (e) => {
+          this.c.onAreaClick(e);
+        },
+        "onAreaChange": (e) => {
+          this.c.onPointClick(e);
+        }
+      }, null)]
+    });
+  }
+});
+
+export { MapControl as default };

package/es/control/map/map.provider.mjs

@@ -0,0 +1,14 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class MapProvider {
+  constructor() {
+    __publicField(this, "component", "IBizMapControl");
+  }
+}
+
+export { MapProvider };

package/es/control/medit-view-panel/index.mjs

@@ -0,0 +1,18 @@
+import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { MEditViewPanelControl } from './medit-view-panel.mjs';
+import { MEditViewPanelProvider } from './medit-view-panel.provider.mjs';
+
+"use strict";
+const IBizMEditViewPanelControl = withInstall(
+  MEditViewPanelControl,
+  function(v) {
+    v.component(MEditViewPanelControl.name, MEditViewPanelControl);
+    registerControlProvider(
+      ControlType.MULTI_EDIT_VIEWPANEL,
+      () => new MEditViewPanelProvider()
+    );
+  }
+);
+
+export { IBizMEditViewPanelControl, IBizMEditViewPanelControl as default };

package/es/control/medit-view-panel/medit-view-panel.css

@@ -0,0 +1 @@
+.ibiz-control-multieditviewpanel{--ibiz-control-multieditviewpanel-btn-width:150px;display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:space-between;width:100%;height:100%}.ibiz-control-multieditviewpanel .ibiz-control-multieditviewpanel-content{flex-grow:1;width:100%;height:100%;overflow-y:scroll}.ibiz-control-multieditviewpanel .ibiz-control-multieditviewpanel-content .ibiz-control-multieditviewpanel-item{display:flex;position:relative;width:100%;margin-bottom:var(--ibiz-spacing-tight)}.ibiz-control-multieditviewpanel .ibiz-control-multieditviewpanel-content .ibiz-control-multieditviewpanel-item>.ibiz-view .ibiz-panel-view-header{padding-right:var(--ibiz-spacing-loose)}.ibiz-control-multieditviewpanel .ibiz-control-multieditviewpanel-content .ibiz-control-multieditviewpanel-item .ibiz-control-multieditviewpanel-close{display:flex;justify-content:center;position:absolute;top:var(--ibiz-spacing-base-loose);right:var(--ibiz-spacing-tight)}.ibiz-control-multieditviewpanel .ibiz-control-multieditviewpanel-content .ibiz-control-multieditviewpanel-item .ibiz-control-multieditviewpanel-close>ion-icon:hover{color:var(--ibiz-color-primary);cursor:pointer}.ibiz-control-multieditviewpanel .ibiz-control-multieditviewpanel-content .ibiz-control-multieditviewpanel-tabs .el-tabs__nav .el-tabs__item .ibiz-control-multieditviewpanel-tab-label{display:flex;align-items:center;justify-content:space-between}