okjysweb/okjys-admin.git

<template>
  <nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
    <div class="site-navbar__header">
      <h1
        style="float: left"
        class="site-navbar__brand"
        @click="$router.push({ name: 'home' })"
      >
        <img
          src="../assets/img/logo.png"
          alt=""
          style="float: left; width: 50px; margin-left: 4px;    border-radius: 50%;"
        />
        <a class="site-navbar__brand-lg" href="javascript:;"> CME</a>
      </h1>
    </div>
    <div class="site-navbar__body clearfix">
      
      <el-menu class="site-navbar__menu" mode="horizontal">
        <!-- 收缩菜单 -->
        <el-menu-item
        
          class="site-navbar__switch"
          index="0"
          @click="sidebarFold = !sidebarFold"
        >
          <icon-svg name="zhedie"></icon-svg>
        </el-menu-item>
 
        <!-- 顶部导航 -->
 
        <!-- <el-menu-item index="1">处理中心</el-menu-item> -->
        <!-- <el-submenu index="2">
          <template slot="title">我的工作台</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
          <el-menu-item index="2-3">选项3</el-menu-item>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项1</el-menu-item>
            <el-menu-item index="2-4-2">选项2</el-menu-item>
            <el-menu-item index="2-4-3">选项3</el-menu-item>
          </el-submenu>
        </el-submenu> -->
        <!-- <el-menu-item index="3" disabled>消息中心</el-menu-item>
        <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> -->
 
        <!-- 以下是顶部导航 -->
        <main-navbar-sub-menu
          v-for="item in menuListArr"
          :key="item.menuId"
          :menu="item"
          :dynamicMenuRoutes="dynamicMenuRoutes"
          :type="0"
        >
        </main-navbar-sub-menu>
      </el-menu>
      <div
        class="site-navbar__menu site-navbar__menu--right"
        mode="horizontal"
        style="display: flex;"
      >
        <!-- 模糊搜索 -->
        <el-autocomplete
        v-model="state"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入菜单名称"
        suffix-icon="el-icon-search"
        clearable
        @select="handleSelect"
        class="searchInput"
        ></el-autocomplete>
        <!-- <el-menu-item class="site-navbar__avatar" index="3"> -->
          <div
            @click="showChat()"
            style="
              width: 31px;
              float: left;
              padding: 10px 0px;
              margin-right: 10px;
              margin-left: 10px;
            "
          >
            <img
              style="display: block; width: 100%"
              src="../assets/img/Vector.png"
              alt=""
            />
          </div>
          <el-badge :value="unreadNum" v-show="unreadNum > 0"
            style="align-items: center;display: flex;padding-top: 15px;padding-right: 15px;"></el-badge>
          <!-- <el-button stype="info" icon="el-icon-s-comment" style="margin-right: 0px;border: none;" @click="showChat()"></el-button> -->
          <div style="width:20px;display: flex;padding: 20px 5px;" v-if="kefuInfo.isOnline == true">
            <img src="~@/assets/image/online.png" width="10px" height="10px" 
                style="align-items: center;display: flex;"/>
          </div>
          <div style="width:20px;display: flex;padding: 20px 5px;" v-if="kefuInfo.isOnline == false">
            <div style="width:10px;height:10px;background:#DEDEDE;border-radius: 5px;">
            </div>
          </div>
          <div style="align-items: center;display: flex;">
            <el-dropdown
              :show-timeout="0"
              placement="bottom"
              class="ddd1"
              @visible-change="visibleChange"
              style="align-items: center;"
            >
              <!-- <img src="~@/assets/image/online.png" width="10px" height="10px"/> -->
              <span class="el-dropdown-link">
                {{ userName }}
                <i
                  class="el-icon-arrow-down el-icon--right"
                  v-show="!dropdownVisiable"
                ></i>
                <i
                  class="el-icon-arrow-up el-icon--right"
                  v-show="dropdownVisiable"
                ></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="customerCentor()" v-show="isKeFu"
                  ><span class="el-icon-edit"></span>
                  客服中心</el-dropdown-item
                >
                <el-dropdown-item @click.native="updatePasswordHandle()"
                  ><span class="el-icon-edit"></span>
                  修改登录密码</el-dropdown-item
                >
                <el-dropdown-item @click.native="updatePassmoneyHandle()"
                  ><span class="el-icon-coin"></span
                  >修改资金密码</el-dropdown-item
                >
                <!-- <el-dropdown-item v-if="isAuth('sys:user:update')" @click.native="message()">谷歌验证器</el-dropdown-item> -->
                <el-dropdown-item @click.native="logoutHandle()"
                  ><span class="el-icon-switch-button"></span
                  >退出登录</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          
        <!-- </el-menu-item> -->
      </div>
    </div>
    <!-- 弹窗, 修改密码，资金密码，谷歌验证器 main-navbar-update-googleAuthCode-->
    <customer-centor
      v-if="customerCentorVisible"
      ref="customerCentor"
    ></customer-centor>
    <update-password
      v-if="updatePassowrdVisible"
      ref="updatePassowrd"
    ></update-password>
    <update-passmoney
      v-if="updatePassmoneyVisible"
      ref="updatePassmoney"
    ></update-passmoney>
    <update-Passgoogle
      v-if="googleAuthCode"
      ref="updatePassgoogle"
    ></update-Passgoogle>
  </nav>
</template>
 
<script>
import CustomerCentor from "./main-navbar-customerCentor";
import UpdatePassword from "./main-navbar-update-password";
import UpdatePassmoney from "./main-navbar-update-passmoney";
import UpdatePassgoogle from "./main-navbar-update-googleAuthCode";
import MainNavbarSubMenu from "./main-navbar-sub-menu";
import { clearLoginInfo } from "@/utils";
import {
  unreadNewAdminOnlineChatAction,
} from '@/api/chat'
export default {
  data() {
    return {
      customerCentorVisible: false,
      updatePassowrdVisible: false,
      updatePassmoneyVisible: false,
      googleAuthCode: false,
      dynamicMenuRoutes: [],
      dropdownVisiable: false,
      isKeFu:false,
      restaurants: [],
      state: '',
      timeout:  null,
      kefuInfo:{},
      unreadNum:0,
    };
  },
  components: {
    CustomerCentor,
    UpdatePassword,
    UpdatePassmoney,
    UpdatePassgoogle,
    MainNavbarSubMenu,
  },
  computed: {
    navbarLayoutType: {
      get() {
        return this.$store.state.common.navbarLayoutType;
      },
    },
    sidebarFold: {
      get() {
        return this.$store.state.common.sidebarFold;
      },
      set(val) {
        this.$store.commit("common/updateSidebarFold", val);
      },
    },
    mainTabs: {
      get() {
        return this.$store.state.common.mainTabs;
      },
      set(val) {
        this.$store.commit("common/updateMainTabs", val);
      },
    },
    userName: {
      get() {
        return this.$store.state.user.name;
      },
    },
    googleAuthBind: {
      get() {
        return this.$store.state.user.googleAuthBind;
      },
    },
    menuListArr: {
      get() {
        return this.$store.state.common.menuListArr;
      },
      set(val) {
        this.$store.commit("common/updateMenuTopList", val);
      }, //重新存过滤后的数组updateMenuTopList
    },
    // kefuInfo: {
    //   get () { 
    //     return this.$store.state.common.kefuInfo 
    //   },
    //   set (val) { this.$store.commit('common/updateKefuInfo', val) }
    // },
  },
  created() {
    let menuListArr = JSON.parse(sessionStorage.getItem("menuList") || "[]");
    this.menuListArr = menuListArr.filter(
      (item) => item.orderNum < 8 && item.orderNum > 0
    );
    // console.log("menuListArr = " + JSON.stringify(this.menuListArr))
    this.dynamicMenuRoutes = JSON.parse(
      sessionStorage.getItem("dynamicMenuRoutes") || "[]"
    );
 
    // 获取当前管理员信息
    this.$http({
      url: this.$http.adornUrl('/sys/user/info'),
      method: 'get',
      params: this.$http.adornParams()
    }).then(({data}) => {
      this.$login = true;
    })
    if(!this.IS_DEBUG){
      setTimeout(()=>{
        this.unreadNumCall();
      },2000);
    }
 
  },
  mounted() {
    let searchAll = JSON.parse(sessionStorage.getItem("menuList") || "[]");
    //   this.restaurants = searchAll.filter(
    //   (item) => item.list
    // );
    console.log(searchAll)
      //console.log(this.restaurants)
    this.filterMenuList()
    console.log(this.restaurants)
    
    this.$bus.$on('updateKefuInfo', (data)=>{
      console.log("updateKefuInfo = " + JSON.stringify(data));
      this.kefuInfo = data;
    })
      
  },
  beforeDestroy() {
    this.$bus.$off('updateKefuInfo')
  },
  methods: {
    unreadNumCall(){
      //
      if(this.$login){
        unreadNewAdminOnlineChatAction({},(data)=>{
          console.log("unreadNewAdminOnlineChatAction = " + JSON.stringify(data));
          this.unreadNum = data.data;
        });
      }
      //
      setTimeout(()=>{
        this.unreadNumCall();
      },2000);
      //
    },
    // filterMenuList() {
    //   let searchAll = JSON.parse(sessionStorage.getItem("menuList") || "[]");
    //   // 过滤数组并生成新的数组对象
    //   this.restaurants = searchAll.flatMap(menuItem => {
    //     return menuItem.list?.map(item => ({
    //       value: item.name,
    //       url: item.url,
    //     })) || [];
    //   });
    // },
    // 路由操作
    routeHandle(route) {
      if (route.meta.isTab) {
        // tab选中, 不存在先添加
        var tab = this.mainTabs.filter((item) => item.name === route.name)[0];
        if (!tab) {
          if (route.meta.isDynamic) {
            route = this.dynamicMenuRoutes.filter(
              (item) => item.name === route.name
            )[0];
            if (!route) {
              return console.error("未能找到可用标签页!");
            }
          }
          tab = {
            menuId: route.meta.menuId || route.name,
            name: route.name,
            title: route.meta.title,
            type: isURL(route.meta.iframeUrl) ? "iframe" : "module",
            iframeUrl: route.meta.iframeUrl || "",
          };
          this.mainTabs = this.mainTabs.concat(tab);
        }
        this.menuActiveName = tab.menuId + "";
        this.mainTabsActiveName = tab.name;
      }
    },
    // 客服中心
    customerCentor(){
      this.customerCentorVisible = true;
      this.$nextTick(() => {
        this.$refs.customerCentor.init();
      });
    },
    // 修改密码
    updatePasswordHandle() {
      this.updatePassowrdVisible = true;
      this.$nextTick(() => {
        this.$refs.updatePassowrd.init();
      });
    },
    // 修改资金密码
    updatePassmoneyHandle() {
      this.updatePassmoneyVisible = true;
      this.$nextTick(() => {
        this.$refs.updatePassmoney.init();
      });
    },
    // 谷歌验证码绑定
    updategoogleAuthCode() {
      if (this.googleAuthBind) {
        this.$confirm("谷歌验证器已绑定", "谷歌验证器", {
          //是否已绑定
          distinguishCancelAndClose: true,
          confirmButtonText: "确定",
          cancelButtonText: "解绑",
          type: "success",
        })
          .then(() => {
            this.$message({
              type: "success",
            });
          })
          .catch((action) => {
            if (action === "cancel") {
              this.googleAuthCode = true;
              this.$nextTick(() => {
                this.$refs.updatePassgoogle.init();
              });
            }
          });
      } else {
        this.googleAuthCode = true;
        this.$nextTick(() => {
          this.$refs.updatePassgoogle.init();
        });
      }
    },
    // 退出
    logoutHandle() {
      this.$confirm(`确定进行[退出]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/logOut"),
            method: "post",
            data: this.$http.adornData(),
          }).then(({ data }) => {
            //
            this.$login = false;
            Vue.prototype.$login = false;
            console.log("/logOut");
            this.$bus.$emit("tabsCloseAllHandle", {});
            this.$router.push({ path: "/login" });
            clearLoginInfo();
 
            console.log("this.$login  = " + this.$login);
            //this.$router.push({ name: 'login' })
          });
        })
        .catch(() => {});
    },
    showChat() {
      // this.main.isShowService = !this.main.isShowService;
      this.$router.push({ name: "message" });
    },
    visibleChange(flag) {
      this.isKeFu = Vue.prototype.$isKefu;
      this.dropdownVisiable = flag;
      
      console.log(" this.isKeFu= "+ this.isKeFu);
    },
    message() {
      this.$router.push({ name: "message" });
    },
    querySearchAsync(queryString, cb) { // 模糊搜索
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
 
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 2000 * Math.random());
      },
      createStateFilter(queryString) {// 模糊搜索
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {// 模糊搜索
        const modifiedUrl = item.url.replace(/\//g, '-');
        this.$router.push({ path: modifiedUrl });
      },
      filterMenuList() {
      let searchAll = JSON.parse(sessionStorage.getItem("menuList") || "[]");
      // 过滤数组并生成新的数组对象
      this.restaurants = searchAll.flatMap(menuItem => {
        return menuItem.orderNum > 0 && menuItem.list
          ? menuItem.list
              .filter(item => item.url.trim() !== '')
              .map(item => ({
                value: item.name,
                url: item.url,
              }))
          : [];
      });
    },
  },
};
</script>
<style scoped>
::v-deep .el-menu-item {
  background: none !important;
}
::v-deep .site-navbar__body {
  background: #1c4efa !important;
}
::v-deep .el-submenu__title:hover {
  background-color: #0030ff;
}
.site-navbar {
  background-color: #263238;
}
.el-dropdown {
  color: #fff;
}
::v-deep .el-menu--horizontal {
  border: none !important;
}
.mnbuton {
  width: 0px;
  height: 0px;
  border: none;
}
 
.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}
.el-icon-arrow-down {
  font-size: 12px;
  color: #fff;
}
 
.el-icon-arrow-up {
  font-size: 12px;
  color: #fff;
}
</style>
 
<style lang="scss" scoped>
.ddd {
  ::v-deep .el-submenu__title {
    color: #fff;
  }
  ::v-deep .el-submenu__icon-arrow {
    right: 5px;
    top: 56%;
    color: #fff;
  }
}
.searchInput{
  float: left;
  width: 200px;
  margin-top: 5px;
}
.el-popper[x-placement^=bottom] .popper__arrow::after {
    border-bottom-color: white !important;
}
</style>