yos_web/src/components/newLayout/modules/header.vue

<template>
  <div class="flex">
    <el-popover placement="top" width="300">
      <div class="app-flex">
        <p
          class="appLink"
          v-for="app in menuApp"
          :key="app.index"
          @click="handelMenuAppClick(app, 'app')"
        >
          {{ app.systemappname }}
        </p>
      </div>
      <div slot="reference" class="search_panel">
        <input
          @focus="colorWhite = false"
          @blur="colorWhite = true"
          :placeholder="$t('输入搜索内容')"
          v-model="searchValue"
        />
        <i
          class="el-icon-search"
          :style="colorWhite ? 'color:#fff' : 'color:#000'"
        ></i>
      </div>
    </el-popover>
    <div class="right-operation flex-align-center">
      <!-- <div class="weather">
      <p>今日天气:{{weather.daily?weather.daily[0].dayText:""}}</p>
      <p>{{weather.daily?weather.daily[0].low:""}}℃ ~ {{weather.daily?weather.daily[0].high:""}}℃</p>
    </div> -->
      <!-- 语言   -->
      <!--    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link" style="color: #FFF;">
        语言<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="item in langusge" :key="item.index" :command="item.languagecode">{{item.languagename}}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>-->
      <!--    <el-divider direction="vertical"></el-divider>-->

      <svg
        t="1725853431060"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="9958"
        width="16"
        height="16"
      >
        <path
          d="M512 0a512 512 0 1 0 512 512A513.4848 513.4848 0 0 0 512 0z m371.2 262.4a467.968 467.968 0 0 1 76.8 217.6h-256A990.464 990.464 0 0 0 688.0256 307.2a1241.0368 1241.0368 0 0 0 195.1744-44.8zM838.4 204.8a1267.456 1267.456 0 0 1-166.4 38.4 1264.128 1264.128 0 0 0-51.2-166.4 454.1952 454.1952 0 0 1 217.6 128zM384 480a1396.1728 1396.1728 0 0 1 16.0256-166.4c35.2256 3.2256 73.6256 6.4 108.8 6.4 38.4 0 73.6256-3.1744 108.8-6.4a946.2784 946.2784 0 0 1 15.9744 166.4z m256 64a1396.1728 1396.1728 0 0 1-15.9744 166.4c-38.4-3.1744-73.5744-6.4-111.9744-6.4s-73.6256 3.2256-108.8 6.4a946.2784 946.2784 0 0 1-15.9744-166.4zM480 64h64a1058.1504 1058.1504 0 0 1 67.2256 185.6A533.7088 533.7088 0 0 1 512 256c-32 0-64-3.1744-96-3.1744a1089.8944 1089.8944 0 0 1 64-188.8256z m-76.8 12.8a843.6736 843.6736 0 0 0-51.2 166.4A1398.8352 1398.8352 0 0 1 185.6 204.8a454.1952 454.1952 0 0 1 217.6-128zM140.8 262.4A1241.0368 1241.0368 0 0 0 336.0256 307.2a990.464 990.464 0 0 0-15.9744 172.8h-256a455.68 455.68 0 0 1 76.8-217.6z m0 499.2a467.968 467.968 0 0 1-76.8-217.6h256A990.464 990.464 0 0 0 336.0256 716.8a1241.0368 1241.0368 0 0 0-195.2256 44.8zM185.6 819.2a1267.456 1267.456 0 0 1 166.4-38.4 1264.128 1264.128 0 0 0 51.2 166.4 454.1952 454.1952 0 0 1-217.6-128z m358.4 140.8h-64a1058.1504 1058.1504 0 0 1-67.1744-185.6c32-3.1744 64-3.1744 96-3.1744s64 3.2256 96 3.2256a900.7616 900.7616 0 0 1-60.7744 185.6z m76.8-12.8a843.6736 843.6736 0 0 0 51.2-166.4 1398.8352 1398.8352 0 0 1 166.4 38.4 454.1952 454.1952 0 0 1-217.6 128z m262.4-185.6A1241.0368 1241.0368 0 0 0 687.9744 716.8a990.464 990.464 0 0 0 16.0256-172.8h256a455.68 455.68 0 0 1-76.8 217.6z"
          fill="#FFFFFF"
          p-id="9959"
        ></path>
      </svg>
      <el-dropdown style="margin-left: 5px; margin-right: 30px">
        <!--      <el-button type="default" size="small" style="margin-right: 10px;">
        {{languagename}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>

      </el-button>-->
        <span class="el-dropdown-link">
          <div class="flex">
            {{ languagename }}<i class="el-icon-arrow-down el-icon--right"></i>
          </div>
        </span>

        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="item in langusge"
            :key="item.index"
            @click.native="i18nChangeLanguage(item.languagecode)"
            >{{ item.languagename }}</el-dropdown-item
          >
          <!-- <el-dropdown-item @click.native="i18nChangeLanguage('EN')">English</el-dropdown-item> -->
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown>
        <span class="el-dropdown-link">
          <div class="flex">
            {{ accountInfo.name }}-{{ accountInfo.sitename
            }}<i class="el-icon-arrow-down el-icon--right"></i>
          </div>
        </span>
        <el-dropdown-menu
          style="width: 200px; text-align: center"
          slot="dropdown"
        >
          <el-dropdown-item
            @click.native="$router.push({ path: '/user_center' })"
            >{{ $t("个人中心") }}</el-dropdown-item
          >
          <!-- <el-dropdown-item v-if="canChangeSite" @click.native="$router.replace({path:'/accounts'})">切换账号</el-dropdown-item> -->
          <el-dropdown-item
            v-for="item in accountList"
            :key="item.index"
            divided
            @click.native="selectAccount(item)"
          >
            <div class="flex-align-center flex-between">
              <p>
                <span class="avatar-mini">{{
                  item.enterprisename
                    ? item.enterprisename.substr(0, 1)
                    : item.sitename.substr(0, 1)
                }}</span
                ><span>{{
                  item.enterprisename ? item.enterprisename : item.sitename
                }}</span>
              </p>
              <small>{{ item.name }}</small>
            </div>
          </el-dropdown-item>
          <el-dropdown-item divided @click.native="loginOut()">{{
            $t("退出登录")
          }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import axios from "axios";
import Vue from "vue";

export default {
  data() {
    return {
      accountInfo: {},
      url: "",
      weather: {},
      searchValue: "",
      accountList: [],
      colorWhite: true,
      langusge: [],
      nowType: "ZH",
      languagename: "",
    };
  },
  props: ["onRender"],
  computed: {
    ...mapGetters({
      siteinfo: "siteinfo",
      menuApp: "menuApp",
    }),
    canChangeSite() {
      let accounts = JSON.parse(sessionStorage.getItem("account_list"));
      if (accounts.length > 1) return true;
    },
  },
  methods: {
    // 选择登录账号
    async selectAccount(item) {
      let arr = ["module_info", "active_modules", "folderid"];
      arr.forEach((key) => {
        sessionStorage.removeItem(key);
      });
      sessionStorage.setItem("active_account", JSON.stringify(item));
      this.siteInfos();
      this.accountInfo = JSON.parse(sessionStorage.getItem("active_account"));
      this.accountList = JSON.parse(
        sessionStorage.getItem("account_list")
      ).filter((e) => {
        return e.siteid !== this.accountInfo.siteid;
      });
    },
    async getWeather() {
      const res = await axios.get(this.url);
      this.weather = res.data.data;
    },
    siteInfos() {
      this.$store.dispatch("querySiteInfo", {
        classname: "webmanage.site.site",
        method: "querySite",
        content: {},
      });
    },
    loginOut() {
      let lang = localStorage.getItem("lang");
      this.$confirm(this.$t("是否要退出当前账号") + "?", this.$t("提示"), {
        confirmButtonText: this.$t("确定"),
        cancelButtonText: this.$t("取消"),
        type: "warning",
      })
        .then(() => {
          sessionStorage.clear();
          localStorage.setItem("lang", lang);
          this.$router.push("/");
          location.reload();
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            type: "info",
            message: this.$t("已取消"),
          });
        });
    },
    changeAccount() {
      this.$router.push("/accounts");
    },
    //跳转到应用,并设设置激活模块
    handelMenuAppClick(app, type) {
      let system = JSON.parse(sessionStorage.getItem("module_info"));

      let mod = system
        .filter((e) => {
          return e.systemid === app.systemid;
        })[0]
        .modules.filter((e) => {
          return e.systemmoduleid === app.systemmoduleid;
        })[0];

      let clickApp = mod.apps.filter((e) => {
        return e.systemappid === app.systemappid;
      });

      sessionStorage.setItem("active_modules", JSON.stringify(mod));

      this.$emit(
        "getModules",
        system.filter((e) => {
          return e.systemid === app.systemid;
        })[0].modules,
        type
      );

      this.$store.dispatch("setActiveApp", {
        name: app.systemappname,
        app: clickApp[0],
        val: this.searchValue,
      });

      //activeApp

      this.$router.push({ path: clickApp[0].path });
    },

    async languagelist() {
      const res = await this.$api.requested({
        id: 10026401,
      });
      this.langusge = res.data;
      this.nowType = localStorage.getItem("lang")
        ? localStorage.getItem("lang")
        : "ZH";
      this.languagename =
        this.langusge.find((v) => v.languagecode == this.nowType)
          .languagename || "简体中文";
    },
    async i18nChangeLanguage(type) {
      this.nowType = type;
      this.languagename =
        this.langusge.find((v) => v.languagecode == this.nowType)
          .languagename || "简体中文";
      localStorage.setItem("lang", type);
      this.$nextTick(() => {
        this.$i18n.locale = type;
        this.$api
          .requested({
            classname: "sysmanage.develop.userauthforweb.userauth",
            method: "query_userauth",
            content: {
              place: 1,
              date: Date.now(),
            },
          })
          .then((res) => {
            let active_modules = JSON.parse(
              sessionStorage.getItem("active_modules")
            );
            res.data.forEach((v) => {
              let item = v.modules.find((e) => {
                return e.systemmoduleid == active_modules.systemmoduleid;
              });
              if (item) {
                active_modules = item;
                try {
                  let activeApp = item.apps.find(
                    (v) =>
                      v.systemmoduleid ==
                      this.$store.getters.activeApp.systemmoduleid
                  );
                  this.$store.commit("activeApp", activeApp);
                } catch (error) {}
              }
            });
            sessionStorage.setItem("module_info", JSON.stringify(res.data));
            sessionStorage.setItem(
              "active_modules",
              JSON.stringify(active_modules)
            );
            this.basicData.querySite_Parameter();
            this.$emit("onRender");
          });
      });
    },
  },

  mounted() {
    this.siteInfos();
    this.languagelist();

    this.accountInfo = JSON.parse(sessionStorage.getItem("active_account"));
    this.accountList = JSON.parse(
      sessionStorage.getItem("account_list")
    ).filter((e) => {
      return e.siteid !== this.accountInfo.siteid;
    });
    this.basicData.querySite_Parameter();
  },
};
</script>
<style>
.el-header {
  height: 50px !important;
}
.search_panel {
  position: relative;
}
.search_panel i {
  position: absolute;
  right: 0px;
  height: 30px;
  width: 30px;
  text-align: center;
  line-height: 30px;
  color: #333;
}
.search_panel input {
  background: rgba(255, 255, 255, 0.2);
  height: 30px;
  line-height: 30px;
  width: 300px;
  padding: 0 30px 0 20px;
  border: none;
  border-radius: 30px;
  color: #fff;
  outline: none;
}
.search_panel input::placeholder {
  color: #fff;
}
.search_panel input:focus {
  background: #fff;
  color: #333;
}
.search_panel input:focus::placeholder {
  color: #333;
}
</style>
<style scoped>
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  color: #fff;
}
.right-operation {
  padding: 0 20px;
}
.search_panel {
  margin: 16px 0;
}
.weather {
  font-size: 12px;
  margin-right: 16px;
  color: #f1f2f3;
  transition: 0.2s linear;
  border-radius: 4px;
  padding: 5px 40px;
}
.weather:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}
.appLink {
  padding: 2px 5px;
  border: 1px solid #f1f2f3;
  border-radius: 5px;
  margin-bottom: 10px;
  margin-left: 5px;
  cursor: pointer;
  font-size: 12px;
}
.app-flex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.avatar-mini {
  display: inline-block;
  position: relative;
  height: 20px;
  width: 20px;
  line-height: 20px;
  text-align: center;
  margin-right: 5px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  border-radius: 100%;
  background: #3874f6;
}
.inactive {
  background: red !important;
}
</style>