app-simpleflex-container.tsx 4.3 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 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 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';

@Component({})
export class AppSimpleFlexContainer extends Vue {

  /**
   * 子容器模型
   *
   * @type {*}
   * @memberof AppSimpleFlexContainer
   */
  @Prop() public panelItems!: any;

  /**
   * 绘制回调
   *
   * @type {Function}
   * @memberof AppSimpleFlexContainer
   */
  @Prop() public renderCallBack!: Function;

  /**
   * 当前下标
   *
   * @type {number}
   * @memberof AppSimpleFlexContainer
   */
  @Prop() public index?: number;

  /**
   * 是否在多数据容器中
   *
   * @type {boolean}
   * @memberof AppSimpleFlexContainer
   */
  @Prop({ default: false }) public inMulParent?: boolean;

  /**
   * 子容器模型
   *
   * @type {*}
   * @memberof AppSimpleFlexContainer
   */
  public getDetailStyle(panelItem: any) {
    const boxLayoutPosStyle: any = {};
    const layoutPos = panelItem.getPSLayoutPos() as any;
    // 识别flex占位属性
    if (layoutPos && layoutPos.layout == 'FLEX') {
      Object.assign(boxLayoutPosStyle, { 'flex-grow': layoutPos?.grow && layoutPos?.grow != -1 ? layoutPos?.grow : 0 });
    }
    // 自身对齐方式
    if (layoutPos && (layoutPos.vAlignSelf || layoutPos.hAlignSelf)) {
      Object.assign(boxLayoutPosStyle, { 'display': 'flex' });
      // 自身垂直对齐模式
      switch (layoutPos.vAlignSelf) {
        case 'TOP':
          Object.assign(boxLayoutPosStyle, { 'align-items': 'flex-start' });
          break;
        case 'MIDDLE':
          Object.assign(boxLayoutPosStyle, { 'align-items': 'center' });
          break;
        case 'BOTTOM':
          Object.assign(boxLayoutPosStyle, { 'align-items': 'flex-end' });
          break;
        default:
          break;
      }
      // 自身水平对齐模式
      switch (layoutPos.hAlignSelf) {
        case 'LEFT':
          Object.assign(boxLayoutPosStyle, { 'justify-content': 'flex-start' });
          break;
        case 'CENTER':
          Object.assign(boxLayoutPosStyle, { 'justify-content': 'center' });
          break;
        case 'RIGHT':
          Object.assign(boxLayoutPosStyle, { 'justify-content': 'flex-end' });
          break;
        case 'JUSTIFY':
          Object.assign(boxLayoutPosStyle, { 'justify-content': 'space-between' });
          break;
        default:
          break;
      }
      // 自身垂直对齐模式/自身水平对齐模式生效,占满剩余空间
      if (!boxLayoutPosStyle['flex-grow']) {
        Object.assign(boxLayoutPosStyle, { 'flex-grow': 1 });
      }
    }
    if (layoutPos && layoutPos.layout == 'SIMPLEFLEX') {
      if (layoutPos?.grow && (layoutPos?.grow !== -1)) {
        Object.assign(boxLayoutPosStyle, { width: `${(100 / 12) * layoutPos?.grow}%`, height: '100%' });
      } else {
        // 简单FLEX布局自适应
        Object.assign(boxLayoutPosStyle, { 'flex-grow': 1, 'min-width': `${(100 / 12)}%`, height: '100%' });
      }
    }
    // 边缘布局
    if (layoutPos && layoutPos.layout == 'BORDER') {
      Object.assign(boxLayoutPosStyle, { display: 'flex' });
    }
    return boxLayoutPosStyle;
  }

  /**
   * 绘制
   *
   * @memberof AppSimpleFlexContainer
   */
  render() {
    if (!this.panelItems) {
      return null;
    }
    let panelItems = this.panelItems;
    if(this.inMulParent && this.panelItems[0] && this.panelItems[0].getPSPanelItems()){
      panelItems = this.panelItems[0].getPSPanelItems();
    }
    return <div class="app-simpleflex-container">
      {
        panelItems.map((panelItem: any) => {
          return (panelItem && panelItem.getPSPanelItems && panelItem.getPSPanelItems instanceof Function) ?
            <div style={this.getDetailStyle(panelItem)} class="app-simpleflex-container__pos-container">
              {
                panelItem.getPSPanelItems() && panelItem.getPSPanelItems().map((item: any) => {
                  return <div class="container-item__simpleflex" style={this.getDetailStyle(item)}>
                    {
                      this.renderCallBack(item, panelItem, this.index)
                    }
                  </div>
                })
              }
            </div>
            :
            <div class="app-simpleflex-container__item">
              {this.renderCallBack(panelItem, null, this.index)}
            </div>
        })
      }
    </div >
  }
}