add: 新增权限按钮

This commit is contained in:
wangshuaiswim 2023-01-09 16:11:49 +08:00
parent 4b0529631b
commit 5ad7ed969c
2 changed files with 63 additions and 0 deletions

View File

@ -0,0 +1,61 @@
<template>
<template v-if="isPermission">
<template v-if="popConfirm">
<a-popconfirm v-bind="popConfirm" :disabled="!isPermission || props.disabled">
<a-tooltip v-if="tooltip" v-bind="tooltip">
<slot v-if="noButton"></slot>
<a-button v-else v-bind="buttonProps" :disabled="_isPermission"></a-button>
</a-tooltip>
<a-button v-else v-bind="buttonProps" :disabled="_isPermission"></a-button>
</a-popconfirm>
</template>
<template v-else-if="tooltip">
<a-tooltip v-bind="tooltip">
<slot v-if="noButton"></slot>
<a-button v-else v-bind="buttonProps" :disabled="_isPermission"></a-button>
</a-tooltip>
</template>
<template v-else>
<slot v-if="noButton"></slot>
<a-button v-else v-bind="buttonProps" :disabled="_isPermission"></a-button>
</template>
</template>
<a-tooltip v-else title="没有权限">
<slot v-if="noButton"></slot>
<a-button v-else v-bind="buttonProps" :disabled="_isPermission"></a-button>
</a-tooltip>
</template>
<script setup lang="ts">
import type { ButtonProps, TooltipProps, PopconfirmProps } from 'ant-design-vue'
import { usePermissionStore } from '@/store/permission';
interface PermissionButtonProps extends ButtonProps {
tooltip?: TooltipProps;
popConfirm?: PopconfirmProps;
hasPermission?: string | Array<string>;
noButton?: boolean;
}
const props = withDefaults(defineProps<PermissionButtonProps>(), {
noButton: false
})
const { tooltip, popConfirm, hasPermission, noButton, ...buttonProps } = props;
const permissionStore = usePermissionStore()
const isPermission = computed(() => {
if (!props.hasPermission) {
return true
}
return permissionStore.hasPermission(props.hasPermission)
})
const _isPermission = computed(() =>
'hasPermission' in props && isPermission
? 'disabled' in buttonProps
? buttonProps.disabled
: false
: true
)
</script>
<style scoped lang="scss">
</style>

View File

@ -1,8 +1,10 @@
import type { App } from 'vue'
import AIcon from './AIcon'
import PermissionButton from './PermissionButton/index.vue'
export default {
install(app: App) {
app.component('AIcon', AIcon)
app.component('PermissionButton', PermissionButton)
}
}