@ibiz-template/vue3-components 0.7.41-alpha.10 → 0.7.41-alpha.101

package/src/control/drtab/drtab.tsx

@@ -0,0 +1,455 @@
+import {
+  useNamespace,
+  useSemanticNode,
+  route2routePath,
+  getNestedRoutePath,
+  useControlController,
+} from '@ibiz-template/vue3-util';
+import {
+  ref,
+  VNode,
+  watch,
+  PropType,
+  computed,
+  onUnmounted,
+  defineComponent,
+} from 'vue';
+import { IAppDETabExplorerView, IDEDRTab } from '@ibiz/model-core';
+import { useRoute, useRouter } from 'vue-router';
+import {
+  hasSubRoute,
+  IControlProvider,
+  IDRTabPagesState,
+} from '@ibiz-template/runtime';
+import { isNil } from 'ramda';
+import { showTitle } from '@ibiz-template/core';
+import { DRTabController } from './drtab.controller';
+import { useAppDRTab } from './drtab-control.util';
+import { FlowDrtab } from './flow-drtab';
+import './drtab.scss';
+
+export const DRTabControl = defineComponent({
+  name: 'IBizDrTabControl',
+  props: {
+    /**
+     * @description 数据关系分页栏模型数据
+     */
+    modelData: { type: Object as PropType<IDEDRTab>, required: true },
+    /**
+     * @description 应用上下文对象
+     */
+    context: { type: Object as PropType<IContext>, required: true },
+    /**
+     * @description 视图参数对象
+     * @default {}
+     */
+    params: { type: Object as PropType<IParams>, default: () => ({}) },
+    /**
+     * @description 部件适配器
+     */
+    provider: { type: Object as PropType<IControlProvider> },
+    /**
+     * @description 隐藏编辑项
+     */
+    hideEditItem: { type: Boolean, default: undefined },
+  },
+  setup() {
+    const c: DRTabController = useControlController(
+      (...args) => new DRTabController(...args),
+    );
+    const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
+    const router = useRouter();
+    const controlRef = ref();
+
+    const counterData = ref<IData>({});
+    const { semanticClass, semanticStyle } = useSemanticNode(c);
+
+    const { visibleItems, moreItems } = useAppDRTab(c, controlRef, counterData);
+
+    const fn = (counter: IData): void => {
+      counterData.value = counter;
+    };
+
+    const tabPosition =
+      (c.view.model as IAppDETabExplorerView).tabLayout?.toLowerCase() || 'top';
+
+    c.evt.on('onCreated', () => {
+      if (c.counter) {
+        c.counter.onChange(fn, true);
+      }
+    });
+
+    const activeTab = computed(() => {
+      return c.state.drTabPages.find(tab => tab.tag === c.state.activeName);
+    });
+
+    onUnmounted(() => {
+      c.counter?.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 = (): void => {
+      c.handleTabChange();
+      emitChange();
+    };
+
+    const onTabChange = (key: string): void => {
+      c.state.activeName = key;
+      c.handleTabChange();
+      emitChange();
+    };
+
+    const route = useRoute();
+
+    let expViewRoutePath = '';
+    if (c.routeDepth) {
+      expViewRoutePath = getNestedRoutePath(route, c.routeDepth);
+    }
+
+    if (route) {
+      watch(
+        () => route.fullPath,
+        (newVal, oldVal) => {
+          if (newVal !== oldVal) {
+            const depth = c.routeDepth;
+            if (depth) {
+              const currentRoutePath = getNestedRoutePath(route, c.routeDepth);
+              if (currentRoutePath === expViewRoutePath) {
+                const routePath = route2routePath(route);
+                const { srfnav } = routePath.pathNodes[depth! - 1];
+                // 路由模式下，且有子路由的时候不需要navpos跳转路由，只要做呈现
+                const isRoutePushed =
+                  !!c.routeDepth && hasSubRoute(c.routeDepth);
+                if (
+                  srfnav &&
+                  c.state.activeName &&
+                  c.state.activeName !== srfnav
+                ) {
+                  c.state.activeName = srfnav as string;
+
+                  c.handleTabChange(isRoutePushed);
+                } else if (!srfnav) {
+                  // 路由模式下，且没有子路由的时候，需要触发tab变更还原分页
+                  const routeNoSub =
+                    !!c.routeDepth && !hasSubRoute(c.routeDepth);
+                  // 空的时候跳转默认分页
+                  const doTabChange =
+                    c.state.activeName !== c.state.defaultName || routeNoSub;
+                  if (doTabChange) {
+                    c.state.activeName = c.state.defaultName;
+                    c.handleTabChange(isRoutePushed);
+                  }
+                }
+              }
+            }
+          }
+        },
+        { immediate: true },
+      );
+    }
+
+    const renderDropdownList = (): JSX.Element => {
+      return (
+        <el-dropdown
+          trigger='click'
+          onCommand={onTabChange}
+          style={semanticStyle('dropdown')}
+          popper-class={ns.be('dropdown-list', 'popper')}
+          class={[ns.b('dropdown-list'), semanticClass('dropdown')]}
+        >
+          {{
+            default: (): VNode => (
+              <div class={ns.be('dropdown-list', 'trigger')}>
+                {activeTab.value?.sysImage && (
+                  <iBizIcon icon={activeTab.value.sysImage} />
+                )}
+                <div class={'caption'}>
+                  {activeTab.value?.caption}
+                  {activeTab.value?.counterId && (
+                    <iBizBadge
+                      value={counterData.value[activeTab.value.counterId]}
+                      counterMode={activeTab.value.counterMode}
+                    />
+                  )}
+                </div>
+                <ion-icon name='chevron-down-outline'></ion-icon>
+              </div>
+            ),
+            dropdown: () => {
+              return (
+                <div class={ns.bem('dropdown-list', 'popper', 'content')}>
+                  {c.state.drTabPages.map(tab => {
+                    if (!tab.hidden) {
+                      return (
+                        <el-dropdown-item
+                          class={[
+                            semanticClass('dropdown.item'),
+                            ns.bem('dropdown-list', 'popper', 'item'),
+                            ns.is('active', tab.tag === c.state.activeName),
+                          ]}
+                          style={semanticStyle('dropdown.item')}
+                          command={tab.tag}
+                          disabled={tab.disabled}
+                        >
+                          {tab.sysImage && <iBizIcon icon={tab.sysImage} />}
+                          <span class='caption'>{tab.caption}</span>
+                          {tab.counterId && (
+                            <iBizBadge
+                              class={[
+                                ns.bem('dropdown-list', 'popper', 'counter'),
+                                semanticClass('dropdown.item.counter'),
+                              ]}
+                              style={semanticStyle('dropdown.item.counter')}
+                              value={counterData.value[tab.counterId]}
+                              counterMode={tab.counterMode}
+                            />
+                          )}
+                          {tab.tag === c.state.activeName && (
+                            <ion-icon name='checkmark-outline'></ion-icon>
+                          )}
+                        </el-dropdown-item>
+                      );
+                    }
+                    return null;
+                  })}
+                </div>
+              );
+            },
+          }}
+        </el-dropdown>
+      );
+    };
+
+    return {
+      c,
+      ns,
+      moreItems,
+      activeTab,
+      controlRef,
+      counterData,
+      tabPosition,
+      visibleItems,
+      semanticClass,
+      semanticStyle,
+      onTabChange,
+      handleTabChange,
+      renderDropdownList,
+    };
+  },
+  render() {
+    const { isCreated, isCalculatedPermission } = this.c.state;
+    if (this.tabPosition === 'flow_noheader' || this.tabPosition === 'flow') {
+      return (
+        <FlowDrtab
+          {...this.$attrs}
+          pagesstate={this.visibleItems as IData[]}
+          drtabpages={this.modelData.dedrtabPages}
+          context={this.c.context}
+          params={this.c.params}
+          showHeader={this.tabPosition === 'flow'}
+          counterData={this.counterData}
+          activeTab={this.activeTab}
+          controller={this.c}
+        ></FlowDrtab>
+      );
+    }
+    const moreTab =
+      this.moreItems.find(
+        (tab: IDRTabPagesState) => tab.tag === this.c.state.activeName,
+      ) || {};
+
+    const more = (
+      <el-dropdown
+        trigger='click'
+        style={this.semanticStyle('more')}
+        popper-class={this.ns.b('more-dropdown-popper')}
+        class={[this.ns.b('more-dropdown'), this.semanticClass('more')]}
+      >
+        {{
+          default: () => {
+            return (
+              <div
+                class={this.ns.be('more-dropdown', 'link')}
+                onClick={(e): void => e.stopPropagation()}
+              >
+                <span>{ibiz.i18n.t('app.more')} </span>
+                <svg
+                  viewBox='0 0 16 16'
+                  xmlns='http://www.w3.org/2000/svg'
+                  height='1em'
+                  width='1em'
+                >
+                  <g stroke-width='1' fill-rule='evenodd'>
+                    <path d='M7.978 11.997l-.005.006L2.3 6.33l.83-.831 4.848 4.848L12.826 5.5l.83.83-5.673 5.673-.005-.006z'></path>
+                  </g>
+                </svg>
+              </div>
+            );
+          },
+          dropdown: () => {
+            return (
+              <el-dropdown-menu>
+                {{
+                  default: () => {
+                    return this.moreItems.map((item: IDRTabPagesState) => {
+                      return (
+                        <el-dropdown-item
+                          class={[
+                            this.c.state.activeName === item.tag
+                              ? this.ns.be('more-dropdown-popper', 'active')
+                              : '',
+                            this.ns.bem(
+                              'more-dropdown-popper',
+                              'label',
+                              'item',
+                            ),
+                            this.semanticClass('more.item'),
+                          ]}
+                          style={this.semanticStyle('more.item')}
+                          onClick={() => this.onTabChange(item.tag)}
+                        >
+                          <span
+                            class={[
+                              this.ns.be('more-dropdown-popper', 'label'),
+                            ]}
+                          >
+                            <span
+                              class={this.ns.bem(
+                                'more-dropdown-popper',
+                                'label',
+                                'text',
+                              )}
+                              title={showTitle(item.caption || '')}
+                            >
+                              {item.caption || ''}
+                            </span>
+                            {item.counterId &&
+                              this.counterData[item.counterId] != null && (
+                                <iBizBadge
+                                  class={[
+                                    this.ns.bem(
+                                      'more-dropdown-popper',
+                                      'label',
+                                      'counter',
+                                    ),
+                                    this.semanticClass('more.item.counter'),
+                                  ]}
+                                  style={this.semanticStyle(
+                                    'more.item.counter',
+                                  )}
+                                  value={this.counterData[item.counterId]}
+                                  counterMode={item.counterMode}
+                                />
+                              )}
+                          </span>
+                        </el-dropdown-item>
+                      );
+                    });
+                  },
+                }}
+              </el-dropdown-menu>
+            );
+          },
+        }}
+      </el-dropdown>
+    );
+    return (
+      <iBizControlBase
+        ref='controlRef'
+        controller={this.c}
+        class={[
+          this.ns.b(),
+          this.semanticClass('root'),
+          this.moreItems.length > 0 ? this.ns.b('more') : '',
+        ]}
+        style={this.semanticStyle('root')}
+      >
+        {isCreated &&
+        isCalculatedPermission &&
+        this.tabPosition === 'top_dropdownlist' ? (
+          this.renderDropdownList()
+        ) : (
+          <el-tabs
+            tabPosition={this.tabPosition}
+            v-model={this.c.state.activeName}
+            onTabChange={this.handleTabChange}
+            style={this.semanticStyle('content')}
+            class={[this.ns.e('content'), this.semanticClass('content')]}
+          >
+            {this.visibleItems.map((tab: IDRTabPagesState) => {
+              const counterNum = tab.counterId
+                ? this.counterData[tab.counterId]
+                : undefined;
+              if (!tab.hidden) {
+                return (
+                  <el-tab-pane
+                    class={this.ns.e('tab-item')}
+                    label={tab.caption + counterNum}
+                    disabled={tab.disabled}
+                    name={tab.tag}
+                  >
+                    {{
+                      label: (): JSX.Element => {
+                        return (
+                          <span
+                            class={[
+                              this.ns.b('label'),
+                              this.semanticClass('item'),
+                            ]}
+                            style={this.semanticStyle('item')}
+                          >
+                            {tab.sysImage && (
+                              <iBizIcon
+                                class={this.ns.be('label', 'icon')}
+                                icon={tab.sysImage}
+                              />
+                            )}
+                            <span class={this.ns.be('label', 'text')}>
+                              {tab.caption}
+                            </span>
+                            {!isNil(counterNum) && (
+                              <iBizBadge
+                                class={[
+                                  this.ns.e('counter'),
+                                  this.semanticClass('item.counter'),
+                                ]}
+                                style={this.semanticStyle('item.counter')}
+                                value={counterNum}
+                                counterMode={tab.counterMode}
+                              />
+                            )}
+                          </span>
+                        );
+                      },
+                    }}
+                  </el-tab-pane>
+                );
+              }
+              return null;
+            })}
+            {this.moreItems.length > 0 && (
+              <el-tab-pane label='' name={moreTab.tag}>
+                {{
+                  label: () => more,
+                }}
+              </el-tab-pane>
+            )}
+          </el-tabs>
+        )}
+      </iBizControlBase>
+    );
+  },
+});

package/src/control/drtab/flow-drtab.scss

@@ -0,0 +1,209 @@
+// 关系分页流式布局
+$control-drtab-flow: (
+  bg-color: getCssVar('color', 'bg', '0'),               // 流式布局背景色
+);
+
+// 关系分页流式布局锚点
+$control-drtab-flow-anchor: (
+	gap: getCssVar('spacing', 'base'),										 // 锚点内容隔间
+	font-size: getCssVar('font-size', 'regular'),					 // 锚点字体大小
+	bg-color: getCssVar('color', 'bg', '1'),							 // 锚点背景颜色
+	border-radius: getCssVar('border-radius', 'medium'),	 // 锚点倒角
+);
+
+// 关系分页流式布局锚点项
+$control-drtab-flow-anchor-item: (
+	padding: 0 getCssVar('spacing', 'base'),							 // 锚点项倒角
+	hover-color: getCssVar('color', 'primary'),						 // 锚点项悬浮色
+	active-color: getCssVar('color', 'primary'), 					 // 锚点项激活色
+);
+
+// 关系分页流式布局项
+$control-drtab-flow-item: (
+	padding: getCssVar('spacing', 'base'),								 // 项内边距
+	bg-color: getCssVar('color', 'bg', '1'),							 // 项背景色
+	border-color: getCssVar('color', 'fill', '1'),				 // 项边框色
+	font-size: getCssVar('font-size', 'header', '5'), 		 // 项字体大小
+	border-radius: getCssVar('border-radius', 'medium'),   // 项倒角
+);
+
+// 关系分页流式布局项计数器
+$control-drtab-flow-item-counter: (
+	font-size: getCssVar('font-size', 'regular'),					 // 项计数器字体大小
+	text-align: center,																		 // 项计数器文本对齐
+);
+
+@include b('flow-drtab') {
+	@include set-component-css-var('control-drtab-flow', $control-drtab-flow);
+	@include set-component-css-var('control-drtab-flow-item', $control-drtab-flow-item);
+	@include set-component-css-var('control-drtab-flow-anchor', $control-drtab-flow-anchor);
+	@include set-component-css-var('control-drtab-flow-item-counter', $control-drtab-flow-item-counter);
+	@include set-component-css-var('control-drtab-flow-anchor-item', $control-drtab-flow-anchor-item);
+
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: getCssVar('control-drtab-flow', 'bg-color');
+
+  @include e('container') {
+    height: 100%;
+    overflow: auto;
+  }
+
+  @include e('tab-item') {
+    background-color: getCssVar('control-drtab-flow-item', 'bg-color');
+    border-radius: getCssVar('control-drtab-flow-item', 'border-radius');
+
+    @include m('label') {
+      padding: getCssVar('control-drtab-flow-item', 'padding');
+      font-size: getCssVar('control-drtab-flow-item', 'font-size');
+      border-bottom: 1px solid getCssVar('control-drtab-flow-item', 'border-color');
+    }
+
+    @include m('tab-view') {
+      padding: getCssVar('spacing', 'tight') 0;
+    }
+
+    & + .#{bem('flow-drtab','tab-item')} {
+      margin-top: getCssVar('spacing', 'base');
+    }
+  }
+
+  @include e('counter') {
+    font-size: getCssVar('control-drtab-flow-item-counter', 'font-size');
+    text-align: getCssVar('control-drtab-flow-item-counter', 'text-align');
+  }
+
+  .#{bem('flow-drtab')} {
+    background-color: inherit;
+  }
+
+  @include when('enable-anchor') {
+    display: flex;
+    gap: getCssVar('spacing', 'base');
+    @include e('container') {
+      flex: 1;
+    }
+
+    @include e('anchor-bar') {
+      display: flex;
+      min-width: 200px;
+      padding: getCssVar('control-drtab-flow-anchor', 'gap') 0;
+      font-size: getCssVar('control-drtab-flow-anchor', 'font-size');
+      background-color: getCssVar('control-drtab-flow-anchor', 'bg-color');
+      border-radius: getCssVar('control-drtab-flow-anchor', 'border-radius');
+
+      @include when('topleft') {
+        align-items: start;
+      }
+
+      @include when('bottomleft') {
+        align-items: end;
+      }
+
+      @include when('topright') {
+        flex-direction: row-reverse;
+        align-items: start;
+      }
+
+      @include when('bottomright') {
+        flex-direction: row-reverse;
+        align-items: end;
+      }
+
+      @include when('middleleft') {
+        align-items: center;
+      }
+
+      @include when('middleright') {
+        flex-direction: row-reverse;
+        align-items: center;
+      }
+    }
+
+    @include e('anchor-items') {
+      width: 100%;
+      max-height: 100%;
+      overflow: auto;
+    }
+
+    @include e('anchor-item') {
+      width: 100%;
+      height: 32px;
+      padding: getCssVar('control-drtab-flow-anchor-item', 'padding');
+      overflow: hidden;
+      line-height: 32px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      cursor: pointer;
+
+      &:hover {
+        color: getCssVar('control-drtab-flow-anchor-item', 'hover-color');
+      }
+
+      @include when('active') {
+        position: relative;
+        color: getCssVar('control-drtab-flow-anchor-item', 'active-color');
+
+        &::before {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 4px;
+          height: 100%;
+          content: '';
+          background-color:  getCssVar('control-drtab-flow-anchor-item', 'active-color');
+          border-radius: 2px;
+        }
+      }
+    }
+
+    @include when('left') {
+      flex-direction: row;
+      overflow: auto;
+
+      > .#{bem('flow-drtab','container')} {
+        --navbarwidth: 200px;
+
+        flex: 1 0;
+        width: calc(100% - var(--navbarwidth) - (2 * getCssVar(spacing, base)));
+        overflow: unset;
+      }
+
+      @include e('anchor-bar') {
+        position: sticky;
+        top: 0;
+      }
+
+      @include e('anchor-items') {
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+    }
+
+    @include when('right') {
+      flex-direction: row-reverse;
+      overflow: auto;
+
+      > .#{bem('flow-drtab','container')} {
+        --navbarwidth: 200px;
+
+        flex: 1 0;
+        width: calc(100% - var(--navbarwidth) - (2 * getCssVar(spacing, base)));
+        overflow: unset;
+      }
+
+      @include e('anchor-bar') {
+        position: sticky;
+        top: 0;
+      }
+
+      @include e('anchor-items') {
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+    }
+  }
+}