feat: add AuthDropDown component usage more action drowdown menu

ww
1 parent 780254b8
Showing 3 changed files with 132 additions and 44 deletions
src/components/Widget/AuthDropDown.vue
src/views/configuration/center/index.vue
src/views/device/profiles/CardMode.vue
--- a/src/components/Widget/AuthDropDown.vue
View file @e4c198a
+++ b/src/components/Widget/AuthDropDown.vue
View file @e4c198a
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import { Dropdown, Menu, Popconfirm } from 'ant-design-vue';
+  import { computed, useSlots } from 'vue';
+  import Icon from '../Icon';
+  import { usePermission } from '/@/hooks/web/usePermission';
-<template> <div></div></template>
+  export interface AuthDropDownProps {
+    dropMenuList: AuthDropMenuList[];
+    trigger?: ('contextmenu' | 'click' | 'hover')[];
+  }
+
+  export interface AuthDropMenuList {
+    icon?: string;
+    event: string | number;
+    text: string;
+    disabled?: boolean;
+    divider?: boolean;
+    auth?: string;
+    onClick?: Fn;
+    popconfirm?: {
+      cancelText?: string;
+      okText?: string;
+      okType?: string;
+      title?: string;
+      icon?: string;
+      disabled?: boolean;
+      onCancel?: Fn;
+      onConfirm?: Fn;
+      onVisibleChange?: Fn;
+    };
+  }
+
+  const props = defineProps<AuthDropDownProps>();
+
+  const slot = useSlots();
+
+  const { hasPermission } = usePermission();
+
+  const getMenuList = computed(() => {
+    const { dropMenuList } = props;
+    return dropMenuList.filter((menu) => (menu.auth ? hasPermission(menu.auth) : true));
+  });
+
+  const hasDefaultSlot = computed(() => {
+    return !!slot.default;
+  });
+</script>
+
+<template>
+  <Dropdown :trigger="$props.trigger">
+    <template #overlay>
+      <Menu v-if="getMenuList.length">
+        <template v-for="item in getMenuList" :key="item.event">
+          <Menu.Divider v-if="item.divider" />
+          <Menu.Item v-if="!item.popconfirm" @click="item.onClick">
+            <span class="flex justify-center items-center">
+              <Icon :icon="item.icon" />
+              <span class="ml-2">{{ item.text }}</span>
+            </span>
+          </Menu.Item>
+          <Menu.Item v-if="item.popconfirm">
+            <Popconfirm v-bind="item.popconfirm">
+              <template v-if="item.popconfirm.icon" #icon>
+                <Icon :icon="item.popconfirm.icon" />
+              </template>
+              <span class="flex justify-center items-center">
+                <Icon :icon="item.icon" />
+                <span class="ml-2">{{ item.text }}</span>
+              </span>
+            </Popconfirm>
+          </Menu.Item>
+        </template>
+      </Menu>
+    </template>
+    <Icon
+      v-if="!hasDefaultSlot"
+      class="items-center justify-center"
+      icon="ant-design:ellipsis-outlined"
+      :class="!getMenuList.length ? '!text-gray-200 !cursor-not-allowed' : ''"
+    />
+    <slot name="default"></slot>
+  </Dropdown>
+</template>
--- a/src/views/configuration/center/index.vue
View file @e4c198a
+++ b/src/views/configuration/center/index.vue
View file @e4c198a
 <script setup lang="ts">
   import { List, Card, Button, PaginationProps, Popover, Slider, Tooltip } from 'ant-design-vue';
-  import { ReloadOutlined, AppstoreOutlined, EllipsisOutlined } from '@ant-design/icons-vue';
+  import { ReloadOutlined, AppstoreOutlined } from '@ant-design/icons-vue';
   import { computed, onMounted, reactive, ref, unref } from 'vue';
   import { OrganizationIdTree, useResetOrganizationTree } from '../../common/organizationIdTree';
   import {
@@ -9,7 +9,6 @@
   } from '/@/api/configuration/center/configurationCenter';
   import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal';
   import { PageWrapper } from '/@/components/Page';
-  import { Dropdown } from '/@/components/Dropdown';
   import { BasicForm, useForm } from '/@/components/Form';
   import { ConfigurationPermission, searchFormSchema } from './center.data';
   import { useMessage } from '/@/hooks/web/useMessage';
@@ -17,13 +16,13 @@
   import { isDevMode } from '/@/utils/env';
   import ConfigurationCenterDrawer from './ConfigurationCenterDrawer.vue';
   import { useDrawer } from '/@/components/Drawer';
-  import { useSyncConfirm } from '/@/hooks/component/useSyncConfirm';
   import { getBoundingClientRect } from '/@/utils/domUtils';
   import configurationSrc from '/@/assets/icons/configuration.svg';
   import { cloneDeep } from 'lodash';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { useGlobSetting } from '/@/hooks/setting';
   import { AuthIcon } from '/@/components/Widget';
+  import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
   const listColumn = ref(5);
@@ -131,10 +130,8 @@
     window.open(`${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`);
   };
-  const { createSyncConfirm } = useSyncConfirm();
   const handleDelete = async (record: ConfigurationCenterItemsModal) => {
     try {
-      await createSyncConfirm({ iconType: 'warning', content: '是否确认删除操作?' });
       await deleteConfigurationCenter([record.id]);
       createMessage.success('删除成功');
       await getListData();
@@ -237,7 +234,29 @@
                     @click="handleDesign(item)"
                   />
                 </Tooltip>
-                <Dropdown
+                <AuthDropDown
+                  :dropMenuList="[
+                    {
+                      text: '编辑',
+                      auth: ConfigurationPermission.UPDATE,
+                      icon: 'clarity:note-edit-line',
+                      event: '',
+                      onClick: handleCreateOrUpdate.bind(null, item),
+                    },
+                    {
+                      text: '删除',
+                      auth: ConfigurationPermission.DELETE,
+                      icon: 'ant-design:delete-outlined',
+                      event: '',
+                      popconfirm: {
+                        title: '是否确认删除操作?',
+                        onConfirm: handleDelete.bind(null, item),
+                      },
+                    },
+                  ]"
+                  :trigger="['hover']"
+                />
+                <!-- <Dropdown
                   :dropMenuList="[
                     {
                       text: '编辑',
@@ -258,7 +277,7 @@
                   :trigger="['hover']"
                 >
                   <EllipsisOutlined key="ellipsis" />
-                </Dropdown>
+                </Dropdown> -->
               </template>
               <Card.Meta>
                 <template #title>
--- a/src/views/device/profiles/CardMode.vue
View file @e4c198a
+++ b/src/views/device/profiles/CardMode.vue
View file @e4c198a
@@ -2,7 +2,7 @@
   import { PageWrapper } from '/@/components/Page';
   import { BasicForm, useForm } from '/@/components/Form';
   import { List, Button, Tooltip, Card, PaginationProps, Image } from 'ant-design-vue';
-  import { ReloadOutlined, MoreOutlined } from '@ant-design/icons-vue';
+  import { ReloadOutlined } from '@ant-design/icons-vue';
   import { computed, onMounted, reactive, ref, unref } from 'vue';
   import {
     AuthIcon,
@@ -17,7 +17,6 @@
     setDeviceProfileIsDefaultApi,
   } from '/@/api/device/deviceConfigApi';
   import { ProfileRecord } from '/@/api/device/model/deviceConfigModel';
-  import { Dropdown } from '/@/components/Dropdown';
   import {
     defaultObj,
     searchFormSchema,
@@ -25,14 +24,13 @@
     ProductPermission,
   } from './device.profile.data';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { useSyncConfirm } from '/@/hooks/component/useSyncConfirm';
   import DeviceProfileModal from './DeviceProfileModal.vue';
   import DeviceProfileDrawer from './DeviceProfileDrawer.vue';
   import { useModal } from '/@/components/Modal';
   import { useDrawer } from '/@/components/Drawer';
   import productDefault from '/@/assets/icons/product-default.svg';
-  import { usePermission } from '/@/hooks/web/usePermission';
   import { useRoute } from 'vue-router';
+  import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
   defineProps<{
     mode: EnumTableCardMode;
@@ -47,7 +45,6 @@
   const IMAGE_FALLBACK = productDefault;
   const { createMessage } = useMessage();
-  const { createSyncConfirm } = useSyncConfirm();
   const [register, { getFieldsValue, setFieldsValue }] = useForm({
     showAdvancedButton: true,
@@ -110,32 +107,6 @@
     }
   };
-  const { hasPermission } = usePermission();
-
-  const getHasDeleteFlag = computed(() => {
-    return hasPermission(ProductPermission.DELETE);
-  });
-
-  const getDropDownList = (record: ProfileRecord) => {
-    const list = [
-      {
-        text: '默认',
-        event: DropMenuEvent.SET_DEFAULT,
-        icon: 'ant-design:unordered-list-outlined',
-        onClick: handleSetDefault.bind(null, record),
-      },
-    ];
-    if (unref(getHasDeleteFlag)) {
-      list.push({
-        text: '删除',
-        event: DropMenuEvent.DELETE,
-        icon: 'ant-design:delete-outlined',
-        onClick: handleDelete.bind(null, [record.id]),
-      });
-    }
-    return list;
-  };
-
   const handleModeChange = (mode: EnumTableCardMode) => {
     emit('changeMode', mode);
   };
@@ -172,7 +143,6 @@
   const handleDelete = async (id: string[]) => {
     try {
-      await createSyncConfirm({ iconType: 'warning', content: '是否确认删除操作?' });
       await deviceConfigDelete(id);
       createMessage.success('删除成功');
       await getDataSource();
@@ -278,9 +248,28 @@
                     @click.stop="handleUpdate(item)"
                   />
                 </Tooltip>
-                <Dropdown :trigger="['hover']" :drop-menu-list="getDropDownList(item)">
-                  <MoreOutlined @click.stop class="transform rotate-90" />
-                </Dropdown>
+                <AuthDropDown
+                  @click.stop
+                  :trigger="['hover']"
+                  :drop-menu-list="[
+                    {
+                      text: '默认',
+                      event: DropMenuEvent.SET_DEFAULT,
+                      icon: 'ant-design:unordered-list-outlined',
+                      onClick: handleSetDefault.bind(null, item),
+                    },
+                    {
+                      text: '删除',
+                      event: DropMenuEvent.DELETE,
+                      auth: ProductPermission.DELETE,
+                      icon: 'ant-design:delete-outlined',
+                      popconfirm: {
+                        title: '是否确认删除操作?',
+                        onConfirm: handleDelete.bind(null, [item.id]),
+                      },
+                    },
+                  ]"
+                />
               </template>
               <Card.Meta>
                 <template #title>