push

lib/component/table/table-footer.vue

@@ -0,0 +1,79 @@
+<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>