From e4f79a7e36214e5836cb0e667b3ffbd3db45456d Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期二, 22 十月 2024 23:54:26 +0800
Subject: [PATCH] 工单变量删除优化，预览优化

---
 src/components/SimpleMenu/src/SimpleSubMenu.vue |  110 ++++++++++++++++++++++++-------------------------------
 1 files changed, 48 insertions(+), 62 deletions(-)

diff --git a/src/components/SimpleMenu/src/SimpleSubMenu.vue b/src/components/SimpleMenu/src/SimpleSubMenu.vue
index e3e9a2e..255b7b2 100644
--- a/src/components/SimpleMenu/src/SimpleSubMenu.vue
+++ b/src/components/SimpleMenu/src/SimpleSubMenu.vue
@@ -5,6 +5,7 @@
     v-bind="$props"
     :class="getLevelClass"
   >
+    <img v-if="getImg" :src="getImg" class="w-16px h-16px align-top" />
     <Icon v-if="getIcon" :icon="getIcon" :size="16" />
     <div v-if="collapsedShowTitle && getIsCollapseParent" class="mt-1 collapse-title">
       {{ getI18nName }}
@@ -23,6 +24,7 @@
     :collapsedShowTitle="collapsedShowTitle"
   >
     <template #title>
+      <img v-if="getImg" :src="getImg" class="w-16px h-16px align-top" />
       <Icon v-if="getIcon" :icon="getIcon" :size="16" />
 
       <div v-if="collapsedShowTitle && getIsCollapseParent" class="mt-2 collapse-title">
@@ -42,75 +44,59 @@
     </template>
   </SubMenu>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { PropType } from 'vue';
-  import type { Menu } from '/@/router/types';
+  import type { Menu } from '@/router/types';
 
-  import { defineComponent, computed } from 'vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { computed } from 'vue';
+  import { useDesign } from '@/hooks/web/useDesign';
   import Icon from '@/components/Icon/Icon.vue';
 
   import MenuItem from './components/MenuItem.vue';
   import SubMenu from './components/SubMenuItem.vue';
-  import { propTypes } from '/@/utils/propTypes';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+  import { propTypes } from '@/utils/propTypes';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';
 
-  export default defineComponent({
-    name: 'SimpleSubMenu',
-    components: {
-      SubMenu,
-      MenuItem,
-      SimpleMenuTag: createAsyncComponent(() => import('./SimpleMenuTag.vue')),
-      Icon,
+  const SimpleMenuTag = createAsyncComponent(() => import('./SimpleMenuTag.vue'));
+
+  defineOptions({ name: 'SimpleSubMenu' });
+
+  const props = defineProps({
+    item: {
+      type: Object as PropType<Menu>,
+      default: () => ({}),
     },
-    props: {
-      item: {
-        type: Object as PropType<Menu>,
-        default: () => ({}),
-      },
-      parent: propTypes.bool,
-      collapsedShowTitle: propTypes.bool,
-      collapse: propTypes.bool,
-      theme: propTypes.oneOf(['dark', 'light']),
-    },
-    setup(props) {
-      const { t } = useI18n();
-      const { prefixCls } = useDesign('simple-menu');
-
-      const getShowMenu = computed(() => !props.item?.meta?.hideMenu);
-      const getIcon = computed(() => props.item?.icon);
-      const getI18nName = computed(() => t(props.item?.name));
-      const getShowSubTitle = computed(() => !props.collapse || !props.parent);
-      const getIsCollapseParent = computed(() => !!props.collapse && !!props.parent);
-      const getLevelClass = computed(() => {
-        return [
-          {
-            [`${prefixCls}__parent`]: props.parent,
-            [`${prefixCls}__children`]: !props.parent,
-          },
-        ];
-      });
-
-      function menuHasChildren(menuTreeItem: Menu): boolean {
-        return (
-          !menuTreeItem.meta?.hideChildrenInMenu &&
-          Reflect.has(menuTreeItem, 'children') &&
-          !!menuTreeItem.children &&
-          menuTreeItem.children.length > 0
-        );
-      }
-
-      return {
-        prefixCls,
-        menuHasChildren,
-        getShowMenu,
-        getIcon,
-        getI18nName,
-        getShowSubTitle,
-        getLevelClass,
-        getIsCollapseParent,
-      };
-    },
+    parent: propTypes.bool,
+    collapsedShowTitle: propTypes.bool,
+    collapse: propTypes.bool,
+    theme: propTypes.oneOf(['dark', 'light']),
   });
+
+  const { t } = useI18n();
+  const { prefixCls } = useDesign('simple-menu');
+
+  const getShowMenu = computed(() => !props.item?.meta?.hideMenu);
+  const getIcon = computed(() => (props.item?.img ? undefined : props.item?.icon));
+  const getImg = computed(() => props.item?.img);
+  const getI18nName = computed(() => t(props.item?.meta?.title || props.item?.name));
+  const getShowSubTitle = computed(() => !props.collapse || !props.parent);
+  const getIsCollapseParent = computed(() => !!props.collapse && !!props.parent);
+  const getLevelClass = computed(() => {
+    return [
+      {
+        [`${prefixCls}__parent`]: props.parent,
+        [`${prefixCls}__children`]: !props.parent,
+      },
+    ];
+  });
+
+  function menuHasChildren(menuTreeItem: Menu): boolean {
+    return (
+      !menuTreeItem.meta?.hideChildrenInMenu &&
+      Reflect.has(menuTreeItem, 'children') &&
+      !!menuTreeItem.children &&
+      menuTreeItem.children.length > 0
+    );
+  }
 </script>

--
Gitblit v1.9.3