cip-components/page-layout/list/index.vue

<template>
  <div class="page-layout-list layout-overflow-auto" :class="{'page-layout-list--compact': isCompact,'manager-page-padding': isPadding}">
    <div v-if="$slots.filter" class="page-layout-list__filter">
      <slot name="filter"></slot>
    </div>
    <div  class="page-layout-list__table-title" v-if="$slots.handle || $slots.title">
      <div  class="page-layout-list__handle">
        <slot name="handle"></slot>
      </div>
      <div>
        <slot name="title"></slot>
      </div>
    </div>
    <div class="page-layout-list__content" :class="{'page-layout-list__has-page':$slots.pagination}">
      <slot></slot>
      <slot name="note"></slot>
    </div>
    <div class="page-layout-list__pagination" v-if="$slots.pagination">
      <slot name="pagination"></slot>
    </div>
  </div>
</template>
<script>
import { defineComponent, computed } from 'vue'
import { useCipConfig } from '../../hooks/use-cip-config'
import { getUsingConfig } from '@cip/utils/util'
export default defineComponent({
  name: 'PageLayoutList',
  props: { noPadding: { type: Boolean, default: undefined }, padding: { type: Boolean, default: undefined }, compact: { type: Boolean, default: undefined } },
  setup (props) {
    const cipConfig = useCipConfig()
    const isPadding = computed(() => { // 默认开启
      return getUsingConfig(!props.noPadding, cipConfig.layout.padding, true)
    })
    const isCompact = computed(() => { // 默认关闭
      return getUsingConfig(props.compact, cipConfig.layout.compact, false)
    })
    return {
      isCompact,
      isPadding
    }
  }
})
</script>
<style lang="less">
.page-layout-list{
  box-sizing: border-box;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  &--compact{
    display: block;
    //height: auto;
    position: relative;
    .page-layout-list{
      @padding: 24px;
      @horizontalPadding: var(--horizontal-padding, 24px);
      &__filter{
        margin-bottom: 0;
        padding: 20px @horizontalPadding 0;
      }
      &__table-title {
        padding: 16px  @horizontalPadding 0;
      }
      &__content{
        background: #fff;
        padding: 16px @horizontalPadding;
        width: auto;
        .@{elNamespace}-table{
          background: inherit;
        }
        &.page-layout-list__has-page{
          margin-bottom:0;
          padding-bottom: 0;
        }
      }
      &__pagination {
        padding: 16px @horizontalPadding;
        position: sticky;
        bottom: -@padding;
        z-index: 200;
      }
    }
  }
  &__filter{
    flex-shrink: 0;
    margin-bottom: 12px;
    background: #fff;
    padding:8px;
    .cip-search-input .@{elNamespace}-form-item{
      margin-bottom: 0;
    }
  }
  &__table-title{
    flex-shrink: 0;
    padding:8px 8px 8px 8px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &__handle{
    display: flex;
    flex: 1;
  }
  &__content{
    flex-grow: 2;
    width: 100%;
    flex-shrink: 2;
    overflow: hidden;
    .@{elNamespace}-table{
      background: @background;
    }
    &.page-layout-list__has-page{
      margin-bottom:12px;
    }
  }
  &__pagination{
    flex-shrink: 0;
    text-align: right;
    background: #fff;
    padding:8px;
  }
}
</style>