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

<template>
  <div class="table-footer">
    <template v-for="item in getActions" :key="item.name">
      <ns-button
        @click="item.finalHandle(data, item.name)"
        :disabled="item.dynamicDisabled"
        :type="item.type"
      >
        {{ item.label }}
      </ns-button>
    </template>
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent, inject } from 'vue';
  import { cloneDeep } 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: 'NsTableFooter',
    components: {
      NsButton,
    },
    props: {
      data: {
        type: Object,
        default: () => ({}),
      },
      footerActions: {
        type: [Array],
        default: () => [],
      },
    },
    setup(props) {
      const reload = inject('reload', () => {});
      const { filterAction, transformAction } = useAction({ reload });
      const getData = computed(() => {
        return {
          ...props.data,
        };
      });

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

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

<style lang="less" scoped>
  .table-footer {
    min-width: 800px;
    user-select: none;
    margin-bottom: 17px;
    margin-top: 17px;
    text-align: right;
    padding: 0 24px;
    position: relative;
    line-height: 30px;
    color: #121212;

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