app-layout.tsx 3.3 KB
Newer Older
1 2 3 4 5 6 7 8
import { computed, defineComponent, ref } from 'vue';
import { IndexViewModel } from '@ibiz-template/model';
import { useNamespace } from '@ibiz-template/vue-util';
import { Namespace } from '@ibiz-template/core';
import '@ibiz-template/theme/style/components/layout/app-layout/app-layout.scss';

function renderLogo(ns: Namespace, model: IndexViewModel) {
  return (
9
    <div class={ns.e('logo')}>
10 11 12
      {model.appIconPath ? (
        <img class={ns.e('logo-img')} src={model.appIconPath}></img>
      ) : null}
13
      <div class={ns.e('logo-caption')}>{model.caption}</div>
14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
    </div>
  );
}

export const AppLayout = defineComponent({
  name: 'AppLayout',
  props: {
    model: {
      type: IndexViewModel,
      required: true,
    },
    // 视图是否完成加载
    isComplete: {
      type: Boolean,
      default: false,
    },
30 31 32 33 34
    // 是否显示分页导航
    isShowTabPageExp: {
      type: Boolean,
      default: false,
    },
35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
  },
  setup(props, { emit }) {
    const ns = useNamespace('layout');

    // 菜单收缩变化
    const collapseChange = ref(false);

    const collapseMenus = () => {
      collapseChange.value = !collapseChange.value;
      emit('onCollapseChange', collapseChange.value);
    };

    const isBlank = computed(() => props.model.source.blankMode === true);

    return { ns, collapseChange, isBlank, collapseMenus };
  },
  render() {
52 53 54 55 56 57 58 59 60 61 62
    return this.isComplete ? (
      <i-layout
        class={[
          this.ns.b(),
          this.isBlank ? this.ns.m('blank') : '',
          this.ns.is('collapse', this.collapseChange),
          this.ns.is('tab', this.isShowTabPageExp),
        ]}
      >
        <i-sider
          hide-trigger
63
          class={[
64
            this.ns.b('nav'),
65 66
            this.ns.is('collapse', this.collapseChange),
          ]}
67
          value={this.collapseChange}
68
        >
69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105
          {renderLogo(this.ns, this.model)}
          {this.$slots.menu}
        </i-sider>
        <i-layout class={[this.ns.b('content')]}>
          <i-header class={this.ns.b('header')}>
            <div class={this.ns.be('header', 'left')}>
              {renderLogo(this.ns, this.model)}
              <div class={this.ns.be('header', 'collapse-icon')}>
                {!this.collapseChange ? (
                  <ion-icon
                    src={'./assets/img/menu-fold.svg'}
                    on-click={() => this.collapseMenus()}
                  />
                ) : (
                  <ion-icon
                    src={'./assets/img/menu-unfold.svg'}
                    on-click={() => this.collapseMenus()}
                  />
                )}
              </div>
              {this.model.source.mainMenuAlign === 'TOP' ? (
                <i-menu
                  class={this.ns.be('header', 'menu')}
                  mode='horizontal'
                  active-name='1'
                ></i-menu>
              ) : null}
            </div>
            <div class={this.ns.be('header', 'right')}>
              <app-user />
            </div>
          </i-header>
          <i-content class={this.ns.be('content', 'main')}>
            {this.$slots.tabPageExp}
            {this.$slots.default}
          </i-content>
          {/* <i-footer class={this.ns.b('footer')}>Footer</i-footer> */}
106
        </i-layout>
107 108
      </i-layout>
    ) : null;
109 110
  },
});