123 lines
3.5 KiB
Vue
123 lines
3.5 KiB
Vue
<template>
|
|
<template v-if="isPermission">
|
|
<template v-if="popConfirm">
|
|
<j-popconfirm :overlayStyle='{width: "220px"}' v-bind="popConfirm" :disabled="!isPermission || props.disabled">
|
|
<j-tooltip v-if="tooltip" v-bind="tooltip">
|
|
<slot v-if="noButton"></slot>
|
|
<j-button v-else v-bind="props" :disabled="_isPermission" :style="props.style">
|
|
<slot></slot>
|
|
<template #icon>
|
|
<slot name="icon"></slot>
|
|
</template>
|
|
</j-button>
|
|
</j-tooltip>
|
|
<j-button v-else v-bind="props" :disabled="_isPermission" >
|
|
<slot></slot>
|
|
<template #icon>
|
|
<slot name="icon"></slot>
|
|
</template>
|
|
</j-button>
|
|
</j-popconfirm>
|
|
</template>
|
|
<template v-else-if="tooltip">
|
|
<j-tooltip v-bind="tooltip">
|
|
<slot v-if="noButton"></slot>
|
|
<j-button v-else v-bind="props" :disabled="_isPermission" :style="props.style">
|
|
<slot></slot>
|
|
<template #icon>
|
|
<slot name="icon"></slot>
|
|
</template>
|
|
</j-button>
|
|
</j-tooltip>
|
|
</template>
|
|
<template v-else>
|
|
<slot v-if="noButton"></slot>
|
|
<j-button v-else v-bind="props" :disabled="_isPermission" :style="props.style">
|
|
<slot></slot>
|
|
<template #icon>
|
|
<slot name="icon"></slot>
|
|
</template>
|
|
</j-button>
|
|
</template>
|
|
</template>
|
|
<j-tooltip v-else title="暂无权限，请联系管理员" :placement="placement">
|
|
<slot v-if="noButton"></slot>
|
|
<j-button v-else v-bind="props" :disabled="_isPermission" :style="props.style">
|
|
<slot></slot>
|
|
<template #icon>
|
|
<slot name="icon"></slot>
|
|
</template>
|
|
</j-button>
|
|
</j-tooltip>
|
|
</template>
|
|
<script setup lang="ts" name="PermissionButton">
|
|
import { CSSProperties, PropType } from 'vue'
|
|
import { TooltipProps, PopconfirmProps } from 'ant-design-vue/es'
|
|
import { buttonProps } from 'ant-design-vue/es/button/button'
|
|
import { usePermissionStore } from '@/store/permission';
|
|
import { omit } from 'lodash-es';
|
|
|
|
// interface PermissionButtonEmits {
|
|
// (e: 'click', data: MouseEvent): void;
|
|
// }
|
|
|
|
// const emits = defineEmits<PermissionButtonEmits>()
|
|
|
|
// interface PermissionButtonProps extends ButtonProps {
|
|
// tooltip?: TooltipProps;
|
|
// popConfirm?: PopconfirmProps;
|
|
// hasPermission?: string | Array<string>;
|
|
// noButton?: boolean;
|
|
// }
|
|
// const props = withDefaults(defineProps<PermissionButtonProps>(), {
|
|
// noButton: false,
|
|
// })
|
|
const props = defineProps({
|
|
noButton: {
|
|
type: Boolean,
|
|
default: () => false
|
|
},
|
|
tooltip: {
|
|
type: Object as PropType<TooltipProps>,
|
|
},
|
|
popConfirm: {
|
|
type: Object as PropType<PopconfirmProps>,
|
|
},
|
|
hasPermission: {
|
|
type: [String , Array, Boolean],
|
|
},
|
|
style: {
|
|
type: Object as PropType<CSSProperties>
|
|
},
|
|
placement:{
|
|
type: String,
|
|
default: 'top'
|
|
},
|
|
...omit(buttonProps(), 'icon')
|
|
})
|
|
|
|
// const { tooltip, popConfirm, hasPermission, noButton, ..._buttonProps } = props;
|
|
|
|
const permissionStore = usePermissionStore()
|
|
|
|
const isPermission = computed(() => {
|
|
if (!props.hasPermission || props.hasPermission === true) {
|
|
return true
|
|
}
|
|
return permissionStore.hasPermission(props.hasPermission)
|
|
})
|
|
const _isPermission = computed(() =>
|
|
'hasPermission' in props && isPermission.value
|
|
? 'disabled' in props
|
|
? props.disabled as boolean
|
|
: false
|
|
: true
|
|
)
|
|
|
|
// const conform = (e: MouseEvent) => {
|
|
// props.popConfirm?.onConfirm?.(e)
|
|
// }
|
|
</script>
|
|
<style scoped lang="less">
|
|
|
|
</style> |