portlet-layout.tsx 2.3 KB
Newer Older
1 2 3
import { PortletPartController } from '@ibiz-template/controller';
import { useNamespace } from '@ibiz-template/vue-util';
import { computed, defineComponent } from 'vue';
4
import { IPSUIActionGroupDetail } from '@ibiz-template/model';
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
import './portlet-layout.scss';

/**
 * 门户控件布局
 */
export const PortletLayout = defineComponent({
  props: {
    controller: {
      type: PortletPartController,
      required: true,
    },
  },
  setup(props) {
    const ns = useNamespace('portlet-layout');
    const c = props.controller;
    // 处理标题
    const isShowHeader = computed(() => {
      // return c.model.showTitleBar || c.model.actionGroup;
      return c.model.showTitleBar;
    });

    // 点击工具栏处理
27 28 29 30 31 32
    const onActionClick = async (
      detail: IPSUIActionGroupDetail,
      event: MouseEvent,
    ) => {
      await props.controller.onActionClick(detail, event);
    };
33

34
    return { ns, isShowHeader, onActionClick };
35 36
  },
  render() {
37
    const { model, state } = this.controller;
38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
    return (
      <div class={[this.ns.b(), this.ns.is('no-header', !this.isShowHeader)]}>
        {this.isShowHeader && (
          <div key='header' class={this.ns.b('header')}>
            <div class={this.ns.be('header', 'left')}>
              {model.showTitleBar && (
                <div class={this.ns.e('caption')}>
                  <app-icon
                    class={this.ns.e('caption-icon')}
                    icon={model.source.getPSSysImage()}
                  ></app-icon>
                  <span class={this.ns.e('caption-text')} title={model.title}>
                    {model.title}
                  </span>
                </div>
              )}
            </div>
55 56
            <div class={this.ns.be('header', 'right')}>
              {model.actionGroup && state.actionGroupState && (
57 58
                <action-toolbar
                  class={this.ns.e('toolbar')}
59 60 61
                  actionGroup={model.actionGroup}
                  actionsState={state.actionGroupState}
                  on-action-click={this.onActionClick}
62 63
                ></action-toolbar>
              )}
64
            </div>
65 66 67 68 69 70 71 72 73
          </div>
        )}
        <div key='content' class={this.ns.b('content')}>
          {this.$slots.default}
        </div>
      </div>
    );
  },
});