SaaS-lib/lib/component/table/table-header.vue

<!-- @format -->

<template>
  <div class="ns-table-header" v-if="!isEmpty(getActions)">
    <!-- <div class="ns-table-title" v-if="tableTitle">{{ tableTitle }}</div> -->
    <div class="ns-table-header-action">
      <slot name="header" :data="data"></slot>
      <template v-for="item in getActions" :key="item.name">
        <ns-button @click="item.finalHandle()" :disabled="item.dynamicDisabled" :type="item.type">
          <ns-v-node :content="item.label" />
        </ns-button>
      </template>
    </div>
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent, inject } from 'vue';
  import { cloneDeep, isEmpty } from 'lodash-es';
  import { Action, useAction } from '/nerv-lib/use/use-action';
  import NsButton from '../form/button/button.vue';
  import { useRoute } from 'vue-router';

  export default defineComponent({
    name: 'NsTableHeader',
    components: {
      NsButton,
    },
    props: {
      searchData: {
        type: Object,
        default: () => ({}),
      },
      tableTitle: {
        type: String,
      },
      data: {
        type: [Array],
        default: () => [],
      },
      headerActions: {
        type: [Array],
        default: () => [],
      },
    },
    setup(props) {
      const reload = inject('reload', () => {});
      const { filterAction, transformAction } = useAction({ reload });
      const route = useRoute();
      const getData = computed(() => {
        return {
          ...route.query,
          ...route.params,
          ...props.searchData,
          list: props.data,
          formModel: props.searchData,
        };
      });

      const getActions = computed(() => {
        let actions = cloneDeep(props.headerActions);
        actions = actions
          .filter((action: Action) => {
            return filterAction(action, getData.value);
          })
          .map((action: Action) => {
            return transformAction(action, getData.value);
          });
        return actions;
      });

      return { getActions, getData, isEmpty };
    },
  });
</script>

<style lang="less" scoped>
  .ns-table-header {
    min-width: fit-content;
    user-select: none;
    // padding: 16px 0;
    padding-top: 16px;
    text-align: right;
    position: relative;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .ns-table-title {
      text-align: left;
      height: 32px;
      line-height: 32px;
      //font-size: 16px;
      font-weight: bold;
      user-select: text;
    }

    .ant-btn {
      margin-left: 6px;
    }
    :first-child.ant-btn {
      margin-left: 0;
    }
  }
</style>