面包屑导航

src/components/common-breadcrumb/index.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { computed } from 'vue'
+import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
+import { useTabsViewStore } from '@/stores/TabsViewStore'
+import { useRoute } from 'vue-router'
+import { useMenuInfo, useMenuName } from '@/components/utils'
+
+const globalConfigStore = useGlobalConfigStore()
+const tabsViewStore = useTabsViewStore()
+
+const route = useRoute()
+
+const breadcrumbs = computed(() => {
+  const exists = []
+  return route.matched.map(item => {
+    const menuInfo = useMenuInfo(item)
+    let icon = ''
+    if (menuInfo && menuInfo.icon) {
+      icon = menuInfo.icon
+    } else if (item.meta && item.meta.icon) {
+      icon = item.meta.icon
+    }
+    const result = {
+      path: item.path,
+      menuName: useMenuName(item),
+      icon
+    }
+    console.info(item, menuInfo)
+    return result
+  }).filter(item => {
+    const notExist = !exists.includes(item.menuName)
+    if (notExist) {
+      exists.push(item.menuName)
+    }
+    return notExist
+  })
+})
+</script>
+
+<template>
+  <el-breadcrumb
+    v-if="globalConfigStore.isShowBreadcrumb"
+    v-bind="$attrs"
+    class="common-breadcrumb"
+  >
+    <el-breadcrumb-item
+      v-for="item in breadcrumbs"
+      :key="item.path"
+      :to="{ path: item.path }"
+    >
+      <common-icon
+        v-if="tabsViewStore.isShowTabIcon&&item.icon"
+        :icon="item.icon"
+      />
+      {{ item.menuName }}
+    </el-breadcrumb-item>
+  </el-breadcrumb>
+</template>
+
+<style scoped>
+.common-breadcrumb {
+  padding-left: 15px;
+  padding-top: 10px;
+  height: 30px;
+  list-style: none;
+  border-radius: 4px;
+}
+.common-breadcrumb .el-icon {
+  vertical-align: bottom;
+}
+</style>

src/components/common-form/index.vue

@@ -27,7 +27,8 @@ const props = defineProps({
     default: '100px'
   },
   model: {
-    type: Object
+    type: Object,
+    default: null
   },
   showButtons: {
     type: Boolean,
@@ -40,10 +41,6 @@ const props = defineProps({
   showReset: {
     type: Boolean,
     default: true
-  },
-  submitForm: {
-    type: Function,
-    default () {}
   }
 })
 
@@ -77,6 +74,8 @@ const rules = computed(() => {
   return ruleResult
 })
 
+defineEmits(['submitForm'])
+
 const form = ref()
 
 </script>
@@ -99,7 +98,7 @@ const form = ref()
       <el-button
         v-if="showSubmit"
         type="primary"
-        @click="submitForm(form)"
+        @click="$emit('submitForm', form)"
       >
         {{ $t('common.label.submit') }}
       </el-button>

src/components/common-icon-select/index.vue

@@ -113,8 +113,8 @@ const selectIcon = icon => {
           </el-form-item>
         </el-form>
       </el-header>
-      <el-main>
-        <RecycleScroller
+      <el-main class="icon-area">
+        <recycle-scroller
           v-slot="{ item }"
           class="scroller icon-list"
           :items="filterIcons"
@@ -142,7 +142,7 @@ const selectIcon = icon => {
               </a>
             </el-col>
           </el-row>
-        </RecycleScroller>
+        </recycle-scroller>
       </el-main>
     </el-container>
   </el-dialog>
@@ -164,4 +164,7 @@ const selectIcon = icon => {
 .el-radio {
   margin-right: 10px;
 }
+.icon-area {
+  padding: 0;
+}
 </style>

src/components/common-menu-item/index.vue

@@ -28,7 +28,7 @@ const props = defineProps({
     required: true
   },
   index: {
-    type: Number,
+    type: [Number, String],
     required: false
   }
 })
@@ -65,7 +65,7 @@ const dropdownClick = menuItem => {
     :key="menuItem.index||index"
     :class="menuCls"
   >
-    {{ menuItem.splitText }}
+    <slot name="split" />
   </div>
   <el-sub-menu
     v-else-if="isSubMenu"

src/components/common-menu/index.vue

@@ -32,7 +32,11 @@ const activeRoutePath = computed(() => {
       <common-menu-item
         :menu-item="menuItem"
         :index="index"
-      />
+      >
+        <template #split>
+          <slot name="split" />
+        </template>
+      </common-menu-item>
     </template>
     <slot name="default" />
   </el-menu>

src/components/common-tabs-view/index.vue

@@ -81,12 +81,12 @@ const onDropdownVisibleChange = (visible, tab) => {
       v-for="item in tabsViewStore.historyTabs"
       ref="tabItems"
       :key="item.path"
-      :refresh-history-tab="refreshHistoryTab"
-      :remove-history-tab="removeHistoryTab"
-      :remove-other-history-tabs="removeOtherHistoryTabs"
-      :remove-history-tabs="removeHistoryTabs"
-      :on-dropdown-visible-change="onDropdownVisibleChange"
       :tab-item="item"
+      @refresh-history-tab="refreshHistoryTab"
+      @remove-other-history-tabs="removeOtherHistoryTabs"
+      @remove-history-tabs="removeHistoryTabs"
+      @on-dropdown-visible-change="onDropdownVisibleChange"
+      @remove-history-tab="removeHistoryTab"
     />
   </el-tabs>
 </template>

src/components/common-tabs-view/tabs-view-item.vue

@@ -12,29 +12,11 @@ const props = defineProps({
   tabItem: {
     type: Object,
     required: true
-  },
-  removeHistoryTab: {
-    type: Function,
-    required: true
-  },
-  removeOtherHistoryTabs: {
-    type: Function,
-    required: true
-  },
-  removeHistoryTabs: {
-    type: Function,
-    required: true
-  },
-  refreshHistoryTab: {
-    type: Function,
-    required: true
-  },
-  onDropdownVisibleChange: {
-    type: Function,
-    required: true
   }
 })
 
+defineEmits(['removeHistoryTab', 'removeOtherHistoryTabs', 'removeHistoryTabs', 'refreshHistoryTab', 'onDropdownVisibleChange'])
+
 const menuName = computed(() => {
   return useMenuName(props.tabItem)
 })
@@ -69,7 +51,7 @@ defineExpose({
         :id="tabItem.path"
         ref="dropdownRef"
         trigger="contextmenu"
-        @visible-change="onDropdownVisibleChange($event, tabItem)"
+        @visible-change="$emit('onDropdownVisibleChange', $event, tabItem)"
       >
         <span class="custom-tabs-label">
           <common-icon
@@ -81,35 +63,35 @@ defineExpose({
         <template #dropdown>
           <el-dropdown-menu>
             <el-dropdown-item
-              @click="refreshHistoryTab(tabItem)"
+              @click="$emit('refreshHistoryTab', tabItem)"
             >
               <common-icon icon="refresh" />
               {{ $t('common.label.refresh') }}
             </el-dropdown-item>
             <el-dropdown-item
               v-if="tabsViewStore.hasCloseDropdown(tabItem, 'close')"
-              @click="removeHistoryTab(tabItem.path)"
+              @click="$emit('removeHistoryTab', tabItem.path)"
             >
               <common-icon icon="close" />
               {{ $t('common.label.close') }}
             </el-dropdown-item>
             <el-dropdown-item
               v-if="tabsViewStore.hasCloseDropdown(tabItem, 'left')"
-              @click="removeHistoryTabs(tabItem, 'left')"
+              @click="$emit('removeHistoryTabs', tabItem, 'left')"
             >
               <common-icon icon="KeyboardDoubleArrowLeftFilled" />
               {{ $t('common.label.closeLeft') }}
             </el-dropdown-item>
             <el-dropdown-item
               v-if="tabsViewStore.hasCloseDropdown(tabItem, 'right')"
-              @click="removeHistoryTabs(tabItem, 'right')"
+              @click="$emit('removeHistoryTabs', tabItem, 'right')"
             >
               <common-icon icon="KeyboardDoubleArrowRightFilled" />
               {{ $t('common.label.closeRight') }}
             </el-dropdown-item>
             <el-dropdown-item
               v-if="tabsViewStore.hasCloseDropdown(tabItem, 'other')"
-              @click="removeOtherHistoryTabs(tabItem)"
+              @click="$emit('removeOtherHistoryTabs', tabItem)"
             >
               <common-icon icon="PlaylistRemoveFilled" />
               {{ $t('common.label.closeOther') }}

src/components/index.js

@@ -6,6 +6,7 @@ import CommonMenu from '@/components/common-menu/index.vue'
 import CommonMenuItem from '@/components/common-menu-item/index.vue'
 import CommonTabsView from '@/components/common-tabs-view/index.vue'
 import CommonTable from '@/components/common-table/index.vue'
+import CommonBreadcrumb from '@/components/common-breadcrumb/index.vue'
 
 /**
  * 自定义通用组件自动注册
@@ -23,5 +24,6 @@ export default {
     Vue.component('CommonMenuItem', CommonMenuItem)
     Vue.component('CommonTabsView', CommonTabsView)
     Vue.component('CommonTable', CommonTable)
+    Vue.component('CommonBreadcrumb', CommonBreadcrumb)
   }
 }