You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

120 lines
2.9 KiB

<!-- @format -->
<template>
<div class="ns-table-header" v-if="!isEmpty(getActions)">
<div class="ns-table-title extra-title-box" 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>
.extra-title-box {
position: relative;
padding-left: 9px;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 13px;
width: 3px;
border-radius: 1px;
background-color: @primary-color;
}
}
.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>