yiliangyiyun-pc/src/layout/index/top/index.vue

<template>
  <div class="winseaview-top" id="winseaview-top">
    <div class="top-bar__left">
      <!-- 伸缩icon -->
      <div class="winseaview-breadcrumb" :class="[{ 'winseaview-breadcrumb--active': isCollapse }]">
        <i class="iconfont icon-shouqi" @click="setCollapse"></i>
      </div>
      <!-- </div>
    <div class="top-bar__title"> -->
      <!-- 面包屑 -->
      <div class="top-bar__item top-bar__item--show">
        <top-menu v-if="showMenu"></top-menu>
        <bread-crumb v-if="!showMenu" />
        <smallTips v-if="showTooltip" />
      </div>
      <span class="top-bar__item" v-if="showSearch">
        <top-search></top-search>
      </span>
    </div>
    <div class="top-bar__right">
      <!-- 使用租户 -->
      
      <div class="hidden-content">
        <el-input ref="hiddenFocus" type="password" class="input-Style" v-model="barCode" size="small" @focus="focus" @blur="blur" autocomplete="off" auto-complete="new-password"
          @keyup.enter.native="payCode" placeholder="扫码枪内容"></el-input>
        <div v-show="isOpenCodeGun" class="code-scan-text">扫码枪已连接</div>
        <div v-show="!isOpenCodeGun" @click="setCodeGun" class="code-scan-text">点我扫码</div>
        <!--  -->
        <el-dialog title="扫描二维码" :visible.sync="smAlert"  :before-close="cancel">
          <div class="btn-list">
            <el-button v-hasPermission="`acquisitionManagement.acquisitionQuality.initial`"
                v-if="btnStatus.status1" @click="goToPage(1)" class="btn_css">去初检
              </el-button>
              <el-button v-hasPermission="`acquisitionManagement.acquisitionQuality.con`"
                v-if="btnStatus.status2" v-show="toPageData.qualityInspectionManagement.confirm != '1'"  @click="goToPage(2)" class="btn_css">去确认质检
              </el-button>
              <el-button v-hasPermission="`acquisitionManagement.acquisitionQuality.again`"
                v-if="btnStatus.status3" v-show="toPageData.qualityInspectionManagement.confirm != '1'" @click="goToPage(3)" class="btn_css">去复检
              </el-button>
              <el-button v-hasPermission="`acquisitionManagement.acquisitionWeight.mao`"
                v-if="btnStatus.status4" @click="goToPage(4)" class="btn_css" >去称毛重
              </el-button>
              
              <el-button v-hasPermission="`acquisitionManagement.acquisitionWeight.weight`" 
                v-if="btnStatus.status5" @click="goToPage(6)" class="btn_css">去称皮重
              </el-button>
              <el-button v-hasPermission="`acquisitionManagement.acquisitionPay.add`" v-if="btnStatus.status6"
                @click="goToPage(5)" class="btn_css">去结算</el-button>
              
              <!-- </el-button> -->
                <!-- v-if="btnStatus.status2||btnStatus.status3||btnStatus.status4||btnStatus.status5" @click="goToPage(6)" class="btn_css">去称皮重 -->
              <!-- v-show="toPageData.qualityInspectionManagement.confirm != '1'"  -->
              <el-button @click="cancel" class="btn" >关闭</el-button>
          </div>
        </el-dialog>
      </div>
      <div class="compName-row">
        <!-- <span class="compName">{{compName}}</span> -->
        <el-select style='width:260px;' @change='compNameChange' v-model="compName" placeholder="请选择">
        <el-option
          v-for="item in compNameoptions"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
      </div>
      <div v-if="getDay" class="right-menu-item hover-effect dayClass">
        {{ $t('common.trialDays') }}
        <span style="padding: 0 2px">{{ getDay }}</span>{{ $t('common.days') }}
      </div>
      <el-tooltip v-if="showColor" effect="dark" :content="$t('navbar.color')" placement="bottom">
        <div class="top-bar__item">
          <top-color></top-color>
        </div>
      </el-tooltip>

      <el-tooltip v-if="showTheme" effect="dark" :hide-after="1500" :content="$t('navbar.theme')" placement="bottom">
        <div class="top-bar__item top-bar__item--show">
          <top-theme></top-theme>
        </div>
      </el-tooltip>

      <!-- <el-tooltip effect="dark"
                  :content="$t('navbar.language')"
                  placement="bottom">
        <div class="top-bar__item top-bar__item--show">
          <top-lang></top-lang>
        </div>
      </el-tooltip> -->
      <el-tooltip v-if="showFullScren" effect="dark" :content="
          isFullScren ? $t('navbar.screenfull') : $t('navbar.screenfullF')
        " placement="bottom">
        <div class="top-bar__item">
          <i :class="isFullScren ? 'el-icon-full-screen' : 'el-icon-full-screen'" @click="handleScreen"></i>
        </div>
      </el-tooltip>
      <img class="top-bar__img" v-lazy="userInfo.avatar" />
      <el-dropdown>
        <span class="el-dropdown-link">
          <span>{{ userInfo.showRoleName }} : {{ userInfo.staffName }}</span>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-s-custom" @click.native="personalFlag = true">
            {{ $t('navbar.personalInformation') }}
          </el-dropdown-item>
          <el-dropdown-item icon="el-icon-s-promotion" @click.native="passwordFlag = true">
            {{ $t('navbar.uploadPsw') }}
          </el-dropdown-item>
          <!-- <el-dropdown-item>
            <router-link to="/info/index">{{$t('navbar.userinfo')}}</router-link>
          </el-dropdown-item> -->
          <el-dropdown-item v-if="showSetting" icon="el-icon-s-tools" @click.native="settingDrawer = true">
            {{ $t('navbar.layoutSetting') }}
          </el-dropdown-item>
          <el-dropdown-item @click.native="logout" divided>{{
            $t('navbar.logOut')
          }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <topSetting v-model="settingDrawer" @close="() => (settingDrawer = !settingDrawer)" />

    <!--个人信息-->
    <WinseaContentModal v-model="personalFlag" :title="$t('navbar.personalInformation')">
      <el-form ref="personalMsg" :model="passwordMsg" label-position="right" label-width="150px">
        <el-form-item :label="$t('login.name')" prop="originalPassword">
          {{ userInfo.staffName }}
        </el-form-item>
        <el-form-item :label="$t('login.account')" prop="newPassword">
          {{ account }}
        </el-form-item>
        <el-form-item :label="$t('login.phone')" prop="newPassword">
          {{ userInfo.staffMobilePhone }}
        </el-form-item>
        <el-form-item :label="$t('login.role')" prop="newPassword">
          {{ userInfo.showRoleName }}
        </el-form-item>
        <el-form-item :label="$t('login.dept')" prop="newPassword">
          {{ userInfo.deptName }}
        </el-form-item>
        <el-form-item :label="$t('login.company')" prop="newPassword">
          <div class="company-info">
            {{ userInfo.compName }}
          </div>
        </el-form-item>
      </el-form>
    </WinseaContentModal>
    <!--修改密码-->
    <WinseaContentModal v-model="passwordFlag" :title="$t('navbar.uploadPsw')">
      <el-form ref="passwordMsg" :model="passwordMsg" :label-width="language == 'en' ? '156px' : '100px'"
        :rules="passwordMsgRules">
        <el-form-item :label="$t('login.originalPassword') + $t('common.colon')" prop="originalPassword">
          <ws-input type="password" :placeholder="$t('login.message04')" v-model="passwordMsg.originalPassword"
            style="width: 318px" />
        </el-form-item>
        <el-form-item :label="$t('login.newPassword') + $t('common.colon')" prop="newPassword">
          <ws-input type="password" v-model="passwordMsg.newPassword" :placeholder="$t('login.verification01')"
            style="width: 318px" />
        </el-form-item>
        <el-form-item :label="$t('login.confirmPassword') + $t('common.colon')" prop="password">
          <ws-input type="password" v-model="passwordMsg.password" :placeholder="$t('login.verification01')"
            style="width: 318px" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <ws-button @click="passwordFlag = false">{{
          $t('showMessage.cancel')
        }}</ws-button>
        <ws-button type="primary" @click="savePassword('passwordMsg')">{{
          $t('showMessage.confirm')
        }}</ws-button>
      </span>
    </WinseaContentModal>
  </div>
</template>
<script>
  import {
    changePasswordByPwd,
    getcomp
  } from '@/model/indexRx'
  import { fastLogin, logout, login,complogin, getRoule, getCurrentUserInfo, companyInfo, isLandBased, getAccountLoginHistoryCount, updateShowInfo }
  from '@/model/indexRx'
  import Cookies from 'js-cookie'
  import { setToken, getCompanyId, clearStorage } from '@/utils/auth'
  import {
    mapActions,
    mapGetters,
    mapState
  } from 'vuex'
  import {
    fullscreenToggel,
    listenfullscreen
  } from '@/utils/util'
  import {
  getTenantInfoByUser,
} from '@/model/signIn/index'
  import notification from '../../../notification'
  import topMenu from './top-menu'
  import topSearch from './top-search'
  import topTheme from './top-theme'
  import topColor from './top-color'
  import topNotice from './top-notice'
  import topLang from './top-lang'
  import topSetting from './top-setting'
  import breadCrumb from '@/components/Breadcrumb'
  import {
    EventBus
  } from 'base-core-lib'
  import {
    validPassword
  } from '@/utils/validate'
  import smallTips from '@/components/WinseaCom/smallTips'
  import {
    getLook
  } from '@/model/warehouse/index'
  import {
    getQRCodeData
  } from '@/model/houseSelfCollect/index'


  const validPasswordRule = function(rule, value, callback) {
    if (!validPassword(value)) {
      callback(new Error(this.$t('login.verification01')))
    } else {
      callback()
    }
  }
  const validPasswordRule2 = function(rule, value, callback) {
    if (!value) {
      callback(new Error(this.$t('login.verification02')))
    } else if (value !== this.passwordMsg.newPassword) {
      callback(new Error(this.$t('login.verification03')))
    } else {
      callback()
    }
  }
  export default {
    components: {
      topMenu,
      topSearch,
      topTheme,
      topColor,
      topNotice,
      topLang,
      topSetting,
      breadCrumb,
      smallTips,
    },
    name: 'top',
    data() {
      return {
        //status1:已初检未称毛重状态 status2:已初检且已称毛重状态  status3:已复检且已称毛重  status4:已复检且已称皮重状态
        //status5:已确认质检且已称皮重且未结算状态  status6:已结算状态
        btnStatus: {
          status1: false,
          status2: false,
          status3: false,
          status4: false,
          status5: false,
          status6: false,
        },
        toPageData: {},
        userINfo: {},
        barCode: '',
        compNameoptions:[],
        isOpenCodeGun: false,
        smAlert: false,
        showList: [
          'maintenancePlanList',
          'maintenanceReportList',
          'navigationMaterialList',
          'protectionEntry',
          'protection',
          'newlyIncreased',
          'clientEdit',
          'staticDetail',
          'maApplicationAdd',
          'maApplicationEdit',
          'maApplicationLabel',
          'monthContrastList',
        ],
        settingDrawer: false,
        personalFlag: false,
        passwordFlag: false,
        passwordMsgRules: {
          originalPassword: [{
            required: true,
            message: ' ',
            trigger: 'blur'
          }],
          // newPassword: [
          //   {
          //     required: true,
          //     trigger: 'blur',
          //     validator: validPasswordRule.bind(this),
          //   },
          // ],
          // password: [
          //   {
          //     required: true,
          //     trigger: 'blur',
          //     validator: validPasswordRule2.bind(this),
          //   },
          // ],
        },
        passwordMsg: {
          originalPassword: '', // 原始密码
          newPassword: '', // 新密码
          password: '', // 二次输入密码
        },
        loginForm:{},
        // roleName: '',
        // phone: '',
        // roleId: '',
        // deptName: '',
        // deptId: '',
        // staffName: '',
        account: localStorage.getItem('ws-pf_account'),
        compName: localStorage.getItem('ws-pf_compName'),
        companyId: localStorage.getItem('ws-pf_compId'),
        cangid:'',
        UserInfo:JSON.parse(localStorage.getItem('ws_login_getTenantInfoByUser')),
        tmp:{},
      }
    },
    filters: {},
    created() {
      // this.getUserInfo()
      this.getUserWorseHouse();
      this.userINfo = {
        userCompany: localStorage.getItem('ws-pf_compId'),
        userName: localStorage.getItem('ws-pf_staffName'),
      }
         listenfullscreen(this.setScreen)
      getcomp({userMobilePhone:this.UserInfo.loginInfo.userMobilePhone}).toPromise().then((res)=>{
        this.compNameoptions=res
      })
    },
    
    mounted() {
   
      // this.complogin({username: Cookies.get('ws_login_account'),
      // password: Cookies.get('ws_login_pwd'),
      // companyName: this.compName})
      // var res=this.complogin({username: Cookies.get('ws_login_account'),
      // password: 111111,
      // companyName: this.compName})
      // console.log(res)
    },
    computed: {
      ...mapState({
        showDebug: (state) => state.commonStore.showDebug,
        showTheme: (state) => state.commonStore.showTheme,
        showLock: (state) => state.commonStore.showLock,
        showFullScren: (state) => state.commonStore.showFullScren,
        showCollapse: (state) => state.commonStore.showCollapse,
        showSearch: (state) => state.commonStore.showSearch,
        showSetting: (state) => state.commonStore.showSetting,
        showMenu: (state) => state.commonStore.showMenu,
        showColor: (state) => state.commonStore.showColor,
      }),
      ...mapGetters([
        'userInfo',
        'isFullScren',
        'tagWel',
        'tagList',
        'isCollapse',
        'tag',
        'logsLen',
        'logsFlag',
        'language',
      ]),
      getDay() {
        const {
          statusFlag = -1, daysRemaining
        } =
        JSON.parse(localStorage.getItem('ws_login_getTenantInfoByUser')) || {}
        return statusFlag * 1 === 2 ? daysRemaining + '' : ''
      },
      showTooltip() {
        return this.showList.indexOf(this.$route.name) > -1 && !this.showMenu
      },
    },
    methods: {
      ...mapActions('common', ['setLocalVessels']),
      ...mapActions('user', ['getUserInfo','toSetShow']),
      payCode() {
		  console.log('input', this.barCode)
        this.btnStatus = {
          status1: false,
          status2: false,
          status3: false,
          status4: false,
          status5: false,
          status6: false,
        }
        // let _userCompId = "2710b21efc1e4393930c5dc800010dc4"
        // let _qualityNo = "SGRK202112140060003"
        let _userCompId = this.barCode.split('&')[0].toLocaleLowerCase()
        let _qualityNo = this.barCode.split('&')[1]
        let _userHouseId = this.barCode.split('&')[2].toLocaleLowerCase()
        this.cangid = this.barCode.split('&')[2].toLocaleLowerCase()
        if(_userCompId.indexOf(',') != -1){
         _userCompId =  _userCompId.split(',')[1]
        }
        this.tmp = {
          compId: _userCompId,
          number: _qualityNo,
          warehouseId: _userHouseId
        }
        //  this.barCode = ''
        //判断当前账号公司是否是二维码上公司
        if (this.userINfo.userCompany != _userCompId) {
          console.log('请切换公司在试！')
          this.$message.error('当前身份不可操作');
           this.barCode = ''
          return
        }
        //判断二维码上的仓库当前账号是否有权限操作
        this.getLook(this.cangid,localStorage.getItem('ws-pf_staffName'))
        
      },
      compNameChange(){
      //   this.complogin({username:this.UserInfo.loginInfo.userMobilePhone,
      // password: localStorage.getItem('ws-pf_pass'),
      // companyName: this.compName})
      var userInfo={
        username:this.UserInfo.loginInfo.userMobilePhone,
      password: localStorage.getItem('ws-pf_pass'),
      companyName: this.compName
      }
      // var status=0
      const redirect = this.$route.query.redirect
    const { username, password, domainName, companyName } = userInfo
      complogin({
        username: username.trim(),
        password: password,
        domainName: domainName,
        companyName: companyName
      }).toPromise().then((res)=>{
        if(res.data.code=='AUTH_001'){
          Message({showClose: true,
            message: '公司不可切换',
            type: 'error'
          });
          this.compName=localStorage.getItem('ws-pf_compName')
          localStorage.setItem('status', 1)
        }else{
          const { compId,
            tenantId,
            vesselId,
            vesselBankFlag,
            clientFag,
            userId
          } = res.data.data
          // {TYPE='' MESSAGE} [第一次,失效].indexOf(type){type,msg,到期时间}
          // EventBus.$emit('success', '登录成功')
          localStorage.setItem('ws-pf_compId', compId)
          localStorage.setItem('status', 2)
          localStorage.setItem('ws-pf_userId', userId)
          localStorage.setItem('ws-pf_tenantId', tenantId)
          localStorage.setItem('ws-pf_vesselId', vesselId) // 仅适用于一条船
          localStorage.setItem('ws-pf_vesselBankFlag', vesselBankFlag) // 当前登录人是船端还是岸端的人员
          localStorage.setItem('ws-pf_clientFag', clientFag)
          notification.setSessionId(userId) // 设置通知唯一标识
          notification.start() // 开始监听通知
          // 查询当前租户服务类型
          isLandBased().toPromise().then(response => {
            localStorage.setItem('ws-pf_serviceTypeFlag', response)
          })
        companyInfo({ compId: compId }).toPromise().then((res1)=>{
            localStorage.setItem('ws-pf_organMonetaryKey', res1.organizationMonetaryKey)
            localStorage.setItem('ws-pf_compName', res1.compName)
            localStorage.setItem('ws-pf_compDomainName', res1.compDomainName)
            localStorage.setItem('ws-pf_organMonetaryValue', res1.organizationMonetaryValue)
           this.getUserInfo({ vesselBankFlag, compName:res1.compName })
          })
          
          
          this.toSetShow( userId)
          setToken('Admin-Token')
          localStorage.setItem('ws_login_type', 2)
            Cookies.set('ws_login_companyShortName', companyName, {
              expires: 365,
            })
            Cookies.set('ws_login_account', username, {
              expires: 365,
            })
            console.log(username, password, domainName, companyName)
            var rememberMe = Cookies.get('ws_login_rememberMe') === '1'
            if (rememberMe) {
              Cookies.set('ws_login_pwd', password, {
                expires: 365,
              })
              Cookies.set('ws_login_rememberMe', 1, {
                expires: 365
              })
            } else {
              Cookies.remove('ws_login_companyShortName')
              Cookies.remove('ws_login_account')
              Cookies.remove('ws_login_pwd')
              Cookies.set('ws_login_rememberMe', 0, {
                expires: 365
              })
            }
            console.log(redirect)
            
            if (redirect) {
              this.$router.push(redirect)
            } else {
              this.$router.push('/')
            }
              let newList = {
                companyName: companyName,
                username: username,
                password: password,
              }
              getTenantInfoByUser(newList).toPromise().then((res2)=>{
                console.log(res2)
                localStorage.setItem(
                'ws_login_getTenantInfoByUser',
                JSON.stringify({
                  ...res2,
                  loginInfo: res.data.data
                }))
                var that=this
                setTimeout(function(){
                  that.$router.go(0)
                },1000)
                
              })
           
            localStorage.setItem(
              'ws_login_accountId',
              JSON.stringify(res.data.data.accountId)
            )
            
        }
      })
      console.log(localStorage.getItem('status'))
          // } else {
          //   this.$message.error("您输入的用户名或密码错误!")
          //   return false
          // }
      },
      cancel(){
         this.barCode = ''
        this.smAlert = false
      },
      // 查看二维码仓库负责人
      async getLook(compId, userName) {
        await getLook({
            id: compId,
          })
          .toPromise()
          .then((response) => {
              if ( response.personCharge == userName || (response.otherPersonCharge && response.otherPersonCharge.indexOf(userName) != -1)) {
                  //扫码枪扫码后显示弹框
                   this.getQRCodeData(this.tmp)
              }else{
                console.log('你没有该权限，不可操作')
                 this.$message.error('当前身份不可操作');
                 this.barCode = ''
                 return
              }
            
          })
      },
      // 二维码获取数据
      async getQRCodeData(tmp) {
        await getQRCodeData(tmp)
          .toPromise()
          .then((response) => { 
            this.toPageData = response
            // 处理按钮显示状态
            // this.btnStatus 
            // 检斤状态
            let _status1 = response.status
            //质检状态
            let _status2 = response.qualityInspectionManagement.status
            // 付款状态
            let _status3 = response.paymentManagement?response.paymentManagement.status:''
            if (_status2 == '已初检' && _status1 == '已质检') {
              this.btnStatus.status1 = true
            } 
            if ((_status1 == '已称毛重' || _status1 == '已质检')) {
              this.btnStatus.status2 = true
            } 
            if (this.toPageData.qualityInspectionManagement.confirm != '1' && (_status1 == '已称毛重' || _status1 == '已质检')) {
              this.btnStatus.status3 = true
            } 
            if (  (_status1 == '已称毛重' || _status1 == '已质检')) {
              this.btnStatus.status4 = true
            } 
            if ( this.toPageData.qualityInspectionManagement.confirm != '0' &&  (_status1 == '已称毛重' || _status1 == '已称皮重') && _status3 == '') {
              this.btnStatus.status5 = true
            } 
            if ( this.toPageData.qualityInspectionManagement.confirm != '0' &&   _status1 == '已称皮重' && _status3 == '待结算')  {
              this.btnStatus.status6 = true
            }
            if (_status3 == '已结算') {
              this.$message.error('业务已完结');
            } else {
              this.smAlert = true
            }
          })
      },
      setCodeGun() {
        this.$refs['hiddenFocus'].focus()
      },
      focus(e) {
          setTimeout(() => {
        e.target.removeAttribute('readonly');
        }, 300)
        console.log('当前焦点状态')
        this.barCode = ''
        this.isOpenCodeGun = true
      },
      blur(e) {
         e.target.setAttribute('readonly', 'true');

        console.log('当前已失去焦点状态')
        this.isOpenCodeGun = false
      },
      goToPage(type) {
        var _saomadata = {}
        _saomadata.cangid = this.cangid
        _saomadata.id = this.toPageData.qualityInspectionManagement.id
        _saomadata.warehouseName = this.toPageData.qualityInspectionManagement.warehouseName
       _saomadata.managementType = this.toPageData.qualityInspectionManagement.serviceManagementType//贸易入库1 收购入库3
         this.barCode = ''
        let _url = ''
        if (type === 1) {
           _saomadata.type = 1
           localStorage.setItem('saoma_data',JSON.stringify(_saomadata))
          this.$router.push({
          	name: 'inspectionManagementNew'
          })
        } else if (type === 2) {
           _saomadata.type = 2
           localStorage.setItem('saoma_data',JSON.stringify(_saomadata))
            this.$router.push({
          	name: 'inspectionManagementNew'
          })
        } else if (type === 3) {
           _saomadata.type = 3
           localStorage.setItem('saoma_data',JSON.stringify(_saomadata))
            this.$router.push({
          	name: 'inspectionManagementNew'
          })
        } else if (type === 4) {
           _saomadata.typeNo = 1
           _saomadata.monitorUrl1 = this.toPageData.warehouseBaseInfo.monitorUrl1
           _saomadata.monitorUrl2 = this.toPageData.warehouseBaseInfo.monitorUrl2
           _saomadata.allowEdit = this.toPageData.warehouseBaseInfo.allowEdit
            localStorage.setItem('saoma_data',JSON.stringify(_saomadata))
             this.$router.push({
            name: 'newWeighingManagement'
          })
        } else if (type === 5) {
             localStorage.setItem('paymentManagementReturn', false)
          this.$router.push({
            name: 'settlement',
            query: {
              type: 1,
              id: this.toPageData.paymentManagement.id,
            },
          })
        } else if (type === 6) {
            _saomadata.typeNo = 2
           _saomadata.monitorUrl1 = this.toPageData.warehouseBaseInfo.monitorUrl1
           _saomadata.monitorUrl2 = this.toPageData.warehouseBaseInfo.monitorUrl2
           _saomadata.allowEdit = this.toPageData.warehouseBaseInfo.allowEdit
            localStorage.setItem('saoma_data',JSON.stringify(_saomadata))
           this.$router.push({
            name: 'newWeighingManagement',
          })
        }
        this.smAlert = false
      },
      //获取当前用户管理的仓库
      getUserWorseHouse() {

      },
      handleScreen() {
        fullscreenToggel()
      },
      setCollapse() {
        this.$store.commit('SET_COLLAPSE')
      },
      setScreen() {
        this.$store.commit('SET_FULLSCREN')
      },
      cancelPaw() {
        this.$refs.passwordMsg.resetFields()
      },
      // 修改管理员密码
      savePassword(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const data = {
              originalPassword: this.passwordMsg.originalPassword,
              password: this.passwordMsg.password,
            }
            changePasswordByPwd(data)
              .toPromise()
              .then(async() => {
                EventBus.$emit('success', this.$t('message.updateMessage'))
                this.passwordFlag = false

                  localStorage.removeItem('ws-pf_roleName')
                  localStorage.removeItem('ws-pf_roleId')
                  localStorage.removeItem('ws-pf_staffName')
                  localStorage.removeItem('ws-pf_deptId')
                  localStorage.removeItem('ws-pf_deptName')
                  localStorage.removeItem('ws-pf_organMonetaryKey')
                  localStorage.removeItem('ws-pf_organMonetaryValue')
                  localStorage.removeItem('ws-pf_vessels')
                  localStorage.removeItem('ws-pf_isLandBasedFlag')
                  await this.$store.dispatch('user/logout')
                  this.$router.push(
                    process.env.VUE_APP_PACKAGE_ENV === 'ship' ? '/ship_login' : '/login'
                  ) 
              })
          } else {
            EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
            return false
          }
        })
      },
      // async getUserInfo () {
      //   this.staffName = this.userInfo.staffName
      //   this.phone = this.userInfo.staffMobilePhone
      //   this.deptName = this.userInfo.deptName
      //   this.roleName = this.userInfo.showRoleName
      //   this.roleId = this.userInfo.showRoleId
      //   this.compName = this.userInfo.compName
      // },
      toggleSideBar() {
        this.$store.dispatch('app/toggleSideBar')
      },
      logout() {
        this.$confirm(this.$t('logoutTip'), this.$t('tip'), {
          confirmButtonText: this.$t('submitText'),
          cancelButtonText: this.$t('cancelText'),
          type: 'warning',
        }).then(async () => {
          localStorage.removeItem('ws-pf_roleName')
          localStorage.removeItem('ws-pf_roleId')
          localStorage.removeItem('ws-pf_staffName')
          localStorage.removeItem('ws-pf_deptId')
          localStorage.removeItem('ws-pf_deptName')
          localStorage.removeItem('ws-pf_organMonetaryKey')
          localStorage.removeItem('ws-pf_organMonetaryValue')
          localStorage.removeItem('ws-pf_vessels')
          localStorage.removeItem('ws-pf_isLandBasedFlag')
          await this.$store.dispatch('user/logout')
          this.$router.push(
            process.env.VUE_APP_PACKAGE_ENV === 'ship' ? '/ship_login' : '/login'
          )
        })
      },

    },
  }
</script>

<style lang="scss" scoped>
  .dayClass {
    font-size: 14px !important;

    span {
      font-weight: 600;
      font-size: 14px;
      color: #ff3838;
    }
  }

  .hamburger-container {
    line-height: 40px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }

  .breadcrumb-container {
    float: left;
    position: relative;
  }

  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  .right-menu {
    float: right;
    height: 100%;
    line-height: 40px;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      // vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }

    .avatar-container {
      margin-right: 30px;

      .avatar-wrapper {
        position: relative;

        span {
          height: 40px;
          line-height: 40px;
          font-size: 12px;
        }

        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 15px;
          font-size: 12px;
        }
      }
    }
  }

  .hidden-content {
    display: flex;
    font-size: 16px;
    margin-right: 20px;
    align-items: center;
  }

  .input-Style {
    opacity: 1;
    margin-right: 20px;
    // visibility: hidden;
  }

  .btn {
    background: #5878e8;
    color: white;
  }
  .btn-list{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .btn_css ,.btn{
    width: 80%;
    margin: 20px;
    height: auto;
    padding: 20px!important;
    font-size: 40px;
  }
  .compName{
    font-size: 16px;
  }
  .compName-row{
    // background: red;
    display: flex;
    height: 100%;
  }
  .code-scan-text{
    height: 30px;
    line-height: 30px;
    background: #EFF7FD;
    border-radius: 20px;
    color:#5473E8 ;
    border: 1px solid #5473E8;
    padding: 0 15px;
  }
</style>