142 lines
4.0 KiB
Plaintext
142 lines
4.0 KiB
Plaintext
<template>
|
|
<div class="tableAction">
|
|
<div class="flex items-center justify-center">
|
|
<template v-for="(action, index) in getActions" :key="`${index}-${action.label}`">
|
|
<template v-if="!action.popConfirm">
|
|
<a-button v-bind="action" :class="{ 'mr-2': action.type != 'link' }">
|
|
<template #icon v-if="action.icon">
|
|
<component :is="action.icon" />
|
|
</template>
|
|
{{ action.label }}
|
|
</a-button>
|
|
</template>
|
|
<template v-else>
|
|
<a-popconfirm v-bind="action">
|
|
<a-button class="mr-2" v-bind="action">
|
|
<template #icon v-if="action.icon">
|
|
<component :is="action.icon" />
|
|
</template>
|
|
{{ action.label }}
|
|
</a-button>
|
|
</a-popconfirm>
|
|
</template>
|
|
</template>
|
|
<a-dropdown v-if="dropDownActions && getDropdownList.length">
|
|
<a-button v-bind="getMoreProps">
|
|
<template #icon v-if="getMoreProps.icon">
|
|
<component :is="getMoreProps.icon" />
|
|
</template>
|
|
{{ getMoreProps.label }}
|
|
</a-button>
|
|
<slot name="more"></slot>
|
|
<template #overlay>
|
|
<a-menu>
|
|
<a-menu-item
|
|
:key="item.key"
|
|
v-for="item in getDropdownList"
|
|
@click="item.onClick && item.onClick(item.key)"
|
|
>
|
|
{{ item.label }}
|
|
</a-menu-item>
|
|
</a-menu>
|
|
</template>
|
|
</a-dropdown>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, PropType, computed, toRaw } from 'vue';
|
|
import { ActionItem } from '@/components/Table';
|
|
import { usePermission } from '@/hooks/web/usePermission';
|
|
import { isBoolean, isFunction } from '@/utils/is';
|
|
import { DownOutlined } from '@ant-design/icons-vue';
|
|
|
|
export default defineComponent({
|
|
name: 'TableAction',
|
|
components: { DownOutlined },
|
|
props: {
|
|
actions: {
|
|
type: Array as PropType<ActionItem[]>,
|
|
default: null,
|
|
required: true,
|
|
},
|
|
dropDownActions: {
|
|
type: Array as PropType<ActionItem[]>,
|
|
default: null,
|
|
},
|
|
style: {
|
|
type: String as PropType<String>,
|
|
default: 'button',
|
|
},
|
|
select: {
|
|
type: Function as PropType<Function>,
|
|
default: () => {},
|
|
},
|
|
dropDownProps: {
|
|
type: Object as PropType<Object>,
|
|
default: () => {},
|
|
},
|
|
},
|
|
setup(props) {
|
|
const { hasPermission } = usePermission();
|
|
|
|
const getMoreProps: any = computed(() => {
|
|
return {
|
|
...(props.dropDownProps || {}),
|
|
};
|
|
});
|
|
|
|
const getDropdownList = computed(() => {
|
|
return (toRaw(props.dropDownActions) || [])
|
|
.filter((action) => {
|
|
return hasPermission(action.auth as string[]) && isIfShow(action);
|
|
})
|
|
.map((action) => {
|
|
return {
|
|
...action,
|
|
};
|
|
});
|
|
});
|
|
|
|
function isIfShow(action: ActionItem): boolean {
|
|
const ifShow = action.ifShow;
|
|
|
|
let isIfShow = true;
|
|
|
|
if (isBoolean(ifShow)) {
|
|
isIfShow = ifShow;
|
|
}
|
|
if (isFunction(ifShow)) {
|
|
isIfShow = ifShow(action);
|
|
}
|
|
return isIfShow;
|
|
}
|
|
|
|
const getActions = computed(() => {
|
|
return (toRaw(props.actions) || [])
|
|
.filter((action) => {
|
|
return hasPermission(action.auth as string[]) && isIfShow(action);
|
|
})
|
|
.map((action) => {
|
|
const { popConfirm } = action;
|
|
//需要展示什么风格，自己修改一下参数
|
|
return {
|
|
...action,
|
|
...(popConfirm || {}),
|
|
onConfirm: popConfirm?.confirm,
|
|
onCancel: popConfirm?.cancel,
|
|
enable: !!popConfirm,
|
|
};
|
|
});
|
|
});
|
|
|
|
return {
|
|
getActions,
|
|
getDropdownList,
|
|
getMoreProps,
|
|
};
|
|
},
|
|
});
|
|
</script>
|