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-main">
        <div class="top-top" v-if="$slots.toolbarTop">

          <a-space v-if="props?.toolbarTopConfig && props?.toolbarTopConfig.enable" style="margin-right: 8px">
            <a-button v-for="(btn, idx) in props?.toolbarTopConfig.buttons" :key="btn.code" size="middle" v-bind="btn.props">{{ btn.title }}</a-button>
          </a-space>

          <slot name="toolbarTop"></slot>
        </div>
        <div class="top-bottom">
          <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>
      </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', 'toolbarTopConfig']);

  const $slots = useSlots();

  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-main {
      width: 100%;
      background: #fff;
      .top-top {
        padding: 10px 20px;
      }
      .top-bottom {
        padding: 0 20px 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: 0 10px 10px 10px;
      background: white;
      border-radius: 0 0 10px 10px;

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