cloud-web-corejs 1.1.0-dev.6 → 1.1.0-dev.61

package/src/layout/components/Sidebar/default.vue

@@ -1,1655 +1,1656 @@
-<template>
-  <div :class="{ 'has-logo': showLogo, telescopMenu: !isMenu }">
-    <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
-
-    <div class="hamburger-box" ref="hamhurger" @click="openUserInfo">
-      <!-- <hamburger :is-active="sidebar.opened" @toggleClick="toggleSideBar" /> -->
-      <div>
-        <p class="name">
-          <i class="iconfont icon-ziyuan"></i
-          ><span>{{ userInfo.nickName }}</span>
-        </p>
-      </div>
-    </div>
-    <div class="business-name" ref="business">
-      <el-tooltip
-        :enterable="false"
-        effect="dark"
-        :content="companyInfo.companyName"
-        :placement="direction"
-      >
-        <p v-show="getMenuFlag()">{{ companyInfo.companyName }}</p>
-      </el-tooltip>
-    </div>
-    <div
-      class="fase-box"
-      ref="fase"
-      @mouseleave="$emit('selfClose')"
-      @mouseenter="$emit('selfEnter')"
-    >
-      <langTool v-if="getMenuFlag()"></langTool>
-      <div class="item" @click="openCompanyDialog" v-if="getMenuFlag()">
-        <el-tooltip
-          :enterable="false"
-          effect="dark"
-          :content="$t1('切换组织')"
-          :placement="direction"
-        >
-          <i class="el-icon-set-up" />
-        </el-tooltip>
-      </div>
-      <div class="item" v-if="getMenuFlag()">
-        <el-tooltip
-          :enterable="false"
-          effect="dark"
-          :content="$t1('流程待办')"
-          :placement="direction"
-        >
-          <i
-            class="iconfont icon-liuchengdaiban"
-            @click="$router.push('/basic/wf/wf_manage/list')"
-          />
-        </el-tooltip>
-      </div>
-      <div class="item" v-if="isDev && isBdAdmin">
-        <el-tooltip
-          :enterable="false"
-          effect="dark"
-          :content="$t1('获取提取码')"
-          :placement="direction"
-        >
-          <i
-            class="el-icon-setting"
-            @click="showExtractedCodeCreateDialog = true"
-          />
-        </el-tooltip>
-      </div>
-      <div class="item" v-if="isBdAdmin">
-        <el-tooltip
-          :enterable="false"
-          effect="dark"
-          :content="$t1('查看提取码')"
-          :placement="direction"
-        >
-          <i
-            class="el-icon-tickets"
-            @click="showExtractedCodeQueryDialog = true"
-          />
-        </el-tooltip>
-      </div>
-
-      <div class="item" @click="logout()">
-        <el-tooltip
-          :enterable="false"
-          effect="dark"
-          :content="$t1('退出')"
-          :placement="direction"
-        >
-          <i class="el-icon-switch-button" />
-        </el-tooltip>
-      </div>
-    </div>
-    <template v-for="router1 in viewRouter">
-      <template v-for="router2 in router1.children">
-        <div
-          class="second-list"
-          :key="router1.id + 't' + router2.id"
-          :class="{ on: router2.id == nowNavID }"
-          @mouseenter="stopFlag = 1"
-          @mouseleave="showNav()"
-          v-show="router2.id == nowNavID"
-          :ref="'seconMenus' + router2.id"
-        >
-          <i class="ico-arrow"></i>
-          <div>
-            <div class="tit">
-              <i :class="getMenuClass(router2, 2)"></i
-              ><span>{{ getMenuName(router2) }}</span>
-            </div>
-            <dl
-              v-for="(router3, index3) in router2.children"
-              :key="'router3' + index3"
-            >
-              <div
-                class="item"
-                v-if="!router3.hidden"
-                @click="rourteTo(router3, router1)"
-              >
-                <!--<i class="el-icon-caret-right"></i>-->
-                <i :class="getMenuClass(router3, 3)"></i>
-                <a>{{ getMenuName(router3) }}</a>
-              </div>
-            </dl>
-          </div>
-        </div>
-      </template>
-    </template>
-    <el-menu
-      class="menu-box"
-      :class="{ 'lang-zh': $i18n.locale == 'zh' }"
-      text-color="#fff"
-      active-text-color="#fff"
-      :unique-opened="true"
-      @mouseleave="showNav()"
-      ref="seconMenus"
-      :collapse="!isMenu"
-    >
-      <el-scrollbar wrap-class="scrollbar-wrapper" id="menuUl">
-        <component
-          v-for="menuModule in menuModules"
-          :is="getMenuType(menuModule)"
-          :index="'' + menuModule.id"
-          :key="'menuModule' + menuModule.id"
-          @click.native="rourteTo(menuModule)"
-        >
-          <i
-            :class="getMenuClass(menuModule, 1)"
-            v-if="menuModule.children.length <= 0"
-          ></i>
-          <template slot="title">
-            <i
-              :class="getMenuClass(menuModule, 1)"
-              v-if="menuModule.children.length > 0"
-            ></i>
-            <span>{{ getMenuName(menuModule) }}</span>
-          </template>
-          <component
-            v-for="(router2, index1) in menuModule.children"
-            :is="getMenuType(router2)"
-            :key="index1"
-            :index="'' + router2.id"
-            @mouseenter.native="showNav(router2, $event)"
-            @mouseleave.native="showNav()"
-            @click="rourteTo(router2)"
-          >
-            <template slot="title">
-              <i :class="getMenuClass(router2, 2)"></i>
-              <span>{{ getMenuName(router2) }}</span>
-            </template>
-            <el-menu-item
-              v-for="(router3, index3) in router2.children"
-              :key="index3"
-              :index="'' + router3.id"
-              @click="rourteTo(router3)"
-            >
-              <template slot="title">
-                <i :class="getMenuClass(router3, 3)"></i>
-                <span>{{ getMenuName(router3) }}</span>
-              </template>
-            </el-menu-item>
-          </component>
-        </component>
-        <!-- <el-menu-item
-          @click.native="openCreateCompanyDialog"
-          index="xx"
-          v-if="isFormDev"
-        >
-          <template slot="title">
-            <i :class="getMenuClass({}, 1)"></i>
-            <span>新建企业</span>
-          </template>
-        </el-menu-item> -->
-      </el-scrollbar>
-    </el-menu>
-    <div class="menu-btn">
-      <i class="el-icon-arrow-up" @click="toUpMove()"></i>
-      <i class="el-icon-arrow-down" @click="toDownMove()"></i>
-    </div>
-    <div
-      id="tta"
-      style="
-        position: absolute;
-        height: 100%;
-        top: 0;
-        right: 0;
-        z-index: 9999;
-        width: 800px;
-        left: 100%;
-      "
-      v-if="showMenuModal"
-    ></div>
-    <el-dialog
-      :title="$t1('切换组织')"
-      width="355px"
-      custom-class="dialog-style list-dialog"
-      v-if="showCompanyDialog"
-      :visible.sync="showCompanyDialog"
-      :append-to-body="true"
-      :modal-append-to-body="true"
-      :close-on-click-modal="false"
-      v-el-drag-dialog
-      v-el-dialog-center
-      @close="changeCompanyClose"
-    >
-      <div class="cont">
-        <el-input
-          :placeholder="$t1('搜索')"
-          class="search-btn"
-          v-model="filterText"
-        ></el-input>
-        <el-tree
-          :props="defaultProps"
-          :load="loadNode"
-          node-key="id"
-          ref="tree"
-          highlight-current
-          lazy
-          :expand-on-click-node="true"
-          @node-click="handleNodeClick"
-          class="organization-tree"
-          icon-class="el-icon-arrow-right"
-          :filter-node-method="filterNode"
-        ></el-tree>
-      </div>
-      <!-- <span slot="footer" class="dialog-footer">
-				<el-button type="primary" plain class="button-sty" @click="changeCompanyClose">
-					<i class="el-icon-close el-icon"></i>
-					取 消
-				</el-button>
-				<el-button type="primary" @click="changeCompany" class="button-sty">
-					<i class="el-icon-check el-icon"></i>
-					确 定
-				</el-button>
-			</span> -->
-    </el-dialog>
-
-    <!--    <infoIframeDialog v-if="showInfoIframeDialog" :visiable.sync="showInfoIframeDialog"
-                          :dataId="userInfo.id"></infoIframeDialog>-->
-    <userInfo
-      v-if="!isFormDev && showUserInfoDialog"
-      :visiable.sync="showUserInfoDialog"
-      :_dataId="userInfo.id"
-      topValue="128px"
-      @reload="userInfoReload"
-    ></userInfo>
-    <userFormInfo
-      v-if="isFormDev && showUserInfoDialog"
-      :visiable.sync="showUserInfoDialog"
-      :_dataId="userInfo.id"
-      topValue="128px"
-      @reload="userInfoReload"
-    ></userFormInfo>
-    <onlineTalk></onlineTalk>
-    <extractedCodeCreateDialog
-      v-if="showExtractedCodeCreateDialog"
-      :visiable.sync="showExtractedCodeCreateDialog"
-    ></extractedCodeCreateDialog>
-    <extractedCodeQueryDialog
-      v-if="showExtractedCodeQueryDialog"
-      :visiable.sync="showExtractedCodeQueryDialog"
-    ></extractedCodeQueryDialog>
-    <createCompanyDialog
-      v-if="showCreateCompanyDialog"
-      :visiable.sync="showCreateCompanyDialog"
-    ></createCompanyDialog>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from "vuex";
-import variables from "@/styles/variables.scss";
-import userInfo from "@base/views/user/user/info.vue";
-import userFormInfo from "@base/views/user/user/form_info.vue";
-import onlineTalk from "@base/components/onlineTalk";
-import { getToken } from "@base/utils/auth";
-import indexUtil from "@base/utils/index.js";
-import langTool from "../langTool.vue";
-import { initPddLog } from "@base/utils/pddLog";
-
-import extractedCodeCreateDialog from "../extractedCode/createDialog.vue";
-import extractedCodeQueryDialog from "../extractedCode/queryDialog.vue";
-import { getBdFlag } from "@base/api/user";
-import createCompanyDialog from "@base/layout/components/createCompany/createCompanyDialog.vue";
-
-export default {
-  props: {
-    option: Object,
-    isMenu: {
-      type: Boolean,
-    },
-  },
-  components: {
-    userInfo,
-    userFormInfo,
-    onlineTalk,
-    langTool,
-    extractedCodeCreateDialog,
-    extractedCodeQueryDialog,
-    createCompanyDialog,
-  },
-  data() {
-    return {
-      direction: "bottom",
-      defaultOpenedsArray: [],
-      viewRouter: [],
-      showMenuModal: false,
-      menuheight: {
-        height: "",
-      },
-      defaultProps: {
-        label: "label", //这里是树结构中需显示的数据（即接口返回的需展示在页面上的参数）
-        children: [],
-        isLeaf: "leaf",
-      },
-      filterText: null,
-      showCompanyDialog: false,
-      choose_company_info: "",
-      userInfo: {},
-      companyInfo: {},
-      showUserInfoDialog: false,
-      hoverStatus: false,
-      nowNavID: "null",
-      stopFlag: 0,
-      showInfoIframeDialog: false,
-      currentMenu: null,
-      menuModules: [],
-      firstMenuHeight: 0, // 第一个菜单的高度
-      eveyMenuHeight: 48, // 每一个菜单的高度
-      isFormDev: false,
-
-      showExtractedCodeCreateDialog: false,
-      showExtractedCodeQueryDialog: false,
-      isDev: false,
-      showCreateCompanyDialog: false,
-    };
-  },
-  computed: {
-    ...mapGetters([
-      "permission_routes",
-      "sidebar",
-      "sidebarRouters",
-      "isBdAdmin",
-      "userFlag",
-    ]),
-    activeMenu() {
-      const route = this.$route;
-      const { meta, path } = route;
-      // if set path, the sidebar will highlight the path you set
-      if (meta.activeMenu) {
-        return meta.activeMenu;
-      }
-      return path;
-    },
-    showLogo() {
-      return this.$store.state.settings.sidebarLogo;
-    },
-    variables() {
-      return variables;
-    },
-    /*isCollapse() {
-      if (this.sidebar.opened) {
-        this.direction = 'bottom';
-      } else {
-        this.direction = 'right-start';
-      }
-      return !this.sidebar.opened;
-    }*/
-  },
-  watch: {
-    filterText(val) {
-      this.$refs.tree.filter(val);
-    },
-  },
-  created() {
-    indexUtil.initI18nMessage("menus");
-  },
-  mounted() {
-    this.getUserInfo();
-    setTimeout(() => {
-      this.filterRoute();
-    }, 100);
-    this.countHeight();
-    let query = this.$route.query;
-    if (query && query.flag == 1) {
-      this.showCompanyDialog = true;
-    }
-    initPddLog(); //初始化拼多多日志
-    this.initIsFormDev();
-    this.getBdEnv();
-  },
-  methods: {
-    getMenuType(item) {
-      if (item.children && item.children.length > 0) {
-        return "el-submenu";
-      } else {
-        return "el-menu-item";
-      }
-    },
-    getBdEnv() {
-      getBdFlag({
-        success: (res) => {
-          this.isDev = res.objx == 1;
-        },
-      });
-    },
-    initIsFormDev() {
-      let userFlag = this.userFlag;
-      this.isFormDev = userFlag == 6 || userFlag == 7 || userFlag == 8;
-    },
-    getMenuFlag() {
-      return !this.isBdAdmin;
-    },
-    getMenuName(item) {
-      let locale = this.$i18n?.locale;
-      let zhTitle = item.meta ? item.meta.title : "";
-      let enTitle = item.meta ? item.meta.enTitle : "";
-      let title;
-      if (locale == "en") {
-        title = enTitle || zhTitle;
-      } else {
-        title = zhTitle;
-      }
-      if (!enTitle || locale !== "en") {
-        title = zhTitle;
-      }
-      if (this.$t1) {
-        title = this.$t1(title);
-      }
-
-      return title;
-    },
-    jumpOutLink(route) {
-      let path = route.url || route.path;
-      if (route.type == 4 && path) {
-        let params = this.getCustomReqUrlAndCleanUrl(path);
-        let reqUrl = params.custom_req_url;
-        if (reqUrl) {
-          this.$http({
-            url: reqUrl,
-            method: `post`,
-            data: { thirdUrl: params.newUrl },
-            isLoading: true,
-            success: (res) => {
-              path = res.objx;
-              window.open(path);
-            },
-          });
-        } else {
-          if (path.indexOf("token={token}") >= 0) {
-            path = path.replace("token={token}", "token=" + getToken());
-          }
-          window.open(path);
-        }
-      }
-    },
-    getCustomReqUrlAndCleanUrl(url) {
-      // 直接使用正则表达式匹配
-      const match = url.match(/[?&]custom_req_url=([^&?#]+)/);
-      if (match) {
-        const customReqUrl = decodeURIComponent(match[1]);
-        // 移除匹配到的参数部分
-        const newUrl = url.replace(
-          match[0],
-          match[0].startsWith("?") ? "?" : ""
-        );
-
-        return {
-          custom_req_url: customReqUrl,
-          newUrl: newUrl.replace(/\?$/, "").replace(/\?&/, "?"),
-        };
-      }
-
-      return {
-        custom_req_url: "",
-        newUrl: url,
-      };
-    },
-    changeModules(row, cRow) {
-      if (!row.route) return;
-      localStorage.setItem("currentMenuId", row.id);
-      let route = row.route ? "/" + row.route : "";
-      sessionStorage.setItem("reUrl", cRow.path);
-      sessionStorage.setItem("reCid", row.id);
-      location.href = route + "/index.html/#/home";
-
-      // location.reload();
-    },
-    filterRoute() {
-      var oldRoutes = JSON.parse(JSON.stringify(this.sidebarRouters));
-      var nRoute1s = [];
-      oldRoutes.forEach((route1, index1) => {
-        let nRoute2s = [];
-        if (!route1.hidden) {
-          route1.children.forEach((route2, index2) => {
-            let nRoute3s = [];
-            if (!route2.hidden) {
-              route2.children.forEach((route3, index3) => {
-                if (!route3.hidden) {
-                  nRoute3s.push(route3);
-                }
-              });
-            }
-            if (route2.type == 4 || route2.url || nRoute3s.length > 0) {
-              route2.children = nRoute3s;
-              nRoute2s.push(route2);
-            }
-          });
-        }
-        if (route1.type == 4 || route1.url || nRoute2s.length > 0) {
-          route1.children = nRoute2s;
-          nRoute1s.push(route1);
-        }
-      });
-      this.viewRouter = nRoute1s || [];
-      this.menuModules = nRoute1s || [];
-
-      let reUrl = sessionStorage.getItem("reUrl");
-      let reCid = sessionStorage.getItem("reCid");
-      if (reUrl) {
-        this.$nextTick(() => {
-          this.$refs.seconMenus.open(reCid);
-        });
-        this.$router.push(reUrl);
-        sessionStorage.removeItem("reUrl");
-        sessionStorage.removeItem("reCid");
-      }
-    },
-    filterRoute1() {
-      var oldRoutes = JSON.parse(JSON.stringify(this.sidebarRouters));
-      var nRoute1s = [];
-      oldRoutes.forEach((route1, index1) => {
-        let nRoute2s = [];
-        if (!route1.hidden && route1.route) {
-          route1.children.forEach((route2, index2) => {
-            let nRoute3s = [];
-            if (!route2.hidden) {
-              route2.children.forEach((route3, index3) => {
-                if (!route3.hidden) {
-                  nRoute3s.push(route3);
-                }
-              });
-            }
-            if (nRoute3s.length > 0) {
-              route2.children = nRoute3s;
-              nRoute2s.push(route2);
-            }
-          });
-        }
-        if (nRoute2s.length > 0) {
-          route1.children = nRoute2s;
-          nRoute1s.push(route1);
-        }
-      });
-      let rows = nRoute1s;
-      if (rows.length) {
-        let currentMenu;
-        if (nRoute1s.length) {
-          var currentMenuId = localStorage.getItem("currentMenuId");
-          if (currentMenuId) {
-            currentMenu = nRoute1s.find((row) => row.id == currentMenuId);
-          }
-          if (!currentMenu) {
-            currentMenu = nRoute1s[0];
-          }
-          this.viewRouter = currentMenu.children;
-        }
-        this.currentMenu = currentMenu;
-        this.menuModules = rows || [];
-
-        /*if (currentMenu) {
-          if (currentMenu.route != WEB_PREFIX.substring(1, WEB_PREFIX.length)) {
-            this.changeModules(currentMenu, 1);
-          } else {
-            localStorage.setItem('currentMenuId', currentMenu.id);
-          }
-        } else {
-          localStorage.removeItem('currentMenuId');
-        }*/
-      }
-    },
-    rourteTo(route) {
-      let path = route.url || route.path;
-      if (!path) {
-        return;
-      }
-      this.showMenuModal = true;
-      setTimeout(() => {
-        this.showMenuModal = false;
-      }, 200);
-      try {
-        if (route.linkType == 4) {
-          this.jumpOutLink(route);
-        } else if (route.linkType == 3) {
-          this.$router.push({
-            path: path,
-            query: { url: route.outLink, route: route.route },
-          });
-        } else {
-          // 通用打开：可重复时附加唯一标识生成独立标签页
-          this.$openView(path, route);
-        }
-      } catch (e) {
-        console.error(e);
-      }
-    },
-    logout() {
-      this.$store.dispatch("user/logout2").then((res) => {
-        this.$router.push(`/login?redirect=${this.$route.fullPath}`);
-      });
-    },
-    toggleSideBar() {
-      this.$store.dispatch("app/toggleSideBar");
-    },
-    countHeight() {
-      var h =
-        this.$refs.hamhurger.offsetHeight +
-        this.$refs.fase.offsetHeight +
-        this.$refs.business.offsetHeight;
-      this.menuheight.height = window.innerHeight - h + "px";
-    },
-    handleNodeClick(data, node, v) {
-      if (!data.hasChild) {
-        this.choose_company_info = data;
-        this.changeCompany();
-      } else {
-        this.choose_company_info = {};
-      }
-    },
-    // 异步树叶子节点懒加载逻辑
-    loadNode(node, resolve) {
-      let companyCode =
-        node && node.data && node.data.companyCode
-          ? node.data.companyCode || ""
-          : "";
-      let url = !companyCode
-        ? USER_PREFIX + "/user_company_info/getAllList"
-        : USER_PREFIX + "/user_company_info/getChildren";
-
-      this.$http({
-        url: url,
-        method: "post",
-        data: {
-          parentCompanyCode: companyCode,
-        },
-        success: (res) => {
-          let datas = res.objx || [];
-          let parentLabel = companyCode ? node.label : null;
-          datas.forEach((item) => {
-            item.leaf = !item.hasChild;
-            let label = this.$t1(item.companyName);
-            /*if(companyCode){
-              label = label + '('+companyTypeMap[item.companyType]+')'
-            }*/
-            item.label = label;
-            item.parentLabel = parentLabel;
-          });
-
-          if (node.level === 0) {
-            if (datas.length > 0 && datas[0].hasChild) {
-              this.$nextTick(() => {
-                let nodedata = node.childNodes[0];
-                nodedata.expanded = true;
-                nodedata.loadData();
-              });
-            }
-          }
-          resolve(datas);
-        },
-      });
-    },
-    filterNode(value, data) {
-      if (!value) return true;
-      let flag1 = data.label.indexOf(value) !== -1;
-      let flag2 = data.parentLabel && data.parentLabel.indexOf(value) !== -1;
-      return flag1 || flag2;
-    },
-    openCompanyDialog() {
-      this.filterText = null;
-      this.showCompanyDialog = true;
-    },
-    getWebPrefix(callback) {
-      this.$http({
-        url: USER_PREFIX + "/auth/getWebPrefix",
-        method: `post`,
-        data: {},
-        isLoading: true,
-        success: (res) => {
-          let webPrefix = res.objx;
-          callback && callback(webPrefix);
-        },
-      });
-    },
-    changeCompany() {
-      let row = this.choose_company_info;
-      let query = this.$route.query;
-      let flag = query && query.flag == 1 ? 1 : null;
-      this.showCompanyDialog = false;
-      if (row && row.companyCode) {
-        this.$baseLoading({ target: document.body, fullscreen: true });
-        this.$http({
-          url: USER_PREFIX + "/auth/switchCompany",
-          method: "post",
-          data: { stringOne: row.companyCode },
-          isLoading: true,
-          success: (res) => {
-            this.getWebPrefix((prefix) => {
-              let webPrefix = prefix ? "/" + prefix : window.MAIN_WEB_PREFIX;
-              sessionStorage.removeItem("out-token");
-              this.$store.dispatch("user/changeCompanyInfo", row);
-              this.$store.dispatch("tagsView/delAllViews");
-              window.location.href = webPrefix + "/index.html";
-            });
-          },
-        });
-      } else {
-        if (flag == 1) {
-          this.$router.push({
-            path: "/",
-          });
-        }
-      }
-    },
-    changeCompanyClose() {
-      let query = this.$route.query;
-      let flag = query && query.flag == 1 ? 1 : null;
-      if (flag == 1) {
-        this.$router.push({
-          path: "/",
-        });
-      }
-      this.showCompanyDialog = false;
-    },
-    getUserInfo() {
-      this.$http({
-        url: USER_PREFIX + "/user/currentUser",
-        method: "post",
-        success: (res) => {
-          let userInfo = res.objx;
-          this.headPhotoUrl = userInfo.headPhotoUrl
-            ? userInfo.headPhotoUrl
-            : (require("@/resources/images/default-header.png").default || require("@/resources/images/default-header.png"));
-          this.userInfo = userInfo;
-        },
-      });
-
-      this.$http({
-        url: USER_PREFIX + "/company_info/getCurrent",
-        method: `post`,
-        success: (res) => {
-          this.companyInfo = res.objx || {};
-        },
-      });
-    },
-    openUserInfo() {
-      this.showUserInfoDialog = true;
-      // this.showInfoIframeDialog = true;
-    },
-    userInfoReload() {
-      this.showUserInfoDialog = true;
-    },
-    showNav(route, event) {
-      if (!this.isMenu) return;
-      let id = route && route.id ? route.id : null;
-      if (id != null) {
-        if (!route.children || !route.children.length) {
-          return;
-        }
-        this.stopFlag = 1;
-        this.nowNavID = id;
-        this.$nextTick(() => {
-          var wh = window.innerHeight;
-          let dom = event.target;
-          let domAttr = dom.getBoundingClientRect();
-          // var sh1 = dom.offsetTop;
-          var sh1 = domAttr.top + 5;
-          let $snav = this.$refs["seconMenus" + id][0];
-          let snavAttr = $snav.getBoundingClientRect();
-
-          // var sh2 = $snav.outerHeight;
-          var sh2 = snavAttr.height;
-          var sh = wh - (sh1 + sh2);
-
-          var hd = 20;
-          var xhd = sh - hd; //移动距离+固定值
-          if (sh >= 0) {
-            $snav.style["margin-top"] = sh1 + "px";
-          } else if (sh < 0) {
-            let bd = sh1 + sh;
-
-            $snav.style["margin-top"] = bd + "px";
-            $snav.querySelector(".ico-arrow").style["margin-top"] =
-              sh1 - bd + "px";
-          }
-        });
-      } else {
-        this.stopFlag = 0;
-        setTimeout(() => {
-          if (this.stopFlag == 0) {
-            this.nowNavID = id;
-          }
-        }, 200);
-      }
-    },
-    jumpTo(row, firstRow) {
-      let route = firstRow.route ? "/" + firstRow.route : "";
-      if (route == WEB_PREFIX) {
-        this.$router.push({
-          path: row.path,
-        });
-      } else {
-        this.changeModules(firstRow, row);
-      }
-    },
-    toDownMove() {
-      let containter = document
-        .getElementById("menuUl")
-        .querySelector(".scrollbar-wrapper");
-      let menuscrollTop = containter.scrollTop;
-      let scrollHeight = containter.scrollHeight;
-      let val = menuscrollTop + this.eveyMenuHeight;
-      if (val < scrollHeight) {
-        containter.scrollTop = val;
-      } else {
-        containter.scrollTop = scrollHeight;
-      }
-    },
-    toUpMove() {
-      let containter = document
-        .getElementById("menuUl")
-        .querySelector(".scrollbar-wrapper");
-      let menuscrollTop = containter.scrollTop;
-      let val = menuscrollTop - this.eveyMenuHeight;
-      if (val > 0) {
-        containter.scrollTop = val;
-      } else {
-        containter.scrollTop = 0;
-      }
-    },
-    getMenuClass(menu, flag) {
-      let res = "";
-      if (menu.menuImg) {
-        res = "iconfont " + menu.menuImg;
-      } else if (flag == 1) {
-        res = "iconfont icon-jinggao"; //一级默认图标
-      } else if (flag == 2) {
-        res = "iconfont icon-circle"; //二级默认图标
-      } else if (flag == 3) {
-        res = "iconfont icon-thirdMemu"; //三级级默认图标
-      }
-
-      if (flag == 2) {
-        if (menu.id == this.nowNavID) {
-          res += " on";
-        }
-      }
-      return res;
-    },
-    openCreateCompanyDialog() {
-      this.showCreateCompanyDialog = true;
-    },
-    confirmCreateCompanyDialog() {
-      this.showCreateCompanyDialog = false;
-    },
-  },
-};
-</script>
-<style lang="scss">
-@import "~@/styles/variables.scss";
-
-.hamburger-box {
-  background-color: #0000004d;
-  height: 42px;
-  /* line-height: 30px; */
-  text-align: center;
-  /* box-shadow: 0 2px 6px rgb(0 0 0 / 10%); */
-  position: relative;
-  z-index: 2;
-  overflow: hidden;
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.65);
-
-  > div {
-    color: #fff;
-    font-size: 13px;
-    margin-bottom: 4px;
-    cursor: pointer;
-    height: 36px;
-    border-radius: 7px;
-    margin: 6px 10px 6px 8px;
-    overflow: hidden;
-    background: #2a6494;
-  }
-
-  p {
-    color: #fff;
-    font-size: 13px;
-    margin-bottom: 4px;
-    cursor: pointer;
-    /* border: solid 1px #ffffff61; */
-    display: block;
-    line-height: 27px;
-    /* width: 88%; */
-    margin-top: 6px;
-    border-radius: 7px;
-    margin: 6px 10px 6px 8px;
-    background: #2a6494;
-
-    i {
-      font-size: 14px;
-      vertical-align: middle;
-      margin: 0 4px 0 6px;
-      height: 36px;
-      line-height: 36px;
-      width: 21px;
-    }
-
-    span {
-      width: 94px;
-      display: table-cell;
-      height: 32px;
-      word-break: break-word;
-      line-height: 16px;
-      overflow: hidden;
-      vertical-align: middle;
-      white-space: nowrap;
-    }
-
-    &.name {
-      display: table-row;
-      margin: 0;
-    }
-  }
-}
-
-.business-name {
-  height: 47px;
-  color: #ffffffb8;
-  background: #0000004d;
-  /* padding-top: 12px; */
-  font-size: 12px;
-  /* padding-left: 5px; */
-  display: table-cell;
-  vertical-align: middle;
-  width: 140px;
-  padding: 6px 10px;
-  text-align: center;
-
-  p {
-    margin: 0;
-    display: -webkit-box;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-  }
-}
-
-.fase-box {
-  color: #fff;
-  /* border-bottom: solid 1px rgba(255, 255, 255, 0.12); */
-  border-top: solid 1px rgba(255, 255, 255, 0.12);
-  background: #225076;
-  padding: 4px 0 8px;
-  width: 100%;
-  z-index: 999;
-  position: relative;
-  /* display: flex;*/
-  //text-align: left !important;
-  // &:hover {
-  // 	color: $baseColor;
-  // 	background-color: #fbfdfe;
-  // 	.fase-list {
-  // 		display: block;
-  // 	}
-  // }
-  .item {
-    flex: 1;
-    text-align: center;
-    font-size: 16px;
-    height: 40px;
-    line-height: 40px;
-    cursor: pointer;
-    display: inline-block;
-    min-width: 30px;
-  }
-
-  .fase-list {
-    position: absolute;
-    left: 100%;
-    color: $baseColor;
-    background-color: #fbfdfe;
-    border: solid 1px $baseColor;
-    border-left: none;
-    top: -0.5px;
-    padding: 10px 0 10px 24px;
-    height: 43px;
-    width: 413px;
-    display: none;
-
-    .l-item {
-      display: inline-block;
-      font-size: 12px;
-      margin-right: 36px;
-      line-height: 20px;
-      cursor: pointer;
-
-      i {
-        vertical-align: middle;
-        margin-right: 4px;
-        font-size: 15px;
-        margin-bottom: 2px;
-      }
-
-      &:hover {
-        border-bottom: solid 1px $baseColor;
-      }
-    }
-  }
-}
-
-.openSidebar .fase-box {
-  text-align: center;
-  //padding: 0;
-}
-
-#app .sidebar-container {
-  overflow: visible;
-  z-index: 1003;
-
-  &.hover {
-    z-index: 1003;
-  }
-
-  &.hover1 .fase-box {
-    width: 138px;
-    color: $baseColor;
-    background-color: #fbfdfe;
-    border-color: $baseColor;
-  }
-
-  .el-menu.menu-box {
-    height: calc(100vh - 173px);
-    font-size: 13px;
-    z-index: -1;
-    position: relative;
-    background-color: rgba(0, 0, 0, 0.2);
-    word-break: break-word;
-    .el-scrollbar__view > {
-      .el-menu-item {
-        padding: 0 11px !important;
-        span {
-          font-size: 14px;
-        }
-      }
-      .el-submenu > .el-submenu__title {
-        padding: 0 11px !important;
-        span {
-          font-size: 14px;
-        }
-        ~ .el-menu {
-          padding: 5px 0;
-          display: grid;
-          > .el-menu-item {
-            span {
-              line-height: 1.4;
-              height: 26px;
-            }
-          }
-          .el-submenu.is-opened .el-submenu__title {
-            background-color: #fff;
-            opacity: 1;
-            span {
-              color: $baseColor;
-            }
-            i.iconfont {
-              color: $baseColor;
-            }
-          }
-        }
-      }
-    }
-    .el-submenu__title,
-    .el-menu-item {
-      padding: 0 11px;
-      height: 48px;
-      line-height: 48px;
-      overflow: hidden;
-      &:hover,
-      &.is-active {
-        background-color: rgba(0, 0, 0, 0.29);
-      }
-      i {
-        color: #fff;
-        font-size: 13px;
-        margin-right: 0;
-        width: 18px;
-
-        &.iconfont {
-          margin-right: 5px;
-          font-size: 18px;
-          float: left;
-        }
-
-        &.el-submenu__icon-arrow {
-          right: 3px;
-          text-align: center;
-          font-size: 12px;
-          margin-top: -5px;
-          display: none;
-        }
-      }
-
-      > span {
-        height: 48px;
-        display: table-cell;
-        width: 114px;
-        vertical-align: middle;
-        font-size: 13px;
-        white-space: normal;
-        line-height: 16px;
-      }
-    }
-
-    .el-submenu {
-      overflow: hidden; //有点电脑分辨率问题
-
-      &.is-opened .el-submenu__title {
-        //background-color: rgba(27, 66, 97) !important;
-      }
-      .el-submenu .el-menu {
-        display: none;
-      }
-    }
-
-    .el-submenu {
-      &.is-opened {
-        > .el-submenu__title {
-          background-color: rgba(0, 0, 0, 0.29);
-        }
-      }
-      .el-menu {
-        background: rgba(0, 0, 0, 0.35);
-        box-shadow: 0px -5px 8px #00000014 inset;
-        //padding:4px 0;
-        .el-submenu__title {
-          height: auto;
-          line-height: 1.4;
-          font-size: 12px;
-          opacity: 0.8;
-          margin: 5px 0 5px 14px;
-          padding: 7px 2px 7px 33px !important;
-          border-radius: 8px;
-          text-align: left;
-          min-width: 81px;
-          white-space: normal;
-          margin-right: 10px;
-          word-break: break-word;
-          i.iconfont {
-            position: absolute;
-            top: 50%;
-            height: 20px;
-            margin-top: -10px;
-            line-height: 20px;
-            left: 7px;
-            font-size: 18px;
-          }
-
-          [class^="el-icon-"] {
-            font-size: 12px;
-            color: #fff;
-            position: absolute;
-            right: 2px;
-            top: 50%;
-            margin-top: -5px;
-            width: 14px;
-            zoom: 0.8;
-            display: none;
-          }
-          span {
-            height: auto;
-            text-align: left !important;
-          }
-          &:hover,
-          &.on {
-            opacity: 1;
-            background-color: #fbfdfe !important;
-            color: $baseColor !important;
-            i.iconfont {
-              color: $baseColor;
-            }
-            .el-icon-arrow-right {
-              color: $baseColor;
-            }
-          }
-        }
-      }
-
-      .el-menu-item {
-        height: auto;
-        line-height: 1.4;
-        padding-left: 33px !important;
-        font-size: 12px;
-        opacity: 0.8;
-        margin: 5px 0 5px 14px;
-        padding: 2px 2px 2px 0px;
-        border-radius: 8px;
-        text-align: left;
-        min-width: 81px !important;
-        white-space: normal;
-        margin-right: 10px;
-        word-break: break-word;
-
-        i.iconfont {
-          position: absolute;
-          top: 50%;
-          height: 20px;
-          margin-top: -10px;
-          line-height: 20px;
-          left: 7px;
-          font-size: 18px;
-          color: #d0d6db;
-        }
-
-        [class^="el-icon-"] {
-          font-size: 12px;
-          color: #fff;
-          position: absolute;
-          right: 2px;
-          top: 50%;
-          margin-top: -5px;
-          width: 14px;
-          zoom: 0.8;
-          display: none;
-        }
-
-        &:hover,
-        &.on {
-          opacity: 1;
-          background-color: #fbfdfe !important;
-          color: $baseColor !important;
-
-          .el-icon-arrow-right,
-          i.iconfont {
-            color: $baseColor;
-          }
-        }
-      }
-    }
-
-    &.lang-zh {
-      font-size: 14px;
-
-      .el-submenu {
-        .el-submenu__title {
-          > span {
-            text-align: center;
-          }
-
-          i.iconfont {
-            margin-right: 2px;
-          }
-        }
-
-        .el-menu-item {
-          font-size: 13px;
-        }
-      }
-    }
-  }
-}
-
-.main-container {
-  z-index: 1002;
-}
-
-.menu-btn {
-  background-color: #0000001c;
-  height: 30px;
-  line-height: 30px;
-  text-align: center;
-  box-shadow: 0 -10px 6px rgb(0 0 0 / 10%);
-  display: flex;
-  color: #fff;
-  font-size: 16px;
-
-  i {
-    display: inline-block;
-    flex: 1;
-    line-height: 30px;
-    cursor: pointer;
-    border-right: solid 1px rgba(0, 0, 0, 0.2);
-
-    &:last-child {
-      border-right: none;
-    }
-
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.12);
-    }
-  }
-}
-
-/*.menu-box {
-  background-color: #0000002e !important;
-  font-size: 14px;
-  z-index: -1;
-  position: relative;
-  &.hover .el-scrollbar {
-    width: 1000px;
-  }
-  .el-scrollbar {
-    .el-scrollbar__view {
-      padding-top: 1px;
-    }
-    .el-scrollbar__bar.is-vertical {
-      left: 104px;
-    }
-  }
-  .first-item {
-    position: relative;
-    width: 104px;
-    &:nth-child(-n + 6) .second-list {
-      bottom: inherit !important;
-      top: -40.5px !important;
-    }
-    &:nth-child(1) .second-list {
-      top: 0 !important;
-    }
-    &:nth-last-child(-n + 6) .second-list {
-      bottom: -1%;
-      top: inherit;
-    }
-    .f-name {
-      height: 55px;
-      line-height: 55px;
-      padding-left: 9px;
-      color: #fff;
-      cursor: pointer;
-      position: relative;
-      padding-right: 6px;
-      -webkit-transition: all 0.2s ease-in;
-      -moz-transition: all 0.2s ease-in;
-      -o-transition: all 0.2s ease-in;
-      transition: all 0.2s ease-in;
-      width: 104px;
-      i.el-icon-arrow-right {
-        position: absolute;
-        right: 3px;
-        top: 21.5px;
-        width: 14px;
-        height: 14px;
-      }
-      .el-icon-s-opportunity {
-        opacity: 0.92;
-        font-size: 13px;
-		vertical-align: middle;
-		margin-right: 2px;
-      }
-      span{display: inline-block;width: calc(100% - 20px);vertical-align: middle;line-height: 1.2;}
-    }
-
-    &:hover,
-    &.current {
-      .f-name {
-        background-color: #fbfdfe;
-        color: $baseColor;
-      }
-      .second-list {
-        display: block;
-      }
-    }
-  }
-}
-
-
-*/
-.second-list {
-  display: none;
-  position: absolute;
-  left: $sideBarWidth;
-  padding-left: 2px;
-  top: 0.5px;
-  // &:before {
-  //   content: "";
-  //   top: 22px;
-  //   bottom: 22px;
-  //   background-color: $baseColor;
-  //   width: 2px;
-  //   position: absolute;
-  //   left: 24px;
-  // }
-  > div {
-    background: #fbfdfe;
-    border: solid 1px $baseColor;
-    top: -0.5px;
-    padding: 24px 0;
-    border-radius: 8px;
-    margin-left: 9px;
-    max-height: calc(84vh);
-    overflow-y: auto;
-    overflow-x: hidden;
-    width: 458px;
-  }
-
-  .ico-arrow {
-    border-top: solid 7px transparent;
-    border-bottom: solid 7px transparent;
-    border-right: solid 7px $baseColor;
-    position: absolute;
-    left: 2px;
-    top: 8px;
-  }
-
-  &.on {
-    display: block;
-  }
-
-  .tit {
-    width: auto;
-    /* text-align: center; */
-    /* background: #22507614; */
-    color: $baseColor;
-    /* border: dashed 1px #1d4667; */
-    padding: 0 0 10px;
-    /* border-radius: 6px; */
-    /* margin: 5px auto; */
-    margin: 0 22px;
-    display: block;
-    border-bottom: solid 1px #eee;
-
-    i,
-    span {
-      opacity: 1;
-      vertical-align: middle;
-      margin-right: 7px;
-      font-size: 18px;
-    }
-
-    span {
-      font-size: 14px;
-    }
-  }
-
-  dl {
-    padding: 8px 16px 3px 24px;
-    margin-top: 0;
-    margin-bottom: 0;
-    display: inline-block;
-    width: 50%;
-    position: relative;
-    word-break: break-all;
-
-    &:after {
-      content: "";
-      width: 1px;
-      height: 14px;
-      background: #e4e4e4;
-      display: inline-block;
-      position: absolute;
-      right: -5px;
-      top: 50%;
-      margin-top: -3px;
-    }
-
-    .s-name {
-      color: $baseColor;
-      display: inline-block;
-      width: 190px;
-      font-size: 14px;
-      vertical-align: top;
-      margin-top: 11px;
-      text-align: right;
-
-      i {
-        margin-left: 5px;
-
-        &.icon {
-          font-size: 13px;
-          opacity: 0.92;
-          margin-left: 2px;
-          margin-right: 4px;
-        }
-      }
-    }
-
-    .item {
-      position: relative;
-      border: dashed 1px #fff;
-      border-radius: 6px;
-      display: block;
-      padding: 6px 8px 6px 27px;
-      cursor: pointer;
-
-      &:hover {
-        border-color: $baseColor;
-        color: $baseColor;
-
-        i,
-        a {
-          color: $baseColor;
-        }
-      }
-
-      // &:after {
-      //   content: "";
-      //   width: 1px;
-      //   height: 12px;
-      //   background: #dcdcdc;
-      //   position: absolute;
-      //   right: -25px;
-      //   top: 2px
-      // }
-
-      i {
-        opacity: 0.8;
-        margin-right: 8px;
-        vertical-align: middle;
-        position: absolute;
-        left: 4px;
-        top: 50%;
-        margin-top: -11px;
-        height: 22px;
-        line-height: 22px;
-        font-size: 16px;
-      }
-
-      a {
-        color: rgba(0, 0, 0, 0.82);
-        display: inline-block;
-        font-size: 13px;
-        position: relative;
-        overflow: initial !important;
-        -webkit-transition: all 0.2s ease-in;
-        -moz-transition: all 0.2s ease-in;
-        -o-transition: all 0.2s ease-in;
-        transition: all 0.2s ease-in;
-        width: auto !important;
-        vertical-align: middle;
-        word-break: break-word;
-
-        &:hover {
-          color: $baseColor;
-
-          // &:after {
-          //   content: '';
-          //   position: absolute;
-          //   bottom: -4px;
-          //   left: 0;
-          //   right: 0;
-          //   border-bottom: solid 1px $baseColor;
-          // }
-        }
-      }
-    }
-
-    &:last-child {
-      .list-box {
-        border-bottom: none;
-      }
-    }
-  }
-}
-// .el-submenu .el-menu {
-//   height: auto !important;
-// }
-.el-menu--vertical {
-  > .el-menu--popup {
-    overflow: auto; //不用atuo 超出不出滚动条
-    .el-submenu__title,
-    .el-menu-item {
-      height: auto !important;
-      line-height: 1.4 !important;
-      padding: 8px 0;
-      text-align: left;
-      white-space: normal;
-      word-break: break-word;
-      background: none;
-      i.iconfont {
-        color: #fff;
-        margin-right: 8px;
-      }
-    }
-  }
-  .el-submenu {
-    .el-submenu__title {
-      .el-submenu__icon-arrow {
-        display: none;
-      }
-    }
-    &:hover {
-      .el-submenu__title {
-        background-color: rgba(0, 0, 0, 0.29) !important;
-        i.iconfont {
-          color: $baseColor;
-        }
-      }
-    }
-
-    &.is-opened {
-      .el-submenu__title {
-        background-color: rgba(0, 0, 0, 0.29) !important;
-        i.iconfont {
-          color: $baseColor;
-        }
-      }
-    }
-  }
-  .el-menu-item {
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.29) !important;
-      i.iconfont {
-        color: $baseColor;
-      }
-    }
-
-    &.is-opened {
-      background-color: rgba(0, 0, 0, 0.29) !important;
-      i.iconfont {
-        color: $baseColor;
-      }
-    }
-  }
-  // .el-menu-item{
-  //   &:hover{
-  //     background:#FFF !important;opacity:1;
-  //     span{color:$baseColor}
-  //     i.iconfont{color:$baseColor}
-  //   }
-  //   &.is-opened{
-  //     background:#FFF;opacity:1;
-  //     span{color:$baseColor}
-  //     i.iconfont{color:$baseColor}
-  //   }
-  // }
-}
-</style>
+<template>
+  <div :class="{ 'has-logo': showLogo, telescopMenu: !isMenu }">
+    <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
+
+    <div class="hamburger-box" ref="hamhurger" @click="openUserInfo">
+      <!-- <hamburger :is-active="sidebar.opened" @toggleClick="toggleSideBar" /> -->
+      <div>
+        <p class="name">
+          <i class="iconfont icon-ziyuan"></i
+          ><span>{{ userInfo.nickName }}</span>
+        </p>
+      </div>
+    </div>
+    <div class="business-name" ref="business">
+      <el-tooltip
+        :enterable="false"
+        effect="dark"
+        :content="companyInfo.companyName"
+        :placement="direction"
+      >
+        <p v-show="getMenuFlag()">{{ companyInfo.companyName }}</p>
+      </el-tooltip>
+    </div>
+    <div
+      class="fase-box"
+      ref="fase"
+      @mouseleave="$emit('selfClose')"
+      @mouseenter="$emit('selfEnter')"
+    >
+      <langTool v-if="getMenuFlag()"></langTool>
+      <div class="item" @click="openCompanyDialog" v-if="getMenuFlag()">
+        <el-tooltip
+          :enterable="false"
+          effect="dark"
+          :content="$t1('切换组织')"
+          :placement="direction"
+        >
+          <i class="el-icon-set-up" />
+        </el-tooltip>
+      </div>
+      <div class="item" v-if="getMenuFlag()">
+        <el-tooltip
+          :enterable="false"
+          effect="dark"
+          :content="$t1('流程待办')"
+          :placement="direction"
+        >
+          <i
+            class="iconfont icon-liuchengdaiban"
+            @click="$router.push('/basic/wf/wf_manage/list')"
+          />
+        </el-tooltip>
+      </div>
+      <div class="item" v-if="isDev && isBdAdmin">
+        <el-tooltip
+          :enterable="false"
+          effect="dark"
+          :content="$t1('获取提取码')"
+          :placement="direction"
+        >
+          <i
+            class="el-icon-setting"
+            @click="showExtractedCodeCreateDialog = true"
+          />
+        </el-tooltip>
+      </div>
+      <div class="item" v-if="isBdAdmin">
+        <el-tooltip
+          :enterable="false"
+          effect="dark"
+          :content="$t1('查看提取码')"
+          :placement="direction"
+        >
+          <i
+            class="el-icon-tickets"
+            @click="showExtractedCodeQueryDialog = true"
+          />
+        </el-tooltip>
+      </div>
+
+      <div class="item" @click="logout()">
+        <el-tooltip
+          :enterable="false"
+          effect="dark"
+          :content="$t1('退出')"
+          :placement="direction"
+        >
+          <i class="el-icon-switch-button" />
+        </el-tooltip>
+      </div>
+    </div>
+    <template v-for="router1 in viewRouter">
+      <template v-for="router2 in router1.children">
+        <div
+          class="second-list"
+          :key="router1.id + 't' + router2.id"
+          :class="{ on: router2.id == nowNavID }"
+          @mouseenter="stopFlag = 1"
+          @mouseleave="showNav()"
+          v-show="router2.id == nowNavID"
+          :ref="'seconMenus' + router2.id"
+        >
+          <i class="ico-arrow"></i>
+          <div>
+            <div class="tit">
+              <i :class="getMenuClass(router2, 2)"></i
+              ><span>{{ getMenuName(router2) }}</span>
+            </div>
+            <dl
+              v-for="(router3, index3) in router2.children"
+              :key="'router3' + index3"
+            >
+              <div
+                class="item"
+                v-if="!router3.hidden"
+                @click="rourteTo(router3, router1)"
+              >
+                <!--<i class="el-icon-caret-right"></i>-->
+                <i :class="getMenuClass(router3, 3)"></i>
+                <a>{{ getMenuName(router3) }}</a>
+              </div>
+            </dl>
+          </div>
+        </div>
+      </template>
+    </template>
+    <el-menu
+      class="menu-box"
+      :class="{ 'lang-zh': $i18n.locale == 'zh' }"
+      text-color="#fff"
+      active-text-color="#fff"
+      :unique-opened="true"
+      @mouseleave="showNav()"
+      ref="seconMenus"
+      :collapse="!isMenu"
+    >
+      <el-scrollbar wrap-class="scrollbar-wrapper" id="menuUl">
+        <component
+          v-for="menuModule in menuModules"
+          :is="getMenuType(menuModule)"
+          :index="'' + menuModule.id"
+          :key="'menuModule' + menuModule.id"
+          @click.native="rourteTo(menuModule)"
+        >
+          <i
+            :class="getMenuClass(menuModule, 1)"
+            v-if="menuModule.children.length <= 0"
+          ></i>
+          <template slot="title">
+            <i
+              :class="getMenuClass(menuModule, 1)"
+              v-if="menuModule.children.length > 0"
+            ></i>
+            <span>{{ getMenuName(menuModule) }}</span>
+          </template>
+          <component
+            v-for="(router2, index1) in menuModule.children"
+            :is="getMenuType(router2)"
+            :key="index1"
+            :index="'' + router2.id"
+            @mouseenter.native="showNav(router2, $event)"
+            @mouseleave.native="showNav()"
+            @click="rourteTo(router2)"
+          >
+            <template slot="title">
+              <i :class="getMenuClass(router2, 2)"></i>
+              <span>{{ getMenuName(router2) }}</span>
+            </template>
+            <el-menu-item
+              v-for="(router3, index3) in router2.children"
+              :key="index3"
+              :index="'' + router3.id"
+              @click="rourteTo(router3)"
+            >
+              <template slot="title">
+                <i :class="getMenuClass(router3, 3)"></i>
+                <span>{{ getMenuName(router3) }}</span>
+              </template>
+            </el-menu-item>
+          </component>
+        </component>
+        <!-- <el-menu-item
+          @click.native="openCreateCompanyDialog"
+          index="xx"
+          v-if="isFormDev"
+        >
+          <template slot="title">
+            <i :class="getMenuClass({}, 1)"></i>
+            <span>新建企业</span>
+          </template>
+        </el-menu-item> -->
+      </el-scrollbar>
+    </el-menu>
+    <div class="menu-btn">
+      <i class="el-icon-arrow-up" @click="toUpMove()"></i>
+      <i class="el-icon-arrow-down" @click="toDownMove()"></i>
+    </div>
+    <div
+      id="tta"
+      style="
+        position: absolute;
+        height: 100%;
+        top: 0;
+        right: 0;
+        z-index: 9999;
+        width: 800px;
+        left: 100%;
+      "
+      v-if="showMenuModal"
+    ></div>
+    <el-dialog
+      :title="$t1('切换组织')"
+      width="355px"
+      custom-class="dialog-style list-dialog"
+      v-if="showCompanyDialog"
+      :visible.sync="showCompanyDialog"
+      :append-to-body="true"
+      :modal-append-to-body="true"
+      :close-on-click-modal="false"
+      v-el-drag-dialog
+      v-el-dialog-center
+      @close="changeCompanyClose"
+    >
+      <div class="cont">
+        <el-input
+          :placeholder="$t1('搜索')"
+          class="search-btn"
+          v-model="filterText"
+        ></el-input>
+        <el-tree
+          :props="defaultProps"
+          :load="loadNode"
+          node-key="id"
+          ref="tree"
+          highlight-current
+          lazy
+          :expand-on-click-node="true"
+          @node-click="handleNodeClick"
+          class="organization-tree"
+          icon-class="el-icon-arrow-right"
+          :filter-node-method="filterNode"
+        ></el-tree>
+      </div>
+      <!-- <span slot="footer" class="dialog-footer">
+				<el-button type="primary" plain class="button-sty" @click="changeCompanyClose">
+					<i class="el-icon-close el-icon"></i>
+					取 消
+				</el-button>
+				<el-button type="primary" @click="changeCompany" class="button-sty">
+					<i class="el-icon-check el-icon"></i>
+					确 定
+				</el-button>
+			</span> -->
+    </el-dialog>
+
+    <!--    <infoIframeDialog v-if="showInfoIframeDialog" :visiable.sync="showInfoIframeDialog"
+                          :dataId="userInfo.id"></infoIframeDialog>-->
+    <userInfo
+      v-if="!isFormDev && showUserInfoDialog"
+      :visiable.sync="showUserInfoDialog"
+      :_dataId="userInfo.id"
+      topValue="128px"
+      @reload="userInfoReload"
+    ></userInfo>
+    <userFormInfo
+      v-if="isFormDev && showUserInfoDialog"
+      :visiable.sync="showUserInfoDialog"
+      :_dataId="userInfo.id"
+      topValue="128px"
+      @reload="userInfoReload"
+    ></userFormInfo>
+    <onlineTalk></onlineTalk>
+    <extractedCodeCreateDialog
+      v-if="showExtractedCodeCreateDialog"
+      :visiable.sync="showExtractedCodeCreateDialog"
+    ></extractedCodeCreateDialog>
+    <extractedCodeQueryDialog
+      v-if="showExtractedCodeQueryDialog"
+      :visiable.sync="showExtractedCodeQueryDialog"
+    ></extractedCodeQueryDialog>
+    <createCompanyDialog
+      v-if="showCreateCompanyDialog"
+      :visiable.sync="showCreateCompanyDialog"
+    ></createCompanyDialog>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import variables from "@base/styles/variables.scss";
+import { getToken } from "@base/utils/auth";
+import indexUtil from "@base/utils/index.js";
+import langTool from "../langTool.vue";
+import { initPddLog } from "@base/utils/pddLog";
+import { getBdFlag } from "@base/api/user";
+
+export default {
+  props: {
+    option: Object,
+    isMenu: {
+      type: Boolean,
+    },
+  },
+  components: {
+    // 个人设置 / 在线沟通 / 提取码 / 建企业 首屏菜单用不到。同步 import 会把
+    // onlineTalk → talkUserDialog → tableForm 整条链焊进 Sidebar 异步包，
+    // 发布环境首次进入时左边菜单明显慢于首页。
+    userInfo: () => import("@base/views/user/user/info.vue"),
+    userFormInfo: () => import("@base/views/user/user/form_info.vue"),
+    onlineTalk: () => import("@base/components/onlineTalk"),
+    langTool,
+    extractedCodeCreateDialog: () => import("../extractedCode/createDialog.vue"),
+    extractedCodeQueryDialog: () => import("../extractedCode/queryDialog.vue"),
+    createCompanyDialog: () =>
+      import("@base/layout/components/createCompany/createCompanyDialog.vue"),
+  },
+  data() {
+    return {
+      direction: "bottom",
+      defaultOpenedsArray: [],
+      viewRouter: [],
+      showMenuModal: false,
+      menuheight: {
+        height: "",
+      },
+      defaultProps: {
+        label: "label", //这里是树结构中需显示的数据（即接口返回的需展示在页面上的参数）
+        children: [],
+        isLeaf: "leaf",
+      },
+      filterText: null,
+      showCompanyDialog: false,
+      choose_company_info: "",
+      userInfo: {},
+      companyInfo: {},
+      showUserInfoDialog: false,
+      hoverStatus: false,
+      nowNavID: "null",
+      stopFlag: 0,
+      showInfoIframeDialog: false,
+      currentMenu: null,
+      menuModules: [],
+      firstMenuHeight: 0, // 第一个菜单的高度
+      eveyMenuHeight: 48, // 每一个菜单的高度
+      isFormDev: false,
+
+      showExtractedCodeCreateDialog: false,
+      showExtractedCodeQueryDialog: false,
+      isDev: false,
+      showCreateCompanyDialog: false,
+    };
+  },
+  computed: {
+    ...mapGetters([
+      "permission_routes",
+      "sidebar",
+      "sidebarRouters",
+      "isBdAdmin",
+      "userFlag",
+    ]),
+    activeMenu() {
+      const route = this.$route;
+      const { meta, path } = route;
+      // if set path, the sidebar will highlight the path you set
+      if (meta.activeMenu) {
+        return meta.activeMenu;
+      }
+      return path;
+    },
+    showLogo() {
+      return this.$store.state.settings.sidebarLogo;
+    },
+    variables() {
+      return variables;
+    },
+    /*isCollapse() {
+      if (this.sidebar.opened) {
+        this.direction = 'bottom';
+      } else {
+        this.direction = 'right-start';
+      }
+      return !this.sidebar.opened;
+    }*/
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    },
+    sidebarRouters() {
+      this.filterRoute();
+    },
+  },
+  created() {
+    indexUtil.initI18nMessage("menus");
+    // generateRoutes2 在 next() 之前已经写入。放 created 而不是 mounted+100ms，
+    // 第一次 render 就带菜单项；也不用 immediate watcher（会早于 created，
+    // filterRoute 里的 $router.push 不安全）。
+    this.filterRoute();
+  },
+  mounted() {
+    this.getUserInfo();
+    this.countHeight();
+    let query = this.$route.query;
+    if (query && query.flag == 1) {
+      this.showCompanyDialog = true;
+    }
+    initPddLog(); //初始化拼多多日志
+    this.initIsFormDev();
+    this.getBdEnv();
+  },
+  methods: {
+    getMenuType(item) {
+      if (item.children && item.children.length > 0) {
+        return "el-submenu";
+      } else {
+        return "el-menu-item";
+      }
+    },
+    getBdEnv() {
+      getBdFlag({
+        success: (res) => {
+          this.isDev = res.objx == 1;
+        },
+      });
+    },
+    initIsFormDev() {
+      let userFlag = this.userFlag;
+      this.isFormDev = userFlag == 6 || userFlag == 7 || userFlag == 8;
+    },
+    getMenuFlag() {
+      return !this.isBdAdmin;
+    },
+    getMenuName(item) {
+      let locale = this.$i18n?.locale;
+      let zhTitle = item.meta ? item.meta.title : "";
+      let enTitle = item.meta ? item.meta.enTitle : "";
+      let title;
+      if (locale == "en") {
+        title = enTitle || zhTitle;
+      } else {
+        title = zhTitle;
+      }
+      if (!enTitle || locale !== "en") {
+        title = zhTitle;
+      }
+      if (this.$t1) {
+        title = this.$t1(title);
+      }
+
+      return title;
+    },
+    jumpOutLink(route) {
+      let path = route.url || route.path;
+      if (route.type == 4 && path) {
+        let params = this.getCustomReqUrlAndCleanUrl(path);
+        let reqUrl = params.custom_req_url;
+        if (reqUrl) {
+          this.$http({
+            url: reqUrl,
+            method: `post`,
+            data: { thirdUrl: params.newUrl },
+            isLoading: true,
+            success: (res) => {
+              path = res.objx;
+              window.open(path);
+            },
+          });
+        } else {
+          if (path.indexOf("token={token}") >= 0) {
+            path = path.replace("token={token}", "token=" + getToken());
+          }
+          window.open(path);
+        }
+      }
+    },
+    getCustomReqUrlAndCleanUrl(url) {
+      // 直接使用正则表达式匹配
+      const match = url.match(/[?&]custom_req_url=([^&?#]+)/);
+      if (match) {
+        const customReqUrl = decodeURIComponent(match[1]);
+        // 移除匹配到的参数部分
+        const newUrl = url.replace(
+          match[0],
+          match[0].startsWith("?") ? "?" : ""
+        );
+
+        return {
+          custom_req_url: customReqUrl,
+          newUrl: newUrl.replace(/\?$/, "").replace(/\?&/, "?"),
+        };
+      }
+
+      return {
+        custom_req_url: "",
+        newUrl: url,
+      };
+    },
+    changeModules(row, cRow) {
+      if (!row.route) return;
+      localStorage.setItem("currentMenuId", row.id);
+      let route = row.route ? "/" + row.route : "";
+      sessionStorage.setItem("reUrl", cRow.path);
+      sessionStorage.setItem("reCid", row.id);
+      location.href = route + "/index.html/#/home";
+
+      // location.reload();
+    },
+    filterRoute() {
+      var oldRoutes = JSON.parse(JSON.stringify(this.sidebarRouters));
+      var nRoute1s = [];
+      oldRoutes.forEach((route1, index1) => {
+        let nRoute2s = [];
+        if (!route1.hidden) {
+          route1.children.forEach((route2, index2) => {
+            let nRoute3s = [];
+            if (!route2.hidden) {
+              route2.children.forEach((route3, index3) => {
+                if (!route3.hidden) {
+                  nRoute3s.push(route3);
+                }
+              });
+            }
+            if (route2.type == 4 || route2.url || nRoute3s.length > 0) {
+              route2.children = nRoute3s;
+              nRoute2s.push(route2);
+            }
+          });
+        }
+        if (route1.type == 4 || route1.url || nRoute2s.length > 0) {
+          route1.children = nRoute2s;
+          nRoute1s.push(route1);
+        }
+      });
+      this.viewRouter = nRoute1s || [];
+      this.menuModules = nRoute1s || [];
+
+      let reUrl = sessionStorage.getItem("reUrl");
+      let reCid = sessionStorage.getItem("reCid");
+      if (reUrl) {
+        this.$nextTick(() => {
+          this.$refs.seconMenus.open(reCid);
+        });
+        this.$router.push(reUrl);
+        sessionStorage.removeItem("reUrl");
+        sessionStorage.removeItem("reCid");
+      }
+    },
+    filterRoute1() {
+      var oldRoutes = JSON.parse(JSON.stringify(this.sidebarRouters));
+      var nRoute1s = [];
+      oldRoutes.forEach((route1, index1) => {
+        let nRoute2s = [];
+        if (!route1.hidden && route1.route) {
+          route1.children.forEach((route2, index2) => {
+            let nRoute3s = [];
+            if (!route2.hidden) {
+              route2.children.forEach((route3, index3) => {
+                if (!route3.hidden) {
+                  nRoute3s.push(route3);
+                }
+              });
+            }
+            if (nRoute3s.length > 0) {
+              route2.children = nRoute3s;
+              nRoute2s.push(route2);
+            }
+          });
+        }
+        if (nRoute2s.length > 0) {
+          route1.children = nRoute2s;
+          nRoute1s.push(route1);
+        }
+      });
+      let rows = nRoute1s;
+      if (rows.length) {
+        let currentMenu;
+        if (nRoute1s.length) {
+          var currentMenuId = localStorage.getItem("currentMenuId");
+          if (currentMenuId) {
+            currentMenu = nRoute1s.find((row) => row.id == currentMenuId);
+          }
+          if (!currentMenu) {
+            currentMenu = nRoute1s[0];
+          }
+          this.viewRouter = currentMenu.children;
+        }
+        this.currentMenu = currentMenu;
+        this.menuModules = rows || [];
+
+        /*if (currentMenu) {
+          if (currentMenu.route != WEB_PREFIX.substring(1, WEB_PREFIX.length)) {
+            this.changeModules(currentMenu, 1);
+          } else {
+            localStorage.setItem('currentMenuId', currentMenu.id);
+          }
+        } else {
+          localStorage.removeItem('currentMenuId');
+        }*/
+      }
+    },
+    rourteTo(route) {
+      let path = route.url || route.path;
+      if (!path) {
+        return;
+      }
+      this.showMenuModal = true;
+      setTimeout(() => {
+        this.showMenuModal = false;
+      }, 200);
+      try {
+        if (route.linkType == 4) {
+          this.jumpOutLink(route);
+        } else if (route.linkType == 3) {
+          this.$router.push({
+            path: path,
+            query: { url: route.outLink, route: route.route },
+          });
+        } else {
+          // 通用打开：可重复时附加唯一标识生成独立标签页
+          this.$openView(path, route);
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    logout() {
+      this.$store.dispatch("user/logout2").then((res) => {
+        this.$router.push(`/login?redirect=${this.$route.fullPath}`);
+      });
+    },
+    toggleSideBar() {
+      this.$store.dispatch("app/toggleSideBar");
+    },
+    countHeight() {
+      var h =
+        this.$refs.hamhurger.offsetHeight +
+        this.$refs.fase.offsetHeight +
+        this.$refs.business.offsetHeight;
+      this.menuheight.height = window.innerHeight - h + "px";
+    },
+    handleNodeClick(data, node, v) {
+      if (!data.hasChild) {
+        this.choose_company_info = data;
+        this.changeCompany();
+      } else {
+        this.choose_company_info = {};
+      }
+    },
+    // 异步树叶子节点懒加载逻辑
+    loadNode(node, resolve) {
+      let companyCode =
+        node && node.data && node.data.companyCode
+          ? node.data.companyCode || ""
+          : "";
+      let url = !companyCode
+        ? USER_PREFIX + "/user_company_info/getAllList"
+        : USER_PREFIX + "/user_company_info/getChildren";
+
+      this.$http({
+        url: url,
+        method: "post",
+        data: {
+          parentCompanyCode: companyCode,
+        },
+        success: (res) => {
+          let datas = res.objx || [];
+          let parentLabel = companyCode ? node.label : null;
+          datas.forEach((item) => {
+            item.leaf = !item.hasChild;
+            let label = this.$t1(item.companyName);
+            /*if(companyCode){
+              label = label + '('+companyTypeMap[item.companyType]+')'
+            }*/
+            item.label = label;
+            item.parentLabel = parentLabel;
+          });
+
+          if (node.level === 0) {
+            if (datas.length > 0 && datas[0].hasChild) {
+              this.$nextTick(() => {
+                let nodedata = node.childNodes[0];
+                nodedata.expanded = true;
+                nodedata.loadData();
+              });
+            }
+          }
+          resolve(datas);
+        },
+      });
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      let flag1 = data.label.indexOf(value) !== -1;
+      let flag2 = data.parentLabel && data.parentLabel.indexOf(value) !== -1;
+      return flag1 || flag2;
+    },
+    openCompanyDialog() {
+      this.filterText = null;
+      this.showCompanyDialog = true;
+    },
+    getWebPrefix(callback) {
+      this.$http({
+        url: USER_PREFIX + "/auth/getWebPrefix",
+        method: `post`,
+        data: {},
+        isLoading: true,
+        success: (res) => {
+          let webPrefix = res.objx;
+          callback && callback(webPrefix);
+        },
+      });
+    },
+    changeCompany() {
+      let row = this.choose_company_info;
+      let query = this.$route.query;
+      let flag = query && query.flag == 1 ? 1 : null;
+      this.showCompanyDialog = false;
+      if (row && row.companyCode) {
+        this.$baseLoading({ target: document.body, fullscreen: true });
+        this.$http({
+          url: USER_PREFIX + "/auth/switchCompany",
+          method: "post",
+          data: { stringOne: row.companyCode },
+          isLoading: true,
+          success: (res) => {
+            this.getWebPrefix((prefix) => {
+              let webPrefix = prefix ? "/" + prefix : window.MAIN_WEB_PREFIX;
+              sessionStorage.removeItem("out-token");
+              this.$store.dispatch("user/changeCompanyInfo", row);
+              this.$store.dispatch("tagsView/delAllViews");
+              window.location.href = webPrefix + "/index.html";
+            });
+          },
+        });
+      } else {
+        if (flag == 1) {
+          this.$router.push({
+            path: "/",
+          });
+        }
+      }
+    },
+    changeCompanyClose() {
+      let query = this.$route.query;
+      let flag = query && query.flag == 1 ? 1 : null;
+      if (flag == 1) {
+        this.$router.push({
+          path: "/",
+        });
+      }
+      this.showCompanyDialog = false;
+    },
+    getUserInfo() {
+      this.$http({
+        url: USER_PREFIX + "/user/currentUser",
+        method: "post",
+        success: (res) => {
+          let userInfo = res.objx;
+          this.headPhotoUrl = userInfo.headPhotoUrl
+            ? userInfo.headPhotoUrl
+            : (require("@base/core-resources/images/default-header.png").default || require("@base/core-resources/images/default-header.png"));
+          this.userInfo = userInfo;
+        },
+      });
+
+      this.$http({
+        url: USER_PREFIX + "/company_info/getCurrent",
+        method: `post`,
+        success: (res) => {
+          this.companyInfo = res.objx || {};
+        },
+      });
+    },
+    openUserInfo() {
+      this.showUserInfoDialog = true;
+      // this.showInfoIframeDialog = true;
+    },
+    userInfoReload() {
+      this.showUserInfoDialog = true;
+    },
+    showNav(route, event) {
+      if (!this.isMenu) return;
+      let id = route && route.id ? route.id : null;
+      if (id != null) {
+        if (!route.children || !route.children.length) {
+          return;
+        }
+        this.stopFlag = 1;
+        this.nowNavID = id;
+        this.$nextTick(() => {
+          var wh = window.innerHeight;
+          let dom = event.target;
+          let domAttr = dom.getBoundingClientRect();
+          // var sh1 = dom.offsetTop;
+          var sh1 = domAttr.top + 5;
+          let $snav = this.$refs["seconMenus" + id][0];
+          let snavAttr = $snav.getBoundingClientRect();
+
+          // var sh2 = $snav.outerHeight;
+          var sh2 = snavAttr.height;
+          var sh = wh - (sh1 + sh2);
+
+          var hd = 20;
+          var xhd = sh - hd; //移动距离+固定值
+          if (sh >= 0) {
+            $snav.style["margin-top"] = sh1 + "px";
+          } else if (sh < 0) {
+            let bd = sh1 + sh;
+
+            $snav.style["margin-top"] = bd + "px";
+            $snav.querySelector(".ico-arrow").style["margin-top"] =
+              sh1 - bd + "px";
+          }
+        });
+      } else {
+        this.stopFlag = 0;
+        setTimeout(() => {
+          if (this.stopFlag == 0) {
+            this.nowNavID = id;
+          }
+        }, 200);
+      }
+    },
+    jumpTo(row, firstRow) {
+      let route = firstRow.route ? "/" + firstRow.route : "";
+      if (route == WEB_PREFIX) {
+        this.$router.push({
+          path: row.path,
+        });
+      } else {
+        this.changeModules(firstRow, row);
+      }
+    },
+    toDownMove() {
+      let containter = document
+        .getElementById("menuUl")
+        .querySelector(".scrollbar-wrapper");
+      let menuscrollTop = containter.scrollTop;
+      let scrollHeight = containter.scrollHeight;
+      let val = menuscrollTop + this.eveyMenuHeight;
+      if (val < scrollHeight) {
+        containter.scrollTop = val;
+      } else {
+        containter.scrollTop = scrollHeight;
+      }
+    },
+    toUpMove() {
+      let containter = document
+        .getElementById("menuUl")
+        .querySelector(".scrollbar-wrapper");
+      let menuscrollTop = containter.scrollTop;
+      let val = menuscrollTop - this.eveyMenuHeight;
+      if (val > 0) {
+        containter.scrollTop = val;
+      } else {
+        containter.scrollTop = 0;
+      }
+    },
+    getMenuClass(menu, flag) {
+      let res = "";
+      if (menu.menuImg) {
+        res = "iconfont " + menu.menuImg;
+      } else if (flag == 1) {
+        res = "iconfont icon-jinggao"; //一级默认图标
+      } else if (flag == 2) {
+        res = "iconfont icon-circle"; //二级默认图标
+      } else if (flag == 3) {
+        res = "iconfont icon-thirdMemu"; //三级级默认图标
+      }
+
+      if (flag == 2) {
+        if (menu.id == this.nowNavID) {
+          res += " on";
+        }
+      }
+      return res;
+    },
+    openCreateCompanyDialog() {
+      this.showCreateCompanyDialog = true;
+    },
+    confirmCreateCompanyDialog() {
+      this.showCreateCompanyDialog = false;
+    },
+  },
+};
+</script>
+<style lang="scss">
+@import "~@base/styles/variables.scss";
+
+.hamburger-box {
+  background-color: #0000004d;
+  height: 42px;
+  /* line-height: 30px; */
+  text-align: center;
+  /* box-shadow: 0 2px 6px rgb(0 0 0 / 10%); */
+  position: relative;
+  z-index: 2;
+  overflow: hidden;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.65);
+
+  > div {
+    color: #fff;
+    font-size: 13px;
+    margin-bottom: 4px;
+    cursor: pointer;
+    height: 36px;
+    border-radius: 7px;
+    margin: 6px 10px 6px 8px;
+    overflow: hidden;
+    background: #2a6494;
+  }
+
+  p {
+    color: #fff;
+    font-size: 13px;
+    margin-bottom: 4px;
+    cursor: pointer;
+    /* border: solid 1px #ffffff61; */
+    display: block;
+    line-height: 27px;
+    /* width: 88%; */
+    margin-top: 6px;
+    border-radius: 7px;
+    margin: 6px 10px 6px 8px;
+    background: #2a6494;
+
+    i {
+      font-size: 14px;
+      vertical-align: middle;
+      margin: 0 4px 0 6px;
+      height: 36px;
+      line-height: 36px;
+      width: 21px;
+    }
+
+    span {
+      width: 94px;
+      display: table-cell;
+      height: 32px;
+      word-break: break-word;
+      line-height: 16px;
+      overflow: hidden;
+      vertical-align: middle;
+      white-space: nowrap;
+    }
+
+    &.name {
+      display: table-row;
+      margin: 0;
+    }
+  }
+}
+
+.business-name {
+  height: 47px;
+  color: #ffffffb8;
+  background: #0000004d;
+  /* padding-top: 12px; */
+  font-size: 12px;
+  /* padding-left: 5px; */
+  display: table-cell;
+  vertical-align: middle;
+  width: 140px;
+  padding: 6px 10px;
+  text-align: center;
+
+  p {
+    margin: 0;
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+}
+
+.fase-box {
+  color: #fff;
+  /* border-bottom: solid 1px rgba(255, 255, 255, 0.12); */
+  border-top: solid 1px rgba(255, 255, 255, 0.12);
+  background: #225076;
+  padding: 4px 0 8px;
+  width: 100%;
+  z-index: 999;
+  position: relative;
+  /* display: flex;*/
+  //text-align: left !important;
+  // &:hover {
+  // 	color: $baseColor;
+  // 	background-color: #fbfdfe;
+  // 	.fase-list {
+  // 		display: block;
+  // 	}
+  // }
+  .item {
+    flex: 1;
+    text-align: center;
+    font-size: 16px;
+    height: 40px;
+    line-height: 40px;
+    cursor: pointer;
+    display: inline-block;
+    min-width: 30px;
+  }
+
+  .fase-list {
+    position: absolute;
+    left: 100%;
+    color: $baseColor;
+    background-color: #fbfdfe;
+    border: solid 1px $baseColor;
+    border-left: none;
+    top: -0.5px;
+    padding: 10px 0 10px 24px;
+    height: 43px;
+    width: 413px;
+    display: none;
+
+    .l-item {
+      display: inline-block;
+      font-size: 12px;
+      margin-right: 36px;
+      line-height: 20px;
+      cursor: pointer;
+
+      i {
+        vertical-align: middle;
+        margin-right: 4px;
+        font-size: 15px;
+        margin-bottom: 2px;
+      }
+
+      &:hover {
+        border-bottom: solid 1px $baseColor;
+      }
+    }
+  }
+}
+
+.openSidebar .fase-box {
+  text-align: center;
+  //padding: 0;
+}
+
+#app .sidebar-container {
+  overflow: visible;
+  z-index: 1003;
+
+  &.hover {
+    z-index: 1003;
+  }
+
+  &.hover1 .fase-box {
+    width: 138px;
+    color: $baseColor;
+    background-color: #fbfdfe;
+    border-color: $baseColor;
+  }
+
+  .el-menu.menu-box {
+    height: calc(100vh - 173px);
+    font-size: 13px;
+    z-index: -1;
+    position: relative;
+    background-color: rgba(0, 0, 0, 0.2);
+    word-break: break-word;
+    .el-scrollbar__view > {
+      .el-menu-item {
+        padding: 0 11px !important;
+        span {
+          font-size: 14px;
+        }
+      }
+      .el-submenu > .el-submenu__title {
+        padding: 0 11px !important;
+        span {
+          font-size: 14px;
+        }
+        ~ .el-menu {
+          padding: 5px 0;
+          display: grid;
+          > .el-menu-item {
+            span {
+              line-height: 1.4;
+              height: 26px;
+            }
+          }
+          .el-submenu.is-opened .el-submenu__title {
+            background-color: #fff;
+            opacity: 1;
+            span {
+              color: $baseColor;
+            }
+            i.iconfont {
+              color: $baseColor;
+            }
+          }
+        }
+      }
+    }
+    .el-submenu__title,
+    .el-menu-item {
+      padding: 0 11px;
+      height: 48px;
+      line-height: 48px;
+      overflow: hidden;
+      &:hover,
+      &.is-active {
+        background-color: rgba(0, 0, 0, 0.29);
+      }
+      i {
+        color: #fff;
+        font-size: 13px;
+        margin-right: 0;
+        width: 18px;
+
+        &.iconfont {
+          margin-right: 5px;
+          font-size: 18px;
+          float: left;
+        }
+
+        &.el-submenu__icon-arrow {
+          right: 3px;
+          text-align: center;
+          font-size: 12px;
+          margin-top: -5px;
+          display: none;
+        }
+      }
+
+      > span {
+        height: 48px;
+        display: table-cell;
+        width: 114px;
+        vertical-align: middle;
+        font-size: 13px;
+        white-space: normal;
+        line-height: 16px;
+      }
+    }
+
+    .el-submenu {
+      overflow: hidden; //有点电脑分辨率问题
+
+      &.is-opened .el-submenu__title {
+        //background-color: rgba(27, 66, 97) !important;
+      }
+      .el-submenu .el-menu {
+        display: none;
+      }
+    }
+
+    .el-submenu {
+      &.is-opened {
+        > .el-submenu__title {
+          background-color: rgba(0, 0, 0, 0.29);
+        }
+      }
+      .el-menu {
+        background: rgba(0, 0, 0, 0.35);
+        box-shadow: 0px -5px 8px #00000014 inset;
+        //padding:4px 0;
+        .el-submenu__title {
+          height: auto;
+          line-height: 1.4;
+          font-size: 12px;
+          opacity: 0.8;
+          margin: 5px 0 5px 14px;
+          padding: 7px 2px 7px 33px !important;
+          border-radius: 8px;
+          text-align: left;
+          min-width: 81px;
+          white-space: normal;
+          margin-right: 10px;
+          word-break: break-word;
+          i.iconfont {
+            position: absolute;
+            top: 50%;
+            height: 20px;
+            margin-top: -10px;
+            line-height: 20px;
+            left: 7px;
+            font-size: 18px;
+          }
+
+          [class^="el-icon-"] {
+            font-size: 12px;
+            color: #fff;
+            position: absolute;
+            right: 2px;
+            top: 50%;
+            margin-top: -5px;
+            width: 14px;
+            zoom: 0.8;
+            display: none;
+          }
+          span {
+            height: auto;
+            text-align: left !important;
+          }
+          &:hover,
+          &.on {
+            opacity: 1;
+            background-color: #fbfdfe !important;
+            color: $baseColor !important;
+            i.iconfont {
+              color: $baseColor;
+            }
+            .el-icon-arrow-right {
+              color: $baseColor;
+            }
+          }
+        }
+      }
+
+      .el-menu-item {
+        height: auto;
+        line-height: 1.4;
+        padding-left: 33px !important;
+        font-size: 12px;
+        opacity: 0.8;
+        margin: 5px 0 5px 14px;
+        padding: 2px 2px 2px 0px;
+        border-radius: 8px;
+        text-align: left;
+        min-width: 81px !important;
+        white-space: normal;
+        margin-right: 10px;
+        word-break: break-word;
+
+        i.iconfont {
+          position: absolute;
+          top: 50%;
+          height: 20px;
+          margin-top: -10px;
+          line-height: 20px;
+          left: 7px;
+          font-size: 18px;
+          color: #d0d6db;
+        }
+
+        [class^="el-icon-"] {
+          font-size: 12px;
+          color: #fff;
+          position: absolute;
+          right: 2px;
+          top: 50%;
+          margin-top: -5px;
+          width: 14px;
+          zoom: 0.8;
+          display: none;
+        }
+
+        &:hover,
+        &.on {
+          opacity: 1;
+          background-color: #fbfdfe !important;
+          color: $baseColor !important;
+
+          .el-icon-arrow-right,
+          i.iconfont {
+            color: $baseColor;
+          }
+        }
+      }
+    }
+
+    &.lang-zh {
+      font-size: 14px;
+
+      .el-submenu {
+        .el-submenu__title {
+          > span {
+            text-align: center;
+          }
+
+          i.iconfont {
+            margin-right: 2px;
+          }
+        }
+
+        .el-menu-item {
+          font-size: 13px;
+        }
+      }
+    }
+  }
+}
+
+.main-container {
+  z-index: 1002;
+}
+
+.menu-btn {
+  background-color: #0000001c;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  box-shadow: 0 -10px 6px rgb(0 0 0 / 10%);
+  display: flex;
+  color: #fff;
+  font-size: 16px;
+
+  i {
+    display: inline-block;
+    flex: 1;
+    line-height: 30px;
+    cursor: pointer;
+    border-right: solid 1px rgba(0, 0, 0, 0.2);
+
+    &:last-child {
+      border-right: none;
+    }
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.12);
+    }
+  }
+}
+
+/*.menu-box {
+  background-color: #0000002e !important;
+  font-size: 14px;
+  z-index: -1;
+  position: relative;
+  &.hover .el-scrollbar {
+    width: 1000px;
+  }
+  .el-scrollbar {
+    .el-scrollbar__view {
+      padding-top: 1px;
+    }
+    .el-scrollbar__bar.is-vertical {
+      left: 104px;
+    }
+  }
+  .first-item {
+    position: relative;
+    width: 104px;
+    &:nth-child(-n + 6) .second-list {
+      bottom: inherit !important;
+      top: -40.5px !important;
+    }
+    &:nth-child(1) .second-list {
+      top: 0 !important;
+    }
+    &:nth-last-child(-n + 6) .second-list {
+      bottom: -1%;
+      top: inherit;
+    }
+    .f-name {
+      height: 55px;
+      line-height: 55px;
+      padding-left: 9px;
+      color: #fff;
+      cursor: pointer;
+      position: relative;
+      padding-right: 6px;
+      -webkit-transition: all 0.2s ease-in;
+      -moz-transition: all 0.2s ease-in;
+      -o-transition: all 0.2s ease-in;
+      transition: all 0.2s ease-in;
+      width: 104px;
+      i.el-icon-arrow-right {
+        position: absolute;
+        right: 3px;
+        top: 21.5px;
+        width: 14px;
+        height: 14px;
+      }
+      .el-icon-s-opportunity {
+        opacity: 0.92;
+        font-size: 13px;
+		vertical-align: middle;
+		margin-right: 2px;
+      }
+      span{display: inline-block;width: calc(100% - 20px);vertical-align: middle;line-height: 1.2;}
+    }
+
+    &:hover,
+    &.current {
+      .f-name {
+        background-color: #fbfdfe;
+        color: $baseColor;
+      }
+      .second-list {
+        display: block;
+      }
+    }
+  }
+}
+
+
+*/
+.second-list {
+  display: none;
+  position: absolute;
+  left: $sideBarWidth;
+  padding-left: 2px;
+  top: 0.5px;
+  // &:before {
+  //   content: "";
+  //   top: 22px;
+  //   bottom: 22px;
+  //   background-color: $baseColor;
+  //   width: 2px;
+  //   position: absolute;
+  //   left: 24px;
+  // }
+  > div {
+    background: #fbfdfe;
+    border: solid 1px $baseColor;
+    top: -0.5px;
+    padding: 24px 0;
+    border-radius: 8px;
+    margin-left: 9px;
+    max-height: calc(84vh);
+    overflow-y: auto;
+    overflow-x: hidden;
+    width: 458px;
+  }
+
+  .ico-arrow {
+    border-top: solid 7px transparent;
+    border-bottom: solid 7px transparent;
+    border-right: solid 7px $baseColor;
+    position: absolute;
+    left: 2px;
+    top: 8px;
+  }
+
+  &.on {
+    display: block;
+  }
+
+  .tit {
+    width: auto;
+    /* text-align: center; */
+    /* background: #22507614; */
+    color: $baseColor;
+    /* border: dashed 1px #1d4667; */
+    padding: 0 0 10px;
+    /* border-radius: 6px; */
+    /* margin: 5px auto; */
+    margin: 0 22px;
+    display: block;
+    border-bottom: solid 1px #eee;
+
+    i,
+    span {
+      opacity: 1;
+      vertical-align: middle;
+      margin-right: 7px;
+      font-size: 18px;
+    }
+
+    span {
+      font-size: 14px;
+    }
+  }
+
+  dl {
+    padding: 8px 16px 3px 24px;
+    margin-top: 0;
+    margin-bottom: 0;
+    display: inline-block;
+    width: 50%;
+    position: relative;
+    word-break: break-all;
+
+    &:after {
+      content: "";
+      width: 1px;
+      height: 14px;
+      background: #e4e4e4;
+      display: inline-block;
+      position: absolute;
+      right: -5px;
+      top: 50%;
+      margin-top: -3px;
+    }
+
+    .s-name {
+      color: $baseColor;
+      display: inline-block;
+      width: 190px;
+      font-size: 14px;
+      vertical-align: top;
+      margin-top: 11px;
+      text-align: right;
+
+      i {
+        margin-left: 5px;
+
+        &.icon {
+          font-size: 13px;
+          opacity: 0.92;
+          margin-left: 2px;
+          margin-right: 4px;
+        }
+      }
+    }
+
+    .item {
+      position: relative;
+      border: dashed 1px #fff;
+      border-radius: 6px;
+      display: block;
+      padding: 6px 8px 6px 27px;
+      cursor: pointer;
+
+      &:hover {
+        border-color: $baseColor;
+        color: $baseColor;
+
+        i,
+        a {
+          color: $baseColor;
+        }
+      }
+
+      // &:after {
+      //   content: "";
+      //   width: 1px;
+      //   height: 12px;
+      //   background: #dcdcdc;
+      //   position: absolute;
+      //   right: -25px;
+      //   top: 2px
+      // }
+
+      i {
+        opacity: 0.8;
+        margin-right: 8px;
+        vertical-align: middle;
+        position: absolute;
+        left: 4px;
+        top: 50%;
+        margin-top: -11px;
+        height: 22px;
+        line-height: 22px;
+        font-size: 16px;
+      }
+
+      a {
+        color: rgba(0, 0, 0, 0.82);
+        display: inline-block;
+        font-size: 13px;
+        position: relative;
+        overflow: initial !important;
+        -webkit-transition: all 0.2s ease-in;
+        -moz-transition: all 0.2s ease-in;
+        -o-transition: all 0.2s ease-in;
+        transition: all 0.2s ease-in;
+        width: auto !important;
+        vertical-align: middle;
+        word-break: break-word;
+
+        &:hover {
+          color: $baseColor;
+
+          // &:after {
+          //   content: '';
+          //   position: absolute;
+          //   bottom: -4px;
+          //   left: 0;
+          //   right: 0;
+          //   border-bottom: solid 1px $baseColor;
+          // }
+        }
+      }
+    }
+
+    &:last-child {
+      .list-box {
+        border-bottom: none;
+      }
+    }
+  }
+}
+// .el-submenu .el-menu {
+//   height: auto !important;
+// }
+.el-menu--vertical {
+  > .el-menu--popup {
+    overflow: auto; //不用atuo 超出不出滚动条
+    .el-submenu__title,
+    .el-menu-item {
+      height: auto !important;
+      line-height: 1.4 !important;
+      padding: 8px 0;
+      text-align: left;
+      white-space: normal;
+      word-break: break-word;
+      background: none;
+      i.iconfont {
+        color: #fff;
+        margin-right: 8px;
+      }
+    }
+  }
+  .el-submenu {
+    .el-submenu__title {
+      .el-submenu__icon-arrow {
+        display: none;
+      }
+    }
+    &:hover {
+      .el-submenu__title {
+        background-color: rgba(0, 0, 0, 0.29) !important;
+        i.iconfont {
+          color: $baseColor;
+        }
+      }
+    }
+
+    &.is-opened {
+      .el-submenu__title {
+        background-color: rgba(0, 0, 0, 0.29) !important;
+        i.iconfont {
+          color: $baseColor;
+        }
+      }
+    }
+  }
+  .el-menu-item {
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.29) !important;
+      i.iconfont {
+        color: $baseColor;
+      }
+    }
+
+    &.is-opened {
+      background-color: rgba(0, 0, 0, 0.29) !important;
+      i.iconfont {
+        color: $baseColor;
+      }
+    }
+  }
+  // .el-menu-item{
+  //   &:hover{
+  //     background:#FFF !important;opacity:1;
+  //     span{color:$baseColor}
+  //     i.iconfont{color:$baseColor}
+  //   }
+  //   &.is-opened{
+  //     background:#FFF;opacity:1;
+  //     span{color:$baseColor}
+  //     i.iconfont{color:$baseColor}
+  //   }
+  // }
+}
+</style>