104 lines
3.2 KiB
Vue
104 lines
3.2 KiB
Vue
<template>
|
|
<div>
|
|
<j-space v-if="_item.key && visible">
|
|
<PermissionButton
|
|
:type="'primary'"
|
|
:ghost="true"
|
|
:hasPermission="_item.permission ? _item.permission : true"
|
|
v-bind="{ ..._item, ..._item.selected }"
|
|
>
|
|
<template #icon><AIcon :type="_item.icon" /></template>
|
|
{{ _item.text }}
|
|
</PermissionButton>
|
|
<j-button type="link" @click="reload"
|
|
><AIcon type="RedoOutlined" />重选</j-button
|
|
>
|
|
</j-space>
|
|
<j-dropdown :overlayStyle="{ zIndex: 1000 }" v-else>
|
|
<j-button>批量操作 <AIcon type="DownOutlined" /></j-button>
|
|
<template #overlay>
|
|
<j-menu @click="handleMenuClick">
|
|
<j-menu-item v-for="item in actions" :key="item.key">
|
|
<PermissionButton
|
|
:hasPermission="
|
|
item.permission ? item.permission : true
|
|
"
|
|
v-bind="item"
|
|
:popConfirm="
|
|
item.popConfirm
|
|
? {
|
|
...item.popConfirm,
|
|
onCancel: onPopCancel,
|
|
onConfirm: (e) =>
|
|
onPopConfirm(
|
|
e,
|
|
item?.popConfirm?.onConfirm,
|
|
),
|
|
}
|
|
: undefined
|
|
"
|
|
>
|
|
<template #icon
|
|
><AIcon :type="item.icon"
|
|
/></template>
|
|
{{ item.text }}
|
|
</PermissionButton>
|
|
</j-menu-item>
|
|
</j-menu>
|
|
</template>
|
|
</j-dropdown>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { PropType } from 'vue';
|
|
import { BatchActionsType } from './types';
|
|
|
|
const props = defineProps({
|
|
actions: {
|
|
type: Array as PropType<BatchActionsType[]>,
|
|
default: () => [],
|
|
},
|
|
isCheck: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const emits = defineEmits(['update:isCheck', 'change']);
|
|
|
|
const visible = ref<boolean>(false);
|
|
const _item = ref<Partial<BatchActionsType>>({});
|
|
|
|
const handleMenuClick = (e: any) => {
|
|
const val = props.actions.find((item) => item.key === e.key);
|
|
if(!(val?.popConfirm || val?.onClick)){
|
|
emits('update:isCheck', true);
|
|
emits('change', true);
|
|
visible.value = true;
|
|
} else {
|
|
visible.value = false;
|
|
}
|
|
_item.value = (val || {}) as any;
|
|
};
|
|
|
|
const reload = () => {
|
|
_item.value = {};
|
|
emits('update:isCheck', false);
|
|
emits('change', false);
|
|
};
|
|
|
|
const onPopConfirm = (e: any, fun: any) => {
|
|
if (fun) {
|
|
fun(e);
|
|
onPopCancel();
|
|
}
|
|
};
|
|
|
|
const onPopCancel = () => {
|
|
visible.value = false;
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
</style> |