123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 |
- <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>
|