index.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. <template>
  2. <div :class="{ 'show': show }" class="header-search">
  3. <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
  4. <el-select
  5. ref="headerSearchSelectRef"
  6. v-model="search"
  7. :remote-method="querySearch"
  8. filterable
  9. default-first-option
  10. remote
  11. placeholder="请输入"
  12. class="header-search-select"
  13. @change="change"
  14. >
  15. <el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')" />
  16. </el-select>
  17. </div>
  18. </template>
  19. <script setup>
  20. import Fuse from 'fuse.js'
  21. import { getNormalPath } from '@/utils/ruoyi'
  22. import { isHttp } from '@/utils/validate'
  23. import usePermissionStore from '@/store/modules/permission'
  24. const search = ref('');
  25. const options = ref([]);
  26. const searchPool = ref([]);
  27. const show = ref(false);
  28. const fuse = ref(undefined);
  29. const headerSearchSelectRef = ref(null);
  30. const router = useRouter();
  31. const routes = computed(() => usePermissionStore().routes);
  32. function click() {
  33. show.value = !show.value
  34. if (show.value) {
  35. headerSearchSelectRef.value && headerSearchSelectRef.value.focus()
  36. }
  37. };
  38. function close() {
  39. headerSearchSelectRef.value && headerSearchSelectRef.value.blur()
  40. options.value = []
  41. show.value = false
  42. }
  43. function change(val) {
  44. const path = val.path;
  45. const query = val.query;
  46. if (isHttp(path)) {
  47. // http(s):// 路径新窗口打开
  48. const pindex = path.indexOf("http");
  49. window.open(path.substr(pindex, path.length), "_blank");
  50. } else {
  51. if (query) {
  52. router.push({ path: path, query: JSON.parse(query) });
  53. } else {
  54. router.push(path)
  55. }
  56. }
  57. search.value = ''
  58. options.value = []
  59. nextTick(() => {
  60. show.value = false
  61. })
  62. }
  63. function initFuse(list) {
  64. fuse.value = new Fuse(list, {
  65. shouldSort: true,
  66. threshold: 0.4,
  67. location: 0,
  68. distance: 100,
  69. minMatchCharLength: 1,
  70. keys: [{
  71. name: 'title',
  72. weight: 0.7
  73. }, {
  74. name: 'path',
  75. weight: 0.3
  76. }]
  77. })
  78. }
  79. // Filter out the routes that can be displayed in the sidebar
  80. // And generate the internationalized title
  81. function generateRoutes(routes, basePath = '', prefixTitle = []) {
  82. let res = []
  83. for (const r of routes) {
  84. // skip hidden router
  85. if (r.hidden) { continue }
  86. const p = r.path.length > 0 && r.path[0] === '/' ? r.path : '/' + r.path;
  87. const data = {
  88. path: !isHttp(r.path) ? getNormalPath(basePath + p) : r.path,
  89. title: [...prefixTitle]
  90. }
  91. if (r.meta && r.meta.title) {
  92. data.title = [...data.title, r.meta.title]
  93. if (r.redirect !== 'noRedirect') {
  94. // only push the routes with title
  95. // special case: need to exclude parent router without redirect
  96. res.push(data)
  97. }
  98. }
  99. if (r.query) {
  100. data.query = r.query
  101. }
  102. // recursive child routes
  103. if (r.children) {
  104. const tempRoutes = generateRoutes(r.children, data.path, data.title)
  105. if (tempRoutes.length >= 1) {
  106. res = [...res, ...tempRoutes]
  107. }
  108. }
  109. }
  110. return res
  111. }
  112. function querySearch(query) {
  113. if (query !== '') {
  114. options.value = fuse.value.search(query)
  115. } else {
  116. options.value = []
  117. }
  118. }
  119. onMounted(() => {
  120. searchPool.value = generateRoutes(routes.value);
  121. })
  122. watchEffect(() => {
  123. searchPool.value = generateRoutes(routes.value)
  124. })
  125. watch(show, (value) => {
  126. if (value) {
  127. document.body.addEventListener('click', close)
  128. } else {
  129. document.body.removeEventListener('click', close)
  130. }
  131. })
  132. watch(searchPool, (list) => {
  133. initFuse(list)
  134. })
  135. </script>
  136. <style lang='scss' scoped>
  137. .header-search {
  138. font-size: 0 !important;
  139. .search-icon {
  140. cursor: pointer;
  141. font-size: 18px;
  142. vertical-align: middle;
  143. }
  144. .header-search-select {
  145. font-size: 18px;
  146. transition: width 0.2s;
  147. width: 0;
  148. overflow: hidden;
  149. background: transparent;
  150. border-radius: 0;
  151. display: inline-block;
  152. vertical-align: middle;
  153. :deep(.el-input__inner) {
  154. border-radius: 0;
  155. border: 0;
  156. padding-left: 0;
  157. padding-right: 0;
  158. box-shadow: none !important;
  159. border-bottom: 1px solid #d9d9d9;
  160. vertical-align: middle;
  161. }
  162. }
  163. &.show {
  164. .header-search-select {
  165. width: 210px;
  166. margin-left: 10px;
  167. }
  168. }
  169. }
  170. </style>