暂存

src/components/newLayout/modules/headercopynew.vue

@@ -0,0 +1,303 @@
+<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="输入搜索内容" 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>-->
+
+    <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'})">个人中心</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()">退出登录</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </div>
+</div>
+</template>
+
+<script>
+import {mapGetters} from 'vuex'
+import axios from 'axios'
+export default {
+  data () {
+    return {
+      accountInfo:{},
+      url:"",
+      weather:{},
+      searchValue:'',
+      accountList:[],
+      colorWhite:true,
+      langusge:[]
+    }
+  },
+  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 active_modules_old = JSON.parse(sessionStorage.getItem('active_modules'))
+      let arr = ['module_info','activeApp','active_modules','folderid']
+      arr.forEach(key=>{
+        sessionStorage.removeItem(key)
+      })
+      sessionStorage.setItem('active_account',JSON.stringify(item))
+      await this.basicData.query_userauth()
+      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
+      })
+      let module_info_new = JSON.parse(sessionStorage.getItem('module_info'))
+      let hash_old = window.location.hash.slice(1)
+      let modules_new = []
+      let apps_new = []
+      let flag = 0
+      this.$nextTick(()=>{
+        this.$router.go(0)
+      })
+      // module_info_new.forEach(k=>{
+      //   if (k.systemid === active_modules_old.systemid){
+      //     modules_new = k.modules
+      //   }
+      // })
+      // if (modules_new.length > 0){
+      //   modules_new.forEach(n=>{
+      //     if (n.systemmoduleid === active_modules_old.systemmoduleid){
+      //       apps_new = n.apps
+      //     }
+      //   })
+      //   if (apps_new.length > 0){
+      //     apps_new.forEach(i=>{
+      //       if (i.path === hash_old){
+      //         flag = 1
+      //       }
+      //     })
+      //     if (flag === 1){
+      //       this.$router.replace(hash_old)
+      //     }else {
+      //       console.log(this.$router)
+      //       sessionStorage.setItem('relunch',apps_new[0].path)
+      //       // this.$router.replace(apps_new[0].path)
+      //       /*this.$router.replace(module_info_new[0].modules[0].apps[0].path)*/
+      //     }
+      //   }else {
+      //     this.$router.replace(module_info_new[0].modules[0].apps[0].path)
+      //   }
+      // }else {
+      //   this.$router.replace(module_info_new[0].modules[0].apps[0].path)
+      // }
+
+    },
+    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 () {
+      this.$confirm('是否要退出当前账号?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        sessionStorage.clear()
+        this.$router.push('/')
+      }).catch((err) => {
+        console.log(err)
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        });
+      });
+
+    },
+    changeAccount () {
+      this.$router.push('/accounts')
+    },
+    handleCommand (command) {
+      sessionStorage.setItem('lang',command)
+      this.basicData.query_userauth().then(()=>{
+              this.$router.go(0)
+      })
+
+    },
+    //跳转到应用,并设设置激活模块
+    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})
+
+
+      this.$router.push({path:clickApp[0].path})
+    },
+    async languagelist () {
+      const res = await this.$api.requested({
+        id:10026401
+      })
+      this.langusge = res.data
+    },
+  },
+  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, .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: .2s linear;
+  border-radius: 4px;
+  padding: 5px 40px;
+}
+.weather:hover{
+  background-color: rgba(255 ,255,255,.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>