SaaS-lib/lib/saas/view/service/list-table.vue

<!-- @format -->

<template>
  <div class="ns-list-table ns-view">
    <ns-table ref="nsTableRef" v-bind="getBindValue">
      <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
        <slot :name="item" v-bind="data"></slot>
      </template>
    </ns-table>
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent, ref, unref, nextTick } from 'vue';
  import { tableProps } from '/nerv-lib/component/table/props';
  import { PropTypes } from '/nerv-lib/util/type';
  import { cloneDeep, get, isArray } from 'lodash-es';
  export default defineComponent({
    name: 'NsViewListTable',
    props: {
      ...tableProps,
      title: PropTypes.string,
    },
    setup(props, { attrs }) {
      const nsTableRef = ref();
      const getPageParams = (dataRef, curepage?) => {
        let pageCount = get(dataRef.value, props.pageCountField);

        let pageSize = get(dataRef.value, props.sizeField);
        let total = 0;
        let page = 0;
        const tableData = get(unref(dataRef), props.listField);
        if (pageCount) {
          let totalMax = pageCount * pageSize;
          if (get(dataRef.value, props.totalField)) {
            total =
              totalMax > get(dataRef.value, props.totalField)
                ? get(dataRef.value, props.totalField)
                : totalMax;
          } else {
            total = totalMax;
          }
        } else {
          total = get(dataRef.value, props.totalField);
        }

        if (isArray(tableData) ? !tableData.length : false && curepage) {
          //后端从0开始
          if (curepage !== 0) {
            page =
              curepage > pageCount - props.pageFieldOffset
                ? pageCount - props.pageFieldOffset
                : curepage;
          }
        } else {
          page = curepage;
        }

        return { total, page };
      };
      const formConfig = cloneDeep(props.formConfig);

      const getFormConfig = computed(() => {
        const formConfig = cloneDeep(props.formConfig);

        // if (formConfig) {
        //   formConfig['formLayout'] = 'flexv2';
        // }
        return formConfig;
      });

      const getBindValue = computed(() => ({
        ...attrs,
        ...props,
        title: props.tableTitle,
        tableTitle: props.title,
        getPageParams: getPageParams,
        formConfig: getFormConfig.value,
        sticky:
          props.sticky === false
            ? false
            : { offsetHeader: props.headerActions.length === 0 && !props.title ? 0 : 0 },
      }));

      if (formConfig) {
        nextTick(() => {
          unref(nsTableRef)?.formElRef?.triggerSubmit();
        });
      }

      return { getBindValue, nsTableRef };
    },
    //缓存界面重新调用reload
    activated() {
      if (unref(this.nsTableRef)) {
        unref(this.nsTableRef).reload();
      }
    },
  });
</script>

<style lang="less" scoped>
  //关闭 sticky 模式 底部滚动条
  @gap: 16px;
  @border-gap: @gap solid @ns-content-bg;

  // 以防样式串
  .ns-list-table:not(.ant-drawer-body > *):not(.ant-form > *) {
    height: 100%;
    background-color: @ns-content-bg;
    :deep(.ns-table) {
      height: inherit;
      .ns-table-container,
      .ns-part-tree,
      .ant-spin-container {
        height: inherit;
      }

      .ns-part-tree,
      .ns-table-search,
      .ns-table-main {
        background-color: @white;
        border-radius: @ns-border-radius;
        box-shadow: @ns-content-box-shadow;
      }

      .ns-table-container {
        gap: @ns-gap;
      }
      .ns-part-tree {
      }
      .ns-part-table {
        border-radius: @ns-border-radius;
      }
      .ns-table-main {
        padding: 0px @gap;
        margin-top: @ns-gap;
        background-color: @white;
        box-shadow: @ns-content-box-shadow;

        // border-top: @border-gap;
        // margin: 16px;
        // background-color: #fff;
      }
      .ns-table-search {
        padding: @gap @gap 0;
      }
      .ns-table-header {
        // position: sticky;
        z-index: 3;
        top: 0;
        left: 0;
        background-color: @white;
      }
      .ant-table-sticky-scroll {
        display: none !important;
      }
      .ns-basic-table {
        padding-top: @gap;
      }
    }
  }

  :deep(.ns-form::after) {
    background-color: #f0f2f5;
    display: none;
    margin: @gap;
    width: calc(100% - @gap * 2);
  }
</style>