yiliangyiyun-pc-jj/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 v-if="getDay" class="right-menu-item hover-effect dayClass">
        {{ $t('common.trialDays') }}
        <span style="padding: 0 2px">{{ getDay }}</span
        >{{ $t('common.days') }}
      </div>
      <div  class="right-menu-item hover-effect dayClass">
      {{compName}}
      </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 } from '@/model/indexRx'
import { mapActions, mapGetters, mapState } from 'vuex'
import { fullscreenToggel, listenfullscreen } from '@/utils/util'
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'

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 {
      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: '', // 二次输入密码
      },
      // roleName: '',
      // phone: '',
      // roleId: '',
      // deptName: '',
      // deptId: '',
      // staffName: '',
      compName: localStorage.getItem('ws-pf_compName'),
      account: localStorage.getItem('ws-pf_account'),
      // compName: '',
      companyId: localStorage.getItem('ws-pf_compId'),
    }
  },
  filters: {},
  created() {
    // this.getUserInfo()
  },
  mounted() {
    listenfullscreen(this.setScreen)
  },
  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']),
    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(() => {
              EventBus.$emit('success', this.$t('message.updateMessage'))
              this.passwordFlag = false
            })
        } 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;
      }
    }
  }
}
</style>