BoundLink-Plate-UI/src/components/BsUi/Table/Table.vue

<template>
  <vxe-grid class="wrapper" v-bind="props.gridOptions" ref="gridRef" v-fullscreen>
    <template #form>
      <Search
        v-if="props?.searchConfig && props.searchConfig.enable && props.searchConfig?.fields && props.searchConfig?.data"
        :fields="props.searchConfig?.fields"
        :data="props.searchConfig?.data"
        v-bind="props.searchConfig"
        @reset="handleReset"
        @search="handleSearch"
      >
        <template #searchRight>
          <slot name="searchRight"></slot>
        </template>
      </Search>
      <!--      <IndexData />-->
    </template>

    <template #top>
      <div class="top">
        <div class="top-left" v-if="props?.toolbarConfig && props?.toolbarConfig.enable">
          <Toolbar :toolbarConfig="props.toolbarConfig">
            <slot name="toolbarLeft"></slot>
          </Toolbar>
        </div>
        <div class="top-right" v-if="props?.toolbarConfig && props?.toolbarConfig.enable">
          <a-tooltip placement="top">
            <template #title>
              <span>刷新</span>
            </template>
            <a-button type="text" size="small" @click="handleRefresh">
              <ReloadOutlined />
            </a-button>
          </a-tooltip>

          <a-tooltip placement="top" v-if="isZoom">
            <template #title>
              <span>还原</span>
            </template>
            <a-button type="text" size="small" @click="toggleFullscreen">
              <FullscreenExitOutlined />
            </a-button>
          </a-tooltip>

          <a-tooltip placement="top" v-if="!isZoom">
            <template #title>
              <span>全屏</span>
            </template>
            <a-button type="text" size="small" @click="toggleFullscreen">
              <FullscreenOutlined />
            </a-button>
          </a-tooltip>
        </div>
      </div>
    </template>

    <template #pager>
      <div class="pager" v-if="props?.pagerConfig && props.pagerConfig.enable">
        <Pagination :pagerConfig="props.pagerConfig" />
      </div>
    </template>

    <template #bottom>
      <slot name="bottom" />
    </template>

    <template #empty>
      <div class="empty">
        <bs-empty />
      </div>
    </template>

    <!-- 自定义列插槽 -->
    <template v-for="(name, idx) in slotCols" #[name]="scope" :key="idx">
      <slot :name="name" v-bind="scope || {}" />
    </template>
  </vxe-grid>
</template>

<script setup>
  import { nextTick, onMounted, ref, useSlots } from 'vue';
  import Search from './component/search/index.vue';
  import Pagination from './component/pagination/index.vue';
  import Toolbar from './component/toolbar/index.vue';
  import IndexData from './component/indexData/index.vue';
  import { mapValues, has, isString } from 'lodash';
  const props = defineProps(['gridOptions', 'searchConfig', 'pagerConfig', 'toolbarConfig', 'getGridRef', 'mounted']);

  const gridRef = ref(null);

  const isZoom = ref(false);

  const slotCols = ref([]);

  const setSlotsCols = () => {
    slotCols.value = [];
    props.gridOptions.columns.forEach((v) => {
      if(has(v, 'slots')) {
        mapValues(v.slots, (value, key) => {
          if(isString(value)) {
            slotCols.value.push(value);
          }
        })
      }
    });
  }


  const handleReset = () => {};

  const handleSearch = () => {};
  // 刷新回调
  const handleRefresh = () => {
    props.toolbarConfig.onRefresh && props.toolbarConfig.onRefresh();
  };

  onMounted(() => {
    setSlotsCols();
    nextTick(() => {
      props.getGridRef && props.getGridRef(gridRef.value);
      props.mounted && props.mounted(gridRef.value);
    });
  });

  const toggleFullscreen = () => {
    gridRef.value.zoom().then((zoom) => {
      isZoom.value = zoom;
    });
  };

  defineExpose({ gridRef });
</script>

<style lang="scss" scoped>
  .wrapper {
    width: 100%;
    height: 100%;
    .top {
      border-radius: 10px 10px 0 0;
      padding: 10px 20px;
      background: white;
      display: flex;
      align-items: center;

      .top-left {
        flex: 1;
      }
      .top-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
    .pager {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      padding: 20px;

      :deep(.ant-select-in-form-item) {
        width: auto !important;
      }
    }
    :deep(.vxe-grid--table-container) {
      background: white;
      border-radius: 0 0 10px 10px;
      padding: 0 20px 20px 20px;
    }

    .empty {
      padding: 20px;
    }
  }
</style>