SaaS-lib/lib/paas/view/system/layout/start-menu.vue

<!-- @format -->

<template>
  <a class="start-menu-link" @click="showMenu()">
    产品与服务
    <DownOutlined class="nav-item-icon" />
  </a>
  <div class="start-menu">
    <a-drawer
      class="start-menu-box"
      placement="top"
      :closable="false"
      :visible="IfshowMenu"
      :zIndex="90"
      @close="showMenu">
      <div class="menu-search-block">
        <div class="search-block">
          <a-input-search
            v-model:value="searchInput"
            placeholder="通过名称/关键字查找产品（例如：中间件、告警管理等）"
            @search="onSearchMenu"
            class="search-input" />
        </div>
        <div class="search-Tip" v-if="showTip">
          <p class="successTip" v-if="isSuccess == 1"
            >以下是与"<span class="search-key">{{ searchInput }}</span
            >"相关的产品与服务：</p
          >
          <p class="failTip" v-if="isSuccess == 0">
            未找到与"<span class="search-key">{{ searchInput }}</span
            >"相关的产品与服务。
          </p>
        </div>

        <!--改高度，滚动条 -->
        <div class="menu-box">
          <template v-for="(catalog, index) in catalogs" :key="index">
            <div class="menu-block" v-if="catalog.items.length > 0">
              <h5 class="menu-block-title h5">{{ catalog.label }}</h5>

              <ul class="menu-block-container">
                <li
                  class="menu-block-item"
                  v-for="(item, ind) in catalog.items"
                  :key="ind"
                  @click="onDockCatalogItem(item)">
                  <i class="iconfont h3 item-icon" v-html="item.icon"></i>
                  <span>{{ item.label }}</span>

                  <i class="iconfont tip-icon" :class="{ active: item.dock }">&#xe61f;</i>
                </li>
              </ul>
            </div>
          </template>
        </div>
      </div>
    </a-drawer>
  </div>
</template>

<script lang="ts">
  import { defineComponent, inject } from 'vue';
  import { DownOutlined } from '@ant-design/icons-vue';

  import { CatalogConfigService, CatalogItem } from '/nerv-lib/paas/store/modules/catalog-config';
  import { authorizationService } from '/nerv-lib/paas/store/modules/authorization-service';
  import { cloneDeep } from 'lodash-es';
  //   import { useRouter } from 'vue-router';
  //   import { http } from '/nerv-lib/util/http';
  //   import { message } from 'ant-design-vue';
  //   import Cookies from 'js-cookie';
  export default defineComponent({
    name: 'NsStartMenu',
    components: { DownOutlined },
    props: {},
    setup: () => {
      //提供provide
      const selecDocks = inject('selecDocks');

      return {
        selecDocks,
      };
    },
    data(): {
      IfshowMenu: boolean;
      showTip: boolean;
      searchInput: any;
      isSuccess: number;
      catalogsTemp: Array<any>;
      catalogs: Array<any>;
    } {
      return {
        IfshowMenu: false,
        showTip: false,
        searchInput: '',
        isSuccess: 0,
        catalogsTemp: [],
        catalogs: [],
      };
    },
    mounted() {
      const catalogConfigService = CatalogConfigService();
      const authService = authorizationService();
      catalogConfigService.$subscribe((_mutation, state) => {
        const { data } = state;
        this.catalogs = cloneDeep(data);
        if (!data) return;
        this.catalogs.forEach((cate: any) => {
          if (cate.items) {
            cate.items = cate.items.filter((m1: any) => {
              if (m1['splitMenuModule']) {
                return authService.exists(m1['splitMenuModule'], m1['name']);
              } else if (m1['splitModule']) {
                return false;
              } else {
                return authService.exists(m1['name']);
              }
            });
          }
        });
        this.catalogsTemp = this.catalogs;
      });
    },
    methods: {
      showMenu() {
        this.IfshowMenu = !this.IfshowMenu;
      },
      onSearchMenu() {
        let catalogs: any[] = [];
        let searchStr = '';
        searchStr = this.searchInput;
        this.catalogs = JSON.parse(JSON.stringify(this.catalogsTemp));
        if (searchStr == '') {
          this.showTip = false;
          return;
        }
        let reg = new RegExp(searchStr, 'i');
        this.showTip = true;
        this.catalogs.forEach((it: any) => {
          if (reg.test(it.label)) {
            catalogs.push(it);
          }
          if (!reg.test(it.label)) {
            let items: any[] = [];
            it.items.forEach((subIt: any) => {
              if (reg.test(subIt.label)) {
                items.push(subIt);
              }
            });
            if (items.length != 0) {
              let catalogItem: any = {};
              catalogItem['name'] = it.name;
              catalogItem['label'] = it.label;
              catalogItem['items'] = items;
              catalogs.push(catalogItem);
            }
          }
        });
        this.catalogs = catalogs;
        if (catalogs.length == 0) {
          this.isSuccess = 0;
        } else {
          this.isSuccess = 1;
        }
      },
      onDockCatalogItem(item: CatalogItem): void {
        item.dock = !item.dock;
        (this.selecDocks as Function)(item);
        // this.eventDockCatalogItem.emit(item);
      },
    },
  });
</script>

<style lang="less">
  .start-menu-link {
    color: @layout-header-color;
    &:hover {
      color: @layout-header-color;
    }
  }

  .start-menu {
    .title {
      margin-left: 16px;
      margin-bottom: 0px;
      cursor: pointer;
      user-select: none;

      span {
        font-size: 12px;
      }

      .doorway {
        margin: 0 8px;
        color: #808d96 !important;
        width: 12px !important;
        height: 12px !important;
      }

      .active {
        transform: rotateX(180deg);
      }
    }

    .menu-tip {
      position: absolute;
      z-index: 99;
      // background-color: #fff;
      width: 100%;
      //overflow-y: auto;
      height: 722px;
      left: 48px;
      width: 100%;

      .mask {
        // position: absolute;
        // left: 0px;
        // right: 0px;
        // top: 49px;
        background: rgba(0, 0, 0, 0.5);
        height: 2000px;
        width: 40%;
        z-index: 98;
      }
    }
  }

  ul,
  li {
    list-style: none;
    padding: 0;
  }

  .nav-item-icon {
    font-size: 10px;
  }

  .start-menu-box {
    :deep(.ant-drawer-content-wrapper) {
      width: 70%;
    }
  }
</style>