add: 新增权限按钮

src/components/PermissionButton/index.vue

@@ -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>

src/components/index.ts

@@ -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)
     }
 }