From a8714dfba051d268488a2b1482ae22b2b1fa680e Mon Sep 17 00:00:00 2001
From: linfso <linfso@sina.com>
Date: Fri, 28 Jun 2024 09:01:05 +0800
Subject: [PATCH] md

---
 src/components/HeaderSearch/index2.vue   | 239 +++++++++++++++++++++++
 src/components/HeaderSearch/index3.vue   | 230 ++++++++++++++++++++++
 src/layout/components/Sidebar/BizNav.vue | 176 +++++++++++++++++
 3 files changed, 645 insertions(+)
 create mode 100644 src/components/HeaderSearch/index2.vue
 create mode 100644 src/components/HeaderSearch/index3.vue
 create mode 100644 src/layout/components/Sidebar/BizNav.vue

diff --git a/src/components/HeaderSearch/index2.vue b/src/components/HeaderSearch/index2.vue
new file mode 100644
index 00000000..4539a10b
--- /dev/null
+++ b/src/components/HeaderSearch/index2.vue
@@ -0,0 +1,239 @@
+<template>
+    <el-popover
+        ref="popoverRef"
+        width="400"
+        placement="right-bottom"
+        trigger="click"
+        popper-class="quick-menu-popover"
+        :offset="{ x: 10, y: 10 }"
+        :show-arrow="false"
+        :open-delay="500"
+      >
+
+
+      <!-- :popper-options="{ boundariesElement: '.el-form', removeOnDestroy: true }" -->
+
+
+      <!-- effect="light"
+      show-arrow="false" -->
+
+      <div >
+          <el-select
+            ref="headerSearchSelect"
+            v-model="search"
+            :remote-method="querySearch"
+            filterable
+            default-first-option
+            remote
+            placeholder="Search"
+            class="header-search-select"
+            style="width: 100%;"
+            @change="change"
+          >
+            <el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')" />
+          </el-select>
+      </div>
+      <div slot="reference"  >
+        <div>
+          <svg-icon class-name="search-icon" icon-class="search" />
+        </div>
+      </div>
+    </el-popover>
+    <!-- @click.stop="click"  -->
+</template>
+
+<script>
+// fuse is a lightweight fuzzy-search module
+// make search results more in line with expectations
+import Fuse from 'fuse.js/dist/fuse.min.js'
+import path from 'path'
+
+export default {
+name: 'HeaderSearch',
+data() {
+  return {
+    createdId:'0',
+    visible: false,
+    search: '',
+    options: [],
+    searchPool: [],
+    show: false,
+    fuse: undefined
+  }
+},
+computed: {
+  routes() {
+    return this.$store.getters.permission_routes
+  }
+},
+watch: {
+  routes() {
+    this.searchPool = this.generateRoutes(this.routes)
+  },
+  searchPool(list) {
+    this.initFuse(list)
+  },
+  show(value) {
+    if (value) {
+      document.body.addEventListener('click', this.close)
+    } else {
+      document.body.removeEventListener('click', this.close)
+    }
+  }
+},
+mounted() {
+  this.searchPool = this.generateRoutes(this.routes)
+},
+methods: {
+  click() {
+    this.show = !this.show
+    if (this.show) {
+      this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
+    }
+  },
+  close() {
+    this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
+    this.options = []
+    this.show = false
+  },
+  change(val) {
+    const path = val.path;
+    if(this.ishttp(val.path)) {
+      // http(s):// 路径新窗口打开
+      const pindex = path.indexOf("http");
+      window.open(path.substr(pindex, path.length), "_blank");
+    } else {
+      this.$router.push(val.path)
+    }
+    this.search = ''
+    this.options = []
+    this.$nextTick(() => {
+      this.show = false
+    })
+  },
+  initFuse(list) {
+    this.fuse = new Fuse(list, {
+      shouldSort: true,
+      threshold: 0.4,
+      location: 0,
+      distance: 100,
+      maxPatternLength: 32,
+      minMatchCharLength: 1,
+      keys: [{
+        name: 'title',
+        weight: 0.7
+      }, {
+        name: 'path',
+        weight: 0.3
+      }]
+    })
+  },
+  // Filter out the routes that can be displayed in the sidebar
+  // And generate the internationalized title
+  generateRoutes(routes, basePath = '/', prefixTitle = []) {
+    let res = []
+
+    for (const router of routes) {
+      // skip hidden router
+      if (router.hidden) { continue }
+
+      const data = {
+        path: !this.ishttp(router.path) ? path.resolve(basePath, router.path) : router.path,
+        title: [...prefixTitle]
+      }
+
+      if (router.meta && router.meta.title) {
+        data.title = [...data.title, router.meta.title]
+
+        if (router.redirect !== 'noRedirect') {
+          // only push the routes with title
+          // special case: need to exclude parent router without redirect
+          res.push(data)
+        }
+      }
+
+      // recursive child routes
+      if (router.children) {
+        const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
+        if (tempRoutes.length >= 1) {
+          res = [...res, ...tempRoutes]
+        }
+      }
+    }
+    return res
+  },
+  querySearch(query) {
+    if (query !== '') {
+      this.options = this.fuse.search(query)
+    } else {
+      this.options = []
+    }
+  },
+  ishttp(url) {
+    return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
+  }
+}
+}
+</script>
+
+
+<style lang="scss">
+
+.quick-menu-popover {
+  // background-color: #090d29!important;
+  // border-color: #146ebd!important;
+  background-color: #0000001c !important;
+  border-color: #0000 !important;
+  padding: 2px !important;
+}
+
+.quick-menu-popover .el-popover__title {
+  color: white!important;
+}
+.quick-menu-popover .popper__arrow {
+  display:none!important;
+}
+// .quick-menu-popover .popper__arrow::after {
+//   border-top-color: #090d29 !important;
+// }
+
+
+
+.header-search {
+font-size: 0 !important;
+
+.search-icon {
+  cursor: pointer;
+  font-size: 18px;
+  vertical-align: middle;
+}
+
+.header-search-select {
+  font-size: 18px;
+  transition: width 0.2s;
+  width: 0;
+  overflow: hidden;
+  background: transparent;
+  border-radius: 0;
+  display: inline-block;
+  vertical-align: middle;
+
+  :deep .el-input__inner {
+    border-radius: 0;
+    border: 0;
+    padding-left: 0;
+    padding-right: 0;
+    box-shadow: none !important;
+    border-bottom: 1px solid #d9d9d9;
+    vertical-align: middle;
+  }
+}
+
+&.show {
+  .header-search-select {
+    width: 210px;
+    margin-left: 10px;
+  }
+}
+}
+</style>
diff --git a/src/components/HeaderSearch/index3.vue b/src/components/HeaderSearch/index3.vue
new file mode 100644
index 00000000..347d3333
--- /dev/null
+++ b/src/components/HeaderSearch/index3.vue
@@ -0,0 +1,230 @@
+<template>
+      <div >
+          <el-select
+            ref="headerSearchSelect"
+            v-model="search"
+            :remote-method="querySearch"
+            filterable
+            default-first-option
+            remote
+            :placeholder="$t('快速搜索导航')"
+            style="width: 100%;"
+            @change="change"
+          >
+            <el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')" />
+          </el-select>
+          <div style="margin-top: 20px;">
+              <el-button size="mini"  type="text" plain v-for="(quickItem,index) in quickActionList" :key="index" @click="change(quickItem)"><span>{{ quickItem.title }}</span></el-button>
+          </div>
+      </div>
+      <!-- class="header-search-select" -->
+    <!-- @click.stop="click"  -->
+</template>
+
+<script>
+// fuse is a lightweight fuzzy-search module
+// make search results more in line with expectations
+import Fuse from 'fuse.js/dist/fuse.min.js'
+import path from 'path'
+import { listSimpleAction } from "@/api/system/sysActionStats";
+
+export default {
+name: 'HeaderSearch',
+data() {
+  return {
+    createdId:'0',
+    visible: false,
+    search: '',
+    options: [],
+    searchPool: [],
+    show: false,
+    fuse: undefined,
+    quickActionList:[],
+  }
+},
+computed: {
+  routes() {
+    return this.$store.getters.permission_routes
+  }
+},
+watch: {
+  routes() {
+    this.searchPool = this.generateRoutes(this.routes)
+  },
+  searchPool(list) {
+    this.initFuse(list)
+    this.initQuickActionList();
+  },
+  show(value) {
+    if (value) {
+      document.body.addEventListener('click', this.close)
+    } else {
+      document.body.removeEventListener('click', this.close)
+    }
+  }
+},
+mounted() {
+  this.searchPool = this.generateRoutes(this.routes);
+},
+methods: {
+  initQuickActionList() {
+      let queryParams={
+        pageNum: 1,
+        pageSize: 20
+      };
+      listSimpleAction(queryParams).then(response => {
+        this.quickActionList = response.rows;
+      });
+    },
+  click() {
+    this.show = !this.show
+    if (this.show) {
+      this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
+    }
+  },
+  close() {
+    this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
+    this.options = []
+    this.show = false
+  },
+  change(val) {
+    const path = val.path;
+    if(this.ishttp(val.path)) {
+      // http(s):// 路径新窗口打开
+      const pindex = path.indexOf("http");
+      window.open(path.substr(pindex, path.length), "_blank");
+    } else {
+      this.$router.push(val.path)
+    }
+    this.search = ''
+    this.options = []
+    this.$nextTick(() => {
+      this.show = false
+    })
+  },
+  initFuse(list) {
+    this.fuse = new Fuse(list, {
+      shouldSort: true,
+      threshold: 0.4,
+      location: 0,
+      distance: 100,
+      maxPatternLength: 32,
+      minMatchCharLength: 1,
+      keys: [{
+        name: 'title',
+        weight: 0.7
+      }, {
+        name: 'path',
+        weight: 0.3
+      }]
+    })
+  },
+  // Filter out the routes that can be displayed in the sidebar
+  // And generate the internationalized title
+  generateRoutes(routes, basePath = '/', prefixTitle = []) {
+    let res = []
+
+    for (const router of routes) {
+      // skip hidden router
+      if (router.hidden) { continue }
+
+      const data = {
+        path: !this.ishttp(router.path) ? path.resolve(basePath, router.path) : router.path,
+        title: [...prefixTitle]
+      }
+
+      if (router.meta && router.meta.title) {
+        data.title = [...data.title, router.meta.title]
+
+        if (router.redirect !== 'noRedirect') {
+          // only push the routes with title
+          // special case: need to exclude parent router without redirect
+          res.push(data)
+        }
+      }
+
+      // recursive child routes
+      if (router.children) {
+        const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
+        if (tempRoutes.length >= 1) {
+          res = [...res, ...tempRoutes]
+        }
+      }
+    }
+    return res
+  },
+  querySearch(query) {
+    if (query !== '') {
+      this.options = this.fuse.search(query)
+    } else {
+      this.options = []
+    }
+  },
+  ishttp(url) {
+    return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
+  }
+}
+}
+</script>
+
+
+<style lang="scss">
+
+.quick-menu-popover {
+  // background-color: #090d29!important;
+  // border-color: #146ebd!important;
+  background-color: #0000001c !important;
+  border-color: #0000 !important;
+  padding: 2px !important;
+}
+
+.quick-menu-popover .el-popover__title {
+  color: white!important;
+}
+.quick-menu-popover .popper__arrow {
+  display:none!important;
+}
+// .quick-menu-popover .popper__arrow::after {
+//   border-top-color: #090d29 !important;
+// }
+
+
+
+.header-search {
+font-size: 0 !important;
+
+.search-icon {
+  cursor: pointer;
+  font-size: 18px;
+  vertical-align: middle;
+}
+
+.header-search-select {
+  font-size: 18px;
+  transition: width 0.2s;
+  width: 0;
+  overflow: hidden;
+  background: transparent;
+  border-radius: 0;
+  display: inline-block;
+  vertical-align: middle;
+
+  :deep .el-input__inner {
+    border-radius: 0;
+    border: 0;
+    padding-left: 0;
+    padding-right: 0;
+    box-shadow: none !important;
+    border-bottom: 1px solid #d9d9d9;
+    vertical-align: middle;
+  }
+}
+
+&.show {
+  .header-search-select {
+    width: 210px;
+    margin-left: 10px;
+  }
+}
+}
+</style>
diff --git a/src/layout/components/Sidebar/BizNav.vue b/src/layout/components/Sidebar/BizNav.vue
new file mode 100644
index 00000000..32fcef9e
--- /dev/null
+++ b/src/layout/components/Sidebar/BizNav.vue
@@ -0,0 +1,176 @@
+<template>
+  <div>
+    <!-- v-if="domainIdsOptions.length >0" -->
+    <div style="display:inline-flex;width: 100%;justify-content: space-between;padding:0px 10px;border-top: 1px solid #f6f6f6;">
+      <div style="width:100%" >
+        <el-dropdown  @command="onSelectChangeDomainId" v-if="isShowBizNav"  style="width:100%;background: white;height: 34px;line-height: 34px;font-size: 13px;border-radius: 0px 5px 0px 0px;">
+          <div class="el-dropdown-link" style="text-align: left;width:100%">
+            <span v-if="!domainLabel" style="color:lightslategray">快捷导航</span>
+            <span v-else>{{domainLabel}}</span>
+            <i class="el-icon-arrow-down el-icon--right" v-if="domainIdsOptions.length >0"></i>
+          </div>
+          <el-dropdown-menu v-if="domainIdsOptions.length >0"  slot="dropdown">
+              <el-dropdown-item
+                  class="region-item-style"
+                  :command="item.value"
+                  v-for="(item, index) in domainIdsOptions"
+                  :key="index"
+                  :title="item.label"
+                  :class="{'selected':domainId==item.value}"
+                  >
+                  {{ item.label }}
+                  </el-dropdown-item>
+          </el-dropdown-menu>
+          <el-dropdown-menu v-else  slot="dropdown">
+            <div></div>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <div class="quick-tool" style="line-height: 34px;">
+        <el-popover
+
+          placement="right"
+          width="400"
+          trigger="click"
+          ref="popoverRef"
+          effect="light"
+          :show-arrow="false"
+        >
+        <!--
+           ref="popoverRef"
+          width="400"
+          placement="right-bottom"
+          trigger="click"
+          popper-class="quick-menu-popover"
+          :offset="{ x: 10, y: 10 }"
+          :show-arrow="false"
+          :open-delay="500"
+
+        placement="right"
+          width="200"
+          trigger="hover"
+          ref="popoverRef"
+          effect="light"
+          :show-arrow="false"
+           -->
+          <!-- <div style="text-align: center;">
+          </div> -->
+          <search3 id="header-search"/>
+          <span  slot="reference">
+              <i class="icon iconfont icon-icon_menhukuaijiecaidan" ></i>
+          </span>
+        </el-popover>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { constantRoutes } from "@/router";
+import {checkRole} from '@/utils/permission'
+import { listSysDomain } from "@/api/system/domain";
+import Cookies from 'js-cookie'
+import Search3 from '@/components/HeaderSearch/index3'
+
+export default {
+  components: {
+    Search3
+  },
+  data() {
+    return {
+      // 当前激活菜单的 index
+      currentIndex: undefined,
+      domainId:undefined,
+      domainLabel:undefined,
+      domainIdsOptions:[],
+    };
+  },
+  computed: {
+    // 所有的路由信息
+    routers() {
+      return this.$store.state.permission.topbarRouters;
+    },
+  },
+  mounted() {
+    if(checkRole(['admin'])){
+      this.initDomainList();
+    }
+  },
+  methods: {
+    initDomainList() {
+      // 读取 cookie
+      this.domainId=Cookies.get("BIZ_DOMAINID");
+
+      let queryParams = {
+        pageNum: 1,
+        pageSize: 1000
+      }
+
+      listSysDomain(queryParams).then(response => {
+          this.domainIdsOptions.push({value:"-1",label:"全部"})
+          response.rows.forEach(item =>{
+              var optItem={value:item.id,label:item.name};
+              this.domainIdsOptions.push(optItem)
+          });
+
+          if(this.domainId!=undefined){
+            this.onSelectChangeDomainId(this.domainId);
+          }
+      });
+
+    },
+    isShowBizNav() {
+          if(checkRole(['admin'])){
+            return true;
+          }else{
+            return false;
+          }
+    },
+    onSelectChangeDomainId(val){
+      Cookies.set("BIZ_DOMAINID", val)
+      this.domainId=val;
+      if(this.domainId==-1){
+        this.$store.commit("SET_SIDEBAR_ROUTERS", this.routers);
+        this.domainLabel=''
+      }
+      else{
+        for (var i = 0; i < this.domainIdsOptions.length; i++) {
+            if (this.domainIdsOptions[i].value == val) {
+              this.domainLabel = this.domainIdsOptions[i].label;
+            }
+        }
+
+        var routes = [];
+        this.routers.map((item) => {
+            if (this.domainId == item.domainId) {
+              routes.push(item);
+            }
+        });
+        this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.selected{
+  color:red;
+}
+
+.quick-tool {
+  cursor: pointer;
+  padding-right: 8px;
+  i {
+    color:#8493a2;
+    font-size: 20px;
+  }
+
+  i:hover{
+    color: #0027ff;
+    font-weight: 600;
+  }
+}
+
+</style>