index.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <template>
  2. <el-tree-select
  3. v-if="theme.showSearch"
  4. v-model="value"
  5. class="vab-search"
  6. clearable
  7. :data="addFieldToTree(routes)"
  8. default-expand-all
  9. filterable
  10. highlight-current
  11. :prefix-icon="Search"
  12. @node-click="handleSelect"
  13. >
  14. <template #default="{ data }">
  15. <vab-icon v-if="data.meta && data.meta.icon" :icon="data.meta.icon" />
  16. <span style="margin-left: 3px">{{ translate(data.meta.title) }}</span>
  17. </template>
  18. </el-tree-select>
  19. </template>
  20. <script lang="ts" setup>
  21. import { Search } from '@element-plus/icons-vue'
  22. import { isHashRouterMode } from '/@/config'
  23. import { translate } from '/@/i18n'
  24. import { useRoutesStore } from '/@/store/modules/routes'
  25. import { useSettingsStore } from '/@/store/modules/settings'
  26. import { isExternal } from '/@/utils/validate'
  27. defineOptions({
  28. name: 'VabSearch',
  29. })
  30. const settingsStore = useSettingsStore()
  31. const { theme } = storeToRefs(settingsStore)
  32. const value = ref<any>('')
  33. const router = useRouter()
  34. const route = useRoute()
  35. const routesStore = useRoutesStore()
  36. const { getRoutes: routes } = storeToRefs(routesStore)
  37. const addFieldToTree = (data: any) => {
  38. data.forEach((node: any) => {
  39. node.value = node.name
  40. node.label = translate(node.meta.title)
  41. if (node.children && node.children.length) addFieldToTree(node.children)
  42. })
  43. return data
  44. }
  45. const handleSelect = (item: any) => {
  46. nextTick(() => {
  47. if (!item.children)
  48. if (isExternal(item.path)) {
  49. window.open(item.path)
  50. router.push('/redirect')
  51. return
  52. } else if (item.meta.target === '_blank') {
  53. isHashRouterMode ? window.open(`#${item.path}`) : window.open(item.path)
  54. router.push('/redirect')
  55. return
  56. } else router.push(item)
  57. })
  58. }
  59. watch(
  60. route,
  61. () => {
  62. value.value = route.name
  63. },
  64. {
  65. immediate: true,
  66. }
  67. )
  68. </script>
  69. <style lang="scss" scoped>
  70. .vab-search {
  71. :deep() {
  72. .el-input {
  73. width: 150px !important;
  74. }
  75. }
  76. }
  77. </style>