big-model-web/src/components/czr-ui/CzrTableCard.vue

<template>
  <div class="czr-table-card-main">
    <div class="czr-table-card-content">
      <template v-if="data?.length > 0">
        <div
          class="czr-table-card-content-list"
          :style="`gap: ${rowMargin} ${colMargin};grid-template-columns: repeat(${col}, calc((100% - ${colMargin} * ${col - 1}) / ${col}));`"
        >
          <template v-for="(item, index) in data">
            <div class="czr-table-card-content-list-model">
              <slot name="model" :row="item" :index="index" />
            </div>
          </template>
        </div>
      </template>
      <template v-else>
        <div class="czr-table-card-content-no-data el-table__empty-text">
          暂无数据
        </div>
      </template>
    </div>
    <div class="ctc-page">
      <div class="total">
        <template v-if="isValue(selectLength)">
          已选中 {{ selectLength }} 条 /
        </template>
        共 {{ total }} 条
      </div>
      <el-pagination
        v-if="noPage === false"
        class="__cus-pagination"
        :currentPage="page"
        :page-size="pageSize"
        background
        :page-sizes="pageSizes"
        :layout="pageLayoutCpt"
        :total="Number(total)"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :pager-count="5"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'CzrTableCard',
})
import { computed, ref, reactive } from 'vue'
import { isValue } from '@/utils/czr-util'

const emit = defineEmits(['handlePage'])
const props = defineProps({
  total: {
    required: true,
  },
  page: {},
  pageSize: {},
  pageSizes: {
    default: () => [20, 40, 60, 80, 100],
  },
  noPage: {
    default: false,
  },
  col: {
    default: 2,
  },
  colMargin: {
    default: '1rem',
  },
  rowMargin: {
    default: '1rem',
  },
  data: {
    required: true,
    default: () => [],
  },
  noLayout: {
    default: () => [],
  },
  selectLength: {
    default: null,
  },
})
const state = reactive({
  pageLayout: ['sizes', 'prev', 'pager', 'next', 'jumper'],
})
const pageLayoutCpt = computed(() => {
  return state.pageLayout
    .filter((v: string) => props.noLayout.every((s: string) => v !== s))
    .join(',')
})
const handleSizeChange = (val: Number) => {
  emit('handlePage', 1, val)
}
const handleCurrentChange = (val: Number) => {
  emit('handlePage', val, props.pageSize)
}
</script>

<style scoped lang="scss">
.czr-table-card-main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  $cus-page-height: 32px;
  .czr-table-card-content {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    .czr-table-card-content-list {
      display: grid;
      .czr-table-card-content-list-model {
        overflow: hidden;
      }
    }
    .czr-table-card-content-no-data {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }
  }
  :deep(.ctc-page) {
    height: $cus-page-height;
    margin-top: 25px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
    display: flex;
    justify-content: space-between;
    .total {
      display: flex;
      align-items: center;
    }
  }
}
</style>