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';
  tableProps.expand = PropTypes.bool.def(false);

  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 : 89 },
      }));

      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 #e5ebf0;
  :deep(.ns-table-container) {
    border-top: @border-gap;
  }

  :deep(.ns-table) {
    .ns-part-tree {
      border-right: @border-gap;
      height: calc(100vh - 158px);
    }
    .ns-table-main {
      padding: 0px @gap;
      border-top: @border-gap;
      // margin: 16px;
      // background-color: #fff;
    }
    .ns-table-search {
      padding: @gap @gap 0;
      // margin: 16px;
      background: #fff;
      // border-width: 16px 0 16px 0px;
      // border-color: #e5ebf0;
      // border-style: solid;
      // border-top: 16px solid #e5ebf0;
    }
    .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>