push

lib/component/table/table-header.vue

@@ -0,0 +1,105 @@
+<!-- @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: 500px;
+    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>