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.
106 lines
2.6 KiB
106 lines
2.6 KiB
7 months ago
|
<!-- @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>
|