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.
 
 
 
 
 
 

142 lines
4.2 KiB

<!-- @format -->
<template>
<div class="table-action">
<template v-for="(item, index) in getActions" :key="item.name">
<template v-if="item.children">
<template v-if="getDropdownActions(item.children).length > 0">
<a-dropdown :trigger="['hover']" :dropMenuList="item.children">
<a class="ant-dropdown-link" @click.prevent>
<ns-v-node :content="item.label" />
<DownOutlined />
</a>
<template #overlay>
<a-menu>
<div v-for="itemChild in getDropdownActions(item.children)" :key="itemChild.name">
<a-menu-item style="padding: 0px" v-if="itemChild.type !== 'divider'">
<a-button
style="width: 100%; text-align: left"
type="link"
:disabled="itemChild.dynamicDisabled"
@click="itemChild.finalHandle(data, itemChild.name)">
<ns-v-node :content="itemChild.label" />
</a-button>
</a-menu-item>
<a-menu-divider v-else style="margin: 4px 0" />
</div>
</a-menu>
</template>
</a-dropdown>
</template>
</template>
<template v-else>
<a-button
:type="item.type || 'link'"
:disabled="item.dynamicDisabled"
@click="item.finalHandle(data, item.name)">
<ns-v-node :content="item.label" />
</a-button>
</template>
</template>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, inject, toRefs, unref } from 'vue';
import { DownOutlined } from '@ant-design/icons-vue';
import { cloneDeep, isFunction, isUndefined } from 'lodash-es';
import { useAction } from '/nerv-lib/use/use-action';
import { TableEdit } from '/nerv-lib/component/table/use-table-edit';
import { useRoute } from 'vue-router';
import { PropTypes } from '/nerv-lib/util/type';
import { useTableColumn } from '/nerv-lib/component/table/use-table-column';
export default defineComponent({
name: 'NsTableAction',
components: {
DownOutlined,
},
props: {
searchData: {
type: Object,
default: () => ({}),
},
data: {
type: Object,
default: () => ({}),
},
columnActions: {
type: Object,
default: () => ({}),
},
},
setup(props) {
const { columnActions, searchData, data } = toRefs(props);
const reload = inject('reload', () => {});
const { filterAction, transformAction } = useAction({ reload });
const route = useRoute();
const getData = computed(() => {
return {
...route.query,
...route.params,
...searchData.value,
...data.value,
};
});
const { transformColumnAction } = useTableColumn({ columnActions: columnActions.value });
const getActions = computed(() => {
let actions = cloneDeep(unref(columnActions).actions);
//是否开启自动隐藏字段
if (columnActions.value.autoMergeAction === true) {
actions = transformColumnAction(actions);
}
actions = actions
.filter((action) => {
return filterAction(action, getData.value);
})
.map((action) => {
return transformAction(action, getData.value);
});
return actions;
});
const getDropdownActions = (actions) => {
actions = actions
.filter((action) => {
return filterAction(action, getData.value);
})
.map((action) => {
return transformAction(action, getData.value);
});
return actions;
};
const { serviceMode } = __APP_INFO__;
return { getActions, getDropdownActions, isFunction, serviceMode };
},
});
</script>
<style lang="less" scoped>
.table-action {
user-select: none;
margin-left: -6px;
margin-right: -6px;
display: flex;
}
:deep(.ant-btn) {
padding: 0 6px !important;
height: 22px;
line-height: 20px;
}
:deep(.ant-dropdown-link) {
padding: 0 6px;
}
:deep(.ant-btn-link:hover) {
border-color: transparent;
}
</style>